antebudimir/feishin
1
0
Fork 0
mirror of https://github.com/antebudimir/feishin.git synced 2026-01-01 18:33:33 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Migrate to Mantine v8 and Design Changes (#961)

Browse source 
* mantine v8 migration

* various design changes and improvements
This commit is contained in:
Jeff 2025-06-24 00:04:36 -07:00 • committed by GitHub
parent bea55d48a8
commit c1330d92b2
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
473 changed files with 12469 additions and 11607 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,20 +1,8 @@
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 {
RiHeartFill,
RiHeartLine,
RiVolumeDownFill,
RiVolumeMuteFill,
RiVolumeUpFill,
} from 'react-icons/ri';
import { DropdownMenu, Rating } from '/@/renderer/components';
import { Slider } from '/@/renderer/components/slider';
import { PlayerButton } from '/@/renderer/features/player/components/player-button';
import { PlayerbarSlider } from '/@/renderer/features/player/components/playerbar-slider';
import { useRightControls } from '/@/renderer/features/player/hooks/use-right-controls';
import { useCreateFavorite, useDeleteFavorite, useSetRating } from '/@/renderer/features/shared';
@ -30,6 +18,12 @@ import {
useSpeed,
useVolume,
} from '/@/renderer/store';
import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
import { DropdownMenu } from '/@/shared/components/dropdown-menu/dropdown-menu';
import { Flex } from '/@/shared/components/flex/flex';
import { Group } from '/@/shared/components/group/group';
import { Rating } from '/@/shared/components/rating/rating';
import { Slider } from '/@/shared/components/slider/slider';
import { LibraryItem, QueueSong, ServerType, Song } from '/@/shared/types/domain-types';
const ipc = isElectron() ? window.api.ipc : null;
@ -210,15 +204,15 @@ export const RightControls = () => {
{showRating && (
<Rating
onChange={handleUpdateRating}
size="sm"
size="xs"
value={currentSong?.userRating || 0}
/>
)}
</Group>
<Group
align="center"
noWrap
spacing="xs"
gap="xs"
wrap="nowrap"
>
<DropdownMenu
arrowOffset={12}
@ -228,13 +222,17 @@ export const RightControls = () => {
withArrow
>
<DropdownMenu.Target>
<PlayerButton
icon={<>{speed} x</>}
<ActionIcon
icon="mediaSpeed"
iconProps={{
size: 'lg',
}}
size="sm"
tooltip={{
label: t('player.playbackSpeed', { postProcess: 'sentenceCase' }),
openDelay: 500,
openDelay: 0,
}}
variant="secondary"
variant="transparent"
/>
</DropdownMenu.Target>
<DropdownMenu.Dropdown>
@ -264,78 +262,61 @@ export const RightControls = () => {
/>
</DropdownMenu.Dropdown>
</DropdownMenu>
<PlayerButton
icon={
currentSong?.userFavorite ? (
<RiHeartFill
color="var(--primary-color)"
size="1.1rem"
/>
) : (
<RiHeartLine size="1.1rem" />
)
}
onClick={() => handleToggleFavorite(currentSong)}
sx={{
svg: {
fill: !currentSong?.userFavorite
? undefined
: 'var(--primary-color) !important',
},
<ActionIcon
icon="favorite"
iconProps={{
fill: currentSong?.userFavorite ? 'primary' : undefined,
size: 'lg',
}}
onClick={() => handleToggleFavorite(currentSong)}
size="sm"
tooltip={{
label: currentSong?.userFavorite
? t('player.unfavorite', { postProcess: 'titleCase' })
: t('player.favorite', { postProcess: 'titleCase' }),
openDelay: 500,
openDelay: 0,
}}
variant="secondary"
variant="transparent"
/>
<ActionIcon
icon={isQueueExpanded ? 'panelRightClose' : 'panelRightOpen'}
iconProps={{
size: 'lg',
}}
onClick={handleToggleQueue}
size="sm"
tooltip={{
label: t('player.viewQueue', { postProcess: 'titleCase' }),
openDelay: 0,
}}
variant="transparent"
/>
<ActionIcon
icon={muted ? 'volumeMute' : volume > 50 ? 'volumeMax' : 'volumeNormal'}
iconProps={{
color: muted ? 'muted' : undefined,
size: 'xl',
}}
onClick={handleMute}
onWheel={handleVolumeWheel}
size="sm"
tooltip={{
label: muted ? t('player.muted', { postProcess: 'titleCase' }) : volume,
openDelay: 0,
}}
variant="transparent"
/>
{!isMinWidth ? (
<PlayerButton
icon={<HiOutlineQueueList size="1.1rem" />}
onClick={handleToggleQueue}
tooltip={{
label: t('player.viewQueue', { postProcess: 'titleCase' }),
openDelay: 500,
}}
variant="secondary"
<PlayerbarSlider
max={100}
min={0}
onChange={handleVolumeSlider}
onWheel={handleVolumeWheel}
size={6}
value={volume}
w={volumeWidth}
/>
) : null}
<Group
noWrap
spacing="xs"
>
<PlayerButton
icon={
muted ? (
<RiVolumeMuteFill size="1.2rem" />
) : volume > 50 ? (
<RiVolumeUpFill size="1.2rem" />
) : (
<RiVolumeDownFill size="1.2rem" />
)
}
onClick={handleMute}
onWheel={handleVolumeWheel}
tooltip={{
label: muted ? t('player.muted', { postProcess: 'titleCase' }) : volume,
openDelay: 500,
}}
variant="secondary"
/>
{!isMinWidth ? (
<PlayerbarSlider
max={100}
min={0}
onChange={handleVolumeSlider}
onWheel={handleVolumeWheel}
size={6}
value={volume}
w={volumeWidth}
/>
) : null}
</Group>
</Group>
<Group h="calc(100% / 3)" />
</Flex>