diff --git a/dashboard-ui/css/site.css b/dashboard-ui/css/site.css index ef9f305e0c..8c3a8553de 100644 --- a/dashboard-ui/css/site.css +++ b/dashboard-ui/css/site.css @@ -849,6 +849,7 @@ progress { width: auto; white-space: nowrap; font-size: 1.1em; + padding-right: 10px; } @media all and (min-width: 650px) { diff --git a/dashboard-ui/scripts/ItemDetailPage.js b/dashboard-ui/scripts/ItemDetailPage.js index 8a97943b04..f3ae5b01f4 100644 --- a/dashboard-ui/scripts/ItemDetailPage.js +++ b/dashboard-ui/scripts/ItemDetailPage.js @@ -40,9 +40,20 @@ ItemDetailPage.renderImage(item); ItemDetailPage.renderOverviewBlock(item); - ItemDetailPage.renderScenes(item); ItemDetailPage.renderMediaInfo(item); + if (item.BackdropImageTags || item.ImageTags.Logo || item.ImageTags.Thumb || item.ImageTags.Menu || item.ImageTags.Disc || item.ImageTags.Art || item.ImageTags.Box) { + ItemDetailPage.renderGallery(item); + }else { + $('#galleryCollapsible', page).remove(); + } + + if (!item.Chapters || !item.Chapters.length) { + $('#scenesCollapsible', page).remove(); + }else { + ItemDetailPage.renderScenes(item); + } + $('#itemName', page).html(name); Dashboard.hideLoadingMsg(); @@ -248,31 +259,66 @@ return html; }, + onScenesExpand: function() { + + if (ItemDetailPage.item) { + + ItemDetailPage.renderScenes(ItemDetailPage.item); + + $(this).off('expand', ItemDetailPage.onScenesExpand); + } + }, + renderScenes: function (item) { var html = ''; - var page = $.mobile.activePage; + var chapters = item.Chapters || {}; - if (!item.Chapters || !item.Chapters.length) { - $('#scenesCollapsible', page).hide(); - $('#scenesContent', page).html(html); - return; - } + for (var i = 0, length = chapters.length; i < length; i++) { - for (var i = 0, length = item.Chapters.length; i < length; i++) { + var chapter = chapters[i]; + var chapter_name = chapter.Name || "Chapter "+i; - var chapter = item.Chapters[i]; + html += '
'; + html += ''; + if (chapter.ImageTag) { + + var imgUrl = ApiClient.getImageUrl(item.Id, { + width: 500, + tag: chapter.ImageTag, + type: "Chapter", + index: i + }); + + html += ''; + } else { + html += ''; + } + + html += '
' + chapter_name + '
'; + html += '
'; + + if (chapter.StartPositionTicks != "") { + html += ticks_to_human(chapter.StartPositionTicks); + } + else { + html += " "; + } + html += '
'; + + html += '
'; + + html += '
'; } - $('#scenesCollapsible', page).show(); $('#scenesContent', page).html(html); }, - play: function () { - MediaPlayer.play([ItemDetailPage.item]); + play: function (startPosition) { + MediaPlayer.play([ItemDetailPage.item], startPosition); }, onGalleryExpand: function() { @@ -288,76 +334,143 @@ renderGallery: function (item) { var page = $.mobile.activePage; - var imageTags = item.ImageTags || {}; - var html = ''; - var downloadWidth = 400; + var lightboxWidth = 800; if (imageTags.Logo) { + html += ''; html += ''; + html += '
'; + html += 'Close'; + html += ''; + html += '
'; } if (imageTags.Thumb) { + html += ''; html += ''; + html += '
'; + html += 'Close'; + html += ''; + html += '
'; } if (imageTags.Art) { + html += ''; html += ''; + html += '
'; + html += 'Close'; + html += ''; + html += '
'; + } if (imageTags.Menu) { + html += ''; html += ''; + html += '
'; + html += 'Close'; + html += ''; + html += '
'; + } if (imageTags.Disc) { + html += ''; html += ''; + html += '
'; + html += 'Close'; + html += ''; + html += '
'; } if (imageTags.Box) { + html += ''; html += ''; + html += '
'; + html += 'Close'; + html += ''; + html += '
'; } if (item.BackdropImageTags) { for (var i = 0, length = item.BackdropImageTags.length; i < length; i++) { + html += ''; html += ''; + html += '
'; + html += 'Close'; + html += ''; + html += '
'; + } } $('#galleryContent', page).html(html); + + $(".galleryPopup").popup(); }, renderMediaInfo: function(item) { diff --git a/dashboard-ui/scripts/MediaPlayer.js b/dashboard-ui/scripts/MediaPlayer.js index dab556b93f..400e4820c3 100644 --- a/dashboard-ui/scripts/MediaPlayer.js +++ b/dashboard-ui/scripts/MediaPlayer.js @@ -31,7 +31,7 @@ return false; }, - play: function (items) { + play: function (items, startPosition) { if (MediaPlayer.isPlaying()) { MediaPlayer.stop(); @@ -43,7 +43,7 @@ if (item.MediaType === "Video") { - mediaElement = MediaPlayer.playVideo(items); + mediaElement = MediaPlayer.playVideo(items, startPosition); } else if (item.MediaType === "Audio") { @@ -109,7 +109,7 @@ return $('audio', nowPlayingBar)[0]; }, - playVideo: function (items) { + playVideo: function (items, startPosition) { var item = items[0]; @@ -122,11 +122,13 @@ audioBitrate: 128000, videoBitrate: 500000, maxWidth: screenWidth, - maxHeight: screenHeight + maxHeight: screenHeight, + StartTimeTicks: 0 }; - //TODO if you press "stop" button on the nowPlayingBar and restart the same video without refreshing the page - //there is an issue since VideoJS is still loaded. + if (typeof(startPosition) != "undefined") { + baseParams['StartTimeTicks'] = startPosition; + } var html = '';