From 1377be99152415f9d78b4e06fa27ece71d3c1e2e Mon Sep 17 00:00:00 2001 From: Ajay Date: Fri, 2 Sep 2022 00:46:55 -0400 Subject: [PATCH] Use events for channel id and fallback to current system Also fix formatting --- src/content.ts | 55 ++++++++++++++++++++--------------- src/document.ts | 77 +++++++++++++++++++++++++------------------------ 2 files changed, 71 insertions(+), 61 deletions(-) diff --git a/src/content.ts b/src/content.ts index bb450e39..97e6ca8d 100644 --- a/src/content.ts +++ b/src/content.ts @@ -346,6 +346,7 @@ function resetValues() { id: null }; lockedCategories = []; + isLivePremiere = false; //empty the preview bar if (previewBar !== null) { @@ -1304,25 +1305,29 @@ function updatePreviewBar(): void { async function whitelistCheck() { const whitelistedChannels = Config.config.whitelistedChannels; - const getChannelID = () => - (document.querySelector("a.ytd-video-owner-renderer") // YouTube - ?? document.querySelector("a.ytp-title-channel-logo") // YouTube Embed - ?? document.querySelector(".channel-profile #channel-name")?.parentElement.parentElement // Invidious - ?? document.querySelector("a.slim-owner-icon-and-title")) // Mobile YouTube - ?.getAttribute("href")?.match(/\/(?:channel|c|user)\/(UC[a-zA-Z0-9_-]{22}|[a-zA-Z0-9_-]+)/)?.[1]; - try { - await utils.wait(() => !!getChannelID(), 6000, 20); + await utils.wait(() => channelIDInfo.status === ChannelIDStatus.Found, 6000, 20); - channelIDInfo = { - status: ChannelIDStatus.Found, - id: getChannelID().match(/^\/?([^\s/]+)/)[0] - }; + // If found, continue on, it was set by the listener } catch (e) { - channelIDInfo = { - status: ChannelIDStatus.Failed, - id: null - }; + // Try fallback + const channelIDFallback = (document.querySelector("a.ytd-video-owner-renderer") // YouTube + ?? document.querySelector("a.ytp-title-channel-logo") // YouTube Embed + ?? document.querySelector(".channel-profile #channel-name")?.parentElement.parentElement // Invidious + ?? document.querySelector("a.slim-owner-icon-and-title")) // Mobile YouTube + ?.getAttribute("href")?.match(/\/(?:channel|c|user)\/(UC[a-zA-Z0-9_-]{22}|[a-zA-Z0-9_-]+)/)?.[1]; + + if (channelIDFallback) { + channelIDInfo = { + status: ChannelIDStatus.Found, + id: channelIDFallback + }; + } else { + channelIDInfo = { + status: ChannelIDStatus.Failed, + id: null + }; + } } //see if this is a whitelisted channel @@ -2196,25 +2201,25 @@ function windowListenerHandler(event: MessageEvent): void { const data = event.data; const dataType = data.type if (data.source !== "sponsorblock") return; + if (dataType === "navigation") { sponsorVideoID = data.videoID; pageType = data.pageType - /* for use with category-specific channelIDInfo = { id: data.channelID, - name: data.channelTitle, - status: 1 + status: ChannelIDStatus.Found } - */ } else if (dataType === "ad") { - // update isAdPlaying - if(isAdPlaying != data.playing) { + if (isAdPlaying != data.playing) { isAdPlaying = data.playing updatePreviewBar(); updateVisibilityOfPlayerControlsButton(); } } else if (dataType === "data") { - sponsorVideoID = data.videoID; + if (data.video !== sponsorVideoID) { + sponsorVideoID = data.videoID; + videoIDChange(sponsorVideoID); + } isLivePremiere = data.isLive || data.isPremiere } } @@ -2263,13 +2268,15 @@ function addPageListeners(): void { refreshVideoAttachments(); } }; + // inject into document const docScript = document.createElement("script"); docScript.src = chrome.runtime.getURL("js/document.js"); (document.head || document.documentElement).appendChild(docScript); + document.addEventListener("yt-navigate-start", resetValues); document.addEventListener("yt-navigate-finish", refreshListners); - window.addEventListener("message", windowListenerHandler) + window.addEventListener("message", windowListenerHandler); } function addHotkeyListener(): void { diff --git a/src/document.ts b/src/document.ts index fe66035e..d537dd0e 100644 --- a/src/document.ts +++ b/src/document.ts @@ -3,75 +3,78 @@ This script is used to get the details from the page and make them available for the content script by being injected directly into the page */ -import { PageType } from "./types" +import { PageType } from "./types"; interface StartMessage { - type: "navigation", - pageType: PageType - videoID: string | null, + type: "navigation", + pageType: PageType + videoID: string | null, } interface FinishMessage extends StartMessage { - channelID: string, - channelTitle: string + channelID: string, + channelTitle: string } interface AdMessage { - type: "ad", - playing: boolean + type: "ad", + playing: boolean } interface VideoData { - type: "data", - videoID: string, - isLive: boolean, - isPremiere: boolean + type: "data", + videoID: string, + isLive: boolean, + isPremiere: boolean } -type WindowMessage = StartMessage | FinishMessage | AdMessage | VideoData +type WindowMessage = StartMessage | FinishMessage | AdMessage | VideoData; // global playerClient - too difficult to type // eslint-disable-next-line @typescript-eslint/no-explicit-any let playerClient: any; const sendMessage = (message: WindowMessage): void => { - window.postMessage({ source: "sponsorblock", ...message}, "/") + window.postMessage({ source: "sponsorblock", ...message }, "/"); } function setupPlayerClient(e: CustomEvent): void { - if (playerClient) return // early exit if already defined - playerClient = e.detail - sendVideoData(); // send playerData after setup - e.detail.addEventListener('onAdStart', () => sendMessage({ type: "ad", playing: true } as AdMessage)) - e.detail.addEventListener('onAdFinish', () => sendMessage({ type: "ad", playing: false } as AdMessage)) + if (playerClient) return; // early exit if already defined + + playerClient = e.detail; + sendVideoData(); // send playerData after setup + + e.detail.addEventListener('onAdStart', () => sendMessage({ type: "ad", playing: true } as AdMessage)); + e.detail.addEventListener('onAdFinish', () => sendMessage({ type: "ad", playing: false } as AdMessage)); } -document.addEventListener("yt-player-updated", setupPlayerClient) -document.addEventListener("yt-navigate-start", navigationStartSend) -document.addEventListener("yt-navigate-finish", navigateFinishSend) +document.addEventListener("yt-player-updated", setupPlayerClient); +document.addEventListener("yt-navigate-start", navigationStartSend); +document.addEventListener("yt-navigate-finish", navigateFinishSend); -function navigationParser (event: CustomEvent): StartMessage { - const pageType: PageType = event.detail.pageType - const result: StartMessage = { type: "navigation", pageType, videoID: null } - if (pageType === "shorts" || pageType === "watch") { - const endpoint = event.detail.endpoint - result.videoID = (pageType === "shorts" ? endpoint.reelWatchEndpoint : endpoint.watchEndpoint).videoId - } - return result +function navigationParser(event: CustomEvent): StartMessage { + const pageType: PageType = event.detail.pageType; + const result: StartMessage = { type: "navigation", pageType, videoID: null }; + if (pageType === "shorts" || pageType === "watch") { + const endpoint = event.detail.endpoint + result.videoID = (pageType === "shorts" ? endpoint.reelWatchEndpoint : endpoint.watchEndpoint).videoId; + } + + return result; } function navigationStartSend(event: CustomEvent): void { - sendMessage(navigationParser(event) as StartMessage) + sendMessage(navigationParser(event) as StartMessage); } function navigateFinishSend(event: CustomEvent): void { - sendVideoData() // arrived at new video, send video data - const videoDetails = event.detail?.response?.playerResponse?.videoDetails - sendMessage({ channelID: videoDetails.channelId, channelTitle: videoDetails.author, ...navigationParser(event) } as FinishMessage) + sendVideoData(); // arrived at new video, send video data + const videoDetails = event.detail?.response?.playerResponse?.videoDetails; + sendMessage({ channelID: videoDetails.channelId, channelTitle: videoDetails.author, ...navigationParser(event) } as FinishMessage); } function sendVideoData(): void { - if (!playerClient) return - const { video_id, isLive, isPremiere } = playerClient.getVideoData(); - sendMessage({ type: "data", videoID: video_id, isLive, isPremiere } as VideoData) + if (!playerClient) return; + const { video_id, isLive, isPremiere } = playerClient.getVideoData(); + sendMessage({ type: "data", videoID: video_id, isLive, isPremiere } as VideoData); } \ No newline at end of file