Merge pull request #1684 from sampotts/develop

v3.5.8

changelog.md

@@ -1,3 +1,13 @@
+### v3.5.8
+
+- Added `flex-direction` property to fix some issues introduced in v3.5.7 when using custom CSS
+- Cleaned up the organisation of some of the SCSS files (should not effect CSS output)
+- Added `referrerPolicy` option for Vimeo to prevent an issue present in the demo site
+- Remove all Vimeo controls for Pro & Premium accounts
+- Improve thumbnail size calculations when size is set per css (thanks @ydylla)
+- Add previewThumbnails source setter (thanks @ydylla)
+- More speed setting logic improvements
+
 ### v3.5.7
 
 - Typescript typings (thanks @ondratra)
@@ -192,7 +202,9 @@ Thanks @friday for the following:
 - Suggestion: Remove array newline rule
 - Contributions improvements
 
-- fix: html5.cancelRequest not remove source tag correctly (thanks @a60814billy)
+and other folks for:
+
+- Fix: html5.cancelRequest not remove source tag correctly (thanks @a60814billy)
 - remove event listeners in destroy() (thanks @cky917)
 - Fix markdown in README (thanks @azu)
 - Some parts of the accessibility improvements outlined in #905 (more on the way...)

demo/index.html

@@ -233,7 +233,8 @@ <h1>Pl<span>a</span>y<span>e</span>r</h1>
  </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;
+ <a href="https://vimeo.com/40648169" target="_blank">Toob “Wavaphon” Music Video</a>
+ on&nbsp;
  <span class="color--vimeo">
  <svg class="icon" role="presentation">
  <title>Vimeo</title>

demo/package.json

@@ -5,10 +5,10 @@
  "homepage": "https://plyr.io",
  "author": "Sam Potts <[email protected]>",
  "dependencies": {
- "core-js": "^3.1.4",
+ "core-js": "^3.6.4",
  "custom-event-polyfill": "^1.0.7",
  "raven-js": "^3.27.2",
  "shr-buttons": "2.0.3",
- "url-polyfill": "^1.1.5"
+ "url-polyfill": "^1.1.8"
  }
 }

demo/src/js/demo.js

@@ -64,6 +64,10 @@ import toggleClass from './toggle-class';
  'https://cdn.plyr.io/static/demo/thumbs/240p.vtt',
  ],
  },
+ vimeo: {
+ // Prevent Vimeo blocking plyr.io demo site
+ referrerPolicy: 'no-referrer',
+ }
  });
 
  // Expose for tinkering in the console

demo/src/js/sources.js

@@ -68,7 +68,7 @@ const sources = {
  type: 'video',
  sources: [
  {
- src: 'https://vimeo.com/383514704',
+ src: 'https://vimeo.com/40648169',
  provider: 'vimeo',
  },
  ],

package.json

@@ -1,6 +1,6 @@
 {
  "name": "plyr",
- "version": "3.5.7",
+ "version": "3.5.8",
  "description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
  "homepage": "https://plyr.io",
  "author": "Sam Potts <[email protected]>",

readme.md

@@ -445,6 +445,9 @@ player.source = {
  },
  ],
  poster: '/path/to/poster.jpg',
+ previewThumbnails: {
+ src: '/path/to/thumbnails.vtt'
+ },
  tracks: [
  {
  kind: 'captions',
@@ -514,13 +517,14 @@ player.source = {
 
 _Note:_ `src` property for YouTube and Vimeo can either be the video ID or the whole URL.
 
-| Property | Type | Description |
-| -------------- | ------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `type` | String | Either `video` or `audio`. _Note:_ YouTube and Vimeo are currently not supported as audio sources. |
-| `title` | String | _Optional._ Title of the new media. Used for the `aria-label` attribute on the play button, and outer container. YouTube and Vimeo are populated automatically. |
-| `sources` | Array | This is an array of sources. For HTML5 media, the properties of this object are mapped directly to HTML attributes so more can be added to the object if required. |
-| `poster`¹ | String | The URL for the poster image (HTML5 video only). |
-| `tracks`&sup1; | String | An array of track objects. Each element in the array is mapped directly to a track element and any keys mapped directly to HTML attributes so as in the example above, it will render as `<track kind="captions" label="English" srclang="en" src="https://cdn.selz.com/plyr/1.0/example_captions_en.vtt" default>` and similar for the French version. Booleans are converted to HTML5 value-less attributes. |
+| Property | Type | Description |
+| ------------------------- | ------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `type` | String | Either `video` or `audio`. _Note:_ YouTube and Vimeo are currently not supported as audio sources. |
+| `title` | String | _Optional._ Title of the new media. Used for the `aria-label` attribute on the play button, and outer container. YouTube and Vimeo are populated automatically. |
+| `sources` | Array | This is an array of sources. For HTML5 media, the properties of this object are mapped directly to HTML attributes so more can be added to the object if required. |
+| `poster`&sup1; | String | The URL for the poster image (HTML5 video only). |
+| `tracks`&sup1; | String | An array of track objects. Each element in the array is mapped directly to a track element and any keys mapped directly to HTML attributes so as in the example above, it will render as `<track kind="captions" label="English" srclang="en" src="https://cdn.selz.com/plyr/1.0/example_captions_en.vtt" default>` and similar for the French version. Booleans are converted to HTML5 value-less attributes. |
+| `previewThumbnails`&sup1; | Object | The same object like in the `previewThumbnails` constructor option. This means you can either change the thumbnails vtt via the `src` key or disable the thumbnails plugin for the next video by passing `{ enabled: false }`. |
 
 1. HTML5 only
 

src/js/config/defaults.js

@@ -419,6 +419,11 @@ const defaults = {
  title: false,
  speed: true,
  transparent: false,
+ // These settings require a pro or premium account to work
+ sidedock: false,
+ controls: false,
+ // Custom settings from Plyr
+ referrerPolicy: null, // https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/referrerPolicy
  },
 
  // YouTube plugin

src/js/controls.js

@@ -9,7 +9,7 @@ import captions from './captions';
 import html5 from './html5';
 import support from './support';
 import { repaint, transitionEndEvent } from './utils/animation';
-import { dedupe, fillRange } from './utils/arrays';
+import { dedupe } from './utils/arrays';
 import browser from './utils/browser';
 import {
  createElement,
@@ -1053,13 +1053,8 @@ const controls = {
  const type = 'speed';
  const list = this.elements.settings.panels.speed.querySelector('[role="menu"]');
 
- // Determine options to display
- // Vimeo and YouTube limit to 0.5x-2x
- if (this.isVimeo || this.isYouTube) {
- this.options.speed = fillRange(0.5, 2, 0.25).filter(s => this.config.speed.options.includes(s));
- } else {
- this.options.speed = this.config.speed.options;
- }
+ // Filter out invalid speeds
+ this.options.speed = this.options.speed.filter(o => o >= this.minimumSpeed && o <= this.maximumSpeed);
 
  // Toggle the pane and tab
  const toggle = !is.empty(this.options.speed) && this.options.speed.length > 1;

src/js/html5.js

@@ -42,13 +42,16 @@ const html5 = {
  .filter(Boolean);
  },
 
- extend() {
+ setup() {
  if (!this.isHTML5) {
  return;
  }
 
  const player = this;
 
+ // Set speed options from config
+ player.options.speed = player.config.speed.options;
+
  // Set aspect ratio if fixed
  if (!is.empty(this.config.ratio)) {
  setAspectRatio.call(player);
@@ -93,7 +96,6 @@ const html5 = {
  if (preload !== 'none' || readyState) {
  // Restore time
  player.once('loadedmetadata', () => {
-
  player.speed = playbackRate;
  player.currentTime = currentTime;
 

src/js/media.js

@@ -49,7 +49,7 @@ const media = {
  }
 
  if (this.isHTML5) {
- html5.extend.call(this);
+ html5.setup.call(this);
  } else if (this.isYouTube) {
  youtube.setup.call(this);
  } else if (this.isVimeo) {

src/js/plugins/preview-thumbnails.js

@@ -104,7 +104,7 @@ class PreviewThumbnails {
  }
 
  load() {
- // Togglethe regular seek tooltip
+ // Toggle the regular seek tooltip
  if (this.player.elements.display.seekTooltip) {
  this.player.elements.display.seekTooltip.hidden = this.enabled;
  }
@@ -328,6 +328,15 @@ class PreviewThumbnails {
  this.player.elements.wrapper.appendChild(this.elements.scrubbing.container);
  }
 
+ destroy() {
+ if (this.elements.thumb.container) {
+ this.elements.thumb.container.remove();
+ }
+ if (this.elements.scrubbing.container) {
+ this.elements.scrubbing.container.remove();
+ }
+ }
+
  showImageAtCurrentTime() {
  if (this.mouseDown) {
  this.setScrubbingContainerSize();
@@ -561,6 +570,11 @@ class PreviewThumbnails {
  return height;
  }
 
+ // If css is used this needs to return the css height for sprites to work (see setImageSizeAndOffset)
+ if (this.sizeSpecifiedInCSS) {
+ return this.elements.thumb.imageContainer.clientHeight;
+ }
+
  return Math.floor(this.player.media.clientWidth / this.thumbAspectRatio / 4);
  }
 
@@ -601,7 +615,7 @@ class PreviewThumbnails {
  }
 
  determineContainerAutoSizing() {
- if (this.elements.thumb.imageContainer.clientHeight > 20) {
+ if (this.elements.thumb.imageContainer.clientHeight > 20 || this.elements.thumb.imageContainer.clientWidth > 20) {
  // This will prevent auto sizing in this.setThumbContainerSizeAndPos()
  this.sizeSpecifiedInCSS = true;
  }
@@ -613,6 +627,12 @@ class PreviewThumbnails {
  const thumbWidth = Math.floor(this.thumbContainerHeight * this.thumbAspectRatio);
  this.elements.thumb.imageContainer.style.height = `${this.thumbContainerHeight}px`;
  this.elements.thumb.imageContainer.style.width = `${thumbWidth}px`;
+ } else if (this.elements.thumb.imageContainer.clientHeight > 20 && this.elements.thumb.imageContainer.clientWidth < 20) {
+ const thumbWidth = Math.floor(this.elements.thumb.imageContainer.clientHeight * this.thumbAspectRatio);
+ this.elements.thumb.imageContainer.style.width = `${thumbWidth}px`;
+ } else if (this.elements.thumb.imageContainer.clientHeight < 20 && this.elements.thumb.imageContainer.clientWidth > 20) {
+ const thumbHeight = Math.floor(this.elements.thumb.imageContainer.clientWidth / this.thumbAspectRatio);
+ this.elements.thumb.imageContainer.style.height = `${thumbHeight}px`;
  }
 
  this.setThumbContainerPos();

src/js/plugins/vimeo.js

@@ -42,23 +42,28 @@ function assurePlaybackState(play) {
 
 const vimeo = {
  setup() {
+ const player = this;
+
  // Add embed class for responsive
- toggleClass(this.elements.wrapper, this.config.classNames.embed, true);
+ toggleClass(player.elements.wrapper, player.config.classNames.embed, true);
+
+ // Set speed options from config
+ player.options.speed = player.config.speed.options;
 
  // Set intial ratio
- setAspectRatio.call(this);
+ setAspectRatio.call(player);
 
  // Load the SDK if not already
  if (!is.object(window.Vimeo)) {
- loadScript(this.config.urls.vimeo.sdk)
+ loadScript(player.config.urls.vimeo.sdk)
  .then(() => {
- vimeo.ready.call(this);
+ vimeo.ready.call(player);
  })
  .catch(error => {
- this.debug.warn('Vimeo SDK (player.js) failed to load', error);
+ player.debug.warn('Vimeo SDK (player.js) failed to load', error);
  });
  } else {
- vimeo.ready.call(this);
+ vimeo.ready.call(player);
  }
  },
 
@@ -99,6 +104,11 @@ const vimeo = {
  iframe.setAttribute('allowtransparency', '');
  iframe.setAttribute('allow', 'autoplay');
 
+ // Set the referrer policy if required
+ if (!is.empty(config.referrerPolicy)) {
+ iframe.setAttribute('referrerPolicy', config.referrerPolicy);
+ }
+
  // Get poster, if already set
  const { poster } = player;
  // Inject the package
@@ -191,12 +201,10 @@ const vimeo = {
  return speed;
  },
  set(input) {
- player.embed
- .setPlaybackRate(input)
- .then(() => {
- speed = input;
- triggerEvent.call(player, player.media, 'ratechange');
- });
+ player.embed.setPlaybackRate(input).then(() => {
+ speed = input;
+ triggerEvent.call(player, player.media, 'ratechange');
+ });
  },
  });
 

src/js/plugins/youtube.js

@@ -297,7 +297,9 @@ const youtube = {
  });
 
  // Get available speeds
- player.options.speed = instance.getAvailablePlaybackRates();
+ const speeds = instance.getAvailablePlaybackRates();
+ // Filter based on config
+ player.options.speed = speeds.filter(s => player.config.speed.options.includes(s));
 
  // Set the tabindex to avoid focus entering iframe
  if (player.supported.ui) {

src/js/source.js

@@ -5,6 +5,7 @@
 import { providers } from './config/types';
 import html5 from './html5';
 import media from './media';
+import PreviewThumbnails from './plugins/preview-thumbnails';
 import support from './support';
 import ui from './ui';
 import { createElement, insertElement, removeElement } from './utils/elements';
@@ -130,9 +131,20 @@ const source = {
  this.media.load();
  }
 
- // Reload thumbnails
- if (this.previewThumbnails) {
- this.previewThumbnails.load();
+ // Update previewThumbnails config & reload plugin
+ if (!is.empty(input.previewThumbnails)) {
+ Object.assign(this.config.previewThumbnails, input.previewThumbnails);
+
+ // Cleanup previewThumbnails plugin if it was loaded
+ if (this.previewThumbnails && this.previewThumbnails.loaded) {
+ this.previewThumbnails.destroy();
+ this.previewThumbnails = null;
+ }
+
+ // Create new instance if it is still enabled
+ if (this.config.previewThumbnails.enabled) {
+ this.previewThumbnails = new PreviewThumbnails(this);
+ }
  }
 
  // Update the fullscreen support

src/js/utils/arrays.js

@@ -21,11 +21,3 @@ export function closest(array, value) {
 
  return array.reduce((prev, curr) => (Math.abs(curr - value) < Math.abs(prev - value) ? curr : prev));
 }
-
-export function fillRange(start, end, step = 1) {
- const len = Math.floor((end - start) / step) + 1;
-
- return Array(len)
- .fill()
- .map((_, idx) => start + idx * step);
-}

src/sass/base.scss

@@ -8,6 +8,7 @@
  align-items: center;
  direction: ltr;
  display: flex;
+ flex-direction: column;
  font-family: $plyr-font-family;
  font-variant-numeric: tabular-nums; // Force monosace-esque number widths
  font-weight: $plyr-font-weight-regular;