mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
Merge branch 'master' into migrate-to-ES6-60
This commit is contained in:
Cameron
GitHub
commit
3c42a1867e
113 changed files with 5856 additions and 5551 deletions
|
|
@ -1,6 +1,7 @@
|
|||
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';
|
||||
|
||||
viewManager = viewManager.default || viewManager;
|
||||
browser = browser.default || browser;
|
||||
loading = loading.default || loading;
|
||||
|
||||
|
|
|
|||
|
|
@ -200,7 +200,7 @@ import 'flexStyles';
|
|||
}
|
||||
|
||||
function centerFocus(elem, horiz, on) {
|
||||
import('scrollHelper').then(scrollHelper => {
|
||||
import('scrollHelper').then((scrollHelper) => {
|
||||
const fn = on ? 'on' : 'off';
|
||||
scrollHelper.centerFocus[fn](elem, horiz);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -354,7 +354,7 @@ import 'scrollStyles';
|
|||
}
|
||||
|
||||
function centerFocus(elem, horiz, on) {
|
||||
import('scrollHelper').then(scrollHelper => {
|
||||
import('scrollHelper').then((scrollHelper) => {
|
||||
const fn = on ? 'on' : 'off';
|
||||
scrollHelper.centerFocus[fn](elem, horiz);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -2,6 +2,8 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'apphost',
|
|||
'use strict';
|
||||
focusManager = focusManager.default || focusManager;
|
||||
|
||||
layoutManager = layoutManager.default || layoutManager;
|
||||
|
||||
function onSubmit(e) {
|
||||
e.preventDefault();
|
||||
return false;
|
||||
|
|
@ -151,6 +153,7 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'apphost',
|
|||
|
||||
function centerFocus(elem, horiz, on) {
|
||||
require(['scrollHelper'], function (scrollHelper) {
|
||||
scrollHelper = scrollHelper.default || scrollHelper;
|
||||
var fn = on ? 'on' : 'off';
|
||||
scrollHelper.centerFocus[fn](elem, horiz);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
define(['dialogHelper', 'globalize', 'userSettings', 'layoutManager', 'connectionManager', 'require', 'loading', 'scrollHelper', 'emby-checkbox', 'emby-radio', 'css!./../formdialog', 'material-icons'], function (dialogHelper, globalize, userSettings, layoutManager, connectionManager, require, loading, scrollHelper) {
|
||||
'use strict';
|
||||
|
||||
layoutManager = layoutManager.default || layoutManager;
|
||||
scrollHelper = scrollHelper.default || scrollHelper;
|
||||
|
||||
function saveCategories(context, options) {
|
||||
var categories = [];
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,10 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
|
|||
playbackManager = playbackManager.default || playbackManager;
|
||||
browser = browser.default || browser;
|
||||
loading = loading.default || loading;
|
||||
layoutManager = layoutManager.default || layoutManager;
|
||||
focusManager = focusManager.default || focusManager;
|
||||
scrollHelper = scrollHelper.default || scrollHelper;
|
||||
serverNotifications = serverNotifications.default || serverNotifications;
|
||||
|
||||
function showViewSettings(instance) {
|
||||
require(['guide-settings-dialog'], function (guideSettingsDialog) {
|
||||
|
|
|
|||
|
|
@ -1,130 +1,130 @@
|
|||
define(['playbackManager', 'serverNotifications', 'events'], function (playbackManager, serverNotifications, events) {
|
||||
'use strict';
|
||||
import playbackManager from 'playbackManager';
|
||||
import serverNotifications from 'serverNotifications';
|
||||
import events from 'events';
|
||||
|
||||
playbackManager = playbackManager.default || playbackManager;
|
||||
function onUserDataChanged(e, apiClient, userData) {
|
||||
const instance = this;
|
||||
|
||||
function onUserDataChanged(e, apiClient, userData) {
|
||||
var instance = this;
|
||||
|
||||
var eventsToMonitor = getEventsToMonitor(instance);
|
||||
|
||||
// TODO: Check user data change reason?
|
||||
if (eventsToMonitor.indexOf('markfavorite') !== -1) {
|
||||
instance.notifyRefreshNeeded();
|
||||
} else if (eventsToMonitor.indexOf('markplayed') !== -1) {
|
||||
instance.notifyRefreshNeeded();
|
||||
}
|
||||
}
|
||||
|
||||
function getEventsToMonitor(instance) {
|
||||
var options = instance.options;
|
||||
var monitor = options ? options.monitorEvents : null;
|
||||
if (monitor) {
|
||||
return monitor.split(',');
|
||||
}
|
||||
|
||||
return [];
|
||||
}
|
||||
|
||||
function onTimerCreated(e, apiClient, data) {
|
||||
var instance = this;
|
||||
|
||||
if (getEventsToMonitor(instance).indexOf('timers') !== -1) {
|
||||
instance.notifyRefreshNeeded();
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
function onSeriesTimerCreated(e, apiClient, data) {
|
||||
var instance = this;
|
||||
if (getEventsToMonitor(instance).indexOf('seriestimers') !== -1) {
|
||||
instance.notifyRefreshNeeded();
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
function onTimerCancelled(e, apiClient, data) {
|
||||
var instance = this;
|
||||
|
||||
if (getEventsToMonitor(instance).indexOf('timers') !== -1) {
|
||||
instance.notifyRefreshNeeded();
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
function onSeriesTimerCancelled(e, apiClient, data) {
|
||||
var instance = this;
|
||||
if (getEventsToMonitor(instance).indexOf('seriestimers') !== -1) {
|
||||
instance.notifyRefreshNeeded();
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
function onLibraryChanged(e, apiClient, data) {
|
||||
var instance = this;
|
||||
var eventsToMonitor = getEventsToMonitor(instance);
|
||||
if (eventsToMonitor.indexOf('seriestimers') !== -1 || eventsToMonitor.indexOf('timers') !== -1) {
|
||||
// yes this is an assumption
|
||||
return;
|
||||
}
|
||||
|
||||
var itemsAdded = data.ItemsAdded || [];
|
||||
var itemsRemoved = data.ItemsRemoved || [];
|
||||
if (!itemsAdded.length && !itemsRemoved.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
var options = instance.options || {};
|
||||
var parentId = options.parentId;
|
||||
if (parentId) {
|
||||
var foldersAddedTo = data.FoldersAddedTo || [];
|
||||
var foldersRemovedFrom = data.FoldersRemovedFrom || [];
|
||||
var collectionFolders = data.CollectionFolders || [];
|
||||
|
||||
if (foldersAddedTo.indexOf(parentId) === -1 && foldersRemovedFrom.indexOf(parentId) === -1 && collectionFolders.indexOf(parentId) === -1) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
const eventsToMonitor = getEventsToMonitor(instance);
|
||||
|
||||
// TODO: Check user data change reason?
|
||||
if (eventsToMonitor.indexOf('markfavorite') !== -1) {
|
||||
instance.notifyRefreshNeeded();
|
||||
} else if (eventsToMonitor.indexOf('markplayed') !== -1) {
|
||||
instance.notifyRefreshNeeded();
|
||||
}
|
||||
}
|
||||
|
||||
function onPlaybackStopped(e, stopInfo) {
|
||||
var instance = this;
|
||||
function getEventsToMonitor(instance) {
|
||||
const options = instance.options;
|
||||
const monitor = options ? options.monitorEvents : null;
|
||||
if (monitor) {
|
||||
return monitor.split(',');
|
||||
}
|
||||
|
||||
var state = stopInfo.state;
|
||||
return [];
|
||||
}
|
||||
|
||||
var eventsToMonitor = getEventsToMonitor(instance);
|
||||
if (state.NowPlayingItem && state.NowPlayingItem.MediaType === 'Video') {
|
||||
if (eventsToMonitor.indexOf('videoplayback') !== -1) {
|
||||
instance.notifyRefreshNeeded(true);
|
||||
return;
|
||||
}
|
||||
} else if (state.NowPlayingItem && state.NowPlayingItem.MediaType === 'Audio') {
|
||||
if (eventsToMonitor.indexOf('audioplayback') !== -1) {
|
||||
instance.notifyRefreshNeeded(true);
|
||||
return;
|
||||
}
|
||||
function onTimerCreated(e, apiClient, data) {
|
||||
const instance = this;
|
||||
|
||||
if (getEventsToMonitor(instance).indexOf('timers') !== -1) {
|
||||
instance.notifyRefreshNeeded();
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
function onSeriesTimerCreated(e, apiClient, data) {
|
||||
const instance = this;
|
||||
if (getEventsToMonitor(instance).indexOf('seriestimers') !== -1) {
|
||||
instance.notifyRefreshNeeded();
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
function onTimerCancelled(e, apiClient, data) {
|
||||
const instance = this;
|
||||
|
||||
if (getEventsToMonitor(instance).indexOf('timers') !== -1) {
|
||||
instance.notifyRefreshNeeded();
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
function onSeriesTimerCancelled(e, apiClient, data) {
|
||||
const instance = this;
|
||||
if (getEventsToMonitor(instance).indexOf('seriestimers') !== -1) {
|
||||
instance.notifyRefreshNeeded();
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
function onLibraryChanged(e, apiClient, data) {
|
||||
const instance = this;
|
||||
const eventsToMonitor = getEventsToMonitor(instance);
|
||||
if (eventsToMonitor.indexOf('seriestimers') !== -1 || eventsToMonitor.indexOf('timers') !== -1) {
|
||||
// yes this is an assumption
|
||||
return;
|
||||
}
|
||||
|
||||
const itemsAdded = data.ItemsAdded || [];
|
||||
const itemsRemoved = data.ItemsRemoved || [];
|
||||
if (!itemsAdded.length && !itemsRemoved.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
const options = instance.options || {};
|
||||
const parentId = options.parentId;
|
||||
if (parentId) {
|
||||
const foldersAddedTo = data.FoldersAddedTo || [];
|
||||
const foldersRemovedFrom = data.FoldersRemovedFrom || [];
|
||||
const collectionFolders = data.CollectionFolders || [];
|
||||
|
||||
if (foldersAddedTo.indexOf(parentId) === -1 && foldersRemovedFrom.indexOf(parentId) === -1 && collectionFolders.indexOf(parentId) === -1) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
function addNotificationEvent(instance, name, handler, owner) {
|
||||
var localHandler = handler.bind(instance);
|
||||
instance.notifyRefreshNeeded();
|
||||
}
|
||||
|
||||
function onPlaybackStopped(e, stopInfo) {
|
||||
const instance = this;
|
||||
|
||||
const state = stopInfo.state;
|
||||
|
||||
const eventsToMonitor = getEventsToMonitor(instance);
|
||||
if (state.NowPlayingItem && state.NowPlayingItem.MediaType === 'Video') {
|
||||
if (eventsToMonitor.indexOf('videoplayback') !== -1) {
|
||||
instance.notifyRefreshNeeded(true);
|
||||
return;
|
||||
}
|
||||
} else if (state.NowPlayingItem && state.NowPlayingItem.MediaType === 'Audio') {
|
||||
if (eventsToMonitor.indexOf('audioplayback') !== -1) {
|
||||
instance.notifyRefreshNeeded(true);
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function addNotificationEvent(instance, name, handler, owner) {
|
||||
const localHandler = handler.bind(instance);
|
||||
owner = owner || serverNotifications;
|
||||
events.on(owner, name, localHandler);
|
||||
instance['event_' + name] = localHandler;
|
||||
}
|
||||
|
||||
function removeNotificationEvent(instance, name, owner) {
|
||||
const handler = instance['event_' + name];
|
||||
if (handler) {
|
||||
owner = owner || serverNotifications;
|
||||
events.on(owner, name, localHandler);
|
||||
instance['event_' + name] = localHandler;
|
||||
events.off(owner, name, handler);
|
||||
instance['event_' + name] = null;
|
||||
}
|
||||
}
|
||||
|
||||
function removeNotificationEvent(instance, name, owner) {
|
||||
var handler = instance['event_' + name];
|
||||
if (handler) {
|
||||
owner = owner || serverNotifications;
|
||||
events.off(owner, name, handler);
|
||||
instance['event_' + name] = null;
|
||||
}
|
||||
}
|
||||
|
||||
function ItemsRefresher(options) {
|
||||
class ItemsRefresher {
|
||||
constructor(options) {
|
||||
this.options = options || {};
|
||||
|
||||
addNotificationEvent(this, 'UserDataChanged', onUserDataChanged);
|
||||
|
|
@ -136,18 +136,18 @@ define(['playbackManager', 'serverNotifications', 'events'], function (playbackM
|
|||
addNotificationEvent(this, 'playbackstop', onPlaybackStopped, playbackManager);
|
||||
}
|
||||
|
||||
ItemsRefresher.prototype.pause = function () {
|
||||
pause() {
|
||||
clearRefreshInterval(this, true);
|
||||
|
||||
this.paused = true;
|
||||
};
|
||||
}
|
||||
|
||||
ItemsRefresher.prototype.resume = function (options) {
|
||||
resume(options) {
|
||||
this.paused = false;
|
||||
|
||||
var refreshIntervalEndTime = this.refreshIntervalEndTime;
|
||||
const refreshIntervalEndTime = this.refreshIntervalEndTime;
|
||||
if (refreshIntervalEndTime) {
|
||||
var remainingMs = refreshIntervalEndTime - new Date().getTime();
|
||||
const remainingMs = refreshIntervalEndTime - new Date().getTime();
|
||||
if (remainingMs > 0 && !this.needsRefresh) {
|
||||
resetRefreshInterval(this, remainingMs);
|
||||
} else {
|
||||
|
|
@ -161,9 +161,9 @@ define(['playbackManager', 'serverNotifications', 'events'], function (playbackM
|
|||
}
|
||||
|
||||
return Promise.resolve();
|
||||
};
|
||||
}
|
||||
|
||||
ItemsRefresher.prototype.refreshItems = function () {
|
||||
refreshItems() {
|
||||
if (!this.fetchData) {
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
|
@ -176,15 +176,15 @@ define(['playbackManager', 'serverNotifications', 'events'], function (playbackM
|
|||
this.needsRefresh = false;
|
||||
|
||||
return this.fetchData().then(onDataFetched.bind(this));
|
||||
};
|
||||
}
|
||||
|
||||
ItemsRefresher.prototype.notifyRefreshNeeded = function (isInForeground) {
|
||||
notifyRefreshNeeded(isInForeground) {
|
||||
if (this.paused) {
|
||||
this.needsRefresh = true;
|
||||
return;
|
||||
}
|
||||
|
||||
var timeout = this.refreshTimeout;
|
||||
const timeout = this.refreshTimeout;
|
||||
if (timeout) {
|
||||
clearTimeout(timeout);
|
||||
}
|
||||
|
|
@ -194,44 +194,9 @@ define(['playbackManager', 'serverNotifications', 'events'], function (playbackM
|
|||
} else {
|
||||
this.refreshTimeout = setTimeout(this.refreshItems.bind(this), 10000);
|
||||
}
|
||||
};
|
||||
|
||||
function clearRefreshInterval(instance, isPausing) {
|
||||
if (instance.refreshInterval) {
|
||||
clearInterval(instance.refreshInterval);
|
||||
instance.refreshInterval = null;
|
||||
|
||||
if (!isPausing) {
|
||||
instance.refreshIntervalEndTime = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function resetRefreshInterval(instance, intervalMs) {
|
||||
clearRefreshInterval(instance);
|
||||
|
||||
if (!intervalMs) {
|
||||
var options = instance.options;
|
||||
if (options) {
|
||||
intervalMs = options.refreshIntervalMs;
|
||||
}
|
||||
}
|
||||
|
||||
if (intervalMs) {
|
||||
instance.refreshInterval = setInterval(instance.notifyRefreshNeeded.bind(instance), intervalMs);
|
||||
instance.refreshIntervalEndTime = new Date().getTime() + intervalMs;
|
||||
}
|
||||
}
|
||||
|
||||
function onDataFetched(result) {
|
||||
resetRefreshInterval(this);
|
||||
|
||||
if (this.afterRefresh) {
|
||||
this.afterRefresh(result);
|
||||
}
|
||||
}
|
||||
|
||||
ItemsRefresher.prototype.destroy = function () {
|
||||
destroy() {
|
||||
clearRefreshInterval(this);
|
||||
|
||||
removeNotificationEvent(this, 'UserDataChanged');
|
||||
|
|
@ -244,7 +209,42 @@ define(['playbackManager', 'serverNotifications', 'events'], function (playbackM
|
|||
|
||||
this.fetchData = null;
|
||||
this.options = null;
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
return ItemsRefresher;
|
||||
});
|
||||
function clearRefreshInterval(instance, isPausing) {
|
||||
if (instance.refreshInterval) {
|
||||
clearInterval(instance.refreshInterval);
|
||||
instance.refreshInterval = null;
|
||||
|
||||
if (!isPausing) {
|
||||
instance.refreshIntervalEndTime = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function resetRefreshInterval(instance, intervalMs) {
|
||||
clearRefreshInterval(instance);
|
||||
|
||||
if (!intervalMs) {
|
||||
const options = instance.options;
|
||||
if (options) {
|
||||
intervalMs = options.refreshIntervalMs;
|
||||
}
|
||||
}
|
||||
|
||||
if (intervalMs) {
|
||||
instance.refreshInterval = setInterval(instance.notifyRefreshNeeded.bind(instance), intervalMs);
|
||||
instance.refreshIntervalEndTime = new Date().getTime() + intervalMs;
|
||||
}
|
||||
}
|
||||
|
||||
function onDataFetched(result) {
|
||||
resetRefreshInterval(this);
|
||||
|
||||
if (this.afterRefresh) {
|
||||
this.afterRefresh(result);
|
||||
}
|
||||
}
|
||||
|
||||
export default ItemsRefresher;
|
||||
|
|
|
|||
|
|
@ -1,23 +1,19 @@
|
|||
define(['browser', 'appSettings', 'events'], function (browser, appSettings, events) {
|
||||
'use strict';
|
||||
import browser from 'browser';
|
||||
import appSettings from 'appSettings';
|
||||
import events from 'events';
|
||||
|
||||
browser = browser.default || browser;
|
||||
|
||||
function setLayout(instance, layout, selectedLayout) {
|
||||
if (layout === selectedLayout) {
|
||||
instance[layout] = true;
|
||||
document.documentElement.classList.add('layout-' + layout);
|
||||
} else {
|
||||
instance[layout] = false;
|
||||
document.documentElement.classList.remove('layout-' + layout);
|
||||
}
|
||||
function setLayout(instance, layout, selectedLayout) {
|
||||
if (layout === selectedLayout) {
|
||||
instance[layout] = true;
|
||||
document.documentElement.classList.add('layout-' + layout);
|
||||
} else {
|
||||
instance[layout] = false;
|
||||
document.documentElement.classList.remove('layout-' + layout);
|
||||
}
|
||||
}
|
||||
|
||||
function LayoutManager() {
|
||||
|
||||
}
|
||||
|
||||
LayoutManager.prototype.setLayout = function (layout, save) {
|
||||
class LayoutManager {
|
||||
setLayout(layout, save) {
|
||||
if (!layout || layout === 'auto') {
|
||||
this.autoLayout();
|
||||
|
||||
|
|
@ -35,13 +31,13 @@ define(['browser', 'appSettings', 'events'], function (browser, appSettings, eve
|
|||
}
|
||||
|
||||
events.trigger(this, 'modechange');
|
||||
};
|
||||
}
|
||||
|
||||
LayoutManager.prototype.getSavedLayout = function (layout) {
|
||||
getSavedLayout(layout) {
|
||||
return appSettings.get('layout');
|
||||
};
|
||||
}
|
||||
|
||||
LayoutManager.prototype.autoLayout = function () {
|
||||
autoLayout() {
|
||||
// Take a guess at initial layout. The consuming app can override
|
||||
if (browser.mobile) {
|
||||
this.setLayout('mobile', false);
|
||||
|
|
@ -50,16 +46,16 @@ define(['browser', 'appSettings', 'events'], function (browser, appSettings, eve
|
|||
} else {
|
||||
this.setLayout(this.defaultLayout || 'tv', false);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
LayoutManager.prototype.init = function () {
|
||||
var saved = this.getSavedLayout();
|
||||
init() {
|
||||
const saved = this.getSavedLayout();
|
||||
if (saved) {
|
||||
this.setLayout(saved, false);
|
||||
} else {
|
||||
this.autoLayout();
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
return new LayoutManager();
|
||||
});
|
||||
export default new LayoutManager();
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ define(['serverNotifications', 'playbackManager', 'events', 'globalize', 'requir
|
|||
'use strict';
|
||||
|
||||
playbackManager = playbackManager.default || playbackManager;
|
||||
serverNotifications = serverNotifications.default || serverNotifications;
|
||||
|
||||
function onOneDocumentClick() {
|
||||
document.removeEventListener('click', onOneDocumentClick);
|
||||
|
|
|
|||
|
|
@ -210,7 +210,7 @@ import 'emby-button';
|
|||
}
|
||||
|
||||
function centerFocus(elem, horiz, on) {
|
||||
import('scrollHelper').then(scrollHelper => {
|
||||
import('scrollHelper').then((scrollHelper) => {
|
||||
const fn = on ? 'on' : 'off';
|
||||
scrollHelper.centerFocus[fn](elem, horiz);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,7 +1,9 @@
|
|||
define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'connectionManager', 'require', 'loading', 'scrollHelper', 'imageLoader', 'scrollStyles', 'emby-button', 'emby-collapse', 'emby-input', 'paper-icon-button-light', 'css!./../formdialog', 'css!./recordingcreator', 'material-icons', 'flexStyles'], function (dialogHelper, globalize, layoutManager, mediaInfo, appHost, connectionManager, require, loading, scrollHelper, imageLoader) {
|
||||
'use strict';
|
||||
|
||||
scrollHelper = scrollHelper.default || scrollHelper;
|
||||
loading = loading.default || loading;
|
||||
layoutManager = layoutManager.default || layoutManager;
|
||||
|
||||
var currentDialog;
|
||||
var recordingDeleted = false;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
define(['globalize', 'connectionManager', 'serverNotifications', 'require', 'loading', 'apphost', 'dom', 'recordingHelper', 'events', 'paper-icon-button-light', 'emby-button', 'css!./recordingfields', 'flexStyles'], function (globalize, connectionManager, serverNotifications, require, loading, appHost, dom, recordingHelper, events) {
|
||||
'use strict';
|
||||
|
||||
serverNotifications = serverNotifications.default || serverNotifications;
|
||||
recordingHelper = recordingHelper.default || recordingHelper;
|
||||
loading = loading.default || loading;
|
||||
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
|
|
@ -1,48 +1,51 @@
|
|||
define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'layoutManager', 'connectionManager', 'globalize', 'userSettings', 'emby-select', 'paper-icon-button-light', 'material-icons', 'css!./../formdialog', 'emby-button', 'flexStyles'], function (require, dom, focusManager, dialogHelper, loading, layoutManager, connectionManager, globalize, userSettings) {
|
||||
'use strict';
|
||||
import dialogHelper from 'dialogHelper';
|
||||
import layoutManager from 'layoutManager';
|
||||
import globalize from 'globalize';
|
||||
import * as userSettings from 'userSettings';
|
||||
import 'emby-select';
|
||||
import 'paper-icon-button-light';
|
||||
import 'material-icons';
|
||||
import 'css!./../formdialog';
|
||||
import 'emby-button';
|
||||
import 'flexStyles';
|
||||
|
||||
focusManager = focusManager.default || focusManager;
|
||||
function onSubmit(e) {
|
||||
e.preventDefault();
|
||||
return false;
|
||||
}
|
||||
|
||||
function onSubmit(e) {
|
||||
e.preventDefault();
|
||||
return false;
|
||||
}
|
||||
function initEditor(context, settings) {
|
||||
context.querySelector('form').addEventListener('submit', onSubmit);
|
||||
|
||||
function initEditor(context, settings) {
|
||||
context.querySelector('form').addEventListener('submit', onSubmit);
|
||||
context.querySelector('.selectSortOrder').value = settings.sortOrder;
|
||||
context.querySelector('.selectSortBy').value = settings.sortBy;
|
||||
}
|
||||
|
||||
context.querySelector('.selectSortOrder').value = settings.sortOrder;
|
||||
context.querySelector('.selectSortBy').value = settings.sortBy;
|
||||
}
|
||||
function centerFocus(elem, horiz, on) {
|
||||
import('scrollHelper').then(({default: scrollHelper}) => {
|
||||
const fn = on ? 'on' : 'off';
|
||||
scrollHelper.centerFocus[fn](elem, horiz);
|
||||
});
|
||||
}
|
||||
|
||||
function centerFocus(elem, horiz, on) {
|
||||
require(['scrollHelper'], function (scrollHelper) {
|
||||
var fn = on ? 'on' : 'off';
|
||||
scrollHelper.centerFocus[fn](elem, horiz);
|
||||
});
|
||||
}
|
||||
function fillSortBy(context, options) {
|
||||
const selectSortBy = context.querySelector('.selectSortBy');
|
||||
|
||||
function fillSortBy(context, options) {
|
||||
var selectSortBy = context.querySelector('.selectSortBy');
|
||||
selectSortBy.innerHTML = options.map(function (o) {
|
||||
return '<option value="' + o.value + '">' + o.name + '</option>';
|
||||
}).join('');
|
||||
}
|
||||
|
||||
selectSortBy.innerHTML = options.map(function (o) {
|
||||
return '<option value="' + o.value + '">' + o.name + '</option>';
|
||||
}).join('');
|
||||
}
|
||||
function saveValues(context, settingsKey) {
|
||||
userSettings.setFilter(settingsKey + '-sortorder', context.querySelector('.selectSortOrder').value);
|
||||
userSettings.setFilter(settingsKey + '-sortby', context.querySelector('.selectSortBy').value);
|
||||
}
|
||||
|
||||
function saveValues(context, settings, settingsKey) {
|
||||
userSettings.setFilter(settingsKey + '-sortorder', context.querySelector('.selectSortOrder').value);
|
||||
userSettings.setFilter(settingsKey + '-sortby', context.querySelector('.selectSortBy').value);
|
||||
}
|
||||
|
||||
function SortMenu() {
|
||||
|
||||
}
|
||||
|
||||
SortMenu.prototype.show = function (options) {
|
||||
class SortMenu {
|
||||
show(options) {
|
||||
return new Promise(function (resolve, reject) {
|
||||
require(['text!./sortmenu.template.html'], function (template) {
|
||||
var dialogOptions = {
|
||||
import('text!./sortmenu.template.html').then(({default: template}) => {
|
||||
const dialogOptions = {
|
||||
removeOnClose: true,
|
||||
scrollY: false
|
||||
};
|
||||
|
|
@ -53,11 +56,11 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'layoutMana
|
|||
dialogOptions.size = 'small';
|
||||
}
|
||||
|
||||
var dlg = dialogHelper.createDialog(dialogOptions);
|
||||
const dlg = dialogHelper.createDialog(dialogOptions);
|
||||
|
||||
dlg.classList.add('formDialog');
|
||||
|
||||
var html = '';
|
||||
let html = '';
|
||||
|
||||
html += '<div class="formDialogHeader">';
|
||||
html += '<button is="paper-icon-button-light" class="btnCancel hide-mouse-idle-tv" tabindex="-1"><span class="material-icons arrow_back"></span></button>';
|
||||
|
|
@ -80,7 +83,7 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'layoutMana
|
|||
centerFocus(dlg.querySelector('.formDialogContent'), false, true);
|
||||
}
|
||||
|
||||
var submitted;
|
||||
let submitted;
|
||||
|
||||
dlg.querySelector('form').addEventListener('change', function () {
|
||||
submitted = true;
|
||||
|
|
@ -92,7 +95,7 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'layoutMana
|
|||
}
|
||||
|
||||
if (submitted) {
|
||||
saveValues(dlg, options.settings, options.settingsKey);
|
||||
saveValues(dlg, options.settingsKey);
|
||||
resolve();
|
||||
return;
|
||||
}
|
||||
|
|
@ -101,7 +104,7 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'layoutMana
|
|||
});
|
||||
});
|
||||
});
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
return SortMenu;
|
||||
});
|
||||
export default SortMenu;
|
||||
|
|
|
|||
|
|
@ -1,427 +1,437 @@
|
|||
define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings', 'connectionManager', 'loading', 'focusManager', 'dom', 'apphost', 'emby-select', 'listViewStyle', 'paper-icon-button-light', 'css!./../formdialog', 'material-icons', 'css!./subtitleeditor', 'emby-button', 'flexStyles'], function (dialogHelper, require, layoutManager, globalize, userSettings, connectionManager, loading, focusManager, dom, appHost) {
|
||||
'use strict';
|
||||
import dialogHelper from 'dialogHelper';
|
||||
import layoutManager from 'layoutManager';
|
||||
import globalize from 'globalize';
|
||||
import * as userSettings from 'userSettings';
|
||||
import connectionManager from 'connectionManager';
|
||||
import loading from 'loading';
|
||||
import focusManager from 'focusManager';
|
||||
import dom from 'dom';
|
||||
import 'emby-select';
|
||||
import 'listViewStyle';
|
||||
import 'paper-icon-button-light';
|
||||
import 'css!./../formdialog';
|
||||
import 'material-icons';
|
||||
import 'css!./subtitleeditor';
|
||||
import 'emby-button';
|
||||
import 'flexStyles';
|
||||
|
||||
loading = loading.default || loading;
|
||||
focusManager = focusManager.default || focusManager;
|
||||
let currentItem;
|
||||
let hasChanges;
|
||||
|
||||
var currentItem;
|
||||
var hasChanges;
|
||||
function downloadRemoteSubtitles(context, id) {
|
||||
let url = 'Items/' + currentItem.Id + '/RemoteSearch/Subtitles/' + id;
|
||||
|
||||
function downloadRemoteSubtitles(context, id) {
|
||||
var url = 'Items/' + currentItem.Id + '/RemoteSearch/Subtitles/' + id;
|
||||
let apiClient = connectionManager.getApiClient(currentItem.ServerId);
|
||||
apiClient.ajax({
|
||||
|
||||
var apiClient = connectionManager.getApiClient(currentItem.ServerId);
|
||||
apiClient.ajax({
|
||||
type: 'POST',
|
||||
url: apiClient.getUrl(url)
|
||||
|
||||
type: 'POST',
|
||||
url: apiClient.getUrl(url)
|
||||
}).then(function () {
|
||||
hasChanges = true;
|
||||
|
||||
import('toast').then(({default: toast}) => {
|
||||
toast(globalize.translate('MessageDownloadQueued'));
|
||||
});
|
||||
|
||||
focusManager.autoFocus(context);
|
||||
});
|
||||
}
|
||||
|
||||
function deleteLocalSubtitle(context, index) {
|
||||
let msg = globalize.translate('MessageAreYouSureDeleteSubtitles');
|
||||
|
||||
import('confirm').then(({default: confirm}) => {
|
||||
confirm({
|
||||
|
||||
title: globalize.translate('ConfirmDeletion'),
|
||||
text: msg,
|
||||
confirmText: globalize.translate('Delete'),
|
||||
primary: 'delete'
|
||||
|
||||
}).then(function () {
|
||||
hasChanges = true;
|
||||
loading.show();
|
||||
|
||||
require(['toast'], function (toast) {
|
||||
toast(globalize.translate('MessageDownloadQueued'));
|
||||
});
|
||||
let itemId = currentItem.Id;
|
||||
let url = 'Videos/' + itemId + '/Subtitles/' + index;
|
||||
|
||||
focusManager.autoFocus(context);
|
||||
});
|
||||
}
|
||||
let apiClient = connectionManager.getApiClient(currentItem.ServerId);
|
||||
|
||||
function deleteLocalSubtitle(context, index) {
|
||||
var msg = globalize.translate('MessageAreYouSureDeleteSubtitles');
|
||||
apiClient.ajax({
|
||||
|
||||
require(['confirm'], function (confirm) {
|
||||
confirm.default({
|
||||
|
||||
title: globalize.translate('ConfirmDeletion'),
|
||||
text: msg,
|
||||
confirmText: globalize.translate('Delete'),
|
||||
primary: 'delete'
|
||||
type: 'DELETE',
|
||||
url: apiClient.getUrl(url)
|
||||
|
||||
}).then(function () {
|
||||
loading.show();
|
||||
|
||||
var itemId = currentItem.Id;
|
||||
var url = 'Videos/' + itemId + '/Subtitles/' + index;
|
||||
|
||||
var apiClient = connectionManager.getApiClient(currentItem.ServerId);
|
||||
|
||||
apiClient.ajax({
|
||||
|
||||
type: 'DELETE',
|
||||
url: apiClient.getUrl(url)
|
||||
|
||||
}).then(function () {
|
||||
hasChanges = true;
|
||||
reload(context, apiClient, itemId);
|
||||
});
|
||||
hasChanges = true;
|
||||
reload(context, apiClient, itemId);
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function fillSubtitleList(context, item) {
|
||||
var streams = item.MediaStreams || [];
|
||||
function fillSubtitleList(context, item) {
|
||||
let streams = item.MediaStreams || [];
|
||||
|
||||
var subs = streams.filter(function (s) {
|
||||
return s.Type === 'Subtitle';
|
||||
});
|
||||
let subs = streams.filter(function (s) {
|
||||
return s.Type === 'Subtitle';
|
||||
});
|
||||
|
||||
var html = '';
|
||||
let html = '';
|
||||
|
||||
if (subs.length) {
|
||||
html += '<h2>' + globalize.translate('MySubtitles') + '</h2>';
|
||||
if (subs.length) {
|
||||
html += '<h2>' + globalize.translate('MySubtitles') + '</h2>';
|
||||
|
||||
html += '<div>';
|
||||
html += '<div>';
|
||||
|
||||
html += subs.map(function (s) {
|
||||
var itemHtml = '';
|
||||
html += subs.map(function (s) {
|
||||
let itemHtml = '';
|
||||
|
||||
var tagName = layoutManager.tv ? 'button' : 'div';
|
||||
var className = layoutManager.tv && s.Path ? 'listItem listItem-border btnDelete' : 'listItem listItem-border';
|
||||
let tagName = layoutManager.tv ? 'button' : 'div';
|
||||
let className = layoutManager.tv && s.Path ? 'listItem listItem-border btnDelete' : 'listItem listItem-border';
|
||||
|
||||
if (layoutManager.tv) {
|
||||
className += ' listItem-focusscale listItem-button';
|
||||
}
|
||||
|
||||
className += ' listItem-noborder';
|
||||
|
||||
itemHtml += '<' + tagName + ' class="' + className + '" data-index="' + s.Index + '">';
|
||||
|
||||
itemHtml += '<span class="listItemIcon material-icons closed_caption"></span>';
|
||||
|
||||
itemHtml += '<div class="listItemBody two-line">';
|
||||
|
||||
itemHtml += '<div>';
|
||||
itemHtml += s.DisplayTitle || '';
|
||||
itemHtml += '</div>';
|
||||
|
||||
if (s.Path) {
|
||||
itemHtml += '<div class="secondary listItemBodyText">' + (s.Path) + '</div>';
|
||||
}
|
||||
|
||||
itemHtml += '</a>';
|
||||
itemHtml += '</div>';
|
||||
|
||||
if (!layoutManager.tv) {
|
||||
if (s.Path) {
|
||||
itemHtml += '<button is="paper-icon-button-light" data-index="' + s.Index + '" title="' + globalize.translate('Delete') + '" class="btnDelete listItemButton"><span class="material-icons delete"></span></button>';
|
||||
}
|
||||
}
|
||||
|
||||
itemHtml += '</' + tagName + '>';
|
||||
|
||||
return itemHtml;
|
||||
}).join('');
|
||||
|
||||
html += '</div>';
|
||||
}
|
||||
|
||||
var elem = context.querySelector('.subtitleList');
|
||||
|
||||
if (subs.length) {
|
||||
elem.classList.remove('hide');
|
||||
} else {
|
||||
elem.classList.add('hide');
|
||||
}
|
||||
elem.innerHTML = html;
|
||||
}
|
||||
|
||||
function fillLanguages(context, apiClient, languages) {
|
||||
var selectLanguage = context.querySelector('#selectLanguage');
|
||||
|
||||
selectLanguage.innerHTML = languages.map(function (l) {
|
||||
return '<option value="' + l.ThreeLetterISOLanguageName + '">' + l.DisplayName + '</option>';
|
||||
});
|
||||
|
||||
var lastLanguage = userSettings.get('subtitleeditor-language');
|
||||
if (lastLanguage) {
|
||||
selectLanguage.value = lastLanguage;
|
||||
} else {
|
||||
apiClient.getCurrentUser().then(function (user) {
|
||||
var lang = user.Configuration.SubtitleLanguagePreference;
|
||||
|
||||
if (lang) {
|
||||
selectLanguage.value = lang;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function renderSearchResults(context, results) {
|
||||
var lastProvider = '';
|
||||
var html = '';
|
||||
|
||||
if (!results.length) {
|
||||
context.querySelector('.noSearchResults').classList.remove('hide');
|
||||
context.querySelector('.subtitleResults').innerHTML = '';
|
||||
loading.hide();
|
||||
return;
|
||||
}
|
||||
|
||||
context.querySelector('.noSearchResults').classList.add('hide');
|
||||
|
||||
for (var i = 0, length = results.length; i < length; i++) {
|
||||
var result = results[i];
|
||||
|
||||
var provider = result.ProviderName;
|
||||
|
||||
if (provider !== lastProvider) {
|
||||
if (i > 0) {
|
||||
html += '</div>';
|
||||
}
|
||||
html += '<h2>' + provider + '</h2>';
|
||||
html += '<div>';
|
||||
lastProvider = provider;
|
||||
}
|
||||
|
||||
var tagName = layoutManager.tv ? 'button' : 'div';
|
||||
var className = layoutManager.tv ? 'listItem listItem-border btnOptions' : 'listItem listItem-border';
|
||||
if (layoutManager.tv) {
|
||||
className += ' listItem-focusscale listItem-button';
|
||||
}
|
||||
|
||||
html += '<' + tagName + ' class="' + className + '" data-subid="' + result.Id + '">';
|
||||
className += ' listItem-noborder';
|
||||
|
||||
html += '<span class="listItemIcon material-icons closed_caption"></span>';
|
||||
itemHtml += '<' + tagName + ' class="' + className + '" data-index="' + s.Index + '">';
|
||||
|
||||
var bodyClass = result.Comment || result.IsHashMatch ? 'three-line' : 'two-line';
|
||||
itemHtml += '<span class="listItemIcon material-icons closed_caption"></span>';
|
||||
|
||||
html += '<div class="listItemBody ' + bodyClass + '">';
|
||||
itemHtml += '<div class="listItemBody two-line">';
|
||||
|
||||
html += '<div>' + (result.Name) + '</div>';
|
||||
html += '<div class="secondary listItemBodyText">';
|
||||
itemHtml += '<div>';
|
||||
itemHtml += s.DisplayTitle || '';
|
||||
itemHtml += '</div>';
|
||||
|
||||
if (result.Format) {
|
||||
html += '<span style="margin-right:1em;">' + globalize.translate('FormatValue', result.Format) + '</span>';
|
||||
if (s.Path) {
|
||||
itemHtml += '<div class="secondary listItemBodyText">' + (s.Path) + '</div>';
|
||||
}
|
||||
|
||||
if (result.DownloadCount != null) {
|
||||
html += '<span>' + globalize.translate('DownloadsValue', result.DownloadCount) + '</span>';
|
||||
}
|
||||
html += '</div>';
|
||||
|
||||
if (result.Comment) {
|
||||
html += '<div class="secondary listItemBodyText">' + (result.Comment) + '</div>';
|
||||
}
|
||||
|
||||
if (result.IsHashMatch) {
|
||||
html += '<div class="secondary listItemBodyText"><div class="inline-flex align-items-center justify-content-center" style="background:#3388cc;color:#fff;padding: .3em 1em;border-radius:1000em;">' + globalize.translate('PerfectMatch') + '</div></div>';
|
||||
}
|
||||
|
||||
html += '</div>';
|
||||
itemHtml += '</a>';
|
||||
itemHtml += '</div>';
|
||||
|
||||
if (!layoutManager.tv) {
|
||||
html += '<button type="button" is="paper-icon-button-light" data-subid="' + result.Id + '" class="btnDownload listItemButton"><span class="material-icons file_download"></span></button>';
|
||||
if (s.Path) {
|
||||
itemHtml += '<button is="paper-icon-button-light" data-index="' + s.Index + '" title="' + globalize.translate('Delete') + '" class="btnDelete listItemButton"><span class="material-icons delete"></span></button>';
|
||||
}
|
||||
}
|
||||
|
||||
html += '</' + tagName + '>';
|
||||
itemHtml += '</' + tagName + '>';
|
||||
|
||||
return itemHtml;
|
||||
}).join('');
|
||||
|
||||
html += '</div>';
|
||||
}
|
||||
|
||||
let elem = context.querySelector('.subtitleList');
|
||||
|
||||
if (subs.length) {
|
||||
elem.classList.remove('hide');
|
||||
} else {
|
||||
elem.classList.add('hide');
|
||||
}
|
||||
elem.innerHTML = html;
|
||||
}
|
||||
|
||||
function fillLanguages(context, apiClient, languages) {
|
||||
let selectLanguage = context.querySelector('#selectLanguage');
|
||||
|
||||
selectLanguage.innerHTML = languages.map(function (l) {
|
||||
return '<option value="' + l.ThreeLetterISOLanguageName + '">' + l.DisplayName + '</option>';
|
||||
});
|
||||
|
||||
let lastLanguage = userSettings.get('subtitleeditor-language');
|
||||
if (lastLanguage) {
|
||||
selectLanguage.value = lastLanguage;
|
||||
} else {
|
||||
apiClient.getCurrentUser().then(function (user) {
|
||||
let lang = user.Configuration.SubtitleLanguagePreference;
|
||||
|
||||
if (lang) {
|
||||
selectLanguage.value = lang;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function renderSearchResults(context, results) {
|
||||
let lastProvider = '';
|
||||
let html = '';
|
||||
|
||||
if (!results.length) {
|
||||
context.querySelector('.noSearchResults').classList.remove('hide');
|
||||
context.querySelector('.subtitleResults').innerHTML = '';
|
||||
loading.hide();
|
||||
return;
|
||||
}
|
||||
|
||||
context.querySelector('.noSearchResults').classList.add('hide');
|
||||
|
||||
for (let i = 0, length = results.length; i < length; i++) {
|
||||
let result = results[i];
|
||||
|
||||
let provider = result.ProviderName;
|
||||
|
||||
if (provider !== lastProvider) {
|
||||
if (i > 0) {
|
||||
html += '</div>';
|
||||
}
|
||||
html += '<h2>' + provider + '</h2>';
|
||||
html += '<div>';
|
||||
lastProvider = provider;
|
||||
}
|
||||
|
||||
if (results.length) {
|
||||
html += '</div>';
|
||||
let tagName = layoutManager.tv ? 'button' : 'div';
|
||||
let className = layoutManager.tv ? 'listItem listItem-border btnOptions' : 'listItem listItem-border';
|
||||
if (layoutManager.tv) {
|
||||
className += ' listItem-focusscale listItem-button';
|
||||
}
|
||||
|
||||
var elem = context.querySelector('.subtitleResults');
|
||||
elem.innerHTML = html;
|
||||
html += '<' + tagName + ' class="' + className + '" data-subid="' + result.Id + '">';
|
||||
|
||||
html += '<span class="listItemIcon material-icons closed_caption"></span>';
|
||||
|
||||
let bodyClass = result.Comment || result.IsHashMatch ? 'three-line' : 'two-line';
|
||||
|
||||
html += '<div class="listItemBody ' + bodyClass + '">';
|
||||
|
||||
html += '<div>' + (result.Name) + '</div>';
|
||||
html += '<div class="secondary listItemBodyText">';
|
||||
|
||||
if (result.Format) {
|
||||
html += '<span style="margin-right:1em;">' + globalize.translate('FormatValue', result.Format) + '</span>';
|
||||
}
|
||||
|
||||
if (result.DownloadCount != null) {
|
||||
html += '<span>' + globalize.translate('DownloadsValue', result.DownloadCount) + '</span>';
|
||||
}
|
||||
html += '</div>';
|
||||
|
||||
if (result.Comment) {
|
||||
html += '<div class="secondary listItemBodyText">' + (result.Comment) + '</div>';
|
||||
}
|
||||
|
||||
if (result.IsHashMatch) {
|
||||
html += '<div class="secondary listItemBodyText"><div class="inline-flex align-items-center justify-content-center" style="background:#3388cc;color:#fff;padding: .3em 1em;border-radius:1000em;">' + globalize.translate('PerfectMatch') + '</div></div>';
|
||||
}
|
||||
|
||||
html += '</div>';
|
||||
|
||||
if (!layoutManager.tv) {
|
||||
html += '<button type="button" is="paper-icon-button-light" data-subid="' + result.Id + '" class="btnDownload listItemButton"><span class="material-icons file_download"></span></button>';
|
||||
}
|
||||
|
||||
html += '</' + tagName + '>';
|
||||
}
|
||||
|
||||
if (results.length) {
|
||||
html += '</div>';
|
||||
}
|
||||
|
||||
let elem = context.querySelector('.subtitleResults');
|
||||
elem.innerHTML = html;
|
||||
|
||||
loading.hide();
|
||||
}
|
||||
|
||||
function searchForSubtitles(context, language) {
|
||||
userSettings.set('subtitleeditor-language', language);
|
||||
|
||||
loading.show();
|
||||
|
||||
let apiClient = connectionManager.getApiClient(currentItem.ServerId);
|
||||
let url = apiClient.getUrl('Items/' + currentItem.Id + '/RemoteSearch/Subtitles/' + language);
|
||||
|
||||
apiClient.getJSON(url).then(function (results) {
|
||||
renderSearchResults(context, results);
|
||||
});
|
||||
}
|
||||
|
||||
function reload(context, apiClient, itemId) {
|
||||
context.querySelector('.noSearchResults').classList.add('hide');
|
||||
|
||||
function onGetItem(item) {
|
||||
currentItem = item;
|
||||
|
||||
fillSubtitleList(context, item);
|
||||
let file = item.Path || '';
|
||||
let index = Math.max(file.lastIndexOf('/'), file.lastIndexOf('\\'));
|
||||
if (index > -1) {
|
||||
file = file.substring(index + 1);
|
||||
}
|
||||
|
||||
if (file) {
|
||||
context.querySelector('.pathValue').innerHTML = file;
|
||||
context.querySelector('.originalFile').classList.remove('hide');
|
||||
} else {
|
||||
context.querySelector('.pathValue').innerHTML = '';
|
||||
context.querySelector('.originalFile').classList.add('hide');
|
||||
}
|
||||
|
||||
loading.hide();
|
||||
}
|
||||
|
||||
function searchForSubtitles(context, language) {
|
||||
userSettings.set('subtitleeditor-language', language);
|
||||
if (typeof itemId === 'string') {
|
||||
apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(onGetItem);
|
||||
} else {
|
||||
onGetItem(itemId);
|
||||
}
|
||||
}
|
||||
|
||||
loading.show();
|
||||
function onSearchSubmit(e) {
|
||||
let form = this;
|
||||
|
||||
var apiClient = connectionManager.getApiClient(currentItem.ServerId);
|
||||
var url = apiClient.getUrl('Items/' + currentItem.Id + '/RemoteSearch/Subtitles/' + language);
|
||||
let lang = form.querySelector('#selectLanguage', form).value;
|
||||
|
||||
apiClient.getJSON(url).then(function (results) {
|
||||
renderSearchResults(context, results);
|
||||
});
|
||||
searchForSubtitles(dom.parentWithClass(form, 'formDialogContent'), lang);
|
||||
|
||||
e.preventDefault();
|
||||
return false;
|
||||
}
|
||||
|
||||
function onSubtitleListClick(e) {
|
||||
let btnDelete = dom.parentWithClass(e.target, 'btnDelete');
|
||||
if (btnDelete) {
|
||||
let index = btnDelete.getAttribute('data-index');
|
||||
let context = dom.parentWithClass(btnDelete, 'subtitleEditorDialog');
|
||||
deleteLocalSubtitle(context, index);
|
||||
}
|
||||
}
|
||||
|
||||
function onSubtitleResultsClick(e) {
|
||||
let subtitleId;
|
||||
let context;
|
||||
|
||||
let btnOptions = dom.parentWithClass(e.target, 'btnOptions');
|
||||
if (btnOptions) {
|
||||
subtitleId = btnOptions.getAttribute('data-subid');
|
||||
context = dom.parentWithClass(btnOptions, 'subtitleEditorDialog');
|
||||
showDownloadOptions(btnOptions, context, subtitleId);
|
||||
}
|
||||
|
||||
function reload(context, apiClient, itemId) {
|
||||
context.querySelector('.noSearchResults').classList.add('hide');
|
||||
let btnDownload = dom.parentWithClass(e.target, 'btnDownload');
|
||||
if (btnDownload) {
|
||||
subtitleId = btnDownload.getAttribute('data-subid');
|
||||
context = dom.parentWithClass(btnDownload, 'subtitleEditorDialog');
|
||||
downloadRemoteSubtitles(context, subtitleId);
|
||||
}
|
||||
}
|
||||
|
||||
function onGetItem(item) {
|
||||
currentItem = item;
|
||||
function showDownloadOptions(button, context, subtitleId) {
|
||||
let items = [];
|
||||
|
||||
fillSubtitleList(context, item);
|
||||
var file = item.Path || '';
|
||||
var index = Math.max(file.lastIndexOf('/'), file.lastIndexOf('\\'));
|
||||
if (index > -1) {
|
||||
file = file.substring(index + 1);
|
||||
items.push({
|
||||
name: globalize.translate('Download'),
|
||||
id: 'download'
|
||||
});
|
||||
|
||||
import('actionsheet').then(({default: actionsheet}) => {
|
||||
actionsheet.show({
|
||||
items: items,
|
||||
positionTo: button
|
||||
|
||||
}).then(function (id) {
|
||||
switch (id) {
|
||||
case 'download':
|
||||
downloadRemoteSubtitles(context, subtitleId);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
if (file) {
|
||||
context.querySelector('.pathValue').innerHTML = file;
|
||||
context.querySelector('.originalFile').classList.remove('hide');
|
||||
} else {
|
||||
context.querySelector('.pathValue').innerHTML = '';
|
||||
context.querySelector('.originalFile').classList.add('hide');
|
||||
}
|
||||
function centerFocus(elem, horiz, on) {
|
||||
import('scrollHelper').then(({default: scrollHelper}) => {
|
||||
let fn = on ? 'on' : 'off';
|
||||
scrollHelper.centerFocus[fn](elem, horiz);
|
||||
});
|
||||
}
|
||||
|
||||
loading.hide();
|
||||
}
|
||||
function showEditorInternal(itemId, serverId, template) {
|
||||
hasChanges = false;
|
||||
|
||||
if (typeof itemId === 'string') {
|
||||
apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(onGetItem);
|
||||
let apiClient = connectionManager.getApiClient(serverId);
|
||||
return apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(function (item) {
|
||||
let dialogOptions = {
|
||||
removeOnClose: true,
|
||||
scrollY: false
|
||||
};
|
||||
|
||||
if (layoutManager.tv) {
|
||||
dialogOptions.size = 'fullscreen';
|
||||
} else {
|
||||
onGetItem(itemId);
|
||||
}
|
||||
}
|
||||
|
||||
function onSearchSubmit(e) {
|
||||
var form = this;
|
||||
|
||||
var lang = form.querySelector('#selectLanguage', form).value;
|
||||
|
||||
searchForSubtitles(dom.parentWithClass(form, 'formDialogContent'), lang);
|
||||
|
||||
e.preventDefault();
|
||||
return false;
|
||||
}
|
||||
|
||||
function onSubtitleListClick(e) {
|
||||
var btnDelete = dom.parentWithClass(e.target, 'btnDelete');
|
||||
if (btnDelete) {
|
||||
var index = btnDelete.getAttribute('data-index');
|
||||
var context = dom.parentWithClass(btnDelete, 'subtitleEditorDialog');
|
||||
deleteLocalSubtitle(context, index);
|
||||
}
|
||||
}
|
||||
|
||||
function onSubtitleResultsClick(e) {
|
||||
var subtitleId;
|
||||
var context;
|
||||
|
||||
var btnOptions = dom.parentWithClass(e.target, 'btnOptions');
|
||||
if (btnOptions) {
|
||||
subtitleId = btnOptions.getAttribute('data-subid');
|
||||
context = dom.parentWithClass(btnOptions, 'subtitleEditorDialog');
|
||||
showDownloadOptions(btnOptions, context, subtitleId);
|
||||
dialogOptions.size = 'small';
|
||||
}
|
||||
|
||||
var btnDownload = dom.parentWithClass(e.target, 'btnDownload');
|
||||
if (btnDownload) {
|
||||
subtitleId = btnDownload.getAttribute('data-subid');
|
||||
context = dom.parentWithClass(btnDownload, 'subtitleEditorDialog');
|
||||
downloadRemoteSubtitles(context, subtitleId);
|
||||
let dlg = dialogHelper.createDialog(dialogOptions);
|
||||
|
||||
dlg.classList.add('formDialog');
|
||||
dlg.classList.add('subtitleEditorDialog');
|
||||
|
||||
dlg.innerHTML = globalize.translateHtml(template, 'core');
|
||||
|
||||
dlg.querySelector('.originalSubtitleFileLabel').innerHTML = globalize.translate('File');
|
||||
|
||||
dlg.querySelector('.subtitleSearchForm').addEventListener('submit', onSearchSubmit);
|
||||
|
||||
let btnSubmit = dlg.querySelector('.btnSubmit');
|
||||
|
||||
if (layoutManager.tv) {
|
||||
centerFocus(dlg.querySelector('.formDialogContent'), false, true);
|
||||
dlg.querySelector('.btnSearchSubtitles').classList.add('hide');
|
||||
} else {
|
||||
btnSubmit.classList.add('hide');
|
||||
}
|
||||
}
|
||||
|
||||
function showDownloadOptions(button, context, subtitleId) {
|
||||
var items = [];
|
||||
let editorContent = dlg.querySelector('.formDialogContent');
|
||||
|
||||
items.push({
|
||||
name: globalize.translate('Download'),
|
||||
id: 'download'
|
||||
dlg.querySelector('.subtitleList').addEventListener('click', onSubtitleListClick);
|
||||
dlg.querySelector('.subtitleResults').addEventListener('click', onSubtitleResultsClick);
|
||||
|
||||
apiClient.getCultures().then(function (languages) {
|
||||
fillLanguages(editorContent, apiClient, languages);
|
||||
});
|
||||
|
||||
require(['actionsheet'], function (actionsheet) {
|
||||
actionsheet.show({
|
||||
items: items,
|
||||
positionTo: button
|
||||
|
||||
}).then(function (id) {
|
||||
switch (id) {
|
||||
case 'download':
|
||||
downloadRemoteSubtitles(context, subtitleId);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
});
|
||||
dlg.querySelector('.btnCancel').addEventListener('click', function () {
|
||||
dialogHelper.close(dlg);
|
||||
});
|
||||
}
|
||||
|
||||
function centerFocus(elem, horiz, on) {
|
||||
require(['scrollHelper'], function (scrollHelper) {
|
||||
var fn = on ? 'on' : 'off';
|
||||
scrollHelper.centerFocus[fn](elem, horiz);
|
||||
});
|
||||
}
|
||||
|
||||
function showEditorInternal(itemId, serverId, template) {
|
||||
hasChanges = false;
|
||||
|
||||
var apiClient = connectionManager.getApiClient(serverId);
|
||||
return apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(function (item) {
|
||||
var dialogOptions = {
|
||||
removeOnClose: true,
|
||||
scrollY: false
|
||||
};
|
||||
|
||||
if (layoutManager.tv) {
|
||||
dialogOptions.size = 'fullscreen';
|
||||
} else {
|
||||
dialogOptions.size = 'small';
|
||||
}
|
||||
|
||||
var dlg = dialogHelper.createDialog(dialogOptions);
|
||||
|
||||
dlg.classList.add('formDialog');
|
||||
dlg.classList.add('subtitleEditorDialog');
|
||||
|
||||
dlg.innerHTML = globalize.translateHtml(template, 'core');
|
||||
|
||||
dlg.querySelector('.originalSubtitleFileLabel').innerHTML = globalize.translate('File');
|
||||
|
||||
dlg.querySelector('.subtitleSearchForm').addEventListener('submit', onSearchSubmit);
|
||||
|
||||
var btnSubmit = dlg.querySelector('.btnSubmit');
|
||||
|
||||
if (layoutManager.tv) {
|
||||
centerFocus(dlg.querySelector('.formDialogContent'), false, true);
|
||||
dlg.querySelector('.btnSearchSubtitles').classList.add('hide');
|
||||
} else {
|
||||
btnSubmit.classList.add('hide');
|
||||
}
|
||||
|
||||
var editorContent = dlg.querySelector('.formDialogContent');
|
||||
|
||||
dlg.querySelector('.subtitleList').addEventListener('click', onSubtitleListClick);
|
||||
dlg.querySelector('.subtitleResults').addEventListener('click', onSubtitleResultsClick);
|
||||
|
||||
apiClient.getCultures().then(function (languages) {
|
||||
fillLanguages(editorContent, apiClient, languages);
|
||||
});
|
||||
|
||||
dlg.querySelector('.btnCancel').addEventListener('click', function () {
|
||||
dialogHelper.close(dlg);
|
||||
});
|
||||
|
||||
return new Promise(function (resolve, reject) {
|
||||
dlg.addEventListener('close', function () {
|
||||
if (layoutManager.tv) {
|
||||
centerFocus(dlg.querySelector('.formDialogContent'), false, false);
|
||||
}
|
||||
|
||||
if (hasChanges) {
|
||||
resolve();
|
||||
} else {
|
||||
reject();
|
||||
}
|
||||
});
|
||||
|
||||
dialogHelper.open(dlg);
|
||||
|
||||
reload(editorContent, apiClient, item);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function showEditor(itemId, serverId) {
|
||||
loading.show();
|
||||
|
||||
return new Promise(function (resolve, reject) {
|
||||
require(['text!./subtitleeditor.template.html'], function (template) {
|
||||
showEditorInternal(itemId, serverId, template).then(resolve, reject);
|
||||
});
|
||||
});
|
||||
}
|
||||
dlg.addEventListener('close', function () {
|
||||
if (layoutManager.tv) {
|
||||
centerFocus(dlg.querySelector('.formDialogContent'), false, false);
|
||||
}
|
||||
|
||||
return {
|
||||
show: showEditor
|
||||
};
|
||||
});
|
||||
if (hasChanges) {
|
||||
resolve();
|
||||
} else {
|
||||
reject();
|
||||
}
|
||||
});
|
||||
|
||||
dialogHelper.open(dlg);
|
||||
|
||||
reload(editorContent, apiClient, item);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function showEditor(itemId, serverId) {
|
||||
loading.show();
|
||||
|
||||
return new Promise(function (resolve, reject) {
|
||||
import('text!./subtitleeditor.template.html').then(({default: template}) => {
|
||||
showEditorInternal(itemId, serverId, template).then(resolve, reject);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
export default {
|
||||
show: showEditor
|
||||
};
|
||||
|
|
|
|||
|
|
@ -3,52 +3,29 @@
|
|||
* @module components/subtitleSettings/subtitleAppearanceHelper
|
||||
*/
|
||||
|
||||
function getTextStyles(settings, isCue) {
|
||||
function getTextStyles(settings, preview) {
|
||||
let list = [];
|
||||
|
||||
if (isCue) {
|
||||
switch (settings.textSize || '') {
|
||||
case 'smaller':
|
||||
list.push({ name: 'font-size', value: '.5em' });
|
||||
break;
|
||||
case 'small':
|
||||
list.push({ name: 'font-size', value: '.7em' });
|
||||
break;
|
||||
case 'large':
|
||||
list.push({ name: 'font-size', value: '1.3em' });
|
||||
break;
|
||||
case 'larger':
|
||||
list.push({ name: 'font-size', value: '1.72em' });
|
||||
break;
|
||||
case 'extralarge':
|
||||
list.push({ name: 'font-size', value: '2em' });
|
||||
break;
|
||||
default:
|
||||
case 'medium':
|
||||
break;
|
||||
}
|
||||
} else {
|
||||
switch (settings.textSize || '') {
|
||||
case 'smaller':
|
||||
list.push({ name: 'font-size', value: '.8em' });
|
||||
break;
|
||||
case 'small':
|
||||
list.push({ name: 'font-size', value: 'inherit' });
|
||||
break;
|
||||
case 'larger':
|
||||
list.push({ name: 'font-size', value: '2em' });
|
||||
break;
|
||||
case 'extralarge':
|
||||
list.push({ name: 'font-size', value: '2.2em' });
|
||||
break;
|
||||
case 'large':
|
||||
list.push({ name: 'font-size', value: '1.72em' });
|
||||
break;
|
||||
default:
|
||||
case 'medium':
|
||||
list.push({ name: 'font-size', value: '1.36em' });
|
||||
break;
|
||||
}
|
||||
switch (settings.textSize || '') {
|
||||
case 'smaller':
|
||||
list.push({ name: 'font-size', value: '.8em' });
|
||||
break;
|
||||
case 'small':
|
||||
list.push({ name: 'font-size', value: 'inherit' });
|
||||
break;
|
||||
case 'larger':
|
||||
list.push({ name: 'font-size', value: '2em' });
|
||||
break;
|
||||
case 'extralarge':
|
||||
list.push({ name: 'font-size', value: '2.2em' });
|
||||
break;
|
||||
case 'large':
|
||||
list.push({ name: 'font-size', value: '1.72em' });
|
||||
break;
|
||||
default:
|
||||
case 'medium':
|
||||
list.push({ name: 'font-size', value: '1.36em' });
|
||||
break;
|
||||
}
|
||||
|
||||
switch (settings.dropShadow || '') {
|
||||
|
|
@ -111,13 +88,43 @@ function getTextStyles(settings, isCue) {
|
|||
break;
|
||||
}
|
||||
|
||||
if (!preview) {
|
||||
const pos = parseInt(settings.verticalPosition, 10);
|
||||
const lineHeight = 1.35; // FIXME: It is better to read this value from element
|
||||
const line = Math.abs(pos * lineHeight);
|
||||
if (pos < 0) {
|
||||
list.push({ name: 'min-height', value: `${line}em` });
|
||||
list.push({ name: 'margin-top', value: '' });
|
||||
} else {
|
||||
list.push({ name: 'min-height', value: '' });
|
||||
list.push({ name: 'margin-top', value: `${line}em` });
|
||||
}
|
||||
}
|
||||
|
||||
return list;
|
||||
}
|
||||
|
||||
export function getStyles(settings, isCue) {
|
||||
function getWindowStyles(settings, preview) {
|
||||
const list = [];
|
||||
|
||||
if (!preview) {
|
||||
const pos = parseInt(settings.verticalPosition, 10);
|
||||
if (pos < 0) {
|
||||
list.push({ name: 'top', value: '' });
|
||||
list.push({ name: 'bottom', value: '0' });
|
||||
} else {
|
||||
list.push({ name: 'top', value: '0' });
|
||||
list.push({ name: 'bottom', value: '' });
|
||||
}
|
||||
}
|
||||
|
||||
return list;
|
||||
}
|
||||
|
||||
export function getStyles(settings, preview) {
|
||||
return {
|
||||
text: getTextStyles(settings, isCue),
|
||||
window: []
|
||||
text: getTextStyles(settings, preview),
|
||||
window: getWindowStyles(settings, preview)
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -130,7 +137,7 @@ function applyStyleList(styles, elem) {
|
|||
}
|
||||
|
||||
export function applyStyles(elements, appearanceSettings) {
|
||||
let styles = getStyles(appearanceSettings);
|
||||
let styles = getStyles(appearanceSettings, !!elements.preview);
|
||||
|
||||
if (elements.text) {
|
||||
applyStyleList(styles.text, elements.text);
|
||||
|
|
|
|||
26
src/components/subtitlesettings/subtitlesettings.css
Normal file
26
src/components/subtitlesettings/subtitlesettings.css
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
.subtitleappearance-fullpreview {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1000;
|
||||
pointer-events: none;
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
.subtitleappearance-fullpreview-hide {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.subtitleappearance-fullpreview-window {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
font-size: 170%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.subtitleappearance-fullpreview-text {
|
||||
display: inline-block;
|
||||
max-width: 70%;
|
||||
}
|
||||
|
|
@ -2,6 +2,7 @@ import globalize from 'globalize';
|
|||
import appHost from 'apphost';
|
||||
import appSettings from 'appSettings';
|
||||
import focusManager from 'focusManager';
|
||||
import layoutManager from 'layoutManager';
|
||||
import loading from 'loading';
|
||||
import connectionManager from 'connectionManager';
|
||||
import subtitleAppearanceHelper from 'subtitleAppearanceHelper';
|
||||
|
|
@ -10,9 +11,11 @@ import dom from 'dom';
|
|||
import events from 'events';
|
||||
import 'listViewStyle';
|
||||
import 'emby-select';
|
||||
import 'emby-slider';
|
||||
import 'emby-input';
|
||||
import 'emby-checkbox';
|
||||
import 'flexStyles';
|
||||
import 'css!./subtitlesettings';
|
||||
|
||||
/**
|
||||
* Subtitle settings.
|
||||
|
|
@ -27,6 +30,7 @@ function getSubtitleAppearanceObject(context) {
|
|||
appearanceSettings.font = context.querySelector('#selectFont').value;
|
||||
appearanceSettings.textBackground = context.querySelector('#inputTextBackground').value;
|
||||
appearanceSettings.textColor = context.querySelector('#inputTextColor').value;
|
||||
appearanceSettings.verticalPosition = context.querySelector('#sliderVerticalPosition').value;
|
||||
|
||||
return appearanceSettings;
|
||||
}
|
||||
|
|
@ -51,6 +55,7 @@ function loadForm(context, user, userSettings, appearanceSettings, apiClient) {
|
|||
context.querySelector('#inputTextBackground').value = appearanceSettings.textBackground || 'transparent';
|
||||
context.querySelector('#inputTextColor').value = appearanceSettings.textColor || '#ffffff';
|
||||
context.querySelector('#selectFont').value = appearanceSettings.font || '';
|
||||
context.querySelector('#sliderVerticalPosition').value = appearanceSettings.verticalPosition;
|
||||
|
||||
context.querySelector('#selectSubtitleBurnIn').value = appSettings.get('subtitleburnin') || '';
|
||||
|
||||
|
|
@ -112,10 +117,45 @@ function onAppearanceFieldChange(e) {
|
|||
|
||||
let elements = {
|
||||
window: view.querySelector('.subtitleappearance-preview-window'),
|
||||
text: view.querySelector('.subtitleappearance-preview-text')
|
||||
text: view.querySelector('.subtitleappearance-preview-text'),
|
||||
preview: true
|
||||
};
|
||||
|
||||
subtitleAppearanceHelper.applyStyles(elements, appearanceSettings);
|
||||
|
||||
subtitleAppearanceHelper.applyStyles({
|
||||
window: view.querySelector('.subtitleappearance-fullpreview-window'),
|
||||
text: view.querySelector('.subtitleappearance-fullpreview-text')
|
||||
}, appearanceSettings);
|
||||
}
|
||||
|
||||
const subtitlePreviewDelay = 1000;
|
||||
let subtitlePreviewTimer;
|
||||
|
||||
function showSubtitlePreview(persistent) {
|
||||
clearTimeout(subtitlePreviewTimer);
|
||||
|
||||
this._fullPreview.classList.remove('subtitleappearance-fullpreview-hide');
|
||||
|
||||
if (persistent) {
|
||||
this._refFullPreview++;
|
||||
}
|
||||
|
||||
if (this._refFullPreview === 0) {
|
||||
subtitlePreviewTimer = setTimeout(hideSubtitlePreview.bind(this), subtitlePreviewDelay);
|
||||
}
|
||||
}
|
||||
|
||||
function hideSubtitlePreview(persistent) {
|
||||
clearTimeout(subtitlePreviewTimer);
|
||||
|
||||
if (persistent) {
|
||||
this._refFullPreview--;
|
||||
}
|
||||
|
||||
if (this._refFullPreview === 0) {
|
||||
this._fullPreview.classList.add('subtitleappearance-fullpreview-hide');
|
||||
}
|
||||
}
|
||||
|
||||
function embed(options, self) {
|
||||
|
|
@ -138,6 +178,36 @@ function embed(options, self) {
|
|||
|
||||
if (appHost.supports('subtitleappearancesettings')) {
|
||||
options.element.querySelector('.subtitleAppearanceSection').classList.remove('hide');
|
||||
|
||||
self._fullPreview = options.element.querySelector('.subtitleappearance-fullpreview');
|
||||
self._refFullPreview = 0;
|
||||
|
||||
const sliderVerticalPosition = options.element.querySelector('#sliderVerticalPosition');
|
||||
sliderVerticalPosition.addEventListener('input', onAppearanceFieldChange);
|
||||
sliderVerticalPosition.addEventListener('input', () => showSubtitlePreview.call(self));
|
||||
|
||||
const eventPrefix = window.PointerEvent ? 'pointer' : 'mouse';
|
||||
sliderVerticalPosition.addEventListener(`${eventPrefix}enter`, () => showSubtitlePreview.call(self, true));
|
||||
sliderVerticalPosition.addEventListener(`${eventPrefix}leave`, () => hideSubtitlePreview.call(self, true));
|
||||
|
||||
if (layoutManager.tv) {
|
||||
sliderVerticalPosition.addEventListener('focus', () => showSubtitlePreview.call(self, true));
|
||||
sliderVerticalPosition.addEventListener('blur', () => hideSubtitlePreview.call(self, true));
|
||||
|
||||
// Give CustomElements time to attach
|
||||
setTimeout(() => {
|
||||
sliderVerticalPosition.classList.add('focusable');
|
||||
sliderVerticalPosition.enableKeyboardDragging();
|
||||
}, 0);
|
||||
}
|
||||
|
||||
options.element.querySelector('.chkPreview').addEventListener('change', (e) => {
|
||||
if (e.target.checked) {
|
||||
showSubtitlePreview.call(self, true);
|
||||
} else {
|
||||
hideSubtitlePreview.call(self, true);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
self.loadData();
|
||||
|
|
|
|||
|
|
@ -38,6 +38,16 @@
|
|||
${HeaderSubtitleAppearance}
|
||||
</h2>
|
||||
|
||||
<div class="subtitleappearance-fullpreview subtitleappearance-fullpreview-hide">
|
||||
<div class="subtitleappearance-fullpreview-window">
|
||||
<div class="subtitleappearance-fullpreview-text">
|
||||
${HeaderSubtitleAppearance}
|
||||
<br>
|
||||
${TheseSettingsAffectSubtitlesOnThisDevice}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="margin: 2em 0 2em;">
|
||||
<div class="subtitleappearance-preview flex align-items-center justify-content-center" style="margin:2em 0;padding:1.6em;color:black;background:linear-gradient(140deg,#aa5cc3,#00a4dc);">
|
||||
<div class="subtitleappearance-preview-window flex align-items-center justify-content-center" style="width: 90%; padding: .25em;">
|
||||
|
|
@ -89,6 +99,20 @@
|
|||
<option value="">${DropShadow}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="sliderContainer-settings">
|
||||
<div class="sliderContainer">
|
||||
<input is="emby-slider" id="sliderVerticalPosition" label="${LabelSubtitleVerticalPosition}" type="range" min="-16" max="16" />
|
||||
</div>
|
||||
<div class="fieldDescription">${SubtitleVerticalPositionHelp}</div>
|
||||
</div>
|
||||
|
||||
<div class="checkboxContainer">
|
||||
<label>
|
||||
<input is="emby-checkbox" type="checkbox" class="chkPreview" />
|
||||
<span>${Preview}</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button is="emby-button" type="submit" class="raised button-submit block btnSave hide">
|
||||
|
|
|
|||
|
|
@ -1,147 +1,148 @@
|
|||
define(['playbackManager', 'layoutManager', 'text!./subtitlesync.template.html', 'css!./subtitlesync'], function (playbackManager, layoutManager, template, css) {
|
||||
'use strict';
|
||||
import playbackManager from 'playbackManager';
|
||||
import layoutManager from 'layoutManager';
|
||||
import template from 'text!./subtitlesync.template.html';
|
||||
import 'css!./subtitlesync';
|
||||
|
||||
playbackManager = playbackManager.default || playbackManager;
|
||||
let player;
|
||||
let subtitleSyncSlider;
|
||||
let subtitleSyncTextField;
|
||||
let subtitleSyncCloseButton;
|
||||
let subtitleSyncContainer;
|
||||
|
||||
var player;
|
||||
var subtitleSyncSlider;
|
||||
var subtitleSyncTextField;
|
||||
var subtitleSyncCloseButton;
|
||||
var subtitleSyncContainer;
|
||||
function init(instance) {
|
||||
const parent = document.createElement('div');
|
||||
document.body.appendChild(parent);
|
||||
parent.innerHTML = template;
|
||||
|
||||
function init(instance) {
|
||||
var parent = document.createElement('div');
|
||||
document.body.appendChild(parent);
|
||||
parent.innerHTML = template;
|
||||
subtitleSyncSlider = parent.querySelector('.subtitleSyncSlider');
|
||||
subtitleSyncTextField = parent.querySelector('.subtitleSyncTextField');
|
||||
subtitleSyncCloseButton = parent.querySelector('.subtitleSync-closeButton');
|
||||
subtitleSyncContainer = parent.querySelector('.subtitleSyncContainer');
|
||||
|
||||
subtitleSyncSlider = parent.querySelector('.subtitleSyncSlider');
|
||||
subtitleSyncTextField = parent.querySelector('.subtitleSyncTextField');
|
||||
subtitleSyncCloseButton = parent.querySelector('.subtitleSync-closeButton');
|
||||
subtitleSyncContainer = parent.querySelector('.subtitleSyncContainer');
|
||||
if (layoutManager.tv) {
|
||||
subtitleSyncSlider.classList.add('focusable');
|
||||
// HACK: Delay to give time for registered element attach (Firefox)
|
||||
setTimeout(function () {
|
||||
subtitleSyncSlider.enableKeyboardDragging();
|
||||
}, 0);
|
||||
}
|
||||
|
||||
if (layoutManager.tv) {
|
||||
subtitleSyncSlider.classList.add('focusable');
|
||||
// HACK: Delay to give time for registered element attach (Firefox)
|
||||
setTimeout(function () {
|
||||
subtitleSyncSlider.enableKeyboardDragging();
|
||||
}, 0);
|
||||
}
|
||||
subtitleSyncContainer.classList.add('hide');
|
||||
|
||||
subtitleSyncContainer.classList.add('hide');
|
||||
subtitleSyncTextField.updateOffset = function (offset) {
|
||||
this.textContent = offset + 's';
|
||||
};
|
||||
|
||||
subtitleSyncTextField.updateOffset = function(offset) {
|
||||
this.textContent = offset + 's';
|
||||
};
|
||||
subtitleSyncTextField.addEventListener('click', function () {
|
||||
// keep focus to prevent fade with osd
|
||||
this.hasFocus = true;
|
||||
});
|
||||
|
||||
subtitleSyncTextField.addEventListener('click', function () {
|
||||
subtitleSyncTextField.addEventListener('keydown', function (event) {
|
||||
if (event.key === 'Enter') {
|
||||
// if input key is enter search for float pattern
|
||||
let inputOffset = /[-+]?\d+\.?\d*/g.exec(this.textContent);
|
||||
if (inputOffset) {
|
||||
inputOffset = inputOffset[0];
|
||||
|
||||
// replace current text by considered offset
|
||||
this.textContent = inputOffset + 's';
|
||||
|
||||
inputOffset = parseFloat(inputOffset);
|
||||
// set new offset
|
||||
playbackManager.setSubtitleOffset(inputOffset, player);
|
||||
// synchronize with slider value
|
||||
subtitleSyncSlider.updateOffset(
|
||||
getPercentageFromOffset(inputOffset));
|
||||
} else {
|
||||
this.textContent = (playbackManager.getPlayerSubtitleOffset(player) || 0) + 's';
|
||||
}
|
||||
this.hasFocus = false;
|
||||
event.preventDefault();
|
||||
} else {
|
||||
// keep focus to prevent fade with osd
|
||||
this.hasFocus = true;
|
||||
});
|
||||
|
||||
subtitleSyncTextField.addEventListener('keydown', function(event) {
|
||||
if (event.key === 'Enter') {
|
||||
// if input key is enter search for float pattern
|
||||
var inputOffset = /[-+]?\d+\.?\d*/g.exec(this.textContent);
|
||||
if (inputOffset) {
|
||||
inputOffset = inputOffset[0];
|
||||
|
||||
// replace current text by considered offset
|
||||
this.textContent = inputOffset + 's';
|
||||
|
||||
inputOffset = parseFloat(inputOffset);
|
||||
// set new offset
|
||||
playbackManager.setSubtitleOffset(inputOffset, player);
|
||||
// synchronize with slider value
|
||||
subtitleSyncSlider.updateOffset(
|
||||
getPercentageFromOffset(inputOffset));
|
||||
} else {
|
||||
this.textContent = (playbackManager.getPlayerSubtitleOffset(player) || 0) + 's';
|
||||
}
|
||||
this.hasFocus = false;
|
||||
if (event.key.match(/[+-\d.s]/) === null) {
|
||||
event.preventDefault();
|
||||
} else {
|
||||
// keep focus to prevent fade with osd
|
||||
this.hasFocus = true;
|
||||
if (event.key.match(/[+-\d.s]/) === null) {
|
||||
event.preventDefault();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// FIXME: TV layout will require special handling for navigation keys. But now field is not focusable
|
||||
event.stopPropagation();
|
||||
});
|
||||
// FIXME: TV layout will require special handling for navigation keys. But now field is not focusable
|
||||
event.stopPropagation();
|
||||
});
|
||||
|
||||
subtitleSyncTextField.blur = function() {
|
||||
// prevent textfield to blur while element has focus
|
||||
if (!this.hasFocus && this.prototype) {
|
||||
this.prototype.blur();
|
||||
}
|
||||
};
|
||||
subtitleSyncTextField.blur = function () {
|
||||
// prevent textfield to blur while element has focus
|
||||
if (!this.hasFocus && this.prototype) {
|
||||
this.prototype.blur();
|
||||
}
|
||||
};
|
||||
|
||||
subtitleSyncSlider.updateOffset = function(percent) {
|
||||
// default value is 0s = 50%
|
||||
this.value = percent === undefined ? 50 : percent;
|
||||
};
|
||||
subtitleSyncSlider.updateOffset = function (percent) {
|
||||
// default value is 0s = 50%
|
||||
this.value = percent === undefined ? 50 : percent;
|
||||
};
|
||||
|
||||
subtitleSyncSlider.addEventListener('change', function () {
|
||||
// set new offset
|
||||
playbackManager.setSubtitleOffset(getOffsetFromPercentage(this.value), player);
|
||||
// synchronize with textField value
|
||||
subtitleSyncTextField.updateOffset(
|
||||
getOffsetFromPercentage(this.value));
|
||||
});
|
||||
subtitleSyncSlider.addEventListener('change', function () {
|
||||
// set new offset
|
||||
playbackManager.setSubtitleOffset(getOffsetFromPercentage(this.value), player);
|
||||
// synchronize with textField value
|
||||
subtitleSyncTextField.updateOffset(
|
||||
getOffsetFromPercentage(this.value));
|
||||
});
|
||||
|
||||
subtitleSyncSlider.getBubbleHtml = function (value) {
|
||||
var newOffset = getOffsetFromPercentage(value);
|
||||
return '<h1 class="sliderBubbleText">' +
|
||||
subtitleSyncSlider.getBubbleHtml = function (value) {
|
||||
const newOffset = getOffsetFromPercentage(value);
|
||||
return '<h1 class="sliderBubbleText">' +
|
||||
(newOffset > 0 ? '+' : '') + parseFloat(newOffset) + 's' +
|
||||
'</h1>';
|
||||
};
|
||||
};
|
||||
|
||||
subtitleSyncCloseButton.addEventListener('click', function() {
|
||||
playbackManager.disableShowingSubtitleOffset(player);
|
||||
SubtitleSync.prototype.toggle('forceToHide');
|
||||
});
|
||||
subtitleSyncCloseButton.addEventListener('click', function () {
|
||||
playbackManager.disableShowingSubtitleOffset(player);
|
||||
SubtitleSync.prototype.toggle('forceToHide');
|
||||
});
|
||||
|
||||
instance.element = parent;
|
||||
}
|
||||
instance.element = parent;
|
||||
}
|
||||
|
||||
function getOffsetFromPercentage(value) {
|
||||
// convert percent to fraction
|
||||
var offset = (value - 50) / 50;
|
||||
// multiply by offset min/max range value (-x to +x) :
|
||||
offset *= 30;
|
||||
return offset.toFixed(1);
|
||||
}
|
||||
function getOffsetFromPercentage(value) {
|
||||
// convert percent to fraction
|
||||
let offset = (value - 50) / 50;
|
||||
// multiply by offset min/max range value (-x to +x) :
|
||||
offset *= 30;
|
||||
return offset.toFixed(1);
|
||||
}
|
||||
|
||||
function getPercentageFromOffset(value) {
|
||||
// divide by offset min/max range value (-x to +x) :
|
||||
var percentValue = value / 30;
|
||||
// convert fraction to percent
|
||||
percentValue *= 50;
|
||||
percentValue += 50;
|
||||
return Math.min(100, Math.max(0, percentValue.toFixed()));
|
||||
}
|
||||
function getPercentageFromOffset(value) {
|
||||
// divide by offset min/max range value (-x to +x) :
|
||||
let percentValue = value / 30;
|
||||
// convert fraction to percent
|
||||
percentValue *= 50;
|
||||
percentValue += 50;
|
||||
return Math.min(100, Math.max(0, percentValue.toFixed()));
|
||||
}
|
||||
|
||||
function SubtitleSync(currentPlayer) {
|
||||
class SubtitleSync {
|
||||
constructor(currentPlayer) {
|
||||
player = currentPlayer;
|
||||
init(this);
|
||||
}
|
||||
|
||||
SubtitleSync.prototype.destroy = function() {
|
||||
destroy() {
|
||||
SubtitleSync.prototype.toggle('forceToHide');
|
||||
if (player) {
|
||||
playbackManager.disableShowingSubtitleOffset(player);
|
||||
playbackManager.setSubtitleOffset(0, player);
|
||||
}
|
||||
var elem = this.element;
|
||||
const elem = this.element;
|
||||
if (elem) {
|
||||
elem.parentNode.removeChild(elem);
|
||||
this.element = null;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
SubtitleSync.prototype.toggle = function(action) {
|
||||
toggle(action) {
|
||||
if (player && playbackManager.supportSubtitleOffset(player)) {
|
||||
/* eslint-disable no-fallthrough */
|
||||
switch (action) {
|
||||
|
|
@ -170,7 +171,7 @@ define(['playbackManager', 'layoutManager', 'text!./subtitlesync.template.html',
|
|||
}
|
||||
/* eslint-enable no-fallthrough */
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
return SubtitleSync;
|
||||
});
|
||||
export default SubtitleSync;
|
||||
|
|
|
|||
|
|
@ -1,30 +1,33 @@
|
|||
define(['backdrop', 'mainTabsManager', 'layoutManager', 'emby-tabs'], function (backdrop, mainTabsManager, layoutManager) {
|
||||
'use strict';
|
||||
import backdrop from 'backdrop';
|
||||
import * as mainTabsManager from 'mainTabsManager';
|
||||
import layoutManager from 'layoutManager';
|
||||
import 'emby-tabs';
|
||||
|
||||
function onViewDestroy(e) {
|
||||
var tabControllers = this.tabControllers;
|
||||
function onViewDestroy(e) {
|
||||
var tabControllers = this.tabControllers;
|
||||
|
||||
if (tabControllers) {
|
||||
tabControllers.forEach(function (t) {
|
||||
if (t.destroy) {
|
||||
t.destroy();
|
||||
}
|
||||
});
|
||||
if (tabControllers) {
|
||||
tabControllers.forEach(function (t) {
|
||||
if (t.destroy) {
|
||||
t.destroy();
|
||||
}
|
||||
});
|
||||
|
||||
this.tabControllers = null;
|
||||
}
|
||||
|
||||
this.view = null;
|
||||
this.params = null;
|
||||
this.currentTabController = null;
|
||||
this.initialTabIndex = null;
|
||||
this.tabControllers = null;
|
||||
}
|
||||
|
||||
function onBeforeTabChange() {
|
||||
this.view = null;
|
||||
this.params = null;
|
||||
this.currentTabController = null;
|
||||
this.initialTabIndex = null;
|
||||
}
|
||||
|
||||
}
|
||||
function onBeforeTabChange() {
|
||||
|
||||
function TabbedView(view, params) {
|
||||
}
|
||||
|
||||
class TabbedView {
|
||||
constructor(view, params) {
|
||||
this.tabControllers = [];
|
||||
this.view = view;
|
||||
this.params = params;
|
||||
|
|
@ -85,7 +88,7 @@ define(['backdrop', 'mainTabsManager', 'layoutManager', 'emby-tabs'], function (
|
|||
view.addEventListener('viewdestroy', onViewDestroy.bind(this));
|
||||
}
|
||||
|
||||
TabbedView.prototype.onResume = function (options) {
|
||||
onResume(options) {
|
||||
this.setTitle();
|
||||
backdrop.clearBackdrop();
|
||||
|
||||
|
|
@ -96,19 +99,18 @@ define(['backdrop', 'mainTabsManager', 'layoutManager', 'emby-tabs'], function (
|
|||
} else if (currentTabController && currentTabController.onResume) {
|
||||
currentTabController.onResume({});
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
TabbedView.prototype.onPause = function () {
|
||||
onPause() {
|
||||
var currentTabController = this.currentTabController;
|
||||
|
||||
if (currentTabController && currentTabController.onPause) {
|
||||
currentTabController.onPause();
|
||||
}
|
||||
};
|
||||
|
||||
TabbedView.prototype.setTitle = function () {
|
||||
}
|
||||
setTitle() {
|
||||
Emby.Page.setTitle('');
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
return TabbedView;
|
||||
});
|
||||
export default TabbedView;
|
||||
|
|
|
|||
|
|
@ -3,7 +3,9 @@ define(['dialogHelper', 'dom', 'layoutManager', 'connectionManager', 'globalize'
|
|||
|
||||
browser = browser.default || browser;
|
||||
loading = loading.default || loading;
|
||||
layoutManager = layoutManager.default || layoutManager;
|
||||
focusManager = focusManager.default || focusManager;
|
||||
scrollHelper = scrollHelper.default || scrollHelper;
|
||||
|
||||
var enableFocusTransform = !browser.slow && !browser.edge;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,136 +1,134 @@
|
|||
define(['viewContainer', 'focusManager', 'queryString', 'layoutManager'], function (viewContainer, focusManager, queryString, layoutManager) {
|
||||
'use strict';
|
||||
import viewContainer from 'viewContainer';
|
||||
import focusManager from 'focusManager';
|
||||
import queryString from 'queryString';
|
||||
import layoutManager from 'layoutManager';
|
||||
|
||||
focusManager = focusManager.default || focusManager;
|
||||
let currentView;
|
||||
let dispatchPageEvents;
|
||||
|
||||
var currentView;
|
||||
var dispatchPageEvents;
|
||||
viewContainer.setOnBeforeChange(function (newView, isRestored, options) {
|
||||
const lastView = currentView;
|
||||
if (lastView) {
|
||||
const beforeHideResult = dispatchViewEvent(lastView, null, 'viewbeforehide', true);
|
||||
|
||||
viewContainer.setOnBeforeChange(function (newView, isRestored, options) {
|
||||
var lastView = currentView;
|
||||
if (lastView) {
|
||||
var beforeHideResult = dispatchViewEvent(lastView, null, 'viewbeforehide', true);
|
||||
|
||||
if (!beforeHideResult) {
|
||||
// todo: cancel
|
||||
}
|
||||
}
|
||||
|
||||
var eventDetail = getViewEventDetail(newView, options, isRestored);
|
||||
|
||||
if (!newView.initComplete) {
|
||||
newView.initComplete = true;
|
||||
|
||||
if (typeof options.controllerFactory === 'function') {
|
||||
new options.controllerFactory(newView, eventDetail.detail.params);
|
||||
} else if (options.controllerFactory && typeof options.controllerFactory.default === 'function') {
|
||||
new options.controllerFactory.default(newView, eventDetail.detail.params);
|
||||
}
|
||||
|
||||
if (!options.controllerFactory || dispatchPageEvents) {
|
||||
dispatchViewEvent(newView, eventDetail, 'viewinit');
|
||||
}
|
||||
}
|
||||
|
||||
dispatchViewEvent(newView, eventDetail, 'viewbeforeshow');
|
||||
});
|
||||
|
||||
function onViewChange(view, options, isRestore) {
|
||||
var lastView = currentView;
|
||||
if (lastView) {
|
||||
dispatchViewEvent(lastView, null, 'viewhide');
|
||||
}
|
||||
|
||||
currentView = view;
|
||||
|
||||
var eventDetail = getViewEventDetail(view, options, isRestore);
|
||||
|
||||
if (!isRestore) {
|
||||
if (options.autoFocus !== false) {
|
||||
focusManager.autoFocus(view);
|
||||
}
|
||||
} else if (!layoutManager.mobile) {
|
||||
if (view.activeElement && document.body.contains(view.activeElement) && focusManager.isCurrentlyFocusable(view.activeElement)) {
|
||||
focusManager.focus(view.activeElement);
|
||||
} else {
|
||||
focusManager.autoFocus(view);
|
||||
}
|
||||
}
|
||||
|
||||
view.dispatchEvent(new CustomEvent('viewshow', eventDetail));
|
||||
|
||||
if (dispatchPageEvents) {
|
||||
view.dispatchEvent(new CustomEvent('pageshow', eventDetail));
|
||||
if (!beforeHideResult) {
|
||||
// todo: cancel
|
||||
}
|
||||
}
|
||||
|
||||
function getProperties(view) {
|
||||
var props = view.getAttribute('data-properties');
|
||||
const eventDetail = getViewEventDetail(newView, options, isRestored);
|
||||
|
||||
if (props) {
|
||||
return props.split(',');
|
||||
if (!newView.initComplete) {
|
||||
newView.initComplete = true;
|
||||
|
||||
if (typeof options.controllerFactory === 'function') {
|
||||
new options.controllerFactory(newView, eventDetail.detail.params);
|
||||
} else if (options.controllerFactory && typeof options.controllerFactory.default === 'function') {
|
||||
new options.controllerFactory.default(newView, eventDetail.detail.params);
|
||||
}
|
||||
|
||||
return [];
|
||||
if (!options.controllerFactory || dispatchPageEvents) {
|
||||
dispatchViewEvent(newView, eventDetail, 'viewinit');
|
||||
}
|
||||
}
|
||||
|
||||
function dispatchViewEvent(view, eventInfo, eventName, isCancellable) {
|
||||
if (!eventInfo) {
|
||||
eventInfo = {
|
||||
detail: {
|
||||
type: view.getAttribute('data-type'),
|
||||
properties: getProperties(view)
|
||||
},
|
||||
bubbles: true,
|
||||
cancelable: isCancellable
|
||||
};
|
||||
}
|
||||
dispatchViewEvent(newView, eventDetail, 'viewbeforeshow');
|
||||
});
|
||||
|
||||
eventInfo.cancelable = isCancellable || false;
|
||||
|
||||
var eventResult = view.dispatchEvent(new CustomEvent(eventName, eventInfo));
|
||||
|
||||
if (dispatchPageEvents) {
|
||||
eventInfo.cancelable = false;
|
||||
view.dispatchEvent(new CustomEvent(eventName.replace('view', 'page'), eventInfo));
|
||||
}
|
||||
|
||||
return eventResult;
|
||||
function onViewChange(view, options, isRestore) {
|
||||
const lastView = currentView;
|
||||
if (lastView) {
|
||||
dispatchViewEvent(lastView, null, 'viewhide');
|
||||
}
|
||||
|
||||
function getViewEventDetail(view, options, isRestore) {
|
||||
var url = options.url;
|
||||
var index = url.indexOf('?');
|
||||
var params = index === -1 ? {} : queryString.parse(url.substring(index + 1));
|
||||
currentView = view;
|
||||
|
||||
return {
|
||||
const eventDetail = getViewEventDetail(view, options, isRestore);
|
||||
|
||||
if (!isRestore) {
|
||||
if (options.autoFocus !== false) {
|
||||
focusManager.autoFocus(view);
|
||||
}
|
||||
} else if (!layoutManager.mobile) {
|
||||
if (view.activeElement && document.body.contains(view.activeElement) && focusManager.isCurrentlyFocusable(view.activeElement)) {
|
||||
focusManager.focus(view.activeElement);
|
||||
} else {
|
||||
focusManager.autoFocus(view);
|
||||
}
|
||||
}
|
||||
|
||||
view.dispatchEvent(new CustomEvent('viewshow', eventDetail));
|
||||
|
||||
if (dispatchPageEvents) {
|
||||
view.dispatchEvent(new CustomEvent('pageshow', eventDetail));
|
||||
}
|
||||
}
|
||||
|
||||
function getProperties(view) {
|
||||
const props = view.getAttribute('data-properties');
|
||||
|
||||
if (props) {
|
||||
return props.split(',');
|
||||
}
|
||||
|
||||
return [];
|
||||
}
|
||||
|
||||
function dispatchViewEvent(view, eventInfo, eventName, isCancellable) {
|
||||
if (!eventInfo) {
|
||||
eventInfo = {
|
||||
detail: {
|
||||
type: view.getAttribute('data-type'),
|
||||
properties: getProperties(view),
|
||||
params: params,
|
||||
isRestored: isRestore,
|
||||
state: options.state,
|
||||
|
||||
// The route options
|
||||
options: options.options || {}
|
||||
properties: getProperties(view)
|
||||
},
|
||||
bubbles: true,
|
||||
cancelable: false
|
||||
cancelable: isCancellable
|
||||
};
|
||||
}
|
||||
|
||||
function resetCachedViews() {
|
||||
// Reset all cached views whenever the skin changes
|
||||
viewContainer.reset();
|
||||
eventInfo.cancelable = isCancellable || false;
|
||||
|
||||
const eventResult = view.dispatchEvent(new CustomEvent(eventName, eventInfo));
|
||||
|
||||
if (dispatchPageEvents) {
|
||||
eventInfo.cancelable = false;
|
||||
view.dispatchEvent(new CustomEvent(eventName.replace('view', 'page'), eventInfo));
|
||||
}
|
||||
|
||||
document.addEventListener('skinunload', resetCachedViews);
|
||||
return eventResult;
|
||||
}
|
||||
|
||||
function ViewManager() {
|
||||
}
|
||||
function getViewEventDetail(view, options, isRestore) {
|
||||
const url = options.url;
|
||||
const index = url.indexOf('?');
|
||||
const params = index === -1 ? {} : queryString.parse(url.substring(index + 1));
|
||||
|
||||
ViewManager.prototype.loadView = function (options) {
|
||||
var lastView = currentView;
|
||||
return {
|
||||
detail: {
|
||||
type: view.getAttribute('data-type'),
|
||||
properties: getProperties(view),
|
||||
params: params,
|
||||
isRestored: isRestore,
|
||||
state: options.state,
|
||||
|
||||
// The route options
|
||||
options: options.options || {}
|
||||
},
|
||||
bubbles: true,
|
||||
cancelable: false
|
||||
};
|
||||
}
|
||||
|
||||
function resetCachedViews() {
|
||||
// Reset all cached views whenever the skin changes
|
||||
viewContainer.reset();
|
||||
}
|
||||
|
||||
document.addEventListener('skinunload', resetCachedViews);
|
||||
|
||||
class ViewManager {
|
||||
loadView(options) {
|
||||
const lastView = currentView;
|
||||
|
||||
// Record the element that has focus
|
||||
if (lastView) {
|
||||
|
|
@ -144,9 +142,9 @@ define(['viewContainer', 'focusManager', 'queryString', 'layoutManager'], functi
|
|||
viewContainer.loadView(options).then(function (view) {
|
||||
onViewChange(view, options);
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
ViewManager.prototype.tryRestoreView = function (options, onViewChanging) {
|
||||
tryRestoreView(options, onViewChanging) {
|
||||
if (options.cancel) {
|
||||
return Promise.reject({ cancelled: true });
|
||||
}
|
||||
|
|
@ -160,15 +158,15 @@ define(['viewContainer', 'focusManager', 'queryString', 'layoutManager'], functi
|
|||
onViewChanging();
|
||||
onViewChange(view, options, true);
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
ViewManager.prototype.currentView = function () {
|
||||
currentView() {
|
||||
return currentView;
|
||||
};
|
||||
}
|
||||
|
||||
ViewManager.prototype.dispatchPageEvents = function (value) {
|
||||
dispatchPageEvents(value) {
|
||||
dispatchPageEvents = value;
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
return new ViewManager();
|
||||
});
|
||||
export default new ViewManager();
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
define(['require', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'connectionManager', 'appRouter', 'globalize', 'userSettings', 'emby-checkbox', 'emby-input', 'paper-icon-button-light', 'emby-select', 'material-icons', 'css!./../formdialog', 'emby-button', 'flexStyles'], function (require, dialogHelper, loading, appHost, layoutManager, connectionManager, appRouter, globalize, userSettings) {
|
||||
'use strict';
|
||||
|
||||
layoutManager = layoutManager.default || layoutManager;
|
||||
|
||||
function onSubmit(e) {
|
||||
e.preventDefault();
|
||||
return false;
|
||||
|
|
@ -29,6 +31,7 @@ define(['require', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'conne
|
|||
|
||||
function centerFocus(elem, horiz, on) {
|
||||
require(['scrollHelper'], function (scrollHelper) {
|
||||
scrollHelper = scrollHelper.default || scrollHelper;
|
||||
var fn = on ? 'on' : 'off';
|
||||
scrollHelper.centerFocus[fn](elem, horiz);
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue