administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-18 00:54:27 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

pass volume prop to players

Browse Source
This commit is contained in:
Josh Hawkins 2024-12-22 12:26:26 -06:00
parent 9e63194b82
commit 77ee5b1bed
3 changed files with 28 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/src/components/player/LivePlayer.tsx
View File

@ -32,6 +32,7 @@ type LivePlayerProps = {
useWebGL: boolean; useWebGL: boolean;
windowVisible?: boolean; windowVisible?: boolean;
playAudio?: boolean; playAudio?: boolean;
volume?: number;
playInBackground: boolean; playInBackground: boolean;
micEnabled?: boolean; // only webrtc supports mic micEnabled?: boolean; // only webrtc supports mic
iOSCompatFullScreen?: boolean; iOSCompatFullScreen?: boolean;
@ -54,6 +55,7 @@ export default function LivePlayer({
useWebGL = false, useWebGL = false,
windowVisible = true, windowVisible = true,
playAudio = false, playAudio = false,
volume,
playInBackground = false, playInBackground = false,
micEnabled = false, micEnabled = false,
iOSCompatFullScreen = false, iOSCompatFullScreen = false,
@ -188,6 +190,7 @@ export default function LivePlayer({
camera={streamName} camera={streamName}
playbackEnabled={cameraActive || liveReady} playbackEnabled={cameraActive || liveReady}
audioEnabled={playAudio} audioEnabled={playAudio}
volume={volume}
microphoneEnabled={micEnabled} microphoneEnabled={micEnabled}
iOSCompatFullScreen={iOSCompatFullScreen} iOSCompatFullScreen={iOSCompatFullScreen}
onPlaying={playerIsPlaying} onPlaying={playerIsPlaying}
@ -204,6 +207,7 @@ export default function LivePlayer({
camera={streamName} camera={streamName}
playbackEnabled={cameraActive || liveReady} playbackEnabled={cameraActive || liveReady}
audioEnabled={playAudio} audioEnabled={playAudio}
volume={volume}
playInBackground={playInBackground} playInBackground={playInBackground}
onPlaying={playerIsPlaying} onPlaying={playerIsPlaying}
pip={pip} pip={pip}

12
web/src/components/player/MsePlayer.tsx
View File

@ -15,6 +15,7 @@ type MSEPlayerProps = {
className?: string; className?: string;
playbackEnabled?: boolean; playbackEnabled?: boolean;
audioEnabled?: boolean; audioEnabled?: boolean;
volume?: number;
playInBackground?: boolean; playInBackground?: boolean;
pip?: boolean; pip?: boolean;
onPlaying?: () => void; onPlaying?: () => void;
@ -27,6 +28,7 @@ function MSEPlayer({
className, className,
playbackEnabled = true, playbackEnabled = true,
audioEnabled = false, audioEnabled = false,
volume,
playInBackground = false, playInBackground = false,
pip = false, pip = false,
onPlaying, onPlaying,
@ -537,6 +539,16 @@ function MSEPlayer({
videoRef.current.requestPictureInPicture(); videoRef.current.requestPictureInPicture();
}, [pip, videoRef]); }, [pip, videoRef]);
// control volume
useEffect(() => {
if (!videoRef.current || volume == undefined) {
return;
}
videoRef.current.volume = volume;
}, [volume, videoRef]);
// ensure we disconnect for slower connections // ensure we disconnect for slower connections
useEffect(() => { useEffect(() => {

12
web/src/components/player/WebRTCPlayer.tsx
View File

@ -7,6 +7,7 @@ type WebRtcPlayerProps = {
camera: string; camera: string;
playbackEnabled?: boolean; playbackEnabled?: boolean;
audioEnabled?: boolean; audioEnabled?: boolean;
volume?: number;
microphoneEnabled?: boolean; microphoneEnabled?: boolean;
iOSCompatFullScreen?: boolean; // ios doesn't support fullscreen divs so we must support the video element iOSCompatFullScreen?: boolean; // ios doesn't support fullscreen divs so we must support the video element
pip?: boolean; pip?: boolean;
@ -19,6 +20,7 @@ export default function WebRtcPlayer({
camera, camera,
playbackEnabled = true, playbackEnabled = true,
audioEnabled = false, audioEnabled = false,
volume,
microphoneEnabled = false, microphoneEnabled = false,
iOSCompatFullScreen = false, iOSCompatFullScreen = false,
pip = false, pip = false,
@ -194,6 +196,16 @@ export default function WebRtcPlayer({
videoRef.current.requestPictureInPicture(); videoRef.current.requestPictureInPicture();
}, [pip, videoRef]); }, [pip, videoRef]);
// control volume
useEffect(() => {
if (!videoRef.current || volume == undefined) {
return;
}
videoRef.current.volume = volume;
}, [volume, videoRef]);
useEffect(() => { useEffect(() => {
videoLoadTimeoutRef.current = setTimeout(() => { videoLoadTimeoutRef.current = setTimeout(() => {
onError?.("stalled"); onError?.("stalled");