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

src/renderer/features/player/audio-player/engine/web-player-engine.tsx

@@ -119,6 +119,7 @@ export const WebPlayerEngine = (props: WebPlayerEngineProps) => {
 
     return (
         <div id="web-player-engine" style={{ display: 'none' }}>
+            {Boolean(src1) && (
                 <ReactPlayer
                     config={{
                         file: { attributes: { crossOrigin: 'anonymous' }, forceAudio: true },
@@ -137,6 +138,8 @@ export const WebPlayerEngine = (props: WebPlayerEngineProps) => {
                     volume={volume1}
                     width={0}
                 />
+            )}
+            {Boolean(src2) && (
                 <ReactPlayer
                     config={{
                         file: { attributes: { crossOrigin: 'anonymous' }, forceAudio: true },
@@ -155,6 +158,7 @@ export const WebPlayerEngine = (props: WebPlayerEngineProps) => {
                     volume={volume2}
                     width={0}
                 />
+            )}
         </div>
     );
 };