Mirrors/movie-web
2
0
Fork 0
mirror of https://github.com/movie-web/movie-web.git synced 2024-11-13 08:15:06 +01:00
Code Issues Packages Projects Releases Wiki Activity

change sub render positioning to absolute

Browse Source
This commit is contained in:
frost768 2023-03-16 21:35:22 +03:00
parent 20addc039c
commit 9fe7bdcf47
2 changed files with 19 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/video/components/Caption.tsx
View File

@ -17,7 +17,6 @@ export function Caption({ text }: { text?: string }) {
}), }),
}} }}
style={{ style={{
whiteSpace: "pre-wrap",
...captionSettings.style, ...captionSettings.style,
}} }}
/> />

33
src/video/components/CaptionRenderer.tsx
View File

@ -1,3 +1,4 @@
import { Transition } from "@/components/Transition";
import { useSettings } from "@/state/settings"; import { useSettings } from "@/state/settings";
import { parse, Cue } from "node-webvtt"; import { parse, Cue } from "node-webvtt";
import { useRef } from "react"; import { useRef } from "react";
@ -29,7 +30,7 @@ export function CaptionRenderer({
} else { } else {
captions.current = []; captions.current = [];
} }
}, [source]); }, [source?.caption?.url]);
if (!captions.current.length) return null; if (!captions.current.length) return null;
const isVisible = (start: number, end: number): boolean => { const isVisible = (start: number, end: number): boolean => {
@ -41,18 +42,22 @@ export function CaptionRenderer({
); );
}; };
return ( return (
<span className="flex h-full flex-col items-center justify-end"> <Transition
{captions.current.map( className={[
({ identifier, end, start, text }) => "absolute flex w-full flex-col items-center transition-[bottom]",
isVisible(start, end) && ( isControlsShown ? "bottom-24" : "bottom-12",
<Caption key={identifier || `${start}-${end}`} text={text} /> ].join(" ")}
) animation="slide-up"
)} show
{isControlsShown ? ( >
<div className="h-[100px]" /> <span>
) : ( {captions.current.map(
<div className="h-[50px]" /> ({ identifier, end, start, text }) =>
)} isVisible(start, end) && (
</span> <Caption key={identifier || `${start}-${end}`} text={text} />
)
)}
</span>
</Transition>
); );
} }