update guide

dashboard-ui/bower_components/emby-webcomponents/.bower.json

@@ -14,12 +14,12 @@
   },
   "devDependencies": {},
   "ignore": [],
-  "version": "1.4.450",
+  "version": "1.4.451",
-  "_release": "1.4.450",
+  "_release": "1.4.451",
   "_resolution": {
     "type": "version",
-    "tag": "1.4.450",
+    "tag": "1.4.451",
-    "commit": "379047a56c13c7ad4136a86610af37060dc28912"
+    "commit": "521e1c545a373b8768307a3d895bf1544fcbefa5"
   },
   "_source": "https://github.com/MediaBrowser/emby-webcomponents.git",
   "_target": "^1.2.1",

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

@@ -14,7 +14,7 @@
 
 .guideHeaderDateSelection {
     font-size: 86%;
-    padding: .4em 0;
+    padding: .4em 0 .2em;
 }
 
 .guideHeaderTimeslots {
@@ -66,6 +66,8 @@
     white-space: nowrap;
     position: relative;
     contain: strict;
+    box-sizing: border-box;
+    border-bottom: .2em solid #121212;
 }
 
 .timeslotHeadersInner {
@@ -145,7 +147,7 @@
     text-overflow: ellipsis;
     border-right: 1px solid #121212;
     width: 24vw;
-    background: rgba(40, 40, 40, .9);
+    background: rgb(38, 38, 38);
     display: flex;
     align-items: center;
     text-decoration: none;
@@ -196,7 +198,7 @@
 }
 
 .channelHeaderCell {
-    border-bottom: .25em solid #121212 !important;
+    border-bottom: .2em solid #121212 !important;
     background-size: auto 70%;
     background-position: 92% center;
     background-repeat: no-repeat;
@@ -209,15 +211,8 @@
     }
 }
 
-@media all and (max-width: 1200px) {
-
-    .guideChannelNumberWithImage {
-        display: none;
-    }
-}
-
 .channelPrograms, .channelHeaderCell {
-    height: 4em;
+    height: 4.4em;
     contain: strict;
 }
 
@@ -227,7 +222,7 @@
 }
 
 .channelPrograms-tv, .channelHeaderCell-tv {
-    height: 3.2em;
+    height: 3.8em;
 }
 
 .channelTimeslotHeader {
@@ -254,10 +249,9 @@
 .programCell {
     position: absolute;
     top: 0;
-    /* Unfortunately the borders using vh get rounded while the bottom property doesn't. So this is a little hack to try and make them even*/
+    bottom: 0;
-    bottom: .236em;
+    border-left: .2em solid #121212 !important;
-    border-left: .25em solid #121212 !important;
+    background-color: rgb(30, 30, 30);
-    background-color: rgba(32, 32, 32, .95);
     display: flex;
     text-decoration: none;
     overflow: hidden;
@@ -304,6 +298,20 @@
     display: block;
 }
 
+.guideProgramNameText {
+    margin: 0;
+    font-weight: normal;
+}
+
+.guideProgramSecondaryInfo {
+    display: flex;
+    align-items: center;
+}
+
+.programSecondaryTitle {
+    opacity: .6;
+}
+
 .programIcon {
     margin-left: auto;
     margin-right: .25em;
@@ -326,6 +334,8 @@
     padding: .18em .32em;
     border-radius: .25em;
     margin-right: .35em;
+    width: auto;
+    height: auto;
 }
 
 .programTextIcon-tv {
@@ -337,6 +347,8 @@
     max-width: 30%;
     text-overflow: ellipsis;
     overflow: hidden;
+    font-weight: normal;
+    margin: 0;
 }
 
 .guideChannelName {

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

@@ -512,20 +512,32 @@
 
                     html += '<div class="' + guideProgramNameClass + '">';
 
+                    html += '<div class="guideProgramNameText">' + program.Name + '</div>';
+
+                    var indicatorHtml;
                     if (program.IsLive && options.showLiveIndicator) {
-                        html += '<span class="liveTvProgram guideProgramIndicator">' + globalize.translate('sharedcomponents#Live') + '</span>';
+                        indicatorHtml = '<span class="liveTvProgram guideProgramIndicator">' + globalize.translate('sharedcomponents#Live') + '</span>';
                     }
                     else if (program.IsPremiere && options.showPremiereIndicator) {
-                        html += '<span class="premiereTvProgram guideProgramIndicator">' + globalize.translate('sharedcomponents#Premiere') + '</span>';
+                        indicatorHtml = '<span class="premiereTvProgram guideProgramIndicator">' + globalize.translate('sharedcomponents#Premiere') + '</span>';
                     }
                     else if (program.IsSeries && !program.IsRepeat && options.showNewIndicator) {
-                        html += '<span class="newTvProgram guideProgramIndicator">' + globalize.translate('sharedcomponents#AttributeNew') + '</span>';
+                        indicatorHtml = '<span class="newTvProgram guideProgramIndicator">' + globalize.translate('sharedcomponents#AttributeNew') + '</span>';
                     }
                     else if (program.IsSeries && program.IsRepeat && options.showRepeatIndicator) {
-                        html += '<span class="repeatTvProgram guideProgramIndicator">' + globalize.translate('sharedcomponents#Repeat') + '</span>';
+                        indicatorHtml = '<span class="repeatTvProgram guideProgramIndicator">' + globalize.translate('sharedcomponents#Repeat') + '</span>';
+                    }
+                    if (indicatorHtml || program.EpisodeTitle) {
+                        html += '<div class="guideProgramSecondaryInfo">';
+
+                        html += indicatorHtml || '';
+
+                        if (program.EpisodeTitle) {
+                            html += '<span class="programSecondaryTitle">' + program.EpisodeTitle + '</span>';
+                        }
+                        html += '</div>';
                     }
 
-                    html += program.Name;
                     html += '</div>';
 
                     if (program.IsHD && options.showHdIcon) {
@@ -610,11 +622,8 @@
                 html += '<button type="button" class="' + cssClass + '"' + dataSrc + ' data-action="link" data-isfolder="' + channel.IsFolder + '" data-id="' + channel.Id + '" data-serverid="' + channel.ServerId + '" data-type="' + channel.Type + '">';
 
                 cssClass = 'guideChannelNumber';
-                if (hasChannelImage) {
-                    cssClass += ' guideChannelNumberWithImage';
-                }
 
-                html += '<div class="' + cssClass + '">' + channel.Number + '</div>';
+                html += '<h3 class="' + cssClass + '">' + channel.Number + '</h3>';
 
                 if (!hasChannelImage) {
                     html += '<div class="guideChannelName">' + channel.Name + '</div>';

dashboard-ui/bower_components/emby-webcomponents/htmlvideoplayer/plugin.js

@@ -1145,8 +1145,9 @@ define(['browser', 'pluginManager', 'events', 'apphost', 'loading', 'playbackMan
 
         function createMediaElement(options) {
 
-            if (browser.tv || browser.noAnimation) {
+            if (browser.tv || browser.noAnimation || browser.iOS) {
                 // too slow
+                // also on iOS, the backdrop image doesn't look right
                 options.backdropUrl = null;
             }
             return new Promise(function (resolve, reject) {

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

@@ -1,9 +1,14 @@
 define(['playbackManager', 'events', 'serverNotifications'], function (playbackManager, events, serverNotifications) {
     'use strict';
 
+    function getActivePlayerId() {
+        var info = playbackManager.getPlayerInfo();
+        return info ? info.id : null;
+    }
+
     function sendPlayCommand(options, playType) {
 
-        var sessionId = playbackManager.getPlayerInfo().id;
+        var sessionId = getActivePlayerId();
 
         var ids = options.ids || options.items.map(function (i) {
             return i.Id;
@@ -24,12 +29,12 @@
 
     function sendPlayStateCommand(command, options) {
 
-        var sessionId = playbackManager.getPlayerInfo().id;
+        var sessionId = getActivePlayerId();
 
         ApiClient.sendPlayStateCommand(sessionId, command, options);
     }
 
-    function RemoteControlPlayer() {
+    return function () {
 
         var self = this;
 
@@ -53,7 +58,7 @@
 
         self.sendCommand = function (command) {
 
-            var sessionId = playbackManager.getPlayerInfo().id;
+            var sessionId = getActivePlayerId();
 
             ApiClient.sendCommand(sessionId, command);
         };
@@ -61,7 +66,7 @@
         self.play = function (options) {
 
             var playOptions = {};
-            playOptions.ids = options.ids || options.items.map(function(i) {
+            playOptions.ids = options.ids || options.items.map(function (i) {
                 return i.Id;
             });
 
@@ -116,9 +121,9 @@
 
         self.seek = function (positionTicks) {
             sendPlayStateCommand('seek',
-                {
+            {
-                    SeekPositionTicks: positionTicks
+                SeekPositionTicks: positionTicks
-                });
+            });
         };
 
         self.currentTime = function (val) {
@@ -182,7 +187,7 @@
             return [];
         };
 
-        self.getAudioStreamIndex = function() {
+        self.getAudioStreamIndex = function () {
 
         };
 
@@ -262,7 +267,7 @@
             if (apiClient) {
                 return apiClient.getSessions().then(function (sessions) {
 
-                    var currentTargetId = playbackManager.getPlayerInfo().id;
+                    var currentTargetId = getActivePlayerId();
 
                     // Update existing data
                     //updateSessionInfo(popup, msg.Data);
@@ -381,7 +386,7 @@
             }
         };
 
-        self.tryPair = function(target) {
+        self.tryPair = function (target) {
 
             return Promise.resolve();
         };
@@ -406,7 +411,7 @@
 
         function processUpdatedSessions(sessions) {
 
-            var currentTargetId = playbackManager.getPlayerInfo().id;
+            var currentTargetId = getActivePlayerId();
 
             // Update existing data
             //updateSessionInfo(popup, msg.Data);
@@ -415,6 +420,7 @@
             })[0];
 
             if (session) {
+                firePlaybackEvent('statechange', session);
                 firePlaybackEvent('timeupdate', session);
                 firePlaybackEvent('pause', session);
             }
@@ -427,14 +433,14 @@
         events.on(serverNotifications, 'SessionEnded', function (e, apiClient, data) {
             console.log("Server reports another session ended");
 
-            if (playbackManager.getPlayerInfo().id === data.Id) {
+            if (getActivePlayerId() === data.Id) {
                 playbackManager.setDefaultPlayerActive();
             }
         });
 
         events.on(serverNotifications, 'PlaybackStart', function (e, apiClient, data) {
             if (data.DeviceId !== apiClient.deviceId()) {
-                if (playbackManager.getPlayerInfo().id === data.Id) {
+                if (getActivePlayerId() === data.Id) {
                     firePlaybackEvent('playbackstart', data);
                 }
             }
@@ -442,12 +448,10 @@
 
         events.on(serverNotifications, 'PlaybackStopped', function (e, apiClient, data) {
             if (data.DeviceId !== apiClient.deviceId()) {
-                if (playbackManager.getPlayerInfo().id === data.Id) {
+                if (getActivePlayerId() === data.Id) {
                     firePlaybackEvent('playbackstop', data);
                 }
             }
         });
-    }
+    };
-
-    return RemoteControlPlayer;
 });

dashboard-ui/bower_components/emby-webcomponents/strings/de.json

@@ -377,5 +377,5 @@
     "SyncJobItemStatusRemovedFromDevice": "Vom Ger\u00e4t entfernt",
     "SyncJobItemStatusCancelled": "Abgebrochen",
     "Retry": "Wiederholen",
-    "HeaderMyDevice": "My Device"
+    "HeaderMyDevice": "Mein Ger\u00e4t"
 }

dashboard-ui/bower_components/emby-webcomponents/strings/pt-BR.json

@@ -377,5 +377,5 @@
     "SyncJobItemStatusRemovedFromDevice": "Removido do dispositivo",
     "SyncJobItemStatusCancelled": "Cancelado",
     "Retry": "Tentar Novamente",
-    "HeaderMyDevice": "My Device"
+    "HeaderMyDevice": "Meu Dispositivo"
 }

dashboard-ui/components/dockedtabs/dockedtabs.js

@@ -323,9 +323,20 @@
         });
     }
 
+    var instance;
+
+    function onViewShow(e) {
+        if (e.detail.type === 'video-osd') {
+            instance.hide();
+        } else {
+            instance.show();
+        }
+    }
+
     function dockedTabs(options) {
 
         var self = this;
+        instance = self;
 
         self.element = render(options);
 
@@ -339,9 +350,14 @@
         });
 
         showCurrentUserTabs(self.element);
+        document.addEventListener('viewshow', onViewShow);
     }
 
     dockedTabs.prototype.destroy = function () {
+
+        document.removeEventListener('viewshow', onViewShow);
+        instance = null;
+
         var self = this;
 
         var elem = self.element;
@@ -350,5 +366,13 @@
         self.element = null;
     };
 
+    dockedTabs.prototype.show = function () {
+        this.element.classList.remove('hide');
+    };
+
+    dockedTabs.prototype.hide = function () {
+        this.element.classList.add('hide');
+    };
+
     return dockedTabs;
 });

dashboard-ui/components/remotecontrol.js

@@ -1,4 +1,4 @@
-define(['browser', 'datetime', 'libraryBrowser', 'listView', 'userdataButtons', 'imageLoader', 'playbackManager', 'nowPlayingHelper', 'events', 'apphost', 'cardStyle'], function (browser, datetime, libraryBrowser, listView, userdataButtons, imageLoader, playbackManager, nowPlayingHelper, events, appHost) {
+define(['browser', 'datetime', 'libraryBrowser', 'listView', 'userdataButtons', 'imageLoader', 'playbackManager', 'nowPlayingHelper', 'events', 'connectionManager', 'apphost', 'cardStyle'], function (browser, datetime, libraryBrowser, listView, userdataButtons, imageLoader, playbackManager, nowPlayingHelper, events, connectionManager, appHost) {
     'use strict';
 
     function showSlideshowMenu(context) {
@@ -108,6 +108,63 @@
         }).join('<br/>');
     }
 
+    function seriesImageUrl(item, options) {
+
+        if (item.Type !== 'Episode') {
+            return null;
+        }
+
+        options = options || {};
+        options.type = options.type || "Primary";
+
+        if (options.type === 'Primary') {
+
+            if (item.SeriesPrimaryImageTag) {
+
+                options.tag = item.SeriesPrimaryImageTag;
+
+                return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options);
+            }
+        }
+
+        if (options.type === 'Thumb') {
+
+            if (item.SeriesThumbImageTag) {
+
+                options.tag = item.SeriesThumbImageTag;
+
+                return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options);
+            }
+            if (item.ParentThumbImageTag) {
+
+                options.tag = item.ParentThumbImageTag;
+
+                return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.ParentThumbItemId, options);
+            }
+        }
+
+        return null;
+    }
+
+    function imageUrl(item, options) {
+
+        options = options || {};
+        options.type = options.type || "Primary";
+
+        if (item.ImageTags && item.ImageTags[options.type]) {
+
+            options.tag = item.ImageTags[options.type];
+            return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.Id, options);
+        }
+
+        if (item.AlbumId && item.AlbumPrimaryImageTag) {
+
+            options.tag = item.AlbumPrimaryImageTag;
+            return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.AlbumId, options);
+        }
+
+        return null;
+    }
     var currentImgUrl;
     function updateNowPlayingInfo(context, state) {
 
@@ -122,38 +179,18 @@
             context.querySelector('.nowPlayingPageTitle').classList.add('hide');
         }
 
-        var url;
+        var url = item ? seriesImageUrl(item, {
+
+            maxHeight: 300
+
+        }) || imageUrl(item, {
+            maxHeight: 300
+
+        }) : null;
+
         var backdropUrl = null;
 
-        if (!item) {
+        if (url === currentImgUrl) {
-        }
-        else if (item.PrimaryImageTag) {
-
-            url = ApiClient.getScaledImageUrl(item.PrimaryImageItemId, {
-                type: "Primary",
-                maxHeight: 300,
-                tag: item.PrimaryImageTag
-            });
-        }
-        else if (item.BackdropImageTag) {
-
-            url = ApiClient.getScaledImageUrl(item.BackdropItemId, {
-                type: "Backdrop",
-                maxHeight: 300,
-                tag: item.BackdropImageTag,
-                index: 0
-            });
-
-        } else if (item.ThumbImageTag) {
-
-            url = ApiClient.getScaledImageUrl(item.ThumbImageItemId, {
-                type: "Thumb",
-                maxHeight: 300,
-                tag: item.ThumbImageTag
-            });
-        }
-
-        if (url == currentImgUrl) {
             return;
         }
 
@@ -469,6 +506,7 @@
 
             console.log('remotecontrol event: ' + e.type);
 
+            updatePlayerState(dlg, {});
             loadPlaylist(dlg);
         }
 
@@ -497,8 +535,6 @@
             lastUpdateTime = now;
 
             var player = this;
-            var state = lastPlayerState;
-            var nowPlayingItem = state.NowPlayingItem || {};
             currentRuntimeTicks = playbackManager.duration(player);
             updateTimeDisplay(playbackManager.currentTime(player), currentRuntimeTicks);
         }

dashboard-ui/dashboard/autoorganizelog.js

@@ -254,7 +254,7 @@
 
         html += '<td data-title="Date">';
         var date = datetime.parseISO8601Date(item.Date, true);
-        html += date.toLocaleDateString();
+        html += datetime.toLocaleDateString(date);
         html += '</td>';
 
         html += '<td data-title="Source" class="fileCell">';

dashboard-ui/scripts/dashboardpage.js

@@ -216,7 +216,7 @@
 
                     itemHtml += '<div class="listItemBodyText secondary">';
                     var date = datetime.parseISO8601Date(item.Date, true);
-                    itemHtml += date.toLocaleDateString();
+                    itemHtml += datetime.toLocaleDateString(date);
                     itemHtml += '</div>';
 
                     //itemHtml += '<div class="listItemBodyText secondary listItemBodyText-nowrap">';
@@ -1129,7 +1129,7 @@
 
             html += '<div class="listItemBodyText secondary">';
             var date = datetime.parseISO8601Date(entry.Date, true);
-            html += date.toLocaleDateString() + ' ' + date.toLocaleTimeString().toLowerCase();
+            html += datetime.toLocaleString(date).toLowerCase();
             html += '</div>';
 
             html += '<div class="listItemBodyText secondary listItemBodyText-nowrap">';

dashboard-ui/scripts/itemdetailpage.js

@@ -1747,7 +1747,7 @@
 
                 try {
 
-                    var date = datetime.parseISO8601Date(review.Date, true).toLocaleDateString();
+                    var date = datetime.toLocaleDateString(datetime.parseISO8601Date(review.Date, true));
 
                     html += '<span class="reviewDate">' + date + '</span>';
                 }

dashboard-ui/scripts/librarybrowser.js

@@ -1,4 +1,4 @@
-define(['appSettings', 'dom', 'browser', 'scrollStyles'], function (appSettings, dom, browser) {
+define(['appSettings', 'dom', 'browser', 'datetime', 'scrollStyles'], function (appSettings, dom, browser, datetime) {
     'use strict';
 
     function fadeInRight(elem) {
@@ -432,7 +432,7 @@
                 weekday[6] = Globalize.translate('OptionSaturday');
 
                 var day = weekday[date.getDay()];
-                date = date.toLocaleDateString();
+                date = datetime.toLocaleDateString(date);
 
                 if (date.toLowerCase().indexOf(day.toLowerCase()) == -1) {
                     return day + " " + date;

dashboard-ui/scripts/nowplayingbar.js

@@ -537,12 +537,10 @@
             return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.Id, options);
         }
 
-        if (options.type === 'Primary') {
+        if (item.AlbumId && item.AlbumPrimaryImageTag) {
-            if (item.AlbumId && item.AlbumPrimaryImageTag) {
 
-                options.tag = item.AlbumPrimaryImageTag;
+            options.tag = item.AlbumPrimaryImageTag;
-                return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.AlbumId, options);
+            return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.AlbumId, options);
-            }
         }
 
         return null;

dashboard-ui/scripts/site.js

@@ -1242,7 +1242,7 @@ var AppInfo = {};
         define("dom", [embyWebComponentsBowerPath + "/dom"], returnFirstDependency);
 
         define("fullscreen-doubleclick", [embyWebComponentsBowerPath + "/fullscreen/fullscreen-doubleclick"], returnFirstDependency);
-        define("fullscreenManager", [embyWebComponentsBowerPath + "/fullscreen/fullscreenmanager"], returnFirstDependency);
+        define("fullscreenManager", [embyWebComponentsBowerPath + "/fullscreen/fullscreenmanager", 'events'], returnFirstDependency);
 
         define("layoutManager", [embyWebComponentsBowerPath + "/layoutmanager"], getLayoutManager);
         define("playMenu", [embyWebComponentsBowerPath + "/playmenu"], returnFirstDependency);

dashboard-ui/scripts/videoosd.js

@@ -401,6 +401,7 @@
             bindToPlayer(playbackManager.getCurrentPlayer());
 
             document.addEventListener('mousemove', onMouseMove);
+            document.body.classList.add('autoScrollY');
 
             showOsd();
 
@@ -412,6 +413,7 @@
             getHeaderElement().classList.remove('osdHeader');
             getHeaderElement().classList.remove('osdHeader-hidden');
             document.removeEventListener('mousemove', onMouseMove);
+            document.body.classList.remove('autoScrollY');
 
             inputManager.off(window, onInputCommand);
             events.off(playbackManager, 'playerchange', onPlayerChange);

dashboard-ui/videoosd.html

@@ -82,6 +82,7 @@
         .videoOsdBottom .buttons {
             padding: .25em 0 0;
             display: flex;
+            flex-wrap: wrap;
             align-items: center;
         }
 
@@ -153,6 +154,26 @@
             right: 0;
             position: fixed;
         }
+
+        @media all and (max-width:600px) {
+            .osdPoster {
+                display: none !important;
+            }
+
+            .videoOsdBottom .paper-icon-button-light {
+                margin: 0;
+            }
+
+            .videoOsdBottom .volumeButtons {
+                display: none !important;
+            }
+        }
+
+        @media all and (max-width: 1200px) {
+            .videoOsdBottom .endsAtText {
+                display: none !important;
+            }
+        }
     </style>
     <div class="pageContainer flex">