Remove .html from routes

src/apps/dashboard/routes/users/profile.tsx

@@ -298,7 +298,7 @@ const UserEdit = () => {
                     className='lnkEditUserPreferencesContainer'
                     style={{ paddingBottom: '1em' }}
                 >
-                    <LinkButton className='lnkEditUserPreferences button-link' href={userDto?.Id ? `mypreferencesmenu.html?userId=${userDto.Id}` : undefined}>
+                    <LinkButton className='lnkEditUserPreferences button-link' href={userDto?.Id ? `mypreferencesmenu?userId=${userDto.Id}` : undefined}>
                         {globalize.translate('ButtonEditOtherUserPreferences')}
                     </LinkButton>
                 </div>

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

@@ -35,13 +35,13 @@ const SearchButton: FC<SearchButtonProps> = ({ isTabsAvailable }) => {
     const location = useLocation();
     const [searchParams] = useSearchParams();
 
-    const isSearchPath = location.pathname === '/search.html';
+    const isSearchPath = location.pathname === '/search';
     const createSearchLink = isTabsAvailable ?
         {
-            pathname: '/search.html',
+            pathname: '/search',
             search: `?${createSearchParams(getUrlParams(searchParams))}`
         } :
-        '/search.html';
+        '/search';
 
     return (
         <Tooltip title={globalize.translate('Search')}>

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

@@ -14,11 +14,11 @@ interface AppToolbarProps {
 }
 
 const PUBLIC_PATHS = [
-    '/addserver.html',
+    '/addserver',
-    '/selectserver.html',
+    '/selectserver',
-    '/login.html',
+    '/login',
-    '/forgotpassword.html',
+    '/forgotpassword',
-    '/forgotpasswordpin.html'
+    '/forgotpasswordpin'
 ];
 
 const ExperimentalAppToolbar: FC<AppToolbarProps> = ({

src/apps/experimental/components/drawers/MainDrawerContent.tsx

@@ -30,7 +30,7 @@ const MainDrawerContent = () => {
     const userViews = userViewsData?.Items || [];
     const webConfig = useWebConfig();
 
-    const isHomeSelected = location.pathname === '/home.html' && (!location.search || location.search === '?tab=0');
+    const isHomeSelected = location.pathname === '/home' && (!location.search || location.search === '?tab=0');
 
     return (
         <>
@@ -40,7 +40,7 @@ const MainDrawerContent = () => {
                     <DrawerHeaderLink />
                 </ListItem>
                 <ListItem disablePadding>
-                    <ListItemLink to='/home.html' selected={isHomeSelected}>
+                    <ListItemLink to='/home' selected={isHomeSelected}>
                         <ListItemIcon>
                             <Home />
                         </ListItemIcon>
@@ -48,7 +48,7 @@ const MainDrawerContent = () => {
                     </ListItemLink>
                 </ListItem>
                 <ListItem disablePadding>
-                    <ListItemLink to='/home.html?tab=1'>
+                    <ListItemLink to='/home?tab=1'>
                         <ListItemIcon>
                             <Favorite />
                         </ListItemIcon>

src/apps/experimental/components/tabs/tabRoutes.ts

@@ -36,7 +36,7 @@ export const getDefaultTabIndex = (path: string, libraryId?: string | null) => {
 
 const TabRoutes: TabRoute[] = [
     {
-        path: '/livetv.html',
+        path: '/livetv',
         tabs: [
             {
                 index: 0,
@@ -72,7 +72,7 @@ const TabRoutes: TabRoute[] = [
         ]
     },
     {
-        path: '/movies.html',
+        path: '/movies',
         tabs: [
             {
                 index: 0,
@@ -108,7 +108,7 @@ const TabRoutes: TabRoute[] = [
         ]
     },
     {
-        path: '/music.html',
+        path: '/music',
         tabs: [
             {
                 index: 0,
@@ -149,7 +149,7 @@ const TabRoutes: TabRoute[] = [
         ]
     },
     {
-        path: '/tv.html',
+        path: '/tv',
         tabs: [
             {
                 index: 0,
@@ -185,7 +185,7 @@ const TabRoutes: TabRoute[] = [
         ]
     },
     {
-        path: '/homevideos.html',
+        path: '/homevideos',
         tabs: [
             {
                 index: 0,

src/apps/experimental/features/details/components/buttons/CancelSeriesTimerButton.tsx

@@ -36,7 +36,7 @@ const CancelSeriesTimerButton: FC<CancelSeriesTimerButtonProps> = ({
                         onSuccess: async () => {
                             toast(globalize.translate('SeriesCancelled'));
                             loading.hide();
-                            navigate('/livetv.html');
+                            navigate('/livetv');
                         },
                         onError: (err: unknown) => {
                             loading.hide();

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

@@ -2,14 +2,14 @@ import { AsyncRoute } from 'components/router/AsyncRoute';
 import { AppType } from 'constants/appType';
 
 export const ASYNC_USER_ROUTES: AsyncRoute[] = [
-    { path: 'home.html', page: 'home', type: AppType.Experimental },
+    { path: 'home', page: 'home', type: AppType.Experimental },
     { path: 'quickconnect', page: 'quickConnect' },
-    { path: 'search.html', page: 'search' },
+    { path: 'search', page: 'search' },
-    { path: 'userprofile.html', page: 'user/userprofile' },
+    { path: 'userprofile', page: 'user/userprofile' },
-    { path: 'movies.html', page: 'movies', type: AppType.Experimental },
+    { path: 'movies', page: 'movies', type: AppType.Experimental },
-    { path: 'tv.html', page: 'shows', type: AppType.Experimental },
+    { path: 'tv', page: 'shows', type: AppType.Experimental },
-    { path: 'music.html', page: 'music', type: AppType.Experimental },
+    { path: 'music', page: 'music', type: AppType.Experimental },
-    { path: 'livetv.html', page: 'livetv', type: AppType.Experimental },
+    { path: 'livetv', page: 'livetv', type: AppType.Experimental },
-    { path: 'mypreferencesdisplay.html', page: 'user/display', type: AppType.Experimental },
+    { path: 'mypreferencesdisplay', page: 'user/display', type: AppType.Experimental },
-    { path: 'homevideos.html', page: 'homevideos', type: AppType.Experimental }
+    { path: 'homevideos', page: 'homevideos', type: AppType.Experimental }
 ];

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

@@ -2,77 +2,77 @@ import { LegacyRoute } from '../../../../components/router/LegacyRoute';
 
 export const LEGACY_PUBLIC_ROUTES: LegacyRoute[] = [
     {
-        path: 'addserver.html',
+        path: 'addserver',
         pageProps: {
             controller: 'session/addServer/index',
             view: 'session/addServer/index.html'
         }
     },
     {
-        path: 'selectserver.html',
+        path: 'selectserver',
         pageProps: {
             controller: 'session/selectServer/index',
             view: 'session/selectServer/index.html'
         }
     },
     {
-        path: 'login.html',
+        path: 'login',
         pageProps: {
             controller: 'session/login/index',
             view: 'session/login/index.html'
         }
     },
     {
-        path: 'forgotpassword.html',
+        path: 'forgotpassword',
         pageProps: {
             controller: 'session/forgotPassword/index',
             view: 'session/forgotPassword/index.html'
         }
     },
     {
-        path: 'forgotpasswordpin.html',
+        path: 'forgotpasswordpin',
         pageProps: {
             controller: 'session/resetPassword/index',
             view: 'session/resetPassword/index.html'
         }
     },
     {
-        path: 'wizardremoteaccess.html',
+        path: 'wizardremoteaccess',
         pageProps: {
             controller: 'wizard/remote/index',
             view: 'wizard/remote/index.html'
         }
     },
     {
-        path: 'wizardfinish.html',
+        path: 'wizardfinish',
         pageProps: {
             controller: 'wizard/finish/index',
             view: 'wizard/finish/index.html'
         }
     },
     {
-        path: 'wizardlibrary.html',
+        path: 'wizardlibrary',
         pageProps: {
             controller: 'wizard/library',
             view: 'wizard/library.html'
         }
     },
     {
-        path: 'wizardsettings.html',
+        path: 'wizardsettings',
         pageProps: {
             controller: 'wizard/settings/index',
             view: 'wizard/settings/index.html'
         }
     },
     {
-        path: 'wizardstart.html',
+        path: 'wizardstart',
         pageProps: {
             controller: 'wizard/start/index',
             view: 'wizard/start/index.html'
         }
     },
     {
-        path: 'wizarduser.html',
+        path: 'wizarduser',
         pageProps: {
             controller: 'wizard/user/index',
             view: 'wizard/user/index.html'

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

@@ -8,7 +8,7 @@ export const LEGACY_USER_ROUTES: LegacyRoute[] = [
             view: 'itemDetails/index.html'
         }
     }, {
-        path: 'list.html',
+        path: 'list',
         pageProps: {
             controller: 'list',
             view: 'list.html'
@@ -20,31 +20,31 @@ export const LEGACY_USER_ROUTES: LegacyRoute[] = [
             view: 'lyrics.html'
         }
     }, {
-        path: 'mypreferencesmenu.html',
+        path: 'mypreferencesmenu',
         pageProps: {
             controller: 'user/menu/index',
             view: 'user/menu/index.html'
         }
     }, {
-        path: 'mypreferencescontrols.html',
+        path: 'mypreferencescontrols',
         pageProps: {
             controller: 'user/controls/index',
             view: 'user/controls/index.html'
         }
     }, {
-        path: 'mypreferenceshome.html',
+        path: 'mypreferenceshome',
         pageProps: {
             controller: 'user/home/index',
             view: 'user/home/index.html'
         }
     }, {
-        path: 'mypreferencesplayback.html',
+        path: 'mypreferencesplayback',
         pageProps: {
             controller: 'user/playback/index',
             view: 'user/playback/index.html'
         }
     }, {
-        path: 'mypreferencessubtitles.html',
+        path: 'mypreferencessubtitles',
         pageProps: {
             controller: 'user/subtitles/index',
             view: 'user/subtitles/index.html'

src/apps/experimental/routes/routes.tsx

@@ -16,7 +16,7 @@ export const EXPERIMENTAL_APP_ROUTES: RouteObject[] = [
         path: '/*',
         lazy: () => import('../AppLayout'),
         children: [
-            { index: true, element: <Navigate replace to='/home.html' /> },
+            { index: true, element: <Navigate replace to='/home' /> },
 
             {
                 /* User routes */

src/apps/stable/routes/asyncRoutes/user.ts

@@ -2,6 +2,6 @@ import { AsyncRoute } from '../../../../components/router/AsyncRoute';
 
 export const ASYNC_USER_ROUTES: AsyncRoute[] = [
     { path: 'quickconnect', page: 'quickConnect' },
-    { path: 'search.html', page: 'search' },
+    { path: 'search', page: 'search' },
-    { path: 'userprofile.html', page: 'user/userprofile' }
+    { path: 'userprofile', page: 'user/userprofile' }
 ];

src/apps/stable/routes/legacyRoutes/public.ts

@@ -2,77 +2,77 @@ import { LegacyRoute } from '../../../../components/router/LegacyRoute';
 
 export const LEGACY_PUBLIC_ROUTES: LegacyRoute[] = [
     {
-        path: 'addserver.html',
+        path: 'addserver',
         pageProps: {
             controller: 'session/addServer/index',
             view: 'session/addServer/index.html'
         }
     },
     {
-        path: 'selectserver.html',
+        path: 'selectserver',
         pageProps: {
             controller: 'session/selectServer/index',
             view: 'session/selectServer/index.html'
         }
     },
     {
-        path: 'login.html',
+        path: 'login',
         pageProps: {
             controller: 'session/login/index',
             view: 'session/login/index.html'
         }
     },
     {
-        path: 'forgotpassword.html',
+        path: 'forgotpassword',
         pageProps: {
             controller: 'session/forgotPassword/index',
             view: 'session/forgotPassword/index.html'
         }
     },
     {
-        path: 'forgotpasswordpin.html',
+        path: 'forgotpasswordpin',
         pageProps: {
             controller: 'session/resetPassword/index',
             view: 'session/resetPassword/index.html'
         }
     },
     {
-        path: 'wizardremoteaccess.html',
+        path: 'wizardremoteaccess',
         pageProps: {
             controller: 'wizard/remote/index',
             view: 'wizard/remote/index.html'
         }
     },
     {
-        path: 'wizardfinish.html',
+        path: 'wizardfinish',
         pageProps: {
             controller: 'wizard/finish/index',
             view: 'wizard/finish/index.html'
         }
     },
     {
-        path: 'wizardlibrary.html',
+        path: 'wizardlibrary',
         pageProps: {
             controller: 'wizard/library',
             view: 'wizard/library.html'
         }
     },
     {
-        path: 'wizardsettings.html',
+        path: 'wizardsettings',
         pageProps: {
             controller: 'wizard/settings/index',
             view: 'wizard/settings/index.html'
         }
     },
     {
-        path: 'wizardstart.html',
+        path: 'wizardstart',
         pageProps: {
             controller: 'wizard/start/index',
             view: 'wizard/start/index.html'
         }
     },
     {
-        path: 'wizarduser.html',
+        path: 'wizarduser',
         pageProps: {
             controller: 'wizard/user/index',
             view: 'wizard/user/index.html'

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

@@ -8,13 +8,13 @@ export const LEGACY_USER_ROUTES: LegacyRoute[] = [
             view: 'itemDetails/index.html'
         }
     }, {
-        path: 'list.html',
+        path: 'list',
         pageProps: {
             controller: 'list',
             view: 'list.html'
         }
     }, {
-        path: 'livetv.html',
+        path: 'livetv',
         pageProps: {
             controller: 'livetv/livetvsuggested',
             view: 'livetv.html'
@@ -26,49 +26,49 @@ export const LEGACY_USER_ROUTES: LegacyRoute[] = [
             view: 'lyrics.html'
         }
     }, {
-        path: 'music.html',
+        path: 'music',
         pageProps: {
             controller: 'music/musicrecommended',
             view: 'music/music.html'
         }
     }, {
-        path: 'mypreferencesmenu.html',
+        path: 'mypreferencesmenu',
         pageProps: {
             controller: 'user/menu/index',
             view: 'user/menu/index.html'
         }
     }, {
-        path: 'mypreferencescontrols.html',
+        path: 'mypreferencescontrols',
         pageProps: {
             controller: 'user/controls/index',
             view: 'user/controls/index.html'
         }
     }, {
-        path: 'mypreferencesdisplay.html',
+        path: 'mypreferencesdisplay',
         pageProps: {
             controller: 'user/display/index',
             view: 'user/display/index.html'
         }
     }, {
-        path: 'mypreferenceshome.html',
+        path: 'mypreferenceshome',
         pageProps: {
             controller: 'user/home/index',
             view: 'user/home/index.html'
         }
     }, {
-        path: 'mypreferencesplayback.html',
+        path: 'mypreferencesplayback',
         pageProps: {
             controller: 'user/playback/index',
             view: 'user/playback/index.html'
         }
     }, {
-        path: 'mypreferencessubtitles.html',
+        path: 'mypreferencessubtitles',
         pageProps: {
             controller: 'user/subtitles/index',
             view: 'user/subtitles/index.html'
         }
     }, {
-        path: 'tv.html',
+        path: 'tv',
         pageProps: {
             controller: 'shows/tvrecommended',
             view: 'shows/tvrecommended.html'
@@ -93,13 +93,13 @@ export const LEGACY_USER_ROUTES: LegacyRoute[] = [
             isThemeMediaSupported: true
         }
     }, {
-        path: 'home.html',
+        path: 'home',
         pageProps: {
             controller: 'home',
             view: 'home.html'
         }
     }, {
-        path: 'movies.html',
+        path: 'movies',
         pageProps: {
             controller: 'movies/moviesrecommended',
             view: 'movies/movies.html'

src/apps/stable/routes/quickConnect/index.tsx

@@ -84,7 +84,7 @@ const QuickConnectPage: FC = () => {
                                 <p>
                                     {globalize.translate('QuickConnectAuthorizeSuccess')}
                                 </p>
-                                <Link to='/home.html' className='button-link emby-button'>
+                                <Link to='/home' className='button-link emby-button'>
                                     {globalize.translate('GoHome')}
                                 </Link>
                             </div>

src/apps/stable/routes/routes.tsx

@@ -17,7 +17,7 @@ export const STABLE_APP_ROUTES: RouteObject[] = [
         path: '/*',
         Component: AppLayout,
         children: [
-            { index: true, element: <Navigate replace to='/home.html' /> },
+            { index: true, element: <Navigate replace to='/home' /> },
 
             {
                 /* User routes */

src/components/ConnectionRequired.tsx

@@ -9,10 +9,10 @@ import globalize from '../lib/globalize';
 import { ConnectionState } from '../utils/jellyfin-apiclient/ConnectionState';
 
 enum BounceRoutes {
-    Home = '/home.html',
+    Home = '/home',
-    Login = '/login.html',
+    Login = '/login',
-    SelectServer = '/selectserver.html',
+    SelectServer = '/selectserver',
-    StartWizard = '/wizardstart.html'
+    StartWizard = '/wizardstart'
 }
 
 type ConnectionRequiredProps = {

src/components/favoriteitems.js

@@ -137,7 +137,7 @@ function loadSection(elem, userId, topParentId, section, isSingleSection) {
             html += '<div class="sectionTitleContainer sectionTitleContainer-cards padded-left">';
 
             if (!layoutManager.tv && options.Limit && result.Items.length >= options.Limit) {
-                html += '<a is="emby-linkbutton" href="' + ('#/list.html?serverId=' + ApiClient.serverId() + '&type=' + section.types + '&IsFavorite=true') + '" class="more button-flat button-flat-mini sectionTitleTextButton">';
+                html += '<a is="emby-linkbutton" href="' + ('#/list?serverId=' + ApiClient.serverId() + '&type=' + section.types + '&IsFavorite=true') + '" class="more button-flat button-flat-mini sectionTitleTextButton">';
                 html += '<h2 class="sectionTitle sectionTitle-cards">';
                 html += globalize.translate(section.name);
                 html += '</h2>';

src/components/itemContextMenu.js

@@ -562,7 +562,7 @@ function executeCommand(item, id, options) {
                 navigator.share({
                     title: item.Name,
                     text: item.Overview,
-                    url: `${apiClient.serverAddress()}/web/index.html${appRouter.getRouteUrl(item)}`
+                    url: `${apiClient.serverAddress()}/web/${appRouter.getRouteUrl(item)}`
                 });
                 break;
             case 'album':

src/components/router/FallbackRoute.tsx

@@ -43,7 +43,7 @@ const FallbackRoute = () => {
                 <p>{globalize.translate('PageNotFound')}</p>
                 <LinkButton
                     className='button-link'
-                    href='#/home.html'
+                    href='#/home'
                 >
                     {globalize.translate('GoHome')}
                 </LinkButton>

src/components/router/appRouter.js

@@ -13,21 +13,21 @@ import { toApi } from 'utils/jellyfin-apiclient/compat';
 import { history } from 'RootAppRouter';
 
 /** Pages of "no return" (when "Go back" should behave differently, probably quitting the application). */
-const START_PAGE_PATHS = ['/home.html', '/login.html', '/selectserver.html'];
+const START_PAGE_PATHS = ['/home', '/login', '/selectserver'];
 
 /** Pages that do not require a user to be logged in to view. */
 const PUBLIC_PATHS = [
-    '/addserver.html',
+    '/addserver',
-    '/selectserver.html',
+    '/selectserver',
-    '/login.html',
+    '/login',
-    '/forgotpassword.html',
+    '/forgotpassword',
-    '/forgotpasswordpin.html',
+    '/forgotpasswordpin',
-    '/wizardremoteaccess.html',
+    '/wizardremoteaccess',
-    '/wizardfinish.html',
+    '/wizardfinish',
-    '/wizardlibrary.html',
+    '/wizardlibrary',
-    '/wizardsettings.html',
+    '/wizardsettings',
-    '/wizardstart.html',
+    '/wizardstart',
-    '/wizarduser.html'
+    '/wizarduser'
 ];
 
 class AppRouter {
@@ -89,7 +89,7 @@ class AppRouter {
         path = path.replace(this.baseUrl(), '');
 
         // can't use this with home right now due to the back menu
-        if (history.location.pathname === path && path !== '/home.html') {
+        if (history.location.pathname === path && path !== '/home') {
             loading.hide();
             return Promise.resolve();
         }
@@ -249,11 +249,11 @@ class AppRouter {
         const serverId = item.ServerId || options.serverId;
 
         if (item === 'settings') {
-            return '#/mypreferencesmenu.html';
+            return '#/mypreferencesmenu';
         }
 
         if (item === 'wizard') {
-            return '#/wizardstart.html';
+            return '#/wizardstart';
         }
 
         if (item === 'manageserver') {
@@ -261,15 +261,15 @@ class AppRouter {
         }
 
         if (item === 'recordedtv') {
-            return '#/livetv.html?tab=3&serverId=' + options.serverId;
+            return '#/livetv?tab=3&serverId=' + options.serverId;
         }
 
         if (item === 'nextup') {
-            return '#/list.html?type=nextup&serverId=' + options.serverId;
+            return '#/list?type=nextup&serverId=' + options.serverId;
         }
 
         if (item === 'list') {
-            let urlForList = '#/list.html?serverId=' + options.serverId + '&type=' + options.itemTypes;
+            let urlForList = '#/list?serverId=' + options.serverId + '&type=' + options.itemTypes;
 
             if (options.isFavorite) {
                 urlForList += '&IsFavorite=true';
@@ -304,49 +304,49 @@ class AppRouter {
 
         if (item === 'livetv') {
             if (options.section === 'programs') {
-                return '#/livetv.html?tab=0&serverId=' + options.serverId;
+                return '#/livetv?tab=0&serverId=' + options.serverId;
             }
             if (options.section === 'guide') {
-                return '#/livetv.html?tab=1&serverId=' + options.serverId;
+                return '#/livetv?tab=1&serverId=' + options.serverId;
             }
 
             if (options.section === 'movies') {
-                return '#/list.html?type=Programs&IsMovie=true&serverId=' + options.serverId;
+                return '#/list?type=Programs&IsMovie=true&serverId=' + options.serverId;
             }
 
             if (options.section === 'shows') {
-                return '#/list.html?type=Programs&IsSeries=true&IsMovie=false&IsNews=false&serverId=' + options.serverId;
+                return '#/list?type=Programs&IsSeries=true&IsMovie=false&IsNews=false&serverId=' + options.serverId;
             }
 
             if (options.section === 'sports') {
-                return '#/list.html?type=Programs&IsSports=true&serverId=' + options.serverId;
+                return '#/list?type=Programs&IsSports=true&serverId=' + options.serverId;
             }
 
             if (options.section === 'kids') {
-                return '#/list.html?type=Programs&IsKids=true&serverId=' + options.serverId;
+                return '#/list?type=Programs&IsKids=true&serverId=' + options.serverId;
             }
 
             if (options.section === 'news') {
-                return '#/list.html?type=Programs&IsNews=true&serverId=' + options.serverId;
+                return '#/list?type=Programs&IsNews=true&serverId=' + options.serverId;
             }
 
             if (options.section === 'onnow') {
-                return '#/list.html?type=Programs&IsAiring=true&serverId=' + options.serverId;
+                return '#/list?type=Programs&IsAiring=true&serverId=' + options.serverId;
             }
 
             if (options.section === 'channels') {
-                return '#/livetv.html?tab=2&serverId=' + options.serverId;
+                return '#/livetv?tab=2&serverId=' + options.serverId;
             }
 
             if (options.section === 'dvrschedule') {
-                return '#/livetv.html?tab=4&serverId=' + options.serverId;
+                return '#/livetv?tab=4&serverId=' + options.serverId;
             }
 
             if (options.section === 'seriesrecording') {
-                return '#/livetv.html?tab=5&serverId=' + options.serverId;
+                return '#/livetv?tab=5&serverId=' + options.serverId;
             }
 
-            return '#/livetv.html?serverId=' + options.serverId;
+            return '#/livetv?serverId=' + options.serverId;
         }
 
         if (itemType == 'SeriesTimer') {
@@ -354,11 +354,11 @@ class AppRouter {
         }
 
         if (item.CollectionType == CollectionType.Livetv) {
-            return `#/livetv.html?collectionType=${item.CollectionType}`;
+            return `#/livetv?collectionType=${item.CollectionType}`;
         }
 
         if (item.Type === 'Genre') {
-            url = '#/list.html?genreId=' + item.Id + '&serverId=' + serverId;
+            url = '#/list?genreId=' + item.Id + '&serverId=' + serverId;
 
             if (context === 'livetv') {
                 url += '&type=Programs';
@@ -372,7 +372,7 @@ class AppRouter {
         }
 
         if (item.Type === 'MusicGenre') {
-            url = '#/list.html?musicGenreId=' + item.Id + '&serverId=' + serverId;
+            url = '#/list?musicGenreId=' + item.Id + '&serverId=' + serverId;
 
             if (options.parentId) {
                 url += '&parentId=' + options.parentId;
@@ -382,7 +382,7 @@ class AppRouter {
         }
 
         if (item.Type === 'Studio') {
-            url = '#/list.html?studioId=' + item.Id + '&serverId=' + serverId;
+            url = '#/list?studioId=' + item.Id + '&serverId=' + serverId;
 
             if (options.parentId) {
                 url += '&parentId=' + options.parentId;
@@ -392,7 +392,7 @@ class AppRouter {
         }
 
         if (item === 'tag') {
-            url = `#/list.html?type=tag&tag=${encodeURIComponent(options.tag)}&serverId=${serverId}`;
+            url = `#/list?type=tag&tag=${encodeURIComponent(options.tag)}&serverId=${serverId}`;
 
             if (options.parentId) {
                 url += '&parentId=' + options.parentId;
@@ -403,7 +403,7 @@ class AppRouter {
 
         if (context !== 'folders' && !itemHelper.isLocalItem(item)) {
             if (item.CollectionType == CollectionType.Movies) {
-                url = `#/movies.html?topParentId=${item.Id}&collectionType=${item.CollectionType}`;
+                url = `#/movies?topParentId=${item.Id}&collectionType=${item.CollectionType}`;
 
                 if (options && options.section === 'latest') {
                     url += '&tab=1';
@@ -413,7 +413,7 @@ class AppRouter {
             }
 
             if (item.CollectionType == CollectionType.Tvshows) {
-                url = `#/tv.html?topParentId=${item.Id}&collectionType=${item.CollectionType}`;
+                url = `#/tv?topParentId=${item.Id}&collectionType=${item.CollectionType}`;
 
                 if (options && options.section === 'latest') {
                     url += '&tab=1';
@@ -423,7 +423,7 @@ class AppRouter {
             }
 
             if (item.CollectionType == CollectionType.Music) {
-                url = `#/music.html?topParentId=${item.Id}&collectionType=${item.CollectionType}`;
+                url = `#/music?topParentId=${item.Id}&collectionType=${item.CollectionType}`;
 
                 if (options?.section === 'latest') {
                     url += '&tab=1';
@@ -435,7 +435,7 @@ class AppRouter {
             const layoutMode = localStorage.getItem('layout');
 
             if (layoutMode === 'experimental' && item.CollectionType == CollectionType.Homevideos) {
-                url = '#/homevideos.html?topParentId=' + item.Id;
+                url = '#/homevideos?topParentId=' + item.Id;
 
                 return url;
             }
@@ -455,7 +455,7 @@ class AppRouter {
 
         if (item.IsFolder) {
             if (id) {
-                return '#/list.html?parentId=' + id + '&serverId=' + serverId;
+                return '#/list?parentId=' + id + '&serverId=' + serverId;
             }
 
             return '#';
@@ -465,7 +465,7 @@ class AppRouter {
     }
 
     showLocalLogin(serverId) {
-        return this.show('login.html?serverid=' + serverId);
+        return this.show('login?serverid=' + serverId);
     }
 
     showVideoOsd() {
@@ -473,11 +473,11 @@ class AppRouter {
     }
 
     showSelectServer() {
-        return this.show('selectserver.html');
+        return this.show('selectserver');
     }
 
     showSettings() {
-        return this.show('mypreferencesmenu.html');
+        return this.show('mypreferencesmenu');
     }
 
     showNowPlaying() {
@@ -485,27 +485,27 @@ class AppRouter {
     }
 
     showGuide() {
-        return this.show('livetv.html?tab=1');
+        return this.show('livetv?tab=1');
     }
 
     goHome() {
-        return this.show('home.html');
+        return this.show('home');
     }
 
     showSearch() {
-        return this.show('search.html');
+        return this.show('search');
     }
 
     showLiveTV() {
-        return this.show('livetv.html');
+        return this.show('livetv');
     }
 
     showRecordedTV() {
-        return this.show('livetv.html?tab=3');
+        return this.show('livetv?tab=3');
     }
 
     showFavorites() {
-        return this.show('home.html?tab=1');
+        return this.show('home?tab=1');
     }
 }
 

src/components/toolbar/AppUserMenu.tsx

@@ -73,7 +73,7 @@ const AppUserMenu: FC<AppUserMenuProps> = ({
         >
             <MenuItem
                 component={Link}
-                to={`/userprofile.html?userId=${user?.Id}`}
+                to={`/userprofile?userId=${user?.Id}`}
                 onClick={onMenuClose}
             >
                 <ListItemIcon>
@@ -85,7 +85,7 @@ const AppUserMenu: FC<AppUserMenuProps> = ({
             </MenuItem>
             <MenuItem
                 component={Link}
-                to='/mypreferencesmenu.html'
+                to='/mypreferencesmenu'
                 onClick={onMenuClose}
             >
                 <ListItemIcon>

src/controllers/itemDetails/index.js

@@ -1995,7 +1995,7 @@ export default function (view, params) {
     function onCancelSeriesTimerClick() {
         import('../../components/recordingcreator/recordinghelper').then(({ default: recordingHelper }) => {
             recordingHelper.cancelSeriesTimerWithConfirmation(currentItem.Id, currentItem.ServerId).then(function () {
-                Dashboard.navigate('livetv.html');
+                Dashboard.navigate('livetv');
             });
         });
     }

src/controllers/livetv.html

@@ -3,7 +3,7 @@
         <div class="pageTabContent" id="suggestionsTab" data-index="0">
             <div id="activePrograms" class="verticalSection">
                 <div class="sectionTitleContainer sectionTitleContainer-cards padded-left">
-                    <a href="#/list.html?type=Programs&IsAiring=true" is="emby-linkbutton" class="button-flat button-flat-mini sectionTitleTextButton sectionTitleTextButton-programs">
+                    <a href="#/list?type=Programs&IsAiring=true" is="emby-linkbutton" class="button-flat button-flat-mini sectionTitleTextButton sectionTitleTextButton-programs">
                         <h2 class="sectionTitle sectionTitle-cards" style="display: inline-block; vertical-align: middle;">${HeaderOnNow}</h2>
                         <span class="material-icons chevron_right" aria-hidden="true"></span>
                     </a>
@@ -12,7 +12,7 @@
             </div>
             <div id="upcomingEpisodes" class="verticalSection">
                 <div class="sectionTitleContainer sectionTitleContainer-cards padded-left">
-                    <a href="#/list.html?type=Programs&IsSeries=true&IsMovie=false&IsNews=false" is="emby-linkbutton" class="button-flat button-flat-mini sectionTitleTextButton sectionTitleTextButton-programs">
+                    <a href="#/list?type=Programs&IsSeries=true&IsMovie=false&IsNews=false" is="emby-linkbutton" class="button-flat button-flat-mini sectionTitleTextButton sectionTitleTextButton-programs">
                         <h2 class="sectionTitle sectionTitle-cards" style="display: inline-block; vertical-align: middle;">${Shows}</h2>
                         <span class="material-icons chevron_right" aria-hidden="true"></span>
                     </a>
@@ -21,7 +21,7 @@
             </div>
             <div id="upcomingTvMovies" class="verticalSection">
                 <div class="sectionTitleContainer sectionTitleContainer-cards padded-left">
-                    <a href="#/list.html?type=Programs&IsMovie=true" is="emby-linkbutton" class="button-flat button-flat-mini sectionTitleTextButton sectionTitleTextButton-programs">
+                    <a href="#/list?type=Programs&IsMovie=true" is="emby-linkbutton" class="button-flat button-flat-mini sectionTitleTextButton sectionTitleTextButton-programs">
                         <h2 class="sectionTitle sectionTitle-cards" style="display: inline-block; vertical-align: middle;">${Movies}</h2>
                         <span class="material-icons chevron_right" aria-hidden="true"></span>
                     </a>
@@ -30,7 +30,7 @@
             </div>
             <div id="upcomingSports" class="verticalSection">
                 <div class="sectionTitleContainer sectionTitleContainer-cards padded-left">
-                    <a href="#/list.html?type=Programs&IsSports=true" is="emby-linkbutton" class="button-flat button-flat-mini sectionTitleTextButton sectionTitleTextButton-programs">
+                    <a href="#/list?type=Programs&IsSports=true" is="emby-linkbutton" class="button-flat button-flat-mini sectionTitleTextButton sectionTitleTextButton-programs">
                         <h2 class="sectionTitle sectionTitle-cards" style="display: inline-block; vertical-align: middle;">${Sports}</h2>
                         <span class="material-icons chevron_right" aria-hidden="true"></span>
                     </a>
@@ -39,7 +39,7 @@
             </div>
             <div id="upcomingKids" class="verticalSection">
                 <div class="sectionTitleContainer sectionTitleContainer-cards padded-left">
-                    <a href="#/list.html?type=Programs&IsKids=true" is="emby-linkbutton" class="button-flat button-flat-mini sectionTitleTextButton sectionTitleTextButton-programs">
+                    <a href="#/list?type=Programs&IsKids=true" is="emby-linkbutton" class="button-flat button-flat-mini sectionTitleTextButton sectionTitleTextButton-programs">
                         <h2 class="sectionTitle sectionTitle-cards" style="display: inline-block; vertical-align: middle;">${HeaderForKids}</h2>
                         <span class="material-icons chevron_right" aria-hidden="true"></span>
                     </a>
@@ -48,7 +48,7 @@
             </div>
             <div id="upcomingNews" class="verticalSection">
                 <div class="sectionTitleContainer sectionTitleContainer-cards padded-left">
-                    <a href="#/list.html?type=Programs&IsNews=true" is="emby-linkbutton" class="button-flat button-flat-mini sectionTitleTextButton sectionTitleTextButton-programs">
+                    <a href="#/list?type=Programs&IsNews=true" is="emby-linkbutton" class="button-flat button-flat-mini sectionTitleTextButton sectionTitleTextButton-programs">
                         <h2 class="sectionTitle sectionTitle-cards" style="display: inline-block; vertical-align: middle;">${News}</h2>
                         <span class="material-icons chevron_right" aria-hidden="true"></span>
                     </a>

src/controllers/livetv/livetvrecordings.js

@@ -70,7 +70,7 @@ function onMoreClick() {
     const type = this.getAttribute('data-type');
 
     if (type === 'latest') {
-        Dashboard.navigate('list.html?type=Recordings&serverId=' + ApiClient.serverId());
+        Dashboard.navigate('list?type=Recordings&serverId=' + ApiClient.serverId());
     }
 }
 

src/controllers/livetv/livetvsuggested.js

@@ -323,7 +323,7 @@ export default function (view, params) {
     function onInputCommand(evt) {
         if (evt.detail.command === 'search') {
             evt.preventDefault();
-            Dashboard.navigate('search.html?collectionType=livetv');
+            Dashboard.navigate('search?collectionType=livetv');
         }
     }
 

src/controllers/movies/moviesrecommended.js

@@ -370,7 +370,7 @@ export default function (view, params) {
     function onInputCommand(e) {
         if (e.detail.command === 'search') {
             e.preventDefault();
-            Dashboard.navigate('search.html?collectionType=movies&parentId=' + params.topParentId);
+            Dashboard.navigate('search?collectionType=movies&parentId=' + params.topParentId);
         }
     }
 

src/controllers/music/musicrecommended.js

@@ -348,7 +348,7 @@ export default function (view, params) {
     function onInputCommand(e) {
         if (e.detail.command === 'search') {
             e.preventDefault();
-            Dashboard.navigate('search.html?collectionType=music&parentId=' + params.topParentId);
+            Dashboard.navigate('search?collectionType=music&parentId=' + params.topParentId);
         }
     }
 

src/controllers/session/addServer/index.js

@@ -12,14 +12,14 @@ function handleConnectionResult(page, result) {
         case ConnectionState.SignedIn: {
             const apiClient = result.ApiClient;
             Dashboard.onServerChanged(apiClient.getCurrentUserId(), apiClient.accessToken(), apiClient);
-            Dashboard.navigate('home.html');
+            Dashboard.navigate('home');
             break;
         }
         case ConnectionState.ServerSignIn:
-            Dashboard.navigate('login.html?serverid=' + result.Servers[0].Id, false, 'none');
+            Dashboard.navigate('login?serverid=' + result.Servers[0].Id, false, 'none');
             break;
         case ConnectionState.ServerSelection:
-            Dashboard.navigate('selectserver.html', false, 'none');
+            Dashboard.navigate('selectserver', false, 'none');
             break;
         case ConnectionState.ServerUpdateNeeded:
             Dashboard.alert({

src/controllers/session/forgotPassword/index.js

@@ -30,7 +30,7 @@ function processForgotPasswordResult(result) {
             message: msg,
             title: globalize.translate('ButtonForgotPassword'),
             callback: function () {
-                Dashboard.navigate('forgotpasswordpin.html');
+                Dashboard.navigate('forgotpasswordpin');
             }
         });
     }

src/controllers/session/login/index.js

@@ -110,7 +110,7 @@ function authenticateQuickConnect(apiClient, targetUrl) {
 
 function onLoginSuccessful(id, accessToken, apiClient, url) {
     Dashboard.onServerChanged(id, accessToken, apiClient);
-    Dashboard.navigate(url || 'home.html');
+    Dashboard.navigate(url || 'home');
 }
 
 function showManualForm(context, showCancel, focusPassword) {
@@ -201,7 +201,7 @@ export default function (view, params) {
             }
         }
 
-        return '/home.html';
+        return '/home';
     }
 
     function showVisualForm() {
@@ -243,7 +243,7 @@ export default function (view, params) {
         return false;
     });
     view.querySelector('.btnForgotPassword').addEventListener('click', function () {
-        Dashboard.navigate('forgotpassword.html');
+        Dashboard.navigate('forgotpassword');
     });
     view.querySelector('.btnCancel').addEventListener('click', showVisualForm);
     view.querySelector('.btnQuick').addEventListener('click', function () {

src/controllers/session/selectServer/index.html

@@ -9,7 +9,7 @@
             </div>
         </div>
         <div class="padded-top padded-left padded-right flex flex-shrink-zero justify-content-center verticalSection flex-wrap-wrap margin-auto-x">
-            <a is="emby-linkbutton" href="#/addserver.html" class="raised cancel btnAddServer flex-shrink-zero" style="margin: .25em;">
+            <a is="emby-linkbutton" href="#/addserver" class="raised cancel btnAddServer flex-shrink-zero" style="margin: .25em;">
                 <span>${ButtonAddServer}</span>
             </a>
         </div>

src/controllers/session/selectServer/index.js

@@ -115,12 +115,12 @@ export default function (view, params) {
             switch (result.State) {
                 case ConnectionState.SignedIn:
                     Dashboard.onServerChanged(apiClient.getCurrentUserId(), apiClient.accessToken(), apiClient);
-                    Dashboard.navigate('home.html');
+                    Dashboard.navigate('home');
                     break;
 
                 case ConnectionState.ServerSignIn:
                     Dashboard.onServerChanged(null, null, apiClient);
-                    Dashboard.navigate('login.html?serverid=' + result.Servers[0].Id);
+                    Dashboard.navigate('login?serverid=' + result.Servers[0].Id);
                     break;
 
                 case ConnectionState.ServerUpdateNeeded:

src/controllers/shows/tvrecommended.js

@@ -333,7 +333,7 @@ export default function (view, params) {
     function onInputCommand(e) {
         if (e.detail.command === 'search') {
             e.preventDefault();
-            Dashboard.navigate(`search.html?collectionType=${CollectionType.Tvshows}&parentId=${params.topParentId}`);
+            Dashboard.navigate(`search?collectionType=${CollectionType.Tvshows}&parentId=${params.topParentId}`);
         }
     }
 

src/controllers/user/menu/index.js

@@ -26,13 +26,13 @@ export default function (view, params) {
         const userId = params.userId || Dashboard.getCurrentUserId();
         const page = this;
 
-        page.querySelector('.lnkUserProfile').setAttribute('href', '#/userprofile.html?userId=' + userId);
+        page.querySelector('.lnkUserProfile').setAttribute('href', '#/userprofile?userId=' + userId);
-        page.querySelector('.lnkDisplayPreferences').setAttribute('href', '#/mypreferencesdisplay.html?userId=' + userId);
+        page.querySelector('.lnkDisplayPreferences').setAttribute('href', '#/mypreferencesdisplay?userId=' + userId);
-        page.querySelector('.lnkHomePreferences').setAttribute('href', '#/mypreferenceshome.html?userId=' + userId);
+        page.querySelector('.lnkHomePreferences').setAttribute('href', '#/mypreferenceshome?userId=' + userId);
-        page.querySelector('.lnkPlaybackPreferences').setAttribute('href', '#/mypreferencesplayback.html?userId=' + userId);
+        page.querySelector('.lnkPlaybackPreferences').setAttribute('href', '#/mypreferencesplayback?userId=' + userId);
-        page.querySelector('.lnkSubtitlePreferences').setAttribute('href', '#/mypreferencessubtitles.html?userId=' + userId);
+        page.querySelector('.lnkSubtitlePreferences').setAttribute('href', '#/mypreferencessubtitles?userId=' + userId);
         page.querySelector('.lnkQuickConnectPreferences').setAttribute('href', '#/quickconnect?userId=' + userId);
-        page.querySelector('.lnkControlsPreferences').setAttribute('href', '#/mypreferencescontrols.html?userId=' + userId);
+        page.querySelector('.lnkControlsPreferences').setAttribute('href', '#/mypreferencescontrols?userId=' + userId);
 
         const supportsClientSettings = appHost.supports('clientsettings');
         page.querySelector('.clientSettings').classList.toggle('hide', !supportsClientSettings);

src/controllers/wizard/library.js

@@ -361,7 +361,7 @@ function getVirtualFolderHtml(page, virtualFolder, index) {
 
 window.WizardLibraryPage = {
     next: function () {
-        Dashboard.navigate('wizardsettings.html');
+        Dashboard.navigate('wizardsettings');
     }
 };
 pageClassOn('pageshow', 'mediaLibraryPage', function () {

src/controllers/wizard/remote/index.js

@@ -23,7 +23,7 @@ function save(page) {
 }
 
 function navigateToNextPage() {
-    Dashboard.navigate('wizardfinish.html');
+    Dashboard.navigate('wizardfinish');
 }
 
 function onSubmit(e) {

src/controllers/wizard/settings/index.js

@@ -66,7 +66,7 @@ function reload(page) {
 }
 
 function navigateToNextPage() {
-    Dashboard.navigate('wizardremoteaccess.html');
+    Dashboard.navigate('wizardremoteaccess');
 }
 
 function onSubmit(e) {

src/controllers/wizard/start/index.js

@@ -24,7 +24,7 @@ function save(page) {
             url: apiClient.getUrl('Startup/Configuration'),
             contentType: 'application/json'
         }).then(function () {
-            Dashboard.navigate('wizarduser.html');
+            Dashboard.navigate('wizarduser');
         });
     });
 }

src/controllers/wizard/user/index.js

@@ -11,7 +11,7 @@ function getApiClient() {
 }
 
 function nextWizardPage() {
-    Dashboard.navigate('wizardlibrary.html')
+    Dashboard.navigate('wizardlibrary')
         .catch(err => {
             console.error('[Wizard > User] error navigating to library setup', err);
         });

src/hooks/useCurrentTab.ts

@@ -6,7 +6,7 @@ const useCurrentTab = () => {
     const [searchParams, setSearchParams] = useSearchParams();
     const searchParamsTab = searchParams.get('tab');
     const libraryId =
-        location.pathname === '/livetv.html' ?
+        location.pathname === '/livetv' ?
             'livetv' :
             searchParams.get('topParentId');
     const activeTab: number =

src/manifest.json

@@ -3,7 +3,7 @@
     "description": "The Free Software Media System",
     "lang": "en-US",
     "short_name": "Jellyfin",
-    "start_url": "index.html#/home.html",
+    "start_url": "index.html#/home",
     "theme_color": "#101010",
     "background_color": "#101010",
     "display": "standalone",

src/scripts/itemsByName.js

@@ -302,26 +302,26 @@ function loadItems(element, item, type, query, listOptions) {
 
 function getMoreItemsHref(item, type) {
     if (item.Type === 'Genre') {
-        return '#/list.html?type=' + type + '&genreId=' + item.Id + '&serverId=' + item.ServerId;
+        return '#/list?type=' + type + '&genreId=' + item.Id + '&serverId=' + item.ServerId;
     }
 
     if (item.Type === 'MusicGenre') {
-        return '#/list.html?type=' + type + '&musicGenreId=' + item.Id + '&serverId=' + item.ServerId;
+        return '#/list?type=' + type + '&musicGenreId=' + item.Id + '&serverId=' + item.ServerId;
     }
 
     if (item.Type === 'Studio') {
-        return '#/list.html?type=' + type + '&studioId=' + item.Id + '&serverId=' + item.ServerId;
+        return '#/list?type=' + type + '&studioId=' + item.Id + '&serverId=' + item.ServerId;
     }
 
     if (item.Type === 'MusicArtist') {
-        return '#/list.html?type=' + type + '&artistId=' + item.Id + '&serverId=' + item.ServerId;
+        return '#/list?type=' + type + '&artistId=' + item.Id + '&serverId=' + item.ServerId;
     }
 
     if (item.Type === 'Person') {
-        return '#/list.html?type=' + type + '&personId=' + item.Id + '&serverId=' + item.ServerId;
+        return '#/list?type=' + type + '&personId=' + item.Id + '&serverId=' + item.ServerId;
     }
 
-    return '#/list.html?type=' + type + '&parentId=' + item.Id + '&serverId=' + item.ServerId;
+    return '#/list?type=' + type + '&parentId=' + item.Id + '&serverId=' + item.ServerId;
 }
 
 function addCurrentItemToQuery(query, item) {

src/scripts/libraryMenu.js

@@ -214,11 +214,11 @@ function showSearch() {
 }
 
 function onHeaderUserButtonClick() {
-    Dashboard.navigate('mypreferencesmenu.html');
+    Dashboard.navigate('mypreferencesmenu');
 }
 
 function onHeaderHomeButtonClick() {
-    Dashboard.navigate('home.html');
+    Dashboard.navigate('home');
 }
 
 function showAudioPlayer() {
@@ -321,7 +321,7 @@ function onMainDrawerSelect() {
 function refreshLibraryInfoInDrawer(user) {
     let html = '';
     html += '<div style="height:.5em;"></div>';
-    html += `<a is="emby-linkbutton" class="navMenuOption lnkMediaFolder" href="#/home.html"><span class="material-icons navMenuOptionIcon home" aria-hidden="true"></span><span class="navMenuOptionText">${globalize.translate('Home')}</span></a>`;
+    html += `<a is="emby-linkbutton" class="navMenuOption lnkMediaFolder" href="#/home"><span class="material-icons navMenuOptionIcon home" aria-hidden="true"></span><span class="navMenuOptionText">${globalize.translate('Home')}</span></a>`;
 
     // placeholder for custom menu links
     html += '<div class="customMenuOptions"></div>';
@@ -406,7 +406,7 @@ function getUserViews(apiClient, userId) {
                     guideView.Name = globalize.translate('Guide');
                     guideView.ImageTags = {};
                     guideView.icon = 'dvr';
-                    guideView.url = '#/livetv.html?tab=1';
+                    guideView.url = '#/livetv?tab=1';
                     list.push(guideView);
                 }
             }
@@ -503,7 +503,7 @@ function onSelectServerClick() {
 }
 
 function onSettingsClick() {
-    Dashboard.navigate('mypreferencesmenu.html');
+    Dashboard.navigate('mypreferencesmenu');
 }
 
 function onExitAppClick() {

src/utils/dashboard.js

@@ -105,7 +105,7 @@ export function logout() {
         // Reset cached views
         viewContainer.reset();
         webSettings.getMultiServer().then(multi => {
-            multi ? navigate('selectserver.html') : navigate('login.html');
+            multi ? navigate('selectserver') : navigate('login');
         });
     });
 }
@@ -191,7 +191,7 @@ export function selectServer() {
     if (window.NativeShell && typeof window.NativeShell.selectServer === 'function') {
         window.NativeShell.selectServer();
     } else {
-        navigate('selectserver.html');
+        navigate('selectserver');
     }
 }