🍣 New button on the video player

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
       >
         <img src={target.platform.button.icon} height={16}
           style={{ transform: 'scale(1.5)', ...target.platform.button.style?.icon }} />
-        <span>{target.type === 'channel' ? 'Channel on' : 'Watch on'} {target.platform.displayName}</span>
+        <span>{target.type === 'channel' ? 'Channel on' : 'Watch on'} {target.platform.button.platformNameText}</span>
+      </a>
+    </div>
+  }
+
+  function WatchOnLbryPlayerButton({ source, target }: { source?: Source, target?: Target }) {
+    if (!target || !source) return null
+    const url = getLbryUrlByTarget(target)
+
+    return <div style={{ display: 'flex', justifyContent: 'center', flexDirection: 'column' }}>
+      <a href={`${url.href}`} target={target.platform === targetPlatformSettings.app ? '' : '_blank'} role='button'
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          gap: '12px',
+          fontWeight: 'bold',
+          border: '0',
+          color: 'whitesmoke',
+          marginRight: '10px',
+          fontSize: '14px',
+          textDecoration: 'none',
+          ...target.platform.button.style?.button,
+        }}
+        onClick={() => findVideoElementAwait(source).then((videoElement) => {
+          videoElement.pause()
+        })}
+      >
+        <img src={target.platform.button.icon} height={16}
+          style={{ transform: 'scale(1.5)', ...target.platform.button.style?.icon }} />
+        <span>{target.type === 'channel' ? 'Channel on' : 'Watch on'} {target.platform.button.platformNameText}</span>
       </a>
     </div>
   }
 
   function updateButton(params: { source: Source, target: Target } | null): void {
-    if (!params) return render(<WatchOnLbryButton />, mountPoint)
+    if (!params) {
+      render(<WatchOnLbryButton />, buttonMountPoint)
+      render(<WatchOnLbryPlayerButton />, playerButtonMountPoint)
+      return
+    }
 
-    const mountBefore = document.querySelector(params.source.platform.htmlQueries.mountButtonBefore[params.source.type])
-    if (!mountBefore) return render(<WatchOnLbryButton />, mountPoint)
+    const mountPlayerButtonBefore = params.source.platform.htmlQueries.mountPoints.mountPlayerButtonBefore ?
+      document.querySelector(params.source.platform.htmlQueries.mountPoints.mountPlayerButtonBefore) :
+      null
+    if (!mountPlayerButtonBefore) render(<WatchOnLbryPlayerButton />, playerButtonMountPoint)
+    else {
+      if (mountPlayerButtonBefore.previousSibling !== playerButtonMountPoint)
+        mountPlayerButtonBefore.parentElement?.insertBefore(playerButtonMountPoint, mountPlayerButtonBefore)
+      render(<WatchOnLbryPlayerButton target={params.target} source={params.source} />, playerButtonMountPoint)
+    }
 
-    mountBefore.parentElement?.insertBefore(mountPoint, mountBefore)
-    render(<WatchOnLbryButton target={params.target} source={params.source} />, mountPoint)
+    const mountButtonBefore = document.querySelector(params.source.platform.htmlQueries.mountPoints.mountButtonBefore[params.source.type])
+    if (!mountButtonBefore) render(<WatchOnLbryButton />, playerButtonMountPoint)
+    else {
+      if (mountButtonBefore.previousSibling !== buttonMountPoint)
+        mountButtonBefore.parentElement?.insertBefore(buttonMountPoint, mountButtonBefore)
+      render(<WatchOnLbryButton target={params.target} source={params.source} />, 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<HTMLAnchorElement>('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<HTMLAnchorElement>('a'))
 
             for (const anchor of anchors) {
               if (!anchor.href) continue

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: {
+    mountPoints: {
       mountButtonBefore: Record<ResolveUrlTypes, string>,
+      mountPlayerButtonBefore: string | null,
+    }
     videoPlayer: string,
     videoDescription: string
+    channelLinks: string | null
   }
 }) => o
 export type SourcePlatform = ReturnType<typeof sourcePlatform>
@@ -126,24 +134,32 @@ export const sourcePlatfromSettings = {
   "youtube.com": sourcePlatform({
     hostnames: ['www.youtube.com'],
     htmlQueries: {
+      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: {
+      mountPoints: {
         mountButtonBefore:
         {
           video: '#watch-on-youtube',
           channel: '#subscribe'
         },
+        mountPlayerButtonBefore: null,
+      },
       videoPlayer: '#player-container video',
-      videoDescription: '#descriptionWrapper'
+      videoDescription: '#descriptionWrapper',
+      channelLinks: null
     }
   })
 }