Migrate Movies

src/routes/index.tsx

@@ -11,6 +11,7 @@ import UserPassword from './user/userpassword';
 import UserProfile from './user/userprofile';
 import UserProfiles from './user/userprofiles';
 import Home from './home';
+import Movies from './movies';
 
 const AppRoutes = () => (
     <Routes>
@@ -20,6 +21,7 @@ const AppRoutes = () => (
                 <Route path='search.html' element={<Search />} />
                 <Route path='userprofile.html' element={<UserProfile />} />
                 <Route path='home.html' element={<Home />} />
+                <Route path='movies.html' element={<Movies />} />
             </Route>
 
             {/* Admin routes */}

src/routes/movies.tsx

@@ -0,0 +1,139 @@
+import '../elements/emby-scroller/emby-scroller';
+import '../elements/emby-itemscontainer/emby-itemscontainer';
+import '../elements/emby-tabs/emby-tabs';
+import '../elements/emby-button/emby-button';
+
+import React, { FunctionComponent, useCallback, useEffect, useRef, useState } from 'react';
+import { useSearchParams } from 'react-router-dom';
+
+import * as mainTabsManager from '../components/maintabsmanager';
+import Page from '../components/Page';
+import globalize from '../scripts/globalize';
+import libraryMenu from '../scripts/libraryMenu';
+import * as userSettings from '../scripts/settings/userSettings';
+import CollectionsView from '../view/movies/CollectionsView';
+import FavoritesView from '../view/movies/FavoritesView';
+import GenresView from '../view/movies/GenresView';
+import MoviesView from '../view/movies/MoviesView';
+import SuggestionsView from '../view/movies/SuggestionsView';
+import TrailersView from '../view/movies/TrailersView';
+
+const getDefaultTabIndex = (folderId: string | null) => {
+    switch (userSettings.get('landing-' + folderId, false)) {
+        case 'suggestions':
+            return 1;
+
+        case 'favorites':
+            return 3;
+
+        case 'collections':
+            return 4;
+
+        case 'genres':
+            return 5;
+
+        default:
+            return 0;
+    }
+};
+
+const Movies: FunctionComponent = () => {
+    const [ searchParams ] = useSearchParams();
+    const currentTabIndex = parseInt(searchParams.get('tab') || getDefaultTabIndex(searchParams.get('topParentId')).toString());
+    const [ selectedIndex, setSelectedIndex ] = useState(currentTabIndex);
+    const element = useRef<HTMLDivElement>(null);
+
+    const getTabs = () => {
+        return [{
+            name: globalize.translate('Movies')
+        }, {
+            name: globalize.translate('Suggestions')
+        }, {
+            name: globalize.translate('Trailers')
+        }, {
+            name: globalize.translate('Favorites')
+        }, {
+            name: globalize.translate('Collections')
+        }, {
+            name: globalize.translate('Genres')
+        }];
+    };
+
+    const getTabComponent = (index: number) => {
+        if (index == null) {
+            throw new Error('index cannot be null');
+        }
+
+        let component;
+        switch (index) {
+            case 0:
+                component = <MoviesView topParentId={searchParams.get('topParentId')} />;
+                break;
+
+            case 1:
+                component = <SuggestionsView topParentId={searchParams.get('topParentId')} />;
+                break;
+
+            case 2:
+                component = <TrailersView topParentId={searchParams.get('topParentId')} />;
+                break;
+
+            case 3:
+                component = <FavoritesView topParentId={searchParams.get('topParentId')} />;
+                break;
+
+            case 4:
+                component = <CollectionsView topParentId={searchParams.get('topParentId')} />;
+                break;
+
+            case 5:
+                component = <GenresView topParentId={searchParams.get('topParentId')} />;
+                break;
+        }
+
+        return component;
+    };
+
+    const onTabChange = useCallback((e: { detail: { selectedTabIndex: string; }; }) => {
+        const newIndex = parseInt(e.detail.selectedTabIndex);
+        setSelectedIndex(newIndex);
+    }, []);
+
+    useEffect(() => {
+        const page = element.current;
+
+        if (!page) {
+            console.error('Unexpected null reference');
+            return;
+        }
+        mainTabsManager.setTabs(element.current, selectedIndex, getTabs, undefined, undefined, onTabChange);
+        if (!page.getAttribute('data-title')) {
+            const parentId = searchParams.get('topParentId');
+
+            if (parentId) {
+                window.ApiClient.getItem(window.ApiClient.getCurrentUserId(), parentId).then((item) => {
+                    page.setAttribute('data-title', item.Name as string);
+                    libraryMenu.setTitle(item.Name);
+                });
+            } else {
+                page.setAttribute('data-title', globalize.translate('Movies'));
+                libraryMenu.setTitle(globalize.translate('Movies'));
+            }
+        }
+    }, [onTabChange, searchParams, selectedIndex]);
+
+    return (
+        <div ref={element}>
+            <Page
+                id='moviesPage'
+                className='mainAnimatedPage libraryPage backdropPage collectionEditorPage pageWithAbsoluteTabs withTabs'
+                backDropType='movie'
+            >
+                {getTabComponent(selectedIndex)}
+
+            </Page>
+        </div>
+    );
+};
+
+export default Movies;