mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

Migration of remotecontrol to ES6 module

Browse source
This commit is contained in:
Cameron 2020-08-06 15:55:10 +01:00
parent b6befd29a8
commit e694f0918a
2 changed files with 865 additions and 849 deletions
Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -154,6 +154,7 @@
"src/components/playmenu.js", "src/components/playmenu.js",
"src/components/prompt/prompt.js", "src/components/prompt/prompt.js",
"src/components/refreshdialog/refreshdialog.js", "src/components/refreshdialog/refreshdialog.js",
"src/components/remotecontrol/remotecontrol.js",
"src/components/sanatizefilename.js", "src/components/sanatizefilename.js",
"src/components/scrollManager.js", "src/components/scrollManager.js",
"src/plugins/htmlVideoPlayer/plugin.js", "src/plugins/htmlVideoPlayer/plugin.js",

263
src/components/remotecontrol/remotecontrol.js
View file

@ -1,16 +1,32 @@
define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageLoader', 'playbackManager', 'nowPlayingHelper', 'events', 'connectionManager', 'apphost', 'globalize', 'layoutManager', 'userSettings', 'cardBuilder', 'itemContextMenu', 'cardStyle', 'emby-itemscontainer', 'css!./remotecontrol.css', 'emby-ratingbutton'], function (browser, datetime, backdrop, libraryBrowser, listView, imageLoader, playbackManager, nowPlayingHelper, events, connectionManager, appHost, globalize, layoutManager, userSettings, cardBuilder, itemContextMenu) { import datetime from 'datetime';
'use strict'; import backdrop from 'backdrop';
import listView from 'listView';
import imageLoader from 'imageLoader';
import playbackManager from 'playbackManager';
import nowPlayingHelper from 'nowPlayingHelper';
import events from 'events';
import connectionManager from 'connectionManager';
import appHost from 'apphost';
import globalize from 'globalize';
import layoutManager from 'layoutManager';
import * as userSettings from 'userSettings';
import cardBuilder from 'cardBuilder';
import itemContextMenu from 'itemContextMenu';
import 'cardStyle';
import 'emby-itemscontainer';
import 'css!./remotecontrol.css';
import 'emby-ratingbutton';
playbackManager = playbackManager.default || playbackManager; /*eslint prefer-const: "error"*/
var showMuteButton = true; let showMuteButton = true;
var showVolumeSlider = true; let showVolumeSlider = true;
function showAudioMenu(context, player, button, item) { function showAudioMenu(context, player, button, item) {
var currentIndex = playbackManager.getAudioStreamIndex(player); const currentIndex = playbackManager.getAudioStreamIndex(player);
var streams = playbackManager.audioTracks(player); const streams = playbackManager.audioTracks(player);
var menuItems = streams.map(function (s) { const menuItems = streams.map(function (s) {
var menuItem = { const menuItem = {
name: s.DisplayTitle, name: s.DisplayTitle,
id: s.Index id: s.Index
}; };
@ -22,7 +38,7 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
return menuItem; return menuItem;
}); });
require(['actionsheet'], function (actionsheet) { import('actionsheet').then(({ default: actionsheet }) => {
actionsheet.show({ actionsheet.show({
items: menuItems, items: menuItems,
positionTo: button, positionTo: button,
@ -31,13 +47,13 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
} }
}); });
}); });
} }
function showSubtitleMenu(context, player, button, item) { function showSubtitleMenu(context, player, button, item) {
var currentIndex = playbackManager.getSubtitleStreamIndex(player); const currentIndex = playbackManager.getSubtitleStreamIndex(player);
var streams = playbackManager.subtitleTracks(player); const streams = playbackManager.subtitleTracks(player);
var menuItems = streams.map(function (s) { const menuItems = streams.map(function (s) {
var menuItem = { const menuItem = {
name: s.DisplayTitle, name: s.DisplayTitle,
id: s.Index id: s.Index
}; };
@ -54,7 +70,7 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
selected: currentIndex == null selected: currentIndex == null
}); });
require(['actionsheet'], function (actionsheet) { import('actionsheet').then(({ default: actionsheet }) => {
actionsheet.show({ actionsheet.show({
items: menuItems, items: menuItems,
positionTo: button, positionTo: button,
@ -63,15 +79,15 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
} }
}); });
}); });
} }
function getNowPlayingNameHtml(nowPlayingItem, includeNonNameInfo) { function getNowPlayingNameHtml(nowPlayingItem, includeNonNameInfo) {
return nowPlayingHelper.getNowPlayingNames(nowPlayingItem, includeNonNameInfo).map(function (i) { return nowPlayingHelper.getNowPlayingNames(nowPlayingItem, includeNonNameInfo).map(function (i) {
return i.text; return i.text;
}).join('<br/>'); }).join('<br/>');
} }
function seriesImageUrl(item, options) { function seriesImageUrl(item, options) {
if (item.Type !== 'Episode') { if (item.Type !== 'Episode') {
return null; return null;
} }
@ -96,9 +112,9 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
} }
return null; return null;
} }
function imageUrl(item, options) { function imageUrl(item, options) {
options = options || {}; options = options || {};
options.type = options.type || 'Primary'; options.type = options.type || 'Primary';
@ -113,22 +129,22 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
} }
return null; return null;
} }
function updateNowPlayingInfo(context, state, serverId) { function updateNowPlayingInfo(context, state, serverId) {
var item = state.NowPlayingItem; const item = state.NowPlayingItem;
var displayName = item ? getNowPlayingNameHtml(item).replace('<br/>', ' - ') : ''; const displayName = item ? getNowPlayingNameHtml(item).replace('<br/>', ' - ') : '';
if (typeof item !== 'undefined') { if (typeof item !== 'undefined') {
var nowPlayingServerId = (item.ServerId || serverId); const nowPlayingServerId = (item.ServerId || serverId);
if (item.Type == 'Audio' || item.MediaStreams[0].Type == 'Audio') { if (item.Type == 'Audio' || item.MediaStreams[0].Type == 'Audio') {
var songName = item.Name; const songName = item.Name;
var artistsSeries = ''; let artistsSeries = '';
var albumName = ''; let albumName = '';
if (item.Artists != null) { if (item.Artists != null) {
if (item.ArtistItems != null) { if (item.ArtistItems != null) {
for (const artist of item.ArtistItems) { for (const artist of item.ArtistItems) {
let artistName = artist.Name; const artistName = artist.Name;
let artistId = artist.Id; const artistId = artist.Id;
artistsSeries += `<a class="button-link emby-button" is="emby-linkbutton" href="details?id=${artistId}&serverId=${nowPlayingServerId}">${artistName}</a>`; artistsSeries += `<a class="button-link emby-button" is="emby-linkbutton" href="details?id=${artistId}&serverId=${nowPlayingServerId}">${artistName}</a>`;
if (artist !== item.ArtistItems.slice(-1)[0]) { if (artist !== item.ArtistItems.slice(-1)[0]) {
artistsSeries += ', '; artistsSeries += ', ';
@ -154,11 +170,11 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
context.querySelector('.nowPlayingSongName').innerHTML = songName; context.querySelector('.nowPlayingSongName').innerHTML = songName;
} else if (item.Type == 'Episode') { } else if (item.Type == 'Episode') {
if (item.SeasonName != null) { if (item.SeasonName != null) {
var seasonName = item.SeasonName; const seasonName = item.SeasonName;
context.querySelector('.nowPlayingSeason').innerHTML = '<a class="button-link emby-button" is="emby-linkbutton" href="details?id=' + item.SeasonId + `&serverId=${nowPlayingServerId}">${seasonName}</a>`; context.querySelector('.nowPlayingSeason').innerHTML = '<a class="button-link emby-button" is="emby-linkbutton" href="details?id=' + item.SeasonId + `&serverId=${nowPlayingServerId}">${seasonName}</a>`;
} }
if (item.SeriesName != null) { if (item.SeriesName != null) {
var seriesName = item.SeriesName; const seriesName = item.SeriesName;
if (item.SeriesId != null) { if (item.SeriesId != null) {
context.querySelector('.nowPlayingSerie').innerHTML = '<a class="button-link emby-button" is="emby-linkbutton" href="details?id=' + item.SeriesId + `&serverId=${nowPlayingServerId}">${seriesName}</a>`; context.querySelector('.nowPlayingSerie').innerHTML = '<a class="button-link emby-button" is="emby-linkbutton" href="details?id=' + item.SeriesId + `&serverId=${nowPlayingServerId}">${seriesName}</a>`;
} else { } else {
@ -176,7 +192,7 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
context.querySelector('.nowPlayingPageTitle').classList.add('hide'); context.querySelector('.nowPlayingPageTitle').classList.add('hide');
} }
var url = item ? seriesImageUrl(item, { const url = item ? seriesImageUrl(item, {
maxHeight: 300 maxHeight: 300
}) || imageUrl(item, { }) || imageUrl(item, {
maxHeight: 300 maxHeight: 300
@ -185,14 +201,14 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
let contextButton = context.querySelector('.btnToggleContextMenu'); let contextButton = context.querySelector('.btnToggleContextMenu');
// We remove the previous event listener by replacing the item in each update event // We remove the previous event listener by replacing the item in each update event
const autoFocusContextButton = document.activeElement === contextButton; const autoFocusContextButton = document.activeElement === contextButton;
let contextButtonClone = contextButton.cloneNode(true); const contextButtonClone = contextButton.cloneNode(true);
contextButton.parentNode.replaceChild(contextButtonClone, contextButton); contextButton.parentNode.replaceChild(contextButtonClone, contextButton);
contextButton = context.querySelector('.btnToggleContextMenu'); contextButton = context.querySelector('.btnToggleContextMenu');
if (autoFocusContextButton) { if (autoFocusContextButton) {
contextButton.focus(); contextButton.focus();
} }
const stopPlayback = !!layoutManager.mobile; const stopPlayback = !!layoutManager.mobile;
var options = { const options = {
play: false, play: false,
queue: false, queue: false,
stopPlayback: stopPlayback, stopPlayback: stopPlayback,
@ -200,7 +216,7 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
openAlbum: false, openAlbum: false,
positionTo: contextButton positionTo: contextButton
}; };
var apiClient = connectionManager.getApiClient(item.ServerId); const apiClient = connectionManager.getApiClient(item.ServerId);
apiClient.getItem(apiClient.getCurrentUserId(), item.Id).then(function (fullItem) { apiClient.getItem(apiClient.getCurrentUserId(), item.Id).then(function (fullItem) {
apiClient.getCurrentUser().then(function (user) { apiClient.getCurrentUser().then(function (user) {
contextButton.addEventListener('click', function () { contextButton.addEventListener('click', function () {
@ -215,8 +231,8 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
if (item) { if (item) {
backdrop.setBackdrops([item]); backdrop.setBackdrops([item]);
apiClient.getItem(apiClient.getCurrentUserId(), item.Id).then(function (fullItem) { apiClient.getItem(apiClient.getCurrentUserId(), item.Id).then(function (fullItem) {
var userData = fullItem.UserData || {}; const userData = fullItem.UserData || {};
var likes = userData.Likes == null ? '' : userData.Likes; const likes = userData.Likes == null ? '' : userData.Likes;
context.querySelector('.nowPlayingPageUserDataButtonsTitle').innerHTML = '<button is="emby-ratingbutton" type="button" class="listItemButton paper-icon-button-light" data-id="' + fullItem.Id + '" data-serverid="' + fullItem.ServerId + '" data-itemtype="' + fullItem.Type + '" data-likes="' + likes + '" data-isfavorite="' + userData.IsFavorite + '"><span class="material-icons favorite"></span></button>'; context.querySelector('.nowPlayingPageUserDataButtonsTitle').innerHTML = '<button is="emby-ratingbutton" type="button" class="listItemButton paper-icon-button-light" data-id="' + fullItem.Id + '" data-serverid="' + fullItem.ServerId + '" data-itemtype="' + fullItem.Type + '" data-likes="' + likes + '" data-isfavorite="' + userData.IsFavorite + '"><span class="material-icons favorite"></span></button>';
context.querySelector('.nowPlayingPageUserDataButtons').innerHTML = '<button is="emby-ratingbutton" type="button" class="listItemButton paper-icon-button-light" data-id="' + fullItem.Id + '" data-serverid="' + fullItem.ServerId + '" data-itemtype="' + fullItem.Type + '" data-likes="' + likes + '" data-isfavorite="' + userData.IsFavorite + '"><span class="material-icons favorite"></span></button>'; context.querySelector('.nowPlayingPageUserDataButtons').innerHTML = '<button is="emby-ratingbutton" type="button" class="listItemButton paper-icon-button-light" data-id="' + fullItem.Id + '" data-serverid="' + fullItem.ServerId + '" data-itemtype="' + fullItem.Type + '" data-likes="' + likes + '" data-isfavorite="' + userData.IsFavorite + '"><span class="material-icons favorite"></span></button>';
}); });
@ -225,11 +241,11 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
context.querySelector('.nowPlayingPageUserDataButtons').innerHTML = ''; context.querySelector('.nowPlayingPageUserDataButtons').innerHTML = '';
} }
} }
} }
function setImageUrl(context, state, url) { function setImageUrl(context, state, url) {
var item = state.NowPlayingItem; const item = state.NowPlayingItem;
var imgContainer = context.querySelector('.nowPlayingPageImageContainer'); const imgContainer = context.querySelector('.nowPlayingPageImageContainer');
if (url) { if (url) {
imgContainer.innerHTML = '<img class="nowPlayingPageImage" src="' + url + '" />'; imgContainer.innerHTML = '<img class="nowPlayingPageImage" src="' + url + '" />';
@ -243,26 +259,26 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
} else { } else {
imgContainer.innerHTML = '<div class="nowPlayingPageImageContainerNoAlbum"><button data-action="link" class="cardImageContainer coveredImage ' + cardBuilder.getDefaultBackgroundClass(item.Name) + ' cardContent cardContent-shadow itemAction"><span class="cardImageIcon material-icons album"></span></button></div>'; imgContainer.innerHTML = '<div class="nowPlayingPageImageContainerNoAlbum"><button data-action="link" class="cardImageContainer coveredImage ' + cardBuilder.getDefaultBackgroundClass(item.Name) + ' cardContent cardContent-shadow itemAction"><span class="cardImageIcon material-icons album"></span></button></div>';
} }
} }
function buttonVisible(btn, enabled) { function buttonVisible(btn, enabled) {
if (enabled) { if (enabled) {
btn.classList.remove('hide'); btn.classList.remove('hide');
} else { } else {
btn.classList.add('hide'); btn.classList.add('hide');
} }
} }
function updateSupportedCommands(context, commands) { function updateSupportedCommands(context, commands) {
var all = context.querySelectorAll('.btnCommand'); const all = context.querySelectorAll('.btnCommand');
for (var i = 0, length = all.length; i < length; i++) { for (let i = 0, length = all.length; i < length; i++) {
var enableButton = commands.indexOf(all[i].getAttribute('data-command')) !== -1; const enableButton = commands.indexOf(all[i].getAttribute('data-command')) !== -1;
all[i].disabled = !enableButton; all[i].disabled = !enableButton;
} }
} }
return function () { export default function () {
function toggleRepeat() { function toggleRepeat() {
switch (playbackManager.getRepeatMode()) { switch (playbackManager.getRepeatMode()) {
case 'RepeatAll': case 'RepeatAll':
@ -278,12 +294,12 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
function updatePlayerState(player, context, state) { function updatePlayerState(player, context, state) {
lastPlayerState = state; lastPlayerState = state;
var item = state.NowPlayingItem; const item = state.NowPlayingItem;
var playerInfo = playbackManager.getPlayerInfo(); const playerInfo = playbackManager.getPlayerInfo();
var supportedCommands = playerInfo.supportedCommands; const supportedCommands = playerInfo.supportedCommands;
currentPlayerSupportedCommands = supportedCommands; currentPlayerSupportedCommands = supportedCommands;
var playState = state.PlayState || {}; const playState = state.PlayState || {};
var isSupportedCommands = supportedCommands.includes('DisplayMessage') || supportedCommands.includes('SendString') || supportedCommands.includes('Select'); const isSupportedCommands = supportedCommands.includes('DisplayMessage') || supportedCommands.includes('SendString') || supportedCommands.includes('Select');
buttonVisible(context.querySelector('.btnToggleFullscreen'), item && item.MediaType == 'Video' && supportedCommands.includes('ToggleFullscreen')); buttonVisible(context.querySelector('.btnToggleFullscreen'), item && item.MediaType == 'Video' && supportedCommands.includes('ToggleFullscreen'));
updateAudioTracksDisplay(player, context); updateAudioTracksDisplay(player, context);
updateSubtitleTracksDisplay(player, context); updateSubtitleTracksDisplay(player, context);
@ -322,7 +338,7 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
buttonVisible(context.querySelector('.btnRewind'), item != null); buttonVisible(context.querySelector('.btnRewind'), item != null);
buttonVisible(context.querySelector('.btnFastForward'), item != null); buttonVisible(context.querySelector('.btnFastForward'), item != null);
} }
var positionSlider = context.querySelector('.nowPlayingPositionSlider'); const positionSlider = context.querySelector('.nowPlayingPositionSlider');
if (positionSlider && item && item.RunTimeTicks) { if (positionSlider && item && item.RunTimeTicks) {
positionSlider.setKeyboardSteps(userSettings.skipBackLength() * 1000000 / item.RunTimeTicks, positionSlider.setKeyboardSteps(userSettings.skipBackLength() * 1000000 / item.RunTimeTicks,
@ -331,7 +347,7 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
if (positionSlider && !positionSlider.dragging) { if (positionSlider && !positionSlider.dragging) {
positionSlider.disabled = !playState.CanSeek; positionSlider.disabled = !playState.CanSeek;
var isProgressClear = state.MediaSource && state.MediaSource.RunTimeTicks == null; const isProgressClear = state.MediaSource && state.MediaSource.RunTimeTicks == null;
positionSlider.setIsClear(isProgressClear); positionSlider.setIsClear(isProgressClear);
} }
@ -351,18 +367,18 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
} }
function updateAudioTracksDisplay(player, context) { function updateAudioTracksDisplay(player, context) {
var supportedCommands = currentPlayerSupportedCommands; const supportedCommands = currentPlayerSupportedCommands;
buttonVisible(context.querySelector('.btnAudioTracks'), playbackManager.audioTracks(player).length > 1 && supportedCommands.indexOf('SetAudioStreamIndex') != -1); buttonVisible(context.querySelector('.btnAudioTracks'), playbackManager.audioTracks(player).length > 1 && supportedCommands.indexOf('SetAudioStreamIndex') != -1);
} }
function updateSubtitleTracksDisplay(player, context) { function updateSubtitleTracksDisplay(player, context) {
var supportedCommands = currentPlayerSupportedCommands; const supportedCommands = currentPlayerSupportedCommands;
buttonVisible(context.querySelector('.btnSubtitles'), playbackManager.subtitleTracks(player).length && supportedCommands.indexOf('SetSubtitleStreamIndex') != -1); buttonVisible(context.querySelector('.btnSubtitles'), playbackManager.subtitleTracks(player).length && supportedCommands.indexOf('SetSubtitleStreamIndex') != -1);
} }
function updateRepeatModeDisplay(repeatMode) { function updateRepeatModeDisplay(repeatMode) {
var context = dlg; const context = dlg;
let toggleRepeatButtons = context.querySelectorAll('.repeatToggleButton'); const toggleRepeatButtons = context.querySelectorAll('.repeatToggleButton');
const cssClass = 'buttonActive'; const cssClass = 'buttonActive';
let innHtml = '<span class="material-icons repeat"></span>'; let innHtml = '<span class="material-icons repeat"></span>';
let repeatOn = true; let repeatOn = true;
@ -386,8 +402,8 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
} }
function updatePlayerVolumeState(context, isMuted, volumeLevel) { function updatePlayerVolumeState(context, isMuted, volumeLevel) {
var view = context; const view = context;
var supportedCommands = currentPlayerSupportedCommands; const supportedCommands = currentPlayerSupportedCommands;
if (supportedCommands.indexOf('Mute') === -1) { if (supportedCommands.indexOf('Mute') === -1) {
showMuteButton = false; showMuteButton = false;
@ -420,8 +436,8 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
} else { } else {
buttonMute.classList.toggle('hide', !showMuteButton); buttonMute.classList.toggle('hide', !showMuteButton);
var nowPlayingVolumeSlider = context.querySelector('.nowPlayingVolumeSlider'); const nowPlayingVolumeSlider = context.querySelector('.nowPlayingVolumeSlider');
var nowPlayingVolumeSliderContainer = context.querySelector('.nowPlayingVolumeSliderContainer'); const nowPlayingVolumeSliderContainer = context.querySelector('.nowPlayingVolumeSliderContainer');
if (nowPlayingVolumeSlider) { if (nowPlayingVolumeSlider) {
nowPlayingVolumeSliderContainer.classList.toggle('hide', !showVolumeSlider); nowPlayingVolumeSliderContainer.classList.toggle('hide', !showVolumeSlider);
@ -434,8 +450,8 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
} }
function updatePlayPauseState(isPaused, isActive) { function updatePlayPauseState(isPaused, isActive) {
var context = dlg; const context = dlg;
var btnPlayPause = context.querySelector('.btnPlayPause'); const btnPlayPause = context.querySelector('.btnPlayPause');
const btnPlayPauseIcon = btnPlayPause.querySelector('.material-icons'); const btnPlayPauseIcon = btnPlayPause.querySelector('.material-icons');
btnPlayPauseIcon.classList.remove('play_circle_filled', 'pause_circle_filled'); btnPlayPauseIcon.classList.remove('play_circle_filled', 'pause_circle_filled');
@ -445,12 +461,12 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
} }
function updateTimeDisplay(positionTicks, runtimeTicks) { function updateTimeDisplay(positionTicks, runtimeTicks) {
var context = dlg; const context = dlg;
var positionSlider = context.querySelector('.nowPlayingPositionSlider'); const positionSlider = context.querySelector('.nowPlayingPositionSlider');
if (positionSlider && !positionSlider.dragging) { if (positionSlider && !positionSlider.dragging) {
if (runtimeTicks) { if (runtimeTicks) {
var pct = positionTicks / runtimeTicks; let pct = positionTicks / runtimeTicks;
pct *= 100; pct *= 100;
positionSlider.value = pct; positionSlider.value = pct;
} else { } else {
@ -468,7 +484,7 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
function loadPlaylist(context, player) { function loadPlaylist(context, player) {
getPlaylistItems(player).then(function (items) { getPlaylistItems(player).then(function (items) {
var html = ''; let html = '';
let favoritesEnabled = true; let favoritesEnabled = true;
if (layoutManager.mobile) { if (layoutManager.mobile) {
if (items.length > 0) { if (items.length > 0) {
@ -492,7 +508,7 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
dragHandle: true dragHandle: true
}); });
var itemsContainer = context.querySelector('.playlist'); const itemsContainer = context.querySelector('.playlist');
let focusedItemPlaylistId = itemsContainer.querySelector('button:focus'); let focusedItemPlaylistId = itemsContainer.querySelector('button:focus');
itemsContainer.innerHTML = html; itemsContainer.innerHTML = html;
if (focusedItemPlaylistId !== null) { if (focusedItemPlaylistId !== null) {
@ -503,10 +519,10 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
} }
} }
var playlistItemId = playbackManager.getCurrentPlaylistItemId(player); const playlistItemId = playbackManager.getCurrentPlaylistItemId(player);
if (playlistItemId) { if (playlistItemId) {
var img = itemsContainer.querySelector(`.listItem[data-playlistItemId="${playlistItemId}"] .listItemImage`); const img = itemsContainer.querySelector(`.listItem[data-playlistItemId="${playlistItemId}"] .listItemImage`);
if (img) { if (img) {
img.classList.remove('lazy'); img.classList.remove('lazy');
@ -520,7 +536,7 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
function onPlaybackStart(e, state) { function onPlaybackStart(e, state) {
console.debug('remotecontrol event: ' + e.type); console.debug('remotecontrol event: ' + e.type);
var player = this; const player = this;
onStateChanged.call(player, e, state); onStateChanged.call(player, e, state);
} }
@ -529,12 +545,12 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
} }
function onShuffleQueueModeChange(updateView = true) { function onShuffleQueueModeChange(updateView = true) {
let shuffleMode = playbackManager.getQueueShuffleMode(this); const shuffleMode = playbackManager.getQueueShuffleMode(this);
let context = dlg; const context = dlg;
const cssClass = 'buttonActive'; const cssClass = 'buttonActive';
let shuffleButtons = context.querySelectorAll('.btnShuffleQueue'); const shuffleButtons = context.querySelectorAll('.btnShuffleQueue');
for (let shuffleButton of shuffleButtons) { for (const shuffleButton of shuffleButtons) {
switch (shuffleMode) { switch (shuffleMode) {
case 'Shuffle': case 'Shuffle':
shuffleButton.classList.add(cssClass); shuffleButton.classList.add(cssClass);
@ -556,12 +572,12 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
} }
function onPlaylistItemRemoved(e, info) { function onPlaylistItemRemoved(e, info) {
var context = dlg; const context = dlg;
if (info !== undefined) { if (info !== undefined) {
var playlistItemIds = info.playlistItemIds; const playlistItemIds = info.playlistItemIds;
for (var i = 0, length = playlistItemIds.length; i < length; i++) { for (let i = 0, length = playlistItemIds.length; i < length; i++) {
var listItem = context.querySelector('.listItem[data-playlistItemId="' + playlistItemIds[i] + '"]'); const listItem = context.querySelector('.listItem[data-playlistItemId="' + playlistItemIds[i] + '"]');
if (listItem) { if (listItem) {
listItem.parentNode.removeChild(listItem); listItem.parentNode.removeChild(listItem);
@ -574,7 +590,7 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
function onPlaybackStopped(e, state) { function onPlaybackStopped(e, state) {
console.debug('remotecontrol event: ' + e.type); console.debug('remotecontrol event: ' + e.type);
var player = this; const player = this;
if (!state.NextMediaType) { if (!state.NextMediaType) {
updatePlayerState(player, dlg, {}); updatePlayerState(player, dlg, {});
@ -587,29 +603,29 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
} }
function onStateChanged(event, state) { function onStateChanged(event, state) {
var player = this; const player = this;
updatePlayerState(player, dlg, state); updatePlayerState(player, dlg, state);
onPlaylistUpdate(); onPlaylistUpdate();
} }
function onTimeUpdate(e) { function onTimeUpdate(e) {
var now = new Date().getTime(); const now = new Date().getTime();
if (!(now - lastUpdateTime < 700)) { if (!(now - lastUpdateTime < 700)) {
lastUpdateTime = now; lastUpdateTime = now;
var player = this; const player = this;
currentRuntimeTicks = playbackManager.duration(player); currentRuntimeTicks = playbackManager.duration(player);
updateTimeDisplay(playbackManager.currentTime(player), currentRuntimeTicks); updateTimeDisplay(playbackManager.currentTime(player), currentRuntimeTicks);
} }
} }
function onVolumeChanged(e) { function onVolumeChanged(e) {
var player = this; const player = this;
updatePlayerVolumeState(dlg, player.isMuted(), player.getVolume()); updatePlayerVolumeState(dlg, player.isMuted(), player.getVolume());
} }
function releaseCurrentPlayer() { function releaseCurrentPlayer() {
var player = currentPlayer; const player = currentPlayer;
if (player) { if (player) {
events.off(player, 'playbackstart', onPlaybackStart); events.off(player, 'playbackstart', onPlaybackStart);
@ -630,7 +646,7 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
function bindToPlayer(context, player) { function bindToPlayer(context, player) {
if (releaseCurrentPlayer(), currentPlayer = player, player) { if (releaseCurrentPlayer(), currentPlayer = player, player) {
var state = playbackManager.getPlayerState(player); const state = playbackManager.getPlayerState(player);
onStateChanged.call(player, { onStateChanged.call(player, {
type: 'init' type: 'init'
}, state); }, state);
@ -646,8 +662,8 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
events.on(player, 'pause', onPlayPauseStateChanged); events.on(player, 'pause', onPlayPauseStateChanged);
events.on(player, 'unpause', onPlayPauseStateChanged); events.on(player, 'unpause', onPlayPauseStateChanged);
events.on(player, 'timeupdate', onTimeUpdate); events.on(player, 'timeupdate', onTimeUpdate);
var playerInfo = playbackManager.getPlayerInfo(); const playerInfo = playbackManager.getPlayerInfo();
var supportedCommands = playerInfo.supportedCommands; const supportedCommands = playerInfo.supportedCommands;
currentPlayerSupportedCommands = supportedCommands; currentPlayerSupportedCommands = supportedCommands;
updateSupportedCommands(context, supportedCommands); updateSupportedCommands(context, supportedCommands);
} }
@ -674,9 +690,9 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
} }
function savePlaylist() { function savePlaylist() {
require(['playlistEditor'], function (playlistEditor) { import('playlistEditor').then(({ default: playlistEditor }) => {
getSaveablePlaylistItems().then(function (items) { getSaveablePlaylistItems().then(function (items) {
var serverId = items.length ? items[0].ServerId : ApiClient.serverId(); const serverId = items.length ? items[0].ServerId : ApiClient.serverId();
new playlistEditor.showEditor({ new playlistEditor.showEditor({
items: items.map(function (i) { items: items.map(function (i) {
return i.Id; return i.Id;
@ -690,10 +706,10 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
} }
function bindEvents(context) { function bindEvents(context) {
var btnCommand = context.querySelectorAll('.btnCommand'); const btnCommand = context.querySelectorAll('.btnCommand');
var positionSlider = context.querySelector('.nowPlayingPositionSlider'); const positionSlider = context.querySelector('.nowPlayingPositionSlider');
for (var i = 0, length = btnCommand.length; i < length; i++) { for (let i = 0, length = btnCommand.length; i < length; i++) {
btnCommand[i].addEventListener('click', onBtnCommandClick); btnCommand[i].addEventListener('click', onBtnCommandClick);
} }
@ -770,22 +786,22 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
} }
}); });
positionSlider.addEventListener('change', function () { positionSlider.addEventListener('change', function () {
var value = this.value; const value = this.value;
if (currentPlayer) { if (currentPlayer) {
var newPercent = parseFloat(value); const newPercent = parseFloat(value);
playbackManager.seekPercent(newPercent, currentPlayer); playbackManager.seekPercent(newPercent, currentPlayer);
} }
}); });
positionSlider.getBubbleText = function (value) { positionSlider.getBubbleText = function (value) {
var state = lastPlayerState; const state = lastPlayerState;
if (!state || !state.NowPlayingItem || !currentRuntimeTicks) { if (!state || !state.NowPlayingItem || !currentRuntimeTicks) {
return '--:--'; return '--:--';
} }
var ticks = currentRuntimeTicks; let ticks = currentRuntimeTicks;
ticks /= 100; ticks /= 100;
ticks *= value; ticks *= value;
return datetime.getDisplayRunningTime(ticks); return datetime.getDisplayRunningTime(ticks);
@ -798,13 +814,13 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
context.querySelector('.buttonMute').addEventListener('click', function () { context.querySelector('.buttonMute').addEventListener('click', function () {
playbackManager.toggleMute(currentPlayer); playbackManager.toggleMute(currentPlayer);
}); });
var playlistContainer = context.querySelector('.playlist'); const playlistContainer = context.querySelector('.playlist');
playlistContainer.addEventListener('action-remove', function (e) { playlistContainer.addEventListener('action-remove', function (e) {
playbackManager.removeFromPlaylist([e.detail.playlistItemId], currentPlayer); playbackManager.removeFromPlaylist([e.detail.playlistItemId], currentPlayer);
}); });
playlistContainer.addEventListener('itemdrop', function (e) { playlistContainer.addEventListener('itemdrop', function (e) {
var newIndex = e.detail.newIndex; const newIndex = e.detail.newIndex;
var playlistItemId = e.detail.playlistItemId; const playlistItemId = e.detail.playlistItemId;
playbackManager.movePlaylistItem(playlistItemId, newIndex, currentPlayer); playbackManager.movePlaylistItem(playlistItemId, newIndex, currentPlayer);
}); });
context.querySelector('.btnSavePlaylist').addEventListener('click', savePlaylist); context.querySelector('.btnSavePlaylist').addEventListener('click', savePlaylist);
@ -834,7 +850,7 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
} }
function onMessageSubmit(e) { function onMessageSubmit(e) {
var form = e.target; const form = e.target;
playbackManager.sendCommand({ playbackManager.sendCommand({
Name: 'DisplayMessage', Name: 'DisplayMessage',
Arguments: { Arguments: {
@ -844,7 +860,7 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
}, currentPlayer); }, currentPlayer);
form.querySelector('input').value = ''; form.querySelector('input').value = '';
require(['toast'], function (toast) { import('toast').then(({ default: toast }) => {
toast('Message sent.'); toast('Message sent.');
}); });
@ -854,7 +870,7 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
} }
function onSendStringSubmit(e) { function onSendStringSubmit(e) {
var form = e.target; const form = e.target;
playbackManager.sendCommand({ playbackManager.sendCommand({
Name: 'SendString', Name: 'SendString',
Arguments: { Arguments: {
@ -863,7 +879,7 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
}, currentPlayer); }, currentPlayer);
form.querySelector('input').value = ''; form.querySelector('input').value = '';
require(['toast'], function (toast) { import('toast').then(({ default: toast }) => {
toast('Text sent.'); toast('Text sent.');
}); });
@ -877,7 +893,7 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
volumecontrolHtml += `<button is="paper-icon-button-light" class="buttonMute autoSize" title=${globalize.translate('Mute')}><span class="xlargePaperIconButton material-icons volume_up"></span></button>`; volumecontrolHtml += `<button is="paper-icon-button-light" class="buttonMute autoSize" title=${globalize.translate('Mute')}><span class="xlargePaperIconButton material-icons volume_up"></span></button>`;
volumecontrolHtml += '<div class="sliderContainer nowPlayingVolumeSliderContainer"><input is="emby-slider" type="range" step="1" min="0" max="100" value="0" class="nowPlayingVolumeSlider"/></div>'; volumecontrolHtml += '<div class="sliderContainer nowPlayingVolumeSliderContainer"><input is="emby-slider" type="range" step="1" min="0" max="100" value="0" class="nowPlayingVolumeSlider"/></div>';
volumecontrolHtml += '</div>'; volumecontrolHtml += '</div>';
let optionsSection = context.querySelector('.playlistSectionButton'); const optionsSection = context.querySelector('.playlistSectionButton');
if (!layoutManager.mobile) { if (!layoutManager.mobile) {
context.querySelector('.nowPlayingSecondaryButtons').insertAdjacentHTML('beforeend', volumecontrolHtml); context.querySelector('.nowPlayingSecondaryButtons').insertAdjacentHTML('beforeend', volumecontrolHtml);
optionsSection.classList.remove('align-items-center', 'justify-content-center'); optionsSection.classList.remove('align-items-center', 'justify-content-center');
@ -899,7 +915,7 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
events.on(playbackManager, 'playerchange', onPlayerChange); events.on(playbackManager, 'playerchange', onPlayerChange);
if (layoutManager.tv) { if (layoutManager.tv) {
var positionSlider = context.querySelector('.nowPlayingPositionSlider'); const positionSlider = context.querySelector('.nowPlayingPositionSlider');
positionSlider.classList.add('focusable'); positionSlider.classList.add('focusable');
positionSlider.enableKeyboardDragging(); positionSlider.enableKeyboardDragging();
} }
@ -915,13 +931,13 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
bindToPlayer(context, playbackManager.getCurrentPlayer()); bindToPlayer(context, playbackManager.getCurrentPlayer());
} }
var dlg; let dlg;
var currentPlayer; let currentPlayer;
var lastPlayerState; let lastPlayerState;
var currentPlayerSupportedCommands = []; let currentPlayerSupportedCommands = [];
var lastUpdateTime = 0; let lastUpdateTime = 0;
var currentRuntimeTicks = 0; let currentRuntimeTicks = 0;
var self = this; const self = this;
self.init = function (ownerView, context) { self.init = function (ownerView, context) {
dlg = context; dlg = context;
@ -935,5 +951,4 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
self.destroy = function () { self.destroy = function () {
onDialogClosed(); onDialogClosed();
}; };
}; }
});