diff --git a/src/apps/experimental/routes/video/index.tsx b/src/apps/experimental/routes/video/index.tsx index 8b91abb9f..41261e3cf 100644 --- a/src/apps/experimental/routes/video/index.tsx +++ b/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); const [ isVisible, setIsVisible ] = useState(true); + const [ videoTitle, setVideoTitle ] = useState(''); 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 = () => { } - /> + > + {videoTitle} + diff --git a/src/constants/eventType.ts b/src/constants/eventType.ts index c9edaed8a..7d4701574 100644 --- a/src/constants/eventType.ts +++ b/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' } diff --git a/src/controllers/playback/video/index.js b/src/controllers/playback/video/index.js index e3f3d3733..ad959e278 100644 --- a/src/controllers/playback/video/index.js +++ b/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);