update video osd

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

@@ -14,12 +14,12 @@
   },
   "devDependencies": {},
   "ignore": [],
-  "version": "1.4.457",
+  "version": "1.4.458",
-  "_release": "1.4.457",
+  "_release": "1.4.458",
   "_resolution": {
     "type": "version",
-    "tag": "1.4.457",
+    "tag": "1.4.458",
-    "commit": "a5034b1f89c9097d2ca2849fe987ac5aa1c360d0"
+    "commit": "122cc814d3faca2afd6ebc3b406016e382e0b026"
   },
   "_source": "https://github.com/MediaBrowser/emby-webcomponents.git",
   "_target": "^1.2.1",

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

@@ -370,6 +370,16 @@ define(['browser'], function (browser) {
 
         profile.TranscodingProfiles = [];
 
+        if (canPlayNativeHls() && browser.iOS) {
+            profile.TranscodingProfiles.push({
+                Container: 'ts',
+                Type: 'Audio',
+                AudioCodec: 'aac',
+                Context: 'Streaming',
+                Protocol: 'hls'
+            });
+        }
+
         ['opus', 'mp3', 'aac', 'wav'].filter(canPlayAudioFormat).forEach(function (audioFormat) {
 
             profile.TranscodingProfiles.push({
@@ -435,7 +445,6 @@ define(['browser'], function (browser) {
         }
 
         if (canPlayWebm) {
-
             profile.TranscodingProfiles.push({
                 Container: 'webm',
                 Type: 'Video',

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

@@ -73,15 +73,35 @@ define(['events', 'browser', 'pluginManager', 'apphost', 'appSettings'], functio
 
             currentSrc = val;
 
-            // Chrome now returns a promise
+            return playWithPromise(elem);
-            var promise = elem.play();
-
-            if (promise && promise.then) {
-                return promise;
-            }
-            return Promise.resolve();
         };
 
+        function playWithPromise(elem) {
+
+            try {
+                var promise = elem.play();
+                if (promise && promise.then) {
+                    // Chrome now returns a promise
+                    return promise.catch(function (e) {
+
+                        var errorName = (e.name || '').toLowerCase();
+                        // safari uses aborterror
+                        if (errorName === 'notallowederror' ||
+                            errorName === 'aborterror') {
+                            // swallow this error because the user can still click the play button on the video element
+                            return Promise.resolve();
+                        }
+                        return Promise.reject();
+                    });
+                } else {
+                    return Promise.resolve();
+                }
+            } catch (err) {
+                console.log('error calling video.play: ' + err);
+                return Promise.reject();
+            }
+        }
+
         function getCrossOriginValue(mediaSource) {
 
             return 'anonymous';

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

@@ -17,7 +17,6 @@ define(['browser', 'pluginManager', 'events', 'apphost', 'loading', 'playbackMan
         var currentSrc;
         var started = false;
         var hlsPlayer;
-        var enableCustomControls;
 
         var winJsPlaybackItem;
         var currentPlayOptions;
@@ -63,7 +62,6 @@ define(['browser', 'pluginManager', 'events', 'apphost', 'loading', 'playbackMan
             var enableMkvProgressive = (item.RunTimeTicks && browser.edgeUwp) ? true : false;
 
             return {
-                supportsCustomSeeking: appHost.supports('htmlvideoautoplay'),
                 enableMkvProgressive: enableMkvProgressive,
                 disableHlsVideoAudioCodecs: disableHlsVideoAudioCodecs
             };
@@ -76,7 +74,6 @@ define(['browser', 'pluginManager', 'events', 'apphost', 'loading', 'playbackMan
                 require(['browserdeviceprofile', 'environments/windows-uwp/mediacaps'], function (profileBuilder, uwpMediaCaps) {
 
                     var profileOptions = getBaseProfileOptions(item);
-                    profileOptions.supportsCustomSeeking = true;
                     profileOptions.supportsDts = uwpMediaCaps.supportsDTS();
                     profileOptions.supportsTrueHd = uwpMediaCaps.supportsDolby();
                     profileOptions.audioChannels = uwpMediaCaps.getAudioChannels();
@@ -130,6 +127,52 @@ define(['browser', 'pluginManager', 'events', 'apphost', 'loading', 'playbackMan
             });
         };
 
+        var supportedFeatures;
+        function getSupportedFeatures() {
+
+            var list = [];
+
+            var video = document.createElement('video');
+            if (video.webkitSupportsPresentationMode && video.webkitSupportsPresentationMode('picture-in-picture') && typeof video.webkitSetPresentationMode === "function") {
+                list.push('pictureinpicture');
+            }
+
+            return list;
+        }
+
+        self.supports = function (feature) {
+
+            if (!supportedFeatures) {
+                supportedFeatures = getSupportedFeatures();
+            }
+
+            return supportedFeatures.indexOf(feature) !== -1;
+        };
+
+        self.togglePictureInPicture = function () {
+            return self.setPictureInPictureEnabled(!self.isPictureInPictureEnabled());
+        };
+
+        self.setPictureInPictureEnabled = function (isEnabled) {
+
+            var video = mediaElement;
+            if (video) {
+                if (video.webkitSupportsPresentationMode && typeof video.webkitSetPresentationMode === "function") {
+                    video.webkitSetPresentationMode(isEnabled ? "picture-in-picture" : "inline");
+                }
+            }
+        };
+
+        self.isPictureInPictureEnabled = function (isEnabled) {
+
+            var video = mediaElement;
+            if (video) {
+                return video.webkitPresentationMode === "picture-in-picture";
+            }
+
+            return false;
+        };
+
         function getCrossOriginValue(mediaSource) {
 
             return 'anonymous';
@@ -619,9 +662,7 @@ define(['browser', 'pluginManager', 'events', 'apphost', 'loading', 'playbackMan
 
                 setCurrentTrackElement(subtitleTrackIndexToSetOnPlaying);
 
-                if (enableCustomControls) {
                 this.removeAttribute('controls');
-                }
 
                 seekOnPlaybackStart(e.target);
 
@@ -766,15 +807,6 @@ define(['browser', 'pluginManager', 'events', 'apphost', 'loading', 'playbackMan
             return false;
         }
 
-        function enableCustomVideoControls() {
-
-            if (browser.ipad) {
-                return false;
-            }
-
-            return true;
-        }
-
         function setTracks(elem, tracks, mediaSource, serverId) {
 
             elem.innerHTML = getTracksHtml(tracks, mediaSource, serverId);
@@ -1186,8 +1218,6 @@ define(['browser', 'pluginManager', 'events', 'apphost', 'loading', 'playbackMan
 
                         loading.show();
 
-                        enableCustomControls = enableCustomVideoControls();
-
                         var dlg = document.createElement('div');
 
                         dlg.classList.add('videoPlayerContainer');
@@ -1206,8 +1236,8 @@ define(['browser', 'pluginManager', 'events', 'apphost', 'loading', 'playbackMan
                         // https://developer.apple.com/library/content/releasenotes/General/WhatsNewInSafari/Articles/Safari_10_0.html
 
                         var html = '';
-                        // Can't autoplay in these browsers so we need to use the full controls
+                        // Can't autoplay in these browsers so we need to use the full controls, at least until playback starts
-                        if (!enableCustomControls || !appHost.supports('htmlvideoautoplay')) {
+                        if (!appHost.supports('htmlvideoautoplay')) {
                             html += '<video class="htmlvideoplayer" preload="metadata" autoplay="autoplay" controls="controls" webkit-playsinline playsinline>';
                         } else {
 

dashboard-ui/bower_components/emby-webcomponents/playback/playbackmanager.js

@@ -208,6 +208,10 @@ define(['events', 'datetime', 'appSettings', 'pluginManager', 'userSettings', 'g
                     list.push('ToggleFullscreen');
                 }
 
+                if (player.supports && player.supports('pictureinpicture')) {
+                    list.push('PictureInPicture');
+                }
+
                 return list;
             }
 
@@ -744,6 +748,11 @@ define(['events', 'datetime', 'appSettings', 'pluginManager', 'userSettings', 'g
             }
         };
 
+        self.togglePictureInPicture = function (player) {
+            player = player || currentPlayer;
+            return player.togglePictureInPicture();
+        };
+
         self.getSubtitleStreamIndex = function (player) {
 
             player = player || currentPlayer;
@@ -2369,7 +2378,7 @@ define(['events', 'datetime', 'appSettings', 'pluginManager', 'userSettings', 'g
                 startProgressInterval(player);
 
                 events.trigger(player, 'playbackstart', [state]);
-                events.trigger(self, 'playbackstart', [player]);
+                events.trigger(self, 'playbackstart', [player, state]);
             });
         }
 

dashboard-ui/scripts/nowplayingbar.js

@@ -560,6 +560,10 @@
 
         imageLoader.lazyImage(nowPlayingImageElement, url);
 
+        userdataButtons.destroy({
+            element: nowPlayingUserData
+        });
+
         if (nowPlayingItem.Id) {
             ApiClient.getItem(Dashboard.getCurrentUserId(), nowPlayingItem.Id).then(function (item) {
                 userdataButtons.fill({
@@ -568,10 +572,6 @@
                     element: nowPlayingUserData
                 });
             });
-        } else {
-            userdataButtons.destroy({
-                element: nowPlayingUserData
-            });
         }
     }
 

dashboard-ui/scripts/site.js

@@ -2384,11 +2384,12 @@ var AppInfo = {};
                 list.push('bower_components/emby-webcomponents/htmlaudioplayer/plugin');
 
             } else {
-
+                window.VlcAudio = true;
-                //  use vlc player
-                list.push('cordova/vlcplayer');
             }
 
+            // Needed for video
+            list.push('cordova/vlcplayer');
+
         } else if (Dashboard.isRunningInCordova() && browser.safari) {
             list.push('cordova/audioplayer');
         } else {
@@ -2535,6 +2536,7 @@ var AppInfo = {};
                 } else if (browserInfo.safari) {
 
                     postInitDependencies.push('cordova/volume');
+                    postInitDependencies.push('cordova/statusbar');
                     postInitDependencies.push('cordova/chromecast');
                     postInitDependencies.push('cordova/orientation');
                     postInitDependencies.push('cordova/remotecontrols');

dashboard-ui/scripts/videoosd.js

@@ -448,6 +448,10 @@
             playbackManager.toggleFullscreen(currentPlayer);
         });
 
+        view.querySelector('.btnPip').addEventListener('click', function () {
+            playbackManager.togglePictureInPicture(currentPlayer);
+        });
+
         view.querySelector('.btnSettings').addEventListener('click', onSettingsButtonClick);
 
         function onPlayerChange() {
@@ -652,6 +656,12 @@
                 view.querySelector('.btnFullscreen').classList.remove('hide');
             }
 
+            if (supportedCommands.indexOf('PictureInPicture') === -1) {
+                view.querySelector('.btnPip').classList.add('hide');
+            } else {
+                view.querySelector('.btnPip').classList.remove('hide');
+            }
+
             updateFullscreenIcon();
         }
 

dashboard-ui/strings/en-US.json

@@ -596,6 +596,7 @@
   "Rewind": "Rewind",
   "Fullscreen": "Full screen",
   "ExitFullscreen": "Exit full screen",
+  "PictureInPicture": "Picture in picture",
   "PlayOnAnotherDevice": "Play on another device",
   "FastForward": "Fast-forward",
   "ButtonTakeScreenshot": "Capture Screenshot",

dashboard-ui/videoosd.html

@@ -234,6 +234,9 @@
                 <button is="paper-icon-button-light" class="btnFullscreen hide autoSize" title="${Fullscreen}">
                     <i class="xlargePaperIconButton md-icon">&#xE5D0;</i>
                 </button>
+                <button is="paper-icon-button-light" class="btnPip hide autoSize" title="${PictureInPicture}">
+                    <i class="xlargePaperIconButton md-icon">&#xE911;</i>
+                </button>
 
                 <div class="osdTimeText"><span class="osdPositionText"></span><span class="osdDurationText"></span><span class="endsAtText"></span></div>