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 pull request #1174 from puschie286/es6-subtitlesettings

Browse source 
Migrate subtitlesettings to es6
This commit is contained in:
dkanada 2020-06-28 17:01:50 +09:00 • committed by GitHub
commit 1f8ce6e6f4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 380 additions and 339 deletions
Download patch file Download diff file Expand all files Collapse all files

4
package.json
View file

@ -121,12 +121,16 @@
"src/components/playmenu.js", "src/components/playmenu.js",
"src/components/sanatizefilename.js", "src/components/sanatizefilename.js",
"src/components/scrollManager.js", "src/components/scrollManager.js",
"src/components/settingshelper.js",
"src/components/subtitlesettings/subtitlesettings.js",
"src/components/subtitlesettings/subtitleappearancehelper.js",
"src/components/shortcuts.js", "src/components/shortcuts.js",
"src/components/syncPlay/groupSelectionMenu.js", "src/components/syncPlay/groupSelectionMenu.js",
"src/components/syncPlay/playbackPermissionManager.js", "src/components/syncPlay/playbackPermissionManager.js",
"src/components/syncPlay/syncPlayManager.js", "src/components/syncPlay/syncPlayManager.js",
"src/components/syncPlay/timeSyncManager.js", "src/components/syncPlay/timeSyncManager.js",
"src/controllers/dashboard/logs.js", "src/controllers/dashboard/logs.js",
"src/controllers/user/subtitles.js",
"src/controllers/dashboard/plugins/repositories.js", "src/controllers/dashboard/plugins/repositories.js",
"src/plugins/bookPlayer/plugin.js", "src/plugins/bookPlayer/plugin.js",
"src/plugins/bookPlayer/tableOfContents.js", "src/plugins/bookPlayer/tableOfContents.js",

22
src/components/settingshelper.js Normal file
View file

@ -0,0 +1,22 @@
import globalize from 'globalize';
/**
* Helper for handling settings.
* @module components/settingsHelper
*/
export function populateLanguages(select, languages) {
let html = '';
html += "<option value=''>" + globalize.translate('AnyLanguage') + '</option>';
for (let i = 0, length = languages.length; i < length; i++) {
const culture = languages[i];
html += "<option value='" + culture.ThreeLetterISOLanguageName + "'>" + culture.DisplayName + '</option>';
}
select.innerHTML = html;
}
export default {
populateLanguages: populateLanguages
};

245
src/components/subtitlesettings/subtitleappearancehelper.js
View file

@ -1,159 +1,154 @@
define([], function () { /**
'use strict'; * Subtitle settings visual helper.
* @module components/subtitleSettings/subtitleAppearanceHelper
*/
function getTextStyles(settings, isCue) { function getTextStyles(settings, isCue) {
var list = []; let list = [];
if (isCue) { if (isCue) {
switch (settings.textSize || '') { switch (settings.textSize || '') {
case 'smaller': case 'smaller':
list.push({ name: 'font-size', value: '.5em' }); 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.dropShadow || '') {
case 'raised':
list.push({ name: 'text-shadow', value: '-1px -1px white, 0px -1px white, -1px 0px white, 1px 1px black, 0px 1px black, 1px 0px black' });
break; break;
case 'depressed': case 'small':
list.push({ name: 'text-shadow', value: '1px 1px white, 0px 1px white, 1px 0px white, -1px -1px black, 0px -1px black, -1px 0px black' }); list.push({ name: 'font-size', value: '.7em' });
break; break;
case 'uniform': case 'large':
list.push({ name: 'text-shadow', value: '-1px 0px #000000, 0px 1px #000000, 1px 0px #000000, 0px -1px #000000' }); list.push({ name: 'font-size', value: '1.3em' });
break; break;
case 'none': case 'larger':
list.push({ name: 'text-shadow', value: 'none' }); list.push({ name: 'font-size', value: '1.72em' });
break;
case 'extralarge':
list.push({ name: 'font-size', value: '2em' });
break; break;
default: default:
case 'dropshadow': case 'medium':
list.push({ name: 'text-shadow', value: '#000000 0px 0px 7px' });
break; break;
} }
} else {
switch (settings.textSize || '') {
var background = settings.textBackground || 'transparent'; case 'smaller':
if (background) { list.push({ name: 'font-size', value: '.8em' });
list.push({ name: 'background-color', value: background });
}
var textColor = settings.textColor || '#ffffff';
if (textColor) {
list.push({ name: 'color', value: textColor });
}
switch (settings.font || '') {
case 'typewriter':
list.push({ name: 'font-family', value: '"Courier New",monospace' });
list.push({ name: 'font-variant', value: 'none' });
break; break;
case 'print': case 'small':
list.push({ name: 'font-family', value: 'Georgia,Times New Roman,Arial,Helvetica,serif' }); list.push({ name: 'font-size', value: 'inherit' });
list.push({ name: 'font-variant', value: 'none' });
break; break;
case 'console': case 'larger':
list.push({ name: 'font-family', value: 'Consolas,Lucida Console,Menlo,Monaco,monospace' }); list.push({ name: 'font-size', value: '2em' });
list.push({ name: 'font-variant', value: 'none' });
break; break;
case 'cursive': case 'extralarge':
list.push({ name: 'font-family', value: 'Lucida Handwriting,Brush Script MT,Segoe Script,cursive,Quintessential,system-ui,-apple-system,BlinkMacSystemFont,sans-serif' }); list.push({ name: 'font-size', value: '2.2em' });
list.push({ name: 'font-variant', value: 'none' });
break; break;
case 'casual': case 'large':
list.push({ name: 'font-family', value: 'Gabriola,Segoe Print,Comic Sans MS,Chalkboard,Short Stack,system-ui,-apple-system,BlinkMacSystemFont,sans-serif' }); list.push({ name: 'font-size', value: '1.72em' });
list.push({ name: 'font-variant', value: 'none' });
break;
case 'smallcaps':
list.push({ name: 'font-family', value: 'Copperplate Gothic,Copperplate Gothic Bold,Copperplate,system-ui,-apple-system,BlinkMacSystemFont,sans-serif' });
list.push({ name: 'font-variant', value: 'small-caps' });
break; break;
default: default:
list.push({ name: 'font-family', value: 'inherit' }); case 'medium':
list.push({ name: 'font-variant', value: 'none' }); list.push({ name: 'font-size', value: '1.36em' });
break; break;
} }
return list;
} }
function getWindowStyles(settings) { switch (settings.dropShadow || '') {
return []; case 'raised':
list.push({ name: 'text-shadow', value: '-1px -1px white, 0px -1px white, -1px 0px white, 1px 1px black, 0px 1px black, 1px 0px black' });
break;
case 'depressed':
list.push({ name: 'text-shadow', value: '1px 1px white, 0px 1px white, 1px 0px white, -1px -1px black, 0px -1px black, -1px 0px black' });
break;
case 'uniform':
list.push({ name: 'text-shadow', value: '-1px 0px #000000, 0px 1px #000000, 1px 0px #000000, 0px -1px #000000' });
break;
case 'none':
list.push({ name: 'text-shadow', value: 'none' });
break;
default:
case 'dropshadow':
list.push({ name: 'text-shadow', value: '#000000 0px 0px 7px' });
break;
} }
function getStyles(settings, isCue) { const background = settings.textBackground || 'transparent';
if (background) {
return { list.push({ name: 'background-color', value: background });
text: getTextStyles(settings, isCue),
window: getWindowStyles(settings)
};
} }
function applyStyleList(styles, elem) { const textColor = settings.textColor || '#ffffff';
if (textColor) {
for (var i = 0, length = styles.length; i < length; i++) { list.push({ name: 'color', value: textColor });
var style = styles[i];
elem.style[style.name] = style.value;
}
} }
function applyStyles(elements, appearanceSettings) { switch (settings.font || '') {
var styles = getStyles(appearanceSettings); case 'typewriter':
list.push({ name: 'font-family', value: '"Courier New",monospace' });
if (elements.text) { list.push({ name: 'font-variant', value: 'none' });
applyStyleList(styles.text, elements.text); break;
} case 'print':
if (elements.window) { list.push({ name: 'font-family', value: 'Georgia,Times New Roman,Arial,Helvetica,serif' });
applyStyleList(styles.window, elements.window); list.push({ name: 'font-variant', value: 'none' });
} break;
case 'console':
list.push({ name: 'font-family', value: 'Consolas,Lucida Console,Menlo,Monaco,monospace' });
list.push({ name: 'font-variant', value: 'none' });
break;
case 'cursive':
list.push({ name: 'font-family', value: 'Lucida Handwriting,Brush Script MT,Segoe Script,cursive,Quintessential,system-ui,-apple-system,BlinkMacSystemFont,sans-serif' });
list.push({ name: 'font-variant', value: 'none' });
break;
case 'casual':
list.push({ name: 'font-family', value: 'Gabriola,Segoe Print,Comic Sans MS,Chalkboard,Short Stack,system-ui,-apple-system,BlinkMacSystemFont,sans-serif' });
list.push({ name: 'font-variant', value: 'none' });
break;
case 'smallcaps':
list.push({ name: 'font-family', value: 'Copperplate Gothic,Copperplate Gothic Bold,Copperplate,system-ui,-apple-system,BlinkMacSystemFont,sans-serif' });
list.push({ name: 'font-variant', value: 'small-caps' });
break;
default:
list.push({ name: 'font-family', value: 'inherit' });
list.push({ name: 'font-variant', value: 'none' });
break;
} }
return list;
}
export function getStyles(settings, isCue) {
return { return {
getStyles: getStyles, text: getTextStyles(settings, isCue),
applyStyles: applyStyles window: []
}; };
}); }
function applyStyleList(styles, elem) {
for (let i = 0, length = styles.length; i < length; i++) {
let style = styles[i];
elem.style[style.name] = style.value;
}
}
export function applyStyles(elements, appearanceSettings) {
let styles = getStyles(appearanceSettings);
if (elements.text) {
applyStyleList(styles.text, elements.text);
}
if (elements.window) {
applyStyleList(styles.window, elements.window);
}
}
export default {
getStyles: getStyles,
applyStyles: applyStyles
};

344
src/components/subtitlesettings/subtitlesettings.js
View file

@ -1,109 +1,212 @@
define(['require', 'globalize', 'appSettings', 'apphost', 'focusManager', 'loading', 'connectionManager', 'subtitleAppearanceHelper', 'dom', 'events', 'listViewStyle', 'emby-select', 'emby-input', 'emby-checkbox', 'flexStyles'], function (require, globalize, appSettings, appHost, focusManager, loading, connectionManager, subtitleAppearanceHelper, dom, events) { import require from 'require';
'use strict'; import globalize from 'globalize';
import appHost from 'apphost';
import appSettings from 'appSettings';
import focusManager from 'focusManager';
import loading from 'loading';
import connectionManager from 'connectionManager';
import subtitleAppearanceHelper from 'subtitleAppearanceHelper';
import settingsHelper from 'settingsHelper';
import dom from 'dom';
import events from 'events';
import 'listViewStyle';
import 'emby-select';
import 'emby-input';
import 'emby-checkbox';
import 'flexStyles';
function populateLanguages(select, languages) { /**
var html = ''; * Subtitle settings.
* @module components/subtitleSettings/subtitleSettings
*/
html += "<option value=''>" + globalize.translate('AnyLanguage') + '</option>'; function getSubtitleAppearanceObject(context) {
for (var i = 0, length = languages.length; i < length; i++) { let appearanceSettings = {};
var culture = languages[i];
html += "<option value='" + culture.ThreeLetterISOLanguageName + "'>" + culture.DisplayName + '</option>'; appearanceSettings.textSize = context.querySelector('#selectTextSize').value;
appearanceSettings.dropShadow = context.querySelector('#selectDropShadow').value;
appearanceSettings.font = context.querySelector('#selectFont').value;
appearanceSettings.textBackground = context.querySelector('#inputTextBackground').value;
appearanceSettings.textColor = context.querySelector('#inputTextColor').value;
return appearanceSettings;
}
function loadForm(context, user, userSettings, appearanceSettings, apiClient) {
apiClient.getCultures().then(function (allCultures) {
if (appHost.supports('subtitleburnsettings') && user.Policy.EnableVideoPlaybackTranscoding) {
context.querySelector('.fldBurnIn').classList.remove('hide');
} }
select.innerHTML = html; let selectSubtitleLanguage = context.querySelector('#selectSubtitleLanguage');
}
function getSubtitleAppearanceObject(context) { settingsHelper.populateLanguages(selectSubtitleLanguage, allCultures);
var appearanceSettings = {};
appearanceSettings.textSize = context.querySelector('#selectTextSize').value; selectSubtitleLanguage.value = user.Configuration.SubtitleLanguagePreference || '';
appearanceSettings.dropShadow = context.querySelector('#selectDropShadow').value; context.querySelector('#selectSubtitlePlaybackMode').value = user.Configuration.SubtitleMode || '';
appearanceSettings.font = context.querySelector('#selectFont').value;
appearanceSettings.textBackground = context.querySelector('#inputTextBackground').value;
appearanceSettings.textColor = context.querySelector('#inputTextColor').value;
return appearanceSettings; context.querySelector('#selectSubtitlePlaybackMode').dispatchEvent(new CustomEvent('change', {}));
}
function loadForm(context, user, userSettings, appearanceSettings, apiClient) { context.querySelector('#selectTextSize').value = appearanceSettings.textSize || '';
context.querySelector('#selectDropShadow').value = appearanceSettings.dropShadow || '';
context.querySelector('#inputTextBackground').value = appearanceSettings.textBackground || 'transparent';
context.querySelector('#inputTextColor').value = appearanceSettings.textColor || '#ffffff';
context.querySelector('#selectFont').value = appearanceSettings.font || '';
apiClient.getCultures().then(function (allCultures) { context.querySelector('#selectSubtitleBurnIn').value = appSettings.get('subtitleburnin') || '';
if (appHost.supports('subtitleburnsettings') && user.Policy.EnableVideoPlaybackTranscoding) { onAppearanceFieldChange({
context.querySelector('.fldBurnIn').classList.remove('hide'); target: context.querySelector('#selectTextSize')
} });
var selectSubtitleLanguage = context.querySelector('#selectSubtitleLanguage'); loading.hide();
});
}
populateLanguages(selectSubtitleLanguage, allCultures); function saveUser(context, user, userSettingsInstance, appearanceKey, apiClient) {
selectSubtitleLanguage.value = user.Configuration.SubtitleLanguagePreference || ''; let appearanceSettings = userSettingsInstance.getSubtitleAppearanceSettings(appearanceKey);
context.querySelector('#selectSubtitlePlaybackMode').value = user.Configuration.SubtitleMode || ''; appearanceSettings = Object.assign(appearanceSettings, getSubtitleAppearanceObject(context));
context.querySelector('#selectSubtitlePlaybackMode').dispatchEvent(new CustomEvent('change', {})); userSettingsInstance.setSubtitleAppearanceSettings(appearanceSettings, appearanceKey);
context.querySelector('#selectTextSize').value = appearanceSettings.textSize || ''; user.Configuration.SubtitleLanguagePreference = context.querySelector('#selectSubtitleLanguage').value;
context.querySelector('#selectDropShadow').value = appearanceSettings.dropShadow || ''; user.Configuration.SubtitleMode = context.querySelector('#selectSubtitlePlaybackMode').value;
context.querySelector('#inputTextBackground').value = appearanceSettings.textBackground || 'transparent';
context.querySelector('#inputTextColor').value = appearanceSettings.textColor || '#ffffff';
context.querySelector('#selectFont').value = appearanceSettings.font || '';
context.querySelector('#selectSubtitleBurnIn').value = appSettings.get('subtitleburnin') || ''; return apiClient.updateUserConfiguration(user.Id, user.Configuration);
}
onAppearanceFieldChange({ function save(instance, context, userId, userSettings, apiClient, enableSaveConfirmation) {
target: context.querySelector('#selectTextSize')
}); loading.show();
appSettings.set('subtitleburnin', context.querySelector('#selectSubtitleBurnIn').value);
apiClient.getUser(userId).then(function (user) {
saveUser(context, user, userSettings, instance.appearanceKey, apiClient).then(function () {
loading.hide(); loading.hide();
if (enableSaveConfirmation) {
require(['toast'], function (toast) {
toast(globalize.translate('SettingsSaved'));
});
}
events.trigger(instance, 'saved');
}, function () {
loading.hide();
}); });
});
}
function onSubtitleModeChange(e) {
let view = dom.parentWithClass(e.target, 'subtitlesettings');
let subtitlesHelp = view.querySelectorAll('.subtitlesHelp');
for (let i = 0, length = subtitlesHelp.length; i < length; i++) {
subtitlesHelp[i].classList.add('hide');
}
view.querySelector('.subtitles' + this.value + 'Help').classList.remove('hide');
}
function onAppearanceFieldChange(e) {
let view = dom.parentWithClass(e.target, 'subtitlesettings');
let appearanceSettings = getSubtitleAppearanceObject(view);
let elements = {
window: view.querySelector('.subtitleappearance-preview-window'),
text: view.querySelector('.subtitleappearance-preview-text')
};
subtitleAppearanceHelper.applyStyles(elements, appearanceSettings);
}
function embed(options, self) {
require(['text!./subtitlesettings.template.html'], function (template) {
options.element.classList.add('subtitlesettings');
options.element.innerHTML = globalize.translateDocument(template, 'core');
options.element.querySelector('form').addEventListener('submit', self.onSubmit.bind(self));
options.element.querySelector('#selectSubtitlePlaybackMode').addEventListener('change', onSubtitleModeChange);
options.element.querySelector('#selectTextSize').addEventListener('change', onAppearanceFieldChange);
options.element.querySelector('#selectDropShadow').addEventListener('change', onAppearanceFieldChange);
options.element.querySelector('#selectFont').addEventListener('change', onAppearanceFieldChange);
options.element.querySelector('#inputTextColor').addEventListener('change', onAppearanceFieldChange);
options.element.querySelector('#inputTextBackground').addEventListener('change', onAppearanceFieldChange);
if (options.enableSaveButton) {
options.element.querySelector('.btnSave').classList.remove('hide');
}
if (appHost.supports('subtitleappearancesettings')) {
options.element.querySelector('.subtitleAppearanceSection').classList.remove('hide');
}
self.loadData();
if (options.autoFocus) {
focusManager.autoFocus(options.element);
}
});
}
export class SubtitleSettings {
constructor(options) {
this.options = options;
embed(options, this);
} }
function saveUser(context, user, userSettingsInstance, appearanceKey, apiClient) { loadData() {
let self = this;
var appearanceSettings = userSettingsInstance.getSubtitleAppearanceSettings(appearanceKey); let context = self.options.element;
appearanceSettings = Object.assign(appearanceSettings, getSubtitleAppearanceObject(context));
userSettingsInstance.setSubtitleAppearanceSettings(appearanceSettings, appearanceKey);
user.Configuration.SubtitleLanguagePreference = context.querySelector('#selectSubtitleLanguage').value;
user.Configuration.SubtitleMode = context.querySelector('#selectSubtitlePlaybackMode').value;
return apiClient.updateUserConfiguration(user.Id, user.Configuration);
}
function save(instance, context, userId, userSettings, apiClient, enableSaveConfirmation) {
loading.show(); loading.show();
appSettings.set('subtitleburnin', context.querySelector('#selectSubtitleBurnIn').value); let userId = self.options.userId;
let apiClient = connectionManager.getApiClient(self.options.serverId);
let userSettings = self.options.userSettings;
apiClient.getUser(userId).then(function (user) { apiClient.getUser(userId).then(function (user) {
userSettings.setUserInfo(userId, apiClient).then(function () {
self.dataLoaded = true;
saveUser(context, user, userSettings, instance.appearanceKey, apiClient).then(function () { let appearanceSettings = userSettings.getSubtitleAppearanceSettings(self.options.appearanceKey);
loading.hide(); loadForm(context, user, userSettings, appearanceSettings, apiClient);
if (enableSaveConfirmation) {
require(['toast'], function (toast) {
toast(globalize.translate('SettingsSaved'));
});
}
events.trigger(instance, 'saved');
}, function () {
loading.hide();
}); });
}); });
} }
function onSubmit(e) { submit() {
var self = this; this.onSubmit(null);
var apiClient = connectionManager.getApiClient(self.options.serverId); }
var userId = self.options.userId;
var userSettings = self.options.userSettings; destroy() {
this.options = null;
}
onSubmit(e) {
const self = this;
let apiClient = connectionManager.getApiClient(self.options.serverId);
let userId = self.options.userId;
let userSettings = self.options.userSettings;
userSettings.setUserInfo(userId, apiClient).then(function () { userSettings.setUserInfo(userId, apiClient).then(function () {
var enableSaveConfirmation = self.options.enableSaveConfirmation;
let enableSaveConfirmation = self.options.enableSaveConfirmation;
save(self, self.options.element, userId, userSettings, apiClient, enableSaveConfirmation); save(self, self.options.element, userId, userSettings, apiClient, enableSaveConfirmation);
}); });
@ -111,103 +214,8 @@ define(['require', 'globalize', 'appSettings', 'apphost', 'focusManager', 'loadi
if (e) { if (e) {
e.preventDefault(); e.preventDefault();
} }
return false; return false;
} }
}
function onSubtitleModeChange(e) { export default SubtitleSettings;
var view = dom.parentWithClass(e.target, 'subtitlesettings');
var subtitlesHelp = view.querySelectorAll('.subtitlesHelp');
for (var i = 0, length = subtitlesHelp.length; i < length; i++) {
subtitlesHelp[i].classList.add('hide');
}
view.querySelector('.subtitles' + this.value + 'Help').classList.remove('hide');
}
function onAppearanceFieldChange(e) {
var view = dom.parentWithClass(e.target, 'subtitlesettings');
var appearanceSettings = getSubtitleAppearanceObject(view);
var elements = {
window: view.querySelector('.subtitleappearance-preview-window'),
text: view.querySelector('.subtitleappearance-preview-text')
};
subtitleAppearanceHelper.applyStyles(elements, appearanceSettings);
}
function embed(options, self) {
require(['text!./subtitlesettings.template.html'], function (template) {
options.element.classList.add('subtitlesettings');
options.element.innerHTML = globalize.translateDocument(template, 'core');
options.element.querySelector('form').addEventListener('submit', onSubmit.bind(self));
options.element.querySelector('#selectSubtitlePlaybackMode').addEventListener('change', onSubtitleModeChange);
options.element.querySelector('#selectTextSize').addEventListener('change', onAppearanceFieldChange);
options.element.querySelector('#selectDropShadow').addEventListener('change', onAppearanceFieldChange);
options.element.querySelector('#selectFont').addEventListener('change', onAppearanceFieldChange);
options.element.querySelector('#inputTextColor').addEventListener('change', onAppearanceFieldChange);
options.element.querySelector('#inputTextBackground').addEventListener('change', onAppearanceFieldChange);
if (options.enableSaveButton) {
options.element.querySelector('.btnSave').classList.remove('hide');
}
if (appHost.supports('subtitleappearancesettings')) {
options.element.querySelector('.subtitleAppearanceSection').classList.remove('hide');
}
self.loadData();
if (options.autoFocus) {
focusManager.autoFocus(options.element);
}
});
}
function SubtitleSettings(options) {
this.options = options;
embed(options, this);
}
SubtitleSettings.prototype.loadData = function () {
var self = this;
var context = self.options.element;
loading.show();
var userId = self.options.userId;
var apiClient = connectionManager.getApiClient(self.options.serverId);
var userSettings = self.options.userSettings;
apiClient.getUser(userId).then(function (user) {
userSettings.setUserInfo(userId, apiClient).then(function () {
self.dataLoaded = true;
var appearanceSettings = userSettings.getSubtitleAppearanceSettings(self.options.appearanceKey);
loadForm(context, user, userSettings, appearanceSettings, apiClient);
});
});
};
SubtitleSettings.prototype.submit = function () {
onSubmit.call(this);
};
SubtitleSettings.prototype.destroy = function () {
this.options = null;
};
return SubtitleSettings;
});

103
src/controllers/user/subtitles.js
View file

@ -1,52 +1,63 @@
define(['subtitleSettings', 'userSettings', 'autoFocuser'], function (SubtitleSettings, userSettings, autoFocuser) { import subtitleSettings from 'subtitleSettings';
'use strict'; import {UserSettings, currentSettings as userSettings} from 'userSettings';
import autoFocuser from 'autoFocuser';
// Shortcuts export class SubtitleController {
const UserSettings = userSettings.UserSettings; constructor(view, params) {
this.userId = params.userId || ApiClient.getCurrentUserId();
this.currentSettings = this.userId === ApiClient.getCurrentUserId() ? userSettings : new UserSettings();
this.hasChanges = false;
this.subtitleSettingsInstance = null;
this.view = view;
return function (view, params) { view.addEventListener('viewshow', this.viewShow.bind(this));
function onBeforeUnload(e) { view.addEventListener('change', this.change.bind(this));
if (hasChanges) { view.addEventListener('viewbeforehide', this.viewBeforeHide.bind(this));
e.returnValue = 'You currently have unsaved changes. Are you sure you wish to leave?'; view.addEventListener('viewdestroy', this.viewDestroy.bind(this));
} }
viewShow() {
window.addEventListener('beforeunload', this.beforeUnload.bind(this));
if (this.subtitleSettingsInstance) {
this.subtitleSettingsInstance.loadData();
} else {
this.subtitleSettingsInstance = new subtitleSettings({
serverId: ApiClient.serverId(),
userId: this.userId,
element: this.view.querySelector('.settingsContainer'),
userSettings: this.currentSettings,
enableSaveButton: false,
enableSaveConfirmation: false,
autoFocus: autoFocuser.isEnabled()
});
} }
}
var subtitleSettingsInstance; viewDestroy() {
var hasChanges; if (this.subtitleSettingsInstance) {
var userId = params.userId || ApiClient.getCurrentUserId(); this.subtitleSettingsInstance.destroy();
var currentSettings = userId === ApiClient.getCurrentUserId() ? userSettings : new UserSettings(); this.subtitleSettingsInstance = null;
view.addEventListener('viewshow', function () { }
window.addEventListener('beforeunload', onBeforeUnload); }
if (subtitleSettingsInstance) { viewBeforeHide() {
subtitleSettingsInstance.loadData(); this.hasChanges = false;
} else {
subtitleSettingsInstance = new SubtitleSettings({
serverId: ApiClient.serverId(),
userId: userId,
element: view.querySelector('.settingsContainer'),
userSettings: currentSettings,
enableSaveButton: false,
enableSaveConfirmation: false,
autoFocus: autoFocuser.isEnabled()
});
}
});
view.addEventListener('change', function () {
hasChanges = true;
});
view.addEventListener('viewbeforehide', function () {
hasChanges = false;
if (subtitleSettingsInstance) { if (this.subtitleSettingsInstance) {
subtitleSettingsInstance.submit(); this.subtitleSettingsInstance.submit();
} }
}); }
view.addEventListener('viewdestroy', function () {
if (subtitleSettingsInstance) { change() {
subtitleSettingsInstance.destroy(); this.hasChanges = true;
subtitleSettingsInstance = null; }
}
}); beforeUnload(e) {
}; if (this.hasChanges) {
}); e.returnValue = 'You currently have unsaved changes. Are you sure you wish to leave?';
}
}
}
export default SubtitleController;

1
src/scripts/site.js
View file

@ -817,6 +817,7 @@ var AppInfo = {};
define('upNextDialog', [componentsPath + '/upnextdialog/upnextdialog'], returnFirstDependency); define('upNextDialog', [componentsPath + '/upnextdialog/upnextdialog'], returnFirstDependency);
define('subtitleAppearanceHelper', [componentsPath + '/subtitlesettings/subtitleappearancehelper'], returnFirstDependency); define('subtitleAppearanceHelper', [componentsPath + '/subtitlesettings/subtitleappearancehelper'], returnFirstDependency);
define('subtitleSettings', [componentsPath + '/subtitlesettings/subtitlesettings'], returnFirstDependency); define('subtitleSettings', [componentsPath + '/subtitlesettings/subtitlesettings'], returnFirstDependency);
define('settingsHelper', [componentsPath + '/settingshelper'], returnFirstDependency);
define('displaySettings', [componentsPath + '/displaySettings/displaySettings'], returnFirstDependency); define('displaySettings', [componentsPath + '/displaySettings/displaySettings'], returnFirstDependency);
define('playbackSettings', [componentsPath + '/playbackSettings/playbackSettings'], returnFirstDependency); define('playbackSettings', [componentsPath + '/playbackSettings/playbackSettings'], returnFirstDependency);
define('homescreenSettings', [componentsPath + '/homeScreenSettings/homeScreenSettings'], returnFirstDependency); define('homescreenSettings', [componentsPath + '/homeScreenSettings/homeScreenSettings'], returnFirstDependency);