Disable play all and shuffle buttons instead of hiding

This commit is contained in:
Bill Thornton
2026-06-17 13:12:32 -04:00
parent 8ac3052679
commit 7dbc25ee47
3 changed files with 53 additions and 45 deletions
@@ -1,14 +1,15 @@
import { CollectionType } from '@jellyfin/sdk/lib/generated-client/models/collection-type';
import React, { FC, useCallback } from 'react';
import Button from '@mui/material/Button';
import PlayArrow from '@mui/icons-material/PlayArrow';
import { useLibrary } from 'apps/experimental/features/libraries/hooks/useLibrary';
import { playbackManager } from 'components/playback/playbackmanager';
import globalize from 'lib/globalize';
import { getFiltersQuery } from 'utils/items';
import { LibraryViewSettings } from 'types/library';
import { LibraryTab } from 'types/libraryTab';
import type { ItemDto } from 'types/base/models/item-dto';
import { CollectionType } from '@jellyfin/sdk/lib/generated-client/models/collection-type';
interface PlayAllButtonProps {
item: ItemDto | undefined
@@ -29,6 +30,10 @@ const PlayAllButton: FC<PlayAllButtonProps> = ({
isTextVisible,
libraryViewSettings
}) => {
const { itemsResult } = useLibrary();
const isPending = itemsResult?.isPending ?? true;
const totalRecordCount = itemsResult?.data?.TotalRecordCount ?? 0;
const play = useCallback(() => {
// For the Homevideos library Videos tab, pass items directly to playback since
// the playback manager hardcodes MediaTypes: 'Photo' for the Homevideos library
@@ -65,6 +70,7 @@ const PlayAllButton: FC<PlayAllButtonProps> = ({
title={globalize.translate('HeaderPlayAll')}
startIcon={isTextVisible ? <PlayArrow /> : undefined}
onClick={play}
disabled={isPending || totalRecordCount === 0}
>
{isTextVisible ? (
globalize.translate('HeaderPlayAll')
@@ -1,15 +1,16 @@
import { CollectionType } from '@jellyfin/sdk/lib/generated-client/models/collection-type';
import { ItemSortBy } from '@jellyfin/sdk/lib/generated-client/models/item-sort-by';
import React, { FC, useCallback } from 'react';
import Shuffle from '@mui/icons-material/Shuffle';
import Button from '@mui/material/Button';
import { useLibrary } from 'apps/experimental/features/libraries/hooks/useLibrary';
import { playbackManager } from 'components/playback/playbackmanager';
import globalize from 'lib/globalize';
import { getFiltersQuery } from 'utils/items';
import { LibraryViewSettings } from 'types/library';
import { LibraryTab } from 'types/libraryTab';
import type { ItemDto } from 'types/base/models/item-dto';
import { CollectionType } from '@jellyfin/sdk/lib/generated-client/models/collection-type';
interface ShuffleButtonProps {
item: ItemDto | undefined
@@ -30,6 +31,10 @@ const ShuffleButton: FC<ShuffleButtonProps> = ({
isTextVisible,
libraryViewSettings
}) => {
const { itemsResult } = useLibrary();
const isPending = itemsResult?.isPending ?? true;
const totalRecordCount = itemsResult?.data?.TotalRecordCount ?? 0;
const shuffle = useCallback(() => {
// For the Homevideos library Videos tab, pass items directly to playback since
// the playback manager hardcodes MediaTypes: 'Photo' for the Homevideos library
@@ -56,6 +61,7 @@ const ShuffleButton: FC<ShuffleButtonProps> = ({
title={globalize.translate('Shuffle')}
startIcon={isTextVisible ? <Shuffle /> : undefined}
onClick={shuffle}
disabled={isPending || totalRecordCount <= 1}
>
{isTextVisible ? (
globalize.translate('Shuffle')
@@ -113,52 +113,48 @@ const LibraryToolbar: FC = () => {
marginLeft: 1
}}
>
{!isPending && (
<>
<ButtonGroup
variant='contained'
>
{isBtnPlayAllEnabled && totalRecordCount > 0 && (
<PlayAllButton
item={item}
items={items}
viewType={viewType}
collectionType={collectionType}
hasFilters={hasFilters}
isTextVisible={isSmallScreen}
libraryViewSettings={libraryViewSettings}
/>
)}
<ButtonGroup
variant='contained'
>
{isBtnPlayAllEnabled && (
<PlayAllButton
item={item}
items={items}
viewType={viewType}
collectionType={collectionType}
hasFilters={hasFilters}
isTextVisible={isSmallScreen}
libraryViewSettings={libraryViewSettings}
/>
)}
{isBtnShuffleEnabled && totalRecordCount > 1 && (
<ShuffleButton
item={item}
items={items}
viewType={viewType}
collectionType={collectionType}
hasFilters={hasFilters}
isTextVisible={isSmallScreen && !isBtnPlayAllEnabled}
libraryViewSettings={libraryViewSettings}
/>
)}
{isBtnShuffleEnabled && (
<ShuffleButton
item={item}
items={items}
viewType={viewType}
collectionType={collectionType}
hasFilters={hasFilters}
isTextVisible={isSmallScreen && !isBtnPlayAllEnabled}
libraryViewSettings={libraryViewSettings}
/>
)}
{isBtnQueueEnabled && item && playbackManager.canQueue(item) && (
<QueueButton
item={item}
items={items}
hasFilters={hasFilters}
isTextVisible={isSmallScreen && !isBtnPlayAllEnabled && !isBtnShuffleEnabled}
/>
)}
</ButtonGroup>
{isBtnQueueEnabled && item && playbackManager.canQueue(item) && (
<QueueButton
item={item}
items={items}
hasFilters={hasFilters}
isTextVisible={isSmallScreen && !isBtnPlayAllEnabled && !isBtnShuffleEnabled}
/>
)}
</ButtonGroup>
{isBtnNewCollectionEnabled && canCreateCollections && (
<NewCollectionButton isTextVisible={isSmallScreen} queryKey={allItemsQueryKey} />
)}
{isBtnNewPlaylistEnabled && (
<NewPlaylistButton isTextVisible={isSmallScreen} queryKey={allItemsQueryKey} />
)}
</>
{isBtnNewCollectionEnabled && canCreateCollections && (
<NewCollectionButton isTextVisible={isSmallScreen} queryKey={allItemsQueryKey} />
)}
{isBtnNewPlaylistEnabled && (
<NewPlaylistButton isTextVisible={isSmallScreen} queryKey={allItemsQueryKey} />
)}
</Box>