From fd420a457f6f2bcb133353d7ae306f18896bf7e2 Mon Sep 17 00:00:00 2001 From: grafixeyehero Date: Wed, 29 May 2024 03:32:53 +0300 Subject: [PATCH] Add Homevideos View --- .../components/library/SortButton.tsx | 16 +++++ .../library/filter/FiltersStatus.tsx | 2 + .../experimental/components/tabs/tabRoutes.ts | 22 +++++++ .../experimental/routes/asyncRoutes/user.ts | 4 +- .../experimental/routes/homevideos/index.tsx | 59 +++++++++++++++++++ src/components/router/appRouter.js | 8 +++ src/hooks/useFetchItems.ts | 1 + src/types/libraryTab.ts | 1 + 8 files changed, 112 insertions(+), 1 deletion(-) create mode 100644 src/apps/experimental/routes/homevideos/index.tsx diff --git a/src/apps/experimental/components/library/SortButton.tsx b/src/apps/experimental/components/library/SortButton.tsx index 04113f3f0a..504fb303f4 100644 --- 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 index 90a27e17fe..4e2553cae6 100644 --- 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 = ({ && 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 index 582508bd96..306e41a8fd 100644 --- 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 index e653bf172d..10040cfc8f 100644 --- 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 new file mode 100644 index 0000000000..2f318c218a --- /dev/null +++ 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 ( + + + + ); +}; + +export default HomeVideos; diff --git a/src/components/router/appRouter.js b/src/components/router/appRouter.js index 3b07a5571c..471b4a3bf9 100644 --- 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 index 710b8863a6..6a3e58f511 100644 --- a/src/hooks/useFetchItems.ts +++ b/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, diff --git a/src/types/libraryTab.ts b/src/types/libraryTab.ts index 1a7529f1a7..921234b577 100644 --- 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',