update guide

dashboard-ui/bower_components/emby-webcomponents/guide/guide.css

@@ -4,25 +4,6 @@
     align-items: initial;
 }
 
-    .tvguide ::-webkit-scrollbar {
-        width: 10px;
-        height: 10px;
-    }
-
-    .tvguide ::-webkit-scrollbar-button:start:decrement,
-    .tvguide ::-webkit-scrollbar-button:end:increment {
-        display: none;
-    }
-
-    .tvguide ::-webkit-scrollbar-track-piece {
-        background-color: #3b3b3b;
-    }
-
-    .tvguide ::-webkit-scrollbar-thumb:vertical, .tvguide ::-webkit-scrollbar-thumb:horizontal {
-        -webkit-border-radius: 2px;
-        background: #888 no-repeat center;
-    }
-
 .tvGuideHeader {
     white-space: nowrap;
     width: 100%;
@@ -128,38 +109,40 @@
     position: relative;
 }
 
-.currentTimeIndicator {
+.currentTimeIndicatorBar {
     position: absolute;
     bottom: .05em;
     left: 0;
     width: 100%;
     height: 2px;
     display: flex;
-    align-items: flex-end;
+    margin-left: .65vh;
-    transition: all 500ms ease-out;
-}
-
-.layout-tv .currentTimeIndicator {
-    /* Need to account for the scrollbar not being there */
-    margin-left: 4px;
-}
-
-.currentTimeIndicatorBar {
     background-color: #52B54B;
     height: 2px;
-    flex-grow: 1;
+    transform-origin: left;
-    width: 100%;
+    transition: transform 500ms ease-out;
-    margin-left: .65vh;
 }
 
-.currentTimeIndicator iron-icon {
+.currentTimeIndicatorArrowContainer {
+    position: absolute;
+    bottom: -1.35vh;
+    width: 100%;
+    color: #52B54B;
+    margin-left: .65vh;
+    transform-origin: left;
+    transition: transform 500ms ease-out;
+}
+
+.layout-tv .currentTimeIndicatorBar, .layout-tv .currentTimeIndicatorArrowContainer {
+    /* Need to account for the scrollbar not being there */
+    left: 4px;
+}
+
+.currentTimeIndicatorArrow {
     width: 4vh;
     height: 4vh;
     color: #52B54B;
-    flex-shrink: 0;
-    position: relative;
     margin-left: -2vh;
-    top: 1.45vh;
 }
 
 .channelPrograms, .timeslotHeadersInner {

dashboard-ui/bower_components/emby-webcomponents/guide/guide.js

@@ -59,7 +59,8 @@
         }
 
         var currentTimeUpdateInterval;
-        var currentTimeIndicatorElement;
+        var currentTimeIndicatorBar;
+        var currentTimeIndicatorArrow;
         function startCurrentTimeUpdateInterval() {
             clearCurrentTimeUpdateInterval();
 
@@ -74,13 +75,17 @@
                 clearInterval(interval);
             }
             currentTimeUpdateInterval = null;
-            currentTimeIndicatorElement = null;
+            currentTimeIndicatorBar = null;
+            currentTimeIndicatorArrow = null;
         }
 
         function updateCurrentTimeIndicator() {
 
-            if (!currentTimeIndicatorElement) {
+            if (!currentTimeIndicatorBar) {
-                currentTimeIndicatorElement = options.element.querySelector('.currentTimeIndicator');
+                currentTimeIndicatorBar = options.element.querySelector('.currentTimeIndicatorBar');
+            }
+            if (!currentTimeIndicatorArrow) {
+                currentTimeIndicatorArrow = options.element.querySelector('.currentTimeIndicatorArrowContainer');
             }
 
             var dateDifference = new Date().getTime() - currentDate.getTime();
@@ -88,13 +93,17 @@
             pct = Math.min(pct, 1);
 
             if (pct <= 0 || pct >= 1) {
-                currentTimeIndicatorElement.classList.add('hide');
+                currentTimeIndicatorBar.classList.add('hide');
+                currentTimeIndicatorArrow.classList.add('hide');
             } else {
-                currentTimeIndicatorElement.classList.remove('hide');
+                currentTimeIndicatorBar.classList.remove('hide');
+                currentTimeIndicatorArrow.classList.remove('hide');
 
                 //pct *= 100;
                 //pct = 100 - pct;
-                currentTimeIndicatorElement.style.width = (pct * 100) + '%';
+                //currentTimeIndicatorElement.style.width = (pct * 100) + '%';
+                currentTimeIndicatorBar.style.transform = 'scaleX(' + pct + ')';
+                currentTimeIndicatorArrow.style.transform = 'translateX(' + (pct * 100) + '%)';
             }
         }
 
@@ -202,12 +211,10 @@
                 startDate.setTime(startDate.getTime() + cellDurationMs);
             }
 
-            html += '<div class="currentTimeIndicator hide">';
+            html += '<div class="currentTimeIndicatorBar hide">';
-            html += '<div class="currentTimeIndicatorBar">';
             html += '</div>';
-            html += '<iron-icon icon="nav:arrow-drop-down"></iron-icon>';
+            html += '<div class="currentTimeIndicatorArrowContainer hide">';
-            html += '</div>';
+            html += '<iron-icon class="currentTimeIndicatorArrow" icon="nav:arrow-drop-down"></iron-icon>';
-
             html += '</div>';
 
             return html;