cotugno/jellyfin-web
2
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web.git synced 2024-11-17 19:08:18 -07:00
Code Issues Packages Projects Releases Wiki Activity

add subtitle management page

Browse Source
This commit is contained in:
Luke Pulverenti 2014-05-17 00:24:10 -04:00
parent 04e69d03e9
commit f7e9566f8f
9 changed files with 474 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
dashboard-ui/css/metadataeditor.css
View File

@ -207,11 +207,35 @@
margin-right: 10px;
}
.subtitleViewerContent {
overflow: auto;
width: 200px;
height: 200px;
}
@media all and (min-width: 400px) {
.subtitleViewerContent {
width: 300px;
}
}
@media all and (min-width: 500px) {
.subtitleViewerContent {
width: 400px;
}
}
@media all and (min-width: 600px) {
.popupIdentify {
width: 400px;
}
.subtitleViewerContent {
width: 500px;
}
}
@media all and (min-width: 700px) {
@ -223,6 +247,10 @@
.popupIdentify {
width: 500px;
}
.subtitleViewerContent {
width: 600px;
}
}
@media all and (min-width: 800px) {
@ -344,6 +372,10 @@
.popupIdentify form, .identificationSearchResults {
height: 350px;
}
.subtitleViewerContent {
height: 400px;
}
}
@media all and (min-height: 600px) {
@ -355,6 +387,10 @@
.collectionItemSearchResults {
max-height: 70%;
}
.subtitleViewerContent {
height: 500px;
}
}
@media all and (min-height: 700px) {
@ -366,6 +402,10 @@
.collectionItemSearchResults {
max-height: 75%;
}
.subtitleViewerContent {
height: 600px;
}
}
@media all and (min-height: 800px) {

1
dashboard-ui/edititemimages.html
View File

@ -18,6 +18,7 @@
<br />
<div data-role="controlgroup" data-type="horizontal" class="localnav" data-mini="true">
<a href="#" data-role="button" id="btnEditMetadata">${TabMetadata}</a>
<a id="btnEditSubtitles" style="display: none;" href="#" data-role="button">${TabSubtitles}</a>
<a id="btnEditCollectionTitles" style="display: none;" href="#" data-role="button">${TabCollectionTitles}</a>
<a href="#" data-role="button" class="ui-btn-active">${TabImages}</a>
</div>

1
dashboard-ui/edititemmetadata.html
View File

@ -17,6 +17,7 @@
<br />
<div data-role="controlgroup" data-type="horizontal" class="localnav" data-mini="true">
<a href="#" data-role="button" class="ui-btn-active">${TabMetadata}</a>
<a id="btnEditSubtitles" style="display: none;" href="#" data-role="button">${TabSubtitles}</a>
<a id="btnEditCollectionTitles" style="display: none;" href="editcollectionitems.html" data-role="button">${TabCollectionTitles}</a>
<a href="#" data-role="button" id="btnEditImages">${TabImages}</a>
</div>

61
dashboard-ui/edititemsubtitles.html Normal file
View File

@ -0,0 +1,61 @@
<!DOCTYPE html>
<html>
<head>
<title>${TitleMediaBrowser}</title>
</head>
<body>
<div id="editItemSubtitlesPage" data-role="page" data-theme="b" class="page libraryPage metadataEditorPage">
<div data-role="content editPageContent">
<div class="editPageSidebar">
<div class="libraryTree">
<ul>
</ul>
</div>
</div>
<div class="editPageInnerContent">
<h1 class="itemName editPageName">&nbsp;</h1>
<br />
<div data-role="controlgroup" data-type="horizontal" class="localnav" data-mini="true">
<a id="btnEditMetadata" href="#" data-role="button">${TabMetadata}</a>
<a href="#" data-role="button" class="ui-btn-active">${TabSubtitles}</a>
<a id="btnEditImages" href="#" data-role="button">${TabImages}</a>
</div>
<div class="readOnlyContent" style="max-width: 700px;">
<div class="subtitleList"></div>
</div>
<br />
<h1>${HeaderSearchForSubtitles}</h1>
<form class="subtitleSearchForm">
<div style="display: inline-block; width: 85%;">
<label for="selectLanguage">${LabelLanguage}</label>
<select id="selectLanguage" required="required" data-mini="true"></select>
</div>
<button type="submit" data-icon="search" class="btnSearchSubtitles" data-inline="true" data-iconpos="notext" data-mini="true" style="vertical-align: bottom;">${ButtonSearch}</button>
</form>
<br />
<div class="readOnlyContent" style="max-width: 700px;">
<div class="subtitleResults"></div>
<div class="noSearchResults" style="display: none;">
${MessageNoSubtitleSearchResultsFound}
</div>
</div>
</div>
</div>
<div data-role="popup" class="ui-content popupSubtitleViewer" data-history="false">
<a href="#" data-rel="back" data-role="button" class="ui-btn ui-corner-all ui-shadow ui-btn-b ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>
<div class="subtitleViewerContent">
<pre class="subtitleContent" style="margin: 0; border-radius: 0;"></pre>
</div>
</div>
<script type="text/javascript">
$('.subtitleSearchForm').off('submit', EditItemSubtitlesPage.onSearchSubmit).on('submit', EditItemSubtitlesPage.onSearchSubmit);
</script>
</div>
</body>
</html>

7
dashboard-ui/scripts/edititemimages.js
View File

@ -13,6 +13,7 @@
var query = MetadataEditor.getEditQueryString(item);
$('#btnEditMetadata', page).attr('href', 'edititemmetadata.html?' + query);
$('#btnEditSubtitles', page).attr('href', 'edititemsubtitles.html?' + query);
$('#btnEditCollectionTitles', page).attr('href', 'editcollectionitems.html?' + query);
}
@ -274,6 +275,12 @@
$('#btnEditCollectionTitles', page).hide();
}
if (item.MediaType == "Video" && item.LocationType == "FileSystem") {
$('#btnEditSubtitles', page).show();
} else {
$('#btnEditSubtitles', page).hide();
}
ApiClient.getRemoteImageProviders(getBaseRemoteOptions()).done(function (providers) {
if (providers.length) {

7
dashboard-ui/scripts/edititemmetadata.js
View File

@ -15,6 +15,7 @@
var query = MetadataEditor.getEditQueryString(item);
$('#btnEditImages', page).attr('href', 'edititemimages.html?' + query);
$('#btnEditSubtitles', page).attr('href', 'edititemsubtitles.html?' + query);
$('#btnEditCollectionTitles', page).attr('href', 'editcollectionitems.html?' + query);
}
@ -75,6 +76,12 @@
$('#btnEditCollectionTitles', page).hide();
}
if (item.MediaType == "Video" && item.LocationType == "FileSystem") {
$('#btnEditSubtitles', page).show();
} else {
$('#btnEditSubtitles', page).hide();
}
Dashboard.getCurrentUser().done(function (user) {
if (user.Configuration.EnableContentDeletion &&

352
dashboard-ui/scripts/edititemsubtitles.js Normal file
View File

@ -0,0 +1,352 @@
(function ($, window, document) {
var currentItem;
function updateTabs(page, item) {
var query = MetadataEditor.getEditQueryString(item);
$('#btnEditMetadata', page).attr('href', 'edititemmetadata.html?' + query);
$('#btnEditImages', page).attr('href', 'edititemimages.html?' + query);
}
function showLocalSubtitles(page, index) {
Dashboard.showLoadingMsg();
var popup = $('.popupSubtitleViewer', page).popup('open');
$('.subtitleContent', page).html('');
var url = 'Videos/' + currentItem.Id + '/Subtitles/' + index;
$.get(ApiClient.getUrl(url)).done(function (result) {
$('.subtitleContent', page).html(result);
Dashboard.hideLoadingMsg();
popup.popup('reposition', {});
});
}
function showRemoteSubtitles(page, id) {
Dashboard.showLoadingMsg();
var popup = $('.popupSubtitleViewer', page).popup('open');
$('.subtitleContent', page).html('\nLoading...\n\n\n');
var url = 'Providers/Subtitles/Subtitles/' + id;
$.get(ApiClient.getUrl(url)).done(function (result) {
$('.subtitleContent', page).html(result);
Dashboard.hideLoadingMsg();
popup.popup('reposition', {});
});
}
function downloadRemoteSubtitles(page, id) {
var url = 'Items/' + currentItem.Id + '/RemoteSearch/Subtitles/' + id;
$.ajax({
type: "POST",
url: ApiClient.getUrl(url)
}).done(function () {
Dashboard.alert('The download has been queued.');
});
}
function deleteLocalSubtitle(page, index) {
var msg = "Are you sure you wish to delete this subtitle file?";
Dashboard.confirm(msg, "Confirm Deletion", function (result) {
if (result) {
Dashboard.showLoadingMsg();
var url = 'Videos/' + currentItem.Id + '/Subtitles/' + index;
$.ajax({
type: "DELETE",
url: ApiClient.getUrl(url)
}).done(function () {
reload(page);
});
}
});
}
function fillSubtitleList(page, item) {
var html = '<ul data-role="listview" data-split-icon="delete"><li data-role="list-divider">Current Subtitles</li>';
var streams = item.MediaStreams || [];
html += streams.filter(function (s) {
return s.Type == 'Subtitle';
}).map(function (s) {
var itemHtml = '<li><a class="btnViewSubtitles" href="#" data-index="' + s.Index + '">';
itemHtml += '<p>' + (s.Language || 'Unknown language') + '</p>';
if (s.IsDefault || s.IsForced) {
var atts = [];
if (s.IsDefault) {
atts.push('Default');
}
if (s.IsForced) {
atts.push('Forced');
}
itemHtml += '<p>' + atts.join(', ') + '</p>';
}
if (s.Path) {
itemHtml += '<p>' + (s.Path) + '</p>';
}
itemHtml += '</a>';
if (s.Path) {
itemHtml += '<a href="#" data-icon="delete" class="btnDelete" data-index="' + s.Index + '">Delete</a>';
} else {
itemHtml += '<a href="#" data-icon="delete" style="visibility:hidden;" class="btnDelete" data-index="' + s.Index + '">Delete</a>';
}
itemHtml += '</li>';
return itemHtml;
});
html += '</ul>';
var elem = $('.subtitleList', page).html(html).trigger('create');
$('.btnViewSubtitles', elem).on('click', function () {
var index = this.getAttribute('data-index');
showLocalSubtitles(page, index);
});
$('.btnDelete', elem).on('click', function () {
var index = this.getAttribute('data-index');
deleteLocalSubtitle(page, index);
});
}
function fillLanguages(page, languages) {
$('#selectLanguage', page).html(languages.map(function (l) {
return '<option value="' + l.ThreeLetterISOLanguageName + '">' + l.DisplayName + '</option>';
})).selectmenu('refresh');
Dashboard.getCurrentUser().done(function (user) {
var lang = user.Configuration.SubtitleLanguagePreference;
if (lang) {
$('#selectLanguage', page).val(lang).selectmenu('refresh');
}
});
}
function renderSearchResults(page, results) {
var lastProvider = '';
var html = '';
if (!results.length) {
$('.noSearchResults', page).show();
$('.subtitleResults', page).html('');
Dashboard.hideLoadingMsg();
return;
}
$('.noSearchResults', page).hide();
html += '<ul data-role="listview">';
for (var i = 0, length = results.length; i < length; i++) {
var result = results[i];
var provider = result.ProviderName;
if (provider != lastProvider) {
html += '<li data-role="list-divider">' + provider + '<span class="ui-li-count ui-body-inherit">Rating / Downloads</span></li>';
lastProvider = provider;
}
html += '<li><a class="btnViewSubtitle" href="#" data-subid="' + result.Id + '">';
html += '<h3 style="font-size:14px;">' + (result.Name) + '</h3>';
html += '<p>' + (result.Format) + '</p>';
if (result.Comment) {
html += '<p>' + (result.Comment) + '</p>';
}
html += '<div class="ui-li-count">' + (result.CommunityRating || 0) + ' / ' + (result.DownloadCount || 0) + '</div>';
html += '</a>';
html += '<a href="#" class="btnDownload" data-icon="plus" data-subid="' + result.Id + '">Download</a>';
html += '</li>';
}
html += '</ul>';
var elem = $('.subtitleResults', page).html(html).trigger('create');
$('.btnViewSubtitle', elem).on('click', function () {
var id = this.getAttribute('data-subid');
showRemoteSubtitles(page, id);
});
$('.btnDownload', elem).on('click', function () {
var id = this.getAttribute('data-subid');
downloadRemoteSubtitles(page, id);
});
Dashboard.hideLoadingMsg();
}
function searchForSubtitles(page, language) {
Dashboard.showLoadingMsg();
var url = ApiClient.getUrl('Items/' + currentItem.Id + '/RemoteSearch/Subtitles/' + language);
$.getJSON(url).done(function (results) {
renderSearchResults(page, results);
});
}
function reload(page) {
$('.noSearchResults', page).hide();
MetadataEditor.getItemPromise().done(function (item) {
currentItem = item;
LibraryBrowser.renderName(item, $('.itemName', page), true);
updateTabs(page, item);
fillSubtitleList(page, item);
Dashboard.hideLoadingMsg();
});
}
function onWebSocketMessageReceived(e, data) {
var msg = data;
if (msg.MessageType === "LibraryChanged") {
if (msg.Data.ItemsUpdated.indexOf(currentItem.Id) != -1) {
console.log('Item updated - reloading subtitles');
reload($.mobile.activePage);
}
}
}
$(document).on('pageinit', "#editItemSubtitlesPage", function () {
var page = this;
$('.libraryTree', page).on('itemclicked', function (event, data) {
if (data.itemType == "livetvservice") {
return;
}
if (data.id != currentItem.Id) {
MetadataEditor.currentItemId = data.id;
MetadataEditor.currentItemName = data.itemName;
MetadataEditor.currentItemType = data.itemType;
//Dashboard.navigate('edititemmetadata.html?id=' + data.id);
//$.mobile.urlHistory.ignoreNextHashChange = true;
window.location.hash = 'editItemSubtitlesPage?id=' + data.id;
reload(page);
}
});
}).on('pagebeforeshow', "#editItemSubtitlesPage", function () {
var page = this;
$('.subtitleResults', page).empty();
Dashboard.showLoadingMsg();
reload(page);
ApiClient.getCultures().done(function (languages) {
fillLanguages(page, languages);
});
$(ApiClient).on("websocketmessage", onWebSocketMessageReceived);
}).on('pagehide', "#editItemSubtitlesPage", function () {
var page = this;
currentItem = null;
$(ApiClient).off("websocketmessage", onWebSocketMessageReceived);
});
window.EditItemSubtitlesPage = {
onSearchSubmit: function () {
var form = this;
var lang = $('#selectLanguage', form).val();
searchForSubtitles($(form).parents('.page'), lang);
return false;
}
};
})(jQuery, window, document);

2
dashboard-ui/scripts/site.js
View File

@ -1330,6 +1330,8 @@ $(ApiClient).on("websocketopen", Dashboard.onWebSocketOpened).on("websocketmessa
$(function () {
ApiClient.currentUserId(Dashboard.getCurrentUserId());
var videoPlayerHtml = '<div id="mediaPlayer" data-theme="b" class="ui-bar-b" style="display: none;">';
videoPlayerHtml += '<div id="videoBackdrop">';

3
dashboard-ui/thirdparty/mediabrowser.apiclient.js vendored
View File

@ -155,11 +155,14 @@ MediaBrowser.ApiClient = function ($, navigator, JSON, WebSocket, setTimeout, wi
};
webSocket.onopen = function () {
console.log('web socket connection opened');
setTimeout(function () {
self.sendWebSocketMessage("Identity", clientName + "|" + deviceId + "|" + applicationVersion + "|" + deviceName);
$(self).trigger("websocketopen");
}, 500);
};
webSocket.onerror = function () {