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:
parent
e9151b6ee9
commit
257ce4974e
3 changed files with 276 additions and 298 deletions
|
@ -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",
|
||||||
|
|
|
@ -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
|
||||||
};
|
};
|
||||||
});
|
|
||||||
|
|
|
@ -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
|
||||||
|
};
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue