Add tv show view

package-lock.json

@@ -6050,9 +6050,9 @@
       "dev": true
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001480",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001480.tgz",
-      "integrity": "sha512-q7cpoPPvZYgtyC4VaBSN0Bt+PJ4c4EYRf0DrduInOz2SkFpHD5p3LnvEpqBp7UnJn+8x1Ogl1s38saUxe+ihQQ==",
+      "version": "1.0.30001554",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001554.tgz",
+      "integrity": "sha512-A2E3U//MBwbJVzebddm1YfNp7Nud5Ip+IPn4BozBmn4KqVX7AvluoIDFWjsv5OkGnKUXQVmMSoMKLa3ScCblcQ==",
       "dev": true,
       "funding": [
         {
@@ -26231,9 +26231,9 @@
       "dev": true
     },
     "caniuse-lite": {
-      "version": "1.0.30001480",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001480.tgz",
-      "integrity": "sha512-q7cpoPPvZYgtyC4VaBSN0Bt+PJ4c4EYRf0DrduInOz2SkFpHD5p3LnvEpqBp7UnJn+8x1Ogl1s38saUxe+ihQQ==",
+      "version": "1.0.30001554",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001554.tgz",
+      "integrity": "sha512-A2E3U//MBwbJVzebddm1YfNp7Nud5Ip+IPn4BozBmn4KqVX7AvluoIDFWjsv5OkGnKUXQVmMSoMKLa3ScCblcQ==",
       "dev": true
     },
     "canvas": {

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

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

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

@@ -61,12 +61,6 @@ export const LEGACY_USER_ROUTES: LegacyRoute[] = [
             controller: 'user/subtitles/index',
             view: 'user/subtitles/index.html'
         }
-    }, {
-        path: 'tv.html',
-        pageProps: {
-            controller: 'shows/tvrecommended',
-            view: 'shows/tvrecommended.html'
-        }
     }, {
         path: 'video',
         pageProps: {

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

@@ -0,0 +1,85 @@
+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 { SectionsView } from 'types/suggestionsSections';
+import { LibraryTabContent, LibraryTabMapping } from 'types/libraryTabContent';
+
+const episodesTabContent: LibraryTabContent = {
+    viewType: LibraryTab.Episodes,
+    itemType: [BaseItemKind.Episode],
+    collectionType: CollectionType.TvShows,
+    isAlphabetPickerEnabled: false,
+    noItemsMessage: 'MessageNoEpisodesFound'
+};
+
+const seriesTabContent: LibraryTabContent = {
+    viewType: LibraryTab.Series,
+    itemType: [BaseItemKind.Series],
+    collectionType: CollectionType.TvShows,
+    isBtnShuffleEnabled: true
+};
+
+const networksTabContent: LibraryTabContent = {
+    viewType: LibraryTab.Networks,
+    itemType: [BaseItemKind.Series],
+    isBtnFilterEnabled: false,
+    isBtnGridListEnabled: false,
+    isBtnSortEnabled: false,
+    isAlphabetPickerEnabled: false
+};
+
+const upcomingTabContent: LibraryTabContent = {
+    viewType: LibraryTab.Upcoming
+};
+
+const suggestionsTabContent: LibraryTabContent = {
+    viewType: LibraryTab.Suggestions,
+    collectionType: CollectionType.TvShows,
+    sectionsType: {
+        suggestionSectionsView: [
+            SectionsView.ContinueWatchingEpisode,
+            SectionsView.LatestEpisode,
+            SectionsView.NextUp
+        ]
+    }
+};
+
+const genresTabContent: LibraryTabContent = {
+    viewType: LibraryTab.Genres,
+    itemType: [BaseItemKind.Series],
+    collectionType: CollectionType.TvShows
+};
+
+const tvShowsTabMapping: LibraryTabMapping = {
+    0: seriesTabContent,
+    1: suggestionsTabContent,
+    2: upcomingTabContent,
+    3: genresTabContent,
+    4: networksTabContent,
+    5: episodesTabContent
+};
+
+const Shows: FC = () => {
+    const { searchParamsParentId, currentTabIndex } = useCurrentTab();
+    const currentTab = tvShowsTabMapping[currentTabIndex];
+
+    return (
+        <Page
+            id='tvshowsPage'
+            className='mainAnimatedPage libraryPage backdropPage collectionEditorPage pageWithAbsoluteTabs withTabs'
+            backDropType='series'
+        >
+            <PageTabContent
+                key={`${currentTab.viewType} - ${searchParamsParentId}`}
+                currentTab={currentTab}
+                parentId={searchParamsParentId}
+            />
+        </Page>
+    );
+};
+
+export default Shows;