pogmommy/feishin
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add volume wheel scroll & new slider component

Browse source
This commit is contained in:
jeffvli 2023-01-30 21:34:27 -08:00
parent 01fdd25406
commit 4cbc28a087
8 changed files with 178 additions and 103 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,5 +1,5 @@
import { useEffect, useState } from 'react';
import format from 'format-duration';
import formatDuration from 'format-duration';
import isElectron from 'is-electron';
import { IoIosPause } from 'react-icons/io';
import {
@ -16,7 +16,6 @@ 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,
@ -28,6 +27,7 @@ import {
} from '/@/renderer/store';
import { usePlayerType, useSettingsStore } from '/@/renderer/store/settings.store';
import { PlayerStatus, PlaybackType, PlayerShuffle, PlayerRepeat } from '/@/renderer/types';
import { PlayerbarSlider } from '/@/renderer/features/player/components/playerbar-slider';
interface CenterControlsProps {
playersRef: any;
@ -61,6 +61,7 @@ const SliderValueWrapper = styled.div<{ position: 'left' | 'right' }>`
const SliderWrapper = styled.div`
display: flex;
flex: 6;
align-items: center;
height: 100%;
`;
@ -91,8 +92,8 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
const currentTime = useCurrentTime();
const currentPlayerRef = player === 1 ? player1 : player2;
const duration = format((songDuration || 0) * 1000);
const formattedTime = format(currentTime * 1000 || 0);
const duration = formatDuration((songDuration || 0) * 1000);
const formattedTime = formatDuration(currentTime * 1000 || 0);
useEffect(() => {
let interval: any;
@ -210,13 +211,14 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
</Text>
</SliderValueWrapper>
<SliderWrapper>
<Slider
height="100%"
<PlayerbarSlider
label={(value) => formatDuration(value * 1000)}
max={songDuration}
min={0}
tooltipType="time"
size={6}
value={currentTime}
onAfterChange={(e) => {
w="100%"
onChange={(e) => {
handleSeekSlider(e);
setIsSeeking(false);
}}

40
src/renderer/features/player/components/playerbar-slider.tsx Normal file
View file

@ -0,0 +1,40 @@
import { rem, Slider, SliderProps } from '@mantine/core';
export const PlayerbarSlider = ({ ...props }: SliderProps) => {
return (
<Slider
styles={{
bar: {
backgroundColor: 'var(--playerbar-slider-track-progress-bg)',
transition: 'background-color 0.2s ease',
},
label: {
backgroundColor: 'var(--tooltip-bg)',
color: 'var(--tooltip-fg)',
fontSize: '1.1rem',
fontWeight: 600,
padding: '0 1rem',
},
root: {
'&:hover': {
'& .mantine-Slider-bar': {
backgroundColor: 'var(--primary-color)',
},
'& .mantine-Slider-thumb': {
opacity: 1,
},
},
},
thumb: {
backgroundColor: 'var(--slider-thumb-bg)',
borderColor: 'var(--primary-color)',
borderWidth: rem(1),
height: '1rem',
opacity: 0,
width: '1rem',
},
}}
{...props}
/>
);
};

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

@ -7,7 +7,6 @@ import {
RiHeartLine,
RiHeartFill,
} from 'react-icons/ri';
import styled from 'styled-components';
import {
useAppStoreActions,
useCurrentServer,
@ -19,34 +18,10 @@ import {
} from '/@/renderer/store';
import { useRightControls } from '../hooks/use-right-controls';
import { PlayerButton } from './player-button';
import { Slider } from './slider';
import { LibraryItem, ServerType } from '/@/renderer/api/types';
import { useCreateFavorite, useDeleteFavorite } from '/@/renderer/features/shared';
import { Rating } from '/@/renderer/components';
const RightControlsContainer = styled.div`
display: flex;
flex-direction: row;
justify-content: flex-end;
width: 100%;
height: 100%;
`;
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;
`;
import { PlayerbarSlider } from '/@/renderer/features/player/components/playerbar-slider';
export const RightControls = () => {
const volume = useVolume();
@ -55,7 +30,7 @@ export const RightControls = () => {
const currentSong = useCurrentSong();
const { setSidebar } = useAppStoreActions();
const { rightExpanded: isQueueExpanded } = useSidebarStore();
const { handleVolumeSlider, handleVolumeSliderState, handleMute } = useRightControls();
const { handleVolumeSlider, handleVolumeWheel, handleMute } = useRightControls();
const addToFavoritesMutation = useCreateFavorite();
const removeFromFavoritesMutation = useDeleteFavorite();
@ -115,77 +90,82 @@ export const RightControls = () => {
align="flex-end"
direction="column"
h="100%"
p="1rem"
px="1rem"
py="0.5rem"
>
{showRating && (
<Group>
<Group h="calc(100% / 3)">
{showRating && (
<Rating
readOnly
size="sm"
value={currentSong?.userRating ?? 0}
/>
</Group>
)}
<RightControlsContainer>
<Group spacing="xs">
)}
</Group>
<Group
noWrap
align="center"
spacing="xs"
>
<PlayerButton
icon={
currentSong?.userFavorite ? (
<RiHeartFill
color="var(--primary-color)"
size="1.1rem"
/>
) : (
<RiHeartLine size="1.1rem" />
)
}
sx={{
svg: {
fill: !currentSong?.userFavorite ? undefined : 'var(--primary-color) !important',
},
}}
tooltip={{
label: currentSong?.userFavorite ? 'Unfavorite' : 'Favorite',
openDelay: 500,
}}
variant="secondary"
onClick={handleToggleFavorite}
/>
<PlayerButton
icon={<HiOutlineQueueList size="1.1rem" />}
tooltip={{ label: 'View queue', openDelay: 500 }}
variant="secondary"
onClick={() => setSidebar({ rightExpanded: !isQueueExpanded })}
/>
<Group
noWrap
spacing="xs"
>
<PlayerButton
icon={
currentSong?.userFavorite ? (
<RiHeartFill
color="var(--primary-color)"
size="1.3rem"
/>
muted ? (
<RiVolumeMuteFill size="1.2rem" />
) : volume > 50 ? (
<RiVolumeUpFill size="1.2rem" />
) : (
<RiHeartLine size="1.3rem" />
<RiVolumeDownFill size="1.2rem" />
)
}
sx={{
svg: {
fill: !currentSong?.userFavorite ? undefined : 'var(--primary-color) !important',
},
}}
tooltip={{
label: currentSong?.userFavorite ? 'Unfavorite' : 'Favorite',
openDelay: 500,
}}
tooltip={{ label: muted ? 'Muted' : volume, openDelay: 500 }}
variant="secondary"
onClick={handleToggleFavorite}
onClick={handleMute}
/>
<PlayerButton
icon={<HiOutlineQueueList size="1.3rem" />}
tooltip={{ label: 'View queue', openDelay: 500 }}
variant="secondary"
onClick={() => setSidebar({ rightExpanded: !isQueueExpanded })}
<PlayerbarSlider
max={100}
min={0}
size={6}
value={volume}
w="60px"
onChange={handleVolumeSlider}
onWheel={handleVolumeWheel}
/>
</Group>
<MetadataStack>
<VolumeSliderWrapper>
<PlayerButton
icon={
muted ? (
<RiVolumeMuteFill size="1.2rem" />
) : volume > 50 ? (
<RiVolumeUpFill size="1.2rem" />
) : (
<RiVolumeDownFill size="1.2rem" />
)
}
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>
</Group>
<Group h="calc(100% / 3)" />
</Flex>
);
};

19
src/renderer/features/player/hooks/use-center-controls.ts
View file

@ -13,6 +13,7 @@ import {
} from '/@/renderer/store';
import { usePlayerType, useSettingsStore } from '/@/renderer/store/settings.store';
import { useScrobble } from '/@/renderer/features/player/hooks/use-scrobble';
import debounce from 'lodash/debounce';
const mpvPlayer = isElectron() ? window.electron.mpvPlayer : null;
const mpvPlayerListener = isElectron() ? window.electron.mpvPlayerListener : null;
@ -439,19 +440,21 @@ export const useCenterControls = (args: { playersRef: any }) => {
}
};
const debouncedSeek = debounce((e: number) => {
if (isMpvPlayer) {
mpvPlayer.seekTo(e);
} else {
currentPlayerRef.seekTo(e);
}
}, 100);
const handleSeekSlider = useCallback(
(e: number | any) => {
setCurrentTime(e);
handleScrobbleFromSeek(e);
if (isMpvPlayer) {
mpvPlayer.seekTo(e);
} else {
currentPlayerRef.seekTo(e);
}
debouncedSeek(e);
},
[currentPlayerRef, handleScrobbleFromSeek, isMpvPlayer, setCurrentTime],
[debouncedSeek, handleScrobbleFromSeek, setCurrentTime],
);
const handleQuit = useCallback(() => {

17
src/renderer/features/player/hooks/use-right-controls.ts
View file

@ -1,6 +1,7 @@
import { useEffect } from 'react';
import { useEffect, WheelEvent } from 'react';
import isElectron from 'is-electron';
import { useMuted, usePlayerControls, useVolume } from '/@/renderer/store';
import { useGeneralSettings } from '/@/renderer/store/settings.store';
const mpvPlayer = isElectron() ? window.electron.mpvPlayer : null;
@ -8,6 +9,7 @@ export const useRightControls = () => {
const { setVolume, setMuted } = usePlayerControls();
const volume = useVolume();
const muted = useMuted();
const { volumeWheelStep } = useGeneralSettings();
// Ensure that the mpv player volume is set on startup
useEffect(() => {
@ -31,6 +33,18 @@ export const useRightControls = () => {
setVolume(e);
};
const handleVolumeWheel = (e: WheelEvent<HTMLDivElement>) => {
let newVolume;
if (e.deltaY > 0) {
newVolume = volume - volumeWheelStep;
} else {
newVolume = volume + volumeWheelStep;
}
mpvPlayer.volume(newVolume);
setVolume(newVolume);
};
const handleMute = () => {
setMuted(!muted);
mpvPlayer.mute();
@ -40,5 +54,6 @@ export const useRightControls = () => {
handleMute,
handleVolumeSlider,
handleVolumeSliderState,
handleVolumeWheel,
};
};

1
src/renderer/features/player/index.ts
View file

@ -1,6 +1,5 @@
export * from './components/center-controls';
export * from './components/left-controls';
export * from './components/playerbar';
export * from './components/slider';
export * from './context/play-queue-handler-context';
export * from './hooks/use-playqueue-add';

36
src/renderer/features/settings/components/general-tab.tsx
View file

@ -1,5 +1,5 @@
import { Divider, Stack } from '@mantine/core';
import { Select, Switch } from '/@/renderer/components';
import { Select, Slider, Switch } from '/@/renderer/components';
import isElectron from 'is-electron';
import { SettingsOptions } from '/@/renderer/features/settings/components/settings-option';
import { THEME_DATA } from '/@/renderer/hooks';
@ -195,6 +195,31 @@ export const GeneralTab = () => {
},
];
const miscOptions = [
{
control: (
<Slider
defaultValue={settings.volumeWheelStep}
max={20}
min={1}
w={100}
onChangeEnd={(e) => {
setSettings({
general: {
...settings,
volumeWheelStep: e,
},
});
}}
/>
),
description:
'The amount of volume to change when scrolling the mouse wheel on the volume slider',
isHidden: false,
title: 'Volume wheel step',
},
];
return (
<Stack spacing="md">
{options
@ -223,6 +248,15 @@ export const GeneralTab = () => {
{...option}
/>
))}
<Divider />
{miscOptions
.filter((o) => !o.isHidden)
.map((option) => (
<SettingsOptions
key={`general-${option.title}`}
{...option}
/>
))}
</Stack>
);
};

4
src/renderer/store/settings.store.ts
View file

@ -37,6 +37,7 @@ export interface SettingsState {
theme: AppTheme;
themeDark: AppTheme;
themeLight: AppTheme;
volumeWheelStep: number;
};
player: {
audioDeviceId?: string | null;
@ -90,6 +91,7 @@ export const useSettingsStore = create<SettingsSlice>()(
theme: AppTheme.DEFAULT_DARK,
themeDark: AppTheme.DEFAULT_DARK,
themeLight: AppTheme.DEFAULT_LIGHT,
volumeWheelStep: 5,
},
player: {
audioDeviceId: undefined,
@ -222,7 +224,7 @@ export const useSettingsStore = create<SettingsSlice>()(
return merge(currentState, persistedState);
},
name: 'store_settings',
version: 2,
version: 3,
},
),
);