antebudimir/feishin
1
0
Fork 0
mirror of https://github.com/antebudimir/feishin.git synced 2026-01-02 02:43:33 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

restructure files onto electron-vite boilerplate

Browse source
This commit is contained in:
jeffvli 2025-05-18 14:03:18 -07:00
parent 91ce2cd8a1
commit 1cf587bc8f
457 changed files with 9927 additions and 11705 deletions
Download patch file Download diff file Expand all files Collapse all files

60
src/renderer/features/player/components/center-controls.tsx
View file

@ -1,9 +1,10 @@
import { useEffect, useState } from 'react';
import { useHotkeys } from '@mantine/hooks';
import { useQueryClient } from '@tanstack/react-query';
import formatDuration from 'format-duration';
import isElectron from 'is-electron';
import { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { BsDice3 } from 'react-icons/bs';
import { IoIosPause } from 'react-icons/io';
import {
RiPlayFill,
@ -16,29 +17,30 @@ import {
RiSpeedFill,
RiStopFill,
} from 'react-icons/ri';
import { BsDice3 } from 'react-icons/bs';
import styled from 'styled-components';
import { Text } from '/@/renderer/components';
import { useCenterControls } from '../hooks/use-center-controls';
import { PlayerButton } from './player-button';
import { openShuffleAllModal } from './shuffle-all-modal';
import { Text } from '/@/renderer/components';
import { PlayerbarSlider } from '/@/renderer/features/player/components/playerbar-slider';
import { usePlayQueueAdd } from '/@/renderer/features/player/hooks/use-playqueue-add';
import {
useCurrentPlayer,
useCurrentSong,
useCurrentStatus,
useCurrentPlayer,
useSetCurrentTime,
useRepeatStatus,
useShuffleStatus,
useCurrentTime,
useRepeatStatus,
useSetCurrentTime,
useShuffleStatus,
} from '/@/renderer/store';
import {
useHotkeySettings,
usePlaybackType,
useSettingsStore,
} from '/@/renderer/store/settings.store';
import { PlayerStatus, PlaybackType, PlayerShuffle, PlayerRepeat } from '/@/renderer/types';
import { PlayerbarSlider } from '/@/renderer/features/player/components/playerbar-slider';
import { openShuffleAllModal } from './shuffle-all-modal';
import { usePlayQueueAdd } from '/@/renderer/features/player/hooks/use-playqueue-add';
import { PlaybackType, PlayerRepeat, PlayerShuffle, PlayerStatus } from '/@/renderer/types';
interface CenterControlsProps {
playersRef: any;
@ -111,16 +113,16 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
const {
handleNextTrack,
handlePause,
handlePlay,
handlePlayPause,
handlePrevTrack,
handleSeekSlider,
handleSkipBackward,
handleSkipForward,
handleStop,
handleToggleRepeat,
handleToggleShuffle,
handleStop,
handlePause,
handlePlay,
} = useCenterControls({ playersRef });
const handlePlayQueueAdd = usePlayQueueAdd();
@ -174,15 +176,16 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
<ButtonsContainer>
<PlayerButton
icon={<RiStopFill size={buttonSize} />}
onClick={handleStop}
tooltip={{
label: t('player.stop', { postProcess: 'sentenceCase' }),
}}
variant="tertiary"
onClick={handleStop}
/>
<PlayerButton
$isActive={shuffle !== PlayerShuffle.NONE}
icon={<RiShuffleFill size={buttonSize} />}
onClick={handleToggleShuffle}
tooltip={{
label:
shuffle === PlayerShuffle.NONE
@ -193,19 +196,19 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
: t('player.shuffle', { postProcess: 'sentenceCase' }),
}}
variant="tertiary"
onClick={handleToggleShuffle}
/>
<PlayerButton
icon={<RiSkipBackFill size={buttonSize} />}
onClick={handlePrevTrack}
tooltip={{
label: t('player.previous', { postProcess: 'sentenceCase' }),
}}
variant="secondary"
onClick={handlePrevTrack}
/>
{skip?.enabled && (
<PlayerButton
icon={<RiRewindFill size={buttonSize} />}
onClick={() => handleSkipBackward(skip?.skipBackwardSeconds)}
tooltip={{
label: t('player.skip', {
context: 'back',
@ -213,7 +216,6 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
}),
}}
variant="secondary"
onClick={() => handleSkipBackward(skip?.skipBackwardSeconds)}
/>
)}
<PlayerButton
@ -225,6 +227,7 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
<IoIosPause size={buttonSize} />
)
}
onClick={handlePlayPause}
tooltip={{
label:
status === PlayerStatus.PAUSED
@ -232,11 +235,11 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
: t('player.pause', { postProcess: 'sentenceCase' }),
}}
variant="main"
onClick={handlePlayPause}
/>
{skip?.enabled && (
<PlayerButton
icon={<RiSpeedFill size={buttonSize} />}
onClick={() => handleSkipForward(skip?.skipForwardSeconds)}
tooltip={{
label: t('player.skip', {
context: 'forward',
@ -244,16 +247,15 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
}),
}}
variant="secondary"
onClick={() => handleSkipForward(skip?.skipForwardSeconds)}
/>
)}
<PlayerButton
icon={<RiSkipForwardFill size={buttonSize} />}
onClick={handleNextTrack}
tooltip={{
label: t('player.next', { postProcess: 'sentenceCase' }),
}}
variant="secondary"
onClick={handleNextTrack}
/>
<PlayerButton
$isActive={repeat !== PlayerRepeat.NONE}
@ -264,6 +266,7 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
<RiRepeat2Line size={buttonSize} />
)
}
onClick={handleToggleRepeat}
tooltip={{
label: `${
repeat === PlayerRepeat.NONE
@ -283,21 +286,20 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
}`,
}}
variant="tertiary"
onClick={handleToggleRepeat}
/>
<PlayerButton
icon={<BsDice3 size={buttonSize} />}
tooltip={{
label: t('player.playRandom', { postProcess: 'sentenceCase' }),
}}
variant="tertiary"
onClick={() =>
openShuffleAllModal({
handlePlayQueueAdd,
queryClient,
})
}
tooltip={{
label: t('player.playRandom', { postProcess: 'sentenceCase' }),
}}
variant="tertiary"
/>
</ButtonsContainer>
</ControlsContainer>
@ -317,9 +319,6 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
label={(value) => formatDuration(value * 1000)}
max={songDuration}
min={0}
size={6}
value={!isSeeking ? currentTime : seekValue}
w="100%"
onChange={(e) => {
setIsSeeking(true);
setSeekValue(e);
@ -333,6 +332,9 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
setIsSeeking(false);
}, 50);
}}
size={6}
value={!isSeeking ? currentTime : seekValue}
w="100%"
/>
</SliderWrapper>
<SliderValueWrapper $position="right">

13
src/renderer/features/player/components/full-screen-player-image.tsx
View file

@ -1,11 +1,12 @@
import { Flex, Stack, Group, Center } from '@mantine/core';
import { Center, Flex, Group, Stack } from '@mantine/core';
import { useSetState } from '@mantine/hooks';
import { AnimatePresence, HTMLMotionProps, motion, Variants } from 'framer-motion';
import { useEffect, useRef, useLayoutEffect, useState, useCallback, Fragment } from 'react';
import { Fragment, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
import { RiAlbumFill } from 'react-icons/ri';
import { generatePath } from 'react-router';
import { Link } from 'react-router-dom';
import styled from 'styled-components';
import { QueueSong } from '/@/renderer/api/types';
import { Badge, Text, TextTitle } from '/@/renderer/components';
import { useFastAverageColor } from '/@/renderer/hooks';
@ -90,7 +91,7 @@ const imageVariants: Variants = {
},
};
const scaleImageUrl = (imageSize: number, url?: string | null) => {
const scaleImageUrl = (imageSize: number, url?: null | string) => {
return url
?.replace(/&size=\d+/, `&size=${imageSize}`)
.replace(/\?width=\d+/, `?width=${imageSize}`)
@ -213,13 +214,13 @@ export const FullScreenPlayerImage = () => {
>
{imageState.current === 0 && (
<ImageWithPlaceholder
key={imageKey}
animate="open"
className="full-screen-player-image"
custom={{ isOpen: imageState.current === 0 }}
draggable={false}
exit="closed"
initial="closed"
key={imageKey}
placeholder="var(--placeholder-bg)"
src={imageState.topImage || ''}
useAspectRatio={useImageAspectRatio}
@ -229,13 +230,13 @@ export const FullScreenPlayerImage = () => {
{imageState.current === 1 && (
<ImageWithPlaceholder
key={imageKey}
animate="open"
className="full-screen-player-image"
custom={{ isOpen: imageState.current === 1 }}
draggable={false}
exit="closed"
initial="closed"
key={imageKey}
placeholder="var(--placeholder-bg)"
src={imageState.bottomImage || ''}
useAspectRatio={useImageAspectRatio}
@ -279,8 +280,8 @@ export const FullScreenPlayerImage = () => {
{currentSong?.album}{' '}
</TextTitle>
<TextTitle
key="fs-artists"
align="center"
key="fs-artists"
order={3}
style={{
textShadow: 'var(--fullscreen-player-text-shadow)',

15
src/renderer/features/player/components/full-screen-player-queue.tsx
View file

@ -1,20 +1,21 @@
import { Group } from '@mantine/core';
import { motion } from 'framer-motion';
import { lazy, Suspense, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { HiOutlineQueueList } from 'react-icons/hi2';
import { RiFileMusicLine, RiFileTextLine } from 'react-icons/ri';
import styled from 'styled-components';
import { Button } from '/@/renderer/components';
import { Lyrics } from '/@/renderer/features/lyrics/lyrics';
import { PlayQueue } from '/@/renderer/features/now-playing';
import { FullScreenSimilarSongs } from '/@/renderer/features/player/components/full-screen-similar-songs';
import { usePlaybackSettings } from '/@/renderer/store';
import {
useFullScreenPlayerStore,
useFullScreenPlayerStoreActions,
} from '/@/renderer/store/full-screen-player.store';
import { Lyrics } from '/@/renderer/features/lyrics/lyrics';
import { lazy, Suspense, useMemo } from 'react';
import { usePlaybackSettings } from '/@/renderer/store';
import { PlaybackType } from '/@/renderer/types';
import { FullScreenSimilarSongs } from '/@/renderer/features/player/components/full-screen-similar-songs';
const Visualizer = lazy(() =>
import('/@/renderer/features/player/components/visualizer').then((module) => ({
@ -112,17 +113,17 @@ export const FullScreenPlayerQueue = () => {
opacity={opacity}
>
<Group
grow
align="center"
className="full-screen-player-queue-header"
grow
position="center"
>
{headerItems.map((item) => (
<HeaderItemWrapper key={`tab-${item.label}`}>
<Button
fullWidth
uppercase
fw="600"
onClick={item.onClick}
pos="relative"
size="lg"
sx={{
@ -132,8 +133,8 @@ export const FullScreenPlayerQueue = () => {
: 'var(--main-fg-secondary) !important',
letterSpacing: '1px',
}}
uppercase
variant="subtle"
onClick={item.onClick}
>
{item.label}
</Button>

32
src/renderer/features/player/components/full-screen-player.tsx
View file

@ -1,11 +1,14 @@
import { useLayoutEffect, useRef } from 'react';
import { Divider, Group } from '@mantine/core';
import { useHotkeys } from '@mantine/hooks';
import { Variants, motion } from 'framer-motion';
import { motion, Variants } from 'framer-motion';
import { useLayoutEffect, useRef } from 'react';
import { useTranslation } from 'react-i18next';
import { RiArrowDownSLine, RiSettings3Line } from 'react-icons/ri';
import { useLocation } from 'react-router';
import styled from 'styled-components';
import { useFastAverageColor } from '../../../hooks/use-fast-average-color';
import {
Button,
NumberInput,
@ -15,6 +18,9 @@ import {
Slider,
Switch,
} from '/@/renderer/components';
import { TableConfigDropdown } from '/@/renderer/components/virtual-table';
import { FullScreenPlayerImage } from '/@/renderer/features/player/components/full-screen-player-image';
import { FullScreenPlayerQueue } from '/@/renderer/features/player/components/full-screen-player-queue';
import {
useCurrentSong,
useFullScreenPlayerStore,
@ -24,10 +30,6 @@ import {
useSettingsStoreActions,
useWindowSettings,
} from '/@/renderer/store';
import { useFastAverageColor } from '../../../hooks/use-fast-average-color';
import { FullScreenPlayerImage } from '/@/renderer/features/player/components/full-screen-player-image';
import { FullScreenPlayerQueue } from '/@/renderer/features/player/components/full-screen-player-queue';
import { TableConfigDropdown } from '/@/renderer/components/virtual-table';
import { Platform } from '/@/renderer/types';
const Container = styled(motion.div)`
@ -119,10 +121,10 @@ const Controls = () => {
>
<Button
compact
onClick={handleToggleFullScreenPlayer}
size="sm"
tooltip={{ label: t('common.minimize', { postProcess: 'titleCase' }) }}
variant="subtle"
onClick={handleToggleFullScreenPlayer}
>
<RiArrowDownSLine size="2rem" />
</Button>
@ -187,9 +189,9 @@ const Controls = () => {
label={(e) => `${e} rem`}
max={6}
min={0}
onChangeEnd={(e) => setStore({ dynamicImageBlur: Number(e) })}
step={0.5}
w="100%"
onChangeEnd={(e) => setStore({ dynamicImageBlur: Number(e) })}
/>
</Option.Control>
</Option>
@ -207,8 +209,8 @@ const Controls = () => {
label={(e) => `${e} %`}
max={100}
min={0}
w="100%"
onChangeEnd={(e) => setStore({ opacity: Number(e) })}
w="100%"
/>
</Option.Control>
</Option>
@ -296,8 +298,8 @@ const Controls = () => {
}
max={72}
min={8}
w="100%"
onChangeEnd={(e) => handleLyricsSettings('fontSize', Number(e))}
w="100%"
/>
<Slider
defaultValue={lyricConfig.fontSize}
@ -308,10 +310,10 @@ const Controls = () => {
}
max={72}
min={8}
w="100%"
onChangeEnd={(e) =>
handleLyricsSettings('fontSizeUnsync', Number(e))
}
w="100%"
/>
</Group>
</Option.Control>
@ -332,18 +334,18 @@ const Controls = () => {
label={(e) => `Synchronized: ${e}px`}
max={50}
min={0}
w="100%"
onChangeEnd={(e) => handleLyricsSettings('gap', Number(e))}
w="100%"
/>
<Slider
defaultValue={lyricConfig.gap}
label={(e) => `Unsynchronized: ${e}px`}
max={50}
min={0}
w="100%"
onChangeEnd={(e) =>
handleLyricsSettings('gapUnsync', Number(e))
}
w="100%"
/>
</Group>
</Option.Control>
@ -376,8 +378,8 @@ const Controls = () => {
value: 'right',
},
]}
value={lyricConfig.alignment}
onChange={(e) => handleLyricsSettings('alignment', e)}
value={lyricConfig.alignment}
/>
</Option.Control>
</Option>
@ -391,10 +393,10 @@ const Controls = () => {
<NumberInput
defaultValue={lyricConfig.delayMs}
hideControls={false}
step={10}
onBlur={(e) =>
handleLyricsSettings('delayMs', Number(e.currentTarget.value))
}
step={10}
/>
</Option.Control>
</Option>

31
src/renderer/features/player/components/left-controls.tsx
View file

@ -1,26 +1,27 @@
import React, { MouseEvent } from 'react';
import { Center, Group } from '@mantine/core';
import { useHotkeys } from '@mantine/hooks';
import { motion, AnimatePresence, LayoutGroup } from 'framer-motion';
import { AnimatePresence, LayoutGroup, motion } from 'framer-motion';
import React, { MouseEvent } from 'react';
import { useTranslation } from 'react-i18next';
import { RiArrowUpSLine, RiDiscLine, RiMore2Fill } from 'react-icons/ri';
import { generatePath, Link } from 'react-router-dom';
import styled from 'styled-components';
import { LibraryItem } from '/@/renderer/api/types';
import { Button, Text, Tooltip } from '/@/renderer/components';
import { Separator } from '/@/renderer/components/separator';
import { SONG_CONTEXT_MENU_ITEMS } from '/@/renderer/features/context-menu/context-menu-items';
import { useHandleGeneralContextMenu } from '/@/renderer/features/context-menu/hooks/use-handle-context-menu';
import { AppRoute } from '/@/renderer/router/routes';
import {
useAppStoreActions,
useCurrentSong,
useSetFullScreenPlayerStore,
useFullScreenPlayerStore,
useSidebarStore,
useHotkeySettings,
useSetFullScreenPlayerStore,
useSidebarStore,
} from '/@/renderer/store';
import { fadeIn } from '/@/renderer/styles';
import { LibraryItem } from '/@/renderer/api/types';
import { SONG_CONTEXT_MENU_ITEMS } from '/@/renderer/features/context-menu/context-menu-items';
import { useHandleGeneralContextMenu } from '/@/renderer/features/context-menu/hooks/use-handle-context-menu';
import { Separator } from '/@/renderer/components/separator';
const ImageWrapper = styled.div`
position: relative;
@ -98,7 +99,7 @@ export const LeftControls = () => {
const { setSideBar } = useAppStoreActions();
const { expanded: isFullScreenPlayerExpanded } = useFullScreenPlayerStore();
const setFullScreenPlayerStore = useSetFullScreenPlayerStore();
const { image, collapsed } = useSidebarStore();
const { collapsed, image } = useSidebarStore();
const hideImage = image && !collapsed;
const currentSong = useCurrentSong();
const title = currentSong?.name;
@ -112,7 +113,7 @@ export const LeftControls = () => {
SONG_CONTEXT_MENU_ITEMS,
);
const handleToggleFullScreenPlayer = (e?: MouseEvent<HTMLDivElement> | KeyboardEvent) => {
const handleToggleFullScreenPlayer = (e?: KeyboardEvent | MouseEvent<HTMLDivElement>) => {
e?.stopPropagation();
setFullScreenPlayerStore({ expanded: !isFullScreenPlayerExpanded });
};
@ -143,13 +144,13 @@ export const LeftControls = () => {
{!hideImage && (
<ImageWrapper>
<Image
key="playerbar-image"
animate={{ opacity: 1, scale: 1, x: 0 }}
exit={{ opacity: 0, x: -50 }}
initial={{ opacity: 0, x: -50 }}
key="playerbar-image"
onClick={handleToggleFullScreenPlayer}
role="button"
transition={{ duration: 0.3, ease: 'easeInOut' }}
onClick={handleToggleFullScreenPlayer}
>
<Tooltip
label={t('player.toggleFullscreenPlayer', {
@ -180,6 +181,7 @@ export const LeftControls = () => {
{!collapsed && (
<Button
compact
onClick={handleToggleSidebarImage}
opacity={0.8}
radius={50}
size="md"
@ -196,7 +198,6 @@ export const LeftControls = () => {
openDelay: 500,
}}
variant="default"
onClick={handleToggleSidebarImage}
>
<RiArrowUpSLine
color="white"
@ -211,8 +212,8 @@ export const LeftControls = () => {
<MetadataStack layout="position">
<LineItem onClick={stopPropagation}>
<Group
noWrap
align="flex-start"
noWrap
spacing="xs"
>
<Text
@ -228,8 +229,8 @@ export const LeftControls = () => {
{isSongDefined && (
<Button
compact
variant="subtle"
onClick={(e) => handleGeneralContextMenu(e, [currentSong!])}
variant="subtle"
>
<RiMore2Fill size="1.2rem" />
</Button>

10
src/renderer/features/player/components/player-button.tsx
View file

@ -1,12 +1,14 @@
/* stylelint-disable no-descending-specificity */
import { ComponentPropsWithoutRef, forwardRef, ReactNode } from 'react';
import type { TooltipProps, UnstyledButtonProps } from '@mantine/core';
import { UnstyledButton } from '@mantine/core';
import { motion } from 'framer-motion';
/* stylelint-disable no-descending-specificity */
import { ComponentPropsWithoutRef, forwardRef, ReactNode } from 'react';
import styled, { css } from 'styled-components';
import { Tooltip } from '/@/renderer/components';
type MantineButtonProps = UnstyledButtonProps & ComponentPropsWithoutRef<'button'>;
type MantineButtonProps = ComponentPropsWithoutRef<'button'> & UnstyledButtonProps;
interface PlayerButtonProps extends MantineButtonProps {
$isActive?: boolean;
icon: ReactNode;
@ -121,7 +123,7 @@ const StyledPlayerButton = styled(UnstyledButton)<StyledPlayerButtonProps>`
`;
export const PlayerButton = forwardRef<HTMLDivElement, PlayerButtonProps>(
({ tooltip, variant, icon, ...rest }: PlayerButtonProps, ref) => {
({ icon, tooltip, variant, ...rest }: PlayerButtonProps, ref) => {
if (tooltip) {
return (
<Tooltip {...tooltip}>

34
src/renderer/features/player/components/playerbar.tsx
View file

@ -1,28 +1,30 @@
import { useCallback, MouseEvent } from 'react';
import { MouseEvent, useCallback } from 'react';
import styled from 'styled-components';
import {
usePlaybackType,
useSettingsStore,
useGeneralSettings,
} from '/@/renderer/store/settings.store';
import { PlaybackType } from '/@/renderer/types';
import { CenterControls } from './center-controls';
import { LeftControls } from './left-controls';
import { RightControls } from './right-controls';
import { AudioPlayer } from '/@/renderer/components';
import { PlayersRef } from '/@/renderer/features/player/ref/players-ref';
import { updateSong } from '/@/renderer/features/player/update-remote-song';
import {
useCurrentPlayer,
useCurrentStatus,
useFullScreenPlayerStore,
useMuted,
usePlayer1Data,
usePlayer2Data,
usePlayerControls,
useVolume,
useSetFullScreenPlayerStore,
useFullScreenPlayerStore,
useVolume,
} from '/@/renderer/store';
import { CenterControls } from './center-controls';
import { LeftControls } from './left-controls';
import { RightControls } from './right-controls';
import { PlayersRef } from '/@/renderer/features/player/ref/players-ref';
import { updateSong } from '/@/renderer/features/player/update-remote-song';
import {
useGeneralSettings,
usePlaybackType,
useSettingsStore,
} from '/@/renderer/store/settings.store';
import { PlaybackType } from '/@/renderer/types';
const PlayerbarContainer = styled.div`
width: 100vw;
@ -80,7 +82,7 @@ export const Playerbar = () => {
const { expanded: isFullScreenPlayerExpanded } = useFullScreenPlayerStore();
const setFullScreenPlayerStore = useSetFullScreenPlayerStore();
const handleToggleFullScreenPlayer = (e?: MouseEvent<HTMLDivElement> | KeyboardEvent) => {
const handleToggleFullScreenPlayer = (e?: KeyboardEvent | MouseEvent<HTMLDivElement>) => {
e?.stopPropagation();
setFullScreenPlayerStore({ expanded: !isFullScreenPlayerExpanded });
};
@ -107,7 +109,6 @@ export const Playerbar = () => {
</PlayerbarControlsGrid>
{playbackType === PlaybackType.WEB && (
<AudioPlayer
ref={playersRef}
autoNext={autoNextFn}
crossfadeDuration={settings.crossfadeDuration}
crossfadeStyle={settings.crossfadeStyle}
@ -116,6 +117,7 @@ export const Playerbar = () => {
playbackStyle={settings.style}
player1={player1}
player2={player2}
ref={playersRef}
status={status}
style={settings.style}
volume={(volume / 100) ** 2}

58
src/renderer/features/player/components/right-controls.tsx
View file

@ -1,16 +1,25 @@
import { useEffect } from 'react';
import { Flex, Group } from '@mantine/core';
import { useHotkeys, useMediaQuery } from '@mantine/hooks';
import isElectron from 'is-electron';
import { useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { HiOutlineQueueList } from 'react-icons/hi2';
import {
RiVolumeUpFill,
RiHeartFill,
RiHeartLine,
RiVolumeDownFill,
RiVolumeMuteFill,
RiHeartLine,
RiHeartFill,
RiVolumeUpFill,
} from 'react-icons/ri';
import { useRightControls } from '../hooks/use-right-controls';
import { PlayerButton } from './player-button';
import { LibraryItem, QueueSong, ServerType, Song } from '/@/renderer/api/types';
import { DropdownMenu, Rating } from '/@/renderer/components';
import { Slider } from '/@/renderer/components/slider';
import { PlayerbarSlider } from '/@/renderer/features/player/components/playerbar-slider';
import { useCreateFavorite, useDeleteFavorite, useSetRating } from '/@/renderer/features/shared';
import {
useAppStoreActions,
useCurrentServer,
@ -23,16 +32,9 @@ import {
useSpeed,
useVolume,
} from '/@/renderer/store';
import { useRightControls } from '../hooks/use-right-controls';
import { PlayerButton } from './player-button';
import { LibraryItem, QueueSong, ServerType, Song } from '/@/renderer/api/types';
import { useCreateFavorite, useDeleteFavorite, useSetRating } from '/@/renderer/features/shared';
import { DropdownMenu, Rating } from '/@/renderer/components';
import { PlayerbarSlider } from '/@/renderer/features/player/components/playerbar-slider';
import { Slider } from '/@/renderer/components/slider';
const ipc = isElectron() ? window.electron.ipc : null;
const remote = isElectron() ? window.electron.remote : null;
const ipc = isElectron() ? window.api.ipc : null;
const remote = isElectron() ? window.api.remote : null;
export const RightControls = () => {
const { t } = useTranslation();
@ -46,12 +48,12 @@ export const RightControls = () => {
const { rightExpanded: isQueueExpanded } = useSidebarStore();
const { bindings } = useHotkeySettings();
const {
handleVolumeSlider,
handleVolumeWheel,
handleMute,
handleVolumeDown,
handleVolumeUp,
handleSpeed,
handleVolumeDown,
handleVolumeSlider,
handleVolumeUp,
handleVolumeWheel,
} = useRightControls();
const speed = useSpeed();
@ -208,23 +210,23 @@ export const RightControls = () => {
<Group h="calc(100% / 3)">
{showRating && (
<Rating
onChange={handleUpdateRating}
size="sm"
value={currentSong?.userRating || 0}
onChange={handleUpdateRating}
/>
)}
</Group>
<Group
noWrap
align="center"
noWrap
spacing="xs"
>
<DropdownMenu
withArrow
arrowOffset={12}
offset={0}
position="top-end"
width={425}
withArrow
>
<DropdownMenu.Target>
<PlayerButton
@ -248,6 +250,8 @@ export const RightControls = () => {
]}
max={1.5}
min={0.5}
onChange={handleSpeed}
onDoubleClick={() => handleSpeed(1)}
step={0.01}
styles={{
markLabel: {
@ -258,8 +262,6 @@ export const RightControls = () => {
},
}}
value={speed}
onChange={handleSpeed}
onDoubleClick={() => handleSpeed(1)}
/>
</DropdownMenu.Dropdown>
</DropdownMenu>
@ -274,6 +276,7 @@ export const RightControls = () => {
<RiHeartLine size="1.1rem" />
)
}
onClick={() => handleToggleFavorite(currentSong)}
sx={{
svg: {
fill: !currentSong?.userFavorite
@ -288,17 +291,16 @@ export const RightControls = () => {
openDelay: 500,
}}
variant="secondary"
onClick={() => handleToggleFavorite(currentSong)}
/>
{!isMinWidth ? (
<PlayerButton
icon={<HiOutlineQueueList size="1.1rem" />}
onClick={handleToggleQueue}
tooltip={{
label: t('player.viewQueue', { postProcess: 'titleCase' }),
openDelay: 500,
}}
variant="secondary"
onClick={handleToggleQueue}
/>
) : null}
<Group
@ -315,23 +317,23 @@ export const RightControls = () => {
<RiVolumeDownFill size="1.2rem" />
)
}
onClick={handleMute}
onWheel={handleVolumeWheel}
tooltip={{
label: muted ? t('player.muted', { postProcess: 'titleCase' }) : volume,
openDelay: 500,
}}
variant="secondary"
onClick={handleMute}
onWheel={handleVolumeWheel}
/>
{!isMinWidth ? (
<PlayerbarSlider
max={100}
min={0}
onChange={handleVolumeSlider}
onWheel={handleVolumeWheel}
size={6}
value={volume}
w={volumeWidth}
onChange={handleVolumeSlider}
onWheel={handleVolumeWheel}
/>
) : null}
</Group>

51
src/renderer/features/player/components/shuffle-all-modal.tsx
View file

@ -1,28 +1,29 @@
import { useMemo } from 'react';
import { Divider, Group, SelectItem, Stack } from '@mantine/core';
import { closeAllModals, openModal } from '@mantine/modals';
import { QueryClient } from '@tanstack/react-query';
import merge from 'lodash/merge';
import { RiAddBoxFill, RiPlayFill, RiAddCircleFill } from 'react-icons/ri';
import { Button, Checkbox, NumberInput, Select } from '/@/renderer/components';
import { useMemo } from 'react';
import { RiAddBoxFill, RiAddCircleFill, RiPlayFill } from 'react-icons/ri';
import { create } from 'zustand';
import { persist } from 'zustand/middleware';
import { immer } from 'zustand/middleware/immer';
import i18n from '/@/i18n/i18n';
import { api } from '/@/renderer/api';
import { queryKeys } from '/@/renderer/api/query-keys';
import {
GenreListResponse,
RandomSongListQuery,
MusicFolderListResponse,
ServerType,
GenreListSort,
SortOrder,
ServerListItem,
MusicFolderListResponse,
Played,
RandomSongListQuery,
ServerListItem,
ServerType,
SortOrder,
} from '/@/renderer/api/types';
import { api } from '/@/renderer/api';
import { Button, Checkbox, NumberInput, Select } from '/@/renderer/components';
import { useAuthStore } from '/@/renderer/store';
import { queryKeys } from '/@/renderer/api/query-keys';
import { Play, PlayQueueAddOptions } from '/@/renderer/types';
import i18n from '/@/i18n/i18n';
interface ShuffleAllSlice extends RandomSongListQuery {
actions: {
@ -70,17 +71,17 @@ interface ShuffleAllModalProps {
handlePlayQueueAdd: ((options: PlayQueueAddOptions) => void) | undefined;
musicFolders: MusicFolderListResponse | undefined;
queryClient: QueryClient;
server: ServerListItem | null;
server: null | ServerListItem;
}
export const ShuffleAllModal = ({
genres,
handlePlayQueueAdd,
musicFolders,
queryClient,
server,
genres,
musicFolders,
}: ShuffleAllModalProps) => {
const { genre, limit, maxYear, minYear, enableMaxYear, enableMinYear, musicFolderId, played } =
const { enableMaxYear, enableMinYear, genre, limit, maxYear, minYear, musicFolderId, played } =
useShuffleAllStore();
const { setStore } = useShuffleAllStoreActions();
@ -140,18 +141,19 @@ export const ShuffleAllModal = ({
return (
<Stack spacing="md">
<NumberInput
required
label="How many tracks?"
max={500}
min={1}
value={limit}
onChange={(e) => setStore({ limit: e ? Number(e) : 500 })}
required
value={limit}
/>
<Group grow>
<NumberInput
label="From year"
max={2050}
min={1850}
onChange={(e) => setStore({ minYear: e ? Number(e) : 0 })}
rightSection={
<Checkbox
checked={enableMinYear}
@ -160,13 +162,13 @@ export const ShuffleAllModal = ({
/>
}
value={minYear}
onChange={(e) => setStore({ minYear: e ? Number(e) : 0 })}
/>
<NumberInput
label="To year"
max={2050}
min={1850}
onChange={(e) => setStore({ maxYear: e ? Number(e) : 0 })}
rightSection={
<Checkbox
checked={enableMaxYear}
@ -175,34 +177,33 @@ export const ShuffleAllModal = ({
/>
}
value={maxYear}
onChange={(e) => setStore({ maxYear: e ? Number(e) : 0 })}
/>
</Group>
<Select
clearable
data={genreData}
label="Genre"
value={genre}
onChange={(e) => setStore({ genre: e || '' })}
value={genre}
/>
<Select
clearable
data={musicFolderData}
label="Music folder"
value={musicFolderId}
onChange={(e) => {
setStore({ musicFolderId: e ? String(e) : '' });
}}
value={musicFolderId}
/>
{server?.type === ServerType.JELLYFIN && (
<Select
clearable
data={PLAYED_DATA}
label="Play filter"
value={played}
onChange={(e) => {
setStore({ played: e as Played });
}}
value={played}
/>
)}
<Divider />
@ -210,18 +211,18 @@ export const ShuffleAllModal = ({
<Button
disabled={!limit}
leftIcon={<RiAddBoxFill size="1rem" />}
onClick={() => handlePlay(Play.LAST)}
type="submit"
variant="default"
onClick={() => handlePlay(Play.LAST)}
>
Add
</Button>
<Button
disabled={!limit}
leftIcon={<RiAddCircleFill size="1rem" />}
onClick={() => handlePlay(Play.NEXT)}
type="submit"
variant="default"
onClick={() => handlePlay(Play.NEXT)}
>
Add next
</Button>
@ -229,9 +230,9 @@ export const ShuffleAllModal = ({
<Button
disabled={!limit}
leftIcon={<RiPlayFill size="1rem" />}
onClick={() => handlePlay(Play.NOW)}
type="submit"
variant="filled"
onClick={() => handlePlay(Play.NOW)}
>
Play
</Button>

5
src/renderer/features/player/components/visualizer.tsx
View file

@ -1,7 +1,8 @@
import { createRef, useCallback, useEffect, useState } from 'react';
import { useWebAudio } from '/@/renderer/features/player/hooks/use-webaudio';
import AudioMotionAnalyzer from 'audiomotion-analyzer';
import { createRef, useCallback, useEffect, useState } from 'react';
import styled from 'styled-components';
import { useWebAudio } from '/@/renderer/features/player/hooks/use-webaudio';
import { useSettingsStore } from '/@/renderer/store';
const StyledContainer = styled.div`