update guide

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

@@ -4,6 +4,25 @@
     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%;
@@ -105,6 +124,44 @@
     position: relative;
 }
 
+.timeslotHeadersInner {
+    position: relative;
+}
+
+.currentTimeIndicator {
+    position: absolute;
+    bottom: .05em;
+    left: 0;
+    width: 100%;
+    height: 2px;
+    display: flex;
+    align-items: flex-end;
+    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;
+    width: 100%;
+    margin-left: .65vh;
+}
+
+.currentTimeIndicator iron-icon {
+    width: 4vh;
+    height: 4vh;
+    color: #52B54B;
+    flex-shrink: 0;
+    position: relative;
+    margin-left: -2vh;
+    top: 1.45vh;
+}
+
 .channelPrograms, .timeslotHeadersInner {
     width: 1800vw;
 }

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

@@ -11,6 +11,7 @@
         };
 
         self.destroy = function () {
+            clearCurrentTimeUpdateInterval();
             itemShortcuts.off(options.element);
             items = {};
         };
@@ -21,6 +22,7 @@
         var cellCurationMinutes = 30;
         var cellDurationMs = cellCurationMinutes * 60 * 1000;
         var msPerDay = 86400000;
+        var totalRendererdMs = msPerDay;
 
         var currentDate;
 
@@ -56,6 +58,46 @@
             loading.hide();
         }
 
+        var currentTimeUpdateInterval;
+        var currentTimeIndicatorElement;
+        function startCurrentTimeUpdateInterval() {
+            clearCurrentTimeUpdateInterval();
+
+            //currentTimeUpdateInterval = setInterval(updateCurrentTimeIndicator, 1000);
+            currentTimeUpdateInterval = setInterval(updateCurrentTimeIndicator, 60000);
+            updateCurrentTimeIndicator();
+        }
+
+        function clearCurrentTimeUpdateInterval() {
+            var interval = currentTimeUpdateInterval;
+            if (interval) {
+                clearInterval(interval);
+            }
+            currentTimeUpdateInterval = null;
+            currentTimeIndicatorElement = null;
+        }
+
+        function updateCurrentTimeIndicator() {
+
+            if (!currentTimeIndicatorElement) {
+                currentTimeIndicatorElement = options.element.querySelector('.currentTimeIndicator');
+            }
+
+            var dateDifference = new Date().getTime() - currentDate.getTime();
+            var pct = dateDifference > 0 ? (dateDifference / totalRendererdMs) : 0;
+            pct = Math.min(pct, 1);
+
+            if (pct <= 0 || pct >= 1) {
+                currentTimeIndicatorElement.classList.add('hide');
+            } else {
+                currentTimeIndicatorElement.classList.remove('hide');
+
+                //pct *= 100;
+                //pct = 100 - pct;
+                currentTimeIndicatorElement.style.width = (pct * 100) + '%';
+            }
+        }
+
         function getChannelLimit(context) {
 
             return registrationServices.validateFeature('livetv').then(function () {
@@ -159,6 +201,13 @@
                 // Add 30 mins
                 startDate.setTime(startDate.getTime() + cellDurationMs);
             }
+
+            html += '<div class="currentTimeIndicator hide">';
+            html += '<div class="currentTimeIndicatorBar">';
+            html += '</div>';
+            html += '<iron-icon icon="nav:arrow-drop-down"></iron-icon>';
+            html += '</div>';
+
             html += '</div>';
 
             return html;
@@ -436,6 +485,7 @@
             var startDate = date;
             var endDate = new Date(startDate.getTime() + msPerDay);
             context.querySelector('.timeslotHeaders').innerHTML = getTimeslotHeadersHtml(startDate, endDate);
+            startCurrentTimeUpdateInterval();
             items = {};
             renderPrograms(context, date, channels, programs);
 
@@ -522,6 +572,8 @@
 
         function changeDate(page, date) {
 
+            clearCurrentTimeUpdateInterval();
+
             var newStartDate = normalizeDateToTimeslot(date);
             currentDate = newStartDate;