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

[enhancement]: larger player buttons, clearer random icon

Browse source
This commit is contained in:
Kendall Garner 2024-02-01 20:59:00 -08:00
parent eff1cee6a3
commit efa0d9ec35
No known key found for this signature in database
GPG key ID: 18D2767419676C87
1 changed files with 10 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -6,7 +6,6 @@ import isElectron from 'is-electron';
import { useTranslation } from 'react-i18next';
import { IoIosPause } from 'react-icons/io';
import {
RiMenuAddFill,
RiPlayFill,
RiRepeat2Line,
RiRepeatOneLine,
@ -17,6 +16,7 @@ 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';
@ -171,17 +171,16 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
<ControlsContainer>
<ButtonsContainer>
<PlayerButton
icon={<RiStopFill size={15} />}
icon={<RiStopFill size={20} />}
tooltip={{
label: t('player.stop', { postProcess: 'sentenceCase' }),
openDelay: 500,
}}
variant="tertiary"
onClick={handleStop}
/>
<PlayerButton
$isActive={shuffle !== PlayerShuffle.NONE}
icon={<RiShuffleFill size={15} />}
icon={<RiShuffleFill size={20} />}
tooltip={{
label:
shuffle === PlayerShuffle.NONE
@ -190,29 +189,26 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
postProcess: 'sentenceCase',
})
: t('player.shuffle', { postProcess: 'sentenceCase' }),
openDelay: 500,
}}
variant="tertiary"
onClick={handleToggleShuffle}
/>
<PlayerButton
icon={<RiSkipBackFill size={15} />}
icon={<RiSkipBackFill size={20} />}
tooltip={{
label: t('player.previous', { postProcess: 'sentenceCase' }),
openDelay: 500,
}}
variant="secondary"
onClick={handlePrevTrack}
/>
{skip?.enabled && (
<PlayerButton
icon={<RiRewindFill size={15} />}
icon={<RiRewindFill size={20} />}
tooltip={{
label: t('player.skip', {
context: 'back',
postProcess: 'sentenceCase',
}),
openDelay: 500,
}}
variant="secondary"
onClick={() => handleSkipBackward(skip?.skipBackwardSeconds)}
@ -232,30 +228,27 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
status === PlayerStatus.PAUSED
? t('player.play', { postProcess: 'sentenceCase' })
: t('player.pause', { postProcess: 'sentenceCase' }),
openDelay: 500,
}}
variant="main"
onClick={handlePlayPause}
/>
{skip?.enabled && (
<PlayerButton
icon={<RiSpeedFill size={15} />}
icon={<RiSpeedFill size={20} />}
tooltip={{
label: t('player.skip', {
context: 'forward',
postProcess: 'sentenceCase',
}),
openDelay: 500,
}}
variant="secondary"
onClick={() => handleSkipForward(skip?.skipForwardSeconds)}
/>
)}
<PlayerButton
icon={<RiSkipForwardFill size={15} />}
icon={<RiSkipForwardFill size={20} />}
tooltip={{
label: t('player.next', { postProcess: 'sentenceCase' }),
openDelay: 500,
}}
variant="secondary"
onClick={handleNextTrack}
@ -264,9 +257,9 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
$isActive={repeat !== PlayerRepeat.NONE}
icon={
repeat === PlayerRepeat.ONE ? (
<RiRepeatOneLine size={15} />
<RiRepeatOneLine size={20} />
) : (
<RiRepeat2Line size={15} />
<RiRepeat2Line size={20} />
)
}
tooltip={{
@ -286,17 +279,15 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
postProcess: 'sentenceCase',
})
}`,
openDelay: 500,
}}
variant="tertiary"
onClick={handleToggleRepeat}
/>
<PlayerButton
icon={<RiMenuAddFill size={15} />}
icon={<BsDice3 size={20} />}
tooltip={{
label: t('player.playRandom', { postProcess: 'sentenceCase' }),
openDelay: 500,
}}
variant="tertiary"
onClick={() =>