Add fullscreen player view (#27)

* Add store controls for fullscreen player

* Normalize styles for playback config

* Add fullscreen player component

* Add option component

* Update player controls to use option/popover components

* Add esc hotkey to close player

* Add usePlayerData hook
This commit is contained in:
Jeff 2023-03-28 14:19:23 -07:00 committed by GitHub
parent 6cfdb8ff84
commit e47fcfc62e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
18 changed files with 780 additions and 62 deletions

View file

@ -0,0 +1,46 @@
import merge from 'lodash/merge';
import create from 'zustand';
import { devtools, persist } from 'zustand/middleware';
import { immer } from 'zustand/middleware/immer';
interface FullScreenPlayerState {
activeTab: string | 'queue' | 'related' | 'lyrics';
dynamicBackground?: boolean;
expanded: boolean;
}
export interface FullScreenPlayerSlice extends FullScreenPlayerState {
actions: {
setStore: (data: Partial<FullScreenPlayerSlice>) => void;
};
}
export const useFullScreenPlayerStore = create<FullScreenPlayerSlice>()(
persist(
devtools(
immer((set, get) => ({
actions: {
setStore: (data) => {
set({ ...get(), ...data });
},
},
activeTab: 'queue',
expanded: false,
})),
{ name: 'store_full_screen_player' },
),
{
merge: (persistedState, currentState) => {
return merge(currentState, persistedState);
},
name: 'store_full_screen_player',
version: 1,
},
),
);
export const useFullScreenPlayerStoreActions = () =>
useFullScreenPlayerStore((state) => state.actions);
export const useSetFullScreenPlayerStore = () =>
useFullScreenPlayerStore((state) => state.actions.setStore);