Use div for poster, Vimeo fixes, Tooltip fixes

demo/dist/demo.js

@@ -3948,6 +3948,39 @@ singleton.Client = Client;
                     'airplay',
                     'fullscreen',
                 ], */
+                /* i18n: {
+                    restart: '重新開始',
+                    rewind: '快退{seektime}秒',
+                    play: '播放',
+                    pause: '暫停',
+                    fastForward: '快進{seektime}秒',
+                    seek: '尋求',
+                    played: '發揮',
+                    buffered: '緩衝的',
+                    currentTime: '當前時間戳',
+                    duration: '長短',
+                    volume: '音量',
+                    mute: '靜音',
+                    unmute: '取消靜音',
+                    enableCaptions: '開啟字幕',
+                    disableCaptions: '關閉字幕',
+                    enterFullscreen: '進入全螢幕',
+                    exitFullscreen: '退出全螢幕',
+                    frameTitle: '球員為{title}',
+                    captions: '字幕',
+                    settings: '設定',
+                    speed: '速度',
+                    normal: '正常',
+                    quality: '質量',
+                    loop: '循環',
+                    start: 'Start',
+                    end: 'End',
+                    all: 'All',
+                    reset: '重啟',
+                    disabled: '殘',
+                    enabled: '啟用',
+                    advertisement: '廣告',
+                }, */
                 captions: {
                     active: true
                 },

demo/src/js/demo.js

@@ -74,6 +74,39 @@ import Raven from 'raven-js';
                     'airplay',
                     'fullscreen',
                 ], */
+                /* i18n: {
+                    restart: '重新開始',
+                    rewind: '快退{seektime}秒',
+                    play: '播放',
+                    pause: '暫停',
+                    fastForward: '快進{seektime}秒',
+                    seek: '尋求',
+                    played: '發揮',
+                    buffered: '緩衝的',
+                    currentTime: '當前時間戳',
+                    duration: '長短',
+                    volume: '音量',
+                    mute: '靜音',
+                    unmute: '取消靜音',
+                    enableCaptions: '開啟字幕',
+                    disableCaptions: '關閉字幕',
+                    enterFullscreen: '進入全螢幕',
+                    exitFullscreen: '退出全螢幕',
+                    frameTitle: '球員為{title}',
+                    captions: '字幕',
+                    settings: '設定',
+                    speed: '速度',
+                    normal: '正常',
+                    quality: '質量',
+                    loop: '循環',
+                    start: 'Start',
+                    end: 'End',
+                    all: 'All',
+                    reset: '重啟',
+                    disabled: '殘',
+                    enabled: '啟用',
+                    advertisement: '廣告',
+                }, */
                 captions: {
                     active: true,
                 },

dist/plyr.js

@@ -1214,7 +1214,7 @@ var utils = {
         }
 
         // Vimeo
-        if (/^https?:\/\/player.vimeo.com\/video\/\d{8,}(?=\b|\/)/.test(url)) {
+        if (/^https?:\/\/player.vimeo.com\/video\/\d{0,9}(?=\b|\/)/.test(url)) {
             return providers.vimeo;
         }
 
@@ -3814,10 +3814,10 @@ var defaults$1 = {
     // Localisation
     i18n: {
         restart: 'Restart',
-        rewind: 'Rewind {seektime} secs',
+        rewind: 'Rewind {seektime}s',
         play: 'Play',
         pause: 'Pause',
-        fastForward: 'Forward {seektime} secs',
+        fastForward: 'Forward {seektime}s',
         seek: 'Seek',
         played: 'Played',
         buffered: 'Buffered',
@@ -3946,13 +3946,14 @@ var defaults$1 = {
 
     // Class hooks added to the player in different states
     classNames: {
+        type: 'plyr--{0}',
+        provider: 'plyr--{0}',
         video: 'plyr__video-wrapper',
         embed: 'plyr__video-embed',
+        embedContainer: 'plyr__video-embed__container',
         poster: 'plyr__poster',
         ads: 'plyr__ads',
         control: 'plyr__control',
-        type: 'plyr--{0}',
-        provider: 'plyr--{0}',
         playing: 'plyr--playing',
         paused: 'plyr--paused',
         stopped: 'plyr--stopped',
@@ -4920,6 +4921,7 @@ var vimeo = {
         var options = {
             loop: player.config.loop.active,
             autoplay: player.autoplay,
+            // muted: player.muted,
             byline: false,
             portrait: false,
             title: false,
@@ -4949,7 +4951,7 @@ var vimeo = {
         iframe.setAttribute('allow', 'autoplay');
 
         // Inject the package
-        var wrapper = utils.createElement('div');
+        var wrapper = utils.createElement('div', { class: player.config.classNames.embedContainer });
         wrapper.appendChild(iframe);
         player.media = utils.replaceElement(wrapper, player.media);
 
@@ -5769,7 +5771,7 @@ var media = {
             utils.wrap(this.media, this.elements.wrapper);
 
             // Faux poster container
-            this.elements.poster = utils.createElement('span', {
+            this.elements.poster = utils.createElement('div', {
                 class: this.config.classNames.poster
             });
 

dist/plyr.polyfilled.js

@@ -6248,7 +6248,7 @@ var utils = {
         }
 
         // Vimeo
-        if (/^https?:\/\/player.vimeo.com\/video\/\d{8,}(?=\b|\/)/.test(url)) {
+        if (/^https?:\/\/player.vimeo.com\/video\/\d{0,9}(?=\b|\/)/.test(url)) {
             return providers.vimeo;
         }
 
@@ -8848,10 +8848,10 @@ var defaults$1 = {
     // Localisation
     i18n: {
         restart: 'Restart',
-        rewind: 'Rewind {seektime} secs',
+        rewind: 'Rewind {seektime}s',
         play: 'Play',
         pause: 'Pause',
-        fastForward: 'Forward {seektime} secs',
+        fastForward: 'Forward {seektime}s',
         seek: 'Seek',
         played: 'Played',
         buffered: 'Buffered',
@@ -8980,13 +8980,14 @@ var defaults$1 = {
 
     // Class hooks added to the player in different states
     classNames: {
+        type: 'plyr--{0}',
+        provider: 'plyr--{0}',
         video: 'plyr__video-wrapper',
         embed: 'plyr__video-embed',
+        embedContainer: 'plyr__video-embed__container',
         poster: 'plyr__poster',
         ads: 'plyr__ads',
         control: 'plyr__control',
-        type: 'plyr--{0}',
-        provider: 'plyr--{0}',
         playing: 'plyr--playing',
         paused: 'plyr--paused',
         stopped: 'plyr--stopped',
@@ -9954,6 +9955,7 @@ var vimeo = {
         var options = {
             loop: player.config.loop.active,
             autoplay: player.autoplay,
+            // muted: player.muted,
             byline: false,
             portrait: false,
             title: false,
@@ -9983,7 +9985,7 @@ var vimeo = {
         iframe.setAttribute('allow', 'autoplay');
 
         // Inject the package
-        var wrapper = utils.createElement('div');
+        var wrapper = utils.createElement('div', { class: player.config.classNames.embedContainer });
         wrapper.appendChild(iframe);
         player.media = utils.replaceElement(wrapper, player.media);
 
@@ -10803,7 +10805,7 @@ var media = {
             utils.wrap(this.media, this.elements.wrapper);
 
             // Faux poster container
-            this.elements.poster = utils.createElement('span', {
+            this.elements.poster = utils.createElement('div', {
                 class: this.config.classNames.poster
             });
 
@@ -13075,6 +13077,38 @@ var Plyr = function () {
         value: function loadSprite(url, id) {
             return utils.loadSprite(url, id);
         }
+
+        /**
+         * Setup multiple instances
+         * @param {*} selector
+         * @param {object} options
+         */
+
+    }, {
+        key: 'setup',
+        value: function setup(selector) {
+            var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+
+            var targets = null;
+
+            if (utils.is.string(selector)) {
+                targets = Array.from(document.querySelectorAll(selector));
+            } else if (utils.is.nodeList(selector)) {
+                targets = Array.from(selector);
+            } else if (utils.is.array(selector)) {
+                targets = selector.filter(function (i) {
+                    return utils.is.element(i);
+                });
+            }
+
+            if (utils.is.empty(targets)) {
+                return null;
+            }
+
+            return targets.map(function (t) {
+                return new Plyr(t, options);
+            });
+        }
     }]);
     return Plyr;
 }();

src/js/defaults.js

@@ -157,10 +157,10 @@ const defaults = {
     // Localisation
     i18n: {
         restart: 'Restart',
-        rewind: 'Rewind {seektime} secs',
+        rewind: 'Rewind {seektime}s',
         play: 'Play',
         pause: 'Pause',
-        fastForward: 'Forward {seektime} secs',
+        fastForward: 'Forward {seektime}s',
         seek: 'Seek',
         played: 'Played',
         buffered: 'Buffered',
@@ -326,13 +326,14 @@ const defaults = {
 
     // Class hooks added to the player in different states
     classNames: {
+        type: 'plyr--{0}',
+        provider: 'plyr--{0}',
         video: 'plyr__video-wrapper',
         embed: 'plyr__video-embed',
+        embedContainer: 'plyr__video-embed__container',
         poster: 'plyr__poster',
         ads: 'plyr__ads',
         control: 'plyr__control',
-        type: 'plyr--{0}',
-        provider: 'plyr--{0}',
         playing: 'plyr--playing',
         paused: 'plyr--paused',
         stopped: 'plyr--stopped',

src/js/media.js

@@ -39,7 +39,7 @@ const media = {
             utils.wrap(this.media, this.elements.wrapper);
 
             // Faux poster container
-            this.elements.poster = utils.createElement('span', {
+            this.elements.poster = utils.createElement('div', {
                 class: this.config.classNames.poster,
             });
 

src/js/plugins/vimeo.js

@@ -53,6 +53,7 @@ const vimeo = {
         const options = {
             loop: player.config.loop.active,
             autoplay: player.autoplay,
+            // muted: player.muted,
             byline: false,
             portrait: false,
             title: false,
@@ -82,7 +83,7 @@ const vimeo = {
         iframe.setAttribute('allow', 'autoplay');
 
         // Inject the package
-        const wrapper = utils.createElement('div');
+        const wrapper = utils.createElement('div', { class: player.config.classNames.embedContainer });
         wrapper.appendChild(iframe);
         player.media = utils.replaceElement(wrapper, player.media);
 

src/js/utils.js

@@ -723,7 +723,7 @@ const utils = {
         }
 
         // Vimeo
-        if (/^https?:\/\/player.vimeo.com\/video\/\d{8,}(?=\b|\/)/.test(url)) {
+        if (/^https?:\/\/player.vimeo.com\/video\/\d{0,9}(?=\b|\/)/.test(url)) {
             return providers.vimeo;
         }
 

src/sass/components/embed.scss

@@ -32,8 +32,8 @@ $embed-padding: ((100 / 16) * 9);
         pointer-events: none;
     }
 
-    // Vimeo hack
+    // Only used for Vimeo
-    > div {
+    > .plyr__video-embed__container {
         padding-bottom: to-percentage($height);
         position: relative;
         transform: translateY(-$offset);

src/sass/components/tooltips.scss

@@ -19,6 +19,7 @@
     transform: translate(-50%, 10px) scale(0.8);
     transform-origin: 50% 100%;
     transition: transform 0.2s 0.1s ease, opacity 0.2s 0.1s ease;
+    white-space: nowrap;
     z-index: 2;
 
     // The background triangle

yarn.lock

@@ -4857,8 +4857,8 @@ nanomatch@^1.2.9:
     to-regex "^3.0.1"
 
 natives@^1.1.0:
-  version "1.1.1"
+  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/natives/-/natives-1.1.1.tgz#011acce1f7cbd87f7ba6b3093d6cd9392be1c574"
+  resolved "https://registry.yarnpkg.com/natives/-/natives-1.1.3.tgz#44a579be64507ea2d6ed1ca04a9415915cf75558"
 
 natural-compare@^1.4.0:
   version "1.4.0"