Merge remote-tracking branch 'upstream/master'

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: {}) {
     {
       <main>
         <section>
-          <label>Pick a mode:</label>
-          <div className='options'>
-            <a onClick={() => setExtensionSetting('redirect', true)} className={`button ${redirect ? 'active' : ''}`}>
-              Redirect
-            </a>
-            <a onClick={() => setExtensionSetting('redirect', false)} className={`button ${redirect ? '' : 'active'}`}>
-              Show a button
-            </a>
-          </div>
-        </section>
+            <label>Pick a mode</label>
+            <div className='options'>
+              <a onClick={() => setExtensionSetting('redirect', true)} className={`button ${redirect ? 'active' : ''}`}>
+                Redirect
+              </a>
+              <a onClick={() => setExtensionSetting('redirect', false)} className={`button ${redirect ? '' : 'active'}`}>
+                Show a button
+              </a>
+            </div>
+          </section>
+          {
+            !redirect &&
+            <section>
+              <label>Show button at:</label>
+              <b className='filled'>Video</b>
+              <div className='options'>
+                <div className="left">
+                  <span>Subscribe Button:</span>
+                </div>
+                <a onClick={() => setExtensionSetting('videoSubButton', !videoSubButton)} className={`button ${videoSubButton ? 'active' : ''}`}>
+                  {videoSubButton ? 'Active' : 'Deactive'}
+                </a>
+              </div>
+              <div className='options'>
+                <div className="left">
+                  <span>Video Player:</span>
+                </div>
+                <a onClick={() => setExtensionSetting('videoPlayerButton', !videoPlayerButton)} className={`button ${videoPlayerButton ? 'active' : ''}`}>
+                  {videoPlayerButton ? 'Active' : 'Deactive'}
+                </a>
+              </div>
+              <b className='filled'>Channel</b>
+              <div className='options'>
+                <div className="left">
+                  <span>Subscribe Button:</span>
+                </div>
+                <a onClick={() => setExtensionSetting('channelSubButton', !channelSubButton)} className={`button ${channelSubButton ? 'active' : ''}`}>
+                  {channelSubButton ? 'Active' : 'Deactive'}
+                </a>
+              </div>
+            </section>
+          }
         <section>
           <a onClick={() => loads(lbryUrlCache.clearAll().then(() => dialogManager.alert("Cleared Cache!")))} className={`button active`}>
             Clear Resolver Cache

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;
 }

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(<WatchOnLbryPlayerButton />, 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(<WatchOnLbryPlayerButton />, playerButtonMountPoint)
+      else {
+        if (playerButtonMountPoint.getAttribute('data-id') !== params.source.id) {
+          mountPlayerButtonBefore.parentElement?.insertBefore(playerButtonMountPoint, mountPlayerButtonBefore)
+          playerButtonMountPoint.setAttribute('data-id', params.source.id)
+        }
+        render(<WatchOnLbryPlayerButton target={params.target} source={params.source} />, playerButtonMountPoint)
       }
-      render(<WatchOnLbryPlayerButton target={params.target} source={params.source} />, playerButtonMountPoint)
     }
 
-    const mountButtonBefore = document.querySelector(params.source.platform.htmlQueries.mountPoints.mountButtonBefore[params.source.type])
-    if (!mountButtonBefore) render(<WatchOnLbryButton />, 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(<WatchOnLbryButton />, buttonMountPoint)
+      else {
+        if (buttonMountPoint.getAttribute('data-id') !== params.source.id) {
+          mountButtonBefore.parentElement?.insertBefore(buttonMountPoint, mountButtonBefore)
+          buttonMountPoint.setAttribute('data-id', params.source.id)
+        }
+        render(<WatchOnLbryButton target={params.target} source={params.source} />, buttonMountPoint)
       }
-      render(<WatchOnLbryButton target={params.target} source={params.source} />, buttonMountPoint)
     }
   }
 

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<ExtensionSettings> {
@@ -89,11 +95,11 @@ const sourcePlatform = (o: {
   htmlQueries: {
     mountPoints: {
       mountButtonBefore: Record<ResolveUrlTypes, string>,
-      mountPlayerButtonBefore: string | null,
+      mountPlayerButtonBefore: string,
     }
     videoPlayer: string,
     videoDescription: string
-    channelLinks: string | null
+    channelLinks: string
   }
 }) => o
 export type SourcePlatform = ReturnType<typeof sourcePlatform>
@@ -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'
     }
   })
 }