jellyfin-web/src/controllers/dashboard/dashboard.js

import datetime from '../../scripts/datetime';
import { Events } from 'jellyfin-apiclient';
import itemHelper from '../../components/itemHelper';
import serverNotifications from '../../scripts/serverNotifications';
import dom from '../../scripts/dom';
import globalize from '../../scripts/globalize';
import { formatDistanceToNow } from 'date-fns';
import { localeWithSuffix } from '../../scripts/dfnshelper';
import loading from '../../components/loading/loading';
import playMethodHelper from '../../components/playback/playmethodhelper';
import cardBuilder from '../../components/cardbuilder/cardBuilder';
import imageLoader from '../../components/images/imageLoader';
import ActivityLog from '../../components/activitylog';
import imageHelper from '../../scripts/imagehelper';
import indicators from '../../components/indicators/indicators';
import '../../components/listview/listview.css';
import '../../elements/emby-button/emby-button';
import '../../assets/css/flexstyles.css';
import '../../elements/emby-itemscontainer/emby-itemscontainer';
import taskButton from '../../scripts/taskbutton';
import Dashboard from '../../scripts/clientUtils';
import ServerConnections from '../../components/ServerConnections';

/* eslint-disable indent */

    function showPlaybackInfo(btn, session) {
        import('../../components/alert').then(({default: alert}) => {
            let title;
            const text = [];
            const displayPlayMethod = playMethodHelper.getDisplayPlayMethod(session);

            if (displayPlayMethod === 'DirectStream') {
                title = globalize.translate('DirectStreaming');
                text.push(globalize.translate('DirectStreamHelp1'));
                text.push('<br/>');
                text.push(globalize.translate('DirectStreamHelp2'));
            } else if (displayPlayMethod === 'Transcode') {
                title = globalize.translate('Transcoding');
                text.push(globalize.translate('MediaIsBeingConverted'));

                if (session.TranscodingInfo && session.TranscodingInfo.TranscodeReasons && session.TranscodingInfo.TranscodeReasons.length) {
                    text.push('<br/>');
                    text.push(globalize.translate('LabelReasonForTranscoding'));
                    session.TranscodingInfo.TranscodeReasons.forEach(function (transcodeReason) {
                        text.push(globalize.translate(transcodeReason));
                    });
                }
            }

            alert({
                text: text.join('<br/>'),
                title: title
            });
        });
    }

    function showSendMessageForm(btn, session) {
        import('../../components/prompt/prompt').then(({default: prompt}) => {
            prompt({
                title: globalize.translate('HeaderSendMessage'),
                label: globalize.translate('LabelMessageText'),
                confirmText: globalize.translate('ButtonSend')
            }).then(function (text) {
                if (text) {
                    ServerConnections.getApiClient(session.ServerId).sendMessageCommand(session.Id, {
                        Text: text,
                        TimeoutMs: 5e3
                    });
                }
            });
        });
    }

    function showOptionsMenu(btn, session) {
        import('../../components/actionSheet/actionSheet').then(({default: actionsheet}) => {
            const menuItems = [];

            if (session.ServerId && session.DeviceId !== ServerConnections.deviceId()) {
                menuItems.push({
                    name: globalize.translate('SendMessage'),
                    id: 'sendmessage'
                });
            }

            if (session.TranscodingInfo && session.TranscodingInfo.TranscodeReasons && session.TranscodingInfo.TranscodeReasons.length) {
                menuItems.push({
                    name: globalize.translate('ViewPlaybackInfo'),
                    id: 'transcodinginfo'
                });
            }

            return actionsheet.show({
                items: menuItems,
                positionTo: btn
            }).then(function (id) {
                switch (id) {
                    case 'sendmessage':
                        showSendMessageForm(btn, session);
                        break;

                    case 'transcodinginfo':
                        showPlaybackInfo(btn, session);
                }
            });
        });
    }

    function onActiveDevicesClick(evt) {
        const btn = dom.parentWithClass(evt.target, 'sessionCardButton');

        if (btn) {
            const card = dom.parentWithClass(btn, 'card');

            if (card) {
                const sessionId = card.id;
                const session = (DashboardPage.sessionsList || []).filter(function (dashboardSession) {
                    return 'session' + dashboardSession.Id === sessionId;
                })[0];

                if (session) {
                    if (btn.classList.contains('btnCardOptions')) {
                        showOptionsMenu(btn, session);
                    } else if (btn.classList.contains('btnSessionInfo')) {
                        showPlaybackInfo(btn, session);
                    } else if (btn.classList.contains('btnSessionSendMessage')) {
                        showSendMessageForm(btn, session);
                    } else if (btn.classList.contains('btnSessionStop')) {
                        ServerConnections.getApiClient(session.ServerId).sendPlayStateCommand(session.Id, 'Stop');
                    } else if (btn.classList.contains('btnSessionPlayPause') && session.PlayState) {
                        ServerConnections.getApiClient(session.ServerId).sendPlayStateCommand(session.Id, 'PlayPause');
                    }
                }
            }
        }
    }

    function filterSessions(sessions) {
        const list = [];
        const minActiveDate = new Date().getTime() - 9e5;

        for (let i = 0, length = sessions.length; i < length; i++) {
            const session = sessions[i];

            if (!session.NowPlayingItem && !session.UserId) {
                continue;
            }

            if (datetime.parseISO8601Date(session.LastActivityDate, true).getTime() >= minActiveDate) {
                list.push(session);
            }
        }

        return list;
    }

    function refreshActiveRecordings(view, apiClient) {
        apiClient.getLiveTvRecordings({
            UserId: Dashboard.getCurrentUserId(),
            IsInProgress: true,
            Fields: 'CanDelete,PrimaryImageAspectRatio',
            EnableTotalRecordCount: false,
            EnableImageTypes: 'Primary,Thumb,Backdrop'
        }).then(function (result) {
            const itemsContainer = view.querySelector('.activeRecordingItems');

            if (!result.Items.length) {
                view.querySelector('.activeRecordingsSection').classList.add('hide');
                return void(itemsContainer.innerHTML = '');
            }

            view.querySelector('.activeRecordingsSection').classList.remove('hide');
            itemsContainer.innerHTML = cardBuilder.getCardsHtml({
                items: result.Items,
                shape: 'auto',
                defaultShape: 'backdrop',
                showTitle: true,
                showParentTitle: true,
                coverImage: true,
                cardLayout: false,
                centerText: true,
                preferThumb: 'auto',
                overlayText: false,
                overlayMoreButton: true,
                action: 'none',
                centerPlayButton: true
            });
            imageLoader.lazyChildren(itemsContainer);
        });
    }

    function reloadSystemInfo(view, apiClient) {
        apiClient.getSystemInfo().then(function (systemInfo) {
            view.querySelector('#serverName').innerHTML = globalize.translate('DashboardServerName', systemInfo.ServerName);
            view.querySelector('#versionNumber').innerHTML = globalize.translate('DashboardVersionNumber', systemInfo.Version);
            view.querySelector('#operatingSystem').innerHTML = globalize.translate('DashboardOperatingSystem', systemInfo.OperatingSystem);
            view.querySelector('#architecture').innerHTML = globalize.translate('DashboardArchitecture', systemInfo.SystemArchitecture);

            view.querySelector('#cachePath').innerHTML = systemInfo.CachePath;
            view.querySelector('#logPath').innerHTML = systemInfo.LogPath;
            view.querySelector('#transcodePath').innerHTML = systemInfo.TranscodingTempPath;
            view.querySelector('#metadataPath').innerHTML = systemInfo.InternalMetadataPath;
            view.querySelector('#webPath').innerHTML = systemInfo.WebPath;
        });
    }

    function renderInfo(view, sessions, forceUpdate) {
        sessions = filterSessions(sessions);
        renderActiveConnections(view, sessions);
        loading.hide();
    }

    function pollForInfo(view, apiClient, forceUpdate) {
        apiClient.getSessions({
            ActiveWithinSeconds: 960
        }).then(function (sessions) {
            renderInfo(view, sessions, forceUpdate);
        });
        apiClient.getScheduledTasks().then(function (tasks) {
            renderRunningTasks(view, tasks);
        });
    }

    function renderActiveConnections(view, sessions) {
        let html = '';
        DashboardPage.sessionsList = sessions;
        const parentElement = view.querySelector('.activeDevices');
        const cardElem = parentElement.querySelector('.card');

        if (cardElem) {
            cardElem.classList.add('deadSession');
        }

        for (let i = 0, length = sessions.length; i < length; i++) {
            const session = sessions[i];
            const rowId = 'session' + session.Id;
            const elem = view.querySelector('#' + rowId);

            if (elem) {
                DashboardPage.updateSession(elem, session);
            } else {
                const nowPlayingItem = session.NowPlayingItem;
                const className = 'scalableCard card activeSession backdropCard backdropCard-scalable';
                html += '<div class="' + className + '" id="' + rowId + '">';
                html += '<div class="cardBox visualCardBox">';
                html += '<div class="cardScalable visualCardBox-cardScalable">';
                html += '<div class="cardPadder cardPadder-backdrop"></div>';
                html += '<div class="cardContent">';
                const imgUrl = DashboardPage.getNowPlayingImageUrl(nowPlayingItem);

                if (imgUrl) {
                    html += '<div class="sessionNowPlayingContent sessionNowPlayingContent-withbackground"';
                    html += ' data-src="' + imgUrl + '" style="display:inline-block;background-image:url(\'' + imgUrl + "');\"></div>";
                } else {
                    html += '<div class="sessionNowPlayingContent"></div>';
                }

                html += '<div class="sessionNowPlayingInnerContent">';
                html += '<div class="sessionAppInfo">';
                const clientImage = DashboardPage.getClientImage(session);

                if (clientImage) {
                    html += clientImage;
                }

                html += '<div class="sessionAppName" style="display:inline-block;">';
                html += '<div class="sessionDeviceName">' + session.DeviceName + '</div>';
                html += '<div class="sessionAppSecondaryText">' + DashboardPage.getAppSecondaryText(session) + '</div>';
                html += '</div>';
                html += '</div>';

                html += '<div class="sessionNowPlayingDetails">';
                const nowPlayingName = DashboardPage.getNowPlayingName(session);
                html += '<div class="sessionNowPlayingInfo" data-imgsrc="' + nowPlayingName.image + '">';
                html += nowPlayingName.html;
                html += '</div>';
                html += '<div class="sessionNowPlayingTime">' + DashboardPage.getSessionNowPlayingTime(session) + '</div>';
                html += '</div>';

                if (nowPlayingItem && nowPlayingItem.RunTimeTicks) {
                    const percent = 100 * (session.PlayState.PositionTicks || 0) / nowPlayingItem.RunTimeTicks;
                    html += indicators.getProgressHtml(percent, {
                        containerClass: 'playbackProgress'
                    });
                } else {
                    // need to leave the element in just in case the device starts playback
                    html += indicators.getProgressHtml(0, {
                        containerClass: 'playbackProgress hide'
                    });
                }

                if (session.TranscodingInfo && session.TranscodingInfo.CompletionPercentage) {
                    const percent = session.TranscodingInfo.CompletionPercentage.toFixed(1);
                    html += indicators.getProgressHtml(percent, {
                        containerClass: 'transcodingProgress'
                    });
                } else {
                    // same issue as playbackProgress element above
                    html += indicators.getProgressHtml(0, {
                        containerClass: 'transcodingProgress hide'
                    });
                }

                html += '</div>';
                html += '</div>';
                html += '</div>';
                html += '<div class="sessionCardFooter cardFooter">';
                html += '<div class="sessionCardButtons flex align-items-center justify-content-center">';

                let btnCssClass = session.ServerId && session.NowPlayingItem && session.SupportsRemoteControl ? '' : ' hide';
                const playIcon = session.PlayState.IsPaused ? 'pause' : 'play_arrow';

                html += '<button is="paper-icon-button-light" class="sessionCardButton btnSessionPlayPause paper-icon-button-light ' + btnCssClass + '"><span class="material-icons ' + playIcon + '"></span></button>';
                html += '<button is="paper-icon-button-light" class="sessionCardButton btnSessionStop paper-icon-button-light ' + btnCssClass + '"><span class="material-icons stop"></span></button>';

                btnCssClass = session.TranscodingInfo && session.TranscodingInfo.TranscodeReasons && session.TranscodingInfo.TranscodeReasons.length ? '' : ' hide';
                html += '<button is="paper-icon-button-light" class="sessionCardButton btnSessionInfo paper-icon-button-light ' + btnCssClass + '" title="' + globalize.translate('ViewPlaybackInfo') + '"><span class="material-icons info"></span></button>';

                btnCssClass = session.ServerId && session.SupportedCommands.indexOf('DisplayMessage') !== -1 && session.DeviceId !== ServerConnections.deviceId() ? '' : ' hide';
                html += '<button is="paper-icon-button-light" class="sessionCardButton btnSessionSendMessage paper-icon-button-light ' + btnCssClass + '" title="' + globalize.translate('SendMessage') + '"><span class="material-icons message"></span></button>';
                html += '</div>';

                html += '<div class="sessionNowPlayingStreamInfo" style="padding:.5em 0 1em;">';
                html += DashboardPage.getSessionNowPlayingStreamInfo(session);
                html += '</div>';

                html += '<div class="flex align-items-center justify-content-center">';
                const userImage = DashboardPage.getUserImage(session);
                html += userImage ? '<div class="activitylogUserPhoto" style="background-image:url(\'' + userImage + "');\"></div>" : '<div style="height:1.71em;"></div>';
                html += '<div class="sessionUserName">';
                html += DashboardPage.getUsersHtml(session);

                html += '</div>';
                html += '</div>';
                html += '</div>';
                html += '</div>';
                html += '</div>';
            }
        }

        parentElement.insertAdjacentHTML('beforeend', html);
        const deadSessionElem = parentElement.querySelector('.deadSession');

        if (deadSessionElem) {
            deadSessionElem.parentNode.removeChild(deadSessionElem);
        }
    }

    function renderRunningTasks(view, tasks) {
        let html = '';
        tasks = tasks.filter(function (task) {
            if (task.State != 'Idle') {
                return !task.IsHidden;
            }

            return false;
        });

        if (tasks.length) {
            view.querySelector('.runningTasksContainer').classList.remove('hide');
        } else {
            view.querySelector('.runningTasksContainer').classList.add('hide');
        }

        for (let i = 0, length = tasks.length; i < length; i++) {
            const task = tasks[i];
            html += '<p>';
            html += task.Name + '<br/>';

            if (task.State === 'Running') {
                const progress = (task.CurrentProgressPercentage || 0).toFixed(1);
                html += '<progress max="100" value="' + progress + '" title="' + progress + '%">';
                html += progress + '%';
                html += '</progress>';
                html += "<span style='color:#00a4dc;margin-left:5px;margin-right:5px;'>" + progress + '%</span>';
                html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate('ButtonStop') + '" onclick="DashboardPage.stopTask(this, \'' + task.Id + '\');" class="autoSize"><span class="material-icons cancel"></span></button>';
            } else if (task.State === 'Cancelling') {
                html += '<span style="color:#cc0000;">' + globalize.translate('LabelStopping') + '</span>';
            }

            html += '</p>';
        }

        view.querySelector('#divRunningTasks').innerHTML = html;
    }

    window.DashboardPage = {
        startInterval: function (apiClient) {
            apiClient.sendMessage('SessionsStart', '0,1500');
            apiClient.sendMessage('ScheduledTasksInfoStart', '0,1000');
        },
        stopInterval: function (apiClient) {
            apiClient.sendMessage('SessionsStop');
            apiClient.sendMessage('ScheduledTasksInfoStop');
        },
        getSessionNowPlayingStreamInfo: function (session) {
            let html = '';
            let showTranscodingInfo = false;
            const displayPlayMethod = playMethodHelper.getDisplayPlayMethod(session);

            if (displayPlayMethod === 'DirectStream') {
                html += globalize.translate('DirectStreaming');
            } else if (displayPlayMethod === 'Transcode') {
                html += globalize.translate('Transcoding');

                if (session.TranscodingInfo && session.TranscodingInfo.Framerate) {
                    html += ' (' + session.TranscodingInfo.Framerate + ' fps)';
                }

                showTranscodingInfo = true;
            } else if (displayPlayMethod === 'DirectPlay') {
                html += globalize.translate('DirectPlaying');
            }

            if (showTranscodingInfo) {
                const line = [];

                if (session.TranscodingInfo) {
                    if (session.TranscodingInfo.Bitrate) {
                        if (session.TranscodingInfo.Bitrate > 1e6) {
                            line.push((session.TranscodingInfo.Bitrate / 1e6).toFixed(1) + ' Mbps');
                        } else {
                            line.push(Math.floor(session.TranscodingInfo.Bitrate / 1e3) + ' Kbps');
                        }
                    }

                    if (session.TranscodingInfo.Container) {
                        line.push(session.TranscodingInfo.Container);
                    }

                    if (session.TranscodingInfo.VideoCodec) {
                        line.push(session.TranscodingInfo.VideoCodec);
                    }

                    if (session.TranscodingInfo.AudioCodec && session.TranscodingInfo.AudioCodec != session.TranscodingInfo.Container) {
                        line.push(session.TranscodingInfo.AudioCodec);
                    }
                }

                if (line.length) {
                    html += ' - ' + line.join(' ');
                }
            }

            return html;
        },
        getSessionNowPlayingTime: function (session) {
            const nowPlayingItem = session.NowPlayingItem;
            let html = '';

            if (nowPlayingItem) {
                if (session.PlayState.PositionTicks) {
                    html += datetime.getDisplayRunningTime(session.PlayState.PositionTicks);
                } else {
                    html += '0:00';
                }

                html += ' / ';

                if (nowPlayingItem && nowPlayingItem.RunTimeTicks) {
                    html += datetime.getDisplayRunningTime(nowPlayingItem.RunTimeTicks);
                } else {
                    html += '0:00';
                }
            }

            return html;
        },
        getAppSecondaryText: function (session) {
            return session.Client + ' ' + session.ApplicationVersion;
        },
        getNowPlayingName: function (session) {
            let imgUrl = '';
            const nowPlayingItem = session.NowPlayingItem;
            // FIXME: It seems that, sometimes, server sends date in the future, so date-fns displays messages like 'in less than a minute'. We should fix
            // how dates are returned by the server when the session is active and show something like 'Active now', instead of past/future sentences
            if (!nowPlayingItem) {
                return {
                    html: globalize.translate('LastSeen', formatDistanceToNow(Date.parse(session.LastActivityDate), localeWithSuffix)),
                    image: imgUrl
                };
            }

            let topText = itemHelper.getDisplayName(nowPlayingItem);
            let bottomText = '';

            if (nowPlayingItem.Artists && nowPlayingItem.Artists.length) {
                bottomText = topText;
                topText = nowPlayingItem.Artists[0];
            } else {
                if (nowPlayingItem.SeriesName || nowPlayingItem.Album) {
                    bottomText = topText;
                    topText = nowPlayingItem.SeriesName || nowPlayingItem.Album;
                } else if (nowPlayingItem.ProductionYear) {
                    bottomText = nowPlayingItem.ProductionYear;
                }
            }

            if (nowPlayingItem.ImageTags && nowPlayingItem.ImageTags.Logo) {
                imgUrl = ApiClient.getScaledImageUrl(nowPlayingItem.Id, {
                    tag: nowPlayingItem.ImageTags.Logo,
                    maxHeight: 24,
                    maxWidth: 130,
                    type: 'Logo'
                });
            } else if (nowPlayingItem.ParentLogoImageTag) {
                imgUrl = ApiClient.getScaledImageUrl(nowPlayingItem.ParentLogoItemId, {
                    tag: nowPlayingItem.ParentLogoImageTag,
                    maxHeight: 24,
                    maxWidth: 130,
                    type: 'Logo'
                });
            }

            if (imgUrl) {
                topText = '<img src="' + imgUrl + '" style="max-height:24px;max-width:130px;" />';
            }

            return {
                html: bottomText ? topText + '<br/>' + bottomText : topText,
                image: imgUrl
            };
        },
        getUsersHtml: function (session) {
            const html = [];

            if (session.UserId) {
                html.push(session.UserName);
            }

            for (let i = 0, length = session.AdditionalUsers.length; i < length; i++) {
                html.push(session.AdditionalUsers[i].UserName);
            }

            return html.join(', ');
        },
        getUserImage: function (session) {
            if (session.UserId && session.UserPrimaryImageTag) {
                return ApiClient.getUserImageUrl(session.UserId, {
                    tag: session.UserPrimaryImageTag,
                    type: 'Primary'
                });
            }

            return null;
        },
        updateSession: function (row, session) {
            row.classList.remove('deadSession');
            const nowPlayingItem = session.NowPlayingItem;

            if (nowPlayingItem) {
                row.classList.add('playingSession');
            } else {
                row.classList.remove('playingSession');
            }

            if (session.ServerId && session.SupportedCommands.indexOf('DisplayMessage') !== -1) {
                row.querySelector('.btnSessionSendMessage').classList.remove('hide');
            } else {
                row.querySelector('.btnSessionSendMessage').classList.add('hide');
            }

            if (session.TranscodingInfo && session.TranscodingInfo.TranscodeReasons && session.TranscodingInfo) {
                row.querySelector('.btnSessionInfo').classList.remove('hide');
            } else {
                row.querySelector('.btnSessionInfo').classList.add('hide');
            }

            const btnSessionPlayPause = row.querySelector('.btnSessionPlayPause');

            if (session.ServerId && nowPlayingItem && session.SupportsRemoteControl) {
                btnSessionPlayPause.classList.remove('hide');
                row.querySelector('.btnSessionStop').classList.remove('hide');
            } else {
                btnSessionPlayPause.classList.add('hide');
                row.querySelector('.btnSessionStop').classList.add('hide');
            }

            const btnSessionPlayPauseIcon = btnSessionPlayPause.querySelector('.material-icons');
            btnSessionPlayPauseIcon.classList.remove('play_arrow', 'pause');
            btnSessionPlayPauseIcon.classList.add(session.PlayState && session.PlayState.IsPaused ? 'play_arrow' : 'pause');

            row.querySelector('.sessionNowPlayingStreamInfo').innerHTML = DashboardPage.getSessionNowPlayingStreamInfo(session);
            row.querySelector('.sessionNowPlayingTime').innerHTML = DashboardPage.getSessionNowPlayingTime(session);
            row.querySelector('.sessionUserName').innerHTML = DashboardPage.getUsersHtml(session);
            row.querySelector('.sessionAppSecondaryText').innerHTML = DashboardPage.getAppSecondaryText(session);
            const nowPlayingName = DashboardPage.getNowPlayingName(session);
            const nowPlayingInfoElem = row.querySelector('.sessionNowPlayingInfo');

            if (!(nowPlayingName.image && nowPlayingName.image == nowPlayingInfoElem.getAttribute('data-imgsrc'))) {
                nowPlayingInfoElem.innerHTML = nowPlayingName.html;
                nowPlayingInfoElem.setAttribute('data-imgsrc', nowPlayingName.image || '');
            }

            const playbackProgressElem = row.querySelector('.playbackProgress');

            if (nowPlayingItem && nowPlayingItem.RunTimeTicks) {
                const percent = 100 * (session.PlayState.PositionTicks || 0) / nowPlayingItem.RunTimeTicks;
                playbackProgressElem.outerHTML = indicators.getProgressHtml(percent, {
                    containerClass: 'playbackProgress'
                });
            } else {
                playbackProgressElem.outerHTML = indicators.getProgressHtml(0, {
                    containerClass: 'playbackProgress hide'
                });
            }

            const transcodingProgress = row.querySelector('.transcodingProgress');

            if (session.TranscodingInfo && session.TranscodingInfo.CompletionPercentage) {
                const percent = session.TranscodingInfo.CompletionPercentage.toFixed(1);
                transcodingProgress.outerHTML = indicators.getProgressHtml(percent, {
                    containerClass: 'transcodingProgress'
                });
            } else {
                transcodingProgress.outerHTML = indicators.getProgressHtml(0, {
                    containerClass: 'transcodingProgress hide'
                });
            }

            const imgUrl = DashboardPage.getNowPlayingImageUrl(nowPlayingItem) || '';
            const imgElem = row.querySelector('.sessionNowPlayingContent');

            if (imgUrl != imgElem.getAttribute('data-src')) {
                imgElem.style.backgroundImage = imgUrl ? "url('" + imgUrl + "')" : '';
                imgElem.setAttribute('data-src', imgUrl);

                if (imgUrl) {
                    imgElem.classList.add('sessionNowPlayingContent-withbackground');
                } else {
                    imgElem.classList.remove('sessionNowPlayingContent-withbackground');
                }
            }
        },
        getClientImage: function (connection) {
            const iconUrl = imageHelper.getDeviceIcon(connection);
            return "<img src='" + iconUrl + "' />";
        },
        getNowPlayingImageUrl: function (item) {
            /* Screen width is multiplied by 0.2, as the there is currently no way to get the width of
            elements that aren't created yet. */
            if (item && item.BackdropImageTags && item.BackdropImageTags.length) {
                return ApiClient.getScaledImageUrl(item.Id, {
                    maxWidth: Math.round(dom.getScreenWidth() * 0.20),
                    type: 'Backdrop',
                    tag: item.BackdropImageTags[0]
                });
            }

            if (item && item.ParentBackdropImageTags && item.ParentBackdropImageTags.length) {
                return ApiClient.getScaledImageUrl(item.ParentBackdropItemId, {
                    maxWidth: Math.round(dom.getScreenWidth() * 0.20),
                    type: 'Backdrop',
                    tag: item.ParentBackdropImageTags[0]
                });
            }

            if (item && item.BackdropImageTag) {
                return ApiClient.getScaledImageUrl(item.BackdropItemId, {
                    maxWidth: Math.round(dom.getScreenWidth() * 0.20),
                    type: 'Backdrop',
                    tag: item.BackdropImageTag
                });
            }

            const imageTags = (item || {}).ImageTags || {};

            if (item && imageTags.Thumb) {
                return ApiClient.getScaledImageUrl(item.Id, {
                    maxWidth: Math.round(dom.getScreenWidth() * 0.20),
                    type: 'Thumb',
                    tag: imageTags.Thumb
                });
            }

            if (item && item.ParentThumbImageTag) {
                return ApiClient.getScaledImageUrl(item.ParentThumbItemId, {
                    maxWidth: Math.round(dom.getScreenWidth() * 0.20),
                    type: 'Thumb',
                    tag: item.ParentThumbImageTag
                });
            }

            if (item && item.ThumbImageTag) {
                return ApiClient.getScaledImageUrl(item.ThumbItemId, {
                    maxWidth: Math.round(dom.getScreenWidth() * 0.20),
                    type: 'Thumb',
                    tag: item.ThumbImageTag
                });
            }

            if (item && imageTags.Primary) {
                return ApiClient.getScaledImageUrl(item.Id, {
                    maxWidth: Math.round(dom.getScreenWidth() * 0.20),
                    type: 'Primary',
                    tag: imageTags.Primary
                });
            }

            if (item && item.PrimaryImageTag) {
                return ApiClient.getScaledImageUrl(item.PrimaryImageItemId, {
                    maxWidth: Math.round(dom.getScreenWidth() * 0.20),
                    type: 'Primary',
                    tag: item.PrimaryImageTag
                });
            }

            if (item && item.AlbumPrimaryImageTag) {
                return ApiClient.getScaledImageUrl(item.AlbumId, {
                    maxWidth: Math.round(dom.getScreenWidth() * 0.20),
                    type: 'Primary',
                    tag: item.AlbumPrimaryImageTag
                });
            }

            return null;
        },
        systemUpdateTaskKey: 'SystemUpdateTask',
        stopTask: function (btn, id) {
            const page = dom.parentWithClass(btn, 'page');
            ApiClient.stopScheduledTask(id).then(function () {
                pollForInfo(page, ApiClient);
            });
        },
        restart: function (btn) {
            import('../../components/confirm/confirm').then(({default: confirm}) => {
                confirm({
                    title: globalize.translate('Restart'),
                    text: globalize.translate('MessageConfirmRestart'),
                    confirmText: globalize.translate('Restart'),
                    primary: 'delete'
                }).then(function () {
                    const page = dom.parentWithClass(btn, 'page');
                    page.querySelector('#btnRestartServer').disabled = true;
                    page.querySelector('#btnShutdown').disabled = true;
                    ApiClient.restartServer();
                });
            });
        },
        shutdown: function (btn) {
            import('../../components/confirm/confirm').then(({default: confirm}) => {
                confirm({
                    title: globalize.translate('ButtonShutdown'),
                    text: globalize.translate('MessageConfirmShutdown'),
                    confirmText: globalize.translate('ButtonShutdown'),
                    primary: 'delete'
                }).then(function () {
                    const page = dom.parentWithClass(btn, 'page');
                    page.querySelector('#btnRestartServer').disabled = true;
                    page.querySelector('#btnShutdown').disabled = true;
                    ApiClient.shutdownServer();
                });
            });
        }
    };
    export default function (view, params) {
        function onRestartRequired(evt, apiClient) {
            console.debug('onRestartRequired not implemented', evt, apiClient);
        }

        function onServerShuttingDown(evt, apiClient) {
            console.debug('onServerShuttingDown not implemented', evt, apiClient);
        }

        function onServerRestarting(evt, apiClient) {
            console.debug('onServerRestarting not implemented', evt, apiClient);
        }

        function onPackageInstalling(evt, apiClient) {
            if (apiClient.serverId() === serverId) {
                pollForInfo(view, apiClient, true);
                reloadSystemInfo(view, apiClient);
            }
        }

        function onPackageInstallationCompleted(evt, apiClient) {
            if (apiClient.serverId() === serverId) {
                pollForInfo(view, apiClient, true);
                reloadSystemInfo(view, apiClient);
            }
        }

        function onSessionsUpdate(evt, apiClient, info) {
            if (apiClient.serverId() === serverId) {
                renderInfo(view, info);
            }
        }

        function onScheduledTasksUpdate(evt, apiClient, info) {
            if (apiClient.serverId() === serverId) {
                renderRunningTasks(view, info);
            }
        }

        const serverId = ApiClient.serverId();
        view.querySelector('.activeDevices').addEventListener('click', onActiveDevicesClick);
        view.addEventListener('viewshow', function () {
            const page = this;
            const apiClient = ApiClient;

            if (apiClient) {
                loading.show();
                pollForInfo(page, apiClient);
                DashboardPage.startInterval(apiClient);
                Events.on(serverNotifications, 'RestartRequired', onRestartRequired);
                Events.on(serverNotifications, 'ServerShuttingDown', onServerShuttingDown);
                Events.on(serverNotifications, 'ServerRestarting', onServerRestarting);
                Events.on(serverNotifications, 'PackageInstalling', onPackageInstalling);
                Events.on(serverNotifications, 'PackageInstallationCompleted', onPackageInstallationCompleted);
                Events.on(serverNotifications, 'Sessions', onSessionsUpdate);
                Events.on(serverNotifications, 'ScheduledTasksInfo', onScheduledTasksUpdate);
                DashboardPage.lastAppUpdateCheck = null;
                reloadSystemInfo(page, ApiClient);

                if (!page.userActivityLog) {
                    page.userActivityLog = new ActivityLog({
                        serverId: ApiClient.serverId(),
                        element: page.querySelector('.userActivityItems')
                    });
                }

                if (ApiClient.isMinServerVersion('3.4.1.25')) {
                    if (!page.serverActivityLog) {
                        page.serverActivityLog = new ActivityLog({
                            serverId: ApiClient.serverId(),
                            element: page.querySelector('.serverActivityItems')
                        });
                    }
                }

                refreshActiveRecordings(view, apiClient);
                loading.hide();
            }

            taskButton({
                mode: 'on',
                taskKey: 'RefreshLibrary',
                button: page.querySelector('.btnRefresh')
            });
        });
        view.addEventListener('viewbeforehide', function () {
            const apiClient = ApiClient;
            const page = this;

            Events.off(serverNotifications, 'RestartRequired', onRestartRequired);
            Events.off(serverNotifications, 'ServerShuttingDown', onServerShuttingDown);
            Events.off(serverNotifications, 'ServerRestarting', onServerRestarting);
            Events.off(serverNotifications, 'PackageInstalling', onPackageInstalling);
            Events.off(serverNotifications, 'PackageInstallationCompleted', onPackageInstallationCompleted);
            Events.off(serverNotifications, 'Sessions', onSessionsUpdate);
            Events.off(serverNotifications, 'ScheduledTasksInfo', onScheduledTasksUpdate);

            if (apiClient) {
                DashboardPage.stopInterval(apiClient);
            }

            taskButton({
                mode: 'off',
                taskKey: 'RefreshLibrary',
                button: page.querySelector('.btnRefresh')
            });
        });
        view.addEventListener('viewdestroy', function () {
            const page = this;
            const userActivityLog = page.userActivityLog;

            if (userActivityLog) {
                userActivityLog.destroy();
            }

            const serverActivityLog = page.serverActivityLog;

            if (serverActivityLog) {
                serverActivityLog.destroy();
            }
        });
    }

/* eslint-enable indent */