feat(web-ui): seamless channel switch with dual video slots by stackia · Pull Request #538 · stackia/rtp2httpd

stackia · 2026-06-14T16:50:22Z

Summary

Add dual video slot playback so channel and source line switches load on a hidden player while the current stream keeps playing, then hard-switch once the new stream is ready (or fails).
Keep seek, EPG program changes, and out-of-buffer reloads on a single slot with the existing in-place loadSegments behavior.
Default to 16:9 stretched display (remove the force 16:9 setting) and size the frame with ResizeObserver instead of CSS container queries.

Test plan

Switch channels while playing: old video stays visible until the new stream starts; no infinite reload loop
Switch source line on a multi-source channel: same seamless behavior as channel switch
Out-of-buffer seek / EPG / progress bar seek: single-slot reload (brief black screen acceptable)
New stream load failure during channel switch: UI switches to the new slot and shows retry/error on the target channel
Verify 16:9 frame fills the player area with letterboxing on one axis; 4:3 content is stretched to 16:9
Test on browsers without container query support (Safari 15–15.x, older WebViews)

Made with Cursor

Use two stacked video elements so channel changes and out-of-buffer seeks load on a hidden player while the current stream keeps playing, then swap once the new stream starts to avoid black-screen gaps. Co-authored-by: Cursor <cursoragent@cursor.com>

Limit seamless hard-switch to channel or source line changes; keep seek and EPG reloads on a single slot. Always reveal the new slot on load failure, fix video layering/centering, and rebuild embedded web UI. Co-authored-by: Cursor <cursoragent@cursor.com>

Always stretch video to a 16:9 frame, remove the force-16:9 setting, and size the frame with ResizeObserver for broader browser support. Co-authored-by: Cursor <cursoragent@cursor.com>

github-actions · 2026-06-14T16:51:50Z

Azure Static Web Apps: Your stage site is ready! Visit it here: https://thankful-water-0a297bf00-538.eastasia.1.azurestaticapps.net

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 9d227f1994

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

…ects Skip dual-slot when paused, unify retry segment reload, and sync player settings via explicit effects instead of suppressing exhaustive-deps. Co-authored-by: Cursor <cursoragent@cursor.com>

github-actions · 2026-06-14T17:06:20Z

Azure Static Web Apps: Your stage site is ready! Visit it here: https://thankful-water-0a297bf00-538.eastasia.1.azurestaticapps.net

Copilot

Pull request overview

This PR updates the web UI player to support seamless channel/source switching by preloading the next stream in a hidden “slot” and hard-switching once playback starts, while also removing the force-16:9 toggle in favor of a ResizeObserver-sized 16:9 frame with stretched video rendering.

Changes:

Implement dual video-slot playback in VideoPlayer to enable seamless channel/source switching during active playback.
Remove the “Force 16:9” setting and its persisted storage/i18n strings.
Replace CSS container queries with ResizeObserver-driven sizing for a 16:9 video frame and object-fit: fill.

Reviewed changes

Copilot reviewed 6 out of 7 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
web-ui/src/pages/player.tsx	Removes force-16:9 state/plumbing from the player page and settings wiring.
web-ui/src/lib/player-storage.ts	Drops persisted storage for the removed force-16:9 option.
web-ui/src/index.css	Replaces container-query sizing with styles supporting ResizeObserver-sized 16:9 frame and stretched content.
web-ui/src/i18n/player.ts	Removes i18n strings for the deleted force-16:9 setting.
web-ui/src/components/player/video-player.tsx	Core implementation of dual-slot seamless switching, ResizeObserver sizing, and updated event handling for two video elements.
web-ui/src/components/player/settings-dropdown.tsx	Removes the force-16:9 toggle UI and related props.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Gate seamless switch on active playback, fall back to in-place load when hidden slot creation fails, fix duplicated media error label, and revert default 16:9 stretch / ResizeObserver changes from this PR. Co-authored-by: Cursor <cursoragent@cursor.com>

github-actions · 2026-06-14T17:11:13Z

Azure Static Web Apps: Your stage site is ready! Visit it here: https://thankful-water-0a297bf00-538.eastasia.1.azurestaticapps.net

Pass channel id and source index from VideoPlayer when playback starts to avoid stale closure overwriting localStorage. Revert embedded_web_data.h to main so this PR does not include rebuilt embed artifacts. Co-authored-by: Cursor <cursoragent@cursor.com>

github-actions · 2026-06-14T17:15:59Z

Azure Static Web Apps: Your stage site is ready! Visit it here: https://thankful-water-0a297bf00-538.eastasia.1.azurestaticapps.net

Clone object defaults in createStore so mutating the returned map does not alias defaultValue and skip setItem. Revert the redundant playback callback signature change from the prior attempt. Co-authored-by: Cursor <cursoragent@cursor.com>

github-actions · 2026-06-14T17:22:00Z

Azure Static Web Apps: Your stage site is ready! Visit it here: https://thankful-water-0a297bf00-538.eastasia.1.azurestaticapps.net

Only use seamless switching in live mode so automatic catchup fallback to another source line reloads in-place like a seek. Co-authored-by: Cursor <cursoragent@cursor.com>

github-actions · 2026-06-14T17:24:04Z

Azure Static Web Apps: Your stage site is ready! Visit it here: https://thankful-water-0a297bf00-538.eastasia.1.azurestaticapps.net

Copilot

Pull request overview

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

Expose dual-slot channel switching as a user setting (default on) and fix container sizing so force 16:9 letterboxing fills the player correctly. Co-authored-by: Cursor <cursoragent@cursor.com>

github-actions · 2026-06-14T17:34:10Z

Azure Static Web Apps: Your stage site is ready! Visit it here: https://thankful-water-0a297bf00-538.eastasia.1.azurestaticapps.net

Only lock the player container to 16:9 when force 16:9 is enabled; let 4:3 and other native ratios size the mobile viewport by video height. Co-authored-by: Cursor <cursoragent@cursor.com>

github-actions · 2026-06-14T17:45:15Z

Azure Static Web Apps: Your stage site is ready! Visit it here: https://thankful-water-0a297bf00-538.eastasia.1.azurestaticapps.net

Always display video in 16:9 and drop the toggle, storage key, and native-ratio layout path. Co-authored-by: Cursor <cursoragent@cursor.com>

github-actions · 2026-06-14T17:55:32Z

Azure Static Web Apps: Your stage site is ready! Visit it here: https://thankful-water-0a297bf00-538.eastasia.1.azurestaticapps.net

Track retry-seek with a ref instead of batched state toggles so segment updates from recovery do not reset backoff counters. Co-authored-by: Cursor <cursoragent@cursor.com>

github-actions · 2026-06-14T18:00:23Z

Azure Static Web Apps: Your stage site is ready! Visit it here: https://thankful-water-0a297bf00-538.eastasia.1.azurestaticapps.net

Align code identifiers and storage key with the seamless switch setting name. Co-authored-by: Cursor <cursoragent@cursor.com>

github-actions · 2026-06-14T18:01:47Z

Azure Static Web Apps: Your stage site is ready! Visit it here: https://thankful-water-0a297bf00-538.eastasia.1.azurestaticapps.net

stackia and others added 3 commits June 15, 2026 00:24

fix(web-ui): default 16:9 display and replace container queries

9d227f1

Always stretch video to a 16:9 frame, remove the force-16:9 setting, and size the frame with ResizeObserver for broader browser support. Co-authored-by: Cursor <cursoragent@cursor.com>

stackia marked this pull request as ready for review June 14, 2026 16:54

chatgpt-codex-connector Bot reviewed Jun 14, 2026

View reviewed changes

Comment thread web-ui/src/components/player/video-player.tsx Outdated

fix(web-ui): gate seamless switch on playback and refactor player eff…

b777cf7

…ects Skip dual-slot when paused, unify retry segment reload, and sync player settings via explicit effects instead of suppressing exhaustive-deps. Co-authored-by: Cursor <cursoragent@cursor.com>

stackia requested a review from Copilot June 14, 2026 17:05

Copilot started reviewing on behalf of stackia June 14, 2026 17:05 View session

Copilot AI reviewed Jun 14, 2026

View reviewed changes

Comment thread web-ui/src/components/player/video-player.tsx Outdated

Comment thread web-ui/src/components/player/video-player.tsx Outdated

fix(web-ui): disable dual-slot switch during catchup source fallback

65b5d2f

Only use seamless switching in live mode so automatic catchup fallback to another source line reloads in-place like a seek. Co-authored-by: Cursor <cursoragent@cursor.com>

stackia requested a review from Copilot June 14, 2026 17:22

Copilot started reviewing on behalf of stackia June 14, 2026 17:23 View session

Copilot AI reviewed Jun 14, 2026

View reviewed changes

Comment thread web-ui/src/components/player/video-player.tsx Outdated

feat(web-ui): add seamless switch toggle and fix video layout

18810a7

Expose dual-slot channel switching as a user setting (default on) and fix container sizing so force 16:9 letterboxing fills the player correctly. Co-authored-by: Cursor <cursoragent@cursor.com>

fix(web-ui): prevent native-ratio video overflow on mobile

31edf5c

Only lock the player container to 16:9 when force 16:9 is enabled; let 4:3 and other native ratios size the mobile viewport by video height. Co-authored-by: Cursor <cursoragent@cursor.com>

refactor(web-ui): remove force 16:9 setting

b690859

Always display video in 16:9 and drop the toggle, storage key, and native-ratio layout path. Co-authored-by: Cursor <cursoragent@cursor.com>

fix(web-ui): preserve retry counters during error recovery reload

d571f19

Track retry-seek with a ref instead of batched state toggles so segment updates from recovery do not reset backoff counters. Co-authored-by: Cursor <cursoragent@cursor.com>

refactor(web-ui): rename smoothSwitch to seamlessSwitch

359041a

Align code identifiers and storage key with the seamless switch setting name. Co-authored-by: Cursor <cursoragent@cursor.com>

stackia merged commit cc53129 into main Jun 14, 2026
10 checks passed

stackia deleted the smooth-channel-switch branch June 14, 2026 18:03

Conversation

stackia commented Jun 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Test plan

Uh oh!

github-actions Bot commented Jun 14, 2026

Uh oh!

chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

Uh oh!

github-actions Bot commented Jun 14, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

github-actions Bot commented Jun 14, 2026

Uh oh!

github-actions Bot commented Jun 14, 2026

Uh oh!

github-actions Bot commented Jun 14, 2026

Uh oh!

github-actions Bot commented Jun 14, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

github-actions Bot commented Jun 14, 2026

Uh oh!

github-actions Bot commented Jun 14, 2026

Uh oh!

github-actions Bot commented Jun 14, 2026

Uh oh!

github-actions Bot commented Jun 14, 2026

Uh oh!

github-actions Bot commented Jun 14, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

stackia commented Jun 14, 2026 •

edited

Loading