Fix excessive memory usage on chrome+webkit

src/components/player/atoms/settings/CaptionsView.tsx

@@ -81,6 +81,7 @@ export function CaptionsView({ id }: { id: string }) {
         <CaptionOption onClick={() => disableCaption()}>Off</CaptionOption>
         {langs.map((v) => (
           <CaptionOption
+            key={v.lang}
             countryCode={v.lang}
             selected={lang === v.lang}
             onClick={() => updateCaption()}

src/components/player/internals/VideoContainer.tsx

@@ -1,10 +1,7 @@
 import { ReactNode, useEffect, useMemo, useRef } from "react";
 
 import { makeVideoElementDisplayInterface } from "@/components/player/display/base";
-import {
-  convertSubtitlesToVtt,
-  vttToDataurl,
-} from "@/components/player/utils/captions";
+import { convertSubtitlesToDataurl } from "@/components/player/utils/captions";
 import { playerStatus } from "@/stores/player/slices/source";
 import { usePlayerStore } from "@/stores/player/store";
 
@@ -47,10 +44,9 @@ function VideoElement() {
   const captionAsTrack = usePlayerStore((s) => s.caption.asTrack);
   const language = usePlayerStore((s) => s.caption.selected?.language);
 
-  const trackData = useMemo(
-    () => (srtData ? vttToDataurl(convertSubtitlesToVtt(srtData)) : null),
-    [srtData]
-  );
+  const trackData = useMemo(() => {
+    return srtData ? convertSubtitlesToDataurl(srtData) : null;
+  }, [srtData]);
 
   // report video element to display interface
   useEffect(() => {

src/components/player/utils/captions.ts

@@ -40,8 +40,6 @@ export function parseSubtitles(text: string): CaptionCueType[] {
   return parse(vtt).filter((cue) => cue.type === "caption") as CaptionCueType[];
 }
 
-export function vttToDataurl(vtt: string): string {
-  const bytes = new TextEncoder().encode(vtt);
-  const encoded = btoa(String.fromCodePoint(...bytes));
-  return `data:text/vtt;base64,${encoded}`;
+export function convertSubtitlesToDataurl(text: string): string {
+  return `data:text/vtt;${convertSubtitlesToVtt(text)}`;
 }