Merge pull request #7538 from theguymadmax/add-playlist-button

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<ItemsViewProps> = ({
     isBtnSortEnabled = true,
     isBtnFilterEnabled = true,
     isBtnNewCollectionEnabled = false,
+    isBtnNewPlaylistEnabled = false,
     isBtnGridListEnabled = true,
     isAlphabetPickerEnabled = true,
     itemType,
@@ -340,6 +343,7 @@ const ItemsView: FC<ItemsViewProps> = ({
                             </ButtonGroup>
 
                             {isBtnNewCollectionEnabled && <NewCollectionButton isTextVisible={isSmallScreen} />}
+                            {isBtnNewPlaylistEnabled && <NewPlaylistButton isTextVisible={isSmallScreen} />}
                         </>
                     )}
                 </Box>

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<NewPlaylistButtonProps> = ({
+    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 (
+        <Button
+            variant='contained'
+            startIcon={isTextVisible ? <PlaylistAdd /> : undefined}
+            onClick={showPlaylistEditor}
+        >
+            {isTextVisible ? (
+                globalize.translate('NewPlaylist')
+            ) : (
+                <PlaylistAdd />
+            )}
+        </Button>
+    );
+};
+
+export default NewPlaylistButton;

src/apps/experimental/components/library/PageTabContent.tsx

@@ -111,6 +111,7 @@ const PageTabContent: FC<PageTabContentProps> = ({ parentId, currentTab }) => {
             isBtnQueueEnabled={currentTab.isBtnQueueEnabled}
             isBtnShuffleEnabled={currentTab.isBtnShuffleEnabled}
             isBtnNewCollectionEnabled={currentTab.isBtnNewCollectionEnabled}
+            isBtnNewPlaylistEnabled={currentTab.isBtnNewPlaylistEnabled}
             isBtnFilterEnabled={currentTab.isBtnFilterEnabled}
             isBtnGridListEnabled={currentTab.isBtnGridListEnabled}
             isBtnSortEnabled={currentTab.isBtnSortEnabled}

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]: [

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]
 };

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",

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;