Add Library View

package.json

@@ -77,6 +77,8 @@
     "@loadable/component": "5.15.3",
     "@mui/icons-material": "5.11.16",
     "@mui/material": "5.13.3",
+    "@tanstack/react-query": "4.29.12",
+    "@tanstack/react-query-devtools": "4.29.12",
     "blurhash": "2.0.5",
     "classlist.js": "https://github.com/eligrey/classList.js/archive/1.2.20180112.tar.gz",
     "classnames": "2.3.2",
@@ -109,6 +111,7 @@
     "screenfull": "6.0.2",
     "sortablejs": "1.15.0",
     "swiper": "9.3.2",
+    "use-local-storage-state": "17.3.0",
     "webcomponents.js": "0.7.24",
     "whatwg-fetch": "3.6.2",
     "workbox-core": "6.5.4",

src/RootApp.tsx

@@ -1,5 +1,7 @@
 import loadable from '@loadable/component';
 import { History } from '@remix-run/router';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import React from 'react';
 
 import StableApp from './apps/stable/App';
@@ -9,21 +11,32 @@ import { WebConfigProvider } from './hooks/useWebConfig';
 
 const ExperimentalApp = loadable(() => import('./apps/experimental/App'));
 
+const queryClient = new QueryClient({
+    defaultOptions: {
+        queries: {
+            refetchOnWindowFocus: false
+        }
+    }
+});
+
 const RootApp = ({ history }: { history: History }) => {
     const layoutMode = localStorage.getItem('layout');
 
     return (
-        <ApiProvider>
-            <WebConfigProvider>
-                <HistoryRouter history={history}>
-                    {
-                        layoutMode === 'experimental' ?
-                            <ExperimentalApp /> :
-                            <StableApp />
-                    }
-                </HistoryRouter>
-            </WebConfigProvider>
-        </ApiProvider>
+        <QueryClientProvider client={queryClient}>
+            <ApiProvider>
+                <WebConfigProvider>
+                    <HistoryRouter history={history}>
+                        {
+                            layoutMode === 'experimental' ?
+                                <ExperimentalApp /> :
+                                <StableApp />
+                        }
+                    </HistoryRouter>
+                </WebConfigProvider>
+            </ApiProvider>
+            <ReactQueryDevtools initialIsOpen={false} />
+        </QueryClientProvider>
     );
 };
 

src/apps/experimental/AppLayout.tsx

@@ -7,7 +7,7 @@ import { Outlet, useLocation } from 'react-router-dom';
 import AppHeader from 'components/AppHeader';
 import Backdrop from 'components/Backdrop';
 import { useApi } from 'hooks/useApi';
-import { useLocalStorage } from 'hooks/useLocalStorage';
+import useLocalStorageState from 'use-local-storage-state';
 
 import AppToolbar from './components/AppToolbar';
 import AppDrawer, { DRAWER_WIDTH, isDrawerPath } from './components/drawers/AppDrawer';
@@ -25,7 +25,7 @@ const DEFAULT_EXPERIMENTAL_APP_SETTINGS: ExperimentalAppSettings = {
 };
 
 const AppLayout = () => {
-    const [ appSettings, setAppSettings ] = useLocalStorage<ExperimentalAppSettings>('ExperimentalAppSettings', DEFAULT_EXPERIMENTAL_APP_SETTINGS);
+    const [ appSettings, setAppSettings ] = useLocalStorageState<ExperimentalAppSettings>('ExperimentalAppSettings', { defaultValue: DEFAULT_EXPERIMENTAL_APP_SETTINGS });
     const [ isDrawerActive, setIsDrawerActive ] = useState(appSettings.isDrawerPinned);
     const { user } = useApi();
     const location = useLocation();

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

@@ -0,0 +1,148 @@
+import React, { FC, useState } from 'react';
+
+import Box from '@mui/material/Box';
+import { LibrarySettingsProvider } from 'hooks/useLibrarySettings';
+import LibraryHeader from './LibraryHeader';
+import LibraryView from './LibraryView';
+import SuggestionsView from './SuggestionsView';
+import UpComingView from './UpComingView';
+
+import { LibraryViewSelectOptions } from 'types/library';
+import Page from 'components/Page';
+
+type CollectionType = string | null | undefined;
+
+const getLibraryViewMenuOptions = (
+    collectionType: CollectionType
+) => {
+    const viewSelectOptions: LibraryViewSelectOptions[] = [];
+    if (collectionType === 'movies') {
+        viewSelectOptions.push(
+            { title: 'Movies', value: 'movies' },
+            { title: 'Trailers', value: 'trailers' },
+            { title: 'Collections', value: 'collections' },
+            { title: 'Genres', value: 'genres' },
+            { title: 'Studios', value: 'studios' },
+            { title: 'Suggestions', value: 'suggestions' }
+        );
+    }
+
+    if (collectionType === 'tvshows') {
+        viewSelectOptions.push(
+            { title: 'Series', value: 'series' },
+            { title: 'Episodes', value: 'episodes' },
+            { title: 'Genres', value: 'genres' },
+            { title: 'Studios', value: 'studios' },
+            { title: 'Upcoming', value: 'upcoming' },
+            { title: 'Suggestions', value: 'suggestions' }
+        );
+    }
+
+    if (collectionType === 'music') {
+        viewSelectOptions.push(
+            { title: 'Albums', value: 'albums' },
+            { title: 'AlbumArtists', value: 'albumArtists' },
+            { title: 'Artists', value: 'artists' },
+            { title: 'Playlist', value: 'playlist' },
+            { title: 'Genres', value: 'genres' },
+            { title: 'Songs', value: 'songs' },
+            { title: 'Suggestions', value: 'suggestions' }
+        );
+    }
+
+    if (collectionType === 'books') {
+        viewSelectOptions.push({ title: 'Books', value: 'books' });
+    }
+
+    if (collectionType === 'homevideos') {
+        viewSelectOptions.push(
+            { title: 'Photos', value: 'photos' },
+            { title: 'Videos', value: 'videos' }
+        );
+    }
+
+    return viewSelectOptions;
+};
+
+const getBackDropType = (collectionType: CollectionType) => {
+    if (collectionType === 'movies') {
+        return 'movie';
+    }
+
+    if (collectionType === 'tvshows') {
+        return 'series';
+    }
+
+    if (collectionType === 'music') {
+        return 'musicartist';
+    }
+
+    if (collectionType === 'books') {
+        return 'book';
+    }
+
+    if (collectionType === 'homevideos') {
+        return 'video, photo';
+    }
+
+    return '';
+};
+
+const getViewComponent = (viewType: string, collectionType: string | null | undefined, parentId: string | null | undefined) => {
+    let component;
+
+    switch (viewType) {
+        case 'suggestions':
+            component = <SuggestionsView collectionType={collectionType} parentId={parentId} />;
+            break;
+
+        case 'upcoming':
+            component = <UpComingView parentId={parentId} />;
+            break;
+
+        default:
+            component = <LibraryView viewType={viewType} collectionType={collectionType} parentId={parentId} />;
+            break;
+    }
+
+    return component;
+};
+
+interface LibraryContentProps {
+    defaultView: string
+    collectionType: CollectionType;
+    parentId: string | null;
+}
+
+const LibraryContent: FC<LibraryContentProps> = ({ defaultView, parentId, collectionType }) => {
+    const viewSelectOptions = getLibraryViewMenuOptions(collectionType);
+    const [ viewType, setViewType] = useState<string>(defaultView ?? viewSelectOptions[0].value);
+
+    return (
+        <Page
+            id='libraryPage'
+            className='mainAnimatedPage libraryPage backdropPage'
+            backDropType={getBackDropType(collectionType)}
+        >
+            <LibrarySettingsProvider
+                viewType={viewType}
+                parentId={parentId}
+            >
+                <Box>
+                    <LibraryHeader
+                        viewSelectOptions={viewSelectOptions}
+                        viewType={viewType}
+                        setViewType={setViewType}
+                        collectionType={collectionType}
+                        parentId={parentId}
+                    />
+
+                    {getViewComponent(viewType, collectionType, parentId)}
+
+                </Box>
+            </LibrarySettingsProvider>
+        </Page>
+    );
+};
+
+export default LibraryContent;