Merge pull request #5622 from grafixeyehero/Add-homevideos-view

Add Home videos and Photos View
jellyfin · Jul 15, 2024 · 085e6e7 · 085e6e7
2 parents f071ea2 + fd420a4
commit 085e6e7
Show file tree

Hide file tree

Showing 8 changed files with 112 additions and 1 deletion.
diff --git a/src/apps/experimental/components/library/SortButton.tsx b/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 }
     ]
 };
 

diff --git a/src/apps/experimental/components/library/filter/FiltersStatus.tsx b/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);

diff --git a/src/apps/experimental/components/tabs/tabRoutes.ts b/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
+            }
+        ]
     }
 ];
 

diff --git a/src/apps/experimental/routes/asyncRoutes/user.ts b/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 }
 ];
diff --git a/src/apps/experimental/routes/homevideos/index.tsx b/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;
diff --git a/src/components/router/appRouter.js b/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'];

diff --git a/src/hooks/useFetchItems.ts b/src/hooks/useFetchItems.ts
@@ -381,6 +381,7 @@ export const useGetItemsViewByType = (
                 LibraryTab.Playlists,
                 LibraryTab.Songs,
                 LibraryTab.Books,
+                LibraryTab.PhotoAlbums,
                 LibraryTab.Photos,
                 LibraryTab.Videos,
                 LibraryTab.Channels,

diff --git a/src/types/libraryTab.ts b/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',