Use events for channel id and fallback to current system

Also fix formatting
This commit is contained in:
Ajay 2022-09-02 00:46:55 -04:00
parent c479a601cd
commit 1377be9915
2 changed files with 71 additions and 61 deletions

View file

@ -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 {

View file

@ -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);
}