diff --git a/manifest/manifest.json b/manifest/manifest.json index 70323383..ac691218 100644 --- a/manifest/manifest.json +++ b/manifest/manifest.json @@ -69,8 +69,11 @@ "icons/PlayerInfoIconSponsorBlocker.svg", "icons/PlayerDeleteIconSponsorBlocker.svg", "popup.html", + "popup.css", "content.css", - "js/document.js" + "shared.css", + "js/document.js", + "libs/Source+Sans+Pro.css" ], "permissions": [ "storage", diff --git a/src/content.ts b/src/content.ts index 85e9e9c9..82208446 100644 --- a/src/content.ts +++ b/src/content.ts @@ -526,6 +526,9 @@ function createPreviewBar(): void { // For Youtube Music // there are two sliders, one for volume and one for progress - both called #progressContainer selector: "#progress-bar>#sliderContainer>div>#sliderBar>#progressContainer", + }, { + // For piped + selector: ".shaka-ad-markers", isVisibleCheck: false } ]; @@ -2096,19 +2099,33 @@ function openInfoMenu() { frame.src = chrome.extension.getURL("popup.html"); popup.appendChild(frame); - const parentNodes = document.querySelectorAll("#secondary-inner"); - let parentNode = null; - for (let i = 0; i < parentNodes.length; i++) { - if (parentNodes[i].firstElementChild !== null) { - parentNode = parentNodes[i]; + const elemHasChild = (elements: NodeListOf): Element => { + let parentNode: Element; + for (const node of elements) { + if (node.firstElementChild !== null) { + parentNode = node; + } } - } - if (parentNode == null) { - //old youtube theme - parentNode = document.getElementById("watch7-sidebar-contents"); + return parentNode } - parentNode.insertBefore(popup, parentNode.firstChild); + const parentNodeOptions = [{ + // YouTube + selector: "#secondary-inner", + hasChildCheck: true + }, { + // old youtube theme + selector: "#watch7-sidebar-contents", + }]; + for (const option of parentNodeOptions) { + const allElements = document.querySelectorAll(option.selector) as NodeListOf; + const el = option.hasChildCheck ? elemHasChild(allElements) : allElements[0]; + + if (el) { + if (option.hasChildCheck) el.insertBefore(popup, el.firstChild); + break; + } + } } function closeInfoMenu() { @@ -2484,6 +2501,12 @@ function addPageListeners(): void { document.addEventListener("yt-navigate-start", resetValues); document.addEventListener("yt-navigate-finish", refreshListners); + // piped player init + window.addEventListener("playerInit", () => { + if (!document.querySelector('meta[property="og:title"][content="Piped"]')) return + previewBar = null; // remove old previewbar + createPreviewBar() + }); window.addEventListener("message", windowListenerHandler); } diff --git a/src/utils.ts b/src/utils.ts index 90bd5418..453c062d 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -401,14 +401,15 @@ export default class Utils { "#player-container", // Preview on hover "#main-panel.ytmusic-player-page", // YouTube music "#player-container .video-js", // Invidious - ".main-video-section > .video-container" // Cloudtube + ".main-video-section > .video-container", // Cloudtube + ".shaka-video-container" // Piped ]; let referenceNode = findValidElementFromSelector(selectors) if (referenceNode == null) { //for embeds const player = document.getElementById("player"); - referenceNode = player.firstChild as HTMLElement; + referenceNode = player?.firstChild as HTMLElement; if (referenceNode) { let index = 1; diff --git a/src/utils/pageUtils.ts b/src/utils/pageUtils.ts index beda1585..5281bf1f 100644 --- a/src/utils/pageUtils.ts +++ b/src/utils/pageUtils.ts @@ -9,6 +9,8 @@ export function getControls(): HTMLElement { ".player-controls-top", // Invidious/videojs video element's controls element ".vjs-control-bar", + // Piped shaka player + ".shaka-bottom-controls" ]; for (const controlsSelector of controlsSelectors) {