s.addBookmark);
const addBookmarkWithGroups = useBookmarkStore(
(s) => s.addBookmarkWithGroups,
@@ -59,6 +64,7 @@ export function MediaBookmarkButton({ media, group }: MediaBookmarkProps) {
>
diff --git a/src/components/media/MediaCard.tsx b/src/components/media/MediaCard.tsx
index 6ee141f07..cfdfbe075 100644
--- a/src/components/media/MediaCard.tsx
+++ b/src/components/media/MediaCard.tsx
@@ -1,7 +1,14 @@
// I'm sorry this is so confusing 😭
import classNames from "classnames";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+ ReactNode,
+ useCallback,
+ useEffect,
+ useMemo,
+ useRef,
+ useState,
+} from "react";
import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";
@@ -120,6 +127,7 @@ export interface MediaCardProps {
forceSkeleton?: boolean;
editable?: boolean;
onEdit?: (e?: React.MouseEvent) => void;
+ nestedTabIndex?: number;
}
function checkReleased(media: MediaItem): boolean {
@@ -147,6 +155,7 @@ function MediaCardContent({
forceSkeleton,
editable,
onEdit,
+ nestedTabIndex,
}: MediaCardProps) {
const { t } = useTranslation();
const percentageString = `${Math.round(percentage ?? 0).toFixed(0)}%`;
@@ -154,9 +163,6 @@ function MediaCardContent({
const isReleased = useCallback(() => checkReleased(media), [media]);
const canLink = linkable && !closable && isReleased();
-
- const dotListContent = [t(`media.types.${media.type}`)];
-
const [searchQuery] = useSearchQuery();
const enableMinimalCards = usePreferencesStore((s) => s.enableMinimalCards);
@@ -176,9 +182,8 @@ function MediaCardContent({
);
}
- if (isReleased() && media.year) {
- dotListContent.push(media.year.toFixed());
- }
+ const dotListContent: ReactNode[] = [t(`media.types.${media.type}`)];
+ if (media.year) dotListContent.push(media.year.toString());
if (!isReleased()) {
dotListContent.push(t("media.unreleased"));
@@ -187,11 +192,12 @@ function MediaCardContent({
return (
}>
e.key === "Enter" && e.currentTarget.click()}
+ onKeyUp={(e) =>
+ e.key === "Enter" && (e.currentTarget as HTMLElement).click()
+ }
>
e.preventDefault()}
>
-
)}
{searchQuery.length > 0 && !closable ? (
e.preventDefault()}>
-
) : null}
@@ -289,6 +295,7 @@ function MediaCardContent({
>
+
- );
-}
-
-function LivePreview() {
- return (
-
-
- {label}
-{value.toUpperCase()}
-
-
);
@@ -158,59 +319,109 @@ export function CustomThemeModal(props: {
const saveCustomTheme = useThemeStore((s) => s.saveCustomTheme);
const setTheme = useThemeStore((s) => s.setTheme);
- const setCustomTheme = useThemeStore((s) => s.setCustomTheme);
- const setPreviewTheme = usePreviewThemeStore((s) => s.setPreviewTheme);
const [name, setName] = useState("");
const [primary, setPrimary] = useState(primaryOptions[0].id);
const [secondary, setSecondary] = useState(secondaryOptions[0].id);
const [tertiary, setTertiary] = useState(tertiaryOptions[0].id);
- // Custom color picker state (hex values)
+ // Scaling and Modes
+ const [scale, setScale] = useState(0.8);
+ const [isFullPreview, setIsFullPreview] = useState(false);
+
+ // Custom color picker state
const [useCustomPrimary, setUseCustomPrimary] = useState(false);
const [useCustomSecondary, setUseCustomSecondary] = useState(false);
const [useCustomTertiary, setUseCustomTertiary] = useState(false);
- const [customPrimaryColor, setCustomPrimaryColor] = useState("#7B61FF");
- const [customSecondaryColor, setCustomSecondaryColor] = useState("#FFFFFF");
- const [customTertiaryColor, setCustomTertiaryColor] = useState("#0F0F12");
+
+ const [customPrimary, setCustomPrimary] = useState("#BE95FF");
+ const [customSecondaryText, setCustomSecondaryText] = useState("#FFFFFF");
+ const [customSecondaryButton, setCustomSecondaryButton] = useState("#1A1A1E");
+ const [customTertiaryBg, setCustomTertiaryBg] = useState("#0C0C0F");
+ const [customTertiaryAccent, setCustomTertiaryAccent] = useState("#1A1A1E");
+
+ const [unlockMainBg, setUnlockMainBg] = useState(false);
const [wasShown, setWasShown] = useState(false);
+ const [previewMode, setPreviewMode] = useState<"detailed" | "card">(
+ "detailed",
+ );
- if (props.isShown && !wasShown) {
- setWasShown(true);
- if (props.themeToEdit) {
- setName(props.themeToEdit.name);
- setPrimary(props.themeToEdit.primary);
- setSecondary(props.themeToEdit.secondary);
- setTertiary(props.themeToEdit.tertiary);
+ useEffect(() => {
+ if (props.isShown && !wasShown) {
+ setWasShown(true);
+ if (props.themeToEdit) {
+ setName(props.themeToEdit.name);
+ setPrimary(props.themeToEdit.primary);
+ setSecondary(props.themeToEdit.secondary);
+ setTertiary(props.themeToEdit.tertiary);
+ } else {
+ setName("");
+ setPrimary(primaryOptions[0].id);
+ setSecondary(secondaryOptions[0].id);
+ setTertiary(tertiaryOptions[0].id);
+ }
+ setUseCustomPrimary(false);
+ setUseCustomSecondary(false);
+ setUseCustomTertiary(false);
+ setUnlockMainBg(false);
+ setIsFullPreview(false);
+ setPreviewMode("detailed");
+ setScale(0.8);
+ } else if (!props.isShown && wasShown) {
+ setWasShown(false);
+ }
+ }, [props.isShown, wasShown, props.themeToEdit]);
+
+ // Calculate local CSS variables for scoped injection
+ const previewVars = useMemo(() => {
+ const vars: Record
- {/* Background glow */}
-
- {/* Navbar */}
-
-
- {/* Hero */}
-
-
-
-
-
-
-
-
-
-
- {/* Search bar */}
-
-
- {/* Media grid */}
-
-
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- + {label} +
+{value.toUpperCase()}
- {/* Left Section - Name, Preview & Actions */}
-
-
-
-
- {props.themeToEdit
- ? t("settings.appearance.customTheme.editBtn", "Edit")
- : t("settings.appearance.customTheme.createBtn", "Create")}
-
-
-
- {props.themeToEdit
- ? t("settings.appearance.customTheme.editBtn", "Edit")
- : t("settings.appearance.customTheme.createBtn", "Create")}
-
-
-
- {t(
- "settings.appearance.customTheme.createBtn2",
- "Your Own Theme",
- )}
-
+
+ {/* Full Modal Live Preview Overlay */}
+ {isFullPreview && (
+
+
+ {previewMode === "detailed" ? (
+
+ Create
+
+ Your Own
+
+ Theme
+
+
+
+
+
+
+
-
+
setName(e.target.value)}
autoFocus
/>
- {/* Live Preview */}
-
-
- {t("settings.appearance.customTheme.livePreview")}
-
-
+ Live Concept Preview
+
+
+
- {t("settings.appearance.customTheme.primaryColor")}
-
+
+
+ Primary Theme
+
+
+ Branding & Interaction
+
+
{useCustomPrimary ? (
-
- {t("settings.appearance.customTheme.secondaryColor")}
-
+
+
+ Secondary Details
+
+
+ Typography & Elements
+
+
{useCustomSecondary ? (
-
- {t("settings.appearance.customTheme.tertiaryColor")}
-
+
+
+ Tertiary Base
+
+
+ Surfaces & Accents
+
+
{useCustomTertiary ? (
-
+ Main Background Locked
+
+
+ Prevents entire website color change
+
+
+
+
+ ) : (
+
+
+
+
+
+ {media.title}
+
+
+ {media.year}
+ •
+
+ {t(`media.types.${media.type}`)}
+
+ {media.rating && (
+ <>
+ •
+
+
+
+ );
+}
diff --git a/src/components/overlays/Modal.tsx b/src/components/overlays/Modal.tsx
index 37fbab732..abd7aef43 100644
--- a/src/components/overlays/Modal.tsx
+++ b/src/components/overlays/Modal.tsx
@@ -55,7 +55,10 @@ export function Modal(props: { id: string; children?: ReactNode }) {
-
+
{props.children}
@@ -92,7 +95,10 @@ export function FancyModal(props: {
-
+
s.mediaPlaying.isPaused);
- const status = usePlayerStore((s) => s.status);
- const meta = usePlayerStore((s) => s.meta);
- const { duration } = usePlayerStore((s) => s.progress);
- const enablePauseOverlay = usePreferencesStore((s) => s.enablePauseOverlay);
- const enableImageLogos = usePreferencesStore((s) => s.enableImageLogos);
+ const isPaused = usePlayerStore((s: any) => s.mediaPlaying.isPaused);
+ const isLoading = usePlayerStore((s: any) => s.mediaPlaying.isLoading);
+ const status = usePlayerStore((s: any) => s.status);
+ const meta = usePlayerStore((s: any) => s.meta);
+ const { time, duration, draggingTime } = usePlayerStore(
+ (s: any) => s.progress,
+ );
+ const { isSeeking } = usePlayerStore((s: any) => s.interface);
+ const playbackRate = usePlayerStore((s: any) => s.mediaPlaying.playbackRate);
+ const play = usePlayerStore((s: any) => s.play);
+ const enablePauseOverlay = usePreferencesStore(
+ (s: any) => s.enablePauseOverlay,
+ );
+ const pauseOverlayInactivityTime = usePreferencesStore(
+ (s: any) => s.pauseOverlayInactivityTime,
+ );
+ const enablePauseOverlayHoverHide = usePreferencesStore(
+ (s: any) => s.enablePauseOverlayHoverHide,
+ );
+ const timeFormat12Hour = usePreferencesStore((s: any) => s.timeFormat12Hour);
+ const enableImageLogos = usePreferencesStore((s: any) => s.enableImageLogos);
const { isMobile } = useIsMobile();
const { showTargets } = useShouldShowControls();
const { t } = useTranslation();
+ const { showModal } = useOverlayStack();
+
const [logoUrl, setLogoUrl] = useState(null);
const [details, setDetails] = useState({
voteAverage: null,
@@ -36,13 +56,10 @@ export function PauseOverlay() {
runtime: null,
});
- // Track whether playback has actually started at least once
- // so the overlay never appears during source scraping / initial load
const hasPlayedRef = useRef(false);
const [overlayVisible, setOverlayVisible] = useState(false);
const timerRef = useRef | null>(null);
- // Mark that real playback has started only when the player is actively playing
useEffect(() => {
if (!isPaused && status === playerStatus.PLAYING) {
hasPlayedRef.current = true;
@@ -50,13 +67,59 @@ export function PauseOverlay() {
}, [isPaused, status]);
useEffect(() => {
+ const handleMouseMove = () => {
+ if (enablePauseOverlayHoverHide && overlayVisible && isPaused) {
+ setOverlayVisible(false);
+
+ // Reset the timer if they stop moving the mouse
+ if (timerRef.current) clearTimeout(timerRef.current);
+ if (pauseOverlayInactivityTime > 0) {
+ timerRef.current = setTimeout(() => {
+ // Only show if still paused
+ if (usePlayerStore.getState().mediaPlaying.isPaused) {
+ setOverlayVisible(true);
+ }
+ }, pauseOverlayInactivityTime * 1000);
+ }
+ }
+ };
+
+ if (enablePauseOverlayHoverHide && overlayVisible) {
+ window.addEventListener("mousemove", handleMouseMove);
+ }
+
+ return () => {
+ window.removeEventListener("mousemove", handleMouseMove);
+ };
+ }, [
+ enablePauseOverlayHoverHide,
+ overlayVisible,
+ isPaused,
+ pauseOverlayInactivityTime,
+ ]);
+
+ useEffect(() => {
+ if (status === playerStatus.SCRAPING) {
+ setOverlayVisible(false);
+ if (timerRef.current) clearTimeout(timerRef.current);
+ return;
+ }
+
+ if (isLoading && hasPlayedRef.current) {
+ setOverlayVisible(true);
+ if (timerRef.current) clearTimeout(timerRef.current);
+ return;
+ }
+
if (isPaused && hasPlayedRef.current && status === playerStatus.PLAYING) {
- // Show after 2 seconds of being paused
- timerRef.current = setTimeout(() => {
+ if (pauseOverlayInactivityTime === 0) {
setOverlayVisible(true);
- }, 2000);
+ } else {
+ timerRef.current = setTimeout(() => {
+ setOverlayVisible(true);
+ }, pauseOverlayInactivityTime * 1000);
+ }
} else {
- // Hide immediately when unpaused or not yet played
if (timerRef.current) {
clearTimeout(timerRef.current);
timerRef.current = null;
@@ -65,15 +128,12 @@ export function PauseOverlay() {
}
return () => {
- if (timerRef.current) {
- clearTimeout(timerRef.current);
- timerRef.current = null;
- }
+ if (timerRef.current) clearTimeout(timerRef.current);
};
- }, [isPaused, status]);
+ }, [isPaused, status, isLoading, pauseOverlayInactivityTime]);
let shouldShow = overlayVisible && enablePauseOverlay;
- if (isMobile && status === playerStatus.SCRAPING) shouldShow = false;
+ if (status === playerStatus.SCRAPING) shouldShow = false;
if (isMobile && showTargets) shouldShow = false;
useEffect(() => {
@@ -110,10 +170,10 @@ export function PauseOverlay() {
try {
const type =
meta.type === "movie" ? TMDBContentTypes.MOVIE : TMDBContentTypes.TV;
-
const isShowWithEpisode =
meta.type === "show" && meta.season && meta.episode;
let voteAverage: number | null = null;
+ let runtime: number | null = null;
if (isShowWithEpisode) {
const episodeData = await getEpisodeDetails(
@@ -121,8 +181,9 @@ export function PauseOverlay() {
meta.season?.number ?? 0,
meta.episode?.number ?? 0,
);
- if (mounted && episodeData?.vote_average != null) {
- voteAverage = episodeData.vote_average;
+ if (mounted && episodeData) {
+ voteAverage = episodeData.vote_average ?? null;
+ runtime = (episodeData as any).runtime ?? null;
}
}
@@ -137,16 +198,8 @@ export function PauseOverlay() {
? data.vote_average
: null;
- let runtime: number | null = null;
- if (isShowWithEpisode) {
- const epData = await getEpisodeDetails(
- meta.tmdbId,
- meta.season?.number ?? 0,
- meta.episode?.number ?? 0,
- );
- runtime = (epData as any)?.runtime ?? null;
- } else {
- runtime = (data as any)?.runtime ?? null;
+ if (!isShowWithEpisode) {
+ runtime = (data as any).runtime ?? null;
}
setDetails({ voteAverage: finalVoteAverage, genres, runtime });
@@ -168,27 +221,62 @@ export function PauseOverlay() {
const overview =
meta.type === "show" ? meta.episode?.overview : meta.overview;
- const formatRuntime = (minutes: number) => {
- const h = Math.floor(minutes / 60);
- const m = minutes % 60;
- return h > 0 ? `${h}h ${m}m` : `${m}m`;
+ const currentTime = Math.min(
+ Math.max(isSeeking ? draggingTime : time, 0),
+ duration,
+ );
+ const secondsRemaining = Math.abs(currentTime - duration);
+ const secondsRemainingAdjusted =
+ playbackRate > 0 ? secondsRemaining / playbackRate : secondsRemaining;
+
+ const hasHours = durationExceedsHour(duration);
+ const timeLeft = formatSeconds(
+ secondsRemaining,
+ durationExceedsHour(secondsRemaining),
+ );
+ const timeWatched = formatSeconds(currentTime, hasHours);
+ const timeFinished = new Date(Date.now() + secondsRemainingAdjusted * 1e3);
+ const durationFormatted = formatSeconds(duration, hasHours);
+
+ const handleOpenDetails = () => {
+ showModal("details", {
+ id: Number(meta.tmdbId),
+ type: meta.type === "movie" ? "movie" : "show",
+ });
};
+ const timeRemainingParts = t("player.time.remaining", {
+ timeFinished,
+ timeWatched,
+ timeLeft,
+ duration: durationFormatted,
+ formatParams: {
+ timeFinished: {
+ hour: "numeric",
+ minute: "numeric",
+ hour12: timeFormat12Hour,
+ },
+ },
+ }).split(/[•·]| \| /);
+
return (
{
+ play();
+ setOverlayVisible(false);
+ }}
>
- {/* Main content - left-center aligned, vertically anchored near bottom */}
-
-
- {/* "You are watching" label */}
-
+
+
+
{t("player.pauseOverlay.youAreWatching", "You are watching")}
- {/* Title / Logo */}
{logoUrl ? (
)}
- {/* Season / Episode info */}
{meta.type === "show" && meta.season && meta.episode && (
- Season {meta.season.number} · Episode {meta.episode.number}
+ Season {meta.season.number} | Episode {meta.episode.number}
)}
- {/* Episode title */}
{meta.type === "show" && meta.episode?.title && (
{meta.episode.title}
)}
- {/* Description */}
- {overview && (
-
- {overview}
-
- )}
-
- {/* Rating + Runtime */}
-
- {details.voteAverage !== null && details.voteAverage > 0 && (
- <>
- ⭐
- {details.voteAverage.toFixed(0)}
-
- )}
- {details.runtime && details.runtime > 0 && (
- <>
- {details.voteAverage !== null && details.voteAverage > 0 && (
- ·
- )}
- {formatRuntime(details.runtime)}
-
+
+ {details.voteAverage !== null && (
+
+ Rating ⭐: {details.voteAverage.toFixed(1)}
+ /10
+
)}
- {duration > 0 && !details.runtime && (
+
+ {details.genres.length > 0 && (
<>
- {details.voteAverage !== null && details.voteAverage > 0 && (
- ·
- )}
- {formatRuntime(Math.round(duration / 60))}
+ |
+ {details.genres.slice(0, 3).join(", ")}
)}
+
+ {duration > 0 &&
+ timeRemainingParts.map((part: string) => (
+
+ {(part.trim() !== timeRemainingParts[0].trim() ||
+ details.genres.length > 0 ||
+ details.voteAverage !== null) && (
+ |
+ )}
+ {part.trim()}
+
+ ))}
+
+ {overview && (
+ {
+ e.stopPropagation();
+ handleOpenDetails();
+ }}
+ >
+
+ {overview}
+
+
+
+ )}
- {/* "Paused" indicator - bottom right, raised up to avoid controls overlap */}
-
-
+
+
- {props.content.map((item, index) => (
-
- {index !== 0 ? (
- ●
- ) : null}
- {item}
-
- ))}
+ {props.content.map((item, index) => {
+ const key =
+ typeof item === "string" || typeof item === "number" ? item : index;
+ return (
+
+ {index !== 0 ? (
+ ●
+ ) : null}
+ {item}
+
+ );
+ })}
);
}
diff --git a/src/hooks/useGamepad.ts b/src/hooks/useGamepad.ts
index 71f0b1597..74b6d6e6e 100644
--- a/src/hooks/useGamepad.ts
+++ b/src/hooks/useGamepad.ts
@@ -32,7 +32,7 @@ export const DEFAULT_GAMEPAD_MAPPING: GamepadMapping = {
actionNorth: "toggle-captions",
leftBumper: "skip-backward",
rightBumper: "skip-forward",
- leftTrigger: "volume-down",
+ leftTrigger: "go-home",
rightTrigger: "volume-up",
start: "play-pause",
select: "mute",
@@ -186,6 +186,7 @@ export const GAMEPAD_ACTION_LABELS: Record = {
"toggle-captions": "Toggle Captions",
"next-episode": "Next Episode",
"previous-episode": "Previous Episode",
+ "go-home": "Go to Home Page",
};
export const GAMEPAD_BUTTON_LABELS: Record<
diff --git a/src/hooks/useSettingsState.ts b/src/hooks/useSettingsState.ts
index 801ce456d..7c0e91678 100644
--- a/src/hooks/useSettingsState.ts
+++ b/src/hooks/useSettingsState.ts
@@ -82,6 +82,9 @@ export function useSettingsState(
enableDoubleClickToSeek: boolean,
enableAutoResumeOnPlaybackError: boolean,
enablePauseOverlay: boolean,
+ pauseOverlayInactivityTime: number,
+ enablePauseOverlayHoverHide: boolean,
+ timeFormat12Hour: boolean | null,
customTheme: {
primary: string;
secondary: string;
@@ -289,6 +292,24 @@ export function useSettingsState(
resetEnablePauseOverlay,
enablePauseOverlayChanged,
] = useDerived(enablePauseOverlay);
+ const [
+ pauseOverlayInactivityTimeState,
+ setPauseOverlayInactivityTimeState,
+ resetPauseOverlayInactivityTime,
+ pauseOverlayInactivityTimeChanged,
+ ] = useDerived(pauseOverlayInactivityTime);
+ const [
+ enablePauseOverlayHoverHideState,
+ setEnablePauseOverlayHoverHideState,
+ resetEnablePauseOverlayHoverHide,
+ enablePauseOverlayHoverHideChanged,
+ ] = useDerived(enablePauseOverlayHoverHide);
+ const [
+ timeFormat12HourState,
+ setTimeFormat12HourState,
+ resetTimeFormat12Hour,
+ timeFormat12HourChanged,
+ ] = useDerived(timeFormat12Hour);
const [
customThemeState,
setCustomThemeState,
@@ -350,6 +371,9 @@ export function useSettingsState(
resetEnableDoubleClickToSeek();
resetEnableAutoResumeOnPlaybackError();
resetEnablePauseOverlay();
+ resetPauseOverlayInactivityTime();
+ resetEnablePauseOverlayHoverHide();
+ resetTimeFormat12Hour();
resetCustomTheme();
resetSavedCustomThemes();
resetHiddenDefaultThemes();
@@ -394,6 +418,9 @@ export function useSettingsState(
enableDoubleClickToSeekChanged ||
enableAutoResumeOnPlaybackErrorChanged ||
enablePauseOverlayChanged ||
+ pauseOverlayInactivityTimeChanged ||
+ enablePauseOverlayHoverHideChanged ||
+ timeFormat12HourChanged ||
customThemeChanged ||
savedCustomThemesChanged ||
hiddenDefaultThemesChanged;
@@ -591,6 +618,21 @@ export function useSettingsState(
set: setEnablePauseOverlayState,
changed: enablePauseOverlayChanged,
},
+ pauseOverlayInactivityTime: {
+ state: pauseOverlayInactivityTimeState,
+ set: setPauseOverlayInactivityTimeState,
+ changed: pauseOverlayInactivityTimeChanged,
+ },
+ enablePauseOverlayHoverHide: {
+ state: enablePauseOverlayHoverHideState,
+ set: setEnablePauseOverlayHoverHideState,
+ changed: enablePauseOverlayHoverHideChanged,
+ },
+ timeFormat12Hour: {
+ state: timeFormat12HourState,
+ set: setTimeFormat12HourState,
+ changed: timeFormat12HourChanged,
+ },
customTheme: {
state: customThemeState,
set: setCustomThemeState,
diff --git a/src/hooks/useSpatialNavigation.ts b/src/hooks/useSpatialNavigation.ts
new file mode 100644
index 000000000..76a312a0f
--- /dev/null
+++ b/src/hooks/useSpatialNavigation.ts
@@ -0,0 +1,148 @@
+import { useCallback } from "react";
+
+import { useOverlayStack } from "@/stores/interface/overlayStack";
+import { usePreferencesStore } from "@/stores/preferences";
+
+export type NavigationDirection = "up" | "down" | "left" | "right";
+
+const FOCUSABLE_SELECTOR =
+ 'button:not([tabindex="-1"]), [href]:not([tabindex="-1"]), input:not([tabindex="-1"]), select:not([tabindex="-1"]), textarea:not([tabindex="-1"]), [tabindex]:not([tabindex="-1"]), .tabbable:not([tabindex="-1"])';
+
+export function useSpatialNavigation() {
+ const getFocusableElements = useCallback(() => {
+ const topModalId = useOverlayStack.getState().getTopModal();
+
+ const all = Array.from(
+ document.querySelectorAll(FOCUSABLE_SELECTOR),
+ );
+
+ let filtered = all.filter((el) => {
+ const style = window.getComputedStyle(el);
+ return (
+ style.display !== "none" &&
+ style.visibility !== "hidden" &&
+ el.offsetWidth > 0 &&
+ el.offsetHeight > 0 &&
+ !(el as any).disabled
+ );
+ });
+
+ if (topModalId) {
+ const modalElement = document.getElementById(`modal-${topModalId}`);
+ if (modalElement) {
+ filtered = filtered.filter((el) => modalElement.contains(el));
+ }
+ } else {
+ const ignoreHeader = usePreferencesStore.getState().ignoreHeader;
+ const activeElement = document.activeElement as HTMLElement;
+ const header = document.getElementById("mw-header");
+ const isInHeader = header?.contains(activeElement);
+
+ // If we are already in the header, we should be able to see header elements to navigate within it
+ // If we are NOT in the header and ignoreHeader is on, we filter them out to prevent jumping TO the header
+ if (ignoreHeader && !isInHeader) {
+ if (header) {
+ filtered = filtered.filter((el) => !header.contains(el));
+ }
+ }
+ }
+
+ return filtered;
+ }, []);
+
+ const navigate = useCallback(
+ (direction: NavigationDirection) => {
+ const activeElement = document.activeElement as HTMLElement;
+
+ const elements = getFocusableElements();
+ if (elements.length === 0) return;
+
+ // If nothing focused or focus is lost, focus the first available element
+ if (
+ !activeElement ||
+ activeElement === document.body ||
+ !elements.includes(activeElement)
+ ) {
+ elements[0].focus();
+ elements[0].scrollIntoView({ block: "nearest", behavior: "smooth" });
+ return;
+ }
+
+ const currentRect = activeElement.getBoundingClientRect();
+ const currentCenter = {
+ x: currentRect.left + currentRect.width / 2,
+ y: currentRect.top + currentRect.height / 2,
+ };
+
+ let bestElement: HTMLElement | null = null;
+ let minScore = Infinity;
+
+ for (const el of elements) {
+ if (el === activeElement) continue;
+
+ const elRect = el.getBoundingClientRect();
+ const elCenter = {
+ x: elRect.left + elRect.width / 2,
+ y: elRect.top + elRect.height / 2,
+ };
+
+ const dx = elCenter.x - currentCenter.x;
+ const dy = elCenter.y - currentCenter.y;
+
+ let isCorrectDirection = false;
+ switch (direction) {
+ case "up":
+ isCorrectDirection = dy < 0;
+ break;
+ case "down":
+ isCorrectDirection = dy > 0;
+ break;
+ case "left":
+ isCorrectDirection = dx < 0;
+ break;
+ case "right":
+ isCorrectDirection = dx > 0;
+ break;
+ default:
+ break;
+ }
+
+ if (isCorrectDirection) {
+ // Weighted distance calculation
+ // We prioritize elements that are aligned with the direction
+ // Score = straight-line distance + (orthogonal distance * factor)
+ const primaryDist =
+ direction === "up" || direction === "down"
+ ? Math.abs(dy)
+ : Math.abs(dx);
+ const secondaryDist =
+ direction === "up" || direction === "down"
+ ? Math.abs(dx)
+ : Math.abs(dy);
+
+ let axisWeights =
+ direction === "left" || direction === "right" ? 1.5 : 1;
+
+ // Special case for header elements to make horizontal navigation smoother
+ const header = document.getElementById("mw-header");
+ if (header && header.contains(el) && header.contains(activeElement)) {
+ axisWeights = 0.5; // Lower weight for vertical misalignment within header
+ }
+
+ const score = primaryDist + secondaryDist * axisWeights;
+ if (score < minScore) {
+ minScore = score;
+ bestElement = el;
+ }
+ }
+ }
+
+ if (bestElement) {
+ bestElement.focus();
+ bestElement.scrollIntoView({ block: "nearest", behavior: "smooth" });
+ }
+ },
+ [getFocusableElements],
+ );
+ return { navigate };
+}
diff --git a/src/pages/GamepadSetup.tsx b/src/pages/GamepadSetup.tsx
new file mode 100644
index 000000000..005be58cf
--- /dev/null
+++ b/src/pages/GamepadSetup.tsx
@@ -0,0 +1,214 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useNavigate } from "react-router-dom";
+
+import { Icon, Icons } from "@/components/Icon";
+import { Stepper } from "@/components/layout/Stepper";
+import { BiggerCenterContainer } from "@/components/layout/ThinContainer";
+import { Heading2, Paragraph } from "@/components/utils/Text";
+import { MinimalPageLayout } from "@/pages/layouts/MinimalPageLayout";
+import { Card, CardContent, Link } from "@/pages/migration/utils";
+import { PageTitle } from "@/pages/parts/util/PageTitle";
+import { usePreferencesStore } from "@/stores/preferences";
+
+type SetupStep = "start" | "auto" | "manual" | "success";
+
+const MANUAL_BUTTONS = [
+ { id: 0, name: "A / Cross", icon: Icons.CIRCLE_CHECK },
+ { id: 1, name: "B / Circle", icon: Icons.ARROW_LEFT },
+ { id: 12, name: "D-Pad Up", icon: Icons.CHEVRON_UP },
+ { id: 13, name: "D-Pad Down", icon: Icons.CHEVRON_DOWN },
+];
+
+export function GamepadSetupPage() {
+ const navigate = useNavigate();
+ const [step, setStep] = useState("start");
+ const [currentManualButton, setCurrentManualButton] = useState(0);
+ const [detectedGamepad, setDetectedGamepad] = useState(null);
+ const [isListening, setIsListening] = useState(false);
+ const prevButtonStates = useRef>({});
+
+ const setGamepadSetupComplete = usePreferencesStore(
+ (s: any) => s.setGamepadSetupComplete,
+ );
+ const setEnableGamepadControls = usePreferencesStore(
+ (s: any) => s.setEnableGamepadControls,
+ );
+
+ useEffect(() => {
+ if (!isListening) return;
+
+ const poll = () => {
+ const gamepads = navigator.getGamepads();
+ for (const gp of gamepads) {
+ if (!gp) continue;
+
+ if (step === "auto") {
+ setDetectedGamepad(gp.id);
+ setTimeout(() => {
+ setStep("success");
+ setIsListening(false);
+ }, 1500);
+ return;
+ }
+
+ if (step === "manual") {
+ const targetButton = MANUAL_BUTTONS[currentManualButton];
+ const isPressed = !!gp.buttons[targetButton.id]?.pressed;
+ const wasPressed = prevButtonStates.current[targetButton.id] ?? false;
+
+ if (isPressed && !wasPressed) {
+ if (currentManualButton < MANUAL_BUTTONS.length - 1) {
+ setCurrentManualButton((s) => s + 1);
+ } else {
+ setStep("success");
+ setIsListening(false);
+ }
+ }
+ prevButtonStates.current[targetButton.id] = isPressed;
+ }
+ }
+ requestAnimationFrame(poll);
+ };
+
+ const handle = requestAnimationFrame(poll);
+ return () => cancelAnimationFrame(handle);
+ }, [step, currentManualButton, isListening]);
+
+ const finishSetup = useCallback(() => {
+ setGamepadSetupComplete(true);
+ setEnableGamepadControls(true);
+ navigate("/settings#settings-preferences");
+ }, [navigate, setGamepadSetupComplete, setEnableGamepadControls]);
+
+ return (
+
+
+
+ Setup Controller Support
+
+
+ Connect your Xbox or PlayStation controller to navigate P-Stream
+ with ease. Choose a setup mode below.
+
+
+
+ {
+ setStep("auto");
+ setIsListening(true);
+ }}
+ className="flex-1"
+ >
+
+ Start Auto Setup
+
+
+
+ {
+ setStep("manual");
+ setIsListening(true);
+ }}
+ className="flex-1"
+ >
+
+ Start Manual Setup
+
+
+
+
+ )}
+
+ {step === "auto" && (
+
+
+
+
+ 🎮
+
+
+
+ {detectedGamepad
+ ? "Controller Detected!"
+ : "Waiting for Controller..."}
+
+
+ {detectedGamepad ||
+ "Please press any button on your controller to identify it."}
+
+
+ )}
+
+ {step === "manual" && (
+
+
+ Verify Button Presses
+
+
+
+
+ Press {MANUAL_BUTTONS[currentManualButton].name}
+
+
+ Step {currentManualButton + 1} of {MANUAL_BUTTONS.length}
+
+
+
+
+
+
+
+ )}
+
+ {step === "success" && (
+
+
+ Setup Complete!
+
+ Your controller is now ready to use. You can navigate the entire
+ site using the D-Pad and Select button.
+
+
+
+ )}
+
+
+ );
+}
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index 5fde539db..a61be9e91 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -3,6 +3,7 @@ import { Helmet } from "react-helmet-async";
import { useTranslation } from "react-i18next";
import { To, useNavigate } from "react-router-dom";
+import { Button } from "@/components/buttons/Button";
import { WideContainer } from "@/components/layout/WideContainer";
import { useDebounce } from "@/hooks/useDebounce";
import { useRandomTranslation } from "@/hooks/useRandomTranslation";
@@ -23,7 +24,6 @@ import { useOverlayStack } from "@/stores/interface/overlayStack";
import { usePreferencesStore } from "@/stores/preferences";
import { MediaItem } from "@/utils/mediaTypes";
-import { Button } from "./About";
import { AdsPart } from "./parts/home/AdsPart";
import { RevivalAnnouncementModal } from "./parts/home/RevivalAnnouncementModal";
import { SupportBar } from "./parts/home/SupportBar";
diff --git a/src/pages/Settings.tsx b/src/pages/Settings.tsx
index ecd3cb19c..776b6eacf 100644
--- a/src/pages/Settings.tsx
+++ b/src/pages/Settings.tsx
@@ -537,6 +537,20 @@ export function SettingsPage() {
);
const enablePauseOverlay = usePreferencesStore((s) => s.enablePauseOverlay);
+ const pauseOverlayInactivityTime = usePreferencesStore(
+ (s) => s.pauseOverlayInactivityTime,
+ );
+ const enablePauseOverlayHoverHide = usePreferencesStore(
+ (s) => s.enablePauseOverlayHoverHide,
+ );
+ const timeFormat12Hour = usePreferencesStore((s) => s.timeFormat12Hour);
+ const setPauseOverlayInactivityTime = usePreferencesStore(
+ (s) => s.setPauseOverlayInactivityTime,
+ );
+ const setEnablePauseOverlayHoverHide = usePreferencesStore(
+ (s) => s.setEnablePauseOverlayHoverHide,
+ );
+ const setTimeFormat12Hour = usePreferencesStore((s) => s.setTimeFormat12Hour);
const setEnablePauseOverlay = usePreferencesStore(
(s) => s.setEnablePauseOverlay,
);
@@ -743,6 +757,9 @@ export function SettingsPage() {
setEnableDoubleClickToSeek,
setEnableAutoResumeOnPlaybackError,
setEnablePauseOverlay,
+ setPauseOverlayInactivityTime,
+ setEnablePauseOverlayHoverHide,
+ setTimeFormat12Hour,
setEnableNumberKeySeeking,
setCustomTheme,
]);
@@ -786,6 +803,9 @@ export function SettingsPage() {
enableDoubleClickToSeek,
enableAutoResumeOnPlaybackError,
enablePauseOverlay,
+ pauseOverlayInactivityTime,
+ enablePauseOverlayHoverHide,
+ timeFormat12Hour,
customThemeBaseline ?? customTheme,
savedCustomThemes,
hiddenDefaultThemes,
@@ -957,6 +977,9 @@ export function SettingsPage() {
state.enableAutoResumeOnPlaybackError.state,
);
setEnablePauseOverlay(state.enablePauseOverlay.state);
+ setPauseOverlayInactivityTime(state.pauseOverlayInactivityTime.state);
+ setEnablePauseOverlayHoverHide(state.enablePauseOverlayHoverHide.state);
+ setTimeFormat12Hour(state.timeFormat12Hour.state);
setCustomTheme(state.customTheme.state);
setCustomThemeBaseline(state.customTheme.state);
useThemeStore.setState({
@@ -1024,6 +1047,9 @@ export function SettingsPage() {
setEnableDoubleClickToSeek,
setEnableAutoResumeOnPlaybackError,
setEnablePauseOverlay,
+ setEnablePauseOverlayHoverHide,
+ setPauseOverlayInactivityTime,
+ setTimeFormat12Hour,
setCustomTheme,
]);
return (
@@ -1143,6 +1169,20 @@ export function SettingsPage() {
enableLowPerformanceMode={state.enableLowPerformanceMode.state}
enablePauseOverlay={state.enablePauseOverlay.state}
setEnablePauseOverlay={state.enablePauseOverlay.set}
+ pauseOverlayInactivityTime={
+ state.pauseOverlayInactivityTime.state
+ }
+ setPauseOverlayInactivityTime={
+ state.pauseOverlayInactivityTime.set
+ }
+ enablePauseOverlayHoverHide={
+ state.enablePauseOverlayHoverHide.state
+ }
+ setEnablePauseOverlayHoverHide={
+ state.enablePauseOverlayHoverHide.set
+ }
+ timeFormat12Hour={state.timeFormat12Hour.state ?? false}
+ setTimeFormat12Hour={(v) => state.timeFormat12Hour.set(v)}
savedCustomThemes={state.savedCustomThemes.state}
setSavedCustomThemes={state.savedCustomThemes.set}
hiddenDefaultThemes={state.hiddenDefaultThemes.state}
diff --git a/src/pages/onboarding/utils.tsx b/src/pages/onboarding/utils.tsx
index 7863b4bff..bc10a40cb 100644
--- a/src/pages/onboarding/utils.tsx
+++ b/src/pages/onboarding/utils.tsx
@@ -14,12 +14,14 @@ export function Card(props: {
e.key === "Enter" && props.onClick?.()}
onClick={props.onClick}
>
{props.children}
@@ -112,9 +114,11 @@ export function Link(props: {
href={props.href}
target={props.target}
className={classNames(
- "text-onboarding-link cursor-pointer inline-flex gap-2 items-center group hover:opacity-75 transition-opacity",
+ "text-onboarding-link cursor-pointer inline-flex gap-2 items-center group hover:opacity-75 transition-opacity tabbable rounded focus:outline-none",
props.className,
)}
+ tabIndex={0}
+ onKeyDown={(e) => e.key === "Enter" && props.to && navigate(props.to)}
rel="noreferrer"
>
{props.children}
diff --git a/src/pages/parts/search/SearchListPart.tsx b/src/pages/parts/search/SearchListPart.tsx
index 9052b4f67..3eb518dfd 100644
--- a/src/pages/parts/search/SearchListPart.tsx
+++ b/src/pages/parts/search/SearchListPart.tsx
@@ -4,13 +4,13 @@ import { useNavigate } from "react-router-dom";
import { searchForMedia } from "@/backend/metadata/search";
import { MWQuery } from "@/backend/metadata/types/mw";
+import { Button } from "@/components/buttons/Button";
import { IconPatch } from "@/components/buttons/IconPatch";
import { Icons } from "@/components/Icon";
import { SectionHeading } from "@/components/layout/SectionHeading";
import { MediaGrid } from "@/components/media/MediaGrid";
import { WatchedMediaCard } from "@/components/media/WatchedMediaCard";
import { useDebounce } from "@/hooks/useDebounce";
-import { Button } from "@/pages/About";
import { SearchLoadingPart } from "@/pages/parts/search/SearchLoadingPart";
import { MediaItem } from "@/utils/mediaTypes";
diff --git a/src/pages/parts/settings/AppearancePart.tsx b/src/pages/parts/settings/AppearancePart.tsx
index 465db38bd..4c4ba2435 100644
--- a/src/pages/parts/settings/AppearancePart.tsx
+++ b/src/pages/parts/settings/AppearancePart.tsx
@@ -9,6 +9,7 @@ import { Icon, Icons } from "@/components/Icon";
import { CustomThemeModal } from "@/components/overlays/CustomThemeModal";
import { EditGroupOrderModal } from "@/components/overlays/EditGroupOrderModal";
import { useModal } from "@/components/overlays/Modal";
+import { CaptionSetting } from "@/components/player/atoms/settings/CaptionSettingsView";
import { Heading1 } from "@/components/utils/Text";
import { useBackendUrl } from "@/hooks/auth/useBackendUrl";
import { useAuthStore } from "@/stores/auth";
@@ -277,6 +278,15 @@ export function AppearancePart(props: {
enablePauseOverlay: boolean;
setEnablePauseOverlay: (v: boolean) => void;
+ enablePauseOverlayHoverHide: boolean;
+ setEnablePauseOverlayHoverHide: (v: boolean) => void;
+
+ pauseOverlayInactivityTime: number;
+ setPauseOverlayInactivityTime: (v: number) => void;
+
+ timeFormat12Hour: boolean;
+ setTimeFormat12Hour: (v: boolean) => void;
+
enableCarouselView: boolean;
setEnableCarouselView: (v: boolean) => void;
@@ -538,7 +548,7 @@ export function AppearancePart(props: {
{/* Pause Overlay */}
- {t("settings.appearance.options.pauseOverlay")}
+ {t("settings.appearance.options.pauseOverlay", "Pause Overlay")}
@@ -554,7 +564,92 @@ export function AppearancePart(props: {
>
- {t("settings.appearance.options.pauseOverlayLabel")}
+ {t(
+ "settings.appearance.options.pauseOverlayLabel",
+ "Enable Pause Overlay",
+ )}
+
+
+
+ {props.enablePauseOverlay && !props.enableLowPerformanceMode && (
+
+
+
+ {t(
+ "settings.appearance.options.pauseOverlayHoverHide",
+ "Hide on Hover",
+ )}
+
+
+ {t(
+ "settings.appearance.options.pauseOverlayHoverHideDescription",
+ "Automatically hide the overlay when you move your mouse",
+ )}
+
+
+ props.setEnablePauseOverlayHoverHide(
+ !props.enablePauseOverlayHoverHide,
+ )
+ }
+ className="bg-dropdown-background hover:bg-dropdown-hoverBackground select-none my-4 cursor-pointer space-x-3 flex items-center py-3 px-4 rounded-lg"
+ >
+
+ {t(
+ "settings.appearance.options.pauseOverlayHoverHideLabel",
+ "Enable hover to hide",
+ )}
+
+
+
+
+
+ {
+ // Adjust to nearest 5 second interval
+ const interval = Math.round(v / 5) * 5;
+ props.setPauseOverlayInactivityTime(interval);
+ }}
+ value={props.pauseOverlayInactivityTime}
+ textTransformer={(s) => `${s}s`}
+ controlButtons
+ />
+
+ {t(
+ "settings.appearance.options.pauseOverlayInactivityTimeDescription",
+ "Set to 0 to show immediately",
+ )}
+
+
+
+ )}
+
+
+ {/* Time Format */}
+
+
+ {t("settings.appearance.options.timeFormat", "Time Format")}
+
+ props.setTimeFormat12Hour(!props.timeFormat12Hour)}
+ className={classNames(
+ "bg-dropdown-background hover:bg-dropdown-hoverBackground select-none my-4 cursor-pointer space-x-3 flex items-center max-w-[25rem] py-3 px-4 rounded-lg",
+ "cursor-pointer opacity-100 pointer-events-auto",
+ )}
+ >
+
+ {t(
+ "settings.appearance.options.timeFormatLabel",
+ "Use 12-hour clock (AM/PM)",
+ )}
diff --git a/src/pages/parts/settings/ConnectionsPart.tsx b/src/pages/parts/settings/ConnectionsPart.tsx
index 7b8130cc6..46126cf2a 100644
--- a/src/pages/parts/settings/ConnectionsPart.tsx
+++ b/src/pages/parts/settings/ConnectionsPart.tsx
@@ -37,8 +37,6 @@ import { useAuthStore } from "@/stores/auth";
import { usePreferencesStore } from "@/stores/preferences";
import { useTraktStore } from "@/stores/trakt/store";
-import { RegionSelectorPart } from "./RegionSelectorPart";
-
interface ProxyEditProps {
proxyUrls: string[] | null;
setProxyUrls: Dispatch>;
diff --git a/src/pages/parts/settings/PreferencesPart.tsx b/src/pages/parts/settings/PreferencesPart.tsx
index 34a5224da..ebada22d2 100644
--- a/src/pages/parts/settings/PreferencesPart.tsx
+++ b/src/pages/parts/settings/PreferencesPart.tsx
@@ -54,6 +54,14 @@ export function PreferencesPart(props: {
const setEnableGamepadControls = usePreferencesStore(
(s) => s.setEnableGamepadControls,
);
+ const gamepadSetupComplete = usePreferencesStore(
+ (s) => s.gamepadSetupComplete,
+ );
+ const gamepadInputMode = usePreferencesStore((s) => s.gamepadInputMode);
+ const setGamepadInputMode = usePreferencesStore((s) => s.setGamepadInputMode);
+ const ignoreHeader = usePreferencesStore((s) => s.ignoreHeader);
+ const setIgnoreHeader = usePreferencesStore((s) => s.setIgnoreHeader);
+
const sorted = sortLangCodes(
appLanguageOptions.map((item) => item.code),
props.language,
@@ -285,39 +293,119 @@ export function PreferencesPart(props: {
{t("settings.preferences.keyboardShortcutsDescription")}
-
-
-
-
-
- {/* Gamepad Enable Toggle */}
- setEnableGamepadControls(!enableGamepadControls)}
- className="bg-dropdown-background hover:bg-dropdown-hoverBackground select-none cursor-pointer space-x-3 flex items-center max-w-[25rem] py-3 px-4 rounded-lg"
+
+
+ {/* Gamepad Setup & Controls */}
+
+
+ {t("settings.preferences.gamepadTitle", "Controller Support")}
+
+
{t(
- "settings.preferences.enableGamepadControls",
- "Enable controller support",
+ "settings.preferences.gamepadDescription",
+ "Navigate P-Stream using your Xbox or PlayStation controller.",
)}
+
+
+ {!enableGamepadControls || !gamepadSetupComplete ? (
+
+ ) : (
+ <>
+
+ setEnableGamepadControls(!enableGamepadControls)
+ }
+ className="bg-dropdown-background hover:bg-dropdown-hoverBackground select-none cursor-pointer space-x-3 flex items-center py-3 px-4 rounded-lg border border-white/5"
+ >
+
+ {t(
+ "settings.preferences.enableGamepadControls",
+ "Enabled",
+ )}
+
+
+
+
+
+
+
+
+
+
+ Input Mode
+
+ i.id === gamepadInputMode) || {
+ id: "both",
+ name: "Both (Recommended)",
+ }
+ }
+ setSelectedItem={(opt) =>
+ setGamepadInputMode(
+ opt.id as "controller" | "kbm" | "both",
+ )
+ }
+ />
+
+
+ setIgnoreHeader(!ignoreHeader)}
+ className="bg-dropdown-background hover:bg-dropdown-hoverBackground select-none cursor-pointer space-x-3 flex items-center py-3 px-4 rounded-lg border border-white/5"
+ >
+
+ {t("settings.preferences.gamepadIgnoreHeaderTitle")}
+
+
+ {t(
+ "settings.preferences.gamepadIgnoreHeaderDescription",
+ )}
+
+
+
+
+ )}
+
diff --git a/src/setup/App.tsx b/src/setup/App.tsx
index aa3cd373b..671d0e95d 100644
--- a/src/setup/App.tsx
+++ b/src/setup/App.tsx
@@ -11,10 +11,12 @@ import {
import { convertLegacyUrl, isLegacyUrl } from "@/backend/metadata/getmeta";
import { generateQuickSearchMediaUrl } from "@/backend/metadata/tmdb";
+import { GamepadGlobalListener } from "@/components/gamepad/GamepadGlobalListener";
import { DetailsModal } from "@/components/overlays/detailsModal";
import { GamepadControlsModal } from "@/components/overlays/GamepadControlsModal";
import { KeyboardCommandsEditModal } from "@/components/overlays/KeyboardCommandsEditModal";
import { KeyboardCommandsModal } from "@/components/overlays/KeyboardCommandsModal";
+import { MediaControllerMenuModal } from "@/components/overlays/MediaControllerMenu";
import { NotificationModal } from "@/components/overlays/notificationsModal";
import { SupportInfoModal } from "@/components/overlays/SupportInfoModal";
import { TraktAuthHandler } from "@/components/TraktAuthHandler";
@@ -51,11 +53,17 @@ import { LanguageProvider } from "@/stores/language";
const DeveloperPage = lazy(() => import("@/pages/DeveloperPage"));
const TestView = lazy(() => import("@/pages/developer/TestView"));
+const GamepadSetupPage = lazyWithPreload(() =>
+ import("@/pages/GamepadSetup").then((m: { GamepadSetupPage: any }) => ({
+ default: m.GamepadSetupPage,
+ })),
+);
const PlayerView = lazyWithPreload(() => import("@/pages/PlayerView"));
const SettingsPage = lazyWithPreload(() => import("@/pages/Settings"));
PlayerView.preload();
SettingsPage.preload();
+GamepadSetupPage.preload();
function LegacyUrlView({ children }: { children: ReactElement }) {
const location = useLocation();
@@ -129,6 +137,7 @@ function App() {
return (
+
{/* functional routes */}
@@ -168,6 +178,7 @@ function App() {
/>
= (set) => ({
playbackRate: 1,
},
play() {
- set((state) => {
+ set((state: any) => {
state.mediaPlaying.isPlaying = true;
state.mediaPlaying.isPaused = false;
});
},
pause() {
- set((state) => {
+ set((state: any) => {
state.mediaPlaying.isPlaying = false;
- state.mediaPlaying.isPaused = false;
+ state.mediaPlaying.isPaused = true;
});
},
});
diff --git a/src/stores/player/slices/source.ts b/src/stores/player/slices/source.ts
index 3738796cc..cd852c354 100644
--- a/src/stores/player/slices/source.ts
+++ b/src/stores/player/slices/source.ts
@@ -431,9 +431,8 @@ export const createSourceSlice: MakeSlice = (set, get) => ({
});
try {
- const { scrapeExternalSubtitles } = await import(
- "@/utils/externalSubtitles"
- );
+ const { scrapeExternalSubtitles } =
+ await import("@/utils/externalSubtitles");
const externalCaptions = await scrapeExternalSubtitles(store.meta);
if (externalCaptions.length > 0) {
diff --git a/src/stores/preferences/index.tsx b/src/stores/preferences/index.tsx
index 1c744df18..e11387d1f 100644
--- a/src/stores/preferences/index.tsx
+++ b/src/stores/preferences/index.tsx
@@ -40,9 +40,16 @@ export interface PreferencesStore {
enableAutoResumeOnPlaybackError: boolean;
enableNumberKeySeeking: boolean;
enablePauseOverlay: boolean;
+ pauseOverlayInactivityTime: number;
+ enablePauseOverlayHoverHide: boolean;
+ timeFormat12Hour: boolean | null;
enableGamepadControls: boolean;
+ gamepadSetupComplete: boolean;
+ gamepadInputMode: "controller" | "kbm" | "both";
gamepadMapping: Record;
keyboardShortcuts: KeyboardShortcuts;
+ ignoreHeader: boolean;
+ isGamepadActive: boolean;
setEnableThumbnails(v: boolean): void;
setEnableAutoplay(v: boolean): void;
@@ -76,9 +83,16 @@ export interface PreferencesStore {
setEnableAutoResumeOnPlaybackError(v: boolean): void;
setEnableNumberKeySeeking(v: boolean): void;
setEnablePauseOverlay(v: boolean): void;
+ setPauseOverlayInactivityTime(v: number): void;
+ setEnablePauseOverlayHoverHide(v: boolean): void;
+ setTimeFormat12Hour(v: boolean | null): void;
setEnableGamepadControls(v: boolean): void;
+ setGamepadSetupComplete(v: boolean): void;
+ setGamepadInputMode(v: "controller" | "kbm" | "both"): void;
setGamepadMapping(v: Record): void;
setKeyboardShortcuts(v: KeyboardShortcuts): void;
+ setIgnoreHeader(v: boolean): void;
+ setGamepadActive(v: boolean): void;
}
export const usePreferencesStore = create(
@@ -116,9 +130,16 @@ export const usePreferencesStore = create(
enableAutoResumeOnPlaybackError: true,
enableNumberKeySeeking: true,
enablePauseOverlay: false,
+ pauseOverlayInactivityTime: 2,
+ enablePauseOverlayHoverHide: false,
+ timeFormat12Hour: null,
enableGamepadControls: false,
+ gamepadSetupComplete: false,
+ gamepadInputMode: "both",
gamepadMapping: {},
keyboardShortcuts: DEFAULT_KEYBOARD_SHORTCUTS,
+ ignoreHeader: false,
+ isGamepadActive: false,
setEnableThumbnails(v) {
set((s) => {
s.enableThumbnails = v;
@@ -284,11 +305,36 @@ export const usePreferencesStore = create(
s.enablePauseOverlay = v;
});
},
+ setPauseOverlayInactivityTime(v) {
+ set((s) => {
+ s.pauseOverlayInactivityTime = v;
+ });
+ },
+ setEnablePauseOverlayHoverHide(v) {
+ set((s) => {
+ s.enablePauseOverlayHoverHide = v;
+ });
+ },
+ setTimeFormat12Hour(v) {
+ set((s) => {
+ s.timeFormat12Hour = v;
+ });
+ },
setEnableGamepadControls(v) {
set((s) => {
s.enableGamepadControls = v;
});
},
+ setGamepadSetupComplete(v) {
+ set((s) => {
+ s.gamepadSetupComplete = v;
+ });
+ },
+ setGamepadInputMode(v) {
+ set((s) => {
+ s.gamepadInputMode = v;
+ });
+ },
setGamepadMapping(v) {
set((s) => {
s.gamepadMapping = v;
@@ -299,6 +345,16 @@ export const usePreferencesStore = create(
s.keyboardShortcuts = v;
});
},
+ setIgnoreHeader(v) {
+ set((s) => {
+ s.ignoreHeader = v;
+ });
+ },
+ setGamepadActive(v) {
+ set((s) => {
+ s.isGamepadActive = v;
+ });
+ },
})),
{
name: "__MW::preferences",
diff --git a/src/stores/theme/index.tsx b/src/stores/theme/index.tsx
index ba150abc0..8b65f63df 100644
--- a/src/stores/theme/index.tsx
+++ b/src/stores/theme/index.tsx
@@ -4,6 +4,7 @@ import { create } from "zustand";
import { persist } from "zustand/middleware";
import { immer } from "zustand/middleware/immer";
+import { colorToRgbString } from "@/utils/color";
import {
parts,
primaryOptions,
@@ -151,15 +152,47 @@ export function ThemeProvider(props: {
const themeToDisplay = previewTheme ?? theme;
const themeSelector = themeToDisplay ? `theme-${themeToDisplay}` : undefined;
+ const parseCustomColor = (
+ colorStr: string,
+ keys: string[],
+ ): Record => {
+ if (!colorStr.startsWith("custom:")) return {};
+ const values = colorStr.replace("custom:", "").split(",");
+ const vars: Record = {};
+ keys.forEach((key, i) => {
+ const val = values[i] || values[0];
+ if (val) {
+ vars[key] = colorToRgbString(val);
+ }
+ });
+ return vars;
+ };
+
let styleContent = "";
if (themeToDisplay === "custom" && customTheme) {
- const primary =
- primaryOptions.find((o) => o.id === customTheme.primary)?.colors || {};
- const secondary =
- secondaryOptions.find((o) => o.id === customTheme.secondary)?.colors ||
- {};
- const tertiary =
- tertiaryOptions.find((o) => o.id === customTheme.tertiary)?.colors || {};
+ const primary = customTheme.primary.startsWith("custom:")
+ ? parseCustomColor(customTheme.primary, [
+ "--colors-buttons-primary",
+ "--colors-type-logo",
+ "--colors-themePreview-primary",
+ ])
+ : primaryOptions.find((o) => o.id === customTheme.primary)?.colors || {};
+
+ const secondary = customTheme.secondary.startsWith("custom:")
+ ? parseCustomColor(customTheme.secondary, [
+ "--colors-type-text",
+ "--colors-buttons-secondary",
+ ])
+ : secondaryOptions.find((o) => o.id === customTheme.secondary)?.colors ||
+ {};
+
+ const tertiary = customTheme.tertiary.startsWith("custom:")
+ ? parseCustomColor(customTheme.tertiary, [
+ "--colors-background-main",
+ "--colors-themePreview-secondary",
+ ])
+ : tertiaryOptions.find((o) => o.id === customTheme.tertiary)?.colors ||
+ {};
const vars = { ...primary, ...secondary, ...tertiary };
const cssVars = Object.entries(vars)
@@ -171,12 +204,28 @@ export function ThemeProvider(props: {
// Inject CSS rules for all saved custom themes so their previews render correctly
savedCustomThemes.forEach((savedTheme) => {
- const primary =
- primaryOptions.find((o) => o.id === savedTheme.primary)?.colors || {};
- const secondary =
- secondaryOptions.find((o) => o.id === savedTheme.secondary)?.colors || {};
- const tertiary =
- tertiaryOptions.find((o) => o.id === savedTheme.tertiary)?.colors || {};
+ const primary = savedTheme.primary.startsWith("custom:")
+ ? parseCustomColor(savedTheme.primary, [
+ "--colors-buttons-primary",
+ "--colors-type-logo",
+ "--colors-themePreview-primary",
+ ])
+ : primaryOptions.find((o) => o.id === savedTheme.primary)?.colors || {};
+
+ const secondary = savedTheme.secondary.startsWith("custom:")
+ ? parseCustomColor(savedTheme.secondary, [
+ "--colors-type-text",
+ "--colors-buttons-secondary",
+ ])
+ : secondaryOptions.find((o) => o.id === savedTheme.secondary)?.colors ||
+ {};
+
+ const tertiary = savedTheme.tertiary.startsWith("custom:")
+ ? parseCustomColor(savedTheme.tertiary, [
+ "--colors-background-main",
+ "--colors-themePreview-secondary",
+ ])
+ : tertiaryOptions.find((o) => o.id === savedTheme.tertiary)?.colors || {};
const vars: Record = {
...primary,
diff --git a/src/utils/autoplay.ts b/src/utils/autoplay.ts
index aee01ffbc..99f18cab1 100644
--- a/src/utils/autoplay.ts
+++ b/src/utils/autoplay.ts
@@ -5,7 +5,7 @@ import { useAuthStore } from "@/stores/auth";
export function isAutoplayAllowed() {
return Boolean(
conf().ALLOW_AUTOPLAY ||
- isExtensionActiveCached() ||
- useAuthStore.getState().proxySet,
+ isExtensionActiveCached() ||
+ useAuthStore.getState().proxySet,
);
}
diff --git a/src/utils/color.ts b/src/utils/color.ts
index fedb6e05a..0a9b76ff2 100644
--- a/src/utils/color.ts
+++ b/src/utils/color.ts
@@ -65,3 +65,14 @@ export function colorToRgbString(color: string): string {
// But returning original string allows basic non-opacity usage to potentially work or fail gracefully.
return color;
}
+
+export function rgbStringToHex(rgbStr: string): string {
+ const parts = rgbStr.trim().split(/\s+/);
+ if (parts.length >= 3) {
+ const r = parseInt(parts[0], 10).toString(16).padStart(2, "0");
+ const g = parseInt(parts[1], 10).toString(16).padStart(2, "0");
+ const b = parseInt(parts[2], 10).toString(16).padStart(2, "0");
+ return `#${r}${g}${b}`;
+ }
+ return "#000000"; // fallback
+}
diff --git a/src/utils/mediaTypes.ts b/src/utils/mediaTypes.ts
index 5826c54f0..c15128205 100644
--- a/src/utils/mediaTypes.ts
+++ b/src/utils/mediaTypes.ts
@@ -5,6 +5,7 @@ export interface MediaItem {
release_date?: Date;
poster?: string;
type: "show" | "movie";
+ rating?: number;
onHoverInfoEnter?: () => void;
onHoverInfoLeave?: () => void;
}
diff --git a/themes/custom.ts b/themes/custom.ts
index 693608da9..2dad7c373 100644
--- a/themes/custom.ts
+++ b/themes/custom.ts
@@ -70,6 +70,7 @@ export const parts = {
"type.linkHover",
"largeCard.icon",
"mediaCard.barFillColor",
+ "themePreview.primary",
],
secondary: [
"type.text",
@@ -173,7 +174,6 @@ export const parts = {
"onboarding.card",
"onboarding.cardHover",
"errors.card",
- "themePreview.primary",
"themePreview.secondary",
"themePreview.ghost",
"video.scraping.card",
+
+ )}
+
+ {/* Left Section - Identity & Detailed Preview */}
+
+ {previewMode === "detailed" ? (
+
+
+
+
+ Create
+
+
-
+ Create
+
+ Your Own
+
+ Theme
+
+
+
+
+
+
+
+
setName(e.target.value)}
autoFocus
/>
- {/* Live Preview */}
-
-
- {t("settings.appearance.customTheme.livePreview")} -
-
+
-
+
+
+
+ + Live Concept Preview +
+
+
+
+ {previewMode === "detailed" ? (
+
+
+ {/* Footer Actions */}
+
- {/* Right Section - Color Pickers */}
-
- {/* Primary */}
-
+ {/* Right Section - Advanced Color Configuration */}
+
+ {/* Section: Primary */}
+
-
{useCustomPrimary ? (
- - {t("settings.appearance.customTheme.primaryColor")} -
+
+
+ Primary Theme +
++ Branding & Interaction +
+
+
) : (
{primaryOptions.map((opt) => (
@@ -346,32 +655,66 @@ export function CustomThemeModal(props: {
)}
- {/* Secondary */}
-
+
+
+ {/* Section: Secondary */}
+
-
{useCustomSecondary ? (
- - {t("settings.appearance.customTheme.secondaryColor")} -
+
+
+ Secondary Details +
++ Typography & Elements +
+
+
) : (
{secondaryOptions.map((opt) => (
@@ -388,32 +731,88 @@ export function CustomThemeModal(props: {
)}
- {/* Tertiary */}
-
+
+
+ {/* Section: Tertiary */}
+
+
+
+
+ );
+}
diff --git a/src/components/overlays/Modal.tsx b/src/components/overlays/Modal.tsx
index 37fbab732..abd7aef43 100644
--- a/src/components/overlays/Modal.tsx
+++ b/src/components/overlays/Modal.tsx
@@ -55,7 +55,10 @@ export function Modal(props: { id: string; children?: ReactNode }) {
-
-
{useCustomTertiary ? (
- - {t("settings.appearance.customTheme.tertiaryColor")} -
+
+
+ Tertiary Base +
++ Surfaces & Accents +
+
+ {!unlockMainBg ? (
+
) : (
+
+ ) : (
+
+ Main Background Locked
+
+
+ Prevents entire website color change
+
+
{tertiaryOptions.map((opt) => (
@@ -422,8 +821,8 @@ export function CustomThemeModal(props: {
opt={opt}
selected={tertiary === opt.id}
onClick={() => setTertiary(opt.id)}
- colorKey1="--colors-background-main"
- colorKey2="--colors-modal-background"
+ colorKey1="--colors-themePreview-primary"
+ colorKey2="--colors-themePreview-secondary"
/>
))}
diff --git a/src/components/overlays/MediaControllerMenu.tsx b/src/components/overlays/MediaControllerMenu.tsx
new file mode 100644
index 000000000..3ab4b59e6
--- /dev/null
+++ b/src/components/overlays/MediaControllerMenu.tsx
@@ -0,0 +1,146 @@
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+
+import { mediaItemToId } from "@/backend/metadata/tmdb";
+import { Button } from "@/components/buttons/Button";
+import { Icon, Icons } from "@/components/Icon";
+import { Modal, ModalCard, useModal } from "@/components/overlays/Modal";
+import { Heading2 } from "@/components/utils/Text";
+import { useBookmarkStore } from "@/stores/bookmarks";
+import { useOverlayStack } from "@/stores/interface/overlayStack";
+import { MediaItem } from "@/utils/mediaTypes";
+
+export function MediaControllerMenuModal() {
+ const { t } = useTranslation();
+ const navigate = useNavigate();
+ const modal = useModal("media-controller-menu");
+ const { modalData, hideModal } = useOverlayStack();
+ const data = modalData["media-controller-menu"];
+ const media = data?.media as MediaItem | undefined;
+
+ const { bookmarks, removeBookmark, addBookmarkWithGroups } =
+ useBookmarkStore();
+ const isBookmarked = media ? !!bookmarks[media.id] : false;
+
+ if (!media) return null;
+
+ const handlePlay = () => {
+ let link = `/media/${encodeURIComponent(mediaItemToId(media))}`;
+ // Handle series episode linking if data available (simple version for now)
+ const series = data?.series;
+ if (series) {
+ if (series.season === 0 && !series.episodeId) {
+ link += `/${encodeURIComponent(series.seasonId)}`;
+ } else {
+ link += `/${encodeURIComponent(series.seasonId)}/${encodeURIComponent(
+ series.episodeId,
+ )}`;
+ }
+ }
+
+ hideModal(modal.id);
+ navigate(link);
+ };
+
+ const handleShowDetails = () => {
+ hideModal(modal.id);
+ // Open the actual details modal
+ useOverlayStack.getState().showModal("details", {
+ id: Number(media.id),
+ type: media.type === "movie" ? "movie" : "show",
+ });
+ };
+
+ const handleToggleBookmark = () => {
+ if (isBookmarked) {
+ removeBookmark(media.id);
+ } else {
+ addBookmarkWithGroups(
+ {
+ type: media.type,
+ title: media.title,
+ tmdbId: media.id,
+ releaseYear: media.year || 0,
+ poster: media.poster,
+ },
+ [],
+ );
+ }
+ };
+
+ return (
+
+
+
+ {media.title}
+
+
+
+ {media.year}
+ •
+
+ {t(`media.types.${media.type}`)}
+
+ {media.rating && (
+ <>
+ •
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
{props.children}
@@ -92,7 +95,10 @@ export function FancyModal(props: {
+
s.mediaPlaying.isPaused);
- const status = usePlayerStore((s) => s.status);
- const meta = usePlayerStore((s) => s.meta);
- const { duration } = usePlayerStore((s) => s.progress);
- const enablePauseOverlay = usePreferencesStore((s) => s.enablePauseOverlay);
- const enableImageLogos = usePreferencesStore((s) => s.enableImageLogos);
+ const isPaused = usePlayerStore((s: any) => s.mediaPlaying.isPaused);
+ const isLoading = usePlayerStore((s: any) => s.mediaPlaying.isLoading);
+ const status = usePlayerStore((s: any) => s.status);
+ const meta = usePlayerStore((s: any) => s.meta);
+ const { time, duration, draggingTime } = usePlayerStore(
+ (s: any) => s.progress,
+ );
+ const { isSeeking } = usePlayerStore((s: any) => s.interface);
+ const playbackRate = usePlayerStore((s: any) => s.mediaPlaying.playbackRate);
+ const play = usePlayerStore((s: any) => s.play);
+ const enablePauseOverlay = usePreferencesStore(
+ (s: any) => s.enablePauseOverlay,
+ );
+ const pauseOverlayInactivityTime = usePreferencesStore(
+ (s: any) => s.pauseOverlayInactivityTime,
+ );
+ const enablePauseOverlayHoverHide = usePreferencesStore(
+ (s: any) => s.enablePauseOverlayHoverHide,
+ );
+ const timeFormat12Hour = usePreferencesStore((s: any) => s.timeFormat12Hour);
+ const enableImageLogos = usePreferencesStore((s: any) => s.enableImageLogos);
const { isMobile } = useIsMobile();
const { showTargets } = useShouldShowControls();
const { t } = useTranslation();
+ const { showModal } = useOverlayStack();
+
const [logoUrl, setLogoUrl] = useState(null);
const [details, setDetails] = useState({
voteAverage: null,
@@ -36,13 +56,10 @@ export function PauseOverlay() {
runtime: null,
});
- // Track whether playback has actually started at least once
- // so the overlay never appears during source scraping / initial load
const hasPlayedRef = useRef(false);
const [overlayVisible, setOverlayVisible] = useState(false);
const timerRef = useRef | null>(null);
- // Mark that real playback has started only when the player is actively playing
useEffect(() => {
if (!isPaused && status === playerStatus.PLAYING) {
hasPlayedRef.current = true;
@@ -50,13 +67,59 @@ export function PauseOverlay() {
}, [isPaused, status]);
useEffect(() => {
+ const handleMouseMove = () => {
+ if (enablePauseOverlayHoverHide && overlayVisible && isPaused) {
+ setOverlayVisible(false);
+
+ // Reset the timer if they stop moving the mouse
+ if (timerRef.current) clearTimeout(timerRef.current);
+ if (pauseOverlayInactivityTime > 0) {
+ timerRef.current = setTimeout(() => {
+ // Only show if still paused
+ if (usePlayerStore.getState().mediaPlaying.isPaused) {
+ setOverlayVisible(true);
+ }
+ }, pauseOverlayInactivityTime * 1000);
+ }
+ }
+ };
+
+ if (enablePauseOverlayHoverHide && overlayVisible) {
+ window.addEventListener("mousemove", handleMouseMove);
+ }
+
+ return () => {
+ window.removeEventListener("mousemove", handleMouseMove);
+ };
+ }, [
+ enablePauseOverlayHoverHide,
+ overlayVisible,
+ isPaused,
+ pauseOverlayInactivityTime,
+ ]);
+
+ useEffect(() => {
+ if (status === playerStatus.SCRAPING) {
+ setOverlayVisible(false);
+ if (timerRef.current) clearTimeout(timerRef.current);
+ return;
+ }
+
+ if (isLoading && hasPlayedRef.current) {
+ setOverlayVisible(true);
+ if (timerRef.current) clearTimeout(timerRef.current);
+ return;
+ }
+
if (isPaused && hasPlayedRef.current && status === playerStatus.PLAYING) {
- // Show after 2 seconds of being paused
- timerRef.current = setTimeout(() => {
+ if (pauseOverlayInactivityTime === 0) {
setOverlayVisible(true);
- }, 2000);
+ } else {
+ timerRef.current = setTimeout(() => {
+ setOverlayVisible(true);
+ }, pauseOverlayInactivityTime * 1000);
+ }
} else {
- // Hide immediately when unpaused or not yet played
if (timerRef.current) {
clearTimeout(timerRef.current);
timerRef.current = null;
@@ -65,15 +128,12 @@ export function PauseOverlay() {
}
return () => {
- if (timerRef.current) {
- clearTimeout(timerRef.current);
- timerRef.current = null;
- }
+ if (timerRef.current) clearTimeout(timerRef.current);
};
- }, [isPaused, status]);
+ }, [isPaused, status, isLoading, pauseOverlayInactivityTime]);
let shouldShow = overlayVisible && enablePauseOverlay;
- if (isMobile && status === playerStatus.SCRAPING) shouldShow = false;
+ if (status === playerStatus.SCRAPING) shouldShow = false;
if (isMobile && showTargets) shouldShow = false;
useEffect(() => {
@@ -110,10 +170,10 @@ export function PauseOverlay() {
try {
const type =
meta.type === "movie" ? TMDBContentTypes.MOVIE : TMDBContentTypes.TV;
-
const isShowWithEpisode =
meta.type === "show" && meta.season && meta.episode;
let voteAverage: number | null = null;
+ let runtime: number | null = null;
if (isShowWithEpisode) {
const episodeData = await getEpisodeDetails(
@@ -121,8 +181,9 @@ export function PauseOverlay() {
meta.season?.number ?? 0,
meta.episode?.number ?? 0,
);
- if (mounted && episodeData?.vote_average != null) {
- voteAverage = episodeData.vote_average;
+ if (mounted && episodeData) {
+ voteAverage = episodeData.vote_average ?? null;
+ runtime = (episodeData as any).runtime ?? null;
}
}
@@ -137,16 +198,8 @@ export function PauseOverlay() {
? data.vote_average
: null;
- let runtime: number | null = null;
- if (isShowWithEpisode) {
- const epData = await getEpisodeDetails(
- meta.tmdbId,
- meta.season?.number ?? 0,
- meta.episode?.number ?? 0,
- );
- runtime = (epData as any)?.runtime ?? null;
- } else {
- runtime = (data as any)?.runtime ?? null;
+ if (!isShowWithEpisode) {
+ runtime = (data as any).runtime ?? null;
}
setDetails({ voteAverage: finalVoteAverage, genres, runtime });
@@ -168,27 +221,62 @@ export function PauseOverlay() {
const overview =
meta.type === "show" ? meta.episode?.overview : meta.overview;
- const formatRuntime = (minutes: number) => {
- const h = Math.floor(minutes / 60);
- const m = minutes % 60;
- return h > 0 ? `${h}h ${m}m` : `${m}m`;
+ const currentTime = Math.min(
+ Math.max(isSeeking ? draggingTime : time, 0),
+ duration,
+ );
+ const secondsRemaining = Math.abs(currentTime - duration);
+ const secondsRemainingAdjusted =
+ playbackRate > 0 ? secondsRemaining / playbackRate : secondsRemaining;
+
+ const hasHours = durationExceedsHour(duration);
+ const timeLeft = formatSeconds(
+ secondsRemaining,
+ durationExceedsHour(secondsRemaining),
+ );
+ const timeWatched = formatSeconds(currentTime, hasHours);
+ const timeFinished = new Date(Date.now() + secondsRemainingAdjusted * 1e3);
+ const durationFormatted = formatSeconds(duration, hasHours);
+
+ const handleOpenDetails = () => {
+ showModal("details", {
+ id: Number(meta.tmdbId),
+ type: meta.type === "movie" ? "movie" : "show",
+ });
};
+ const timeRemainingParts = t("player.time.remaining", {
+ timeFinished,
+ timeWatched,
+ timeLeft,
+ duration: durationFormatted,
+ formatParams: {
+ timeFinished: {
+ hour: "numeric",
+ minute: "numeric",
+ hour12: timeFormat12Hour,
+ },
+ },
+ }).split(/[•·]| \| /);
+
return (
{
+ play();
+ setOverlayVisible(false);
+ }}
>
- {/* Main content - left-center aligned, vertically anchored near bottom */}
-
-
- {/* "You are watching" label */}
-
+
+
+
)}
- {/* Season / Episode info */}
{meta.type === "show" && meta.season && meta.episode && (
- {/* "Paused" indicator - bottom right, raised up to avoid controls overlap */}
- {t("player.pauseOverlay.youAreWatching", "You are watching")}
- {/* Title / Logo */} {logoUrl ? (- Season {meta.season.number} · Episode {meta.episode.number} + Season {meta.season.number} | Episode {meta.episode.number}
)} - {/* Episode title */} {meta.type === "show" && meta.episode?.title && ({meta.episode.title}
)} - {/* Description */} - {overview && ( -- {overview} -
- )} - - {/* Rating + Runtime */} -
- {details.voteAverage !== null && details.voteAverage > 0 && (
- <>
- ⭐
- {details.voteAverage.toFixed(0)}
-
- )}
- {details.runtime && details.runtime > 0 && (
- <>
- {details.voteAverage !== null && details.voteAverage > 0 && (
- ·
- )}
- {formatRuntime(details.runtime)}
-
+
+ {details.voteAverage !== null && (
+
+ Rating ⭐: {details.voteAverage.toFixed(1)}
+ /10
+
)}
- {duration > 0 && !details.runtime && (
+
+ {details.genres.length > 0 && (
<>
- {details.voteAverage !== null && details.voteAverage > 0 && (
- ·
- )}
- {formatRuntime(Math.round(duration / 60))}
+ |
+ {details.genres.slice(0, 3).join(", ")}
)}
+
+ {duration > 0 &&
+ timeRemainingParts.map((part: string) => (
+
+ {(part.trim() !== timeRemainingParts[0].trim() ||
+ details.genres.length > 0 ||
+ details.voteAverage !== null) && (
+ |
+ )}
+ {part.trim()}
+
+ ))}
+
+ {overview && (
+ {
+ e.stopPropagation();
+ handleOpenDetails();
+ }}
+ >
+
+ )}
+ {overview}
+
+
-
+ = {
"toggle-captions": "Toggle Captions",
"next-episode": "Next Episode",
"previous-episode": "Previous Episode",
+ "go-home": "Go to Home Page",
};
export const GAMEPAD_BUTTON_LABELS: Record<
diff --git a/src/hooks/useSettingsState.ts b/src/hooks/useSettingsState.ts
index 801ce456d..7c0e91678 100644
--- a/src/hooks/useSettingsState.ts
+++ b/src/hooks/useSettingsState.ts
@@ -82,6 +82,9 @@ export function useSettingsState(
enableDoubleClickToSeek: boolean,
enableAutoResumeOnPlaybackError: boolean,
enablePauseOverlay: boolean,
+ pauseOverlayInactivityTime: number,
+ enablePauseOverlayHoverHide: boolean,
+ timeFormat12Hour: boolean | null,
customTheme: {
primary: string;
secondary: string;
@@ -289,6 +292,24 @@ export function useSettingsState(
resetEnablePauseOverlay,
enablePauseOverlayChanged,
] = useDerived(enablePauseOverlay);
+ const [
+ pauseOverlayInactivityTimeState,
+ setPauseOverlayInactivityTimeState,
+ resetPauseOverlayInactivityTime,
+ pauseOverlayInactivityTimeChanged,
+ ] = useDerived(pauseOverlayInactivityTime);
+ const [
+ enablePauseOverlayHoverHideState,
+ setEnablePauseOverlayHoverHideState,
+ resetEnablePauseOverlayHoverHide,
+ enablePauseOverlayHoverHideChanged,
+ ] = useDerived(enablePauseOverlayHoverHide);
+ const [
+ timeFormat12HourState,
+ setTimeFormat12HourState,
+ resetTimeFormat12Hour,
+ timeFormat12HourChanged,
+ ] = useDerived(timeFormat12Hour);
const [
customThemeState,
setCustomThemeState,
@@ -350,6 +371,9 @@ export function useSettingsState(
resetEnableDoubleClickToSeek();
resetEnableAutoResumeOnPlaybackError();
resetEnablePauseOverlay();
+ resetPauseOverlayInactivityTime();
+ resetEnablePauseOverlayHoverHide();
+ resetTimeFormat12Hour();
resetCustomTheme();
resetSavedCustomThemes();
resetHiddenDefaultThemes();
@@ -394,6 +418,9 @@ export function useSettingsState(
enableDoubleClickToSeekChanged ||
enableAutoResumeOnPlaybackErrorChanged ||
enablePauseOverlayChanged ||
+ pauseOverlayInactivityTimeChanged ||
+ enablePauseOverlayHoverHideChanged ||
+ timeFormat12HourChanged ||
customThemeChanged ||
savedCustomThemesChanged ||
hiddenDefaultThemesChanged;
@@ -591,6 +618,21 @@ export function useSettingsState(
set: setEnablePauseOverlayState,
changed: enablePauseOverlayChanged,
},
+ pauseOverlayInactivityTime: {
+ state: pauseOverlayInactivityTimeState,
+ set: setPauseOverlayInactivityTimeState,
+ changed: pauseOverlayInactivityTimeChanged,
+ },
+ enablePauseOverlayHoverHide: {
+ state: enablePauseOverlayHoverHideState,
+ set: setEnablePauseOverlayHoverHideState,
+ changed: enablePauseOverlayHoverHideChanged,
+ },
+ timeFormat12Hour: {
+ state: timeFormat12HourState,
+ set: setTimeFormat12HourState,
+ changed: timeFormat12HourChanged,
+ },
customTheme: {
state: customThemeState,
set: setCustomThemeState,
diff --git a/src/hooks/useSpatialNavigation.ts b/src/hooks/useSpatialNavigation.ts
new file mode 100644
index 000000000..76a312a0f
--- /dev/null
+++ b/src/hooks/useSpatialNavigation.ts
@@ -0,0 +1,148 @@
+import { useCallback } from "react";
+
+import { useOverlayStack } from "@/stores/interface/overlayStack";
+import { usePreferencesStore } from "@/stores/preferences";
+
+export type NavigationDirection = "up" | "down" | "left" | "right";
+
+const FOCUSABLE_SELECTOR =
+ 'button:not([tabindex="-1"]), [href]:not([tabindex="-1"]), input:not([tabindex="-1"]), select:not([tabindex="-1"]), textarea:not([tabindex="-1"]), [tabindex]:not([tabindex="-1"]), .tabbable:not([tabindex="-1"])';
+
+export function useSpatialNavigation() {
+ const getFocusableElements = useCallback(() => {
+ const topModalId = useOverlayStack.getState().getTopModal();
+
+ const all = Array.from(
+ document.querySelectorAll(FOCUSABLE_SELECTOR),
+ );
+
+ let filtered = all.filter((el) => {
+ const style = window.getComputedStyle(el);
+ return (
+ style.display !== "none" &&
+ style.visibility !== "hidden" &&
+ el.offsetWidth > 0 &&
+ el.offsetHeight > 0 &&
+ !(el as any).disabled
+ );
+ });
+
+ if (topModalId) {
+ const modalElement = document.getElementById(`modal-${topModalId}`);
+ if (modalElement) {
+ filtered = filtered.filter((el) => modalElement.contains(el));
+ }
+ } else {
+ const ignoreHeader = usePreferencesStore.getState().ignoreHeader;
+ const activeElement = document.activeElement as HTMLElement;
+ const header = document.getElementById("mw-header");
+ const isInHeader = header?.contains(activeElement);
+
+ // If we are already in the header, we should be able to see header elements to navigate within it
+ // If we are NOT in the header and ignoreHeader is on, we filter them out to prevent jumping TO the header
+ if (ignoreHeader && !isInHeader) {
+ if (header) {
+ filtered = filtered.filter((el) => !header.contains(el));
+ }
+ }
+ }
+
+ return filtered;
+ }, []);
+
+ const navigate = useCallback(
+ (direction: NavigationDirection) => {
+ const activeElement = document.activeElement as HTMLElement;
+
+ const elements = getFocusableElements();
+ if (elements.length === 0) return;
+
+ // If nothing focused or focus is lost, focus the first available element
+ if (
+ !activeElement ||
+ activeElement === document.body ||
+ !elements.includes(activeElement)
+ ) {
+ elements[0].focus();
+ elements[0].scrollIntoView({ block: "nearest", behavior: "smooth" });
+ return;
+ }
+
+ const currentRect = activeElement.getBoundingClientRect();
+ const currentCenter = {
+ x: currentRect.left + currentRect.width / 2,
+ y: currentRect.top + currentRect.height / 2,
+ };
+
+ let bestElement: HTMLElement | null = null;
+ let minScore = Infinity;
+
+ for (const el of elements) {
+ if (el === activeElement) continue;
+
+ const elRect = el.getBoundingClientRect();
+ const elCenter = {
+ x: elRect.left + elRect.width / 2,
+ y: elRect.top + elRect.height / 2,
+ };
+
+ const dx = elCenter.x - currentCenter.x;
+ const dy = elCenter.y - currentCenter.y;
+
+ let isCorrectDirection = false;
+ switch (direction) {
+ case "up":
+ isCorrectDirection = dy < 0;
+ break;
+ case "down":
+ isCorrectDirection = dy > 0;
+ break;
+ case "left":
+ isCorrectDirection = dx < 0;
+ break;
+ case "right":
+ isCorrectDirection = dx > 0;
+ break;
+ default:
+ break;
+ }
+
+ if (isCorrectDirection) {
+ // Weighted distance calculation
+ // We prioritize elements that are aligned with the direction
+ // Score = straight-line distance + (orthogonal distance * factor)
+ const primaryDist =
+ direction === "up" || direction === "down"
+ ? Math.abs(dy)
+ : Math.abs(dx);
+ const secondaryDist =
+ direction === "up" || direction === "down"
+ ? Math.abs(dx)
+ : Math.abs(dy);
+
+ let axisWeights =
+ direction === "left" || direction === "right" ? 1.5 : 1;
+
+ // Special case for header elements to make horizontal navigation smoother
+ const header = document.getElementById("mw-header");
+ if (header && header.contains(el) && header.contains(activeElement)) {
+ axisWeights = 0.5; // Lower weight for vertical misalignment within header
+ }
+
+ const score = primaryDist + secondaryDist * axisWeights;
+ if (score < minScore) {
+ minScore = score;
+ bestElement = el;
+ }
+ }
+ }
+
+ if (bestElement) {
+ bestElement.focus();
+ bestElement.scrollIntoView({ block: "nearest", behavior: "smooth" });
+ }
+ },
+ [getFocusableElements],
+ );
+ return { navigate };
+}
diff --git a/src/pages/GamepadSetup.tsx b/src/pages/GamepadSetup.tsx
new file mode 100644
index 000000000..005be58cf
--- /dev/null
+++ b/src/pages/GamepadSetup.tsx
@@ -0,0 +1,214 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useNavigate } from "react-router-dom";
+
+import { Icon, Icons } from "@/components/Icon";
+import { Stepper } from "@/components/layout/Stepper";
+import { BiggerCenterContainer } from "@/components/layout/ThinContainer";
+import { Heading2, Paragraph } from "@/components/utils/Text";
+import { MinimalPageLayout } from "@/pages/layouts/MinimalPageLayout";
+import { Card, CardContent, Link } from "@/pages/migration/utils";
+import { PageTitle } from "@/pages/parts/util/PageTitle";
+import { usePreferencesStore } from "@/stores/preferences";
+
+type SetupStep = "start" | "auto" | "manual" | "success";
+
+const MANUAL_BUTTONS = [
+ { id: 0, name: "A / Cross", icon: Icons.CIRCLE_CHECK },
+ { id: 1, name: "B / Circle", icon: Icons.ARROW_LEFT },
+ { id: 12, name: "D-Pad Up", icon: Icons.CHEVRON_UP },
+ { id: 13, name: "D-Pad Down", icon: Icons.CHEVRON_DOWN },
+];
+
+export function GamepadSetupPage() {
+ const navigate = useNavigate();
+ const [step, setStep] = useState("start");
+ const [currentManualButton, setCurrentManualButton] = useState(0);
+ const [detectedGamepad, setDetectedGamepad] = useState(null);
+ const [isListening, setIsListening] = useState(false);
+ const prevButtonStates = useRef>({});
+
+ const setGamepadSetupComplete = usePreferencesStore(
+ (s: any) => s.setGamepadSetupComplete,
+ );
+ const setEnableGamepadControls = usePreferencesStore(
+ (s: any) => s.setEnableGamepadControls,
+ );
+
+ useEffect(() => {
+ if (!isListening) return;
+
+ const poll = () => {
+ const gamepads = navigator.getGamepads();
+ for (const gp of gamepads) {
+ if (!gp) continue;
+
+ if (step === "auto") {
+ setDetectedGamepad(gp.id);
+ setTimeout(() => {
+ setStep("success");
+ setIsListening(false);
+ }, 1500);
+ return;
+ }
+
+ if (step === "manual") {
+ const targetButton = MANUAL_BUTTONS[currentManualButton];
+ const isPressed = !!gp.buttons[targetButton.id]?.pressed;
+ const wasPressed = prevButtonStates.current[targetButton.id] ?? false;
+
+ if (isPressed && !wasPressed) {
+ if (currentManualButton < MANUAL_BUTTONS.length - 1) {
+ setCurrentManualButton((s) => s + 1);
+ } else {
+ setStep("success");
+ setIsListening(false);
+ }
+ }
+ prevButtonStates.current[targetButton.id] = isPressed;
+ }
+ }
+ requestAnimationFrame(poll);
+ };
+
+ const handle = requestAnimationFrame(poll);
+ return () => cancelAnimationFrame(handle);
+ }, [step, currentManualButton, isListening]);
+
+ const finishSetup = useCallback(() => {
+ setGamepadSetupComplete(true);
+ setEnableGamepadControls(true);
+ navigate("/settings#settings-preferences");
+ }, [navigate, setGamepadSetupComplete, setEnableGamepadControls]);
+
+ return (
+
+
+
+ Setup Controller Support
+
+
+ Connect your Xbox or PlayStation controller to navigate P-Stream
+ with ease. Choose a setup mode below.
+
+
+
+
+ );
+}
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index 5fde539db..a61be9e91 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -3,6 +3,7 @@ import { Helmet } from "react-helmet-async";
import { useTranslation } from "react-i18next";
import { To, useNavigate } from "react-router-dom";
+import { Button } from "@/components/buttons/Button";
import { WideContainer } from "@/components/layout/WideContainer";
import { useDebounce } from "@/hooks/useDebounce";
import { useRandomTranslation } from "@/hooks/useRandomTranslation";
@@ -23,7 +24,6 @@ import { useOverlayStack } from "@/stores/interface/overlayStack";
import { usePreferencesStore } from "@/stores/preferences";
import { MediaItem } from "@/utils/mediaTypes";
-import { Button } from "./About";
import { AdsPart } from "./parts/home/AdsPart";
import { RevivalAnnouncementModal } from "./parts/home/RevivalAnnouncementModal";
import { SupportBar } from "./parts/home/SupportBar";
diff --git a/src/pages/Settings.tsx b/src/pages/Settings.tsx
index ecd3cb19c..776b6eacf 100644
--- a/src/pages/Settings.tsx
+++ b/src/pages/Settings.tsx
@@ -537,6 +537,20 @@ export function SettingsPage() {
);
const enablePauseOverlay = usePreferencesStore((s) => s.enablePauseOverlay);
+ const pauseOverlayInactivityTime = usePreferencesStore(
+ (s) => s.pauseOverlayInactivityTime,
+ );
+ const enablePauseOverlayHoverHide = usePreferencesStore(
+ (s) => s.enablePauseOverlayHoverHide,
+ );
+ const timeFormat12Hour = usePreferencesStore((s) => s.timeFormat12Hour);
+ const setPauseOverlayInactivityTime = usePreferencesStore(
+ (s) => s.setPauseOverlayInactivityTime,
+ );
+ const setEnablePauseOverlayHoverHide = usePreferencesStore(
+ (s) => s.setEnablePauseOverlayHoverHide,
+ );
+ const setTimeFormat12Hour = usePreferencesStore((s) => s.setTimeFormat12Hour);
const setEnablePauseOverlay = usePreferencesStore(
(s) => s.setEnablePauseOverlay,
);
@@ -743,6 +757,9 @@ export function SettingsPage() {
setEnableDoubleClickToSeek,
setEnableAutoResumeOnPlaybackError,
setEnablePauseOverlay,
+ setPauseOverlayInactivityTime,
+ setEnablePauseOverlayHoverHide,
+ setTimeFormat12Hour,
setEnableNumberKeySeeking,
setCustomTheme,
]);
@@ -786,6 +803,9 @@ export function SettingsPage() {
enableDoubleClickToSeek,
enableAutoResumeOnPlaybackError,
enablePauseOverlay,
+ pauseOverlayInactivityTime,
+ enablePauseOverlayHoverHide,
+ timeFormat12Hour,
customThemeBaseline ?? customTheme,
savedCustomThemes,
hiddenDefaultThemes,
@@ -957,6 +977,9 @@ export function SettingsPage() {
state.enableAutoResumeOnPlaybackError.state,
);
setEnablePauseOverlay(state.enablePauseOverlay.state);
+ setPauseOverlayInactivityTime(state.pauseOverlayInactivityTime.state);
+ setEnablePauseOverlayHoverHide(state.enablePauseOverlayHoverHide.state);
+ setTimeFormat12Hour(state.timeFormat12Hour.state);
setCustomTheme(state.customTheme.state);
setCustomThemeBaseline(state.customTheme.state);
useThemeStore.setState({
@@ -1024,6 +1047,9 @@ export function SettingsPage() {
setEnableDoubleClickToSeek,
setEnableAutoResumeOnPlaybackError,
setEnablePauseOverlay,
+ setEnablePauseOverlayHoverHide,
+ setPauseOverlayInactivityTime,
+ setTimeFormat12Hour,
setCustomTheme,
]);
return (
@@ -1143,6 +1169,20 @@ export function SettingsPage() {
enableLowPerformanceMode={state.enableLowPerformanceMode.state}
enablePauseOverlay={state.enablePauseOverlay.state}
setEnablePauseOverlay={state.enablePauseOverlay.set}
+ pauseOverlayInactivityTime={
+ state.pauseOverlayInactivityTime.state
+ }
+ setPauseOverlayInactivityTime={
+ state.pauseOverlayInactivityTime.set
+ }
+ enablePauseOverlayHoverHide={
+ state.enablePauseOverlayHoverHide.state
+ }
+ setEnablePauseOverlayHoverHide={
+ state.enablePauseOverlayHoverHide.set
+ }
+ timeFormat12Hour={state.timeFormat12Hour.state ?? false}
+ setTimeFormat12Hour={(v) => state.timeFormat12Hour.set(v)}
savedCustomThemes={state.savedCustomThemes.state}
setSavedCustomThemes={state.savedCustomThemes.set}
hiddenDefaultThemes={state.hiddenDefaultThemes.state}
diff --git a/src/pages/onboarding/utils.tsx b/src/pages/onboarding/utils.tsx
index 7863b4bff..bc10a40cb 100644
--- a/src/pages/onboarding/utils.tsx
+++ b/src/pages/onboarding/utils.tsx
@@ -14,12 +14,14 @@ export function Card(props: {
+
{/* functional routes */}
@@ -168,6 +178,7 @@ function App() {
/>
= (set) => ({
playbackRate: 1,
},
play() {
- set((state) => {
+ set((state: any) => {
state.mediaPlaying.isPlaying = true;
state.mediaPlaying.isPaused = false;
});
},
pause() {
- set((state) => {
+ set((state: any) => {
state.mediaPlaying.isPlaying = false;
- state.mediaPlaying.isPaused = false;
+ state.mediaPlaying.isPaused = true;
});
},
});
diff --git a/src/stores/player/slices/source.ts b/src/stores/player/slices/source.ts
index 3738796cc..cd852c354 100644
--- a/src/stores/player/slices/source.ts
+++ b/src/stores/player/slices/source.ts
@@ -431,9 +431,8 @@ export const createSourceSlice: MakeSlice = (set, get) => ({
});
try {
- const { scrapeExternalSubtitles } = await import(
- "@/utils/externalSubtitles"
- );
+ const { scrapeExternalSubtitles } =
+ await import("@/utils/externalSubtitles");
const externalCaptions = await scrapeExternalSubtitles(store.meta);
if (externalCaptions.length > 0) {
diff --git a/src/stores/preferences/index.tsx b/src/stores/preferences/index.tsx
index 1c744df18..e11387d1f 100644
--- a/src/stores/preferences/index.tsx
+++ b/src/stores/preferences/index.tsx
@@ -40,9 +40,16 @@ export interface PreferencesStore {
enableAutoResumeOnPlaybackError: boolean;
enableNumberKeySeeking: boolean;
enablePauseOverlay: boolean;
+ pauseOverlayInactivityTime: number;
+ enablePauseOverlayHoverHide: boolean;
+ timeFormat12Hour: boolean | null;
enableGamepadControls: boolean;
+ gamepadSetupComplete: boolean;
+ gamepadInputMode: "controller" | "kbm" | "both";
gamepadMapping: Record;
keyboardShortcuts: KeyboardShortcuts;
+ ignoreHeader: boolean;
+ isGamepadActive: boolean;
setEnableThumbnails(v: boolean): void;
setEnableAutoplay(v: boolean): void;
@@ -76,9 +83,16 @@ export interface PreferencesStore {
setEnableAutoResumeOnPlaybackError(v: boolean): void;
setEnableNumberKeySeeking(v: boolean): void;
setEnablePauseOverlay(v: boolean): void;
+ setPauseOverlayInactivityTime(v: number): void;
+ setEnablePauseOverlayHoverHide(v: boolean): void;
+ setTimeFormat12Hour(v: boolean | null): void;
setEnableGamepadControls(v: boolean): void;
+ setGamepadSetupComplete(v: boolean): void;
+ setGamepadInputMode(v: "controller" | "kbm" | "both"): void;
setGamepadMapping(v: Record): void;
setKeyboardShortcuts(v: KeyboardShortcuts): void;
+ setIgnoreHeader(v: boolean): void;
+ setGamepadActive(v: boolean): void;
}
export const usePreferencesStore = create(
@@ -116,9 +130,16 @@ export const usePreferencesStore = create(
enableAutoResumeOnPlaybackError: true,
enableNumberKeySeeking: true,
enablePauseOverlay: false,
+ pauseOverlayInactivityTime: 2,
+ enablePauseOverlayHoverHide: false,
+ timeFormat12Hour: null,
enableGamepadControls: false,
+ gamepadSetupComplete: false,
+ gamepadInputMode: "both",
gamepadMapping: {},
keyboardShortcuts: DEFAULT_KEYBOARD_SHORTCUTS,
+ ignoreHeader: false,
+ isGamepadActive: false,
setEnableThumbnails(v) {
set((s) => {
s.enableThumbnails = v;
@@ -284,11 +305,36 @@ export const usePreferencesStore = create(
s.enablePauseOverlay = v;
});
},
+ setPauseOverlayInactivityTime(v) {
+ set((s) => {
+ s.pauseOverlayInactivityTime = v;
+ });
+ },
+ setEnablePauseOverlayHoverHide(v) {
+ set((s) => {
+ s.enablePauseOverlayHoverHide = v;
+ });
+ },
+ setTimeFormat12Hour(v) {
+ set((s) => {
+ s.timeFormat12Hour = v;
+ });
+ },
setEnableGamepadControls(v) {
set((s) => {
s.enableGamepadControls = v;
});
},
+ setGamepadSetupComplete(v) {
+ set((s) => {
+ s.gamepadSetupComplete = v;
+ });
+ },
+ setGamepadInputMode(v) {
+ set((s) => {
+ s.gamepadInputMode = v;
+ });
+ },
setGamepadMapping(v) {
set((s) => {
s.gamepadMapping = v;
@@ -299,6 +345,16 @@ export const usePreferencesStore = create(
s.keyboardShortcuts = v;
});
},
+ setIgnoreHeader(v) {
+ set((s) => {
+ s.ignoreHeader = v;
+ });
+ },
+ setGamepadActive(v) {
+ set((s) => {
+ s.isGamepadActive = v;
+ });
+ },
})),
{
name: "__MW::preferences",
diff --git a/src/stores/theme/index.tsx b/src/stores/theme/index.tsx
index ba150abc0..8b65f63df 100644
--- a/src/stores/theme/index.tsx
+++ b/src/stores/theme/index.tsx
@@ -4,6 +4,7 @@ import { create } from "zustand";
import { persist } from "zustand/middleware";
import { immer } from "zustand/middleware/immer";
+import { colorToRgbString } from "@/utils/color";
import {
parts,
primaryOptions,
@@ -151,15 +152,47 @@ export function ThemeProvider(props: {
const themeToDisplay = previewTheme ?? theme;
const themeSelector = themeToDisplay ? `theme-${themeToDisplay}` : undefined;
+ const parseCustomColor = (
+ colorStr: string,
+ keys: string[],
+ ): Record => {
+ if (!colorStr.startsWith("custom:")) return {};
+ const values = colorStr.replace("custom:", "").split(",");
+ const vars: Record = {};
+ keys.forEach((key, i) => {
+ const val = values[i] || values[0];
+ if (val) {
+ vars[key] = colorToRgbString(val);
+ }
+ });
+ return vars;
+ };
+
let styleContent = "";
if (themeToDisplay === "custom" && customTheme) {
- const primary =
- primaryOptions.find((o) => o.id === customTheme.primary)?.colors || {};
- const secondary =
- secondaryOptions.find((o) => o.id === customTheme.secondary)?.colors ||
- {};
- const tertiary =
- tertiaryOptions.find((o) => o.id === customTheme.tertiary)?.colors || {};
+ const primary = customTheme.primary.startsWith("custom:")
+ ? parseCustomColor(customTheme.primary, [
+ "--colors-buttons-primary",
+ "--colors-type-logo",
+ "--colors-themePreview-primary",
+ ])
+ : primaryOptions.find((o) => o.id === customTheme.primary)?.colors || {};
+
+ const secondary = customTheme.secondary.startsWith("custom:")
+ ? parseCustomColor(customTheme.secondary, [
+ "--colors-type-text",
+ "--colors-buttons-secondary",
+ ])
+ : secondaryOptions.find((o) => o.id === customTheme.secondary)?.colors ||
+ {};
+
+ const tertiary = customTheme.tertiary.startsWith("custom:")
+ ? parseCustomColor(customTheme.tertiary, [
+ "--colors-background-main",
+ "--colors-themePreview-secondary",
+ ])
+ : tertiaryOptions.find((o) => o.id === customTheme.tertiary)?.colors ||
+ {};
const vars = { ...primary, ...secondary, ...tertiary };
const cssVars = Object.entries(vars)
@@ -171,12 +204,28 @@ export function ThemeProvider(props: {
// Inject CSS rules for all saved custom themes so their previews render correctly
savedCustomThemes.forEach((savedTheme) => {
- const primary =
- primaryOptions.find((o) => o.id === savedTheme.primary)?.colors || {};
- const secondary =
- secondaryOptions.find((o) => o.id === savedTheme.secondary)?.colors || {};
- const tertiary =
- tertiaryOptions.find((o) => o.id === savedTheme.tertiary)?.colors || {};
+ const primary = savedTheme.primary.startsWith("custom:")
+ ? parseCustomColor(savedTheme.primary, [
+ "--colors-buttons-primary",
+ "--colors-type-logo",
+ "--colors-themePreview-primary",
+ ])
+ : primaryOptions.find((o) => o.id === savedTheme.primary)?.colors || {};
+
+ const secondary = savedTheme.secondary.startsWith("custom:")
+ ? parseCustomColor(savedTheme.secondary, [
+ "--colors-type-text",
+ "--colors-buttons-secondary",
+ ])
+ : secondaryOptions.find((o) => o.id === savedTheme.secondary)?.colors ||
+ {};
+
+ const tertiary = savedTheme.tertiary.startsWith("custom:")
+ ? parseCustomColor(savedTheme.tertiary, [
+ "--colors-background-main",
+ "--colors-themePreview-secondary",
+ ])
+ : tertiaryOptions.find((o) => o.id === savedTheme.tertiary)?.colors || {};
const vars: Record = {
...primary,
diff --git a/src/utils/autoplay.ts b/src/utils/autoplay.ts
index aee01ffbc..99f18cab1 100644
--- a/src/utils/autoplay.ts
+++ b/src/utils/autoplay.ts
@@ -5,7 +5,7 @@ import { useAuthStore } from "@/stores/auth";
export function isAutoplayAllowed() {
return Boolean(
conf().ALLOW_AUTOPLAY ||
- isExtensionActiveCached() ||
- useAuthStore.getState().proxySet,
+ isExtensionActiveCached() ||
+ useAuthStore.getState().proxySet,
);
}
diff --git a/src/utils/color.ts b/src/utils/color.ts
index fedb6e05a..0a9b76ff2 100644
--- a/src/utils/color.ts
+++ b/src/utils/color.ts
@@ -65,3 +65,14 @@ export function colorToRgbString(color: string): string {
// But returning original string allows basic non-opacity usage to potentially work or fail gracefully.
return color;
}
+
+export function rgbStringToHex(rgbStr: string): string {
+ const parts = rgbStr.trim().split(/\s+/);
+ if (parts.length >= 3) {
+ const r = parseInt(parts[0], 10).toString(16).padStart(2, "0");
+ const g = parseInt(parts[1], 10).toString(16).padStart(2, "0");
+ const b = parseInt(parts[2], 10).toString(16).padStart(2, "0");
+ return `#${r}${g}${b}`;
+ }
+ return "#000000"; // fallback
+}
diff --git a/src/utils/mediaTypes.ts b/src/utils/mediaTypes.ts
index 5826c54f0..c15128205 100644
--- a/src/utils/mediaTypes.ts
+++ b/src/utils/mediaTypes.ts
@@ -5,6 +5,7 @@ export interface MediaItem {
release_date?: Date;
poster?: string;
type: "show" | "movie";
+ rating?: number;
onHoverInfoEnter?: () => void;
onHoverInfoLeave?: () => void;
}
diff --git a/themes/custom.ts b/themes/custom.ts
index 693608da9..2dad7c373 100644
--- a/themes/custom.ts
+++ b/themes/custom.ts
@@ -70,6 +70,7 @@ export const parts = {
"type.linkHover",
"largeCard.icon",
"mediaCard.barFillColor",
+ "themePreview.primary",
],
secondary: [
"type.text",
@@ -173,7 +174,6 @@ export const parts = {
"onboarding.card",
"onboarding.cardHover",
"errors.card",
- "themePreview.primary",
"themePreview.secondary",
"themePreview.ghost",
"video.scraping.card",
+
diff --git a/src/components/text/DotList.tsx b/src/components/text/DotList.tsx
index bb328a6d3..63569cc82 100644
--- a/src/components/text/DotList.tsx
+++ b/src/components/text/DotList.tsx
@@ -1,19 +1,25 @@
+import { ReactNode } from "react";
+
export interface DotListProps {
- content: string[];
+ content: ReactNode[];
className?: string;
}
export function DotList(props: DotListProps) {
return (
- {props.content.map((item, index) => ( - - {index !== 0 ? ( - ● - ) : null} - {item} - - ))} + {props.content.map((item, index) => { + const key = + typeof item === "string" || typeof item === "number" ? item : index; + return ( + + {index !== 0 ? ( + ● + ) : null} + {item} + + ); + })}
); } diff --git a/src/hooks/useGamepad.ts b/src/hooks/useGamepad.ts index 71f0b1597..74b6d6e6e 100644 --- a/src/hooks/useGamepad.ts +++ b/src/hooks/useGamepad.ts @@ -32,7 +32,7 @@ export const DEFAULT_GAMEPAD_MAPPING: GamepadMapping = { actionNorth: "toggle-captions", leftBumper: "skip-backward", rightBumper: "skip-forward", - leftTrigger: "volume-down", + leftTrigger: "go-home", rightTrigger: "volume-up", start: "play-pause", select: "mute", @@ -186,6 +186,7 @@ export const GAMEPAD_ACTION_LABELS: Record
+ {
+ setStep("auto");
+ setIsListening(true);
+ }}
+ className="flex-1"
+ >
+
+ Start Auto Setup
+
+
+
+ {
+ setStep("manual");
+ setIsListening(true);
+ }}
+ className="flex-1"
+ >
+
+ Start Manual Setup
+
+
+
+
+ )}
+
+ {step === "auto" && (
+
+
+ {detectedGamepad
+ ? "Controller Detected!"
+ : "Waiting for Controller..."}
+
+
+ {detectedGamepad ||
+ "Please press any button on your controller to identify it."}
+
+
+ )}
+
+ {step === "manual" && (
+
+
+
+
+ 🎮
+
+
+
+ Verify Button Presses
+
+
+ )}
+
+ {step === "success" && (
+
+
+
+
+
+
+ Press {MANUAL_BUTTONS[currentManualButton].name}
+
+
+ Step {currentManualButton + 1} of {MANUAL_BUTTONS.length}
+
+
+
+
+
+
+ Setup Complete!
+
+ Your controller is now ready to use. You can navigate the entire
+ site using the D-Pad and Select button.
+
+
+
+ )}
+
+
+ e.key === "Enter" && props.onClick?.()}
onClick={props.onClick}
>
{props.children}
@@ -112,9 +114,11 @@ export function Link(props: {
href={props.href}
target={props.target}
className={classNames(
- "text-onboarding-link cursor-pointer inline-flex gap-2 items-center group hover:opacity-75 transition-opacity",
+ "text-onboarding-link cursor-pointer inline-flex gap-2 items-center group hover:opacity-75 transition-opacity tabbable rounded focus:outline-none",
props.className,
)}
+ tabIndex={0}
+ onKeyDown={(e) => e.key === "Enter" && props.to && navigate(props.to)}
rel="noreferrer"
>
{props.children}
diff --git a/src/pages/parts/search/SearchListPart.tsx b/src/pages/parts/search/SearchListPart.tsx
index 9052b4f67..3eb518dfd 100644
--- a/src/pages/parts/search/SearchListPart.tsx
+++ b/src/pages/parts/search/SearchListPart.tsx
@@ -4,13 +4,13 @@ import { useNavigate } from "react-router-dom";
import { searchForMedia } from "@/backend/metadata/search";
import { MWQuery } from "@/backend/metadata/types/mw";
+import { Button } from "@/components/buttons/Button";
import { IconPatch } from "@/components/buttons/IconPatch";
import { Icons } from "@/components/Icon";
import { SectionHeading } from "@/components/layout/SectionHeading";
import { MediaGrid } from "@/components/media/MediaGrid";
import { WatchedMediaCard } from "@/components/media/WatchedMediaCard";
import { useDebounce } from "@/hooks/useDebounce";
-import { Button } from "@/pages/About";
import { SearchLoadingPart } from "@/pages/parts/search/SearchLoadingPart";
import { MediaItem } from "@/utils/mediaTypes";
diff --git a/src/pages/parts/settings/AppearancePart.tsx b/src/pages/parts/settings/AppearancePart.tsx
index 465db38bd..4c4ba2435 100644
--- a/src/pages/parts/settings/AppearancePart.tsx
+++ b/src/pages/parts/settings/AppearancePart.tsx
@@ -9,6 +9,7 @@ import { Icon, Icons } from "@/components/Icon";
import { CustomThemeModal } from "@/components/overlays/CustomThemeModal";
import { EditGroupOrderModal } from "@/components/overlays/EditGroupOrderModal";
import { useModal } from "@/components/overlays/Modal";
+import { CaptionSetting } from "@/components/player/atoms/settings/CaptionSettingsView";
import { Heading1 } from "@/components/utils/Text";
import { useBackendUrl } from "@/hooks/auth/useBackendUrl";
import { useAuthStore } from "@/stores/auth";
@@ -277,6 +278,15 @@ export function AppearancePart(props: {
enablePauseOverlay: boolean;
setEnablePauseOverlay: (v: boolean) => void;
+ enablePauseOverlayHoverHide: boolean;
+ setEnablePauseOverlayHoverHide: (v: boolean) => void;
+
+ pauseOverlayInactivityTime: number;
+ setPauseOverlayInactivityTime: (v: number) => void;
+
+ timeFormat12Hour: boolean;
+ setTimeFormat12Hour: (v: boolean) => void;
+
enableCarouselView: boolean;
setEnableCarouselView: (v: boolean) => void;
@@ -538,7 +548,7 @@ export function AppearancePart(props: {
{/* Pause Overlay */}
+
+ {/* Time Format */}
+ >;
diff --git a/src/pages/parts/settings/PreferencesPart.tsx b/src/pages/parts/settings/PreferencesPart.tsx
index 34a5224da..ebada22d2 100644
--- a/src/pages/parts/settings/PreferencesPart.tsx
+++ b/src/pages/parts/settings/PreferencesPart.tsx
@@ -54,6 +54,14 @@ export function PreferencesPart(props: {
const setEnableGamepadControls = usePreferencesStore(
(s) => s.setEnableGamepadControls,
);
+ const gamepadSetupComplete = usePreferencesStore(
+ (s) => s.gamepadSetupComplete,
+ );
+ const gamepadInputMode = usePreferencesStore((s) => s.gamepadInputMode);
+ const setGamepadInputMode = usePreferencesStore((s) => s.setGamepadInputMode);
+ const ignoreHeader = usePreferencesStore((s) => s.ignoreHeader);
+ const setIgnoreHeader = usePreferencesStore((s) => s.setIgnoreHeader);
+
const sorted = sortLangCodes(
appLanguageOptions.map((item) => item.code),
props.language,
@@ -285,39 +293,119 @@ export function PreferencesPart(props: {
{t("settings.preferences.keyboardShortcutsDescription")}
- - {t("settings.appearance.options.pauseOverlay")} + {t("settings.appearance.options.pauseOverlay", "Pause Overlay")}
@@ -554,7 +564,92 @@ export function AppearancePart(props: {
>
+
+ {props.enablePauseOverlay && !props.enableLowPerformanceMode && (
+ - {t("settings.appearance.options.pauseOverlayLabel")} + {t( + "settings.appearance.options.pauseOverlayLabel", + "Enable Pause Overlay", + )} +
+
+
+ )}
+
+
+
+ + {t( + "settings.appearance.options.pauseOverlayHoverHide", + "Hide on Hover", + )} +
++ {t( + "settings.appearance.options.pauseOverlayHoverHideDescription", + "Automatically hide the overlay when you move your mouse", + )} +
+
+ props.setEnablePauseOverlayHoverHide(
+ !props.enablePauseOverlayHoverHide,
+ )
+ }
+ className="bg-dropdown-background hover:bg-dropdown-hoverBackground select-none my-4 cursor-pointer space-x-3 flex items-center py-3 px-4 rounded-lg"
+ >
+
+ + {t( + "settings.appearance.options.pauseOverlayHoverHideLabel", + "Enable hover to hide", + )} +
+
+ {
+ // Adjust to nearest 5 second interval
+ const interval = Math.round(v / 5) * 5;
+ props.setPauseOverlayInactivityTime(interval);
+ }}
+ value={props.pauseOverlayInactivityTime}
+ textTransformer={(s) => `${s}s`}
+ controlButtons
+ />
+
+ + {t( + "settings.appearance.options.pauseOverlayInactivityTimeDescription", + "Set to 0 to show immediately", + )} +
+
+
diff --git a/src/pages/parts/settings/ConnectionsPart.tsx b/src/pages/parts/settings/ConnectionsPart.tsx
index 7b8130cc6..46126cf2a 100644
--- a/src/pages/parts/settings/ConnectionsPart.tsx
+++ b/src/pages/parts/settings/ConnectionsPart.tsx
@@ -37,8 +37,6 @@ import { useAuthStore } from "@/stores/auth";
import { usePreferencesStore } from "@/stores/preferences";
import { useTraktStore } from "@/stores/trakt/store";
-import { RegionSelectorPart } from "./RegionSelectorPart";
-
interface ProxyEditProps {
proxyUrls: string[] | null;
setProxyUrls: Dispatch+ {t("settings.appearance.options.timeFormat", "Time Format")} +
+ props.setTimeFormat12Hour(!props.timeFormat12Hour)}
+ className={classNames(
+ "bg-dropdown-background hover:bg-dropdown-hoverBackground select-none my-4 cursor-pointer space-x-3 flex items-center max-w-[25rem] py-3 px-4 rounded-lg",
+ "cursor-pointer opacity-100 pointer-events-auto",
+ )}
+ >
+
+ {t( + "settings.appearance.options.timeFormatLabel", + "Use 12-hour clock (AM/PM)", + )}
-
-
-
-
- {/* Gamepad Enable Toggle */}
- setEnableGamepadControls(!enableGamepadControls)}
- className="bg-dropdown-background hover:bg-dropdown-hoverBackground select-none cursor-pointer space-x-3 flex items-center max-w-[25rem] py-3 px-4 rounded-lg"
+
+
+ {/* Gamepad Setup & Controls */}
+
diff --git a/src/setup/App.tsx b/src/setup/App.tsx
index aa3cd373b..671d0e95d 100644
--- a/src/setup/App.tsx
+++ b/src/setup/App.tsx
@@ -11,10 +11,12 @@ import {
import { convertLegacyUrl, isLegacyUrl } from "@/backend/metadata/getmeta";
import { generateQuickSearchMediaUrl } from "@/backend/metadata/tmdb";
+import { GamepadGlobalListener } from "@/components/gamepad/GamepadGlobalListener";
import { DetailsModal } from "@/components/overlays/detailsModal";
import { GamepadControlsModal } from "@/components/overlays/GamepadControlsModal";
import { KeyboardCommandsEditModal } from "@/components/overlays/KeyboardCommandsEditModal";
import { KeyboardCommandsModal } from "@/components/overlays/KeyboardCommandsModal";
+import { MediaControllerMenuModal } from "@/components/overlays/MediaControllerMenu";
import { NotificationModal } from "@/components/overlays/notificationsModal";
import { SupportInfoModal } from "@/components/overlays/SupportInfoModal";
import { TraktAuthHandler } from "@/components/TraktAuthHandler";
@@ -51,11 +53,17 @@ import { LanguageProvider } from "@/stores/language";
const DeveloperPage = lazy(() => import("@/pages/DeveloperPage"));
const TestView = lazy(() => import("@/pages/developer/TestView"));
+const GamepadSetupPage = lazyWithPreload(() =>
+ import("@/pages/GamepadSetup").then((m: { GamepadSetupPage: any }) => ({
+ default: m.GamepadSetupPage,
+ })),
+);
const PlayerView = lazyWithPreload(() => import("@/pages/PlayerView"));
const SettingsPage = lazyWithPreload(() => import("@/pages/Settings"));
PlayerView.preload();
SettingsPage.preload();
+GamepadSetupPage.preload();
function LegacyUrlView({ children }: { children: ReactElement }) {
const location = useLocation();
@@ -129,6 +137,7 @@ function App() {
return (
+
+ {t("settings.preferences.gamepadTitle", "Controller Support")} +
+{t( - "settings.preferences.enableGamepadControls", - "Enable controller support", + "settings.preferences.gamepadDescription", + "Navigate P-Stream using your Xbox or PlayStation controller.", )}
+ +
+ {!enableGamepadControls || !gamepadSetupComplete ? (
+
+ ) : (
+ <>
+
+ setEnableGamepadControls(!enableGamepadControls)
+ }
+ className="bg-dropdown-background hover:bg-dropdown-hoverBackground select-none cursor-pointer space-x-3 flex items-center py-3 px-4 rounded-lg border border-white/5"
+ >
+
+
+ + {t( + "settings.preferences.enableGamepadControls", + "Enabled", + )} +
+
+
+
+
+
+
+ i.id === gamepadInputMode) || {
+ id: "both",
+ name: "Both (Recommended)",
+ }
+ }
+ setSelectedItem={(opt) =>
+ setGamepadInputMode(
+ opt.id as "controller" | "kbm" | "both",
+ )
+ }
+ />
+
+
+ + Input Mode +
+ setIgnoreHeader(!ignoreHeader)}
+ className="bg-dropdown-background hover:bg-dropdown-hoverBackground select-none cursor-pointer space-x-3 flex items-center py-3 px-4 rounded-lg border border-white/5"
+ >
+
+
+ )}
+
+
+ + {t("settings.preferences.gamepadIgnoreHeaderTitle")} +
++ {t( + "settings.preferences.gamepadIgnoreHeaderDescription", + )} +
+