From 7224255775f2f1e551611f950c37fd9019380686 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Thu, 6 Nov 2025 20:23:22 -0800
Subject: [PATCH] re-add conditional render to ReactPlayer components which
 causes crossfade error

---
 .../audio-player/engine/web-player-engine.tsx | 76 ++++++++++---------
 1 file changed, 40 insertions(+), 36 deletions(-)

diff --git a/src/renderer/features/player/audio-player/engine/web-player-engine.tsx b/src/renderer/features/player/audio-player/engine/web-player-engine.tsx
index 0de875aa2..3f11948cb 100644
--- a/src/renderer/features/player/audio-player/engine/web-player-engine.tsx
+++ b/src/renderer/features/player/audio-player/engine/web-player-engine.tsx
@@ -119,42 +119,46 @@ export const WebPlayerEngine = (props: WebPlayerEngineProps) => {
 
     return (
         <div id="web-player-engine" style={{ display: 'none' }}>
-            <ReactPlayer
-                config={{
-                    file: { attributes: { crossOrigin: 'anonymous' }, forceAudio: true },
-                }}
-                controls={false}
-                height={0}
-                id="web-player-1"
-                muted={isMuted}
-                onEnded={src1 ? () => onEndedPlayer1() : undefined}
-                onProgress={onProgressPlayer1}
-                playbackRate={speed || 1}
-                playing={playerNum === 1 && playerStatus === PlayerStatus.PLAYING}
-                progressInterval={isTransitioning ? 10 : 250}
-                ref={player1Ref}
-                url={src1 || EMPTY_SOURCE}
-                volume={volume1}
-                width={0}
-            />
-            <ReactPlayer
-                config={{
-                    file: { attributes: { crossOrigin: 'anonymous' }, forceAudio: true },
-                }}
-                controls={false}
-                height={0}
-                id="web-player-2"
-                muted={isMuted}
-                onEnded={src2 ? () => onEndedPlayer2() : undefined}
-                onProgress={onProgressPlayer2}
-                playbackRate={speed || 1}
-                playing={playerNum === 2 && playerStatus === PlayerStatus.PLAYING}
-                progressInterval={isTransitioning ? 10 : 250}
-                ref={player2Ref}
-                url={src2 || EMPTY_SOURCE}
-                volume={volume2}
-                width={0}
-            />
+            {Boolean(src1) && (
+                <ReactPlayer
+                    config={{
+                        file: { attributes: { crossOrigin: 'anonymous' }, forceAudio: true },
+                    }}
+                    controls={false}
+                    height={0}
+                    id="web-player-1"
+                    muted={isMuted}
+                    onEnded={src1 ? () => onEndedPlayer1() : undefined}
+                    onProgress={onProgressPlayer1}
+                    playbackRate={speed || 1}
+                    playing={playerNum === 1 && playerStatus === PlayerStatus.PLAYING}
+                    progressInterval={isTransitioning ? 10 : 250}
+                    ref={player1Ref}
+                    url={src1 || EMPTY_SOURCE}
+                    volume={volume1}
+                    width={0}
+                />
+            )}
+            {Boolean(src2) && (
+                <ReactPlayer
+                    config={{
+                        file: { attributes: { crossOrigin: 'anonymous' }, forceAudio: true },
+                    }}
+                    controls={false}
+                    height={0}
+                    id="web-player-2"
+                    muted={isMuted}
+                    onEnded={src2 ? () => onEndedPlayer2() : undefined}
+                    onProgress={onProgressPlayer2}
+                    playbackRate={speed || 1}
+                    playing={playerNum === 2 && playerStatus === PlayerStatus.PLAYING}
+                    progressInterval={isTransitioning ? 10 : 250}
+                    ref={player2Ref}
+                    url={src2 || EMPTY_SOURCE}
+                    volume={volume2}
+                    width={0}
+                />
+            )}
         </div>
     );
 };