Add music view

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

@@ -6,5 +6,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/index.tsx

@@ -0,0 +1,94 @@
+import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-item-kind';
+import React, { FC } from 'react';
+import useCurrentTab from 'hooks/useCurrentTab';
+import Page from 'components/Page';
+import PageTabContent from '../../components/library/PageTabContent';
+import { LibraryTab } from 'types/libraryTab';
+import { CollectionType } from 'types/collectionType';
+import { LibraryTabContent, LibraryTabMapping } from 'types/libraryTabContent';
+import { SectionsView } from 'types/suggestionsSections';
+
+const albumArtistsTabContent: LibraryTabContent = {
+    viewType: LibraryTab.AlbumArtists,
+    collectionType: CollectionType.Music,
+    isBtnSortEnabled: false
+};
+
+const albumsTabContent: LibraryTabContent = {
+    viewType: LibraryTab.Albums,
+    collectionType: CollectionType.Music,
+    isBtnPlayAllEnabled: true,
+    isBtnShuffleEnabled: true,
+    itemType: [BaseItemKind.MusicAlbum]
+};
+
+const artistsTabContent: LibraryTabContent = {
+    viewType: LibraryTab.Artists,
+    collectionType: CollectionType.Music,
+    isBtnSortEnabled: false
+};
+
+const playlistsTabContent: LibraryTabContent = {
+    viewType: LibraryTab.Playlists,
+    isBtnFilterEnabled: false,
+    isBtnGridListEnabled: false,
+    isBtnSortEnabled: false,
+    isAlphabetPickerEnabled: false,
+    itemType: [BaseItemKind.Playlist]
+};
+
+const songsTabContent: LibraryTabContent = {
+    viewType: LibraryTab.Songs,
+    isBtnGridListEnabled: false,
+    isAlphabetPickerEnabled: false,
+    itemType: [BaseItemKind.Audio]
+};
+
+const suggestionsTabContent: LibraryTabContent = {
+    viewType: LibraryTab.Suggestions,
+    collectionType: CollectionType.Music,
+    sectionsType: {
+        suggestionSectionsView: [
+            SectionsView.LatestMusic,
+            SectionsView.FrequentlyPlayedMusic,
+            SectionsView.RecentlyPlayedMusic
+        ]
+    }
+};
+
+const genresTabContent: LibraryTabContent = {
+    viewType: LibraryTab.Genres,
+    collectionType: CollectionType.Music,
+    itemType: [BaseItemKind.MusicAlbum]
+};
+
+const musicTabMapping: LibraryTabMapping = {
+    0: albumsTabContent,
+    1: suggestionsTabContent,
+    2: albumArtistsTabContent,
+    3: artistsTabContent,
+    4: playlistsTabContent,
+    5: songsTabContent,
+    6: genresTabContent
+};
+
+const Music: FC = () => {
+    const { searchParamsParentId, currentTabIndex } = useCurrentTab();
+    const currentTab = musicTabMapping[currentTabIndex];
+
+    return (
+        <Page
+            id='musicPage'
+            className='mainAnimatedPage libraryPage backdropPage collectionEditorPage pageWithAbsoluteTabs withTabs'
+            backDropType='musicartist'
+        >
+            <PageTabContent
+                key={`${currentTab.viewType} - ${searchParamsParentId}`}
+                currentTab={currentTab}
+                parentId={searchParamsParentId}
+            />
+        </Page>
+    );
+};
+
+export default Music;