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

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

* make everything customizable
This commit is contained in:
Benjamin
2026-03-04 23:23:14 -06:00
committed by GitHub
parent cad7fef454
commit 41f1f376bc
6 changed files with 162 additions and 8 deletions
+85
View File
@@ -74,6 +74,20 @@ const HomeItemSchema = z.enum([
'recentlyReleased',
]);
const PlayerItemSchema = z.enum([
'bit_depth',
'bit_rate',
'bpm',
'disc_number',
'sample_rate',
'track_number',
'codec',
'release_year',
'release_type',
'release_date',
'genres',
]);
const ArtistItemSchema = z.enum([
'biography',
'compilations',
@@ -461,6 +475,7 @@ export const GeneralSettingsSchema = z.object({
playButtonBehavior: z.nativeEnum(Play),
playerbarOpenDrawer: z.boolean(),
playerbarSlider: PlayerbarSliderSchema,
playerItems: z.array(SortableItemSchema(PlayerItemSchema)),
playlistTarget: PlaylistTargetSchema,
primaryShade: z.number().min(0).max(9),
resume: z.boolean(),
@@ -781,6 +796,20 @@ export enum PlayerbarSliderType {
WAVEFORM = 'waveform',
}
export enum PlayerItem {
BIT_DEPTH = 'bit_depth',
BIT_RATE = 'bit_rate',
BPM = 'bpm',
CODEC = 'codec',
DISC_NUMBER = 'disc_number',
GENRES = 'genres',
RELEASE_DATE = 'release_date',
RELEASE_TYPE = 'release_type',
RELEASE_YEAR = 'release_year',
SAMPLE_RATE = 'sample_rate',
TRACK_NUMBER = 'track_number',
}
export enum PlaylistTarget {
ALBUM = 'album',
TRACK = 'track',
@@ -840,6 +869,7 @@ export interface SettingsSlice extends z.infer<typeof SettingsStateSchema> {
setHomeItems: (item: SortableItem<HomeItem>[]) => void;
setList: (type: ItemListKey, data: DeepPartial<ItemListSettings>) => void;
setPlaybackFilters: (filters: PlayerFilter[]) => void;
setPlayerItems: (items: SortableItem<PlayerItem>[]) => void;
setPlaylistBehavior: (target: PlaylistTarget) => void;
setSettings: (data: DeepPartial<SettingsState>) => void;
setSidebarItems: (items: SidebarItemType[]) => void;
@@ -864,6 +894,53 @@ export type TranscodingConfig = z.infer<typeof TranscodingConfigSchema>;
export type VersionedSettings = SettingsState & { version: number };
export const playerItems: SortableItem<PlayerItem>[] = [
{
disabled: true,
id: PlayerItem.BIT_DEPTH,
},
{
disabled: true,
id: PlayerItem.BIT_RATE,
},
{
disabled: true,
id: PlayerItem.BPM,
},
{
disabled: false,
id: PlayerItem.CODEC,
},
{
disabled: true,
id: PlayerItem.DISC_NUMBER,
},
{
disabled: true,
id: PlayerItem.GENRES,
},
{
disabled: true,
id: PlayerItem.RELEASE_DATE,
},
{
disabled: true,
id: PlayerItem.RELEASE_TYPE,
},
{
disabled: false,
id: PlayerItem.RELEASE_YEAR,
},
{
disabled: true,
id: PlayerItem.SAMPLE_RATE,
},
{
disabled: true,
id: PlayerItem.TRACK_NUMBER,
},
];
export const sidebarItems: SidebarItemType[] = [
{
disabled: true,
@@ -1052,6 +1129,7 @@ const initialState: SettingsState = {
barWidth: 2,
type: PlayerbarSliderType.SLIDER,
},
playerItems,
playlistTarget: PlaylistTarget.TRACK,
primaryShade: 6,
resume: true,
@@ -1901,6 +1979,11 @@ export const useSettingsStore = createWithEqualityFn<SettingsSlice>()(
state.playback.filters = filters;
});
},
setPlayerItems: (items: SortableItem<PlayerItem>[]) => {
set((state) => {
state.general.playerItems = items;
});
},
setPlaylistBehavior: (target: PlaylistTarget) => {
set((state) => {
state.general.playlistTarget = target;
@@ -2412,6 +2495,8 @@ export const useSidebarPlaylistListFilterRegex = () =>
export const useSidebarItems = () =>
useSettingsStore((state) => state.general.sidebarItems, shallow);
export const usePlayerItems = () => useSettingsStore((state) => state.general.playerItems, shallow);
export const useSidebarCollapsedNavigation = () =>
useSettingsStore((state) => state.general.sidebarCollapsedNavigation, shallow);