diff --git a/src/icons/odysee-logo.svg b/src/icons/odysee-logo.svg new file mode 100644 index 0000000..cb9772c --- /dev/null +++ b/src/icons/odysee-logo.svg @@ -0,0 +1,151 @@ + + + + + + image/svg+xml + + odysee_ + + + + + + + + + + + + + + + + odysee_ + + + + + + + + + + + + + + + diff --git a/src/manifest.json b/src/manifest.json index 28a697b..bf1cb8b 100644 --- a/src/manifest.json +++ b/src/manifest.json @@ -34,7 +34,8 @@ "web_accessible_resources": [ "popup.html", "tools/YTtoLBRY.html", - "icons/lbry-logo.svg" + "icons/lbry-logo.svg", + "icons/odysee-logo.svg" ], "icons": { "16": "icons/icon16.png", diff --git a/src/scripts/ytContent.tsx b/src/scripts/ytContent.tsx index 5c4fbe0..2c46a1f 100644 --- a/src/scripts/ytContent.tsx +++ b/src/scripts/ytContent.tsx @@ -1,4 +1,4 @@ -import { h, render } from 'preact'; +import { h, JSX, render } from 'preact'; import { parseProtocolUrl } from '../common/lbry-url'; import { getSettingsAsync, LbrySettings, redirectDomains } from '../common/settings'; @@ -13,11 +13,27 @@ interface UpdaterOptions { interface UpdateContext { descriptor: YTDescriptor + /** LBRY URL fragment */ url: string enabled: boolean redirect: LbrySettings['redirect'] } +interface ButtonSettings { + text: string + icon: string + style?: JSX.CSSProperties +} + +const buttonSettings: Record = { + app: { text: 'Watch on LBRY', icon: chrome.runtime.getURL('icons/lbry-logo.svg') }, + 'lbry.tv': { text: 'Watch on LBRY', icon: chrome.runtime.getURL('icons/lbry-logo.svg') }, + odysee: { + text: 'Watch on Odysee', icon: chrome.runtime.getURL('icons/odysee-logo.svg'), + style: { backgroundColor: '#1e013b' }, + }, +}; + function pauseVideo() { document.querySelectorAll('video').forEach(v => v.pause()); } function openApp(url: string) { @@ -35,13 +51,12 @@ async function resolveYT(descriptor: YTDescriptor) { /** Compute the URL and determine whether or not a redirect should be performed. Delegates the redirect to callbacks. */ async function handleURLChange(url: URL | Location, { onRedirect, onURL }: UpdaterOptions): Promise { const { enabled, redirect } = await getSettingsAsync('enabled', 'redirect'); - const urlPrefix = redirectDomains[redirect].prefix; const descriptor = ytService.getId(url.href); if (!descriptor) return; // couldn't get the ID, so we're done const res = await resolveYT(descriptor); if (!res) return; // couldn't find it on lbry, so we're done - const ctx = { descriptor, url: urlPrefix + res, enabled, redirect }; + const ctx = { descriptor, url: res, enabled, redirect }; if (onURL) onURL(ctx); if (enabled && onRedirect) onRedirect(ctx); } @@ -62,15 +77,17 @@ async function findMountPoint(): Promise { return div; } -function WatchOnLbryButton({ url }: { url?: string }) { +function WatchOnLbryButton({ redirect = 'app', url }: { redirect?: LbrySettings['redirect'], url?: string }) { if (!url) return null; + const domain = redirectDomains[redirect]; + const buttonSetting = buttonSettings[redirect]; return
- - - Watch on LBRY -
} + {buttonSetting.text} + } style={{ borderRadius: '2px', backgroundColor: '#075656', @@ -80,18 +97,19 @@ function WatchOnLbryButton({ url }: { url?: string }) { marginRight: '5px', fontSize: '14px', textDecoration: 'none', + ...buttonSetting.style, }} /> - + ; } const mountPointPromise = findMountPoint(); const handle = (url: URL | Location) => handleURLChange(url, { - async onURL({ descriptor: { type }, url }) { + async onURL({ descriptor: { type }, url, redirect }) { const mountPoint = await mountPointPromise; if (type !== 'video' || !mountPoint) return; - render(, mountPoint) + render(, mountPoint); }, onRedirect({ redirect, url }) { if (redirect === 'app') return openApp(url); @@ -114,5 +132,5 @@ chrome.runtime.onMessage.addListener(async (req: { url: string }) => { chrome.storage.onChanged.addListener((changes, areaName) => { if (areaName !== 'local' || !changes.redirect) return; - handle(new URL(location.href)) + handle(new URL(location.href)); });