Migrate all user routes to react router

src/routes/index.tsx

@@ -2,7 +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 { LEGACY_USER_ROUTES, toViewManagerPageRoute } from './legacy';
 import UserNew from './user/usernew';
 import Search from './search';
 import UserEdit from './user/useredit';
@@ -23,9 +23,8 @@ 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' />
+                {LEGACY_USER_ROUTES.map(toViewManagerPageRoute)}
-                } />
             </Route>
 
             {/* Admin routes */}

src/routes/legacy/index.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Route } from 'react-router-dom';
+
+import ViewManagerPage, { ViewManagerPageProps } from '../../components/viewManager/ViewManagerPage';
+
+export interface LegacyRoute {
+    path: string,
+    pageProps: ViewManagerPageProps
+}
+
+export function toViewManagerPageRoute(route: LegacyRoute) {
+    return (
+        <Route
+            key={route.path}
+            path={route.path}
+            element={
+                <ViewManagerPage {...route.pageProps} />
+            }
+        />
+    );
+}
+
+export * from './userRoutes';

src/routes/legacy/userRoutes.ts

@@ -0,0 +1,96 @@
+import { LegacyRoute } from '.';
+
+export const LEGACY_USER_ROUTES: LegacyRoute[] = [
+    {
+        path: 'details',
+        pageProps: {
+            controller: 'itemDetails/index',
+            view: 'itemDetails/index.html'
+        }
+    }, {
+        path: 'list.html',
+        pageProps: {
+            controller: 'list',
+            view: 'list.html'
+        }
+    }, {
+        path: 'livetv.html',
+        pageProps: {
+            controller: 'livetv/livetvsuggested',
+            view: 'livetv.html'
+        }
+    }, {
+        path: 'music.html',
+        pageProps: {
+            controller: 'music/musicrecommended',
+            view: 'music/music.html'
+        }
+    }, {
+        path: 'mypreferencesmenu.html',
+        pageProps: {
+            controller: 'user/menu/index',
+            view: 'user/menu/index.html'
+        }
+    }, {
+        path: 'mypreferencescontrols.html',
+        pageProps: {
+            controller: 'user/controls/index',
+            view: 'user/controls/index.html'
+        }
+    }, {
+        path: 'mypreferencesdisplay.html',
+        pageProps: {
+            controller: 'user/display/index',
+            view: 'user/display/index.html'
+        }
+    }, {
+        path: 'mypreferenceshome.html',
+        pageProps: {
+            controller: 'user/home/index',
+            view: 'user/home/index.html'
+        }
+    }, {
+        path: 'mypreferencesquickconnect.html',
+        pageProps: {
+            controller: 'user/quickConnect/index',
+            view: 'user/quickConnect/index.html'
+        }
+    }, {
+        path: 'mypreferencesplayback.html',
+        pageProps: {
+            controller: 'user/playback/index',
+            view: 'user/playback/index.html'
+        }
+    }, {
+        path: 'mypreferencessubtitles.html',
+        pageProps: {
+            controller: 'user/subtitles/index',
+            view: 'user/subtitles/index.html'
+        }
+    }, {
+        path: 'tv.html',
+        pageProps: {
+            controller: 'shows/tvrecommended',
+            view: 'shows/tvrecommended.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: {
+            controller: 'playback/queue/index',
+            view: 'playback/queue/index.html',
+            isFullscreen: true,
+            isNowPlayingBarEnabled: false,
+            isThemeMediaSupported: true
+        }
+    }
+];

src/scripts/routes.js

@@ -70,55 +70,6 @@ import { appRouter } from '../components/appRouter';
         controller: 'session/resetPassword/index'
     });
 
-    defineRoute({
-        alias: '/mypreferencesmenu.html',
-        path: 'user/menu/index.html',
-        autoFocus: false,
-        controller: 'user/menu/index'
-    });
-
-    defineRoute({
-        alias: '/mypreferencescontrols.html',
-        path: 'user/controls/index.html',
-        autoFocus: false,
-        controller: 'user/controls/index'
-    });
-
-    defineRoute({
-        alias: '/mypreferencesdisplay.html',
-        path: 'user/display/index.html',
-        autoFocus: false,
-        controller: 'user/display/index'
-    });
-
-    defineRoute({
-        alias: '/mypreferenceshome.html',
-        path: 'user/home/index.html',
-        autoFocus: false,
-        controller: 'user/home/index'
-    });
-
-    defineRoute({
-        alias: '/mypreferencesquickconnect.html',
-        path: 'user/quickConnect/index.html',
-        autoFocus: false,
-        transition: 'fade',
-        controller: 'user/quickConnect/index'
-    });
-    defineRoute({
-        alias: '/mypreferencesplayback.html',
-        path: 'user/playback/index.html',
-        autoFocus: false,
-        controller: 'user/playback/index'
-    });
-
-    defineRoute({
-        alias: '/mypreferencessubtitles.html',
-        path: 'user/subtitles/index.html',
-        autoFocus: false,
-        controller: 'user/subtitles/index'
-    });
-
     defineRoute({
         alias: '/dashboard.html',
         path: 'dashboard/dashboard.html',
@@ -293,27 +244,6 @@ import { appRouter } from '../components/appRouter';
         controller: 'dashboard/plugins/repositories/index'
     });
 
-    defineRoute({
-        alias: '/list.html',
-        path: 'list.html',
-        autoFocus: false,
-        controller: 'list'
-    });
-
-    defineRoute({
-        alias: '/details',
-        path: 'itemDetails/index.html',
-        controller: 'itemDetails/index',
-        autoFocus: false
-    });
-
-    defineRoute({
-        alias: '/livetv.html',
-        path: 'livetv.html',
-        controller: 'livetv/livetvsuggested',
-        autoFocus: false
-    });
-
     defineRoute({
         alias: '/livetvguideprovider.html',
         path: 'livetvguideprovider.html',
@@ -393,13 +323,6 @@ import { appRouter } from '../components/appRouter';
         controller: 'dashboard/streaming'
     });
 
-    defineRoute({
-        alias: '/tv.html',
-        path: 'shows/tvrecommended.html',
-        autoFocus: false,
-        controller: 'shows/tvrecommended'
-    });
-
     defineRoute({
         alias: '/wizardremoteaccess.html',
         path: 'wizard/remote/index.html',
@@ -448,27 +371,6 @@ import { appRouter } from '../components/appRouter';
         anonymous: true
     });
 
-    defineRoute({
-        alias: '/video',
-        path: 'playback/video/index.html',
-        controller: 'playback/video/index',
-        autoFocus: false,
-        type: 'video-osd',
-        supportsThemeMedia: true,
-        fullscreen: true,
-        enableMediaControl: false
-    });
-
-    defineRoute({
-        alias: '/queue',
-        path: 'playback/queue/index.html',
-        controller: 'playback/queue/index',
-        autoFocus: false,
-        fullscreen: true,
-        supportsThemeMedia: true,
-        enableMediaControl: false
-    });
-
     defineRoute({
         path: '/configurationpage',
         autoFocus: false,