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:
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user