Compare commits

...

7 Commits

Author SHA1 Message Date
Sam Potts 7be9d5d4d3 v3.0.10 2018-03-30 00:16:42 +11:00
Sam Potts d7141d5ed7 Controls docs, package upgrades 2018-03-30 00:11:48 +11:00
Sam Potts 0d0ece94d3 Fix regression 2018-03-29 20:20:37 +11:00
Sam Potts 1c06f6d06d Vimeo hotfix 2018-03-29 19:35:02 +11:00
Sam Potts dda8e30b92 Merge branch 'master' of github.com:sampotts/plyr 2018-03-28 22:45:18 +11:00
Sam Potts c4e2e24643 Bug fixes 2018-03-28 22:45:11 +11:00
Sam Potts e020a105a3 Update readme.md 2018-03-28 00:55:55 +11:00
25 changed files with 773 additions and 1051 deletions
+19
View File
@@ -1,3 +1,22 @@
## v3.0.10
* Docs fix
* Package upgrades
## v3.0.9
* Demo fix
* Fix Vimeo regression
## v3.0.8
* Vimeo hotfix for private videos
## v3.0.7
* Fix for keyboard shortcut error with fast forward
* Fix for Vimeo trying to set playback rate when not allowed
## v3.0.6
* Improved the logic for the custom handlers preventing default handlers
+123 -85
View File
@@ -1,27 +1,72 @@
# Controls
This is the markup that is rendered for the Plyr controls. You can use the default controls or provide a customized version of markup based on your needs.
This is the markup that is rendered for the Plyr controls. You can use the default controls or provide a customized version of markup based on your needs. You can pass the following to the `controls` option:
## Internationalization using default controls
* `Array` of options (this builds the default controls based on your choices)
* `String` containing the desired HTML
* `Function` that will be executed and should return one of the above
## Using default controls
If you want to use the standard controls as they are, you don't need to pass any options. If you want to turn on off controls, here's the full list:
```javascript
controls: [
'play-large', // The large play button in the center
'restart', // Restart playback
'rewind', // Rewind by the seek time (default 10 seconds)
'play', // Play/pause playback
'fast-forward', // Fast forward by the seek time (default 10 seconds)
'progress', // The progress bar and scrubber for playback and buffering
'current-time', // The current time of playback
'duration', // The full duration of the media
'mute', // Toggle mute
'volume', // Volume control
'captions', // Toggle captions
'settings', // Settings menu
'pip', // Picture-in-picture (currently Safari only)
'airplay', // Airplay (currently Safari only)
'fullscreen', // Toggle fullscreen
];
```
### Internationalization using default controls
You can provide an `i18n` object as one of your options when initialising the plugin which we be used when rendering the controls.
### Example
#### Example
```javascript
i18n: {
restart: "Restart",
rewind: "Rewind {seektime} secs",
play: "Play",
pause: "Pause",
forward: "Forward {seektime} secs",
buffered: "buffered",
currentTime: "Current time",
duration: "Duration",
volume: "Volume",
toggleMute: "Toggle Mute",
toggleCaptions: "Toggle Captions",
toggleFullscreen: "Toggle Fullscreen"
restart: 'Restart',
rewind: 'Rewind {seektime} secs',
play: 'Play',
pause: 'Pause',
fastForward: 'Forward {seektime} secs',
seek: 'Seek',
played: 'Played',
buffered: 'Buffered',
currentTime: 'Current time',
duration: 'Duration',
volume: 'Volume',
mute: 'Mute',
unmute: 'Unmute',
enableCaptions: 'Enable captions',
disableCaptions: 'Disable captions',
enterFullscreen: 'Enter fullscreen',
exitFullscreen: 'Exit fullscreen',
frameTitle: 'Player for {title}',
captions: 'Captions',
settings: 'Settings',
speed: 'Speed',
quality: 'Quality',
loop: 'Loop',
start: 'Start',
end: 'End',
all: 'All',
reset: 'Reset',
disabled: 'Disabled',
advertisement: 'Ad',
}
```
@@ -29,85 +74,78 @@ Note: `{seektime}` will be replaced with your configured seek time or the defaul
## Using custom HTML
You can specify the HTML for the controls using the `html` option.
You can specify the HTML as a `String` or your `Function` return for the controls using the `controls` option.
The classes and data attributes used in your template should match the `selectors` option.
The classes and data attributes used in your template should match the `selectors` option if you change any.
You need to add several placeholders to your html template that are replaced when rendering:
You need to add several placeholders to your HTML template that are replaced when rendering:
- `{id}` - the dynamically generated ID for the player (for form controls)
- `{seektime}` - the seek time specified in options for fast forward and rewind
- `{title}` - the title of your media, if specified
* `{id}` - the dynamically generated ID for the player (for form controls)
* `{seektime}` - the seek time specified in options for fast forward and rewind
* `{title}` - the title of your media, if specified
You can include only the controls you need when specifying custom html.
### Limitations
* Currently the settings menus are not supported with custom controls HTML
* AirPlay and PiP buttons can be added but you will have to manage feature detection
### Example
This is an example `html` option with all controls.
Here's an example of custom controls markup (this is just all default controls shown).
```javascript
var controls = ["<div class='plyr__controls'>",
"<button type='button' data-plyr='restart'>",
"<svg><use xlink:href='#plyr-restart'></use></svg>",
"<span class='plyr__sr-only'>Restart</span>",
"</button>",
"<button type='button' data-plyr='rewind'>",
"<svg><use xlink:href='#plyr-rewind'></use></svg>",
"<span class='plyr__sr-only'>Rewind {seektime} secs</span>",
"</button>",
"<button type='button' data-plyr='play'>",
"<svg><use xlink:href='#plyr-play'></use></svg>",
"<span class='plyr__sr-only'>Play</span>",
"</button>",
"<button type='button' data-plyr='pause'>",
"<svg><use xlink:href='#plyr-pause'></use></svg>",
"<span class='plyr__sr-only'>Pause</span>",
"</button>",
"<button type='button' data-plyr='fast-forward'>",
"<svg><use xlink:href='#plyr-fast-forward'></use></svg>",
"<span class='plyr__sr-only'>Forward {seektime} secs</span>",
"</button>",
"<span class='plyr__progress'>",
"<label for='seek{id}' class='plyr__sr-only'>Seek</label>",
"<input id='seek{id}' class='plyr__progress--seek' type='range' min='0' max='100' step='0.1' value='0' data-plyr='seek'>",
"<progress class='plyr__progress--played' max='100' value='0' role='presentation'></progress>",
"<progress class='plyr__progress--buffer' max='100' value='0'>",
"<span>0</span>% buffered",
"</progress>",
"<span class='plyr__tooltip'>00:00</span>",
"</span>",
"<span class='plyr__time'>",
"<span class='plyr__sr-only'>Current time</span>",
"<span class='plyr__time--current'>00:00</span>",
"</span>",
"<span class='plyr__time'>",
"<span class='plyr__sr-only'>Duration</span>",
"<span class='plyr__time--duration'>00:00</span>",
"</span>",
"<button type='button' data-plyr='mute'>",
"<svg class='icon--muted'><use xlink:href='#plyr-muted'></use></svg>",
"<svg><use xlink:href='#plyr-volume'></use></svg>",
"<span class='plyr__sr-only'>Toggle Mute</span>",
"</button>",
"<span class='plyr__volume'>",
"<label for='volume{id}' class='plyr__sr-only'>Volume</label>",
"<input id='volume{id}' class='plyr__volume--input' type='range' min='0' max='10' value='5' data-plyr='volume'>",
"<progress class='plyr__volume--display' max='10' value='0' role='presentation'></progress>",
"</span>",
"<button type='button' data-plyr='captions'>",
"<svg class='icon--captions-on'><use xlink:href='#plyr-captions-on'></use></svg>",
"<svg><use xlink:href='#plyr-captions-off'></use></svg>",
"<span class='plyr__sr-only'>Toggle Captions</span>",
"</button>",
"<button type='button' data-plyr='fullscreen'>",
"<svg class='icon--exit-fullscreen'><use xlink:href='#plyr-exit-fullscreen'></use></svg>",
"<svg><use xlink:href='#plyr-enter-fullscreen'></use></svg>",
"<span class='plyr__sr-only'>Toggle Fullscreen</span>",
"</button>",
"</div>"].join("");
const controls = `
<div class="plyr__controls">
<button type="button" class="plyr__control" data-plyr="restart">
<svg role="presentation"><use xlink:href="#plyr-restart"></use></svg>
<span class="plyr__tooltip" role="tooltip">Restart</span>
</button>
<button type="button" class="plyr__control" data-plyr="rewind">
<svg role="presentation"><use xlink:href="#plyr-rewind"></use></svg>
<span class="plyr__tooltip" role="tooltip">Rewind {seektime} secs</span>
</button>
<button type="button" class="plyr__control" aria-pressed="false" aria-label="Play, {title}" data-plyr="play">
<svg class="icon--pressed" role="presentation"><use xlink:href="#plyr-pause"></use></svg>
<svg class="icon--not-pressed" role="presentation"><use xlink:href="#plyr-play"></use></svg>
<span class="label--pressed plyr__tooltip" role="tooltip">Pause</span>
<span class="label--not-pressed plyr__tooltip" role="tooltip">Play</span>
</button>
<button type="button" class="plyr__control" data-plyr="fast-forward">
<svg role="presentation"><use xlink:href="#plyr-fast-forward"></use></svg>
<span class="plyr__tooltip" role="tooltip">Forward {seektime} secs</span>
</button>
<div class="plyr__progress">
<label for="plyr-seek-{id}" class="plyr__sr-only">Seek</label>
<input data-plyr="seek" type="range" min="0" max="100" step="0.01" value="0" id="plyr-seek-{id}">
<progress class="plyr__progress--buffer" min="0" max="100" value="0">% buffered</progress>
<span role="tooltip" class="plyr__tooltip">00:00</span>
</div>
<div class="plyr__time">00:00</div>
<button type="button" class="plyr__control" aria-pressed="false" aria-label="Mute" data-plyr="mute">
<svg class="icon--pressed" role="presentation"><use xlink:href="#plyr-muted"></use></svg>
<svg class="icon--not-pressed" role="presentation"><use xlink:href="#plyr-volume"></use></svg>
<span class="label--pressed plyr__tooltip" role="tooltip">Unmute</span>
<span class="label--not-pressed plyr__tooltip" role="tooltip">Mute</span>
</button>
<div class="plyr__volume">
<label for="plyr-volume-{id}" class="plyr__sr-only">Volume</label>
<input data-plyr="volume" type="range" min="0" max="1" step="0.05" value="1" autocomplete="off" id="plyr-volume-{id}">
</div>
<button type="button" class="plyr__control" aria-pressed="true" aria-label="Enable captions" data-plyr="captions">
<svg class="icon--pressed" role="presentation"><use xlink:href="#plyr-captions-on"></use></svg>
<svg class="icon--not-pressed" role="presentation"><use xlink:href="#plyr-captions-off"></use></svg>
<span class="label--pressed plyr__tooltip" role="tooltip">Disable captions</span>
<span class="label--not-pressed plyr__tooltip" role="tooltip">Enable captions</span>
</button>
<button type="button" class="plyr__control" aria-pressed="false" aria-label="Enter fullscreen" data-plyr="fullscreen">
<svg class="icon--pressed" role="presentation"><use xlink:href="#plyr-exit-fullscreen"></use></svg>
<svg class="icon--not-pressed" role="presentation"><use xlink:href="#plyr-enter-fullscreen"></use></svg>
<span class="label--pressed plyr__tooltip" role="tooltip">Exit fullscreen</span>
<span class="label--not-pressed plyr__tooltip" role="tooltip">Enter fullscreen</span>
</button>
</div>
`;
// Setup the player
plyr.setup('.js-player', {
html: controls
});
const player = new Plyr('#player', { controls });
```
+315 -240
View File
File diff suppressed because it is too large Load Diff
+1 -1
View File
File diff suppressed because one or more lines are too long
+1 -1
View File
File diff suppressed because one or more lines are too long
+1 -1
View File
File diff suppressed because one or more lines are too long
+1 -3
View File
@@ -65,6 +65,7 @@ import Raven from 'raven-js';
'fast-forward',
'progress',
'current-time',
'duration',
'mute',
'volume',
'captions',
@@ -83,9 +84,6 @@ import Raven from 'raven-js';
enabled: true,
publisherId: '918848828995742',
},
/* listeners: {
seek: () => false,
}, */
});
// Expose for tinkering in the console
+47 -212
View File
@@ -77,7 +77,7 @@ var defaults = {
// Sprite (for icons)
loadSprite: true,
iconPrefix: 'plyr',
iconUrl: 'https://cdn.plyr.io/3.0.6/plyr.svg',
iconUrl: 'https://cdn.plyr.io/3.0.9/plyr.svg',
// Blank video (used to prevent errors on source change)
blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
@@ -336,10 +336,6 @@ var defaults = {
var commonjsGlobal = typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
function createCommonjsModule(fn, module) {
return module = { exports: {} }, fn(module, module.exports), module.exports;
}
@@ -456,6 +452,7 @@ function loadFile(path, callbackFn, args, numTries) {
async = args.async,
maxTries = (args.numRetries || 0) + 1,
beforeCallbackFn = args.before || devnull,
pathStripped = path.replace(/^(css|img)!/, ''),
isCss,
e;
@@ -467,7 +464,11 @@ function loadFile(path, callbackFn, args, numTries) {
// css
e = doc.createElement('link');
e.rel = 'stylesheet';
e.href = path.replace(/^css!/, ''); // remove "css!" prefix
e.href = pathStripped; //.replace(/^css!/, ''); // remove "css!" prefix
} else if (/(^img!|\.(png|gif|jpg|svg)$)/.test(path)) {
// image
e = doc.createElement('img');
e.src = pathStripped;
} else {
// javascript
e = doc.createElement('script');
@@ -633,123 +634,6 @@ return loadjs;
}));
});
var asyncGenerator = function () {
function AwaitValue(value) {
this.value = value;
}
function AsyncGenerator(gen) {
var front, back;
function send(key, arg) {
return new Promise(function (resolve, reject) {
var request = {
key: key,
arg: arg,
resolve: resolve,
reject: reject,
next: null
};
if (back) {
back = back.next = request;
} else {
front = back = request;
resume(key, arg);
}
});
}
function resume(key, arg) {
try {
var result = gen[key](arg);
var value = result.value;
if (value instanceof AwaitValue) {
Promise.resolve(value.value).then(function (arg) {
resume("next", arg);
}, function (arg) {
resume("throw", arg);
});
} else {
settle(result.done ? "return" : "normal", result.value);
}
} catch (err) {
settle("throw", err);
}
}
function settle(type, value) {
switch (type) {
case "return":
front.resolve({
value: value,
done: true
});
break;
case "throw":
front.reject(value);
break;
default:
front.resolve({
value: value,
done: false
});
break;
}
front = front.next;
if (front) {
resume(front.key, front.arg);
} else {
back = null;
}
}
this._invoke = send;
if (typeof gen.return !== "function") {
this.return = undefined;
}
}
if (typeof Symbol === "function" && Symbol.asyncIterator) {
AsyncGenerator.prototype[Symbol.asyncIterator] = function () {
return this;
};
}
AsyncGenerator.prototype.next = function (arg) {
return this._invoke("next", arg);
};
AsyncGenerator.prototype.throw = function (arg) {
return this._invoke("throw", arg);
};
AsyncGenerator.prototype.return = function (arg) {
return this._invoke("return", arg);
};
return {
wrap: function (fn) {
return function () {
return new AsyncGenerator(fn.apply(this, arguments));
};
},
await: function (value) {
return new AwaitValue(value);
}
};
}();
var classCallCheck = function (instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
@@ -774,10 +658,6 @@ var createClass = function () {
};
}();
var defineProperty = function (obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
@@ -792,26 +672,6 @@ var defineProperty = function (obj, key, value) {
return obj;
};
var slicedToArray = function () {
function sliceIterator(arr, i) {
@@ -851,18 +711,6 @@ var slicedToArray = function () {
};
}();
var toConsumableArray = function (arr) {
if (Array.isArray(arr)) {
for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];
@@ -873,8 +721,6 @@ var toConsumableArray = function (arr) {
}
};
// ==========================================================================
// Plyr utils
// ==========================================================================
var utils = {
@@ -1818,8 +1664,6 @@ var utils = {
}
};
// ==========================================================================
// Plyr support checks
// ==========================================================================
// Check for feature support
@@ -2015,9 +1859,6 @@ var Console = function () {
return Console;
}();
// ==========================================================================
// Fullscreen wrapper
// https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API#prefixing
// ==========================================================================
var browser = utils.getBrowser();
@@ -2253,9 +2094,6 @@ var Fullscreen = function () {
return Fullscreen;
}();
// ==========================================================================
// Plyr Captions
// TODO: Create as class
// ==========================================================================
var captions = {
@@ -2487,8 +2325,6 @@ var captions = {
}
};
// ==========================================================================
// Plyr internationalization
// ==========================================================================
var i18n = {
@@ -2519,8 +2355,6 @@ var i18n = {
}
};
// ==========================================================================
// Plyr UI
// ==========================================================================
var ui = {
@@ -2861,18 +2695,16 @@ var ui = {
}
};
// ==========================================================================
// Plyr controls
// ==========================================================================
// Sniff out the browser
var browser$2 = utils.getBrowser();
var browser$1 = utils.getBrowser();
var controls = {
// Webkit polyfill for lower fill range
updateRangeFill: function updateRangeFill(target) {
// WebKit only
if (!browser$2.isWebkit) {
if (!browser$1.isWebkit) {
return;
}
@@ -2893,7 +2725,7 @@ var controls = {
getIconUrl: function getIconUrl() {
return {
url: this.config.iconUrl,
absolute: this.config.iconUrl.indexOf('http') === 0 || browser$2.isIE && !window.svg4everybody
absolute: this.config.iconUrl.indexOf('http') === 0 || browser$1.isIE && !window.svg4everybody
};
},
@@ -3533,9 +3365,14 @@ var controls = {
// Set a list of available captions languages
setSpeedMenu: function setSpeedMenu() {
setSpeedMenu: function setSpeedMenu(options) {
var _this4 = this;
// Do nothing if not selected
if (!this.config.controls.includes('settings') || !this.config.settings.includes('speed')) {
return;
}
// Menu required
if (!utils.is.element(this.elements.settings.panes.speed)) {
return;
@@ -3543,9 +3380,11 @@ var controls = {
var type = 'speed';
// Set the default speeds
if (!utils.is.array(this.options.speed) || !this.options.speed.length) {
// Set the speed options
if (!utils.is.array(options)) {
this.options.speed = [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];
} else {
this.options.speed = options;
}
// Set options if passed and filter based on config
@@ -3557,6 +3396,9 @@ var controls = {
var toggle = !utils.is.empty(this.options.speed);
controls.toggleTab.call(this, type, toggle);
// Check if we need to toggle the parent
controls.checkMenu.call(this);
// If we're hiding, nothing more to do
if (!toggle) {
return;
@@ -3581,6 +3423,15 @@ var controls = {
},
// Check if we need to hide/show the settings menu
checkMenu: function checkMenu() {
var speedHidden = this.elements.settings.tabs.speed.getAttribute('hidden') !== null;
var languageHidden = this.elements.settings.tabs.captions.getAttribute('hidden') !== null;
utils.toggleHidden(this.elements.settings.menu, speedHidden && languageHidden);
},
// Show/hide menu
toggleMenu: function toggleMenu(event) {
var form = this.elements.settings.form;
@@ -3971,9 +3822,7 @@ var controls = {
this.elements.controls = container;
if (this.config.controls.includes('settings') && this.config.settings.includes('speed')) {
controls.setSpeedMenu.call(this);
}
controls.setSpeedMenu.call(this);
return container;
},
@@ -4067,12 +3916,10 @@ var controls = {
}
};
// ==========================================================================
// Plyr Event Listeners
// ==========================================================================
// Sniff out the browser
var browser$1 = utils.getBrowser();
var browser$2 = utils.getBrowser();
var Listeners = function () {
function Listeners(player) {
@@ -4179,7 +4026,7 @@ var Listeners = function () {
case 39:
// Arrow forward
this.player.fastForward();
this.player.forward();
break;
case 37:
@@ -4470,7 +4317,7 @@ var Listeners = function () {
var _this4 = this;
// IE doesn't support input event, so we fallback to change
var inputEvent = browser$1.isIE ? 'change' : 'input';
var inputEvent = browser$2.isIE ? 'change' : 'input';
// Run default and custom handlers
var proxy = function proxy(event, defaultHandler, customHandlerKey) {
@@ -4586,7 +4433,7 @@ var Listeners = function () {
}, 'volume');
// Polyfill for lower fill in <input type="range"> for webkit
if (browser$1.isWebkit) {
if (browser$2.isWebkit) {
on(utils.getElements.call(this.player, 'input[type="range"]'), 'input', function (event) {
controls.updateRangeFill.call(_this4.player, event.target);
});
@@ -4663,8 +4510,6 @@ var Listeners = function () {
return Listeners;
}();
// ==========================================================================
// Plyr storage
// ==========================================================================
var Storage = function () {
@@ -4747,12 +4592,6 @@ var Storage = function () {
}();
// ==========================================================================
// Advertisement plugin using Google IMA HTML5 SDK
// Create an account with our ad partner, vi here:
// https://www.vi.ai/publisher-video-monetization/
// ==========================================================================
/* global google */
var Ads = function () {
/**
@@ -5414,8 +5253,6 @@ var Ads = function () {
return Ads;
}();
// ==========================================================================
// YouTube plugin
// ==========================================================================
var youtube = {
@@ -5710,7 +5547,8 @@ var youtube = {
});
// Get available speeds
player.options.speed = instance.getAvailablePlaybackRates();
var options = instance.getAvailablePlaybackRates();
controls.setSpeedMenu.call(player, options);
// Set the tabindex to avoid focus entering iframe
if (player.supported.ui) {
@@ -5842,8 +5680,6 @@ var youtube = {
}
};
// ==========================================================================
// Vimeo plugin
// ==========================================================================
var vimeo = {
@@ -5987,6 +5823,11 @@ var vimeo = {
player.embed.setPlaybackRate(input).then(function () {
speed = input;
utils.dispatchEvent.call(player, player.media, 'ratechange');
}).catch(function (error) {
// Hide menu item (and menu if empty)
if (error.name === 'Error') {
controls.setSpeedMenu.call(player, []);
}
});
}
});
@@ -6043,7 +5884,10 @@ var vimeo = {
var currentSrc = void 0;
player.embed.getVideoUrl().then(function (value) {
currentSrc = value;
}).catch(function (error) {
_this2.debug.warn(error);
});
Object.defineProperty(player.media, 'currentSrc', {
get: function get() {
return currentSrc;
@@ -6165,8 +6009,6 @@ var vimeo = {
}
};
// ==========================================================================
// Plyr Media
// ==========================================================================
// Sniff out the browser
@@ -6265,8 +6107,6 @@ var media = {
}
};
// ==========================================================================
// Plyr source update
// ==========================================================================
var source = {
@@ -6407,11 +6247,6 @@ var source = {
}
};
// ==========================================================================
// Plyr
// plyr.js v3.0.6
// https://github.com/sampotts/plyr
// License: The MIT License (MIT)
// ==========================================================================
// Private properties
+1 -1
View File
File diff suppressed because one or more lines are too long
+1 -1
View File
File diff suppressed because one or more lines are too long
+1 -1
View File
File diff suppressed because one or more lines are too long
+114 -431
View File
File diff suppressed because it is too large Load Diff
+1 -1
View File
File diff suppressed because one or more lines are too long
+1 -1
View File
File diff suppressed because one or more lines are too long
+1 -1
View File
File diff suppressed because one or more lines are too long
+9 -9
View File
@@ -1,6 +1,6 @@
{
"name": "plyr",
"version": "3.0.6",
"version": "3.0.10",
"description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
"homepage": "https://plyr.io",
"main": "./dist/plyr.js",
@@ -13,22 +13,22 @@
"babel-plugin-external-helpers": "^6.22.0",
"babel-preset-env": "^1.6.1",
"del": "^3.0.0",
"eslint": "^4.19.0",
"eslint": "^4.19.1",
"eslint-config-airbnb-base": "^12.1.0",
"eslint-config-prettier": "^2.9.0",
"eslint-plugin-import": "^2.9.0",
"git-branch": "^2.0.1",
"gulp": "^3.9.1",
"gulp-autoprefixer": "^5.0.0",
"gulp-better-rollup": "^3.0.0",
"gulp-better-rollup": "^3.1.0",
"gulp-clean-css": "^3.9.3",
"gulp-concat": "^2.6.1",
"gulp-filter": "^5.1.0",
"gulp-open": "^3.0.0",
"gulp-open": "^3.0.1",
"gulp-rename": "^1.2.2",
"gulp-replace": "^0.6.1",
"gulp-s3": "^0.11.0",
"gulp-sass": "^3.1.0",
"gulp-sass": "^3.2.1",
"gulp-size": "^3.0.0",
"gulp-sourcemaps": "^2.6.4",
"gulp-svgmin": "^1.2.4",
@@ -38,8 +38,8 @@
"prettier-eslint": "^8.8.1",
"prettier-stylelint": "^0.4.2",
"rollup-plugin-babel": "^3.0.3",
"rollup-plugin-commonjs": "^8.4.1",
"rollup-plugin-node-resolve": "^3.2.0",
"rollup-plugin-commonjs": "^9.1.0",
"rollup-plugin-node-resolve": "^3.3.0",
"run-sequence": "^2.2.1",
"stylelint": "^9.1.3",
"stylelint-config-prettier": "^3.0.4",
@@ -68,7 +68,7 @@
"dependencies": {
"babel-polyfill": "^6.26.0",
"custom-event-polyfill": "^0.3.0",
"loadjs": "^3.5.2",
"raven-js": "^3.23.3"
"loadjs": "^3.5.4",
"raven-js": "^3.24.0"
}
}
+4 -4
View File
@@ -2,7 +2,7 @@
A simple, lightweight, accessible and customizable HTML5, YouTube and Vimeo media player that supports [_modern_](#browser-support) browsers.
[Checkout the demo](https://plyr.io) - [Donate to support Plyr](#donate) - [Chat on Slack](https://bit.ly/plyr-slack)
[Checkout the demo](https://plyr.io) - [Donate to support Plyr](#donate) - [Chat on Slack](https://bit.ly/plyr-chat)
[![Image of Plyr](https://cdn.plyr.io/static/demo/screenshot.png?v=3)](https://plyr.io)
@@ -128,7 +128,7 @@ See [initialising](#initialising) for more information on advanced setups.
If you want to use our CDN (provided by [Fastly](https://www.fastly.com/)) for the JavaScript, you can use the following:
```html
<script src="https://cdn.plyr.io/3.0.6/plyr.js"></script>
<script src="https://cdn.plyr.io/3.0.10/plyr.js"></script>
```
_Note_: Be sure to read the [polyfills](#polyfills) section below about browser compatibility
@@ -144,13 +144,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.0.6/plyr.css">
<link rel="stylesheet" href="https://cdn.plyr.io/3.0.10/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.0.6/plyr.svg`.
reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/3.0.10/plyr.svg`.
## Ads
+22 -6
View File
@@ -706,7 +706,12 @@ const controls = {
},
// Set a list of available captions languages
setSpeedMenu() {
setSpeedMenu(options) {
// Do nothing if not selected
if (!this.config.controls.includes('settings') || !this.config.settings.includes('speed')) {
return;
}
// Menu required
if (!utils.is.element(this.elements.settings.panes.speed)) {
return;
@@ -714,8 +719,8 @@ const controls = {
const type = 'speed';
// Set the default speeds
if (!utils.is.array(this.options.speed) || !this.options.speed.length) {
// Set the speed options
if (!utils.is.array(options)) {
this.options.speed = [
0.5,
0.75,
@@ -725,6 +730,8 @@ const controls = {
1.75,
2,
];
} else {
this.options.speed = options;
}
// Set options if passed and filter based on config
@@ -734,6 +741,9 @@ const controls = {
const toggle = !utils.is.empty(this.options.speed);
controls.toggleTab.call(this, type, toggle);
// Check if we need to toggle the parent
controls.checkMenu.call(this);
// If we're hiding, nothing more to do
if (!toggle) {
return;
@@ -755,6 +765,14 @@ const controls = {
controls.updateSetting.call(this, type, list);
},
// Check if we need to hide/show the settings menu
checkMenu() {
const speedHidden = this.elements.settings.tabs.speed.getAttribute('hidden') !== null;
const languageHidden = this.elements.settings.tabs.captions.getAttribute('hidden') !== null;
utils.toggleHidden(this.elements.settings.menu, speedHidden && languageHidden);
},
// Show/hide menu
toggleMenu(event) {
const { form } = this.elements.settings;
@@ -1159,9 +1177,7 @@ const controls = {
this.elements.controls = container;
if (this.config.controls.includes('settings') && this.config.settings.includes('speed')) {
controls.setSpeedMenu.call(this);
}
controls.setSpeedMenu.call(this);
return container;
},
+1 -1
View File
@@ -56,7 +56,7 @@ const defaults = {
// Sprite (for icons)
loadSprite: true,
iconPrefix: 'plyr',
iconUrl: 'https://cdn.plyr.io/3.0.6/plyr.svg',
iconUrl: 'https://cdn.plyr.io/3.0.10/plyr.svg',
// Blank video (used to prevent errors on source change)
blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
+1 -1
View File
@@ -129,7 +129,7 @@ class Listeners {
case 39:
// Arrow forward
this.player.fastForward();
this.player.forward();
break;
case 37:
+22 -7
View File
@@ -4,6 +4,7 @@
import utils from './../utils';
import captions from './../captions';
import controls from './../controls';
import ui from './../ui';
const vimeo = {
@@ -139,10 +140,18 @@ const vimeo = {
return speed;
},
set(input) {
player.embed.setPlaybackRate(input).then(() => {
speed = input;
utils.dispatchEvent.call(player, player.media, 'ratechange');
});
player.embed
.setPlaybackRate(input)
.then(() => {
speed = input;
utils.dispatchEvent.call(player, player.media, 'ratechange');
})
.catch(error => {
// Hide menu item (and menu if empty)
if (error.name === 'Error') {
controls.setSpeedMenu.call(player, []);
}
});
},
});
@@ -193,9 +202,15 @@ const vimeo = {
// Source
let currentSrc;
player.embed.getVideoUrl().then(value => {
currentSrc = value;
});
player.embed
.getVideoUrl()
.then(value => {
currentSrc = value;
})
.catch(error => {
this.debug.warn(error);
});
Object.defineProperty(player.media, 'currentSrc', {
get() {
return currentSrc;
+2 -1
View File
@@ -294,7 +294,8 @@ const youtube = {
});
// Get available speeds
player.options.speed = instance.getAvailablePlaybackRates();
const options = instance.getAvailablePlaybackRates();
controls.setSpeedMenu.call(player, options);
// Set the tabindex to avoid focus entering iframe
if (player.supported.ui) {
+1 -1
View File
@@ -1,6 +1,6 @@
// ==========================================================================
// Plyr
// plyr.js v3.0.6
// plyr.js v3.0.10
// https://github.com/sampotts/plyr
// License: The MIT License (MIT)
// ==========================================================================
+1 -1
View File
@@ -1,6 +1,6 @@
// ==========================================================================
// Plyr Polyfilled Build
// plyr.js v3.0.6
// plyr.js v3.0.10
// https://github.com/sampotts/plyr
// License: The MIT License (MIT)
// ==========================================================================
+82 -40
View File
@@ -105,7 +105,7 @@ acorn-jsx@^3.0.0:
dependencies:
acorn "^3.0.4"
acorn@5.X, acorn@^5.0.3, acorn@^5.2.1, acorn@^5.5.0:
acorn@5.X, acorn@^5.0.3, acorn@^5.5.0:
version "5.5.3"
resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.5.3.tgz#f473dd47e0277a08e28e9bec5aeeb04751f0b8c9"
@@ -1775,7 +1775,7 @@ eslint-visitor-keys@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#3f3180fb2e291017716acb4c9d6d5b5c34a6a81d"
eslint@^4.0.0, eslint@^4.19.0:
eslint@^4.0.0:
version "4.19.0"
resolved "https://registry.yarnpkg.com/eslint/-/eslint-4.19.0.tgz#9e900efb5506812ac374557034ef6f5c3642fc4c"
dependencies:
@@ -1818,6 +1818,49 @@ eslint@^4.0.0, eslint@^4.19.0:
table "4.0.2"
text-table "~0.2.0"
eslint@^4.19.1:
version "4.19.1"
resolved "https://registry.yarnpkg.com/eslint/-/eslint-4.19.1.tgz#32d1d653e1d90408854bfb296f076ec7e186a300"
dependencies:
ajv "^5.3.0"
babel-code-frame "^6.22.0"
chalk "^2.1.0"
concat-stream "^1.6.0"
cross-spawn "^5.1.0"
debug "^3.1.0"
doctrine "^2.1.0"
eslint-scope "^3.7.1"
eslint-visitor-keys "^1.0.0"
espree "^3.5.4"
esquery "^1.0.0"
esutils "^2.0.2"
file-entry-cache "^2.0.0"
functional-red-black-tree "^1.0.1"
glob "^7.1.2"
globals "^11.0.1"
ignore "^3.3.3"
imurmurhash "^0.1.4"
inquirer "^3.0.6"
is-resolvable "^1.0.0"
js-yaml "^3.9.1"
json-stable-stringify-without-jsonify "^1.0.1"
levn "^0.3.0"
lodash "^4.17.4"
minimatch "^3.0.2"
mkdirp "^0.5.1"
natural-compare "^1.4.0"
optionator "^0.8.2"
path-is-inside "^1.0.2"
pluralize "^7.0.0"
progress "^2.0.0"
regexpp "^1.0.1"
require-uncached "^1.0.3"
semver "^5.3.0"
strip-ansi "^4.0.0"
strip-json-comments "~2.0.1"
table "4.0.2"
text-table "~0.2.0"
espree@^3.5.4:
version "3.5.4"
resolved "https://registry.yarnpkg.com/espree/-/espree-3.5.4.tgz#b0f447187c8a8bed944b815a660bddf5deb5d1a7"
@@ -1857,7 +1900,7 @@ estree-walker@^0.3.0:
version "0.3.1"
resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-0.3.1.tgz#e6b1a51cf7292524e7237c312e5fe6660c1ce1aa"
estree-walker@^0.5.0:
estree-walker@^0.5.1:
version "0.5.1"
resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-0.5.1.tgz#64fc375053abc6f57d73e9bd2f004644ad3c5854"
@@ -2444,13 +2487,13 @@ gulp-autoprefixer@^5.0.0:
through2 "^2.0.0"
vinyl-sourcemaps-apply "^0.2.0"
gulp-better-rollup@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/gulp-better-rollup/-/gulp-better-rollup-3.0.0.tgz#2bf5c2d0e7908fae72bba1f2496d24eb3c482e33"
gulp-better-rollup@^3.1.0:
version "3.1.0"
resolved "https://registry.yarnpkg.com/gulp-better-rollup/-/gulp-better-rollup-3.1.0.tgz#b226ba0c672882075472158b82d22ba9976d4ecb"
dependencies:
lodash.camelcase "^4.3.0"
plugin-error "^0.1.2"
rollup "^0.50.0"
rollup ">=0.48 <0.57"
vinyl "^2.1.0"
vinyl-sourcemaps-apply "^0.2.1"
@@ -2479,9 +2522,9 @@ gulp-filter@^5.1.0:
plugin-error "^0.1.2"
streamfilter "^1.0.5"
gulp-open@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/gulp-open/-/gulp-open-3.0.0.tgz#5a572a99044fdc461685d0eb8f7529b34bf9a62c"
gulp-open@^3.0.1:
version "3.0.1"
resolved "https://registry.yarnpkg.com/gulp-open/-/gulp-open-3.0.1.tgz#a2f747b4aa31abec9399b527158b0368c57e2102"
dependencies:
colors "^1.1.2"
opn "5.2.0"
@@ -2510,13 +2553,13 @@ gulp-s3@^0.11.0:
knox ""
mime "~1.2.11"
gulp-sass@^3.1.0:
version "3.1.0"
resolved "https://registry.yarnpkg.com/gulp-sass/-/gulp-sass-3.1.0.tgz#53dc4b68a1f5ddfe4424ab4c247655269a8b74b7"
gulp-sass@^3.2.1:
version "3.2.1"
resolved "https://registry.yarnpkg.com/gulp-sass/-/gulp-sass-3.2.1.tgz#2e3688a96fd8be1c0c01340750c191b2e79fab94"
dependencies:
gulp-util "^3.0"
lodash.clonedeep "^4.3.2"
node-sass "^4.2.0"
node-sass "^4.8.3"
through2 "^2.0.0"
vinyl-sourcemaps-apply "^0.2.0"
@@ -3402,9 +3445,9 @@ load-json-file@^4.0.0:
pify "^3.0.0"
strip-bom "^3.0.0"
loadjs@^3.5.2:
version "3.5.2"
resolved "https://registry.yarnpkg.com/loadjs/-/loadjs-3.5.2.tgz#add0e0e0322859840b362598f762c02f5539ce0b"
loadjs@^3.5.4:
version "3.5.4"
resolved "https://registry.yarnpkg.com/loadjs/-/loadjs-3.5.4.tgz#ef0f4eb5a6ac2b86c7597a3d4de97b83816e36b8"
locate-path@^2.0.0:
version "2.0.0"
@@ -3957,9 +4000,9 @@ mute-stream@0.0.7:
version "0.0.7"
resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.7.tgz#3075ce93bc21b8fab43e1bc4da7e8115ed1e7bab"
nan@^2.3.2:
version "2.9.2"
resolved "https://registry.yarnpkg.com/nan/-/nan-2.9.2.tgz#f564d75f5f8f36a6d9456cca7a6c4fe488ab7866"
nan@^2.10.0:
version "2.10.0"
resolved "https://registry.yarnpkg.com/nan/-/nan-2.10.0.tgz#96d0cd610ebd58d4b4de9cc0c6828cda99c7548f"
nanomatch@^1.2.9:
version "1.2.9"
@@ -4008,9 +4051,9 @@ node-gyp@^3.3.1:
tar "^2.0.0"
which "1"
node-sass@^4.2.0:
version "4.7.2"
resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-4.7.2.tgz#9366778ba1469eb01438a9e8592f4262bcb6794e"
node-sass@^4.8.3:
version "4.8.3"
resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-4.8.3.tgz#d077cc20a08ac06f661ca44fb6f19cd2ed41debb"
dependencies:
async-foreach "^0.1.3"
chalk "^1.1.1"
@@ -4024,7 +4067,7 @@ node-sass@^4.2.0:
lodash.mergewith "^4.6.0"
meow "^3.7.0"
mkdirp "^0.5.1"
nan "^2.3.2"
nan "^2.10.0"
node-gyp "^3.3.1"
npmlog "^4.0.0"
request "~2.79.0"
@@ -4662,9 +4705,9 @@ randomatic@^1.1.3:
is-number "^3.0.0"
kind-of "^4.0.0"
raven-js@^3.23.3:
version "3.23.3"
resolved "https://registry.yarnpkg.com/raven-js/-/raven-js-3.23.3.tgz#6174f506c7362eb8bb72b291af5f22edb44ef165"
raven-js@^3.24.0:
version "3.24.0"
resolved "https://registry.yarnpkg.com/raven-js/-/raven-js-3.24.0.tgz#59464d8bc4b3812ae87a282e9bb98ecad5b4b047"
rc@^1.0.1, rc@^1.1.6:
version "1.2.6"
@@ -5070,7 +5113,7 @@ resolve-url@^0.2.1, resolve-url@~0.2.1:
version "0.2.1"
resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
resolve@^1.1.6, resolve@^1.1.7, resolve@^1.4.0, resolve@^1.5.0:
resolve@^1.1.6, resolve@^1.1.7, resolve@^1.5.0:
version "1.5.0"
resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.5.0.tgz#1f09acce796c9a762579f31b2c1cc4c3cddf9f36"
dependencies:
@@ -5099,19 +5142,18 @@ rollup-plugin-babel@^3.0.3:
dependencies:
rollup-pluginutils "^1.5.0"
rollup-plugin-commonjs@^8.4.1:
version "8.4.1"
resolved "https://registry.yarnpkg.com/rollup-plugin-commonjs/-/rollup-plugin-commonjs-8.4.1.tgz#5c9cea2b2c3de322f5fbccd147e07ed5e502d7a0"
rollup-plugin-commonjs@^9.1.0:
version "9.1.0"
resolved "https://registry.yarnpkg.com/rollup-plugin-commonjs/-/rollup-plugin-commonjs-9.1.0.tgz#468341aab32499123ee9a04b22f51d9bf26fdd94"
dependencies:
acorn "^5.2.1"
estree-walker "^0.5.0"
estree-walker "^0.5.1"
magic-string "^0.22.4"
resolve "^1.4.0"
resolve "^1.5.0"
rollup-pluginutils "^2.0.1"
rollup-plugin-node-resolve@^3.2.0:
version "3.2.0"
resolved "https://registry.yarnpkg.com/rollup-plugin-node-resolve/-/rollup-plugin-node-resolve-3.2.0.tgz#31534952f3ab21f9473c1d092be7ed43937ea4d4"
rollup-plugin-node-resolve@^3.3.0:
version "3.3.0"
resolved "https://registry.yarnpkg.com/rollup-plugin-node-resolve/-/rollup-plugin-node-resolve-3.3.0.tgz#c26d110a36812cbefa7ce117cadcd3439aa1c713"
dependencies:
builtin-modules "^2.0.0"
is-module "^1.0.0"
@@ -5131,9 +5173,9 @@ rollup-pluginutils@^2.0.1:
estree-walker "^0.3.0"
micromatch "^2.3.11"
rollup@^0.50.0:
version "0.50.1"
resolved "https://registry.yarnpkg.com/rollup/-/rollup-0.50.1.tgz#e4dafcbf8d2bb0d9f5589d0cc6f64d76b8815730"
"rollup@>=0.48 <0.57":
version "0.56.5"
resolved "https://registry.yarnpkg.com/rollup/-/rollup-0.56.5.tgz#40fe3cf0cd1659d469baad11f4d5b6336c14ce84"
run-async@^2.2.0:
version "2.3.0"