feat: customizable item layout on fullscreen player (#1769)

* change container display to release type, readd badge styling to improve contrast

* make everything customizable

src/renderer/features/player/components/full-screen-player-image.tsx

@@ -1,4 +1,5 @@
 import clsx from 'clsx';
+import { t } from 'i18next';
 import { AnimatePresence, HTMLMotionProps, motion, Variants } from 'motion/react';
 import { Fragment, useEffect, useRef } from 'react';
 import { generatePath, Link } from 'react-router';
@@ -101,7 +102,7 @@ export const FullScreenPlayerImage = () => {
 
     const currentSong = usePlayerSong();
     const { nextSong } = usePlayerData();
-    const { blurExplicitImages } = useGeneralSettings();
+    const { blurExplicitImages, playerItems } = useGeneralSettings();
 
     const isPlayingRadio = isRadioActive && isRadioPlaying;
 
@@ -171,6 +172,38 @@ export const FullScreenPlayerImage = () => {
         nextSong?.explicitStatus,
     ]);
 
+    const builtDataItems = {
+        bit_depth: currentSong?.bitDepth && <Badge>{currentSong?.bitDepth} bit</Badge>,
+        bit_rate: currentSong?.bitRate && <Badge>{currentSong?.bitRate} kbps</Badge>,
+        bpm: currentSong?.bpm && (
+            <Badge>
+                {currentSong?.bpm} {t('common.bpm')}
+            </Badge>
+        ),
+        codec: currentSong?.container && <Badge>{currentSong?.container}</Badge>,
+        disc_number: currentSong?.discNumber && (
+            <Badge>
+                {t('common.disc')} {currentSong?.discNumber}
+            </Badge>
+        ),
+        genres:
+            currentSong?.genres &&
+            currentSong?.genres
+                .slice(0, 2)
+                .map((genre) => <Badge key={genre.id}>{genre.name}</Badge>),
+        release_date: currentSong?.releaseDate && <Badge>{currentSong?.releaseDate}</Badge>,
+        release_type: currentSong?.tags?.releasetype && (
+            <Badge>{currentSong?.tags?.releasetype[0]}</Badge>
+        ),
+        release_year: currentSong?.releaseYear && <Badge>{currentSong?.releaseYear}</Badge>,
+        sample_rate: currentSong?.sampleRate && <Badge>{currentSong?.sampleRate / 1000} kHz</Badge>,
+        track_number: currentSong?.trackNumber && (
+            <Badge>
+                {t('common.trackNumber')} {currentSong?.trackNumber}
+            </Badge>
+        ),
+    };
+
     return (
         <Flex
             align="center"
@@ -283,12 +316,7 @@ export const FullScreenPlayerImage = () => {
                 </Text>
                 {!isPlayingRadio && (
                     <Group justify="center" mt="sm">
-                        {currentSong?.container && (
-                            <Badge variant="transparent">{currentSong?.container}</Badge>
-                        )}
-                        {currentSong?.releaseYear && (
-                            <Badge variant="transparent">{currentSong?.releaseYear}</Badge>
-                        )}
+                        {playerItems.map((i) => !i.disabled && builtDataItems[i.id])}
                     </Group>
                 )}
             </Stack>

src/renderer/features/player/components/full-screen-player.tsx

@@ -555,7 +555,6 @@ const Controls = () => {
                             />
                         </Option.Control>
                     </Option>
-                    <Divider my="sm" />
                 </Popover.Dropdown>
             </Popover>
             <ListConfigMenu

src/renderer/features/settings/components/general/application-settings.tsx

@@ -11,6 +11,7 @@ import {
     ArtistReleaseTypeSettings,
     ArtistSettings,
 } from '/@/renderer/features/settings/components/general/artist-settings';
+import { FullscreenPlayerSettings } from '/@/renderer/features/settings/components/general/fullscreen-player-settings';
 import { HomeSettings } from '/@/renderer/features/settings/components/general/home-settings';
 import { PathSettings } from '/@/renderer/features/settings/components/general/path-settings';
 import {
@@ -697,6 +698,7 @@ export const ApplicationSettings = memo(() => {
                     <HomeSettings />
                     <ArtistSettings />
                     <ArtistReleaseTypeSettings />
+                    <FullscreenPlayerSettings />
                     <PathSettings />
                 </>
             }

src/renderer/features/settings/components/general/fullscreen-player-settings.tsx

@@ -0,0 +1,38 @@
+import { memo } from 'react';
+
+import { DraggableItems } from '/@/renderer/features/settings/components/general/draggable-items';
+import {
+    PlayerItem,
+    SortableItem,
+    useGeneralSettings,
+    useSettingsStoreActions,
+} from '/@/renderer/store';
+
+const PLAYER_ITEMS: Array<[PlayerItem, string]> = [
+    [PlayerItem.BIT_DEPTH, 'common.bitDepth'],
+    [PlayerItem.BIT_RATE, 'common.bitrate'],
+    [PlayerItem.BPM, 'common.bpm'],
+    [PlayerItem.CODEC, 'common.codec'],
+    [PlayerItem.DISC_NUMBER, 'table.config.label.discNumber'],
+    [PlayerItem.GENRES, 'entity.genre_other'],
+    [PlayerItem.RELEASE_DATE, 'filter.releaseDate'],
+    [PlayerItem.RELEASE_TYPE, 'common.releaseType'],
+    [PlayerItem.RELEASE_YEAR, 'filter.releaseYear'],
+    [PlayerItem.SAMPLE_RATE, 'common.sampleRate'],
+    [PlayerItem.TRACK_NUMBER, 'table.config.label.trackNumber'],
+];
+
+export const FullscreenPlayerSettings = memo(() => {
+    const { playerItems } = useGeneralSettings();
+    const { setPlayerItems } = useSettingsStoreActions();
+
+    return (
+        <DraggableItems
+            description="setting.playerItemConfiguration"
+            itemLabels={PLAYER_ITEMS}
+            items={playerItems as SortableItem<PlayerItem>[]}
+            setItems={setPlayerItems}
+            title="setting.playerItemConfiguration"
+        />
+    );
+});