mirror of
https://github.com/jellyfin/jellyfin-web.git
synced 2024-11-16 18:38:25 -07:00
Merge pull request #1284 from Delgan/es6-modules-components-playback
Migrate components/playback functions to ES6 modules
This commit is contained in:
Anthony Lavado
GitHub
commit
b7d05b6097
@ -95,8 +95,15 @@
|
|||||||
"src/components/images/imageLoader.js",
|
"src/components/images/imageLoader.js",
|
||||||
"src/components/indicators/indicators.js",
|
"src/components/indicators/indicators.js",
|
||||||
"src/components/lazyLoader/lazyLoaderIntersectionObserver.js",
|
"src/components/lazyLoader/lazyLoaderIntersectionObserver.js",
|
||||||
|
"src/components/playback/brightnessosd.js",
|
||||||
"src/components/playback/mediasession.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/remotecontrolautoplay.js",
|
||||||
|
"src/components/playback/volumeosd.js",
|
||||||
"src/components/playmenu.js",
|
"src/components/playmenu.js",
|
||||||
"src/components/sanatizefilename.js",
|
"src/components/sanatizefilename.js",
|
||||||
"src/components/scrollManager.js",
|
"src/components/scrollManager.js",
|
||||||
|
|||||||
@ -1,171 +1,171 @@
|
|||||||
define(['events', 'playbackManager', 'dom', 'browser', 'css!./iconosd', 'material-icons'], function (events, playbackManager, dom, browser) {
|
import events from 'events';
|
||||||
'use strict';
|
import playbackManager from 'playbackManager';
|
||||||
|
import dom from 'dom';
|
||||||
|
import browser from 'browser';
|
||||||
|
import 'css!./iconosd';
|
||||||
|
import 'material-icons';
|
||||||
|
|
||||||
var currentPlayer;
|
var currentPlayer;
|
||||||
var osdElement;
|
var osdElement;
|
||||||
var iconElement;
|
var iconElement;
|
||||||
var progressElement;
|
var progressElement;
|
||||||
|
|
||||||
var enableAnimation;
|
var enableAnimation;
|
||||||
|
|
||||||
function getOsdElementHtml() {
|
function getOsdElementHtml() {
|
||||||
var html = '';
|
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;
|
var hideTimeout;
|
||||||
if (!elem) {
|
function showOsd() {
|
||||||
|
|
||||||
enableAnimation = browser.supportsCssAnimation();
|
clearHideTimeout();
|
||||||
|
|
||||||
elem = document.createElement('div');
|
var elem = osdElement;
|
||||||
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');
|
dom.removeEventListener(elem, dom.whichTransitionEvent(), onHideComplete, {
|
||||||
progressElement = elem.querySelector('.iconOsdProgressInner');
|
once: true
|
||||||
|
|
||||||
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());
|
|
||||||
});
|
});
|
||||||
|
|
||||||
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', 'brightness_medium', '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());
|
||||||
|
|||||||
@ -1,86 +1,82 @@
|
|||||||
define([], function () {
|
export function getNowPlayingNames(nowPlayingItem, includeNonNameInfo) {
|
||||||
'use strict';
|
|
||||||
|
|
||||||
function getNowPlayingNames(nowPlayingItem, includeNonNameInfo) {
|
var topItem = nowPlayingItem;
|
||||||
|
var bottomItem = null;
|
||||||
|
var topText = nowPlayingItem.Name;
|
||||||
|
|
||||||
var topItem = nowPlayingItem;
|
if (nowPlayingItem.AlbumId && nowPlayingItem.MediaType === 'Audio') {
|
||||||
var bottomItem = null;
|
topItem = {
|
||||||
var topText = nowPlayingItem.Name;
|
Id: nowPlayingItem.AlbumId,
|
||||||
|
Name: nowPlayingItem.Album,
|
||||||
if (nowPlayingItem.AlbumId && nowPlayingItem.MediaType === 'Audio') {
|
Type: 'MusicAlbum',
|
||||||
topItem = {
|
IsFolder: true
|
||||||
Id: nowPlayingItem.AlbumId,
|
};
|
||||||
Name: nowPlayingItem.Album,
|
|
||||||
Type: 'MusicAlbum',
|
|
||||||
IsFolder: true
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
if (nowPlayingItem.MediaType === 'Video') {
|
|
||||||
if (nowPlayingItem.IndexNumber != null) {
|
|
||||||
topText = nowPlayingItem.IndexNumber + ' - ' + topText;
|
|
||||||
}
|
|
||||||
if (nowPlayingItem.ParentIndexNumber != null) {
|
|
||||||
topText = nowPlayingItem.ParentIndexNumber + '.' + topText;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
var bottomText = '';
|
|
||||||
|
|
||||||
if (nowPlayingItem.ArtistItems && nowPlayingItem.ArtistItems.length) {
|
|
||||||
|
|
||||||
bottomItem = {
|
|
||||||
Id: nowPlayingItem.ArtistItems[0].Id,
|
|
||||||
Name: nowPlayingItem.ArtistItems[0].Name,
|
|
||||||
Type: 'MusicArtist',
|
|
||||||
IsFolder: true
|
|
||||||
};
|
|
||||||
|
|
||||||
bottomText = nowPlayingItem.ArtistItems.map(function (a) {
|
|
||||||
return a.Name;
|
|
||||||
}).join(', ');
|
|
||||||
|
|
||||||
} else if (nowPlayingItem.Artists && nowPlayingItem.Artists.length) {
|
|
||||||
|
|
||||||
bottomText = nowPlayingItem.Artists.join(', ');
|
|
||||||
} else if (nowPlayingItem.SeriesName || nowPlayingItem.Album) {
|
|
||||||
bottomText = topText;
|
|
||||||
topText = nowPlayingItem.SeriesName || nowPlayingItem.Album;
|
|
||||||
|
|
||||||
bottomItem = topItem;
|
|
||||||
|
|
||||||
if (nowPlayingItem.SeriesId) {
|
|
||||||
topItem = {
|
|
||||||
Id: nowPlayingItem.SeriesId,
|
|
||||||
Name: nowPlayingItem.SeriesName,
|
|
||||||
Type: 'Series',
|
|
||||||
IsFolder: true
|
|
||||||
};
|
|
||||||
} else {
|
|
||||||
topItem = null;
|
|
||||||
}
|
|
||||||
} else if (nowPlayingItem.ProductionYear && includeNonNameInfo !== false) {
|
|
||||||
bottomText = nowPlayingItem.ProductionYear;
|
|
||||||
}
|
|
||||||
|
|
||||||
var list = [];
|
|
||||||
|
|
||||||
list.push({
|
|
||||||
text: topText,
|
|
||||||
item: topItem
|
|
||||||
});
|
|
||||||
|
|
||||||
if (bottomText) {
|
|
||||||
list.push({
|
|
||||||
text: bottomText,
|
|
||||||
item: bottomItem
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
return list;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return {
|
if (nowPlayingItem.MediaType === 'Video') {
|
||||||
getNowPlayingNames: getNowPlayingNames
|
if (nowPlayingItem.IndexNumber != null) {
|
||||||
};
|
topText = nowPlayingItem.IndexNumber + ' - ' + topText;
|
||||||
});
|
}
|
||||||
|
if (nowPlayingItem.ParentIndexNumber != null) {
|
||||||
|
topText = nowPlayingItem.ParentIndexNumber + '.' + topText;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var bottomText = '';
|
||||||
|
|
||||||
|
if (nowPlayingItem.ArtistItems && nowPlayingItem.ArtistItems.length) {
|
||||||
|
|
||||||
|
bottomItem = {
|
||||||
|
Id: nowPlayingItem.ArtistItems[0].Id,
|
||||||
|
Name: nowPlayingItem.ArtistItems[0].Name,
|
||||||
|
Type: 'MusicArtist',
|
||||||
|
IsFolder: true
|
||||||
|
};
|
||||||
|
|
||||||
|
bottomText = nowPlayingItem.ArtistItems.map(function (a) {
|
||||||
|
return a.Name;
|
||||||
|
}).join(', ');
|
||||||
|
|
||||||
|
} else if (nowPlayingItem.Artists && nowPlayingItem.Artists.length) {
|
||||||
|
|
||||||
|
bottomText = nowPlayingItem.Artists.join(', ');
|
||||||
|
} else if (nowPlayingItem.SeriesName || nowPlayingItem.Album) {
|
||||||
|
bottomText = topText;
|
||||||
|
topText = nowPlayingItem.SeriesName || nowPlayingItem.Album;
|
||||||
|
|
||||||
|
bottomItem = topItem;
|
||||||
|
|
||||||
|
if (nowPlayingItem.SeriesId) {
|
||||||
|
topItem = {
|
||||||
|
Id: nowPlayingItem.SeriesId,
|
||||||
|
Name: nowPlayingItem.SeriesName,
|
||||||
|
Type: 'Series',
|
||||||
|
IsFolder: true
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
topItem = null;
|
||||||
|
}
|
||||||
|
} else if (nowPlayingItem.ProductionYear && includeNonNameInfo !== false) {
|
||||||
|
bottomText = nowPlayingItem.ProductionYear;
|
||||||
|
}
|
||||||
|
|
||||||
|
var list = [];
|
||||||
|
|
||||||
|
list.push({
|
||||||
|
text: topText,
|
||||||
|
item: topItem
|
||||||
|
});
|
||||||
|
|
||||||
|
if (bottomText) {
|
||||||
|
list.push({
|
||||||
|
text: bottomText,
|
||||||
|
item: bottomItem
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return list;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default {
|
||||||
|
getNowPlayingNames: getNowPlayingNames
|
||||||
|
};
|
||||||
|
|||||||
@ -1,57 +1,57 @@
|
|||||||
define(['playbackManager', 'layoutManager', 'events'], function (playbackManager, layoutManager, events) {
|
import playbackManager from 'playbackManager';
|
||||||
'use strict';
|
import layoutManager from 'layoutManager';
|
||||||
|
import events from 'events';
|
||||||
|
|
||||||
var orientationLocked;
|
var orientationLocked;
|
||||||
|
|
||||||
function onOrientationChangeSuccess() {
|
function onOrientationChangeSuccess() {
|
||||||
orientationLocked = true;
|
orientationLocked = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
function onOrientationChangeError(err) {
|
function onOrientationChangeError(err) {
|
||||||
orientationLocked = false;
|
orientationLocked = false;
|
||||||
console.error('error locking orientation: ' + err);
|
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);
|
var isLocalVideo = player.isLocalPlayer && !player.isExternalPlayer && playbackManager.isPlayingVideo(player);
|
||||||
|
|
||||||
if (isLocalVideo && layoutManager.mobile) {
|
if (isLocalVideo && layoutManager.mobile) {
|
||||||
/* eslint-disable-next-line compat/compat */
|
/* eslint-disable-next-line compat/compat */
|
||||||
var lockOrientation = screen.lockOrientation || screen.mozLockOrientation || screen.msLockOrientation || (screen.orientation && screen.orientation.lock);
|
var lockOrientation = screen.lockOrientation || screen.mozLockOrientation || screen.msLockOrientation || (screen.orientation && screen.orientation.lock);
|
||||||
|
|
||||||
if (lockOrientation) {
|
if (lockOrientation) {
|
||||||
|
|
||||||
try {
|
try {
|
||||||
var promise = lockOrientation('landscape');
|
var promise = lockOrientation('landscape');
|
||||||
if (promise.then) {
|
if (promise.then) {
|
||||||
promise.then(onOrientationChangeSuccess, onOrientationChangeError);
|
promise.then(onOrientationChangeSuccess, onOrientationChangeError);
|
||||||
} else {
|
} else {
|
||||||
// returns a boolean
|
// returns a boolean
|
||||||
orientationLocked = promise;
|
orientationLocked = promise;
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
onOrientationChangeError(err);
|
|
||||||
}
|
}
|
||||||
|
} catch (err) {
|
||||||
|
onOrientationChangeError(err);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
}
|
||||||
|
});
|
||||||
events.on(playbackManager, 'playbackstop', function (e, playbackStopInfo) {
|
|
||||||
|
events.on(playbackManager, 'playbackstop', function (e, playbackStopInfo) {
|
||||||
if (orientationLocked && !playbackStopInfo.nextMediaType) {
|
|
||||||
|
if (orientationLocked && !playbackStopInfo.nextMediaType) {
|
||||||
/* eslint-disable-next-line compat/compat */
|
|
||||||
var unlockOrientation = screen.unlockOrientation || screen.mozUnlockOrientation || screen.msUnlockOrientation || (screen.orientation && screen.orientation.unlock);
|
/* eslint-disable-next-line compat/compat */
|
||||||
|
var unlockOrientation = screen.unlockOrientation || screen.mozUnlockOrientation || screen.msUnlockOrientation || (screen.orientation && screen.orientation.unlock);
|
||||||
if (unlockOrientation) {
|
|
||||||
try {
|
if (unlockOrientation) {
|
||||||
unlockOrientation();
|
try {
|
||||||
} catch (err) {
|
unlockOrientation();
|
||||||
console.error('error unlocking orientation: ' + err);
|
} catch (err) {
|
||||||
}
|
console.error('error unlocking orientation: ' + err);
|
||||||
orientationLocked = false;
|
}
|
||||||
}
|
orientationLocked = false;
|
||||||
}
|
}
|
||||||
});
|
}
|
||||||
});
|
});
|
||||||
|
|||||||
@ -1,320 +1,325 @@
|
|||||||
define(['appSettings', 'events', 'browser', 'loading', 'playbackManager', 'appRouter', 'globalize', 'apphost'], function (appSettings, events, browser, loading, playbackManager, appRouter, globalize, appHost) {
|
import appSettings from 'appSettings';
|
||||||
'use strict';
|
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;
|
var item = info.item;
|
||||||
|
|
||||||
playbackManager.displayContent({
|
playbackManager.displayContent({
|
||||||
|
|
||||||
ItemName: item.Name,
|
ItemName: item.Name,
|
||||||
ItemId: item.Id,
|
ItemId: item.Id,
|
||||||
ItemType: item.Type,
|
ItemType: item.Type,
|
||||||
Context: info.context
|
Context: info.context
|
||||||
}, player);
|
}, player);
|
||||||
}
|
}
|
||||||
|
|
||||||
function mirrorIfEnabled(info) {
|
function mirrorIfEnabled(info) {
|
||||||
|
|
||||||
if (info && playbackManager.enableDisplayMirroring()) {
|
if (info && playbackManager.enableDisplayMirroring()) {
|
||||||
|
|
||||||
var getPlayerInfo = playbackManager.getPlayerInfo();
|
var getPlayerInfo = playbackManager.getPlayerInfo();
|
||||||
|
|
||||||
if (getPlayerInfo) {
|
if (getPlayerInfo) {
|
||||||
if (!getPlayerInfo.isLocalPlayer && getPlayerInfo.supportedCommands.indexOf('DisplayContent') !== -1) {
|
if (!getPlayerInfo.isLocalPlayer && getPlayerInfo.supportedCommands.indexOf('DisplayContent') !== -1) {
|
||||||
mirrorItem(info, playbackManager.getCurrentPlayer());
|
mirrorItem(info, playbackManager.getCurrentPlayer());
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
function emptyCallback() {
|
function emptyCallback() {
|
||||||
// avoid console logs about uncaught promises
|
// avoid console logs about uncaught promises
|
||||||
|
}
|
||||||
|
|
||||||
|
function getTargetSecondaryText(target) {
|
||||||
|
|
||||||
|
if (target.user) {
|
||||||
|
|
||||||
|
return target.user.Name;
|
||||||
}
|
}
|
||||||
|
|
||||||
function getTargetSecondaryText(target) {
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
if (target.user) {
|
function getIcon(target) {
|
||||||
|
|
||||||
return target.user.Name;
|
var deviceType = target.deviceType;
|
||||||
}
|
|
||||||
|
|
||||||
return null;
|
if (!deviceType && target.isLocalPlayer) {
|
||||||
}
|
if (browser.tv) {
|
||||||
|
|
||||||
function getIcon(target) {
|
|
||||||
|
|
||||||
var deviceType = target.deviceType;
|
|
||||||
|
|
||||||
if (!deviceType && target.isLocalPlayer) {
|
|
||||||
if (browser.tv) {
|
|
||||||
deviceType = 'tv';
|
|
||||||
} else if (browser.mobile) {
|
|
||||||
deviceType = 'smartphone';
|
|
||||||
} else {
|
|
||||||
deviceType = 'desktop';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!deviceType) {
|
|
||||||
deviceType = 'tv';
|
deviceType = 'tv';
|
||||||
}
|
} else if (browser.mobile) {
|
||||||
|
deviceType = 'smartphone';
|
||||||
switch (deviceType) {
|
|
||||||
|
|
||||||
case 'smartphone':
|
|
||||||
return 'smartphone';
|
|
||||||
case 'tablet':
|
|
||||||
return 'tablet';
|
|
||||||
case 'tv':
|
|
||||||
return 'tv';
|
|
||||||
case 'cast':
|
|
||||||
return 'cast';
|
|
||||||
case 'desktop':
|
|
||||||
return 'computer';
|
|
||||||
default:
|
|
||||||
return 'tv';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function showPlayerSelection(button) {
|
|
||||||
|
|
||||||
var currentPlayerInfo = playbackManager.getPlayerInfo();
|
|
||||||
|
|
||||||
if (currentPlayerInfo) {
|
|
||||||
if (!currentPlayerInfo.isLocalPlayer) {
|
|
||||||
showActivePlayerMenu(currentPlayerInfo);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
var currentPlayerId = currentPlayerInfo ? currentPlayerInfo.id : null;
|
|
||||||
|
|
||||||
loading.show();
|
|
||||||
|
|
||||||
playbackManager.getTargets().then(function (targets) {
|
|
||||||
|
|
||||||
var menuItems = targets.map(function (t) {
|
|
||||||
|
|
||||||
var name = t.name;
|
|
||||||
|
|
||||||
if (t.appName && t.appName !== t.name) {
|
|
||||||
name += ' - ' + t.appName;
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
name: name,
|
|
||||||
id: t.id,
|
|
||||||
selected: currentPlayerId === t.id,
|
|
||||||
secondaryText: getTargetSecondaryText(t),
|
|
||||||
icon: getIcon(t)
|
|
||||||
};
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
require(['actionsheet'], function (actionsheet) {
|
|
||||||
|
|
||||||
loading.hide();
|
|
||||||
|
|
||||||
var menuOptions = {
|
|
||||||
title: globalize.translate('HeaderPlayOn'),
|
|
||||||
items: menuItems,
|
|
||||||
positionTo: button,
|
|
||||||
|
|
||||||
resolveOnClick: true,
|
|
||||||
border: true
|
|
||||||
};
|
|
||||||
|
|
||||||
// Unfortunately we can't allow the url to change or chromecast will throw a security error
|
|
||||||
// Might be able to solve this in the future by moving the dialogs to hashbangs
|
|
||||||
if (!(!browser.chrome || appHost.supports('castmenuhashchange'))) {
|
|
||||||
menuOptions.enableHistory = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
actionsheet.show(menuOptions).then(function (id) {
|
|
||||||
|
|
||||||
var target = targets.filter(function (t) {
|
|
||||||
return t.id === id;
|
|
||||||
})[0];
|
|
||||||
|
|
||||||
playbackManager.trySetActivePlayer(target.playerName, target);
|
|
||||||
|
|
||||||
mirrorIfEnabled();
|
|
||||||
|
|
||||||
}, emptyCallback);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function showActivePlayerMenu(playerInfo) {
|
|
||||||
|
|
||||||
require(['dialogHelper', 'dialog', 'emby-checkbox', 'emby-button'], function (dialogHelper) {
|
|
||||||
showActivePlayerMenuInternal(dialogHelper, playerInfo);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function disconnectFromPlayer(currentDeviceName) {
|
|
||||||
|
|
||||||
if (playbackManager.getSupportedCommands().indexOf('EndSession') !== -1) {
|
|
||||||
|
|
||||||
require(['dialog'], function (dialog) {
|
|
||||||
|
|
||||||
var menuItems = [];
|
|
||||||
|
|
||||||
menuItems.push({
|
|
||||||
name: globalize.translate('Yes'),
|
|
||||||
id: 'yes'
|
|
||||||
});
|
|
||||||
menuItems.push({
|
|
||||||
name: globalize.translate('No'),
|
|
||||||
id: 'no'
|
|
||||||
});
|
|
||||||
|
|
||||||
dialog({
|
|
||||||
buttons: menuItems,
|
|
||||||
//positionTo: positionTo,
|
|
||||||
text: globalize.translate('ConfirmEndPlayerSession', currentDeviceName)
|
|
||||||
|
|
||||||
}).then(function (id) {
|
|
||||||
switch (id) {
|
|
||||||
|
|
||||||
case 'yes':
|
|
||||||
playbackManager.getCurrentPlayer().endSession();
|
|
||||||
playbackManager.setDefaultPlayerActive();
|
|
||||||
break;
|
|
||||||
case 'no':
|
|
||||||
playbackManager.setDefaultPlayerActive();
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
|
deviceType = 'desktop';
|
||||||
playbackManager.setDefaultPlayerActive();
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function showActivePlayerMenuInternal(dialogHelper, playerInfo) {
|
if (!deviceType) {
|
||||||
|
deviceType = 'tv';
|
||||||
var html = '';
|
|
||||||
|
|
||||||
var dialogOptions = {
|
|
||||||
removeOnClose: true
|
|
||||||
};
|
|
||||||
|
|
||||||
dialogOptions.modal = false;
|
|
||||||
dialogOptions.entryAnimationDuration = 160;
|
|
||||||
dialogOptions.exitAnimationDuration = 160;
|
|
||||||
dialogOptions.autoFocus = false;
|
|
||||||
|
|
||||||
var dlg = dialogHelper.createDialog(dialogOptions);
|
|
||||||
|
|
||||||
dlg.classList.add('promptDialog');
|
|
||||||
|
|
||||||
var currentDeviceName = (playerInfo.deviceName || playerInfo.name);
|
|
||||||
|
|
||||||
html += '<div class="promptDialogContent" style="padding:1.5em;">';
|
|
||||||
html += '<h2 style="margin-top:.5em;">';
|
|
||||||
html += currentDeviceName;
|
|
||||||
html += '</h2>';
|
|
||||||
|
|
||||||
html += '<div>';
|
|
||||||
|
|
||||||
if (playerInfo.supportedCommands.indexOf('DisplayContent') !== -1) {
|
|
||||||
|
|
||||||
html += '<label class="checkboxContainer">';
|
|
||||||
var checkedHtml = playbackManager.enableDisplayMirroring() ? ' checked' : '';
|
|
||||||
html += '<input type="checkbox" is="emby-checkbox" class="chkMirror"' + checkedHtml + '/>';
|
|
||||||
html += '<span>' + globalize.translate('EnableDisplayMirroring') + '</span>';
|
|
||||||
html += '</label>';
|
|
||||||
}
|
|
||||||
|
|
||||||
html += '</div>';
|
|
||||||
|
|
||||||
html += '<div style="margin-top:1em;display:flex;justify-content: flex-end;">';
|
|
||||||
|
|
||||||
html += '<button is="emby-button" type="button" class="button-flat btnRemoteControl promptDialogButton">' + globalize.translate('HeaderRemoteControl') + '</button>';
|
|
||||||
html += '<button is="emby-button" type="button" class="button-flat btnDisconnect promptDialogButton ">' + globalize.translate('Disconnect') + '</button>';
|
|
||||||
html += '<button is="emby-button" type="button" class="button-flat btnCancel promptDialogButton">' + globalize.translate('ButtonCancel') + '</button>';
|
|
||||||
html += '</div>';
|
|
||||||
|
|
||||||
html += '</div>';
|
|
||||||
dlg.innerHTML = html;
|
|
||||||
|
|
||||||
var chkMirror = dlg.querySelector('.chkMirror');
|
|
||||||
|
|
||||||
if (chkMirror) {
|
|
||||||
chkMirror.addEventListener('change', onMirrorChange);
|
|
||||||
}
|
|
||||||
|
|
||||||
var destination = '';
|
|
||||||
|
|
||||||
var btnRemoteControl = dlg.querySelector('.btnRemoteControl');
|
|
||||||
if (btnRemoteControl) {
|
|
||||||
btnRemoteControl.addEventListener('click', function () {
|
|
||||||
destination = 'nowplaying';
|
|
||||||
dialogHelper.close(dlg);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
dlg.querySelector('.btnDisconnect').addEventListener('click', function () {
|
|
||||||
destination = 'disconnectFromPlayer';
|
|
||||||
dialogHelper.close(dlg);
|
|
||||||
});
|
|
||||||
|
|
||||||
dlg.querySelector('.btnCancel').addEventListener('click', function () {
|
|
||||||
dialogHelper.close(dlg);
|
|
||||||
});
|
|
||||||
|
|
||||||
dialogHelper.open(dlg).then(function () {
|
|
||||||
if (destination === 'nowplaying') {
|
|
||||||
appRouter.showNowPlaying();
|
|
||||||
} else if (destination === 'disconnectFromPlayer') {
|
|
||||||
disconnectFromPlayer(currentDeviceName);
|
|
||||||
}
|
|
||||||
}, emptyCallback);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function onMirrorChange() {
|
switch (deviceType) {
|
||||||
playbackManager.enableDisplayMirroring(this.checked);
|
|
||||||
|
case 'smartphone':
|
||||||
|
return 'smartphone';
|
||||||
|
case 'tablet':
|
||||||
|
return 'tablet';
|
||||||
|
case 'tv':
|
||||||
|
return 'tv';
|
||||||
|
case 'cast':
|
||||||
|
return 'cast';
|
||||||
|
case 'desktop':
|
||||||
|
return 'computer';
|
||||||
|
default:
|
||||||
|
return 'tv';
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
document.addEventListener('viewshow', function (e) {
|
export function show(button) {
|
||||||
|
|
||||||
var state = e.detail.state || {};
|
var currentPlayerInfo = playbackManager.getPlayerInfo();
|
||||||
var item = state.item;
|
|
||||||
|
|
||||||
if (item && item.ServerId) {
|
if (currentPlayerInfo) {
|
||||||
mirrorIfEnabled({
|
if (!currentPlayerInfo.isLocalPlayer) {
|
||||||
item: item
|
showActivePlayerMenu(currentPlayerInfo);
|
||||||
});
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
});
|
}
|
||||||
|
|
||||||
events.on(appSettings, 'change', function (e, name) {
|
var currentPlayerId = currentPlayerInfo ? currentPlayerInfo.id : null;
|
||||||
if (name === 'displaymirror') {
|
|
||||||
mirrorIfEnabled();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
events.on(playbackManager, 'pairing', function (e) {
|
loading.show();
|
||||||
loading.show();
|
|
||||||
});
|
|
||||||
|
|
||||||
events.on(playbackManager, 'paired', function (e) {
|
playbackManager.getTargets().then(function (targets) {
|
||||||
loading.hide();
|
|
||||||
});
|
|
||||||
|
|
||||||
events.on(playbackManager, 'pairerror', function (e) {
|
var menuItems = targets.map(function (t) {
|
||||||
loading.hide();
|
|
||||||
});
|
|
||||||
|
|
||||||
return {
|
var name = t.name;
|
||||||
show: showPlayerSelection
|
|
||||||
|
if (t.appName && t.appName !== t.name) {
|
||||||
|
name += ' - ' + t.appName;
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
name: name,
|
||||||
|
id: t.id,
|
||||||
|
selected: currentPlayerId === t.id,
|
||||||
|
secondaryText: getTargetSecondaryText(t),
|
||||||
|
icon: getIcon(t)
|
||||||
|
};
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
require(['actionsheet'], function (actionsheet) {
|
||||||
|
|
||||||
|
loading.hide();
|
||||||
|
|
||||||
|
var menuOptions = {
|
||||||
|
title: globalize.translate('HeaderPlayOn'),
|
||||||
|
items: menuItems,
|
||||||
|
positionTo: button,
|
||||||
|
|
||||||
|
resolveOnClick: true,
|
||||||
|
border: true
|
||||||
|
};
|
||||||
|
|
||||||
|
// Unfortunately we can't allow the url to change or chromecast will throw a security error
|
||||||
|
// Might be able to solve this in the future by moving the dialogs to hashbangs
|
||||||
|
if (!(!browser.chrome || appHost.supports('castmenuhashchange'))) {
|
||||||
|
menuOptions.enableHistory = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
actionsheet.show(menuOptions).then(function (id) {
|
||||||
|
|
||||||
|
var target = targets.filter(function (t) {
|
||||||
|
return t.id === id;
|
||||||
|
})[0];
|
||||||
|
|
||||||
|
playbackManager.trySetActivePlayer(target.playerName, target);
|
||||||
|
|
||||||
|
mirrorIfEnabled();
|
||||||
|
|
||||||
|
}, emptyCallback);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function showActivePlayerMenu(playerInfo) {
|
||||||
|
|
||||||
|
require(['dialogHelper', 'dialog', 'emby-checkbox', 'emby-button'], function (dialogHelper) {
|
||||||
|
showActivePlayerMenuInternal(dialogHelper, playerInfo);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function disconnectFromPlayer(currentDeviceName) {
|
||||||
|
|
||||||
|
if (playbackManager.getSupportedCommands().indexOf('EndSession') !== -1) {
|
||||||
|
|
||||||
|
require(['dialog'], function (dialog) {
|
||||||
|
|
||||||
|
var menuItems = [];
|
||||||
|
|
||||||
|
menuItems.push({
|
||||||
|
name: globalize.translate('Yes'),
|
||||||
|
id: 'yes'
|
||||||
|
});
|
||||||
|
menuItems.push({
|
||||||
|
name: globalize.translate('No'),
|
||||||
|
id: 'no'
|
||||||
|
});
|
||||||
|
|
||||||
|
dialog({
|
||||||
|
buttons: menuItems,
|
||||||
|
//positionTo: positionTo,
|
||||||
|
text: globalize.translate('ConfirmEndPlayerSession', currentDeviceName)
|
||||||
|
|
||||||
|
}).then(function (id) {
|
||||||
|
switch (id) {
|
||||||
|
|
||||||
|
case 'yes':
|
||||||
|
playbackManager.getCurrentPlayer().endSession();
|
||||||
|
playbackManager.setDefaultPlayerActive();
|
||||||
|
break;
|
||||||
|
case 'no':
|
||||||
|
playbackManager.setDefaultPlayerActive();
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
} else {
|
||||||
|
|
||||||
|
playbackManager.setDefaultPlayerActive();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function showActivePlayerMenuInternal(dialogHelper, playerInfo) {
|
||||||
|
|
||||||
|
var html = '';
|
||||||
|
|
||||||
|
var dialogOptions = {
|
||||||
|
removeOnClose: true
|
||||||
};
|
};
|
||||||
|
|
||||||
|
dialogOptions.modal = false;
|
||||||
|
dialogOptions.entryAnimationDuration = 160;
|
||||||
|
dialogOptions.exitAnimationDuration = 160;
|
||||||
|
dialogOptions.autoFocus = false;
|
||||||
|
|
||||||
|
var dlg = dialogHelper.createDialog(dialogOptions);
|
||||||
|
|
||||||
|
dlg.classList.add('promptDialog');
|
||||||
|
|
||||||
|
var currentDeviceName = (playerInfo.deviceName || playerInfo.name);
|
||||||
|
|
||||||
|
html += '<div class="promptDialogContent" style="padding:1.5em;">';
|
||||||
|
html += '<h2 style="margin-top:.5em;">';
|
||||||
|
html += currentDeviceName;
|
||||||
|
html += '</h2>';
|
||||||
|
|
||||||
|
html += '<div>';
|
||||||
|
|
||||||
|
if (playerInfo.supportedCommands.indexOf('DisplayContent') !== -1) {
|
||||||
|
|
||||||
|
html += '<label class="checkboxContainer">';
|
||||||
|
var checkedHtml = playbackManager.enableDisplayMirroring() ? ' checked' : '';
|
||||||
|
html += '<input type="checkbox" is="emby-checkbox" class="chkMirror"' + checkedHtml + '/>';
|
||||||
|
html += '<span>' + globalize.translate('EnableDisplayMirroring') + '</span>';
|
||||||
|
html += '</label>';
|
||||||
|
}
|
||||||
|
|
||||||
|
html += '</div>';
|
||||||
|
|
||||||
|
html += '<div style="margin-top:1em;display:flex;justify-content: flex-end;">';
|
||||||
|
|
||||||
|
html += '<button is="emby-button" type="button" class="button-flat btnRemoteControl promptDialogButton">' + globalize.translate('HeaderRemoteControl') + '</button>';
|
||||||
|
html += '<button is="emby-button" type="button" class="button-flat btnDisconnect promptDialogButton ">' + globalize.translate('Disconnect') + '</button>';
|
||||||
|
html += '<button is="emby-button" type="button" class="button-flat btnCancel promptDialogButton">' + globalize.translate('ButtonCancel') + '</button>';
|
||||||
|
html += '</div>';
|
||||||
|
|
||||||
|
html += '</div>';
|
||||||
|
dlg.innerHTML = html;
|
||||||
|
|
||||||
|
var chkMirror = dlg.querySelector('.chkMirror');
|
||||||
|
|
||||||
|
if (chkMirror) {
|
||||||
|
chkMirror.addEventListener('change', onMirrorChange);
|
||||||
|
}
|
||||||
|
|
||||||
|
var destination = '';
|
||||||
|
|
||||||
|
var btnRemoteControl = dlg.querySelector('.btnRemoteControl');
|
||||||
|
if (btnRemoteControl) {
|
||||||
|
btnRemoteControl.addEventListener('click', function () {
|
||||||
|
destination = 'nowplaying';
|
||||||
|
dialogHelper.close(dlg);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
dlg.querySelector('.btnDisconnect').addEventListener('click', function () {
|
||||||
|
destination = 'disconnectFromPlayer';
|
||||||
|
dialogHelper.close(dlg);
|
||||||
|
});
|
||||||
|
|
||||||
|
dlg.querySelector('.btnCancel').addEventListener('click', function () {
|
||||||
|
dialogHelper.close(dlg);
|
||||||
|
});
|
||||||
|
|
||||||
|
dialogHelper.open(dlg).then(function () {
|
||||||
|
if (destination === 'nowplaying') {
|
||||||
|
appRouter.showNowPlaying();
|
||||||
|
} else if (destination === 'disconnectFromPlayer') {
|
||||||
|
disconnectFromPlayer(currentDeviceName);
|
||||||
|
}
|
||||||
|
}, emptyCallback);
|
||||||
|
}
|
||||||
|
|
||||||
|
function onMirrorChange() {
|
||||||
|
playbackManager.enableDisplayMirroring(this.checked);
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener('viewshow', function (e) {
|
||||||
|
|
||||||
|
var state = e.detail.state || {};
|
||||||
|
var item = state.item;
|
||||||
|
|
||||||
|
if (item && item.ServerId) {
|
||||||
|
mirrorIfEnabled({
|
||||||
|
item: item
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
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();
|
||||||
|
});
|
||||||
|
|
||||||
|
export default {
|
||||||
|
show: show
|
||||||
|
};
|
||||||
|
|||||||
@ -1,270 +1,272 @@
|
|||||||
define(['connectionManager', 'actionsheet', 'datetime', 'playbackManager', 'globalize', 'appSettings', 'qualityoptions'], function (connectionManager, actionsheet, datetime, playbackManager, globalize, appSettings, qualityoptions) {
|
import connectionManager from 'connectionManager';
|
||||||
'use strict';
|
import actionsheet from 'actionsheet';
|
||||||
|
import playbackManager from 'playbackManager';
|
||||||
|
import globalize from 'globalize';
|
||||||
|
import qualityoptions from 'qualityoptions';
|
||||||
|
|
||||||
function showQualityMenu(player, btn) {
|
function showQualityMenu(player, btn) {
|
||||||
|
|
||||||
var videoStream = playbackManager.currentMediaSource(player).MediaStreams.filter(function (stream) {
|
var videoStream = playbackManager.currentMediaSource(player).MediaStreams.filter(function (stream) {
|
||||||
return stream.Type === 'Video';
|
return stream.Type === 'Video';
|
||||||
})[0];
|
})[0];
|
||||||
var videoWidth = videoStream ? videoStream.Width : null;
|
var videoWidth = videoStream ? videoStream.Width : null;
|
||||||
var videoHeight = videoStream ? videoStream.Height : null;
|
var videoHeight = videoStream ? videoStream.Height : null;
|
||||||
|
|
||||||
var options = qualityoptions.getVideoQualityOptions({
|
var options = qualityoptions.getVideoQualityOptions({
|
||||||
currentMaxBitrate: playbackManager.getMaxStreamingBitrate(player),
|
currentMaxBitrate: playbackManager.getMaxStreamingBitrate(player),
|
||||||
isAutomaticBitrateEnabled: playbackManager.enableAutomaticBitrateDetection(player),
|
isAutomaticBitrateEnabled: playbackManager.enableAutomaticBitrateDetection(player),
|
||||||
videoWidth: videoWidth,
|
videoWidth: videoWidth,
|
||||||
videoHeight: videoHeight,
|
videoHeight: videoHeight,
|
||||||
enableAuto: true
|
enableAuto: true
|
||||||
});
|
});
|
||||||
|
|
||||||
var menuItems = options.map(function (o) {
|
var menuItems = options.map(function (o) {
|
||||||
var opt = {
|
var opt = {
|
||||||
name: o.name,
|
name: o.name,
|
||||||
id: o.bitrate,
|
id: o.bitrate,
|
||||||
asideText: o.secondaryText
|
asideText: o.secondaryText
|
||||||
};
|
};
|
||||||
|
|
||||||
if (o.selected) {
|
if (o.selected) {
|
||||||
opt.selected = true;
|
opt.selected = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
return opt;
|
return opt;
|
||||||
});
|
});
|
||||||
|
|
||||||
var selectedId = options.filter(function (o) {
|
var selectedId = options.filter(function (o) {
|
||||||
return o.selected;
|
return o.selected;
|
||||||
});
|
});
|
||||||
|
|
||||||
selectedId = selectedId.length ? selectedId[0].bitrate : null;
|
selectedId = selectedId.length ? selectedId[0].bitrate : null;
|
||||||
|
|
||||||
return actionsheet.show({
|
return actionsheet.show({
|
||||||
items: menuItems,
|
items: menuItems,
|
||||||
positionTo: btn
|
positionTo: btn
|
||||||
}).then(function (id) {
|
}).then(function (id) {
|
||||||
var bitrate = parseInt(id);
|
var bitrate = parseInt(id);
|
||||||
if (bitrate !== selectedId) {
|
if (bitrate !== selectedId) {
|
||||||
playbackManager.setMaxStreamingBitrate({
|
playbackManager.setMaxStreamingBitrate({
|
||||||
enableAutomaticBitrateDetection: bitrate ? false : true,
|
enableAutomaticBitrateDetection: bitrate ? false : true,
|
||||||
maxBitrate: bitrate
|
maxBitrate: bitrate
|
||||||
}, player);
|
}, player);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function showRepeatModeMenu(player, btn) {
|
||||||
|
var menuItems = [];
|
||||||
|
var currentValue = playbackManager.getRepeatMode(player);
|
||||||
|
|
||||||
|
menuItems.push({
|
||||||
|
name: globalize.translate('RepeatAll'),
|
||||||
|
id: 'RepeatAll',
|
||||||
|
selected: currentValue === 'RepeatAll'
|
||||||
|
});
|
||||||
|
|
||||||
|
menuItems.push({
|
||||||
|
name: globalize.translate('RepeatOne'),
|
||||||
|
id: 'RepeatOne',
|
||||||
|
selected: currentValue === 'RepeatOne'
|
||||||
|
});
|
||||||
|
|
||||||
|
menuItems.push({
|
||||||
|
name: globalize.translate('None'),
|
||||||
|
id: 'RepeatNone',
|
||||||
|
selected: currentValue === 'RepeatNone'
|
||||||
|
});
|
||||||
|
|
||||||
|
return actionsheet.show({
|
||||||
|
items: menuItems,
|
||||||
|
positionTo: btn
|
||||||
|
}).then(function (mode) {
|
||||||
|
if (mode) {
|
||||||
|
playbackManager.setRepeatMode(mode, player);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function getQualitySecondaryText(player) {
|
||||||
|
var state = playbackManager.getPlayerState(player);
|
||||||
|
var isAutoEnabled = playbackManager.enableAutomaticBitrateDetection(player);
|
||||||
|
var currentMaxBitrate = playbackManager.getMaxStreamingBitrate(player);
|
||||||
|
|
||||||
|
var videoStream = playbackManager.currentMediaSource(player).MediaStreams.filter(function (stream) {
|
||||||
|
return stream.Type === 'Video';
|
||||||
|
})[0];
|
||||||
|
|
||||||
|
var videoWidth = videoStream ? videoStream.Width : null;
|
||||||
|
var videoHeight = videoStream ? videoStream.Height : null;
|
||||||
|
|
||||||
|
var options = qualityoptions.getVideoQualityOptions({
|
||||||
|
currentMaxBitrate: playbackManager.getMaxStreamingBitrate(player),
|
||||||
|
isAutomaticBitrateEnabled: playbackManager.enableAutomaticBitrateDetection(player),
|
||||||
|
videoWidth: videoWidth,
|
||||||
|
videoHeight: videoHeight,
|
||||||
|
enableAuto: true
|
||||||
|
});
|
||||||
|
|
||||||
|
var menuItems = options.map(function (o) {
|
||||||
|
var opt = {
|
||||||
|
name: o.name,
|
||||||
|
id: o.bitrate,
|
||||||
|
asideText: o.secondaryText
|
||||||
|
};
|
||||||
|
|
||||||
|
if (o.selected) {
|
||||||
|
opt.selected = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
return opt;
|
||||||
|
});
|
||||||
|
|
||||||
|
var selectedOption = options.filter(function (o) {
|
||||||
|
return o.selected;
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!selectedOption.length) {
|
||||||
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
function showRepeatModeMenu(player, btn) {
|
selectedOption = selectedOption[0];
|
||||||
var menuItems = [];
|
var text = selectedOption.name;
|
||||||
var currentValue = playbackManager.getRepeatMode(player);
|
|
||||||
|
|
||||||
menuItems.push({
|
if (selectedOption.autoText) {
|
||||||
name: globalize.translate('RepeatAll'),
|
if (state.PlayState && state.PlayState.PlayMethod !== 'Transcode') {
|
||||||
id: 'RepeatAll',
|
text += ' - Direct';
|
||||||
selected: currentValue === 'RepeatAll'
|
} else {
|
||||||
});
|
text += ' ' + selectedOption.autoText;
|
||||||
|
}
|
||||||
menuItems.push({
|
|
||||||
name: globalize.translate('RepeatOne'),
|
|
||||||
id: 'RepeatOne',
|
|
||||||
selected: currentValue === 'RepeatOne'
|
|
||||||
});
|
|
||||||
|
|
||||||
menuItems.push({
|
|
||||||
name: globalize.translate('None'),
|
|
||||||
id: 'RepeatNone',
|
|
||||||
selected: currentValue === 'RepeatNone'
|
|
||||||
});
|
|
||||||
|
|
||||||
return actionsheet.show({
|
|
||||||
items: menuItems,
|
|
||||||
positionTo: btn
|
|
||||||
}).then(function (mode) {
|
|
||||||
if (mode) {
|
|
||||||
playbackManager.setRepeatMode(mode, player);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function getQualitySecondaryText(player) {
|
return text;
|
||||||
var state = playbackManager.getPlayerState(player);
|
}
|
||||||
var isAutoEnabled = playbackManager.enableAutomaticBitrateDetection(player);
|
|
||||||
var currentMaxBitrate = playbackManager.getMaxStreamingBitrate(player);
|
|
||||||
|
|
||||||
var videoStream = playbackManager.currentMediaSource(player).MediaStreams.filter(function (stream) {
|
function showAspectRatioMenu(player, btn) {
|
||||||
return stream.Type === 'Video';
|
// each has a name and id
|
||||||
})[0];
|
var currentId = playbackManager.getAspectRatio(player);
|
||||||
|
var menuItems = playbackManager.getSupportedAspectRatios(player).map(function (i) {
|
||||||
|
return {
|
||||||
|
id: i.id,
|
||||||
|
name: i.name,
|
||||||
|
selected: i.id === currentId
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
var videoWidth = videoStream ? videoStream.Width : null;
|
return actionsheet.show({
|
||||||
var videoHeight = videoStream ? videoStream.Height : null;
|
items: menuItems,
|
||||||
|
positionTo: btn
|
||||||
var options = qualityoptions.getVideoQualityOptions({
|
}).then(function (id) {
|
||||||
currentMaxBitrate: playbackManager.getMaxStreamingBitrate(player),
|
if (id) {
|
||||||
isAutomaticBitrateEnabled: playbackManager.enableAutomaticBitrateDetection(player),
|
playbackManager.setAspectRatio(id, player);
|
||||||
videoWidth: videoWidth,
|
return Promise.resolve();
|
||||||
videoHeight: videoHeight,
|
|
||||||
enableAuto: true
|
|
||||||
});
|
|
||||||
|
|
||||||
var menuItems = options.map(function (o) {
|
|
||||||
var opt = {
|
|
||||||
name: o.name,
|
|
||||||
id: o.bitrate,
|
|
||||||
asideText: o.secondaryText
|
|
||||||
};
|
|
||||||
|
|
||||||
if (o.selected) {
|
|
||||||
opt.selected = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
return opt;
|
|
||||||
});
|
|
||||||
|
|
||||||
var selectedOption = options.filter(function (o) {
|
|
||||||
return o.selected;
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!selectedOption.length) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
selectedOption = selectedOption[0];
|
|
||||||
var text = selectedOption.name;
|
|
||||||
|
|
||||||
if (selectedOption.autoText) {
|
|
||||||
if (state.PlayState && state.PlayState.PlayMethod !== 'Transcode') {
|
|
||||||
text += ' - Direct';
|
|
||||||
} else {
|
|
||||||
text += ' ' + selectedOption.autoText;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return text;
|
|
||||||
}
|
|
||||||
|
|
||||||
function showAspectRatioMenu(player, btn) {
|
|
||||||
// each has a name and id
|
|
||||||
var currentId = playbackManager.getAspectRatio(player);
|
|
||||||
var menuItems = playbackManager.getSupportedAspectRatios(player).map(function (i) {
|
|
||||||
return {
|
|
||||||
id: i.id,
|
|
||||||
name: i.name,
|
|
||||||
selected: i.id === currentId
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
||||||
return actionsheet.show({
|
|
||||||
items: menuItems,
|
|
||||||
positionTo: btn
|
|
||||||
}).then(function (id) {
|
|
||||||
if (id) {
|
|
||||||
playbackManager.setAspectRatio(id, player);
|
|
||||||
return Promise.resolve();
|
|
||||||
}
|
|
||||||
|
|
||||||
return Promise.reject();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function showWithUser(options, player, user) {
|
|
||||||
var supportedCommands = playbackManager.getSupportedCommands(player);
|
|
||||||
var mediaType = options.mediaType;
|
|
||||||
|
|
||||||
var menuItems = [];
|
|
||||||
if (supportedCommands.indexOf('SetAspectRatio') !== -1) {
|
|
||||||
var currentAspectRatioId = playbackManager.getAspectRatio(player);
|
|
||||||
var currentAspectRatio = playbackManager.getSupportedAspectRatios(player).filter(function (i) {
|
|
||||||
return i.id === currentAspectRatioId;
|
|
||||||
})[0];
|
|
||||||
|
|
||||||
menuItems.push({
|
|
||||||
name: globalize.translate('AspectRatio'),
|
|
||||||
id: 'aspectratio',
|
|
||||||
asideText: currentAspectRatio ? currentAspectRatio.name : null
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
if (user && user.Policy.EnableVideoPlaybackTranscoding) {
|
|
||||||
var secondaryQualityText = getQualitySecondaryText(player);
|
|
||||||
|
|
||||||
menuItems.push({
|
|
||||||
name: globalize.translate('Quality'),
|
|
||||||
id: 'quality',
|
|
||||||
asideText: secondaryQualityText
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
var repeatMode = playbackManager.getRepeatMode(player);
|
|
||||||
|
|
||||||
if (supportedCommands.indexOf('SetRepeatMode') !== -1 && playbackManager.currentMediaSource(player).RunTimeTicks) {
|
|
||||||
menuItems.push({
|
|
||||||
name: globalize.translate('RepeatMode'),
|
|
||||||
id: 'repeatmode',
|
|
||||||
asideText: repeatMode === 'RepeatNone' ? globalize.translate('None') : globalize.translate('' + repeatMode)
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
if (options.suboffset) {
|
|
||||||
menuItems.push({
|
|
||||||
name: globalize.translate('SubtitleOffset'),
|
|
||||||
id: 'suboffset',
|
|
||||||
asideText: null
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
if (options.stats) {
|
|
||||||
menuItems.push({
|
|
||||||
name: globalize.translate('PlaybackData'),
|
|
||||||
id: 'stats',
|
|
||||||
asideText: null
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
return actionsheet.show({
|
|
||||||
items: menuItems,
|
|
||||||
positionTo: options.positionTo
|
|
||||||
}).then(function (id) {
|
|
||||||
return handleSelectedOption(id, options, player);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function show(options) {
|
|
||||||
var player = options.player;
|
|
||||||
var currentItem = playbackManager.currentItem(player);
|
|
||||||
|
|
||||||
if (!currentItem || !currentItem.ServerId) {
|
|
||||||
return showWithUser(options, player, null);
|
|
||||||
}
|
|
||||||
|
|
||||||
var apiClient = connectionManager.getApiClient(currentItem.ServerId);
|
|
||||||
return apiClient.getCurrentUser().then(function (user) {
|
|
||||||
return showWithUser(options, player, user);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleSelectedOption(id, options, player) {
|
|
||||||
switch (id) {
|
|
||||||
case 'quality':
|
|
||||||
return showQualityMenu(player, options.positionTo);
|
|
||||||
case 'aspectratio':
|
|
||||||
return showAspectRatioMenu(player, options.positionTo);
|
|
||||||
case 'repeatmode':
|
|
||||||
return showRepeatModeMenu(player, options.positionTo);
|
|
||||||
case 'stats':
|
|
||||||
if (options.onOption) {
|
|
||||||
options.onOption('stats');
|
|
||||||
}
|
|
||||||
return Promise.resolve();
|
|
||||||
case 'suboffset':
|
|
||||||
if (options.onOption) {
|
|
||||||
options.onOption('suboffset');
|
|
||||||
}
|
|
||||||
return Promise.resolve();
|
|
||||||
default:
|
|
||||||
break;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return Promise.reject();
|
return Promise.reject();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function showWithUser(options, player, user) {
|
||||||
|
var supportedCommands = playbackManager.getSupportedCommands(player);
|
||||||
|
var mediaType = options.mediaType;
|
||||||
|
|
||||||
|
var menuItems = [];
|
||||||
|
if (supportedCommands.indexOf('SetAspectRatio') !== -1) {
|
||||||
|
var currentAspectRatioId = playbackManager.getAspectRatio(player);
|
||||||
|
var currentAspectRatio = playbackManager.getSupportedAspectRatios(player).filter(function (i) {
|
||||||
|
return i.id === currentAspectRatioId;
|
||||||
|
})[0];
|
||||||
|
|
||||||
|
menuItems.push({
|
||||||
|
name: globalize.translate('AspectRatio'),
|
||||||
|
id: 'aspectratio',
|
||||||
|
asideText: currentAspectRatio ? currentAspectRatio.name : null
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
return {
|
if (user && user.Policy.EnableVideoPlaybackTranscoding) {
|
||||||
show: show
|
var secondaryQualityText = getQualitySecondaryText(player);
|
||||||
};
|
|
||||||
});
|
menuItems.push({
|
||||||
|
name: globalize.translate('Quality'),
|
||||||
|
id: 'quality',
|
||||||
|
asideText: secondaryQualityText
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
var repeatMode = playbackManager.getRepeatMode(player);
|
||||||
|
|
||||||
|
if (supportedCommands.indexOf('SetRepeatMode') !== -1 && playbackManager.currentMediaSource(player).RunTimeTicks) {
|
||||||
|
menuItems.push({
|
||||||
|
name: globalize.translate('RepeatMode'),
|
||||||
|
id: 'repeatmode',
|
||||||
|
asideText: repeatMode === 'RepeatNone' ? globalize.translate('None') : globalize.translate('' + repeatMode)
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (options.suboffset) {
|
||||||
|
menuItems.push({
|
||||||
|
name: globalize.translate('SubtitleOffset'),
|
||||||
|
id: 'suboffset',
|
||||||
|
asideText: null
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (options.stats) {
|
||||||
|
menuItems.push({
|
||||||
|
name: globalize.translate('PlaybackData'),
|
||||||
|
id: 'stats',
|
||||||
|
asideText: null
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return actionsheet.show({
|
||||||
|
items: menuItems,
|
||||||
|
positionTo: options.positionTo
|
||||||
|
}).then(function (id) {
|
||||||
|
return handleSelectedOption(id, options, player);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export function show(options) {
|
||||||
|
var player = options.player;
|
||||||
|
var currentItem = playbackManager.currentItem(player);
|
||||||
|
|
||||||
|
if (!currentItem || !currentItem.ServerId) {
|
||||||
|
return showWithUser(options, player, null);
|
||||||
|
}
|
||||||
|
|
||||||
|
var apiClient = connectionManager.getApiClient(currentItem.ServerId);
|
||||||
|
return apiClient.getCurrentUser().then(function (user) {
|
||||||
|
return showWithUser(options, player, user);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleSelectedOption(id, options, player) {
|
||||||
|
switch (id) {
|
||||||
|
case 'quality':
|
||||||
|
return showQualityMenu(player, options.positionTo);
|
||||||
|
case 'aspectratio':
|
||||||
|
return showAspectRatioMenu(player, options.positionTo);
|
||||||
|
case 'repeatmode':
|
||||||
|
return showRepeatModeMenu(player, options.positionTo);
|
||||||
|
case 'stats':
|
||||||
|
if (options.onOption) {
|
||||||
|
options.onOption('stats');
|
||||||
|
}
|
||||||
|
return Promise.resolve();
|
||||||
|
case 'suboffset':
|
||||||
|
if (options.onOption) {
|
||||||
|
options.onOption('suboffset');
|
||||||
|
}
|
||||||
|
return Promise.resolve();
|
||||||
|
default:
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
return Promise.reject();
|
||||||
|
}
|
||||||
|
|
||||||
|
export default {
|
||||||
|
show: show
|
||||||
|
};
|
||||||
|
|||||||
@ -1,24 +1,20 @@
|
|||||||
define([], function () {
|
export function getDisplayPlayMethod(session) {
|
||||||
'use strict';
|
|
||||||
|
|
||||||
function getDisplayPlayMethod(session) {
|
if (!session.NowPlayingItem) {
|
||||||
|
return null;
|
||||||
if (!session.NowPlayingItem) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (session.TranscodingInfo && session.TranscodingInfo.IsVideoDirect) {
|
|
||||||
return 'DirectStream';
|
|
||||||
} else if (session.PlayState.PlayMethod === 'Transcode') {
|
|
||||||
return 'Transcode';
|
|
||||||
} else if (session.PlayState.PlayMethod === 'DirectStream') {
|
|
||||||
return 'DirectPlay';
|
|
||||||
} else if (session.PlayState.PlayMethod === 'DirectPlay') {
|
|
||||||
return 'DirectPlay';
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return {
|
if (session.TranscodingInfo && session.TranscodingInfo.IsVideoDirect) {
|
||||||
getDisplayPlayMethod: getDisplayPlayMethod
|
return 'DirectStream';
|
||||||
};
|
} else if (session.PlayState.PlayMethod === 'Transcode') {
|
||||||
});
|
return 'Transcode';
|
||||||
|
} else if (session.PlayState.PlayMethod === 'DirectStream') {
|
||||||
|
return 'DirectPlay';
|
||||||
|
} else if (session.PlayState.PlayMethod === 'DirectPlay') {
|
||||||
|
return 'DirectPlay';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default {
|
||||||
|
getDisplayPlayMethod: getDisplayPlayMethod
|
||||||
|
};
|
||||||
|
|||||||
@ -1,159 +1,161 @@
|
|||||||
define(['events', 'playbackManager', 'dom', 'browser', 'css!./iconosd', 'material-icons'], function (events, playbackManager, dom, browser) {
|
import events from 'events';
|
||||||
'use strict';
|
import playbackManager from 'playbackManager';
|
||||||
|
import dom from 'dom';
|
||||||
|
import browser from 'browser';
|
||||||
|
import 'css!./iconosd';
|
||||||
|
import 'material-icons';
|
||||||
|
|
||||||
var currentPlayer;
|
var currentPlayer;
|
||||||
var osdElement;
|
var osdElement;
|
||||||
var iconElement;
|
var iconElement;
|
||||||
var progressElement;
|
var progressElement;
|
||||||
|
|
||||||
var enableAnimation;
|
var enableAnimation;
|
||||||
|
|
||||||
function getOsdElementHtml() {
|
function getOsdElementHtml() {
|
||||||
var html = '';
|
var html = '';
|
||||||
|
|
||||||
html += '<span class="material-icons iconOsdIcon volume_up"></span>';
|
html += '<span class="material-icons iconOsdIcon volume_up"></span>';
|
||||||
|
|
||||||
html += '<div class="iconOsdProgressOuter"><div class="iconOsdProgressInner"></div></div>';
|
html += '<div class="iconOsdProgressOuter"><div class="iconOsdProgressInner"></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('volumeOsd');
|
||||||
|
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;
|
var hideTimeout;
|
||||||
if (!elem) {
|
function showOsd() {
|
||||||
|
|
||||||
enableAnimation = browser.supportsCssAnimation();
|
clearHideTimeout();
|
||||||
|
|
||||||
elem = document.createElement('div');
|
var elem = osdElement;
|
||||||
elem.classList.add('hide');
|
|
||||||
elem.classList.add('iconOsd');
|
|
||||||
elem.classList.add('iconOsd-hidden');
|
|
||||||
elem.classList.add('volumeOsd');
|
|
||||||
elem.innerHTML = getOsdElementHtml();
|
|
||||||
|
|
||||||
iconElement = elem.querySelector('.material-icons');
|
dom.removeEventListener(elem, dom.whichTransitionEvent(), onHideComplete, {
|
||||||
progressElement = elem.querySelector('.iconOsdProgressInner');
|
once: true
|
||||||
|
|
||||||
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 updatePlayerVolumeState(isMuted, volume) {
|
|
||||||
|
|
||||||
if (iconElement) {
|
|
||||||
iconElement.classList.remove('volume_off', 'volume_up');
|
|
||||||
iconElement.classList.add(isMuted ? 'volume_off' : 'volume_up');
|
|
||||||
}
|
|
||||||
if (progressElement) {
|
|
||||||
progressElement.style.width = (volume || 0) + '%';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function releaseCurrentPlayer() {
|
|
||||||
|
|
||||||
var player = currentPlayer;
|
|
||||||
|
|
||||||
if (player) {
|
|
||||||
events.off(player, 'volumechange', onVolumeChanged);
|
|
||||||
events.off(player, 'playbackstop', hideOsd);
|
|
||||||
currentPlayer = null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function onVolumeChanged(e) {
|
|
||||||
|
|
||||||
var player = this;
|
|
||||||
|
|
||||||
ensureOsdElement();
|
|
||||||
|
|
||||||
updatePlayerVolumeState(player.isMuted(), player.getVolume());
|
|
||||||
|
|
||||||
showOsd();
|
|
||||||
}
|
|
||||||
|
|
||||||
function bindToPlayer(player) {
|
|
||||||
|
|
||||||
if (player === currentPlayer) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
releaseCurrentPlayer();
|
|
||||||
|
|
||||||
currentPlayer = player;
|
|
||||||
|
|
||||||
if (!player) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
hideOsd();
|
|
||||||
events.on(player, 'volumechange', onVolumeChanged);
|
|
||||||
events.on(player, 'playbackstop', hideOsd);
|
|
||||||
}
|
|
||||||
|
|
||||||
events.on(playbackManager, 'playerchange', function () {
|
|
||||||
bindToPlayer(playbackManager.getCurrentPlayer());
|
|
||||||
});
|
});
|
||||||
|
|
||||||
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 updatePlayerVolumeState(isMuted, volume) {
|
||||||
|
|
||||||
|
if (iconElement) {
|
||||||
|
iconElement.classList.remove('volume_off', 'volume_up');
|
||||||
|
iconElement.classList.add(isMuted ? 'volume_off' : 'volume_up');
|
||||||
|
}
|
||||||
|
if (progressElement) {
|
||||||
|
progressElement.style.width = (volume || 0) + '%';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function releaseCurrentPlayer() {
|
||||||
|
|
||||||
|
var player = currentPlayer;
|
||||||
|
|
||||||
|
if (player) {
|
||||||
|
events.off(player, 'volumechange', onVolumeChanged);
|
||||||
|
events.off(player, 'playbackstop', hideOsd);
|
||||||
|
currentPlayer = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function onVolumeChanged(e) {
|
||||||
|
|
||||||
|
var player = this;
|
||||||
|
|
||||||
|
ensureOsdElement();
|
||||||
|
|
||||||
|
updatePlayerVolumeState(player.isMuted(), player.getVolume());
|
||||||
|
|
||||||
|
showOsd();
|
||||||
|
}
|
||||||
|
|
||||||
|
function bindToPlayer(player) {
|
||||||
|
|
||||||
|
if (player === currentPlayer) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
releaseCurrentPlayer();
|
||||||
|
|
||||||
|
currentPlayer = player;
|
||||||
|
|
||||||
|
if (!player) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
hideOsd();
|
||||||
|
events.on(player, 'volumechange', onVolumeChanged);
|
||||||
|
events.on(player, 'playbackstop', hideOsd);
|
||||||
|
}
|
||||||
|
|
||||||
|
events.on(playbackManager, 'playerchange', function () {
|
||||||
|
bindToPlayer(playbackManager.getCurrentPlayer());
|
||||||
});
|
});
|
||||||
|
|
||||||
|
bindToPlayer(playbackManager.getCurrentPlayer());
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user