Add homevideos & books view

src/apps/experimental/components/tabs/tabRoutes.ts

@@ -184,6 +184,33 @@ const TabRoutes: TabRoute[] = [
                 value: LibraryTab.Episodes
             }
         ]
+    },
+    {
+        path: '/homevideos.html',
+        tabs: [
+            {
+                index: 0,
+                label: globalize.translate('Photos'),
+                value: LibraryTab.Photos,
+                isDefault: true
+            },
+            {
+                index: 1,
+                label: globalize.translate('Videos'),
+                value: LibraryTab.Videos
+            }
+        ]
+    },
+    {
+        path: '/books.html',
+        tabs: [
+            {
+                index: 0,
+                label: globalize.translate('Books'),
+                value: LibraryTab.Books,
+                isDefault: true
+            }
+        ]
     }
 ];
 

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

@@ -6,5 +6,7 @@ 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: 'books.html', page: 'books', type: AsyncRouteType.Experimental },
+    { path: 'homevideos.html', page: 'homevideos', type: AsyncRouteType.Experimental }
 ];

src/apps/experimental/routes/books/BooksView.tsx

@@ -0,0 +1,22 @@
+import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-item-kind';
+import React, { FC } from 'react';
+
+import ItemsView from '../../components/library/ItemsView';
+import { LibraryViewProps } from 'types/library';
+import { CollectionType } from 'types/collectionType';
+import { LibraryTab } from 'types/libraryTab';
+
+const BooksView: FC<LibraryViewProps> = ({ parentId }) => {
+    return (
+        <ItemsView
+            viewType={LibraryTab.Books}
+            parentId={parentId}
+            collectionType={CollectionType.Books}
+            isBtnShuffleEnabled={true}
+            itemType={[BaseItemKind.Book]}
+            noItemsMessage='MessageNoItemsAvailable'
+        />
+    );
+};
+
+export default BooksView;

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

@@ -0,0 +1,38 @@
+import React, { FC } from 'react';
+import { useLocation, useSearchParams } from 'react-router-dom';
+
+import { getDefaultTabIndex } from '../../components/tabs/tabRoutes';
+import Page from 'components/Page';
+import BooksView from './BooksView';
+
+const Movies: 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');
+        }
+
+        return (
+            <BooksView parentId={searchParamsParentId} />
+        );
+    };
+
+    return (
+        <Page
+            id='books'
+            className='mainAnimatedPage libraryPage backdropPage collectionEditorPage pageWithAbsoluteTabs withTabs'
+            backDropType='book'
+        >
+            {getTabComponent(currentTabIndex)}
+
+        </Page>
+    );
+};
+
+export default Movies;

src/apps/experimental/routes/homevideos/PhotosView.tsx

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

src/apps/experimental/routes/homevideos/VideosView.tsx

@@ -0,0 +1,22 @@
+import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-item-kind';
+import React, { FC } from 'react';
+
+import ItemsView from '../../components/library/ItemsView';
+import { LibraryViewProps } from 'types/library';
+import { CollectionType } from 'types/collectionType';
+import { LibraryTab } from 'types/libraryTab';
+
+const VideosView: FC<LibraryViewProps> = ({ parentId }) => {
+    return (
+        <ItemsView
+            viewType={LibraryTab.Videos}
+            parentId={parentId}
+            collectionType={CollectionType.HomeVideos}
+            isBtnShuffleEnabled={true}
+            itemType={[BaseItemKind.Video]}
+            noItemsMessage='MessageNoItemsAvailable'
+        />
+    );
+};
+
+export default VideosView;

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

@@ -0,0 +1,45 @@
+import React, { FC } from 'react';
+import { useLocation, useSearchParams } from 'react-router-dom';
+
+import { getDefaultTabIndex } from '../../components/tabs/tabRoutes';
+import Page from 'components/Page';
+import VideosView from './VideosView';
+import PhotosView from './PhotosView';
+
+const Movies: 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');
+        }
+
+        if (index === 1) {
+            return (
+                <VideosView parentId={searchParamsParentId} />
+            );
+        }
+
+        return (
+            <PhotosView parentId={searchParamsParentId} />
+        );
+    };
+
+    return (
+        <Page
+            id='homevideos'
+            className='mainAnimatedPage libraryPage backdropPage collectionEditorPage pageWithAbsoluteTabs withTabs'
+            backDropType='video, photo'
+        >
+            {getTabComponent(currentTabIndex)}
+
+        </Page>
+    );
+};
+
+export default Movies;

src/components/router/appRouter.js

@@ -667,6 +667,22 @@ class AppRouter {
 
                 return url;
             }
+
+            const layoutMode = localStorage.getItem('layout');
+
+            if (layoutMode === 'experimental') {
+                if (item.CollectionType == 'homevideos') {
+                    url = '#/homevideos.html?topParentId=' + item.Id;
+
+                    return url;
+                }
+
+                if (item.CollectionType == 'books') {
+                    url = '#/books.html?topParentId=' + item.Id;
+
+                    return url;
+                }
+            }
         }
 
         const itemTypes = ['Playlist', 'TvChannel', 'Program', 'BoxSet', 'MusicAlbum', 'MusicGenre', 'Person', 'Recording', 'MusicArtist'];