From fdb4dc593c5f67a02dfe903965dcfc304b46b97e Mon Sep 17 00:00:00 2001
From: Luke Pulverenti <luke.pulverenti@gmail.com>
Date: Fri, 24 Jun 2016 13:30:29 -0400
Subject: [PATCH] update detail page

---
 dashboard-ui/itemdetails.html          | 10 ++--
 dashboard-ui/scripts/itemdetailpage.js | 17 ++++---
 dashboard-ui/scripts/nowplayingbar.js  | 65 ++++++++++++++------------
 dashboard-ui/scripts/site.js           |  4 +-
 4 files changed, 50 insertions(+), 46 deletions(-)

diff --git a/dashboard-ui/itemdetails.html b/dashboard-ui/itemdetails.html
index 2640c99db9..6e57ca8a74 100644
--- a/dashboard-ui/itemdetails.html
+++ b/dashboard-ui/itemdetails.html
@@ -129,14 +129,14 @@
                 <div>
                     <p id="awardSummary"></p>
                     <div class="paperList" id="criticRatingSummary">
-                        <paper-icon-item>
+                        <div class="listItem">
                             <button is="emby-button" type="button" class="mini fab" style="background-color: transparent; background-repeat: no-repeat; background-position: center center; background-size: cover; background-image: url(css/images/fresh.png);" item-icon></button>
-                            <paper-item-body three-line>
+                            <div class="listItemBody">
                                 <div>TOMATOMETER®</div>
                                 <div class="criticRatingScore"></div>
-                                <div class="criticRatingSummaryText" style="white-space: normal;" secondary></div>
-                            </paper-item-body>
-                        </paper-icon-item>
+                                <div class="criticRatingSummaryText secondary" style="white-space: normal;"></div>
+                            </div>
+                        </div>
                     </div>
                     <div id="criticReviewsContent"></div>
                 </div>
diff --git a/dashboard-ui/scripts/itemdetailpage.js b/dashboard-ui/scripts/itemdetailpage.js
index 8cd249b9d7..38f458ccf4 100644
--- a/dashboard-ui/scripts/itemdetailpage.js
+++ b/dashboard-ui/scripts/itemdetailpage.js
@@ -1215,13 +1215,12 @@
         var html = '';
 
         var reviews = result.Items;
-
         for (var i = 0, length = reviews.length; i < length; i++) {
 
             var review = reviews[i];
 
             html += '<div class="paperList criticReviewPaperList">';
-            html += '<paper-icon-item style="padding-top:.5em;padding-bottom:.5em;">';
+            html += '<div class="listItem">';
 
             if (review.Score != null) {
                 //html += review.Score;
@@ -1229,13 +1228,13 @@
             else if (review.Likes != null) {
 
                 if (review.Likes) {
-                    html += '<paper-fab mini style="background-color:transparent;background-image:url(\'css/images/fresh.png\');background-repeat:no-repeat;background-position:center center;background-size: cover;" item-icon></paper-fab>';
+                    html += '<div style="background-color:transparent;background-image:url(\'css/images/fresh.png\');background-repeat:no-repeat;background-position:center center;background-size: cover;width:40px;height:40px;"></div>';
                 } else {
-                    html += '<paper-fab mini style="background-color:transparent;background-image:url(\'css/images/rotten.png\');background-repeat:no-repeat;background-position:center center;background-size: cover;" item-icon></paper-fab>';
+                    html += '<div style="background-color:transparent;background-image:url(\'css/images/rotten.png\');background-repeat:no-repeat;background-position:center center;background-size: cover;width:40px;height:40px;"></div>';
                 }
             }
 
-            html += '<paper-item-body three-line>';
+            html += '<div class="listItemBody">';
 
             html += '<div style="white-space:normal;">' + review.Caption + '</div>';
 
@@ -1248,7 +1247,7 @@
                 vals.push(review.Publisher);
             }
 
-            html += '<div secondary>' + vals.join(', ') + '.';
+            html += '<div class="secondary">' + vals.join(', ') + '.';
             if (review.Date) {
 
                 try {
@@ -1265,12 +1264,12 @@
             html += '</div>';
 
             if (review.Url) {
-                html += '<div secondary><a class="textlink" href="' + review.Url + '" target="_blank">' + Globalize.translate('ButtonFullReview') + '</a></div>';
+                html += '<div class="secondary"><a class="textlink" href="' + review.Url + '" target="_blank">' + Globalize.translate('ButtonFullReview') + '</a></div>';
             }
 
-            html += '</paper-item-body>';
+            html += '</div>';
 
-            html += '</paper-icon-item>';
+            html += '</div>';
             html += '</div>';
         }
 
diff --git a/dashboard-ui/scripts/nowplayingbar.js b/dashboard-ui/scripts/nowplayingbar.js
index e3e3203cf9..414677a2f7 100644
--- a/dashboard-ui/scripts/nowplayingbar.js
+++ b/dashboard-ui/scripts/nowplayingbar.js
@@ -9,6 +9,7 @@
     var unmuteButton;
     var muteButton;
     var volumeSlider;
+    var volumeSliderContainer;
     var unpauseButtons;
     var pauseButtons;
     var positionSlider;
@@ -51,7 +52,7 @@
         html += '<button is="paper-icon-button-light" class="muteButton mediaButton autoSize"><i class="md-icon">volume_up</i></button>';
         html += '<button is="paper-icon-button-light" class="unmuteButton mediaButton autoSize"><i class="md-icon">volume_off</i></button>';
 
-        html += '<div class="sliderContainer nowPlayingBarVolumeSliderContainer" style="width:100px;vertical-align:middle;display:inline-flex;">';
+        html += '<div class="sliderContainer nowPlayingBarVolumeSliderContainer hide" style="width:100px;vertical-align:middle;display:inline-flex;">';
         html += '<input type="range" is="emby-slider" pin step="1" min="0" max="100" value="0" class="nowPlayingBarVolumeSlider"/>';
         html += '</div>';
 
@@ -229,46 +230,50 @@
 
         toggleRepeatButtonIcon = toggleRepeatButton.querySelector('i');
 
-        // Unfortunately this is necessary because the polymer elements might not be ready immediately and there doesn't seem to be an event-driven way to find out when
-        setTimeout(function () {
+        volumeSlider = elem.querySelector('.nowPlayingBarVolumeSlider');
+        volumeSliderContainer = elem.querySelector('.nowPlayingBarVolumeSliderContainer');
 
-            volumeSlider = elem.querySelector('.nowPlayingBarVolumeSlider');
-            volumeSlider.addEventListener('change', function () {
+        if (AppInfo.hasPhysicalVolumeButtons) {
+            volumeSliderContainer.classList.add('hide');
+        } else {
+            volumeSliderContainer.classList.remove('hide');
+        }
 
-                if (currentPlayer) {
-                    currentPlayer.setVolume(this.value);
-                }
+        volumeSlider.addEventListener('change', function () {
 
-            });
+            if (currentPlayer) {
+                currentPlayer.setVolume(this.value);
+            }
 
-            positionSlider = elem.querySelector('.nowPlayingBarPositionSlider');
-            positionSlider.addEventListener('change', function () {
+        });
 
-                if (currentPlayer && lastPlayerState) {
+        positionSlider = elem.querySelector('.nowPlayingBarPositionSlider');
+        positionSlider.addEventListener('change', function () {
 
-                    var newPercent = parseFloat(this.value);
-                    var newPositionTicks = (newPercent / 100) * lastPlayerState.NowPlayingItem.RunTimeTicks;
+            if (currentPlayer && lastPlayerState) {
 
-                    currentPlayer.seek(Math.floor(newPositionTicks));
-                }
+                var newPercent = parseFloat(this.value);
+                var newPositionTicks = (newPercent / 100) * lastPlayerState.NowPlayingItem.RunTimeTicks;
 
-            });
+                currentPlayer.seek(Math.floor(newPositionTicks));
+            }
 
-            positionSlider.getBubbleText = function (value) {
+        });
 
-                var state = lastPlayerState;
+        positionSlider.getBubbleText = function (value) {
 
-                if (!state || !state.NowPlayingItem || !state.NowPlayingItem.RunTimeTicks) {
-                    return '--:--';
-                }
+            var state = lastPlayerState;
 
-                var ticks = state.NowPlayingItem.RunTimeTicks;
-                ticks /= 100;
-                ticks *= value;
+            if (!state || !state.NowPlayingItem || !state.NowPlayingItem.RunTimeTicks) {
+                return '--:--';
+            }
 
-                return datetime.getDisplayRunningTime(ticks);
-            };
-        }, 300);
+            var ticks = state.NowPlayingItem.RunTimeTicks;
+            ticks /= 100;
+            ticks *= value;
+
+            return datetime.getDisplayRunningTime(ticks);
+        };
     }
 
     function showRemoteControl(tabIndex) {
@@ -488,9 +493,9 @@
         if (volumeSlider) {
 
             if (showVolumeSlider) {
-                volumeSlider.classList.remove('hide');
+                volumeSliderContainer.classList.remove('hide');
             } else {
-                volumeSlider.classList.add('hide');
+                volumeSliderContainer.classList.add('hide');
             }
 
             if (!volumeSlider.dragging) {
diff --git a/dashboard-ui/scripts/site.js b/dashboard-ui/scripts/site.js
index 5551fa9852..2dcb7322fc 100644
--- a/dashboard-ui/scripts/site.js
+++ b/dashboard-ui/scripts/site.js
@@ -1524,7 +1524,7 @@ var AppInfo = {};
         AppInfo.supportsFileInput = !(AppInfo.isNativeApp && isAndroid);
 
         AppInfo.hasPhysicalVolumeButtons = isCordova || isMobile;
-        AppInfo.hasPhysicalVolumeButtons = true;
+
         AppInfo.enableBackButton = isIOS && (window.navigator.standalone || AppInfo.isNativeApp);
 
         AppInfo.supportsSyncPathSetting = isCordova && isAndroid;
@@ -2556,7 +2556,7 @@ var AppInfo = {};
 
         defineRoute({
             path: '/itemdetails.html',
-            dependencies: ['emby-button', 'tileitemcss', 'scripts/livetvcomponents', 'paper-item-body', 'paper-icon-item', 'paper-icon-button-light'],
+            dependencies: ['emby-button', 'tileitemcss', 'scripts/livetvcomponents', 'paper-icon-button-light', 'listViewStyle'],
             controller: 'scripts/itemdetailpage',
             autoFocus: false,
             transition: 'fade'