vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-06-24 21:07:41 +02:00
Code Issues Packages Projects Releases Wiki Activity

Refactor player store

Browse Source
This commit is contained in:
jeffvli
2022-12-10 02:49:13 -08:00
parent a7ce902a16
commit 6de5d56f29
13 changed files with 747 additions and 644 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/renderer/src/features/now-playing/components/play-queue.tsx
+20 -20
View File
@@ -6,19 +6,20 @@ import type {
RowDragEvent,
} from '@ag-grid-community/core';
import '@ag-grid-community/styles/ag-theme-alpine.css';
import { VirtualGridAutoSizerContainer, VirtualGridContainer, getColumnDefs } from '/@/components';
import {
VirtualGridAutoSizerContainer,
VirtualGridContainer,
getColumnDefs,
TableConfigDropdown,
} from '/@/components';
import { useAppStoreActions, usePlayerStore } from '/@/store';
useAppStoreActions,
useCurrentSong,
useDefaultQueue,
usePreviousSong,
useQueueControls,
} from '/@/store';
import { useSettingsStore } from '/@/store/settings.store';
import type { QueueSong, TableType } from '/@/types';
import { ErrorBoundary } from 'react-error-boundary';
import { mpvPlayer } from '#preload';
import { VirtualTable } from '../../../components/virtual-table';
import { ErrorFallback } from '../../action-required';
import { VirtualTable } from '/@/components/virtual-table';
import { ErrorFallback } from '/@/features/action-required';
type QueueProps = {
type: TableType;
@@ -26,11 +27,10 @@ type QueueProps = {
export const PlayQueue = ({ type }: QueueProps) => {
const gridRef = useRef<any>(null);
const queue = usePlayerStore((state) => state.queue.default);
const reorderQueue = usePlayerStore((state) => state.reorderQueue);
const current = usePlayerStore((state) => state.getQueueData().current);
const previous = usePlayerStore((state) => state.queue.previousNode);
const setCurrentTrack = usePlayerStore((state) => state.setCurrentTrack);
const queue = useDefaultQueue();
const { reorderQueue, setCurrentTrack } = useQueueControls();
const currentSong = useCurrentSong();
const previousSong = usePreviousSong();
const setSettings = useSettingsStore((state) => state.setSettings);
const { setAppStore } = useAppStoreActions();
const tableConfig = useSettingsStore((state) => state.tables[type]);
@@ -77,7 +77,7 @@ export const PlayQueue = ({ type }: QueueProps) => {
const handleGridReady = () => {
const { api } = gridRef?.current || {};
const currentNode = api.getRowNode(current?.uniqueId);
const currentNode = api.getRowNode(currentSong?.uniqueId);
api.ensureNodeVisible(currentNode, 'middle');
};
@@ -121,10 +121,10 @@ export const PlayQueue = ({ type }: QueueProps) => {
const rowClassRules = useMemo<RowClassRules>(() => {
return {
'current-song': (params) => {
return params.data.uniqueId === current?.uniqueId;
return params.data.uniqueId === currentSong?.uniqueId;
},
};
}, [current?.uniqueId]);
}, [currentSong?.uniqueId]);
// Redraw the current song row when the previous song changes
useEffect(() => {
@@ -134,8 +134,8 @@ export const PlayQueue = ({ type }: QueueProps) => {
return;
}
const currentNode = api.getRowNode(current?.uniqueId);
const previousNode = api.getRowNode(previous?.uniqueId);
const currentNode = api.getRowNode(currentSong?.uniqueId);
const previousNode = api.getRowNode(previousSong?.uniqueId);
const rowNodes = [currentNode, previousNode];
@@ -146,7 +146,7 @@ export const PlayQueue = ({ type }: QueueProps) => {
}
}
}
}, [current, previous, tableConfig.followCurrentSong]);
}, [currentSong, previousSong, tableConfig.followCurrentSong]);
// Auto resize the columns when the column config changes
useEffect(() => {
@@ -198,7 +198,7 @@ export const PlayQueue = ({ type }: QueueProps) => {
/>
</VirtualGridAutoSizerContainer>
</VirtualGridContainer>
<TableConfigDropdown type={type} />
{/* <TableConfigDropdown type={type} /> */}
</ErrorBoundary>
);
};
packages/renderer/src/features/player/components/center-controls.tsx
+17 -7
View File
@@ -14,7 +14,15 @@ import {
} from 'react-icons/ri';
import styled from 'styled-components';
import { Text } from '/@/components';
import { usePlayerStore } from '/@/store';
import {
useCurrentPlayer,
useCurrentSong,
useCurrentStatus,
useCurrentTime,
useRepeatStatus,
useSetCurrentTime,
useShuffleStatus,
} from '/@/store';
import { useSettingsStore } from '/@/store/settings.store';
import { PlaybackType, PlayerRepeat, PlayerShuffle, PlayerStatus } from '/@/types';
import { useCenterControls } from '../hooks/use-center-controls';
@@ -58,15 +66,17 @@ const SliderWrapper = styled.div`
export const CenterControls = ({ playersRef }: CenterControlsProps) => {
const [isSeeking, setIsSeeking] = useState(false);
const songDuration = usePlayerStore((state) => state.current.song?.duration);
const currentSong = useCurrentSong();
const songDuration = currentSong?.duration;
const skip = useSettingsStore((state) => state.player.skipButtons);
const playerType = useSettingsStore((state) => state.player.type);
const player1 = playersRef?.current?.player1;
const player2 = playersRef?.current?.player2;
const { status, player } = usePlayerStore((state) => state.current);
const setCurrentTime = usePlayerStore((state) => state.setCurrentTime);
const repeat = usePlayerStore((state) => state.repeat);
const shuffle = usePlayerStore((state) => state.shuffle);
const status = useCurrentStatus();
const player = useCurrentPlayer();
const setCurrentTime = useSetCurrentTime();
const repeat = useRepeatStatus();
const shuffle = useShuffleStatus();
const {
handleNextTrack,
@@ -79,7 +89,7 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
handleToggleShuffle,
} = useCenterControls({ playersRef });
const currentTime = usePlayerStore((state) => state.current.time);
const currentTime = useCurrentTime();
const currentPlayerRef = player === 1 ? player1 : player2;
const duration = format((songDuration || 0) * 1000);
const formattedTime = format(currentTime * 1000 || 0);
packages/renderer/src/features/player/components/left-controls.tsx
+9 -9
View File
@@ -6,7 +6,7 @@ import { generatePath, Link } from 'react-router-dom';
import styled from 'styled-components';
import { Button, Text } from '/@/components';
import { AppRoute } from '/@/router/routes';
import { useAppStore, useAppStoreActions, usePlayerStore } from '/@/store';
import { useAppStore, useAppStoreActions, useCurrentSong } from '/@/store';
import { fadeIn } from '/@/styles';
const LeftControlsContainer = styled.div`
@@ -72,9 +72,9 @@ const LineItem = styled.div<{ $secondary?: boolean }>`
export const LeftControls = () => {
const { setSidebar } = useAppStoreActions();
const hideImage = useAppStore((state) => state.sidebar.image);
const song = usePlayerStore((state) => state.current.song);
const title = song?.name;
const artists = song?.artists;
const currentSong = useCurrentSong();
const title = currentSong?.name;
const artists = currentSong?.artists;
return (
<LeftControlsContainer>
@@ -93,10 +93,10 @@ export const LeftControls = () => {
to={AppRoute.NOW_PLAYING}
transition={{ duration: 0.3, ease: 'easeInOut' }}
>
{song?.imageUrl ? (
{currentSong?.imageUrl ? (
<PlayerbarImage
loading="eager"
src={song?.imageUrl}
src={currentSong?.imageUrl}
/>
) : (
<>
@@ -190,15 +190,15 @@ export const LeftControls = () => {
overflow="hidden"
size="xs"
to={
song?.albumId
currentSong?.albumId
? generatePath(AppRoute.LIBRARY_ALBUMS_DETAIL, {
albumId: song.albumId,
albumId: currentSong.albumId,
})
: ''
}
weight={500}
>
{song?.album || '—'}
{currentSong?.album || '—'}
</Text>
</LineItem>
</MetadataStack>
packages/renderer/src/features/player/components/playerbar.tsx
+15 -8
View File
@@ -2,8 +2,15 @@ import { useRef } from 'react';
import styled from 'styled-components';
import { useSettingsStore } from '/@/store/settings.store';
import { PlaybackType } from '/@/types';
import { AudioPlayer } from '../../../components';
import { usePlayerStore } from '../../../store';
import { AudioPlayer } from '/@/components';
import {
useCurrentPlayer,
useCurrentStatus,
usePlayer1Data,
usePlayer2Data,
usePlayerControls,
useVolume,
} from '/@/store';
import { CenterControls } from './center-controls';
import { LeftControls } from './left-controls';
import { RightControls } from './right-controls';
@@ -46,12 +53,12 @@ const CenterGridItem = styled.div`
export const Playerbar = () => {
const playersRef = useRef<any>();
const settings = useSettingsStore((state) => state.player);
const volume = usePlayerStore((state) => state.volume);
const player1 = usePlayerStore((state) => state.player1());
const player2 = usePlayerStore((state) => state.player2());
const status = usePlayerStore((state) => state.current.status);
const player = usePlayerStore((state) => state.current.player);
const autoNext = usePlayerStore((state) => state.autoNext);
const volume = useVolume();
const player1 = usePlayer1Data();
const player2 = usePlayer2Data();
const status = useCurrentStatus();
const player = useCurrentPlayer();
const { autoNext } = usePlayerControls();
return (
<PlayerbarContainer>
packages/renderer/src/features/player/components/right-controls.tsx
+3 -3
View File
@@ -2,7 +2,7 @@ import { Group } from '@mantine/core';
import { HiOutlineQueueList } from 'react-icons/hi2';
import { RiVolumeUpFill, RiVolumeDownFill, RiVolumeMuteFill } from 'react-icons/ri';
import styled from 'styled-components';
import { usePlayerStore, useAppStoreActions, useSidebarStore } from '/@/store';
import { useAppStoreActions, useMuted, useSidebarStore, useVolume } from '/@/store';
import { useRightControls } from '../hooks/use-right-controls';
import { PlayerButton } from './player-button';
import { Slider } from './slider';
@@ -33,8 +33,8 @@ const MetadataStack = styled.div`
`;
export const RightControls = () => {
const volume = usePlayerStore((state) => state.volume);
const muted = usePlayerStore((state) => state.muted);
const volume = useVolume();
const muted = useMuted();
const { setSidebar } = useAppStoreActions();
const { rightExpanded: isQueueExpanded } = useSidebarStore();
const { handleVolumeSlider, handleVolumeSliderState, handleMute } = useRightControls();
packages/renderer/src/features/player/hooks/use-center-controls.ts
+49 -39
View File
@@ -2,30 +2,31 @@ import { useCallback, useEffect } from 'react';
import isElectron from 'is-electron';
import { PlaybackType, PlayerRepeat, PlayerShuffle, PlayerStatus } from '/@/types';
import { mpvPlayer, mpvPlayerListener, ipc } from '#preload';
import { usePlayerStore } from '../../../store';
import { useSettingsStore } from '../../../store/settings.store';
import {
useCurrentPlayer,
useCurrentStatus,
useDefaultQueue,
usePlayerControls,
usePlayerStore,
useRepeatStatus,
useSetCurrentTime,
useShuffleStatus,
} from '/@/store';
import { useSettingsStore } from '/@/store/settings.store';
export const useCenterControls = (args: { playersRef: any }) => {
const { playersRef } = args;
const settings = useSettingsStore((state) => state.player);
const setShuffle = usePlayerStore((state) => state.setShuffle);
const setRepeat = usePlayerStore((state) => state.setRepeat);
const play = usePlayerStore((state) => state.play);
const pause = usePlayerStore((state) => state.pause);
const prev = usePlayerStore((state) => state.prev);
const next = usePlayerStore((state) => state.next);
const setCurrentIndex = usePlayerStore((state) => state.setCurrentIndex);
const autoNext = usePlayerStore((state) => state.autoNext);
const queue = usePlayerStore((state) => state.queue.default);
const playerStatus = usePlayerStore((state) => state.current.status);
const currentPlayer = usePlayerStore((state) => state.current.player);
const repeat = usePlayerStore((state) => state.repeat);
const shuffle = usePlayerStore((state) => state.shuffle);
const currentPlayer = useCurrentPlayer();
const { setShuffle, setRepeat, play, pause, previous, next, setCurrentIndex, autoNext } =
usePlayerControls();
const setCurrentTime = useSetCurrentTime();
const queue = useDefaultQueue();
const playerStatus = useCurrentStatus();
const repeatStatus = useRepeatStatus();
const shuffleStatus = useShuffleStatus();
const playerType = useSettingsStore((state) => state.player.type);
const setCurrentTime = usePlayerStore((state) => state.setCurrentTime);
const player1Ref = playersRef?.current?.player1;
const player2Ref = playersRef?.current?.player2;
const currentPlayerRef = currentPlayer === 1 ? player1Ref : player2Ref;
@@ -87,35 +88,35 @@ export const useCenterControls = (args: { playersRef: any }) => {
}, [isMpvPlayer, pause, setCurrentTime, stopPlayback]);
const handleToggleShuffle = useCallback(() => {
if (shuffle === PlayerShuffle.NONE) {
if (shuffleStatus === PlayerShuffle.NONE) {
const playerData = setShuffle(PlayerShuffle.TRACK);
return mpvPlayer.setQueueNext(playerData);
}
const playerData = setShuffle(PlayerShuffle.NONE);
return mpvPlayer.setQueueNext(playerData);
}, [setShuffle, shuffle]);
}, [setShuffle, shuffleStatus]);
const handleToggleRepeat = useCallback(() => {
if (repeat === PlayerRepeat.NONE) {
if (repeatStatus === PlayerRepeat.NONE) {
const playerData = setRepeat(PlayerRepeat.ALL);
return mpvPlayer.setQueueNext(playerData);
}
if (repeat === PlayerRepeat.ALL) {
if (repeatStatus === PlayerRepeat.ALL) {
const playerData = setRepeat(PlayerRepeat.ONE);
return mpvPlayer.setQueueNext(playerData);
}
return setRepeat(PlayerRepeat.NONE);
}, [repeat, setRepeat]);
}, [repeatStatus, setRepeat]);
const checkIsLastTrack = useCallback(() => {
return usePlayerStore.getState().checkIsLastTrack();
return usePlayerStore.getState().actions.checkIsLastTrack();
}, []);
const checkIsFirstTrack = useCallback(() => {
return usePlayerStore.getState().checkIsFirstTrack();
return usePlayerStore.getState().actions.checkIsFirstTrack();
}, []);
const handleAutoNext = useCallback(() => {
@@ -172,7 +173,7 @@ export const useCenterControls = (args: { playersRef: any }) => {
},
};
switch (repeat) {
switch (repeatStatus) {
case PlayerRepeat.NONE:
handleRepeatNone[playerType]();
break;
@@ -186,7 +187,16 @@ export const useCenterControls = (args: { playersRef: any }) => {
default:
break;
}
}, [autoNext, checkIsLastTrack, pause, play, playerType, repeat, resetPlayers, setCurrentIndex]);
}, [
autoNext,
checkIsLastTrack,
pause,
play,
playerType,
repeatStatus,
resetPlayers,
setCurrentIndex,
]);
const handleNextTrack = useCallback(() => {
const isLastTrack = checkIsLastTrack();
@@ -240,7 +250,7 @@ export const useCenterControls = (args: { playersRef: any }) => {
},
};
switch (repeat) {
switch (repeatStatus) {
case PlayerRepeat.NONE:
handleRepeatNone[playerType]();
break;
@@ -261,7 +271,7 @@ export const useCenterControls = (args: { playersRef: any }) => {
next,
pause,
playerType,
repeat,
repeatStatus,
resetPlayers,
setCurrentIndex,
setCurrentTime,
@@ -285,7 +295,7 @@ export const useCenterControls = (args: { playersRef: any }) => {
const handleRepeatAll = {
local: () => {
if (!isFirstTrack) {
const playerData = prev();
const playerData = previous();
mpvPlayer.setQueue(playerData);
mpvPlayer.previous();
} else {
@@ -299,7 +309,7 @@ export const useCenterControls = (args: { playersRef: any }) => {
setCurrentIndex(queue.length - 1);
resetPlayers();
} else {
prev();
previous();
resetPlayers();
}
},
@@ -307,7 +317,7 @@ export const useCenterControls = (args: { playersRef: any }) => {
const handleRepeatNone = {
local: () => {
const playerData = prev();
const playerData = previous();
mpvPlayer.setQueue(playerData);
mpvPlayer.previous();
},
@@ -316,7 +326,7 @@ export const useCenterControls = (args: { playersRef: any }) => {
resetPlayers();
pause();
} else {
prev();
previous();
resetPlayers();
}
},
@@ -325,7 +335,7 @@ export const useCenterControls = (args: { playersRef: any }) => {
const handleRepeatOne = {
local: () => {
if (!isFirstTrack) {
const playerData = prev();
const playerData = previous();
mpvPlayer.setQueue(playerData);
mpvPlayer.previous();
} else {
@@ -333,12 +343,12 @@ export const useCenterControls = (args: { playersRef: any }) => {
}
},
web: () => {
prev();
previous();
resetPlayers();
},
};
switch (repeat) {
switch (repeatStatus) {
case PlayerRepeat.NONE:
handleRepeatNone[playerType]();
break;
@@ -360,9 +370,9 @@ export const useCenterControls = (args: { playersRef: any }) => {
isMpvPlayer,
pause,
playerType,
prev,
previous,
queue.length,
repeat,
repeatStatus,
resetPlayers,
setCurrentIndex,
setCurrentTime,
@@ -489,7 +499,7 @@ export const useCenterControls = (args: { playersRef: any }) => {
next,
pause,
play,
prev,
previous,
setCurrentTime,
]);
packages/renderer/src/features/player/hooks/use-right-controls.ts
+4 -5
View File
@@ -1,13 +1,12 @@
import { useEffect } from 'react';
import isElectron from 'is-electron';
import { mpvPlayer } from '#preload';
import { usePlayerStore } from '../../../store';
import { useMuted, usePlayerControls, useVolume } from '/@/store';
export const useRightControls = () => {
const setVolume = usePlayerStore((state) => state.setVolume);
const volume = usePlayerStore((state) => state.volume);
const muted = usePlayerStore((state) => state.muted);
const setMuted = usePlayerStore((state) => state.setMuted);
const { setVolume, setMuted } = usePlayerControls();
const volume = useVolume();
const muted = useMuted();
// Ensure that the mpv player volume is set on startup
useEffect(() => {
packages/renderer/src/features/player/utils/handle-playqueue-add.ts
+2 -2
View File
@@ -46,7 +46,7 @@ export const handlePlayQueueAdd = async (options: PlayQueueAddOptions) => {
if (!songs) return;
const playerData = usePlayerStore.getState().addToQueue(songs, options.play);
const playerData = usePlayerStore.getState().actions.addToQueue(songs, options.play);
if (options.play === Play.NEXT || options.play === Play.LAST) {
if (playerType === PlaybackType.LOCAL) {
@@ -60,7 +60,7 @@ export const handlePlayQueueAdd = async (options: PlayQueueAddOptions) => {
mpvPlayer.play();
}
usePlayerStore.getState().play();
usePlayerStore.getState().actions.play();
}
}
};
packages/renderer/src/features/settings/components/playback-tab.tsx
+3 -3
View File
@@ -16,7 +16,7 @@ import {
} from '/@/components';
import { mpvPlayer } from '#preload';
import { SettingsOptions } from '/@/features/settings/components/settings-option';
import { usePlayerStore } from '/@/store';
import { useCurrentStatus, usePlayerStore } from '/@/store';
import { useSettingsStore } from '/@/store/settings.store';
import { Play, PlaybackStyle, PlaybackType, PlayerStatus, CrossfadeStyle } from '/@/types';
import { localSettings } from '#preload';
@@ -29,7 +29,7 @@ const getAudioDevice = async () => {
export const PlaybackTab = () => {
const settings = useSettingsStore((state) => state.player);
const update = useSettingsStore((state) => state.setSettings);
const status = usePlayerStore((state) => state.current.status);
const status = useCurrentStatus();
const [audioDevices, setAudioDevices] = useState<SelectItem[]>([]);
const [mpvPath, setMpvPath] = useState('');
const [mpvParameters, setMpvParameters] = useState('');
@@ -83,7 +83,7 @@ export const PlaybackTab = () => {
onChange={(e) => {
update({ player: { ...settings, type: e as PlaybackType } });
if (isElectron() && e === PlaybackType.LOCAL) {
const queueData = usePlayerStore.getState().getPlayerData();
const queueData = usePlayerStore.getState().actions.getPlayerData();
mpvPlayer.setQueue(queueData);
}
}}
packages/renderer/src/features/sidebar/components/sidebar.tsx
+2 -2
View File
@@ -21,7 +21,7 @@ import { useNavigate, Link } from 'react-router-dom';
import styled from 'styled-components';
import { Button, TextInput } from '/@/components';
import { AppRoute } from '/@/router/routes';
import { useAppStoreActions, usePlayerStore, useSidebarStore } from '/@/store';
import { useAppStoreActions, useCurrentSong, useSidebarStore } from '/@/store';
import { fadeIn } from '/@/styles';
import { SidebarItem } from './sidebar-item';
@@ -62,7 +62,7 @@ export const Sidebar = () => {
const navigate = useNavigate();
const sidebar = useSidebarStore();
const { setSidebar } = useAppStoreActions();
const imageUrl = usePlayerStore((state) => state.current?.song?.imageUrl);
const imageUrl = useCurrentSong()?.imageUrl;
const showImage = sidebar.image;
packages/renderer/src/store/player.store.ts
+109 -42
View File
@@ -1,9 +1,8 @@
/* eslint-disable prefer-destructuring */
/* eslint-disable @typescript-eslint/no-unused-vars */
import map from 'lodash/map';
import shuffle from 'lodash/shuffle';
import { nanoid } from 'nanoid/non-secure';
import create from 'zustand';
import shallow from 'zustand/shallow';
import { devtools, persist } from 'zustand/middleware';
import { immer } from 'zustand/middleware/immer';
import type { Song } from '/@/api/types';
@@ -55,6 +54,7 @@ export interface QueueData {
}
export interface PlayerSlice extends PlayerState {
actions: {
addToQueue: (songs: Song[], type: Play) => PlayerData;
autoNext: () => PlayerData;
checkIsFirstTrack: () => boolean;
@@ -68,7 +68,7 @@ export interface PlayerSlice extends PlayerState {
play: () => void;
player1: () => QueueSong | undefined;
player2: () => QueueSong | undefined;
prev: () => PlayerData;
previous: () => PlayerData;
reorderQueue: (rowUniqueIds: string[], afterUniqueId?: string) => PlayerData;
setCurrentIndex: (index: number) => PlayerData;
setCurrentTime: (time: number) => void;
@@ -79,12 +79,14 @@ export interface PlayerSlice extends PlayerState {
setShuffledIndex: (index: number) => PlayerData;
setStore: (data: Partial<PlayerState>) => void;
setVolume: (volume: number) => void;
};
}
export const usePlayerStore = create<PlayerSlice>()(
persist(
devtools(
immer((set, get) => ({
actions: {
addToQueue: (songs, type) => {
const shuffledIndex = get().current.shuffledIndex;
const shuffledQueue = get().queue.shuffled;
@@ -164,10 +166,10 @@ export const usePlayerStore = create<PlayerSlice>()(
});
}
return get().getPlayerData();
return get().actions.getPlayerData();
},
autoNext: () => {
const isLastTrack = get().checkIsLastTrack();
const isLastTrack = get().actions.checkIsLastTrack();
const repeat = get().repeat;
if (repeat === PlayerRepeat.ONE) {
@@ -212,7 +214,7 @@ export const usePlayerStore = create<PlayerSlice>()(
});
}
return get().getPlayerData();
return get().actions.getPlayerData();
},
checkIsFirstTrack: () => {
const currentIndex =
@@ -230,22 +232,12 @@ export const usePlayerStore = create<PlayerSlice>()(
return currentIndex === get().queue.default.length - 1;
},
current: {
index: 0,
nextIndex: 0,
player: 1,
previousIndex: 0,
shuffledIndex: 0,
song: {} as QueueSong,
status: PlayerStatus.PAUSED,
time: 0,
},
getPlayerData: () => {
const queue = get().queue.default;
const currentPlayer = get().current.player;
const repeat = get().repeat;
const isLastTrack = get().checkIsLastTrack();
const isFirstTrack = get().checkIsFirstTrack();
const isLastTrack = get().actions.checkIsLastTrack();
const isFirstTrack = get().actions.checkIsFirstTrack();
let player1;
let player2;
@@ -378,9 +370,8 @@ export const usePlayerStore = create<PlayerSlice>()(
previous: queue[get().current.index - 1],
};
},
muted: false,
next: () => {
const isLastTrack = get().checkIsLastTrack();
const isLastTrack = get().actions.checkIsLastTrack();
const repeat = get().repeat;
if (get().shuffle === PlayerShuffle.TRACK) {
@@ -421,7 +412,7 @@ export const usePlayerStore = create<PlayerSlice>()(
});
}
return get().getPlayerData();
return get().actions.getPlayerData();
},
pause: () => {
set((state) => {
@@ -434,13 +425,13 @@ export const usePlayerStore = create<PlayerSlice>()(
});
},
player1: () => {
return get().getPlayerData().player1;
return get().actions.getPlayerData().player1;
},
player2: () => {
return get().getPlayerData().player2;
return get().actions.getPlayerData().player2;
},
prev: () => {
const isFirstTrack = get().checkIsFirstTrack();
previous: () => {
const isFirstTrack = get().actions.checkIsFirstTrack();
const repeat = get().repeat;
if (get().shuffle === PlayerShuffle.TRACK) {
@@ -479,19 +470,12 @@ export const usePlayerStore = create<PlayerSlice>()(
});
}
return get().getPlayerData();
},
queue: {
default: [],
played: [],
previousNode: {} as QueueSong,
shuffled: [],
sorted: [],
return get().actions.getPlayerData();
},
reorderQueue: (rowUniqueIds: string[], afterUniqueId?: string) => {
// Don't move if dropping on top of a selected row
if (afterUniqueId && rowUniqueIds.includes(afterUniqueId)) {
return get().getPlayerData();
return get().actions.getPlayerData();
}
const queue = get().queue.default;
@@ -525,9 +509,8 @@ export const usePlayerStore = create<PlayerSlice>()(
queue: { ...get().queue, default: reorderedQueue },
});
return get().getPlayerData();
return get().actions.getPlayerData();
},
repeat: PlayerRepeat.NONE,
setCurrentIndex: (index) => {
if (get().shuffle === PlayerShuffle.TRACK) {
const foundSong = get().queue.default.find(
@@ -554,7 +537,7 @@ export const usePlayerStore = create<PlayerSlice>()(
});
}
return get().getPlayerData();
return get().actions.getPlayerData();
},
setCurrentTime: (time) => {
set((state) => {
@@ -591,7 +574,7 @@ export const usePlayerStore = create<PlayerSlice>()(
});
}
return get().getPlayerData();
return get().actions.getPlayerData();
},
setMuted: (muted: boolean) => {
set((state) => {
@@ -603,7 +586,7 @@ export const usePlayerStore = create<PlayerSlice>()(
state.repeat = type;
});
return get().getPlayerData();
return get().actions.getPlayerData();
},
setShuffle: (type: PlayerShuffle) => {
if (type === PlayerShuffle.NONE) {
@@ -612,7 +595,7 @@ export const usePlayerStore = create<PlayerSlice>()(
state.queue.shuffled = [];
});
return get().getPlayerData();
return get().actions.getPlayerData();
}
const currentSongId = get().current.song?.uniqueId;
@@ -629,7 +612,7 @@ export const usePlayerStore = create<PlayerSlice>()(
state.queue.shuffled = [currentSongId!, ...shuffledSongIds];
});
return get().getPlayerData();
return get().actions.getPlayerData();
},
setShuffledIndex: (index) => {
set((state) => {
@@ -640,7 +623,7 @@ export const usePlayerStore = create<PlayerSlice>()(
state.queue.previousNode = get().current.song;
});
return get().getPlayerData();
return get().actions.getPlayerData();
},
setStore: (data) => {
set({ ...get(), ...data });
@@ -650,6 +633,26 @@ export const usePlayerStore = create<PlayerSlice>()(
state.volume = volume;
});
},
},
current: {
index: 0,
nextIndex: 0,
player: 1,
previousIndex: 0,
shuffledIndex: 0,
song: {} as QueueSong,
status: PlayerStatus.PAUSED,
time: 0,
},
muted: false,
queue: {
default: [],
played: [],
previousNode: {} as QueueSong,
shuffled: [],
sorted: [],
},
repeat: PlayerRepeat.NONE,
shuffle: PlayerShuffle.NONE,
volume: 50,
})),
@@ -658,3 +661,67 @@ export const usePlayerStore = create<PlayerSlice>()(
{ name: 'store_player' },
),
);
export const usePlayerStoreActions = () => usePlayerStore((state) => state.actions);
export const usePlayerControls = () =>
usePlayerStore(
(state) => ({
autoNext: state.actions.autoNext,
next: state.actions.next,
pause: state.actions.pause,
play: state.actions.play,
previous: state.actions.previous,
setCurrentIndex: state.actions.setCurrentIndex,
setMuted: state.actions.setMuted,
setRepeat: state.actions.setRepeat,
setShuffle: state.actions.setShuffle,
setShuffledIndex: state.actions.setShuffledIndex,
setVolume: state.actions.setVolume,
}),
shallow,
);
export const useQueueControls = () =>
usePlayerStore(
(state) => ({
addToQueue: state.actions.addToQueue,
reorderQueue: state.actions.reorderQueue,
setCurrentIndex: state.actions.setCurrentIndex,
setCurrentTrack: state.actions.setCurrentTrack,
setShuffledIndex: state.actions.setShuffledIndex,
}),
shallow,
);
export const useQueueData = () => usePlayerStore((state) => state.actions.getQueueData);
export const usePlayer1Data = () => usePlayerStore((state) => state.actions.player1);
export const usePlayer2Data = () => usePlayerStore((state) => state.actions.player2);
export const useSetCurrentTime = () => usePlayerStore((state) => state.actions.setCurrentTime);
export const useIsFirstTrack = () => usePlayerStore((state) => state.actions.checkIsFirstTrack);
export const useIsLastTrack = () => usePlayerStore((state) => state.actions.checkIsLastTrack);
export const useDefaultQueue = () => usePlayerStore((state) => state.queue.default);
export const useCurrentSong = () => usePlayerStore((state) => state.current.song);
export const useCurrentPlayer = () => usePlayerStore((state) => state.current.player);
export const useCurrentStatus = () => usePlayerStore((state) => state.current.status);
export const usePreviousSong = () => usePlayerStore((state) => state.queue.previousNode);
export const useRepeatStatus = () => usePlayerStore((state) => state.repeat);
export const useShuffleStatus = () => usePlayerStore((state) => state.shuffle);
export const useCurrentTime = () => usePlayerStore((state) => state.current.time);
export const useVolume = () => usePlayerStore((state) => state.volume);
export const useMuted = () => usePlayerStore((state) => state.muted);
packages/renderer/src/themes/default.scss
+5 -6
View File
@@ -2,7 +2,7 @@
--root-font-size: 12px;
--icon-color: rgb(255, 255, 255);
--primary-color: rgb(49, 107, 224);
--primary-color: rgb(89, 141, 245);
--secondary-color: rgb(255, 120, 120);
--success-color: green;
--warning-color: orange;
@@ -20,7 +20,7 @@
--sidebar-btn-color: rgb(179, 179, 179);
--sidebar-btn-color-hover: #dddddd;
--sidebar-handle-bg: #4d4d4d;
--sidebar-border: 1px rgba(150, 150, 150, 0.1) solid;
--sidebar-border: none;
--playerbar-bg: linear-gradient(rgb(20, 20, 20) 0%, rgb(30, 30, 30) 50%, rgb(20, 20, 20) 100%);
--playerbar-btn-main-fg: rgb(0, 0, 0);
@@ -38,7 +38,7 @@
--tooltip-bg: #ffffff;
--tooltip-fg: #000000;
--scrollbar-track-bg: #181818;
--scrollbar-track-bg: transparent;
--scrollbar-thumb-bg: rgba(90, 90, 90, 0.5);
--btn-primary-bg: var(--primary-color);
@@ -46,14 +46,14 @@
--btn-primary-fg: #ffffff;
--btn-primary-fg-hover: #ffffff;
--btn-default-bg: rgb(39, 39, 39);
--btn-default-bg: rgb(31, 31, 32);
--btn-default-bg-hover: rgb(63, 63, 63);
--btn-default-fg: rgb(193, 193, 193);
--btn-default-fg-hover: rgb(193, 193, 193);
--btn-subtle-bg: transparent;
--btn-subtle-bg-hover: transparent;
--btn-subtle-fg: rgb(150, 150, 150);
--btn-subtle-fg: rgb(224, 224, 224);
--btn-subtle-fg-hover: rgb(240, 240, 240);
--input-bg: rgb(35, 35, 35);
@@ -107,7 +107,6 @@
--ag-foreground-color: rgb(179, 179, 179);
--ag-background-color: var(--main-bg);
// --ag-odd-row-background-color: rgb(25, 25, 25);
--ag-row-hover-color: rgba(100, 100, 100, 0.2);
--ag-selected-row-background-color: rgba(100, 100, 100, 0.4);
}
packages/renderer/src/themes/light.scss
+14 -3
View File
@@ -9,7 +9,7 @@ body[data-theme="defaultLight"] {
--titlebar-fg: rgb(25, 25, 25);
--titlebar-bg: rgb(227, 229, 232);
--sidebar-bg: rgb(255, 255, 255);
--sidebar-bg: rgb(240, 241, 242);
--sidebar-btn-color: rgb(0, 0, 0);
--sidebar-btn-color-hover: rgb(0, 0, 0);
--sidebar-handle-bg: #4d4d4d;
@@ -34,8 +34,8 @@ body[data-theme="defaultLight"] {
--tooltip-bg: rgb(255, 255, 255);
--tooltip-fg: rgb(0, 0, 0);
--scrollbar-track-bg: rgba(0, 0, 0, 0.2);
--scrollbar-thumb-bg: rgb(150, 150, 150);
--scrollbar-track-bg: transparent;
--scrollbar-thumb-bg: rgb(140, 140, 140);
--btn-primary-bg: var(--primary-color);
--btn-primary-bg-hover: rgb(47, 122, 237);
@@ -109,6 +109,17 @@ body[data-theme="defaultLight"] {
--ag-selected-row-background-color: rgba(100, 100, 100, 0.4);
}
.ag-root ::-webkit-scrollbar-corner {
background: var(--scrollbar-track-bg);
}
.ag-root ::-webkit-scrollbar-track-piece {
background: var(--scrollbar-track-bg);
}
.ag-root ::-webkit-scrollbar-thumb {
background: var(--scrollbar-thumb-bg);
// background: black;
}
.ag-cell-focus {
border: 1px rgba(60, 60, 60, 0.3) solid !important;
}