diff --git a/.gitignore b/.gitignore index 24453f5..a228be6 100644 --- a/.gitignore +++ b/.gitignore @@ -2,3 +2,5 @@ dist node_modules web-ext-artifacts + +.DS_Store diff --git a/README.md b/README.md index c9f8eab..950fd54 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -![Logo](https://cdn.lbryplayer.xyz/api/v3/streams/free/Cover-Image/2abac7db775191738dcb7746e8a984403a779201/5d4c1d?download=true) +![Logo](src/icons/wol/default-transparent.svg) # Watch on LBRY A plugin for web browsers that brings more utility for LBRY Protocol by allowing you to find people you watch on YouTube that are availible on LBRY.tv/Odysee/Desktop App and other LBRY Protocol based apps/websites, allows you to easly check your subscribtion list and much more! @@ -9,7 +9,8 @@ This plugin is using LBRY Inc YouTube Sync API to check if video fot synchronize ## Installation -[![Get on Firefox](https://addons.cdn.mozilla.net/static/img/addons-buttons/AMO-button_1.png)](https://addons.mozilla.org/en/firefox/addon/watch-on-lbry/?src=search) [![Get on Chrome](https://developer.chrome.com/webstore/images/ChromeWebStore_BadgeWBorder_v2_206x58.png)](https://chrome.google.com/webstore/detail/watch-on-lbry/jjmbbhopnjdjnpceiecihldbhibchgek) +[![Get it on Firefox](doc/img/AMO-button_1.png)](https://addons.mozilla.org/en/firefox/addon/watch-on-lbry/?src=search) +[![Get it on Chrome](doc/img/chrome-small-border.png)](https://chrome.google.com/webstore/detail/watch-on-lbry/jjmbbhopnjdjnpceiecihldbhibchgek) ## Build @@ -61,7 +62,7 @@ Pull requests are welcome. For major changes, please open an issue first to disc Please make sure to update tests as appropriate. ## License -[GPL-3.0 License](https://choosealicense.com/licenses/gpl-3.0/) +[GPL-3.0 License](LICENSE) ## Support diff --git a/doc/img/AMO-button_1.png b/doc/img/AMO-button_1.png new file mode 100644 index 0000000..c8f2cd8 Binary files /dev/null and b/doc/img/AMO-button_1.png differ diff --git a/doc/img/chrome-small-border.png b/doc/img/chrome-small-border.png new file mode 100644 index 0000000..4e48b8a Binary files /dev/null and b/doc/img/chrome-small-border.png differ diff --git a/src/icons/icon128.png b/src/icons/icon128.png deleted file mode 100644 index 4329f4a..0000000 Binary files a/src/icons/icon128.png and /dev/null differ diff --git a/src/icons/icon16.png b/src/icons/icon16.png deleted file mode 100644 index bd7235e..0000000 Binary files a/src/icons/icon16.png and /dev/null differ diff --git a/src/icons/icon48.png b/src/icons/icon48.png deleted file mode 100644 index 982710e..0000000 Binary files a/src/icons/icon48.png and /dev/null differ diff --git a/src/icons/lbry-logo.svg b/src/icons/lbry/lbry-logo.svg similarity index 100% rename from src/icons/lbry-logo.svg rename to src/icons/lbry/lbry-logo.svg diff --git a/src/icons/lbry/odysee-logo.svg b/src/icons/lbry/odysee-logo.svg new file mode 100644 index 0000000..cb9772c --- /dev/null +++ b/src/icons/lbry/odysee-logo.svg @@ -0,0 +1,151 @@ + + + + + + image/svg+xml + + odysee_ + + + + + + + + + + + + + + + + odysee_ + + + + + + + + + + + + + + + diff --git a/src/icons/wol/default-monochrome-black.svg b/src/icons/wol/default-monochrome-black.svg new file mode 100644 index 0000000..a1d616f --- /dev/null +++ b/src/icons/wol/default-monochrome-black.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/wol/default-monochrome-white.svg b/src/icons/wol/default-monochrome-white.svg new file mode 100644 index 0000000..8419d64 --- /dev/null +++ b/src/icons/wol/default-monochrome-white.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/wol/default-transparent.svg b/src/icons/wol/default-transparent.svg new file mode 100644 index 0000000..68d81df --- /dev/null +++ b/src/icons/wol/default-transparent.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/wol/default.svg b/src/icons/wol/default.svg new file mode 100644 index 0000000..c8c31b5 --- /dev/null +++ b/src/icons/wol/default.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/wol/icon128.png b/src/icons/wol/icon128.png new file mode 100644 index 0000000..525efe9 Binary files /dev/null and b/src/icons/wol/icon128.png differ diff --git a/src/icons/wol/icon16.png b/src/icons/wol/icon16.png new file mode 100644 index 0000000..48a46f6 Binary files /dev/null and b/src/icons/wol/icon16.png differ diff --git a/src/icons/wol/icon48.png b/src/icons/wol/icon48.png new file mode 100644 index 0000000..1abb364 Binary files /dev/null and b/src/icons/wol/icon48.png differ diff --git a/src/icons/wol/isolated-layout.svg b/src/icons/wol/isolated-layout.svg new file mode 100644 index 0000000..c261577 --- /dev/null +++ b/src/icons/wol/isolated-layout.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/wol/isolated-monochrome-black.svg b/src/icons/wol/isolated-monochrome-black.svg new file mode 100644 index 0000000..2578209 --- /dev/null +++ b/src/icons/wol/isolated-monochrome-black.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/wol/isolated-monochrome-white.svg b/src/icons/wol/isolated-monochrome-white.svg new file mode 100644 index 0000000..39bbcc1 --- /dev/null +++ b/src/icons/wol/isolated-monochrome-white.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/manifest.json b/src/manifest.json index 28a697b..d15a5a4 100644 --- a/src/manifest.json +++ b/src/manifest.json @@ -34,12 +34,13 @@ "web_accessible_resources": [ "popup.html", "tools/YTtoLBRY.html", - "icons/lbry-logo.svg" + "icons/lbry/lbry-logo.svg", + "icons/lbry/odysee-logo.svg" ], "icons": { - "16": "icons/icon16.png", - "48": "icons/icon48.png", - "128": "icons/icon128.png" + "16": "icons/wol/icon16.png", + "48": "icons/wol/icon48.png", + "128": "icons/wol/icon128.png" }, "manifest_version": 2 } diff --git a/src/scripts/ytContent.tsx b/src/scripts/ytContent.tsx index 5c4fbe0..2c59f69 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/lbry-logo.svg') }, + 'lbry.tv': { text: 'Watch on LBRY', icon: chrome.runtime.getURL('icons/lbry/lbry-logo.svg') }, + odysee: { + text: 'Watch on Odysee', icon: chrome.runtime.getURL('icons/lbry/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)); });