Merge pull request #131 from DeepDoge/master

Added option for where to show the buttons

src/pages/popup/main.tsx

@@ -12,7 +12,7 @@ const targetPlatforms = getTargetPlatfromSettingsEntiries()
 const ytUrlResolverOptions = getYtUrlResolversSettingsEntiries()
 
 function WatchOnLbryPopup(params: { profile: Awaited<ReturnType<typeof getProfile>> | 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<string | null>(() => null)
 
@@ -100,7 +100,7 @@ function WatchOnLbryPopup(params: { profile: Awaited<ReturnType<typeof getProfil
               <label>Purge your profile and data!</label>
               <p>Purge your profile data online and offline.</p>
               <div className='options'>
-                <div className="purge-aaaaaaa">
+                <div className="center">
                   <span className='filled'>(╯°□°）╯︵ ┻━┻</span>
                 </div>
                 <a onClick={() => loads(purgeProfile(dialogManager)).then(() => renderPopup())} className={`button`}>
@@ -140,7 +140,7 @@ function WatchOnLbryPopup(params: { profile: Awaited<ReturnType<typeof getProfil
         :
         <main>
           <section>
-            <label>Pick a mode:</label>
+            <label>Pick a mode</label>
             <div className='options'>
               <a onClick={() => setExtensionSetting('redirect', true)} className={`button ${redirect ? 'active' : ''}`}>
                 Redirect
@@ -150,6 +150,38 @@ function WatchOnLbryPopup(params: { profile: Awaited<ReturnType<typeof getProfil
               </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>
             <label>Which platform you would like to redirect?</label>
             <div className='options'>

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

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,7 +118,8 @@ import { getExtensionSettingsAsync, getSourcePlatfromSettingsFromHostname, getTa
       return
     }
 
-    const mountPlayerButtonBefore = params.source.platform.htmlQueries.mountPoints.mountPlayerButtonBefore ?
+    {
+      const mountPlayerButtonBefore = settings.videoPlayerButton ?
         document.querySelector(params.source.platform.htmlQueries.mountPoints.mountPlayerButtonBefore) :
         null
       if (!mountPlayerButtonBefore) render(<WatchOnLbryPlayerButton />, playerButtonMountPoint)
@@ -129,9 +130,13 @@ import { getExtensionSettingsAsync, getSourcePlatfromSettingsFromHostname, getTa
         }
         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)
+    {
+      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)
@@ -140,6 +145,7 @@ import { getExtensionSettingsAsync, getSourcePlatfromSettingsFromHostname, getTa
         render(<WatchOnLbryButton target={params.target} source={params.source} />, buttonMountPoint)
       }
     }
+  }
 
   async function findVideoElementAwait(source: Source) {
     let videoElement: HTMLVideoElement | null = null

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<ResolveUrlTypes, string>,
-      mountPlayerButtonBefore: string | null,
+      mountPlayerButtonBefore: string,
     }
     videoPlayer: string,
     videoDescription: string
-    channelLinks: string | null
+    channelLinks: string
   }
 }) => o
 export type SourcePlatform = ReturnType<typeof sourcePlatform>
@@ -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'
     }
   })
 }