Add music view

src/apps/experimental/routes/asyncRoutes/user.ts

@@ -5,5 +5,6 @@ export const ASYNC_USER_ROUTES: AsyncRoute[] = [
     { path: 'userprofile.html', page: 'user/userprofile' },
     { path: 'home.html', page: 'home', type: AsyncRouteType.Experimental },
     { path: 'movies.html', page: 'movies', type: AsyncRouteType.Experimental },
-    { path: 'tv.html', page: 'shows', type: AsyncRouteType.Experimental }
+    { path: 'tv.html', page: 'shows', type: AsyncRouteType.Experimental },
+    { path: 'music.html', page: 'music', type: AsyncRouteType.Experimental }
 ];

src/apps/experimental/routes/legacyRoutes/user.ts

@@ -19,12 +19,6 @@ export const LEGACY_USER_ROUTES: LegacyRoute[] = [
             controller: 'livetv/livetvsuggested',
             view: 'livetv.html'
         }
-    }, {
-        path: 'music.html',
-        pageProps: {
-            controller: 'music/musicrecommended',
-            view: 'music/music.html'
-        }
     }, {
         path: 'mypreferencesmenu.html',
         pageProps: {

src/apps/experimental/routes/music/AlbumArtistsView.tsx

@@ -0,0 +1,21 @@
+import React, { FC } from 'react';
+
+import ItemsView from '../../components/library/ItemsView';
+import { CollectionType } from 'types/collectionType';
+import { LibraryViewProps } from 'types/library';
+import { LibraryTab } from 'types/libraryTab';
+
+const AlbumArtistsView: FC<LibraryViewProps> = ({ parentId }) => {
+    return (
+        <ItemsView
+            viewType={LibraryTab.AlbumArtists}
+            parentId={parentId}
+            collectionType={CollectionType.Music}
+            isBtnSortEnabled={false}
+            itemType={[]}
+            noItemsMessage='MessageNoItemsAvailable'
+        />
+    );
+};
+
+export default AlbumArtistsView;

src/apps/experimental/routes/music/AlbumsView.tsx

@@ -0,0 +1,23 @@
+import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client';
+import React, { FC } from 'react';
+
+import ItemsView from '../../components/library/ItemsView';
+import { LibraryTab } from 'types/libraryTab';
+import { LibraryViewProps } from 'types/library';
+import { CollectionType } from 'types/collectionType';
+
+const AlbumsView: FC<LibraryViewProps> = ({ parentId }) => {
+    return (
+        <ItemsView
+            viewType={LibraryTab.Albums}
+            parentId={parentId}
+            collectionType={CollectionType.Music}
+            isBtnPlayAllEnabled={true}
+            isBtnShuffleEnabled={true}
+            itemType={[BaseItemKind.MusicAlbum]}
+            noItemsMessage='MessageNoItemsAvailable'
+        />
+    );
+};
+
+export default AlbumsView;

src/apps/experimental/routes/music/ArtistsView.tsx

@@ -0,0 +1,21 @@
+import React, { FC } from 'react';
+
+import ItemsView from '../../components/library/ItemsView';
+import { CollectionType } from 'types/collectionType';
+import { LibraryViewProps } from 'types/library';
+import { LibraryTab } from 'types/libraryTab';
+
+const ArtistsView: FC<LibraryViewProps> = ({ parentId }) => {
+    return (
+        <ItemsView
+            viewType={LibraryTab.Artists}
+            parentId={parentId}
+            collectionType={CollectionType.Music}
+            isBtnSortEnabled={false}
+            itemType={[]}
+            noItemsMessage='MessageNoItemsAvailable'
+        />
+    );
+};
+
+export default ArtistsView;

src/apps/experimental/routes/music/GenresView.tsx

@@ -0,0 +1,18 @@
+import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-item-kind';
+import React, { FC } from 'react';
+
+import GenresItemsContainer from '../../components/library/GenresItemsContainer';
+import { LibraryViewProps } from 'types/library';
+import { CollectionType } from 'types/collectionType';
+
+const GenresView: FC<LibraryViewProps> = ({ parentId }) => {
+    return (
+        <GenresItemsContainer
+            parentId={parentId}
+            collectionType={CollectionType.Music}
+            itemType={BaseItemKind.MusicAlbum}
+        />
+    );
+};
+
+export default GenresView;

src/apps/experimental/routes/music/PlaylistsView.tsx

@@ -0,0 +1,23 @@
+import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client';
+import React, { FC } from 'react';
+
+import ItemsView from '../../components/library/ItemsView';
+import { LibraryViewProps } from 'types/library';
+import { LibraryTab } from 'types/libraryTab';
+
+const PlaylistsView: FC<LibraryViewProps> = ({ parentId }) => {
+    return (
+        <ItemsView
+            viewType={LibraryTab.Playlists}
+            parentId={parentId}
+            isBtnFilterEnabled={false}
+            isBtnGridListEnabled={false}
+            isBtnSortEnabled={false}
+            isAlphabetPickerEnabled={false}
+            itemType={[BaseItemKind.Playlist]}
+            noItemsMessage='MessageNoItemsAvailable'
+        />
+    );
+};
+
+export default PlaylistsView;

src/apps/experimental/routes/music/SongsView.tsx

@@ -0,0 +1,22 @@
+import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client';
+import React, { FC } from 'react';
+
+import ItemsView from '../../components/library/ItemsView';
+import { LibraryViewProps } from 'types/library';
+import { LibraryTab } from 'types/libraryTab';
+
+const SongsView: FC<LibraryViewProps> = ({ parentId }) => {
+    return (
+        <ItemsView
+            viewType={LibraryTab.Songs}
+            parentId={parentId}
+            //collectionType={CollectionType.Music}
+            //isBtnGridListEnabled={false}
+            isAlphabetPickerEnabled={false}
+            itemType={[BaseItemKind.Audio]}
+            noItemsMessage='MessageNoItemsAvailable'
+        />
+    );
+};
+
+export default SongsView;

src/apps/experimental/routes/music/SuggestionsView.tsx

@@ -0,0 +1,31 @@
+import React, { FC } from 'react';
+
+import SuggestionsItemsContainer from '../../components/library/SuggestionsItemsContainer';
+import FavoriteItemsContainer from '../../components/library/FavoriteItemsContainer';
+import { LibraryViewProps } from 'types/library';
+import { SectionsView } from 'types/suggestionsSections';
+
+const SuggestionsView: FC<LibraryViewProps> = ({ parentId }) => {
+    return (
+        <>
+            <SuggestionsItemsContainer
+                parentId={parentId}
+                sectionsView={[
+                    SectionsView.LatestMusic,
+                    SectionsView.FrequentlyPlayedMusic,
+                    SectionsView.RecentlyPlayedMusic
+                ]}
+            />
+            <FavoriteItemsContainer
+                parentId={parentId}
+                sectionsView={[
+                    SectionsView.FavoriteArtists,
+                    SectionsView.FavoriteAlbums,
+                    SectionsView.FavoriteSongs
+                ]}
+            />
+        </>
+    );
+};
+
+export default SuggestionsView;

src/apps/experimental/routes/music/index.tsx

@@ -0,0 +1,72 @@
+import React, { FC } from 'react';
+import { useLocation, useSearchParams } from 'react-router-dom';
+
+import { getDefaultTabIndex } from '../../components/tabs/tabRoutes';
+import Page from 'components/Page';
+import GenresView from './GenresView';
+import SuggestionsView from './SuggestionsView';
+import AlbumArtistsView from './AlbumArtistsView';
+import ArtistsView from './ArtistsView';
+import PlaylistsView from './PlaylistsView';
+import SongsView from './SongsView';
+import AlbumsView from './AlbumsView';
+
+const Shows: FC = () => {
+    const location = useLocation();
+    const [ searchParams ] = useSearchParams();
+    const searchParamsParentId = searchParams.get('topParentId');
+    const searchParamsTab = searchParams.get('tab');
+    const currentTabIndex = searchParamsTab !== null ? parseInt(searchParamsTab, 10) :
+        getDefaultTabIndex(location.pathname, searchParamsParentId);
+
+    const getTabComponent = (index: number) => {
+        if (index == null) {
+            throw new Error('index cannot be null');
+        }
+
+        let component;
+        switch (index) {
+            case 1:
+                component = <SuggestionsView parentId={searchParamsParentId} />;
+                break;
+
+            case 2:
+                component = <AlbumArtistsView parentId={searchParamsParentId} />;
+                break;
+
+            case 3:
+                component = <ArtistsView parentId={searchParamsParentId} />;
+                break;
+
+            case 4:
+                component = <PlaylistsView parentId={searchParamsParentId} />;
+                break;
+
+            case 5:
+                component = <SongsView parentId={searchParamsParentId} />;
+                break;
+
+            case 6:
+                component = <GenresView parentId={searchParamsParentId} />;
+                break;
+
+            default:
+                component = <AlbumsView parentId={searchParamsParentId} />;
+        }
+
+        return component;
+    };
+
+    return (
+        <Page
+            id='musicPage'
+            className='mainAnimatedPage libraryPage backdropPage collectionEditorPage pageWithAbsoluteTabs withTabs'
+            backDropType='musicartist'
+        >
+            {getTabComponent(currentTabIndex)}
+
+        </Page>
+    );
+};
+
+export default Shows;