Browse Source

fix: hide "scroll to playing" button in fullscreen

Sv443 1 year ago
parent
commit
f2a1c1d480
3 changed files with 29 additions and 1 deletions
  1. 5 1
      src/features/layout.css
  2. 7 0
      src/features/layout.ts
  3. 17 0
      src/siteEvents.ts

+ 5 - 1
src/features/layout.css

@@ -46,7 +46,7 @@
 
 .bytm-generic-btn-img {
   display: inline-block;
-  z-index: 10;
+  z-index: 1;
   width: 24px;
   height: 24px;
 }
@@ -214,6 +214,10 @@ yt-multi-page-menu-section-renderer.ytd-multi-page-menu-renderer {
   height: 100%;
 }
 
+#bytm-scroll-to-active-btn-cont.hidden {
+  display: none;
+}
+
 #bytm-scroll-to-active-btn {
   display: inline-flex;
   align-items: center;

+ 7 - 0
src/features/layout.ts

@@ -409,6 +409,13 @@ export async function addScrollToActiveBtn() {
         });
       };
 
+      siteEvents.on("fullscreenToggled", (isFullscreen) => {
+        if(isFullscreen)
+          containerElem.classList.add("hidden");
+        else
+          containerElem.classList.remove("hidden");
+      });
+
       onInteraction(linkElem, scrollToActiveInteraction, { capture: true });
 
       linkElem.appendChild(imgElem);

+ 17 - 0
src/siteEvents.ts

@@ -34,6 +34,8 @@ export interface SiteEventsMap {
   songTitleChanged: (newTitle: string, oldTitle: string | null, initialPlay: boolean) => void;
   /** Emitted whenever the current song's watch ID changes - `oldId` is `null` if this is the first song played in the session */
   watchIdChanged: (newId: string, oldId: string | null) => void;
+  /** Emitted whenever the player enters or exits fullscreen mode */
+  fullscreenToggled: (isFullscreen: boolean) => void;
 }
 
 /** Array of all site events */
@@ -126,6 +128,21 @@ export async function initSiteEvents() {
       autoplayObs,
     ]);
 
+    //#SECTION player
+
+    const playerFullscreenObs = new MutationObserver(([{ target }]) => {
+      const isFullscreen = (target as HTMLElement).getAttribute("player-ui-state")?.toUpperCase() === "FULLSCREEN";
+      siteEvents.emit("fullscreenToggled", isFullscreen);
+    });
+
+    addSelectorListener("mainPanel", "ytmusic-player#player", {
+      listener: (el) => {
+        playerFullscreenObs.observe(el, {
+          attributeFilter: ["player-ui-state"],
+        });
+      },
+    });
+
     //#SECTION other
 
     let lastWatchId: string | null = null;