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

src/renderer/store/full-screen-player.store.ts

@@ -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);

src/renderer/store/index.ts

@@ -5,3 +5,4 @@ export * from './list.store';
 export * from './playlist.store';
 export * from './album-list-data.store';
 export * from './album-artist-list-data.store';
+export * from './full-screen-player.store';

src/renderer/store/player.store.ts

@@ -892,6 +892,12 @@ export const useDefaultQueue = () => usePlayerStore((state) => state.queue.defau
 
 export const useCurrentSong = () => usePlayerStore((state) => state.current.song);
 
+export const usePlayerData = () =>
+  usePlayerStore(
+    (state) => state.actions.getPlayerData(),
+    (a, b) => a.current.nextIndex === b.current.nextIndex,
+  );
+
 export const useCurrentPlayer = () => usePlayerStore((state) => state.current.player);
 
 export const useCurrentStatus = () => usePlayerStore((state) => state.current.status);

src/renderer/store/settings.store.ts

@@ -61,6 +61,7 @@ export interface SettingsState {
   };
   tab: 'general' | 'playback' | 'view' | string;
   tables: {
+    fullScreen: DataTableProps;
     nowPlaying: DataTableProps;
     sideDrawerQueue: DataTableProps;
     sideQueue: DataTableProps;
@@ -116,6 +117,25 @@ export const useSettingsStore = create<SettingsSlice>()(
 
         tab: 'general',
         tables: {
+          fullScreen: {
+            autoFit: true,
+            columns: [
+              {
+                column: TableColumn.TITLE_COMBINED,
+                width: 500,
+              },
+              {
+                column: TableColumn.DURATION,
+                width: 100,
+              },
+              {
+                column: TableColumn.USER_FAVORITE,
+                width: 100,
+              },
+            ],
+            followCurrentSong: true,
+            rowHeight: 60,
+          },
           nowPlaying: {
             autoFit: true,
             columns: [