item details chapters populated, gallery lightbox

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) {

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) {
+        for (var i = 0, length = chapters.length; i < length; i++) {
-            $('#scenesCollapsible', page).hide();
+
-            $('#scenesContent', page).html(html);
+            var chapter = chapters[i];
-            return;
+            var chapter_name = chapter.Name || "Chapter "+i;
+
+            html += '<div class="posterViewItem posterViewItemWithDualText">';
+            html += '<a href="#play-Chapter-' + i + '" onclick="ItemDetailPage.play('+chapter.StartPositionTicks+');">';
+
+            if (chapter.ImageTag) {
+
+                var imgUrl = ApiClient.getImageUrl(item.Id, {
+                    width: 500,
+                    tag: chapter.ImageTag,
+                    type: "Chapter",
+                    index: i
+                });
+
+                html += '<img src="' + imgUrl + '" />';
+            } else {
+                html += '<img src="css/images/itemDetails/videoDefault.png"/>';
             }
 
-        for (var i = 0, length = item.Chapters.length; i < length; i++) {
+            html += '<div class="posterViewItemText posterViewItemPrimaryText">' + chapter_name + '</div>';
+            html += '<div class="posterViewItemText">';
 
-            var chapter = item.Chapters[i];
+            if (chapter.StartPositionTicks != "") {
+                html += ticks_to_human(chapter.StartPositionTicks);
+            }
+            else {
+                html += "&nbsp;";
+            }
+            html += '</div>';
 
+            html += '</a>';
+
+            html += '</div>';
 
         }
 
-        $('#scenesCollapsible', page).show();
         $('#scenesContent', page).html(html);
     },
 
-    play: function () {
+    play: function (startPosition) {
-        MediaPlayer.play([ItemDetailPage.item]);
+        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 += '<a href="#pop'+item.ImageTags.Logo+'" data-transition="fade" data-rel="popup" data-position-to="window">';
             html += '<img class="galleryImage" src="' + ApiClient.getImageUrl(item.Id, {
                 type: "Logo",
                 width: downloadWidth,
                 tag: item.ImageTags.Logo
             }) + '" />';
+            html += '<div class="galleryPopup" id="pop'+item.ImageTags.Logo+'" data-role="popup" data-theme="d" data-corners="false" data-overlay-theme="a">';
+            html += '<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>';
+            html += '<img class="" src="' + ApiClient.getImageUrl(item.Id, {
+                type: "Logo",
+                width: lightboxWidth,
+                tag: item.ImageTags.Logo
+            }) + '" />';
+            html += '</div>';
         }
         if (imageTags.Thumb) {
 
+            html += '<a href="#pop'+item.ImageTags.Thumb+'" data-transition="fade" data-rel="popup" data-position-to="window">';
             html += '<img class="galleryImage" src="' + ApiClient.getImageUrl(item.Id, {
                 type: "Thumb",
                 width: downloadWidth,
                 tag: item.ImageTags.Thumb
             }) + '" />';
+            html += '<div class="galleryPopup" id="pop'+item.ImageTags.Thumb+'" data-role="popup" data-theme="d" data-corners="false" data-overlay-theme="a">';
+            html += '<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>';
+            html += '<img class="" src="' + ApiClient.getImageUrl(item.Id, {
+                type: "Thumb",
+                width: lightboxWidth,
+                tag: item.ImageTags.Thumb
+            }) + '" />';
+            html += '</div>';
         }
         if (imageTags.Art) {
 
+            html += '<a href="#pop'+item.ImageTags.Art+'" data-transition="fade" data-rel="popup" data-position-to="window">';
             html += '<img class="galleryImage" src="' + ApiClient.getImageUrl(item.Id, {
                 type: "Art",
                 width: downloadWidth,
                 tag: item.ImageTags.Art
             }) + '" />';
+            html += '<div class="galleryPopup" id="pop'+item.ImageTags.Art+'" data-role="popup" data-theme="d" data-corners="false" data-overlay-theme="a">';
+            html += '<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>';
+            html += '<img class="" src="' + ApiClient.getImageUrl(item.Id, {
+                type: "Art",
+                width: lightboxWidth,
+                tag: item.ImageTags.Art
+            }) + '" />';
+            html += '</div>';
+
         }
         if (imageTags.Menu) {
 
+            html += '<a href="#pop'+item.ImageTags.Menu+'" data-transition="fade" data-rel="popup" data-position-to="window">';
             html += '<img class="galleryImage" src="' + ApiClient.getImageUrl(item.Id, {
                 type: "Menu",
                 width: downloadWidth,
                 tag: item.ImageTags.Menu
             }) + '" />';
+            html += '<div class="galleryPopup" id="pop'+item.ImageTags.Menu+'" data-role="popup" data-theme="d" data-corners="false" data-overlay-theme="a">';
+            html += '<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>';
+            html += '<img class="" src="' + ApiClient.getImageUrl(item.Id, {
+                type: "Menu",
+                width: lightboxWidth,
+                tag: item.ImageTags.Menu
+            }) + '" />';
+            html += '</div>';
+
         }
         if (imageTags.Disc) {
 
+            html += '<a href="#pop'+item.ImageTags.Disc+'" data-transition="fade" data-rel="popup" data-position-to="window">';
             html += '<img class="galleryImage" src="' + ApiClient.getImageUrl(item.Id, {
                 type: "Disc",
                 width: downloadWidth,
                 tag: item.ImageTags.Disc
             }) + '" />';
+            html += '<div class="galleryPopup" id="pop'+item.ImageTags.Disc+'" data-role="popup" data-theme="d" data-corners="false" data-overlay-theme="a">';
+            html += '<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>';
+            html += '<img class="" src="' + ApiClient.getImageUrl(item.Id, {
+                type: "Disc",
+                width: lightboxWidth,
+                tag: item.ImageTags.Disc
+            }) + '" />';
+            html += '</div>';
         }
         if (imageTags.Box) {
 
+            html += '<a href="#pop'+item.ImageTags.Box+'" data-transition="fade" data-rel="popup" data-position-to="window">';
             html += '<img class="galleryImage" src="' + ApiClient.getImageUrl(item.Id, {
                 type: "Box",
                 width: downloadWidth,
                 tag: item.ImageTags.Box
             }) + '" />';
+            html += '<div class="galleryPopup" id="pop'+item.ImageTags.Box+'" data-role="popup" data-theme="d" data-corners="false" data-overlay-theme="a">';
+            html += '<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>';
+            html += '<img class="" src="' + ApiClient.getImageUrl(item.Id, {
+                type: "Box",
+                width: lightboxWidth,
+                tag: item.ImageTags.Box
+            }) + '" />';
+            html += '</div>';
         }
 
         if (item.BackdropImageTags) {
 
             for (var i = 0, length = item.BackdropImageTags.length; i < length; i++) {
+                html += '<a href="#pop_'+i+'_'+item.BackdropImageTags[0]+'" data-transition="fade" data-rel="popup" data-position-to="window" data-corners="true">';
                 html += '<img class="galleryImage" src="' + ApiClient.getImageUrl(item.Id, {
                     type: "Backdrop",
                     width: downloadWidth,
                     tag: item.BackdropImageTags[0],
                     index: i
                 }) + '" />';
+                html += '<div class="galleryPopup" id="pop_'+i+'_'+item.BackdropImageTags[0]+'" data-role="popup" data-position-to="window">';
+                html += '<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>';
+                html += '<img class="" src="' + ApiClient.getImageUrl(item.Id, {
+                    type: "Backdrop",
+                    width: lightboxWidth,
+                    tag: item.BackdropImageTags[0],
+                    index: i
+                }) + '" />';
+                html += '</div>';
+
             }
 
         }
 
         $('#galleryContent', page).html(html);
+
+        $(".galleryPopup").popup();
     },
     
     renderMediaInfo: function(item) {

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
+        if (typeof(startPosition) != "undefined") {
-        //there is an issue since VideoJS is still loaded.
+            baseParams['StartTimeTicks'] = startPosition;
+        }
 
         var html = '<video id="videoWindow" class="itemVideo video-js vjs-default-skin"></video>';