add error handler to web player

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

@@ -5,6 +5,8 @@ import ReactPlayer from 'react-player';
 
 import { AudioPlayer, PlayerOnProgressProps } from '/@/renderer/features/player/audio-player/types';
 import { convertToLogVolume } from '/@/renderer/features/player/audio-player/utils/player-utils';
+import { LogCategory, logFn } from '/@/renderer/utils/logger';
+import { logMsg } from '/@/renderer/utils/logger-message';
 import { PlayerStatus } from '/@/shared/types/types';
 
 export interface WebPlayerEngineHandle extends AudioPlayer {
@@ -117,48 +119,72 @@ export const WebPlayerEngine = (props: WebPlayerEngineProps) => {
     const volume1 = convertToLogVolume(internalVolume1);
     const volume2 = convertToLogVolume(internalVolume2);
 
+    const handleOnError = (playerRef: React.RefObject<null | ReactPlayer>, onEnded: () => void) => {
+        return ({ target }: ErrorEvent) => {
+            const { current: player } = playerRef;
+
+            if (!player || !(target instanceof Audio)) {
+                return;
+            }
+
+            const { error } = target;
+
+            logFn.error(logMsg[LogCategory.PLAYER].playbackError, {
+                category: LogCategory.PLAYER,
+                meta: { error },
+            });
+
+            if (
+                error?.code !== MediaError.MEDIA_ERR_DECODE &&
+                error?.code !== MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED
+            ) {
+                return;
+            }
+
+            onEnded();
+        };
+    };
+
     return (
         <div id="web-player-engine" style={{ display: 'none' }}>
-            {Boolean(src1) && (
+            <ReactPlayer
-                <ReactPlayer
+                config={{
-                    config={{
+                    file: { attributes: { crossOrigin: 'anonymous' }, forceAudio: true },
-                        file: { attributes: { crossOrigin: 'anonymous' }, forceAudio: true },
+                }}
-                    }}
+                controls={false}
-                    controls={false}
+                height={0}
-                    height={0}
+                id="web-player-1"
-                    id="web-player-1"
+                muted={isMuted}
-                    muted={isMuted}
+                onEnded={src1 ? () => onEndedPlayer1() : undefined}
-                    onEnded={src1 ? () => onEndedPlayer1() : undefined}
+                onError={handleOnError(player1Ref, () => onEndedPlayer1())}
-                    onProgress={onProgressPlayer1}
+                onProgress={onProgressPlayer1}
-                    playbackRate={speed || 1}
+                playbackRate={speed || 1}
-                    playing={playerNum === 1 && playerStatus === PlayerStatus.PLAYING}
+                playing={playerNum === 1 && playerStatus === PlayerStatus.PLAYING}
-                    progressInterval={isTransitioning ? 10 : 250}
+                progressInterval={isTransitioning ? 10 : 250}
-                    ref={player1Ref}
+                ref={player1Ref}
-                    url={src1 || EMPTY_SOURCE}
+                url={src1 || EMPTY_SOURCE}
-                    volume={volume1}
+                volume={volume1}
-                    width={0}
+                width={0}
-                />
+            />
-            )}
+            <ReactPlayer
-            {Boolean(src2) && (
+                config={{
-                <ReactPlayer
+                    file: { attributes: { crossOrigin: 'anonymous' }, forceAudio: true },
-                    config={{
+                }}
-                        file: { attributes: { crossOrigin: 'anonymous' }, forceAudio: true },
+                controls={false}
-                    }}
+                height={0}
-                    controls={false}
+                id="web-player-2"
-                    height={0}
+                muted={isMuted}
-                    id="web-player-2"
+                onEnded={src2 ? () => onEndedPlayer2() : undefined}
-                    muted={isMuted}
+                onError={handleOnError(player2Ref, () => onEndedPlayer2())}
-                    onEnded={src2 ? () => onEndedPlayer2() : undefined}
+                onProgress={onProgressPlayer2}
-                    onProgress={onProgressPlayer2}
+                playbackRate={speed || 1}
-                    playbackRate={speed || 1}
+                playing={playerNum === 2 && playerStatus === PlayerStatus.PLAYING}
-                    playing={playerNum === 2 && playerStatus === PlayerStatus.PLAYING}
+                progressInterval={isTransitioning ? 10 : 250}
-                    progressInterval={isTransitioning ? 10 : 250}
+                ref={player2Ref}
-                    ref={player2Ref}
+                url={src2 || EMPTY_SOURCE}
-                    url={src2 || EMPTY_SOURCE}
+                volume={volume2}
-                    volume={volume2}
+                width={0}
-                    width={0}
+            />
-                />
-            )}
         </div>
     );
 };

src/renderer/utils/logger-message.ts

@@ -32,6 +32,7 @@ export const logMsg = {
         moveSelectedToBottom: 'Moved selected to bottom',
         moveSelectedToNext: 'Moved selected to next',
         moveSelectedToTop: 'Moved selected to top',
+        playbackError: 'An error occurred during playback',
         setFavorite: 'Set favorite',
         setRating: 'Set rating',
         setRepeat: 'Set repeat',