mirror of
https://github.com/antebudimir/feishin.git
synced 2026-01-01 10:23:33 +00:00
restructure files onto electron-vite boilerplate
This commit is contained in:
jeffvli
parent
91ce2cd8a1
commit
1cf587bc8f
457 changed files with 9927 additions and 11705 deletions
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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)',
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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}>
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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`
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import { createContext } from 'react';
|
||||
|
||||
import { PlayQueueAddOptions } from '/@/renderer/types';
|
||||
|
||||
export const PlayQueueHandlerContext = createContext<{
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import { createContext } from 'react';
|
||||
|
||||
import { WebAudio } from '/@/renderer/types';
|
||||
|
||||
export const WebAudioContext = createContext<{
|
||||
|
|
|
|||
|
|
@ -1,6 +1,11 @@
|
|||
import { useCallback, useEffect } from 'react';
|
||||
import isElectron from 'is-electron';
|
||||
import { PlaybackType, PlayerRepeat, PlayerShuffle, PlayerStatus } from '/@/renderer/types';
|
||||
import debounce from 'lodash/debounce';
|
||||
import { useCallback, useEffect } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import { toast } from '/@/renderer/components';
|
||||
import { useScrobble } from '/@/renderer/features/player/hooks/use-scrobble';
|
||||
import { updateSong } from '/@/renderer/features/player/update-remote-song';
|
||||
import {
|
||||
useCurrentPlayer,
|
||||
useCurrentStatus,
|
||||
|
|
@ -12,19 +17,15 @@ import {
|
|||
useShuffleStatus,
|
||||
} from '/@/renderer/store';
|
||||
import { usePlaybackType } from '/@/renderer/store/settings.store';
|
||||
import { useScrobble } from '/@/renderer/features/player/hooks/use-scrobble';
|
||||
import debounce from 'lodash/debounce';
|
||||
import { toast } from '/@/renderer/components';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { updateSong } from '/@/renderer/features/player/update-remote-song';
|
||||
import { PlaybackType, PlayerRepeat, PlayerShuffle, PlayerStatus } from '/@/renderer/types';
|
||||
import { setAutoNext, setQueue, setQueueNext } from '/@/renderer/utils/set-transcoded-queue-data';
|
||||
|
||||
const mpvPlayer = isElectron() ? window.electron.mpvPlayer : null;
|
||||
const mpvPlayerListener = isElectron() ? window.electron.mpvPlayerListener : null;
|
||||
const ipc = isElectron() ? window.electron.ipc : null;
|
||||
const utils = isElectron() ? window.electron.utils : null;
|
||||
const mpris = isElectron() && utils?.isLinux() ? window.electron.mpris : null;
|
||||
const remote = isElectron() ? window.electron.remote : null;
|
||||
const mpvPlayer = isElectron() ? window.api.mpvPlayer : null;
|
||||
const mpvPlayerListener = isElectron() ? window.api.mpvPlayerListener : null;
|
||||
const ipc = isElectron() ? window.api.ipc : null;
|
||||
const utils = isElectron() ? window.api.utils : null;
|
||||
const mpris = isElectron() && utils?.isLinux() ? window.api.mpris : null;
|
||||
const remote = isElectron() ? window.api.remote : null;
|
||||
const mediaSession = navigator.mediaSession;
|
||||
|
||||
export const useCenterControls = (args: { playersRef: any }) => {
|
||||
|
|
@ -32,7 +33,7 @@ export const useCenterControls = (args: { playersRef: any }) => {
|
|||
const { playersRef } = args;
|
||||
|
||||
const currentPlayer = useCurrentPlayer();
|
||||
const { setShuffle, setRepeat, play, pause, previous, next, setCurrentIndex, autoNext } =
|
||||
const { autoNext, next, pause, play, previous, setCurrentIndex, setRepeat, setShuffle } =
|
||||
usePlayerControls();
|
||||
const setCurrentTime = useSetCurrentTime();
|
||||
const queue = useDefaultQueue();
|
||||
|
|
@ -45,7 +46,7 @@ export const useCenterControls = (args: { playersRef: any }) => {
|
|||
const currentPlayerRef = currentPlayer === 1 ? player1Ref : player2Ref;
|
||||
const nextPlayerRef = currentPlayer === 1 ? player2Ref : player1Ref;
|
||||
|
||||
const { handleScrobbleFromSongRestart, handleScrobbleFromSeek } = useScrobble();
|
||||
const { handleScrobbleFromSeek, handleScrobbleFromSongRestart } = useScrobble();
|
||||
|
||||
useEffect(() => {
|
||||
if (mediaSession) {
|
||||
|
|
@ -226,12 +227,12 @@ export const useCenterControls = (args: { playersRef: any }) => {
|
|||
};
|
||||
|
||||
switch (repeatStatus) {
|
||||
case PlayerRepeat.NONE:
|
||||
handleRepeatNone[playbackType]();
|
||||
break;
|
||||
case PlayerRepeat.ALL:
|
||||
handleRepeatAll[playbackType]();
|
||||
break;
|
||||
case PlayerRepeat.NONE:
|
||||
handleRepeatNone[playbackType]();
|
||||
break;
|
||||
case PlayerRepeat.ONE:
|
||||
handleRepeatOne[playbackType]();
|
||||
break;
|
||||
|
|
@ -310,12 +311,12 @@ export const useCenterControls = (args: { playersRef: any }) => {
|
|||
};
|
||||
|
||||
switch (repeatStatus) {
|
||||
case PlayerRepeat.NONE:
|
||||
handleRepeatNone[playbackType]();
|
||||
break;
|
||||
case PlayerRepeat.ALL:
|
||||
handleRepeatAll[playbackType]();
|
||||
break;
|
||||
case PlayerRepeat.NONE:
|
||||
handleRepeatNone[playbackType]();
|
||||
break;
|
||||
case PlayerRepeat.ONE:
|
||||
handleRepeatOne[playbackType]();
|
||||
break;
|
||||
|
|
@ -418,12 +419,12 @@ export const useCenterControls = (args: { playersRef: any }) => {
|
|||
};
|
||||
|
||||
switch (repeatStatus) {
|
||||
case PlayerRepeat.NONE:
|
||||
handleRepeatNone[playbackType]();
|
||||
break;
|
||||
case PlayerRepeat.ALL:
|
||||
handleRepeatAll[playbackType]();
|
||||
break;
|
||||
case PlayerRepeat.NONE:
|
||||
handleRepeatNone[playbackType]();
|
||||
break;
|
||||
case PlayerRepeat.ONE:
|
||||
handleRepeatOne[playbackType]();
|
||||
break;
|
||||
|
|
@ -510,7 +511,7 @@ export const useCenterControls = (args: { playersRef: any }) => {
|
|||
}, 100);
|
||||
|
||||
const handleSeekSlider = useCallback(
|
||||
(e: number | any) => {
|
||||
(e: any | number) => {
|
||||
setCurrentTime(e, true);
|
||||
handleScrobbleFromSeek(e);
|
||||
debouncedSeek(e);
|
||||
|
|
@ -564,6 +565,7 @@ export const useCenterControls = (args: { playersRef: any }) => {
|
|||
});
|
||||
|
||||
mpvPlayerListener.rendererCurrentTime((_event: any, time: number) => {
|
||||
console.log('time :>> ', time);
|
||||
setCurrentTime(time);
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -1,31 +1,32 @@
|
|||
import { useCallback, useRef } from 'react';
|
||||
import { useQueryClient } from '@tanstack/react-query';
|
||||
import { useCurrentServer, usePlayerControls, usePlayerStore } from '/@/renderer/store';
|
||||
import { useGeneralSettings, usePlaybackType } from '/@/renderer/store/settings.store';
|
||||
import { PlayQueueAddOptions, Play, PlaybackType } from '/@/renderer/types';
|
||||
import { toast } from '/@/renderer/components/toast/index';
|
||||
import isElectron from 'is-electron';
|
||||
import { nanoid } from 'nanoid/non-secure';
|
||||
import { useCallback, useRef } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import { queryKeys } from '/@/renderer/api/query-keys';
|
||||
import {
|
||||
instanceOfCancellationError,
|
||||
LibraryItem,
|
||||
QueueSong,
|
||||
Song,
|
||||
SongListResponse,
|
||||
instanceOfCancellationError,
|
||||
} from '/@/renderer/api/types';
|
||||
import {
|
||||
getPlaylistSongsById,
|
||||
getSongById,
|
||||
getAlbumSongsById,
|
||||
getAlbumArtistSongsById,
|
||||
getSongsByQuery,
|
||||
getGenreSongsById,
|
||||
getArtistSongsById,
|
||||
} from '/@/renderer/features/player/utils';
|
||||
import { queryKeys } from '/@/renderer/api/query-keys';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { toast } from '/@/renderer/components/toast/index';
|
||||
import { PlayersRef } from '/@/renderer/features/player/ref/players-ref';
|
||||
import { updateSong } from '/@/renderer/features/player/update-remote-song';
|
||||
import {
|
||||
getAlbumArtistSongsById,
|
||||
getAlbumSongsById,
|
||||
getArtistSongsById,
|
||||
getGenreSongsById,
|
||||
getPlaylistSongsById,
|
||||
getSongById,
|
||||
getSongsByQuery,
|
||||
} from '/@/renderer/features/player/utils';
|
||||
import { useCurrentServer, usePlayerControls, usePlayerStore } from '/@/renderer/store';
|
||||
import { useGeneralSettings, usePlaybackType } from '/@/renderer/store/settings.store';
|
||||
import { Play, PlaybackType, PlayQueueAddOptions } from '/@/renderer/types';
|
||||
import { setQueue, setQueueNext } from '/@/renderer/utils/set-transcoded-queue-data';
|
||||
|
||||
const getRootQueryKey = (itemType: LibraryItem, serverId: string) => {
|
||||
|
|
@ -55,7 +56,7 @@ const getRootQueryKey = (itemType: LibraryItem, serverId: string) => {
|
|||
return queryKey;
|
||||
};
|
||||
|
||||
const mpvPlayer = isElectron() ? window.electron.mpvPlayer : null;
|
||||
const mpvPlayer = isElectron() ? window.api.mpvPlayer : null;
|
||||
|
||||
const addToQueue = usePlayerStore.getState().actions.addToQueue;
|
||||
|
||||
|
|
@ -65,20 +66,20 @@ export const useHandlePlayQueueAdd = () => {
|
|||
const playbackType = usePlaybackType();
|
||||
const server = useCurrentServer();
|
||||
const { play } = usePlayerControls();
|
||||
const timeoutIds = useRef<Record<string, ReturnType<typeof setTimeout>> | null>({});
|
||||
const timeoutIds = useRef<null | Record<string, ReturnType<typeof setTimeout>>>({});
|
||||
|
||||
const { doubleClickQueueAll } = useGeneralSettings();
|
||||
|
||||
const handlePlayQueueAdd = useCallback(
|
||||
async (options: PlayQueueAddOptions) => {
|
||||
if (!server) return toast.error({ message: 'No server selected', type: 'error' });
|
||||
const { initialIndex, initialSongId, playType, byData, byItemType, query } = options;
|
||||
let songs: QueueSong[] | null = null;
|
||||
const { byData, byItemType, initialIndex, initialSongId, playType, query } = options;
|
||||
let songs: null | QueueSong[] = null;
|
||||
let initialSongIndex = 0;
|
||||
|
||||
if (byItemType) {
|
||||
let songList: SongListResponse | undefined;
|
||||
const { type: itemType, id } = byItemType;
|
||||
const { id, type: itemType } = byItemType;
|
||||
|
||||
const fetchId = nanoid();
|
||||
timeoutIds.current = {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import { useContext } from 'react';
|
||||
|
||||
import { PlayQueueHandlerContext } from '/@/renderer/features/player/context/play-queue-handler-context';
|
||||
|
||||
export const usePlayQueueAdd = () => {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import { useCallback, useEffect, WheelEvent } from 'react';
|
||||
import isElectron from 'is-electron';
|
||||
import { useCallback, useEffect, WheelEvent } from 'react';
|
||||
|
||||
import {
|
||||
useMuted,
|
||||
usePlayerControls,
|
||||
|
|
@ -9,10 +10,10 @@ import {
|
|||
} from '/@/renderer/store';
|
||||
import { useGeneralSettings } from '/@/renderer/store/settings.store';
|
||||
|
||||
const mpvPlayer = isElectron() ? window.electron.mpvPlayer : null;
|
||||
const mpvPlayerListener = isElectron() ? window.electron.mpvPlayerListener : null;
|
||||
const ipc = isElectron() ? window.electron.ipc : null;
|
||||
const remote = isElectron() ? window.electron.remote : null;
|
||||
const mpvPlayer = isElectron() ? window.api.mpvPlayer : null;
|
||||
const mpvPlayerListener = isElectron() ? window.api.mpvPlayerListener : null;
|
||||
const ipc = isElectron() ? window.api.ipc : null;
|
||||
const remote = isElectron() ? window.api.remote : null;
|
||||
|
||||
const calculateVolumeUp = (volume: number, volumeWheelStep: number) => {
|
||||
let volumeToSet;
|
||||
|
|
@ -39,7 +40,7 @@ const calculateVolumeDown = (volume: number, volumeWheelStep: number) => {
|
|||
};
|
||||
|
||||
export const useRightControls = () => {
|
||||
const { setVolume, setMuted } = usePlayerControls();
|
||||
const { setMuted, setVolume } = usePlayerControls();
|
||||
const volume = useVolume();
|
||||
const muted = useMuted();
|
||||
const { volumeWheelStep } = useGeneralSettings();
|
||||
|
|
@ -98,7 +99,7 @@ export const useRightControls = () => {
|
|||
}, [setVolume, volume, volumeWheelStep]);
|
||||
|
||||
const handleVolumeWheel = useCallback(
|
||||
(e: WheelEvent<HTMLDivElement | HTMLButtonElement>) => {
|
||||
(e: WheelEvent<HTMLButtonElement | HTMLDivElement>) => {
|
||||
let volumeToSet;
|
||||
if (e.deltaY > 0 || e.deltaX > 0) {
|
||||
volumeToSet = calculateVolumeDown(volume, volumeWheelStep);
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import { useEffect, useCallback, useState, useRef } from 'react';
|
||||
import { useCallback, useEffect, useRef, useState } from 'react';
|
||||
|
||||
import { QueueSong, ServerType } from '/@/renderer/api/types';
|
||||
import { useSendScrobble } from '/@/renderer/features/player/mutations/scrobble-mutation';
|
||||
import { usePlayerStore } from '/@/renderer/store';
|
||||
|
|
@ -82,12 +83,12 @@ export const useScrobble = () => {
|
|||
[isScrobbleEnabled, sendScrobble],
|
||||
);
|
||||
|
||||
const progressIntervalId = useRef<ReturnType<typeof setInterval> | null>(null);
|
||||
const songChangeTimeoutId = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
const progressIntervalId = useRef<null | ReturnType<typeof setInterval>>(null);
|
||||
const songChangeTimeoutId = useRef<null | ReturnType<typeof setTimeout>>(null);
|
||||
const handleScrobbleFromSongChange = useCallback(
|
||||
(
|
||||
current: (QueueSong | number | undefined)[],
|
||||
previous: (QueueSong | number | undefined)[],
|
||||
current: (number | QueueSong | undefined)[],
|
||||
previous: (number | QueueSong | undefined)[],
|
||||
) => {
|
||||
if (!isScrobbleEnabled) return;
|
||||
|
||||
|
|
@ -179,8 +180,8 @@ export const useScrobble = () => {
|
|||
|
||||
const handleScrobbleFromStatusChange = useCallback(
|
||||
(
|
||||
current: (PlayerStatus | number | undefined)[],
|
||||
previous: (PlayerStatus | number | undefined)[],
|
||||
current: (number | PlayerStatus | undefined)[],
|
||||
previous: (number | PlayerStatus | undefined)[],
|
||||
) => {
|
||||
if (!isScrobbleEnabled) return;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
import { useContext } from 'react';
|
||||
|
||||
import { WebAudioContext } from '/@/renderer/features/player/context/webaudio-context';
|
||||
|
||||
export const useWebAudio = () => {
|
||||
const { webAudio, setWebAudio } = useContext(WebAudioContext);
|
||||
const { setWebAudio, webAudio } = useContext(WebAudioContext);
|
||||
return { setWebAudio, webAudio };
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
import { useMutation } from '@tanstack/react-query';
|
||||
import { AxiosError } from 'axios';
|
||||
|
||||
import { api } from '/@/renderer/api';
|
||||
import { ScrobbleResponse, ScrobbleArgs } from '/@/renderer/api/types';
|
||||
import { ScrobbleArgs, ScrobbleResponse } from '/@/renderer/api/types';
|
||||
import { MutationOptions } from '/@/renderer/lib/react-query';
|
||||
import { getServerById, useIncrementQueuePlayCount } from '/@/renderer/store';
|
||||
import { usePlayEvent } from '/@/renderer/store/event.store';
|
||||
|
|
@ -13,7 +14,7 @@ export const useSendScrobble = (options?: MutationOptions) => {
|
|||
return useMutation<
|
||||
ScrobbleResponse,
|
||||
AxiosError,
|
||||
Omit<ScrobbleArgs, 'server' | 'apiClientProps'>,
|
||||
Omit<ScrobbleArgs, 'apiClientProps' | 'server'>,
|
||||
null
|
||||
>({
|
||||
mutationFn: (args) => {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
import isElectron from 'is-electron';
|
||||
|
||||
import { QueueSong } from '/@/renderer/api/types';
|
||||
|
||||
const remote = isElectron() ? window.electron.remote : null;
|
||||
const remote = isElectron() ? window.api.remote : null;
|
||||
const mediaSession = navigator.mediaSession;
|
||||
|
||||
export const updateSong = (song: QueueSong | undefined) => {
|
||||
|
|
|
|||
|
|
@ -1,14 +1,15 @@
|
|||
import { QueryClient } from '@tanstack/react-query';
|
||||
|
||||
import { api } from '/@/renderer/api';
|
||||
import { queryKeys } from '/@/renderer/api/query-keys';
|
||||
import {
|
||||
PlaylistSongListQuery,
|
||||
ServerListItem,
|
||||
SongDetailQuery,
|
||||
SongListQuery,
|
||||
SongListResponse,
|
||||
SongListSort,
|
||||
SortOrder,
|
||||
ServerListItem,
|
||||
} from '/@/renderer/api/types';
|
||||
|
||||
export const getPlaylistSongsById = async (args: {
|
||||
|
|
@ -17,7 +18,7 @@ export const getPlaylistSongsById = async (args: {
|
|||
queryClient: QueryClient;
|
||||
server: ServerListItem;
|
||||
}) => {
|
||||
const { id, queryClient, server, query } = args;
|
||||
const { id, query, queryClient, server } = args;
|
||||
|
||||
const queryFilter: PlaylistSongListQuery = {
|
||||
id,
|
||||
|
|
@ -55,7 +56,7 @@ export const getAlbumSongsById = async (args: {
|
|||
queryClient: QueryClient;
|
||||
server: ServerListItem;
|
||||
}) => {
|
||||
const { id, queryClient, server, query } = args;
|
||||
const { id, query, queryClient, server } = args;
|
||||
|
||||
const queryFilter: SongListQuery = {
|
||||
albumIds: id,
|
||||
|
|
@ -91,9 +92,9 @@ export const getGenreSongsById = async (args: {
|
|||
orderByIds?: boolean;
|
||||
query?: Partial<SongListQuery>;
|
||||
queryClient: QueryClient;
|
||||
server: ServerListItem | null;
|
||||
server: null | ServerListItem;
|
||||
}) => {
|
||||
const { id, queryClient, server, query } = args;
|
||||
const { id, query, queryClient, server } = args;
|
||||
|
||||
const data: SongListResponse = {
|
||||
items: [],
|
||||
|
|
@ -143,7 +144,7 @@ export const getAlbumArtistSongsById = async (args: {
|
|||
queryClient: QueryClient;
|
||||
server: ServerListItem;
|
||||
}) => {
|
||||
const { id, queryClient, server, query } = args;
|
||||
const { id, query, queryClient, server } = args;
|
||||
|
||||
const queryFilter: SongListQuery = {
|
||||
albumArtistIds: id || [],
|
||||
|
|
@ -180,7 +181,7 @@ export const getArtistSongsById = async (args: {
|
|||
queryClient: QueryClient;
|
||||
server: ServerListItem;
|
||||
}) => {
|
||||
const { id, queryClient, server, query } = args;
|
||||
const { id, query, queryClient, server } = args;
|
||||
|
||||
const queryFilter: SongListQuery = {
|
||||
artistIds: id,
|
||||
|
|
@ -216,7 +217,7 @@ export const getSongsByQuery = async (args: {
|
|||
queryClient: QueryClient;
|
||||
server: ServerListItem;
|
||||
}) => {
|
||||
const { queryClient, server, query } = args;
|
||||
const { query, queryClient, server } = args;
|
||||
|
||||
const queryFilter: SongListQuery = {
|
||||
sortBy: SongListSort.ALBUM,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue