refactor: improve readability

Author: CatBraaain

src/entrypoints/content/page.ts src/entrypoints/content/channel-page.ts

@@ -1,9 +1,9 @@
-export default class Page {
-  public get isOnSupportedPage() {
-    return this.videoKind !== null;
+export default class ChannelPage {
+  public static get isOnSupportedPage() {
+    return !!this.videoKind;
   }
 
-  public get videoKind(): VideoKind {
+  public static get videoKind(): VideoKindNullable {
     const videoKind = window.location.pathname.split("/").at(-1)!.split("?")[0];
     switch (videoKind) {
       case "videos":
@@ -17,7 +17,7 @@ export default class Page {
     }
   }
 
-  public get sortKind(): SortKind {
+  public static get sortKind(): SortKindNullable {
     const selectedButton = document.querySelector("#primary #header #chips>[selected]");
     const index = selectedButton
       ? Array.from(selectedButton.parentNode?.children ?? []).indexOf(selectedButton)
@@ -34,63 +34,29 @@ export default class Page {
     }
   }
 
-  public get hasPlayAllButton() {
+  public static get hasPlayAllButton() {
     return !!document.querySelector(".play-all-btn");
   }
 
   public channelId: string;
+
   public constructor(channelId: string) {
     this.channelId = channelId;
   }
 
-  public static applyStyleForPlayAllButton() {
-    const style = document.createElement("style");
-    style.textContent = `
-      .play-all-btn {
-        background-color: #8000FF;
-        color: #F1F1F1;
-
-        height: 32px;
-        min-width: 12px;
-
-        display: inline-flex;
-        flex-direction: row;
-        align-items: center;
-        justify-content: center;
-        margin-left: 12px;
-
-        border-radius: 8px;
-        padding: 0 12px;
-
-        font-family: 'Roboto', 'Arial', sans-serif;
-        font-size: 1.4rem;
-        font-weight: 500;
-        text-decoration: none;
-
-        cursor: pointer;
-      }
-
-      .play-all-btn:hover,
-      .play-all-btn:focus {
-        background-color:#9B33FF;
-      }
-    `;
-    document.head.appendChild(style);
-  }
-
-  public ensurePlayAllButton(channelId: string) {
-    if (!this.hasPlayAllButton) {
-      this.addPlayAllButton(channelId);
+  public ensurePlayAllButton() {
+    if (!ChannelPage.hasPlayAllButton) {
+      this.addPlayAllButton(ChannelPage.videoKind, ChannelPage.sortKind);
     }
   }
 
-  public addPlayAllButton(channelId: string) {
+  public addPlayAllButton(videoKind: VideoKindNullable, sortKind: SortKindNullable) {
     const playAllButton = document.createElement("a");
-    const playListPath = this._getPlayListPath(channelId);
     playAllButton.classList.add("play-all-btn");
-    if (playListPath) {
+    if (videoKind && sortKind) {
+      const playListPath = this._getPlayListPath(videoKind, sortKind);
       playAllButton.href = playListPath;
-      playAllButton.textContent = `Play All (${this.sortKind})`;
+      playAllButton.textContent = `Play All (${sortKind})`;
     } else {
       playAllButton.textContent = `Play All (Not Available)`;
     }
@@ -99,17 +65,17 @@ export default class Page {
     buttonHolder?.appendChild(playAllButton);
   }
 
-  private _getPlayListPath(channelId: string): string {
-    if (this.sortKind === "Oldest") {
+  private _getPlayListPath(videoKind: VideoKind, sortKind: SortKind): string {
+    if (sortKind === "Oldest") {
       const oldestVideoHref = document.querySelector<HTMLLinkElement>(
         "ytd-browse [href^='/watch?v='],ytd-browse [href^='/shorts/']",
       )?.href;
       const videoId = oldestVideoHref?.match(/(?:watch\?v=|shorts\/)([^&]*)/)?.at(1);
       return videoId ? `/watch?v=${videoId}&list=UL01234567890` : "";
     } else {
-      if (channelId && this.videoKind && this.sortKind) {
-        const playlistPrefix = this._getPlayListPrefix(this.videoKind, this.sortKind);
-        return `/playlist?list=${playlistPrefix}${channelId}&playnext=1`;
+      if (videoKind && sortKind) {
+        const playlistPrefix = this._getPlayListPrefix(videoKind, sortKind);
+        return `/playlist?list=${playlistPrefix}${this.channelId}&playnext=1`;
       } else {
         return "";
       }
@@ -136,5 +102,8 @@ export default class Page {
   }
 }
 
-type VideoKind = "Videos" | "Shorts" | "Streams" | null;
-type SortKind = "Latest" | "Popular" | "Oldest" | null;
+type VideoKind = "Videos" | "Shorts" | "Streams";
+type SortKind = "Latest" | "Popular" | "Oldest";
+
+type VideoKindNullable = VideoKind | null;
+type SortKindNullable = SortKind | null;

src/entrypoints/content/index.ts

@@ -1,6 +1,7 @@
-import { defineContentScript } from "wxt/sandbox";
+import { defineContentScript } from "wxt/sandbox";
 
-import Page from "./page";
+import ChannelPage from "./channel-page";
+import YoutubePage from "./youtube-page";
 
 export default defineContentScript({
   matches: ["https://www.youtube.com/*"],
@@ -9,33 +10,24 @@ export default defineContentScript({
 });
 
 function main() {
-  Page.applyStyleForPlayAllButton();
-
-  let page = new Page("");
-  let observer: MutationObserver | null = null;
+  YoutubePage.applyStyleForPlayAllButton();
 
   // Triggered when navigating to the videos, shorts, or streams page
   window.addEventListener("yt-navigate-finish", (e: any) => {
-    if (!page.isOnSupportedPage) {
+    if (!ChannelPage.isOnSupportedPage) {
       return;
     }
 
     const channelId = e.detail.endpoint.browseEndpoint.browseId.slice(2);
-    if (page.channelId !== channelId) {
-      page = new Page(channelId);
-      observer?.disconnect();
-    }
+    const channelPage = new ChannelPage(channelId);
+    channelPage.ensurePlayAllButton();
 
-    observer = new MutationObserver(() => {
-      if (page.isOnSupportedPage) {
-        page.ensurePlayAllButton(channelId);
+    const observer = new MutationObserver(() => {
+      if (ChannelPage.isOnSupportedPage) {
+        channelPage.ensurePlayAllButton();
       }
     });
 
-    observer.disconnect();
-
-    page.ensurePlayAllButton(channelId);
-
     // Callback will be triggered when changing the sort to latest/popular/oldest
     const buttonHolder = document.querySelector("#primary #header #chips")!;
     observer.observe(buttonHolder, {

src/entrypoints/content/youtube-page.ts

@@ -0,0 +1,36 @@
+export default class YoutubePage {
+  public static applyStyleForPlayAllButton() {
+    const style = document.createElement("style");
+    style.textContent = `
+      .play-all-btn {
+        background-color: #8000FF;
+        color: #F1F1F1;
+
+        height: 32px;
+        min-width: 12px;
+
+        display: inline-flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        margin-left: 12px;
+
+        border-radius: 8px;
+        padding: 0 12px;
+
+        font-family: 'Roboto', 'Arial', sans-serif;
+        font-size: 1.4rem;
+        font-weight: 500;
+        text-decoration: none;
+
+        cursor: pointer;
+      }
+
+      .play-all-btn:hover,
+      .play-all-btn:focus {
+        background-color:#9B33FF;
+      }
+    `;
+    document.head.appendChild(style);
+  }
+}