mirror of
https://github.com/LBRYFoundation/Watch-on-LBRY.git
synced 2025-08-23 17:47:26 +00:00
Odysee logo support
This change includes a settings object which describes how the button should be displayed keyed by the redirect setting.
This commit is contained in:
Kevin Raoofi
parent
951acee9da
commit
76830c907e
3 changed files with 183 additions and 13 deletions
151
src/icons/odysee-logo.svg
Normal file
151
src/icons/odysee-logo.svg
Normal file
|
|
@ -0,0 +1,151 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
id="Layer_1"
|
||||
data-name="Layer 1"
|
||||
viewBox="0 0 103.3 103.3"
|
||||
version="1.1"
|
||||
sodipodi:docname="Logo_Textless_Vector.svg"
|
||||
inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07)"
|
||||
width="103.3"
|
||||
height="103.3">
|
||||
<metadata
|
||||
id="metadata340">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title>odysee_</dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<sodipodi:namedview
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1"
|
||||
objecttolerance="10"
|
||||
gridtolerance="10"
|
||||
guidetolerance="10"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1025"
|
||||
id="namedview338"
|
||||
showgrid="false"
|
||||
showguides="false"
|
||||
inkscape:zoom="3.18"
|
||||
inkscape:cx="191"
|
||||
inkscape:cy="51.650002"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="27"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="Layer_1" />
|
||||
<defs
|
||||
id="defs293">
|
||||
<style
|
||||
id="style278">.cls-1{fill:url(#linear-gradient);}.cls-2{fill:#fff;}.cls-3{fill:none;}.cls-4{fill:#f9f9f9;}</style>
|
||||
<linearGradient
|
||||
id="linear-gradient"
|
||||
x1="37.900002"
|
||||
y1="5.54"
|
||||
x2="110.84"
|
||||
y2="180.14999"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
gradientTransform="translate(-9,-8.3499985)">
|
||||
<stop
|
||||
offset="0"
|
||||
stop-color="#ef1970"
|
||||
id="stop280" />
|
||||
<stop
|
||||
offset="0.14"
|
||||
stop-color="#f23b5c"
|
||||
id="stop282" />
|
||||
<stop
|
||||
offset="0.44"
|
||||
stop-color="#f77d35"
|
||||
id="stop284" />
|
||||
<stop
|
||||
offset="0.7"
|
||||
stop-color="#fcad18"
|
||||
id="stop286" />
|
||||
<stop
|
||||
offset="0.89"
|
||||
stop-color="#fecb07"
|
||||
id="stop288" />
|
||||
<stop
|
||||
offset="1"
|
||||
stop-color="#ffd600"
|
||||
id="stop290" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<title
|
||||
id="title295">odysee_</title>
|
||||
<circle
|
||||
class="cls-1"
|
||||
cx="51.650002"
|
||||
cy="51.650002"
|
||||
r="51.650002"
|
||||
id="circle297"
|
||||
style="fill:url(#linear-gradient)" />
|
||||
<path
|
||||
class="cls-2"
|
||||
d="m 11.92,38.220002 a 0.95,0.95 0 1 0 -0.3,1.31 0.95,0.95 0 0 0 0.3,-1.31"
|
||||
id="path299" />
|
||||
<path
|
||||
class="cls-2"
|
||||
d="m 67.44,13.370002 a 0.95,0.95 0 1 0 -0.3,1.31 0.95,0.95 0 0 0 0.3,-1.31"
|
||||
id="path301" />
|
||||
<path
|
||||
class="cls-2"
|
||||
d="m 78.91,50.650002 a 1.11,1.11 0 1 0 1.33,-0.84 1.11,1.11 0 0 0 -1.33,0.84"
|
||||
id="path303" />
|
||||
<path
|
||||
class="cls-2"
|
||||
d="m 62.35,87.650002 a 0.86,0.86 0 1 0 1,-0.65 0.86,0.86 0 0 0 -1,0.65"
|
||||
id="path305" />
|
||||
<path
|
||||
class="cls-2"
|
||||
d="m 19.18,21.160002 a 0.52,0.52 0 1 0 0.63,-0.39 0.52,0.52 0 0 0 -0.63,0.39"
|
||||
id="path307" />
|
||||
<path
|
||||
class="cls-2"
|
||||
d="m 21.86,69.960002 a 0.73,0.73 0 1 0 -0.59,0.85 0.73,0.73 0 0 0 0.59,-0.85"
|
||||
id="path309" />
|
||||
<path
|
||||
class="cls-3"
|
||||
d="m 43.75,10.140002 c 0,0 -8.16,2.24 -7.53,10.89 0.56,7.67 4.65,11.85 13.14,8.65 8.49,-3.2 9.93,-5.45 7.85,-11.85 -2.08,-6.4 -4.49,-10.7300005 -13.46,-7.69 z"
|
||||
id="path311" />
|
||||
<path
|
||||
class="cls-2"
|
||||
d="m 91.45,83.650002 c -0.32,-0.6 -6.45,-10 -7.21,-17.9 -0.56,-5.47 -7.71,-11.54 -12,-14.73 a 3.11,3.11 0 0 1 -0.24,-4.75 c 4.23,-4 11.69,-11.8 14.05,-15.92 a 31.3,31.3 0 0 0 3.44,-13.89 51.89,51.89 0 0 0 -9.82,-8.2200005 c -3.48,1.72 -4.42,7.0700005 -5.95,13.3000005 -2.08,8.49 -7,7.53 -9,7.53 -2,0 -0.8,-3 -5.45,-16.34 C 54.62,-0.60999847 42.53,2.7300015 33.34,8.2300015 21.66,15.230002 26.87,30.160002 29.76,39.780002 c -1.64,1.58 -7.81,2.81 -13.42,5.83 -6.95,3.74 -14.06,9.75 -15.91,12.51 a 51.33,51.33 0 0 0 2.62,11 5.89,5.89 0 0 0 1.38,0.95 c 3.29,1.53 8.13,-1.09 12.71,-5.84 a 23.33,23.33 0 0 1 4.57,-3.53 48.94,48.94 0 0 1 11.77,-5.53 c 0,0 4.49,6.89 8.65,15.06 4.16,8.17 -4.49,10.89 -5.45,10.89 -0.96,0 -14.59,-1.27 -11.55,10.26 3.04,11.529998 19.7,7.37 28.19,1.76 8.49,-5.61 6.41,-23.87 6.41,-23.87 8.33,-1.28 10.89,7.53 11.69,12 0.8,4.47 -1,12.33 7.37,12.5 a 10.48,10.48 0 0 0 3.47,-0.54 51.94,51.94 0 0 0 8.74,-8.17 2.88,2.88 0 0 0 0.45,-1.41 z m -42.09,-54 c -8.49,3.2 -12.58,-1 -13.14,-8.65 -0.63,-8.65 7.53,-10.89 7.53,-10.89 9,-3.0000005 11.37,1.28 13.46,7.69 2.09,6.41 0.64,8.68 -7.85,11.85 z"
|
||||
id="path313" />
|
||||
<polygon
|
||||
class="cls-2"
|
||||
points="97.44,50.39 96.27,48.07 93.72,47.54 96.04,46.37 96.56,43.82 97.74,46.14 100.29,46.66 97.97,47.84 "
|
||||
id="polygon315"
|
||||
transform="translate(-9,-8.3499985)" />
|
||||
<path
|
||||
class="cls-4"
|
||||
d="m 54.25,19.360002 a 5.41,5.41 0 0 1 0.38,3.6"
|
||||
id="path329" />
|
||||
<path
|
||||
class="cls-2"
|
||||
d="m 54.63,24.060002 h -0.21 a 1.09,1.09 0 0 1 -0.86,-1.27 4.36,4.36 0 0 0 -0.31,-3 1.09,1.09 0 0 1 2,-0.84 6.46,6.46 0 0 1 0.44,4.23 1.09,1.09 0 0 1 -1.06,0.88 z"
|
||||
id="path331" />
|
||||
<path
|
||||
class="cls-4"
|
||||
d="m 51.56,13.330002 a 6.14,6.14 0 0 1 0.81,1.24"
|
||||
id="path333" />
|
||||
<path
|
||||
class="cls-2"
|
||||
d="m 52.36,15.650002 a 1.09,1.09 0 0 1 -1,-0.56 6.71,6.71 0 0 0 -0.64,-1 1.1,1.1 0 0 1 0,-1.52 1.07,1.07 0 0 1 1.49,0 6.8,6.8 0 0 1 1,1.49 1.09,1.09 0 0 1 -0.85,1.59 z"
|
||||
id="path335" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.5 KiB |
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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<LbrySettings['redirect'], ButtonSettings> = {
|
||||
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<HTMLVideoElement>('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<void> {
|
||||
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<HTMLDivElement | void> {
|
|||
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 <div style={{ display: 'flex', justifyContent: 'center', flexDirection: 'column' }}>
|
||||
<a href={url} onClick={pauseVideo} role='button'
|
||||
<a href={domain.prefix + url} onClick={pauseVideo} role='button'
|
||||
children={<div>
|
||||
<img src={chrome.runtime.getURL('icons/lbry-logo.svg')} height={10} width={14}
|
||||
<img src={buttonSetting.icon} height={10} width={14}
|
||||
style={{ marginRight: 12, transform: 'scale(1.75)' }} />
|
||||
Watch on LBRY
|
||||
</div>}
|
||||
{buttonSetting.text}
|
||||
</div>}
|
||||
style={{
|
||||
borderRadius: '2px',
|
||||
backgroundColor: '#075656',
|
||||
|
|
@ -80,18 +97,19 @@ function WatchOnLbryButton({ url }: { url?: string }) {
|
|||
marginRight: '5px',
|
||||
fontSize: '14px',
|
||||
textDecoration: 'none',
|
||||
...buttonSetting.style,
|
||||
}} />
|
||||
</div>
|
||||
</div>;
|
||||
}
|
||||
|
||||
|
||||
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(<WatchOnLbryButton url={url} />, mountPoint)
|
||||
render(<WatchOnLbryButton url={url} redirect={redirect} />, 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));
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue