Merge pull request #134 from DeepDoge/master

Major changes

src/pages/YTtoLBRY/README.md

@@ -1,6 +0,0 @@
-# Getting your subscription data
-
-1. Go to https://takeout.google.com/settings/takeout
-2. Deselect everything except `YouTube and YouTube Music` and within that only select `subscriptions`
-3. Go through the process and create the export
-4. Once it's exported, open the archive and find `YouTube and YouTube Music/subscriptions/subscriptions.json` and upload it to the extension

src/pages/YTtoLBRY/main.tsx

@@ -4,7 +4,6 @@ import { getFileContent } from '../../modules/file'
 import { getSubsFromCsv, getSubsFromJson, getSubsFromOpml } from '../../modules/yt'
 import { resolveById } from '../../modules/yt/urlResolve'
 import { targetPlatformSettings, useExtensionSettings } from '../../settings'
-import readme from './README.md'
 
 async function getSubscribedChannelIdsFromFile(file: File) {
   const ext = file.name.split('.').pop()?.toLowerCase()
@@ -71,8 +70,15 @@ function YTtoLBRY() {
     <Conversion />
     <aside class="help">
       <iframe allowFullScreen
-        src='https://lbry.tv/$/embed/howtouseconverter/c9827448d6ac7a74ecdb972c5cdf9ddaf648a28e' />
-      <section dangerouslySetInnerHTML={{ __html: readme }} />
+        src='https://odysee.com/$/embed/convert-subscriptions-from-YouTube-to-LBRY/36f3a010295afe1c55e91b63bcb2eabc028ec86c?r=8bgP4hEdbd9jwBJmhEaqP3dD75LzsUob' />
+      <section><h1 id="getting-your-subscription-data">Getting your subscription data</h1>
+        <ol>
+          <li>Go to <a href="https://takeout.google.com/settings/takeout" target='_blank'>https://takeout.google.com/settings/takeout</a></li>
+          <li>Deselect everything except <code>YouTube and YouTube Music</code> and within that only select <code>subscriptions</code></li>
+          <li>Go through the process and create the export</li>
+          <li>Once it's exported, open the archive and find <code>YouTube and YouTube Music/subscriptions/subscriptions.(json/csv/opml)</code> and upload it to the extension</li>
+        </ol>
+      </section>
     </aside>
   </main>
 }

src/pages/popup/main.tsx

@@ -12,9 +12,9 @@ const targetPlatforms = getTargetPlatfromSettingsEntiries()
 const ytUrlResolverOptions = getYtUrlResolversSettingsEntiries()
 
 function WatchOnLbryPopup(params: { profile: Awaited<ReturnType<typeof getProfile>> | null }) {
-  const { redirect, targetPlatform, urlResolver, videoSubButton, channelSubButton, videoPlayerButton, privateKey, publicKey } = useExtensionSettings()
+  const { targetPlatform, urlResolver, redirectChannel, redirectVideo, redirectVideoPlaylist, buttonVideoSub, buttonChannelSub, buttonVideoPlayer, privateKey, publicKey } = useExtensionSettings()
   let [loading, updateLoading] = useState(() => false)
-  let [route, updateRoute] = useState<string | null>(() => null)
+  let [route, updateRoute] = useState<string>(() => '')
 
   const dialogManager = createDialogManager()
   const nickname = params.profile ? params.profile.nickname ?? 'No Nickname' : '...'
@@ -35,29 +35,30 @@ function WatchOnLbryPopup(params: { profile: Awaited<ReturnType<typeof getProfil
   return <div id='popup'>
     <Dialogs manager={dialogManager} />
     {
-      publicKey
-        ? <header>
+
+      <header>
+        {
+          publicKey &&
           <section>
             <label>{nickname}</label>
             <p>{friendlyPublicKey(publicKey)}</p>
             <span><b>Score: {params.profile?.score ?? '...'}</b> - <a target='_blank' href="https://finder.madiator.com/leaderboard" class="filled">🔗Leaderboard</a></span>
             {urlResolver !== 'madiatorFinder' && <span class="error">You need to use Madiator Finder API for scoring to work</span>}
           </section>
-          <section>
-            {
-              route === 'profile'
-                ? <a onClick={() => updateRoute('')} className="filled">⇐ Back</a>
-                : <a className='filled' onClick={() => updateRoute('profile')} href="#profile">Profile Settings</a>
-            }
-          </section>
-        </header>
-        : <header>
-          {
-            route === 'profile'
-              ? <a onClick={() => updateRoute('')} className="filled">⇐ Back</a>
-              : <a className='filled' onClick={() => updateRoute('profile')} href="#profile">Profile Settings</a>
-          }
-        </header>
+        }
+
+        {
+          route !== ''
+            ?
+            <section>
+              <a onClick={() => updateRoute('')} className="filled">⇐ Back</a>
+            </section>
+            :
+            <section>
+                <a className='filled' onClick={() => updateRoute('profile')}>Profile Settings</a>
+            </section>
+        }
+      </header>
     }
     {
       route === 'profile' ?
@@ -138,80 +139,88 @@ function WatchOnLbryPopup(params: { profile: Awaited<ReturnType<typeof getProfil
             </section>
           </main>
         :
-        <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>
-          {
-            !redirect &&
+        route === 'advanced' ?
+          <main>
             <section>
-              <label>Show button at:</label>
-              <b className='filled'>Video</b>
+              <label>Which platform you would like to redirect to?</label>
               <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>
+                {targetPlatforms.map(([name, value]) =>
+                  <a onClick={() => setExtensionSetting('targetPlatform', name)} className={`button ${targetPlatform === name ? 'active' : ''}`}>
+                    {value.displayName}
+                  </a>
+                )}
               </div>
             </section>
-          }
-          <section>
-            <label>Which platform you would like to redirect?</label>
-            <div className='options'>
-              {targetPlatforms.map(([name, value]) =>
-                <a onClick={() => setExtensionSetting('targetPlatform', name)} className={`button ${targetPlatform === name ? 'active' : ''}`}>
-                  {value.displayName}
-                </a>
-              )}
-            </div>
-          </section>
-          <section>
-            <label>Which resolver API you want to use?</label>
-            <div className='options'>
-              {ytUrlResolverOptions.map(([name, value]) =>
-                <a onClick={() => setExtensionSetting('urlResolver', name)} className={`button ${urlResolver === name ? 'active' : ''}`}>
-                  {value.name}
-                </a>
-              )}
-            </div>
-            <a onClick={() => loads(lbryUrlCache.clearAll().then(() => dialogManager.alert("Cleared Cache!")))} className={`button active`}>
-              Clear Resolver Cache
-            </a>
-          </section>
-          <section>
-            <label>Tools</label>
-            <a target='_blank' href='/pages/YTtoLBRY/index.html' className={`filled`}>
-              Subscription Converter
-            </a>
-          </section>
-        </main>
+            <section>
+              <label>Which resolver API you want to use?</label>
+              <div className='options'>
+                {ytUrlResolverOptions.map(([name, value]) =>
+                  <a onClick={() => setExtensionSetting('urlResolver', name)} className={`button ${urlResolver === name ? 'active' : ''}`}>
+                    {value.name}
+                  </a>
+                )}
+              </div>
+              <a onClick={() => loads(lbryUrlCache.clearAll().then(() => dialogManager.alert("Cleared Cache!")))} className={`button active`}>
+                Clear Resolver Cache
+              </a>
+            </section>
+          </main>
+          :
+          <main>
+            <section>
+              <label>Auto redirect when:</label>
+              <div className='options'>
+                <div class="toggle-option">
+                  <span>Playing a video</span>
+                  <a onClick={() => setExtensionSetting('redirectVideo', !redirectVideo)} className={`button ${redirectVideo ? 'active' : ''}`}>
+                    {redirectVideo ? 'Active' : 'Deactive'}
+                  </a>
+                </div>
+                <div class="toggle-option">
+                  <span>Playing a playlist</span>
+                  <a onClick={() => setExtensionSetting('redirectVideoPlaylist', !redirectVideoPlaylist)} className={`button ${redirectVideoPlaylist ? 'active' : ''}`}>
+                    {redirectVideoPlaylist ? 'Active' : 'Deactive'}
+                  </a>
+                </div>
+                <div class="toggle-option">
+                  <span>Viewing a channel</span>
+                  <a onClick={() => setExtensionSetting('redirectChannel', !redirectChannel)} className={`button ${redirectChannel ? 'active' : ''}`}>
+                    {redirectChannel ? 'Active' : 'Deactive'}
+                  </a>
+                </div>
+              </div>
+            </section>
+            <section>
+              <label>Show redirect button on:</label>
+              <div className='options'>
+                <div className="toggle-option">
+                  <span>Video Page</span>
+                  <a onClick={() => setExtensionSetting('buttonVideoSub', !buttonVideoSub)} className={`button ${buttonVideoSub ? 'active' : ''}`}>
+                    {buttonVideoSub ? 'Active' : 'Deactive'}
+                  </a>
+                </div>
+                <div className="toggle-option">
+                  <span>Channel Page</span>
+                  <a onClick={() => setExtensionSetting('buttonChannelSub', !buttonChannelSub)} className={`button ${buttonChannelSub ? 'active' : ''}`}>
+                    {buttonChannelSub ? 'Active' : 'Deactive'}
+                  </a>
+                </div>
+                <div className="toggle-option">
+                  <span>Video Player</span>
+                  <a onClick={() => setExtensionSetting('buttonVideoPlayer', !buttonVideoPlayer)} className={`button ${buttonVideoPlayer ? 'active' : ''}`}>
+                    {buttonVideoPlayer ? 'Active' : 'Deactive'}
+                  </a>
+                </div>
+              </div>
+            </section>
+            <section>
+              <label>Tools</label>
+              <a target='_blank' href='/pages/YTtoLBRY/index.html' className={`filled`}>
+                Subscription Converter
+              </a>
+              <a className='filled' onClick={() => updateRoute('advanced')}>Advanced Settings</a>
+            </section>
+          </main>
     }
     {loading && <div class="overlay">
       <span>Loading...</span>

src/pages/popup/style.css

@@ -1,3 +1,10 @@
+#popup {
+    width: 40em;
+    max-width: 100%;
+    overflow: hidden;
+    margin: auto;
+}
+
 header {
     display: grid;
     gap: .5em;
@@ -37,13 +44,6 @@ section>* {
     padding: 0 1rem;
 }
 
-#popup {
-    width: 35em;
-    max-width: 100%;
-    overflow: hidden;
-    margin: auto;
-}
-
 .center {
     display: grid;
     place-items: center;
@@ -54,4 +54,9 @@ section>* {
     justify-items: start;
     align-items: center;
     text-align: left;
+}
+
+.toggle-option {
+    display: grid;
+    gap: .5em;
 }

src/scripts/background.ts

@@ -11,8 +11,8 @@ chrome.runtime.onMessage.addListener(({ method, data }, sender, sendResponse) =>
     switch (method) {
       case 'openTab':
         {
-          const { href, active }: { href: string, active: boolean } = JSON.parse(data)
-          chrome.tabs.create({ url: href, active })
+          const { href }: { href: string } = JSON.parse(data)
+          chrome.tabs.create({ url: href, active: sender.tab?.active, index: sender.tab ? sender.tab.index + 1 : undefined })
         }
         break
       case 'resolveUrl':

src/scripts/ytContent.tsx

@@ -17,6 +17,7 @@ import { getExtensionSettingsAsync, getSourcePlatfromSettingsFromHostname, getTa
     platform: SourcePlatform
     id: string
     type: ResolveUrlTypes
+    url: URL
     time: number | null
   }
 
@@ -26,7 +27,6 @@ import { getExtensionSettingsAsync, getSourcePlatfromSettingsFromHostname, getTa
   chrome.storage.onChanged.addListener(async (changes, areaName) => {
     if (areaName !== 'local') return
     Object.assign(settings, Object.fromEntries(Object.entries(changes).map(([key, change]) => [key, change.newValue])))
-    if (settings.redirect) updateButton(null)
   })
 
   const buttonMountPoint = document.createElement('div')
@@ -112,7 +112,7 @@ import { getExtensionSettingsAsync, getSourcePlatfromSettingsFromHostname, getTa
     </div>
   }
 
-  function updateButton(params: { source: Source, target: Target } | null): void {
+  function updateButtons(params: { source: Source, target: Target } | null): void {
     if (!params) {
       render(<WatchOnLbryButton />, buttonMountPoint)
       render(<WatchOnLbryPlayerButton />, playerButtonMountPoint)
@@ -120,7 +120,7 @@ import { getExtensionSettingsAsync, getSourcePlatfromSettingsFromHostname, getTa
     }
 
     {
-      const mountPlayerButtonBefore = settings.videoPlayerButton ?
+      const mountPlayerButtonBefore = settings.buttonVideoPlayer ?
         document.querySelector(params.source.platform.htmlQueries.mountPoints.mountPlayerButtonBefore) :
         null
       if (!mountPlayerButtonBefore) render(<WatchOnLbryPlayerButton />, playerButtonMountPoint)
@@ -134,7 +134,7 @@ import { getExtensionSettingsAsync, getSourcePlatfromSettingsFromHostname, getTa
     }
 
     {
-      const mountButtonBefore = settings[(`${params.source.type}SubButton`) as 'videoSubButton' | 'channelSubButton'] ?
+      const mountButtonBefore = settings[(`button${params.source.type[0].toUpperCase() + params.source.type.substring(1)}Sub`) as 'buttonVideoSub' | 'buttonChannelSub'] ?
         document.querySelector(params.source.platform.htmlQueries.mountPoints.mountButtonBefore[params.source.type]) :
         null
       if (!mountButtonBefore) render(<WatchOnLbryButton />, buttonMountPoint)
@@ -163,7 +163,8 @@ import { getExtensionSettingsAsync, getSourcePlatfromSettingsFromHostname, getTa
         id: url.searchParams.get('v')!,
         platform,
         time: url.searchParams.has('t') ? parseYouTubeURLTimeString(url.searchParams.get('t')!) : null,
-        type: 'video'
+        type: 'video',
+        url
       }
     }
     else if (url.pathname.startsWith('/channel/')) {
@@ -171,7 +172,8 @@ import { getExtensionSettingsAsync, getSourcePlatfromSettingsFromHostname, getTa
         id: url.pathname.substring("/channel/".length),
         platform,
         time: null,
-        type: 'channel'
+        type: 'channel',
+        url
       }
     }
     else if (url.pathname.startsWith('/c/') || url.pathname.startsWith('/user/')) {
@@ -187,7 +189,8 @@ import { getExtensionSettingsAsync, getSourcePlatfromSettingsFromHostname, getTa
         id,
         platform,
         time: null,
-        type: 'channel'
+        type: 'channel',
+        url
       }
     }
 
@@ -233,9 +236,46 @@ import { getExtensionSettingsAsync, getSourcePlatfromSettingsFromHostname, getTa
   }
 
   // Request new tab
-  async function openNewTab(url: URL, active: boolean) {
-    if (!open(url.href, '_blank'))
-      chrome.runtime.sendMessage({ method: 'openTab', data: JSON.stringify({ href: url.href, active }) })
+  async function openNewTab(url: URL) {
+    chrome.runtime.sendMessage({ method: 'openTab', data: JSON.stringify({ href: url.href }) })
+  }
+
+  function findTargetFromSourcePage(source: Source): Target | null {
+    const linksContainer =
+      source.type === 'video' ?
+        document.querySelector(source.platform.htmlQueries.videoDescription) :
+        source.platform.htmlQueries.channelLinks ? document.querySelector(source.platform.htmlQueries.channelLinks) : null
+
+    if (linksContainer) {
+      const anchors = Array.from(linksContainer.querySelectorAll<HTMLAnchorElement>('a'))
+
+      for (const anchor of anchors) {
+        if (!anchor.href) continue
+        const url = new URL(anchor.href)
+        let lbryURL: URL | null = null
+
+        // Extract real link from youtube's redirect link
+        if (source.platform === sourcePlatfromSettings['youtube.com']) {
+          if (!targetPlatforms.some(([key, platform]) => url.searchParams.get('q')?.startsWith(platform.domainPrefix))) continue
+          lbryURL = new URL(url.searchParams.get('q')!)
+        }
+        // Just directly use the link itself on other platforms
+        else {
+          if (!targetPlatforms.some(([key, platform]) => url.href.startsWith(platform.domainPrefix))) continue
+          lbryURL = new URL(url.href)
+        }
+
+        if (lbryURL) {
+          return {
+            lbryPathname: lbryURL.pathname.substring(1),
+            time: null,
+            type: lbryURL.pathname.substring(1).includes('/') ? 'video' : 'channel',
+            platform: targetPlatformSettings[settings.targetPlatform]
+          }
+        }
+      }
+    }
+    return null
   }
 
   function getLbryUrlByTarget(target: Target) {
@@ -245,104 +285,80 @@ import { getExtensionSettingsAsync, getSourcePlatfromSettingsFromHostname, getTa
     return url
   }
 
-  let urlHrefCache: string | null = null
-  while (true) {
+
+  // Master Loop
+  for (
+    let url = new URL(location.href),
+    urlHrefCache: string | null = null;
+    ;
+    urlHrefCache = url.href,
+    url = new URL(location.href)
+  ) {
     await sleep(500)
-    const url: URL = new URL(location.href)
-
-    await (async () => {
+    try {
       const source = await getSourceByUrl(new URL(location.href))
-      if (!source) return
+      if (!source) {
+        updateButtons(null)
+        continue
+      }
+      const target = (await getTargetsBySources(source))[source.id] ?? findTargetFromSourcePage(source)
+      if (!target) {
+        updateButtons(null)
+        continue
+      }
 
-      try {
-        if (settings.redirect) {
-          const target = (await getTargetsBySources(source))[source.id]
-          if (!target) return
-          if (url.href === urlHrefCache) return
+      // Update Buttons
+      if (urlHrefCache !== url.href) updateButtons(null)
+      // If target is a video target add timestampt to it
+      if (target.type === 'video') {
+        const videoElement = document.querySelector<HTMLVideoElement>(source.platform.htmlQueries.videoPlayer)
+        if (videoElement) target.time = videoElement.currentTime > 3 && videoElement.currentTime < videoElement.duration - 1 ? videoElement.currentTime : null
+      }
+      updateButtons({ target, source })
 
-          const lbryURL = getLbryUrlByTarget(target)
+      // Redirect
+      if (
+        source.type === target.type &&
+        (
+          (
+            settings.redirectVideo &&
+            source.type === 'video' && !source.url.searchParams.has('list')
+          ) ||
+          (
+            settings.redirectVideoPlaylist &&
+            source.type === 'video' && source.url.searchParams.has('list')
+          ) ||
+          (
+            settings.redirectChannel &&
+            source.type === 'channel'
+          )
+        )
+      ) {
+        if (url.href === urlHrefCache) continue
 
-          if (source.type === 'video') {
-            // As soon as video play is ready and start playing, pause it.
-            findVideoElementAwait(source).then((videoElement) => {
-              videoElement.addEventListener('play', () => videoElement.pause(), { once: true })
-              videoElement.pause()
-            })
-          }
+        const lbryURL = getLbryUrlByTarget(target)
 
-          if (target.platform === targetPlatformSettings.app) {
-            if (document.hidden) await new Promise((resolve) => document.addEventListener('visibilitychange', resolve, { once: true }))
-            // Replace is being used so browser doesnt start an empty window
-            // Its not gonna be able to replace anyway, since its a LBRY Uri
-            location.replace(lbryURL)
-          }
-          else {
-            openNewTab(lbryURL, document.hasFocus())
+        if (source.type === 'video') {
+          findVideoElementAwait(source).then((videoElement) => videoElement.pause())
+        }
 
-            if (window.history.length === 1) window.close()
-            else window.history.back()
-          }
+        if (target.platform === targetPlatformSettings.app) {
+          if (document.hidden) await new Promise((resolve) => document.addEventListener('visibilitychange', resolve, { once: true }))
+          // Replace is being used so browser doesnt start an empty window
+          // Its not gonna be able to replace anyway, since its a LBRY Uri
+          location.replace(lbryURL)
         }
         else {
-          if (urlHrefCache !== url.href) updateButton(null)
-          let target = (await getTargetsBySources(source))[source.id]
-
-          // There is no target found via API try to check Video Description for LBRY links.
-          if (!target) {
-            const linksContainer =
-              source.type === 'video' ?
-                document.querySelector(source.platform.htmlQueries.videoDescription) :
-                source.platform.htmlQueries.channelLinks ? document.querySelector(source.platform.htmlQueries.channelLinks) : null
-
-            if (linksContainer) {
-              const anchors = Array.from(linksContainer.querySelectorAll<HTMLAnchorElement>('a'))
-
-              for (const anchor of anchors) {
-                if (!anchor.href) continue
-                const url = new URL(anchor.href)
-                let lbryURL: URL | null = null
-
-                // Extract real link from youtube's redirect link
-                if (source.platform === sourcePlatfromSettings['youtube.com']) {
-                  if (!targetPlatforms.some(([key, platform]) => url.searchParams.get('q')?.startsWith(platform.domainPrefix))) continue
-                  lbryURL = new URL(url.searchParams.get('q')!)
-                }
-                // Just directly use the link itself on other platforms
-                else {
-                  if (!targetPlatforms.some(([key, platform]) => url.href.startsWith(platform.domainPrefix))) continue
-                  lbryURL = new URL(url.href)
-                }
-
-                if (lbryURL) {
-                  target = {
-                    lbryPathname: lbryURL.pathname.substring(1),
-                    time: null,
-                    type: lbryURL.pathname.substring(1).includes('/') ? 'video' : 'channel',
-                    platform: targetPlatformSettings[settings.targetPlatform]
-                  }
-                  break
-                }
-              }
-            }
-          }
-
-          if (!target) updateButton(null)
-          else {
-            // If target is a video target add timestampt to it
-            if (target.type === 'video') {
-              const videoElement = document.querySelector<HTMLVideoElement>(source.platform.htmlQueries.videoPlayer)
-              if (videoElement) target.time = videoElement.currentTime > 3 && videoElement.currentTime < videoElement.duration - 1 ? videoElement.currentTime : null
-            }
-
-            updateButton({ target, source })
-          }
+          openNewTab(lbryURL)
+          if (window.history.length === 1) 
+            window.close()
+          else 
+            window.history.back()
         }
-      } catch (error) {
-        console.error(error)
       }
-    })()
-
-    urlHrefCache = url.href
+    } catch (error) {
+      console.error(error)
+    }
   }
 
 })()

src/settings/background.ts

@@ -21,13 +21,13 @@ async function initSettings() {
     if (!Object.keys(targetPlatformSettings).includes(settings.targetPlatform)) setExtensionSetting('targetPlatform', DEFAULT_SETTINGS.targetPlatform)
     if (!Object.keys(ytUrlResolversSettings).includes(settings.urlResolver)) setExtensionSetting('urlResolver', DEFAULT_SETTINGS.urlResolver)
 
-    chromeAction.setBadgeText({ text: settings.redirect ? 'ON' : 'OFF' })
+    // chromeAction.setBadgeText({ text: settings.redirect ? 'ON' : 'OFF' })
 }
 
-chrome.storage.onChanged.addListener((changes, areaName) => {
+/* chrome.storage.onChanged.addListener((changes, areaName) => {
     if (areaName !== 'local' || !changes.redirect) return
     chromeAction.setBadgeText({ text: changes.redirect.newValue ? 'ON' : 'OFF' })
-})
+}) */
 
 chrome.runtime.onStartup.addListener(initSettings)
 chrome.runtime.onInstalled.addListener(initSettings)

src/settings/index.ts

@@ -2,24 +2,28 @@ import type { JSX } from "preact"
 import { useEffect, useReducer } from "preact/hooks"
 import type { ResolveUrlTypes } from "../modules/yt/urlResolve"
 
-export interface ExtensionSettings {
-  redirect: boolean
+export interface ExtensionSettings extends Record<string, string | number | boolean | null | undefined>{
   targetPlatform: TargetPlatformName
   urlResolver: YTUrlResolverName,
-  videoSubButton: boolean
-  videoPlayerButton: boolean
-  channelSubButton: boolean
+  redirectVideo: boolean,
+  redirectChannel: boolean,
+  redirectVideoPlaylist: boolean,
+  buttonVideoSub: boolean
+  buttonVideoPlayer: boolean
+  buttonChannelSub: boolean
   publicKey: string | null,
   privateKey: string | null
 }
 
 export const DEFAULT_SETTINGS: ExtensionSettings = {
-  redirect: true,
   targetPlatform: 'odysee',
   urlResolver: 'odyseeApi',
-  videoSubButton: true,
-  videoPlayerButton: true,
-  channelSubButton: true,
+  redirectVideo: false,
+  redirectChannel: false,
+  redirectVideoPlaylist: false,
+  buttonVideoSub: true,
+  buttonVideoPlayer: true,
+  buttonChannelSub: true,
   privateKey: null,
   publicKey: null
 }