re-add conditional render to ReactPlayer components which causes crossfade error

This commit is contained in:
jeffvli
2025-11-06 20:23:22 -08:00
parent d6ea97fa2a
commit 9c3053608d
@@ -119,42 +119,46 @@ export const WebPlayerEngine = (props: WebPlayerEngineProps) => {
return ( return (
<div id="web-player-engine" style={{ display: 'none' }}> <div id="web-player-engine" style={{ display: 'none' }}>
<ReactPlayer {Boolean(src1) && (
config={{ <ReactPlayer
file: { attributes: { crossOrigin: 'anonymous' }, forceAudio: true }, config={{
}} file: { attributes: { crossOrigin: 'anonymous' }, forceAudio: true },
controls={false} }}
height={0} controls={false}
id="web-player-1" height={0}
muted={isMuted} id="web-player-1"
onEnded={src1 ? () => onEndedPlayer1() : undefined} muted={isMuted}
onProgress={onProgressPlayer1} onEnded={src1 ? () => onEndedPlayer1() : undefined}
playbackRate={speed || 1} onProgress={onProgressPlayer1}
playing={playerNum === 1 && playerStatus === PlayerStatus.PLAYING} playbackRate={speed || 1}
progressInterval={isTransitioning ? 10 : 250} playing={playerNum === 1 && playerStatus === PlayerStatus.PLAYING}
ref={player1Ref} progressInterval={isTransitioning ? 10 : 250}
url={src1 || EMPTY_SOURCE} ref={player1Ref}
volume={volume1} url={src1 || EMPTY_SOURCE}
width={0} volume={volume1}
/> width={0}
<ReactPlayer />
config={{ )}
file: { attributes: { crossOrigin: 'anonymous' }, forceAudio: true }, {Boolean(src2) && (
}} <ReactPlayer
controls={false} config={{
height={0} file: { attributes: { crossOrigin: 'anonymous' }, forceAudio: true },
id="web-player-2" }}
muted={isMuted} controls={false}
onEnded={src2 ? () => onEndedPlayer2() : undefined} height={0}
onProgress={onProgressPlayer2} id="web-player-2"
playbackRate={speed || 1} muted={isMuted}
playing={playerNum === 2 && playerStatus === PlayerStatus.PLAYING} onEnded={src2 ? () => onEndedPlayer2() : undefined}
progressInterval={isTransitioning ? 10 : 250} onProgress={onProgressPlayer2}
ref={player2Ref} playbackRate={speed || 1}
url={src2 || EMPTY_SOURCE} playing={playerNum === 2 && playerStatus === PlayerStatus.PLAYING}
volume={volume2} progressInterval={isTransitioning ? 10 : 250}
width={0} ref={player2Ref}
/> url={src2 || EMPTY_SOURCE}
volume={volume2}
width={0}
/>
)}
</div> </div>
); );
}; };