Add chapters on bottom scrubber, set video progress only on seek end

front/packages/ui/src/player/components/hover.tsx

@@ -65,6 +65,7 @@ export const hoverAtom = atom((get) =>
 	[!get(playAtom), ...Object.values(get(hoverReasonAtom))].includes(true),
 );
 export const seekingAtom = atom(false);
+export const seekProgressAtom = atom<number | null>(null);
 
 export const Hover = ({
 	isLoading,
@@ -163,7 +164,7 @@ export const Hover = ({
 								)}
 								<ProgressBar chapters={chapters} url={url} />
 								{showBottomSeeker ? (
-									<BottomScrubber url={url} />
+									<BottomScrubber url={url} chapters={chapters} />
 								) : (
 									<View
 										{...css({
@@ -329,25 +330,28 @@ const ProgressBar = ({ url, chapters }: { url: string; chapters?: Chapter[] }) =
 	const setPlay = useSetAtom(playAtom);
 	const [hoverProgress, setHoverProgress] = useState<number | null>(null);
 	const [layout, setLayout] = useState({ x: 0, y: 0, width: 0, height: 0 });
+	const [seekProgress, setSeekProgress] = useAtom(seekProgressAtom);
 	const setSeeking = useSetAtom(seekingAtom);
 
 	return (
 		<>
 			<Slider
-				progress={progress}
+				progress={seekProgress ?? progress}
 				startSeek={() => {
 					setPlay(false);
 					setSeeking(true);
 				}}
 				endSeek={() => {
 					setSeeking(false);
+					setProgress(seekProgress!);
+					setSeekProgress(null);
 					setTimeout(() => setPlay(true), 10);
 				}}
 				onHover={(progress, layout) => {
 					setHoverProgress(progress);
 					setLayout(layout);
 				}}
-				setProgress={setProgress}
+				setProgress={(progress) => setSeekProgress(progress)}
 				subtleProgress={buffered}
 				max={duration}
 				markers={chapters?.map((x) => x.startTime)}

front/packages/ui/src/player/components/scrubber.tsx

@@ -23,10 +23,11 @@ import { Sprite, P, imageBorderRadius, ts } from "@kyoo/primitives";
 import { View, Platform } from "react-native";
 import { percent, useYoshiki, px, Theme, useForceRerender } from "yoshiki/native";
 import { ErrorView } from "../../fetch";
-import { useMemo, useState } from "react";
+import { useMemo } from "react";
 import { useAtomValue } from "jotai";
-import { durationAtom, progressAtom } from "../state";
+import { durationAtom } from "../state";
 import { toTimerString } from "./left-buttons";
+import { seekProgressAtom } from "./hover";
 
 type Thumb = {
 	from: number;
@@ -147,17 +148,18 @@ export const ScrubberTooltip = ({
 };
 let scrubberWidth = 0;
 
-export const BottomScrubber = ({ url }: { url: string }) => {
+export const BottomScrubber = ({ url, chapters }: { url: string; chapters?: Chapter[] }) => {
 	const { css } = useYoshiki();
 	const { info, error, stats } = useScrubber(url);
 	const rerender = useForceRerender();
 
-	const progress = useAtomValue(progressAtom);
+	const progress = useAtomValue(seekProgressAtom) ?? 0;
 	const duration = useAtomValue(durationAtom) ?? 1;
 
 	if (error) return <ErrorView error={error} />;
 
 	const width = stats?.width ?? 1;
+	const chapter = chapters?.findLast((x) => x.startTime <= progress && progress < x.endTime);
 	return (
 		<View {...css({ overflow: "hidden" })}>
 			<View
@@ -231,6 +233,7 @@ export const BottomScrubber = ({ url }: { url: string }) => {
 					})}
 				>
 					{toTimerString(progress)}
+					{chapter && `\n${chapter.name}`}
 				</P>
 			</View>
 		</View>

transcoder/main.go

@@ -206,7 +206,12 @@ func (h *Handler) GetInfo(c echo.Context) error {
 	if err != nil {
 		return err
 	}
+	// Run extractors to have them in cache
 	h.extractor.RunExtractor(ret.Path, ret.Sha, &ret.Subtitles)
+	h.thumbnails.ExtractThumbnail(
+		ret.Path,
+		fmt.Sprintf("%s/%s/thumbnails.png", resource, slug),
+	)
 	return c.JSON(http.StatusOK, ret)
 }