Add initial unlisted detection for getting a list of unlisted videos

A temporary measure which will be removed next month

https://support.google.com/youtube/answer/9230970

src/render/GenericNotice.tsx

@@ -0,0 +1,111 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import NoticeComponent from "../components/NoticeComponent";
+
+import Utils from "../utils";
+const utils = new Utils();
+
+import { ContentContainer } from "../types";
+import NoticeTextSelectionComponent from "../components/NoticeTextSectionComponent";
+
+export interface ButtonListener {
+    name: string,
+    listener: (e?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void
+}
+
+export interface NoticeOptions {
+    title: string,
+    textBoxes?: string[],
+    buttons?: ButtonListener[],
+    fadeIn?: boolean,
+    timed?: boolean
+}
+
+export default class GenericNotice {
+    // Contains functions and variables from the content script needed by the skip notice
+    contentContainer: ContentContainer;
+
+    noticeElement: HTMLDivElement;
+    noticeRef: React.MutableRefObject<NoticeComponent>;
+
+    constructor(contentContainer: ContentContainer, idSuffix: string, options: NoticeOptions) {
+        this.noticeRef = React.createRef();
+
+        this.contentContainer = contentContainer;
+
+        const referenceNode = utils.findReferenceNode();
+    
+        this.noticeElement = document.createElement("div");
+        this.noticeElement.id = "sponsorSkipNoticeContainer" + idSuffix;
+
+        referenceNode.prepend(this.noticeElement);
+
+        ReactDOM.render(
+            <NoticeComponent
+                noticeTitle={options.title}
+                idSuffix={idSuffix}
+                fadeIn={options.fadeIn ?? true}
+                timed={options.timed ?? true}
+                ref={this.noticeRef}
+                closeListener={() => this.close()} >
+                    
+                    {this.getMessageBox(idSuffix, options.textBoxes)}
+
+                    <tr id={"sponsorSkipNoticeSpacer" + idSuffix}
+                        className="sponsorBlockSpacer">
+                    </tr>
+
+                    <div className="sponsorSkipNoticeRightSection"
+                        style={{position: "relative"}}>
+
+                        {this.getButtons(options.buttons)}
+                    </div>
+            </NoticeComponent>,
+            this.noticeElement
+        );
+    }
+
+    getMessageBox(idSuffix: string, textBoxes: string[]): JSX.Element[] { 
+        if (textBoxes) {
+            const result = [];
+            for (let i = 0; i < textBoxes.length; i++) {
+                result.push(
+                    <NoticeTextSelectionComponent idSuffix={idSuffix}
+                        key={i}
+                        text={textBoxes[i]} />
+                )
+            }
+
+            return result;
+        } else {
+            return null;
+        }
+    }
+
+    getButtons(buttons?: ButtonListener[]): JSX.Element[] {
+        if (buttons) {
+            const result: JSX.Element[] = [];
+
+            for (const button of buttons) {
+                result.push(
+                    <button className="sponsorSkipObject sponsorSkipNoticeButton sponsorSkipNoticeRightButton"
+                            key={button.name}
+                            onClick={(e) => button.listener(e)}>
+
+                            {button.name}
+                    </button>
+                )
+            }
+
+            return result;
+        } else {
+            return null;
+        }
+    }
+
+    close(): void {
+        ReactDOM.unmountComponentAtNode(this.noticeElement);
+
+        this.noticeElement.remove();
+    }
+}

src/render/SkipNotice.tsx

@@ -1,6 +1,9 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 
+import Utils from "../utils";
+const utils = new Utils();
+
 import SkipNoticeComponent, { SkipNoticeAction } from "../components/SkipNoticeComponent";
 import { SponsorTime, ContentContainer } from "../types";
 
@@ -21,26 +24,7 @@ class SkipNotice {
         this.autoSkip = autoSkip;
         this.contentContainer = contentContainer;
 
-        //get reference node
-        let referenceNode = document.getElementById("player-container-id")
-                                ?? document.getElementById("movie_player") 
-                                ?? document.querySelector("#main-panel.ytmusic-player-page") // YouTube music
-                                ?? document.querySelector("#player-container .video-js") // Invidious
-                                ?? document.querySelector(".main-video-section > .video-container");  // Cloudtube  
-        if (referenceNode == null) {
-            //for embeds
-            const player = document.getElementById("player");
-            referenceNode = player.firstChild as HTMLElement;
-            let index = 1;
-
-            //find the child that is the video player (sometimes it is not the first)
-            while (index < player.children.length && (!referenceNode.classList.contains("html5-video-player") || !referenceNode.classList.contains("ytp-embed"))) {
-                referenceNode = player.children[index] as HTMLElement;
-
-                index++;
-            }
-        }
-        
+        const referenceNode = utils.findReferenceNode();
     
         const amountOfPreviousNotices = document.getElementsByClassName("sponsorSkipNotice").length;
         //this is the suffix added at the end of every id

src/render/SubmissionNotice.tsx

@@ -1,6 +1,9 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 
+import Utils from "../utils";
+const utils = new Utils();
+
 import SubmissionNoticeComponent from "../components/SubmissionNoticeComponent";
 import { ContentContainer } from "../types";
 
@@ -20,22 +23,7 @@ class SubmissionNotice {
         this.contentContainer = contentContainer;
         this.callback = callback;
 
-        //get reference node
-        let referenceNode = document.getElementById("player-container-id") 
-                                || document.getElementById("movie_player") || document.querySelector("#player-container .video-js");
-        if (referenceNode == null) {
-            //for embeds
-            const player = document.getElementById("player");
-            referenceNode = player.firstChild as HTMLElement;
-            let index = 1;
-
-            //find the child that is the video player (sometimes it is not the first)
-            while (!referenceNode.classList.contains("html5-video-player") || !referenceNode.classList.contains("ytp-embed")) {
-                referenceNode = player.children[index] as HTMLElement;
-
-                index++;
-            }
-        }
+        const referenceNode = utils.findReferenceNode();
     
         this.noticeElement = document.createElement("div");
         this.noticeElement.id = "submissionNoticeContainer";