Add dedicated OS window bars (#22)

This commit is contained in:
jeffvli 2023-03-28 23:59:51 -07:00
parent ececc394e2
commit 58c7370536
25 changed files with 823 additions and 462 deletions

View file

@ -33,8 +33,8 @@ export interface AppState {
export interface AppSlice extends AppState {
actions: {
setAppStore: (data: Partial<AppSlice>) => void;
setSidebar: (options: Partial<SidebarProps>) => void;
setTitlebar: (options: Partial<TitlebarProps>) => void;
setSideBar: (options: Partial<SidebarProps>) => void;
setTitleBar: (options: Partial<TitlebarProps>) => void;
};
}
@ -46,12 +46,12 @@ export const useAppStore = create<AppSlice>()(
setAppStore: (data) => {
set({ ...get(), ...data });
},
setSidebar: (options) => {
setSideBar: (options) => {
set((state) => {
state.sidebar = { ...state.sidebar, ...options };
});
},
setTitlebar: (options) => {
setTitleBar: (options) => {
set((state) => {
state.titlebar = { ...state.titlebar, ...options };
});
@ -89,6 +89,6 @@ export const useSidebarStore = () => useAppStore((state) => state.sidebar);
export const useSidebarRightExpanded = () => useAppStore((state) => state.sidebar.rightExpanded);
export const useSetTitlebar = () => useAppStore((state) => state.actions.setTitlebar);
export const useSetTitlebar = () => useAppStore((state) => state.actions.setTitleBar);
export const useTitlebarStore = () => useAppStore((state) => state.titlebar);

View file

@ -49,6 +49,7 @@ export interface PlayerData {
export interface QueueData {
current?: QueueSong;
length: number;
next?: QueueSong;
previous?: QueueSong;
}
@ -318,6 +319,7 @@ export const usePlayerStore = create<PlayerSlice>()(
player2,
queue: {
current,
length: get().queue.default.length || 0,
next,
previous,
},
@ -377,6 +379,7 @@ export const usePlayerStore = create<PlayerSlice>()(
player2,
queue: {
current: queue[currentIndex],
length: get().queue.default.length || 0,
next: nextSongIndex !== undefined ? queue[nextSongIndex] : undefined,
previous: queue[currentIndex - 1],
},
@ -386,6 +389,7 @@ export const usePlayerStore = create<PlayerSlice>()(
const queue = get().queue.default;
return {
current: queue[get().current.index],
length: queue.length || 0,
next: queue[get().current.index + 1],
previous: queue[get().current.index - 1],
};
@ -895,7 +899,9 @@ export const useCurrentSong = () => usePlayerStore((state) => state.current.song
export const usePlayerData = () =>
usePlayerStore(
(state) => state.actions.getPlayerData(),
(a, b) => a.current.nextIndex === b.current.nextIndex,
(a, b) => {
return a.current.nextIndex === b.current.nextIndex;
},
);
export const useCurrentPlayer = () => usePlayerStore((state) => state.current.player);
@ -920,3 +926,13 @@ export const useSetQueueRating = () => usePlayerStore((state) => state.actions.s
export const useIncrementQueuePlayCount = () =>
usePlayerStore((state) => state.actions.incrementPlayCount);
export const useQueueStatus = () =>
usePlayerStore(
(state) => ({
currentSong: state.current.song,
index: state.current.index,
length: state.queue.default.length,
}),
shallow,
);

View file

@ -4,6 +4,7 @@ import merge from 'lodash/merge';
import create from 'zustand';
import { devtools, persist } from 'zustand/middleware';
import { immer } from 'zustand/middleware/immer';
import shallow from 'zustand/shallow';
import { AppTheme } from '/@/renderer/themes/types';
import {
TableColumn,
@ -12,6 +13,7 @@ import {
PlaybackStyle,
PlaybackType,
TableType,
Platform,
} from '/@/renderer/types';
export type PersistedTableColumn = {
@ -38,6 +40,7 @@ export interface SettingsState {
themeDark: AppTheme;
themeLight: AppTheme;
volumeWheelStep: number;
windowBarStyle: Platform;
};
player: {
audioDeviceId?: string | null;
@ -93,6 +96,7 @@ export const useSettingsStore = create<SettingsSlice>()(
themeDark: AppTheme.DEFAULT_DARK,
themeLight: AppTheme.DEFAULT_LIGHT,
volumeWheelStep: 5,
windowBarStyle: Platform.WEB,
},
player: {
audioDeviceId: undefined,
@ -244,21 +248,21 @@ export const useSettingsStore = create<SettingsSlice>()(
return merge(currentState, persistedState);
},
name: 'store_settings',
version: 3,
version: 4,
},
),
);
export const useSettingsStoreActions = () => useSettingsStore((state) => state.actions);
export const usePlayerSettings = () => useSettingsStore((state) => state.player);
export const usePlayerSettings = () => useSettingsStore((state) => state.player, shallow);
export const useTableSettings = (type: TableType) =>
useSettingsStore((state) => state.tables[type]);
export const useGeneralSettings = () => useSettingsStore((state) => state.general);
export const useGeneralSettings = () => useSettingsStore((state) => state.general, shallow);
export const usePlayerType = () => useSettingsStore((state) => state.player.type);
export const usePlayerType = () => useSettingsStore((state) => state.player.type, shallow);
export const usePlayButtonBehavior = () =>
useSettingsStore((state) => state.player.playButtonBehavior);
useSettingsStore((state) => state.player.playButtonBehavior, shallow);