From 51dfef18fb5315fcfc406757050e28218e21dc6d Mon Sep 17 00:00:00 2001
From: mrjvs <jellevs@gmail.com>
Date: Sun, 19 Mar 2023 20:10:18 +0100
Subject: [PATCH] cleanup caption cues

---
 .../actions/CaptionRendererAction.tsx         | 35 ++++++++++++-------
 1 file changed, 22 insertions(+), 13 deletions(-)

diff --git a/src/video/components/actions/CaptionRendererAction.tsx b/src/video/components/actions/CaptionRendererAction.tsx
index 4fed3369..6abc18c9 100644
--- a/src/video/components/actions/CaptionRendererAction.tsx
+++ b/src/video/components/actions/CaptionRendererAction.tsx
@@ -10,23 +10,32 @@ import { useSource } from "../../state/logic/source";
 
 function CaptionCue({ text }: { text?: string }) {
   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 (
-    <span
-      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)]"
-      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"],
-        }),
-      }}
+    <p
+      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)]"
       style={{
         ...captionSettings.style,
       }}
-    />
+    >
+      <span
+        // its sanitised a few lines up
+        // eslint-disable-next-line react/no-danger
+        dangerouslySetInnerHTML={{
+          __html: html,
+        }}
+        dir="auto"
+      />
+    </p>
   );
 }