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 #1769 from Camc314/migrate-to-ES6-64

Browse source 
Migration of subtitleeditor and subtitlesync to ES6 modules
This commit is contained in:
dkanada 2020-08-09 00:21:27 +09:00 • committed by GitHub
commit 155a4e16bb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 480 additions and 468 deletions
Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -163,6 +163,8 @@
"src/components/search/searchresults.js",
"src/components/settingshelper.js",
"src/components/shortcuts.js",
"src/components/subtitleeditor/subtitleeditor.js",
"src/components/subtitlesync/subtitlesync.js",
"src/components/subtitlesettings/subtitleappearancehelper.js",
"src/components/subtitlesettings/subtitlesettings.js",
"src/components/syncPlay/groupSelectionMenu.js",

131
src/components/subtitleeditor/subtitleeditor.js
View file

@ -1,16 +1,27 @@
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;
var currentItem;
var hasChanges;
let currentItem;
let hasChanges;
function downloadRemoteSubtitles(context, id) {
var url = 'Items/' + currentItem.Id + '/RemoteSearch/Subtitles/' + id;
let url = 'Items/' + currentItem.Id + '/RemoteSearch/Subtitles/' + id;
var apiClient = connectionManager.getApiClient(currentItem.ServerId);
let apiClient = connectionManager.getApiClient(currentItem.ServerId);
apiClient.ajax({
type: 'POST',
@ -19,7 +30,7 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
}).then(function () {
hasChanges = true;
require(['toast'], function (toast) {
import('toast').then(({default: toast}) => {
toast(globalize.translate('MessageDownloadQueued'));
});
@ -28,10 +39,10 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
}
function deleteLocalSubtitle(context, index) {
var msg = globalize.translate('MessageAreYouSureDeleteSubtitles');
let msg = globalize.translate('MessageAreYouSureDeleteSubtitles');
require(['confirm'], function (confirm) {
confirm.default({
import('confirm').then(({default: confirm}) => {
confirm({
title: globalize.translate('ConfirmDeletion'),
text: msg,
@ -41,10 +52,10 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
}).then(function () {
loading.show();
var itemId = currentItem.Id;
var url = 'Videos/' + itemId + '/Subtitles/' + index;
let itemId = currentItem.Id;
let url = 'Videos/' + itemId + '/Subtitles/' + index;
var apiClient = connectionManager.getApiClient(currentItem.ServerId);
let apiClient = connectionManager.getApiClient(currentItem.ServerId);
apiClient.ajax({
@ -60,13 +71,13 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
}
function fillSubtitleList(context, item) {
var streams = item.MediaStreams || [];
let streams = item.MediaStreams || [];
var subs = streams.filter(function (s) {
let subs = streams.filter(function (s) {
return s.Type === 'Subtitle';
});
var html = '';
let html = '';
if (subs.length) {
html += '<h2>' + globalize.translate('MySubtitles') + '</h2>';
@ -74,10 +85,10 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
html += '<div>';
html += subs.map(function (s) {
var itemHtml = '';
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';
@ -116,7 +127,7 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
html += '</div>';
}
var elem = context.querySelector('.subtitleList');
let elem = context.querySelector('.subtitleList');
if (subs.length) {
elem.classList.remove('hide');
@ -127,18 +138,18 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
}
function fillLanguages(context, apiClient, languages) {
var selectLanguage = context.querySelector('#selectLanguage');
let selectLanguage = context.querySelector('#selectLanguage');
selectLanguage.innerHTML = languages.map(function (l) {
return '<option value="' + l.ThreeLetterISOLanguageName + '">' + l.DisplayName + '</option>';
});
var lastLanguage = userSettings.get('subtitleeditor-language');
let lastLanguage = userSettings.get('subtitleeditor-language');
if (lastLanguage) {
selectLanguage.value = lastLanguage;
} else {
apiClient.getCurrentUser().then(function (user) {
var lang = user.Configuration.SubtitleLanguagePreference;
let lang = user.Configuration.SubtitleLanguagePreference;
if (lang) {
selectLanguage.value = lang;
@ -148,8 +159,8 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
}
function renderSearchResults(context, results) {
var lastProvider = '';
var html = '';
let lastProvider = '';
let html = '';
if (!results.length) {
context.querySelector('.noSearchResults').classList.remove('hide');
@ -160,10 +171,10 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
context.querySelector('.noSearchResults').classList.add('hide');
for (var i = 0, length = results.length; i < length; i++) {
var result = results[i];
for (let i = 0, length = results.length; i < length; i++) {
let result = results[i];
var provider = result.ProviderName;
let provider = result.ProviderName;
if (provider !== lastProvider) {
if (i > 0) {
@ -174,8 +185,8 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
lastProvider = provider;
}
var tagName = layoutManager.tv ? 'button' : 'div';
var className = layoutManager.tv ? 'listItem listItem-border btnOptions' : 'listItem listItem-border';
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';
}
@ -184,7 +195,7 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
html += '<span class="listItemIcon material-icons closed_caption"></span>';
var bodyClass = result.Comment || result.IsHashMatch ? 'three-line' : 'two-line';
let bodyClass = result.Comment || result.IsHashMatch ? 'three-line' : 'two-line';
html += '<div class="listItemBody ' + bodyClass + '">';
@ -221,7 +232,7 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
html += '</div>';
}
var elem = context.querySelector('.subtitleResults');
let elem = context.querySelector('.subtitleResults');
elem.innerHTML = html;
loading.hide();
@ -232,8 +243,8 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
loading.show();
var apiClient = connectionManager.getApiClient(currentItem.ServerId);
var url = apiClient.getUrl('Items/' + currentItem.Id + '/RemoteSearch/Subtitles/' + language);
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);
@ -247,8 +258,8 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
currentItem = item;
fillSubtitleList(context, item);
var file = item.Path || '';
var index = Math.max(file.lastIndexOf('/'), file.lastIndexOf('\\'));
let file = item.Path || '';
let index = Math.max(file.lastIndexOf('/'), file.lastIndexOf('\\'));
if (index > -1) {
file = file.substring(index + 1);
}
@ -272,9 +283,9 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
}
function onSearchSubmit(e) {
var form = this;
let form = this;
var lang = form.querySelector('#selectLanguage', form).value;
let lang = form.querySelector('#selectLanguage', form).value;
searchForSubtitles(dom.parentWithClass(form, 'formDialogContent'), lang);
@ -283,26 +294,26 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
}
function onSubtitleListClick(e) {
var btnDelete = dom.parentWithClass(e.target, 'btnDelete');
let btnDelete = dom.parentWithClass(e.target, 'btnDelete');
if (btnDelete) {
var index = btnDelete.getAttribute('data-index');
var context = dom.parentWithClass(btnDelete, 'subtitleEditorDialog');
let index = btnDelete.getAttribute('data-index');
let context = dom.parentWithClass(btnDelete, 'subtitleEditorDialog');
deleteLocalSubtitle(context, index);
}
}
function onSubtitleResultsClick(e) {
var subtitleId;
var context;
let subtitleId;
let context;
var btnOptions = dom.parentWithClass(e.target, 'btnOptions');
let btnOptions = dom.parentWithClass(e.target, 'btnOptions');
if (btnOptions) {
subtitleId = btnOptions.getAttribute('data-subid');
context = dom.parentWithClass(btnOptions, 'subtitleEditorDialog');
showDownloadOptions(btnOptions, context, subtitleId);
}
var btnDownload = dom.parentWithClass(e.target, 'btnDownload');
let btnDownload = dom.parentWithClass(e.target, 'btnDownload');
if (btnDownload) {
subtitleId = btnDownload.getAttribute('data-subid');
context = dom.parentWithClass(btnDownload, 'subtitleEditorDialog');
@ -311,14 +322,14 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
}
function showDownloadOptions(button, context, subtitleId) {
var items = [];
let items = [];
items.push({
name: globalize.translate('Download'),
id: 'download'
});
require(['actionsheet'], function (actionsheet) {
import('actionsheet').then(({default: actionsheet}) => {
actionsheet.show({
items: items,
positionTo: button
@ -336,9 +347,8 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
}
function centerFocus(elem, horiz, on) {
require(['scrollHelper'], function (scrollHelper) {
scrollHelper = scrollHelper.default || scrollHelper;
var fn = on ? 'on' : 'off';
import('scrollHelper').then(({default: scrollHelper}) => {
let fn = on ? 'on' : 'off';
scrollHelper.centerFocus[fn](elem, horiz);
});
}
@ -346,9 +356,9 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
function showEditorInternal(itemId, serverId, template) {
hasChanges = false;
var apiClient = connectionManager.getApiClient(serverId);
let apiClient = connectionManager.getApiClient(serverId);
return apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(function (item) {
var dialogOptions = {
let dialogOptions = {
removeOnClose: true,
scrollY: false
};
@ -359,7 +369,7 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
dialogOptions.size = 'small';
}
var dlg = dialogHelper.createDialog(dialogOptions);
let dlg = dialogHelper.createDialog(dialogOptions);
dlg.classList.add('formDialog');
dlg.classList.add('subtitleEditorDialog');
@ -370,7 +380,7 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
dlg.querySelector('.subtitleSearchForm').addEventListener('submit', onSearchSubmit);
var btnSubmit = dlg.querySelector('.btnSubmit');
let btnSubmit = dlg.querySelector('.btnSubmit');
if (layoutManager.tv) {
centerFocus(dlg.querySelector('.formDialogContent'), false, true);
@ -379,7 +389,7 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
btnSubmit.classList.add('hide');
}
var editorContent = dlg.querySelector('.formDialogContent');
let editorContent = dlg.querySelector('.formDialogContent');
dlg.querySelector('.subtitleList').addEventListener('click', onSubtitleListClick);
dlg.querySelector('.subtitleResults').addEventListener('click', onSubtitleResultsClick);
@ -416,13 +426,12 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
loading.show();
return new Promise(function (resolve, reject) {
require(['text!./subtitleeditor.template.html'], function (template) {
import('text!./subtitleeditor.template.html').then(({default: template}) => {
showEditorInternal(itemId, serverId, template).then(resolve, reject);
});
});
}
return {
export default {
show: showEditor
};
});

45
src/components/subtitlesync/subtitlesync.js
View file

@ -1,16 +1,16 @@
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;
var player;
var subtitleSyncSlider;
var subtitleSyncTextField;
var subtitleSyncCloseButton;
var subtitleSyncContainer;
let player;
let subtitleSyncSlider;
let subtitleSyncTextField;
let subtitleSyncCloseButton;
let subtitleSyncContainer;
function init(instance) {
var parent = document.createElement('div');
const parent = document.createElement('div');
document.body.appendChild(parent);
parent.innerHTML = template;
@ -41,7 +41,7 @@ define(['playbackManager', 'layoutManager', 'text!./subtitlesync.template.html',
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);
let inputOffset = /[-+]?\d+\.?\d*/g.exec(this.textContent);
if (inputOffset) {
inputOffset = inputOffset[0];
@ -92,7 +92,7 @@ define(['playbackManager', 'layoutManager', 'text!./subtitlesync.template.html',
});
subtitleSyncSlider.getBubbleHtml = function (value) {
var newOffset = getOffsetFromPercentage(value);
const newOffset = getOffsetFromPercentage(value);
return '<h1 class="sliderBubbleText">' +
(newOffset > 0 ? '+' : '') + parseFloat(newOffset) + 's' +
'</h1>';
@ -108,7 +108,7 @@ define(['playbackManager', 'layoutManager', 'text!./subtitlesync.template.html',
function getOffsetFromPercentage(value) {
// convert percent to fraction
var offset = (value - 50) / 50;
let offset = (value - 50) / 50;
// multiply by offset min/max range value (-x to +x) :
offset *= 30;
return offset.toFixed(1);
@ -116,32 +116,33 @@ define(['playbackManager', 'layoutManager', 'text!./subtitlesync.template.html',
function getPercentageFromOffset(value) {
// divide by offset min/max range value (-x to +x) :
var percentValue = value / 30;
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;