Add livetv view

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

@@ -7,5 +7,6 @@ export const ASYNC_USER_ROUTES: AsyncRoute[] = [
     { 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: 'music.html', page: 'music', type: AsyncRouteType.Experimental }
+    { path: 'music.html', page: 'music', type: AsyncRouteType.Experimental },
+    { path: 'livetv.html', page: 'livetv', type: AsyncRouteType.Experimental }
 ];

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

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

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

@@ -0,0 +1,71 @@
+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 { LibraryTabContent, LibraryTabMapping } from 'types/libraryTabContent';
+import { ProgramSectionsView, RecordingsSectionsView, ScheduleSectionsView } from 'types/sections';
+
+const seriestimersTabContent: LibraryTabContent = {
+    viewType: LibraryTab.SeriesTimers,
+    isPaginationEnabled: false,
+    isBtnFilterEnabled: false,
+    isBtnGridListEnabled: false,
+    isBtnSortEnabled: false,
+    isAlphabetPickerEnabled: false
+};
+
+const scheduleTabContent: LibraryTabContent = {
+    viewType: LibraryTab.Schedule,
+    sectionsView: ScheduleSectionsView
+};
+
+const recordingsTabContent: LibraryTabContent = {
+    viewType: LibraryTab.Recordings,
+    sectionsView: RecordingsSectionsView
+};
+
+const channelsTabContent: LibraryTabContent = {
+    viewType: LibraryTab.Channels,
+    isBtnGridListEnabled: false,
+    isBtnSortEnabled: false,
+    isAlphabetPickerEnabled: false
+};
+
+const programsTabContent: LibraryTabContent = {
+    viewType: LibraryTab.Programs,
+    sectionsView: ProgramSectionsView
+};
+
+const guideTabContent: LibraryTabContent = {
+    viewType: LibraryTab.Guide
+};
+
+const liveTvTabMapping: LibraryTabMapping = {
+    0: programsTabContent,
+    1: guideTabContent,
+    2: channelsTabContent,
+    3: recordingsTabContent,
+    4: scheduleTabContent,
+    5: seriestimersTabContent
+};
+
+const LiveTv: FC = () => {
+    const { libraryId, activeTab } = useCurrentTab();
+    const currentTab = liveTvTabMapping[activeTab];
+
+    return (
+        <Page
+            id='liveTvPage'
+            className='mainAnimatedPage libraryPage collectionEditorPage pageWithAbsoluteTabs withTabs'
+        >
+            <PageTabContent
+                key={`${currentTab.viewType} - ${libraryId}`}
+                currentTab={currentTab}
+                parentId={libraryId}
+            />
+        </Page>
+    );
+};
+
+export default LiveTv;

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

@@ -6,7 +6,7 @@ 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';
+import { MovieSuggestionsSectionsView } from 'types/sections';
 
 const moviesTabContent: LibraryTabContent = {
     viewType: LibraryTab.Movies,
@@ -40,13 +40,7 @@ const trailersTabContent: LibraryTabContent = {
 const suggestionsTabContent: LibraryTabContent = {
     viewType: LibraryTab.Suggestions,
     collectionType: CollectionType.Movies,
-    sectionsType: {
-        suggestionSectionsView: [
-            SectionsView.ContinueWatchingMovies,
-            SectionsView.LatestMovies
-        ],
-        isMovieRecommendations: true
-    }
+    sectionsView: MovieSuggestionsSectionsView
 };
 
 const genresTabContent: LibraryTabContent = {
@@ -65,8 +59,8 @@ const moviesTabMapping: LibraryTabMapping = {
 };
 
 const Movies: FC = () => {
-    const { searchParamsParentId, currentTabIndex } = useCurrentTab();
-    const currentTab = moviesTabMapping[currentTabIndex];
+    const { libraryId, activeTab } = useCurrentTab();
+    const currentTab = moviesTabMapping[activeTab];
 
     return (
         <Page
@@ -75,9 +69,9 @@ const Movies: FC = () => {
             backDropType='movie'
         >
             <PageTabContent
-                key={`${currentTab.viewType} - ${searchParamsParentId}`}
+                key={`${currentTab.viewType} - ${libraryId}`}
                 currentTab={currentTab}
-                parentId={searchParamsParentId}
+                parentId={libraryId}
             />
         </Page>
     );

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

@@ -6,7 +6,7 @@ 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';
+import { MusicSuggestionsSectionsView } from 'types/sections';
 
 const albumArtistsTabContent: LibraryTabContent = {
     viewType: LibraryTab.AlbumArtists,
@@ -47,13 +47,7 @@ const songsTabContent: LibraryTabContent = {
 const suggestionsTabContent: LibraryTabContent = {
     viewType: LibraryTab.Suggestions,
     collectionType: CollectionType.Music,
-    sectionsType: {
-        suggestionSectionsView: [
-            SectionsView.LatestMusic,
-            SectionsView.FrequentlyPlayedMusic,
-            SectionsView.RecentlyPlayedMusic
-        ]
-    }
+    sectionsView: MusicSuggestionsSectionsView
 };
 
 const genresTabContent: LibraryTabContent = {
@@ -73,8 +67,8 @@ const musicTabMapping: LibraryTabMapping = {
 };
 
 const Music: FC = () => {
-    const { searchParamsParentId, currentTabIndex } = useCurrentTab();
-    const currentTab = musicTabMapping[currentTabIndex];
+    const { libraryId, activeTab } = useCurrentTab();
+    const currentTab = musicTabMapping[activeTab];
 
     return (
         <Page
@@ -83,9 +77,9 @@ const Music: FC = () => {
             backDropType='musicartist'
         >
             <PageTabContent
-                key={`${currentTab.viewType} - ${searchParamsParentId}`}
+                key={`${currentTab.viewType} - ${libraryId}`}
                 currentTab={currentTab}
-                parentId={searchParamsParentId}
+                parentId={libraryId}
             />
         </Page>
     );

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

@@ -5,8 +5,8 @@ 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';
+import { TvShowSuggestionsSectionsView } from 'types/sections';
 
 const episodesTabContent: LibraryTabContent = {
     viewType: LibraryTab.Episodes,
@@ -39,13 +39,7 @@ const upcomingTabContent: LibraryTabContent = {
 const suggestionsTabContent: LibraryTabContent = {
     viewType: LibraryTab.Suggestions,
     collectionType: CollectionType.TvShows,
-    sectionsType: {
-        suggestionSectionsView: [
-            SectionsView.ContinueWatchingEpisode,
-            SectionsView.LatestEpisode,
-            SectionsView.NextUp
-        ]
-    }
+    sectionsView: TvShowSuggestionsSectionsView
 };
 
 const genresTabContent: LibraryTabContent = {
@@ -64,8 +58,8 @@ const tvShowsTabMapping: LibraryTabMapping = {
 };
 
 const Shows: FC = () => {
-    const { searchParamsParentId, currentTabIndex } = useCurrentTab();
-    const currentTab = tvShowsTabMapping[currentTabIndex];
+    const { libraryId, activeTab } = useCurrentTab();
+    const currentTab = tvShowsTabMapping[activeTab];
 
     return (
         <Page
@@ -74,9 +68,9 @@ const Shows: FC = () => {
             backDropType='series'
         >
             <PageTabContent
-                key={`${currentTab.viewType} - ${searchParamsParentId}`}
+                key={`${currentTab.viewType} - ${libraryId}`}
                 currentTab={currentTab}
-                parentId={searchParamsParentId}
+                parentId={libraryId}
             />
         </Page>
     );