Add live broadcast detection and UI indicator

Introduces isLiveBroadcast to VideoState and PlayerContext to detect live streams (duration is Infinity or 0). Updates ControlsLayer to show a 'LIVE' badge and hide progress/time for live broadcasts. Adjusts VideoElement to set and update isLiveBroadcast on metadata and duration changes. Adds related CSS for the live indicator and improves ESLint config for unused vars.
This commit is contained in:
hibna
2025-11-04 06:52:24 +03:00
parent 870a4d5a4e
commit 52ca1ef6c2
8 changed files with 109 additions and 11 deletions
+15 -5
View File
@@ -210,17 +210,27 @@ export const ControlsLayer: React.FC<ControlsLayerProps> = ({
{/* Bottom controls bar */}
<div className="controls-bar">
{/* Progress bar (full width on top) */}
<div className="progress-container">
<ProgressBar />
</div>
{/* Progress bar (full width on top) - hidden for live broadcasts */}
{!videoState.isLiveBroadcast && (
<div className="progress-container">
<ProgressBar />
</div>
)}
{/* Control buttons */}
<div className="controls-row">
<div className="controls-left">
<PlayPauseButton />
<VolumeControl />
<TimeDisplay />
{/* Time display - hidden for live broadcasts */}
{!videoState.isLiveBroadcast && <TimeDisplay />}
{/* Show "LIVE" badge for live broadcasts */}
{videoState.isLiveBroadcast && (
<div className="live-indicator">
<span className="live-dot"></span>
<span className="live-text">LIVE</span>
</div>
)}
</div>
<div className="controls-right">