mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
Migrate components/playback functions to ES6 modules
This commit is contained in:
parent
e32df64c9f
commit
c843bc9fb6
9 changed files with 1029 additions and 1018 deletions
18
package.json
18
package.json
|
@ -89,23 +89,31 @@
|
|||
"overrides": [
|
||||
{
|
||||
"test": [
|
||||
"src/components/actionSheet/actionSheet.js",
|
||||
"src/components/autoFocuser.js",
|
||||
"src/components/cardbuilder/cardBuilder.js",
|
||||
"src/scripts/fileDownloader.js",
|
||||
"src/components/images/imageLoader.js",
|
||||
"src/components/indicators/indicators.js",
|
||||
"src/components/lazyLoader/lazyLoaderIntersectionObserver.js",
|
||||
"src/components/playback/brightnessosd.js",
|
||||
"src/components/playback/mediasession.js",
|
||||
"src/components/playback/nowplayinghelper.js",
|
||||
"src/components/playback/playbackorientation.js",
|
||||
"src/components/playback/playerSelectionMenu.js",
|
||||
"src/components/playback/playersettingsmenu.js",
|
||||
"src/components/playback/playmethodhelper.js",
|
||||
"src/components/playback/remotecontrolautoplay.js",
|
||||
"src/components/playback/volumeosd.js",
|
||||
"src/components/playmenu.js",
|
||||
"src/components/sanatizefilename.js",
|
||||
"src/components/scrollManager.js",
|
||||
"src/scripts/deleteHelper.js",
|
||||
"src/scripts/dfnshelper.js",
|
||||
"src/scripts/dom.js",
|
||||
"src/scripts/fileDownloader.js",
|
||||
"src/scripts/filesystem.js",
|
||||
"src/scripts/imagehelper.js",
|
||||
"src/scripts/inputManager.js",
|
||||
"src/scripts/deleteHelper.js",
|
||||
"src/components/actionSheet/actionSheet.js",
|
||||
"src/components/playmenu.js",
|
||||
"src/components/indicators/indicators.js",
|
||||
"src/scripts/keyboardNavigation.js",
|
||||
"src/scripts/settings/appSettings.js",
|
||||
"src/scripts/settings/userSettings.js",
|
||||
|
|
|
@ -1,14 +1,18 @@
|
|||
define(['events', 'playbackManager', 'dom', 'browser', 'css!./iconosd', 'material-icons'], function (events, playbackManager, dom, browser) {
|
||||
'use strict';
|
||||
import events from 'events';
|
||||
import playbackManager from 'playbackManager';
|
||||
import dom from 'dom';
|
||||
import browser from 'browser';
|
||||
import 'css!./iconosd';
|
||||
import 'material-icons';
|
||||
|
||||
var currentPlayer;
|
||||
var osdElement;
|
||||
var iconElement;
|
||||
var progressElement;
|
||||
var currentPlayer;
|
||||
var osdElement;
|
||||
var iconElement;
|
||||
var progressElement;
|
||||
|
||||
var enableAnimation;
|
||||
var enableAnimation;
|
||||
|
||||
function getOsdElementHtml() {
|
||||
function getOsdElementHtml() {
|
||||
var html = '';
|
||||
|
||||
html += '<span class="material-icons iconOsdIcon brightness_high"></span>';
|
||||
|
@ -16,9 +20,9 @@ define(['events', 'playbackManager', 'dom', 'browser', 'css!./iconosd', 'materia
|
|||
html += '<div class="iconOsdProgressOuter"><div class="iconOsdProgressInner brightnessOsdProgressInner"></div></div>';
|
||||
|
||||
return html;
|
||||
}
|
||||
}
|
||||
|
||||
function ensureOsdElement() {
|
||||
function ensureOsdElement() {
|
||||
|
||||
var elem = osdElement;
|
||||
if (!elem) {
|
||||
|
@ -38,14 +42,14 @@ define(['events', 'playbackManager', 'dom', 'browser', 'css!./iconosd', 'materia
|
|||
document.body.appendChild(elem);
|
||||
osdElement = elem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function onHideComplete() {
|
||||
function onHideComplete() {
|
||||
this.classList.add('hide');
|
||||
}
|
||||
}
|
||||
|
||||
var hideTimeout;
|
||||
function showOsd() {
|
||||
var hideTimeout;
|
||||
function showOsd() {
|
||||
|
||||
clearHideTimeout();
|
||||
|
||||
|
@ -65,16 +69,16 @@ define(['events', 'playbackManager', 'dom', 'browser', 'css!./iconosd', 'materia
|
|||
|
||||
hideTimeout = setTimeout(hideOsd, 3000);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function clearHideTimeout() {
|
||||
function clearHideTimeout() {
|
||||
if (hideTimeout) {
|
||||
clearTimeout(hideTimeout);
|
||||
hideTimeout = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function hideOsd() {
|
||||
function hideOsd() {
|
||||
|
||||
clearHideTimeout();
|
||||
|
||||
|
@ -96,16 +100,16 @@ define(['events', 'playbackManager', 'dom', 'browser', 'css!./iconosd', 'materia
|
|||
onHideComplete.call(elem);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function setIcon(iconElement, icon) {
|
||||
function setIcon(iconElement, icon) {
|
||||
iconElement.classList.remove('brightness_high');
|
||||
iconElement.classList.remove('brightness_medium');
|
||||
iconElement.classList.remove('brightness_low');
|
||||
iconElement.classList.add(icon);
|
||||
}
|
||||
}
|
||||
|
||||
function updateElementsFromPlayer(brightness) {
|
||||
function updateElementsFromPlayer(brightness) {
|
||||
|
||||
if (iconElement) {
|
||||
if (brightness >= 80) {
|
||||
|
@ -119,9 +123,9 @@ define(['events', 'playbackManager', 'dom', 'browser', 'css!./iconosd', 'materia
|
|||
if (progressElement) {
|
||||
progressElement.style.width = (brightness || 0) + '%';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function releaseCurrentPlayer() {
|
||||
function releaseCurrentPlayer() {
|
||||
|
||||
var player = currentPlayer;
|
||||
|
||||
|
@ -130,9 +134,9 @@ define(['events', 'playbackManager', 'dom', 'browser', 'css!./iconosd', 'materia
|
|||
events.off(player, 'playbackstop', hideOsd);
|
||||
currentPlayer = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function onBrightnessChanged(e) {
|
||||
function onBrightnessChanged(e) {
|
||||
|
||||
var player = this;
|
||||
|
||||
|
@ -141,9 +145,9 @@ define(['events', 'playbackManager', 'dom', 'browser', 'css!./iconosd', 'materia
|
|||
updateElementsFromPlayer(playbackManager.getBrightness(player));
|
||||
|
||||
showOsd();
|
||||
}
|
||||
}
|
||||
|
||||
function bindToPlayer(player) {
|
||||
function bindToPlayer(player) {
|
||||
|
||||
if (player === currentPlayer) {
|
||||
return;
|
||||
|
@ -160,12 +164,10 @@ define(['events', 'playbackManager', 'dom', 'browser', 'css!./iconosd', 'materia
|
|||
hideOsd();
|
||||
events.on(player, 'brightnesschange', onBrightnessChanged);
|
||||
events.on(player, 'playbackstop', hideOsd);
|
||||
}
|
||||
}
|
||||
|
||||
events.on(playbackManager, 'playerchange', function () {
|
||||
events.on(playbackManager, 'playerchange', function () {
|
||||
bindToPlayer(playbackManager.getCurrentPlayer());
|
||||
});
|
||||
|
||||
bindToPlayer(playbackManager.getCurrentPlayer());
|
||||
|
||||
});
|
||||
|
||||
bindToPlayer(playbackManager.getCurrentPlayer());
|
||||
|
|
|
@ -1,7 +1,4 @@
|
|||
define([], function () {
|
||||
'use strict';
|
||||
|
||||
function getNowPlayingNames(nowPlayingItem, includeNonNameInfo) {
|
||||
export function getNowPlayingNames(nowPlayingItem, includeNonNameInfo) {
|
||||
|
||||
var topItem = nowPlayingItem;
|
||||
var bottomItem = null;
|
||||
|
@ -78,9 +75,8 @@ define([], function () {
|
|||
}
|
||||
|
||||
return list;
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
export default {
|
||||
getNowPlayingNames: getNowPlayingNames
|
||||
};
|
||||
});
|
||||
};
|
||||
|
|
|
@ -1,18 +1,19 @@
|
|||
define(['playbackManager', 'layoutManager', 'events'], function (playbackManager, layoutManager, events) {
|
||||
'use strict';
|
||||
import playbackManager from 'playbackManager';
|
||||
import layoutManager from 'layoutManager';
|
||||
import events from 'events';
|
||||
|
||||
var orientationLocked;
|
||||
var orientationLocked;
|
||||
|
||||
function onOrientationChangeSuccess() {
|
||||
function onOrientationChangeSuccess() {
|
||||
orientationLocked = true;
|
||||
}
|
||||
}
|
||||
|
||||
function onOrientationChangeError(err) {
|
||||
function onOrientationChangeError(err) {
|
||||
orientationLocked = false;
|
||||
console.error('error locking orientation: ' + err);
|
||||
}
|
||||
}
|
||||
|
||||
events.on(playbackManager, 'playbackstart', function (e, player, state) {
|
||||
events.on(playbackManager, 'playbackstart', function (e, player, state) {
|
||||
|
||||
var isLocalVideo = player.isLocalPlayer && !player.isExternalPlayer && playbackManager.isPlayingVideo(player);
|
||||
|
||||
|
@ -35,9 +36,9 @@ define(['playbackManager', 'layoutManager', 'events'], function (playbackManager
|
|||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
events.on(playbackManager, 'playbackstop', function (e, playbackStopInfo) {
|
||||
events.on(playbackManager, 'playbackstop', function (e, playbackStopInfo) {
|
||||
|
||||
if (orientationLocked && !playbackStopInfo.nextMediaType) {
|
||||
|
||||
|
@ -53,5 +54,4 @@ define(['playbackManager', 'layoutManager', 'events'], function (playbackManager
|
|||
orientationLocked = false;
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
|
@ -1,7 +1,13 @@
|
|||
define(['appSettings', 'events', 'browser', 'loading', 'playbackManager', 'appRouter', 'globalize', 'apphost'], function (appSettings, events, browser, loading, playbackManager, appRouter, globalize, appHost) {
|
||||
'use strict';
|
||||
import appSettings from 'appSettings';
|
||||
import events from 'events';
|
||||
import browser from 'browser';
|
||||
import loading from 'loading';
|
||||
import playbackManager from 'playbackManager';
|
||||
import appRouter from 'appRouter';
|
||||
import globalize from 'globalize';
|
||||
import appHost from 'apphost';
|
||||
|
||||
function mirrorItem(info, player) {
|
||||
function mirrorItem(info, player) {
|
||||
|
||||
var item = info.item;
|
||||
|
||||
|
@ -12,9 +18,9 @@ define(['appSettings', 'events', 'browser', 'loading', 'playbackManager', 'appRo
|
|||
ItemType: item.Type,
|
||||
Context: info.context
|
||||
}, player);
|
||||
}
|
||||
}
|
||||
|
||||
function mirrorIfEnabled(info) {
|
||||
function mirrorIfEnabled(info) {
|
||||
|
||||
if (info && playbackManager.enableDisplayMirroring()) {
|
||||
|
||||
|
@ -26,13 +32,13 @@ define(['appSettings', 'events', 'browser', 'loading', 'playbackManager', 'appRo
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function emptyCallback() {
|
||||
function emptyCallback() {
|
||||
// avoid console logs about uncaught promises
|
||||
}
|
||||
}
|
||||
|
||||
function getTargetSecondaryText(target) {
|
||||
function getTargetSecondaryText(target) {
|
||||
|
||||
if (target.user) {
|
||||
|
||||
|
@ -40,9 +46,9 @@ define(['appSettings', 'events', 'browser', 'loading', 'playbackManager', 'appRo
|
|||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
function getIcon(target) {
|
||||
function getIcon(target) {
|
||||
|
||||
var deviceType = target.deviceType;
|
||||
|
||||
|
@ -75,9 +81,9 @@ define(['appSettings', 'events', 'browser', 'loading', 'playbackManager', 'appRo
|
|||
default:
|
||||
return 'tv';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function showPlayerSelection(button) {
|
||||
export function showPlayerSelection(button) {
|
||||
|
||||
var currentPlayerInfo = playbackManager.getPlayerInfo();
|
||||
|
||||
|
@ -144,16 +150,16 @@ define(['appSettings', 'events', 'browser', 'loading', 'playbackManager', 'appRo
|
|||
}, emptyCallback);
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function showActivePlayerMenu(playerInfo) {
|
||||
function showActivePlayerMenu(playerInfo) {
|
||||
|
||||
require(['dialogHelper', 'dialog', 'emby-checkbox', 'emby-button'], function (dialogHelper) {
|
||||
showActivePlayerMenuInternal(dialogHelper, playerInfo);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function disconnectFromPlayer(currentDeviceName) {
|
||||
function disconnectFromPlayer(currentDeviceName) {
|
||||
|
||||
if (playbackManager.getSupportedCommands().indexOf('EndSession') !== -1) {
|
||||
|
||||
|
@ -196,9 +202,9 @@ define(['appSettings', 'events', 'browser', 'loading', 'playbackManager', 'appRo
|
|||
|
||||
playbackManager.setDefaultPlayerActive();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function showActivePlayerMenuInternal(dialogHelper, playerInfo) {
|
||||
function showActivePlayerMenuInternal(dialogHelper, playerInfo) {
|
||||
|
||||
var html = '';
|
||||
|
||||
|
@ -277,13 +283,13 @@ define(['appSettings', 'events', 'browser', 'loading', 'playbackManager', 'appRo
|
|||
disconnectFromPlayer(currentDeviceName);
|
||||
}
|
||||
}, emptyCallback);
|
||||
}
|
||||
}
|
||||
|
||||
function onMirrorChange() {
|
||||
function onMirrorChange() {
|
||||
playbackManager.enableDisplayMirroring(this.checked);
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('viewshow', function (e) {
|
||||
document.addEventListener('viewshow', function (e) {
|
||||
|
||||
var state = e.detail.state || {};
|
||||
var item = state.item;
|
||||
|
@ -294,27 +300,26 @@ define(['appSettings', 'events', 'browser', 'loading', 'playbackManager', 'appRo
|
|||
});
|
||||
return;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
events.on(appSettings, 'change', function (e, name) {
|
||||
events.on(appSettings, 'change', function (e, name) {
|
||||
if (name === 'displaymirror') {
|
||||
mirrorIfEnabled();
|
||||
}
|
||||
});
|
||||
|
||||
events.on(playbackManager, 'pairing', function (e) {
|
||||
loading.show();
|
||||
});
|
||||
|
||||
events.on(playbackManager, 'paired', function (e) {
|
||||
loading.hide();
|
||||
});
|
||||
|
||||
events.on(playbackManager, 'pairerror', function (e) {
|
||||
loading.hide();
|
||||
});
|
||||
|
||||
return {
|
||||
show: showPlayerSelection
|
||||
};
|
||||
});
|
||||
|
||||
events.on(playbackManager, 'pairing', function (e) {
|
||||
loading.show();
|
||||
});
|
||||
|
||||
events.on(playbackManager, 'paired', function (e) {
|
||||
loading.hide();
|
||||
});
|
||||
|
||||
events.on(playbackManager, 'pairerror', function (e) {
|
||||
loading.hide();
|
||||
});
|
||||
|
||||
export default {
|
||||
show: showPlayerSelection
|
||||
};
|
||||
|
|
|
@ -1,7 +1,12 @@
|
|||
define(['connectionManager', 'actionsheet', 'datetime', 'playbackManager', 'globalize', 'appSettings', 'qualityoptions'], function (connectionManager, actionsheet, datetime, playbackManager, globalize, appSettings, qualityoptions) {
|
||||
'use strict';
|
||||
import connectionManager from 'connectionManager';
|
||||
import actionsheet from 'actionsheet';
|
||||
import datetime from 'datetime';
|
||||
import playbackManager from 'playbackManager';
|
||||
import globalize from 'globalize';
|
||||
import appSettings from 'appSettings';
|
||||
import qualityoptions from 'qualityoptions';
|
||||
|
||||
function showQualityMenu(player, btn) {
|
||||
function showQualityMenu(player, btn) {
|
||||
|
||||
var videoStream = playbackManager.currentMediaSource(player).MediaStreams.filter(function (stream) {
|
||||
return stream.Type === 'Video';
|
||||
|
@ -49,9 +54,9 @@ define(['connectionManager', 'actionsheet', 'datetime', 'playbackManager', 'glob
|
|||
}, player);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function showRepeatModeMenu(player, btn) {
|
||||
function showRepeatModeMenu(player, btn) {
|
||||
var menuItems = [];
|
||||
var currentValue = playbackManager.getRepeatMode(player);
|
||||
|
||||
|
@ -81,9 +86,9 @@ define(['connectionManager', 'actionsheet', 'datetime', 'playbackManager', 'glob
|
|||
playbackManager.setRepeatMode(mode, player);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function getQualitySecondaryText(player) {
|
||||
function getQualitySecondaryText(player) {
|
||||
var state = playbackManager.getPlayerState(player);
|
||||
var isAutoEnabled = playbackManager.enableAutomaticBitrateDetection(player);
|
||||
var currentMaxBitrate = playbackManager.getMaxStreamingBitrate(player);
|
||||
|
@ -137,9 +142,9 @@ define(['connectionManager', 'actionsheet', 'datetime', 'playbackManager', 'glob
|
|||
}
|
||||
|
||||
return text;
|
||||
}
|
||||
}
|
||||
|
||||
function showAspectRatioMenu(player, btn) {
|
||||
function showAspectRatioMenu(player, btn) {
|
||||
// each has a name and id
|
||||
var currentId = playbackManager.getAspectRatio(player);
|
||||
var menuItems = playbackManager.getSupportedAspectRatios(player).map(function (i) {
|
||||
|
@ -161,9 +166,9 @@ define(['connectionManager', 'actionsheet', 'datetime', 'playbackManager', 'glob
|
|||
|
||||
return Promise.reject();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function showWithUser(options, player, user) {
|
||||
function showWithUser(options, player, user) {
|
||||
var supportedCommands = playbackManager.getSupportedCommands(player);
|
||||
var mediaType = options.mediaType;
|
||||
|
||||
|
@ -223,9 +228,9 @@ define(['connectionManager', 'actionsheet', 'datetime', 'playbackManager', 'glob
|
|||
}).then(function (id) {
|
||||
return handleSelectedOption(id, options, player);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function show(options) {
|
||||
export function show(options) {
|
||||
var player = options.player;
|
||||
var currentItem = playbackManager.currentItem(player);
|
||||
|
||||
|
@ -237,9 +242,9 @@ define(['connectionManager', 'actionsheet', 'datetime', 'playbackManager', 'glob
|
|||
return apiClient.getCurrentUser().then(function (user) {
|
||||
return showWithUser(options, player, user);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function handleSelectedOption(id, options, player) {
|
||||
function handleSelectedOption(id, options, player) {
|
||||
switch (id) {
|
||||
case 'quality':
|
||||
return showQualityMenu(player, options.positionTo);
|
||||
|
@ -262,9 +267,8 @@ define(['connectionManager', 'actionsheet', 'datetime', 'playbackManager', 'glob
|
|||
}
|
||||
|
||||
return Promise.reject();
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
export default {
|
||||
show: show
|
||||
};
|
||||
});
|
||||
};
|
||||
|
|
|
@ -1,7 +1,4 @@
|
|||
define([], function () {
|
||||
'use strict';
|
||||
|
||||
function getDisplayPlayMethod(session) {
|
||||
export function getDisplayPlayMethod(session) {
|
||||
|
||||
if (!session.NowPlayingItem) {
|
||||
return null;
|
||||
|
@ -16,9 +13,8 @@ define([], function () {
|
|||
} else if (session.PlayState.PlayMethod === 'DirectPlay') {
|
||||
return 'DirectPlay';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
export default {
|
||||
getDisplayPlayMethod: getDisplayPlayMethod
|
||||
};
|
||||
});
|
||||
};
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
define(['events', 'playbackManager'], function (events, playbackManager) {
|
||||
'use strict';
|
||||
import events from 'events';
|
||||
import playbackManager from 'playbackManager';
|
||||
|
||||
function transferPlayback(oldPlayer, newPlayer) {
|
||||
function transferPlayback(oldPlayer, newPlayer) {
|
||||
|
||||
var state = playbackManager.getPlayerState(oldPlayer);
|
||||
|
||||
|
@ -23,9 +23,9 @@ define(['events', 'playbackManager'], function (events, playbackManager) {
|
|||
|
||||
}, newPlayer);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
events.on(playbackManager, 'playerchange', function (e, newPlayer, newTarget, oldPlayer) {
|
||||
events.on(playbackManager, 'playerchange', function (e, newPlayer, newTarget, oldPlayer) {
|
||||
|
||||
if (!oldPlayer || !newPlayer) {
|
||||
return;
|
||||
|
@ -42,6 +42,4 @@ define(['events', 'playbackManager'], function (events, playbackManager) {
|
|||
}
|
||||
|
||||
transferPlayback(oldPlayer, newPlayer);
|
||||
});
|
||||
|
||||
});
|
||||
|
|
|
@ -1,14 +1,18 @@
|
|||
define(['events', 'playbackManager', 'dom', 'browser', 'css!./iconosd', 'material-icons'], function (events, playbackManager, dom, browser) {
|
||||
'use strict';
|
||||
import events from 'events';
|
||||
import playbackManager from 'playbackManager';
|
||||
import dom from 'dom';
|
||||
import browser from 'browser';
|
||||
import 'css!./iconosd';
|
||||
import 'material-icons';
|
||||
|
||||
var currentPlayer;
|
||||
var osdElement;
|
||||
var iconElement;
|
||||
var progressElement;
|
||||
var currentPlayer;
|
||||
var osdElement;
|
||||
var iconElement;
|
||||
var progressElement;
|
||||
|
||||
var enableAnimation;
|
||||
var enableAnimation;
|
||||
|
||||
function getOsdElementHtml() {
|
||||
function getOsdElementHtml() {
|
||||
var html = '';
|
||||
|
||||
html += '<span class="material-icons iconOsdIcon volume_up"></span>';
|
||||
|
@ -16,9 +20,9 @@ define(['events', 'playbackManager', 'dom', 'browser', 'css!./iconosd', 'materia
|
|||
html += '<div class="iconOsdProgressOuter"><div class="iconOsdProgressInner"></div></div>';
|
||||
|
||||
return html;
|
||||
}
|
||||
}
|
||||
|
||||
function ensureOsdElement() {
|
||||
function ensureOsdElement() {
|
||||
|
||||
var elem = osdElement;
|
||||
if (!elem) {
|
||||
|
@ -38,14 +42,14 @@ define(['events', 'playbackManager', 'dom', 'browser', 'css!./iconosd', 'materia
|
|||
document.body.appendChild(elem);
|
||||
osdElement = elem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function onHideComplete() {
|
||||
function onHideComplete() {
|
||||
this.classList.add('hide');
|
||||
}
|
||||
}
|
||||
|
||||
var hideTimeout;
|
||||
function showOsd() {
|
||||
var hideTimeout;
|
||||
function showOsd() {
|
||||
|
||||
clearHideTimeout();
|
||||
|
||||
|
@ -65,16 +69,16 @@ define(['events', 'playbackManager', 'dom', 'browser', 'css!./iconosd', 'materia
|
|||
|
||||
hideTimeout = setTimeout(hideOsd, 3000);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function clearHideTimeout() {
|
||||
function clearHideTimeout() {
|
||||
if (hideTimeout) {
|
||||
clearTimeout(hideTimeout);
|
||||
hideTimeout = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function hideOsd() {
|
||||
function hideOsd() {
|
||||
|
||||
clearHideTimeout();
|
||||
|
||||
|
@ -96,9 +100,9 @@ define(['events', 'playbackManager', 'dom', 'browser', 'css!./iconosd', 'materia
|
|||
onHideComplete.call(elem);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function updatePlayerVolumeState(isMuted, volume) {
|
||||
function updatePlayerVolumeState(isMuted, volume) {
|
||||
|
||||
if (iconElement) {
|
||||
iconElement.classList.remove('volume_off', 'volume_up');
|
||||
|
@ -107,9 +111,9 @@ define(['events', 'playbackManager', 'dom', 'browser', 'css!./iconosd', 'materia
|
|||
if (progressElement) {
|
||||
progressElement.style.width = (volume || 0) + '%';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function releaseCurrentPlayer() {
|
||||
function releaseCurrentPlayer() {
|
||||
|
||||
var player = currentPlayer;
|
||||
|
||||
|
@ -118,9 +122,9 @@ define(['events', 'playbackManager', 'dom', 'browser', 'css!./iconosd', 'materia
|
|||
events.off(player, 'playbackstop', hideOsd);
|
||||
currentPlayer = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function onVolumeChanged(e) {
|
||||
function onVolumeChanged(e) {
|
||||
|
||||
var player = this;
|
||||
|
||||
|
@ -129,9 +133,9 @@ define(['events', 'playbackManager', 'dom', 'browser', 'css!./iconosd', 'materia
|
|||
updatePlayerVolumeState(player.isMuted(), player.getVolume());
|
||||
|
||||
showOsd();
|
||||
}
|
||||
}
|
||||
|
||||
function bindToPlayer(player) {
|
||||
function bindToPlayer(player) {
|
||||
|
||||
if (player === currentPlayer) {
|
||||
return;
|
||||
|
@ -148,12 +152,10 @@ define(['events', 'playbackManager', 'dom', 'browser', 'css!./iconosd', 'materia
|
|||
hideOsd();
|
||||
events.on(player, 'volumechange', onVolumeChanged);
|
||||
events.on(player, 'playbackstop', hideOsd);
|
||||
}
|
||||
}
|
||||
|
||||
events.on(playbackManager, 'playerchange', function () {
|
||||
events.on(playbackManager, 'playerchange', function () {
|
||||
bindToPlayer(playbackManager.getCurrentPlayer());
|
||||
});
|
||||
|
||||
bindToPlayer(playbackManager.getCurrentPlayer());
|
||||
|
||||
});
|
||||
|
||||
bindToPlayer(playbackManager.getCurrentPlayer());
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue