vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-05-08 04:50:12 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add queue handler

Browse Source 
Initial support for play "now", "next", and "last"
This commit is contained in:
jeffvli
2022-07-31 05:24:33 -07:00
parent 9c9cf3a978
commit e1bc6ecf30
10 changed files with 148 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/components/virtual-grid/GridCardControls.tsx
+34 -3
View File
@@ -1,8 +1,9 @@
import React from 'react';
import { UnstyledButton, UnstyledButtonProps } from '@mantine/core';
import { Button, UnstyledButton, UnstyledButtonProps } from '@mantine/core';
import { motion } from 'framer-motion';
import { RiPlayFill } from 'react-icons/ri';
import styled from 'styled-components';
import { Play } from '../../../types';
type PlayButtonType = UnstyledButtonProps &
React.ComponentPropsWithoutRef<'button'>;
@@ -13,7 +14,7 @@ const PlayButton = styled(UnstyledButton)<PlayButtonType>`
justify-content: center;
width: 50px;
height: 50px;
background-color: var(--primary-color);
border: 1px solid var(--primary-color);
border-radius: 50%;
cursor: default;
opacity: 0.8;
@@ -78,13 +79,43 @@ export const GridCardControls = ({
id: itemData[cardControls.idProperty],
type: cardControls.type,
},
play: Play.NOW,
});
}}
>
<RiPlayFill size={25} />
</PlayButton>
</CenterControls>
<BottomControls />
<BottomControls>
<Button
onClick={() => {
handlePlayQueueAdd({
byItemType: {
endpoint: cardControls.endpoint,
id: itemData[cardControls.idProperty],
type: cardControls.type,
},
play: Play.NEXT,
});
}}
>
NEXT
</Button>
<Button
onClick={() => {
handlePlayQueueAdd({
byItemType: {
endpoint: cardControls.endpoint,
id: itemData[cardControls.idProperty],
type: cardControls.type,
},
play: Play.LAST,
});
}}
>
LATER
</Button>
</BottomControls>
</GridCardControlsContainer>
);
};
src/renderer/components/virtual-grid/VirtualGridWrapper.tsx
+1 -1
View File
@@ -27,7 +27,7 @@ export const VirtualGridWrapper = ({
refInstance: Ref<any>;
rowCount: number;
}) => {
const { handlePlayQueueAdd } = usePlayQueueHandler();
const handlePlayQueueAdd = usePlayQueueHandler();
const memo = useMemo(
() => ({
src/renderer/features/library/routes/LibraryAlbumsRoute.tsx
+1 -1
View File
@@ -111,7 +111,7 @@ export const LibraryAlbumsRoute = () => {
cardControls={{
endpoint: albumsApi.getAlbum,
idProperty: 'id',
type: Item.Album,
type: Item.ALBUM,
}}
cardRows={[
{
src/renderer/features/player/hooks/usePlayQueueHandler.ts
+19 -62
View File
@@ -1,5 +1,5 @@
import { useQueryClient } from 'react-query';
import { Item, Play } from '../../../../types';
import { albumsApi } from '../../../api/albumsApi';
import { usePlayerStore } from '../../../store';
import {
getJellyfinStreamUrl,
@@ -8,54 +8,23 @@ import {
} from '../../../utils';
import { mpvPlayer } from '../utils/mpvPlayer';
const getEndpoint = (item: Item) => {
const getEndpointByItemType = (item: Item) => {
switch (item) {
case Item.Album:
return 'getAlbum';
case Item.Artist:
return 'getArtistSongs';
case Item.Playlist:
return 'getPlaylist';
case Item.ALBUM:
return albumsApi.getAlbum;
default:
return 'getAlbum';
return albumsApi.getAlbum;
}
};
export const usePlayQueueHandler = () => {
const queryClient = useQueryClient();
const addQueue = usePlayerStore((state) => state.add);
// const dispatchSongsToQueue = useCallback(
// (entries: Song[], play: Play) => {
// const filteredSongs = filterPlayQueue(config.playback.filters, entries);
// if (play === Play.Play) {
// if (filteredSongs.entries.length > 0) {
// } else {
// }
// }
// if (play === Play.Next || play === Play.Later) {
// if (filteredSongs.entries.length > 0) {
// }
// }
// notifyToast(
// 'info',
// getPlayedSongsNotification({
// ...filteredSongs.count,
// type: play === Play.Play ? 'play' : 'add',
// })
// );
// },
// [config.playback.filters, dispatch]
// );
const addToQueue = usePlayerStore((state) => state.addToQueue);
const handlePlayQueueAdd = async (options: {
byData?: any[];
byItemType?: {
endpoint: (params: Record<string, any>) => any;
id: string;
id: number;
type: Item;
};
play: Play;
@@ -71,11 +40,13 @@ export const usePlayQueueHandler = () => {
);
if (deviceId) {
const data = await options.byItemType.endpoint({
const endpoint = getEndpointByItemType(options.byItemType.type);
const { data } = await endpoint({
id: options.byItemType.id,
});
const songs = data.data.songs.map((song) => {
const songs = data.songs.map((song) => {
const auth = getServerFolderAuth(serverUrl, song.serverFolderId);
if (auth) {
@@ -106,30 +77,16 @@ export const usePlayQueueHandler = () => {
};
});
const pData = addQueue(songs);
mpvPlayer.setQueue(pData);
}
const playerData = addToQueue(songs, options.play);
// const data = await apiController({
// args: { id: options.byItemType.id, musicFolder: options.musicFolder },
// endpoint:
// options.byItemType.endpoint || getEndpoint(options.byItemType.item),
// serverType: config.serverType,
// });
// if (options.byItemType.item === Item.Album) {
// queryClient.setQueryData(['album', options.byItemType.id], data);
// } else if (options.byItemType.item === Item.Artist) {
// queryClient.setQueryData(['artistSongs', options.byItemType.id], data);
// } else if (options.byItemType.item === Item.Playlist) {
// queryClient.setQueryData(['playlist', options.byItemType.id], data);
// }
// if (data?.song) {
// dispatchSongsToQueue(data.song, options.play);
// } else {
// dispatchSongsToQueue(data, options.play);
// }
if (options.play === Play.NEXT || options.play === Play.LAST) {
mpvPlayer.setQueueNext(playerData);
} else {
mpvPlayer.setQueue(playerData);
}
}
}
};
return { handlePlayQueueAdd };
return handlePlayQueueAdd;
};
src/renderer/features/player/utils/mpvPlayer.ts
+11 -3
View File
@@ -1,5 +1,10 @@
// Other files:
// main/features/core/player/index.ts
// main/preload.ts
// renderer/preload.d.ts
import isElectron from 'is-electron';
import { PlayerData, usePlayerStore } from 'renderer/store';
import { PlayerData, usePlayerStore } from '../../../store';
const ipc = isElectron() ? window.electron.ipcRenderer : null;
@@ -19,6 +24,8 @@ const setQueue = (data: PlayerData) => ipc?.PLAYER_SET_QUEUE(data);
const setQueueNext = (data: PlayerData) => ipc?.PLAYER_SET_QUEUE_NEXT(data);
const playerAutoNext = (data: PlayerData) => ipc?.PLAYER_AUTO_NEXT(data);
const seek = (seconds: number) => ipc?.PLAYER_SEEK(seconds);
const seekTo = (seconds: number) => ipc?.PLAYER_SEEK_TO(seconds);
@@ -42,10 +49,10 @@ ipc?.RENDERER_PLAYER_STOP(() => setPause());
ipc?.RENDERER_PLAYER_CURRENT_TIME((_event, time) => setCurrentTime(time));
ipc?.RENDERER_PLAYER_SET_QUEUE_NEXT(() => {
ipc?.RENDERER_PLAYER_AUTO_NEXT(() => {
const playerData = autoNext();
if (playerData.queue.next) {
setQueueNext(playerData);
playerAutoNext(playerData);
}
});
@@ -55,6 +62,7 @@ export const mpvPlayer = {
next,
pause,
play,
playerAutoNext,
previous,
seek,
seekTo,
src/renderer/preload.d.ts
Vendored
+4 -3
View File
@@ -5,6 +5,7 @@ declare global {
interface Window {
electron: {
ipcRenderer: {
PLAYER_AUTO_NEXT(data: PlayerData): void;
PLAYER_CURRENT_TIME(): void;
PLAYER_MUTE(): void;
PLAYER_NEXT(): void;
@@ -17,6 +18,9 @@ declare global {
PLAYER_SET_QUEUE_NEXT(data: PlayerData): void;
PLAYER_STOP(): void;
PLAYER_VOLUME(value: number): void;
RENDERER_PLAYER_AUTO_NEXT(
cb: (event: IpcRendererEvent, data: any) => void
): void;
RENDERER_PLAYER_CURRENT_TIME(
cb: (event: IpcRendererEvent, data: any) => void
): void;
@@ -26,9 +30,6 @@ declare global {
RENDERER_PLAYER_PLAY(
cb: (event: IpcRendererEvent, data: any) => void
): void;
RENDERER_PLAYER_SET_QUEUE_NEXT(
cb: (event: IpcRendererEvent, data: any) => void
): void;
RENDERER_PLAYER_STOP(
cb: (event: IpcRendererEvent, data: any) => void
): void;
src/renderer/store/usePlayerStore.ts
+34 -10
View File
@@ -1,8 +1,10 @@
/* eslint-disable prefer-destructuring */
/* eslint-disable @typescript-eslint/no-unused-vars */
import produce from 'immer';
import create from 'zustand';
import { devtools } from 'zustand/middleware';
import {
Play,
CrossfadeStyle,
PlaybackStyle,
PlaybackType,
@@ -55,7 +57,7 @@ export interface PlayerData {
}
export interface PlayerSlice extends PlayerState {
add: (songs: Song[]) => PlayerData;
addToQueue: (songs: Song[], type: Play) => PlayerData;
autoNext: () => PlayerData;
getPlayerData: () => PlayerData;
next: () => PlayerData;
@@ -70,15 +72,37 @@ export interface PlayerSlice extends PlayerState {
export const usePlayerStore = create<PlayerSlice>()(
devtools((set, get) => ({
add: (songs) => {
set(
produce((state) => {
state.queue.default = songs;
state.current.time = 0;
state.current.player = 1;
state.current.song = state.queue.default[state.current.index];
})
);
addToQueue: (songs, type) => {
if (type === Play.NOW) {
set(
produce((state) => {
state.queue.default = songs;
state.current.time = 0;
state.current.player = 1;
state.current.index = 0;
state.current.song = songs[0];
})
);
} else if (type === Play.LAST) {
set(
produce((state) => {
state.queue.default = [...get().queue.default, ...songs];
})
);
} else if (type === Play.NEXT) {
const queue = get().queue.default;
const currentIndex = get().current.index;
set(
produce((state) => {
state.queue.default = [
...queue.slice(0, currentIndex + 1),
...songs,
...queue.slice(currentIndex + 1),
];
})
);
}
return get().getPlayerData();
},