From 9edd318a35922de0d2b8f9b5f3a4cb23ccc4b079 Mon Sep 17 00:00:00 2001 From: Shiba <44804845+DeepDoge@users.noreply.github.com> Date: Sun, 7 Aug 2022 10:30:06 +0000 Subject: [PATCH] =?UTF-8?q?=F0=9F=8D=99=20added=20option=20for=20where=20t?= =?UTF-8?q?o=20show=20the=20buttons?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/popup/main.tsx | 38 ++++++++++++++++++++++++++++++++--- src/pages/popup/style.css | 21 ++++++++++++++++---- src/scripts/ytContent.tsx | 42 ++++++++++++++++++++++----------------- src/settings/index.ts | 18 +++++++++++------ 4 files changed, 88 insertions(+), 31 deletions(-) diff --git a/src/pages/popup/main.tsx b/src/pages/popup/main.tsx index 41bc743..abd0562 100644 --- a/src/pages/popup/main.tsx +++ b/src/pages/popup/main.tsx @@ -12,7 +12,7 @@ const targetPlatforms = getTargetPlatfromSettingsEntiries() const ytUrlResolverOptions = getYtUrlResolversSettingsEntiries() function WatchOnLbryPopup(params: { profile: Awaited> | null }) { - const { redirect, targetPlatform, urlResolver, privateKey, publicKey } = useExtensionSettings() + const { redirect, targetPlatform, urlResolver, videoSubButton, channelSubButton, videoPlayerButton, privateKey, publicKey } = useExtensionSettings() let [loading, updateLoading] = useState(() => false) let [route, updateRoute] = useState(() => null) @@ -100,7 +100,7 @@ function WatchOnLbryPopup(params: { profile: AwaitedPurge your profile and data!

Purge your profile data online and offline.

-
+
(╯°□°）╯︵ ┻━┻
loads(purgeProfile(dialogManager)).then(() => renderPopup())} className={`button`}> @@ -140,7 +140,7 @@ function WatchOnLbryPopup(params: { profile: Awaited
- +
+ { + !redirect && +
+ + Video + + + Channel + +
+ }
diff --git a/src/pages/popup/style.css b/src/pages/popup/style.css index bb6f577..3b0bd64 100644 --- a/src/pages/popup/style.css +++ b/src/pages/popup/style.css @@ -27,8 +27,14 @@ section>label { text-align: center; } -section>.options { - padding: 0 1.5em; +section>b { + display: block; + width: 100%; + text-align: left; +} + +section>* { + padding: 0 1rem; } #popup { @@ -38,7 +44,14 @@ section>.options { margin: auto; } -.purge-aaaaaaa { +.center { display: grid; - justify-items: center; + place-items: center; +} + +.left { + display: grid; + justify-items: start; + align-items: center; + text-align: left; } \ No newline at end of file diff --git a/src/scripts/ytContent.tsx b/src/scripts/ytContent.tsx index aad404f..1277ae1 100644 --- a/src/scripts/ytContent.tsx +++ b/src/scripts/ytContent.tsx @@ -29,10 +29,10 @@ import { getExtensionSettingsAsync, getSourcePlatfromSettingsFromHostname, getTa }) const buttonMountPoint = document.createElement('div') - buttonMountPoint.style.display = 'flex' + buttonMountPoint.style.display = 'inline-flex' const playerButtonMountPoint = document.createElement('div') - playerButtonMountPoint.style.display = 'flex' + playerButtonMountPoint.style.display = 'inline-flex' function WatchOnLbryButton({ source, target }: { source?: Source, target?: Target }) { if (!target || !source) return null @@ -118,26 +118,32 @@ import { getExtensionSettingsAsync, getSourcePlatfromSettingsFromHostname, getTa return } - const mountPlayerButtonBefore = params.source.platform.htmlQueries.mountPoints.mountPlayerButtonBefore ? - document.querySelector(params.source.platform.htmlQueries.mountPoints.mountPlayerButtonBefore) : - null - if (!mountPlayerButtonBefore) render(, playerButtonMountPoint) - else { - if (playerButtonMountPoint.getAttribute('data-id') !== params.source.id) { - mountPlayerButtonBefore.parentElement?.insertBefore(playerButtonMountPoint, mountPlayerButtonBefore) - playerButtonMountPoint.setAttribute('data-id', params.source.id) + { + const mountPlayerButtonBefore = settings.videoPlayerButton ? + document.querySelector(params.source.platform.htmlQueries.mountPoints.mountPlayerButtonBefore) : + null + if (!mountPlayerButtonBefore) render(, playerButtonMountPoint) + else { + if (playerButtonMountPoint.getAttribute('data-id') !== params.source.id) { + mountPlayerButtonBefore.parentElement?.insertBefore(playerButtonMountPoint, mountPlayerButtonBefore) + playerButtonMountPoint.setAttribute('data-id', params.source.id) + } + render(, playerButtonMountPoint) } - render(, playerButtonMountPoint) } - const mountButtonBefore = document.querySelector(params.source.platform.htmlQueries.mountPoints.mountButtonBefore[params.source.type]) - if (!mountButtonBefore) render(, playerButtonMountPoint) - else { - if (buttonMountPoint.getAttribute('data-id') !== params.source.id) { - mountButtonBefore.parentElement?.insertBefore(buttonMountPoint, mountButtonBefore) - buttonMountPoint.setAttribute('data-id', params.source.id) + { + const mountButtonBefore = settings[(`${params.source.type}SubButton`) as 'videoSubButton' | 'channelSubButton'] ? + document.querySelector(params.source.platform.htmlQueries.mountPoints.mountButtonBefore[params.source.type]) : + null + if (!mountButtonBefore) render(, buttonMountPoint) + else { + if (buttonMountPoint.getAttribute('data-id') !== params.source.id) { + mountButtonBefore.parentElement?.insertBefore(buttonMountPoint, mountButtonBefore) + buttonMountPoint.setAttribute('data-id', params.source.id) + } + render(, buttonMountPoint) } - render(, buttonMountPoint) } } diff --git a/src/settings/index.ts b/src/settings/index.ts index 2ea575a..e32e92c 100644 --- a/src/settings/index.ts +++ b/src/settings/index.ts @@ -5,7 +5,10 @@ import type { ResolveUrlTypes } from "../modules/yt/urlResolve" export interface ExtensionSettings { redirect: boolean targetPlatform: TargetPlatformName - urlResolver: YTUrlResolverName + urlResolver: YTUrlResolverName, + videoSubButton: boolean + videoPlayerButton: boolean + channelSubButton: boolean publicKey: string | null, privateKey: string | null } @@ -14,6 +17,9 @@ export const DEFAULT_SETTINGS: ExtensionSettings = { redirect: true, targetPlatform: 'odysee', urlResolver: 'odyseeApi', + videoSubButton: true, + videoPlayerButton: true, + channelSubButton: true, privateKey: null, publicKey: null } @@ -115,11 +121,11 @@ const sourcePlatform = (o: { htmlQueries: { mountPoints: { mountButtonBefore: Record, - mountPlayerButtonBefore: string | null, + mountPlayerButtonBefore: string, } videoPlayer: string, videoDescription: string - channelLinks: string | null + channelLinks: string } }) => o export type SourcePlatform = ReturnType @@ -152,14 +158,14 @@ export const sourcePlatfromSettings = { mountPoints: { mountButtonBefore: { - video: '#watch-on-youtube', + video: '#subscribe', channel: '#subscribe' }, - mountPlayerButtonBefore: null, + mountPlayerButtonBefore: '#player-container ~ .h-box > h1 > a', }, videoPlayer: '#player-container video', videoDescription: '#descriptionWrapper', - channelLinks: null + channelLinks: '#descriptionWrapper' } }) }