diff --git a/dashboard-ui/css/librarybrowser.css b/dashboard-ui/css/librarybrowser.css index 38c4a274a9..6b09753c9f 100644 --- a/dashboard-ui/css/librarybrowser.css +++ b/dashboard-ui/css/librarybrowser.css @@ -507,16 +507,6 @@ a.itemTag:hover { .noBackdrop .lnkSibling { bottom: 205px; } - - .metadataFormFields { - float: left; - width: 75%; - } - - .metadataFormButtons { - float: right; - width: 23%; - } } @media all and (min-width: 650px) { diff --git a/dashboard-ui/css/metadataeditor.css b/dashboard-ui/css/metadataeditor.css new file mode 100644 index 0000000000..d4aa5faa6a --- /dev/null +++ b/dashboard-ui/css/metadataeditor.css @@ -0,0 +1,34 @@ +.editPageContent { + padding: 0; +} + +.editPageInnerContent { + padding: 0 15px 15px; +} + +.editPageName { + margin: .5em 0 0; +} + +.editPageSidebar { + display: none; +} + +@media all and (min-width: 600px) { + + .editPageSidebar { + position: fixed; + top: 36px; + bottom: 0; + left: 0; + width: 27.5%; + overflow-y: scroll; + overflow-x: auto!important; + display: block; + } + + .editPageInnerContent { + float: right; + width: 70%; + } +} diff --git a/dashboard-ui/css/tileitem.css b/dashboard-ui/css/tileitem.css index 12e161aada..c214018d19 100644 --- a/dashboard-ui/css/tileitem.css +++ b/dashboard-ui/css/tileitem.css @@ -117,8 +117,29 @@ width: 18px; } -@media all and (min-width: 600px) { +@media all and (min-width: 540px) { + .tileItem { + display: inline-block; + margin-left: 3px; + margin-right: 3px; + } + + .backdropTileItem { + display: block; + } + + .posterTileItem, .squareTileItem { + width: 45%; + } + + .posterTileItem .tileImage { + height: 120px; + } + + .squareTileItem .tileImage { + height: 115px; + } .smallPosterTileItem { width: 210px; @@ -128,16 +149,14 @@ } @media all and (min-width: 750px) { - .tileItem { - display: inline-block; - margin-left: 3px; - margin-right: 3px; - } - .smallBackdropTileItem { display: block; } + .backdropTileItem { + display: inline-block; + } + .backdropTileItem, .posterTileItem, .squareTileItem { width: 46%; diff --git a/dashboard-ui/edititemimages.html b/dashboard-ui/edititemimages.html index bf89bfc269..e824101475 100644 --- a/dashboard-ui/edititemimages.html +++ b/dashboard-ui/edititemimages.html @@ -4,21 +4,25 @@ Media Browser -
- -
+
+
+
+
+
    +
+
+
-
-

+
+

 


- Metadata - + Metadata + People Images
-
+ diff --git a/dashboard-ui/edititemmetadata.html b/dashboard-ui/edititemmetadata.html index ebd91168aa..d52c733495 100644 --- a/dashboard-ui/edititemmetadata.html +++ b/dashboard-ui/edititemmetadata.html @@ -4,159 +4,177 @@ Media Browser -
- -
-
-

+
+
+
+
+
    +
+
+
+
+

 


Metadata - - Images + + Images
-
+
-
-

Basics

-
-
- - -
-
- - -
-
- - -
- - - - - - - - - -
- - -
-
- - -
-
- - -
-
- - -
- - -
-
-
-
-

Refresh Metadata

-
- - -
- - -
A force refresh will cause internet metadata to be re-downloaded (if enabled, and dependent on metadata settings).
-
-

- -

-
-
- -
diff --git a/dashboard-ui/edititempeople.html b/dashboard-ui/edititempeople.html index 8763543f36..75fba4b81b 100644 --- a/dashboard-ui/edititempeople.html +++ b/dashboard-ui/edititempeople.html @@ -4,21 +4,25 @@ Media Browser -
- -
-
-

+
+
+
+
+
    +
+
+
+
+

 


- Metadata + Metadata People - Images + Images
+
-
diff --git a/dashboard-ui/scripts/edititemimages.js b/dashboard-ui/scripts/edititemimages.js index 01ec75dd1d..fa1a2e2ea9 100644 --- a/dashboard-ui/scripts/edititemimages.js +++ b/dashboard-ui/scripts/edititemimages.js @@ -3,65 +3,30 @@ var currentItem; var currentFile; - function getPromise() { + function updateTabs(page, item) { - var name = getParameterByName('person'); + var query = MetadataEditor.getEditQueryString(item); - if (name) { - return ApiClient.getPerson(name, Dashboard.getCurrentUserId()); - } - - name = getParameterByName('studio'); - - if (name) { - - return ApiClient.getStudio(name, Dashboard.getCurrentUserId()); - - } - - name = getParameterByName('genre'); - - if (name) { - return ApiClient.getGenre(name, Dashboard.getCurrentUserId()); - } - - name = getParameterByName('musicgenre'); - - if (name) { - return ApiClient.getMusicGenre(name, Dashboard.getCurrentUserId()); - } - - name = getParameterByName('gamegenre'); - - if (name) { - return ApiClient.getGameGenre(name, Dashboard.getCurrentUserId()); - } - - name = getParameterByName('artist'); - - if (name) { - return ApiClient.getArtist(name, Dashboard.getCurrentUserId()); - } - else { - return ApiClient.getItem(Dashboard.getCurrentUserId(), getParameterByName('id')); - } + $('#btnEditPeople', page).attr('href', 'edititempeople.html?' + query); + $('#btnEditMetadata', page).attr('href', 'edititemmetadata.html?' + query); } function reload(page) { Dashboard.showLoadingMsg(); - getPromise().done(function (item) { + MetadataEditor.getItemPromise().done(function (item) { currentItem = item; LibraryBrowser.renderName(item, $('.itemName', page), true); - LibraryBrowser.renderParentName(item, $('.parentName', page)); + + updateTabs(page, item); if (item.Type == "Person" || item.Type == "Studio" || item.Type == "MusicGenre" || item.Type == "Genre" || item.Type == "Artist" || item.Type == "GameGenre") { - $('#peopleTab', page).hide(); + $('#btnEditPeople', page).hide(); } else { - $('#peopleTab', page).show(); + $('#btnEditPeople', page).show(); } ApiClient.getItemImageInfos(currentItem.Id).done(function (imageInfos) { @@ -305,6 +270,22 @@ var page = this; + $('.libraryTree', page).on('itemclicked', function (event, data) { + + 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 = 'editItemImagesPage?id=' + data.id; + + reload(page); + } + }); + }).on('pageshow', "#editItemImagesPage", function () { var page = this; diff --git a/dashboard-ui/scripts/edititemmetadata.js b/dashboard-ui/scripts/edititemmetadata.js index 6c926b7198..645083cc95 100644 --- a/dashboard-ui/scripts/edititemmetadata.js +++ b/dashboard-ui/scripts/edititemmetadata.js @@ -1,62 +1,303 @@ (function ($, document, window) { + function getNode(item, folderState) { + + var state = item.IsFolder ? folderState : ''; + + var name = item.Name; + + if (item.IndexNumber != null && item.Type != "Season") { + name = item.IndexNumber + " - " + name; + } + var rel = item.IsFolder ? 'folder' : 'default'; + + return { attr: { id: item.Id, rel: rel, itemtype: item.Type }, data: name, state: state }; + } + + function loadNode(page, node, openItems, selectedId, callback) { + + if (node == '-1') { + + ApiClient.getRootFolder(Dashboard.getCurrentUserId()).done(function (folder) { + + callback(getNode(folder, 'open')); + + }); + + return; + } + + ApiClient.getItems(Dashboard.getCurrentUserId(), { + + ParentId: node.attr("id"), + SortBy: 'SortName' + + }).done(function (result) { + + var nodes = result.Items.map(function (i) { + + var state = openItems.indexOf(i.Id) == -1 ? 'closed' : 'open'; + + return getNode(i, state); + + }); + + callback(nodes); + + if (selectedId && result.Items.filter(function (f) { + + return f.Id == selectedId; + + }).length) { + + selectNode(page, selectedId); + } + + }); + + } + + function selectNode(page, id) { + + var elem = $('#' + id, page)[0]; + + $.jstree._reference(".libraryTree", page).select_node(elem); + + if (elem) { + elem.scrollIntoView(); + + var sidebar = $('.editPageSidebar', page); + sidebar.scrollTop(sidebar.scrollTop() - sidebar.height() / 3); + } + + $(document).scrollTop(0); + } + + function initializeTree(page, openItems, selectedId) { + + $('.libraryTree', page).jstree({ + + "plugins": ["themes", "ui", "json_data"], + + data: function (node, callback) { + loadNode(page, node, openItems, selectedId, callback); + }, + + json_data: { + + data: function (node, callback) { + loadNode(page, node, openItems, selectedId, callback); + } + + }, + + core: { initially_open: [], load_open: true }, + ui: { initially_select: [] }, + + themes: { + theme: 'mb3', + url: 'thirdparty/jstree1.0fix2/themes/mb3/style.css?v=' + Dashboard.initialServerVersion + } + + }).off('select_node.jstree').on('select_node.jstree', function (event, data) { + + var eventData = { + id: data.rslt.obj.attr("id"), + itemType: data.rslt.obj.attr("itemtype") + }; + + $(this).trigger('itemclicked', [eventData]); + + }); + } + + $(document).on('pagebeforeshow', ".metadataEditorPage", function () { + + window.MetadataEditor = new metadataEditor(); + + var page = this; + + var id = MetadataEditor.currentItemId; + + if (id) { + + $.getJSON(ApiClient.getUrl("Items/" + id + "/Ancestors", { + userId: Dashboard.getCurrentUserId() + + })).done(function (ancestors) { + + var ids = ancestors.map(function (i) { + return i.Id; + }); + + initializeTree(page, ids, id); + }); + + } else { + initializeTree(page, []); + } + + }).on('pagebeforehide', ".metadataEditorPage", function () { + + var page = this; + + $('.libraryTree', page).off('select_node.jstree'); + + }); + + function metadataEditor() { + + var self = this; + + function ensureInitialValues() { + + if (self.currentItemType || self.currentItemName || self.currentItemId) { + return; + } + + var url = window.location.hash || window.location.toString(); + + var name = getParameterByName('person', url); + + if (name) { + self.currentItemType = "Person"; + self.currentItemName = name; + return; + } + + name = getParameterByName('studio', url); + + if (name) { + self.currentItemType = "Studio"; + self.currentItemName = name; + return; + } + + name = getParameterByName('genre', url); + + if (name) { + self.currentItemType = "Genre"; + self.currentItemName = name; + return; + } + + name = getParameterByName('musicgenre', url); + + if (name) { + self.currentItemType = "MusicGenre"; + self.currentItemName = name; + return; + } + + name = getParameterByName('gamegenre', url); + + if (name) { + self.currentItemType = "GameGenre"; + self.currentItemName = name; + return; + } + + name = getParameterByName('artist', url); + + if (name) { + self.currentItemType = "Artist"; + self.currentItemName = name; + return; + } + + var id = getParameterByName('id', url); + + if (id) { + self.currentItemId = id; + self.currentItemType = null; + } + }; + + self.getItemPromise = function () { + + var currentItemType = self.currentItemType; + var currentItemName = self.currentItemName; + var currentItemId = self.currentItemId; + + if (currentItemType == "Person") { + return ApiClient.getPerson(currentItemName, Dashboard.getCurrentUserId()); + } + + if (currentItemType == "Studio") { + return ApiClient.getStudio(currentItemName, Dashboard.getCurrentUserId()); + } + + if (currentItemType == "Genre") { + return ApiClient.getGenre(currentItemName, Dashboard.getCurrentUserId()); + } + + if (currentItemType == "MusicGenre") { + return ApiClient.getMusicGenre(currentItemName, Dashboard.getCurrentUserId()); + } + + if (currentItemType == "GameGenre") { + return ApiClient.getGameGenre(currentItemName, Dashboard.getCurrentUserId()); + } + + if (currentItemType == "Artist") { + return ApiClient.getArtist(currentItemName, Dashboard.getCurrentUserId()); + } + + if (currentItemId) { + return ApiClient.getItem(Dashboard.getCurrentUserId(), currentItemId); + } + + return ApiClient.getRootFolder(Dashboard.getCurrentUserId()); + }; + + self.getEditQueryString = function (item) { + + var query; + + if (item.Type == "Person" || + item.Type == "Studio" || + item.Type == "Genre" || + item.Type == "MusicGenre" || + item.Type == "GameGenre" || + item.Type == "Artist") { + query = item.Type + "=" + ApiClient.encodeName(item.Name); + + } else { + query = "id=" + item.Id; + } + + var context = getParameterByName('context'); + + if (context) { + query += "&context=" + context; + } + + return query; + }; + + ensureInitialValues(); + } + + +})(jQuery, document, window); + +(function ($, document, window) { + var currentItem; - function getPromise() { + function updateTabs(page, item) { - var name = getParameterByName('person'); + var query = MetadataEditor.getEditQueryString(item); - if (name) { - return ApiClient.getPerson(name, Dashboard.getCurrentUserId()); - } - - name = getParameterByName('studio'); - - if (name) { - - return ApiClient.getStudio(name, Dashboard.getCurrentUserId()); - - } - - name = getParameterByName('genre'); - - if (name) { - return ApiClient.getGenre(name, Dashboard.getCurrentUserId()); - } - - name = getParameterByName('musicgenre'); - - if (name) { - return ApiClient.getMusicGenre(name, Dashboard.getCurrentUserId()); - } - - name = getParameterByName('gamegenre'); - - if (name) { - return ApiClient.getGameGenre(name, Dashboard.getCurrentUserId()); - } - - name = getParameterByName('artist'); - - if (name) { - return ApiClient.getArtist(name, Dashboard.getCurrentUserId()); - } - else { - return ApiClient.getItem(Dashboard.getCurrentUserId(), getParameterByName('id')); - } + $('#btnEditPeople', page).attr('href', 'edititempeople.html?' + query); + $('#btnEditImages', page).attr('href', 'edititemimages.html?' + query); } function reload(page) { Dashboard.showLoadingMsg(); - getPromise().done(function (item) { - - if (item.IsFolder) { - $('#fldRecursive', page).show(); - } else { - $('#fldRecursive', page).hide(); - } + MetadataEditor.getItemPromise().done(function (item) { $('#btnRefresh', page).button('enable'); @@ -65,15 +306,16 @@ currentItem = item; LibraryBrowser.renderName(item, $('.itemName', page), true); - LibraryBrowser.renderParentName(item, $('.parentName', page)); + + updateTabs(page, item); setFieldVisibilities(page, item); fillItemInfo(page, item); if (item.Type == "Person" || item.Type == "Studio" || item.Type == "MusicGenre" || item.Type == "Genre" || item.Type == "Artist") { - $('#peopleTab', page).hide(); + $('#btnEditPeople', page).hide(); } else { - $('#peopleTab', page).show(); + $('#btnEditPeople', page).show(); } Dashboard.hideLoadingMsg(); @@ -523,7 +765,7 @@ var form = this; var item = { - Id: getParameterByName('id'), + Id: currentItem.Id, Name: $('#txtName', form).val(), SortName: $('#txtSortName', form).val(), DisplayMediaType: $('#txtDisplayMediaType', form).val(), @@ -548,7 +790,7 @@ Studios: editableListViewValues($("#listStudios", form)).map(function (element) { return { Name: element }; }), PremiereDate: $('#txtPremiereDate', form).val() || null, - EndDate: $('#txtEndDate', form).val() || null , + EndDate: $('#txtEndDate', form).val() || null, ProductionYear: $('#txtProductionYear', form).val(), AspectRatio: $('#txtOriginalAspectRatio', form).val(), Video3DFormat: $('#select3dFormat', form).val(), @@ -654,7 +896,6 @@ var page = this; - $('#btnRefresh', this).on('click', function () { $(this).button('disable'); @@ -684,7 +925,7 @@ refreshPromise = ApiClient.refreshStudio(currentItem.Name, force); } else { - refreshPromise = ApiClient.refreshItem(currentItem.Id, force, $('#chkRecursive', page).checked()); + refreshPromise = ApiClient.refreshItem(currentItem.Id, force, false); } refreshPromise.done(function () { @@ -694,17 +935,29 @@ }); }); - }).on('pageshow', "#editItemMetadataPage", function () { + $('.libraryTree', page).on('itemclicked', function (event, data) { + + 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 = 'editItemMetadataPage?id=' + data.id; + + reload(page); + } + }); + + }).on('pagebeforeshow', "#editItemMetadataPage", function () { var page = this; reload(page); - }).on('pagehide', "#editItemMetadataPage", function () { - - var page = this; - - currentItem = null; }); -})(jQuery, document, window); \ No newline at end of file +})(jQuery, document, window); + diff --git a/dashboard-ui/scripts/edititempeople.js b/dashboard-ui/scripts/edititempeople.js index 6751707b09..c8bacfd18e 100644 --- a/dashboard-ui/scripts/edititempeople.js +++ b/dashboard-ui/scripts/edititempeople.js @@ -2,28 +2,30 @@ var currentItem; - function reload(page) { + function updateTabs(page, item) { - var id = getParameterByName('id'); + var query = MetadataEditor.getEditQueryString(item); + + $('#btnEditMetadata', page).attr('href', 'edititemmetadata.html?' + query); + $('#btnEditImages', page).attr('href', 'edititemimages.html?' + query); + } + + function reload(page) { Dashboard.showLoadingMsg(); - ApiClient.getItem(Dashboard.getCurrentUserId(), id).done(function (item) { - - if (item.IsFolder) { - $('#fldRecursive', page).show(); - } else { - $('#fldRecursive', page).hide(); - } + MetadataEditor.getItemPromise().done(function (item) { $('#btnRefresh', page).button('enable'); $('#refreshLoading', page).hide(); currentItem = item; + LibraryBrowser.renderName(item, $('.itemName', page), true); - LibraryBrowser.renderParentName(item, $('.parentName', page)); - fillPeopleContainer(item.People,$('#peopleContainer',page)); + updateTabs(page, item); + + fillPeopleContainer(item.People, $('#peopleContainer', page)); Dashboard.hideLoadingMsg(); }); } @@ -44,7 +46,7 @@ var name = person.Name || ""; var role = person.Role || ""; var type = person.Type || ""; - + if (person.PrimaryImageTag) { imgUrl = ApiClient.getPersonImageUrl(person.Name, { @@ -57,27 +59,27 @@ imgUrl = "css/images/items/list/person.png"; } - html += '
'; + html += '
'; html += '
'; html += '
'; html += ''; html += ''; html += ''; html += ''; - html += ' ' + (name) + '
'; html += '
'; html += ''; - html += ' ' + (role) + '
'; html += '
'; html += ''; - html += ' ' + (type) + ''; @@ -88,7 +90,7 @@ html += ''; html += '

'; html += '
'; @@ -147,7 +149,7 @@ } }); }; - self.savePerson = function(source) { + self.savePerson = function (source) { var page = $.mobile.activePage; @@ -163,7 +165,7 @@ currentItem.People[i].Name = item.find('input[name="txtName"]').val(); currentItem.People[i].Role = item.find('input[name="txtRole"]').val(); currentItem.People[i].Type = item.find('select[name="selectType"]').val(); - ApiClient.updateItem(currentItem).done(function() { + ApiClient.updateItem(currentItem).done(function () { reload(page); }); break; @@ -171,7 +173,7 @@ } }; - self.addPerson = function() { + self.addPerson = function () { var page = $.mobile.activePage; var html = '