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

58
src/remote/components/remote-container.tsx
View file

@ -1,4 +1,4 @@
import { Group, Image, Rating, Text, Title, Tooltip } from '@mantine/core';
import { Image, Title } from '@mantine/core';
import formatDuration from 'format-duration';
import debounce from 'lodash/debounce';
import { useCallback } from 'react';
@ -17,6 +17,10 @@ import {
import { RemoteButton } from '/@/remote/components/buttons/remote-button';
import { WrapperSlider } from '/@/remote/components/wrapped-slider';
import { useInfo, useSend, useShowImage } from '/@/remote/store';
import { Group } from '/@/shared/components/group/group';
import { Rating } from '/@/shared/components/rating/rating';
import { Text } from '/@/shared/components/text/text';
import { Tooltip } from '/@/shared/components/tooltip/tooltip';
import { PlayerRepeat, PlayerStatus } from '/@/shared/types/types';
export const RemoteContainer = () => {
@ -44,7 +48,7 @@ export const RemoteContainer = () => {
<Title order={2}>Album: {song.album}</Title>
<Title order={2}>Artist: {song.artistName}</Title>
</Group>
<Group position="apart">
<Group justify="space-between">
<Title order={3}>Duration: {formatDuration(song.duration)}</Title>
{song.releaseDate && (
<Title order={3}>
@ -56,13 +60,15 @@ export const RemoteContainer = () => {
</>
)}
<Group
gap={0}
grow
spacing={0}
>
<RemoteButton
disabled={!id}
onClick={() => send({ event: 'previous' })}
tooltip="Previous track"
tooltip={{
label: 'Previous track',
}}
variant="default"
>
<RiSkipBackFill size={25} />
@ -76,7 +82,9 @@ export const RemoteContainer = () => {
send({ event: 'play' });
}
}}
tooltip={id && status === PlayerStatus.PLAYING ? 'Pause' : 'Play'}
tooltip={{
label: id && status === PlayerStatus.PLAYING ? 'Pause' : 'Play',
}}
variant="default"
>
{id && status === PlayerStatus.PLAYING ? (
@ -88,34 +96,40 @@ export const RemoteContainer = () => {
<RemoteButton
disabled={!id}
onClick={() => send({ event: 'next' })}
tooltip="Next track"
tooltip={{
label: 'Next track',
}}
variant="default"
>
<RiSkipForwardFill size={25} />
</RemoteButton>
</Group>
<Group
gap={0}
grow
spacing={0}
>
<RemoteButton
$active={shuffle || false}
isActive={shuffle || false}
onClick={() => send({ event: 'shuffle' })}
tooltip={shuffle ? 'Shuffle tracks' : 'Shuffle disabled'}
tooltip={{
label: shuffle ? 'Shuffle tracks' : 'Shuffle disabled',
}}
variant="default"
>
<RiShuffleFill size={25} />
</RemoteButton>
<RemoteButton
$active={repeat !== undefined && repeat !== PlayerRepeat.NONE}
isActive={repeat !== undefined && repeat !== PlayerRepeat.NONE}
onClick={() => send({ event: 'repeat' })}
tooltip={`Repeat ${
repeat === PlayerRepeat.ONE
? 'One'
: repeat === PlayerRepeat.ALL
? 'all'
: 'none'
}`}
tooltip={{
label: `Repeat ${
repeat === PlayerRepeat.ONE
? 'One'
: repeat === PlayerRepeat.ALL
? 'all'
: 'none'
}`,
}}
variant="default"
>
{repeat === undefined || repeat === PlayerRepeat.ONE ? (
@ -125,14 +139,16 @@ export const RemoteContainer = () => {
)}
</RemoteButton>
<RemoteButton
$active={song?.userFavorite}
disabled={!id}
isActive={song?.userFavorite}
onClick={() => {
if (!id) return;
send({ event: 'favorite', favorite: !song.userFavorite, id });
}}
tooltip={song?.userFavorite ? 'Unfavorite' : 'Favorite'}
tooltip={{
label: song?.userFavorite ? 'Unfavorite' : 'Favorite',
}}
variant="default"
>
<RiHeartLine size={25} />
@ -146,7 +162,7 @@ export const RemoteContainer = () => {
<Rating
onChange={debouncedSetRating}
onDoubleClick={() => debouncedSetRating(0)}
sx={{ margin: 'auto' }}
style={{ margin: 'auto' }}
value={song.userRating ?? 0}
/>
</Tooltip>
@ -169,8 +185,8 @@ export const RemoteContainer = () => {
onChangeEnd={(e) => send({ event: 'volume', volume: e })}
rightLabel={
<Text
fw={600}
size="xs"
weight={600}
>
{volume ?? 0}
</Text>