Merge branch 'develop' into css-variables

# Conflicts:
#	demo/dist/demo.css
#	demo/dist/demo.js
#	demo/dist/demo.js.map
#	demo/dist/demo.min.js
#	demo/dist/demo.min.js.map
#	dist/plyr.css
#	dist/plyr.js
#	dist/plyr.js.map
#	dist/plyr.min.js
#	dist/plyr.min.js.map
#	dist/plyr.polyfilled.js
#	dist/plyr.polyfilled.js.map
#	dist/plyr.polyfilled.min.js
#	dist/plyr.polyfilled.min.js.map
#	gulpfile.js
#	src/sass/components/captions.scss
#	src/sass/components/control.scss

1 files changed, 49 insertions, 98 deletions

diff --git a/src/js/support.js b/src/js/support.js
index 38212d9f..9257df13 100644
--- a/src/js/support.js
+++ b/src/js/support.js
@@ -2,7 +2,19 @@
 // Plyr support checks
 // ==========================================================================
 
-import utils from './utils';
+import { transitionEndEvent } from './utils/animation';
+import browser from './utils/browser';
+import { createElement } from './utils/elements';
+import is from './utils/is';
+
+// Default codecs for checking mimetype support
+const defaultCodecs = {
+    'audio/ogg': 'vorbis',
+    'audio/wav': '1',
+    'video/webm': 'vp8, vorbis',
+    'video/mp4': 'avc1.42E01E, mp4a.40.2',
+    'video/ogg': 'theora',
+};
 
 // Check for feature support
 const support = {
@@ -13,32 +25,9 @@ const support = {
     // Check for support
     // Basic functionality vs full UI
     check(type, provider, playsinline) {
-        let api = false;
-        let ui = false;
-        const browser = utils.getBrowser();
         const canPlayInline = browser.isIPhone && playsinline && support.playsinline;
-
-        switch (`${provider}:${type}`) {
-            case 'html5:video':
-                api = support.video;
-                ui = api && support.rangeInput && (!browser.isIPhone || canPlayInline);
-                break;
-
-            case 'html5:audio':
-                api = support.audio;
-                ui = api && support.rangeInput;
-                break;
-
-            case 'youtube:video':
-            case 'vimeo:video':
-                api = true;
-                ui = support.rangeInput && (!browser.isIPhone || canPlayInline);
-                break;
-
-            default:
-                api = support.audio && support.video;
-                ui = api && support.rangeInput;
-        }
+        const api = support[type] || provider !== 'html5';
+        const ui = api && support.rangeInput && (type !== 'video' || !browser.isIPhone || canPlayInline);
 
         return {
             api,
@@ -47,15 +36,30 @@ const support = {
     },
 
     // Picture-in-picture support
-    // Safari only currently
+    // Safari & Chrome only currently
     pip: (() => {
-        const browser = utils.getBrowser();
-        return !browser.isIPhone && utils.is.function(utils.createElement('video').webkitSetPresentationMode);
+        if (browser.isIPhone) {
+            return false;
+        }
+
+        // Safari
+        // https://developer.apple.com/documentation/webkitjs/adding_picture_in_picture_to_your_safari_media_controls
+        if (is.function(createElement('video').webkitSetPresentationMode)) {
+            return true;
+        }
+
+        // Chrome
+        // https://developers.google.com/web/updates/2018/10/watch-video-using-picture-in-picture
+        if (document.pictureInPictureEnabled && !createElement('video').disablePictureInPicture) {
+            return true;
+        }
+
+        return false;
     })(),
 
     // Airplay support
     // Safari only currently
-    airplay: utils.is.function(window.WebKitPlaybackTargetAvailabilityEvent),
+    airplay: is.function(window.WebKitPlaybackTargetAvailabilityEvent),
 
     // Inline playback support
     // https://webkit.org/blog/6784/new-video-policies-for-ios/
@@ -64,82 +68,29 @@ const support = {
     // Check for mime type support against a player instance
     // Credits: http://diveintohtml5.info/everything.html
     // Related: http://www.leanbackplayer.com/test/h5mt.html
-    mime(type) {
-        const { media } = this;
+    mime(inputType) {
+        const [mediaType] = inputType.split('/');
+        let type = inputType;
 
-        try {
-            // Bail if no checking function
-            if (!this.isHTML5 || !utils.is.function(media.canPlayType)) {
-                return false;
-            }
-
-            // Check directly if codecs specified
-            if (type.includes('codecs=')) {
-                return media.canPlayType(type).replace(/no/, '');
-            }
-
-            // Type specific checks
-            if (this.isVideo) {
-                switch (type) {
-                    case 'video/webm':
-                        return media.canPlayType('video/webm; codecs="vp8, vorbis"').replace(/no/, '');
-
-                    case 'video/mp4':
-                        return media.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"').replace(/no/, '');
-
-                    case 'video/ogg':
-                        return media.canPlayType('video/ogg; codecs="theora"').replace(/no/, '');
-
-                    default:
-                        return false;
-                }
-            } else if (this.isAudio) {
-                switch (type) {
-                    case 'audio/mpeg':
-                        return media.canPlayType('audio/mpeg;').replace(/no/, '');
-
-                    case 'audio/ogg':
-                        return media.canPlayType('audio/ogg; codecs="vorbis"').replace(/no/, '');
-
-                    case 'audio/wav':
-                        return media.canPlayType('audio/wav; codecs="1"').replace(/no/, '');
-
-                    default:
-                        return false;
-                }
-            }
-        } catch (e) {
+        // Verify we're using HTML5 and there's no media type mismatch
+        if (!this.isHTML5 || mediaType !== this.type) {
             return false;
         }
 
-        // If we got this far, we're stuffed
-        return false;
-    },
-
-    // Check for textTracks support
-    textTracks: 'textTracks' in document.createElement('video'),
+        // Add codec if required
+        if (Object.keys(defaultCodecs).includes(type)) {
+            type += `; codecs="${defaultCodecs[inputType]}"`;
+        }
 
-    // Check for passive event listener support
-    // https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md
-    // https://www.youtube.com/watch?v=NPM6172J22g
-    passiveListeners: (() => {
-        // Test via a getter in the options object to see if the passive property is accessed
-        let supported = false;
         try {
-            const options = Object.defineProperty({}, 'passive', {
-                get() {
-                    supported = true;
-                    return null;
-                },
-            });
-            window.addEventListener('test', null, options);
-            window.removeEventListener('test', null, options);
+            return Boolean(type && this.media.canPlayType(type).replace(/no/, ''));
         } catch (e) {
-            // Do nothing
+            return false;
         }
+    },
 
-        return supported;
-    })(),
+    // Check for textTracks support
+    textTracks: 'textTracks' in document.createElement('video'),
 
     // <input type="range"> Sliders
     rangeInput: (() => {
@@ -153,7 +104,7 @@ const support = {
     touch: 'ontouchstart' in document.documentElement,
 
     // Detect transitions support
-    transitions: utils.transitionEndEvent !== false,
+    transitions: transitionEndEvent !== false,
 
     // Reduced motion iOS & MacOS setting
     // https://webkit.org/blog/7551/responsive-design-for-motion/