re-implement playerbar controls

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

@@ -4,6 +4,7 @@ import { useImperativeHandle, useRef, useState } from 'react';
 import ReactPlayer from 'react-player';
 
 import { AudioPlayer } from '/@/renderer/features/player/audio-player/types';
+import { convertToLogVolume } from '/@/renderer/features/player/audio-player/utils/player-utils';
 import { PlayerStatus } from '/@/shared/types/types';
 
 export interface OnProgressProps {
@@ -120,52 +121,49 @@ export const WebPlayerEngine = (props: WebPlayerEngineProps) => {
         },
     }));
 
+    const volume1 = convertToLogVolume(internalVolume1);
+    const volume2 = convertToLogVolume(internalVolume2);
+
     return (
-        <>
-            {Boolean(src1) && (
-                <ReactPlayer
-                    config={{
-                        file: { attributes: { crossOrigin: 'anonymous' }, forceAudio: true },
-                    }}
-                    controls={false}
-                    height={0}
-                    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={convertToLogVolume(internalVolume1)}
-                    width={0}
-                />
-            )}
-            {Boolean(src2) && (
-                <ReactPlayer
-                    config={{
-                        file: { attributes: { crossOrigin: 'anonymous' }, forceAudio: true },
-                    }}
-                    controls={false}
-                    height={0}
-                    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={convertToLogVolume(internalVolume2)}
-                    width={0}
-                />
-            )}
-        </>
+        <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}
+            />
+        </div>
     );
 };
 
 WebPlayerEngine.displayName = 'WebPlayerEngine';
-
-function convertToLogVolume(linearVolume: number) {
-    return Math.pow(linearVolume, 2.0);
-}

src/renderer/features/player/audio-player/listener/player-events.tsx

@@ -30,10 +30,7 @@ export interface PlayerEventsCallbacks {
         prev: { timestamp: number },
     ) => void;
     onPlayerSpeed?: (properties: { speed: number }, prev: { speed: number }) => void;
-    onPlayerStatus?: (
-        properties: { song: QueueSong | undefined; status: PlayerStatus },
-        prev: { song: QueueSong | undefined; status: PlayerStatus },
-    ) => void;
+    onPlayerStatus?: (properties: { status: PlayerStatus }, prev: { status: PlayerStatus }) => void;
     onPlayerVolume?: (properties: { volume: number }, prev: { volume: number }) => void;
 }
 

src/renderer/features/player/audio-player/utils/player-utils.ts

@@ -0,0 +1,3 @@
+export const convertToLogVolume = (linearVolume: number) => {
+    return Math.pow(linearVolume, 2.0);
+};

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

@@ -21,13 +21,13 @@ const PLAY_PAUSE_FADE_INTERVAL = 10;
 
 export function WebPlayer() {
     const playerRef = useRef<WebPlayerEngineHandle>(null);
-    const { player, player1, player2 } = usePlayerData();
+    const { num, player1, player2, status } = usePlayerData();
     const { mediaAutoNext, setProgress } = usePlayerActions();
     const { crossfadeDuration, speed, transitionType } = usePlayerProperties();
     const isMuted = usePlayerMuted();
     const volume = usePlayerVolume();
 
-    const [localPlayerStatus, setLocalPlayerStatus] = useState<PlayerStatus>(player.status);
+    const [localPlayerStatus, setLocalPlayerStatus] = useState<PlayerStatus>(status);
     const [isTransitioning, setIsTransitioning] = useState<boolean | string>(false);
 
     const fadeAndSetStatus = useCallback(
@@ -68,7 +68,7 @@ export function WebPlayer() {
 
     const onProgressPlayer1 = useCallback(
         (e: OnProgressProps) => {
-            if (transitionType === 'crossfade' && player.playerNum === 1) {
+            if (transitionType === 'crossfade' && num === 1) {
                 setProgress(Number(e.playedSeconds.toFixed(0)));
             } else if (transitionType === 'gapless') {
                 setProgress(Number(e.playedSeconds.toFixed(0)));
@@ -83,7 +83,7 @@ export function WebPlayer() {
                     crossfadeHandler({
                         crossfadeDuration: crossfadeDuration,
                         currentPlayer: playerRef.current.player1(),
-                        currentPlayerNum: player.playerNum,
+                        currentPlayerNum: num,
                         currentTime: e.playedSeconds,
                         duration: getDuration(playerRef.current.player1().ref),
                         isTransitioning,
@@ -105,12 +105,12 @@ export function WebPlayer() {
                     break;
             }
         },
-        [crossfadeDuration, isTransitioning, player.playerNum, setProgress, transitionType, volume],
+        [crossfadeDuration, isTransitioning, num, setProgress, transitionType, volume],
     );
 
     const onProgressPlayer2 = useCallback(
         (e: OnProgressProps) => {
-            if (transitionType === PlayerStyle.CROSSFADE && player.playerNum === 2) {
+            if (transitionType === PlayerStyle.CROSSFADE && num === 2) {
                 setProgress(Number(e.playedSeconds.toFixed(0)));
             } else if (transitionType === PlayerStyle.GAPLESS) {
                 setProgress(Number(e.playedSeconds.toFixed(0)));
@@ -125,7 +125,7 @@ export function WebPlayer() {
                     crossfadeHandler({
                         crossfadeDuration: crossfadeDuration,
                         currentPlayer: playerRef.current.player2(),
-                        currentPlayerNum: player.playerNum,
+                        currentPlayerNum: num,
                         currentTime: e.playedSeconds,
                         duration: getDuration(playerRef.current.player2().ref),
                         isTransitioning,
@@ -147,7 +147,7 @@ export function WebPlayer() {
                     break;
             }
         },
-        [crossfadeDuration, isTransitioning, player.playerNum, setProgress, transitionType, volume],
+        [crossfadeDuration, isTransitioning, num, setProgress, transitionType, volume],
     );
 
     const handleOnEndedPlayer1 = useCallback(() => {
@@ -180,7 +180,7 @@ export function WebPlayer() {
         {
             onPlayerSeekToTimestamp: (properties) => {
                 const timestamp = properties.timestamp;
-                if (player.playerNum === 1) {
+                if (num === 1) {
                     playerRef.current?.player1()?.ref?.seekTo(timestamp);
                 } else {
                     playerRef.current?.player2()?.ref?.seekTo(timestamp);
@@ -199,7 +199,7 @@ export function WebPlayer() {
                 playerRef.current?.setVolume(volume);
             },
         },
-        [volume, player.playerNum, isTransitioning],
+        [volume, num, isTransitioning],
     );
 
     return (
@@ -210,7 +210,7 @@ export function WebPlayer() {
             onEndedPlayer2={handleOnEndedPlayer2}
             onProgressPlayer1={onProgressPlayer1}
             onProgressPlayer2={onProgressPlayer2}
-            playerNum={player.playerNum}
+            playerNum={num}
             playerRef={playerRef}
             playerStatus={localPlayerStatus}
             speed={speed}