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

cleanup caption cues

Browse Source
This commit is contained in:
mrjvs 2023-03-19 20:10:18 +01:00
parent 12f7f2ee03
commit 51dfef18fb
1 changed files with 22 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/video/components/actions/CaptionRendererAction.tsx
View File

@ -10,23 +10,32 @@ import { useSource } from "../../state/logic/source";
function CaptionCue({ text }: { text?: string }) { function CaptionCue({ text }: { text?: string }) {
const { captionSettings } = useSettings(); const { captionSettings } = useSettings();
const textWithNewlines = (text || "").replaceAll(/\r?\n/g, "<br />");
// https://www.w3.org/TR/webvtt1/#dom-construction-rules
// added a <br /> for newlines
const html = sanitize(textWithNewlines, {
ALLOWED_TAGS: ["c", "b", "i", "u", "span", "ruby", "rt", "br"],
ADD_TAGS: ["v", "lang"],
ALLOWED_ATTR: ["title", "lang"],
});
return ( return (
<span <p
className="pointer-events-none mb-1 select-none whitespace-pre-line rounded px-4 py-1 text-center [text-shadow:0_2px_4px_rgba(0,0,0,0.5)]" className="pointer-events-none mb-1 select-none rounded px-4 py-1 text-center [text-shadow:0_2px_4px_rgba(0,0,0,0.5)]"
dir="auto"
// eslint-disable-next-line react/no-danger
dangerouslySetInnerHTML={{
__html: sanitize(text || "", {
// https://www.w3.org/TR/webvtt1/#dom-construction-rules
ALLOWED_TAGS: ["c", "b", "i", "u", "span", "ruby", "rt"],
ADD_TAGS: ["v", "lang"],
ALLOWED_ATTR: ["title", "lang"],
}),
}}
style={{ style={{
...captionSettings.style, ...captionSettings.style,
}} }}
/> >
<span
// its sanitised a few lines up
// eslint-disable-next-line react/no-danger
dangerouslySetInnerHTML={{
__html: html,
}}
dir="auto"
/>
</p>
); );
} }