Cutlery/Kyoo
1
0
Fork 0
mirror of https://github.com/zoriya/Kyoo.git synced 2025-05-31 04:04:21 -04:00
Code Issues Packages Projects Releases Wiki Activity

Cleanup chapter handling and display the good image

Browse Source
This commit is contained in:
Zoe Roux 2024-01-25 15:09:10 +01:00
parent 7803f8f11a
commit d026f9b418
2 changed files with 33 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
front/packages/ui/src/player/components/hover.tsx
View File

@ -25,6 +25,7 @@ import {
H1, H1,
H2, H2,
IconButton, IconButton,
imageBorderRadius,
Poster, Poster,
PressableFeedback, PressableFeedback,
Skeleton, Skeleton,
@ -337,13 +338,14 @@ const ProgressBar = ({ url, chapters }: { url: string; chapters?: Chapter[] }) =
<Tooltip <Tooltip
id={"progress-scrubber"} id={"progress-scrubber"}
isOpen={hoverProgress !== null} isOpen={hoverProgress !== null}
imperativeModeOnly
position={{ x: layout.x + (layout.width * hoverProgress!) / (duration ?? 1), y: layout.y }} position={{ x: layout.x + (layout.width * hoverProgress!) / (duration ?? 1), y: layout.y }}
render={() => render={() =>
hoverProgress ? ( hoverProgress ? (
<ScrubberTooltip seconds={hoverProgress} chapters={chapters} url={url} /> <ScrubberTooltip seconds={hoverProgress} chapters={chapters} url={url} />
) : null ) : null
} }
opacity={1}
style={{ padding: 0, borderRadius: imageBorderRadius }}
/> />
</> </>
); );

40
front/packages/ui/src/player/components/scrubber.tsx
View File

@ -30,7 +30,20 @@ import { durationAtom, playAtom, progressAtom } from "../state";
import { toTimerString } from "./left-buttons"; import { toTimerString } from "./left-buttons";
import { useSetAtom } from "jotai"; import { useSetAtom } from "jotai";
type Thumb = { to: number; url: string; x: number; y: number; width: number; height: number }; type Thumb = {
from: number;
to: number;
url: string;
x: number;
y: number;
width: number;
height: number;
};
const parseTs = (time: string) => {
const times = time.split(":");
return (parseInt(times[0]) * 3600 + parseInt(times[1]) * 60 + parseFloat(times[2])) * 1000;
};
export const useScrubber = (url: string) => { export const useScrubber = (url: string) => {
const { data, error } = useFetch(useScrubber.query(url)); const { data, error } = useFetch(useScrubber.query(url));
@ -51,13 +64,11 @@ export const useScrubber = (url: string) => {
const ret = new Array<Thumb>(lines.length / 2); const ret = new Array<Thumb>(lines.length / 2);
for (let i = 0; i < ret.length; i++) { for (let i = 0; i < ret.length; i++) {
const times = lines[i * 2].split(" --> "); const times = lines[i * 2].split(" --> ");
const timesV = times[1].split(":");
const ts =
(parseInt(timesV[0]) * 3600 + parseInt(timesV[1]) * 60 + parseFloat(timesV[2])) * 1000;
const url = lines[i * 2 + 1].split("#xywh="); const url = lines[i * 2 + 1].split("#xywh=");
const xywh = url[1].split(",").map((x) => parseInt(x)); const xywh = url[1].split(",").map((x) => parseInt(x));
ret[i] = { ret[i] = {
to: ts, from: parseTs(times[0]),
to: parseTs(times[1]),
url: imageFn("/video/" + url[0]), url: imageFn("/video/" + url[0]),
x: xywh[0], x: xywh[0],
y: xywh[1], y: xywh[1],
@ -105,11 +116,19 @@ export const ScrubberTooltip = ({
if (error) return <ErrorView error={error} />; if (error) return <ErrorView error={error} />;
const current = info.findLast((x) => x.to < seconds * 1000); const current =
const chapter = chapters?.findLast((x) => x.endTime < seconds); info.findLast((x) => x.from <= seconds * 1000 && seconds * 1000 < x.to) ??
info.findLast(() => true);
const chapter = chapters?.findLast((x) => x.startTime <= seconds && seconds < x.endTime);
return ( return (
<View {...css({ justifyContent: "center" })}> <View
{...css({
justifyContent: "center",
borderRadius: imageBorderRadius,
overflow: "hidden",
})}
>
{current && ( {current && (
<FastImage <FastImage
src={current.url} src={current.url}
@ -122,8 +141,9 @@ export const ScrubberTooltip = ({
rows={stats!.rows} rows={stats!.rows}
/> />
)} )}
<P>{toTimerString(seconds)}</P> <P {...css({ textAlign: "center" })}>
{chapter && <P>{chapter.name}</P>} {toTimerString(seconds)} {chapter && `- ${chapter.name}`}
</P>
</View> </View>
); );
}; };