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:
Delgan
parent
e32df64c9f
commit
c843bc9fb6
9 changed files with 1029 additions and 1018 deletions
|
|
@ -1,171 +1,173 @@
|
|||
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() {
|
||||
var html = '';
|
||||
function getOsdElementHtml() {
|
||||
var html = '';
|
||||
|
||||
html += '<span class="material-icons iconOsdIcon brightness_high"></span>';
|
||||
html += '<span class="material-icons iconOsdIcon brightness_high"></span>';
|
||||
|
||||
html += '<div class="iconOsdProgressOuter"><div class="iconOsdProgressInner brightnessOsdProgressInner"></div></div>';
|
||||
html += '<div class="iconOsdProgressOuter"><div class="iconOsdProgressInner brightnessOsdProgressInner"></div></div>';
|
||||
|
||||
return html;
|
||||
return html;
|
||||
}
|
||||
|
||||
function ensureOsdElement() {
|
||||
|
||||
var elem = osdElement;
|
||||
if (!elem) {
|
||||
|
||||
enableAnimation = browser.supportsCssAnimation();
|
||||
|
||||
elem = document.createElement('div');
|
||||
elem.classList.add('hide');
|
||||
elem.classList.add('iconOsd');
|
||||
elem.classList.add('iconOsd-hidden');
|
||||
elem.classList.add('brightnessOsd');
|
||||
elem.innerHTML = getOsdElementHtml();
|
||||
|
||||
iconElement = elem.querySelector('.material-icons');
|
||||
progressElement = elem.querySelector('.iconOsdProgressInner');
|
||||
|
||||
document.body.appendChild(elem);
|
||||
osdElement = elem;
|
||||
}
|
||||
}
|
||||
|
||||
function ensureOsdElement() {
|
||||
function onHideComplete() {
|
||||
this.classList.add('hide');
|
||||
}
|
||||
|
||||
var elem = osdElement;
|
||||
if (!elem) {
|
||||
var hideTimeout;
|
||||
function showOsd() {
|
||||
|
||||
enableAnimation = browser.supportsCssAnimation();
|
||||
clearHideTimeout();
|
||||
|
||||
elem = document.createElement('div');
|
||||
elem.classList.add('hide');
|
||||
elem.classList.add('iconOsd');
|
||||
elem.classList.add('iconOsd-hidden');
|
||||
elem.classList.add('brightnessOsd');
|
||||
elem.innerHTML = getOsdElementHtml();
|
||||
var elem = osdElement;
|
||||
|
||||
iconElement = elem.querySelector('.material-icons');
|
||||
progressElement = elem.querySelector('.iconOsdProgressInner');
|
||||
|
||||
document.body.appendChild(elem);
|
||||
osdElement = elem;
|
||||
}
|
||||
}
|
||||
|
||||
function onHideComplete() {
|
||||
this.classList.add('hide');
|
||||
}
|
||||
|
||||
var hideTimeout;
|
||||
function showOsd() {
|
||||
|
||||
clearHideTimeout();
|
||||
|
||||
var elem = osdElement;
|
||||
|
||||
dom.removeEventListener(elem, dom.whichTransitionEvent(), onHideComplete, {
|
||||
once: true
|
||||
});
|
||||
|
||||
elem.classList.remove('hide');
|
||||
|
||||
// trigger reflow
|
||||
void elem.offsetWidth;
|
||||
|
||||
requestAnimationFrame(function () {
|
||||
elem.classList.remove('iconOsd-hidden');
|
||||
|
||||
hideTimeout = setTimeout(hideOsd, 3000);
|
||||
});
|
||||
}
|
||||
|
||||
function clearHideTimeout() {
|
||||
if (hideTimeout) {
|
||||
clearTimeout(hideTimeout);
|
||||
hideTimeout = null;
|
||||
}
|
||||
}
|
||||
|
||||
function hideOsd() {
|
||||
|
||||
clearHideTimeout();
|
||||
|
||||
var elem = osdElement;
|
||||
if (elem) {
|
||||
|
||||
if (enableAnimation) {
|
||||
// trigger reflow
|
||||
void elem.offsetWidth;
|
||||
|
||||
requestAnimationFrame(function () {
|
||||
elem.classList.add('iconOsd-hidden');
|
||||
|
||||
dom.addEventListener(elem, dom.whichTransitionEvent(), onHideComplete, {
|
||||
once: true
|
||||
});
|
||||
});
|
||||
} else {
|
||||
onHideComplete.call(elem);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
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) {
|
||||
|
||||
if (iconElement) {
|
||||
if (brightness >= 80) {
|
||||
setIcon(iconElement, 'brightness_high');
|
||||
} else if (brightness >= 20) {
|
||||
setIcon(iconElement, 'brightness_medium');
|
||||
} else {
|
||||
setIcon(iconElement, 'brightness_low');
|
||||
}
|
||||
}
|
||||
if (progressElement) {
|
||||
progressElement.style.width = (brightness || 0) + '%';
|
||||
}
|
||||
}
|
||||
|
||||
function releaseCurrentPlayer() {
|
||||
|
||||
var player = currentPlayer;
|
||||
|
||||
if (player) {
|
||||
events.off(player, 'brightnesschange', onBrightnessChanged);
|
||||
events.off(player, 'playbackstop', hideOsd);
|
||||
currentPlayer = null;
|
||||
}
|
||||
}
|
||||
|
||||
function onBrightnessChanged(e) {
|
||||
|
||||
var player = this;
|
||||
|
||||
ensureOsdElement();
|
||||
|
||||
updateElementsFromPlayer(playbackManager.getBrightness(player));
|
||||
|
||||
showOsd();
|
||||
}
|
||||
|
||||
function bindToPlayer(player) {
|
||||
|
||||
if (player === currentPlayer) {
|
||||
return;
|
||||
}
|
||||
|
||||
releaseCurrentPlayer();
|
||||
|
||||
currentPlayer = player;
|
||||
|
||||
if (!player) {
|
||||
return;
|
||||
}
|
||||
|
||||
hideOsd();
|
||||
events.on(player, 'brightnesschange', onBrightnessChanged);
|
||||
events.on(player, 'playbackstop', hideOsd);
|
||||
}
|
||||
|
||||
events.on(playbackManager, 'playerchange', function () {
|
||||
bindToPlayer(playbackManager.getCurrentPlayer());
|
||||
dom.removeEventListener(elem, dom.whichTransitionEvent(), onHideComplete, {
|
||||
once: true
|
||||
});
|
||||
|
||||
bindToPlayer(playbackManager.getCurrentPlayer());
|
||||
elem.classList.remove('hide');
|
||||
|
||||
// trigger reflow
|
||||
void elem.offsetWidth;
|
||||
|
||||
requestAnimationFrame(function () {
|
||||
elem.classList.remove('iconOsd-hidden');
|
||||
|
||||
hideTimeout = setTimeout(hideOsd, 3000);
|
||||
});
|
||||
}
|
||||
|
||||
function clearHideTimeout() {
|
||||
if (hideTimeout) {
|
||||
clearTimeout(hideTimeout);
|
||||
hideTimeout = null;
|
||||
}
|
||||
}
|
||||
|
||||
function hideOsd() {
|
||||
|
||||
clearHideTimeout();
|
||||
|
||||
var elem = osdElement;
|
||||
if (elem) {
|
||||
|
||||
if (enableAnimation) {
|
||||
// trigger reflow
|
||||
void elem.offsetWidth;
|
||||
|
||||
requestAnimationFrame(function () {
|
||||
elem.classList.add('iconOsd-hidden');
|
||||
|
||||
dom.addEventListener(elem, dom.whichTransitionEvent(), onHideComplete, {
|
||||
once: true
|
||||
});
|
||||
});
|
||||
} else {
|
||||
onHideComplete.call(elem);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
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) {
|
||||
|
||||
if (iconElement) {
|
||||
if (brightness >= 80) {
|
||||
setIcon(iconElement, 'brightness_high');
|
||||
} else if (brightness >= 20) {
|
||||
setIcon(iconElement, 'brightness_medium');
|
||||
} else {
|
||||
setIcon(iconElement, 'brightness_low');
|
||||
}
|
||||
}
|
||||
if (progressElement) {
|
||||
progressElement.style.width = (brightness || 0) + '%';
|
||||
}
|
||||
}
|
||||
|
||||
function releaseCurrentPlayer() {
|
||||
|
||||
var player = currentPlayer;
|
||||
|
||||
if (player) {
|
||||
events.off(player, 'brightnesschange', onBrightnessChanged);
|
||||
events.off(player, 'playbackstop', hideOsd);
|
||||
currentPlayer = null;
|
||||
}
|
||||
}
|
||||
|
||||
function onBrightnessChanged(e) {
|
||||
|
||||
var player = this;
|
||||
|
||||
ensureOsdElement();
|
||||
|
||||
updateElementsFromPlayer(playbackManager.getBrightness(player));
|
||||
|
||||
showOsd();
|
||||
}
|
||||
|
||||
function bindToPlayer(player) {
|
||||
|
||||
if (player === currentPlayer) {
|
||||
return;
|
||||
}
|
||||
|
||||
releaseCurrentPlayer();
|
||||
|
||||
currentPlayer = player;
|
||||
|
||||
if (!player) {
|
||||
return;
|
||||
}
|
||||
|
||||
hideOsd();
|
||||
events.on(player, 'brightnesschange', onBrightnessChanged);
|
||||
events.on(player, 'playbackstop', hideOsd);
|
||||
}
|
||||
|
||||
events.on(playbackManager, 'playerchange', function () {
|
||||
bindToPlayer(playbackManager.getCurrentPlayer());
|
||||
});
|
||||
|
||||
bindToPlayer(playbackManager.getCurrentPlayer());
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue