mirror of
https://github.com/streamyfin/streamyfin.git
synced 2026-05-28 09:38:25 +01:00
feat(player): add media segment skip with all 5 Jellyfin segment types
Closes #1312 Fixes #883 Adds a unified segment skip feature using the Jellyfin 10.11+ MediaSegments API. Replaces the legacy intro-only and credits-only hooks with a single useSegmentSkipper hook covering Intro, Outro, Recap, Commercial, and Preview. Three modes per segment type: none, ask (show button), auto (skip automatically). A dedicated submenu under Playback Controls keeps the main settings page uncluttered. Highlights: - utils/segments.ts uses getMediaSegmentsApi from @jellyfin/sdk so includeSegmentTypes is serialized as repeated keys instead of the bracket-encoded form axios produces by default (the Jellyfin server silently ignored the filter otherwise). Falls back to the pre-10.11 intro-skipper / chapter-credits plugin endpoints when the new API is unavailable. - hooks/useSegmentSkipper.ts stores seek and haptic in refs so the auto-skip effect does not re-run when their identities change (useHaptic returns a fresh no-op every render when disabled). currentSegment is memoized; the per-segment-type setting lookup uses a small map instead of a switch IIFE. - components/video-player/controls/Controls.tsx prioritizes Commercial > Recap > Intro > Preview > Outro when multiple segments overlap and exposes the active type to BottomControls via skipButtonText. - components/video-player/controls/BottomControls.tsx accepts the dynamic skipButtonText/skipCreditButtonText props. - providers/Downloads/types.ts extends DownloadedItem with the three new segment buckets for offline playback. - utils/atoms/settings.ts adds SegmentSkipMode and the five skip settings, defaulting to "ask". - app/(auth)/(tabs)/(home)/settings/segment-skip/page.tsx renders the five dropdowns from a data table. - translations/en.json and translations/fr.json add the new keys.
This commit is contained in:
Gauvain
@@ -1,109 +0,0 @@
|
||||
import { Api } from "@jellyfin/sdk";
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { DownloadedItem } from "@/providers/Downloads/types";
|
||||
import { useSegments } from "@/utils/segments";
|
||||
import { msToSeconds, secondsToMs } from "@/utils/time";
|
||||
import { useHaptic } from "./useHaptic";
|
||||
|
||||
/**
|
||||
* Custom hook to handle skipping credits in a media player.
|
||||
* The player reports time values in milliseconds.
|
||||
*/
|
||||
export const useCreditSkipper = (
|
||||
itemId: string,
|
||||
currentTime: number,
|
||||
seek: (ms: number) => void,
|
||||
play: () => void,
|
||||
isOffline = false,
|
||||
api: Api | null = null,
|
||||
downloadedFiles: DownloadedItem[] | undefined = undefined,
|
||||
totalDuration?: number,
|
||||
) => {
|
||||
const [showSkipCreditButton, setShowSkipCreditButton] = useState(false);
|
||||
const lightHapticFeedback = useHaptic("light");
|
||||
|
||||
// Convert ms to seconds for comparison with timestamps
|
||||
const currentTimeSeconds = msToSeconds(currentTime);
|
||||
|
||||
const totalDurationInSeconds =
|
||||
totalDuration != null ? msToSeconds(totalDuration) : undefined;
|
||||
|
||||
// Regular function (not useCallback) to match useIntroSkipper pattern
|
||||
const wrappedSeek = (seconds: number) => {
|
||||
seek(secondsToMs(seconds));
|
||||
};
|
||||
|
||||
const { data: segments } = useSegments(
|
||||
itemId,
|
||||
isOffline,
|
||||
downloadedFiles,
|
||||
api,
|
||||
);
|
||||
const creditTimestamps = segments?.creditSegments?.[0];
|
||||
|
||||
// Determine if there's content after credits (credits don't extend to video end)
|
||||
// Use a 5-second buffer to account for timing discrepancies
|
||||
const hasContentAfterCredits = (() => {
|
||||
if (
|
||||
!creditTimestamps ||
|
||||
totalDurationInSeconds == null ||
|
||||
!Number.isFinite(totalDurationInSeconds)
|
||||
) {
|
||||
return false;
|
||||
}
|
||||
const creditsEndToVideoEnd =
|
||||
totalDurationInSeconds - creditTimestamps.endTime;
|
||||
// If credits end more than 5 seconds before video ends, there's content after
|
||||
return creditsEndToVideoEnd > 5;
|
||||
})();
|
||||
|
||||
useEffect(() => {
|
||||
if (creditTimestamps) {
|
||||
const shouldShow =
|
||||
currentTimeSeconds > creditTimestamps.startTime &&
|
||||
currentTimeSeconds < creditTimestamps.endTime;
|
||||
|
||||
setShowSkipCreditButton(shouldShow);
|
||||
} else {
|
||||
// Reset button state when no credit timestamps exist
|
||||
if (showSkipCreditButton) {
|
||||
setShowSkipCreditButton(false);
|
||||
}
|
||||
}
|
||||
}, [creditTimestamps, currentTimeSeconds, showSkipCreditButton]);
|
||||
|
||||
const skipCredit = useCallback(() => {
|
||||
if (!creditTimestamps) return;
|
||||
|
||||
try {
|
||||
lightHapticFeedback();
|
||||
|
||||
// Calculate the target seek position
|
||||
let seekTarget = creditTimestamps.endTime;
|
||||
|
||||
// If we have total duration, ensure we don't seek past the end of the video.
|
||||
// Some media sources report credit end times that exceed the actual video duration,
|
||||
// which causes the player to pause/stop when seeking past the end.
|
||||
// Leave a small buffer (2 seconds) to trigger the natural end-of-video flow
|
||||
// (next episode countdown, etc.) instead of an abrupt pause.
|
||||
if (totalDurationInSeconds && seekTarget >= totalDurationInSeconds) {
|
||||
seekTarget = Math.max(0, totalDurationInSeconds - 2);
|
||||
}
|
||||
|
||||
wrappedSeek(seekTarget);
|
||||
setTimeout(() => {
|
||||
play();
|
||||
}, 200);
|
||||
} catch (error) {
|
||||
console.error("[CREDIT_SKIPPER] Error skipping credit", error);
|
||||
}
|
||||
}, [
|
||||
creditTimestamps,
|
||||
lightHapticFeedback,
|
||||
wrappedSeek,
|
||||
play,
|
||||
totalDurationInSeconds,
|
||||
]);
|
||||
|
||||
return { showSkipCreditButton, skipCredit, hasContentAfterCredits };
|
||||
};
|
||||
@@ -1,68 +0,0 @@
|
||||
import { Api } from "@jellyfin/sdk";
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { DownloadedItem } from "@/providers/Downloads/types";
|
||||
import { useSegments } from "@/utils/segments";
|
||||
import { msToSeconds, secondsToMs } from "@/utils/time";
|
||||
import { useHaptic } from "./useHaptic";
|
||||
|
||||
/**
|
||||
* Custom hook to handle skipping intros in a media player.
|
||||
* MPV player uses milliseconds for time.
|
||||
*
|
||||
* @param {number} currentTime - The current playback time in milliseconds.
|
||||
*/
|
||||
export const useIntroSkipper = (
|
||||
itemId: string,
|
||||
currentTime: number,
|
||||
seek: (ms: number) => void,
|
||||
play: () => void,
|
||||
isOffline = false,
|
||||
api: Api | null = null,
|
||||
downloadedFiles: DownloadedItem[] | undefined = undefined,
|
||||
) => {
|
||||
const [showSkipButton, setShowSkipButton] = useState(false);
|
||||
// Convert ms to seconds for comparison with timestamps
|
||||
const currentTimeSeconds = msToSeconds(currentTime);
|
||||
const lightHapticFeedback = useHaptic("light");
|
||||
|
||||
const wrappedSeek = (seconds: number) => {
|
||||
seek(secondsToMs(seconds));
|
||||
};
|
||||
|
||||
const { data: segments } = useSegments(
|
||||
itemId,
|
||||
isOffline,
|
||||
downloadedFiles,
|
||||
api,
|
||||
);
|
||||
const introTimestamps = segments?.introSegments?.[0];
|
||||
|
||||
useEffect(() => {
|
||||
if (introTimestamps) {
|
||||
const shouldShow =
|
||||
currentTimeSeconds > introTimestamps.startTime &&
|
||||
currentTimeSeconds < introTimestamps.endTime;
|
||||
|
||||
setShowSkipButton(shouldShow);
|
||||
} else {
|
||||
if (showSkipButton) {
|
||||
setShowSkipButton(false);
|
||||
}
|
||||
}
|
||||
}, [introTimestamps, currentTimeSeconds, showSkipButton]);
|
||||
|
||||
const skipIntro = useCallback(() => {
|
||||
if (!introTimestamps) return;
|
||||
try {
|
||||
lightHapticFeedback();
|
||||
wrappedSeek(introTimestamps.endTime);
|
||||
setTimeout(() => {
|
||||
play();
|
||||
}, 200);
|
||||
} catch (error) {
|
||||
console.error("[INTRO_SKIPPER] Error skipping intro", error);
|
||||
}
|
||||
}, [introTimestamps, lightHapticFeedback, wrappedSeek, play]);
|
||||
|
||||
return { showSkipButton, skipIntro };
|
||||
};
|
||||
109
hooks/useSegmentSkipper.ts
Normal file
109
hooks/useSegmentSkipper.ts
Normal file
@@ -0,0 +1,109 @@
|
||||
import { useCallback, useEffect, useMemo, useRef } from "react";
|
||||
import { MediaTimeSegment } from "@/providers/Downloads/types";
|
||||
import { SegmentSkipMode, useSettings } from "@/utils/atoms/settings";
|
||||
import { useHaptic } from "./useHaptic";
|
||||
|
||||
type SegmentType = "Intro" | "Outro" | "Recap" | "Commercial" | "Preview";
|
||||
|
||||
const SEGMENT_TO_SETTING: Record<
|
||||
SegmentType,
|
||||
"skipIntro" | "skipOutro" | "skipRecap" | "skipCommercial" | "skipPreview"
|
||||
> = {
|
||||
Intro: "skipIntro",
|
||||
Outro: "skipOutro",
|
||||
Recap: "skipRecap",
|
||||
Commercial: "skipCommercial",
|
||||
Preview: "skipPreview",
|
||||
};
|
||||
|
||||
interface UseSegmentSkipperProps {
|
||||
segments: MediaTimeSegment[];
|
||||
segmentType: SegmentType;
|
||||
currentTime: number;
|
||||
totalDuration?: number;
|
||||
seek: (time: number) => void;
|
||||
isPaused: boolean;
|
||||
}
|
||||
|
||||
interface UseSegmentSkipperReturn {
|
||||
currentSegment: MediaTimeSegment | null;
|
||||
skipSegment: (useHaptics?: boolean) => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* Generic hook to handle all media segment types (intro, outro, recap, commercial, preview)
|
||||
* Supports three modes: 'none' (disabled), 'ask' (show button), 'auto' (auto-skip)
|
||||
*/
|
||||
export const useSegmentSkipper = ({
|
||||
segments,
|
||||
segmentType,
|
||||
currentTime,
|
||||
totalDuration,
|
||||
seek,
|
||||
isPaused,
|
||||
}: UseSegmentSkipperProps): UseSegmentSkipperReturn => {
|
||||
const { settings } = useSettings();
|
||||
const haptic = useHaptic();
|
||||
const autoSkipTriggeredRef = useRef<string | null>(null);
|
||||
|
||||
const skipMode: SegmentSkipMode =
|
||||
settings?.[SEGMENT_TO_SETTING[segmentType]] ?? "none";
|
||||
|
||||
const currentSegment = useMemo(
|
||||
() =>
|
||||
segments.find(
|
||||
(s) => currentTime >= s.startTime && currentTime < s.endTime,
|
||||
) ?? null,
|
||||
[segments, currentTime],
|
||||
);
|
||||
|
||||
// Refs let the auto-skip effect avoid re-running when skipSegment/haptic
|
||||
// identities change (haptic is unstable when disabled).
|
||||
const seekRef = useRef(seek);
|
||||
const hapticRef = useRef(haptic);
|
||||
useEffect(() => {
|
||||
seekRef.current = seek;
|
||||
hapticRef.current = haptic;
|
||||
});
|
||||
|
||||
const skipSegment = useCallback(
|
||||
(useHaptics = true) => {
|
||||
if (!currentSegment || skipMode === "none") return;
|
||||
|
||||
// Outro endTime sometimes exceeds the actual file duration. Keep a 2s
|
||||
// buffer so the player's natural end-of-video flow (next-episode
|
||||
// countdown, etc.) still fires instead of stalling at the exact end.
|
||||
let target = currentSegment.endTime;
|
||||
if (
|
||||
segmentType === "Outro" &&
|
||||
totalDuration != null &&
|
||||
Number.isFinite(totalDuration) &&
|
||||
target >= totalDuration
|
||||
) {
|
||||
target = Math.max(0, totalDuration - 2);
|
||||
}
|
||||
|
||||
seekRef.current(target);
|
||||
|
||||
if (useHaptics) hapticRef.current();
|
||||
},
|
||||
[currentSegment, segmentType, totalDuration, skipMode],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (skipMode !== "auto" || isPaused || !currentSegment) {
|
||||
if (!currentSegment) autoSkipTriggeredRef.current = null;
|
||||
return;
|
||||
}
|
||||
|
||||
const segmentId = `${currentSegment.startTime}-${currentSegment.endTime}`;
|
||||
if (autoSkipTriggeredRef.current === segmentId) return;
|
||||
autoSkipTriggeredRef.current = segmentId;
|
||||
skipSegment(false);
|
||||
}, [currentSegment, skipMode, isPaused, skipSegment]);
|
||||
|
||||
return {
|
||||
currentSegment: skipMode === "none" ? null : currentSegment,
|
||||
skipSegment,
|
||||
};
|
||||
};
|
||||
Reference in New Issue
Block a user