v3.4.8

- Calling customized controls function with proper arguments (thanks @a60814billy)
Merge pull request #1254 from a60814billy/fix/custom-controls-calling-argument
2019-01-17 11:37:19 +11:00 · 2018-11-12 21:32:31 +11:00 · 2018-11-12 15:37:46 +08:00 · 2018-11-08 23:34:10 +11:00 · 2018-11-08 23:29:54 +11:00 · 2018-11-08 23:19:57 +11:00
35 changed files with 3881 additions and 1824 deletions
@@ -4325,30 +4325,21 @@ typeof navigator === "object" && (function () {
 	  } // Google analytics
 	  // For demo site (https://plyr.io) only

-	  /* eslint-disable */
-

 	  if (env.prod) {
-	    (function (i, s, o, g, r, a, m) {
-	      i.GoogleAnalyticsObject = r;
+	    window.dataLayer = window.dataLayer || [];

-	      i[r] = i[r] || function () {
-	        (i[r].q = i[r].q || []).push(arguments);
-	      };
+	    var gtag = function gtag() {
+	      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+	        args[_key] = arguments[_key];
+	      }

-	      i[r].l = 1 * new Date();
-	      a = s.createElement(o);
-	      m = s.getElementsByTagName(o)[0];
-	      a.async = 1;
-	      a.src = g;
-	      m.parentNode.insertBefore(a, m);
-	    })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
+	      window.dataLayer.push(args);
+	    };

-	    window.ga('create', 'UA-40881672-11', 'auto');
-	    window.ga('send', 'pageview');
+	    gtag('js', new Date());
+	    gtag('config', 'UA-132699580-1');
 	  }
-	  /* eslint-enable */
-
 	})();

 }());
@@ -1,191 +1,290 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <title>Plyr - A simple, customizable HTML5 Video, Audio, YouTube and Vimeo player</title>
+        <meta
+            name="description"
+            property="og:description"
+            content="A simple HTML5 media player with custom controls and WebVTT captions."
+        />
+        <meta name="author" content="Sam Potts" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />

-<head>
-    <meta charset="utf-8" />
-    <title>Plyr - A simple, customizable HTML5 Video, Audio, YouTube and Vimeo player</title>
-    <meta name="description" property="og:description" content="A simple HTML5 media player with custom controls and WebVTT captions.">
-    <meta name="author" content="Sam Potts">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+        <!-- Icons -->
+        <link rel="icon" href="https://cdn.plyr.io/static/icons/favicon.ico" />
+        <link rel="icon" type="image/png" href="https://cdn.plyr.io/static/icons/32x32.png" sizes="32x32" />
+        <link rel="icon" type="image/png" href="https://cdn.plyr.io/static/icons/16x16.png" sizes="16x16" />
+        <link rel="apple-touch-icon" sizes="180x180" href="https://cdn.plyr.io/static/icons/180x180.png" />

-    <!-- Icons -->
-    <link rel="icon" href="https://cdn.plyr.io/static/icons/favicon.ico">
-    <link rel="icon" type="image/png" href="https://cdn.plyr.io/static/icons/32x32.png" sizes="32x32">
-    <link rel="icon" type="image/png" href="https://cdn.plyr.io/static/icons/16x16.png" sizes="16x16">
-    <link rel="apple-touch-icon" sizes="180x180" href="https://cdn.plyr.io/static/icons/180x180.png">
+        <!-- Opengraph -->
+        <meta
+            property="og:title"
+            content="Plyr - A simple, customizable HTML5 Video, Audio, YouTube and Vimeo player"
+        />
+        <meta property="og:site_name" content="Plyr" />
+        <meta property="og:url" content="https://plyr.io" />
+        <meta property="og:image" content="https://cdn.plyr.io/static/icons/1200x630.png" />

-    <!-- Opengraph -->
-    <meta property="og:title" content="Plyr - A simple, customizable HTML5 Video, Audio, YouTube and Vimeo player">
-    <meta property="og:site_name" content="Plyr">
-    <meta property="og:url" content="https://plyr.io">
-    <meta property="og:image" content="https://cdn.plyr.io/static/icons/1200x630.png">
+        <!-- Twitter -->
+        <meta name="twitter:card" content="summary" />
+        <meta name="twitter:site" content="@sam_potts" />
+        <meta name="twitter:creator" content="@sam_potts" />
+        <meta name="twitter:card" content="summary_large_image" />

-    <!-- Twitter -->
-    <meta name="twitter:card" content="summary">
-    <meta name="twitter:site" content="@sam_potts">
-    <meta name="twitter:creator" content="@sam_potts">
-    <meta name="twitter:card" content="summary_large_image">
+        <!-- Docs styles -->
+        <link rel="stylesheet" href="dist/demo.css?v=2" />

-    <!-- Docs styles -->
-    <link rel="stylesheet" href="dist/demo.css?v=2">
+        <!-- Preload -->
+        <link
+            rel="preload"
+            as="font"
+            crossorigin
+            type="font/woff2"
+            href="https://cdn.plyr.io/static/fonts/gordita-medium.woff2"
+        />
+        <link
+            rel="preload"
+            as="font"
+            crossorigin
+            type="font/woff2"
+            href="https://cdn.plyr.io/static/fonts/gordita-bold.woff2"
+        />
+    </head>

-    <!-- Preload -->
-    <link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/gordita-medium.woff2">
-    <link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/gordita-bold.woff2">
-</head>
-
-<body>
-    <div class="grid">
-        <header>
-            <h1>Plyr</h1>
-            <p>A simple, accessible and customisable media player for
-                <button type="button" class="faux-link" data-source="video">
-                    <svg class="icon">
-                        <title>HTML5</title>
-                        <path d="M14.738.326C14.548.118 14.28 0 14 0H2c-.28 0-.55.118-.738.326S.98.81 1.004 1.09l1 11c.03.317.208.603.48.767l5 3c.16.095.338.143.516.143s.356-.048.515-.143l5-3c.273-.164.452-.45.48-.767l1-11c.026-.28-.067-.557-.257-.764zM12 4H6v2h6v5.72l-4 1.334-4-1.333V9h2v1.28l2 .666 2-.667V8H4V2h8v2z"></path>
-                    </svg>Video</button>,
-                <button type="button" class="faux-link" data-source="audio">
-                    <svg class="icon">
-                        <title>HTML5</title>
-                        <path d="M14.738.326C14.548.118 14.28 0 14 0H2c-.28 0-.55.118-.738.326S.98.81 1.004 1.09l1 11c.03.317.208.603.48.767l5 3c.16.095.338.143.516.143s.356-.048.515-.143l5-3c.273-.164.452-.45.48-.767l1-11c.026-.28-.067-.557-.257-.764zM12 4H6v2h6v5.72l-4 1.334-4-1.333V9h2v1.28l2 .666 2-.667V8H4V2h8v2z"></path>
-                    </svg>Audio</button>,
-                <button type="button" class="faux-link" data-source="youtube">
-                    <svg class="icon" role="presentation">
-                        <title>YouTube</title>
-                        <path d="M15.8,4.8c-0.2-1.3-0.8-2.2-2.2-2.4C11.4,2,8,2,8,2S4.6,2,2.4,2.4C1,2.6,0.3,3.5,0.2,4.8C0,6.1,0,8,0,8
-                   s0,1.9,0.2,3.2c0.2,1.3,0.8,2.2,2.2,2.4C4.6,14,8,14,8,14s3.4,0,5.6-0.4c1.4-0.3,2-1.1,2.2-2.4C16,9.9,16,8,16,8S16,6.1,15.8,4.8z
-                    M6,11V5l5,3L6,11z"></path>
-                    </svg>YouTube</button> and
-                <button type="button" class="faux-link" data-source="vimeo">
-                    <svg class="icon" role="presentation">
-                        <title>Vimeo</title>
-                        <path d="M16,4.3c-0.1,1.6-1.2,3.7-3.3,6.4c-2.2,2.8-4,4.2-5.5,4.2c-0.9,0-1.7-0.9-2.4-2.6C4,9.9,3.4,5,2,5
-                       C1.9,5,1.5,5.3,0.8,5.8L0,4.8c0.8-0.7,3.5-3.4,4.7-3.5C5.9,1.2,6.7,2,7,3.8c0.3,2,0.8,6.1,1.8,6.1c0.9,0,2.5-3.4,2.6-4
-                       c0.1-0.9-0.3-1.9-2.3-1.1c0.8-2.6,2.3-3.8,4.5-3.8C15.3,1.1,16.1,2.2,16,4.3z"></path>
-                    </svg>Vimeo</button>
-            </p>
-
-            <p>Premium video monitization from
-                <a href="https://vi.ai/publisher-video-monetization/?aid=plyrio" target="_blank" class="no-border">
-                    <img src="https://cdn.plyr.io/static/vi-logo-24x24.svg" alt="ai.vi">
-                    <span class="sr-only">ai.vi</span>
-                </a>
-            </p>
-
-            <div class="call-to-action">
-                <span class="button--with-count">
-                    <a href="https://github.com/sampotts/plyr" target="_blank" class="button" data-shr-network="github">
+    <body>
+        <div class="grid">
+            <header>
+                <h1>Plyr</h1>
+                <p>
+                    A simple, accessible and customisable media player for
+                    <button type="button" class="faux-link" data-source="video">
+                        <svg class="icon">
+                            <title>HTML5</title>
+                            <path
+                                d="M14.738.326C14.548.118 14.28 0 14 0H2c-.28 0-.55.118-.738.326S.98.81 1.004 1.09l1 11c.03.317.208.603.48.767l5 3c.16.095.338.143.516.143s.356-.048.515-.143l5-3c.273-.164.452-.45.48-.767l1-11c.026-.28-.067-.557-.257-.764zM12 4H6v2h6v5.72l-4 1.334-4-1.333V9h2v1.28l2 .666 2-.667V8H4V2h8v2z"
+                            ></path></svg
+                        >Video</button
+                    >,
+                    <button type="button" class="faux-link" data-source="audio">
+                        <svg class="icon">
+                            <title>HTML5</title>
+                            <path
+                                d="M14.738.326C14.548.118 14.28 0 14 0H2c-.28 0-.55.118-.738.326S.98.81 1.004 1.09l1 11c.03.317.208.603.48.767l5 3c.16.095.338.143.516.143s.356-.048.515-.143l5-3c.273-.164.452-.45.48-.767l1-11c.026-.28-.067-.557-.257-.764zM12 4H6v2h6v5.72l-4 1.334-4-1.333V9h2v1.28l2 .666 2-.667V8H4V2h8v2z"
+                            ></path></svg
+                        >Audio</button
+                    >,
+                    <button type="button" class="faux-link" data-source="youtube">
                        <svg class="icon" role="presentation">
-                            <title>GitHub</title>
-                            <path d="M8,0.2c-4.4,0-8,3.6-8,8c0,3.5,2.3,6.5,5.5,7.6
+                            <title>YouTube</title>
+                            <path
+                                d="M15.8,4.8c-0.2-1.3-0.8-2.2-2.2-2.4C11.4,2,8,2,8,2S4.6,2,2.4,2.4C1,2.6,0.3,3.5,0.2,4.8C0,6.1,0,8,0,8
+                   s0,1.9,0.2,3.2c0.2,1.3,0.8,2.2,2.2,2.4C4.6,14,8,14,8,14s3.4,0,5.6-0.4c1.4-0.3,2-1.1,2.2-2.4C16,9.9,16,8,16,8S16,6.1,15.8,4.8z
+                    M6,11V5l5,3L6,11z"
+                            ></path></svg
+                        >YouTube
+                    </button>
+                    and
+                    <button type="button" class="faux-link" data-source="vimeo">
+                        <svg class="icon" role="presentation">
+                            <title>Vimeo</title>
+                            <path
+                                d="M16,4.3c-0.1,1.6-1.2,3.7-3.3,6.4c-2.2,2.8-4,4.2-5.5,4.2c-0.9,0-1.7-0.9-2.4-2.6C4,9.9,3.4,5,2,5
+                       C1.9,5,1.5,5.3,0.8,5.8L0,4.8c0.8-0.7,3.5-3.4,4.7-3.5C5.9,1.2,6.7,2,7,3.8c0.3,2,0.8,6.1,1.8,6.1c0.9,0,2.5-3.4,2.6-4
+                       c0.1-0.9-0.3-1.9-2.3-1.1c0.8-2.6,2.3-3.8,4.5-3.8C15.3,1.1,16.1,2.2,16,4.3z"
+                            ></path></svg
+                        >Vimeo
+                    </button>
+                </p>
+
+                <p>
+                    Premium video monitization from
+                    <a href="https://vi.ai/publisher-video-monetization/?aid=plyrio" target="_blank" class="no-border">
+                        <img src="https://cdn.plyr.io/static/vi-logo-24x24.svg" alt="ai.vi" />
+                        <span class="sr-only">ai.vi</span>
+                    </a>
+                </p>
+
+                <div class="call-to-action">
+                    <span class="button--with-count">
+                        <a
+                            href="https://github.com/sampotts/plyr"
+                            target="_blank"
+                            class="button"
+                            data-shr-network="github"
+                        >
+                            <svg class="icon" role="presentation">
+                                <title>GitHub</title>
+                                <path
+                                    d="M8,0.2c-4.4,0-8,3.6-8,8c0,3.5,2.3,6.5,5.5,7.6
               C5.9,15.9,6,15.6,6,15.4c0-0.2,0-0.7,0-1.4C3.8,14.5,3.3,13,3.3,13c-0.4-0.9-0.9-1.2-0.9-1.2c-0.7-0.5,0.1-0.5,0.1-0.5
               c0.8,0.1,1.2,0.8,1.2,0.8C4.4,13.4,5.6,13,6,12.8c0.1-0.5,0.3-0.9,0.5-1.1c-1.8-0.2-3.6-0.9-3.6-4c0-0.9,0.3-1.6,0.8-2.1
               c-0.1-0.2-0.4-1,0.1-2.1c0,0,0.7-0.2,2.2,0.8c0.6-0.2,1.3-0.3,2-0.3c0.7,0,1.4,0.1,2,0.3c1.5-1,2.2-0.8,2.2-0.8
               c0.4,1.1,0.2,1.9,0.1,2.1c0.5,0.6,0.8,1.3,0.8,2.1c0,3.1-1.9,3.7-3.7,3.9C9.7,12,10,12.5,10,13.2c0,1.1,0,1.9,0,2.2
-               c0,0.2,0.1,0.5,0.6,0.4c3.2-1.1,5.5-4.1,5.5-7.6C16,3.8,12.4,0.2,8,0.2z"></path>
-                        </svg>
-                        Download on GitHub
-                    </a>
-                </span>
-            </div>
-        </header>
+               c0,0.2,0.1,0.5,0.6,0.4c3.2-1.1,5.5-4.1,5.5-7.6C16,3.8,12.4,0.2,8,0.2z"
+                                ></path>
+                            </svg>
+                            Download on GitHub
+                        </a>
+                    </span>
+                </div>
+            </header>

-        <main>
-            <div id="container">
-                <video controls crossorigin playsinline poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg" id="player">
-                    <!-- Video files -->
-                    <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" type="video/mp4" size="576">
-                    <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4" type="video/mp4" size="720">
-                    <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4" type="video/mp4" size="1080">
+            <main>
+                <div id="container">
+                    <video
+                        controls
+                        crossorigin
+                        playsinline
+                        poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg"
+                        id="player"
+                    >
+                        <!-- Video files -->
+                        <source
+                            src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4"
+                            type="video/mp4"
+                            size="576"
+                        />
+                        <source
+                            src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4"
+                            type="video/mp4"
+                            size="720"
+                        />
+                        <source
+                            src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4"
+                            type="video/mp4"
+                            size="1080"
+                        />

-                    <!-- Caption files -->
-                    <track kind="captions" label="English" srclang="en" src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt"
-                        default>
-                    <track kind="captions" label="Français" srclang="fr" src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt">
+                        <!-- Caption files -->
+                        <track
+                            kind="captions"
+                            label="English"
+                            srclang="en"
+                            src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt"
+                            default
+                        />
+                        <track
+                            kind="captions"
+                            label="Français"
+                            srclang="fr"
+                            src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt"
+                        />

-                    <!-- Fallback for browsers that don't support the <video> element -->
-                    <a href="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" download>Download</a>
-                </video>
-            </div>
+                        <!-- Fallback for browsers that don't support the <video> element -->
+                        <a href="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" download
+                            >Download</a
+                        >
+                    </video>
+                </div>

-            <ul>
-                <li class="plyr__cite plyr__cite--video" hidden>
-                    <small>
-                        <svg class="icon">
-                            <title>HTML5</title>
-                            <path d="M14.738.326C14.548.118 14.28 0 14 0H2c-.28 0-.55.118-.738.326S.98.81 1.004 1.09l1 11c.03.317.208.603.48.767l5 3c.16.095.338.143.516.143s.356-.048.515-.143l5-3c.273-.164.452-.45.48-.767l1-11c.026-.28-.067-.557-.257-.764zM12 4H6v2h6v5.72l-4 1.334-4-1.333V9h2v1.28l2 .666 2-.667V8H4V2h8v2z"></path>
-                        </svg>
-                        <a href="https://itunes.apple.com/au/movie/view-from-a-blue-moon/id1041586323" target="_blank">View From A Blue Moon</a> &copy; Brainfarm
-                    </small>
-                </li>
-                <li class="plyr__cite plyr__cite--audio" hidden>
-                    <small>
-                        <svg class="icon" title="HTML5">
-                            <title>HTML5</title>
-                            <path d="M14.738.326C14.548.118 14.28 0 14 0H2c-.28 0-.55.118-.738.326S.98.81 1.004 1.09l1 11c.03.317.208.603.48.767l5 3c.16.095.338.143.516.143s.356-.048.515-.143l5-3c.273-.164.452-.45.48-.767l1-11c.026-.28-.067-.557-.257-.764zM12 4H6v2h6v5.72l-4 1.334-4-1.333V9h2v1.28l2 .666 2-.667V8H4V2h8v2z"></path>
-                        </svg>
-                        <a href="http://www.kishibashi.com/" target="_blank">Kishi Bashi &ndash; &ldquo;It All Began With A Burst&rdquo;</a> &copy; Kishi Bashi
-                    </small>
-                </li>
-                <li class="plyr__cite plyr__cite--youtube" hidden>
-                    <small>
-                        <a href="https://www.youtube.com/watch?v=bTqVqk7FSmY" target="_blank">View From A Blue Moon</a> on&nbsp;
-                        <span class="color--youtube">
-                            <svg class="icon" role="presentation">
-                                <title>YouTube</title>
-                                <path d="M15.8,4.8c-0.2-1.3-0.8-2.2-2.2-2.4C11.4,2,8,2,8,2S4.6,2,2.4,2.4C1,2.6,0.3,3.5,0.2,4.8C0,6.1,0,8,0,8
+                <ul>
+                    <li class="plyr__cite plyr__cite--video" hidden>
+                        <small>
+                            <svg class="icon">
+                                <title>HTML5</title>
+                                <path
+                                    d="M14.738.326C14.548.118 14.28 0 14 0H2c-.28 0-.55.118-.738.326S.98.81 1.004 1.09l1 11c.03.317.208.603.48.767l5 3c.16.095.338.143.516.143s.356-.048.515-.143l5-3c.273-.164.452-.45.48-.767l1-11c.026-.28-.067-.557-.257-.764zM12 4H6v2h6v5.72l-4 1.334-4-1.333V9h2v1.28l2 .666 2-.667V8H4V2h8v2z"
+                                ></path>
+                            </svg>
+                            <a
+                                href="https://itunes.apple.com/au/movie/view-from-a-blue-moon/id1041586323"
+                                target="_blank"
+                                >View From A Blue Moon</a
+                            >
+                            &copy; Brainfarm
+                        </small>
+                    </li>
+                    <li class="plyr__cite plyr__cite--audio" hidden>
+                        <small>
+                            <svg class="icon" title="HTML5">
+                                <title>HTML5</title>
+                                <path
+                                    d="M14.738.326C14.548.118 14.28 0 14 0H2c-.28 0-.55.118-.738.326S.98.81 1.004 1.09l1 11c.03.317.208.603.48.767l5 3c.16.095.338.143.516.143s.356-.048.515-.143l5-3c.273-.164.452-.45.48-.767l1-11c.026-.28-.067-.557-.257-.764zM12 4H6v2h6v5.72l-4 1.334-4-1.333V9h2v1.28l2 .666 2-.667V8H4V2h8v2z"
+                                ></path>
+                            </svg>
+                            <a href="http://www.kishibashi.com/" target="_blank"
+                                >Kishi Bashi &ndash; &ldquo;It All Began With A Burst&rdquo;</a
+                            >
+                            &copy; Kishi Bashi
+                        </small>
+                    </li>
+                    <li class="plyr__cite plyr__cite--youtube" hidden>
+                        <small>
+                            <a href="https://www.youtube.com/watch?v=bTqVqk7FSmY" target="_blank"
+                                >View From A Blue Moon</a
+                            >
+                            on&nbsp;
+                            <span class="color--youtube">
+                                <svg class="icon" role="presentation">
+                                    <title>YouTube</title>
+                                    <path
+                                        d="M15.8,4.8c-0.2-1.3-0.8-2.2-2.2-2.4C11.4,2,8,2,8,2S4.6,2,2.4,2.4C1,2.6,0.3,3.5,0.2,4.8C0,6.1,0,8,0,8
                                   s0,1.9,0.2,3.2c0.2,1.3,0.8,2.2,2.2,2.4C4.6,14,8,14,8,14s3.4,0,5.6-0.4c1.4-0.3,2-1.1,2.2-2.4C16,9.9,16,8,16,8S16,6.1,15.8,4.8z
-                                    M6,11V5l5,3L6,11z"></path>
-                            </svg>YouTube
-                        </span>
-                    </small>
-                </li>
-                <li class="plyr__cite plyr__cite--vimeo" hidden>
-                    <small>
-                        <a href="https://vimeo.com/76979871" target="_blank">The New Vimeo Player</a> on&nbsp;
-                        <span class="color--vimeo">
-                            <svg class="icon" role="presentation">
-                                <title>Vimeo</title>
-                                <path d="M16,4.3c-0.1,1.6-1.2,3.7-3.3,6.4c-2.2,2.8-4,4.2-5.5,4.2c-0.9,0-1.7-0.9-2.4-2.6C4,9.9,3.4,5,2,5
+                                    M6,11V5l5,3L6,11z"
+                                    ></path></svg
+                                >YouTube
+                            </span>
+                        </small>
+                    </li>
+                    <li class="plyr__cite plyr__cite--vimeo" hidden>
+                        <small>
+                            <a href="https://vimeo.com/76979871" target="_blank">The New Vimeo Player</a> on&nbsp;
+                            <span class="color--vimeo">
+                                <svg class="icon" role="presentation">
+                                    <title>Vimeo</title>
+                                    <path
+                                        d="M16,4.3c-0.1,1.6-1.2,3.7-3.3,6.4c-2.2,2.8-4,4.2-5.5,4.2c-0.9,0-1.7-0.9-2.4-2.6C4,9.9,3.4,5,2,5
                               C1.9,5,1.5,5.3,0.8,5.8L0,4.8c0.8-0.7,3.5-3.4,4.7-3.5C5.9,1.2,6.7,2,7,3.8c0.3,2,0.8,6.1,1.8,6.1c0.9,0,2.5-3.4,2.6-4
-                               c0.1-0.9-0.3-1.9-2.3-1.1c0.8-2.6,2.3-3.8,4.5-3.8C15.3,1.1,16.1,2.2,16,4.3z"></path>
-                            </svg>Vimeo
-                        </span>
-                    </small>
-                </li>
-            </ul>
-        </main>
-    </div>
+                               c0.1-0.9-0.3-1.9-2.3-1.1c0.8-2.6,2.3-3.8,4.5-3.8C15.3,1.1,16.1,2.2,16,4.3z"
+                                    ></path></svg
+                                >Vimeo
+                            </span>
+                        </small>
+                    </li>
+                </ul>
+            </main>
+        </div>

-    <aside>
-        <svg class="icon">
-            <title>Twitter</title>
-            <path d="M16,3c-0.6,0.3-1.2,0.4-1.9,0.5c0.7-0.4,1.2-1,1.4-1.8c-0.6,0.4-1.3,0.6-2.1,0.8c-0.6-0.6-1.5-1-2.4-1
+        <aside>
+            <svg class="icon">
+                <title>Twitter</title>
+                <path
+                    d="M16,3c-0.6,0.3-1.2,0.4-1.9,0.5c0.7-0.4,1.2-1,1.4-1.8c-0.6,0.4-1.3,0.6-2.1,0.8c-0.6-0.6-1.5-1-2.4-1
       C9.3,1.5,7.8,3,7.8,4.8c0,0.3,0,0.5,0.1,0.7C5.2,5.4,2.7,4.1,1.1,2.1c-0.3,0.5-0.4,1-0.4,1.7c0,1.1,0.6,2.1,1.5,2.7
       c-0.5,0-1-0.2-1.5-0.4c0,0,0,0,0,0c0,1.6,1.1,2.9,2.6,3.2C3,9.4,2.7,9.4,2.4,9.4c-0.2,0-0.4,0-0.6-0.1c0.4,1.3,1.6,2.3,3.1,2.3
-       c-1.1,0.9-2.5,1.4-4.1,1.4c-0.3,0-0.5,0-0.8,0c1.5,0.9,3.2,1.5,5,1.5c6,0,9.3-5,9.3-9.3c0-0.1,0-0.3,0-0.4C15,4.3,15.6,3.7,16,3z"></path>
-        </svg>
-        <p>If you think Plyr's good,
-            <a href="https://twitter.com/intent/tweet?text=A+simple+HTML5+media+player+with+custom+controls+and+WebVTT+captions.&amp;url=http%3A%2F%2Fplyr.io&amp;via=Sam_Potts"
-                target="_blank" data-shr-network="twitter">tweet it</a> 👍
-        </p>
-    </aside>
+       c-1.1,0.9-2.5,1.4-4.1,1.4c-0.3,0-0.5,0-0.8,0c1.5,0.9,3.2,1.5,5,1.5c6,0,9.3-5,9.3-9.3c0-0.1,0-0.3,0-0.4C15,4.3,15.6,3.7,16,3z"
+                ></path>
+            </svg>
+            <p>
+                If you think Plyr's good,
+                <a
+                    href="https://twitter.com/intent/tweet?text=A+simple+HTML5+media+player+with+custom+controls+and+WebVTT+captions.&amp;url=http%3A%2F%2Fplyr.io&amp;via=Sam_Potts"
+                    target="_blank"
+                    data-shr-network="twitter"
+                    >tweet it</a
+                >
+                👍
+            </p>
+        </aside>

-    <!-- Polyfills -->
-    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=es6,Array.prototype.includes,CustomEvent,Object.entries,Object.values,URL"
-        crossorigin="anonymous"></script>
+        <!-- Polyfills -->
+        <script
+            src="https://cdn.polyfill.io/v2/polyfill.min.js?features=es6,Array.prototype.includes,CustomEvent,Object.entries,Object.values,URL"
+            crossorigin="anonymous"
+        ></script>

-    <!-- Plyr core script -->
-    <script src="../dist/plyr.js" crossorigin="anonymous"></script>
+        <!-- Plyr core script -->
+        <script src="../dist/plyr.js" crossorigin="anonymous"></script>

-    <!-- Sharing libary (https://shr.one) -->
-    <script src="https://cdn.shr.one/1.0.1/shr.js" crossorigin="anonymous"></script>
+        <!-- Sharing libary (https://shr.one) -->
+        <script src="https://cdn.shr.one/1.0.1/shr.js" crossorigin="anonymous"></script>

-    <!-- Rangetouch to fix <input type="range"> on touch devices (see https://rangetouch.com) -->
-    <script src="https://cdn.rangetouch.com/1.0.1/rangetouch.js" async crossorigin="anonymous"></script>
+        <!-- Rangetouch to fix <input type="range"> on touch devices (see https://rangetouch.com) -->
+        <script src="https://cdn.rangetouch.com/1.0.1/rangetouch.js" async crossorigin="anonymous"></script>

-    <!-- Docs script -->
-    <script src="dist/demo.js" crossorigin="anonymous"></script>
-</body>
-
-</html>
+        <!-- Docs script -->
+        <script async src="https://www.googletagmanager.com/gtag/js?id=UA-132699580-1"></script>
+        <script src="dist/demo.js" crossorigin="anonymous"></script>
+    </body>
+</html>
@@ -279,24 +279,12 @@ import Raven from 'raven-js';

    // Google analytics
    // For demo site (https://plyr.io) only
-    /* eslint-disable */
    if (env.prod) {
-        ((i, s, o, g, r, a, m) => {
-            i.GoogleAnalyticsObject = r;
-            i[r] =
-                i[r] ||
-                function() {
-                    (i[r].q = i[r].q || []).push(arguments);
-                };
-            i[r].l = 1 * new Date();
-            a = s.createElement(o);
-            m = s.getElementsByTagName(o)[0];
-            a.async = 1;
-            a.src = g;
-            m.parentNode.insertBefore(a, m);
-        })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
-        window.ga('create', 'UA-40881672-11', 'auto');
-        window.ga('send', 'pageview');
+        window.dataLayer = window.dataLayer || [];
+        const gtag = (...args) => {
+            window.dataLayer.push(args);
+        };
+        gtag('js', new Date());
+        gtag('config', 'UA-132699580-1');
    }
-    /* eslint-enable */
 })();
@@ -7,7 +7,8 @@
    font-family: 'Gordita';
    font-style: normal;
    font-weight: $font-weight-light;
-    src: url('https://cdn.plyr.io/static/fonts/gordita-light.woff2') format('woff2'), url('https://cdn.plyr.io/static/fonts/gordita-light.woff') format('woff');
+    src: url('https://cdn.plyr.io/static/fonts/gordita-light.woff2') format('woff2'),
+        url('https://cdn.plyr.io/static/fonts/gordita-light.woff') format('woff');
 }

@font-face {
@@ -33,7 +34,8 @@
    font-family: 'Gordita';
    font-style: normal;
    font-weight: $font-weight-bold;
-    src: url('https://cdn.plyr.io/static/fonts/gordita-bold.woff2') format('woff2'), url('https://cdn.plyr.io/static/fonts/gordita-bold.woff') format('woff');
+    src: url('https://cdn.plyr.io/static/fonts/gordita-bold.woff2') format('woff2'),
+        url('https://cdn.plyr.io/static/fonts/gordita-bold.woff') format('woff');
 }

@font-face {
@@ -41,5 +43,6 @@
    font-family: 'Gordita';
    font-style: normal;
    font-weight: $font-weight-black;
-    src: url('https://cdn.plyr.io/static/fonts/gordita-black.woff2') format('woff2'), url('https://cdn.plyr.io/static/fonts/gordita-black.woff') format('woff');
+    src: url('https://cdn.plyr.io/static/fonts/gordita-black.woff2') format('woff2'),
+        url('https://cdn.plyr.io/static/fonts/gordita-black.woff') format('woff');
 }
@@ -11,6 +11,9 @@ $plyr-font-size-small: 12px;
 $plyr-font-size-time: 11px;
 $plyr-font-size-badges: 9px;

+// Other
+$plyr-font-smoothing: true;
+
 // Captions
 $plyr-font-size-captions-base: $plyr-font-size-base;
 $plyr-font-size-captions-small: $plyr-font-size-small;
@@ -570,15 +570,12 @@ typeof navigator === "object" && (function (global, factory) {
  } // Element matches selector

  function matches(element, selector) {
-    var prototype = {
-      Element: Element
-    };

    function match() {
      return Array.from(document.querySelectorAll(selector)).includes(this);
    }

-    var matches = prototype.matches || prototype.webkitMatchesSelector || prototype.mozMatchesSelector || prototype.msMatchesSelector || match;
+    var matches = match;
    return matches.call(element, selector);
  } // Find all elements

@@ -634,7 +631,9 @@ typeof navigator === "object" && (function (global, factory) {
    } // Set regular focus


-    element.focus(); // If we want to mimic keyboard focus via tab
+    element.focus({
+      preventScroll: true
+    }); // If we want to mimic keyboard focus via tab

    if (tabFocus) {
      toggleClass(element, this.config.classNames.tabFocus);
@@ -739,26 +738,20 @@ typeof navigator === "object" && (function (global, factory) {
          _inputType$split2 = _slicedToArray(_inputType$split, 1),
          mediaType = _inputType$split2[0];

+      var type = inputType; // Verify we're using HTML5 and there's no media type mismatch
+
      if (!this.isHTML5 || mediaType !== this.type) {
        return false;
-      }
+      } // Add codec if required

-      var type;

-      if (inputType && inputType.includes('codecs=')) {
-        // Use input directly
-        type = inputType;
-      } else if (inputType === 'audio/mpeg') {
-        // Skip codec
-        type = 'audio/mpeg;';
-      } else if (inputType in defaultCodecs) {
-        // Use codec
-        type = "".concat(inputType, "; codecs=\"").concat(defaultCodecs[inputType], "\"");
+      if (Object.keys(defaultCodecs).includes(type)) {
+        type += "; codecs=\"".concat(defaultCodecs[inputType], "\"");
      }

      try {
        return Boolean(type && this.media.canPlayType(type).replace(/no/, ''));
-      } catch (err) {
+      } catch (e) {
        return false;
      }
    },
@@ -2629,7 +2622,7 @@ typeof navigator === "object" && (function (global, factory) {
      var update = true; // If function, run it and use output

      if (is.function(this.config.controls)) {
-        this.config.controls = this.config.controls.call(this.props);
+        this.config.controls = this.config.controls.call(this, props);
      } // Convert falsy controls to empty array (primarily for empty strings)


@@ -3192,7 +3185,7 @@ typeof navigator === "object" && (function (global, factory) {
    // Sprite (for icons)
    loadSprite: true,
    iconPrefix: 'plyr',
-    iconUrl: 'https://cdn.plyr.io/3.4.6/plyr.svg',
+    iconUrl: 'https://cdn.plyr.io/3.4.8/plyr.svg',
    // Blank video (used to prevent errors on source change)
    blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
    // Quality default
@@ -4315,7 +4308,7 @@ typeof navigator === "object" && (function (global, factory) {
        }); // Check for audio tracks on load
        // We can't use `loadedmetadata` as it doesn't seem to have audio tracks at that point

-        on.call(player, player.media, 'canplay', function () {
+        on.call(player, player.media, 'canplay loadeddata', function () {
          toggleHidden(elements.volume, !player.hasAudio);
          toggleHidden(elements.buttons.mute, !player.hasAudio);
        }); // Handle the media finishing
@@ -4710,9 +4703,7 @@ typeof navigator === "object" && (function (global, factory) {

  var loadjs_umd = createCommonjsModule(function (module, exports) {
  (function(root, factory) {
-    if (typeof undefined === 'function' && undefined.amd) {
-      undefined([], factory);
-    } else {
+    {
      module.exports = factory();
    }
  }(commonjsGlobal, function() {
@@ -4854,8 +4845,8 @@ typeof navigator === "object" && (function (global, factory) {
          if (!e.sheet.cssText.length) result = 'e';
        } catch (x) {
          // sheets objects created from load errors don't allow access to
-          // `cssText`
-          result = 'e';
+          // `cssText` (unless error is Code:18 SecurityError)
+          if (x.code != 18) result = 'e';
        }
      }

@@ -5069,12 +5060,13 @@ typeof navigator === "object" && (function (global, factory) {
    // Set aspect ratio
    // For Vimeo we have an extra 300% height <div> to hide the standard controls and UI
    setAspectRatio: function setAspectRatio(input) {
-      var _split = (is.string(input) ? input : this.config.ratio).split(':'),
-          _split2 = _slicedToArray(_split, 2),
-          x = _split2[0],
-          y = _split2[1];
+      var _split$map = (is.string(input) ? input : this.config.ratio).split(':').map(Number),
+          _split$map2 = _slicedToArray(_split$map, 2),
+          x = _split$map2[0],
+          y = _split$map2[1];

      var padding = 100 / x * y;
+      vimeo.padding = padding;
      this.elements.wrapper.style.paddingBottom = "".concat(padding, "%");

      if (this.supported.ui) {
@@ -5278,8 +5270,8 @@ typeof navigator === "object" && (function (global, factory) {
      }); // Set aspect ratio based on video size

      Promise.all([player.embed.getVideoWidth(), player.embed.getVideoHeight()]).then(function (dimensions) {
-        var ratio = getAspectRatio(dimensions[0], dimensions[1]);
-        vimeo.setAspectRatio.call(_this2, ratio);
+        vimeo.ratio = getAspectRatio(dimensions[0], dimensions[1]);
+        vimeo.setAspectRatio.call(_this2, vimeo.ratio);
      }); // Set autopause

      player.embed.setAutopause(player.config.autopause).then(function (state) {
@@ -5370,6 +5362,24 @@ typeof navigator === "object" && (function (global, factory) {
      player.embed.on('error', function (detail) {
        player.media.error = detail;
        triggerEvent.call(player, player.media, 'error');
+      }); // Set height/width on fullscreen
+
+      player.on('enterfullscreen exitfullscreen', function (event) {
+        var target = player.fullscreen.target; // Ignore for iOS native
+
+        if (target !== player.elements.container) {
+          return;
+        }
+
+        var toggle = event.type === 'enterfullscreen';
+
+        var _vimeo$ratio$split$ma = vimeo.ratio.split(':').map(Number),
+            _vimeo$ratio$split$ma2 = _slicedToArray(_vimeo$ratio$split$ma, 2),
+            x = _vimeo$ratio$split$ma2[0],
+            y = _vimeo$ratio$split$ma2[1];
+
+        var dimension = x > y ? 'width' : 'height';
+        target.style[dimension] = toggle ? "".concat(vimeo.padding, "%") : null;
      }); // Rebuild UI

      setTimeout(function () {
@@ -6547,18 +6557,20 @@ typeof navigator === "object" && (function (global, factory) {

        if (_this2.isHTML5) {
          // Setup captions
-          if ('tracks' in input) {
+          if (Object.keys(input).includes('tracks')) {
            source.insertElements.call(_this2, 'track', input.tracks);
-          } // Load HTML5 sources
-
-
-          _this2.media.load();
+          }
        } // If HTML5 or embed but not fully supported, setupInterface and call ready now


        if (_this2.isHTML5 || _this2.isEmbed && !_this2.supported.ui) {
          // Setup interface
          ui.build.call(_this2);
+        }
+
+        if (_this2.isHTML5) {
+          // Load HTML5 sources
+          _this2.media.load();
        } // Update the fullscreen support


@@ -117,8 +117,9 @@ typeof navigator === "object" && (function (global, factory) {

      var URLSearchParams = function(searchString) {
        Object.defineProperty(this, '_entries', { writable: true, value: {} });
+        var typeofSearchString = typeof searchString;

-        if (typeof searchString === 'string') {
+        if (typeofSearchString === 'undefined') ; else if (typeofSearchString === 'string') {
          if (searchString !== '') {
            this._fromString(searchString);
          }
@@ -127,6 +128,25 @@ typeof navigator === "object" && (function (global, factory) {
          searchString.forEach(function(value, name) {
            _this.append(name, value);
          });
+        } else if ((searchString !== null) && (typeofSearchString === 'object')) {
+          if (Object.prototype.toString.call(searchString) === '[object Array]') {
+            for (var i = 0; i < searchString.length; i++) {
+              var entry = searchString[i];
+              if ((Object.prototype.toString.call(entry) === '[object Array]') || (entry.length !== 2)) {
+                this.append(entry[0], entry[1]);
+              } else {
+                throw new TypeError('Expected [string, any] as entry at index ' + i + ' of URLSearchParams\'s input');
+              }
+            }
+          } else {
+            for (var key in searchString) {
+              if (searchString.hasOwnProperty(key)) {
+                this.append(key, searchString[key]);
+              }
+            }
+          }
+        } else {
+          throw new TypeError('Unsupported input\'s type for URLSearchParams');
        }
      };

@@ -134,9 +154,9 @@ typeof navigator === "object" && (function (global, factory) {

      proto.append = function(name, value) {
        if (name in this._entries) {
-          this._entries[name].push(value.toString());
+          this._entries[name].push(String(value));
        } else {
-          this._entries[name] = [value.toString()];
+          this._entries[name] = [String(value)];
        }
      };

@@ -157,7 +177,7 @@ typeof navigator === "object" && (function (global, factory) {
      };

      proto.set = function(name, value) {
-        this._entries[name] = [value.toString()];
+        this._entries[name] = [String(value)];
      };

      proto.forEach = function(callback, thisArg) {
@@ -208,24 +228,6 @@ typeof navigator === "object" && (function (global, factory) {
        return searchArray.join('&');
      };

-      Object.defineProperty(proto, '_fromString', {
-        enumerable: false,
-        configurable: false,
-        writable: false,
-        value: function(searchString) {
-          this._entries = {};
-          searchString = searchString.replace(/^\?/, '');
-          var attributes = searchString.split('&');
-          var attribute;
-          for (var i = 0; i < attributes.length; i++) {
-            attribute = attributes[i].split('=');
-            this.append(
-              deserializeParam(attribute[0]),
-              (attribute.length > 1) ? deserializeParam(attribute[1]) : ''
-            );
-          }
-        }
-      });

      global.URLSearchParams = URLSearchParams;
    };
@@ -234,8 +236,10 @@ typeof navigator === "object" && (function (global, factory) {
      polyfillURLSearchParams();
    }

-    if (typeof URLSearchParams.prototype.sort !== 'function') {
-      URLSearchParams.prototype.sort = function() {
+    var proto = URLSearchParams.prototype;
+
+    if (typeof proto.sort !== 'function') {
+      proto.sort = function() {
        var _this = this;
        var items = [];
        this.forEach(function(value, name) {
@@ -262,6 +266,38 @@ typeof navigator === "object" && (function (global, factory) {
      };
    }

+    if (typeof proto._fromString !== 'function') {
+      Object.defineProperty(proto, '_fromString', {
+        enumerable: false,
+        configurable: false,
+        writable: false,
+        value: function(searchString) {
+          if (this._entries) {
+            this._entries = {};
+          } else {
+            var keys = [];
+            this.forEach(function(value, name) {
+              keys.push(name);
+            });
+            for (var i = 0; i < keys.length; i++) {
+              this.delete(keys[i]);
+            }
+          }
+
+          searchString = searchString.replace(/^\?/, '');
+          var attributes = searchString.split('&');
+          var attribute;
+          for (var i = 0; i < attributes.length; i++) {
+            attribute = attributes[i].split('=');
+            this.append(
+              deserializeParam(attribute[0]),
+              (attribute.length > 1) ? deserializeParam(attribute[1]) : ''
+            );
+          }
+        }
+      });
+    }
+
    // HTMLAnchorElement

  })(
@@ -538,7 +574,7 @@ typeof navigator === "object" && (function (global, factory) {
  });

  var _core = createCommonjsModule(function (module) {
-  var core = module.exports = { version: '2.5.7' };
+  var core = module.exports = { version: '2.6.2' };
  if (typeof __e == 'number') __e = core; // eslint-disable-line no-undef
  });
  var _core_1 = _core.version;
@@ -742,7 +778,7 @@ typeof navigator === "object" && (function (global, factory) {
  })('versions', []).push({
    version: _core.version,
    mode: 'global',
-    copyright: '© 2018 Denis Pushkarev (zloirock.ru)'
+    copyright: '© 2019 Denis Pushkarev (zloirock.ru)'
  });
  });

@@ -1339,37 +1375,30 @@ typeof navigator === "object" && (function (global, factory) {

  _addToUnscopables('includes');

-  var _fixReWks = function (KEY, length, exec) {
-    var SYMBOL = _wks(KEY);
-    var fns = exec(_defined, SYMBOL, ''[KEY]);
-    var strfn = fns[0];
-    var rxfn = fns[1];
-    if (_fails(function () {
-      var O = {};
-      O[SYMBOL] = function () { return 7; };
-      return ''[KEY](O) != 7;
-    })) {
-      _redefine(String.prototype, KEY, strfn);
-      _hide(RegExp.prototype, SYMBOL, length == 2
-        // 21.2.5.8 RegExp.prototype[@@replace](string, replaceValue)
-        // 21.2.5.11 RegExp.prototype[@@split](string, limit)
-        ? function (string, arg) { return rxfn.call(string, this, arg); }
-        // 21.2.5.6 RegExp.prototype[@@match](string)
-        // 21.2.5.9 RegExp.prototype[@@search](string)
-        : function (string) { return rxfn.call(string, this); }
-      );
-    }
+  // 7.2.9 SameValue(x, y)
+  var _sameValue = Object.is || function is(x, y) {
+    // eslint-disable-next-line no-self-compare
+    return x === y ? x !== 0 || 1 / x === 1 / y : x != x && y != y;
  };

-  // @@search logic
-  _fixReWks('search', 1, function (defined, SEARCH, $search) {
-    // 21.1.3.15 String.prototype.search(regexp)
-    return [function search(regexp) {
-      var O = defined(this);
-      var fn = regexp == undefined ? undefined : regexp[SEARCH];
-      return fn !== undefined ? fn.call(regexp, O) : new RegExp(regexp)[SEARCH](String(O));
-    }, $search];
-  });
+  var builtinExec = RegExp.prototype.exec;
+
+   // `RegExpExec` abstract operation
+  // https://tc39.github.io/ecma262/#sec-regexpexec
+  var _regexpExecAbstract = function (R, S) {
+    var exec = R.exec;
+    if (typeof exec === 'function') {
+      var result = exec.call(R, S);
+      if (typeof result !== 'object') {
+        throw new TypeError('RegExp exec method returned something other than an Object or null');
+      }
+      return result;
+    }
+    if (_classof(R) !== 'RegExp') {
+      throw new TypeError('RegExp#exec called on incompatible receiver');
+    }
+    return builtinExec.call(R, S);
+  };

  // 21.2.5.3 get RegExp.prototype.flags

@@ -1384,6 +1413,183 @@ typeof navigator === "object" && (function (global, factory) {
    return result;
  };

+  var nativeExec = RegExp.prototype.exec;
+  // This always refers to the native implementation, because the
+  // String#replace polyfill uses ./fix-regexp-well-known-symbol-logic.js,
+  // which loads this file before patching the method.
+  var nativeReplace = String.prototype.replace;
+
+  var patchedExec = nativeExec;
+
+  var LAST_INDEX = 'lastIndex';
+
+  var UPDATES_LAST_INDEX_WRONG = (function () {
+    var re1 = /a/,
+        re2 = /b*/g;
+    nativeExec.call(re1, 'a');
+    nativeExec.call(re2, 'a');
+    return re1[LAST_INDEX] !== 0 || re2[LAST_INDEX] !== 0;
+  })();
+
+  // nonparticipating capturing group, copied from es5-shim's String#split patch.
+  var NPCG_INCLUDED = /()??/.exec('')[1] !== undefined;
+
+  var PATCH = UPDATES_LAST_INDEX_WRONG || NPCG_INCLUDED;
+
+  if (PATCH) {
+    patchedExec = function exec(str) {
+      var re = this;
+      var lastIndex, reCopy, match, i;
+
+      if (NPCG_INCLUDED) {
+        reCopy = new RegExp('^' + re.source + '$(?!\\s)', _flags.call(re));
+      }
+      if (UPDATES_LAST_INDEX_WRONG) lastIndex = re[LAST_INDEX];
+
+      match = nativeExec.call(re, str);
+
+      if (UPDATES_LAST_INDEX_WRONG && match) {
+        re[LAST_INDEX] = re.global ? match.index + match[0].length : lastIndex;
+      }
+      if (NPCG_INCLUDED && match && match.length > 1) {
+        // Fix browsers whose `exec` methods don't consistently return `undefined`
+        // for NPCG, like IE8. NOTE: This doesn' work for /(.?)?/
+        // eslint-disable-next-line no-loop-func
+        nativeReplace.call(match[0], reCopy, function () {
+          for (i = 1; i < arguments.length - 2; i++) {
+            if (arguments[i] === undefined) match[i] = undefined;
+          }
+        });
+      }
+
+      return match;
+    };
+  }
+
+  var _regexpExec = patchedExec;
+
+  _export({
+    target: 'RegExp',
+    proto: true,
+    forced: _regexpExec !== /./.exec
+  }, {
+    exec: _regexpExec
+  });
+
+  var SPECIES$1 = _wks('species');
+
+  var REPLACE_SUPPORTS_NAMED_GROUPS = !_fails(function () {
+    // #replace needs built-in support for named groups.
+    // #match works fine because it just return the exec results, even if it has
+    // a "grops" property.
+    var re = /./;
+    re.exec = function () {
+      var result = [];
+      result.groups = { a: '7' };
+      return result;
+    };
+    return ''.replace(re, '$<a>') !== '7';
+  });
+
+  var SPLIT_WORKS_WITH_OVERWRITTEN_EXEC = (function () {
+    // Chrome 51 has a buggy "split" implementation when RegExp#exec !== nativeExec
+    var re = /(?:)/;
+    var originalExec = re.exec;
+    re.exec = function () { return originalExec.apply(this, arguments); };
+    var result = 'ab'.split(re);
+    return result.length === 2 && result[0] === 'a' && result[1] === 'b';
+  })();
+
+  var _fixReWks = function (KEY, length, exec) {
+    var SYMBOL = _wks(KEY);
+
+    var DELEGATES_TO_SYMBOL = !_fails(function () {
+      // String methods call symbol-named RegEp methods
+      var O = {};
+      O[SYMBOL] = function () { return 7; };
+      return ''[KEY](O) != 7;
+    });
+
+    var DELEGATES_TO_EXEC = DELEGATES_TO_SYMBOL ? !_fails(function () {
+      // Symbol-named RegExp methods call .exec
+      var execCalled = false;
+      var re = /a/;
+      re.exec = function () { execCalled = true; return null; };
+      if (KEY === 'split') {
+        // RegExp[@@split] doesn't call the regex's exec method, but first creates
+        // a new one. We need to return the patched regex when creating the new one.
+        re.constructor = {};
+        re.constructor[SPECIES$1] = function () { return re; };
+      }
+      re[SYMBOL]('');
+      return !execCalled;
+    }) : undefined;
+
+    if (
+      !DELEGATES_TO_SYMBOL ||
+      !DELEGATES_TO_EXEC ||
+      (KEY === 'replace' && !REPLACE_SUPPORTS_NAMED_GROUPS) ||
+      (KEY === 'split' && !SPLIT_WORKS_WITH_OVERWRITTEN_EXEC)
+    ) {
+      var nativeRegExpMethod = /./[SYMBOL];
+      var fns = exec(
+        _defined,
+        SYMBOL,
+        ''[KEY],
+        function maybeCallNative(nativeMethod, regexp, str, arg2, forceStringMethod) {
+          if (regexp.exec === _regexpExec) {
+            if (DELEGATES_TO_SYMBOL && !forceStringMethod) {
+              // The native String method already delegates to @@method (this
+              // polyfilled function), leasing to infinite recursion.
+              // We avoid it by directly calling the native @@method method.
+              return { done: true, value: nativeRegExpMethod.call(regexp, str, arg2) };
+            }
+            return { done: true, value: nativeMethod.call(str, regexp, arg2) };
+          }
+          return { done: false };
+        }
+      );
+      var strfn = fns[0];
+      var rxfn = fns[1];
+
+      _redefine(String.prototype, KEY, strfn);
+      _hide(RegExp.prototype, SYMBOL, length == 2
+        // 21.2.5.8 RegExp.prototype[@@replace](string, replaceValue)
+        // 21.2.5.11 RegExp.prototype[@@split](string, limit)
+        ? function (string, arg) { return rxfn.call(string, this, arg); }
+        // 21.2.5.6 RegExp.prototype[@@match](string)
+        // 21.2.5.9 RegExp.prototype[@@search](string)
+        : function (string) { return rxfn.call(string, this); }
+      );
+    }
+  };
+
+  // @@search logic
+  _fixReWks('search', 1, function (defined, SEARCH, $search, maybeCallNative) {
+    return [
+      // `String.prototype.search` method
+      // https://tc39.github.io/ecma262/#sec-string.prototype.search
+      function search(regexp) {
+        var O = defined(this);
+        var fn = regexp == undefined ? undefined : regexp[SEARCH];
+        return fn !== undefined ? fn.call(regexp, O) : new RegExp(regexp)[SEARCH](String(O));
+      },
+      // `RegExp.prototype[@@search]` method
+      // https://tc39.github.io/ecma262/#sec-regexp.prototype-@@search
+      function (regexp) {
+        var res = maybeCallNative($search, regexp, this);
+        if (res.done) return res.value;
+        var rx = _anObject(regexp);
+        var S = String(this);
+        var previousLastIndex = rx.lastIndex;
+        if (!_sameValue(previousLastIndex, 0)) rx.lastIndex = 0;
+        var result = _regexpExecAbstract(rx, S);
+        if (!_sameValue(rx.lastIndex, previousLastIndex)) rx.lastIndex = previousLastIndex;
+        return result === null ? -1 : result.index;
+      }
+    ];
+  });
+
  // 21.2.5.3 get RegExp.prototype.flags()
  if (_descriptors && /./g.flags != 'g') _objectDp.f(RegExp.prototype, 'flags', {
    configurable: true,
@@ -1480,7 +1686,7 @@ typeof navigator === "object" && (function (global, factory) {
        // Set @@toStringTag to native iterators
        _setToStringTag(IteratorPrototype, TAG, true);
        // fix for some old engines
-        if (typeof IteratorPrototype[ITERATOR$3] != 'function') _hide(IteratorPrototype, ITERATOR$3, returnThis);
+        if (!_library && typeof IteratorPrototype[ITERATOR$3] != 'function') _hide(IteratorPrototype, ITERATOR$3, returnThis);
      }
    }
    // fix Array#{values, @@iterator}.name in V8 / FF
@@ -1489,7 +1695,7 @@ typeof navigator === "object" && (function (global, factory) {
      $default = function values() { return $native.call(this); };
    }
    // Define iterator
-    if (BUGGY || VALUES_BUG || !proto[ITERATOR$3]) {
+    if ((!_library || FORCED) && (BUGGY || VALUES_BUG || !proto[ITERATOR$3])) {
      _hide(proto, ITERATOR$3, $default);
    }
    // Plug for library
@@ -2073,19 +2279,67 @@ typeof navigator === "object" && (function (global, factory) {
    throw new TypeError("Invalid attempt to destructure non-iterable instance");
  }

+  var _strictMethod = function (method, arg) {
+    return !!method && _fails(function () {
+      // eslint-disable-next-line no-useless-call
+      arg ? method.call(null, function () { /* empty */ }, 1) : method.call(null);
+    });
+  };
+
+  var $sort = [].sort;
+  var test = [1, 2, 3];
+
+  _export(_export.P + _export.F * (_fails(function () {
+    // IE8-
+    test.sort(undefined);
+  }) || !_fails(function () {
+    // V8 bug
+    test.sort(null);
+    // Old WebKit
+  }) || !_strictMethod($sort)), 'Array', {
+    // 22.1.3.25 Array.prototype.sort(comparefn)
+    sort: function sort(comparefn) {
+      return comparefn === undefined
+        ? $sort.call(_toObject(this))
+        : $sort.call(_toObject(this), _aFunction(comparefn));
+    }
+  });
+
  // 19.1.3.1 Object.assign(target, source)


  _export(_export.S + _export.F, 'Object', { assign: _objectAssign });

+  // 7.3.20 SpeciesConstructor(O, defaultConstructor)
+
+
+  var SPECIES$2 = _wks('species');
+  var _speciesConstructor = function (O, D) {
+    var C = _anObject(O).constructor;
+    var S;
+    return C === undefined || (S = _anObject(C)[SPECIES$2]) == undefined ? D : _aFunction(S);
+  };
+
+  var at = _stringAt(true);
+
+   // `AdvanceStringIndex` abstract operation
+  // https://tc39.github.io/ecma262/#sec-advancestringindex
+  var _advanceStringIndex = function (S, index, unicode) {
+    return index + (unicode ? at(S, index).length : 1);
+  };
+
+  var $min = Math.min;
+  var $push = [].push;
+  var $SPLIT = 'split';
+  var LENGTH = 'length';
+  var LAST_INDEX$1 = 'lastIndex';
+
+  // eslint-disable-next-line no-empty
+  var SUPPORTS_Y = !!(function () { try { return new RegExp('x', 'y'); } catch (e) {} })();
+
  // @@split logic
-  _fixReWks('split', 2, function (defined, SPLIT, $split) {
-    var isRegExp = _isRegexp;
-    var _split = $split;
-    var $push = [].push;
-    var $SPLIT = 'split';
-    var LENGTH = 'length';
-    var LAST_INDEX = 'lastIndex';
+  _fixReWks('split', 2, function (defined, SPLIT, $split, maybeCallNative) {
+    var internalSplit;
    if (
      'abbc'[$SPLIT](/(b)*/)[1] == 'c' ||
      'test'[$SPLIT](/(?:)/, -1)[LENGTH] != 4 ||
@@ -2094,13 +2348,12 @@ typeof navigator === "object" && (function (global, factory) {
      '.'[$SPLIT](/()()/)[LENGTH] > 1 ||
      ''[$SPLIT](/.?/)[LENGTH]
    ) {
-      var NPCG = /()??/.exec('')[1] === undefined; // nonparticipating capturing group
      // based on es5-shim implementation, need to rework it
-      $split = function (separator, limit) {
+      internalSplit = function (separator, limit) {
        var string = String(this);
        if (separator === undefined && limit === 0) return [];
        // If `separator` is not a regex, use native split
-        if (!isRegExp(separator)) return _split.call(string, separator, limit);
+        if (!_isRegexp(separator)) return $split.call(string, separator, limit);
        var output = [];
        var flags = (separator.ignoreCase ? 'i' : '') +
                    (separator.multiline ? 'm' : '') +
@@ -2110,25 +2363,17 @@ typeof navigator === "object" && (function (global, factory) {
        var splitLimit = limit === undefined ? 4294967295 : limit >>> 0;
        // Make `global` and avoid `lastIndex` issues by working with a copy
        var separatorCopy = new RegExp(separator.source, flags + 'g');
-        var separator2, match, lastIndex, lastLength, i;
-        // Doesn't need flags gy, but they don't hurt
-        if (!NPCG) separator2 = new RegExp('^' + separatorCopy.source + '$(?!\\s)', flags);
-        while (match = separatorCopy.exec(string)) {
-          // `separatorCopy.lastIndex` is not reliable cross-browser
-          lastIndex = match.index + match[0][LENGTH];
+        var match, lastIndex, lastLength;
+        while (match = _regexpExec.call(separatorCopy, string)) {
+          lastIndex = separatorCopy[LAST_INDEX$1];
          if (lastIndex > lastLastIndex) {
            output.push(string.slice(lastLastIndex, match.index));
-            // Fix browsers whose `exec` methods don't consistently return `undefined` for NPCG
-            // eslint-disable-next-line no-loop-func
-            if (!NPCG && match[LENGTH] > 1) match[0].replace(separator2, function () {
-              for (i = 1; i < arguments[LENGTH] - 2; i++) if (arguments[i] === undefined) match[i] = undefined;
-            });
            if (match[LENGTH] > 1 && match.index < string[LENGTH]) $push.apply(output, match.slice(1));
            lastLength = match[0][LENGTH];
            lastLastIndex = lastIndex;
            if (output[LENGTH] >= splitLimit) break;
          }
-          if (separatorCopy[LAST_INDEX] === match.index) separatorCopy[LAST_INDEX]++; // Avoid an infinite loop
+          if (separatorCopy[LAST_INDEX$1] === match.index) separatorCopy[LAST_INDEX$1]++; // Avoid an infinite loop
        }
        if (lastLastIndex === string[LENGTH]) {
          if (lastLength || !separatorCopy.test('')) output.push('');
@@ -2137,16 +2382,74 @@ typeof navigator === "object" && (function (global, factory) {
      };
    // Chakra, V8
    } else if ('0'[$SPLIT](undefined, 0)[LENGTH]) {
-      $split = function (separator, limit) {
-        return separator === undefined && limit === 0 ? [] : _split.call(this, separator, limit);
+      internalSplit = function (separator, limit) {
+        return separator === undefined && limit === 0 ? [] : $split.call(this, separator, limit);
      };
+    } else {
+      internalSplit = $split;
    }
-    // 21.1.3.17 String.prototype.split(separator, limit)
-    return [function split(separator, limit) {
-      var O = defined(this);
-      var fn = separator == undefined ? undefined : separator[SPLIT];
-      return fn !== undefined ? fn.call(separator, O, limit) : $split.call(String(O), separator, limit);
-    }, $split];
+
+    return [
+      // `String.prototype.split` method
+      // https://tc39.github.io/ecma262/#sec-string.prototype.split
+      function split(separator, limit) {
+        var O = defined(this);
+        var splitter = separator == undefined ? undefined : separator[SPLIT];
+        return splitter !== undefined
+          ? splitter.call(separator, O, limit)
+          : internalSplit.call(String(O), separator, limit);
+      },
+      // `RegExp.prototype[@@split]` method
+      // https://tc39.github.io/ecma262/#sec-regexp.prototype-@@split
+      //
+      // NOTE: This cannot be properly polyfilled in engines that don't support
+      // the 'y' flag.
+      function (regexp, limit) {
+        var res = maybeCallNative(internalSplit, regexp, this, limit, internalSplit !== $split);
+        if (res.done) return res.value;
+
+        var rx = _anObject(regexp);
+        var S = String(this);
+        var C = _speciesConstructor(rx, RegExp);
+
+        var unicodeMatching = rx.unicode;
+        var flags = (rx.ignoreCase ? 'i' : '') +
+                      (rx.multiline ? 'm' : '') +
+                      (rx.unicode ? 'u' : '') +
+                      (SUPPORTS_Y ? 'y' : 'g');
+
+        // ^(? + rx + ) is needed, in combination with some S slicing, to
+        // simulate the 'y' flag.
+        var splitter = new C(SUPPORTS_Y ? rx : '^(?:' + rx.source + ')', flags);
+        var lim = limit === undefined ? 0xffffffff : limit >>> 0;
+        if (lim === 0) return [];
+        if (S.length === 0) return _regexpExecAbstract(splitter, S) === null ? [S] : [];
+        var p = 0;
+        var q = 0;
+        var A = [];
+        while (q < S.length) {
+          splitter.lastIndex = SUPPORTS_Y ? q : 0;
+          var z = _regexpExecAbstract(splitter, SUPPORTS_Y ? S : S.slice(q));
+          var e;
+          if (
+            z === null ||
+            (e = $min(_toLength(splitter.lastIndex + (SUPPORTS_Y ? 0 : q)), S.length)) === p
+          ) {
+            q = _advanceStringIndex(S, q, unicodeMatching);
+          } else {
+            A.push(S.slice(p, q));
+            if (A.length === lim) return A;
+            for (var i = 1; i <= z.length - 1; i++) {
+              A.push(z[i]);
+              if (A.length === lim) return A;
+            }
+            q = p = e;
+          }
+        }
+        A.push(S.slice(p));
+        return A;
+      }
+    ];
  });

  var isEnum = _objectPie.f;
@@ -2184,28 +2487,117 @@ typeof navigator === "object" && (function (global, factory) {
    }
  });

-  // @@replace logic
-  _fixReWks('replace', 2, function (defined, REPLACE, $replace) {
-    // 21.1.3.14 String.prototype.replace(searchValue, replaceValue)
-    return [function replace(searchValue, replaceValue) {
-      var O = defined(this);
-      var fn = searchValue == undefined ? undefined : searchValue[REPLACE];
-      return fn !== undefined
-        ? fn.call(searchValue, O, replaceValue)
-        : $replace.call(String(O), searchValue, replaceValue);
-    }, $replace];
-  });
+  var max$1 = Math.max;
+  var min$2 = Math.min;
+  var floor$1 = Math.floor;
+  var SUBSTITUTION_SYMBOLS = /\$([$&`']|\d\d?|<[^>]*>)/g;
+  var SUBSTITUTION_SYMBOLS_NO_NAMED = /\$([$&`']|\d\d?)/g;

-  // 7.3.20 SpeciesConstructor(O, defaultConstructor)
-
-
-  var SPECIES$1 = _wks('species');
-  var _speciesConstructor = function (O, D) {
-    var C = _anObject(O).constructor;
-    var S;
-    return C === undefined || (S = _anObject(C)[SPECIES$1]) == undefined ? D : _aFunction(S);
+  var maybeToString = function (it) {
+    return it === undefined ? it : String(it);
  };

+  // @@replace logic
+  _fixReWks('replace', 2, function (defined, REPLACE, $replace, maybeCallNative) {
+    return [
+      // `String.prototype.replace` method
+      // https://tc39.github.io/ecma262/#sec-string.prototype.replace
+      function replace(searchValue, replaceValue) {
+        var O = defined(this);
+        var fn = searchValue == undefined ? undefined : searchValue[REPLACE];
+        return fn !== undefined
+          ? fn.call(searchValue, O, replaceValue)
+          : $replace.call(String(O), searchValue, replaceValue);
+      },
+      // `RegExp.prototype[@@replace]` method
+      // https://tc39.github.io/ecma262/#sec-regexp.prototype-@@replace
+      function (regexp, replaceValue) {
+        var res = maybeCallNative($replace, regexp, this, replaceValue);
+        if (res.done) return res.value;
+
+        var rx = _anObject(regexp);
+        var S = String(this);
+        var functionalReplace = typeof replaceValue === 'function';
+        if (!functionalReplace) replaceValue = String(replaceValue);
+        var global = rx.global;
+        if (global) {
+          var fullUnicode = rx.unicode;
+          rx.lastIndex = 0;
+        }
+        var results = [];
+        while (true) {
+          var result = _regexpExecAbstract(rx, S);
+          if (result === null) break;
+          results.push(result);
+          if (!global) break;
+          var matchStr = String(result[0]);
+          if (matchStr === '') rx.lastIndex = _advanceStringIndex(S, _toLength(rx.lastIndex), fullUnicode);
+        }
+        var accumulatedResult = '';
+        var nextSourcePosition = 0;
+        for (var i = 0; i < results.length; i++) {
+          result = results[i];
+          var matched = String(result[0]);
+          var position = max$1(min$2(_toInteger(result.index), S.length), 0);
+          var captures = [];
+          // NOTE: This is equivalent to
+          //   captures = result.slice(1).map(maybeToString)
+          // but for some reason `nativeSlice.call(result, 1, result.length)` (called in
+          // the slice polyfill when slicing native arrays) "doesn't work" in safari 9 and
+          // causes a crash (https://pastebin.com/N21QzeQA) when trying to debug it.
+          for (var j = 1; j < result.length; j++) captures.push(maybeToString(result[j]));
+          var namedCaptures = result.groups;
+          if (functionalReplace) {
+            var replacerArgs = [matched].concat(captures, position, S);
+            if (namedCaptures !== undefined) replacerArgs.push(namedCaptures);
+            var replacement = String(replaceValue.apply(undefined, replacerArgs));
+          } else {
+            replacement = getSubstitution(matched, S, position, captures, namedCaptures, replaceValue);
+          }
+          if (position >= nextSourcePosition) {
+            accumulatedResult += S.slice(nextSourcePosition, position) + replacement;
+            nextSourcePosition = position + matched.length;
+          }
+        }
+        return accumulatedResult + S.slice(nextSourcePosition);
+      }
+    ];
+
+      // https://tc39.github.io/ecma262/#sec-getsubstitution
+    function getSubstitution(matched, str, position, captures, namedCaptures, replacement) {
+      var tailPos = position + matched.length;
+      var m = captures.length;
+      var symbols = SUBSTITUTION_SYMBOLS_NO_NAMED;
+      if (namedCaptures !== undefined) {
+        namedCaptures = _toObject(namedCaptures);
+        symbols = SUBSTITUTION_SYMBOLS;
+      }
+      return $replace.call(replacement, symbols, function (match, ch) {
+        var capture;
+        switch (ch.charAt(0)) {
+          case '$': return '$';
+          case '&': return matched;
+          case '`': return str.slice(0, position);
+          case "'": return str.slice(tailPos);
+          case '<':
+            capture = namedCaptures[ch.slice(1, -1)];
+            break;
+          default: // \d\d?
+            var n = +ch;
+            if (n === 0) return match;
+            if (n > m) {
+              var f = floor$1(n / 10);
+              if (f === 0) return match;
+              if (f <= m) return captures[f - 1] === undefined ? ch.charAt(1) : captures[f - 1] + ch.charAt(1);
+              return match;
+            }
+            capture = captures[n - 1];
+        }
+        return capture === undefined ? '' : capture;
+      });
+    }
+  });
+
  // fast apply, http://jsperf.lnkit.com/fast-apply/5
  var _invoke = function (fn, args, that) {
    var un = that === undefined;
@@ -2415,11 +2807,11 @@ typeof navigator === "object" && (function (global, factory) {
    return promiseCapability.promise;
  };

-  var SPECIES$2 = _wks('species');
+  var SPECIES$3 = _wks('species');

  var _setSpecies = function (KEY) {
    var C = _global[KEY];
-    if (_descriptors && C && !C[SPECIES$2]) _objectDp.f(C, SPECIES$2, {
+    if (_descriptors && C && !C[SPECIES$3]) _objectDp.f(C, SPECIES$3, {
      configurable: true,
      get: function () { return this; }
    });
@@ -2650,7 +3042,7 @@ typeof navigator === "object" && (function (global, factory) {
      return capability.promise;
    }
  });
-  _export(_export.S + _export.F * (!USE_NATIVE), PROMISE, {
+  _export(_export.S + _export.F * (_library || !USE_NATIVE), PROMISE, {
    // 25.4.4.6 Promise.resolve(x)
    resolve: function resolve(x) {
      return _promiseResolve(_library && this === Wrapper ? $Promise : this, x);
@@ -3195,15 +3587,12 @@ typeof navigator === "object" && (function (global, factory) {
  } // Element matches selector

  function matches(element, selector) {
-    var prototype = {
-      Element: Element
-    };

    function match() {
      return Array.from(document.querySelectorAll(selector)).includes(this);
    }

-    var matches = prototype.matches || prototype.webkitMatchesSelector || prototype.mozMatchesSelector || prototype.msMatchesSelector || match;
+    var matches = match;
    return matches.call(element, selector);
  } // Find all elements

@@ -3259,7 +3648,9 @@ typeof navigator === "object" && (function (global, factory) {
    } // Set regular focus


-    element.focus(); // If we want to mimic keyboard focus via tab
+    element.focus({
+      preventScroll: true
+    }); // If we want to mimic keyboard focus via tab

    if (tabFocus) {
      toggleClass(element, this.config.classNames.tabFocus);
@@ -3363,26 +3754,20 @@ typeof navigator === "object" && (function (global, factory) {
          _inputType$split2 = _slicedToArray(_inputType$split, 1),
          mediaType = _inputType$split2[0];

+      var type = inputType; // Verify we're using HTML5 and there's no media type mismatch
+
      if (!this.isHTML5 || mediaType !== this.type) {
        return false;
-      }
+      } // Add codec if required

-      var type;

-      if (inputType && inputType.includes('codecs=')) {
-        // Use input directly
-        type = inputType;
-      } else if (inputType === 'audio/mpeg') {
-        // Skip codec
-        type = 'audio/mpeg;';
-      } else if (inputType in defaultCodecs) {
-        // Use codec
-        type = "".concat(inputType, "; codecs=\"").concat(defaultCodecs[inputType], "\"");
+      if (Object.keys(defaultCodecs).includes(type)) {
+        type += "; codecs=\"".concat(defaultCodecs[inputType], "\"");
      }

      try {
        return Boolean(type && this.media.canPlayType(type).replace(/no/, ''));
-      } catch (err) {
+      } catch (e) {
        return false;
      }
    },
@@ -5292,7 +5677,7 @@ typeof navigator === "object" && (function (global, factory) {
      var update = true; // If function, run it and use output

      if (is$1.function(this.config.controls)) {
-        this.config.controls = this.config.controls.call(this.props);
+        this.config.controls = this.config.controls.call(this, props);
      } // Convert falsy controls to empty array (primarily for empty strings)


@@ -5855,7 +6240,7 @@ typeof navigator === "object" && (function (global, factory) {
    // Sprite (for icons)
    loadSprite: true,
    iconPrefix: 'plyr',
-    iconUrl: 'https://cdn.plyr.io/3.4.6/plyr.svg',
+    iconUrl: 'https://cdn.plyr.io/3.4.8/plyr.svg',
    // Blank video (used to prevent errors on source change)
    blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
    // Quality default
@@ -6988,7 +7373,7 @@ typeof navigator === "object" && (function (global, factory) {
        }); // Check for audio tracks on load
        // We can't use `loadedmetadata` as it doesn't seem to have audio tracks at that point

-        on.call(player, player.media, 'canplay', function () {
+        on.call(player, player.media, 'canplay loadeddata', function () {
          toggleHidden(elements.volume, !player.hasAudio);
          toggleHidden(elements.buttons.mute, !player.hasAudio);
        }); // Handle the media finishing
@@ -7393,20 +7778,42 @@ typeof navigator === "object" && (function (global, factory) {
  });

  // @@match logic
-  _fixReWks('match', 1, function (defined, MATCH, $match) {
-    // 21.1.3.11 String.prototype.match(regexp)
-    return [function match(regexp) {
-      var O = defined(this);
-      var fn = regexp == undefined ? undefined : regexp[MATCH];
-      return fn !== undefined ? fn.call(regexp, O) : new RegExp(regexp)[MATCH](String(O));
-    }, $match];
+  _fixReWks('match', 1, function (defined, MATCH, $match, maybeCallNative) {
+    return [
+      // `String.prototype.match` method
+      // https://tc39.github.io/ecma262/#sec-string.prototype.match
+      function match(regexp) {
+        var O = defined(this);
+        var fn = regexp == undefined ? undefined : regexp[MATCH];
+        return fn !== undefined ? fn.call(regexp, O) : new RegExp(regexp)[MATCH](String(O));
+      },
+      // `RegExp.prototype[@@match]` method
+      // https://tc39.github.io/ecma262/#sec-regexp.prototype-@@match
+      function (regexp) {
+        var res = maybeCallNative($match, regexp, this);
+        if (res.done) return res.value;
+        var rx = _anObject(regexp);
+        var S = String(this);
+        if (!rx.global) return _regexpExecAbstract(rx, S);
+        var fullUnicode = rx.unicode;
+        rx.lastIndex = 0;
+        var A = [];
+        var n = 0;
+        var result;
+        while ((result = _regexpExecAbstract(rx, S)) !== null) {
+          var matchStr = String(result[0]);
+          A[n] = matchStr;
+          if (matchStr === '') rx.lastIndex = _advanceStringIndex(S, _toLength(rx.lastIndex), fullUnicode);
+          n++;
+        }
+        return n === 0 ? null : A;
+      }
+    ];
  });

  var loadjs_umd = createCommonjsModule(function (module, exports) {
  (function(root, factory) {
-    if (typeof undefined === 'function' && undefined.amd) {
-      undefined([], factory);
-    } else {
+    {
      module.exports = factory();
    }
  }(commonjsGlobal, function() {
@@ -7548,8 +7955,8 @@ typeof navigator === "object" && (function (global, factory) {
          if (!e.sheet.cssText.length) result = 'e';
        } catch (x) {
          // sheets objects created from load errors don't allow access to
-          // `cssText`
-          result = 'e';
+          // `cssText` (unless error is Code:18 SecurityError)
+          if (x.code != 18) result = 'e';
        }
      }

@@ -7762,12 +8169,13 @@ typeof navigator === "object" && (function (global, factory) {
    // Set aspect ratio
    // For Vimeo we have an extra 300% height <div> to hide the standard controls and UI
    setAspectRatio: function setAspectRatio(input) {
-      var _split = (is$1.string(input) ? input : this.config.ratio).split(':'),
-          _split2 = _slicedToArray(_split, 2),
-          x = _split2[0],
-          y = _split2[1];
+      var _split$map = (is$1.string(input) ? input : this.config.ratio).split(':').map(Number),
+          _split$map2 = _slicedToArray(_split$map, 2),
+          x = _split$map2[0],
+          y = _split$map2[1];

      var padding = 100 / x * y;
+      vimeo.padding = padding;
      this.elements.wrapper.style.paddingBottom = "".concat(padding, "%");

      if (this.supported.ui) {
@@ -7971,8 +8379,8 @@ typeof navigator === "object" && (function (global, factory) {
      }); // Set aspect ratio based on video size

      Promise.all([player.embed.getVideoWidth(), player.embed.getVideoHeight()]).then(function (dimensions) {
-        var ratio = getAspectRatio(dimensions[0], dimensions[1]);
-        vimeo.setAspectRatio.call(_this2, ratio);
+        vimeo.ratio = getAspectRatio(dimensions[0], dimensions[1]);
+        vimeo.setAspectRatio.call(_this2, vimeo.ratio);
      }); // Set autopause

      player.embed.setAutopause(player.config.autopause).then(function (state) {
@@ -8063,6 +8471,24 @@ typeof navigator === "object" && (function (global, factory) {
      player.embed.on('error', function (detail) {
        player.media.error = detail;
        triggerEvent.call(player, player.media, 'error');
+      }); // Set height/width on fullscreen
+
+      player.on('enterfullscreen exitfullscreen', function (event) {
+        var target = player.fullscreen.target; // Ignore for iOS native
+
+        if (target !== player.elements.container) {
+          return;
+        }
+
+        var toggle = event.type === 'enterfullscreen';
+
+        var _vimeo$ratio$split$ma = vimeo.ratio.split(':').map(Number),
+            _vimeo$ratio$split$ma2 = _slicedToArray(_vimeo$ratio$split$ma, 2),
+            x = _vimeo$ratio$split$ma2[0],
+            y = _vimeo$ratio$split$ma2[1];
+
+        var dimension = x > y ? 'width' : 'height';
+        target.style[dimension] = toggle ? "".concat(vimeo.padding, "%") : null;
      }); // Rebuild UI

      setTimeout(function () {
@@ -9237,18 +9663,20 @@ typeof navigator === "object" && (function (global, factory) {

        if (_this2.isHTML5) {
          // Setup captions
-          if ('tracks' in input) {
+          if (Object.keys(input).includes('tracks')) {
            source.insertElements.call(_this2, 'track', input.tracks);
-          } // Load HTML5 sources
-
-
-          _this2.media.load();
+          }
        } // If HTML5 or embed but not fully supported, setupInterface and call ready now


        if (_this2.isHTML5 || _this2.isEmbed && !_this2.supported.ui) {
          // Setup interface
          ui.build.call(_this2);
+        }
+
+        if (_this2.isHTML5) {
+          // Load HTML5 sources
+          _this2.media.load();
        } // Update the fullscreen support


@@ -12,7 +12,6 @@ const concat = require('gulp-concat');
 const filter = require('gulp-filter');
 const sass = require('gulp-sass');
 const cleancss = require('gulp-clean-css');
-const run = require('run-sequence');
 const header = require('gulp-header');
 const prefix = require('gulp-autoprefixer');
 const gitbranch = require('git-branch');
@@ -106,13 +105,15 @@ const babelrc = (polyfill = false) => ({
 });

 // Clean out /dist
-gulp.task('clean', () => {
+gulp.task('clean', done => {
    const dirs = [paths.plyr.output, paths.demo.output].map(dir => path.join(dir, '**/*'));

    // Don't delete the mp4
    dirs.push(`!${path.join(paths.plyr.output, '**/*.mp4')}`);

    del(dirs);
+
+    done();
 });

 const build = {
@@ -201,31 +202,25 @@ build.sass(bundles.demo.sass, 'demo');
 build.js(bundles.demo.js, 'demo', { format: 'iife' });

 // Build all JS
-gulp.task('js', () => {
-    run(tasks.js);
-});
+gulp.task('js', () => gulp.parallel(tasks.js));

 // Watch for file changes
 gulp.task('watch', () => {
    // Plyr core
-    gulp.watch(paths.plyr.src.js, tasks.js);
-    gulp.watch(paths.plyr.src.sass, tasks.sass);
-    gulp.watch(paths.plyr.src.sprite, tasks.sprite);
+    gulp.watch(paths.plyr.src.js, gulp.parallel(tasks.js));
+    gulp.watch(paths.plyr.src.sass, gulp.parallel(tasks.sass));
+    gulp.watch(paths.plyr.src.sprite, gulp.parallel(tasks.sprite));

    // Demo
-    gulp.watch(paths.demo.src.js, tasks.js);
-    gulp.watch(paths.demo.src.sass, tasks.sass);
+    gulp.watch(paths.demo.src.js, gulp.parallel(tasks.js));
+    gulp.watch(paths.demo.src.sass, gulp.parallel(tasks.sass));
 });

 // Build distribution
-gulp.task('build', () => {
-    run(tasks.clean, tasks.js, tasks.sass, tasks.sprite);
-});
+gulp.task('build', gulp.series(tasks.clean, gulp.parallel(tasks.js, tasks.sass, tasks.sprite)));

 // Default gulp task
-gulp.task('default', () => {
-    run('build', 'watch');
-});
+gulp.task('default', gulp.series('build', 'watch'));

 // Publish a version to CDN and demo
 // --------------------------------------------
@@ -452,7 +447,16 @@ if (Object.keys(credentials).includes('aws') && Object.keys(credentials).include
    });

    // Do everything
-    gulp.task('deploy', () =>
-        run('version', tasks.clean, tasks.js, tasks.sass, tasks.sprite, 'cdn', 'purge', 'demo', 'open'),
+    gulp.task(
+        'deploy',
+        gulp.series(
+            'version',
+            tasks.clean,
+            gulp.parallel(tasks.js, tasks.sass, tasks.sprite),
+            'cdn',
+            'demo',
+            'purge',
+            'open',
+        ),
    );
 }
@@ -1,6 +1,6 @@
 {
    "name": "plyr",
-    "version": "3.4.6",
+    "version": "3.4.8",
    "description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
    "homepage": "https://plyr.io",
    "author": "Sam Potts <sam@potts.es>",
@@ -35,19 +35,19 @@
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "devDependencies": {
-        "babel-core": "^6.26.3",
+        "@babel/core": "^7.1.5",
        "babel-eslint": "^10.0.1",
-        "@babel/preset-env": "^7.1.0",
+        "@babel/preset-env": "^7.1.5",
        "del": "^3.0.0",
-        "eslint": "^5.7.0",
+        "eslint": "^5.8.0",
        "eslint-config-airbnb-base": "^13.1.0",
        "eslint-config-prettier": "^3.1.0",
        "eslint-plugin-import": "^2.14.0",
        "fastly-purge": "^1.0.1",
        "git-branch": "^2.0.1",
-        "gulp": "^3.9.1",
+        "gulp": "^4.0.0",
        "gulp-autoprefixer": "^6.0.0",
-        "gulp-better-rollup": "^3.3.0",
+        "gulp-better-rollup": "^3.4.0",
        "gulp-clean-css": "^3.10.0",
        "gulp-concat": "^2.6.1",
        "gulp-filter": "^5.1.0",
@@ -64,23 +64,22 @@
        "gulp-svgstore": "^7.0.0",
        "gulp-uglify-es": "^1.0.4",
        "gulp-util": "^3.0.8",
-        "postcss-custom-properties": "^8.0.8",
+        "postcss-custom-properties": "^8.0.9",
        "prettier-eslint": "^8.8.2",
        "prettier-stylelint": "^0.4.2",
-        "remark-cli": "^5.0.0",
+        "remark-cli": "^6.0.0",
        "remark-validate-links": "^7.1.0",
        "rollup-plugin-babel": "^4.0.3",
        "rollup-plugin-commonjs": "^9.2.0",
        "rollup-plugin-node-resolve": "^3.4.0",
-        "run-sequence": "^2.2.1",
-        "stylelint": "^9.6.0",
+        "stylelint": "^9.7.1",
        "stylelint-config-prettier": "^4.0.0",
        "stylelint-config-recommended": "^2.1.0",
        "stylelint-config-sass-guidelines": "^5.2.0",
        "stylelint-order": "^1.0.0",
-        "stylelint-scss": "^3.3.2",
+        "stylelint-scss": "^3.4.0",
        "stylelint-selector-bem-pattern": "^2.0.0",
-        "through2": "^2.0.3"
+        "through2": "^3.0.0"
    },
    "dependencies": {
        "core-js": "^2.5.7",
@@ -132,13 +132,13 @@ See [initialising](#initialising) for more information on advanced setups.
 You can use our CDN (provided by [Fastly](https://www.fastly.com/)) for the JavaScript. There's 2 versions; one with and one without [polyfills](#polyfills). My recommendation would be to manage polyfills seperately as part of your application but to make life easier you can use the polyfilled build.

 ```html
-<script src="https://cdn.plyr.io/3.4.6/plyr.js"></script>
+<script src="https://cdn.plyr.io/3.4.8/plyr.js"></script>
 ```

 ...or...

 ```html
-<script src="https://cdn.plyr.io/3.4.6/plyr.polyfilled.js"></script>
+<script src="https://cdn.plyr.io/3.4.8/plyr.polyfilled.js"></script>
 ```

 ### CSS
@@ -152,13 +152,13 @@ Include the `plyr.css` stylsheet into your `<head>`
 If you want to use our CDN (provided by [Fastly](https://www.fastly.com/)) for the default CSS, you can use the following:

 ```html
-<link rel="stylesheet" href="https://cdn.plyr.io/3.4.6/plyr.css">
+<link rel="stylesheet" href="https://cdn.plyr.io/3.4.8/plyr.css">
 ```

 ### SVG Sprite

 The SVG sprite is loaded automatically from our CDN (provided by [Fastly](https://www.fastly.com/)). To change this, see the [options](#options) below. For
-reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/3.4.6/plyr.svg`.
+reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/3.4.8/plyr.svg`.

 ## Ads

@@ -417,7 +417,7 @@ player.fullscreen.active; // false;
 | `language`           | ✓      | ✓      | Gets or sets the preferred captions language for the player. The setter accepts an ISO two-letter language code. Support for the languages is dependent on the captions you include. If your captions don't have any language data, or if you have multiple tracks with the same language, you may want to use `currentTrack` instead. |
 | `fullscreen.active`  | ✓      | -      | Returns a boolean indicating if the current player is in fullscreen mode.                                                                                                                                                                                                                                                              |
 | `fullscreen.enabled` | ✓      | -      | Returns a boolean indicating if the current player has fullscreen enabled.                                                                                                                                                                                                                                                             |
-| `pip`                | ✓      | ✓      | Gets or sets the picture-in-picture state of the player. The setter accepts a boolean. This currently only supported on Safari 10+ (on MacOS Sierra+ and iOS 10+) and Chrome 70+.                                                                                                                                                      |
+| `pip`&sup2;                | ✓      | ✓      | Gets or sets the picture-in-picture state of the player. The setter accepts a boolean. This currently only supported on Safari 10+ (on MacOS Sierra+ and iOS 10+) and Chrome 70+.                                                                                                                                                      |

 1.  YouTube only. HTML5 will follow.
 2.  HTML5 only
@@ -714,6 +714,7 @@ Plyr costs money to run, not only my time. I donate my time for free as I enjoy
 -   [koel - A personal music streaming server that works.](http://koel.phanan.net/)
 -   [Oscar Radio](http://oscar-radio.xyz/)
 -   [Sparkk TV](https://www.sparkktv.com/)
+-   [@halfhalftravel](https://www.halfhalftravel.com/)

 Let me know on [Twitter](https://twitter.com/sam_potts) I can add you to the above list. It'd be awesome to see how you're using Plyr :-)

@@ -60,7 +60,7 @@ const defaults = {
    // Sprite (for icons)
    loadSprite: true,
    iconPrefix: 'plyr',
-    iconUrl: 'https://cdn.plyr.io/3.4.6/plyr.svg',
+    iconUrl: 'https://cdn.plyr.io/3.4.8/plyr.svg',

    // Blank video (used to prevent errors on source change)
    blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
@@ -1587,7 +1587,7 @@ const controls = {

        // If function, run it and use output
        if (is.function(this.config.controls)) {
-            this.config.controls = this.config.controls.call(this.props);
+            this.config.controls = this.config.controls.call(this, props);
        }

        // Convert falsy controls to empty array (primarily for empty strings)
@@ -317,7 +317,7 @@ class Listeners {

        // Check for audio tracks on load
        // We can't use `loadedmetadata` as it doesn't seem to have audio tracks at that point
-        on.call(player, player.media, 'canplay', () => {
+        on.call(player, player.media, 'canplay loadeddata', () => {
            toggleHidden(elements.volume, !player.hasAudio);
            toggleHidden(elements.buttons.mute, !player.hasAudio);
        });
@@ -70,8 +70,9 @@ const vimeo = {
    // Set aspect ratio
    // For Vimeo we have an extra 300% height <div> to hide the standard controls and UI
    setAspectRatio(input) {
-        const [x, y] = (is.string(input) ? input : this.config.ratio).split(':');
+        const [x, y] = (is.string(input) ? input : this.config.ratio).split(':').map(Number);
        const padding = (100 / x) * y;
+        vimeo.padding = padding;
        this.elements.wrapper.style.paddingBottom = `${padding}%`;

        if (this.supported.ui) {
@@ -299,8 +300,8 @@ const vimeo = {

        // Set aspect ratio based on video size
        Promise.all([player.embed.getVideoWidth(), player.embed.getVideoHeight()]).then(dimensions => {
-            const ratio = getAspectRatio(dimensions[0], dimensions[1]);
-            vimeo.setAspectRatio.call(this, ratio);
+            vimeo.ratio = getAspectRatio(dimensions[0], dimensions[1]);
+            vimeo.setAspectRatio.call(this, vimeo.ratio);
        });

        // Set autopause
@@ -404,6 +405,22 @@ const vimeo = {
            triggerEvent.call(player, player.media, 'error');
        });

+        // Set height/width on fullscreen
+        player.on('enterfullscreen exitfullscreen', event => {
+            const { target } = player.fullscreen;
+
+            // Ignore for iOS native
+            if (target !== player.elements.container) {
+                return;
+            }
+
+            const toggle = event.type === 'enterfullscreen';
+            const [x, y] = vimeo.ratio.split(':').map(Number);
+            const dimension = x > y ? 'width' : 'height';
+
+            target.style[dimension] = toggle ? `${vimeo.padding}%` : null;
+        });
+
        // Rebuild UI
        setTimeout(() => ui.build.call(player), 0);
    },
@@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr
-// plyr.js v3.4.6
+// plyr.js v3.4.8
 // https://github.com/sampotts/plyr
 // License: The MIT License (MIT)
 // ==========================================================================
@@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr Polyfilled Build
-// plyr.js v3.4.6
+// plyr.js v3.4.8
 // https://github.com/sampotts/plyr
 // License: The MIT License (MIT)
 // ==========================================================================
@@ -114,12 +114,9 @@ const source = {
                // HTML5 stuff
                if (this.isHTML5) {
                    // Setup captions
-                    if ('tracks' in input) {
+                    if (Object.keys(input).includes('tracks')) {
                        source.insertElements.call(this, 'track', input.tracks);
                    }
-
-                    // Load HTML5 sources
-                    this.media.load();
                }

                // If HTML5 or embed but not fully supported, setupInterface and call ready now
@@ -128,6 +125,11 @@ const source = {
                    ui.build.call(this);
                }

+                if (this.isHTML5) {
+                    // Load HTML5 sources
+                    this.media.load();
+                }
+
                // Update the fullscreen support
                this.fullscreen.update();
            },
@@ -70,25 +70,21 @@ const support = {
    // Related: http://www.leanbackplayer.com/test/h5mt.html
    mime(inputType) {
        const [mediaType] = inputType.split('/');
+        let type = inputType;
+
+        // Verify we're using HTML5 and there's no media type mismatch
        if (!this.isHTML5 || mediaType !== this.type) {
            return false;
        }

-        let type;
-        if (inputType && inputType.includes('codecs=')) {
-            // Use input directly
-            type = inputType;
-        } else if (inputType === 'audio/mpeg') {
-            // Skip codec
-            type = 'audio/mpeg;';
-        } else if (inputType in defaultCodecs) {
-            // Use codec
-            type = `${inputType}; codecs="${defaultCodecs[inputType]}"`;
+        // Add codec if required
+        if (Object.keys(defaultCodecs).includes(type)) {
+            type += `; codecs="${defaultCodecs[inputType]}"`;
        }

        try {
            return Boolean(type && this.media.canPlayType(type).replace(/no/, ''));
-        } catch (err) {
+        } catch (e) {
            return false;
        }
    },
@@ -293,7 +293,7 @@ export function setFocus(element = null, tabFocus = false) {
    }

    // Set regular focus
-    element.focus();
+    element.focus({ preventScroll: true });

    // If we want to mimic keyboard focus via tab
    if (tabFocus) {
@@ -12,7 +12,7 @@ $plyr-range-thumb-border: 2px solid transparent !default;
 $plyr-range-thumb-shadow: 0 1px 1px rgba(#000, 0.15), 0 0 0 1px rgba($plyr-color-gunmetal, 0.2) !default;

 // Track
-$plyr-range-track-height: 6px !default;
+$plyr-range-track-height: 4px !default;
 $plyr-range-max-height: ($plyr-range-thumb-active-shadow-width * 2) + $plyr-range-thumb-height !default;

 // Fill
@@ -17,4 +17,4 @@ $plyr-font-weight-bold: 600 !default;

 $plyr-line-height: 1.7 !default;

-$plyr-font-smoothing: true !default;
+$plyr-font-smoothing: false !default;
Author	SHA1	Message	Date
Sam Potts	f927d26ce7	v3.4.8 - Calling customized controls function with proper arguments (thanks @a60814billy)	2019-01-17 11:37:19 +11:00
Sam Potts	e8d2f23b81	Merge pull request #1254 from a60814billy/fix/custom-controls-calling-argument Calling customized controls function with proper arguments	2018-11-12 21:32:31 +11:00
Raccoon	0e181133c1	Calling customized controls function with proper arguments	2018-11-12 15:37:46 +08:00
Sam Potts	2c8a337f26	v3.4.7 - Fix for Vimeo fullscreen with non native aspect ratios (fixes #854)	2018-11-08 23:34:10 +11:00
Sam Potts	c24e52d97d	Package updates	2018-11-08 23:29:54 +11:00
Sam Potts	574f40949c	Merge branch 'master' into develop	2018-11-08 23:19:57 +11:00
Sam Potts	cf3848fbd5	Merge branch 'develop' of github.com:sampotts/plyr into develop	2018-11-08 23:19:26 +11:00
Sam Potts	a19ad69038	Fix for Vimeo fullscreen with non 16:9 aspect ratios	2018-11-08 23:19:11 +11:00
Sam Potts	d6f20e2756	Package upgrades	2018-11-08 23:18:23 +11:00
Sam Potts	e2fc20ca76	Styling tweaks	2018-11-08 23:18:04 +11:00
Sam Potts	37c3f7109d	Additional listener for checking for audio tracks	2018-11-08 23:17:44 +11:00
Sam Potts	99d5211a33	Merge pull request #1247 from danielcgold/patch-1 [Edit README] Halfhalftravel uses Plyr!	2018-11-06 10:17:55 +11:00
Dan Gold	b97f143195	Halfhalftravel uses Plyr! https://www.halfhalftravel.com/events/medellin-photo-walk.html https://www.halfhalftravel.com/travel-guides/how-to-travel-to-santa-fe-de-antioquia-colombia.html	2018-11-05 10:57:23 -05:00
Sam Potts	e8da4326b6	Prevent scroll on focus	2018-11-03 21:17:46 +11:00
Sam Potts	67f908aa8d	Load media after UI is built	2018-11-03 21:17:32 +11:00
Sam Potts	65eb5c1b8b	Fix support check	2018-11-03 21:16:40 +11:00
Sam Potts	7d484c6e09	Merge pull request #1232 from tocsinde/patch-1 Readme: Add missing annotation to PIP support	2018-10-26 08:37:33 +11:00
Stephan Fischer	8252e13eb9	Readme: Add missing annotation to PIP support PIP only works on HTML videos, so I added the number of the (already existing) annotation.	2018-10-25 23:35:20 +02:00