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