feat: add dropdown menu to display all buttons

Author: CatBraaain

src/entrypoints/play-all-button.content/index.ts

@@ -14,6 +14,9 @@ export default defineContentScript({
 function main() {
   setHooks();
 
+  ytxEventEmitter.on(YTX_EVENTS.CHANNEL_ENTER, async (channel) => {
+    await renderDropdown(channel);
+  });
   [
     YTX_EVENTS.CATEGORY_ENTER,
     YTX_EVENTS.SORT_CHANGED,
@@ -62,3 +65,50 @@ async function maybeRenderButton(channel: Channel) {
     YoutubeDOM.sortButtonHolder!.appendChild(playAllButton);
   }
 }
+
+async function renderDropdown(channel: Channel) {
+  if (document.querySelector("yt-flexible-actions-view-model .play-all-btns")) {
+    return;
+  }
+
+  const container = document.createElement("div");
+  container.className = "play-all-btns";
+
+  const button = document.createElement("button");
+  button.textContent = "Play All Buttons ▼";
+
+  const menu = document.createElement("div");
+  menu.className = "hidden";
+
+  for (const categoryKind of YoutubeDOM.categories) {
+    for (const sortKind of YoutubeDOM.sorts) {
+      const href = await channel.getPlaylistPath(categoryKind, sortKind);
+      if (href) {
+        const a = document.createElement("a");
+        a.href = href;
+        a.textContent = `${categoryKind} (${sortKind})`;
+        menu.appendChild(a);
+      }
+    }
+  }
+
+  container.append(button, menu);
+
+  document
+    .querySelector("yt-flexible-actions-view-model")
+    ?.appendChild(container);
+
+  let isOpen = false;
+  button.addEventListener("click", (e) => {
+    e.stopPropagation();
+    isOpen = !isOpen;
+    menu.classList.toggle("hidden", !isOpen);
+  });
+  menu.addEventListener("click", (e) => {
+    e.stopPropagation();
+  });
+  document.addEventListener("click", () => {
+    isOpen = false;
+    menu.classList.add("hidden");
+  });
+}

src/entrypoints/play-all-button.content/play-all-button.css

@@ -26,3 +26,54 @@
 .play-all-btn:focus {
   background-color: #9b33ff;
 }
+
+.play-all-btns {
+  position: relative;
+
+  button {
+    background-color: #8000ff;
+    color: #f1f1f1;
+
+    height: 36px;
+    width: 100%;
+
+    border-radius: 18px;
+    padding: 0 16px;
+
+    font-family: "Roboto", Arial, sans-serif !important;
+    font-size: 1.4rem;
+    font-weight: 500;
+
+    cursor: pointer;
+
+    border-style: none;
+  }
+  button:hover {
+    background-color: #9b33ff;
+  }
+
+  & > div {
+    position: absolute;
+    left: 0;
+    margin-top: 8px;
+    background-color: #282828;
+    border-radius: 8px;
+    min-width: 160px;
+    z-index: 1000;
+    overflow: hidden;
+
+    a {
+      display: block;
+      padding: 12px 16px;
+      color: #f1f1f1;
+      text-decoration: none;
+      font-size: 1.4rem;
+    }
+    a:hover {
+      background-color: #323232;
+    }
+  }
+  & > div.hidden {
+    display: none;
+  }
+}

src/entrypoints/play-all-button.content/youtube-api.ts

@@ -17,6 +17,9 @@ export async function resolvePlaylistPath(
 ): Promise<string> {
   if (sortKind === "Oldest") {
     const videoId = await getOldestItemId(channelId, categoryKind);
+    if (videoId === null) {
+      return "";
+    }
     return videoId ? `/watch?v=${videoId}&list=UL01234567890` : "";
   } else {
     return `${resolveFilteredPlaylistUrl(channelId, categoryKind, sortKind)}&playnext=1`;
@@ -26,12 +29,16 @@ export async function resolvePlaylistPath(
 async function getOldestItemId(
   channelId: string,
   categoryKind: CategoryKind,
-): Promise<string> {
+): Promise<string | null> {
   const playlistUrl = `${resolveFilteredPlaylistUrl(channelId, categoryKind, "Latest")}`;
 
-  const videoCount = (
-    await fetchYtInitialData(`${playlistUrl}&hl=en&persist_hl=1`)
-  ).header.playlistHeaderRenderer.stats[0].runs[0].text;
+  const playlistHeader = (await fetchYtInitialData(playlistUrl)).header;
+  if (playlistHeader === undefined) {
+    return null;
+  }
+
+  const videoCount =
+    playlistHeader.playlistHeaderRenderer.stats[0].runs[0].text;
 
   const oldestVideoId = (
     await fetchYtInitialData(`${playlistUrl}&index=${videoCount}&playnext=1`)

tests/e2e/button.test.ts

@@ -40,6 +40,7 @@ searchNavigationModes.forEach((searchNavigationMode) => {
           await ytSearchPage.search(channel, searchNavigationMode);
           await ytSearchPage.navigateToChannel(channel, channelNavigationMode);
 
+          await page.locator(`.play-all-btns`).waitFor({ timeout: 3000 });
           const ytChannelPage = new YtChannelPage(channel, page, eventWatcher);
           for (const category of YoutubeDOM.categories) {
             await ytChannelPage.navigateToCategory(

tests/utils.ts

@@ -201,7 +201,7 @@ export class YtChannelPage {
     if (this.page.url().includes("shorts")) {
       return await this.page
         .locator(
-          "ytd-browse[role='main'] [href*='/shorts'],ytm-browse [href*='/shorts']",
+          "ytd-browse[role='main'] #primary #contents [href*='/shorts'],ytm-browse .modern-tabs [href*='/shorts']",
         )
         .evaluateAll((links, n) => {
           const videoIds = links.map(
@@ -212,7 +212,7 @@ export class YtChannelPage {
     } else {
       return await this.page
         .locator(
-          "ytd-browse[role='main'] [href*='/watch'],ytm-browse [href*='/watch']",
+          "ytd-browse[role='main'] #primary #contents [href*='/watch'],ytm-browse .modern-tabs [href*='/watch']",
         )
         .evaluateAll((links, n) => {
           const videoIds = links.map(