fix(ui): hide topbar on startup/login/mismatch, restore portrait poster card, permanently purge duplicate movies, suppress floating play buttons, and structure landscape metadata

apex/repair_jellyfin_libraries.py

@@ -200,6 +200,44 @@ def repair_database(db_path: str, marker_file: str | None = None, force_reset_pa
             cur.executemany("DELETE FROM BaseItems WHERE Id = ?", [(did,) for did in dup_to_delete])
             print(f"[REPAIR] Removed {len(dup_to_delete)} duplicate row(s) pointing to identical paths from {db_path}.")
 
+        # Permanent disk + DB deduplication for Movie directories
+        movies_dir = "/data/jellyfin/media/Movies"
+        if os.path.isdir(movies_dir):
+            seen_movie_keys = {}
+            for lang in os.listdir(movies_dir):
+                lang_path = os.path.join(movies_dir, lang)
+                if not os.path.isdir(lang_path):
+                    continue
+                for movie_folder in sorted(os.listdir(lang_path)):
+                    folder_path = os.path.join(lang_path, movie_folder)
+                    if not os.path.isdir(folder_path):
+                        continue
+                    strm_files = [f for f in os.listdir(folder_path) if f.endswith('.strm')]
+                    strm_url = None
+                    if strm_files:
+                        try:
+                            with open(os.path.join(folder_path, strm_files[0]), 'r', encoding='utf-8', errors='ignore') as sf:
+                                strm_url = sf.read().strip()
+                        except Exception:
+                            pass
+                    norm_k = re.sub(r'^(linkz|the)', '', movie_folder, flags=re.I)
+                    norm_k = re.sub(r'\(\d{4}\)', '', norm_k)
+                    norm_k = re.sub(r'[^a-zA-Z0-9]', '', norm_k).lower()
+
+                    key = strm_url if strm_url else (norm_k if norm_k else None)
+                    if key:
+                        if key in seen_movie_keys:
+                            existing_folder = seen_movie_keys[key]
+                            is_curr_worse = 'linkz' in movie_folder.lower() or 'man brand' in movie_folder.lower()
+                            to_delete = folder_path if is_curr_worse else existing_folder
+                            to_keep = existing_folder if is_curr_worse else folder_path
+                            print(f"[REPAIR] Duplicate movie detected: keeping '{to_keep}', deleting duplicate '{to_delete}'")
+                            shutil.rmtree(to_delete, ignore_errors=True)
+                            cur.execute("DELETE FROM BaseItems WHERE Path LIKE ?", (to_delete + '%',))
+                            seen_movie_keys[key] = to_keep
+                        else:
+                            seen_movie_keys[key] = folder_path
+
         # Check and repair Users table: clear password and login attempt lockouts
         cur.execute("SELECT name FROM sqlite_master WHERE type='table' AND name='Users'")
         if cur.fetchone():

apex/ui/abyss.css

@@ -3281,19 +3281,12 @@ div[role="main"] {
 }
 
 
-/* Suppress floating Play All and Shuffle All in library collection views */
-.page:not(#itemDetailPage):not(#videoOsdPage) .btnPlay,
-.page:not(#itemDetailPage):not(#videoOsdPage) .btnShuffle,
-.viewSettings .btnPlay,
-.viewSettings .btnShuffle,
-.pageTitleWithDefaultButton .btnPlay,
-.pageTitleWithDefaultButton .btnShuffle,
-button[data-action="playall"],
-button[data-action="shuffleall"],
-.mainTabsContainer .btnPlay,
-.mainTabsContainer .btnShuffle,
-.headerRight .btnPlay,
-.headerRight .btnShuffle {
+/* Universal suppression of floating Play All & Shuffle All buttons outside item detail & video */
+:is(.view, .page, [data-role="page"], .libraryPage):not(#itemDetailPage):not(#videoOsdPage) :is(.btnPlay, .btnShuffle, button[data-action="playall"], button[data-action="shuffleall"], button[title*="Play all" i], button[title*="Shuffle all" i]),
+.viewSettings :is(.btnPlay, .btnShuffle, button[data-action="play"], button[data-action="shuffle"]),
+.pageTitleWithDefaultButton :is(.btnPlay, .btnShuffle),
+.mainTabsContainer :is(.btnPlay, .btnShuffle),
+.headerRight :is(.btnPlay, .btnShuffle) {
     display: none !important;
     visibility: hidden !important;
     width: 0 !important;
@@ -3301,6 +3294,7 @@ button[data-action="shuffleall"],
     padding: 0 !important;
     margin: 0 !important;
     pointer-events: none !important;
+    opacity: 0 !important;
 }
 
 /* Hidden duplicate cards */
@@ -4434,14 +4428,26 @@ div[data-category="nextup"] .cardImageContainer img,
     left: 0 !important;
     right: 0 !important;
     width: 100% !important;
-    height: 56px !important;
-    display: flex !important;
+    height: 52px !important;
+    display: none !important;
+    visibility: hidden !important;
+    opacity: 0 !important;
+    pointer-events: none !important;
+    flex-direction: row !important;
     align-items: center !important;
     justify-content: center !important;
-    pointer-events: none !important;
     z-index: 99999 !important;
     box-sizing: border-box !important;
     padding: 0 16px !important;
+    transition: opacity 0.2s ease, visibility 0.2s ease !important;
+}
+
+body.show-apex-topbar #apex-tv-topbar,
+#apex-tv-topbar.is-visible {
+    display: flex !important;
+    visibility: visible !important;
+    opacity: 1 !important;
+    pointer-events: auto !important;
 }
 
 #apex-tv-topbar .apex-tv-tabs {
@@ -4536,22 +4542,34 @@ div[data-category="nextup"] .cardImageContainer img,
     }
 }
 
-/* Never display topbar on splash screen, login screen, server selection, or wizard */
+/* Never display topbar on splash screen, login screen, server selection, server mismatch, or wizard */
 #loginPage ~ #apex-tv-topbar,
+#serverMismatchPage ~ #apex-tv-topbar,
+#selectServerPage ~ #apex-tv-topbar,
+.serverMismatchPage #apex-tv-topbar,
+#serverMismatchPage #apex-tv-topbar,
+body:has(#serverMismatchPage) #apex-tv-topbar,
+body:has(.serverMismatchPage) #apex-tv-topbar,
 body:has(#loginPage:not(.hide)) #apex-tv-topbar,
 body:has(.loginPage:not(.hide)) #apex-tv-topbar,
 body:has(#selectServerPage:not(.hide)) #apex-tv-topbar,
+body:has(.selectServerPage:not(.hide)) #apex-tv-topbar,
 body:has(#forgotPasswordPage:not(.hide)) #apex-tv-topbar,
 body:has(.manualLoginForm) #apex-tv-topbar,
+body:has(.manualServerContainer) #apex-tv-topbar,
 body:has(.splashLogo:not(.hide):not(:empty)) #apex-tv-topbar,
-body.is-logged-out #apex-tv-topbar {
+body.is-logged-out #apex-tv-topbar,
+body.hide-apex-topbar #apex-tv-topbar,
+body.videoPlayerContainerVisible #apex-tv-topbar {
     display: none !important;
     visibility: hidden !important;
     opacity: 0 !important;
     pointer-events: none !important;
 }
 
-/* Clean header on login and splash */
+/* Clean header on login, mismatch, and splash */
+#serverMismatchPage .skinHeader,
+.serverMismatchPage .skinHeader,
 #loginPage .skinHeader,
 .loginPage .skinHeader,
 #selectServerPage .skinHeader,
@@ -4605,50 +4623,86 @@ header .pageTitle,
 
 /* ========================================================
    DETAIL PAGE: MOBILE PORTRAIT & DEFAULT CLEAN LAYOUT
-   Full-width title, zero text breaking or vertical letter stacking
+   Clean poster card thumbnail + left-aligned stacked title & metadata
    ======================================================== */
 @media (orientation: portrait) {
     #itemDetailPage .detailRibbon,
     .layout-mobile #itemDetailPage .detailRibbon {
         display: flex !important;
-        flex-direction: column !important;
-        align-items: stretch !important;
+        flex-direction: row !important;
+        align-items: flex-start !important;
+        flex-wrap: wrap !important;
         width: 100% !important;
         max-width: 100% !important;
-        padding: 16px 20px !important;
-        gap: 12px !important;
+        padding: 16px 16px 12px 16px !important;
+        gap: 14px !important;
         box-sizing: border-box !important;
+        position: relative !important;
+        background: transparent !important;
     }
 
-    #itemDetailPage .infoWrapper,
-    .layout-mobile #itemDetailPage .infoWrapper {
-        display: flex !important;
-        flex-direction: column !important;
-        align-items: stretch !important;
+    /* Fixed Clean Poster Thumbnail in Portrait */
+    #itemDetailPage .detailImageContainer,
+    .layout-mobile #itemDetailPage .detailImageContainer {
+        display: block !important;
+        visibility: visible !important;
+        opacity: 1 !important;
+        position: relative !important;
+        width: 108px !important;
+        min-width: 108px !important;
+        max-width: 108px !important;
+        height: 162px !important;
+        aspect-ratio: 2 / 3 !important;
+        border-radius: 10px !important;
+        overflow: hidden !important;
+        margin: 0 !important;
+        padding: 0 !important;
+        flex-shrink: 0 !important;
+        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.75) !important;
+        border: 1px solid rgba(255, 255, 255, 0.14) !important;
+    }
+
+    #itemDetailPage .detailImageContainer .card,
+    .layout-mobile #itemDetailPage .detailImageContainer .card,
+    #itemDetailPage .detailImageContainer .cardScalable {
         width: 100% !important;
-        max-width: 100% !important;
+        height: 100% !important;
+        aspect-ratio: 2 / 3 !important;
+        border-radius: 10px !important;
+        overflow: hidden !important;
+        margin: 0 !important;
+        position: relative !important;
+        top: 0 !important;
+        left: 0 !important;
     }
 
-    /* On mobile portrait, hide redundant small poster so full-width backdrop and clean title shine */
-    .layout-mobile #itemDetailPage .detailImageContainer {
+    #itemDetailPage .detailImageContainer .cardPadder {
         display: none !important;
-        visibility: hidden !important;
-        width: 0 !important;
-        height: 0 !important;
+    }
+
+    #itemDetailPage .infoWrapper,
+    .layout-mobile #itemDetailPage .infoWrapper {
+        display: flex !important;
+        flex-direction: column !important;
+        align-items: flex-start !important;
+        justify-content: flex-start !important;
+        flex: 1 1 calc(100% - 128px) !important;
+        min-width: 0 !important;
+        gap: 3px !important;
         margin: 0 !important;
         padding: 0 !important;
-        pointer-events: none !important;
     }
 
     #itemDetailPage .nameContainer,
     .layout-mobile #itemDetailPage .nameContainer {
         display: flex !important;
-        flex-direction: row !important;
-        align-items: center !important;
-        justify-content: space-between !important;
+        flex-direction: column !important;
+        align-items: flex-start !important;
+        justify-content: flex-start !important;
+        gap: 2px !important;
         width: 100% !important;
         max-width: 100% !important;
-        margin-bottom: 8px !important;
+        margin: 0 0 4px 0 !important;
     }
 
     #itemDetailPage .itemName,
@@ -4657,14 +4711,29 @@ header .pageTitle,
         display: block !important;
         width: 100% !important;
         max-width: 100% !important;
-        font-size: 1.65rem !important;
+        font-size: 1.45rem !important;
         font-weight: 700 !important;
         line-height: 1.25 !important;
         color: #ffffff !important;
         white-space: normal !important;
         word-break: normal !important;
         overflow-wrap: break-word !important;
-        letter-spacing: normal !important;
+        letter-spacing: -0.01em !important;
+        margin: 0 !important;
+        padding: 0 !important;
+        text-align: left !important;
+    }
+
+    #itemDetailPage .originalTitle,
+    #itemDetailPage .parentName,
+    #itemDetailPage .itemName.originalTitle,
+    #itemDetailPage .nameContainer > *:not(h1) {
+        font-size: 0.95rem !important;
+        font-weight: 500 !important;
+        color: rgba(255, 255, 255, 0.72) !important;
+        margin: 0 !important;
+        padding: 0 !important;
+        text-align: left !important;
     }
 
     #itemDetailPage .itemMiscInfo,
@@ -4675,7 +4744,9 @@ header .pageTitle,
         flex-wrap: wrap !important;
         gap: 8px !important;
         width: 100% !important;
-        margin-bottom: 12px !important;
+        margin: 2px 0 6px 0 !important;
+        color: rgba(255, 255, 255, 0.72) !important;
+        font-size: 0.85rem !important;
     }
 
     #itemDetailPage .mainDetailButtons,
@@ -4683,9 +4754,13 @@ header .pageTitle,
         display: flex !important;
         flex-direction: row !important;
         align-items: center !important;
-        flex-wrap: wrap !important;
+        flex-wrap: nowrap !important;
         gap: 10px !important;
         width: 100% !important;
+        flex-basis: 100% !important;
+        margin-top: 10px !important;
+        overflow-x: auto !important;
+        padding-bottom: 4px !important;
     }
 }
 
@@ -4858,13 +4933,31 @@ button:has(svg[data-testid="PeopleIcon"]),
     }
 
     #itemDetailPage .nameContainer,
-    .layout-mobile #itemDetailPage .nameContainer {
-        display: block !important;
+    .layout-mobile #itemDetailPage .nameContainer,
+    .layout-desktop #itemDetailPage .nameContainer,
+    .layout-tv #itemDetailPage .nameContainer {
+        display: flex !important;
+        flex-direction: column !important;
+        align-items: flex-start !important;
+        justify-content: flex-start !important;
         width: 100% !important;
         max-width: 100% !important;
+        gap: 2px !important;
         margin: 0 0 4px 0 !important;
     }
 
+    #itemDetailPage .originalTitle,
+    #itemDetailPage .parentName,
+    #itemDetailPage .itemName.originalTitle,
+    #itemDetailPage .nameContainer > *:not(h1) {
+        font-size: 1.1rem !important;
+        font-weight: 500 !important;
+        color: rgba(255, 255, 255, 0.75) !important;
+        margin: 2px 0 0 0 !important;
+        padding: 0 !important;
+        text-align: left !important;
+    }
+
     #itemDetailPage .itemName,
     .layout-mobile #itemDetailPage .itemName,
     #itemDetailPage h1.itemName {

apex/ui/spotlight-loader.js

@@ -764,31 +764,49 @@ function findHomeTab() {
 
       if (tvTopbar) {
         var isVideo = !!document.querySelector(".videoPlayerContainer:not(.hide), #videoOsdPage:not(.hide), video");
-        var hash = window.location.hash || "";
+        var hash = (window.location.hash || "").toLowerCase();
+        var isAuthOrStartup = !!document.querySelector(
+          "#serverMismatchPage, .serverMismatchPage, #loginPage:not(.hide), .loginPage:not(.hide), " +
+          "#selectServerPage:not(.hide), .selectServerPage:not(.hide), #forgotPasswordPage:not(.hide), " +
+          ".manualLoginForm, .splashLogo:not(.hide), .manualServerContainer, input[type='password']"
+        );
         var isHiddenRoute = hash.indexOf("dashboard") !== -1 ||
                             hash.indexOf("settings") !== -1 ||
                             hash.indexOf("login") !== -1 ||
                             hash.indexOf("selectserver") !== -1 ||
+                            hash.indexOf("servermismatch") !== -1 ||
                             hash.indexOf("forgotpassword") !== -1 ||
                             hash.indexOf("details") !== -1 ||
                             hash.indexOf("itemdetails") !== -1;
 
         var isDetailPage = !!document.querySelector("#itemDetailPage:not(.hide), .itemDetailPage:not(.hide)");
-        var isAuthPage = !!document.querySelector("#loginPage:not(.hide), .loginPage:not(.hide), #selectServerPage:not(.hide), #forgotPasswordPage:not(.hide), .manualLoginForm, form[data-action='login'], input[type='password']");
-        var isSplash = !!document.querySelector(".splashLogo:not(.hide), #splashPage:not(.hide), .splashLogo");
-        var hasHomeOrLibrary = !!document.querySelector("#indexPage, .homePage, #homeTab, .pageTabContent, .mainDrawer, .itemsContainer");
         var isUserLoggedIn = (window.ApiClient && typeof window.ApiClient.isLoggedIn === "function") ? window.ApiClient.isLoggedIn() : (window.ApiClient && !!window.ApiClient.accessToken());
 
-        if (isVideo || isHiddenRoute || isDetailPage || isAuthPage || (isSplash && !hasHomeOrLibrary) || (!isUserLoggedIn && !hasHomeOrLibrary)) {
+        if (isVideo || isHiddenRoute || isDetailPage || isAuthOrStartup || !isUserLoggedIn) {
+          tvTopbar.classList.remove("is-visible");
+          document.body.classList.remove("show-apex-topbar");
           tvTopbar.style.display = "none";
           tvTopbar.style.visibility = "hidden";
           return;
         } else {
+          tvTopbar.classList.add("is-visible");
+          document.body.classList.add("show-apex-topbar");
           tvTopbar.style.display = "flex";
           tvTopbar.style.visibility = "visible";
         }
       }
 
+      // 1.5 Suppress and purge floating Play / Shuffle buttons from catalog/library views
+      var strayPlayBtns = document.querySelectorAll(
+        ':is(.view, .page, [data-role="page"], .libraryPage):not(#itemDetailPage):not(#videoOsdPage) :is(.btnPlay, .btnShuffle, button[data-action="playall"], button[data-action="shuffleall"], button[title*="Play all" i], button[title*="Shuffle all" i]), ' +
+        '.viewSettings :is(.btnPlay, .btnShuffle, button[data-action="play"], button[data-action="shuffle"]), ' +
+        '.pageTitleWithDefaultButton :is(.btnPlay, .btnShuffle), ' +
+        '.mainTabsContainer :is(.btnPlay, .btnShuffle)'
+      );
+      for (var sp = 0; sp < strayPlayBtns.length; sp++) {
+        strayPlayBtns[sp].remove();
+      }
+
       // 2. Hide Hamburger, Cast, SyncPlay, and stray drawer buttons completely
       var unwanted = document.querySelectorAll(
         'button[aria-label="Menu"], button[aria-label="menu"], ' +
@@ -901,31 +919,30 @@ function findHomeTab() {
 
   function deduplicateDomCards() {
     safe(function () {
-      var containers = document.querySelectorAll(".itemsContainer");
-      for (var i = 0; i < containers.length; i++) {
-        var container = containers[i];
-        var cards = container.querySelectorAll(":scope > .card, :scope > div > .card");
-        if (!cards || !cards.length) cards = container.children;
-        var seenTitles = {};
-        for (var j = 0; j < cards.length; j++) {
-          var card = cards[j];
-          if (!card.classList || !card.classList.contains("card")) continue;
-          var titleEl = card.querySelector(".cardText-first") || card.querySelector(".cardText:not(.cardText-secondary)") || card.querySelector(".cardTextCentered") || card.querySelector(".cardText");
-          var rawTitle = (titleEl ? titleEl.textContent : (card.getAttribute("aria-label") || "")).trim().toLowerCase();
-          var normTitle = rawTitle.replace(/\s*\(\s*\d{4}\s*\)\s*/g, "").replace(/[^a-z0-9]/g, "");
-          if (!normTitle) continue;
-          if (seenTitles[normTitle]) {
-            card.classList.add("apex-duplicate-hidden");
-            card.style.setProperty("display", "none", "important");
-            card.style.setProperty("visibility", "hidden", "important");
-            card.style.setProperty("width", "0px", "important");
-            card.style.setProperty("height", "0px", "important");
-            card.style.setProperty("flex", "0 0 0px", "important");
-            card.style.setProperty("margin", "0px", "important");
-            card.style.setProperty("padding", "0px", "important");
-          } else {
-            seenTitles[normTitle] = true;
-          }
+      var activePage = document.querySelector('.page:not(.hide), .view:not(.hide), [data-role="page"]:not(.hide)') || document;
+      var cards = activePage.querySelectorAll('.card');
+      if (!cards || !cards.length) return;
+      var seenTitles = {};
+      for (var j = 0; j < cards.length; j++) {
+        var card = cards[j];
+        if (!card.classList || !card.classList.contains("card")) continue;
+        if (card.closest('#itemDetailPage') || card.closest('.detailImageContainer')) continue;
+        var titleEl = card.querySelector(".cardText-first") || card.querySelector(".cardText:not(.cardText-secondary)") || card.querySelector(".cardTextCentered") || card.querySelector(".cardText");
+        var rawTitle = (titleEl ? titleEl.textContent : (card.getAttribute("aria-label") || "")).trim().toLowerCase();
+        var normTitle = rawTitle.replace(/\s*\(\s*\d{4}\s*\)\s*/g, "").replace(/^(linkz|the)\b/g, "").replace(/[^a-z0-9]/g, "");
+        if (!normTitle) continue;
+        if (seenTitles[normTitle]) {
+          card.classList.add("apex-duplicate-hidden");
+          card.style.setProperty("display", "none", "important");
+          card.style.setProperty("visibility", "hidden", "important");
+          card.style.setProperty("width", "0px", "important");
+          card.style.setProperty("height", "0px", "important");
+          card.style.setProperty("flex", "0 0 0px", "important");
+          card.style.setProperty("margin", "0px", "important");
+          card.style.setProperty("padding", "0px", "important");
+          card.remove();
+        } else {
+          seenTitles[normTitle] = true;
         }
       }
     });