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

Merge pull request #1584 from Camc314/migrate-to-ES6-29

Browse source 
Migration of nowplaying and videoosd to ES6 modules
This commit is contained in:
dkanada 2020-07-23 12:58:54 +09:00 • committed by GitHub
commit 03ef599a89
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 201 additions and 176 deletions
Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -116,6 +116,8 @@
"src/components/syncPlay/timeSyncManager.js", "src/components/syncPlay/timeSyncManager.js",
"src/controllers/dashboard/logs.js", "src/controllers/dashboard/logs.js",
"src/controllers/dashboard/plugins/repositories.js", "src/controllers/dashboard/plugins/repositories.js",
"src/controllers/playback/nowplaying.js",
"src/controllers/playback/videoosd.js",
"src/controllers/user/display.js", "src/controllers/user/display.js",
"src/controllers/user/home.js", "src/controllers/user/home.js",
"src/controllers/user/playback.js", "src/controllers/user/playback.js",

38
src/controllers/playback/nowplaying.js
View file

@ -1,22 +1,22 @@
define(['components/remotecontrol/remotecontrol', 'libraryMenu', 'emby-button'], function (remotecontrolFactory, libraryMenu) { import remotecontrolFactory from 'components/remotecontrol/remotecontrol';
'use strict'; import libraryMenu from 'libraryMenu';
import 'emby-button';
return function (view, params) { export default function (view, params) {
var remoteControl = new remotecontrolFactory(); const remoteControl = new remotecontrolFactory();
remoteControl.init(view, view.querySelector('.remoteControlContent')); remoteControl.init(view, view.querySelector('.remoteControlContent'));
view.addEventListener('viewshow', function (e) { view.addEventListener('viewshow', function (e) {
libraryMenu.setTransparentMenu(true); libraryMenu.setTransparentMenu(true);
if (remoteControl) { if (remoteControl) {
remoteControl.onShow(); remoteControl.onShow();
} }
}); });
view.addEventListener('viewbeforehide', function (e) { view.addEventListener('viewbeforehide', function (e) {
libraryMenu.setTransparentMenu(false); libraryMenu.setTransparentMenu(false);
if (remoteControl) { if (remoteControl) {
remoteControl.destroy(); remoteControl.destroy();
} }
}); });
}; }
});

337
src/controllers/playback/videoosd.js
View file

@ -1,5 +1,26 @@
define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'mediaInfo', 'focusManager', 'imageLoader', 'scrollHelper', 'events', 'connectionManager', 'browser', 'globalize', 'apphost', 'layoutManager', 'userSettings', 'keyboardnavigation', 'scrollStyles', 'emby-slider', 'paper-icon-button-light', 'css!assets/css/videoosd'], function (playbackManager, dom, inputManager, datetime, itemHelper, mediaInfo, focusManager, imageLoader, scrollHelper, events, connectionManager, browser, globalize, appHost, layoutManager, userSettings, keyboardnavigation) { import playbackManager from 'playbackManager';
'use strict'; import dom from 'dom';
import inputManager from 'inputManager';
import datetime from 'datetime';
import itemHelper from 'itemHelper';
import mediaInfo from 'mediaInfo';
import focusManager from 'focusManager';
import imageLoader from 'imageLoader';
import scrollHelper from 'scrollHelper';
import events from 'events';
import connectionManager from 'connectionManager';
import browser from 'browser';
import globalize from 'globalize';
import appHost from 'apphost';
import layoutManager from 'layoutManager';
import * as userSettings from 'userSettings';
import keyboardnavigation from 'keyboardnavigation';
import 'scrollStyles';
import 'emby-slider';
import 'paper-icon-button-light';
import 'css!assets/css/videoosd';
/* eslint-disable indent */
function seriesImageUrl(item, options) { function seriesImageUrl(item, options) {
if ('Episode' !== item.Type) { if ('Episode' !== item.Type) {
@ -45,13 +66,13 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med
return null; return null;
} }
return function (view, params) { export default function (view, params) {
function onVerticalSwipe(e, elem, data) { function onVerticalSwipe(e, elem, data) {
var player = currentPlayer; const player = currentPlayer;
if (player) { if (player) {
var deltaY = data.currentDeltaY; const deltaY = data.currentDeltaY;
var windowSize = dom.getWindowSize(); const windowSize = dom.getWindowSize();
if (supportsBrightnessChange && data.clientX < windowSize.innerWidth / 2) { if (supportsBrightnessChange && data.clientX < windowSize.innerWidth / 2) {
return void doBrightnessTouch(deltaY, player, windowSize.innerHeight); return void doBrightnessTouch(deltaY, player, windowSize.innerHeight);
@ -62,23 +83,23 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med
} }
function doBrightnessTouch(deltaY, player, viewHeight) { function doBrightnessTouch(deltaY, player, viewHeight) {
var delta = -deltaY / viewHeight * 100; const delta = -deltaY / viewHeight * 100;
var newValue = playbackManager.getBrightness(player) + delta; let newValue = playbackManager.getBrightness(player) + delta;
newValue = Math.min(newValue, 100); newValue = Math.min(newValue, 100);
newValue = Math.max(newValue, 0); newValue = Math.max(newValue, 0);
playbackManager.setBrightness(newValue, player); playbackManager.setBrightness(newValue, player);
} }
function doVolumeTouch(deltaY, player, viewHeight) { function doVolumeTouch(deltaY, player, viewHeight) {
var delta = -deltaY / viewHeight * 100; const delta = -deltaY / viewHeight * 100;
var newValue = playbackManager.getVolume(player) + delta; let newValue = playbackManager.getVolume(player) + delta;
newValue = Math.min(newValue, 100); newValue = Math.min(newValue, 100);
newValue = Math.max(newValue, 0); newValue = Math.max(newValue, 0);
playbackManager.setVolume(newValue, player); playbackManager.setVolume(newValue, player);
} }
function onDoubleClick(e) { function onDoubleClick(e) {
var clientX = e.clientX; const clientX = e.clientX;
if (null != clientX) { if (null != clientX) {
if (clientX < dom.getWindowSize().innerWidth / 2) { if (clientX < dom.getWindowSize().innerWidth / 2) {
@ -94,7 +115,7 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med
function getDisplayItem(item) { function getDisplayItem(item) {
if ('TvChannel' === item.Type) { if ('TvChannel' === item.Type) {
var apiClient = connectionManager.getApiClient(item.ServerId); const apiClient = connectionManager.getApiClient(item.ServerId);
return apiClient.getItem(apiClient.getCurrentUserId(), item.Id).then(function (refreshedItem) { return apiClient.getItem(apiClient.getCurrentUserId(), item.Id).then(function (refreshedItem) {
return { return {
originalItem: refreshedItem, originalItem: refreshedItem,
@ -120,7 +141,7 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med
connectionManager.getApiClient(item.ServerId).getCurrentUser().then(function (user) { connectionManager.getApiClient(item.ServerId).getCurrentUser().then(function (user) {
if (user.Policy.EnableLiveTvManagement) { if (user.Policy.EnableLiveTvManagement) {
require(['recordingButton'], function (RecordingButton) { import('recordingButton').then(({default: RecordingButton}) => {
if (recordingButtonManager) { if (recordingButtonManager) {
return void recordingButtonManager.refreshItem(item); return void recordingButtonManager.refreshItem(item);
} }
@ -136,22 +157,22 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med
} }
function updateDisplayItem(itemInfo) { function updateDisplayItem(itemInfo) {
var item = itemInfo.originalItem; const item = itemInfo.originalItem;
currentItem = item; currentItem = item;
var displayItem = itemInfo.displayItem || item; const displayItem = itemInfo.displayItem || item;
updateRecordingButton(displayItem); updateRecordingButton(displayItem);
setPoster(displayItem, item); setPoster(displayItem, item);
var parentName = displayItem.SeriesName || displayItem.Album; let parentName = displayItem.SeriesName || displayItem.Album;
if (displayItem.EpisodeTitle || displayItem.IsSeries) { if (displayItem.EpisodeTitle || displayItem.IsSeries) {
parentName = displayItem.Name; parentName = displayItem.Name;
} }
setTitle(displayItem, parentName); setTitle(displayItem, parentName);
var titleElement; let titleElement;
var osdTitle = view.querySelector('.osdTitle'); const osdTitle = view.querySelector('.osdTitle');
titleElement = osdTitle; titleElement = osdTitle;
var displayName = itemHelper.getDisplayName(displayItem, { let displayName = itemHelper.getDisplayName(displayItem, {
includeParentInfo: 'Program' !== displayItem.Type, includeParentInfo: 'Program' !== displayItem.Type,
includeIndexNumber: 'Program' !== displayItem.Type includeIndexNumber: 'Program' !== displayItem.Type
}); });
@ -168,7 +189,7 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med
titleElement.classList.add('hide'); titleElement.classList.add('hide');
} }
var mediaInfoHtml = mediaInfo.getPrimaryMediaInfoHtml(displayItem, { const mediaInfoHtml = mediaInfo.getPrimaryMediaInfoHtml(displayItem, {
runtime: false, runtime: false,
subtitles: false, subtitles: false,
tomatoes: false, tomatoes: false,
@ -178,7 +199,7 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med
episodeTitleIndexNumber: 'Program' !== displayItem.Type, episodeTitleIndexNumber: 'Program' !== displayItem.Type,
programIndicator: false programIndicator: false
}); });
var osdMediaInfo = view.querySelector('.osdMediaInfo'); const osdMediaInfo = view.querySelector('.osdMediaInfo');
osdMediaInfo.innerHTML = mediaInfoHtml; osdMediaInfo.innerHTML = mediaInfoHtml;
if (mediaInfoHtml) { if (mediaInfoHtml) {
@ -187,8 +208,8 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med
osdMediaInfo.classList.add('hide'); osdMediaInfo.classList.add('hide');
} }
var secondaryMediaInfo = view.querySelector('.osdSecondaryMediaInfo'); const secondaryMediaInfo = view.querySelector('.osdSecondaryMediaInfo');
var secondaryMediaInfoHtml = mediaInfo.getSecondaryMediaInfoHtml(displayItem, { const secondaryMediaInfoHtml = mediaInfo.getSecondaryMediaInfoHtml(displayItem, {
startDate: false, startDate: false,
programTime: false programTime: false
}); });
@ -236,7 +257,7 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med
} }
function setDisplayTime(elem, date) { function setDisplayTime(elem, date) {
var html; let html;
if (date) { if (date) {
date = datetime.parseISO8601Date(date); date = datetime.parseISO8601Date(date);
@ -251,7 +272,7 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med
} }
function updateNowPlayingInfo(player, state) { function updateNowPlayingInfo(player, state) {
var item = state.NowPlayingItem; const item = state.NowPlayingItem;
currentItem = item; currentItem = item;
if (!item) { if (!item) {
@ -294,7 +315,7 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med
function setTitle(item, parentName) { function setTitle(item, parentName) {
Emby.Page.setTitle(parentName || ''); Emby.Page.setTitle(parentName || '');
var documentTitle = parentName || (item ? item.Name : null); const documentTitle = parentName || (item ? item.Name : null);
if (documentTitle) { if (documentTitle) {
document.title = documentTitle; document.title = documentTitle;
@ -302,10 +323,10 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med
} }
function setPoster(item, secondaryItem) { function setPoster(item, secondaryItem) {
var osdPoster = view.querySelector('.osdPoster'); const osdPoster = view.querySelector('.osdPoster');
if (item) { if (item) {
var imgUrl = seriesImageUrl(item, { let imgUrl = seriesImageUrl(item, {
maxWidth: osdPoster.clientWidth * 2, maxWidth: osdPoster.clientWidth * 2,
type: 'Primary' type: 'Primary'
}) || seriesImageUrl(item, { }) || seriesImageUrl(item, {
@ -400,7 +421,7 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med
} }
function onHideAnimationComplete(e) { function onHideAnimationComplete(e) {
var elem = e.target; const elem = e.target;
if (elem != osdBottomElement) if (elem != osdBottomElement)
return; return;
elem.classList.add('hide'); elem.classList.add('hide');
@ -411,7 +432,7 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med
function showMainOsdControls() { function showMainOsdControls() {
if (!currentVisibleMenu) { if (!currentVisibleMenu) {
var elem = osdBottomElement; const elem = osdBottomElement;
currentVisibleMenu = 'osd'; currentVisibleMenu = 'osd';
clearHideAnimationEventListeners(elem); clearHideAnimationEventListeners(elem);
elem.classList.remove('hide'); elem.classList.remove('hide');
@ -428,7 +449,7 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med
function hideMainOsdControls() { function hideMainOsdControls() {
if ('osd' === currentVisibleMenu) { if ('osd' === currentVisibleMenu) {
var elem = osdBottomElement; const elem = osdBottomElement;
clearHideAnimationEventListeners(elem); clearHideAnimationEventListeners(elem);
elem.classList.add('videoOsdBottom-hidden'); elem.classList.add('videoOsdBottom-hidden');
dom.addEventListener(elem, transitionEndEventName, onHideAnimationComplete, { dom.addEventListener(elem, transitionEndEventName, onHideAnimationComplete, {
@ -446,9 +467,9 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med
function onPointerMove(e) { function onPointerMove(e) {
if ('mouse' === (e.pointerType || (layoutManager.mobile ? 'touch' : 'mouse'))) { if ('mouse' === (e.pointerType || (layoutManager.mobile ? 'touch' : 'mouse'))) {
var eventX = e.screenX || 0; const eventX = e.screenX || 0;
var eventY = e.screenY || 0; const eventY = e.screenY || 0;
var obj = lastPointerMoveData; const obj = lastPointerMoveData;
if (!obj) { if (!obj) {
lastPointerMoveData = { lastPointerMoveData = {
@ -469,7 +490,7 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med
} }
function onInputCommand(e) { function onInputCommand(e) {
var player = currentPlayer; const player = currentPlayer;
switch (e.detail.command) { switch (e.detail.command) {
case 'left': case 'left':
@ -528,7 +549,7 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med
} }
function onRecordingCommand() { function onRecordingCommand() {
var btnRecord = view.querySelector('.btnRecord'); const btnRecord = view.querySelector('.btnRecord');
if (!btnRecord.classList.contains('hide')) { if (!btnRecord.classList.contains('hide')) {
btnRecord.click(); btnRecord.click();
@ -555,7 +576,7 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med
} }
function onStateChanged(event, state) { function onStateChanged(event, state) {
var player = this; const player = this;
if (state.NowPlayingItem) { if (state.NowPlayingItem) {
isEnabled = true; isEnabled = true;
@ -573,21 +594,21 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med
function onVolumeChanged(e) { function onVolumeChanged(e) {
if (isEnabled) { if (isEnabled) {
var player = this; const player = this;
updatePlayerVolumeState(player, player.isMuted(), player.getVolume()); updatePlayerVolumeState(player, player.isMuted(), player.getVolume());
} }
} }
function onPlaybackStart(e, state) { function onPlaybackStart(e, state) {
console.debug('nowplaying event: ' + e.type); console.debug('nowplaying event: ' + e.type);
var player = this; const player = this;
onStateChanged.call(player, e, state); onStateChanged.call(player, e, state);
resetUpNextDialog(); resetUpNextDialog();
} }
function resetUpNextDialog() { function resetUpNextDialog() {
comingUpNextDisplayed = false; comingUpNextDisplayed = false;
var dlg = currentUpNextDialog; const dlg = currentUpNextDialog;
if (dlg) { if (dlg) {
dlg.destroy(); dlg.destroy();
@ -607,8 +628,8 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med
} }
function onMediaStreamsChanged(e) { function onMediaStreamsChanged(e) {
var player = this; const player = this;
var state = playbackManager.getPlayerState(player); const state = playbackManager.getPlayerState(player);
onStateChanged.call(player, { onStateChanged.call(player, {
type: 'init' type: 'init'
}, state); }, state);
@ -628,7 +649,7 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med
currentPlayer = player; currentPlayer = player;
if (!player) return; if (!player) return;
} }
var state = playbackManager.getPlayerState(player); const state = playbackManager.getPlayerState(player);
onStateChanged.call(player, { onStateChanged.call(player, {
type: 'init' type: 'init'
}, state); }, state);
@ -653,7 +674,7 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med
destroyStats(); destroyStats();
destroySubtitleSync(); destroySubtitleSync();
resetUpNextDialog(); resetUpNextDialog();
var player = currentPlayer; const player = currentPlayer;
if (player) { if (player) {
events.off(player, 'playbackstart', onPlaybackStart); events.off(player, 'playbackstart', onPlaybackStart);
@ -671,15 +692,15 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med
function onTimeUpdate(e) { function onTimeUpdate(e) {
// Test for 'currentItem' is required for Firefox since its player spams 'timeupdate' events even being at breakpoint // Test for 'currentItem' is required for Firefox since its player spams 'timeupdate' events even being at breakpoint
if (isEnabled && currentItem) { if (isEnabled && currentItem) {
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);
var currentTime = playbackManager.currentTime(player); const currentTime = playbackManager.currentTime(player);
updateTimeDisplay(currentTime, currentRuntimeTicks, playbackManager.playbackStartTime(player), playbackManager.getBufferedRanges(player)); updateTimeDisplay(currentTime, currentRuntimeTicks, playbackManager.playbackStartTime(player), playbackManager.getBufferedRanges(player));
var item = currentItem; const item = currentItem;
refreshProgramInfoIfNeeded(player, item); refreshProgramInfoIfNeeded(player, item);
showComingUpNextIfNeeded(player, item, currentTime, currentRuntimeTicks); showComingUpNextIfNeeded(player, item, currentTime, currentRuntimeTicks);
} }
@ -688,9 +709,9 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med
function showComingUpNextIfNeeded(player, currentItem, currentTimeTicks, runtimeTicks) { function showComingUpNextIfNeeded(player, currentItem, currentTimeTicks, runtimeTicks) {
if (runtimeTicks && currentTimeTicks && !comingUpNextDisplayed && !currentVisibleMenu && 'Episode' === currentItem.Type && userSettings.enableNextVideoInfoOverlay()) { if (runtimeTicks && currentTimeTicks && !comingUpNextDisplayed && !currentVisibleMenu && 'Episode' === currentItem.Type && userSettings.enableNextVideoInfoOverlay()) {
var showAtSecondsLeft = runtimeTicks >= 3e10 ? 40 : runtimeTicks >= 24e9 ? 35 : 30; const showAtSecondsLeft = runtimeTicks >= 3e10 ? 40 : runtimeTicks >= 24e9 ? 35 : 30;
var showAtTicks = runtimeTicks - 1e3 * showAtSecondsLeft * 1e4; const showAtTicks = runtimeTicks - 1e3 * showAtSecondsLeft * 1e4;
var timeRemainingTicks = runtimeTicks - currentTimeTicks; const timeRemainingTicks = runtimeTicks - currentTimeTicks;
if (currentTimeTicks >= showAtTicks && runtimeTicks >= 6e9 && timeRemainingTicks >= 2e8) { if (currentTimeTicks >= showAtTicks && runtimeTicks >= 6e9 && timeRemainingTicks >= 2e8) {
showComingUpNext(player); showComingUpNext(player);
@ -705,7 +726,7 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med
} }
function showComingUpNext(player) { function showComingUpNext(player) {
require(['upNextDialog'], function (UpNextDialog) { import('upNextDialog').then(({default: UpNextDialog}) => {
if (!(currentVisibleMenu || currentUpNextDialog)) { if (!(currentVisibleMenu || currentUpNextDialog)) {
currentVisibleMenu = 'upnext'; currentVisibleMenu = 'upnext';
comingUpNextDisplayed = true; comingUpNextDisplayed = true;
@ -723,15 +744,15 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med
function refreshProgramInfoIfNeeded(player, item) { function refreshProgramInfoIfNeeded(player, item) {
if ('TvChannel' === item.Type) { if ('TvChannel' === item.Type) {
var program = item.CurrentProgram; const program = item.CurrentProgram;
if (program && program.EndDate) { if (program && program.EndDate) {
try { try {
var endDate = datetime.parseISO8601Date(program.EndDate); const endDate = datetime.parseISO8601Date(program.EndDate);
if (new Date().getTime() >= endDate.getTime()) { if (new Date().getTime() >= endDate.getTime()) {
console.debug('program info needs to be refreshed'); console.debug('program info needs to be refreshed');
var state = playbackManager.getPlayerState(player); const state = playbackManager.getPlayerState(player);
onStateChanged.call(player, { onStateChanged.call(player, {
type: 'init' type: 'init'
}, state); }, state);
@ -759,9 +780,9 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med
} }
function updatePlayerStateInternal(event, player, state) { function updatePlayerStateInternal(event, player, state) {
var playState = state.PlayState || {}; const playState = state.PlayState || {};
updatePlayPauseState(playState.IsPaused); updatePlayPauseState(playState.IsPaused);
var supportedCommands = playbackManager.getSupportedCommands(player); const supportedCommands = playbackManager.getSupportedCommands(player);
currentPlayerSupportedCommands = supportedCommands; currentPlayerSupportedCommands = supportedCommands;
supportsBrightnessChange = -1 !== supportedCommands.indexOf('SetBrightness'); supportsBrightnessChange = -1 !== supportedCommands.indexOf('SetBrightness');
updatePlayerVolumeState(player, playState.IsMuted, playState.VolumeLevel); updatePlayerVolumeState(player, playState.IsMuted, playState.VolumeLevel);
@ -772,7 +793,7 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med
btnFastForward.disabled = !playState.CanSeek; btnFastForward.disabled = !playState.CanSeek;
btnRewind.disabled = !playState.CanSeek; btnRewind.disabled = !playState.CanSeek;
var nowPlayingItem = state.NowPlayingItem || {}; const nowPlayingItem = state.NowPlayingItem || {};
playbackStartTimeTicks = playState.PlaybackStartTimeTicks; playbackStartTimeTicks = playState.PlaybackStartTimeTicks;
updateTimeDisplay(playState.PositionTicks, nowPlayingItem.RunTimeTicks, playState.PlaybackStartTimeTicks, playState.BufferedRanges || []); updateTimeDisplay(playState.PositionTicks, nowPlayingItem.RunTimeTicks, playState.PlaybackStartTimeTicks, playState.BufferedRanges || []);
updateNowPlayingInfo(player, state); updateNowPlayingInfo(player, state);
@ -783,7 +804,7 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med
view.querySelector('.btnVideoOsdSettings').classList.add('hide'); view.querySelector('.btnVideoOsdSettings').classList.add('hide');
} }
var isProgressClear = state.MediaSource && null == state.MediaSource.RunTimeTicks; const isProgressClear = state.MediaSource && null == state.MediaSource.RunTimeTicks;
nowPlayingPositionSlider.setIsClear(isProgressClear); nowPlayingPositionSlider.setIsClear(isProgressClear);
if (nowPlayingItem.RunTimeTicks) { if (nowPlayingItem.RunTimeTicks) {
@ -820,12 +841,12 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med
if (enableProgressByTimeOfDay) { if (enableProgressByTimeOfDay) {
if (nowPlayingPositionSlider && !nowPlayingPositionSlider.dragging) { if (nowPlayingPositionSlider && !nowPlayingPositionSlider.dragging) {
if (programStartDateMs && programEndDateMs) { if (programStartDateMs && programEndDateMs) {
var currentTimeMs = (playbackStartTimeTicks + (positionTicks || 0)) / 1e4; const currentTimeMs = (playbackStartTimeTicks + (positionTicks || 0)) / 1e4;
var programRuntimeMs = programEndDateMs - programStartDateMs; const programRuntimeMs = programEndDateMs - programStartDateMs;
if (nowPlayingPositionSlider.value = getDisplayPercentByTimeOfDay(programStartDateMs, programRuntimeMs, currentTimeMs), bufferedRanges.length) { if (nowPlayingPositionSlider.value = getDisplayPercentByTimeOfDay(programStartDateMs, programRuntimeMs, currentTimeMs), bufferedRanges.length) {
var rangeStart = getDisplayPercentByTimeOfDay(programStartDateMs, programRuntimeMs, (playbackStartTimeTicks + (bufferedRanges[0].start || 0)) / 1e4); const rangeStart = getDisplayPercentByTimeOfDay(programStartDateMs, programRuntimeMs, (playbackStartTimeTicks + (bufferedRanges[0].start || 0)) / 1e4);
var rangeEnd = getDisplayPercentByTimeOfDay(programStartDateMs, programRuntimeMs, (playbackStartTimeTicks + (bufferedRanges[0].end || 0)) / 1e4); const rangeEnd = getDisplayPercentByTimeOfDay(programStartDateMs, programRuntimeMs, (playbackStartTimeTicks + (bufferedRanges[0].end || 0)) / 1e4);
nowPlayingPositionSlider.setBufferedRanges([{ nowPlayingPositionSlider.setBufferedRanges([{
start: rangeStart, start: rangeStart,
end: rangeEnd end: rangeEnd
@ -844,7 +865,7 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med
} else { } else {
if (nowPlayingPositionSlider && !nowPlayingPositionSlider.dragging) { if (nowPlayingPositionSlider && !nowPlayingPositionSlider.dragging) {
if (runtimeTicks) { if (runtimeTicks) {
var pct = positionTicks / runtimeTicks; let pct = positionTicks / runtimeTicks;
pct *= 100; pct *= 100;
nowPlayingPositionSlider.value = pct; nowPlayingPositionSlider.value = pct;
} else { } else {
@ -868,9 +889,9 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med
} }
function updatePlayerVolumeState(player, isMuted, volumeLevel) { function updatePlayerVolumeState(player, isMuted, volumeLevel) {
var supportedCommands = currentPlayerSupportedCommands; const supportedCommands = currentPlayerSupportedCommands;
var showMuteButton = true; let showMuteButton = true;
var showVolumeSlider = true; let showVolumeSlider = true;
if (-1 === supportedCommands.indexOf('Mute')) { if (-1 === supportedCommands.indexOf('Mute')) {
showMuteButton = false; showMuteButton = false;
@ -918,8 +939,8 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med
} }
function updatePlaylist(player) { function updatePlaylist(player) {
var btnPreviousTrack = view.querySelector('.btnPreviousTrack'); const btnPreviousTrack = view.querySelector('.btnPreviousTrack');
var btnNextTrack = view.querySelector('.btnNextTrack'); const btnNextTrack = view.querySelector('.btnNextTrack');
btnPreviousTrack.classList.remove('hide'); btnPreviousTrack.classList.remove('hide');
btnNextTrack.classList.remove('hide'); btnNextTrack.classList.remove('hide');
btnNextTrack.disabled = false; btnNextTrack.disabled = false;
@ -932,7 +953,7 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med
return; return;
} }
var html = datetime.getDisplayRunningTime(ticks); let html = datetime.getDisplayRunningTime(ticks);
if (divider) { if (divider) {
html = '&nbsp;/&nbsp;' + html; html = '&nbsp;/&nbsp;' + html;
@ -942,15 +963,15 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med
} }
function onSettingsButtonClick(e) { function onSettingsButtonClick(e) {
var btn = this; const btn = this;
require(['playerSettingsMenu'], function (playerSettingsMenu) { import('playerSettingsMenu').then(({default: playerSettingsMenu}) => {
var player = currentPlayer; const player = currentPlayer;
if (player) { if (player) {
// show subtitle offset feature only if player and media support it // show subtitle offset feature only if player and media support it
var showSubOffset = playbackManager.supportSubtitleOffset(player) && const showSubOffset = playbackManager.supportSubtitleOffset(player) &&
playbackManager.canHandleOffsetOnCurrentSubtitle(player); playbackManager.canHandleOffsetOnCurrentSubtitle(player);
playerSettingsMenu.show({ playerSettingsMenu.show({
@ -969,7 +990,7 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med
if ('stats' === selectedOption) { if ('stats' === selectedOption) {
toggleStats(); toggleStats();
} else if ('suboffset' === selectedOption) { } else if ('suboffset' === selectedOption) {
var player = currentPlayer; const player = currentPlayer;
if (player) { if (player) {
playbackManager.enableShowingSubtitleOffset(player); playbackManager.enableShowingSubtitleOffset(player);
toggleSubtitleSync(); toggleSubtitleSync();
@ -978,8 +999,8 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med
} }
function toggleStats() { function toggleStats() {
require(['playerStats'], function (PlayerStats) { import('playerStats').then(({default: PlayerStats}) => {
var player = currentPlayer; const player = currentPlayer;
if (player) { if (player) {
if (statsOverlay) { if (statsOverlay) {
@ -1001,11 +1022,11 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med
} }
function showAudioTrackSelection() { function showAudioTrackSelection() {
var player = currentPlayer; const player = currentPlayer;
var audioTracks = playbackManager.audioTracks(player); const audioTracks = playbackManager.audioTracks(player);
var currentIndex = playbackManager.getAudioStreamIndex(player); const currentIndex = playbackManager.getAudioStreamIndex(player);
var menuItems = audioTracks.map(function (stream) { const menuItems = audioTracks.map(function (stream) {
var opt = { const opt = {
name: stream.DisplayTitle, name: stream.DisplayTitle,
id: stream.Index id: stream.Index
}; };
@ -1016,15 +1037,15 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med
return opt; return opt;
}); });
var positionTo = this; const positionTo = this;
require(['actionsheet'], function (actionsheet) { import('actionsheet').then(({default: actionsheet}) => {
actionsheet.show({ actionsheet.show({
items: menuItems, items: menuItems,
title: globalize.translate('Audio'), title: globalize.translate('Audio'),
positionTo: positionTo positionTo: positionTo
}).then(function (id) { }).then(function (id) {
var index = parseInt(id); const index = parseInt(id);
if (index !== currentIndex) { if (index !== currentIndex) {
playbackManager.setAudioStreamIndex(index, player); playbackManager.setAudioStreamIndex(index, player);
@ -1034,9 +1055,9 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med
} }
function showSubtitleTrackSelection() { function showSubtitleTrackSelection() {
var player = currentPlayer; const player = currentPlayer;
var streams = playbackManager.subtitleTracks(player); const streams = playbackManager.subtitleTracks(player);
var currentIndex = playbackManager.getSubtitleStreamIndex(player); let currentIndex = playbackManager.getSubtitleStreamIndex(player);
if (null == currentIndex) { if (null == currentIndex) {
currentIndex = -1; currentIndex = -1;
@ -1046,8 +1067,8 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med
Index: -1, Index: -1,
DisplayTitle: globalize.translate('Off') DisplayTitle: globalize.translate('Off')
}); });
var menuItems = streams.map(function (stream) { const menuItems = streams.map(function (stream) {
var opt = { const opt = {
name: stream.DisplayTitle, name: stream.DisplayTitle,
id: stream.Index id: stream.Index
}; };
@ -1058,15 +1079,15 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med
return opt; return opt;
}); });
var positionTo = this; const positionTo = this;
require(['actionsheet'], function (actionsheet) { import('actionsheet').then(({default: actionsheet}) => {
actionsheet.show({ actionsheet.show({
title: globalize.translate('Subtitles'), title: globalize.translate('Subtitles'),
items: menuItems, items: menuItems,
positionTo: positionTo positionTo: positionTo
}).then(function (id) { }).then(function (id) {
var index = parseInt(id); const index = parseInt(id);
if (index !== currentIndex) { if (index !== currentIndex) {
playbackManager.setSubtitleStreamIndex(index, player); playbackManager.setSubtitleStreamIndex(index, player);
@ -1078,8 +1099,8 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med
} }
function toggleSubtitleSync(action) { function toggleSubtitleSync(action) {
require(['subtitleSync'], function (SubtitleSync) { import('subtitleSync').then(({default: SubtitleSync}) => {
var player = currentPlayer; const player = currentPlayer;
if (subtitleSyncOverlay) { if (subtitleSyncOverlay) {
subtitleSyncOverlay.toggle(action); subtitleSyncOverlay.toggle(action);
} else if (player) { } else if (player) {
@ -1099,12 +1120,12 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med
* Clicked element. * Clicked element.
* To skip 'click' handling on Firefox/Edge. * To skip 'click' handling on Firefox/Edge.
*/ */
var clickedElement; let clickedElement;
function onKeyDown(e) { function onKeyDown(e) {
clickedElement = e.srcElement; clickedElement = e.srcElement;
var key = keyboardnavigation.getKeyName(e); const key = keyboardnavigation.getKeyName(e);
if (!currentVisibleMenu && 32 === e.keyCode) { if (!currentVisibleMenu && 32 === e.keyCode) {
playbackManager.playPause(currentPlayer); playbackManager.playPause(currentPlayer);
@ -1208,10 +1229,11 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med
case '6': case '6':
case '7': case '7':
case '8': case '8':
case '9': case '9': {
var percent = parseInt(key, 10) * 10; const percent = parseInt(key, 10) * 10;
playbackManager.seekPercent(percent, currentPlayer); playbackManager.seekPercent(percent, currentPlayer);
break; break;
}
} }
} }
@ -1254,11 +1276,11 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med
} }
function getChapterBubbleHtml(apiClient, item, chapters, positionTicks) { function getChapterBubbleHtml(apiClient, item, chapters, positionTicks) {
var chapter; let chapter;
var index = -1; let index = -1;
for (var i = 0, length = chapters.length; i < length; i++) { for (let i = 0, length = chapters.length; i < length; i++) {
var currentChapter = chapters[i]; const currentChapter = chapters[i];
if (positionTicks >= currentChapter.StartPositionTicks) { if (positionTicks >= currentChapter.StartPositionTicks) {
chapter = currentChapter; chapter = currentChapter;
@ -1270,10 +1292,10 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med
return null; return null;
} }
var src = getImgUrl(item, chapter, index, 400, apiClient); const src = getImgUrl(item, chapter, index, 400, apiClient);
if (src) { if (src) {
var html = '<div class="chapterThumbContainer">'; let html = '<div class="chapterThumbContainer">';
html += '<img class="chapterThumb" src="' + src + '" />'; html += '<img class="chapterThumb" src="' + src + '" />';
html += '<div class="chapterThumbTextContainer">'; html += '<div class="chapterThumbTextContainer">';
html += '<div class="chapterThumbText chapterThumbText-dim">'; html += '<div class="chapterThumbText chapterThumbText-dim">';
@ -1289,15 +1311,15 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med
return null; return null;
} }
var playPauseClickTimeout; let playPauseClickTimeout;
function onViewHideStopPlayback() { function onViewHideStopPlayback() {
if (playbackManager.isPlayingVideo()) { if (playbackManager.isPlayingVideo()) {
require(['shell'], function (shell) { import('shell').then(({default: shell}) => {
shell.disableFullscreen(); shell.disableFullscreen();
}); });
clearTimeout(playPauseClickTimeout); clearTimeout(playPauseClickTimeout);
var player = currentPlayer; const player = currentPlayer;
view.removeEventListener('viewbeforehide', onViewHideStopPlayback); view.removeEventListener('viewbeforehide', onViewHideStopPlayback);
releaseCurrentPlayer(); releaseCurrentPlayer();
playbackManager.stop(player); playbackManager.stop(player);
@ -1312,43 +1334,43 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med
} }
} }
require(['shell'], function (shell) { import('shell').then(({default: shell}) => {
shell.enableFullscreen(); shell.enableFullscreen();
}); });
var currentPlayer; let currentPlayer;
var comingUpNextDisplayed; let comingUpNextDisplayed;
var currentUpNextDialog; let currentUpNextDialog;
var isEnabled; let isEnabled;
var currentItem; let currentItem;
var recordingButtonManager; let recordingButtonManager;
var enableProgressByTimeOfDay; let enableProgressByTimeOfDay;
var supportsBrightnessChange; let supportsBrightnessChange;
var currentVisibleMenu; let currentVisibleMenu;
var statsOverlay; let statsOverlay;
var osdHideTimeout; let osdHideTimeout;
var lastPointerMoveData; let lastPointerMoveData;
var self = this; const self = this;
var currentPlayerSupportedCommands = []; let currentPlayerSupportedCommands = [];
var currentRuntimeTicks = 0; let currentRuntimeTicks = 0;
var lastUpdateTime = 0; let lastUpdateTime = 0;
var programStartDateMs = 0; let programStartDateMs = 0;
var programEndDateMs = 0; let programEndDateMs = 0;
var playbackStartTimeTicks = 0; let playbackStartTimeTicks = 0;
var subtitleSyncOverlay; let subtitleSyncOverlay;
var nowPlayingVolumeSlider = view.querySelector('.osdVolumeSlider'); const nowPlayingVolumeSlider = view.querySelector('.osdVolumeSlider');
var nowPlayingVolumeSliderContainer = view.querySelector('.osdVolumeSliderContainer'); const nowPlayingVolumeSliderContainer = view.querySelector('.osdVolumeSliderContainer');
var nowPlayingPositionSlider = view.querySelector('.osdPositionSlider'); const nowPlayingPositionSlider = view.querySelector('.osdPositionSlider');
var nowPlayingPositionText = view.querySelector('.osdPositionText'); const nowPlayingPositionText = view.querySelector('.osdPositionText');
var nowPlayingDurationText = view.querySelector('.osdDurationText'); const nowPlayingDurationText = view.querySelector('.osdDurationText');
var startTimeText = view.querySelector('.startTimeText'); const startTimeText = view.querySelector('.startTimeText');
var endTimeText = view.querySelector('.endTimeText'); const endTimeText = view.querySelector('.endTimeText');
var endsAtText = view.querySelector('.endsAtText'); const endsAtText = view.querySelector('.endsAtText');
var btnRewind = view.querySelector('.btnRewind'); const btnRewind = view.querySelector('.btnRewind');
var btnFastForward = view.querySelector('.btnFastForward'); const btnFastForward = view.querySelector('.btnFastForward');
var transitionEndEventName = dom.whichTransitionEvent(); const transitionEndEventName = dom.whichTransitionEvent();
var headerElement = document.querySelector('.skinHeader'); const headerElement = document.querySelector('.skinHeader');
var osdBottomElement = document.querySelector('.videoOsdBottom-maincontrols'); const osdBottomElement = document.querySelector('.videoOsdBottom-maincontrols');
nowPlayingPositionSlider.enableKeyboardDragging(); nowPlayingPositionSlider.enableKeyboardDragging();
nowPlayingVolumeSlider.enableKeyboardDragging(); nowPlayingVolumeSlider.enableKeyboardDragging();
@ -1392,7 +1414,7 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med
}); });
}); });
} catch (e) { } catch (e) {
require(['appRouter'], function(appRouter) { import('appRouter').then(({default: appRouter}) => {
appRouter.goHome(); appRouter.goHome();
}); });
} }
@ -1460,15 +1482,15 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med
destroyStats(); destroyStats();
destroySubtitleSync(); destroySubtitleSync();
}); });
var lastPointerDown = 0; let lastPointerDown = 0;
/* eslint-disable-next-line compat/compat */ /* eslint-disable-next-line compat/compat */
dom.addEventListener(view, window.PointerEvent ? 'pointerdown' : 'click', function (e) { dom.addEventListener(view, window.PointerEvent ? 'pointerdown' : 'click', function (e) {
if (dom.parentWithClass(e.target, ['videoOsdBottom', 'upNextContainer'])) { if (dom.parentWithClass(e.target, ['videoOsdBottom', 'upNextContainer'])) {
return void showOsd(); return void showOsd();
} }
var pointerType = e.pointerType || (layoutManager.mobile ? 'touch' : 'mouse'); const pointerType = e.pointerType || (layoutManager.mobile ? 'touch' : 'mouse');
var now = new Date().getTime(); const now = new Date().getTime();
switch (pointerType) { switch (pointerType) {
case 'touch': case 'touch':
@ -1506,7 +1528,7 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med
if (browser.touch) { if (browser.touch) {
dom.addEventListener(view, 'dblclick', onDoubleClick, {}); dom.addEventListener(view, 'dblclick', onDoubleClick, {});
} else { } else {
var options = { passive: true }; const options = { passive: true };
dom.addEventListener(view, 'dblclick', function () { dom.addEventListener(view, 'dblclick', function () {
playbackManager.toggleFullscreen(currentPlayer); playbackManager.toggleFullscreen(currentPlayer);
}, options); }, options);
@ -1521,13 +1543,13 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med
}); });
nowPlayingPositionSlider.addEventListener('change', function () { nowPlayingPositionSlider.addEventListener('change', function () {
var player = currentPlayer; const player = currentPlayer;
if (player) { if (player) {
var newPercent = parseFloat(this.value); const newPercent = parseFloat(this.value);
if (enableProgressByTimeOfDay) { if (enableProgressByTimeOfDay) {
var seekAirTimeTicks = newPercent / 100 * (programEndDateMs - programStartDateMs) * 1e4; let seekAirTimeTicks = newPercent / 100 * (programEndDateMs - programStartDateMs) * 1e4;
seekAirTimeTicks += 1e4 * programStartDateMs; seekAirTimeTicks += 1e4 * programStartDateMs;
seekAirTimeTicks -= playbackStartTimeTicks; seekAirTimeTicks -= playbackStartTimeTicks;
playbackManager.seek(seekAirTimeTicks, player); playbackManager.seek(seekAirTimeTicks, player);
@ -1541,7 +1563,7 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med
showOsd(); showOsd();
if (enableProgressByTimeOfDay) { if (enableProgressByTimeOfDay) {
if (programStartDateMs && programEndDateMs) { if (programStartDateMs && programEndDateMs) {
var ms = programEndDateMs - programStartDateMs; let ms = programEndDateMs - programStartDateMs;
ms /= 100; ms /= 100;
ms *= value; ms *= value;
ms += programStartDateMs; ms += programStartDateMs;
@ -1555,13 +1577,13 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med
return '--:--'; return '--:--';
} }
var ticks = currentRuntimeTicks; let ticks = currentRuntimeTicks;
ticks /= 100; ticks /= 100;
ticks *= value; ticks *= value;
var item = currentItem; const item = currentItem;
if (item && item.Chapters && item.Chapters.length && item.Chapters[0].ImageTag) { if (item && item.Chapters && item.Chapters.length && item.Chapters[0].ImageTag) {
var html = getChapterBubbleHtml(connectionManager.getApiClient(item.ServerId), item, item.Chapters, ticks); let html = getChapterBubbleHtml(connectionManager.getApiClient(item.ServerId), item, item.Chapters, ticks);
if (html) { if (html) {
return html; return html;
@ -1594,7 +1616,7 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med
if (browser.touch) { if (browser.touch) {
(function () { (function () {
require(['touchHelper'], function (TouchHelper) { import('touchHelper').then(({default: TouchHelper}) => {
self.touchHelper = new TouchHelper(view, { self.touchHelper = new TouchHelper(view, {
swipeYThreshold: 30, swipeYThreshold: 30,
triggerOnMove: true, triggerOnMove: true,
@ -1606,5 +1628,6 @@ define(['playbackManager', 'dom', 'inputManager', 'datetime', 'itemHelper', 'med
}); });
})(); })();
} }
}; }
});
/* eslint-enable indent */