fix(player): toggle captions on plyr layout should show cue

mihar-22 · mihar-22 · commit 1ea562a9e9a8 · 2024-01-25T14:37:37.000+11:00
diff --git a/packages/react/src/components/layouts/plyr/layout.tsx b/packages/react/src/components/layouts/plyr/layout.tsx
@@ -752,9 +752,13 @@ function PlyrCaptions() {
 
   React.useEffect(() => {
     if (!$track) return;
-    return listenEvent($track, 'cue-change', () => {
-      setActiveCue($track?.activeCues[0]);
-    });
+
+    function onCueChange() {
+      setActiveCue($track ? $track.activeCues[0] : null);
+    }
+
+    onCueChange();
+    return listenEvent($track, 'cue-change', onCueChange);
   }, [$track]);
 
   return (
diff --git a/packages/vidstack/src/elements/define/layouts/plyr/shared-layout.ts b/packages/vidstack/src/elements/define/layouts/plyr/shared-layout.ts
@@ -507,11 +507,14 @@ function Captions() {
 
   effect(() => {
     const track = media.$state.textTrack();
-    return track
-      ? listenEvent(track, 'cue-change', () => {
-          activeCue.set(track?.activeCues[0]);
-        })
-      : null;
+    if (!track) return;
+
+    function onCueChange() {
+      activeCue.set(track?.activeCues[0]);
+    }
+
+    onCueChange();
+    return listenEvent(track, 'cue-change', onCueChange);
   });
 
   return html`
