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/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"
+        />
+    );
+});