From 037960f5879863cfa543d5c021239160f3f65622 Mon Sep 17 00:00:00 2001
From: mrjvs <jellevs@gmail.com>
Date: Wed, 18 Oct 2023 15:30:04 +0200
Subject: [PATCH] Fix excessive memory usage on chrome+webkit

---
 .../player/atoms/settings/CaptionsView.tsx           |  1 +
 src/components/player/internals/VideoContainer.tsx   | 12 ++++--------
 src/components/player/utils/captions.ts              |  6 ++----
 3 files changed, 7 insertions(+), 12 deletions(-)

diff --git a/src/components/player/atoms/settings/CaptionsView.tsx b/src/components/player/atoms/settings/CaptionsView.tsx
index a9cdad9a..ea445a34 100644
--- a/src/components/player/atoms/settings/CaptionsView.tsx
+++ b/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()}
diff --git a/src/components/player/internals/VideoContainer.tsx b/src/components/player/internals/VideoContainer.tsx
index 898fbb4e..a9e22eb5 100644
--- a/src/components/player/internals/VideoContainer.tsx
+++ b/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(() => {
diff --git a/src/components/player/utils/captions.ts b/src/components/player/utils/captions.ts
index 1a4d2183..64fa4691 100644
--- a/src/components/player/utils/captions.ts
+++ b/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)}`;
 }