Add piped support

- add playerInit listener
- made popup container generic for possible piped support
- explicitly add css files to web_accessible_resources

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",

src/content.ts

@@ -2099,19 +2099,33 @@ function openInfoMenu() {
     frame.src = chrome.extension.getURL("popup.html");
     popup.appendChild(frame);
 
-    const parentNodes = document.querySelectorAll("#secondary-inner");
+    const elemHasChild = (elements: NodeListOf<HTMLElement>): Element => {
-    let parentNode = null;
+        let parentNode: Element;
-    for (let i = 0; i < parentNodes.length; i++) {
+        for (const node of elements) {
-        if (parentNodes[i].firstElementChild !== null) {
+            if (node.firstElementChild !== null) {
-            parentNode = parentNodes[i];
+                parentNode = node;
             }
         }
-    if (parentNode == null) {
+        return parentNode
-        //old youtube theme
-        parentNode = document.getElementById("watch7-sidebar-contents");
     }
 
-    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<HTMLElement>;
+        const el = option.hasChildCheck ? elemHasChild(allElements) : allElements[0];
+
+        if (el) {
+            if (option.hasChildCheck) el.insertBefore(popup, el.firstChild);
+            break;
+        }
+    }
 }
 
 function closeInfoMenu() {
@@ -2487,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);
 }
 

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;
 

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