Add ViewManager React wrapper component

src/components/viewManager/ViewManagerPage.tsx

@@ -0,0 +1,71 @@
+import React, { FunctionComponent, useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+
+import globalize from '../../scripts/globalize';
+import viewManager from './viewManager';
+
+interface ViewManagerPageProps {
+    controller: string
+    view: string
+    type?: string
+    isFullscreen?: boolean
+    isNowPlayingBarEnabled?: boolean
+    isThemeMediaSupported?: boolean
+    transition?: string
+}
+
+/**
+ * Page component that renders legacy views via the ViewManager.
+ */
+const ViewManagerPage: FunctionComponent<ViewManagerPageProps> = ({
+    controller,
+    view,
+    type,
+    isFullscreen = false,
+    isNowPlayingBarEnabled = true,
+    isThemeMediaSupported = false,
+    transition
+}) => {
+    const location = useLocation();
+
+    useEffect(() => {
+        const loadPage = async () => {
+            const controllerFactory = await import(/* webpackChunkName: "[request]" */ `../../controllers/${controller}`);
+
+            let viewHtml = await import(/* webpackChunkName: "[request]" */ `../../controllers/${view}`);
+            viewHtml = globalize.translateHtml(viewHtml);
+
+            viewManager.loadView({
+                url: location.pathname + location.search,
+                controllerFactory,
+                view: viewHtml,
+                type,
+                state: location.state,
+                autoFocus: false,
+                fullscreen: isFullscreen,
+                transition,
+                options: {
+                    supportsThemeMedia: isThemeMediaSupported,
+                    enableMediaControl: isNowPlayingBarEnabled
+                }
+            });
+        };
+
+        loadPage();
+    }, [
+        controller,
+        view,
+        type,
+        isFullscreen,
+        isNowPlayingBarEnabled,
+        isThemeMediaSupported,
+        transition,
+        location.pathname,
+        location.search,
+        location.state
+    ]);
+
+    return <></>;
+};
+
+export default ViewManagerPage;

src/routes/index.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { Navigate, Route, Routes } from 'react-router-dom';
 
 import ConnectionRequired from '../components/ConnectionRequired';
+import ViewManagerPage from '../components/viewManager/ViewManagerPage';
 import UserNew from './user/usernew';
 import Search from './search';
 import UserEdit from './user/useredit';
@@ -22,6 +23,9 @@ const AppRoutes = () => (
                 <Route path='userprofile.html' element={<UserProfile />} />
                 <Route path='home.html' element={<Home />} />
                 <Route path='movies.html' element={<Movies />} />
+                <Route path='music.html' element={
+                    <ViewManagerPage controller='music/musicrecommended' view='music/music.html' />
+                } />
             </Route>
 
             {/* Admin routes */}

src/scripts/routes.js

@@ -345,13 +345,6 @@ import { appRouter } from '../components/appRouter';
         controller: 'livetvtuner'
     });
 
-    defineRoute({
-        alias: '/music.html',
-        path: 'music/music.html',
-        controller: 'music/musicrecommended',
-        autoFocus: false
-    });
-
     defineRoute({
         alias: '/installedplugins.html',
         path: 'dashboard/plugins/installed/index.html',