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/sanatizefilename.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/syncPlay/groupSelectionMenu.js",
"src/components/syncPlay/playbackPermissionManager.js",
"src/components/syncPlay/syncPlayManager.js",
"src/components/syncPlay/timeSyncManager.js",
"src/controllers/dashboard/logs.js",
"src/controllers/user/subtitles.js",
"src/controllers/dashboard/plugins/repositories.js",
"src/plugins/bookPlayer/plugin.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
};

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

@ -1,9 +1,11 @@
define([], function () {
'use strict';
/**
* Subtitle settings visual helper.
* @module components/subtitleSettings/subtitleAppearanceHelper
*/
function getTextStyles(settings, isCue) {
var list = [];
let list = [];
if (isCue) {
switch (settings.textSize || '') {
@ -72,12 +74,12 @@ define([], function () {
break;
}
var background = settings.textBackground || 'transparent';
const background = settings.textBackground || 'transparent';
if (background) {
list.push({ name: 'background-color', value: background });
}
var textColor = settings.textColor || '#ffffff';
const textColor = settings.textColor || '#ffffff';
if (textColor) {
list.push({ name: 'color', value: textColor });
}
@ -117,32 +119,27 @@ define([], function () {
return list;
}
function getWindowStyles(settings) {
return [];
}
function getStyles(settings, isCue) {
export function getStyles(settings, isCue) {
return {
text: getTextStyles(settings, isCue),
window: getWindowStyles(settings)
window: []
};
}
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;
}
}
function applyStyles(elements, appearanceSettings) {
export function applyStyles(elements, appearanceSettings) {
var styles = getStyles(appearanceSettings);
let styles = getStyles(appearanceSettings);
if (elements.text) {
applyStyleList(styles.text, elements.text);
@ -151,9 +148,7 @@ define([], function () {
applyStyleList(styles.window, elements.window);
}
}
return {
export default {
getStyles: getStyles,
applyStyles: applyStyles
};
});

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

@ -1,20 +1,27 @@
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) {
'use strict';
import require from 'require';
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 = '';
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;
}
/**
* Subtitle settings.
* @module components/subtitleSettings/subtitleSettings
*/
function getSubtitleAppearanceObject(context) {
var appearanceSettings = {};
let appearanceSettings = {};
appearanceSettings.textSize = context.querySelector('#selectTextSize').value;
appearanceSettings.dropShadow = context.querySelector('#selectDropShadow').value;
@ -33,9 +40,9 @@ define(['require', 'globalize', 'appSettings', 'apphost', 'focusManager', 'loadi
context.querySelector('.fldBurnIn').classList.remove('hide');
}
var selectSubtitleLanguage = context.querySelector('#selectSubtitleLanguage');
let selectSubtitleLanguage = context.querySelector('#selectSubtitleLanguage');
populateLanguages(selectSubtitleLanguage, allCultures);
settingsHelper.populateLanguages(selectSubtitleLanguage, allCultures);
selectSubtitleLanguage.value = user.Configuration.SubtitleLanguagePreference || '';
context.querySelector('#selectSubtitlePlaybackMode').value = user.Configuration.SubtitleMode || '';
@ -60,7 +67,7 @@ define(['require', 'globalize', 'appSettings', 'apphost', 'focusManager', 'loadi
function saveUser(context, user, userSettingsInstance, appearanceKey, apiClient) {
var appearanceSettings = userSettingsInstance.getSubtitleAppearanceSettings(appearanceKey);
let appearanceSettings = userSettingsInstance.getSubtitleAppearanceSettings(appearanceKey);
appearanceSettings = Object.assign(appearanceSettings, getSubtitleAppearanceObject(context));
userSettingsInstance.setSubtitleAppearanceSettings(appearanceSettings, appearanceKey);
@ -96,31 +103,12 @@ define(['require', 'globalize', 'appSettings', 'apphost', 'focusManager', 'loadi
});
}
function onSubmit(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 () {
var enableSaveConfirmation = self.options.enableSaveConfirmation;
save(self, self.options.element, userId, userSettings, apiClient, enableSaveConfirmation);
});
// Disable default form submission
if (e) {
e.preventDefault();
}
return false;
}
function onSubtitleModeChange(e) {
var view = dom.parentWithClass(e.target, 'subtitlesettings');
let view = dom.parentWithClass(e.target, 'subtitlesettings');
var subtitlesHelp = view.querySelectorAll('.subtitlesHelp');
for (var i = 0, length = subtitlesHelp.length; i < length; i++) {
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');
@ -128,11 +116,11 @@ define(['require', 'globalize', 'appSettings', 'apphost', 'focusManager', 'loadi
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'),
text: view.querySelector('.subtitleappearance-preview-text')
};
@ -147,7 +135,7 @@ define(['require', 'globalize', 'appSettings', 'apphost', 'focusManager', 'loadi
options.element.classList.add('subtitlesettings');
options.element.innerHTML = globalize.translateDocument(template, 'core');
options.element.querySelector('form').addEventListener('submit', onSubmit.bind(self));
options.element.querySelector('form').addEventListener('submit', self.onSubmit.bind(self));
options.element.querySelector('#selectSubtitlePlaybackMode').addEventListener('change', onSubtitleModeChange);
options.element.querySelector('#selectTextSize').addEventListener('change', onAppearanceFieldChange);
@ -172,42 +160,62 @@ define(['require', 'globalize', 'appSettings', 'apphost', 'focusManager', 'loadi
});
}
function SubtitleSettings(options) {
export class SubtitleSettings {
constructor(options) {
this.options = options;
embed(options, this);
}
SubtitleSettings.prototype.loadData = function () {
var self = this;
var context = self.options.element;
loadData() {
let self = this;
let context = self.options.element;
loading.show();
var userId = self.options.userId;
var apiClient = connectionManager.getApiClient(self.options.serverId);
var userSettings = self.options.userSettings;
let userId = self.options.userId;
let apiClient = connectionManager.getApiClient(self.options.serverId);
let 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);
let appearanceSettings = userSettings.getSubtitleAppearanceSettings(self.options.appearanceKey);
loadForm(context, user, userSettings, appearanceSettings, apiClient);
});
});
};
}
SubtitleSettings.prototype.submit = function () {
onSubmit.call(this);
};
submit() {
this.onSubmit(null);
}
SubtitleSettings.prototype.destroy = function () {
destroy() {
this.options = null;
};
}
return SubtitleSettings;
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 () {
let enableSaveConfirmation = self.options.enableSaveConfirmation;
save(self, self.options.element, userId, userSettings, apiClient, enableSaveConfirmation);
});
// Disable default form submission
if (e) {
e.preventDefault();
}
return false;
}
}
export default SubtitleSettings;

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

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