From 29c9b2829a1f9a6850f750e08c82e4af3a3438c9 Mon Sep 17 00:00:00 2001 From: Shiba <44804845+DeepDoge@users.noreply.github.com> Date: Sun, 24 Jul 2022 23:18:34 +0000 Subject: [PATCH] =?UTF-8?q?=F0=9F=8D=A3=20New=20button=20on=20the=20video?= =?UTF-8?q?=20player?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/scripts/ytContent.tsx | 77 +++++++++++++++++++++++++++++++++------ src/settings/index.ts | 36 +++++++++++++----- 2 files changed, 92 insertions(+), 21 deletions(-) diff --git a/src/scripts/ytContent.tsx b/src/scripts/ytContent.tsx index 86d1f7b..bc8e9e6 100644 --- a/src/scripts/ytContent.tsx +++ b/src/scripts/ytContent.tsx @@ -28,8 +28,11 @@ import { getExtensionSettingsAsync, getSourcePlatfromSettingsFromHostname, getTa Object.assign(settings, Object.fromEntries(Object.entries(changes).map(([key, change]) => [key, change.newValue]))) }) - const mountPoint = document.createElement('div') - mountPoint.style.display = 'flex' + const buttonMountPoint = document.createElement('div') + buttonMountPoint.style.display = 'flex' + + const playerButtonMountPoint = document.createElement('div') + playerButtonMountPoint.style.display = 'flex' function WatchOnLbryButton({ source, target }: { source?: Source, target?: Target }) { if (!target || !source) return null @@ -60,19 +63,65 @@ import { getExtensionSettingsAsync, getSourcePlatfromSettingsFromHostname, getTa > - {target.type === 'channel' ? 'Channel on' : 'Watch on'} {target.platform.displayName} + {target.type === 'channel' ? 'Channel on' : 'Watch on'} {target.platform.button.platformNameText} + + + } + + function WatchOnLbryPlayerButton({ source, target }: { source?: Source, target?: Target }) { + if (!target || !source) return null + const url = getLbryUrlByTarget(target) + + return
+ findVideoElementAwait(source).then((videoElement) => { + videoElement.pause() + })} + > + + {target.type === 'channel' ? 'Channel on' : 'Watch on'} {target.platform.button.platformNameText}
} function updateButton(params: { source: Source, target: Target } | null): void { - if (!params) return render(, mountPoint) + if (!params) { + render(, buttonMountPoint) + render(, playerButtonMountPoint) + return + } - const mountBefore = document.querySelector(params.source.platform.htmlQueries.mountButtonBefore[params.source.type]) - if (!mountBefore) return render(, mountPoint) + const mountPlayerButtonBefore = params.source.platform.htmlQueries.mountPoints.mountPlayerButtonBefore ? + document.querySelector(params.source.platform.htmlQueries.mountPoints.mountPlayerButtonBefore) : + null + if (!mountPlayerButtonBefore) render(, playerButtonMountPoint) + else { + if (mountPlayerButtonBefore.previousSibling !== playerButtonMountPoint) + mountPlayerButtonBefore.parentElement?.insertBefore(playerButtonMountPoint, mountPlayerButtonBefore) + render(, playerButtonMountPoint) + } - mountBefore.parentElement?.insertBefore(mountPoint, mountBefore) - render(, mountPoint) + const mountButtonBefore = document.querySelector(params.source.platform.htmlQueries.mountPoints.mountButtonBefore[params.source.type]) + if (!mountButtonBefore) render(, playerButtonMountPoint) + else { + if (mountButtonBefore.previousSibling !== buttonMountPoint) + mountButtonBefore.parentElement?.insertBefore(buttonMountPoint, mountButtonBefore) + render(, buttonMountPoint) + } } async function findVideoElementAwait(source: Source) { @@ -205,9 +254,15 @@ import { getExtensionSettingsAsync, getSourcePlatfromSettingsFromHostname, getTa // There is no target found via API try to check Video Description for LBRY links. if (!target) { - const descriptionElement = document.querySelector(source.platform.htmlQueries.videoDescription) - if (descriptionElement) { - const anchors = Array.from(descriptionElement.querySelectorAll('a')) + const linksContainer = + source.type === 'video' ? + document.querySelector(source.platform.htmlQueries.videoDescription) : + source.platform.htmlQueries.channelLinks ? document.querySelector(source.platform.htmlQueries.channelLinks) : null + + console.log(linksContainer) + + if (linksContainer) { + const anchors = Array.from(linksContainer.querySelectorAll('a')) for (const anchor of anchors) { if (!anchor.href) continue diff --git a/src/settings/index.ts b/src/settings/index.ts index 26698f2..e71dd40 100644 --- a/src/settings/index.ts +++ b/src/settings/index.ts @@ -60,6 +60,7 @@ const targetPlatform = (o: { displayName: string theme: string button: { + platformNameText: string, icon: string style?: { @@ -79,6 +80,7 @@ export const targetPlatformSettings = { displayName: 'Madiator.com', theme: 'linear-gradient(130deg, #499375, #43889d)', button: { + platformNameText: '', icon: chrome.runtime.getURL('assets/icons/lbry/madiator-logo.svg'), style: { button: { flexDirection: 'row-reverse' }, @@ -91,6 +93,7 @@ export const targetPlatformSettings = { displayName: 'Odysee', theme: 'linear-gradient(130deg, #c63d59, #f77937)', button: { + platformNameText: 'Odysee', icon: chrome.runtime.getURL('assets/icons/lbry/odysee-logo.svg') } }), @@ -99,6 +102,7 @@ export const targetPlatformSettings = { displayName: 'LBRY App', theme: 'linear-gradient(130deg, #499375, #43889d)', button: { + platformNameText: 'LBRY', icon: chrome.runtime.getURL('assets/icons/lbry/lbry-logo.svg') } }), @@ -109,9 +113,13 @@ export const targetPlatformSettings = { const sourcePlatform = (o: { hostnames: string[] htmlQueries: { - mountButtonBefore: Record, + mountPoints: { + mountButtonBefore: Record, + mountPlayerButtonBefore: string | null, + } videoPlayer: string, videoDescription: string + channelLinks: string | null } }) => o export type SourcePlatform = ReturnType @@ -126,24 +134,32 @@ export const sourcePlatfromSettings = { "youtube.com": sourcePlatform({ hostnames: ['www.youtube.com'], htmlQueries: { - mountButtonBefore: { - video: 'ytd-video-owner-renderer~#subscribe-button', - channel: '#channel-header-container #buttons' + mountPoints: { + mountButtonBefore: { + video: 'ytd-video-owner-renderer~#subscribe-button', + channel: '#channel-header-container #buttons' + }, + mountPlayerButtonBefore: 'ytd-player .ytp-right-controls', }, videoPlayer: '#ytd-player video', - videoDescription: 'ytd-video-secondary-info-renderer #description' + videoDescription: 'ytd-video-secondary-info-renderer #description', + channelLinks: '#channel-header #links-holder' } }), "yewtu.be": sourcePlatform({ hostnames: ['yewtu.be', 'vid.puffyan.us', 'invidio.xamh.de', 'invidious.kavin.rocks'], htmlQueries: { - mountButtonBefore: - { - video: '#watch-on-youtube', - channel: '#subscribe' + mountPoints: { + mountButtonBefore: + { + video: '#watch-on-youtube', + channel: '#subscribe' + }, + mountPlayerButtonBefore: null, }, videoPlayer: '#player-container video', - videoDescription: '#descriptionWrapper' + videoDescription: '#descriptionWrapper', + channelLinks: null } }) }