add basic mobile responsive layout

2026-06-15 16:04:19 +02:00 · 2025-11-19 19:23:44 -08:00
parent 69beca764e
commit c6a3b6381c
26 changed files with 1930 additions and 40 deletions
@@ -0,0 +1,83 @@
+import clsx from 'clsx';
+import { memo, MouseEvent } from 'react';
+
+import styles from './mobile-fullscreen-player.module.css';
+
+import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
+import { Group } from '/@/shared/components/group/group';
+import { Rating } from '/@/shared/components/rating/rating';
+import { Separator } from '/@/shared/components/separator/separator';
+import { TextTitle } from '/@/shared/components/text-title/text-title';
+import { Text } from '/@/shared/components/text/text';
+import { PlaybackSelectors } from '/@/shared/constants/playback-selectors';
+import { QueueSong } from '/@/shared/types/domain-types';
+
+interface MobileFullscreenPlayerMetadataProps {
+    currentSong?: QueueSong;
+    onToggleFavorite: (e: MouseEvent<HTMLButtonElement>) => void;
+    onUpdateRating: (rating: number) => void;
+    showRating?: boolean;
+}
+
+export const MobileFullscreenPlayerMetadata = memo(
+    ({
+        currentSong,
+        onToggleFavorite,
+        onUpdateRating,
+        showRating,
+    }: MobileFullscreenPlayerMetadataProps) => {
+        const title = currentSong?.name;
+        const artists = currentSong?.artists;
+        const album = currentSong?.album;
+        const container = currentSong?.container;
+        const year = currentSong?.releaseYear;
+        const isFavorite = currentSong?.userFavorite;
+        const rating = currentSong?.userRating;
+
+        const hasMetadata = container || year;
+
+        return (
+            <div className={styles.metadataContainer}>
+                <div className={styles.titleRow}>
+                    <TextTitle className={PlaybackSelectors.songTitle} fw={700} order={2}>
+                        {title || '—'}
+                    </TextTitle>
+                </div>
+                <Text className={clsx(PlaybackSelectors.songArtist)} size="md" truncate>
+                    {artists?.map((a) => a.name).join(', ') || '—'}
+                </Text>
+                <Text className={clsx(PlaybackSelectors.songAlbum)} size="md" truncate>
+                    {album || '—'}
+                </Text>
+                {hasMetadata && (
+                    <Group align="center" className={styles.metadataRow} gap="xs" wrap="nowrap">
+                        {container && <Text size="xs">{container}</Text>}
+                        {year && (
+                            <>
+                                {container && <Separator />}
+                                <Text size="xs">{year}</Text>
+                            </>
+                        )}
+                    </Group>
+                )}
+                <Group align="center" className={styles.actionsRow} gap="xs">
+                    <ActionIcon
+                        icon="favorite"
+                        iconProps={{
+                            fill: isFavorite ? 'primary' : undefined,
+                            size: 'md',
+                        }}
+                        onClick={onToggleFavorite}
+                        size="sm"
+                        variant="subtle"
+                    />
+                    {showRating && (
+                        <Rating onChange={onUpdateRating} size="sm" value={rating || 0} />
+                    )}
+                </Group>
+            </div>
+        );
+    },
+);
+
+MobileFullscreenPlayerMetadata.displayName = 'MobileFullscreenPlayerMetadata';