Fallback to web player if mpv fails to run

This commit is contained in:
jeffvli 2024-02-13 02:05:59 -08:00
parent fb08502e51
commit 9b0c9ba3ac
14 changed files with 115 additions and 70 deletions

View file

@ -149,6 +149,10 @@ export const getMpvInstance = () => {
return mpvInstance;
};
const setAudioPlayerFallback = (isError: boolean) => {
getMainWindow()?.webContents.send('renderer-player-fallback', isError);
};
ipcMain.on('player-set-properties', async (_event, data: Record<string, any>) => {
mpvLog({ action: `Setting properties: ${JSON.stringify(data)}` });
if (data.length === 0) {
@ -181,8 +185,10 @@ ipcMain.handle(
mpvInstance = await createMpv(data);
mpvLog({ action: 'Restarted mpv', toast: 'success' });
setAudioPlayerFallback(false);
} catch (err: NodeMpvError | any) {
mpvLog({ action: 'Failed to restart mpv' }, err);
mpvLog({ action: 'Failed to restart mpv, falling back to web player' }, err);
setAudioPlayerFallback(true);
}
},
);
@ -195,8 +201,10 @@ ipcMain.handle(
action: `Attempting to initialize mpv with parameters: ${JSON.stringify(data)}`,
});
mpvInstance = await createMpv(data);
setAudioPlayerFallback(false);
} catch (err: NodeMpvError | any) {
mpvLog({ action: 'Failed to initialize mpv' }, err);
mpvLog({ action: 'Failed to initialize mpv, falling back to web player' }, err);
setAudioPlayerFallback(true);
}
},
);

View file

@ -153,6 +153,10 @@ const rendererError = (cb: (event: IpcRendererEvent, data: string) => void) => {
ipcRenderer.on('renderer-player-error', cb);
};
const rendererPlayerFallback = (cb: (event: IpcRendererEvent, data: boolean) => void) => {
ipcRenderer.on('renderer-player-fallback', cb);
};
export const mpvPlayer = {
autoNext,
cleanup,
@ -184,6 +188,7 @@ export const mpvPlayerListener = {
rendererPause,
rendererPlay,
rendererPlayPause,
rendererPlayerFallback,
rendererPrevious,
rendererQuit,
rendererSkipBackward,

View file

@ -51,7 +51,7 @@ import {
usePlayerStore,
useQueueControls,
} from '/@/renderer/store';
import { usePlayerType } from '/@/renderer/store/settings.store';
import { usePlaybackType } from '/@/renderer/store/settings.store';
import { Play, PlaybackType } from '/@/renderer/types';
type ContextMenuContextProps = {
@ -575,7 +575,7 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
[ctx.data, ctx.dataNodes, updateRatingMutation],
);
const playerType = usePlayerType();
const playbackType = usePlaybackType();
const { moveToBottomOfQueue, moveToTopOfQueue, removeFromQueue } = useQueueControls();
const handleMoveToBottom = useCallback(() => {
@ -584,10 +584,10 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
const playerData = moveToBottomOfQueue(uniqueIds);
if (playerType === PlaybackType.LOCAL) {
if (playbackType === PlaybackType.LOCAL) {
mpvPlayer!.setQueueNext(playerData);
}
}, [ctx.dataNodes, moveToBottomOfQueue, playerType]);
}, [ctx.dataNodes, moveToBottomOfQueue, playbackType]);
const handleMoveToTop = useCallback(() => {
const uniqueIds = ctx.dataNodes?.map((row) => row.data.uniqueId);
@ -595,10 +595,10 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
const playerData = moveToTopOfQueue(uniqueIds);
if (playerType === PlaybackType.LOCAL) {
if (playbackType === PlaybackType.LOCAL) {
mpvPlayer!.setQueueNext(playerData);
}
}, [ctx.dataNodes, moveToTopOfQueue, playerType]);
}, [ctx.dataNodes, moveToTopOfQueue, playbackType]);
const handleRemoveSelected = useCallback(() => {
const uniqueIds = ctx.dataNodes?.map((row) => row.data.uniqueId);
@ -608,7 +608,7 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
const playerData = removeFromQueue(uniqueIds);
const isCurrentSongRemoved = currentSong && uniqueIds.includes(currentSong?.uniqueId);
if (playerType === PlaybackType.LOCAL) {
if (playbackType === PlaybackType.LOCAL) {
if (isCurrentSongRemoved) {
mpvPlayer!.setQueue(playerData);
} else {
@ -621,7 +621,7 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
if (isCurrentSongRemoved) {
remote?.updateSong({ song: playerData.current.song });
}
}, [ctx.dataNodes, ctx.tableApi, playerType, removeFromQueue]);
}, [ctx.dataNodes, ctx.tableApi, playbackType, removeFromQueue]);
const handleDeselectAll = useCallback(() => {
ctx.tableApi?.deselectAll();

View file

@ -3,7 +3,7 @@ import {
useCurrentStatus,
useCurrentTime,
useLyricsSettings,
usePlayerType,
usePlaybackType,
useSeeked,
} from '/@/renderer/store';
import { PlaybackType, PlayerStatus } from '/@/renderer/types';
@ -59,7 +59,7 @@ export const SynchronizedLyrics = ({
}: SynchronizedLyricsProps) => {
const playersRef = PlayersRef;
const status = useCurrentStatus();
const playerType = usePlayerType();
const playbackType = usePlaybackType();
const now = useCurrentTime();
const settings = useLyricsSettings();
@ -96,7 +96,7 @@ export const SynchronizedLyrics = ({
};
const getCurrentTime = useCallback(async () => {
if (isElectron() && playerType !== PlaybackType.WEB) {
if (isElectron() && playbackType !== PlaybackType.WEB) {
if (mpvPlayer) {
return mpvPlayer.getCurrentTime();
}
@ -116,7 +116,7 @@ export const SynchronizedLyrics = ({
if (!player) return 0;
return player.currentTime;
}, [playerType, playersRef]);
}, [playbackType, playersRef]);
const setCurrentLyric = useCallback(
(timeInMs: number, epoch?: number, targetIndex?: number) => {
@ -222,7 +222,7 @@ export const SynchronizedLyrics = ({
}
return () => {};
}, [getCurrentTime, lyrics, playerType, setCurrentLyric, status]);
}, [getCurrentTime, lyrics, playbackType, setCurrentLyric, status]);
useEffect(() => {
// This handler is used to deal with changes to the current delay. If the offset

View file

@ -15,7 +15,7 @@ import {
import { Song } from '/@/renderer/api/types';
import { usePlayerControls, useQueueControls } from '/@/renderer/store';
import { PlaybackType, TableType } from '/@/renderer/types';
import { usePlayerType } from '/@/renderer/store/settings.store';
import { usePlaybackType } from '/@/renderer/store/settings.store';
import { usePlayerStore, useSetCurrentTime } from '../../../store/player.store';
import { TableConfigDropdown } from '/@/renderer/components/virtual-table';
@ -34,7 +34,7 @@ export const PlayQueueListControls = ({ type, tableRef }: PlayQueueListOptionsPr
const { pause } = usePlayerControls();
const playerType = usePlayerType();
const playbackType = usePlaybackType();
const setCurrentTime = useSetCurrentTime();
const handleMoveToBottom = () => {
@ -44,7 +44,7 @@ export const PlayQueueListControls = ({ type, tableRef }: PlayQueueListOptionsPr
const playerData = moveToBottomOfQueue(uniqueIds);
if (playerType === PlaybackType.LOCAL) {
if (playbackType === PlaybackType.LOCAL) {
mpvPlayer!.setQueueNext(playerData);
}
};
@ -56,7 +56,7 @@ export const PlayQueueListControls = ({ type, tableRef }: PlayQueueListOptionsPr
const playerData = moveToTopOfQueue(uniqueIds);
if (playerType === PlaybackType.LOCAL) {
if (playbackType === PlaybackType.LOCAL) {
mpvPlayer!.setQueueNext(playerData);
}
};
@ -70,7 +70,7 @@ export const PlayQueueListControls = ({ type, tableRef }: PlayQueueListOptionsPr
const playerData = removeFromQueue(uniqueIds);
const isCurrentSongRemoved = currentSong && uniqueIds.includes(currentSong.uniqueId);
if (playerType === PlaybackType.LOCAL) {
if (playbackType === PlaybackType.LOCAL) {
if (isCurrentSongRemoved) {
mpvPlayer!.setQueue(playerData);
} else {
@ -86,7 +86,7 @@ export const PlayQueueListControls = ({ type, tableRef }: PlayQueueListOptionsPr
const handleClearQueue = () => {
const playerData = clearQueue();
if (playerType === PlaybackType.LOCAL) {
if (playbackType === PlaybackType.LOCAL) {
mpvPlayer!.setQueue(playerData);
mpvPlayer!.pause();
}
@ -100,7 +100,7 @@ export const PlayQueueListControls = ({ type, tableRef }: PlayQueueListOptionsPr
const handleShuffleQueue = () => {
const playerData = shuffleQueue();
if (playerType === PlaybackType.LOCAL) {
if (playbackType === PlaybackType.LOCAL) {
mpvPlayer!.setQueueNext(playerData);
}
};

View file

@ -19,7 +19,7 @@ import {
useVolume,
} from '/@/renderer/store';
import {
usePlayerType,
usePlaybackType,
useSettingsStore,
useSettingsStoreActions,
useTableSettings,
@ -56,7 +56,7 @@ export const PlayQueue = forwardRef(({ type }: QueueProps, ref: Ref<any>) => {
const { setAppStore } = useAppStoreActions();
const tableConfig = useTableSettings(type);
const [gridApi, setGridApi] = useState<AgGridReactType | undefined>();
const playerType = usePlayerType();
const playbackType = usePlaybackType();
const { play } = usePlayerControls();
const volume = useVolume();
const isFocused = useAppFocus();
@ -87,7 +87,7 @@ export const PlayQueue = forwardRef(({ type }: QueueProps, ref: Ref<any>) => {
status: PlayerStatus.PLAYING,
});
if (playerType === PlaybackType.LOCAL) {
if (playbackType === PlaybackType.LOCAL) {
mpvPlayer!.volume(volume);
mpvPlayer!.setQueue(playerData);
mpvPlayer!.play();
@ -111,7 +111,7 @@ export const PlayQueue = forwardRef(({ type }: QueueProps, ref: Ref<any>) => {
const playerData = reorderQueue(selectedUniqueIds as string[], e.overNode?.data?.uniqueId);
if (playerType === PlaybackType.LOCAL) {
if (playbackType === PlaybackType.LOCAL) {
mpvPlayer!.setQueueNext(playerData);
}

View file

@ -32,7 +32,7 @@ import {
} from '/@/renderer/store';
import {
useHotkeySettings,
usePlayerType,
usePlaybackType,
useSettingsStore,
} from '/@/renderer/store/settings.store';
import { PlayerStatus, PlaybackType, PlayerShuffle, PlayerRepeat } from '/@/renderer/types';
@ -99,7 +99,7 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
const currentSong = useCurrentSong();
const skip = useSettingsStore((state) => state.general.skipButtons);
const buttonSize = useSettingsStore((state) => state.general.buttonSize);
const playerType = usePlayerType();
const playbackType = usePlaybackType();
const player1 = playersRef?.current?.player1;
const player2 = playersRef?.current?.player2;
const status = useCurrentStatus();
@ -134,7 +134,7 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
let interval: any;
if (status === PlayerStatus.PLAYING && !isSeeking) {
if (!isElectron() || playerType === PlaybackType.WEB) {
if (!isElectron() || playbackType === PlaybackType.WEB) {
interval = setInterval(() => {
setCurrentTime(currentPlayerRef.getCurrentTime());
}, 1000);
@ -144,7 +144,7 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
}
return () => clearInterval(interval);
}, [currentPlayerRef, isSeeking, setCurrentTime, playerType, status]);
}, [currentPlayerRef, isSeeking, setCurrentTime, playbackType, status]);
const [seekValue, setSeekValue] = useState(0);

View file

@ -1,7 +1,7 @@
import { useCallback } from 'react';
import isElectron from 'is-electron';
import styled from 'styled-components';
import { useSettingsStore } from '/@/renderer/store/settings.store';
import { usePlaybackType, useSettingsStore } from '/@/renderer/store/settings.store';
import { PlaybackType } from '/@/renderer/types';
import { AudioPlayer } from '/@/renderer/components';
import {
@ -64,6 +64,7 @@ const remote = isElectron() ? window.electron.remote : null;
export const Playerbar = () => {
const playersRef = PlayersRef;
const settings = useSettingsStore((state) => state.playback);
const playbackType = usePlaybackType();
const volume = useVolume();
const player1 = usePlayer1Data();
const player2 = usePlayer2Data();
@ -96,7 +97,7 @@ export const Playerbar = () => {
<RightControls />
</RightGridItem>
</PlayerbarControlsGrid>
{settings.type === PlaybackType.WEB && (
{playbackType === PlaybackType.WEB && (
<AudioPlayer
ref={playersRef}
autoNext={autoNextFn}

View file

@ -1,5 +1,3 @@
// import { write, writeFile } from 'fs';
// import { deflate } from 'zlib';
import { useCallback, useEffect } from 'react';
import isElectron from 'is-electron';
import { PlaybackType, PlayerRepeat, PlayerShuffle, PlayerStatus } from '/@/renderer/types';
@ -13,7 +11,7 @@ import {
useSetCurrentTime,
useShuffleStatus,
} from '/@/renderer/store';
import { usePlayerType, useSettingsStore } from '/@/renderer/store/settings.store';
import { usePlaybackType } from '/@/renderer/store/settings.store';
import { useScrobble } from '/@/renderer/features/player/hooks/use-scrobble';
import debounce from 'lodash/debounce';
import { QueueSong } from '/@/renderer/api/types';
@ -32,7 +30,6 @@ export const useCenterControls = (args: { playersRef: any }) => {
const { t } = useTranslation();
const { playersRef } = args;
const settings = useSettingsStore((state) => state.playback);
const currentPlayer = useCurrentPlayer();
const { setShuffle, setRepeat, play, pause, previous, next, setCurrentIndex, autoNext } =
usePlayerControls();
@ -41,7 +38,7 @@ export const useCenterControls = (args: { playersRef: any }) => {
const playerStatus = useCurrentStatus();
const repeatStatus = useRepeatStatus();
const shuffleStatus = useShuffleStatus();
const playerType = usePlayerType();
const playbackType = usePlaybackType();
const player1Ref = playersRef?.current?.player1;
const player2Ref = playersRef?.current?.player2;
const currentPlayerRef = currentPlayer === 1 ? player1Ref : player2Ref;
@ -77,7 +74,7 @@ export const useCenterControls = (args: { playersRef: any }) => {
resetPlayers();
}, [player1Ref, player2Ref, resetPlayers]);
const isMpvPlayer = isElectron() && settings.type === PlaybackType.LOCAL;
const isMpvPlayer = isElectron() && playbackType === PlaybackType.LOCAL;
const mprisUpdateSong = (args?: {
currentTime?: number;
@ -282,13 +279,13 @@ export const useCenterControls = (args: { playersRef: any }) => {
switch (repeatStatus) {
case PlayerRepeat.NONE:
handleRepeatNone[playerType]();
handleRepeatNone[playbackType]();
break;
case PlayerRepeat.ALL:
handleRepeatAll[playerType]();
handleRepeatAll[playbackType]();
break;
case PlayerRepeat.ONE:
handleRepeatOne[playerType]();
handleRepeatOne[playbackType]();
break;
default:
@ -299,7 +296,7 @@ export const useCenterControls = (args: { playersRef: any }) => {
checkIsLastTrack,
pause,
play,
playerType,
playbackType,
repeatStatus,
resetPlayers,
setCurrentIndex,
@ -380,13 +377,13 @@ export const useCenterControls = (args: { playersRef: any }) => {
switch (repeatStatus) {
case PlayerRepeat.NONE:
handleRepeatNone[playerType]();
handleRepeatNone[playbackType]();
break;
case PlayerRepeat.ALL:
handleRepeatAll[playerType]();
handleRepeatAll[playbackType]();
break;
case PlayerRepeat.ONE:
handleRepeatOne[playerType]();
handleRepeatOne[playbackType]();
break;
default:
@ -398,7 +395,7 @@ export const useCenterControls = (args: { playersRef: any }) => {
checkIsLastTrack,
next,
pause,
playerType,
playbackType,
repeatStatus,
resetPlayers,
setCurrentIndex,
@ -511,13 +508,13 @@ export const useCenterControls = (args: { playersRef: any }) => {
switch (repeatStatus) {
case PlayerRepeat.NONE:
handleRepeatNone[playerType]();
handleRepeatNone[playbackType]();
break;
case PlayerRepeat.ALL:
handleRepeatAll[playerType]();
handleRepeatAll[playbackType]();
break;
case PlayerRepeat.ONE:
handleRepeatOne[playerType]();
handleRepeatOne[playbackType]();
break;
default:
@ -531,7 +528,7 @@ export const useCenterControls = (args: { playersRef: any }) => {
handleScrobbleFromSongRestart,
isMpvPlayer,
pause,
playerType,
playbackType,
previous,
queue.length,
repeatStatus,

View file

@ -1,7 +1,7 @@
import { useCallback, useRef } from 'react';
import { useQueryClient } from '@tanstack/react-query';
import { useCurrentServer, usePlayerControls, usePlayerStore } from '/@/renderer/store';
import { usePlayerType } from '/@/renderer/store/settings.store';
import { usePlaybackType } from '/@/renderer/store/settings.store';
import {
PlayQueueAddOptions,
Play,
@ -65,7 +65,7 @@ const addToQueue = usePlayerStore.getState().actions.addToQueue;
export const useHandlePlayQueueAdd = () => {
const { t } = useTranslation();
const queryClient = useQueryClient();
const playerType = usePlayerType();
const playbackType = usePlaybackType();
const server = useCurrentServer();
const { play } = usePlayerControls();
const timeoutIds = useRef<Record<string, ReturnType<typeof setTimeout>> | null>({});
@ -170,7 +170,7 @@ export const useHandlePlayQueueAdd = () => {
const hadSong = usePlayerStore.getState().queue.default.length > 0;
const playerData = addToQueue({ initialIndex: initialSongIndex, playType, songs });
if (playerType === PlaybackType.LOCAL) {
if (playbackType === PlaybackType.LOCAL) {
mpvPlayer!.volume(usePlayerStore.getState().volume);
if (playType === Play.NEXT || playType === Play.LAST) {
@ -200,7 +200,7 @@ export const useHandlePlayQueueAdd = () => {
return null;
},
[play, playerType, queryClient, server, t],
[play, playbackType, queryClient, server, t],
);
return handlePlayQueueAdd;

View file

@ -161,21 +161,24 @@ export const MpvSettings = () => {
</Button>
<FileInput
placeholder={mpvPath}
rightSection={
mpvPath && (
<Button
compact
tooltip={{
label: t('common.clear', { postProcess: 'titleCase' }),
openDelay: 0,
}}
variant="subtle"
onClick={() => handleSetMpvPath(null)}
>
<RiCloseLine />
</Button>
)
}
width={200}
onChange={handleSetMpvPath}
/>
{mpvPath && (
<Button
tooltip={{
label: t('common.clear', { postProcess: 'titleCase' }),
openDelay: 0,
}}
variant="default"
onClick={() => handleSetMpvPath(null)}
>
<RiCloseLine />
</Button>
)}
</Group>
),
description: t('setting.mpvExecutablePath', {

View file

@ -2,14 +2,16 @@ import { useMemo, useEffect } from 'react';
import isElectron from 'is-electron';
import { Navigate, Outlet } from 'react-router-dom';
import { AppRoute } from '/@/renderer/router/routes';
import { useCurrentServer } from '/@/renderer/store';
import { useCurrentServer, useSetPlayerFallback } from '/@/renderer/store';
import { toast } from '/@/renderer/components';
const ipc = isElectron() ? window.electron.ipc : null;
const utils = isElectron() ? window.electron.utils : null;
const mpvPlayerListener = isElectron() ? window.electron.mpvPlayerListener : null;
export const AppOutlet = () => {
const currentServer = useCurrentServer();
const setFallback = useSetPlayerFallback();
const isActionsRequired = useMemo(() => {
const isServerRequired = !currentServer;
@ -25,10 +27,15 @@ export const AppOutlet = () => {
toast.show(data);
});
mpvPlayerListener?.rendererPlayerFallback((_event, data) => {
setFallback(data);
});
return () => {
ipc?.removeAllListeners('toast-from-main');
ipc?.removeAllListeners('renderer-player-fallback');
};
}, []);
}, [setFallback]);
if (isActionsRequired) {
return (

View file

@ -22,6 +22,7 @@ export interface PlayerState {
status: PlayerStatus;
time: number;
};
fallback: boolean | null;
muted: boolean;
queue: {
default: QueueSong[];
@ -85,6 +86,7 @@ export interface PlayerSlice extends PlayerState {
setCurrentSpeed: (speed: number) => void;
setCurrentTime: (time: number, seek?: boolean) => void;
setCurrentTrack: (uniqueId: string) => PlayerData;
setFallback: (fallback: boolean | null) => boolean;
setFavorite: (ids: string[], favorite: boolean) => string[];
setMuted: (muted: boolean) => void;
setRating: (ids: string[], rating: number | null) => string[];
@ -806,6 +808,13 @@ export const usePlayerStore = create<PlayerSlice>()(
return get().actions.getPlayerData();
},
setFallback: (fallback) => {
set((state) => {
state.fallback = fallback;
});
return fallback || false;
},
setFavorite: (ids, favorite) => {
const { default: queue } = get().queue;
const foundUniqueIds = [];
@ -953,6 +962,7 @@ export const usePlayerStore = create<PlayerSlice>()(
status: PlayerStatus.PAUSED,
time: 0,
},
fallback: null,
muted: false,
queue: {
default: [],
@ -973,7 +983,7 @@ export const usePlayerStore = create<PlayerSlice>()(
},
name: 'store_player',
partialize: (state) => {
const notPersisted = ['queue', 'current', 'entry'];
const notPersisted = ['queue', 'current', 'entry', 'fallback'];
return Object.fromEntries(
Object.entries(state).filter(([key]) => !notPersisted.includes(key)),
);
@ -1066,6 +1076,10 @@ export const useMuted = () => usePlayerStore((state) => state.muted);
export const useSpeed = () => usePlayerStore((state) => state.current.speed);
export const usePlayerFallback = () => usePlayerStore((state) => state.fallback);
export const useSetPlayerFallback = () => usePlayerStore((state) => state.actions.setFallback);
export const useSetCurrentSpeed = () => usePlayerStore((state) => state.actions.setCurrentSpeed);
export const useSetQueueFavorite = () => usePlayerStore((state) => state.actions.setFavorite);

View file

@ -23,6 +23,7 @@ import {
} from '/@/renderer/types';
import { randomString } from '/@/renderer/utils';
import i18n from '/@/i18n/i18n';
import { usePlayerStore } from '/@/renderer/store/player.store';
const utils = isElectron() ? window.electron.utils : null;
@ -616,7 +617,16 @@ export const useTableSettings = (type: TableType) =>
export const useGeneralSettings = () => useSettingsStore((state) => state.general, shallow);
export const usePlayerType = () => useSettingsStore((state) => state.playback.type, shallow);
export const usePlaybackType = () =>
useSettingsStore((state) => {
const isFallback = usePlayerStore.getState().fallback;
if (isFallback) {
return PlaybackType.WEB;
}
return state.playback.type;
});
export const usePlayButtonBehavior = () =>
useSettingsStore((state) => state.general.playButtonBehavior, shallow);