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

~ migrate subtitlesettings.js to es6

~ migrate subtitleappearancehelper.js to es6
~ replace duplicated "populateLanguages" function ( playbacksettings.js:18 )
~ replace duplicated "onSubmit" function ( playbacksettings.js:266 )
- remove empty function getWindowStyles

Signed-off-by: Christoph Potas <christoph286@googlemail.com>
This commit is contained in:
Christoph Potas 2020-05-03 20:30:35 +02:00
parent e9151b6ee9
commit 257ce4974e
3 changed files with 276 additions and 298 deletions

View file

@ -90,6 +90,8 @@
"test": [ "test": [
"src/components/autoFocuser.js", "src/components/autoFocuser.js",
"src/components/cardbuilder/cardBuilder.js", "src/components/cardbuilder/cardBuilder.js",
"src/components/subtitlesettings/subtitlesettings.js",
"src/components/subtitlesettings/subtitleappearancehelper.js",
"src/scripts/dom.js", "src/scripts/dom.js",
"src/components/filedownloader.js", "src/components/filedownloader.js",
"src/scripts/filesystem.js", "src/scripts/filesystem.js",

View file

@ -1,9 +1,6 @@
define([], function () { function getTextStyles(settings, isCue) {
"use strict";
function getTextStyles(settings, isCue) { let list = [];
var list = [];
if (isCue) { if (isCue) {
switch (settings.textSize || '') { switch (settings.textSize || '') {
@ -72,12 +69,12 @@ define([], function () {
break; break;
} }
var background = settings.textBackground || 'transparent'; const background = settings.textBackground || 'transparent';
if (background) { if (background) {
list.push({ name: 'background-color', value: background }); list.push({ name: 'background-color', value: background });
} }
var textColor = settings.textColor || '#ffffff'; const textColor = settings.textColor || '#ffffff';
if (textColor) { if (textColor) {
list.push({ name: 'color', value: textColor }); list.push({ name: 'color', value: textColor });
} }
@ -115,34 +112,29 @@ define([], function () {
} }
return list; return list;
} }
function getWindowStyles(settings) { export function getStyles(settings, isCue) {
return [];
}
function getStyles(settings, isCue) {
return { return {
text: getTextStyles(settings, isCue), text: getTextStyles(settings, isCue),
window: getWindowStyles(settings) window: []
}; };
} }
function applyStyleList(styles, elem) { function applyStyleList(styles, elem) {
for (var i = 0, length = styles.length; i < length; i++) { for (let i = 0, length = styles.length; i < length; i++) {
var style = styles[i]; let style = styles[i];
elem.style[style.name] = style.value; elem.style[style.name] = style.value;
} }
} }
function applyStyles(elements, appearanceSettings) { export function applyStyles(elements, appearanceSettings) {
var styles = getStyles(appearanceSettings); let styles = getStyles(appearanceSettings);
if (elements.text) { if (elements.text) {
applyStyleList(styles.text, elements.text); applyStyleList(styles.text, elements.text);
@ -150,10 +142,8 @@ define([], function () {
if (elements.window) { if (elements.window) {
applyStyleList(styles.window, elements.window); applyStyleList(styles.window, elements.window);
} }
} }
export default {
return {
getStyles: getStyles, getStyles: getStyles,
applyStyles: applyStyles applyStyles: applyStyles
}; };
});

View file

@ -1,20 +1,22 @@
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 playbacksettings from 'playbacksettings';
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) { function getSubtitleAppearanceObject(context) {
var html = ""; let appearanceSettings = {};
html += "<option value=''>" + globalize.translate('AnyLanguage') + "</option>";
for (var i = 0, length = languages.length; i < length; i++) {
var culture = languages[i];
html += "<option value='" + culture.ThreeLetterISOLanguageName + "'>" + culture.DisplayName + "</option>";
}
select.innerHTML = html;
}
function getSubtitleAppearanceObject(context) {
var appearanceSettings = {};
appearanceSettings.textSize = context.querySelector('#selectTextSize').value; appearanceSettings.textSize = context.querySelector('#selectTextSize').value;
appearanceSettings.dropShadow = context.querySelector('#selectDropShadow').value; appearanceSettings.dropShadow = context.querySelector('#selectDropShadow').value;
@ -23,9 +25,9 @@ define(['require', 'globalize', 'appSettings', 'apphost', 'focusManager', 'loadi
appearanceSettings.textColor = context.querySelector('#inputTextColor').value; appearanceSettings.textColor = context.querySelector('#inputTextColor').value;
return appearanceSettings; return appearanceSettings;
} }
function loadForm(context, user, userSettings, appearanceSettings, apiClient) { function loadForm(context, user, userSettings, appearanceSettings, apiClient) {
apiClient.getCultures().then(function (allCultures) { apiClient.getCultures().then(function (allCultures) {
@ -33,9 +35,9 @@ define(['require', 'globalize', 'appSettings', 'apphost', 'focusManager', 'loadi
context.querySelector('.fldBurnIn').classList.remove('hide'); context.querySelector('.fldBurnIn').classList.remove('hide');
} }
var selectSubtitleLanguage = context.querySelector('#selectSubtitleLanguage'); let selectSubtitleLanguage = context.querySelector( '#selectSubtitleLanguage' );
populateLanguages(selectSubtitleLanguage, allCultures); playbacksettings.populateLanguages(selectSubtitleLanguage, allCultures);
selectSubtitleLanguage.value = user.Configuration.SubtitleLanguagePreference || ""; selectSubtitleLanguage.value = user.Configuration.SubtitleLanguagePreference || "";
context.querySelector('#selectSubtitlePlaybackMode').value = user.Configuration.SubtitleMode || ""; context.querySelector('#selectSubtitlePlaybackMode').value = user.Configuration.SubtitleMode || "";
@ -56,11 +58,11 @@ define(['require', 'globalize', 'appSettings', 'apphost', 'focusManager', 'loadi
loading.hide(); loading.hide();
}); });
} }
function saveUser(context, user, userSettingsInstance, appearanceKey, apiClient) { function saveUser(context, user, userSettingsInstance, appearanceKey, apiClient) {
var appearanceSettings = userSettingsInstance.getSubtitleAppearanceSettings(appearanceKey); let appearanceSettings = userSettingsInstance.getSubtitleAppearanceSettings( appearanceKey );
appearanceSettings = Object.assign(appearanceSettings, getSubtitleAppearanceObject(context)); appearanceSettings = Object.assign(appearanceSettings, getSubtitleAppearanceObject(context));
userSettingsInstance.setSubtitleAppearanceSettings(appearanceSettings, appearanceKey); userSettingsInstance.setSubtitleAppearanceSettings(appearanceSettings, appearanceKey);
@ -69,9 +71,9 @@ define(['require', 'globalize', 'appSettings', 'apphost', 'focusManager', 'loadi
user.Configuration.SubtitleMode = context.querySelector('#selectSubtitlePlaybackMode').value; user.Configuration.SubtitleMode = context.querySelector('#selectSubtitlePlaybackMode').value;
return apiClient.updateUserConfiguration(user.Id, user.Configuration); return apiClient.updateUserConfiguration(user.Id, user.Configuration);
} }
function save(instance, context, userId, userSettings, apiClient, enableSaveConfirmation) { export function save(instance, context, userId, userSettings, apiClient, enableSaveConfirmation) {
loading.show(); loading.show();
@ -94,60 +96,41 @@ define(['require', 'globalize', 'appSettings', 'apphost', 'focusManager', 'loadi
loading.hide(); loading.hide();
}); });
}); });
} }
function onSubmit(e) { function onSubtitleModeChange(e) {
var self = this;
var apiClient = connectionManager.getApiClient(self.options.serverId);
var userId = self.options.userId;
var userSettings = self.options.userSettings;
userSettings.setUserInfo(userId, apiClient).then(function () { let view = dom.parentWithClass( e.target, 'subtitlesettings' );
var enableSaveConfirmation = self.options.enableSaveConfirmation;
save(self, self.options.element, userId, userSettings, apiClient, enableSaveConfirmation);
});
// Disable default form submission let subtitlesHelp = view.querySelectorAll( '.subtitlesHelp' );
if (e) { for (let i = 0, length = subtitlesHelp.length; i < length; i++) {
e.preventDefault();
}
return false;
}
function onSubtitleModeChange(e) {
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'); subtitlesHelp[i].classList.add('hide');
} }
view.querySelector('.subtitles' + this.value + 'Help').classList.remove('hide'); view.querySelector('.subtitles' + this.value + 'Help').classList.remove('hide');
} }
function onAppearanceFieldChange(e) { function onAppearanceFieldChange(e) {
var view = dom.parentWithClass(e.target, 'subtitlesettings'); let view = dom.parentWithClass( e.target, 'subtitlesettings' );
var appearanceSettings = getSubtitleAppearanceObject(view); let appearanceSettings = getSubtitleAppearanceObject( view );
var elements = { let elements = {
window: view.querySelector('.subtitleappearance-preview-window'), window: view.querySelector( '.subtitleappearance-preview-window' ),
text: view.querySelector('.subtitleappearance-preview-text') text: view.querySelector( '.subtitleappearance-preview-text' )
}; };
subtitleAppearanceHelper.applyStyles(elements, appearanceSettings); subtitleAppearanceHelper.applyStyles(elements, appearanceSettings);
} }
function embed(options, self) { export function embed(options, self) {
require(['text!./subtitlesettings.template.html'], function (template) { require(['text!./subtitlesettings.template.html'], function (template) {
options.element.classList.add('subtitlesettings'); options.element.classList.add('subtitlesettings');
options.element.innerHTML = globalize.translateDocument(template, 'core'); options.element.innerHTML = globalize.translateDocument(template, 'core');
options.element.querySelector('form').addEventListener('submit', onSubmit.bind(self)); options.element.querySelector('form').addEventListener('submit', playbacksettings.OnSubmit.bind(self));
options.element.querySelector('#selectSubtitlePlaybackMode').addEventListener('change', onSubtitleModeChange); options.element.querySelector('#selectSubtitlePlaybackMode').addEventListener('change', onSubtitleModeChange);
options.element.querySelector('#selectTextSize').addEventListener('change', onAppearanceFieldChange); options.element.querySelector('#selectTextSize').addEventListener('change', onAppearanceFieldChange);
@ -170,44 +153,47 @@ define(['require', 'globalize', 'appSettings', 'apphost', 'focusManager', 'loadi
focusManager.autoFocus(options.element); focusManager.autoFocus(options.element);
} }
}); });
} }
function SubtitleSettings(options) { export function SubtitleSettings(options) {
this.options = options; this.options = options;
embed(options, this); embed(options, this);
} }
SubtitleSettings.prototype.loadData = function () { SubtitleSettings.prototype.loadData = function () {
var self = this; let self = this;
var context = self.options.element; let context = self.options.element;
loading.show(); loading.show();
var userId = self.options.userId; let userId = self.options.userId;
var apiClient = connectionManager.getApiClient(self.options.serverId); let apiClient = connectionManager.getApiClient( self.options.serverId );
var userSettings = self.options.userSettings; let userSettings = self.options.userSettings;
apiClient.getUser(userId).then(function (user) { apiClient.getUser(userId).then(function (user) {
userSettings.setUserInfo(userId, apiClient).then(function () { userSettings.setUserInfo(userId, apiClient).then(function () {
self.dataLoaded = true; self.dataLoaded = true;
var appearanceSettings = userSettings.getSubtitleAppearanceSettings(self.options.appearanceKey); let appearanceSettings = userSettings.getSubtitleAppearanceSettings( self.options.appearanceKey );
loadForm(context, user, userSettings, appearanceSettings, apiClient); loadForm(context, user, userSettings, appearanceSettings, apiClient);
}); });
}); });
}; };
SubtitleSettings.prototype.submit = function () { SubtitleSettings.prototype.submit = function () {
onSubmit.call(this); playbacksettings.onSubmit.call(this);
}; };
SubtitleSettings.prototype.destroy = function () { SubtitleSettings.prototype.destroy = function () {
this.options = null; this.options = null;
}; };
return SubtitleSettings; export default {
}); save: save,
embed: embed,
SubtitleSettings: SubtitleSettings
};