Fix video osd not hiding in experimental layout

src/apps/experimental/components/AppToolbar/index.tsx

@@ -24,11 +24,16 @@ const ExperimentalAppToolbar: FC<AppToolbarProps> = ({
     onDrawerButtonClick
 }) => {
     const location = useLocation();
+
+    // The video osd does not show the standard toolbar
+    if (location.pathname === '/video') return null;
+
     const isTabsAvailable = isTabPath(location.pathname);
+    const isPublicPath = location.pathname === '/selectserver.html';
 
     return (
         <AppToolbar
-            buttons={
+            buttons={!isPublicPath && (
                 <>
                     <SyncPlayButton />
                     <RemotePlayButton />
@@ -45,10 +50,11 @@ const ExperimentalAppToolbar: FC<AppToolbarProps> = ({
                         </IconButton>
                     </Tooltip>
                 </>
-            }
+            )}
             isDrawerAvailable={isDrawerAvailable}
             isDrawerOpen={isDrawerOpen}
             onDrawerButtonClick={onDrawerButtonClick}
+            isUserMenuAvailable={!isPublicPath}
         >
             {isTabsAvailable && (<AppTabs isDrawerOpen={isDrawerOpen} />)}
         </AppToolbar>

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

@@ -49,16 +49,6 @@ export const LEGACY_USER_ROUTES: LegacyRoute[] = [
             controller: 'user/subtitles/index',
             view: 'user/subtitles/index.html'
         }
-    }, {
-        path: 'video',
-        pageProps: {
-            controller: 'playback/video/index',
-            view: 'playback/video/index.html',
-            type: 'video-osd',
-            isFullscreen: true,
-            isNowPlayingBarEnabled: false,
-            isThemeMediaSupported: true
-        }
     }, {
         path: 'queue',
         pageProps: {

src/apps/experimental/routes/routes.tsx

@@ -7,8 +7,10 @@ import { toAsyncPageRoute } from 'components/router/AsyncRoute';
 import { toViewManagerPageRoute } from 'components/router/LegacyRoute';
 import { toRedirectRoute } from 'components/router/Redirect';
 import AppLayout from '../AppLayout';
+
 import { ASYNC_USER_ROUTES } from './asyncRoutes';
 import { LEGACY_PUBLIC_ROUTES, LEGACY_USER_ROUTES } from './legacyRoutes';
+import VideoPage from './video';
 
 export const EXPERIMENTAL_APP_ROUTES: RouteObject[] = [
     {
@@ -20,7 +22,13 @@ export const EXPERIMENTAL_APP_ROUTES: RouteObject[] = [
                 element: <ConnectionRequired isUserRequired />,
                 children: [
                     ...ASYNC_USER_ROUTES.map(toAsyncPageRoute),
-                    ...LEGACY_USER_ROUTES.map(toViewManagerPageRoute)
+                    ...LEGACY_USER_ROUTES.map(toViewManagerPageRoute),
+
+                    // The video page is special since it combines new controls with the legacy view
+                    {
+                        path: 'video',
+                        element: <VideoPage />
+                    }
                 ]
             },
 

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

@@ -0,0 +1,71 @@
+import Box from '@mui/material/Box/Box';
+import Fade from '@mui/material/Fade/Fade';
+import React, { useRef, type FC, useEffect, useState } from 'react';
+
+import RemotePlayButton from 'apps/experimental/components/AppToolbar/RemotePlayButton';
+import SyncPlayButton from 'apps/experimental/components/AppToolbar/SyncPlayButton';
+import AppToolbar from 'components/toolbar/AppToolbar';
+import ViewManagerPage from 'components/viewManager/ViewManagerPage';
+import Events, { type Event } from 'utils/events';
+
+/**
+ * Video player page component that renders mui controls for the top controls and the legacy view for everything else.
+ */
+const VideoPage: FC = () => {
+    const documentRef = useRef<Document>(document);
+    const [ isVisible, setIsVisible ] = useState(true);
+
+    const onShowVideoOsd = (_e: Event, isShowing: boolean) => {
+        setIsVisible(isShowing);
+    };
+
+    useEffect(() => {
+        const doc = documentRef.current;
+
+        if (doc) Events.on(doc, 'showVideoOsd', onShowVideoOsd);
+
+        return () => {
+            if (doc) Events.off(doc, 'showVideoOsd', onShowVideoOsd);
+        };
+    }, []);
+
+    return (
+        <>
+            <Fade
+                in={isVisible}
+                easing='fade-out'
+            >
+                <Box sx={{
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    color: 'white'
+                }}>
+                    <AppToolbar
+                        isDrawerAvailable={false}
+                        isDrawerOpen={false}
+                        isUserMenuAvailable={false}
+                        buttons={
+                            <>
+                                <SyncPlayButton />
+                                <RemotePlayButton />
+                            </>
+                        }
+                    />
+                </Box>
+            </Fade>
+
+            <ViewManagerPage
+                controller='playback/video/index'
+                view='playback/video/index.html'
+                type='video-osd'
+                isFullscreen
+                isNowPlayingBarEnabled={false}
+                isThemeMediaSupported
+            />
+        </>
+    );
+};
+
+export default VideoPage;