LBRYFoundation/Watch-on-LBRY
1
0
Fork 0
mirror of https://github.com/LBRYFoundation/Watch-on-LBRY.git synced 2025-08-23 17:47:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #75 from DeepDoge/yewtube-added

Browse source 
[Feature] Yewtube support added
This commit is contained in:
kodxana 2021-12-19 14:36:28 +01:00 • committed by GitHub
commit 279f7faff7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 181 additions and 115 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/common/components/ButtonRadio.sass
View file

@ -3,10 +3,11 @@
.ButtonRadio
display: flex
justify-content: center
flex-wrap: wrap
gap: .25em
.radio-button
@extend .button
margin: 6px
.radio-button.checked
@extend .button.active

81
src/common/settings.ts
View file

@ -1,29 +1,76 @@
export type PlatformName = 'madiator.com' | 'odysee' | 'app'
export interface ExtensionSettings {
redirect: boolean
targetPlatform: TargetPlatformName
}
export interface PlatformSettings
{
export const DEFAULT_SETTINGS: ExtensionSettings = { redirect: true, targetPlatform: 'odysee' };
export function getExtensionSettingsAsync<K extends Array<keyof ExtensionSettings>>(...keys: K): Promise<Pick<ExtensionSettings, K[number]>> {
return new Promise(resolve => chrome.storage.local.get(keys, o => resolve(o as any)));
}
export type TargetPlatformName = 'madiator.com' | 'odysee' | 'app'
export interface TargetPlatformSettings {
domainPrefix: string
display: string
displayName: string
theme: string
}
export const platformSettings: Record<PlatformName, PlatformSettings> = {
'madiator.com': { domainPrefix: 'https://madiator.com/', display: 'Madiator.com', theme: '#075656' },
odysee: { domainPrefix: 'https://odysee.com/', display: 'Odysee', theme: '#1e013b' },
app: { domainPrefix: 'lbry://', display: 'App', theme: '#075656' },
export const TargetPlatformSettings: Record<TargetPlatformName, TargetPlatformSettings> = {
'madiator.com': {
domainPrefix: 'https://madiator.com/',
displayName: 'Madiator.com',
theme: '#075656'
},
odysee: {
domainPrefix: 'https://odysee.com/',
displayName: 'Odysee',
theme: '#1e013b'
},
app: {
domainPrefix: 'lbry://',
displayName: 'LBRY App',
theme: '#075656'
},
};
export const getPlatfromSettingsEntiries = () => {
return Object.entries(platformSettings) as any as [Extract<keyof typeof platformSettings, string>, PlatformSettings][]
export const getTargetPlatfromSettingsEntiries = () => {
return Object.entries(TargetPlatformSettings) as any as [Extract<keyof typeof TargetPlatformSettings, string>, TargetPlatformSettings][]
}
export interface LbrySettings {
enabled: boolean
platform: PlatformName
export type SourcePlatfromName = 'youtube.com' | 'yewtu.be'
export interface SourcePlatfromSettings {
hostnames: string[]
htmlQueries: {
mountButtonBefore: string,
videoPlayer: string
}
}
export const DEFAULT_SETTINGS: LbrySettings = { enabled: true, platform: 'odysee' };
export function getSettingsAsync<K extends Array<keyof LbrySettings>>(...keys: K): Promise<Pick<LbrySettings, K[number]>> {
return new Promise(resolve => chrome.storage.local.get(keys, o => resolve(o as any)));
export const SourcePlatfromSettings: Record<SourcePlatfromName, SourcePlatfromSettings> = {
"yewtu.be": {
hostnames: ['yewtu.be'],
htmlQueries: {
mountButtonBefore: '#watch-on-youtube',
videoPlayer: '#player-container video'
}
},
"youtube.com": {
hostnames: ['www.youtube.com'],
htmlQueries: {
mountButtonBefore: 'ytd-video-owner-renderer~#subscribe-button',
videoPlayer: '#ytd-player video'
}
}
}
export function getSourcePlatfromSettingsFromHostname(hostname: string) {
const values = Object.values(SourcePlatfromSettings)
for (const settings of values)
if (settings.hostnames.includes(hostname)) return settings
return null
}

13
src/common/style.sass
View file

@ -5,30 +5,29 @@ $btn-color: #075656 !default
$btn-select: teal !default
body
width: 400px
width: 30em
text-align: center
background-color: $background-color
color: $text-color
font-family: sans-serif
padding: 1em
.container
display: block
text-align: center
margin: 0 32px
margin-bottom: 15px
.button
border-radius: 5px
border-radius: .5em
background-color: $btn-color
border: 4px solid $btn-color
border: .2em solid $btn-color
color: $text-color
font-size: 0.8rem
font-weight: 400
padding: 4px 15px
padding: .5em
text-align: center
&.active
border: 4px solid $btn-select
border-color: $btn-select
&:focus
outline: none

6
src/common/yt.ts
View file

@ -14,7 +14,7 @@ interface YtResolverResponse {
};
}
interface YtSubscription {
interface YtExportedJsonSubscription {
id: string;
etag: string;
title: string;
@ -72,7 +72,7 @@ export const ytService = {
* @returns the channel IDs
*/
readJson(jsonContents: string): string[] {
const subscriptions: YtSubscription[] = JSON.parse(jsonContents);
const subscriptions: YtExportedJsonSubscription[] = JSON.parse(jsonContents);
jsonContents = ''
return subscriptions.map(sub => sub.snippet.resourceId.channelId);
},
@ -86,7 +86,7 @@ export const ytService = {
readCsv(csvContent: string): string[] {
const rows = csvContent.split('\n')
csvContent = ''
return rows.map((row) => row.substr(0, row.indexOf(',')))
return rows.map((row) => row.substring(0, row.indexOf(',')))
},
/**

6
src/manifest.json
View file

@ -3,8 +3,7 @@
"version": "1.7.5",
"permissions": [
"https://www.youtube.com/",
"https://invidio.us/channel/*",
"https://invidio.us/watch?v=*",
"https://yewtu.be/",
"https://api.odysee.com/*",
"https://lbry.tv/*",
"https://odysee.com/*",
@ -15,7 +14,8 @@
"content_scripts": [
{
"matches": [
"https://www.youtube.com/*"
"https://www.youtube.com/*",
"https://yewtu.be/*"
],
"js": [
"scripts/ytContent.js"

11
src/popup/popup.sass
View file

@ -1,4 +1,13 @@
.radio-label
font-size: 1.1rem
margin: 15px auto
display: block
.container
display: grid
grid-auto-flow: row
gap: 1.5em
.container > section
display: grid
grid-auto-flow: row
gap: 1em

38
src/popup/popup.tsx
View file

@ -1,32 +1,36 @@
import { h, render } from 'preact'
import ButtonRadio, { SelectionOption } from '../common/components/ButtonRadio'
import { getPlatfromSettingsEntiries, LbrySettings, PlatformName } from '../common/settings'
import { getTargetPlatfromSettingsEntiries, ExtensionSettings, TargetPlatformName } from '../common/settings'
import { useLbrySettings } from '../common/useSettings'
import './popup.sass'
/** Utilty to set a setting in the browser */
const setSetting = <K extends keyof LbrySettings>(setting: K, value: LbrySettings[K]) => chrome.storage.local.set({ [setting]: value });
const setSetting = <K extends keyof ExtensionSettings>(setting: K, value: ExtensionSettings[K]) => chrome.storage.local.set({ [setting]: value });
/** Gets all the options for redirect destinations as selection options */
const platformOptions: SelectionOption[] = getPlatfromSettingsEntiries()
.map(([value, { display }]) => ({ value, display }));
const platformOptions: SelectionOption[] = getTargetPlatfromSettingsEntiries()
.map(([value, { displayName: display }]) => ({ value, display }));
function WatchOnLbryPopup() {
const { enabled, platform } = useLbrySettings();
const { redirect, targetPlatform } = useLbrySettings();
return <div className='container'>
<label className='radio-label'>Enable Redirection:</label>
<ButtonRadio value={enabled ? 'YES' : 'NO'} options={['YES', 'NO']}
onChange={enabled => setSetting('enabled', enabled.toLowerCase() === 'yes')} />
<label className='radio-label'>Where would you like to redirect?</label>
<ButtonRadio value={platform} options={platformOptions}
onChange={(platform: PlatformName) => setSetting('platform', platform)} />
<label className='radio-label'>Other useful tools:</label>
<a href='/tools/YTtoLBRY.html' target='_blank'>
<button type='button' className='btn1 button is-primary'>Subscriptions Converter</button>
</a>
<section>
<label className='radio-label'>Enable Redirection:</label>
<ButtonRadio value={redirect ? 'YES' : 'NO'} options={['YES', 'NO']}
onChange={redirect => setSetting('redirect', redirect.toLowerCase() === 'yes')} />
</section>
<section>
<label className='radio-label'>Where would you like to redirect?</label>
<ButtonRadio value={targetPlatform} options={platformOptions}
onChange={(platform: TargetPlatformName) => setSetting('targetPlatform', platform)} />
</section>
<section>
<label className='radio-label'>Other useful tools:</label>
<a href='/tools/YTtoLBRY.html' target='_blank'>
<button type='button' className='btn1 button is-primary'>Subscriptions Converter</button>
</a>
</section>
</div>;
}

12
src/scripts/storageSetup.ts
View file

@ -1,11 +1,11 @@
import { DEFAULT_SETTINGS, LbrySettings, getSettingsAsync } from '../common/settings';
import { DEFAULT_SETTINGS, ExtensionSettings, getExtensionSettingsAsync } from '../common/settings';
/** Reset settings to default value and update the browser badge text */
async function initSettings() {
const settings = await getSettingsAsync(...Object.keys(DEFAULT_SETTINGS) as Array<keyof LbrySettings>);
const settings = await getExtensionSettingsAsync(...Object.keys(DEFAULT_SETTINGS) as Array<keyof ExtensionSettings>);
// get all the values that aren't set and use them as a change set
const invalidEntries = (Object.entries(DEFAULT_SETTINGS) as Array<[keyof LbrySettings, LbrySettings[keyof LbrySettings]]>)
const invalidEntries = (Object.entries(DEFAULT_SETTINGS) as Array<[keyof ExtensionSettings, ExtensionSettings[keyof ExtensionSettings]]>)
.filter(([k]) => settings[k] === null || settings[k] === undefined);
// fix our local var and set it in storage for later
@ -15,12 +15,12 @@ async function initSettings() {
chrome.storage.local.set(changeSet);
}
chrome.browserAction.setBadgeText({ text: settings.enabled ? 'ON' : 'OFF' });
chrome.browserAction.setBadgeText({ text: settings.redirect ? 'ON' : 'OFF' });
}
chrome.storage.onChanged.addListener((changes, areaName) => {
if (areaName !== 'local' || !changes.enabled) return;
chrome.browserAction.setBadgeText({ text: changes.enabled.newValue ? 'ON' : 'OFF' });
if (areaName !== 'local' || !changes.redirect) return;
chrome.browserAction.setBadgeText({ text: changes.redirect.newValue ? 'ON' : 'OFF' });
});

39
src/scripts/tabOnUpdated.ts
View file

@ -1,12 +1,12 @@
import { appRedirectUrl, parseProtocolUrl } from '../common/lbry-url'
import { getSettingsAsync, PlatformName } from '../common/settings'
import { getExtensionSettingsAsync, getSourcePlatfromSettingsFromHostname, TargetPlatformName } from '../common/settings'
import { YTDescriptor, ytService } from '../common/yt'
export interface UpdateContext {
descriptor: YTDescriptor
/** LBRY URL fragment */
pathname: string
enabled: boolean
platform: PlatformName
lbryPathname: string
redirect: boolean
targetPlatform: TargetPlatformName
}
async function resolveYT(descriptor: YTDescriptor) {
@ -16,26 +16,31 @@ async function resolveYT(descriptor: YTDescriptor) {
return segments.join('/');
}
const pathnameCache: Record<string, string | undefined> = {};
const lbryPathnameCache: Record<string, string | undefined> = {};
async function ctxFromURL(url: string): Promise<UpdateContext | void> {
if (!url || !(url.startsWith('https://www.youtube.com/watch?v=') || url.startsWith('https://www.youtube.com/channel/'))) return;
url = new URL(url).href;
const { enabled, platform } = await getSettingsAsync('enabled', 'platform');
const descriptor = ytService.getId(url);
async function ctxFromURL(href: string): Promise<UpdateContext | void> {
if (!href) return;
const url = new URL(href);
if (!getSourcePlatfromSettingsFromHostname(url.hostname)) return
if (url.pathname.startsWith('/watch?')) return
if (url.pathname.startsWith('/channel?')) return
const { redirect, targetPlatform } = await getExtensionSettingsAsync('redirect', 'targetPlatform');
const descriptor = ytService.getId(href);
if (!descriptor) return; // couldn't get the ID, so we're done
const res = url in pathnameCache ? pathnameCache[url] : await resolveYT(descriptor);
pathnameCache[url] = res;
const res = href in lbryPathnameCache ? lbryPathnameCache[href] : await resolveYT(descriptor);
lbryPathnameCache[href] = res;
if (!res) return; // couldn't find it on lbry, so we're done
return { descriptor, pathname: res, enabled, platform };
return { descriptor, lbryPathname: res, redirect, targetPlatform };
}
// handles lbry.tv -> lbry app redirect
chrome.tabs.onUpdated.addListener(async (tabId, changeInfo, { url: tabUrl }) => {
const { enabled, platform } = await getSettingsAsync('enabled', 'platform');
if (!enabled || platform !== 'app' || !changeInfo.url || !tabUrl?.startsWith('https://odysee.com/')) return;
const { redirect, targetPlatform } = await getExtensionSettingsAsync('redirect', 'targetPlatform');
if (!redirect || targetPlatform !== 'app' || !changeInfo.url || !tabUrl?.startsWith('https://odysee.com/')) return;
const url = appRedirectUrl(tabUrl, { encode: true });
if (!url) return;
@ -61,7 +66,5 @@ chrome.runtime.onMessage.addListener(({ url }: { url: string }, sender, sendResp
// relay youtube link changes to the content script
chrome.tabs.onUpdated.addListener((tabId, changeInfo, { url }) => {
if (!changeInfo.url || !url || !(url.startsWith('https://www.youtube.com/watch?v=') || url.startsWith('https://www.youtube.com/channel/'))) return;
ctxFromURL(url).then(ctx => chrome.tabs.sendMessage(tabId, ctx));
if (url) ctxFromURL(url).then(ctx => chrome.tabs.sendMessage(tabId, ctx));
});

81
src/scripts/ytContent.tsx
View file

@ -1,9 +1,11 @@
import { PlatformName, platformSettings } from '../common/settings'
import { getSourcePlatfromSettingsFromHostname, TargetPlatformName, TargetPlatformSettings } from '../common/settings'
import type { UpdateContext } from '../scripts/tabOnUpdated'
import { h, JSX, render } from 'preact'
const sleep = (t: number) => new Promise(resolve => setTimeout(resolve, t));
function pauseAllVideos() { document.querySelectorAll<HTMLVideoElement>('video').forEach(v => v.pause()); }
interface ButtonSettings {
text: string
icon: string
@ -14,7 +16,7 @@ interface ButtonSettings {
}
}
const buttonSettings: Record<PlatformName, ButtonSettings> = {
const buttonSettings: Record<TargetPlatformName, ButtonSettings> = {
app: {
text: 'Watch on LBRY',
icon: chrome.runtime.getURL('icons/lbry/lbry-logo.svg')
@ -35,32 +37,32 @@ const buttonSettings: Record<PlatformName, ButtonSettings> = {
interface ButtonParameters
{
platform?: PlatformName
pathname?: string
targetPlatform?: TargetPlatformName
lbryPathname?: string
time?: number
}
export function WatchOnLbryButton({ platform = 'app', pathname, time }: ButtonParameters) {
if (!pathname || !platform) return null;
const platformSetting = platformSettings[platform];
const buttonSetting = buttonSettings[platform];
export function WatchOnLbryButton({ targetPlatform = 'app', lbryPathname, time }: ButtonParameters = {}) {
if (!lbryPathname || !targetPlatform) return null;
const targetPlatformSetting = TargetPlatformSettings[targetPlatform];
const buttonSetting = buttonSettings[targetPlatform];
const url = new URL(`${platformSetting.domainPrefix}${pathname}`)
const url = new URL(`${targetPlatformSetting.domainPrefix}${lbryPathname}`)
if (time) url.searchParams.append('t', time.toFixed(0))
return <div style={{ display: 'flex', justifyContent: 'center', flexDirection: 'column' }}>
<a href={`${url.toString()}`} onClick={pauseVideo} role='button'
<a href={`${url.toString()}`} onClick={pauseAllVideos} role='button'
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
gap: '12px',
borderRadius: '2px',
backgroundColor: platformSetting.theme,
backgroundColor: targetPlatformSetting.theme,
border: '0',
color: 'whitesmoke',
padding: '10px 16px',
marginRight: '5px',
marginRight: '4px',
fontSize: '14px',
textDecoration: 'none',
...buttonSetting.style?.button,
@ -75,53 +77,49 @@ export function WatchOnLbryButton({ platform = 'app', pathname, time }: ButtonPa
let mountPoint: HTMLDivElement | null = null
/** Returns a mount point for the button */
async function findButtonMountPoint(): Promise<HTMLDivElement | void> {
let ownerBar = document.querySelector('ytd-video-owner-renderer');
for (let i = 0; !ownerBar && i < 50; i++) {
await sleep(200);
ownerBar = document.querySelector('ytd-video-owner-renderer');
}
let mountBefore: HTMLDivElement | null = null
const sourcePlatform = getSourcePlatfromSettingsFromHostname(new URL(location.href).hostname)
if (!sourcePlatform) throw new Error(`Unknown source of: ${location.href}`)
while (!(mountBefore = document.querySelector(sourcePlatform.htmlQueries.mountButtonBefore))) await sleep(200);
if (!ownerBar) return;
const div = document.createElement('div');
div.style.display = 'flex';
ownerBar.insertAdjacentElement('afterend', div);
div.style.alignItems = 'center'
mountBefore.parentElement?.insertBefore(div, mountBefore)
mountPoint = div
}
let videoElement: HTMLVideoElement | null = null;
async function findVideoElement() {
while(!(videoElement = document.querySelector('#ytd-player video'))) await sleep(200)
const sourcePlatform = getSourcePlatfromSettingsFromHostname(new URL(location.href).hostname)
if (!sourcePlatform) throw new Error(`Unknown source of: ${location.href}`)
while(!(videoElement = document.querySelector(sourcePlatform.htmlQueries.videoPlayer))) await sleep(200)
videoElement.addEventListener('timeupdate', () => updateButton(ctxCache))
}
function pauseVideo() { document.querySelectorAll<HTMLVideoElement>('video').forEach(v => v.pause()); }
function openApp(url: string) {
pauseVideo();
location.assign(url);
}
/** Compute the URL and determine whether or not a redirect should be performed. Delegates the redirect to callbacks. */
let ctxCache: UpdateContext | null = null
function handleURLChange (ctx: UpdateContext | null) {
function handleURLChange (ctx: UpdateContext | null): void {
ctxCache = ctx
updateButton(ctx)
if (ctx?.enabled) redirectTo(ctx)
if (ctx?.redirect) redirectTo(ctx)
}
function updateButton(ctx: UpdateContext | null) {
function updateButton(ctx: UpdateContext | null): void {
if (!mountPoint) return
if (!ctx) return render(<WatchOnLbryButton />, mountPoint)
if (ctx.descriptor.type !== 'video') return;
const time = videoElement?.currentTime ?? 0
const pathname = ctx.pathname
const platform = ctx.platform
const lbryPathname = ctx.lbryPathname
const targetPlatform = ctx.targetPlatform
render(<WatchOnLbryButton platform={platform} pathname={pathname} time={time} />, mountPoint)
render(<WatchOnLbryButton targetPlatform={targetPlatform} lbryPathname={lbryPathname} time={time} />, mountPoint)
}
function redirectTo({ platform, pathname }: UpdateContext) {
function redirectTo({ targetPlatform, lbryPathname }: UpdateContext): void {
const parseYouTubeTime = (timeString: string) => {
const signs = timeString.replace(/[0-9]/g, '')
@ -139,13 +137,18 @@ function redirectTo({ platform, pathname }: UpdateContext) {
return total.toString()
}
const platformSetting = platformSettings[platform];
const url = new URL(`${platformSetting.domainPrefix}${pathname}`)
const targetPlatformSetting = TargetPlatformSettings[targetPlatform];
const url = new URL(`${targetPlatformSetting.domainPrefix}${lbryPathname}`)
const time = new URL(location.href).searchParams.get('t')
if (time) url.searchParams.append('t', parseYouTubeTime(time))
if (platform === 'app') return openApp(url.toString());
if (targetPlatform === 'app')
{
pauseAllVideos();
location.assign(url);
return
}
location.replace(url.toString());
}
@ -170,5 +173,5 @@ chrome.runtime.onMessage.addListener(async (ctx: UpdateContext) => handleURLChan
/** On settings change */
chrome.storage.onChanged.addListener(async (changes, areaName) => {
if (areaName !== 'local') return;
if (changes.platform) handleURLChange(await requestCtxFromUrl(location.href))
if (changes.targetPlatform) handleURLChange(await requestCtxFromUrl(location.href))
});

6
src/tools/YTtoLBRY.tsx
View file

@ -1,6 +1,6 @@
import { h, render } from 'preact'
import { useState } from 'preact/hooks'
import { getSettingsAsync, platformSettings } from '../common/settings'
import { getExtensionSettingsAsync, TargetPlatformSettings } from '../common/settings'
import { getFileContent, ytService } from '../common/yt'
import readme from './README.md'
@ -20,8 +20,8 @@ async function lbryChannelsFromFile(file: File) {
ext === 'csv' ? ytService.readCsv :
ytService.readJson)(await getFileContent(file)))
const lbryUrls = await ytService.resolveById(...Array.from(ids).map(id => ({ id, type: 'channel' } as const)));
const { platform } = await getSettingsAsync('platform');
const urlPrefix = platformSettings[platform].domainPrefix;
const { targetPlatform: platform } = await getExtensionSettingsAsync('targetPlatform');
const urlPrefix = TargetPlatformSettings[platform].domainPrefix;
return lbryUrls.map(channel => urlPrefix + channel);
}