mirror of
https://github.com/LBRYFoundation/Watch-on-LBRY.git
synced 2025-08-23 17:47:26 +00:00
Update ytContent.tsx
Turns out YouTube doesn't destroy the `HTMLVideoElement` once its created, so no need to check if its destroyed
This commit is contained in:
parent
c7a839573a
commit
8c4f3e60e0
1 changed files with 24 additions and 32 deletions
|
@ -41,6 +41,8 @@ async function resolveYT(descriptor: YTDescriptor) {
|
||||||
return segments.join('/');
|
return segments.join('/');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/** Compute the URL and determine whether or not a redirect should be performed. Delegates the redirect to callbacks. */
|
/** Compute the URL and determine whether or not a redirect should be performed. Delegates the redirect to callbacks. */
|
||||||
async function handleURLChange(ctx: UpdateContext, { onRedirect, onURL }: UpdaterOptions): Promise<void> {
|
async function handleURLChange(ctx: UpdateContext, { onRedirect, onURL }: UpdaterOptions): Promise<void> {
|
||||||
if (onURL) onURL(ctx);
|
if (onURL) onURL(ctx);
|
||||||
|
@ -61,6 +63,7 @@ async function findMountPoint(): Promise<HTMLDivElement | void> {
|
||||||
const div = document.createElement('div');
|
const div = document.createElement('div');
|
||||||
div.style.display = 'flex';
|
div.style.display = 'flex';
|
||||||
ownerBar.insertAdjacentElement('afterend', div);
|
ownerBar.insertAdjacentElement('afterend', div);
|
||||||
|
|
||||||
return div;
|
return div;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -96,39 +99,7 @@ function WatchOnLbryButton({ redirect = 'app', url: pathname, time }: { redirect
|
||||||
|
|
||||||
const mountPointPromise = findMountPoint();
|
const mountPointPromise = findMountPoint();
|
||||||
|
|
||||||
|
|
||||||
let ctxCache: UpdateContext | undefined
|
let ctxCache: UpdateContext | undefined
|
||||||
|
|
||||||
{(async () => {
|
|
||||||
let videoElement: HTMLVideoElement | null = null;
|
|
||||||
let renderingButton = false
|
|
||||||
|
|
||||||
const handleTimeChange = () => {
|
|
||||||
if (renderingButton) return
|
|
||||||
if (!videoElement) return
|
|
||||||
if (!ctxCache?.url) return
|
|
||||||
const time = (videoElement.currentTime ?? 0).toFixed(0)
|
|
||||||
const { url, redirect } = ctxCache
|
|
||||||
|
|
||||||
renderingButton = true
|
|
||||||
mountPointPromise.then(mountPoint => mountPoint && render(<WatchOnLbryButton time={time} url={url} redirect={redirect} />, mountPoint))
|
|
||||||
.then(() => renderingButton = false)
|
|
||||||
}
|
|
||||||
|
|
||||||
while (true) {
|
|
||||||
await sleep(200)
|
|
||||||
if (!videoElement) {
|
|
||||||
videoElement = document.querySelector('video')
|
|
||||||
if (videoElement) videoElement.addEventListener('timeupdate', handleTimeChange)
|
|
||||||
}
|
|
||||||
else if (!videoElement.parentElement) {
|
|
||||||
videoElement.removeEventListener('timeupdate', handleTimeChange)
|
|
||||||
videoElement = null
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})()}
|
|
||||||
|
|
||||||
|
|
||||||
const handle = (ctx: UpdateContext) => (ctxCache = ctx) && ctx.url && handleURLChange(ctx, {
|
const handle = (ctx: UpdateContext) => (ctxCache = ctx) && ctx.url && handleURLChange(ctx, {
|
||||||
async onURL({ descriptor: { type }, url, redirect }) {
|
async onURL({ descriptor: { type }, url, redirect }) {
|
||||||
const mountPoint = await mountPointPromise;
|
const mountPoint = await mountPointPromise;
|
||||||
|
@ -142,6 +113,27 @@ const handle = (ctx: UpdateContext) => (ctxCache = ctx) && ctx.url && handleURLC
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
{(async () => {
|
||||||
|
let videoElement: HTMLVideoElement | null = null;
|
||||||
|
let renderingButton = false
|
||||||
|
|
||||||
|
while(!(videoElement = document.querySelector('video'))) await sleep(200)
|
||||||
|
|
||||||
|
const handleTimeChange = () => {
|
||||||
|
if (renderingButton) return
|
||||||
|
if (!videoElement) return
|
||||||
|
if (!ctxCache?.url) return
|
||||||
|
const time = (videoElement.currentTime ?? 0).toFixed(0)
|
||||||
|
const { url, redirect } = ctxCache
|
||||||
|
|
||||||
|
renderingButton = true
|
||||||
|
mountPointPromise.then(mountPoint => mountPoint && render(<WatchOnLbryButton time={time} url={url} redirect={redirect} />, mountPoint))
|
||||||
|
.then(() => renderingButton = false)
|
||||||
|
}
|
||||||
|
|
||||||
|
videoElement.addEventListener('timeupdate', handleTimeChange)
|
||||||
|
})()}
|
||||||
|
|
||||||
// handle the location on load of the page
|
// handle the location on load of the page
|
||||||
chrome.runtime.sendMessage({ url: location.href }, async (ctx: UpdateContext) => handle(ctx));
|
chrome.runtime.sendMessage({ url: location.href }, async (ctx: UpdateContext) => handle(ctx));
|
||||||
|
|
||||||
|
|
Loading…
Add table
Reference in a new issue