mirror of
https://github.com/antebudimir/feishin.git
synced 2026-01-02 02:43:33 +00:00
Add files
This commit is contained in:
jeffvli
commit
e87c814068
266 changed files with 63938 additions and 0 deletions
238
src/renderer/features/player/components/center-controls.tsx
Normal file
238
src/renderer/features/player/components/center-controls.tsx
Normal file
|
|
@ -0,0 +1,238 @@
|
|||
import { useEffect, useState } from 'react';
|
||||
import format from 'format-duration';
|
||||
import isElectron from 'is-electron';
|
||||
import { IoIosPause } from 'react-icons/io';
|
||||
import {
|
||||
RiPlayFill,
|
||||
RiRepeat2Line,
|
||||
RiRepeatOneLine,
|
||||
RiRewindFill,
|
||||
RiShuffleFill,
|
||||
RiSkipBackFill,
|
||||
RiSkipForwardFill,
|
||||
RiSpeedFill,
|
||||
} from 'react-icons/ri';
|
||||
import styled from 'styled-components';
|
||||
import { Text } from '/@/renderer/components';
|
||||
import { useCenterControls } from '../hooks/use-center-controls';
|
||||
import { PlayerButton } from './player-button';
|
||||
import { Slider } from './slider';
|
||||
import {
|
||||
useCurrentSong,
|
||||
useCurrentStatus,
|
||||
useCurrentPlayer,
|
||||
useSetCurrentTime,
|
||||
useRepeatStatus,
|
||||
useShuffleStatus,
|
||||
useCurrentTime,
|
||||
} from '/@/renderer/store';
|
||||
import { useSettingsStore } from '/@/renderer/store/settings.store';
|
||||
import { PlayerStatus, PlaybackType, PlayerShuffle, PlayerRepeat } from '/@/renderer/types';
|
||||
|
||||
interface CenterControlsProps {
|
||||
playersRef: any;
|
||||
}
|
||||
|
||||
const ControlsContainer = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 35px;
|
||||
`;
|
||||
|
||||
const ButtonsContainer = styled.div`
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
`;
|
||||
|
||||
const SliderContainer = styled.div`
|
||||
display: flex;
|
||||
height: 20px;
|
||||
`;
|
||||
|
||||
const SliderValueWrapper = styled.div<{ position: 'left' | 'right' }>`
|
||||
flex: 1;
|
||||
align-self: center;
|
||||
max-width: 50px;
|
||||
text-align: center;
|
||||
`;
|
||||
|
||||
const SliderWrapper = styled.div`
|
||||
display: flex;
|
||||
flex: 6;
|
||||
height: 100%;
|
||||
`;
|
||||
|
||||
export const CenterControls = ({ playersRef }: CenterControlsProps) => {
|
||||
const [isSeeking, setIsSeeking] = useState(false);
|
||||
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 = useCurrentStatus();
|
||||
const player = useCurrentPlayer();
|
||||
const setCurrentTime = useSetCurrentTime();
|
||||
const repeat = useRepeatStatus();
|
||||
const shuffle = useShuffleStatus();
|
||||
|
||||
const {
|
||||
handleNextTrack,
|
||||
handlePlayPause,
|
||||
handlePrevTrack,
|
||||
handleSeekSlider,
|
||||
handleSkipBackward,
|
||||
handleSkipForward,
|
||||
handleToggleRepeat,
|
||||
handleToggleShuffle,
|
||||
} = useCenterControls({ playersRef });
|
||||
|
||||
const currentTime = useCurrentTime();
|
||||
const currentPlayerRef = player === 1 ? player1 : player2;
|
||||
const duration = format((songDuration || 0) * 1000);
|
||||
const formattedTime = format(currentTime * 1000 || 0);
|
||||
|
||||
useEffect(() => {
|
||||
let interval: any;
|
||||
|
||||
if (status === PlayerStatus.PLAYING && !isSeeking) {
|
||||
if (!isElectron() || playerType === PlaybackType.WEB) {
|
||||
interval = setInterval(() => {
|
||||
setCurrentTime(currentPlayerRef.getCurrentTime());
|
||||
}, 1000);
|
||||
}
|
||||
} else {
|
||||
clearInterval(interval);
|
||||
}
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, [currentPlayerRef, isSeeking, setCurrentTime, playerType, status]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<ControlsContainer>
|
||||
<ButtonsContainer>
|
||||
<PlayerButton
|
||||
$isActive={shuffle !== PlayerShuffle.NONE}
|
||||
icon={<RiShuffleFill size={15} />}
|
||||
tooltip={{
|
||||
label:
|
||||
shuffle === PlayerShuffle.NONE
|
||||
? 'Shuffle disabled'
|
||||
: shuffle === PlayerShuffle.TRACK
|
||||
? 'Shuffle tracks'
|
||||
: 'Shuffle albums',
|
||||
openDelay: 500,
|
||||
}}
|
||||
variant="tertiary"
|
||||
onClick={handleToggleShuffle}
|
||||
/>
|
||||
<PlayerButton
|
||||
icon={<RiSkipBackFill size={15} />}
|
||||
tooltip={{ label: 'Previous track', openDelay: 500 }}
|
||||
variant="secondary"
|
||||
onClick={handlePrevTrack}
|
||||
/>
|
||||
{skip?.enabled && (
|
||||
<PlayerButton
|
||||
icon={<RiRewindFill size={15} />}
|
||||
tooltip={{
|
||||
label: `Skip backwards ${skip?.skipBackwardSeconds} seconds`,
|
||||
openDelay: 500,
|
||||
}}
|
||||
variant="secondary"
|
||||
onClick={() => handleSkipBackward(skip?.skipBackwardSeconds)}
|
||||
/>
|
||||
)}
|
||||
<PlayerButton
|
||||
icon={
|
||||
status === PlayerStatus.PAUSED ? <RiPlayFill size={20} /> : <IoIosPause size={20} />
|
||||
}
|
||||
tooltip={{
|
||||
label: status === PlayerStatus.PAUSED ? 'Play' : 'Pause',
|
||||
openDelay: 500,
|
||||
}}
|
||||
variant="main"
|
||||
onClick={handlePlayPause}
|
||||
/>
|
||||
{skip?.enabled && (
|
||||
<PlayerButton
|
||||
icon={<RiSpeedFill size={15} />}
|
||||
tooltip={{
|
||||
label: `Skip forwards ${skip?.skipForwardSeconds} seconds`,
|
||||
openDelay: 500,
|
||||
}}
|
||||
variant="secondary"
|
||||
onClick={() => handleSkipForward(skip?.skipForwardSeconds)}
|
||||
/>
|
||||
)}
|
||||
<PlayerButton
|
||||
icon={<RiSkipForwardFill size={15} />}
|
||||
tooltip={{ label: 'Next track', openDelay: 500 }}
|
||||
variant="secondary"
|
||||
onClick={handleNextTrack}
|
||||
/>
|
||||
<PlayerButton
|
||||
$isActive={repeat !== PlayerRepeat.NONE}
|
||||
icon={
|
||||
repeat === PlayerRepeat.ONE ? (
|
||||
<RiRepeatOneLine size={15} />
|
||||
) : (
|
||||
<RiRepeat2Line size={15} />
|
||||
)
|
||||
}
|
||||
tooltip={{
|
||||
label: `${
|
||||
repeat === PlayerRepeat.NONE
|
||||
? 'Repeat disabled'
|
||||
: repeat === PlayerRepeat.ALL
|
||||
? 'Repeat all'
|
||||
: 'Repeat one'
|
||||
}`,
|
||||
openDelay: 500,
|
||||
}}
|
||||
variant="tertiary"
|
||||
onClick={handleToggleRepeat}
|
||||
/>
|
||||
</ButtonsContainer>
|
||||
</ControlsContainer>
|
||||
<SliderContainer>
|
||||
<SliderValueWrapper position="left">
|
||||
<Text
|
||||
$noSelect
|
||||
$secondary
|
||||
size="xs"
|
||||
weight={600}
|
||||
>
|
||||
{formattedTime}
|
||||
</Text>
|
||||
</SliderValueWrapper>
|
||||
<SliderWrapper>
|
||||
<Slider
|
||||
height="100%"
|
||||
max={songDuration}
|
||||
min={0}
|
||||
tooltipType="time"
|
||||
value={currentTime}
|
||||
onAfterChange={(e) => {
|
||||
handleSeekSlider(e);
|
||||
setIsSeeking(false);
|
||||
}}
|
||||
/>
|
||||
</SliderWrapper>
|
||||
<SliderValueWrapper position="right">
|
||||
<Text
|
||||
$noSelect
|
||||
$secondary
|
||||
size="xs"
|
||||
weight={600}
|
||||
>
|
||||
{duration}
|
||||
</Text>
|
||||
</SliderValueWrapper>
|
||||
</SliderContainer>
|
||||
</>
|
||||
);
|
||||
};
|
||||
207
src/renderer/features/player/components/left-controls.tsx
Normal file
207
src/renderer/features/player/components/left-controls.tsx
Normal file
|
|
@ -0,0 +1,207 @@
|
|||
import React from 'react';
|
||||
import { Center } from '@mantine/core';
|
||||
import { motion, AnimatePresence, LayoutGroup } from 'framer-motion';
|
||||
import { RiArrowUpSLine, RiDiscLine } from 'react-icons/ri';
|
||||
import { generatePath, Link } from 'react-router-dom';
|
||||
import styled from 'styled-components';
|
||||
import { Button, Text } from '/@/renderer/components';
|
||||
import { AppRoute } from '/@/renderer/router/routes';
|
||||
import { useAppStoreActions, useAppStore, useCurrentSong } from '/@/renderer/store';
|
||||
import { fadeIn } from '/@/renderer/styles';
|
||||
|
||||
const LeftControlsContainer = styled.div`
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-left: 1rem;
|
||||
`;
|
||||
|
||||
const ImageWrapper = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 1rem 1rem 1rem 0;
|
||||
`;
|
||||
|
||||
const MetadataStack = styled(motion.div)`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
`;
|
||||
|
||||
const Image = styled(motion(Link))`
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
filter: drop-shadow(0 0 5px rgb(0, 0, 0, 100%));
|
||||
|
||||
${fadeIn};
|
||||
animation: fadein 0.2s ease-in-out;
|
||||
|
||||
button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover button {
|
||||
display: block;
|
||||
}
|
||||
`;
|
||||
|
||||
const PlayerbarImage = styled.img`
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
`;
|
||||
|
||||
const LineItem = styled.div<{ $secondary?: boolean }>`
|
||||
display: inline-block;
|
||||
width: 95%;
|
||||
max-width: 20vw;
|
||||
overflow: hidden;
|
||||
color: ${(props) => props.$secondary && 'var(--main-fg-secondary)'};
|
||||
line-height: 1.3;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
a {
|
||||
color: ${(props) => props.$secondary && 'var(--text-secondary)'};
|
||||
}
|
||||
`;
|
||||
|
||||
export const LeftControls = () => {
|
||||
const { setSidebar } = useAppStoreActions();
|
||||
const hideImage = useAppStore((state) => state.sidebar.image);
|
||||
const currentSong = useCurrentSong();
|
||||
const title = currentSong?.name;
|
||||
const artists = currentSong?.artists;
|
||||
|
||||
return (
|
||||
<LeftControlsContainer>
|
||||
<LayoutGroup>
|
||||
<AnimatePresence
|
||||
initial={false}
|
||||
mode="wait"
|
||||
>
|
||||
{!hideImage && (
|
||||
<ImageWrapper>
|
||||
<Image
|
||||
key="playerbar-image"
|
||||
animate={{ opacity: 1, scale: 1, x: 0 }}
|
||||
exit={{ opacity: 0, x: -50 }}
|
||||
initial={{ opacity: 0, x: -50 }}
|
||||
to={AppRoute.NOW_PLAYING}
|
||||
transition={{ duration: 0.3, ease: 'easeInOut' }}
|
||||
>
|
||||
{currentSong?.imageUrl ? (
|
||||
<PlayerbarImage
|
||||
loading="eager"
|
||||
src={currentSong?.imageUrl}
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<Center
|
||||
sx={{
|
||||
background: 'var(--placeholder-bg)',
|
||||
height: '100%',
|
||||
}}
|
||||
>
|
||||
<RiDiscLine
|
||||
color="var(--placeholder-fg)"
|
||||
size={50}
|
||||
/>
|
||||
</Center>
|
||||
</>
|
||||
)}
|
||||
|
||||
<Button
|
||||
compact
|
||||
opacity={0.8}
|
||||
radius={50}
|
||||
size="xs"
|
||||
sx={{ position: 'absolute', right: 2, top: 2 }}
|
||||
tooltip={{ label: 'Expand' }}
|
||||
variant="default"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
setSidebar({ image: true });
|
||||
}}
|
||||
>
|
||||
<RiArrowUpSLine
|
||||
color="white"
|
||||
size={20}
|
||||
/>
|
||||
</Button>
|
||||
</Image>
|
||||
</ImageWrapper>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
<MetadataStack layout>
|
||||
<LineItem>
|
||||
<Text
|
||||
$link
|
||||
component={Link}
|
||||
overflow="hidden"
|
||||
size="sm"
|
||||
to={AppRoute.NOW_PLAYING}
|
||||
weight={500}
|
||||
>
|
||||
{title || '—'}
|
||||
</Text>
|
||||
</LineItem>
|
||||
<LineItem $secondary>
|
||||
{artists?.map((artist, index) => (
|
||||
<React.Fragment key={`bar-${artist.id}`}>
|
||||
{index > 0 && (
|
||||
<Text
|
||||
$link
|
||||
$secondary
|
||||
size="xs"
|
||||
style={{ display: 'inline-block' }}
|
||||
>
|
||||
,
|
||||
</Text>
|
||||
)}{' '}
|
||||
<Text
|
||||
$link
|
||||
component={Link}
|
||||
overflow="hidden"
|
||||
size="xs"
|
||||
to={
|
||||
artist.id
|
||||
? generatePath(AppRoute.LIBRARY_ARTISTS_DETAIL, {
|
||||
artistId: artist.id,
|
||||
})
|
||||
: ''
|
||||
}
|
||||
weight={500}
|
||||
>
|
||||
{artist.name || '—'}
|
||||
</Text>
|
||||
</React.Fragment>
|
||||
))}
|
||||
</LineItem>
|
||||
<LineItem $secondary>
|
||||
<Text
|
||||
$link
|
||||
component={Link}
|
||||
overflow="hidden"
|
||||
size="xs"
|
||||
to={
|
||||
currentSong?.albumId
|
||||
? generatePath(AppRoute.LIBRARY_ALBUMS_DETAIL, {
|
||||
albumId: currentSong.albumId,
|
||||
})
|
||||
: ''
|
||||
}
|
||||
weight={500}
|
||||
>
|
||||
{currentSong?.album || '—'}
|
||||
</Text>
|
||||
</LineItem>
|
||||
</MetadataStack>
|
||||
</LayoutGroup>
|
||||
</LeftControlsContainer>
|
||||
);
|
||||
};
|
||||
156
src/renderer/features/player/components/player-button.tsx
Normal file
156
src/renderer/features/player/components/player-button.tsx
Normal file
|
|
@ -0,0 +1,156 @@
|
|||
/* stylelint-disable no-descending-specificity */
|
||||
import type { ComponentPropsWithoutRef, ReactNode } from 'react';
|
||||
import type { TooltipProps, UnstyledButtonProps } from '@mantine/core';
|
||||
import { UnstyledButton } from '@mantine/core';
|
||||
import { motion } from 'framer-motion';
|
||||
import styled, { css } from 'styled-components';
|
||||
import { Tooltip } from '/@/renderer/components';
|
||||
|
||||
type MantineButtonProps = UnstyledButtonProps & ComponentPropsWithoutRef<'button'>;
|
||||
interface PlayerButtonProps extends MantineButtonProps {
|
||||
$isActive?: boolean;
|
||||
icon: ReactNode;
|
||||
tooltip?: Omit<TooltipProps, 'children'>;
|
||||
variant: 'main' | 'secondary' | 'tertiary';
|
||||
}
|
||||
|
||||
const WrapperMainVariant = css`
|
||||
margin: 0 0.5rem;
|
||||
`;
|
||||
|
||||
type MotionWrapperProps = { variant: PlayerButtonProps['variant'] };
|
||||
|
||||
const MotionWrapper = styled(motion.div)<MotionWrapperProps>`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
${({ variant }) => variant === 'main' && WrapperMainVariant};
|
||||
`;
|
||||
|
||||
const ButtonMainVariant = css`
|
||||
padding: 0.5rem;
|
||||
background: var(--playerbar-btn-main-bg);
|
||||
border-radius: 50%;
|
||||
|
||||
svg {
|
||||
display: flex;
|
||||
fill: var(--playerbar-btn-main-fg);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
background: var(--playerbar-btn-main-bg-hover);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--playerbar-btn-main-bg-hover);
|
||||
|
||||
svg {
|
||||
fill: var(--playerbar-btn-main-fg-hover);
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const ButtonSecondaryVariant = css`
|
||||
padding: 0.5rem;
|
||||
`;
|
||||
|
||||
const ButtonTertiaryVariant = css`
|
||||
padding: 0.5rem;
|
||||
|
||||
svg {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
svg {
|
||||
fill: var(--playerbar-btn-fg-hover);
|
||||
stroke: var(--playerbar-btn-fg-hover);
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
type StyledPlayerButtonProps = Omit<PlayerButtonProps, 'icon'>;
|
||||
|
||||
const StyledPlayerButton = styled(UnstyledButton)<StyledPlayerButtonProps>`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: 0.5rem;
|
||||
overflow: visible;
|
||||
background: var(--playerbar-btn-bg-hover);
|
||||
all: unset;
|
||||
cursor: default;
|
||||
|
||||
button {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
background: var(--playerbar-btn-bg-hover);
|
||||
outline: 1px var(--primary-color) solid;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
svg {
|
||||
display: flex;
|
||||
fill: ${({ $isActive }) => ($isActive ? 'var(--primary-color)' : 'var(--playerbar-btn-fg)')};
|
||||
stroke: var(--playerbar-btn-fg);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--playerbar-btn-bg-hover);
|
||||
|
||||
svg {
|
||||
fill: ${({ $isActive }) =>
|
||||
$isActive ? 'var(--primary-color)' : 'var(--playerbar-btn-fg-hover)'};
|
||||
}
|
||||
}
|
||||
|
||||
${({ variant }) =>
|
||||
variant === 'main'
|
||||
? ButtonMainVariant
|
||||
: variant === 'secondary'
|
||||
? ButtonSecondaryVariant
|
||||
: ButtonTertiaryVariant};
|
||||
`;
|
||||
|
||||
export const PlayerButton = ({ tooltip, variant, icon, ...rest }: PlayerButtonProps) => {
|
||||
if (tooltip) {
|
||||
return (
|
||||
<Tooltip {...tooltip}>
|
||||
<MotionWrapper
|
||||
variant={variant}
|
||||
whileHover={{ scale: 1.1 }}
|
||||
whileTap={{ scale: 1 }}
|
||||
>
|
||||
<StyledPlayerButton
|
||||
variant={variant}
|
||||
{...rest}
|
||||
>
|
||||
{icon}
|
||||
</StyledPlayerButton>
|
||||
</MotionWrapper>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<MotionWrapper variant={variant}>
|
||||
<StyledPlayerButton
|
||||
variant={variant}
|
||||
{...rest}
|
||||
>
|
||||
{icon}
|
||||
</StyledPlayerButton>
|
||||
</MotionWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
PlayerButton.defaultProps = {
|
||||
$isActive: false,
|
||||
tooltip: undefined,
|
||||
};
|
||||
94
src/renderer/features/player/components/playerbar.tsx
Normal file
94
src/renderer/features/player/components/playerbar.tsx
Normal file
|
|
@ -0,0 +1,94 @@
|
|||
import { useRef } from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { useSettingsStore } from '/@/renderer/store/settings.store';
|
||||
import { PlaybackType } from '/@/renderer/types';
|
||||
import { AudioPlayer } from '/@/renderer/components';
|
||||
import {
|
||||
useCurrentPlayer,
|
||||
useCurrentStatus,
|
||||
usePlayer1Data,
|
||||
usePlayer2Data,
|
||||
usePlayerControls,
|
||||
useVolume,
|
||||
} from '/@/renderer/store';
|
||||
import { CenterControls } from './center-controls';
|
||||
import { LeftControls } from './left-controls';
|
||||
import { RightControls } from './right-controls';
|
||||
|
||||
const PlayerbarContainer = styled.div`
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-top: var(--playerbar-border-top);
|
||||
`;
|
||||
|
||||
const PlayerbarControlsGrid = styled.div`
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
height: 100%;
|
||||
`;
|
||||
|
||||
const RightGridItem = styled.div`
|
||||
align-self: center;
|
||||
width: calc(100% / 3);
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
`;
|
||||
|
||||
const LeftGridItem = styled.div`
|
||||
width: calc(100% / 3);
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
`;
|
||||
|
||||
const CenterGridItem = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
justify-content: center;
|
||||
width: calc(100% / 3);
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
`;
|
||||
|
||||
export const Playerbar = () => {
|
||||
const playersRef = useRef<any>();
|
||||
const settings = useSettingsStore((state) => state.player);
|
||||
const volume = useVolume();
|
||||
const player1 = usePlayer1Data();
|
||||
const player2 = usePlayer2Data();
|
||||
const status = useCurrentStatus();
|
||||
const player = useCurrentPlayer();
|
||||
const { autoNext } = usePlayerControls();
|
||||
|
||||
return (
|
||||
<PlayerbarContainer>
|
||||
<PlayerbarControlsGrid>
|
||||
<LeftGridItem>
|
||||
<LeftControls />
|
||||
</LeftGridItem>
|
||||
<CenterGridItem>
|
||||
<CenterControls playersRef={playersRef} />
|
||||
</CenterGridItem>
|
||||
<RightGridItem>
|
||||
<RightControls />
|
||||
</RightGridItem>
|
||||
</PlayerbarControlsGrid>
|
||||
{settings.type === PlaybackType.WEB && (
|
||||
<AudioPlayer
|
||||
ref={playersRef}
|
||||
autoNext={autoNext}
|
||||
crossfadeDuration={settings.crossfadeDuration}
|
||||
crossfadeStyle={settings.crossfadeStyle}
|
||||
currentPlayer={player}
|
||||
muted={settings.muted}
|
||||
playbackStyle={settings.style}
|
||||
player1={player1}
|
||||
player2={player2}
|
||||
status={status}
|
||||
style={settings.style}
|
||||
volume={(volume / 100) ** 2}
|
||||
/>
|
||||
)}
|
||||
</PlayerbarContainer>
|
||||
);
|
||||
};
|
||||
81
src/renderer/features/player/components/right-controls.tsx
Normal file
81
src/renderer/features/player/components/right-controls.tsx
Normal file
|
|
@ -0,0 +1,81 @@
|
|||
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 { useAppStoreActions, useMuted, useSidebarStore, useVolume } from '/@/renderer/store';
|
||||
import { useRightControls } from '../hooks/use-right-controls';
|
||||
import { PlayerButton } from './player-button';
|
||||
import { Slider } from './slider';
|
||||
|
||||
const RightControlsContainer = styled.div`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-right: 1rem;
|
||||
`;
|
||||
|
||||
const VolumeSliderWrapper = styled.div`
|
||||
display: flex;
|
||||
gap: 0.3rem;
|
||||
align-items: center;
|
||||
width: 90px;
|
||||
`;
|
||||
|
||||
const MetadataStack = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.3rem;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
overflow: visible;
|
||||
`;
|
||||
|
||||
export const RightControls = () => {
|
||||
const volume = useVolume();
|
||||
const muted = useMuted();
|
||||
const { setSidebar } = useAppStoreActions();
|
||||
const { rightExpanded: isQueueExpanded } = useSidebarStore();
|
||||
const { handleVolumeSlider, handleVolumeSliderState, handleMute } = useRightControls();
|
||||
|
||||
return (
|
||||
<RightControlsContainer>
|
||||
<Group>
|
||||
<PlayerButton
|
||||
icon={<HiOutlineQueueList />}
|
||||
tooltip={{ label: 'View queue', openDelay: 500 }}
|
||||
variant="secondary"
|
||||
onClick={() => setSidebar({ rightExpanded: !isQueueExpanded })}
|
||||
/>
|
||||
</Group>
|
||||
<MetadataStack>
|
||||
<VolumeSliderWrapper>
|
||||
<PlayerButton
|
||||
icon={
|
||||
muted ? (
|
||||
<RiVolumeMuteFill size={15} />
|
||||
) : volume > 50 ? (
|
||||
<RiVolumeUpFill size={15} />
|
||||
) : (
|
||||
<RiVolumeDownFill size={15} />
|
||||
)
|
||||
}
|
||||
tooltip={{ label: muted ? 'Muted' : volume, openDelay: 500 }}
|
||||
variant="secondary"
|
||||
onClick={handleMute}
|
||||
/>
|
||||
<Slider
|
||||
hasTooltip
|
||||
height="60%"
|
||||
max={100}
|
||||
min={0}
|
||||
value={volume}
|
||||
onAfterChange={handleVolumeSliderState}
|
||||
onChange={handleVolumeSlider}
|
||||
/>
|
||||
</VolumeSliderWrapper>
|
||||
</MetadataStack>
|
||||
</RightControlsContainer>
|
||||
);
|
||||
};
|
||||
149
src/renderer/features/player/components/slider.tsx
Normal file
149
src/renderer/features/player/components/slider.tsx
Normal file
|
|
@ -0,0 +1,149 @@
|
|||
import { useMemo, useState } from 'react';
|
||||
import format from 'format-duration';
|
||||
import type { ReactSliderProps } from 'react-slider';
|
||||
import ReactSlider from 'react-slider';
|
||||
import styled from 'styled-components';
|
||||
|
||||
interface SliderProps extends ReactSliderProps {
|
||||
hasTooltip?: boolean;
|
||||
height: string;
|
||||
tooltipType?: 'text' | 'time';
|
||||
}
|
||||
|
||||
const StyledSlider = styled(ReactSlider)<SliderProps | any>`
|
||||
width: 100%;
|
||||
height: ${(props) => props.height};
|
||||
outline: none;
|
||||
|
||||
.thumb {
|
||||
top: 37%;
|
||||
opacity: 1;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: -25px;
|
||||
left: -18px;
|
||||
display: ${(props) => (props.$isDragging && props.$hasToolTip ? 'block' : 'none')};
|
||||
padding: 2px 6px;
|
||||
color: var(--tooltip-fg);
|
||||
white-space: nowrap;
|
||||
background: var(--tooltip-bg);
|
||||
border-radius: 4px;
|
||||
content: attr(data-tooltip);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
text-align: center;
|
||||
background-color: #fff;
|
||||
border: 1px var(--primary-color) solid;
|
||||
border-radius: 100%;
|
||||
outline: none;
|
||||
transform: translate(-12px, -4px);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.track-0 {
|
||||
background: ${(props) => props.$isDragging && 'var(--primary-color)'};
|
||||
transition: background 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.track {
|
||||
top: 37%;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.track-0 {
|
||||
background: var(--primary-color);
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const MemoizedThumb = ({ props, state, toolTipType }: any) => {
|
||||
const { value } = state;
|
||||
const formattedValue = useMemo(() => {
|
||||
if (toolTipType === 'text') {
|
||||
return value;
|
||||
}
|
||||
|
||||
return format(value * 1000);
|
||||
}, [toolTipType, value]);
|
||||
|
||||
return (
|
||||
<div
|
||||
{...props}
|
||||
data-tooltip={formattedValue}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const StyledTrack = styled.div<any>`
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
height: 5px;
|
||||
background: ${(props) =>
|
||||
props.index === 1
|
||||
? 'var(--playerbar-slider-track-bg)'
|
||||
: 'var(--playerbar-slider-track-progress-bg)'};
|
||||
`;
|
||||
|
||||
const Track = (props: any, state: any) => (
|
||||
// eslint-disable-next-line react/destructuring-assignment
|
||||
<StyledTrack
|
||||
{...props}
|
||||
index={state.index}
|
||||
/>
|
||||
);
|
||||
const Thumb = (props: any, state: any, toolTipType: any) => (
|
||||
<MemoizedThumb
|
||||
key="slider"
|
||||
props={props}
|
||||
state={state}
|
||||
tabIndex={0}
|
||||
toolTipType={toolTipType}
|
||||
/>
|
||||
);
|
||||
|
||||
export const Slider = ({
|
||||
height,
|
||||
tooltipType: toolTipType,
|
||||
hasTooltip: hasToolTip,
|
||||
...rest
|
||||
}: SliderProps) => {
|
||||
const [isDragging, setIsDragging] = useState(false);
|
||||
|
||||
return (
|
||||
<StyledSlider
|
||||
{...rest}
|
||||
$hasToolTip={hasToolTip}
|
||||
$isDragging={isDragging}
|
||||
className="player-slider"
|
||||
defaultValue={0}
|
||||
height={height}
|
||||
renderThumb={(props: any, state: any) => {
|
||||
return Thumb(props, state, toolTipType);
|
||||
}}
|
||||
renderTrack={Track}
|
||||
onAfterChange={(e: number, index: number) => {
|
||||
if (rest.onAfterChange) {
|
||||
rest.onAfterChange(e, index);
|
||||
}
|
||||
setIsDragging(false);
|
||||
}}
|
||||
onBeforeChange={(e: number, index: number) => {
|
||||
if (rest.onBeforeChange) {
|
||||
rest.onBeforeChange(e, index);
|
||||
}
|
||||
setIsDragging(true);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
Slider.defaultProps = {
|
||||
hasTooltip: true,
|
||||
tooltipType: 'text',
|
||||
};
|
||||
520
src/renderer/features/player/hooks/use-center-controls.ts
Normal file
520
src/renderer/features/player/hooks/use-center-controls.ts
Normal file
|
|
@ -0,0 +1,520 @@
|
|||
import { useCallback, useEffect } from 'react';
|
||||
import isElectron from 'is-electron';
|
||||
import { PlaybackType, PlayerRepeat, PlayerShuffle, PlayerStatus } from '/@/renderer/types';
|
||||
import {
|
||||
useCurrentPlayer,
|
||||
useCurrentStatus,
|
||||
useDefaultQueue,
|
||||
usePlayerControls,
|
||||
usePlayerStore,
|
||||
useRepeatStatus,
|
||||
useSetCurrentTime,
|
||||
useShuffleStatus,
|
||||
} from '/@/renderer/store';
|
||||
import { useSettingsStore } from '/@/renderer/store/settings.store';
|
||||
|
||||
const mpvPlayer = window.electron.mpvPlayer;
|
||||
const mpvPlayerListener = window.electron.mpvPlayerListener;
|
||||
const ipc = window.electron.ipc;
|
||||
|
||||
export const useCenterControls = (args: { playersRef: any }) => {
|
||||
const { playersRef } = args;
|
||||
|
||||
const settings = useSettingsStore((state) => state.player);
|
||||
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 player1Ref = playersRef?.current?.player1;
|
||||
const player2Ref = playersRef?.current?.player2;
|
||||
const currentPlayerRef = currentPlayer === 1 ? player1Ref : player2Ref;
|
||||
const nextPlayerRef = currentPlayer === 1 ? player2Ref : player1Ref;
|
||||
|
||||
const resetPlayers = useCallback(() => {
|
||||
if (player1Ref.getInternalPlayer()) {
|
||||
player1Ref.getInternalPlayer().currentTime = 0;
|
||||
player1Ref.getInternalPlayer().pause();
|
||||
}
|
||||
|
||||
if (player2Ref.getInternalPlayer()) {
|
||||
player2Ref.getInternalPlayer().currentTime = 0;
|
||||
player2Ref.getInternalPlayer().pause();
|
||||
}
|
||||
}, [player1Ref, player2Ref]);
|
||||
|
||||
const resetNextPlayer = useCallback(() => {
|
||||
currentPlayerRef.getInternalPlayer().volume = 0.1;
|
||||
nextPlayerRef.getInternalPlayer().currentTime = 0;
|
||||
nextPlayerRef.getInternalPlayer().pause();
|
||||
}, [currentPlayerRef, nextPlayerRef]);
|
||||
|
||||
const stopPlayback = useCallback(() => {
|
||||
player1Ref.getInternalPlayer().pause();
|
||||
player2Ref.getInternalPlayer().pause();
|
||||
resetPlayers();
|
||||
}, [player1Ref, player2Ref, resetPlayers]);
|
||||
|
||||
const isMpvPlayer = isElectron() && settings.type === PlaybackType.LOCAL;
|
||||
|
||||
const handlePlay = useCallback(() => {
|
||||
if (isMpvPlayer) {
|
||||
mpvPlayer.play();
|
||||
} else {
|
||||
currentPlayerRef.getInternalPlayer().play();
|
||||
}
|
||||
|
||||
play();
|
||||
}, [currentPlayerRef, isMpvPlayer, play]);
|
||||
|
||||
const handlePause = useCallback(() => {
|
||||
if (isMpvPlayer) {
|
||||
mpvPlayer.pause();
|
||||
}
|
||||
|
||||
pause();
|
||||
}, [isMpvPlayer, pause]);
|
||||
|
||||
const handleStop = useCallback(() => {
|
||||
if (isMpvPlayer) {
|
||||
mpvPlayer.stop();
|
||||
} else {
|
||||
stopPlayback();
|
||||
}
|
||||
|
||||
setCurrentTime(0);
|
||||
pause();
|
||||
}, [isMpvPlayer, pause, setCurrentTime, stopPlayback]);
|
||||
|
||||
const handleToggleShuffle = useCallback(() => {
|
||||
if (shuffleStatus === PlayerShuffle.NONE) {
|
||||
const playerData = setShuffle(PlayerShuffle.TRACK);
|
||||
return mpvPlayer.setQueueNext(playerData);
|
||||
}
|
||||
|
||||
const playerData = setShuffle(PlayerShuffle.NONE);
|
||||
return mpvPlayer.setQueueNext(playerData);
|
||||
}, [setShuffle, shuffleStatus]);
|
||||
|
||||
const handleToggleRepeat = useCallback(() => {
|
||||
if (repeatStatus === PlayerRepeat.NONE) {
|
||||
const playerData = setRepeat(PlayerRepeat.ALL);
|
||||
return mpvPlayer.setQueueNext(playerData);
|
||||
}
|
||||
|
||||
if (repeatStatus === PlayerRepeat.ALL) {
|
||||
const playerData = setRepeat(PlayerRepeat.ONE);
|
||||
return mpvPlayer.setQueueNext(playerData);
|
||||
}
|
||||
|
||||
return setRepeat(PlayerRepeat.NONE);
|
||||
}, [repeatStatus, setRepeat]);
|
||||
|
||||
const checkIsLastTrack = useCallback(() => {
|
||||
return usePlayerStore.getState().actions.checkIsLastTrack();
|
||||
}, []);
|
||||
|
||||
const checkIsFirstTrack = useCallback(() => {
|
||||
return usePlayerStore.getState().actions.checkIsFirstTrack();
|
||||
}, []);
|
||||
|
||||
const handleAutoNext = useCallback(() => {
|
||||
const isLastTrack = checkIsLastTrack();
|
||||
|
||||
const handleRepeatAll = {
|
||||
local: () => {
|
||||
const playerData = autoNext();
|
||||
mpvPlayer.autoNext(playerData);
|
||||
play();
|
||||
},
|
||||
web: () => {
|
||||
autoNext();
|
||||
},
|
||||
};
|
||||
|
||||
const handleRepeatNone = {
|
||||
local: () => {
|
||||
if (isLastTrack) {
|
||||
const playerData = setCurrentIndex(0);
|
||||
mpvPlayer.setQueue(playerData);
|
||||
mpvPlayer.pause();
|
||||
pause();
|
||||
} else {
|
||||
const playerData = autoNext();
|
||||
mpvPlayer.autoNext(playerData);
|
||||
play();
|
||||
}
|
||||
},
|
||||
web: () => {
|
||||
if (isLastTrack) {
|
||||
resetPlayers();
|
||||
pause();
|
||||
} else {
|
||||
autoNext();
|
||||
resetPlayers();
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
const handleRepeatOne = {
|
||||
local: () => {
|
||||
const playerData = autoNext();
|
||||
mpvPlayer.autoNext(playerData);
|
||||
play();
|
||||
},
|
||||
web: () => {
|
||||
if (isLastTrack) {
|
||||
resetPlayers();
|
||||
} else {
|
||||
autoNext();
|
||||
resetPlayers();
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
switch (repeatStatus) {
|
||||
case PlayerRepeat.NONE:
|
||||
handleRepeatNone[playerType]();
|
||||
break;
|
||||
case PlayerRepeat.ALL:
|
||||
handleRepeatAll[playerType]();
|
||||
break;
|
||||
case PlayerRepeat.ONE:
|
||||
handleRepeatOne[playerType]();
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}, [
|
||||
autoNext,
|
||||
checkIsLastTrack,
|
||||
pause,
|
||||
play,
|
||||
playerType,
|
||||
repeatStatus,
|
||||
resetPlayers,
|
||||
setCurrentIndex,
|
||||
]);
|
||||
|
||||
const handleNextTrack = useCallback(() => {
|
||||
const isLastTrack = checkIsLastTrack();
|
||||
|
||||
const handleRepeatAll = {
|
||||
local: () => {
|
||||
const playerData = next();
|
||||
mpvPlayer.setQueue(playerData);
|
||||
mpvPlayer.next();
|
||||
},
|
||||
web: () => {
|
||||
next();
|
||||
},
|
||||
};
|
||||
|
||||
const handleRepeatNone = {
|
||||
local: () => {
|
||||
if (isLastTrack) {
|
||||
const playerData = setCurrentIndex(0);
|
||||
mpvPlayer.setQueue(playerData);
|
||||
mpvPlayer.pause();
|
||||
pause();
|
||||
} else {
|
||||
const playerData = next();
|
||||
mpvPlayer.setQueue(playerData);
|
||||
mpvPlayer.next();
|
||||
}
|
||||
},
|
||||
web: () => {
|
||||
if (isLastTrack) {
|
||||
setCurrentIndex(0);
|
||||
resetPlayers();
|
||||
pause();
|
||||
} else {
|
||||
next();
|
||||
resetPlayers();
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
const handleRepeatOne = {
|
||||
local: () => {
|
||||
const playerData = next();
|
||||
mpvPlayer.setQueue(playerData);
|
||||
mpvPlayer.next();
|
||||
},
|
||||
web: () => {
|
||||
if (!isLastTrack) {
|
||||
next();
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
switch (repeatStatus) {
|
||||
case PlayerRepeat.NONE:
|
||||
handleRepeatNone[playerType]();
|
||||
break;
|
||||
case PlayerRepeat.ALL:
|
||||
handleRepeatAll[playerType]();
|
||||
break;
|
||||
case PlayerRepeat.ONE:
|
||||
handleRepeatOne[playerType]();
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
setCurrentTime(0);
|
||||
}, [
|
||||
checkIsLastTrack,
|
||||
next,
|
||||
pause,
|
||||
playerType,
|
||||
repeatStatus,
|
||||
resetPlayers,
|
||||
setCurrentIndex,
|
||||
setCurrentTime,
|
||||
]);
|
||||
|
||||
const handlePrevTrack = useCallback(() => {
|
||||
const currentTime = isMpvPlayer
|
||||
? usePlayerStore.getState().current.time
|
||||
: currentPlayerRef.getCurrentTime();
|
||||
|
||||
// Reset the current track more than 10 seconds have elapsed
|
||||
if (currentTime >= 10) {
|
||||
if (isMpvPlayer) {
|
||||
return mpvPlayer.seekTo(0);
|
||||
}
|
||||
return currentPlayerRef.seekTo(0);
|
||||
}
|
||||
|
||||
const isFirstTrack = checkIsFirstTrack();
|
||||
|
||||
const handleRepeatAll = {
|
||||
local: () => {
|
||||
if (!isFirstTrack) {
|
||||
const playerData = previous();
|
||||
mpvPlayer.setQueue(playerData);
|
||||
mpvPlayer.previous();
|
||||
} else {
|
||||
const playerData = setCurrentIndex(queue.length - 1);
|
||||
mpvPlayer.setQueue(playerData);
|
||||
mpvPlayer.previous();
|
||||
}
|
||||
},
|
||||
web: () => {
|
||||
if (isFirstTrack) {
|
||||
setCurrentIndex(queue.length - 1);
|
||||
resetPlayers();
|
||||
} else {
|
||||
previous();
|
||||
resetPlayers();
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
const handleRepeatNone = {
|
||||
local: () => {
|
||||
const playerData = previous();
|
||||
mpvPlayer.setQueue(playerData);
|
||||
mpvPlayer.previous();
|
||||
},
|
||||
web: () => {
|
||||
if (isFirstTrack) {
|
||||
resetPlayers();
|
||||
pause();
|
||||
} else {
|
||||
previous();
|
||||
resetPlayers();
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
const handleRepeatOne = {
|
||||
local: () => {
|
||||
if (!isFirstTrack) {
|
||||
const playerData = previous();
|
||||
mpvPlayer.setQueue(playerData);
|
||||
mpvPlayer.previous();
|
||||
} else {
|
||||
mpvPlayer.stop();
|
||||
}
|
||||
},
|
||||
web: () => {
|
||||
previous();
|
||||
resetPlayers();
|
||||
},
|
||||
};
|
||||
|
||||
switch (repeatStatus) {
|
||||
case PlayerRepeat.NONE:
|
||||
handleRepeatNone[playerType]();
|
||||
break;
|
||||
case PlayerRepeat.ALL:
|
||||
handleRepeatAll[playerType]();
|
||||
break;
|
||||
case PlayerRepeat.ONE:
|
||||
handleRepeatOne[playerType]();
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
return setCurrentTime(0);
|
||||
}, [
|
||||
checkIsFirstTrack,
|
||||
currentPlayerRef,
|
||||
isMpvPlayer,
|
||||
pause,
|
||||
playerType,
|
||||
previous,
|
||||
queue.length,
|
||||
repeatStatus,
|
||||
resetPlayers,
|
||||
setCurrentIndex,
|
||||
setCurrentTime,
|
||||
]);
|
||||
|
||||
const handlePlayPause = useCallback(() => {
|
||||
if (queue) {
|
||||
if (playerStatus === PlayerStatus.PAUSED) {
|
||||
return handlePlay();
|
||||
}
|
||||
|
||||
return handlePause();
|
||||
}
|
||||
|
||||
return null;
|
||||
}, [handlePause, handlePlay, playerStatus, queue]);
|
||||
|
||||
const handleSkipBackward = (seconds: number) => {
|
||||
const currentTime = isMpvPlayer
|
||||
? usePlayerStore.getState().current.time
|
||||
: currentPlayerRef.getCurrentTime();
|
||||
|
||||
if (isMpvPlayer) {
|
||||
const newTime = currentTime - seconds;
|
||||
mpvPlayer.seek(-seconds);
|
||||
setCurrentTime(newTime < 0 ? 0 : newTime);
|
||||
} else {
|
||||
const newTime = currentTime - seconds;
|
||||
resetNextPlayer();
|
||||
setCurrentTime(newTime);
|
||||
currentPlayerRef.seekTo(newTime);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSkipForward = (seconds: number) => {
|
||||
const currentTime = isMpvPlayer
|
||||
? usePlayerStore.getState().current.time
|
||||
: currentPlayerRef.getCurrentTime();
|
||||
|
||||
if (isMpvPlayer) {
|
||||
const newTime = currentTime + seconds;
|
||||
mpvPlayer.seek(seconds);
|
||||
setCurrentTime(newTime);
|
||||
} else {
|
||||
const checkNewTime = currentTime + seconds;
|
||||
const songDuration = currentPlayerRef.player.player.duration;
|
||||
|
||||
const newTime = checkNewTime >= songDuration ? songDuration - 1 : checkNewTime;
|
||||
|
||||
resetNextPlayer();
|
||||
setCurrentTime(newTime);
|
||||
currentPlayerRef.seekTo(newTime);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSeekSlider = useCallback(
|
||||
(e: number | any) => {
|
||||
setCurrentTime(e);
|
||||
|
||||
if (isMpvPlayer) {
|
||||
mpvPlayer.seekTo(e);
|
||||
} else {
|
||||
currentPlayerRef.seekTo(e);
|
||||
}
|
||||
},
|
||||
[currentPlayerRef, isMpvPlayer, setCurrentTime],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (isElectron()) {
|
||||
mpvPlayerListener.rendererPlayPause(() => {
|
||||
handlePlayPause();
|
||||
});
|
||||
|
||||
mpvPlayerListener.rendererNext(() => {
|
||||
handleNextTrack();
|
||||
});
|
||||
|
||||
mpvPlayerListener.rendererPrevious(() => {
|
||||
handlePrevTrack();
|
||||
});
|
||||
|
||||
mpvPlayerListener.rendererPlay(() => {
|
||||
handlePlay();
|
||||
});
|
||||
|
||||
mpvPlayerListener.rendererPause(() => {
|
||||
handlePause();
|
||||
});
|
||||
|
||||
mpvPlayerListener.rendererStop(() => {
|
||||
handleStop();
|
||||
});
|
||||
|
||||
mpvPlayerListener.rendererCurrentTime((_event: any, time: number) => {
|
||||
setCurrentTime(time);
|
||||
});
|
||||
|
||||
mpvPlayerListener.rendererAutoNext(() => {
|
||||
handleAutoNext();
|
||||
});
|
||||
}
|
||||
|
||||
return () => {
|
||||
ipc?.removeAllListeners('renderer-player-play-pause');
|
||||
ipc?.removeAllListeners('renderer-player-next');
|
||||
ipc?.removeAllListeners('renderer-player-previous');
|
||||
ipc?.removeAllListeners('renderer-player-play');
|
||||
ipc?.removeAllListeners('renderer-player-pause');
|
||||
ipc?.removeAllListeners('renderer-player-stop');
|
||||
ipc?.removeAllListeners('renderer-player-current-time');
|
||||
ipc?.removeAllListeners('renderer-player-auto-next');
|
||||
};
|
||||
}, [
|
||||
autoNext,
|
||||
handleAutoNext,
|
||||
handleNextTrack,
|
||||
handlePause,
|
||||
handlePlay,
|
||||
handlePlayPause,
|
||||
handlePrevTrack,
|
||||
handleStop,
|
||||
isMpvPlayer,
|
||||
next,
|
||||
pause,
|
||||
play,
|
||||
previous,
|
||||
setCurrentTime,
|
||||
]);
|
||||
|
||||
return {
|
||||
handleNextTrack,
|
||||
handlePlayPause,
|
||||
handlePrevTrack,
|
||||
handleSeekSlider,
|
||||
handleSkipBackward,
|
||||
handleSkipForward,
|
||||
handleStop,
|
||||
handleToggleRepeat,
|
||||
handleToggleShuffle,
|
||||
};
|
||||
};
|
||||
44
src/renderer/features/player/hooks/use-right-controls.ts
Normal file
44
src/renderer/features/player/hooks/use-right-controls.ts
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
import { useEffect } from 'react';
|
||||
import isElectron from 'is-electron';
|
||||
import { useMuted, usePlayerControls, useVolume } from '/@/renderer/store';
|
||||
|
||||
const mpvPlayer = window.electron.mpvPlayer;
|
||||
|
||||
export const useRightControls = () => {
|
||||
const { setVolume, setMuted } = usePlayerControls();
|
||||
const volume = useVolume();
|
||||
const muted = useMuted();
|
||||
|
||||
// Ensure that the mpv player volume is set on startup
|
||||
useEffect(() => {
|
||||
if (isElectron()) {
|
||||
mpvPlayer.volume(volume);
|
||||
|
||||
if (muted) {
|
||||
mpvPlayer.mute();
|
||||
}
|
||||
}
|
||||
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
const handleVolumeSlider = (e: number) => {
|
||||
mpvPlayer.volume(e);
|
||||
setVolume(e);
|
||||
};
|
||||
|
||||
const handleVolumeSliderState = (e: number) => {
|
||||
setVolume(e);
|
||||
};
|
||||
|
||||
const handleMute = () => {
|
||||
setMuted(!muted);
|
||||
mpvPlayer.mute();
|
||||
};
|
||||
|
||||
return {
|
||||
handleMute,
|
||||
handleVolumeSlider,
|
||||
handleVolumeSliderState,
|
||||
};
|
||||
};
|
||||
23
src/renderer/features/player/hooks/use-scrobble.ts
Normal file
23
src/renderer/features/player/hooks/use-scrobble.ts
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
import { useState } from 'react';
|
||||
import { usePlayerStore } from '/@/renderer/store';
|
||||
|
||||
export const useScrobble = () => {
|
||||
const [isScrobbled, setIsScrobbled] = useState(false);
|
||||
|
||||
const currentSongDuration = usePlayerStore((state) => state.current.song?.duration);
|
||||
|
||||
const scrobbleAtPercentage = usePlayerStore((state) => state.settings.scrobbleAtPercentage);
|
||||
|
||||
console.log('currentSongDuration', currentSongDuration);
|
||||
|
||||
const scrobbleAtTime = (currentSongDuration * scrobbleAtPercentage) / 100;
|
||||
|
||||
console.log('scrobbleAtTime', scrobbleAtTime);
|
||||
|
||||
console.log('render');
|
||||
const handleScrobble = () => {
|
||||
console.log('scrobble complete');
|
||||
};
|
||||
|
||||
return { handleScrobble, isScrobbled, setIsScrobbled };
|
||||
};
|
||||
4
src/renderer/features/player/index.ts
Normal file
4
src/renderer/features/player/index.ts
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
export * from './components/center-controls';
|
||||
export * from './components/left-controls';
|
||||
export * from './components/playerbar';
|
||||
export * from './components/slider';
|
||||
71
src/renderer/features/player/utils/handle-playqueue-add.ts
Normal file
71
src/renderer/features/player/utils/handle-playqueue-add.ts
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
import { controller } from '/@/renderer/api/controller';
|
||||
import { jfNormalize } from '/@/renderer/api/jellyfin.api';
|
||||
import { JFSong } from '/@/renderer/api/jellyfin.types';
|
||||
import { ndNormalize } from '/@/renderer/api/navidrome.api';
|
||||
import { NDSong } from '/@/renderer/api/navidrome.types';
|
||||
import { queryKeys } from '/@/renderer/api/query-keys';
|
||||
import { toast } from '/@/renderer/components';
|
||||
import { queryClient } from '/@/renderer/lib/react-query';
|
||||
import { useAuthStore, usePlayerStore } from '/@/renderer/store';
|
||||
import { useSettingsStore } from '/@/renderer/store/settings.store';
|
||||
import { PlayQueueAddOptions, LibraryItem, Play, PlaybackType } from '/@/renderer/types';
|
||||
|
||||
const mpvPlayer = window.electron.mpvPlayer;
|
||||
|
||||
export const handlePlayQueueAdd = async (options: PlayQueueAddOptions) => {
|
||||
const playerType = useSettingsStore.getState().player.type;
|
||||
const deviceId = useAuthStore.getState().deviceId;
|
||||
const server = useAuthStore.getState().currentServer;
|
||||
|
||||
if (!server) return toast.error({ message: 'No server selected' });
|
||||
|
||||
if (options.byItemType) {
|
||||
let songs = null;
|
||||
|
||||
if (options.byItemType.type === LibraryItem.ALBUM) {
|
||||
const albumDetail = await queryClient.fetchQuery(
|
||||
queryKeys.albums.detail(server?.id, { id: options.byItemType.id }),
|
||||
async ({ signal }) =>
|
||||
controller.getAlbumDetail({ query: { id: options.byItemType!.id }, server, signal }),
|
||||
);
|
||||
|
||||
if (!albumDetail) return null;
|
||||
|
||||
switch (server?.type) {
|
||||
case 'jellyfin':
|
||||
songs = albumDetail.songs?.map((song) =>
|
||||
jfNormalize.song(song as JFSong, server, deviceId),
|
||||
);
|
||||
break;
|
||||
case 'navidrome':
|
||||
songs = albumDetail.songs?.map((song) =>
|
||||
ndNormalize.song(song as NDSong, server, deviceId),
|
||||
);
|
||||
break;
|
||||
case 'subsonic':
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (!songs) return null;
|
||||
|
||||
const playerData = usePlayerStore.getState().actions.addToQueue(songs, options.play);
|
||||
|
||||
if (options.play === Play.NEXT || options.play === Play.LAST) {
|
||||
if (playerType === PlaybackType.LOCAL) {
|
||||
mpvPlayer.setQueueNext(playerData);
|
||||
}
|
||||
}
|
||||
|
||||
if (options.play === Play.NOW) {
|
||||
if (playerType === PlaybackType.LOCAL) {
|
||||
mpvPlayer.setQueue(playerData);
|
||||
mpvPlayer.play();
|
||||
}
|
||||
|
||||
usePlayerStore.getState().actions.play();
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue