From 6a50b9ce36decc6d787d306ee4eb60fd24bcee08 Mon Sep 17 00:00:00 2001
From: Luke Pulverenti <luke.pulverenti@gmail.com>
Date: Wed, 19 Mar 2014 13:44:55 -0400
Subject: [PATCH] #712 - group multiple versions

---
 dashboard-ui/css/librarybrowser.css       |  11 ++-
 dashboard-ui/css/site.css                 |   5 -
 dashboard-ui/episodes.html                |   6 ++
 dashboard-ui/itemdetails.html             |  21 ++--
 dashboard-ui/scripts/episodes.js          |   9 +-
 dashboard-ui/scripts/itemdetailpage.js    | 111 ++++++++++++----------
 dashboard-ui/scripts/librarybrowser.js    |   2 +-
 dashboard-ui/scripts/librarylist.js       |   6 +-
 dashboard-ui/scripts/movies.js            |   2 +-
 dashboard-ui/scripts/scheduledtaskpage.js |   4 +-
 10 files changed, 99 insertions(+), 78 deletions(-)

diff --git a/dashboard-ui/css/librarybrowser.css b/dashboard-ui/css/librarybrowser.css
index 73844d260c..488d6160c4 100644
--- a/dashboard-ui/css/librarybrowser.css
+++ b/dashboard-ui/css/librarybrowser.css
@@ -428,7 +428,6 @@ a.itemTag:hover {
     background-position: center 15%;
     background-repeat: no-repeat;
     height: 550px;
-    border-bottom: 1px solid #111;
     position: relative;
 }
 
@@ -767,6 +766,10 @@ a.itemTag:hover {
     .lnkSibling:not(.hide) {
         display: block;
     }
+
+    .itemBackdrop {
+        border-bottom: 1px solid #111;
+    }
 }
 
 @media all and (min-width: 1000px) {
@@ -1118,6 +1121,12 @@ a.itemTag:hover {
     padding: 1em;
 }
 
+    .itemSelectionPanel .ui-checkbox {
+        max-width: 90px;
+        margin-left: auto;
+        margin-right: auto;
+    }
+
 .selectionCommandsControlGroup {
     display: inline-block;
     margin-left: .5em;
diff --git a/dashboard-ui/css/site.css b/dashboard-ui/css/site.css
index 132ab59b1a..f6d6574d6d 100644
--- a/dashboard-ui/css/site.css
+++ b/dashboard-ui/css/site.css
@@ -683,7 +683,6 @@ h1 .imageLink {
     z-index: 99997;
     color: #fff;
     border: 0 !important;
-    max-height: 220px;
 }
 
 .footerNotification {
@@ -700,10 +699,6 @@ h1 .imageLink {
     vertical-align: middle;
 }
 
-#dashboardVersionWarning {
-    line-height: 50px;
-}
-
 /*
  * Gradient Shadow
  */
diff --git a/dashboard-ui/episodes.html b/dashboard-ui/episodes.html
index c5b6143dd1..8736aa4bb9 100644
--- a/dashboard-ui/episodes.html
+++ b/dashboard-ui/episodes.html
@@ -24,9 +24,15 @@
                 <div class="viewControls" data-role="controlgroup" data-type="horizontal">
                     <button data-mini="true" data-icon="sort" data-inline="true" data-iconpos="notext" title="Sort" onclick="$('#sortPanel', $(this).parents('.page')).panel( 'toggle' );">Sort</button>
                     <button data-mini="true" data-icon="filter" data-inline="true" data-iconpos="notext" title="Filter" onclick="$('#filterPanel', $(this).parents('.page')).panel( 'toggle' );">Filter</button>
+                    <button data-mini="true" data-icon="check" data-inline="true" data-iconpos="notext" title="Select" class="btnToggleSelections">Select</button>
                 </div>
                 <div class="listTopPaging">
                 </div>
+                <div class="selectionCommands" style="display: none;">
+                    <div data-role="controlgroup" data-type="horizontal" class="selectionCommandsControlGroup">
+                        <button class="btnMergeVersions" data-mini="true" data-icon="recycle" data-inline="true" title="Combine Versions">Group Versions</button>
+                    </div>
+                </div>
             </div>
             <div id="items" class="itemsContainer"></div>
         </div>
diff --git a/dashboard-ui/itemdetails.html b/dashboard-ui/itemdetails.html
index a18c334c38..cd4024bc23 100644
--- a/dashboard-ui/itemdetails.html
+++ b/dashboard-ui/itemdetails.html
@@ -131,6 +131,9 @@
             <span id="trailerButtonContainer" style="display: none;">
                 <button id="btnPlayTrailer" type="button" data-icon="video" data-inline="true" data-mini="true">Trailer</button>
             </span>
+            <span id="externalTrailerButtonContainer" style="display: none;">
+                <a id="btnPlayExternalTrailer" data-role="button" data-icon="video" data-inline="true" data-mini="true" href="#" target="_blank">Trailer</a>
+            </span>
             <span id="playExternalButtonContainer" style="display: none;">
                 <a id="btnPlayExternal" data-role="button" data-icon="play" data-inline="true" data-mini="true" href="#" target="_blank">Play</a>
             </span>
@@ -156,7 +159,6 @@
                         <p id="itemPremiereDate"></p>
                         <p id="itemBudget"></p>
                         <p id="itemRevenue"></p>
-                        <p id="awardSummary"></p>
                         <p class="itemStudios"></p>
                         <p class="itemExternalLinks"></p>
                         <p class="itemTags"></p>
@@ -169,16 +171,10 @@
                     </div>
                     <div id="childrenContent" class="detailSectionContent"></div>
                 </div>
-                <div id="trailersCollapsible" class="detailSection hide">
-                    <div id="trailerSectionHeader" class="detailSectionHeader">
-                        Trailers
-                    </div>
-                    <div id="trailersContent" class="detailSectionContent"></div>
-                </div>
                 <div id="alternateVersionsCollapsible" class="detailSection hide">
                     <div class="detailSectionHeader" style="position: relative;">
-                        Alternate Versions
-                        <button type="button" class="btnSplitVersions" style="position: absolute; right: 0; top: 6px; margin-top: 0; margin-bottom: 0;" data-mini="true" data-inline="true" data-icon="delete" data-iconpos="notext" title="Split Versions Apart">Split Versions Apart</button>
+                        Media Versions
+                        <button type="button" class="btnSplitVersions" style="position: absolute; right: 0; top: 6px; margin-top: 0; margin-bottom: 0; display: none;" data-mini="true" data-inline="true" data-icon="delete" data-iconpos="notext" title="Split Versions Apart">Split Versions Apart</button>
                     </div>
                     <div id="alternateVersionsContent" class="detailSectionContent"></div>
                 </div>
@@ -220,10 +216,10 @@
                 </div>
                 <div id="criticReviewsCollapsible" style="display: none;" class="detailSection">
                     <div class="detailSectionHeader">
-                        Movie Reviews From Rotten Tomatoes®
+                        Awards and Reviews
                     </div>
-
-                    <div style="padding: 0 1em;">
+                    <div style="padding: 0 .5em;">
+                        <p id="awardSummary"></p>
                         <div id="criticRatingSummary" class="criticReview criticRatingSummary" style="display: none;">
                             <p style="margin: 0 0 .5em -40px; font-weight: bold;">TOMATOMETER®</p>
                             <div class="reviewScore">
@@ -232,7 +228,6 @@
                             <div class="criticRatingScore"></div>
                             <div class="criticRatingSummaryText"></div>
                         </div>
-                        <p>Top Critic Reviews</p>
                         <div id="criticReviewsContent" class="detailSectionContent"></div>
                     </div>
                 </div>
diff --git a/dashboard-ui/scripts/episodes.js b/dashboard-ui/scripts/episodes.js
index d9f13eb4de..2e5fa70a40 100644
--- a/dashboard-ui/scripts/episodes.js
+++ b/dashboard-ui/scripts/episodes.js
@@ -34,7 +34,8 @@
                 shape: "backdrop",
                 showTitle: true,
                 showParentTitle: true,
-                overlayText: true
+                overlayText: true,
+                selectionPanel: true
             });
 
             $('.itemsContainer', page).removeClass('timelineItemsContainer');
@@ -260,6 +261,12 @@
             reloadItems(page);
         });
 
+        $('.itemsContainer', page).on('needsrefresh', function () {
+
+            reloadItems(page);
+
+        });
+
     }).on('pagebeforeshow', "#episodesPage", function () {
 
         var limit = LibraryBrowser.getDefaultPageSize();
diff --git a/dashboard-ui/scripts/itemdetailpage.js b/dashboard-ui/scripts/itemdetailpage.js
index d2a5ac9af8..263cbb441a 100644
--- a/dashboard-ui/scripts/itemdetailpage.js
+++ b/dashboard-ui/scripts/itemdetailpage.js
@@ -57,11 +57,27 @@
                     $('#playExternalButtonContainer', page).hide();
                 }
 
-                if (item.LocalTrailerCount && item.LocationType !== "Offline" && item.PlayAccess == 'Full') {
+                if (item.LocalTrailerCount && item.PlayAccess == 'Full') {
                     $('#trailerButtonContainer', page).show();
                 } else {
                     $('#trailerButtonContainer', page).hide();
                 }
+
+                if (!item.LocalTrailerCount && item.RemoteTrailers.length && item.PlayAccess == 'Full') {
+                    $('#externalTrailerButtonContainer', page).show();
+
+                    $('#btnPlayExternalTrailer', page).attr('href', item.RemoteTrailers[0].Url);
+
+                } else {
+                    $('#externalTrailerButtonContainer', page).hide();
+                    $('#btnPlayExternalTrailer', page).attr('href', '#');
+                }
+
+                if (user.Configuration.IsAdministrator) {
+                    $('.btnSplitVersions', page).show();
+                } else {
+                    $('.btnSplitVersions', page).hide();
+                }
             });
 
             if (item.LocationType == "Offline") {
@@ -203,12 +219,7 @@
             $('#scenesCollapsible', page).show();
             renderScenes(page, item, user, 4);
         }
-        if (item.LocalTrailerCount || !item.RemoteTrailers.length || item.Type == "Trailer") {
-            $('#trailersCollapsible', page).addClass('hide');
-        } else {
-            $('#trailersCollapsible', page).removeClass('hide');
-            renderTrailers(page, item, user);
-        }
+
         if (!item.SpecialFeatureCount || item.SpecialFeatureCount == 0 || item.Type == "Series") {
             $('#specialsCollapsible', page).addClass('hide');
         } else {
@@ -745,7 +756,7 @@
 
         ApiClient.getCriticReviews(item.Id, options).done(function (result) {
 
-            if (result.TotalRecordCount || item.CriticRatingSummary) {
+            if (result.TotalRecordCount || item.CriticRatingSummary || item.AwardSummary) {
                 $('#criticReviewsCollapsible', page).show();
                 renderCriticReviewsContent(page, result, limit);
             } else {
@@ -897,7 +908,7 @@
 
     function renderAlternateVersions(page, item, user) {
 
-        var url = ApiClient.getUrl("Videos/" + item.Id + "/AlternateVersions", {
+        var url = ApiClient.getUrl("Videos/" + item.Id + "/Versions", {
             userId: user.Id
         });
 
@@ -920,7 +931,8 @@
                     centerText: true,
                     formatIndicators: true,
                     linkItem: false,
-                    showProgress: false
+                    showProgress: false,
+                    showUnplayedIndicator: false
                 });
 
                 $('#alternateVersionsContent', page).html(html).trigger('create');
@@ -1021,7 +1033,7 @@
             }
 
             if (stream.Width || stream.Height) {
-                attributes.push('<span class="mediaInfoAttribute" id="mediaWidthHeight" data-width="' + stream.Width + '" data-height="' + stream.Height + '">' + stream.Width + 'x' + stream.Height + '</span>');
+                attributes.push('<span class="mediaInfoAttribute">' + stream.Width + 'x' + stream.Height + '</span>');
             }
 
             if (stream.AspectRatio && stream.Codec != "mjpeg") {
@@ -1128,38 +1140,6 @@
         });
     }
 
-    function renderTrailers(page, item, user) {
-
-        if (item.Type == "Trailer") {
-            $('#trailerSectionHeader', page).html('More trailers');
-        } else {
-            $('#trailerSectionHeader', page).html('Trailers');
-        }
-
-        var remoteTrailersHtml = '';
-
-        for (var i = 0, length = item.RemoteTrailers.length; i < length; i++) {
-
-            var trailer = item.RemoteTrailers[i];
-
-            var id = getParameterByName('v', trailer.Url);
-
-            if (id) {
-                remoteTrailersHtml += '<iframe class="posterItem smallBackdropPosterItem" style="margin:0 3px;width:auto;" src="//www.youtube.com/embed/' + id + '?wmode=opaque" frameborder="0" allowfullscreen></iframe>';
-            }
-        }
-
-        var elem = $('#trailersContent', page).html(remoteTrailersHtml).css({ "position": "relative", "z-index": 0 });
-
-        if (item.LocalTrailerCount) {
-            ApiClient.getLocalTrailers(user.Id, item.Id).done(function (trailers) {
-
-                elem.prepend(getVideosHtml(trailers, user));
-
-            });
-        }
-    }
-
     function renderCast(page, item, context, limit) {
 
         var html = '';
@@ -1232,6 +1212,39 @@
         MediaPlayer.play([currentItem], startPosition);
     }
 
+    function splitVersions(page) {
+
+        var id = getParameterByName('id');
+
+        Dashboard.confirm("Are you sure you wish to split the versions apart into separate items?", "Split Versions Apart", function (confirmResult) {
+
+            if (confirmResult) {
+
+                Dashboard.showLoadingMsg();
+
+                $.ajax({
+                    type: "DELETE",
+                    url: ApiClient.getUrl("Videos/" + id + "/AlternateVersions")
+
+                }).done(function () {
+
+                    Dashboard.hideLoadingMsg();
+
+                    reload(page);
+                });
+            }
+        });
+    }
+
+    function playTrailer(page) {
+
+        ApiClient.getLocalTrailers(Dashboard.getCurrentUserId(), currentItem.Id).done(function (trailers) {
+
+            MediaPlayer.play(trailers);
+
+        });
+    }
+
     $(document).on('pageinit', "#itemDetailPage", function () {
 
         var page = this;
@@ -1249,12 +1262,7 @@
         });
 
         $('#btnPlayTrailer', page).on('click', function () {
-
-            ApiClient.getLocalTrailers(Dashboard.getCurrentUserId(), currentItem.Id).done(function (trailers) {
-
-                MediaPlayer.play(trailers);
-
-            });
+            playTrailer(page);
         });
 
         $('#btnPlayExternal', page).on('click', function () {
@@ -1275,6 +1283,11 @@
             });
         });
 
+        $('.btnSplitVersions', page).on('click', function () {
+
+            splitVersions(page);
+        });
+
     }).on('pageshow', "#itemDetailPage", function () {
 
         var page = this;
diff --git a/dashboard-ui/scripts/librarybrowser.js b/dashboard-ui/scripts/librarybrowser.js
index 0337402364..39f95e7550 100644
--- a/dashboard-ui/scripts/librarybrowser.js
+++ b/dashboard-ui/scripts/librarybrowser.js
@@ -733,7 +733,7 @@
                     var chkItemSelectId = 'chkItemSelect' + i;
 
                     // Render this pre-enhanced to save on jquery mobile dom manipulation
-                    html += '<div class="itemSelectionPanel" onclick="return false;"><div class="ui-checkbox ui-mini"><label class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off" for="' + chkItemSelectId + '">Select</label><input id="' + chkItemSelectId + '" type="checkbox" class="chkItemSelect" data-enhanced="true" /></div></div>';
+                    html += '<div class="itemSelectionPanel" onclick="return false;" style="display:none;"><div class="ui-checkbox ui-mini"><label class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off" for="' + chkItemSelectId + '">Select</label><input id="' + chkItemSelectId + '" type="checkbox" class="chkItemSelect" data-enhanced="true" /></div></div>';
 
                 }
 
diff --git a/dashboard-ui/scripts/librarylist.js b/dashboard-ui/scripts/librarylist.js
index ed448b68a1..adaba1bfa3 100644
--- a/dashboard-ui/scripts/librarylist.js
+++ b/dashboard-ui/scripts/librarylist.js
@@ -365,7 +365,7 @@
 
         var msg = "The following titles will be grouped into one item:<br/><br/>" + names;
 
-        msg += "<br/><br/>Media Browser clients will choose the optimal version to play based on device and network conditions. Are you sure you wish to continue?";
+        msg += "<br/><br/>Media Browser clients will automatically choose the optimal version to play based on device and network performance. Are you sure you wish to continue?";
 
         Dashboard.confirm(msg, "Group Versions", function (confirmResult) {
 
@@ -397,10 +397,6 @@
             toggleSelections(page);
         });
 
-        $('.itemsContainer', page).on('listrender', function () {
-            hideSelections(page);
-        });
-
         $('.btnMergeVersions', page).on('click', function () {
             combineVersions(page);
         });
diff --git a/dashboard-ui/scripts/movies.js b/dashboard-ui/scripts/movies.js
index 8cb64c2e10..e670c38d59 100644
--- a/dashboard-ui/scripts/movies.js
+++ b/dashboard-ui/scripts/movies.js
@@ -67,7 +67,7 @@
 
             html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount);
 
-            $('#items', page).html(html).trigger('create').createPosterItemMenus().trigger('listrender');
+            $('#items', page).html(html).trigger('create').createPosterItemMenus();
 
             $('.btnNextPage', page).on('click', function () {
                 query.StartIndex += query.Limit;
diff --git a/dashboard-ui/scripts/scheduledtaskpage.js b/dashboard-ui/scripts/scheduledtaskpage.js
index af1ebe5b51..a3f1e31022 100644
--- a/dashboard-ui/scripts/scheduledtaskpage.js
+++ b/dashboard-ui/scripts/scheduledtaskpage.js
@@ -102,11 +102,11 @@
             hours = 0;
         }
 
-        hours = hours.toFixed(0);
+        hours = Math.floor(hours);
 
         ticks -= (hours * 36000000000);
 
-        var minutes = (ticks / 600000000).toFixed(0);
+        var minutes = Math.floor((ticks / 600000000));
 
         var suffix = "am";