feat: scroll to active song button

README.md

@@ -19,6 +19,7 @@ All of these can be toggled and configured in the configuration menu.
   - Quick actions on songs in a queue, to quickly open their lyrics or remove them from the queue
   - Set a custom size and step resolution for the volume slider and show a percentage label next to it
   - Improvements to clickability of song titles and thumbnails when wanting to open them in a new tab
+  - Quickly scroll to the currently active song in the queue by clicking a button
   - Remove the tracking parameter from URLs in the share menu
   - Automatically close permanent notifications
   - Remove the premium tab in the sidebar

assets/resources.json

@@ -7,7 +7,8 @@
   "lyrics": "lyrics.svg",
   "spinner": "spinner.svg",
   "arrow_down": "arrow_down.svg",
+  "skip_to": "skip_to.svg",
 
   "github": "external/github.png",
   "greasyfork": "external/greasyfork.png"
-}
+}

assets/skip_to.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 -960 960 960">
+  <path fill="#ffffff" d="M140.001-260.001V-320h488.46v59.999h-488.46Zm637.845-38.077L595.155-480l182.691-181.537 42.153 42.153L679.46-480l140.539 139.769-42.153 42.153ZM140.001-450.001v-59.998h371.537v59.998H140.001Zm0-189.999v-59.999h488.46V-640h-488.46Z"/>
+</svg>

changelog.md

@@ -10,6 +10,7 @@
   - Permanent toast notifications can be automatically closed now
   - Remove tracking parameter `&si=...` from links in the share menu
   - Fix spacing issues throughout the site
+  - Added a button to scroll to the currently active song
   - Added an easter egg to the watermark and config menu option :)
 - Changes & Fixes:
   - Now the lyrics button will directly link to the lyrics (using my API [geniURL](https://github.com/Sv443/geniURL))

src/config.ts

@@ -24,6 +24,7 @@ export const migrations: ConfigMigrationsDict = {
     removeShareTrackingParam: true,
     numKeysSkipToTime: true,
     fixSpacing: true,
+    scrollToActiveSongBtn: true,
     logLevel: 1,
   }),
 };

src/features/index.ts

@@ -88,6 +88,12 @@ export const featInfo = {
     category: "layout",
     default: true,
   },
+  scrollToActiveSongBtn: {
+    desc: "Add a button to the queue to scroll to the currently playing song",
+    type: "toggle",
+    category: "layout",
+    default: true,
+  },
 
   //#SECTION input
   arrowKeySupport: {

src/features/layout.css

@@ -223,3 +223,33 @@ ytmusic-responsive-list-item-renderer:not([unplayable_]) .left-items {
 .bytm-vol-slider-label.bytm-visible {
   opacity: 1;
 }
+
+/* #MARKER scroll to active */
+
+#bytm-scroll-to-active-btn-cont {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  right: 5px;
+  top: 0;
+  height: 100%;
+}
+
+#bytm-scroll-to-active-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  cursor: pointer;
+}
+
+#bytm-scroll-to-active-btn {
+  width: revert;
+  height: revert;
+}
+
+#bytm-scroll-to-active-btn .bytm-generic-btn-img {
+  padding: 4px;
+}

src/features/layout.ts

@@ -641,6 +641,7 @@ export function removeShareTrackingParam() {
 
 //#MARKER fix margins
 
+/** Applies global CSS to fix various spacings */
 export function fixSpacing() {
   addGlobalStyle(`\
 ytmusic-carousel-shelf-renderer ytmusic-carousel ytmusic-responsive-list-item-renderer {
@@ -651,3 +652,42 @@ ytmusic-carousel-shelf-renderer ytmusic-carousel {
   --ytmusic-carousel-item-height: 60px !important;
 }`);
 }
+
+/** Adds a button to the queue to scroll to the active song */
+export function addScrollToActiveBtn() {
+  onSelector(".side-panel.modular #tabsContent tp-yt-paper-tab:nth-of-type(1)", {
+    listener: async (tabElem) => {
+      const containerElem = document.createElement("div");
+      containerElem.id = "bytm-scroll-to-active-btn-cont";
+
+      const linkElem = document.createElement("div");
+      linkElem.id = "bytm-scroll-to-active-btn";
+      linkElem.className = "ytmusic-player-bar bytm-generic-btn";
+      linkElem.title = "Click to scroll to the currently playing song";
+      linkElem.role = "button";
+
+      const imgElem = document.createElement("img");
+      imgElem.className = "bytm-generic-btn-img";
+      imgElem.src = await getResourceUrl("skip_to");
+
+      linkElem.addEventListener("click", (e) => {
+        const activeItem = document.querySelector<HTMLElement>(".side-panel.modular .ytmusic-player-queue ytmusic-player-queue-item[play-button-state=\"loading\"], .side-panel.modular .ytmusic-player-queue ytmusic-player-queue-item[play-button-state=\"playing\"], .side-panel.modular .ytmusic-player-queue ytmusic-player-queue-item[play-button-state=\"paused\"]");
+        if(!activeItem)
+          return;
+
+        e.preventDefault();
+        e.stopImmediatePropagation();
+
+        activeItem.scrollIntoView({
+          behavior: "smooth",
+          block: "center",
+          inline: "center",
+        });
+      });
+
+      linkElem.appendChild(imgElem);
+      containerElem.appendChild(linkElem);
+      tabElem.appendChild(containerElem);
+    },
+  });
+}

src/features/lyrics.ts

@@ -118,7 +118,7 @@ async function addActualMediaCtrlLyricsBtn(likeContainer: HTMLElement) {
           continue;
         }
 
-        lyricsBtn.href = url!;
+        lyricsBtn.href = url;
 
         lyricsBtn.title = "Open the current song's lyrics in a new tab";
         lyricsBtn.style.cursor = "pointer";

src/index.ts

@@ -9,6 +9,7 @@ import {
   preInitLayout, removeUpgradeTab,
   initVolumeFeatures, initAutoCloseToasts,
   removeShareTrackingParam, fixSpacing,
+  addScrollToActiveBtn,
   // lyrics
   addMediaCtrlLyricsBtn, geniUrlBase,
   // input
@@ -148,6 +149,9 @@ async function onDomLoad() {
       if(features.fixSpacing)
         fixSpacing();
 
+      if(features.scrollToActiveSongBtn)
+        addScrollToActiveBtn();
+
       initVolumeFeatures();
     }
 

src/types.ts

@@ -47,6 +47,8 @@ export interface FeatureConfig {
   numKeysSkipToTime: boolean;
   /** Fix spacing issues in the layout */
   fixSpacing: boolean;
+  /** Add a button to the queue to scroll to the currently playing song */
+  scrollToActiveSongBtn: boolean;
 
   //#SECTION lyrics
   /** Add a button to the media controls to open the current song's lyrics on genius.com in a new tab */