Sync the scrobber with the current progress

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

@@ -152,6 +152,7 @@ export const Hover = ({
 									{isLoading ? <Skeleton {...css({ width: rem(15), height: rem(2) })} /> : name}
 								</H2>
 								<ProgressBar chapters={chapters} />
+								<BottomScrubber url={url}/>
 								<View
 									{...css({
 										flexDirection: "row",
@@ -173,7 +174,6 @@ export const Hover = ({
 										}}
 									/>
 								</View>
-								<BottomScrubber url={url}/>
 							</View>
 						</View>
 					</View>

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

@@ -19,12 +19,15 @@
  */
 
 import { useFetch, QueryIdentifier, imageFn } from "@kyoo/models";
-import { FastImage } from "@kyoo/primitives";
+import { FastImage, P, imageBorderRadius, tooltip, ts } from "@kyoo/primitives";
 import { Platform, View } from "react-native";
-import { percent, useYoshiki, vh } from "yoshiki/native";
+import { percent, useYoshiki, px, vh } from "yoshiki/native";
 import { ErrorView } from "../../fetch";
 import { useMemo } from "react";
 import { CssObject } from "yoshiki/src/web/generator";
+import { useAtomValue } from "jotai";
+import { durationAtom, progressAtom } from "../state";
+import { toTimerString } from "./left-buttons";
 
 type Thumb = { to: number; url: string; x: number; y: number; width: number; height: number };
 
@@ -64,27 +67,78 @@ export const BottomScrubber = ({ url }: { url: string }) => {
 		return ret;
 	}, [data]);
 
+	const progress = useAtomValue(progressAtom);
+	const duration = useAtomValue(durationAtom);
+
 	if (error) return <ErrorView error={error} />;
 
+	const width = info?.[0]?.width ?? 0;
 	return (
-		<View {...css({ flexDirection: "row", width: percent(100) })}>
-			{info.map((thumb) => (
-				<FastImage
-					key={thumb.to}
-					src={thumb.url}
-					alt=""
-					width={thumb.width}
-					height={thumb.height}
-					style={
-						Platform.OS === "web"
-							? ({
-									objectFit: "none",
-									objectPosition: `${-thumb.x}px ${-thumb.y}px`,
-							  } as CssObject)
-							: undefined
-					}
-				/>
-			))}
+		<View {...css({ overflow: "hidden" })}>
+			<View
+				{...css(
+					{ flexDirection: "row" },
+					{
+						style: {
+							transform: `translateX(calc(${
+								(progress / duration) * -width * info.length - width / 2
+							}px + 50%))`,
+						},
+					},
+				)}
+			>
+				{info.map((thumb) => (
+					<FastImage
+						key={thumb.to}
+						src={thumb.url}
+						alt=""
+						width={thumb.width}
+						height={thumb.height}
+						style={
+							Platform.OS === "web"
+								? ({
+										objectFit: "none",
+										objectPosition: `${-thumb.x}px ${-thumb.y}px`,
+										flexShrink: 0,
+								  } as CssObject)
+								: undefined
+						}
+					/>
+				))}
+			</View>
+			<View
+				{...css({
+					position: "absolute",
+					top: 0,
+					bottom: 0,
+					left: percent(50),
+					right: percent(50),
+					width: px(3),
+					bg: (theme) => theme.colors.white,
+				})}
+			/>
+			<View
+				{...css({
+					position: "absolute",
+					top: 0,
+					bottom: 0,
+					left: 0,
+					right: 0,
+					alignItems: "center",
+				})}
+			>
+				<P
+					{...css({
+						textAlign: "center",
+						color: (theme) => theme.colors.white,
+						bg: (theme) => theme.darkOverlay,
+						padding: ts(0.5),
+						borderRadius: imageBorderRadius,
+					})}
+				>
+					{toTimerString(progress)}
+				</P>
+			</View>
 		</View>
 	);
 };