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/settingshelper.js",
"src/components/shortcuts.js",
"src/components/subtitleeditor/subtitleeditor.js",
"src/components/subtitlesettings/subtitleappearancehelper.js",
"src/components/subtitlesettings/subtitlesettings.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) {
'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;
let currentItem;
let hasChanges;
var currentItem;
var hasChanges;
function downloadRemoteSubtitles(context, id) {
let url = 'Items/' + currentItem.Id + '/RemoteSearch/Subtitles/' + id;
function downloadRemoteSubtitles(context, id) {
var url = 'Items/' + currentItem.Id + '/RemoteSearch/Subtitles/' + id;
var apiClient = connectionManager.getApiClient(currentItem.ServerId);
let apiClient = connectionManager.getApiClient(currentItem.ServerId);
apiClient.ajax({
type: 'POST',
@ -18,19 +30,19 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
}).then(function () {
hasChanges = true;
require(['toast'], function (toast) {
import('toast').then(({default: toast}) => {
toast(globalize.translate('MessageDownloadQueued'));
});
focusManager.autoFocus(context);
});
}
}
function deleteLocalSubtitle(context, index) {
var msg = globalize.translate('MessageAreYouSureDeleteSubtitles');
function deleteLocalSubtitle(context, index) {
let msg = globalize.translate('MessageAreYouSureDeleteSubtitles');
require(['confirm'], function (confirm) {
confirm.default({
import('confirm').then(({default: confirm}) => {
confirm({
title: globalize.translate('ConfirmDeletion'),
text: msg,
@ -40,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({
@ -56,16 +68,16 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
});
});
});
}
}
function fillSubtitleList(context, item) {
var streams = item.MediaStreams || [];
function fillSubtitleList(context, item) {
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>';
@ -73,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';
@ -115,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');
@ -123,32 +135,32 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
elem.classList.add('hide');
}
elem.innerHTML = html;
}
}
function fillLanguages(context, apiClient, languages) {
var selectLanguage = context.querySelector('#selectLanguage');
function fillLanguages(context, apiClient, languages) {
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;
}
});
}
}
}
function renderSearchResults(context, results) {
var lastProvider = '';
var html = '';
function renderSearchResults(context, results) {
let lastProvider = '';
let html = '';
if (!results.length) {
context.querySelector('.noSearchResults').classList.remove('hide');
@ -159,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) {
@ -173,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';
}
@ -183,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 + '">';
@ -220,34 +232,34 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
html += '</div>';
}
var elem = context.querySelector('.subtitleResults');
let elem = context.querySelector('.subtitleResults');
elem.innerHTML = html;
loading.hide();
}
}
function searchForSubtitles(context, language) {
function searchForSubtitles(context, language) {
userSettings.set('subtitleeditor-language', language);
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);
});
}
}
function reload(context, apiClient, itemId) {
function reload(context, apiClient, itemId) {
context.querySelector('.noSearchResults').classList.add('hide');
function onGetItem(item) {
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);
}
@ -268,56 +280,56 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
} else {
onGetItem(itemId);
}
}
}
function onSearchSubmit(e) {
var form = this;
function onSearchSubmit(e) {
let form = this;
var lang = form.querySelector('#selectLanguage', form).value;
let lang = form.querySelector('#selectLanguage', form).value;
searchForSubtitles(dom.parentWithClass(form, 'formDialogContent'), lang);
e.preventDefault();
return false;
}
}
function onSubtitleListClick(e) {
var btnDelete = dom.parentWithClass(e.target, 'btnDelete');
function onSubtitleListClick(e) {
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;
function onSubtitleResultsClick(e) {
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');
downloadRemoteSubtitles(context, subtitleId);
}
}
}
function showDownloadOptions(button, context, subtitleId) {
var items = [];
function showDownloadOptions(button, context, subtitleId) {
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
@ -332,21 +344,21 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
}
});
});
}
}
function centerFocus(elem, horiz, on) {
require(['scrollHelper'], function (scrollHelper) {
var fn = on ? 'on' : 'off';
function centerFocus(elem, horiz, on) {
import('scrollHelper').then(({default: scrollHelper}) => {
let fn = on ? 'on' : 'off';
scrollHelper.centerFocus[fn](elem, horiz);
});
}
}
function showEditorInternal(itemId, serverId, template) {
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
};
@ -357,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');
@ -368,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);
@ -377,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);
@ -408,19 +420,18 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
reload(editorContent, apiClient, item);
});
});
}
}
function showEditor(itemId, serverId) {
function showEditor(itemId, serverId) {
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
};
});
};