Old version --> New version + Added Keyboard Shortcuts back

src/assets/css/index.css

@@ -272,6 +272,40 @@ input[type="range"].styled-slider.slider-progress::-ms-fill-lower {
   box-shadow: 0 0 10px theme("colors.themePreview.secondary");
 }
 
+/* Gamepad specific focus - Premium TV Experience */
+.gamepad-active *:focus {
+  outline: 4px solid #ffffff !important;
+  outline-offset: 2px !important;
+  box-shadow: 0 0 20px rgba(255, 255, 255, 0.5) !important;
+  border-radius: 12px;
+  z-index: 50;
+  transition:
+    outline 0.2s ease,
+    outline-offset 0.2s ease,
+    box-shadow 0.2s ease;
+}
+
+/* Specific fix for elements with custom focus rings */
+.gamepad-active .gamepad-focus-ring-parent:focus {
+  outline: none !important;
+  box-shadow: none !important;
+}
+
+/* Ensure cards and buttons look good when focused */
+.gamepad-active .gamepad-focus-ring-parent:focus-within,
+.gamepad-active button:focus-visible,
+.gamepad-active a:focus-visible {
+  transform: scale(1.05);
+  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
+  z-index: 100 !important;
+}
+
+.gamepad-focus-ring {
+  box-shadow: 0 0 25px rgba(255, 255, 255, 0.6), inset 0 0 10px rgba(255, 255, 255, 0.2);
+  border-width: 3px;
+  filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.5));
+}
+
 [dir="rtl"] .transform {
   /* Invert horizontal X offset on transform (Tailwind RTL plugin does the rest) */
   transform: translate(calc(var(--tw-translate-x) * -1), var(--tw-translate-y))

src/assets/locales/en.json

@@ -149,12 +149,14 @@
       "title": "Folders",
       "counter": "{{count}} / {{max}}",
       "empty": "No folders yet",
-      "moreInfo": "More Info",
+      "moreInfo": "Info",
       "removeFromFolder": "Remove from folder",
       "editDetails": "Edit Details",
       "createFolder": "Create Folder",
       "folderNamePlaceholder": "Folder name...",
-      "limitReached": "Folder limit reached ({{max}} max)"
+      "limitReached": "Folder limit reached ({{max}} max)",
+      "add": "Bookmark",
+      "remove": "Remove"
     }
   },
   "auth": {
@@ -997,7 +999,7 @@
     },
     "time": {
       "regular": "{{timeWatched}} / {{duration}}",
-      "remaining": "{{timeLeft}} left • Finish at {{timeFinished, datetime}}",
+      "remaining": "{{timeLeft}} left • Finishes at {{timeFinished, datetime}}",
       "shortRegular": "{{timeWatched}}",
       "shortRemaining": "-{{timeLeft}}"
     },
@@ -1404,17 +1406,23 @@
       "showMore": "Show more",
       "embedOrder": "Reordering embeds",
       "embedOrderDescription": "Drag and drop to reorder embeds. This will determine the order in which embeds are checked for the media you are trying to watch. <br><br> <strong>(The default order is best for most users)</strong>",
+      "autoResumeOnPlaybackErrorLabel": "Automatically resume",
+      "gamepadIgnoreHeaderTitle": "Ignore Header",
+      "gamepadIgnoreHeaderDescription": "Skip the navigation header when scrolling with a controller.",
+      "keybinds": "Keybinds",
+      "redoSetup": "Redo Setup",
+
       "embedOrderEnableLabel": "Custom embed order",
       "manualSource": "Manual source selection",
       "manualSourceDescription": "Require picking a source before scraping. Disables automatic source selection and opens the source picker when starting playback.",
       "manualSourceLabel": "Manual source selection",
       "autoResumeOnPlaybackError": "Auto resume on playback error",
       "autoResumeOnPlaybackErrorDescription": "Automatically continue searching for other sources when the current source fails during playback. If disabled, you'll see an error screen with a manual resume option.",
-      "autoResumeOnPlaybackErrorLabel": "Auto resume on playback error",
       "lastSuccessfulSource": "Last used source",
       "lastSuccessfulSourceDescription": "Automatically prioritize the source that successfully provided content for the previous episode. This helps ensure continuity when watching series.",
       "lastSuccessfulSourceEnableLabel": "Last used source"
     },
+
     "reset": "Reset",
     "save": "Save",
     "sidebar": {

src/backend/metadata/tmdb.ts

@@ -123,6 +123,7 @@ export function formatTMDBMetaToMediaItem(media: TMDBMediaResult): MediaItem {
     release_date: media.original_release_date,
     poster: media.poster,
     type,
+    rating: media.vote_average,
   };
 }
 
@@ -589,6 +590,7 @@ export function formatTMDBSearchResult(
       id: show.id,
       original_release_date: new Date(show.first_air_date),
       object_type: mediatype,
+      vote_average: show.vote_average,
     };
   }
 
@@ -600,6 +602,7 @@ export function formatTMDBSearchResult(
     id: movie.id,
     original_release_date: new Date(movie.release_date),
     object_type: mediatype,
+    vote_average: movie.vote_average,
   };
 }
 

src/backend/metadata/types/tmdb.ts

@@ -26,6 +26,7 @@ export type TMDBMediaResult = {
   object_type: TMDBContentTypes;
   seasons?: TMDBSeasonShort[];
   overview?: string;
+  vote_average?: number;
 };
 
 export type TMDBSeasonMetaResult = {

src/components/buttons/IconPatch.tsx

@@ -9,6 +9,7 @@ export interface IconPatchProps {
   transparent?: boolean;
   downsized?: boolean;
   navigation?: boolean;
+  tabIndex?: number;
 }
 
 export function IconPatch(props: IconPatchProps) {
@@ -29,6 +30,7 @@ export function IconPatch(props: IconPatchProps) {
   return (
     <div className={props.className || undefined} onClick={props.onClick}>
       <div
+        tabIndex={props.tabIndex}
         className={`flex items-center justify-center rounded-full border-2 border-transparent bg-pill-background bg-opacity-100 transition-[background-color,color,transform,border-color] duration-75 ${transparentClasses} ${navigationClasses} ${clickableClasses} ${activeClasses} ${sizeClasses}`}
       >
         <Icon icon={props.icon} />

src/components/buttons/Toggle.tsx

@@ -11,7 +11,7 @@ export function Toggle(props: {
       onClick={props.disabled ? undefined : props.onClick}
       disabled={props.disabled}
       className={classNames(
-        "w-11 h-6 p-1 rounded-full grid transition-colors duration-100 group/toggle tabbable",
+        "w-11 h-6 p-1 rounded-full grid transition-colors duration-100 group/toggle tabbable focus:outline-none",
         props.enabled ? "bg-buttons-toggle" : "bg-buttons-toggleDisabled",
         props.disabled ? "opacity-50 cursor-not-allowed" : null,
       )}

src/components/gamepad/GamepadGlobalListener.tsx

@@ -0,0 +1,113 @@
+import { useCallback, useEffect } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+
+import { useGamepadPolling } from "@/hooks/useGamepad";
+import { useSpatialNavigation } from "@/hooks/useSpatialNavigation";
+import { useOverlayStack } from "@/stores/interface/overlayStack";
+import { usePreferencesStore } from "@/stores/preferences";
+
+export function GamepadGlobalListener() {
+  const { navigate: navigateSpatial } = useSpatialNavigation();
+  const location = useLocation();
+  const navigate = useNavigate();
+  const { hideModal, getTopModal } = useOverlayStack();
+
+  const enableGamepadControls = usePreferencesStore(
+    (s: any) => s.enableGamepadControls,
+  );
+
+  const gamepadInputMode = usePreferencesStore((s: any) => s.gamepadInputMode);
+
+  const handleAction = useCallback(
+    (action: string) => {
+      if (gamepadInputMode === "kbm") return;
+
+      // Add gamepad-active class to body to show custom focus outlines
+      document.body.classList.add("gamepad-active");
+      usePreferencesStore.getState().setGamepadActive(true);
+
+      // Don't intercept if we're in the player (it has its own listener)
+      if (location.pathname.startsWith("/media/")) return;
+
+      switch (action) {
+        case "navigate-up":
+          navigateSpatial("up");
+          break;
+        case "navigate-down":
+          navigateSpatial("down");
+          break;
+        case "navigate-left":
+          navigateSpatial("left");
+          break;
+        case "navigate-right":
+          navigateSpatial("right");
+          break;
+        case "confirm":
+          (document.activeElement as HTMLElement)?.click();
+          break;
+        case "back": {
+          const topModal = getTopModal();
+          if (topModal) {
+            hideModal(topModal);
+          } else {
+            window.history.back();
+          }
+          break;
+        }
+        case "go-home": {
+          window.scrollTo(0, 0);
+          navigate("/");
+          break;
+        }
+        default:
+          break;
+      }
+    },
+    [
+      navigateSpatial,
+      location.pathname,
+      gamepadInputMode,
+      hideModal,
+      getTopModal,
+      navigate,
+    ],
+  );
+
+  useGamepadPolling({
+    onAction: handleAction,
+    enabled: enableGamepadControls,
+  });
+
+  // Remove gamepad-active class on mouse move (optional, but nice for hybrid use)
+  useEffect(() => {
+    const handleMouseMove = () => {
+      document.body.classList.remove("gamepad-active");
+      if (usePreferencesStore.getState().isGamepadActive) {
+        usePreferencesStore.getState().setGamepadActive(false);
+      }
+    };
+    window.addEventListener("mousemove", handleMouseMove);
+    return () => window.removeEventListener("mousemove", handleMouseMove);
+  }, []);
+
+  // Browser lock: prevent arrow keys from reaching the browser chrome when gamepad is active
+  useEffect(() => {
+    if (!enableGamepadControls) return;
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      const navKeys = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", " "];
+      if (
+        navKeys.includes(e.key) &&
+        document.body.classList.contains("gamepad-active")
+      ) {
+        // Prevent the browser from scrolling the page or moving focus to browser chrome
+        e.preventDefault();
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown, { capture: true });
+    return () =>
+      window.removeEventListener("keydown", handleKeyDown, { capture: true });
+  }, [enableGamepadControls]);
+
+  return null;
+}

src/components/layout/Navigation.tsx

@@ -128,6 +128,7 @@ export function Navigation(props: NavigationProps) {
 
       {/* content */}
       <div
+        id="mw-header"
         className="top-content fixed pointer-events-none left-0 right-0 z-[500] top-0 min-h-[150px]"
         style={{
           top: `${bannerHeight}px`,

src/components/media/MediaBookmark.tsx

@@ -10,9 +10,14 @@ import { IconPatch } from "../buttons/IconPatch";
 interface MediaBookmarkProps {
   media: MediaItem;
   group?: string[];
+  tabIndex?: number;
 }
 
-export function MediaBookmarkButton({ media, group }: MediaBookmarkProps) {
+export function MediaBookmarkButton({
+  media,
+  group,
+  tabIndex,
+}: MediaBookmarkProps) {
   const addBookmark = useBookmarkStore((s) => s.addBookmark);
   const addBookmarkWithGroups = useBookmarkStore(
     (s) => s.addBookmarkWithGroups,
@@ -59,6 +64,7 @@ export function MediaBookmarkButton({ media, group }: MediaBookmarkProps) {
     >
       <IconPatch
         icon={isBookmarked ? Icons.BOOKMARK : Icons.BOOKMARK_OUTLINE}
+        tabIndex={tabIndex}
         className={`${buttonOpacityClass} p-2 opacity-75 transition-opacity duration-300 hover:scale-110 hover:cursor-pointer`}
       />
     </div>