diff --git a/src/apps/experimental/components/library/ItemsView.tsx b/src/apps/experimental/components/library/ItemsView.tsx index a38537625d..3269dee2e0 100644 --- a/src/apps/experimental/components/library/ItemsView.tsx +++ b/src/apps/experimental/components/library/ItemsView.tsx @@ -30,6 +30,7 @@ import { useItem } from 'hooks/useItem'; import AlphabetPicker from './AlphabetPicker'; import FilterButton from './filter/FilterButton'; import NewCollectionButton from './NewCollectionButton'; +import NewPlaylistButton from './NewPlaylistButton'; import Pagination from './Pagination'; import PlayAllButton from './PlayAllButton'; import QueueButton from './QueueButton'; @@ -50,6 +51,7 @@ interface ItemsViewProps { isBtnSortEnabled?: boolean; isBtnFilterEnabled?: boolean; isBtnNewCollectionEnabled?: boolean; + isBtnNewPlaylistEnabled?: boolean; isBtnGridListEnabled?: boolean; isAlphabetPickerEnabled?: boolean; noItemsMessage: string; @@ -66,6 +68,7 @@ const ItemsView: FC = ({ isBtnSortEnabled = true, isBtnFilterEnabled = true, isBtnNewCollectionEnabled = false, + isBtnNewPlaylistEnabled = false, isBtnGridListEnabled = true, isAlphabetPickerEnabled = true, itemType, @@ -340,6 +343,7 @@ const ItemsView: FC = ({ {isBtnNewCollectionEnabled && } + {isBtnNewPlaylistEnabled && } )} diff --git a/src/apps/experimental/components/library/NewPlaylistButton.tsx b/src/apps/experimental/components/library/NewPlaylistButton.tsx new file mode 100644 index 0000000000..c23b97f922 --- /dev/null +++ b/src/apps/experimental/components/library/NewPlaylistButton.tsx @@ -0,0 +1,45 @@ +import React, { FC, useCallback } from 'react'; +import PlaylistAdd from '@mui/icons-material/PlaylistAdd'; +import Button from '@mui/material/Button'; + +import globalize from 'lib/globalize'; + +interface NewPlaylistButtonProps { + isTextVisible: boolean; +} + +const NewPlaylistButton: FC = ({ + isTextVisible +}) => { + const showPlaylistEditor = useCallback(() => { + import('components/playlisteditor/playlisteditor').then( + ({ default: PlaylistEditor }) => { + const serverId = window.ApiClient.serverId(); + const playlistEditor = new PlaylistEditor(); + playlistEditor.show({ + items: [], + serverId + }).catch(() => { + // closed playlist editor + }); + }).catch(err => { + console.error('[NewPlaylist] failed to load playlist editor', err); + }); + }, []); + + return ( + + ); +}; + +export default NewPlaylistButton; diff --git a/src/apps/experimental/components/library/PageTabContent.tsx b/src/apps/experimental/components/library/PageTabContent.tsx index 10a0d22960..ff1addf968 100644 --- a/src/apps/experimental/components/library/PageTabContent.tsx +++ b/src/apps/experimental/components/library/PageTabContent.tsx @@ -111,6 +111,7 @@ const PageTabContent: FC = ({ parentId, currentTab }) => { isBtnQueueEnabled={currentTab.isBtnQueueEnabled} isBtnShuffleEnabled={currentTab.isBtnShuffleEnabled} isBtnNewCollectionEnabled={currentTab.isBtnNewCollectionEnabled} + isBtnNewPlaylistEnabled={currentTab.isBtnNewPlaylistEnabled} isBtnFilterEnabled={currentTab.isBtnFilterEnabled} isBtnGridListEnabled={currentTab.isBtnGridListEnabled} isBtnSortEnabled={currentTab.isBtnSortEnabled} diff --git a/src/apps/experimental/components/library/SortButton.tsx b/src/apps/experimental/components/library/SortButton.tsx index 9842650270..f46d2ca5bf 100644 --- a/src/apps/experimental/components/library/SortButton.tsx +++ b/src/apps/experimental/components/library/SortButton.tsx @@ -95,6 +95,14 @@ const sortOptionsMapping: SortOptionsMapping = { { label: 'Runtime', value: ItemSortBy.Runtime }, { label: 'OptionRandom', value: ItemSortBy.Random } ], + [LibraryTab.Playlists]: [ + { label: 'Name', value: ItemSortBy.SortName }, + { label: 'OptionRandom', value: ItemSortBy.Random }, + { label: 'OptionDateAdded', value: ItemSortBy.DateCreated }, + { label: 'OptionDatePlaylistUpdated', value: ItemSortBy.DateLastContentAdded }, + { label: 'OptionReleaseDate', value: ItemSortBy.PremiereDate }, + { label: 'Runtime', value: ItemSortBy.Runtime } + ], [LibraryTab.PhotoAlbums]: photosOrPhotoAlbumsOptions, [LibraryTab.Photos]: photosOrPhotoAlbumsOptions, [LibraryTab.Videos]: [ diff --git a/src/apps/experimental/routes/music/index.tsx b/src/apps/experimental/routes/music/index.tsx index 566c63ea86..bbb09febf0 100644 --- a/src/apps/experimental/routes/music/index.tsx +++ b/src/apps/experimental/routes/music/index.tsx @@ -32,7 +32,7 @@ const playlistsTabContent: LibraryTabContent = { viewType: LibraryTab.Playlists, isBtnFilterEnabled: false, isBtnGridListEnabled: false, - isBtnSortEnabled: false, + isBtnNewPlaylistEnabled: true, isAlphabetPickerEnabled: false, itemType: [BaseItemKind.Playlist] }; diff --git a/src/strings/en-us.json b/src/strings/en-us.json index 11911ec399..17bad30506 100644 --- a/src/strings/en-us.json +++ b/src/strings/en-us.json @@ -1248,6 +1248,7 @@ "NewCollectionNameExample": "Example: Star Wars Collection", "NewEpisodes": "New episodes", "NewEpisodesOnly": "New episodes only", + "NewPlaylist": "New Playlist", "News": "News", "Next": "Next", "NextChapter": "Next chapter", @@ -1294,6 +1295,7 @@ "OptionDaily": "Daily", "OptionDateAdded": "Date Added", "OptionDateEpisodeAdded": "Date Episode Added", + "OptionDatePlaylistUpdated": "Date Playlist Updated", "OptionDateShowAdded": "Date Show Added", "OptionDateAddedFileTime": "Use file creation date", "OptionDateAddedImportTime": "Use date scanned into the library", diff --git a/src/types/libraryTabContent.ts b/src/types/libraryTabContent.ts index 547d025134..5494d750b7 100644 --- a/src/types/libraryTabContent.ts +++ b/src/types/libraryTabContent.ts @@ -23,6 +23,7 @@ export interface LibraryTabContent { isBtnSortEnabled?: boolean; isBtnFilterEnabled?: boolean; isBtnNewCollectionEnabled?: boolean; + isBtnNewPlaylistEnabled?: boolean; isBtnGridListEnabled?: boolean; isAlphabetPickerEnabled?: boolean; noItemsMessage?: string;