feat(full-screen): support GlobalNav TV mode button placement

Author: daksh2k

Extensions/full-screen/dist/fullScreen.js

@@ -15,7 +15,13 @@ import {
 import { headerText, getSettingCard, createAdjust, getAboutSection } from "./utils/setting";
 
 import translations from "./resources/strings";
-import ICONS, { DEFAULTS, CLASSES_TO_ADD, EXTRA_BAR_SELECTOR, TOP_BAR_SELECTOR } from "./constants";
+import ICONS, {
+    DEFAULTS,
+    CLASSES_TO_ADD,
+    EXTRA_BAR_SELECTOR,
+    TOP_BAR_SELECTOR,
+    TOP_BAR_SELECTOR_GLOBAL_NAVBAR,
+} from "./constants";
 import { Config, Settings } from "./types/fullscreen";
 
 import WebAPI from "./services/web-api";
@@ -1634,19 +1640,32 @@ async function main() {
         if (CFM.getGlobal("buttonActivation") !== "def") {
             // Add TV Mode Button on top bar
             const tvButton = document.createElement("button");
-            tvButton.classList.add(
-                "button",
-                "tm-button",
-                "main-topBar-button",
-                "InvalidDropTarget",
-            );
+
             tvButton.innerHTML = ICONS.TV_MODE;
             tvButton.id = "TV-button";
             tvButton.setAttribute("title", translations[LOCALE].tvBtnDesc);
 
             tvButton.onclick = openwithTV;
+            if (document.querySelector(TOP_BAR_SELECTOR)) {
+                tvButton.classList.add(
+                    "button",
+                    "tm-button",
+                    "main-topBar-button",
+                    "InvalidDropTarget",
+                );
+                document.querySelector(TOP_BAR_SELECTOR)?.append(tvButton);
+            } else {
+                tvButton.classList.add(
+                    "tm-button",
+                    "Button-small-small-buttonTertiary-condensedAll-isUsingKeyboard-useBrowserDefaultFocusStyle",
+                    "encore-text-body-small-bold",
+                    "main-globalNav-buddyFeed",
+                    "Button-sc-1dqy6lx-0",
+                );
+                document.querySelector(TOP_BAR_SELECTOR_GLOBAL_NAVBAR)?.prepend(tvButton);
+            }
 
-            document.querySelector(TOP_BAR_SELECTOR)?.append(tvButton);
+            // document.querySelector(TOP_BAR_SELECTOR)?.append(tvButton);
             tvButton.oncontextmenu = (evt) => {
                 evt.preventDefault();
                 CFM.setMode("tv");

Extensions/full-screen/src/app.tsx

@@ -2,6 +2,6 @@ import ICONS from "./icons";
 
 export { DEFAULTS } from "./defaults";
 export { CLASSES_TO_ADD } from "./general";
-export { TOP_BAR_SELECTOR, EXTRA_BAR_SELECTOR } from "./selectors";
+export { TOP_BAR_SELECTOR, EXTRA_BAR_SELECTOR, TOP_BAR_SELECTOR_GLOBAL_NAVBAR } from "./selectors";
 
 export default ICONS;

Extensions/full-screen/src/constants/index.ts

@@ -1,4 +1,5 @@
 export const TOP_BAR_SELECTOR = ".main-topBar-historyButtons";
+export const TOP_BAR_SELECTOR_GLOBAL_NAVBAR = ".main-topBar-topbarContentRight>.main-actionButtons";
 export const EXTRA_BAR_SELECTOR = ".main-nowPlayingBar-right";
 export const ORIGINAL_QUEUE_BUTTON =
     "div.main-nowPlayingBar-right > div > div.GlueDropTarget.GlueDropTarget--tracks.GlueDropTarget--local-tracks.GlueDropTarget--episodes > button";

Extensions/full-screen/src/constants/selectors.ts

@@ -1,6 +1,7 @@
 import ICONS from "../constants";
 import {
     TOP_BAR_SELECTOR,
+    TOP_BAR_SELECTOR_GLOBAL_NAVBAR,
     EXTRA_BAR_SELECTOR,
     ORIGINAL_QUEUE_BUTTON,
     RIGH_PANEL,
@@ -15,11 +16,13 @@ let wasQueuePanelEnabled: boolean | null = null;
 class Utils {
     static allNotExist() {
         const extraBar = document.querySelector(EXTRA_BAR_SELECTOR)?.childNodes[0];
-        const topBar = document.querySelector(TOP_BAR_SELECTOR);
+        const topBar =
+            document.querySelector(TOP_BAR_SELECTOR) ||
+            document.querySelector(TOP_BAR_SELECTOR_GLOBAL_NAVBAR);
 
         const entriesToVerify = {
-            // "Top Bar Component": topBar,
-            // "Extra Bar Component": extraBar,
+            "Top Bar Component": topBar,
+            "Extra Bar Component": extraBar,
             "Spicetify CosmosAsync": Spicetify.CosmosAsync,
             "Spicetify Mousetrap": Spicetify.Mousetrap,
             "Spicetify Player": Spicetify.Player,