From c95f826739846b804112d6d8d635aef0f8fb9db7 Mon Sep 17 00:00:00 2001
From: 4gray <4gray@users.noreply.github.com>
Date: Sat, 8 Aug 2026 21:43:05 +0200
Subject: [PATCH] fix(playback): keep Video.js controls on the live MPEG-TS
 path (#1385)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Video.js was constructed without the controls option — the component relied
on a [controls] template binding on the original <video> element instead.
player.reset(), which every raw MPEG-TS/live source change goes through,
replaces the tech <video> element; the binding's target is disposed, so live
playback ended up with no native controls and a vjs-controls-disabled control
bar: no visible controls at all.

Enable controls through the Video.js constructor options in legacy mode and
drop the template binding. The Video.js control bar is a player-level child
that survives loadTech_, so it stays across resets — and the quality selector
and aspect-ratio panel buttons it hosts become reachable again.

Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
---
 .changes/playback-vjs-live-controls.md        |  9 +++++++++
 .../lib/vjs-player/vjs-player-setup.spec.ts   | 20 +++++++++++++++++++
 .../src/lib/vjs-player/vjs-player-setup.ts    |  7 ++++++-
 .../lib/vjs-player/vjs-player.component.html  |  1 -
 .../vjs-player/vjs-player.component.spec.ts   |  5 ++++-
 5 files changed, 39 insertions(+), 3 deletions(-)
 create mode 100644 .changes/playback-vjs-live-controls.md

diff --git a/.changes/playback-vjs-live-controls.md b/.changes/playback-vjs-live-controls.md
new file mode 100644
index 000000000..3a4ef07e0
--- /dev/null
+++ b/.changes/playback-vjs-live-controls.md
@@ -0,0 +1,9 @@
+---
+type: fix
+area: playback
+---
+
+Video.js now shows its own control bar (play/pause, seek, volume, quality,
+fullscreen) on Live TV channels. Previously live streams played with no visible
+controls at all, because switching to a live source rebuilt the video element
+and the controls never came back.
diff --git a/libs/ui/playback/src/lib/vjs-player/vjs-player-setup.spec.ts b/libs/ui/playback/src/lib/vjs-player/vjs-player-setup.spec.ts
index 6bdb12587..8abefa924 100644
--- a/libs/ui/playback/src/lib/vjs-player/vjs-player-setup.spec.ts
+++ b/libs/ui/playback/src/lib/vjs-player/vjs-player-setup.spec.ts
@@ -19,9 +19,29 @@ describe('Video.js player setup', () => {
         expect(createVjsPlayerOptions(options, false, false)).toEqual({
             ...options,
             autoplay: true,
+            controls: true,
         });
     });
 
+    it('keeps Video.js controls enabled on the raw MPEG-TS legacy path', () => {
+        // player.reset() replaces the tech <video>, so the control bar must
+        // come from the constructor option — a template binding on the
+        // original element cannot survive the swap.
+        expect(
+            createVjsPlayerOptions(
+                { sources: [{ src: 'https://example.test/live.ts' }] },
+                true,
+                false
+            )
+        ).toEqual(
+            expect.objectContaining({
+                sources: [],
+                autoplay: false,
+                controls: true,
+            })
+        );
+    });
+
     it('removes duplicate Video.js interaction ownership for shared controls', () => {
         expect(
             createVjsPlayerOptions(
diff --git a/libs/ui/playback/src/lib/vjs-player/vjs-player-setup.ts b/libs/ui/playback/src/lib/vjs-player/vjs-player-setup.ts
index 2cc656c0a..992386bfa 100644
--- a/libs/ui/playback/src/lib/vjs-player/vjs-player-setup.ts
+++ b/libs/ui/playback/src/lib/vjs-player/vjs-player-setup.ts
@@ -13,7 +13,12 @@ export function createVjsPlayerOptions(
         ? { ...options, sources: [], autoplay: false }
         : { ...options, autoplay: true };
     if (!sharedControls) {
-        return baseOptions;
+        // Controls must be enabled through the constructor, not a `[controls]`
+        // template binding: `player.reset()` (raw MPEG-TS/live path) replaces
+        // the tech <video> element, and a binding to the original element can
+        // never reach the replacement — Video.js's own control bar lives
+        // outside the tech element and survives the swap.
+        return { ...baseOptions, controls: true };
     }
     return {
         ...baseOptions,
diff --git a/libs/ui/playback/src/lib/vjs-player/vjs-player.component.html b/libs/ui/playback/src/lib/vjs-player/vjs-player.component.html
index 269f42e2b..e58c2dd36 100644
--- a/libs/ui/playback/src/lib/vjs-player/vjs-player.component.html
+++ b/libs/ui/playback/src/lib/vjs-player/vjs-player.component.html
@@ -2,7 +2,6 @@
     <video
         #target
         class="video-js"
-        [controls]="!sharedControls"
         muted
         playsinline
         preload="none"
diff --git a/libs/ui/playback/src/lib/vjs-player/vjs-player.component.spec.ts b/libs/ui/playback/src/lib/vjs-player/vjs-player.component.spec.ts
index bb2d7ce58..ae289b05c 100644
--- a/libs/ui/playback/src/lib/vjs-player/vjs-player.component.spec.ts
+++ b/libs/ui/playback/src/lib/vjs-player/vjs-player.component.spec.ts
@@ -78,13 +78,16 @@ describe('VjsPlayerComponent', () => {
             expect.any(Element),
             expect.objectContaining({
                 autoplay: true,
+                controls: true,
                 userActions: { hotkeys: true },
                 spatialNavigation: { enabled: true },
             }),
             expect.any(Function)
         );
+        // Native controls stay off: Video.js owns the control bar, and the
+        // bar has to survive the tech-element swap in player.reset().
         expect(fixture.nativeElement.querySelector('video').controls).toBe(
-            true
+            false
         );
         expect(
             fixture.nativeElement.querySelector('app-player-controls')