From 0a89cc6b8f86de04b03dd8f038da0376ea30fc97 Mon Sep 17 00:00:00 2001 From: Bill Thornton Date: Fri, 2 May 2025 17:21:40 -0400 Subject: [PATCH] Update library controls layout for mobile --- .../components/library/ItemsView.tsx | 116 +++++++++--------- .../library/NewCollectionButton.tsx | 16 ++- .../components/library/Pagination.tsx | 70 +++++++++-- .../components/library/PlayAllButton.tsx | 26 ++-- 4 files changed, 152 insertions(+), 76 deletions(-) diff --git a/src/apps/experimental/components/library/ItemsView.tsx b/src/apps/experimental/components/library/ItemsView.tsx index 4ac78a0d5..7c8834f87 100644 --- a/src/apps/experimental/components/library/ItemsView.tsx +++ b/src/apps/experimental/components/library/ItemsView.tsx @@ -4,6 +4,8 @@ import { ImageType } from '@jellyfin/sdk/lib/generated-client/models/image-type' import { ItemSortBy } from '@jellyfin/sdk/lib/generated-client/models/item-sort-by'; import Box from '@mui/material/Box'; import ButtonGroup from '@mui/material/ButtonGroup'; +import type { Theme } from '@mui/material/styles'; +import useMediaQuery from '@mui/material/useMediaQuery'; import classNames from 'classnames'; import React, { type FC, useCallback } from 'react'; @@ -73,6 +75,7 @@ const ItemsView: FC = ({ getSettingsKey(viewType, parentId), getDefaultLibraryViewSettings(viewType) ); + const isSmallScreen = useMediaQuery((t: Theme) => t.breakpoints.up('sm')); const { __legacyApiClient__ } = useApi(); const { @@ -230,10 +233,10 @@ const ItemsView: FC = ({ ); return ( - + = ({ }} > + + + {isBtnFilterEnabled && ( + + )} + + {isBtnSortEnabled && ( + + )} + + {isBtnGridListEnabled && ( + + )} + + + = ({ <> {isBtnPlayAllEnabled && ( = ({ items={items} viewType={viewType} hasFilters={hasFilters} + isTextVisible={isSmallScreen} libraryViewSettings={libraryViewSettings} /> )} @@ -282,7 +325,7 @@ const ItemsView: FC = ({ items={items} viewType={viewType} hasFilters={hasFilters} - isTextVisible={!isBtnPlayAllEnabled} + isTextVisible={isSmallScreen && !isBtnPlayAllEnabled} libraryViewSettings={libraryViewSettings} /> )} @@ -292,12 +335,12 @@ const ItemsView: FC = ({ item={item} items={items} hasFilters={hasFilters} - isTextVisible={!isBtnPlayAllEnabled && !isBtnShuffleEnabled} + isTextVisible={isSmallScreen && !isBtnPlayAllEnabled && !isBtnShuffleEnabled} /> )} - {isBtnNewCollectionEnabled && } + {isBtnNewCollectionEnabled && } )} @@ -310,51 +353,14 @@ const ItemsView: FC = ({ xs: '100%', md: 'auto' }, - flexGrow: 1 + flexGrow: 1, + marginTop: { + xs: 0.5, + sm: 0 + } }} > - - - {isBtnFilterEnabled && ( - - )} - - {isBtnSortEnabled && ( - - )} - - {isBtnGridListEnabled && ( - - )} - - - - {isPaginationEnabled && ( + {!isPending && isPaginationEnabled && ( = ({ )} - {isPaginationEnabled && ( + {!isPending && isPaginationEnabled && ( { +interface NewCollectionButtonProps { + isTextVisible: boolean +} + +const NewCollectionButton: FC = ({ + isTextVisible +}) => { const showCollectionEditor = useCallback(() => { import('components/collectionEditor/collectionEditor').then( ({ default: CollectionEditor }) => { @@ -24,10 +30,14 @@ const NewCollectionButton: FC = () => { return ( ); }; diff --git a/src/apps/experimental/components/library/Pagination.tsx b/src/apps/experimental/components/library/Pagination.tsx index 782271271..447357378 100644 --- a/src/apps/experimental/components/library/Pagination.tsx +++ b/src/apps/experimental/components/library/Pagination.tsx @@ -5,6 +5,9 @@ import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; import ButtonGroup from '@mui/material/ButtonGroup'; import Stack from '@mui/material/Stack'; +import type { Theme } from '@mui/material/styles'; +import Typography from '@mui/material/Typography'; +import useMediaQuery from '@mui/material/useMediaQuery'; import globalize from 'lib/globalize'; import * as userSettings from 'scripts/settings/userSettings'; @@ -23,6 +26,8 @@ const Pagination: FC = ({ totalRecordCount, isPlaceholderData }) => { + const isSmallScreen = useMediaQuery((t: Theme) => t.breakpoints.up('sm')); + const limit = userSettings.libraryPageSize(undefined); const startIndex = libraryViewSettings.StartIndex ?? 0; const recordsStart = totalRecordCount ? startIndex + 1 : 0; @@ -53,25 +58,56 @@ const Pagination: FC = ({ spacing={0.5} sx={{ alignItems: 'center', - marginLeft: 0.5 + flexGrow: { + xs: 1, + md: 0 + }, + marginLeft: { + xs: 0, + sm: 0.5 + } }} > - - {globalize.translate( - 'ListPaging', - recordsStart, - recordsEnd, - totalRecordCount - )} + {!isSmallScreen && ( + + )} + + + + {globalize.translate( + 'ListPaging', + recordsStart, + recordsEnd, + totalRecordCount + )} + - {showControls && ( + + {isSmallScreen && ( )} + + {!isSmallScreen && ( + + )} ); }; diff --git a/src/apps/experimental/components/library/PlayAllButton.tsx b/src/apps/experimental/components/library/PlayAllButton.tsx index 4e9a1a47d..d02fcea5e 100644 --- a/src/apps/experimental/components/library/PlayAllButton.tsx +++ b/src/apps/experimental/components/library/PlayAllButton.tsx @@ -10,14 +10,22 @@ import { LibraryTab } from 'types/libraryTab'; import type { ItemDto } from 'types/base/models/item-dto'; interface PlayAllButtonProps { - item: ItemDto | undefined; - items: ItemDto[]; - viewType: LibraryTab; - hasFilters: boolean; + item: ItemDto | undefined + items: ItemDto[] + viewType: LibraryTab + hasFilters: boolean + isTextVisible: boolean libraryViewSettings: LibraryViewSettings } -const PlayAllButton: FC = ({ item, items, viewType, hasFilters, libraryViewSettings }) => { +const PlayAllButton: FC = ({ + item, + items, + viewType, + hasFilters, + isTextVisible, + libraryViewSettings +}) => { const play = useCallback(() => { if (item && !hasFilters) { playbackManager.play({ @@ -49,10 +57,14 @@ const PlayAllButton: FC = ({ item, items, viewType, hasFilte return ( ); };