mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

Do not use strict mode for view manager pages

Browse source
This commit is contained in:
Bill Thornton 2024-10-19 01:48:25 -04:00
parent d330f93bae
commit 7abe0270b4
4 changed files with 75 additions and 68 deletions
Download patch file Download diff file Expand all files Collapse all files

66
src/apps/dashboard/AppLayout.tsx
View file

@ -4,7 +4,7 @@ import { type Theme } from '@mui/material/styles';
import useMediaQuery from '@mui/material/useMediaQuery'; import useMediaQuery from '@mui/material/useMediaQuery';
import { LocalizationProvider } from '@mui/x-date-pickers'; import { LocalizationProvider } from '@mui/x-date-pickers';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns'; import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import React, { FC, useCallback, useEffect, useState } from 'react'; import React, { FC, StrictMode, useCallback, useEffect, useState } from 'react';
import { Outlet, useLocation } from 'react-router-dom'; import { Outlet, useLocation } from 'react-router-dom';
import AppBody from 'components/AppBody'; import AppBody from 'components/AppBody';
@ -49,39 +49,41 @@ export const Component: FC = () => {
return ( return (
<LocalizationProvider dateAdapter={AdapterDateFns} adapterLocale={dateFnsLocale}> <LocalizationProvider dateAdapter={AdapterDateFns} adapterLocale={dateFnsLocale}>
<Box sx={{ display: 'flex' }}> <Box sx={{ display: 'flex' }}>
<ElevationScroll elevate={false}> <StrictMode>
<AppBar <ElevationScroll elevate={false}>
position='fixed' <AppBar
sx={{ position='fixed'
width: { sx={{
xs: '100%', width: {
md: isDrawerAvailable ? `calc(100% - ${DRAWER_WIDTH}px)` : '100%' xs: '100%',
}, md: isDrawerAvailable ? `calc(100% - ${DRAWER_WIDTH}px)` : '100%'
ml: { },
xs: 0, ml: {
md: isDrawerAvailable ? DRAWER_WIDTH : 0 xs: 0,
} md: isDrawerAvailable ? DRAWER_WIDTH : 0
}} }
> }}
<AppToolbar
isDrawerAvailable={!isMediumScreen && isDrawerAvailable}
isDrawerOpen={isDrawerOpen}
onDrawerButtonClick={onToggleDrawer}
> >
<AppTabs isDrawerOpen={isDrawerOpen} /> <AppToolbar
</AppToolbar> isDrawerAvailable={!isMediumScreen && isDrawerAvailable}
</AppBar> isDrawerOpen={isDrawerOpen}
</ElevationScroll> onDrawerButtonClick={onToggleDrawer}
>
<AppTabs isDrawerOpen={isDrawerOpen} />
</AppToolbar>
</AppBar>
</ElevationScroll>
{ {
isDrawerAvailable && ( isDrawerAvailable && (
<AppDrawer <AppDrawer
open={isDrawerOpen} open={isDrawerOpen}
onClose={onToggleDrawer} onClose={onToggleDrawer}
onOpen={onToggleDrawer} onOpen={onToggleDrawer}
/> />
) )
} }
</StrictMode>
<Box <Box
component='main' component='main'

64
src/apps/experimental/AppLayout.tsx
View file

@ -1,4 +1,4 @@
import React, { useCallback, useState } from 'react'; import React, { StrictMode, useCallback, useState } from 'react';
import AppBar from '@mui/material/AppBar'; import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box'; import Box from '@mui/material/Box';
import { type Theme } from '@mui/material/styles'; import { type Theme } from '@mui/material/styles';
@ -30,37 +30,39 @@ export const Component = () => {
return ( return (
<Box sx={{ position: 'relative', display: 'flex', height: '100%' }}> <Box sx={{ position: 'relative', display: 'flex', height: '100%' }}>
<ElevationScroll elevate={false}> <StrictMode>
<AppBar <ElevationScroll elevate={false}>
position='fixed' <AppBar
sx={{ position='fixed'
width: { sx={{
xs: '100%', width: {
md: isDrawerAvailable ? `calc(100% - ${DRAWER_WIDTH}px)` : '100%' xs: '100%',
}, md: isDrawerAvailable ? `calc(100% - ${DRAWER_WIDTH}px)` : '100%'
ml: { },
xs: 0, ml: {
md: isDrawerAvailable ? DRAWER_WIDTH : 0 xs: 0,
} md: isDrawerAvailable ? DRAWER_WIDTH : 0
}} }
> }}
<AppToolbar >
isDrawerAvailable={!isMediumScreen && isDrawerAvailable} <AppToolbar
isDrawerOpen={isDrawerOpen} isDrawerAvailable={!isMediumScreen && isDrawerAvailable}
onDrawerButtonClick={onToggleDrawer} isDrawerOpen={isDrawerOpen}
/> onDrawerButtonClick={onToggleDrawer}
</AppBar> />
</ElevationScroll> </AppBar>
</ElevationScroll>
{ {
isDrawerAvailable && ( isDrawerAvailable && (
<AppDrawer <AppDrawer
open={isDrawerOpen} open={isDrawerOpen}
onClose={onToggleDrawer} onClose={onToggleDrawer}
onOpen={onToggleDrawer} onOpen={onToggleDrawer}
/> />
) )
} }
</StrictMode>
<Box <Box
component='main' component='main'

7
src/components/router/AsyncRoute.tsx
View file

@ -1,3 +1,4 @@
import React, { StrictMode } from 'react';
import type { RouteObject } from 'react-router-dom'; import type { RouteObject } from 'react-router-dom';
export enum AsyncRouteType { export enum AsyncRouteType {
@ -39,7 +40,11 @@ export const toAsyncPageRoute = ({
lazy: async () => { lazy: async () => {
const { default: Page } = await importPage(page ?? path, type); const { default: Page } = await importPage(page ?? path, type);
return { return {
Component: Page element: (
<StrictMode>
<Page />
</StrictMode>
)
}; };
} }
}; };

6
src/index.jsx
View file

@ -1,7 +1,7 @@
// Import legacy browser polyfills // Import legacy browser polyfills
import 'lib/legacy'; import 'lib/legacy';
import React, { StrictMode } from 'react'; import React from 'react';
import { createRoot } from 'react-dom/client'; import { createRoot } from 'react-dom/client';
// NOTE: We need to import this first to initialize the connection // NOTE: We need to import this first to initialize the connection
@ -268,9 +268,7 @@ async function renderApp() {
const root = createRoot(container); const root = createRoot(container);
root.render( root.render(
<StrictMode> <RootApp history={history} />
<RootApp history={history} />
</StrictMode>
); );
} }