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

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