Add Home videos and Photos View

src/apps/experimental/components/library/SortButton.tsx

@@ -36,6 +36,12 @@ const movieOrFavoriteOptions = [
     { label: 'Runtime', value: ItemSortBy.Runtime }
 ];
 
+const photosOrPhotoAlbumsOptions = [
+    { label: 'Name', value: ItemSortBy.SortName },
+    { label: 'OptionRandom', value: ItemSortBy.Random },
+    { label: 'OptionDateAdded', value: ItemSortBy.DateCreated }
+];
+
 const sortOptionsMapping: SortOptionsMapping = {
     [LibraryTab.Movies]: movieOrFavoriteOptions,
     [LibraryTab.Trailers]: [
@@ -89,6 +95,16 @@ const sortOptionsMapping: SortOptionsMapping = {
         { label: 'OptionReleaseDate', value: ItemSortBy.PremiereDate },
         { label: 'Runtime', value: ItemSortBy.Runtime },
         { label: 'OptionRandom', value: ItemSortBy.Random }
+    ],
+    [LibraryTab.PhotoAlbums]: photosOrPhotoAlbumsOptions,
+    [LibraryTab.Photos]: photosOrPhotoAlbumsOptions,
+    [LibraryTab.Videos]: [
+        { label: 'Name', value: ItemSortBy.SortName },
+        { label: 'OptionDateAdded', value: ItemSortBy.DateCreated },
+        { label: 'OptionDatePlayed', value: ItemSortBy.DatePlayed },
+        { label: 'OptionPlayCount', value: ItemSortBy.PlayCount },
+        { label: 'Runtime', value: ItemSortBy.Runtime },
+        { label: 'OptionRandom', value: ItemSortBy.Random }
     ]
 };
 

src/apps/experimental/components/library/filter/FiltersStatus.tsx

@@ -56,6 +56,8 @@ const FiltersStatus: FC<FiltersStatusProps> = ({
             && viewType !== LibraryTab.AlbumArtists
             && viewType !== LibraryTab.Songs
             && viewType !== LibraryTab.Channels
+            && viewType !== LibraryTab.PhotoAlbums
+            && viewType !== LibraryTab.Photos
         ) {
             visibleFiltersStatus.push(ItemFilter.IsUnplayed);
             visibleFiltersStatus.push(ItemFilter.IsPlayed);

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

@@ -184,6 +184,28 @@ 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('HeaderPhotoAlbums'),
+                value: LibraryTab.PhotoAlbums,
+                isDefault: true
+            },
+            {
+                index: 2,
+                label: globalize.translate('HeaderVideos'),
+                value: LibraryTab.Videos
+            }
+        ]
     }
 ];
 

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

@@ -9,5 +9,7 @@ export const ASYNC_USER_ROUTES: AsyncRoute[] = [
     { path: 'tv.html', page: 'shows', type: AsyncRouteType.Experimental },
     { path: 'music.html', page: 'music', type: AsyncRouteType.Experimental },
     { path: 'livetv.html', page: 'livetv', type: AsyncRouteType.Experimental },
-    { path: 'mypreferencesdisplay.html', page: 'user/display', type: AsyncRouteType.Experimental }
+    { path: 'mypreferencesdisplay.html', page: 'user/display', type: AsyncRouteType.Experimental },
+
+    { path: 'homevideos.html', page: 'homevideos', type: AsyncRouteType.Experimental }
 ];

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

@@ -0,0 +1,59 @@
+import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-item-kind';
+import React, { type 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 '@jellyfin/sdk/lib/generated-client/models/collection-type';
+import { LibraryTabContent, LibraryTabMapping } from 'types/libraryTabContent';
+
+const photosTabContent: LibraryTabContent = {
+    viewType: LibraryTab.Photos,
+    collectionType: CollectionType.Homevideos,
+    isBtnPlayAllEnabled: true,
+    isBtnShuffleEnabled: true,
+    itemType: [BaseItemKind.Photo]
+};
+
+const photoAlbumsTabContent: LibraryTabContent = {
+    viewType: LibraryTab.PhotoAlbums,
+    collectionType: CollectionType.Homevideos,
+    isBtnPlayAllEnabled: true,
+    isBtnShuffleEnabled: true,
+    itemType: [BaseItemKind.PhotoAlbum]
+};
+
+const videosTabContent: LibraryTabContent = {
+    viewType: LibraryTab.Videos,
+    collectionType: CollectionType.Homevideos,
+    isBtnPlayAllEnabled: true,
+    isBtnShuffleEnabled: true,
+    itemType: [BaseItemKind.Video]
+};
+
+const homevideosTabMapping: LibraryTabMapping = {
+    0: photosTabContent,
+    1: photoAlbumsTabContent,
+    2: videosTabContent
+};
+
+const HomeVideos: FC = () => {
+    const { libraryId, activeTab } = useCurrentTab();
+    const currentTab = homevideosTabMapping[activeTab];
+
+    return (
+        <Page
+            id='homevideos'
+            className='mainAnimatedPage libraryPage backdropPage collectionEditorPage pageWithAbsoluteTabs withTabs'
+            backDropType='video, photo'
+        >
+            <PageTabContent
+                key={`${currentTab.viewType} - ${libraryId}`}
+                currentTab={currentTab}
+                parentId={libraryId}
+            />
+        </Page>
+    );
+};
+
+export default HomeVideos;

src/components/router/appRouter.js

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

src/hooks/useFetchItems.ts

@@ -379,6 +379,7 @@ export const useGetItemsViewByType = (
                 LibraryTab.Playlists,
                 LibraryTab.Songs,
                 LibraryTab.Books,
+                LibraryTab.PhotoAlbums,
                 LibraryTab.Photos,
                 LibraryTab.Videos,
                 LibraryTab.Channels,

src/types/libraryTab.ts

@@ -20,6 +20,7 @@ export enum LibraryTab {
     Suggestions = 'suggestions',
     Trailers = 'trailers',
     Upcoming = 'upcoming',
+    PhotoAlbums = 'photoalbums',
     Photos = 'photos',
     Videos = 'videos',
     Books = 'books',