Remove legacy devices page

src/apps/dashboard/components/drawer/sections/DevicesDrawerSection.tsx

@@ -27,14 +27,6 @@ const DevicesDrawerSection = () => {
                     <ListItemText primary={globalize.translate('HeaderDevices')} />
                 </ListItemLink>
             </ListItem>
-            <ListItem disablePadding>
-                <ListItemLink to='/dashboard/devices2'>
-                    <ListItemIcon>
-                        <Devices />
-                    </ListItemIcon>
-                    <ListItemText primary={globalize.translate('HeaderDevices')} />
-                </ListItemLink>
-            </ListItem>
             <ListItem disablePadding>
                 <ListItemLink to='/dashboard/activity'>
                     <ListItemIcon>

src/apps/dashboard/controllers/devices/device.html

@@ -1,23 +0,0 @@
-<div id="devicePage" data-role="page" class="page type-interior devicesPage noSecondaryNavPage">
-    <div>
-        <div class="content-primary">
-            <form class="deviceForm">
-                <div class="verticalSection verticalSection-extrabottompadding">
-                    <div class="sectionTitleContainer flex align-items-center">
-                        <h2 class="sectionTitle reportedName"></h2>
-                    </div>
-
-                    <div class="inputContainer">
-                        <input is="emby-input" type="text" id="txtCustomName" label="${LabelDisplayName}" />
-                        <div class="fieldDescription">${LabelCustomDeviceDisplayNameHelp}</div>
-                    </div>
-                </div>
-                <div>
-                    <button is="emby-button" type="submit" class="raised button-submit block">
-                        <span>${Save}</span>
-                    </button>
-                </div>
-            </form>
-        </div>
-    </div>
-</div>

src/apps/dashboard/controllers/devices/device.js

@@ -1,54 +0,0 @@
-import loading from 'components/loading/loading';
-import dom from 'scripts/dom';
-import 'elements/emby-input/emby-input';
-import 'elements/emby-button/emby-button';
-import Dashboard from 'utils/dashboard';
-import { getParameterByName } from 'utils/url.ts';
-
-function load(page, device, deviceOptions) {
-    page.querySelector('#txtCustomName', page).value = deviceOptions?.CustomName || '';
-    page.querySelector('.reportedName', page).innerText = device.Name || '';
-}
-
-function loadData() {
-    const page = this;
-    loading.show();
-    const id = getParameterByName('id');
-    const device = ApiClient.getJSON(ApiClient.getUrl('Devices/Info', {
-        Id: id
-    }));
-    const deviceOptions = ApiClient.getJSON(ApiClient.getUrl('Devices/Options', {
-        Id: id
-    })).catch(() => undefined);
-    Promise.all([device, deviceOptions]).then(function (responses) {
-        load(page, responses[0], responses[1]);
-        loading.hide();
-    });
-}
-
-function save(page) {
-    const id = getParameterByName('id');
-    ApiClient.ajax({
-        url: ApiClient.getUrl('Devices/Options', {
-            Id: id
-        }),
-        type: 'POST',
-        data: JSON.stringify({
-            CustomName: page.querySelector('#txtCustomName').value
-        }),
-        contentType: 'application/json'
-    }).then(Dashboard.processServerConfigurationUpdateResult);
-}
-
-function onSubmit(e) {
-    const form = this;
-    save(dom.parentWithClass(form, 'page'));
-    e.preventDefault();
-    return false;
-}
-
-export default function (view) {
-    view.querySelector('form').addEventListener('submit', onSubmit);
-    view.addEventListener('viewshow', loadData);
-}
-

src/apps/dashboard/controllers/devices/devices.html

@@ -1,21 +0,0 @@
-<div id="devicesPage" data-role="page" class="page type-interior devicesPage noSecondaryNavPage" data-title="${HeaderDevices}">
-    <div>
-        <div class="content-primary">
-            <div class="verticalSection verticalSection">
-                <div class="sectionTitleContainer sectionTitleContainer-cards flex align-items-center">
-                    <h2 class="sectionTitle sectionTitle-cards">${HeaderDevices}</h2>
-                    <button
-                        id="deviceDeleteAll"
-                        is="emby-button"
-                        type="button"
-                        class="raised button-alt"
-                        style="margin-left: 1.25em !important; padding-bottom: 0.4em !important; padding-top: 0.4em !important;"
-                    >
-                        ${DeleteAll}
-                    </button>
-                </div>
-            </div>
-            <div is="emby-itemscontainer" class="devicesList vertical-wrap" data-multiselect="false"></div>
-        </div>
-    </div>
-</div>

src/apps/dashboard/controllers/devices/devices.js

@@ -1,171 +0,0 @@
-import { formatDistanceToNow } from 'date-fns';
-import escapeHtml from 'escape-html';
-
-import loading from 'components/loading/loading';
-import dom from 'scripts/dom';
-import globalize from 'lib/globalize';
-import imageHelper from 'utils/image';
-import { getLocaleWithSuffix } from 'utils/dateFnsLocale.ts';
-import 'elements/emby-button/emby-button';
-import 'elements/emby-itemscontainer/emby-itemscontainer';
-import 'components/cardbuilder/card.scss';
-import Dashboard from 'utils/dashboard';
-import confirm from 'components/confirm/confirm';
-import { getDefaultBackgroundClass } from 'components/cardbuilder/cardBuilderUtils';
-
-// Local cache of loaded
-let deviceIds = [];
-
-function canDelete(deviceId) {
-    return deviceId !== ApiClient.deviceId();
-}
-
-function deleteAllDevices(page) {
-    const msg = globalize.translate('DeleteDevicesConfirmation');
-
-    confirm({
-        text: msg,
-        title: globalize.translate('HeaderDeleteDevices'),
-        confirmText: globalize.translate('Delete'),
-        primary: 'delete'
-    }).then(async () => {
-        loading.show();
-        await Promise.all(
-            deviceIds.filter(canDelete).map((id) => ApiClient.deleteDevice(id))
-        );
-        loadData(page);
-    });
-}
-
-function deleteDevice(page, id) {
-    const msg = globalize.translate('DeleteDeviceConfirmation');
-
-    confirm({
-        text: msg,
-        title: globalize.translate('HeaderDeleteDevice'),
-        confirmText: globalize.translate('Delete'),
-        primary: 'delete'
-    }).then(async () => {
-        loading.show();
-        await ApiClient.deleteDevice(id);
-        loadData(page);
-    });
-}
-
-function showDeviceMenu(view, btn, deviceId) {
-    const menuItems = [{
-        name: globalize.translate('Edit'),
-        id: 'open',
-        icon: 'mode_edit'
-    }];
-
-    if (canDelete(deviceId)) {
-        menuItems.push({
-            name: globalize.translate('Delete'),
-            id: 'delete',
-            icon: 'delete'
-        });
-    }
-
-    import('components/actionSheet/actionSheet').then(({ default: actionsheet }) => {
-        actionsheet.show({
-            items: menuItems,
-            positionTo: btn,
-            callback: function (id) {
-                switch (id) {
-                    case 'open':
-                        Dashboard.navigate('dashboard/devices/edit?id=' + deviceId);
-                        break;
-
-                    case 'delete':
-                        deleteDevice(view, deviceId);
-                }
-            }
-        });
-    });
-}
-
-function load(page, devices) {
-    const localeWithSuffix = getLocaleWithSuffix();
-
-    let html = '';
-    html += devices.map(function (device) {
-        let deviceHtml = '';
-        deviceHtml += "<div data-id='" + escapeHtml(device.Id) + "' class='card backdropCard'>";
-        deviceHtml += '<div class="cardBox visualCardBox">';
-        deviceHtml += '<div class="cardScalable">';
-        deviceHtml += '<div class="cardPadder cardPadder-backdrop"></div>';
-        deviceHtml += `<a is="emby-linkbutton" href="#/dashboard/devices/edit?id=${escapeHtml(device.Id)}" class="cardContent cardImageContainer ${getDefaultBackgroundClass()}">`;
-        // audit note: getDeviceIcon returns static text
-        const iconUrl = imageHelper.getDeviceIcon(device);
-
-        if (iconUrl) {
-            deviceHtml += '<div class="cardImage" style="background-image:url(\'' + iconUrl + "');background-size:contain;background-position:center center;background-origin:content-box;padding:1em;\">";
-            deviceHtml += '</div>';
-        } else {
-            deviceHtml += '<span class="cardImageIcon material-icons tablet_android" aria-hidden="true"></span>';
-        }
-
-        deviceHtml += '</a>';
-        deviceHtml += '</div>';
-        deviceHtml += '<div class="cardFooter">';
-
-        if (canDelete(device.Id)) {
-            if (globalize.getIsRTL()) {
-                deviceHtml += '<div style="text-align:left; float:left;padding-top:5px;">';
-            } else {
-                deviceHtml += '<div style="text-align:right; float:right;padding-top:5px;">';
-            }
-            deviceHtml += '<button type="button" is="paper-icon-button-light" data-id="' + escapeHtml(device.Id) + '" title="' + globalize.translate('Menu') + '" class="btnDeviceMenu"><span class="material-icons more_vert" aria-hidden="true"></span></button>';
-            deviceHtml += '</div>';
-        }
-
-        deviceHtml += "<div class='cardText'>";
-        deviceHtml += escapeHtml(device.CustomName || device.Name);
-        deviceHtml += '</div>';
-        deviceHtml += "<div class='cardText cardText-secondary'>";
-        deviceHtml += escapeHtml(device.AppName + ' ' + device.AppVersion);
-        deviceHtml += '</div>';
-        deviceHtml += "<div class='cardText cardText-secondary'>";
-
-        if (device.LastUserName) {
-            deviceHtml += escapeHtml(device.LastUserName);
-            deviceHtml += ', ' + formatDistanceToNow(Date.parse(device.DateLastActivity), localeWithSuffix);
-        }
-
-        deviceHtml += '&nbsp;';
-        deviceHtml += '</div>';
-        deviceHtml += '</div>';
-        deviceHtml += '</div>';
-        deviceHtml += '</div>';
-        return deviceHtml;
-    }).join('');
-    page.querySelector('.devicesList').innerHTML = html;
-}
-
-function loadData(page) {
-    loading.show();
-    ApiClient.getJSON(ApiClient.getUrl('Devices')).then(function (result) {
-        load(page, result.Items);
-        deviceIds = result.Items.map((device) => device.Id);
-        loading.hide();
-    });
-}
-
-export default function (view) {
-    view.querySelector('.devicesList').addEventListener('click', function (e) {
-        const btnDeviceMenu = dom.parentWithClass(e.target, 'btnDeviceMenu');
-
-        if (btnDeviceMenu) {
-            showDeviceMenu(view, btnDeviceMenu, btnDeviceMenu.getAttribute('data-id'));
-        }
-    });
-    view.addEventListener('viewshow', function () {
-        loadData(this);
-    });
-
-    view.querySelector('#deviceDeleteAll').addEventListener('click', function() {
-        deleteAllDevices(view);
-    });
-}
-

src/apps/dashboard/routes/_asyncRoutes.ts

@@ -4,7 +4,7 @@ import { AppType } from 'constants/appType';
 export const ASYNC_ADMIN_ROUTES: AsyncRoute[] = [
     { path: 'activity', type: AppType.Dashboard },
     { path: 'branding', type: AppType.Dashboard },
-    { path: 'devices2', page: 'devices', type: AppType.Dashboard },
+    { path: 'devices', type: AppType.Dashboard },
     { path: 'keys', type: AppType.Dashboard },
     { path: 'logs', type: AppType.Dashboard },
     { path: 'playback/trickplay', type: AppType.Dashboard },

src/apps/dashboard/routes/_legacyRoutes.ts

@@ -23,20 +23,6 @@ export const LEGACY_ADMIN_ROUTES: LegacyRoute[] = [
             controller: 'networking',
             view: 'networking.html'
         }
-    }, {
-        path: 'devices',
-        pageProps: {
-            appType: AppType.Dashboard,
-            controller: 'devices/devices',
-            view: 'devices/devices.html'
-        }
-    }, {
-        path: 'devices/edit',
-        pageProps: {
-            appType: AppType.Dashboard,
-            controller: 'devices/device',
-            view: 'devices/device.html'
-        }
     }, {
         path: 'libraries',
         pageProps: {