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