From 518003518bcb6fea6176583ee2c5e991bbc88172 Mon Sep 17 00:00:00 2001
From: Luke Pulverenti <luke.pulverenti@gmail.com>
Date: Thu, 16 Jan 2014 12:23:30 -0500
Subject: [PATCH] add tv service status reporting

---
 dashboard-ui/css/librarybrowser.css    |   6 +-
 dashboard-ui/css/posteritem.css        |   2 +-
 dashboard-ui/itemdetails.html          |   2 +-
 dashboard-ui/scripts/itemdetailpage.js |   2 +-
 dashboard-ui/scripts/librarybrowser.js | 158 ++++++++++++++++++++-----
 dashboard-ui/scripts/mediaplayer.js    |   3 +
 dashboard-ui/scripts/remotecontrol.js  |  27 ++---
 dashboard-ui/scripts/site.js           |   8 +-
 8 files changed, 153 insertions(+), 55 deletions(-)

diff --git a/dashboard-ui/css/librarybrowser.css b/dashboard-ui/css/librarybrowser.css
index 6c11a406df..e1176bb42e 100644
--- a/dashboard-ui/css/librarybrowser.css
+++ b/dashboard-ui/css/librarybrowser.css
@@ -852,9 +852,9 @@ a.itemTag:hover {
     right: 5px;
     text-align: center;
     vertical-align: middle;
-    width: 26px;
-    height: 21px;
-    padding-top: 5px;
+    width: 24px;
+    height: 19px;
+    padding-top: 3px;
     border-radius: 50%;
     color: #fff;
     background: rgb(82, 181, 75);
diff --git a/dashboard-ui/css/posteritem.css b/dashboard-ui/css/posteritem.css
index 9b8a2c6883..686082cbb9 100644
--- a/dashboard-ui/css/posteritem.css
+++ b/dashboard-ui/css/posteritem.css
@@ -32,7 +32,7 @@
 }
 
 .posterItemOverlayInner {
-    padding: 15px;
+    padding: 15px 13px 10px;
 }
 
 .smallBackdropPosterItem, .smallPosterItem {
diff --git a/dashboard-ui/itemdetails.html b/dashboard-ui/itemdetails.html
index 36102947de..ebc877ef39 100644
--- a/dashboard-ui/itemdetails.html
+++ b/dashboard-ui/itemdetails.html
@@ -142,7 +142,7 @@
                 <button id="btnPlay" type="button" data-icon="play" data-inline="true" data-mini="true">Play</button>
             </span>
             <span id="trailerButtonContainer">
-                <button id="btnPlayTrailer" type="button" data-icon="play" data-inline="true" data-mini="true">Trailer</button>
+                <button id="btnPlayTrailer" type="button" data-icon="video" data-inline="true" data-mini="true">Trailer</button>
             </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>
diff --git a/dashboard-ui/scripts/itemdetailpage.js b/dashboard-ui/scripts/itemdetailpage.js
index 9972fddf46..79ac16c7bf 100644
--- a/dashboard-ui/scripts/itemdetailpage.js
+++ b/dashboard-ui/scripts/itemdetailpage.js
@@ -475,7 +475,7 @@
                 borderless: item.Type == "Game"
             });
 
-            $('#similarContent', page).html(html);
+            $('#similarContent', page).html(html).createPosterItemHoverMenu();
         });
     }
 
diff --git a/dashboard-ui/scripts/librarybrowser.js b/dashboard-ui/scripts/librarybrowser.js
index 455c3cd09e..316da9b436 100644
--- a/dashboard-ui/scripts/librarybrowser.js
+++ b/dashboard-ui/scripts/librarybrowser.js
@@ -1498,7 +1498,7 @@
             return html;
         },
 
-        getRatingHtml: function (item) {
+        getRatingHtml: function (item, metascore) {
 
             var html = "";
 
@@ -1508,7 +1508,7 @@
                 html += '<div class="starRatingValue">';
                 html += item.CommunityRating.toFixed(1);
                 html += '</div>';
-                
+
                 //var rating = item.CommunityRating / 2;
 
                 //for (var i = 1; i <= 5; i++) {
@@ -1535,7 +1535,7 @@
                 html += '<div class="criticRating">' + item.CriticRating + '%</div>';
             }
 
-            if (item.Metascore) {
+            if (item.Metascore && metascore !== false) {
 
                 if (item.Metascore >= 60) {
                     html += '<div class="metascore metascorehigh" title="Metascore">' + item.Metascore + '</div>';
@@ -2508,7 +2508,7 @@
         html += '<h3 style="margin: .5em 0;padding:0 1em;font-weight:normal;">' + LibraryBrowser.getPosterViewDisplayName(item, true) + '</h3>';
         html += '</div>';
 
-        html += '<div style="padding: 1em;">';
+        html += '<div style="padding: .8em 1em;">';
         html += getOverlayHtml(item);
         html += '</div>';
 
@@ -2645,7 +2645,7 @@
 
             var elem = this;
 
-            $(this).animate({ "height": "0" }, function () {
+            $(this).animate({ "height": "0" }, "fast", function () {
 
                 $(elem).hide();
 
@@ -2659,47 +2659,136 @@
 
         });
     }
-    
-    function getOverlayHtml(item) {
+
+    function getOverlayHtml(item, currentUser, posterItem) {
 
         var html = '';
 
         html += '<div class="posterItemOverlayInner">';
 
-        html += '<div style="font-weight:bold;margin-bottom:1.5em;">';
-        html += LibraryBrowser.getPosterViewDisplayName(item, true);
+        var isSmallItem = $(posterItem).hasClass('smallBackdropPosterItem');
+        var isPortrait = $(posterItem).hasClass('portraitPosterItem');
+
+        var parentName = isSmallItem || isPortrait ? null : item.SeriesName;
+        var name = LibraryBrowser.getPosterViewDisplayName(item, true);
+
+        html += '<div style="font-weight:bold;margin-bottom:1em;">';
+        var logoHeight = isPortrait || isSmallItem ? 20 : 22;
+        var maxLogoWidth = isPortrait ? 100 : 200;
+        var imgUrl;
+
+        if (parentName && item.ParentLogoItemId) {
+
+            imgUrl = ApiClient.getImageUrl(item.ParentLogoItemId, {
+                height: logoHeight * 2,
+                type: 'logo',
+                tag: item.ParentLogoImageTag
+            });
+
+            html += '<img src="' + imgUrl + '" style="max-height:' + logoHeight + 'px;max-width:' + maxLogoWidth + 'px;" />';
+
+        }
+        else if (item.ImageTags.Logo) {
+
+            imgUrl = LibraryBrowser.getImageUrl(item, 'Logo', 0, {
+                height: logoHeight * 2,
+            });
+
+            html += '<img src="' + imgUrl + '" style="max-height:' + logoHeight + 'px;max-width:' + maxLogoWidth + 'px;" />';
+        }
+        else {
+            html += parentName || name;
+        }
         html += '</div>';
 
-        //html += '<p class="itemMiscInfo">';
-        //html += LibraryBrowser.getMiscInfoHtml(item);
-        //html += '</p>';
+        if (parentName) {
+            html += '<p>';
+            html += name;
+            html += '</p>';
+        } else if (!isSmallItem) {
+            html += '<p class="itemMiscInfo" style="white-space:nowrap;">';
+            html += LibraryBrowser.getMiscInfoHtml(item);
+            html += '</p>';
+        }
 
-        html += '<p>';
+        html += '<p style="margin:.75em 0;">';
         html += '<span class="itemCommunityRating">';
-        html += LibraryBrowser.getRatingHtml(item);
-        html += '</span>';
-        html += '</p>';
-
-        html += '<p>';
-        html += '<span class="userDataIcons">';
-        html += LibraryBrowser.getUserDataIconsHtml(item);
+        html += LibraryBrowser.getRatingHtml(item, false);
         html += '</span>';
+        
+        if (isPortrait) {
+            html += '<span class="userDataIcons" style="margin-left:0;display:block;margin:1.25em 0;">';
+            html += LibraryBrowser.getUserDataIconsHtml(item);
+            html += '</span>';
+        } else {
+            html += '<span class="userDataIcons" style="margin-left:1em;">';
+            html += LibraryBrowser.getUserDataIconsHtml(item);
+            html += '</span>';
+        }
         html += '</p>';
 
         //html += '<p class="itemOverlayHtml">';
         //html += (item.OverviewHtml || item.Overview || '');
         //html += '</p>';
 
-        html += '<button type="button" data-mini="true" data-inline="true" data-icon="play" data-iconpos="notext">Play</button>';
-        html += '<button type="button" data-mini="true" data-inline="true" data-icon="video" data-iconpos="notext">Play</button>';
-        html += '<button type="button" data-mini="true" data-inline="true" data-icon="remote" data-iconpos="notext">Play</button>';
-        html += '<button type="button" data-mini="true" data-inline="true" data-icon="edit" data-iconpos="notext">Play</button>';
+        html += '<div>';
+
+        var buttonMargin = isPortrait ? "margin:0 7px 0 0;" : "margin:0 10px 0 0;";
+
+        var buttonCount = 0;
+
+        if (MediaPlayer.canPlay(item)) {
+            html += '<button type="button" data-mini="true" data-inline="true" data-icon="play" data-iconpos="notext" title="Play" onclick="MediaPlayer.playById(\'' + item.Id + '\');return false;" style="' + buttonMargin + '">Play</button>';
+            buttonCount++;
+        }
+
+        if (item.LocalTrailerCount) {
+            html += '<button type="button" data-mini="true" data-inline="true" data-icon="video" data-iconpos="notext" class="btnPlayTrailer" data-itemid="' + item.Id + '" title="Play Trailer" style="' + buttonMargin + '">Play Trailer</button>';
+            buttonCount++;
+        }
+
+        if (currentUser.Configuration.IsAdministrator) {
+            html += '<button type="button" data-mini="true" data-inline="true" data-icon="edit" data-iconpos="notext" title="Edit" onclick="Dashboard.navigate(\'edititemmetadata.html?id=' + item.Id + '\');return false;" style="' + buttonMargin + '">Edit</button>';
+            buttonCount++;
+        }
+
+        if (!isPortrait || buttonCount < 3) {
+            html += '<button type="button" data-mini="true" data-inline="true" data-icon="wireless" data-iconpos="notext" title="Send to Device" class="btnRemoteControl" data-itemid="' + item.Id + '" style="' + buttonMargin + '">Send to Device</button>';
+        }
+
+        html += '</div>';
 
         html += '</div>';
 
         return html;
     }
 
+    function onTrailerButtonClick() {
+
+        var id = this.getAttribute('data-itemid');
+
+        ApiClient.getLocalTrailers(Dashboard.getCurrentUserId(), id).done(function (trailers) {
+            MediaPlayer.play(trailers);
+        });
+
+        return false;
+    }
+
+    function onRemoteControlButtonClick() {
+
+        var id = this.getAttribute('data-itemid');
+
+        ApiClient.getItem(Dashboard.getCurrentUserId(), id).done(function (item) {
+
+            RemoteControl.showMenuForItem({
+                item: item
+            });
+
+        });
+
+        return false;
+    }
+
     $.fn.createPosterItemHoverMenu = function () {
 
         function onShowTimerExpired(elem) {
@@ -2707,16 +2796,25 @@
             var innerElem = $('.posterItemOverlayTarget', elem);
             var id = elem.getAttribute('data-itemid');
 
-            ApiClient.getItem(Dashboard.getCurrentUserId(), id).done(function (item) {
+            var promise1 = ApiClient.getItem(Dashboard.getCurrentUserId(), id);
+            var promise2 = Dashboard.getCurrentUser();
 
-                innerElem.html(getOverlayHtml(item)).trigger('create');
+            $.when(promise1, promise2).done(function (response1, response2) {
+
+                var item = response1[0];
+                var user = response2[0];
+
+                innerElem.html(getOverlayHtml(item, user, elem)).trigger('create');
+
+                $('.btnPlayTrailer', innerElem).on('click', onTrailerButtonClick);
+                $('.btnRemoteControl', innerElem).on('click', onRemoteControlButtonClick);
             });
 
             innerElem.show().each(function () {
 
                 this.style.height = 0;
 
-            }).animate({ "height": "100%" });
+            }).animate({ "height": "100%" }, "fast");
         }
 
         function onHoverIn() {
@@ -2732,7 +2830,7 @@
 
                 onShowTimerExpired(elem);
 
-            }, 600);
+            }, 800);
         }
 
         // https://hacks.mozilla.org/2013/04/detecting-touch-its-the-why-not-the-how/
@@ -2742,8 +2840,8 @@
                running on touch-capable device */
             return this;
         }
-        return this;
-        return this.on('mouseenter', '.posterItem', onHoverIn).on('mouseleave', '.posterItem', onHoverOut);
+
+        return this.on('mouseenter', '.backdropPosterItem,.smallBackdropPosterItem,.portraitPosterItem', onHoverIn).on('mouseleave', '.backdropPosterItem,.smallBackdropPosterItem,.portraitPosterItem', onHoverOut);
     };
 
 })(jQuery, document, window);
\ No newline at end of file
diff --git a/dashboard-ui/scripts/mediaplayer.js b/dashboard-ui/scripts/mediaplayer.js
index 9e75a78218..3cb17610d4 100644
--- a/dashboard-ui/scripts/mediaplayer.js
+++ b/dashboard-ui/scripts/mediaplayer.js
@@ -993,6 +993,9 @@
 
         self.canPlay = function (item) {
 
+            if (item.LocationType == "Virtual") {
+                return false;
+            }
             if (item.Type == "MusicAlbum" || item.Type == "MusicArtist" || item.Type == "MusicGenre") {
                 return true;
             }
diff --git a/dashboard-ui/scripts/remotecontrol.js b/dashboard-ui/scripts/remotecontrol.js
index 5355a54c06..b5e529164b 100644
--- a/dashboard-ui/scripts/remotecontrol.js
+++ b/dashboard-ui/scripts/remotecontrol.js
@@ -64,12 +64,12 @@
 
         var item = options.item;
 
-        var html = '<div data-role="popup" id="remoteControlFlyout" data-transition="slidefade" data-theme="a">';
+        var html = '<div data-role="popup" id="remoteControlFlyout" data-transition="slidedown" data-theme="a">';
 
         html += '<a href="#" data-rel="back" data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-right" data-theme="b">Close</a>';
 
         html += '<div class="ui-bar-b" style="text-align:center;">';
-        html += '<div style="margin:.5em 0;">Remote Control</div>';
+        html += '<div style="margin:.5em 0;">Send to Device</div>';
         html += '</div>';
 
         html += '<div style="padding: 1em;">';
@@ -385,7 +385,6 @@
     function renderPlayFromOptions(elem, item) {
 
         var html = '';
-        var html = '';
 
         html += '<h4 style="margin: 1em 0 .5em;">Play from scene</h4>';
 
@@ -455,33 +454,31 @@
         var html = '';
 
         html += '<div style="margin-top:0;">';
-        html += '<label for="selectCommand">Select command</label>';
+        html += '<label for="selectCommand">Send:</label>';
         html += '<select id="selectCommand" data-mini="true">';
 
-        if (item.LocationType == 'Virtual') {
-            html += '<option value="Play" selected>Browse</label>';
-        } else {
-            html += '<option value="Play" selected>Play</label>';
-        }
+        var mediaLabel = item.MediaType || 'Media';
+        
+        html += '<option value="Play" selected>' + mediaLabel + '</label>';
 
         if (item.Chapters && item.Chapters.length) {
-            html += '<option value="PlayFromChapter">Play from scene</label>';
+            html += '<option value="PlayFromChapter">Scene</label>';
         }
 
         if (item.LocalTrailerCount) {
-            html += '<option value="Trailer">Play trailer</label>';
+            html += '<option value="Trailer">Trailer</label>';
         }
 
         if (item.SpecialFeatureCount) {
-            html += '<option value="SpecialFeature">Play special feature</label>';
+            html += '<option value="SpecialFeature">Special feature</label>';
         }
 
         if (options.themeSongs) {
-            html += '<option value="ThemeSong">Play theme song</label>';
+            html += '<option value="ThemeSong">Theme song</label>';
         }
 
         if (options.themeVideos) {
-            html += '<option value="ThemeVideo">Play theme video</label>';
+            html += '<option value="ThemeVideo">Theme video</label>';
         }
 
         html += '</select>';
@@ -632,7 +629,7 @@
 
     function showMenu(sessions, options) {
 
-        var html = '<div data-role="popup" data-transition="slidefade" id="remoteControlFlyout" data-theme="a">';
+        var html = '<div data-role="popup" data-transition="slidedown" id="remoteControlFlyout" data-theme="a">';
 
         html += '<a href="#" data-rel="back" data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-right" data-theme="b">Close</a>';
 
diff --git a/dashboard-ui/scripts/site.js b/dashboard-ui/scripts/site.js
index cb98051137..858af04fd2 100644
--- a/dashboard-ui/scripts/site.js
+++ b/dashboard-ui/scripts/site.js
@@ -1355,12 +1355,12 @@ $(function () {
     footerHtml += '<button onclick="MediaPlayer.showChaptersFlyout();" id="chaptersButton" class="mediaButton chaptersButton" title="Scenes" type="button" data-icon="video" data-iconpos="notext" data-inline="true">Scenes</button>';
     footerHtml += '<div class="mediaFlyoutContainer"><div id="chaptersFlyout" style="display:none;" class="mediaPlayerFlyout chaptersFlyout"></div></div>';
 
-    footerHtml += '<button onclick="MediaPlayer.showChannelsFlyout();" id="channelsButton" class="mediaButton channelsButton" title="Channels" type="button" data-icon="tv" data-iconpos="notext" data-inline="true">Channels</button>';
-    footerHtml += '<div class="mediaFlyoutContainer"><div id="channelsFlyout" style="display:none;" class="mediaPlayerFlyout channelsFlyout"></div></div>';
-
     footerHtml += '<button onclick="MediaPlayer.toggleFullscreen();" id="fullscreenButton" class="mediaButton fullscreenButton" title="Fullscreen" type="button" data-icon="action" data-iconpos="notext" data-inline="true">Fullscreen</button>';
 
-    footerHtml += '<button onclick="MediaPlayer.showSendMediaMenu();" id="sendMediaButton" class="mediaButton sendMediaButton" title="Cast" type="button" data-icon="wireless" data-iconpos="notext" data-inline="true">Cast</button>';
+    footerHtml += '<button onclick="MediaPlayer.showChannelsFlyout();" id="channelsButton" class="mediaButton channelsButton" title="TV Channels" type="button" data-icon="tv" data-iconpos="notext" data-inline="true">TV Channels</button>';
+    footerHtml += '<div class="mediaFlyoutContainer"><div id="channelsFlyout" style="display:none;" class="mediaPlayerFlyout channelsFlyout"></div></div>';
+
+    footerHtml += '<button onclick="MediaPlayer.showSendMediaMenu();" id="sendMediaButton" class="mediaButton sendMediaButton" title="Send to Device" type="button" data-icon="wireless" data-iconpos="notext" data-inline="true">Send to Device</button>';
 
     footerHtml += '</div>';