Merge pull request #7530 from viown/add-title-to-experimental-layout-video

Add video title to experimental layout

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

@@ -8,6 +8,7 @@ import AppToolbar from 'components/toolbar/AppToolbar';
 import ViewManagerPage from 'components/viewManager/ViewManagerPage';
 import { EventType } from 'constants/eventType';
 import Events, { type Event } from 'utils/events';
+import Typography from '@mui/material/Typography';
 
 /**
  * Video player page component that renders mui controls for the top controls and the legacy view for everything else.
@@ -15,18 +16,29 @@ import Events, { type Event } from 'utils/events';
 const VideoPage: FC = () => {
     const documentRef = useRef<Document>(document);
     const [ isVisible, setIsVisible ] = useState(true);
+    const [ videoTitle, setVideoTitle ] = useState<string>('');
 
     const onShowVideoOsd = (_e: Event, isShowing: boolean) => {
         setIsVisible(isShowing);
     };
 
+    const onTitleChange = (_e: Event, title: string) => {
+        setVideoTitle(title);
+    };
+
     useEffect(() => {
         const doc = documentRef.current;
 
-        if (doc) Events.on(doc, EventType.SHOW_VIDEO_OSD, onShowVideoOsd);
+        if (doc) {
+            Events.on(doc, EventType.SHOW_VIDEO_OSD, onShowVideoOsd);
+            Events.on(doc, EventType.VIDEO_TITLE_CHANGE, onTitleChange);
+        }
 
         return () => {
-            if (doc) Events.off(doc, EventType.SHOW_VIDEO_OSD, onShowVideoOsd);
+            if (doc) {
+                Events.off(doc, EventType.SHOW_VIDEO_OSD, onShowVideoOsd);
+                Events.off(doc, EventType.VIDEO_TITLE_CHANGE, onTitleChange);
+            }
         };
     }, []);
 
@@ -54,7 +66,9 @@ const VideoPage: FC = () => {
                                 <RemotePlayButton />
                             </>
                         }
-                    />
+                    >
+                        <Typography>{videoTitle}</Typography>
+                    </AppToolbar>
                 </Box>
             </Fade>
 

src/constants/eventType.ts

@@ -5,5 +5,6 @@ export enum EventType {
     HEADER_RENDERED = 'HEADER_RENDERED',
     SET_TABS = 'SET_TABS',
     SHOW_VIDEO_OSD = 'SHOW_VIDEO_OSD',
-    THEME_CHANGE = 'THEME_CHANGE'
+    THEME_CHANGE = 'THEME_CHANGE',
+    VIDEO_TITLE_CHANGE = 'VIDEO_TITLE_CHANGE'
 }

src/controllers/playback/video/index.js

@@ -192,6 +192,7 @@ export default function (view) {
         if (!item) {
             updateRecordingButton(null);
             LibraryMenu.setTitle('');
+            Events.trigger(document, EventType.VIDEO_TITLE_CHANGE, [ '' ]);
             nowPlayingVolumeSlider.disabled = true;
             nowPlayingPositionSlider.disabled = true;
             btnFastForward.disabled = true;
@@ -261,6 +262,7 @@ export default function (view) {
         }
 
         LibraryMenu.setTitle(title);
+        Events.trigger(document, EventType.VIDEO_TITLE_CHANGE, [ title ]);
 
         const documentTitle = parentName || (item ? item.Name : null);