diff --git a/src/pages/popup/main.tsx b/src/pages/popup/main.tsx index 01dc12f..0d36c66 100644 --- a/src/pages/popup/main.tsx +++ b/src/pages/popup/main.tsx @@ -5,7 +5,7 @@ import { lbryUrlCache } from '../../modules/yt/urlCache' import { setExtensionSetting, targetPlatformSettings, useExtensionSettings } from '../../settings' function WatchOnLbryPopup(params: {}) { - const { redirect } = useExtensionSettings() + const { redirect, videoSubButton, channelSubButton, videoPlayerButton } = useExtensionSettings() let [loading, updateLoading] = useState(() => false) const dialogManager = createDialogManager() @@ -36,16 +36,48 @@ function WatchOnLbryPopup(params: {}) { {
- -
- setExtensionSetting('redirect', true)} className={`button ${redirect ? 'active' : ''}`}> - Redirect - - setExtensionSetting('redirect', false)} className={`button ${redirect ? '' : 'active'}`}> - Show a button - -
-
+ +
+ setExtensionSetting('redirect', true)} className={`button ${redirect ? 'active' : ''}`}> + Redirect + + setExtensionSetting('redirect', false)} className={`button ${redirect ? '' : 'active'}`}> + Show a button + +
+ + { + !redirect && +
+ + Video +
+
+ Subscribe Button: +
+ setExtensionSetting('videoSubButton', !videoSubButton)} className={`button ${videoSubButton ? 'active' : ''}`}> + {videoSubButton ? 'Active' : 'Deactive'} + +
+
+
+ Video Player: +
+ setExtensionSetting('videoPlayerButton', !videoPlayerButton)} className={`button ${videoPlayerButton ? 'active' : ''}`}> + {videoPlayerButton ? 'Active' : 'Deactive'} + +
+ Channel +
+
+ Subscribe Button: +
+ setExtensionSetting('channelSubButton', !channelSubButton)} className={`button ${channelSubButton ? 'active' : ''}`}> + {channelSubButton ? 'Active' : 'Deactive'} + +
+
+ }
loads(lbryUrlCache.clearAll().then(() => dialogManager.alert("Cleared Cache!")))} className={`button active`}> Clear Resolver Cache diff --git a/src/pages/popup/style.css b/src/pages/popup/style.css index 09cceb0..40d112e 100644 --- a/src/pages/popup/style.css +++ b/src/pages/popup/style.css @@ -31,8 +31,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 { @@ -42,7 +48,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 35ff495..5e5c85d 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 915f1bd..276725d 100644 --- a/src/settings/index.ts +++ b/src/settings/index.ts @@ -5,13 +5,19 @@ import type { ResolveUrlTypes } from "../modules/yt/urlResolve" export interface ExtensionSettings { redirect: boolean targetPlatform: TargetPlatformName - urlResolver: YTUrlResolverName + urlResolver: YTUrlResolverName, + videoSubButton: boolean + videoPlayerButton: boolean + channelSubButton: boolean } export const DEFAULT_SETTINGS: ExtensionSettings = { redirect: true, targetPlatform: 'odysee', - urlResolver: 'odyseeApi' + urlResolver: 'odyseeApi', + videoSubButton: true, + videoPlayerButton: true, + channelSubButton: true, } export function getExtensionSettingsAsync(): Promise { @@ -89,11 +95,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 @@ -126,14 +132,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' } }) }