mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

Merge branch 'master' into photos

Browse source
This commit is contained in:
dkanada 2020-05-28 02:43:03 +09:00 • committed by GitHub
commit 210dbd6d06
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
83 changed files with 3702 additions and 1151 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/components/actionSheet/actionSheet.js
View file

@ -197,7 +197,9 @@ export function show(options) {
menuItemClass += ' actionsheet-xlargeFont';
}
for (let [i, item] of options.items.entries()) {
// 'options.items' is HTMLOptionsCollection, so no fancy loops
for (let i = 0; i < options.items.length; i++) {
const item = options.items[i];
if (item.divider) {

2
src/components/appRouter.js
View file

@ -1,4 +1,4 @@
define(['loading', 'globalize', 'events', 'viewManager', 'layoutManager', 'skinManager', 'pluginManager', 'backdrop', 'browser', 'page', 'appSettings', 'apphost', 'connectionManager'], function (loading, globalize, events, viewManager, layoutManager, skinManager, pluginManager, backdrop, browser, page, appSettings, appHost, connectionManager) {
define(['loading', 'globalize', 'events', 'viewManager', 'skinManager', 'backdrop', 'browser', 'page', 'appSettings', 'apphost', 'connectionManager'], function (loading, globalize, events, viewManager, skinManager, backdrop, browser, page, appSettings, appHost, connectionManager) {
'use strict';
var appRouter = {

4
src/components/cardbuilder/card.css
View file

@ -306,6 +306,10 @@ button::-moz-focus-inner {
text-align: left;
}
.dialog .cardText {
text-overflow: initial;
}
.cardText-secondary {
font-size: 86%;
}

2
src/components/channelMapper/channelMapper.js
View file

@ -79,7 +79,7 @@ define(['dom', 'dialogHelper', 'loading', 'connectionManager', 'globalize', 'act
function getEditorHtml() {
var html = '';
html += '<div class="formDialogContent">';
html += '<div class="formDialogContent smoothScrollY">';
html += '<div class="dialogContentInner dialog-content-centered">';
html += '<form style="margin:auto;">';
html += '<h1>' + globalize.translate('HeaderChannels') + '</h1>';

15
src/components/dialogHelper/dialoghelper.css
View file

@ -126,25 +126,10 @@
}
@media all and (min-width: 80em) and (min-height: 45em) {
.dialog-medium {
width: 80%;
height: 80%;
}
.dialog-medium-tall {
width: 80%;
height: 90%;
}
.dialog-small {
width: 60%;
height: 80%;
}
.dialog-fullscreen-border {
width: 90%;
height: 90%;
}
}
.noScroll {

5
src/components/directorybrowser/directorybrowser.js
View file

@ -89,7 +89,6 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in
var instruction = options.instruction ? options.instruction + '<br/><br/>' : '';
html += '<div class="infoBanner" style="margin-bottom:1.5em;">';
html += instruction;
html += globalize.translate('MessageDirectoryPickerInstruction', '<b>\\\\server</b>', '<b>\\\\192.168.1.101</b>');
if ('bsd' === systemInfo.OperatingSystem.toLowerCase()) {
html += '<br/>';
html += '<br/>';
@ -126,7 +125,7 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in
html += '<div class="inputContainer" style="margin-top:2em;">';
html += '<input is="emby-input" id="txtNetworkPath" type="text" label="' + globalize.translate('LabelOptionalNetworkPath') + '"/>';
html += '<div class="fieldDescription">';
html += globalize.translate('LabelOptionalNetworkPathHelp');
html += globalize.translate('LabelOptionalNetworkPathHelp', '<b>\\\\server</b>', '<b>\\\\192.168.1.101</b>');
html += '</div>';
html += '</div>';
}
@ -253,7 +252,7 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in
var systemInfo = responses[0];
var initialPath = responses[1];
var dlg = dialogHelper.createDialog({
size: 'medium-tall',
size: 'small',
removeOnClose: true,
scrollY: false
});

18
src/components/formdialog.css
View file

@ -19,6 +19,10 @@
margin-bottom: 0;
}
.formDialogHeaderTitle:first-child {
margin-left: 1em;
}
.formDialogContent:not(.no-grow) {
flex-grow: 1;
}
@ -46,10 +50,16 @@
right: 0;
display: flex;
position: absolute;
padding: 1.25em 1em;
padding: 1em 1em;
/* Without this emby-checkbox is able to appear on top */
z-index: 1;
align-items: flex-end;
justify-content: flex-end;
flex-wrap: wrap;
}
.layout-tv .formDialogFooter {
align-items: center;
justify-content: center;
flex-wrap: wrap;
@ -69,8 +79,12 @@
.formDialogFooterItem {
margin: 0.5em !important;
flex-grow: 1;
text-align: center;
flex-basis: 12em;
}
.layout-tv .formDialogFooterItem {
flex-grow: 1;
flex-basis: 0;
}

20
src/components/homeScreenSettings/homeScreenSettings.js
View file

@ -37,18 +37,19 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
var list = [];
if (type === 'movies') {
list.push({
name: globalize.translate('Movies'),
value: 'movies',
isDefault: true
});
list.push({
name: globalize.translate('Suggestions'),
value: 'suggestions'
});
list.push({
name: globalize.translate('Genres'),
value: 'genres'
});
list.push({
name: globalize.translate('Favorites'),
value: 'favorites'
@ -58,7 +59,6 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
value: 'collections'
});
} else if (type === 'tvshows') {
list.push({
name: globalize.translate('Shows'),
value: 'shows',
@ -68,49 +68,45 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa
name: globalize.translate('Suggestions'),
value: 'suggestions'
});
list.push({
name: globalize.translate('Latest'),
value: 'latest'
});
list.push({
name: globalize.translate('Genres'),
value: 'genres'
});
list.push({
name: globalize.translate('Favorites'),
value: 'favorites'
});
} else if (type === 'music') {
list.push({
name: globalize.translate('Suggestions'),
value: 'suggestions',
isDefault: true
});
list.push({
name: globalize.translate('Albums'),
value: 'albums'
});
list.push({
name: globalize.translate('HeaderAlbumArtists'),
value: 'albumartists'
});
list.push({
name: globalize.translate('Artists'),
value: 'artists'
});
list.push({
name: globalize.translate('Playlists'),
value: 'playlists'
});
list.push({
name: globalize.translate('Genres'),
value: 'genres'
});
} else if (type === 'livetv') {
list.push({
name: globalize.translate('Suggestions'),
value: 'suggestions',

42
src/components/htmlAudioPlayer/plugin.js
View file

@ -177,6 +177,7 @@ define(['events', 'browser', 'require', 'apphost', 'appSettings', 'htmlMediaHelp
elem.addEventListener('pause', onPause);
elem.addEventListener('playing', onPlaying);
elem.addEventListener('play', onPlay);
elem.addEventListener('waiting', onWaiting);
}
function unBindEvents(elem) {
@ -186,6 +187,7 @@ define(['events', 'browser', 'require', 'apphost', 'appSettings', 'htmlMediaHelp
elem.removeEventListener('pause', onPause);
elem.removeEventListener('playing', onPlaying);
elem.removeEventListener('play', onPlay);
elem.removeEventListener('waiting', onWaiting);
}
self.stop = function (destroyPlayer) {
@ -300,6 +302,10 @@ define(['events', 'browser', 'require', 'apphost', 'appSettings', 'htmlMediaHelp
events.trigger(self, 'pause');
}
function onWaiting() {
events.trigger(self, 'waiting');
}
function onError() {
var errorCode = this.error ? (this.error.code || 0) : 0;
@ -456,6 +462,21 @@ define(['events', 'browser', 'require', 'apphost', 'appSettings', 'htmlMediaHelp
return false;
};
HtmlAudioPlayer.prototype.setPlaybackRate = function (value) {
var mediaElement = this._mediaElement;
if (mediaElement) {
mediaElement.playbackRate = value;
}
};
HtmlAudioPlayer.prototype.getPlaybackRate = function () {
var mediaElement = this._mediaElement;
if (mediaElement) {
return mediaElement.playbackRate;
}
return null;
};
HtmlAudioPlayer.prototype.setVolume = function (val) {
var mediaElement = this._mediaElement;
if (mediaElement) {
@ -499,5 +520,26 @@ define(['events', 'browser', 'require', 'apphost', 'appSettings', 'htmlMediaHelp
};
var supportedFeatures;
function getSupportedFeatures() {
var list = [];
var audio = document.createElement('audio');
if (typeof audio.playbackRate === 'number') {
list.push('PlaybackRate');
}
return list;
}
HtmlAudioPlayer.prototype.supports = function (feature) {
if (!supportedFeatures) {
supportedFeatures = getSupportedFeatures();
}
return supportedFeatures.indexOf(feature) !== -1;
};
return HtmlAudioPlayer;
});

27
src/components/htmlVideoPlayer/plugin.js
View file

@ -109,6 +109,8 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
function hidePrePlaybackPage() {
let animatedPage = document.querySelector('.page:not(.hide)');
animatedPage.classList.add('hide');
// At this point, we must hide the scrollbar placeholder, so it's not being displayed while the item is being loaded
document.body.classList.remove('force-scroll');
}
function zoomIn(elem) {
@ -797,6 +799,7 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
videoElement.removeEventListener('play', onPlay);
videoElement.removeEventListener('click', onClick);
videoElement.removeEventListener('dblclick', onDblClick);
videoElement.removeEventListener('waiting', onWaiting);
videoElement.parentNode.removeChild(videoElement);
}
@ -925,6 +928,10 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
events.trigger(self, 'pause');
}
function onWaiting() {
events.trigger(self, 'waiting');
}
function onError() {
var errorCode = this.error ? (this.error.code || 0) : 0;
var errorMessage = this.error ? (this.error.message || '') : '';
@ -1347,6 +1354,7 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
videoElement.addEventListener('play', onPlay);
videoElement.addEventListener('click', onClick);
videoElement.addEventListener('dblclick', onDblClick);
videoElement.addEventListener('waiting', onWaiting);
if (options.backdropUrl) {
videoElement.poster = options.backdropUrl;
}
@ -1434,6 +1442,10 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
list.push('AirPlay');
}
if (typeof video.playbackRate === 'number') {
list.push('PlaybackRate');
}
list.push('SetBrightness');
list.push('SetAspectRatio');
@ -1654,6 +1666,21 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
return false;
};
HtmlVideoPlayer.prototype.setPlaybackRate = function (value) {
var mediaElement = this._mediaElement;
if (mediaElement) {
mediaElement.playbackRate = value;
}
};
HtmlVideoPlayer.prototype.getPlaybackRate = function () {
var mediaElement = this._mediaElement;
if (mediaElement) {
return mediaElement.playbackRate;
}
return null;
};
HtmlVideoPlayer.prototype.setVolume = function (val) {
var mediaElement = this._mediaElement;
if (mediaElement) {

2
src/components/imageDownloader/imageDownloader.js
View file

@ -334,7 +334,7 @@ define(['dom', 'loading', 'apphost', 'dialogHelper', 'connectionManager', 'image
if (layoutManager.tv) {
dialogOptions.size = 'fullscreen';
} else {
dialogOptions.size = 'fullscreen-border';
dialogOptions.size = 'small';
}
var dlg = dialogHelper.createDialog(dialogOptions);

2
src/components/imageDownloader/imageDownloader.template.html
View file

@ -5,7 +5,7 @@
</h3>
</div>
<div class="formDialogContent">
<div class="formDialogContent smoothScrollY">
<div class="dialogContentInner">
<div class="flex align-items-center justify-content-center flex-wrap-wrap" style="margin: 2em 0;">

2
src/components/imageOptionsEditor/imageOptionsEditor.js
View file

@ -87,7 +87,7 @@ define(['globalize', 'dom', 'dialogHelper', 'emby-checkbox', 'emby-select', 'emb
xhr.onload = function (e) {
var template = this.response;
var dlg = dialogHelper.createDialog({
size: 'medium-tall',
size: 'small',
removeOnClose: true,
scrollY: false
});

2
src/components/imageUploader/imageUploader.js
View file

@ -137,7 +137,7 @@ define(['dialogHelper', 'connectionManager', 'dom', 'loading', 'scrollHelper', '
if (layoutManager.tv) {
dialogOptions.size = 'fullscreen';
} else {
dialogOptions.size = 'fullscreen-border';
dialogOptions.size = 'small';
}
var dlg = dialogHelper.createDialog(dialogOptions);

2
src/components/imageUploader/imageUploader.template.html
View file

@ -5,7 +5,7 @@
</h3>
</div>
<div class="formDialogContent">
<div class="formDialogContent smoothScrollY">
<div class="dialogContentInner">
<form class="uploadItemImageForm" style="max-width: 100%;">

2
src/components/imageeditor/imageeditor.js
View file

@ -457,7 +457,7 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager',
if (layoutManager.tv) {
dialogOptions.size = 'fullscreen';
} else {
dialogOptions.size = 'fullscreen-border';
dialogOptions.size = 'small';
}
var dlg = dialogHelper.createDialog(dialogOptions);

2
src/components/imageeditor/imageeditor.template.html
View file

@ -5,7 +5,7 @@
</h3>
</div>
<div class="formDialogContent">
<div class="formDialogContent smoothScrollY">
<div class="dialogContentInner">
<div id="imagesContainer">

2
src/components/itemContextMenu.js
View file

@ -450,7 +450,7 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
navigator.share({
title: item.Name,
text: item.Overview,
url: 'https://github.com/jellyfin/jellyfin'
url: `${apiClient.serverAddress()}/web/index.html#!/${appRouter.getRouteUrl(item)}`
});
break;
case 'album':

4
src/components/itemidentifier/itemidentifier.js
View file

@ -348,7 +348,7 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
currentItemType = currentItem.Type;
var dialogOptions = {
size: 'fullscreen-border',
size: 'small',
removeOnClose: true,
scrollY: false
};
@ -429,7 +429,7 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
require(['text!./itemidentifier.template.html'], function (template) {
var dialogOptions = {
size: 'fullscreen-border',
size: 'small',
removeOnClose: true,
scrollY: false
};

2
src/components/mediaLibraryCreator/mediaLibraryCreator.js
View file

@ -187,7 +187,7 @@ define(['loading', 'dialogHelper', 'dom', 'jQuery', 'components/libraryoptionsed
xhr.onload = function (e) {
var template = this.response;
var dlg = dialogHelper.createDialog({
size: 'medium-tall',
size: 'small',
modal: false,
removeOnClose: true,
scrollY: false

2
src/components/mediaLibraryEditor/mediaLibraryEditor.js
View file

@ -204,7 +204,7 @@ define(['jQuery', 'loading', 'dialogHelper', 'dom', 'components/libraryoptionsed
xhr.onload = function (e) {
var template = this.response;
var dlg = dialogHelper.createDialog({
size: 'medium-tall',
size: 'small',
modal: false,
removeOnClose: true,
scrollY: false

71
src/components/metadataEditor/metadataEditor.js
View file

@ -245,50 +245,6 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
});
}
function showMoreMenu(context, button, user) {
require(['itemContextMenu'], function (itemContextMenu) {
var item = currentItem;
itemContextMenu.show({
item: item,
positionTo: button,
edit: false,
editImages: true,
editSubtitles: true,
sync: false,
share: false,
play: false,
queue: false,
user: user
}).then(function (result) {
if (result.deleted) {
afterDeleted(context, item);
} else if (result.updated) {
reload(context, item.Id, item.ServerId);
}
});
});
}
function afterDeleted(context, item) {
var parentId = item.ParentId || item.SeasonId || item.SeriesId;
if (parentId) {
reload(context, parentId, item.ServerId);
} else {
require(['appRouter'], function (appRouter) {
appRouter.goHome();
});
}
}
function onEditorClick(e) {
var btnRemoveFromEditorList = dom.parentWithClass(e.target, 'btnRemoveFromEditorList');
@ -307,6 +263,12 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
return connectionManager.getApiClient(currentItem.ServerId);
}
function bindAll(elems, eventName, fn) {
for (var i = 0, length = elems.length; i < length; i++) {
elems[i].addEventListener(eventName, fn);
}
}
function init(context, apiClient) {
context.querySelector('.externalIds').addEventListener('click', function (e) {
@ -322,19 +284,16 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
}
});
context.querySelector('.btnCancel').addEventListener('click', function () {
if (!layoutManager.desktop) {
context.querySelector('.btnBack').classList.remove('hide');
context.querySelector('.btnClose').classList.add('hide');
}
bindAll(context.querySelectorAll('.btnCancel'), 'click', function (event) {
event.preventDefault();
closeDialog(false);
});
context.querySelector('.btnMore').addEventListener('click', function (e) {
getApiClient().getCurrentUser().then(function (user) {
showMoreMenu(context, e.target, user);
});
});
context.querySelector('.btnHeaderSave').addEventListener('click', function (e) {
context.querySelector('.btnSave').click();
@ -349,8 +308,8 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
}
});
context.removeEventListener('click', onEditorClick);
context.addEventListener('click', onEditorClick);
context.removeEventListener('submit', onEditorClick);
context.addEventListener('submit', onEditorClick);
var form = context.querySelector('form');
form.removeEventListener('submit', onSubmit);
@ -1077,7 +1036,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
if (layoutManager.tv) {
dialogOptions.size = 'fullscreen';
} else {
dialogOptions.size = 'medium-tall';
dialogOptions.size = 'small';
}
var dlg = dialogHelper.createDialog(dialogOptions);

79
src/components/metadataEditor/metadataEditor.template.html
View file

@ -1,5 +1,5 @@
<div class="formDialogHeader">
<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><span class="material-icons arrow_back"></span></button>
<button is="paper-icon-button-light" class="btnCancel btnBack autoSize hide" tabindex="-1"><span class="material-icons arrow_back"></span></button>
<h3 class="formDialogHeaderTitle">
${Edit}
</h3>
@ -8,8 +8,8 @@
<span class="material-icons check"></span>
<span>${Save}</span>
</button>
<button is="paper-icon-button-light" class="btnMore autoSize" tabindex="-1">
<span class="material-icons more_vert"></span>
<button is="paper-icon-button-light" class="btnCancel btnClose autoSize" tabindex="-1">
<span class="material-icons close"></span>
</button>
</div>
</div>
@ -57,11 +57,13 @@
<div id="fldAlbum" class="hide inputContainer">
<input is="emby-input" id="txtAlbum" type="text" label="${LabelAlbum}" />
</div>
<div id="fldParentIndexNumber" class="hide inputContainer">
<input is="emby-input" id="txtParentIndexNumber" type="number" />
</div>
<div id="fldIndexNumber" class="hide inputContainer">
<input is="emby-input" id="txtIndexNumber" type="number" pattern="[0-9]*" />
<div class="inlineForm">
<div id="fldParentIndexNumber" class="hide inputContainer">
<input is="emby-input" id="txtParentIndexNumber" type="number" />
</div>
<div id="fldIndexNumber" class="hide inputContainer">
<input is="emby-input" id="txtIndexNumber" type="number" pattern="[0-9]*" />
</div>
</div>
<div id="fldCommunityRating" class="hide inputContainer">
<input is="emby-input" id="txtCommunityRating" type="number" step=".1" min="0" max="10" label="${LabelCommunityRating}" />
@ -129,24 +131,28 @@
<div id="fldSeriesRuntime" class="inputContainer hide">
<input is="emby-input" id="txtSeriesRuntime" type="number" label="${LabelRuntimeMinutes}" />
</div>
<div id="fldOfficialRating" class="selectContainer hide">
<select is="emby-select" id="selectOfficialRating" label="${LabelParentalRating}"></select>
<div class="inlineForm">
<div id="fldOfficialRating" class="selectContainer hide">
<select is="emby-select" id="selectOfficialRating" label="${LabelParentalRating}"></select>
</div>
<div id="fldCustomRating" class="selectContainer hide">
<select is="emby-select" id="selectCustomRating" label="${LabelCustomRating}"></select>
</div>
</div>
<div id="fldCustomRating" class="selectContainer hide">
<select is="emby-select" id="selectCustomRating" label="${LabelCustomRating}"></select>
</div>
<div id="fldOriginalAspectRatio" class="inputContainer hide">
<input is="emby-input" id="txtOriginalAspectRatio" type="text" label="${LabelOriginalAspectRatio}" />
</div>
<div id="fld3dFormat" class="selectContainer hide">
<select is="emby-select" id="select3dFormat" label="${Label3DFormat}">
<option value=""></option>
<option value="HalfSideBySide">HSBS</option>
<option value="HalfTopAndBottom">HTAB</option>
<option value="FullSideBySide">FSBS</option>
<option value="FullTopAndBottom">FTAB</option>
<option value="MVC">MVC</option>
</select>
<div class="inlineForm">
<div id="fldOriginalAspectRatio" class="inputContainer hide">
<input is="emby-input" id="txtOriginalAspectRatio" type="text" label="${LabelOriginalAspectRatio}" />
</div>
<div id="fld3dFormat" class="selectContainer hide">
<select is="emby-select" id="select3dFormat" label="${Label3DFormat}">
<option value=""></option>
<option value="HalfSideBySide">HSBS</option>
<option value="HalfTopAndBottom">HTAB</option>
<option value="FullSideBySide">FSBS</option>
<option value="FullTopAndBottom">FTAB</option>
<option value="MVC">MVC</option>
</select>
</div>
</div>
<div id="fldDisplayOrder" class="fldDisplaySetting selectContainer hide">
@ -160,14 +166,16 @@
<h2>
${HeaderSpecialEpisodeInfo}
</h2>
<div class="inputContainer">
<input is="emby-input" id="txtAirsBeforeSeason" type="number" pattern="[0-9]*" label="${LabelAirsBeforeSeason}" />
</div>
<div class="inputContainer">
<input is="emby-input" id="txtAirsAfterSeason" type="number" pattern="[0-9]*" label="${LabelAirsAfterSeason}" />
</div>
<div class="inputContainer">
<input is="emby-input" id="txtAirsBeforeEpisode" type="number" pattern="[0-9]*" label="${LabelAirsBeforeEpisode}" />
<div class="inlineForm">
<div class="inputContainer">
<input is="emby-input" id="txtAirsBeforeSeason" type="number" pattern="[0-9]*" label="${LabelAirsBeforeSeason}" />
</div>
<div class="inputContainer">
<input is="emby-input" id="txtAirsAfterSeason" type="number" pattern="[0-9]*" label="${LabelAirsAfterSeason}" />
</div>
<div class="inputContainer">
<input is="emby-input" id="txtAirsBeforeEpisode" type="number" pattern="[0-9]*" label="${LabelAirsBeforeEpisode}" />
</div>
</div>
</div>
@ -240,8 +248,11 @@
</div>
<br />
<div class="formDialogFooter">
<button is="emby-button" class="raised button-cancel block btnCancel formDialogFooterItem">
<span>${Cancel}</span>
</button>
<button is="emby-button" type="submit" class="raised button-submit block btnSave formDialogFooterItem">
<span>${Save}</span>
<span>${SaveChanges}</span>
</button>
</div>

2
src/components/metadataEditor/personEditor.js
View file

@ -21,7 +21,7 @@ define(['dialogHelper', 'layoutManager', 'globalize', 'require', 'paper-icon-but
if (layoutManager.tv) {
dialogOptions.size = 'fullscreen';
} else {
dialogOptions.size = 'medium-tall';
dialogOptions.size = 'small';
}
var dlg = dialogHelper.createDialog(dialogOptions);

24
src/components/playback/playbackmanager.js
View file

@ -54,6 +54,7 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
if (!serverId) {
// Not a server item
// We can expand on this later and possibly report them
events.trigger(playbackManagerInstance, 'reportplayback', [false]);
return;
}
@ -77,7 +78,11 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
}
var apiClient = connectionManager.getApiClient(serverId);
apiClient[method](info);
var reportPlaybackPromise = apiClient[method](info);
// Notify that report has been sent
reportPlaybackPromise.then(() => {
events.trigger(playbackManagerInstance, 'reportplayback', [true]);
});
}
function getPlaylistSync(playbackManagerInstance, player) {
@ -3775,6 +3780,20 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
}
};
PlaybackManager.prototype.setPlaybackRate = function (value, player = this._currentPlayer) {
if (player && player.setPlaybackRate) {
player.setPlaybackRate(value);
}
};
PlaybackManager.prototype.getPlaybackRate = function (player = this._currentPlayer) {
if (player && player.getPlaybackRate) {
return player.getPlaybackRate();
}
return null;
};
PlaybackManager.prototype.instantMix = function (item, player) {
player = player || this._currentPlayer;
@ -3885,6 +3904,9 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
if (player.supports('SetAspectRatio')) {
list.push('SetAspectRatio');
}
if (player.supports('PlaybackRate')) {
list.push('PlaybackRate');
}
}
return list;

31
src/components/playerstats/playerstats.js
View file

@ -1,4 +1,4 @@
define(['events', 'globalize', 'playbackManager', 'connectionManager', 'playMethodHelper', 'layoutManager', 'serverNotifications', 'paper-icon-button-light', 'css!./playerstats'], function (events, globalize, playbackManager, connectionManager, playMethodHelper, layoutManager, serverNotifications) {
define(['events', 'globalize', 'playbackManager', 'connectionManager', 'syncPlayManager', 'playMethodHelper', 'layoutManager', 'serverNotifications', 'paper-icon-button-light', 'css!./playerstats'], function (events, globalize, playbackManager, connectionManager, syncPlayManager, playMethodHelper, layoutManager, serverNotifications) {
'use strict';
function init(instance) {
@ -327,6 +327,28 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'playMeth
return sessionStats;
}
function getSyncPlayStats() {
var syncStats = [];
var stats = syncPlayManager.getStats();
syncStats.push({
label: globalize.translate('LabelSyncPlayTimeOffset'),
value: stats.TimeOffset + globalize.translate('MillisecondsUnit')
});
syncStats.push({
label: globalize.translate('LabelSyncPlayPlaybackDiff'),
value: stats.PlaybackDiff + globalize.translate('MillisecondsUnit')
});
syncStats.push({
label: globalize.translate('LabelSyncPlaySyncMethod'),
value: stats.SyncMethod
});
return syncStats;
}
function getStats(instance, player) {
var statsPromise = player.getStats ? player.getStats() : Promise.resolve({});
@ -383,6 +405,13 @@ define(['events', 'globalize', 'playbackManager', 'connectionManager', 'playMeth
name: 'Original Media Info'
});
if (syncPlayManager.isSyncPlayEnabled()) {
categories.push({
stats: getSyncPlayStats(),
name: 'SyncPlay Info'
});
}
return Promise.resolve(categories);
});
}

118
src/components/pluginManager.js
View file

@ -1,10 +1,10 @@
define(['events'], function (events) {
define(['events', 'globalize'], function (events, globalize) {
'use strict';
// TODO: replace with each plugin version
var cacheParam = new Date().getTime();
function loadStrings(plugin, globalize) {
function loadStrings(plugin) {
var strings = plugin.getTranslations ? plugin.getTranslations() : [];
return globalize.loadStrings({
name: plugin.id || plugin.packageName,
@ -25,68 +25,78 @@ define(['events'], function (events) {
this.pluginsList = [];
}
PluginManager.prototype.loadPlugin = function (url) {
PluginManager.prototype.loadPlugin = function(pluginSpec) {
console.debug('Loading plugin: ' + url);
var instance = this;
return new Promise(function (resolve, reject) {
function registerPlugin(plugin) {
instance.register(plugin);
require([url, 'globalize', 'appRouter'], function (pluginFactory, globalize, appRouter) {
var plugin = pluginFactory.default ? new pluginFactory.default() : new pluginFactory();
// See if it's already installed
var existing = instance.pluginsList.filter(function (p) {
return p.id === plugin.id;
})[0];
if (existing) {
resolve(url);
return;
}
plugin.installUrl = url;
var urlLower = url.toLowerCase();
if (urlLower.indexOf('http:') === -1 && urlLower.indexOf('https:') === -1 && urlLower.indexOf('file:') === -1) {
if (url.indexOf(appRouter.baseUrl()) !== 0) {
url = appRouter.baseUrl() + '/' + url;
}
}
var separatorIndex = Math.max(url.lastIndexOf('/'), url.lastIndexOf('\\'));
plugin.baseUrl = url.substring(0, separatorIndex);
var paths = {};
paths[plugin.id] = plugin.baseUrl;
requirejs.config({
waitSeconds: 0,
paths: paths
if (plugin.getRoutes) {
plugin.getRoutes().forEach(function (route) {
definePluginRoute(instance, route, plugin);
});
}
instance.register(plugin);
if (plugin.type === 'skin') {
if (plugin.getRoutes) {
plugin.getRoutes().forEach(function (route) {
definePluginRoute(instance, route, plugin);
// translations won't be loaded for skins until needed
return Promise.resolve(plugin);
} else {
return new Promise((resolve, reject) => {
loadStrings(plugin)
.then(function () {
resolve(plugin);
})
.catch(reject);
});
}
}
if (typeof pluginSpec === 'string') {
console.debug('Loading plugin (via deprecated requirejs method): ' + pluginSpec);
return new Promise(function (resolve, reject) {
require([pluginSpec], (pluginFactory) => {
var plugin = new pluginFactory();
// See if it's already installed
var existing = instance.pluginsList.filter(function (p) {
return p.id === plugin.id;
})[0];
if (existing) {
resolve(pluginSpec);
}
plugin.installUrl = pluginSpec;
var separatorIndex = Math.max(pluginSpec.lastIndexOf('/'), pluginSpec.lastIndexOf('\\'));
plugin.baseUrl = pluginSpec.substring(0, separatorIndex);
var paths = {};
paths[plugin.id] = plugin.baseUrl;
requirejs.config({
waitSeconds: 0,
paths: paths
});
}
if (plugin.type === 'skin') {
// translations won't be loaded for skins until needed
resolve(plugin);
} else {
loadStrings(plugin, globalize).then(function () {
resolve(plugin);
}, reject);
}
registerPlugin(plugin).then(resolve).catch(reject);
});
});
});
} else if (pluginSpec.then) {
return pluginSpec.then(pluginBuilder => {
return pluginBuilder();
}).then(plugin => {
console.debug(`Plugin loaded: ${plugin.id}`);
return registerPlugin(plugin);
});
} else {
const err = new Error('Plugins have to be a Promise that resolves to a plugin builder function or a requirejs urls (deprecated)');
console.error(err);
return Promise.reject(err);
}
};
// In lieu of automatic discovery, plugins will register dynamic objects

7
src/components/skinManager.js
View file

@ -1,4 +1,4 @@
define(['apphost', 'userSettings', 'browser', 'events', 'pluginManager', 'backdrop', 'globalize', 'require', 'appSettings'], function (appHost, userSettings, browser, events, pluginManager, backdrop, globalize, require, appSettings) {
define(['apphost', 'userSettings', 'browser', 'events', 'backdrop', 'globalize', 'require', 'appSettings'], function (appHost, userSettings, browser, events, backdrop, globalize, require, appSettings) {
'use strict';
var themeStyleElement;
@ -137,6 +137,8 @@ define(['apphost', 'userSettings', 'browser', 'events', 'pluginManager', 'backdr
function onViewBeforeShow(e) {
if (e.detail && e.detail.type === 'video-osd') {
// This removes the space that the scrollbar takes while playing a video
document.body.classList.remove('force-scroll');
return;
}
@ -155,6 +157,9 @@ define(['apphost', 'userSettings', 'browser', 'events', 'pluginManager', 'backdr
}
}
}
// This keeps the scrollbar always present in all pages, so we avoid clipping while switching between pages
// that need the scrollbar and pages that don't.
document.body.classList.add('force-scroll');
}
document.addEventListener('viewshow', onViewBeforeShow);

6
src/components/slideshow/slideshow.js
View file

@ -438,6 +438,9 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
inputManager.off(window, onInputCommand);
document.removeEventListener((window.PointerEvent ? 'pointermove' : 'mousemove'), onPointerMove);
// Shows page scrollbar
document.body.classList.remove('hide-scroll');
document.body.classList.add('force-scroll');
}
/**
@ -603,6 +606,9 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
*/
self.show = function () {
createElements(options);
// Hides page scrollbar
document.body.classList.remove('force-scroll');
document.body.classList.add('hide-scroll');
};
/**

189
src/components/syncplay/groupSelectionMenu.js Normal file
View file

@ -0,0 +1,189 @@
import events from 'events';
import connectionManager from 'connectionManager';
import playbackManager from 'playbackManager';
import syncPlayManager from 'syncPlayManager';
import loading from 'loading';
import toast from 'toast';
import actionsheet from 'actionsheet';
import globalize from 'globalize';
import playbackPermissionManager from 'playbackPermissionManager';
/**
* Gets active player id.
* @returns {string} The player's id.
*/
function getActivePlayerId () {
var info = playbackManager.getPlayerInfo();
return info ? info.id : null;
}
/**
* Used when user needs to join a group.
* @param {HTMLElement} button - Element where to place the menu.
* @param {Object} user - Current user.
* @param {Object} apiClient - ApiClient.
*/
function showNewJoinGroupSelection (button, user, apiClient) {
const sessionId = getActivePlayerId() || 'none';
const inSession = sessionId !== 'none';
const policy = user.localUser ? user.localUser.Policy : {};
let playingItemId;
try {
const playState = playbackManager.getPlayerState();
playingItemId = playState.NowPlayingItem.Id;
console.debug('Item', playingItemId, 'is currently playing.');
} catch (error) {
playingItemId = '';
console.debug('No item is currently playing.');
}
apiClient.sendSyncPlayCommand(sessionId, 'ListGroups').then(function (response) {
response.json().then(function (groups) {
var menuItems = groups.map(function (group) {
return {
name: group.PlayingItemName,
icon: 'group',
id: group.GroupId,
selected: false,
secondaryText: group.Participants.join(', ')
};
});
if (inSession && policy.SyncPlayAccess === 'CreateAndJoinGroups') {
menuItems.push({
name: globalize.translate('LabelSyncPlayNewGroup'),
icon: 'add',
id: 'new-group',
selected: true,
secondaryText: globalize.translate('LabelSyncPlayNewGroupDescription')
});
}
if (menuItems.length === 0) {
if (inSession && policy.SyncPlayAccess === 'JoinGroups') {
toast({
text: globalize.translate('MessageSyncPlayCreateGroupDenied')
});
} else {
toast({
text: globalize.translate('MessageSyncPlayNoGroupsAvailable')
});
}
loading.hide();
return;
}
var menuOptions = {
title: globalize.translate('HeaderSyncPlaySelectGroup'),
items: menuItems,
positionTo: button,
resolveOnClick: true,
border: true
};
actionsheet.show(menuOptions).then(function (id) {
if (id == 'new-group') {
apiClient.sendSyncPlayCommand(sessionId, 'NewGroup');
} else {
apiClient.sendSyncPlayCommand(sessionId, 'JoinGroup', {
GroupId: id,
PlayingItemId: playingItemId
});
}
}).catch((error) => {
console.error('SyncPlay: unexpected error listing groups:', error);
});
loading.hide();
});
}).catch(function (error) {
console.error(error);
loading.hide();
toast({
text: globalize.translate('MessageSyncPlayErrorAccessingGroups')
});
});
}
/**
* Used when user has joined a group.
* @param {HTMLElement} button - Element where to place the menu.
* @param {Object} user - Current user.
* @param {Object} apiClient - ApiClient.
*/
function showLeaveGroupSelection (button, user, apiClient) {
const sessionId = getActivePlayerId();
if (!sessionId) {
syncPlayManager.signalError();
toast({
text: globalize.translate('MessageSyncPlayErrorNoActivePlayer')
});
showNewJoinGroupSelection(button, user, apiClient);
return;
}
const menuItems = [{
name: globalize.translate('LabelSyncPlayLeaveGroup'),
icon: 'meeting_room',
id: 'leave-group',
selected: true,
secondaryText: globalize.translate('LabelSyncPlayLeaveGroupDescription')
}];
var menuOptions = {
title: globalize.translate('HeaderSyncPlayEnabled'),
items: menuItems,
positionTo: button,
resolveOnClick: true,
border: true
};
actionsheet.show(menuOptions).then(function (id) {
if (id == 'leave-group') {
apiClient.sendSyncPlayCommand(sessionId, 'LeaveGroup');
}
}).catch((error) => {
console.error('SyncPlay: unexpected error showing group menu:', error);
});
loading.hide();
}
// Register to SyncPlay events
let syncPlayEnabled = false;
events.on(syncPlayManager, 'enabled', function (e, enabled) {
syncPlayEnabled = enabled;
});
/**
* Shows a menu to handle SyncPlay groups.
* @param {HTMLElement} button - Element where to place the menu.
*/
export function show (button) {
loading.show();
// TODO: should feature be disabled if playback permission is missing?
playbackPermissionManager.check().then(() => {
console.debug('Playback is allowed.');
}).catch((error) => {
console.error('Playback not allowed!', error);
toast({
text: globalize.translate('MessageSyncPlayPlaybackPermissionRequired')
});
});
const apiClient = connectionManager.currentApiClient();
connectionManager.user(apiClient).then((user) => {
if (syncPlayEnabled) {
showLeaveGroupSelection(button, user, apiClient);
} else {
showNewJoinGroupSelection(button, user, apiClient);
}
}).catch((error) => {
console.error(error);
loading.hide();
toast({
text: globalize.translate('MessageSyncPlayNoGroupsAvailable')
});
});
}

51
src/components/syncplay/playbackPermissionManager.js Normal file
View file

@ -0,0 +1,51 @@
/**
* Creates an audio element that plays a silent sound.
* @returns {HTMLMediaElement} The audio element.
*/
function createTestMediaElement () {
const elem = document.createElement('audio');
elem.classList.add('testMediaPlayerAudio');
elem.classList.add('hide');
document.body.appendChild(elem);
elem.volume = 1; // Volume should not be zero to trigger proper permissions
elem.src = 'assets/audio/silence.mp3'; // Silent sound
return elem;
}
/**
* Destroys a media element.
* @param {HTMLMediaElement} elem The element to destroy.
*/
function destroyTestMediaElement (elem) {
elem.pause();
elem.remove();
}
/**
* Class that manages the playback permission.
*/
class PlaybackPermissionManager {
/**
* Tests playback permission. Grabs the permission when called inside a click event (or any other valid user interaction).
* @returns {Promise} Promise that resolves succesfully if playback permission is allowed.
*/
check () {
return new Promise((resolve, reject) => {
const media = createTestMediaElement();
media.play().then(() => {
resolve();
}).catch((error) => {
reject(error);
}).finally(() => {
destroyTestMediaElement(media);
});
});
}
}
/** PlaybackPermissionManager singleton. */
export default new PlaybackPermissionManager();

839
src/components/syncplay/syncPlayManager.js Normal file
View file

@ -0,0 +1,839 @@
/**
* Module that manages the SyncPlay feature.
* @module components/syncplay/syncPlayManager
*/
import events from 'events';
import connectionManager from 'connectionManager';
import playbackManager from 'playbackManager';
import timeSyncManager from 'timeSyncManager';
import toast from 'toast';
import globalize from 'globalize';
/**
* Waits for an event to be triggered on an object. An optional timeout can specified after which the promise is rejected.
* @param {Object} emitter Object on which to listen for events.
* @param {string} eventType Event name to listen for.
* @param {number} timeout Time in milliseconds before rejecting promise if event does not trigger.
* @returns {Promise} A promise that resolves when the event is triggered.
*/
function waitForEventOnce(emitter, eventType, timeout) {
return new Promise((resolve, reject) => {
let rejectTimeout;
if (timeout) {
rejectTimeout = setTimeout(() => {
reject('Timed out.');
}, timeout);
}
const callback = () => {
events.off(emitter, eventType, callback);
if (rejectTimeout) {
clearTimeout(rejectTimeout);
}
resolve(arguments);
};
events.on(emitter, eventType, callback);
});
}
/**
* Gets active player id.
* @returns {string} The player's id.
*/
function getActivePlayerId() {
var info = playbackManager.getPlayerInfo();
return info ? info.id : null;
}
/**
* Playback synchronization
*/
const MaxAcceptedDelaySpeedToSync = 50; // milliseconds, delay after which SpeedToSync is enabled
const MaxAcceptedDelaySkipToSync = 300; // milliseconds, delay after which SkipToSync is enabled
const SyncMethodThreshold = 2000; // milliseconds, switches between SpeedToSync or SkipToSync
const SpeedToSyncTime = 1000; // milliseconds, duration in which the playback is sped up
const MaxAttemptsSpeedToSync = 3; // attempts before disabling SpeedToSync
const MaxAttemptsSync = 5; // attempts before disabling syncing at all
/**
* Other constants
*/
const WaitForEventDefaultTimeout = 30000; // milliseconds
const WaitForPlayerEventTimeout = 500; // milliseconds
/**
* Class that manages the SyncPlay feature.
*/
class SyncPlayManager {
constructor() {
this.playbackRateSupported = false;
this.syncEnabled = false;
this.playbackDiffMillis = 0; // used for stats
this.syncMethod = 'None'; // used for stats
this.syncAttempts = 0;
this.lastSyncTime = new Date();
this.syncWatcherTimeout = null; // interval that watches playback time and syncs it
this.lastPlaybackWaiting = null; // used to determine if player's buffering
this.minBufferingThresholdMillis = 1000;
this.currentPlayer = null;
this.localPlayerPlaybackRate = 1.0; // used to restore user PlaybackRate
this.syncPlayEnabledAt = null; // Server time of when SyncPlay has been enabled
this.syncPlayReady = false; // SyncPlay is ready after first ping to server
this.lastCommand = null;
this.queuedCommand = null;
this.scheduledCommand = null;
this.syncTimeout = null;
this.timeOffsetWithServer = 0; // server time minus local time
this.roundTripDuration = 0;
this.notifySyncPlayReady = false;
events.on(playbackManager, 'playbackstart', (player, state) => {
this.onPlaybackStart(player, state);
});
events.on(playbackManager, 'playbackstop', (stopInfo) => {
this.onPlaybackStop(stopInfo);
});
events.on(playbackManager, 'playerchange', () => {
this.onPlayerChange();
});
this.bindToPlayer(playbackManager.getCurrentPlayer());
events.on(this, 'timeupdate', (event) => {
this.syncPlaybackTime();
});
events.on(timeSyncManager, 'update', (event, error, timeOffset, ping) => {
if (error) {
console.debug('SyncPlay, time update issue', error);
return;
}
this.timeOffsetWithServer = timeOffset;
this.roundTripDuration = ping * 2;
if (this.notifySyncPlayReady) {
this.syncPlayReady = true;
events.trigger(this, 'ready');
this.notifySyncPlayReady = false;
}
// Report ping
if (this.syncEnabled) {
const apiClient = connectionManager.currentApiClient();
const sessionId = getActivePlayerId();
if (!sessionId) {
this.signalError();
toast({
text: globalize.translate('MessageSyncPlayErrorMissingSession')
});
return;
}
apiClient.sendSyncPlayCommand(sessionId, 'UpdatePing', {
Ping: ping
});
}
});
}
/**
* Called when playback starts.
*/
onPlaybackStart (player, state) {
events.trigger(this, 'playbackstart', [player, state]);
}
/**
* Called when playback stops.
*/
onPlaybackStop (stopInfo) {
events.trigger(this, 'playbackstop', [stopInfo]);
if (this.isSyncPlayEnabled()) {
this.disableSyncPlay(false);
}
}
/**
* Called when the player changes.
*/
onPlayerChange () {
this.bindToPlayer(playbackManager.getCurrentPlayer());
events.trigger(this, 'playerchange', [this.currentPlayer]);
}
/**
* Called when playback unpauses.
*/
onPlayerUnpause () {
events.trigger(this, 'unpause', [this.currentPlayer]);
}
/**
* Called when playback pauses.
*/
onPlayerPause() {
events.trigger(this, 'pause', [this.currentPlayer]);
}
/**
* Called on playback progress.
* @param {Object} e The time update event.
*/
onTimeUpdate (e) {
// NOTICE: this event is unreliable, at least in Safari
// which just stops firing the event after a while.
events.trigger(this, 'timeupdate', [e]);
}
/**
* Called when playback is resumed.
*/
onPlaying () {
// TODO: implement group wait
this.lastPlaybackWaiting = null;
events.trigger(this, 'playing');
}
/**
* Called when playback is buffering.
*/
onWaiting () {
// TODO: implement group wait
if (!this.lastPlaybackWaiting) {
this.lastPlaybackWaiting = new Date();
}
events.trigger(this, 'waiting');
}
/**
* Gets playback buffering status.
* @returns {boolean} _true_ if player is buffering, _false_ otherwise.
*/
isBuffering () {
if (this.lastPlaybackWaiting === null) return false;
return (new Date() - this.lastPlaybackWaiting) > this.minBufferingThresholdMillis;
}
/**
* Binds to the player's events.
* @param {Object} player The player.
*/
bindToPlayer (player) {
if (player !== this.currentPlayer) {
this.releaseCurrentPlayer();
this.currentPlayer = player;
if (!player) return;
}
// FIXME: the following are needed because the 'events' module
// is changing the scope when executing the callbacks.
// For instance, calling 'onPlayerUnpause' from the wrong scope breaks things because 'this'
// points to 'player' (the event emitter) instead of pointing to the SyncPlayManager singleton.
const self = this;
this._onPlayerUnpause = () => {
self.onPlayerUnpause();
};
this._onPlayerPause = () => {
self.onPlayerPause();
};
this._onTimeUpdate = (e) => {
self.onTimeUpdate(e);
};
this._onPlaying = () => {
self.onPlaying();
};
this._onWaiting = () => {
self.onWaiting();
};
events.on(player, 'unpause', this._onPlayerUnpause);
events.on(player, 'pause', this._onPlayerPause);
events.on(player, 'timeupdate', this._onTimeUpdate);
events.on(player, 'playing', this._onPlaying);
events.on(player, 'waiting', this._onWaiting);
this.playbackRateSupported = player.supports('PlaybackRate');
// Save player current PlaybackRate value
if (this.playbackRateSupported) {
this.localPlayerPlaybackRate = player.getPlaybackRate();
}
}
/**
* Removes the bindings to the current player's events.
*/
releaseCurrentPlayer () {
var player = this.currentPlayer;
if (player) {
events.off(player, 'unpause', this._onPlayerUnpause);
events.off(player, 'pause', this._onPlayerPause);
events.off(player, 'timeupdate', this._onTimeUpdate);
events.off(player, 'playing', this._onPlaying);
events.off(player, 'waiting', this._onWaiting);
// Restore player original PlaybackRate value
if (this.playbackRateSupported) {
player.setPlaybackRate(this.localPlayerPlaybackRate);
this.localPlayerPlaybackRate = 1.0;
}
this.currentPlayer = null;
this.playbackRateSupported = false;
}
}
/**
* Handles a group update from the server.
* @param {Object} cmd The group update.
* @param {Object} apiClient The ApiClient.
*/
processGroupUpdate (cmd, apiClient) {
switch (cmd.Type) {
case 'PrepareSession':
this.prepareSession(apiClient, cmd.GroupId, cmd.Data);
break;
case 'UserJoined':
toast({
text: globalize.translate('MessageSyncPlayUserJoined', cmd.Data)
});
break;
case 'UserLeft':
toast({
text: globalize.translate('MessageSyncPlayUserLeft', cmd.Data)
});
break;
case 'GroupJoined':
this.enableSyncPlay(apiClient, new Date(cmd.Data), true);
break;
case 'NotInGroup':
case 'GroupLeft':
this.disableSyncPlay(true);
break;
case 'GroupWait':
toast({
text: globalize.translate('MessageSyncPlayGroupWait', cmd.Data)
});
break;
case 'GroupDoesNotExist':
toast({
text: globalize.translate('MessageSyncPlayGroupDoesNotExist')
});
break;
case 'CreateGroupDenied':
toast({
text: globalize.translate('MessageSyncPlayCreateGroupDenied')
});
break;
case 'JoinGroupDenied':
toast({
text: globalize.translate('MessageSyncPlayJoinGroupDenied')
});
break;
case 'LibraryAccessDenied':
toast({
text: globalize.translate('MessageSyncPlayLibraryAccessDenied')
});
break;
default:
console.error('processSyncPlayGroupUpdate: command is not recognised: ' + cmd.Type);
break;
}
}
/**
* Handles a playback command from the server.
* @param {Object} cmd The playback command.
* @param {Object} apiClient The ApiClient.
*/
processCommand (cmd, apiClient) {
if (cmd === null) return;
if (!this.isSyncPlayEnabled()) {
console.debug('SyncPlay processCommand: SyncPlay not enabled, ignoring command', cmd);
return;
}
if (!this.syncPlayReady) {
console.debug('SyncPlay processCommand: SyncPlay not ready, queued command', cmd);
this.queuedCommand = cmd;
return;
}
cmd.When = new Date(cmd.When);
cmd.EmittedAt = new Date(cmd.EmitttedAt);
if (cmd.EmitttedAt < this.syncPlayEnabledAt) {
console.debug('SyncPlay processCommand: ignoring old command', cmd);
return;
}
// Check if new command differs from last one
if (this.lastCommand &&
this.lastCommand.When === cmd.When &&
this.lastCommand.PositionTicks === cmd.PositionTicks &&
this.Command === cmd.Command
) {
console.debug('SyncPlay processCommand: ignoring duplicate command', cmd);
return;
}
this.lastCommand = cmd;
console.log('SyncPlay will', cmd.Command, 'at', cmd.When, 'PositionTicks', cmd.PositionTicks);
switch (cmd.Command) {
case 'Play':
this.schedulePlay(cmd.When, cmd.PositionTicks);
break;
case 'Pause':
this.schedulePause(cmd.When, cmd.PositionTicks);
break;
case 'Seek':
this.scheduleSeek(cmd.When, cmd.PositionTicks);
break;
default:
console.error('processCommand: command is not recognised: ' + cmd.Type);
break;
}
}
/**
* Prepares this client to join a group by loading the required content.
* @param {Object} apiClient The ApiClient.
* @param {string} groupId The group to join.
* @param {Object} sessionData Info about the content to load.
*/
prepareSession (apiClient, groupId, sessionData) {
const serverId = apiClient.serverInfo().Id;
playbackManager.play({
ids: sessionData.ItemIds,
startPositionTicks: sessionData.StartPositionTicks,
mediaSourceId: sessionData.MediaSourceId,
audioStreamIndex: sessionData.AudioStreamIndex,
subtitleStreamIndex: sessionData.SubtitleStreamIndex,
startIndex: sessionData.StartIndex,
serverId: serverId
}).then(() => {
waitForEventOnce(this, 'playbackstart', WaitForEventDefaultTimeout).then(() => {
var sessionId = getActivePlayerId();
if (!sessionId) {
console.error('Missing sessionId!');
toast({
text: globalize.translate('MessageSyncPlayErrorMissingSession')
});
return;
}
// Get playing item id
let playingItemId;
try {
const playState = playbackManager.getPlayerState();
playingItemId = playState.NowPlayingItem.Id;
} catch (error) {
playingItemId = '';
}
// Make sure the server has received the player state
waitForEventOnce(playbackManager, 'reportplayback', WaitForEventDefaultTimeout).then((success) => {
this.localPause();
if (!success) {
console.warning('Error reporting playback state to server. Joining group will fail.');
}
apiClient.sendSyncPlayCommand(sessionId, 'JoinGroup', {
GroupId: groupId,
PlayingItemId: playingItemId
});
}).catch(() => {
console.error('Timed out while waiting for `reportplayback` event!');
toast({
text: globalize.translate('MessageSyncPlayErrorMedia')
});
return;
});
}).catch(() => {
console.error('Timed out while waiting for `playbackstart` event!');
if (!this.isSyncPlayEnabled()) {
toast({
text: globalize.translate('MessageSyncPlayErrorMedia')
});
}
return;
});
}).catch((error) => {
console.error(error);
toast({
text: globalize.translate('MessageSyncPlayErrorMedia')
});
});
}
/**
* Enables SyncPlay.
* @param {Object} apiClient The ApiClient.
* @param {Date} enabledAt When SyncPlay has been enabled. Server side date.
* @param {boolean} showMessage Display message.
*/
enableSyncPlay (apiClient, enabledAt, showMessage = false) {
this.syncPlayEnabledAt = enabledAt;
this.injectPlaybackManager();
events.trigger(this, 'enabled', [true]);
waitForEventOnce(this, 'ready').then(() => {
this.processCommand(this.queuedCommand, apiClient);
this.queuedCommand = null;
});
this.syncPlayReady = false;
this.notifySyncPlayReady = true;
timeSyncManager.forceUpdate();
if (showMessage) {
toast({
text: globalize.translate('MessageSyncPlayEnabled')
});
}
}
/**
* Disables SyncPlay.
* @param {boolean} showMessage Display message.
*/
disableSyncPlay (showMessage = false) {
this.syncPlayEnabledAt = null;
this.syncPlayReady = false;
this.lastCommand = null;
this.queuedCommand = null;
this.syncEnabled = false;
events.trigger(this, 'enabled', [false]);
this.restorePlaybackManager();
if (showMessage) {
toast({
text: globalize.translate('MessageSyncPlayDisabled')
});
}
}
/**
* Gets SyncPlay status.
* @returns {boolean} _true_ if user joined a group, _false_ otherwise.
*/
isSyncPlayEnabled () {
return this.syncPlayEnabledAt !== null;
}
/**
* Schedules a resume playback on the player at the specified clock time.
* @param {Date} playAtTime The server's UTC time at which to resume playback.
* @param {number} positionTicks The PositionTicks from where to resume.
*/
schedulePlay (playAtTime, positionTicks) {
this.clearScheduledCommand();
const currentTime = new Date();
const playAtTimeLocal = timeSyncManager.serverDateToLocal(playAtTime);
if (playAtTimeLocal > currentTime) {
const playTimeout = playAtTimeLocal - currentTime;
this.localSeek(positionTicks);
this.scheduledCommand = setTimeout(() => {
this.localUnpause();
this.syncTimeout = setTimeout(() => {
this.syncEnabled = true;
}, SyncMethodThreshold / 2);
}, playTimeout);
console.debug('Scheduled play in', playTimeout / 1000.0, 'seconds.');
} else {
// Group playback already started
const serverPositionTicks = positionTicks + (currentTime - playAtTimeLocal) * 10000;
waitForEventOnce(this, 'unpause').then(() => {
this.localSeek(serverPositionTicks);
});
this.localUnpause();
this.syncTimeout = setTimeout(() => {
this.syncEnabled = true;
}, SyncMethodThreshold / 2);
}
}
/**
* Schedules a pause playback on the player at the specified clock time.
* @param {Date} pauseAtTime The server's UTC time at which to pause playback.
* @param {number} positionTicks The PositionTicks where player will be paused.
*/
schedulePause (pauseAtTime, positionTicks) {
this.clearScheduledCommand();
const currentTime = new Date();
const pauseAtTimeLocal = timeSyncManager.serverDateToLocal(pauseAtTime);
const callback = () => {
waitForEventOnce(this, 'pause', WaitForPlayerEventTimeout).then(() => {
this.localSeek(positionTicks);
}).catch(() => {
// Player was already paused, seeking
this.localSeek(positionTicks);
});
this.localPause();
};
if (pauseAtTimeLocal > currentTime) {
const pauseTimeout = pauseAtTimeLocal - currentTime;
this.scheduledCommand = setTimeout(callback, pauseTimeout);
console.debug('Scheduled pause in', pauseTimeout / 1000.0, 'seconds.');
} else {
callback();
}
}
/**
* Schedules a seek playback on the player at the specified clock time.
* @param {Date} pauseAtTime The server's UTC time at which to seek playback.
* @param {number} positionTicks The PositionTicks where player will be seeked.
*/
scheduleSeek (seekAtTime, positionTicks) {
this.schedulePause(seekAtTime, positionTicks);
}
/**
* Clears the current scheduled command.
*/
clearScheduledCommand () {
clearTimeout(this.scheduledCommand);
clearTimeout(this.syncTimeout);
this.syncEnabled = false;
if (this.currentPlayer) {
this.currentPlayer.setPlaybackRate(1);
}
this.clearSyncIcon();
}
/**
* Overrides some PlaybackManager's methods to intercept playback commands.
*/
injectPlaybackManager () {
if (!this.isSyncPlayEnabled()) return;
if (playbackManager.syncPlayEnabled) return;
// TODO: make this less hacky
playbackManager._localUnpause = playbackManager.unpause;
playbackManager._localPause = playbackManager.pause;
playbackManager._localSeek = playbackManager.seek;
playbackManager.unpause = this.playRequest;
playbackManager.pause = this.pauseRequest;
playbackManager.seek = this.seekRequest;
playbackManager.syncPlayEnabled = true;
}
/**
* Restores original PlaybackManager's methods.
*/
restorePlaybackManager () {
if (this.isSyncPlayEnabled()) return;
if (!playbackManager.syncPlayEnabled) return;
playbackManager.unpause = playbackManager._localUnpause;
playbackManager.pause = playbackManager._localPause;
playbackManager.seek = playbackManager._localSeek;
playbackManager.syncPlayEnabled = false;
}
/**
* Overrides PlaybackManager's unpause method.
*/
playRequest (player) {
var apiClient = connectionManager.currentApiClient();
var sessionId = getActivePlayerId();
apiClient.sendSyncPlayCommand(sessionId, 'PlayRequest');
}
/**
* Overrides PlaybackManager's pause method.
*/
pauseRequest (player) {
var apiClient = connectionManager.currentApiClient();
var sessionId = getActivePlayerId();
apiClient.sendSyncPlayCommand(sessionId, 'PauseRequest');
// Pause locally as well, to give the user some little control
playbackManager._localUnpause(player);
}
/**
* Overrides PlaybackManager's seek method.
*/
seekRequest (PositionTicks, player) {
var apiClient = connectionManager.currentApiClient();
var sessionId = getActivePlayerId();
apiClient.sendSyncPlayCommand(sessionId, 'SeekRequest', {
PositionTicks: PositionTicks
});
}
/**
* Calls original PlaybackManager's unpause method.
*/
localUnpause(player) {
if (playbackManager.syncPlayEnabled) {
playbackManager._localUnpause(player);
} else {
playbackManager.unpause(player);
}
}
/**
* Calls original PlaybackManager's pause method.
*/
localPause(player) {
if (playbackManager.syncPlayEnabled) {
playbackManager._localPause(player);
} else {
playbackManager.pause(player);
}
}
/**
* Calls original PlaybackManager's seek method.
*/
localSeek(PositionTicks, player) {
if (playbackManager.syncPlayEnabled) {
playbackManager._localSeek(PositionTicks, player);
} else {
playbackManager.seek(PositionTicks, player);
}
}
/**
* Attempts to sync playback time with estimated server time.
*
* When sync is enabled, the following will be checked:
* - check if local playback time is close enough to the server playback time
* If it is not, then a playback time sync will be attempted.
* Two methods of syncing are available:
* - SpeedToSync: speeds up the media for some time to catch up (default is one second)
* - SkipToSync: seeks the media to the estimated correct time
* SpeedToSync aims to reduce the delay as much as possible, whereas SkipToSync is less pretentious.
*/
syncPlaybackTime () {
// Attempt to sync only when media is playing.
if (!this.lastCommand || this.lastCommand.Command !== 'Play' || this.isBuffering()) return;
const currentTime = new Date();
// Avoid overloading the browser
const elapsed = currentTime - this.lastSyncTime;
if (elapsed < SyncMethodThreshold / 2) return;
this.lastSyncTime = currentTime;
const playAtTime = this.lastCommand.When;
const currentPositionTicks = playbackManager.currentTime();
// Estimate PositionTicks on server
const serverPositionTicks = this.lastCommand.PositionTicks + ((currentTime - playAtTime) + this.timeOffsetWithServer) * 10000;
// Measure delay that needs to be recovered
// diff might be caused by the player internally starting the playback
const diffMillis = (serverPositionTicks - currentPositionTicks) / 10000.0;
this.playbackDiffMillis = diffMillis;
if (this.syncEnabled) {
const absDiffMillis = Math.abs(diffMillis);
// TODO: SpeedToSync sounds bad on songs
// TODO: SpeedToSync is failing on Safari (Mojave); even if playbackRate is supported, some delay seems to exist
if (this.playbackRateSupported && absDiffMillis > MaxAcceptedDelaySpeedToSync && absDiffMillis < SyncMethodThreshold) {
// Disable SpeedToSync if it keeps failing
if (this.syncAttempts > MaxAttemptsSpeedToSync) {
this.playbackRateSupported = false;
}
// SpeedToSync method
const speed = 1 + diffMillis / SpeedToSyncTime;
this.currentPlayer.setPlaybackRate(speed);
this.syncEnabled = false;
this.syncAttempts++;
this.showSyncIcon('SpeedToSync (x' + speed + ')');
this.syncTimeout = setTimeout(() => {
this.currentPlayer.setPlaybackRate(1);
this.syncEnabled = true;
this.clearSyncIcon();
}, SpeedToSyncTime);
} else if (absDiffMillis > MaxAcceptedDelaySkipToSync) {
// Disable SkipToSync if it keeps failing
if (this.syncAttempts > MaxAttemptsSync) {
this.syncEnabled = false;
this.showSyncIcon('Sync disabled (too many attempts)');
}
// SkipToSync method
this.localSeek(serverPositionTicks);
this.syncEnabled = false;
this.syncAttempts++;
this.showSyncIcon('SkipToSync (' + this.syncAttempts + ')');
this.syncTimeout = setTimeout(() => {
this.syncEnabled = true;
this.clearSyncIcon();
}, SyncMethodThreshold / 2);
} else {
// Playback is synced
if (this.syncAttempts > 0) {
console.debug('Playback has been synced after', this.syncAttempts, 'attempts.');
}
this.syncAttempts = 0;
}
}
}
/**
* Gets SyncPlay stats.
* @returns {Object} The SyncPlay stats.
*/
getStats () {
return {
TimeOffset: this.timeOffsetWithServer,
PlaybackDiff: this.playbackDiffMillis,
SyncMethod: this.syncMethod
};
}
/**
* Emits an event to update the SyncPlay status icon.
*/
showSyncIcon (syncMethod) {
this.syncMethod = syncMethod;
events.trigger(this, 'syncing', [true, this.syncMethod]);
}
/**
* Emits an event to clear the SyncPlay status icon.
*/
clearSyncIcon () {
this.syncMethod = 'None';
events.trigger(this, 'syncing', [false, this.syncMethod]);
}
/**
* Signals an error state, which disables and resets SyncPlay for a new session.
*/
signalError () {
this.disableSyncPlay();
}
}
/** SyncPlayManager singleton. */
export default new SyncPlayManager();

207
src/components/syncplay/timeSyncManager.js Normal file
View file

@ -0,0 +1,207 @@
/**
* Module that manages time syncing with server.
* @module components/syncplay/timeSyncManager
*/
import events from 'events';
import connectionManager from 'connectionManager';
/**
* Time estimation
*/
const NumberOfTrackedMeasurements = 8;
const PollingIntervalGreedy = 1000; // milliseconds
const PollingIntervalLowProfile = 60000; // milliseconds
const GreedyPingCount = 3;
/**
* Class that stores measurement data.
*/
class Measurement {
/**
* Creates a new measurement.
* @param {Date} requestSent Client's timestamp of the request transmission
* @param {Date} requestReceived Server's timestamp of the request reception
* @param {Date} responseSent Server's timestamp of the response transmission
* @param {Date} responseReceived Client's timestamp of the response reception
*/
constructor(requestSent, requestReceived, responseSent, responseReceived) {
this.requestSent = requestSent.getTime();
this.requestReceived = requestReceived.getTime();
this.responseSent = responseSent.getTime();
this.responseReceived = responseReceived.getTime();
}
/**
* Time offset from server.
*/
getOffset () {
return ((this.requestReceived - this.requestSent) + (this.responseSent - this.responseReceived)) / 2;
}
/**
* Get round-trip delay.
*/
getDelay () {
return (this.responseReceived - this.requestSent) - (this.responseSent - this.requestReceived);
}
/**
* Get ping time.
*/
getPing () {
return this.getDelay() / 2;
}
}
/**
* Class that manages time syncing with server.
*/
class TimeSyncManager {
constructor() {
this.pingStop = true;
this.pollingInterval = PollingIntervalGreedy;
this.poller = null;
this.pings = 0; // number of pings
this.measurement = null; // current time sync
this.measurements = [];
this.startPing();
}
/**
* Gets status of time sync.
* @returns {boolean} _true_ if a measurement has been done, _false_ otherwise.
*/
isReady() {
return !!this.measurement;
}
/**
* Gets time offset with server.
* @returns {number} The time offset.
*/
getTimeOffset () {
return this.measurement ? this.measurement.getOffset() : 0;
}
/**
* Gets ping time to server.
* @returns {number} The ping time.
*/
getPing () {
return this.measurement ? this.measurement.getPing() : 0;
}
/**
* Updates time offset between server and client.
* @param {Measurement} measurement The new measurement.
*/
updateTimeOffset(measurement) {
this.measurements.push(measurement);
if (this.measurements.length > NumberOfTrackedMeasurements) {
this.measurements.shift();
}
// Pick measurement with minimum delay
const sortedMeasurements = this.measurements.slice(0);
sortedMeasurements.sort((a, b) => a.getDelay() - b.getDelay());
this.measurement = sortedMeasurements[0];
}
/**
* Schedules a ping request to the server. Triggers time offset update.
*/
requestPing() {
if (!this.poller) {
this.poller = setTimeout(() => {
this.poller = null;
const apiClient = connectionManager.currentApiClient();
const requestSent = new Date();
apiClient.getServerTime().then((response) => {
const responseReceived = new Date();
response.json().then((data) => {
const requestReceived = new Date(data.RequestReceptionTime);
const responseSent = new Date(data.ResponseTransmissionTime);
const measurement = new Measurement(requestSent, requestReceived, responseSent, responseReceived);
this.updateTimeOffset(measurement);
// Avoid overloading server
if (this.pings >= GreedyPingCount) {
this.pollingInterval = PollingIntervalLowProfile;
} else {
this.pings++;
}
events.trigger(this, 'update', [null, this.getTimeOffset(), this.getPing()]);
});
}).catch((error) => {
console.error(error);
events.trigger(this, 'update', [error, null, null]);
}).finally(() => {
this.requestPing();
});
}, this.pollingInterval);
}
}
/**
* Drops accumulated measurements.
*/
resetMeasurements () {
this.measurement = null;
this.measurements = [];
}
/**
* Starts the time poller.
*/
startPing() {
this.requestPing();
}
/**
* Stops the time poller.
*/
stopPing() {
if (this.poller) {
clearTimeout(this.poller);
this.poller = null;
}
}
/**
* Resets poller into greedy mode.
*/
forceUpdate() {
this.stopPing();
this.pollingInterval = PollingIntervalGreedy;
this.pings = 0;
this.startPing();
}
/**
* Converts server time to local time.
* @param {Date} server The time to convert.
* @returns {Date} Local time.
*/
serverDateToLocal(server) {
// server - local = offset
return new Date(server.getTime() - this.getTimeOffset());
}
/**
* Converts local time to server time.
* @param {Date} local The time to convert.
* @returns {Date} Server time.
*/
localDateToServer(local) {
// server - local = offset
return new Date(local.getTime() + this.getTimeOffset());
}
}
/** TimeSyncManager singleton. */
export default new TimeSyncManager();