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

Migration of subtitleeditor to ES6 module

Browse source
This commit is contained in:
Cameron 2020-08-06 09:02:45 +01:00
parent 0ef8f3d038
commit b7d29eae1b
2 changed files with 369 additions and 357 deletions
Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

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

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

@ -1,15 +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) { import dialogHelper from 'dialogHelper';
'use strict'; 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; let currentItem;
let hasChanges;
var currentItem; function downloadRemoteSubtitles(context, id) {
var hasChanges; let url = 'Items/' + currentItem.Id + '/RemoteSearch/Subtitles/' + id;
function downloadRemoteSubtitles(context, id) { let apiClient = connectionManager.getApiClient(currentItem.ServerId);
var url = 'Items/' + currentItem.Id + '/RemoteSearch/Subtitles/' + id;
var apiClient = connectionManager.getApiClient(currentItem.ServerId);
apiClient.ajax({ apiClient.ajax({
type: 'POST', type: 'POST',
@ -18,19 +30,19 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
}).then(function () { }).then(function () {
hasChanges = true; hasChanges = true;
require(['toast'], function (toast) { import('toast').then(({default: toast}) => {
toast(globalize.translate('MessageDownloadQueued')); toast(globalize.translate('MessageDownloadQueued'));
}); });
focusManager.autoFocus(context); focusManager.autoFocus(context);
}); });
} }
function deleteLocalSubtitle(context, index) { function deleteLocalSubtitle(context, index) {
var msg = globalize.translate('MessageAreYouSureDeleteSubtitles'); let msg = globalize.translate('MessageAreYouSureDeleteSubtitles');
require(['confirm'], function (confirm) { import('confirm').then(({default: confirm}) => {
confirm.default({ confirm({
title: globalize.translate('ConfirmDeletion'), title: globalize.translate('ConfirmDeletion'),
text: msg, text: msg,
@ -40,10 +52,10 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
}).then(function () { }).then(function () {
loading.show(); loading.show();
var itemId = currentItem.Id; let itemId = currentItem.Id;
var url = 'Videos/' + itemId + '/Subtitles/' + index; let url = 'Videos/' + itemId + '/Subtitles/' + index;
var apiClient = connectionManager.getApiClient(currentItem.ServerId); let apiClient = connectionManager.getApiClient(currentItem.ServerId);
apiClient.ajax({ apiClient.ajax({
@ -56,16 +68,16 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
}); });
}); });
}); });
} }
function fillSubtitleList(context, item) { 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'; return s.Type === 'Subtitle';
}); });
var html = ''; let html = '';
if (subs.length) { if (subs.length) {
html += '<h2>' + globalize.translate('MySubtitles') + '</h2>'; html += '<h2>' + globalize.translate('MySubtitles') + '</h2>';
@ -73,10 +85,10 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
html += '<div>'; html += '<div>';
html += subs.map(function (s) { html += subs.map(function (s) {
var itemHtml = ''; let itemHtml = '';
var tagName = layoutManager.tv ? 'button' : 'div'; let tagName = layoutManager.tv ? 'button' : 'div';
var className = layoutManager.tv && s.Path ? 'listItem listItem-border btnDelete' : 'listItem listItem-border'; let className = layoutManager.tv && s.Path ? 'listItem listItem-border btnDelete' : 'listItem listItem-border';
if (layoutManager.tv) { if (layoutManager.tv) {
className += ' listItem-focusscale listItem-button'; className += ' listItem-focusscale listItem-button';
@ -115,7 +127,7 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
html += '</div>'; html += '</div>';
} }
var elem = context.querySelector('.subtitleList'); let elem = context.querySelector('.subtitleList');
if (subs.length) { if (subs.length) {
elem.classList.remove('hide'); elem.classList.remove('hide');
@ -123,32 +135,32 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
elem.classList.add('hide'); elem.classList.add('hide');
} }
elem.innerHTML = html; elem.innerHTML = html;
} }
function fillLanguages(context, apiClient, languages) { function fillLanguages(context, apiClient, languages) {
var selectLanguage = context.querySelector('#selectLanguage'); let selectLanguage = context.querySelector('#selectLanguage');
selectLanguage.innerHTML = languages.map(function (l) { selectLanguage.innerHTML = languages.map(function (l) {
return '<option value="' + l.ThreeLetterISOLanguageName + '">' + l.DisplayName + '</option>'; return '<option value="' + l.ThreeLetterISOLanguageName + '">' + l.DisplayName + '</option>';
}); });
var lastLanguage = userSettings.get('subtitleeditor-language'); let lastLanguage = userSettings.get('subtitleeditor-language');
if (lastLanguage) { if (lastLanguage) {
selectLanguage.value = lastLanguage; selectLanguage.value = lastLanguage;
} else { } else {
apiClient.getCurrentUser().then(function (user) { apiClient.getCurrentUser().then(function (user) {
var lang = user.Configuration.SubtitleLanguagePreference; let lang = user.Configuration.SubtitleLanguagePreference;
if (lang) { if (lang) {
selectLanguage.value = lang; selectLanguage.value = lang;
} }
}); });
} }
} }
function renderSearchResults(context, results) { function renderSearchResults(context, results) {
var lastProvider = ''; let lastProvider = '';
var html = ''; let html = '';
if (!results.length) { if (!results.length) {
context.querySelector('.noSearchResults').classList.remove('hide'); context.querySelector('.noSearchResults').classList.remove('hide');
@ -159,10 +171,10 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
context.querySelector('.noSearchResults').classList.add('hide'); context.querySelector('.noSearchResults').classList.add('hide');
for (var i = 0, length = results.length; i < length; i++) { for (let i = 0, length = results.length; i < length; i++) {
var result = results[i]; let result = results[i];
var provider = result.ProviderName; let provider = result.ProviderName;
if (provider !== lastProvider) { if (provider !== lastProvider) {
if (i > 0) { if (i > 0) {
@ -173,8 +185,8 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
lastProvider = provider; lastProvider = provider;
} }
var tagName = layoutManager.tv ? 'button' : 'div'; let tagName = layoutManager.tv ? 'button' : 'div';
var className = layoutManager.tv ? 'listItem listItem-border btnOptions' : 'listItem listItem-border'; let className = layoutManager.tv ? 'listItem listItem-border btnOptions' : 'listItem listItem-border';
if (layoutManager.tv) { if (layoutManager.tv) {
className += ' listItem-focusscale listItem-button'; className += ' listItem-focusscale listItem-button';
} }
@ -183,7 +195,7 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
html += '<span class="listItemIcon material-icons closed_caption"></span>'; 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 + '">'; html += '<div class="listItemBody ' + bodyClass + '">';
@ -220,34 +232,34 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
html += '</div>'; html += '</div>';
} }
var elem = context.querySelector('.subtitleResults'); let elem = context.querySelector('.subtitleResults');
elem.innerHTML = html; elem.innerHTML = html;
loading.hide(); loading.hide();
} }
function searchForSubtitles(context, language) { function searchForSubtitles(context, language) {
userSettings.set('subtitleeditor-language', language); userSettings.set('subtitleeditor-language', language);
loading.show(); loading.show();
var apiClient = connectionManager.getApiClient(currentItem.ServerId); let apiClient = connectionManager.getApiClient(currentItem.ServerId);
var url = apiClient.getUrl('Items/' + currentItem.Id + '/RemoteSearch/Subtitles/' + language); let url = apiClient.getUrl('Items/' + currentItem.Id + '/RemoteSearch/Subtitles/' + language);
apiClient.getJSON(url).then(function (results) { apiClient.getJSON(url).then(function (results) {
renderSearchResults(context, results); renderSearchResults(context, results);
}); });
} }
function reload(context, apiClient, itemId) { function reload(context, apiClient, itemId) {
context.querySelector('.noSearchResults').classList.add('hide'); context.querySelector('.noSearchResults').classList.add('hide');
function onGetItem(item) { function onGetItem(item) {
currentItem = item; currentItem = item;
fillSubtitleList(context, item); fillSubtitleList(context, item);
var file = item.Path || ''; let file = item.Path || '';
var index = Math.max(file.lastIndexOf('/'), file.lastIndexOf('\\')); let index = Math.max(file.lastIndexOf('/'), file.lastIndexOf('\\'));
if (index > -1) { if (index > -1) {
file = file.substring(index + 1); file = file.substring(index + 1);
} }
@ -268,56 +280,56 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
} else { } else {
onGetItem(itemId); onGetItem(itemId);
} }
} }
function onSearchSubmit(e) { 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); searchForSubtitles(dom.parentWithClass(form, 'formDialogContent'), lang);
e.preventDefault(); e.preventDefault();
return false; return false;
} }
function onSubtitleListClick(e) { function onSubtitleListClick(e) {
var btnDelete = dom.parentWithClass(e.target, 'btnDelete'); let btnDelete = dom.parentWithClass(e.target, 'btnDelete');
if (btnDelete) { if (btnDelete) {
var index = btnDelete.getAttribute('data-index'); let index = btnDelete.getAttribute('data-index');
var context = dom.parentWithClass(btnDelete, 'subtitleEditorDialog'); let context = dom.parentWithClass(btnDelete, 'subtitleEditorDialog');
deleteLocalSubtitle(context, index); deleteLocalSubtitle(context, index);
} }
} }
function onSubtitleResultsClick(e) { function onSubtitleResultsClick(e) {
var subtitleId; let subtitleId;
var context; let context;
var btnOptions = dom.parentWithClass(e.target, 'btnOptions'); let btnOptions = dom.parentWithClass(e.target, 'btnOptions');
if (btnOptions) { if (btnOptions) {
subtitleId = btnOptions.getAttribute('data-subid'); subtitleId = btnOptions.getAttribute('data-subid');
context = dom.parentWithClass(btnOptions, 'subtitleEditorDialog'); context = dom.parentWithClass(btnOptions, 'subtitleEditorDialog');
showDownloadOptions(btnOptions, context, subtitleId); showDownloadOptions(btnOptions, context, subtitleId);
} }
var btnDownload = dom.parentWithClass(e.target, 'btnDownload'); let btnDownload = dom.parentWithClass(e.target, 'btnDownload');
if (btnDownload) { if (btnDownload) {
subtitleId = btnDownload.getAttribute('data-subid'); subtitleId = btnDownload.getAttribute('data-subid');
context = dom.parentWithClass(btnDownload, 'subtitleEditorDialog'); context = dom.parentWithClass(btnDownload, 'subtitleEditorDialog');
downloadRemoteSubtitles(context, subtitleId); downloadRemoteSubtitles(context, subtitleId);
} }
} }
function showDownloadOptions(button, context, subtitleId) { function showDownloadOptions(button, context, subtitleId) {
var items = []; let items = [];
items.push({ items.push({
name: globalize.translate('Download'), name: globalize.translate('Download'),
id: 'download' id: 'download'
}); });
require(['actionsheet'], function (actionsheet) { import('actionsheet').then(({default: actionsheet}) => {
actionsheet.show({ actionsheet.show({
items: items, items: items,
positionTo: button positionTo: button
@ -332,21 +344,21 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
} }
}); });
}); });
} }
function centerFocus(elem, horiz, on) { function centerFocus(elem, horiz, on) {
require(['scrollHelper'], function (scrollHelper) { import('scrollHelper').then(({default: scrollHelper}) => {
var fn = on ? 'on' : 'off'; let fn = on ? 'on' : 'off';
scrollHelper.centerFocus[fn](elem, horiz); scrollHelper.centerFocus[fn](elem, horiz);
}); });
} }
function showEditorInternal(itemId, serverId, template) { function showEditorInternal(itemId, serverId, template) {
hasChanges = false; hasChanges = false;
var apiClient = connectionManager.getApiClient(serverId); let apiClient = connectionManager.getApiClient(serverId);
return apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(function (item) { return apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(function (item) {
var dialogOptions = { let dialogOptions = {
removeOnClose: true, removeOnClose: true,
scrollY: false scrollY: false
}; };
@ -357,7 +369,7 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
dialogOptions.size = 'small'; dialogOptions.size = 'small';
} }
var dlg = dialogHelper.createDialog(dialogOptions); let dlg = dialogHelper.createDialog(dialogOptions);
dlg.classList.add('formDialog'); dlg.classList.add('formDialog');
dlg.classList.add('subtitleEditorDialog'); dlg.classList.add('subtitleEditorDialog');
@ -368,7 +380,7 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
dlg.querySelector('.subtitleSearchForm').addEventListener('submit', onSearchSubmit); dlg.querySelector('.subtitleSearchForm').addEventListener('submit', onSearchSubmit);
var btnSubmit = dlg.querySelector('.btnSubmit'); let btnSubmit = dlg.querySelector('.btnSubmit');
if (layoutManager.tv) { if (layoutManager.tv) {
centerFocus(dlg.querySelector('.formDialogContent'), false, true); centerFocus(dlg.querySelector('.formDialogContent'), false, true);
@ -377,7 +389,7 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
btnSubmit.classList.add('hide'); btnSubmit.classList.add('hide');
} }
var editorContent = dlg.querySelector('.formDialogContent'); let editorContent = dlg.querySelector('.formDialogContent');
dlg.querySelector('.subtitleList').addEventListener('click', onSubtitleListClick); dlg.querySelector('.subtitleList').addEventListener('click', onSubtitleListClick);
dlg.querySelector('.subtitleResults').addEventListener('click', onSubtitleResultsClick); dlg.querySelector('.subtitleResults').addEventListener('click', onSubtitleResultsClick);
@ -408,19 +420,18 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
reload(editorContent, apiClient, item); reload(editorContent, apiClient, item);
}); });
}); });
} }
function showEditor(itemId, serverId) { function showEditor(itemId, serverId) {
loading.show(); loading.show();
return new Promise(function (resolve, reject) { 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); showEditorInternal(itemId, serverId, template).then(resolve, reject);
}); });
}); });
} }
return { export default {
show: showEditor show: showEditor
}; };
});