From 81c5477f1d9ac2539e4ec50ede7886abe50fa75a Mon Sep 17 00:00:00 2001 From: Albin Larsson Date: Thu, 21 Jun 2018 15:22:30 +0200 Subject: Fix captions.toggle() if there is no toggle button --- src/js/captions.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) (limited to 'src') diff --git a/src/js/captions.js b/src/js/captions.js index 732b2e38..9dca5505 100644 --- a/src/js/captions.js +++ b/src/js/captions.js @@ -191,8 +191,10 @@ const captions = { return; } - // Toggle state - this.elements.buttons.captions.pressed = active; + // Toggle button if it's enabled + if (this.elements.buttons.captions) { + this.elements.buttons.captions.pressed = active; + } // Add class hook toggleClass(this.elements.container, activeClass, active); -- cgit v1.2.3 From b6ddf144f4b6d784da68a322de6e44b6fe724409 Mon Sep 17 00:00:00 2001 From: Michael DePetrillo Date: Mon, 25 Jun 2018 12:00:02 +0200 Subject: handle undefined player.elements.buttons.play --- src/js/listeners.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) (limited to 'src') diff --git a/src/js/listeners.js b/src/js/listeners.js index d9811dd1..7615e365 100644 --- a/src/js/listeners.js +++ b/src/js/listeners.js @@ -431,9 +431,11 @@ class Listeners { }; // Play/pause toggle - Array.from(this.player.elements.buttons.play).forEach(button => { - bind(button, 'click', this.player.togglePlay, 'play'); - }); + if (this.player.elements.buttons.play) { + Array.from(this.player.elements.buttons.play).forEach(button => { + bind(button, 'click', this.player.togglePlay, 'play'); + }); + } // Pause bind(this.player.elements.buttons.restart, 'click', this.player.restart, 'restart'); -- cgit v1.2.3 From de9b53045aecb34cd6244327f9ccb7116b617e8b Mon Sep 17 00:00:00 2001 From: Morten Vestergaard Hansen Date: Wed, 27 Jun 2018 14:33:51 +0200 Subject: Fixed condition check If class includes "control" it will add it again. --- src/js/controls.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src') diff --git a/src/js/controls.js b/src/js/controls.js index 3f720925..ddec6581 100644 --- a/src/js/controls.js +++ b/src/js/controls.js @@ -181,7 +181,7 @@ const controls = { } if ('class' in attributes) { - if (attributes.class.includes(this.config.classNames.control)) { + if (!attributes.class.includes(this.config.classNames.control)) { attributes.class += ` ${this.config.classNames.control}`; } } else { -- cgit v1.2.3 From e9f1b55f51bb87e1130b3d6e62bd6aed89a94727 Mon Sep 17 00:00:00 2001 From: mimse Date: Thu, 28 Jun 2018 11:25:55 +0200 Subject: Hide currentTime and progress --- src/js/controls.js | 10 ++++++++++ src/sass/components/controls.scss | 3 ++- 2 files changed, 12 insertions(+), 1 deletion(-) (limited to 'src') diff --git a/src/js/controls.js b/src/js/controls.js index 2e18debc..ff16d5af 100644 --- a/src/js/controls.js +++ b/src/js/controls.js @@ -633,6 +633,16 @@ const controls = { return; } + // If duration is the 2**32 (shaka), Infinity (HLS), DASH-IF (Number.MAX_SAFE_INTEGER || Number.MAX_VALUE) indicating live we hide the currentTime and progressbar. + // https://github.com/video-dev/hls.js/blob/5820d29d3c4c8a46e8b75f1e3afa3e68c1a9a2db/src/controller/buffer-controller.js#L415 + // https://github.com/google/shaka-player/blob/4d889054631f4e1cf0fbd80ddd2b71887c02e232/lib/media/streaming_engine.js#L1062 + // https://github.com/Dash-Industry-Forum/dash.js/blob/69859f51b969645b234666800d4cb596d89c602d/src/dash/models/DashManifestModel.js#L338 + if (this.duration >= 2**32) { + toggleHidden(this.elements.display.currentTime, true); + toggleHidden(this.elements.progress, true); + return; + } + // Update ARIA values if (is.element(this.elements.inputs.seek)) { this.elements.inputs.seek.setAttribute('aria-valuemax', this.duration); diff --git a/src/sass/components/controls.scss b/src/sass/components/controls.scss index 91db1b20..35f00f63 100644 --- a/src/sass/components/controls.scss +++ b/src/sass/components/controls.scss @@ -12,6 +12,7 @@ align-items: center; display: flex; text-align: center; + justify-content: flex-end; // Spacing > .plyr__control, @@ -22,7 +23,7 @@ &:first-child, &:first-child + [data-plyr='pause'] { - margin-left: 0; + margin-right: auto; } } -- cgit v1.2.3 From c99607c85a293a565aa4110a69d04a9e8e9450b6 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Fri, 29 Jun 2018 00:21:22 +1000 Subject: Linting, housekeeping, duration fix (fixes #1074) --- src/js/console.js | 2 ++ src/js/controls.js | 2 +- src/js/listeners.js | 3 +-- src/js/plugins/ads.js | 14 +++++++------- src/js/plugins/vimeo.js | 20 ++++++++++---------- src/js/plugins/youtube.js | 20 ++++++++++---------- src/js/plyr.js | 12 ++++++++++-- src/js/utils/loadSprite.js | 2 +- 8 files changed, 42 insertions(+), 33 deletions(-) (limited to 'src') diff --git a/src/js/console.js b/src/js/console.js index 7c5ec1b4..e8099569 100644 --- a/src/js/console.js +++ b/src/js/console.js @@ -17,10 +17,12 @@ export default class Console { // eslint-disable-next-line no-console return this.enabled ? Function.prototype.bind.call(console.log, console) : noop; } + get warn() { // eslint-disable-next-line no-console return this.enabled ? Function.prototype.bind.call(console.warn, console) : noop; } + get error() { // eslint-disable-next-line no-console return this.enabled ? Function.prototype.bind.call(console.error, console) : noop; diff --git a/src/js/controls.js b/src/js/controls.js index 2e18debc..4c2266c2 100644 --- a/src/js/controls.js +++ b/src/js/controls.js @@ -16,11 +16,11 @@ import { getElement, getElements, hasClass, + matches, removeElement, setAttributes, toggleClass, toggleHidden, - matches, } from './utils/elements'; import { off, on } from './utils/events'; import is from './utils/is'; diff --git a/src/js/listeners.js b/src/js/listeners.js index 7615e365..9583bd71 100644 --- a/src/js/listeners.js +++ b/src/js/listeners.js @@ -669,8 +669,7 @@ class Listeners { const inverted = event.webkitDirectionInvertedFromDevice; // Get delta from event. Invert if `inverted` is true - const [x, y] = [event.deltaX, -event.deltaY] - .map(value => inverted ? -value : value); + const [x, y] = [event.deltaX, -event.deltaY].map(value => (inverted ? -value : value)); // Using the biggest delta, normalize to 1 or -1 (or 0 if no delta) const direction = Math.sign(Math.abs(x) > Math.abs(y) ? x : y); diff --git a/src/js/plugins/ads.js b/src/js/plugins/ads.js index 856772d5..f5727a1d 100644 --- a/src/js/plugins/ads.js +++ b/src/js/plugins/ads.js @@ -7,12 +7,12 @@ /* global google */ import i18n from '../i18n'; -import { createElement } from './../utils/elements'; -import { triggerEvent } from './../utils/events'; -import is from './../utils/is'; -import loadScript from './../utils/loadScript'; -import { formatTime } from './../utils/time'; -import { buildUrlParams } from './../utils/urls'; +import { createElement } from '../utils/elements'; +import { triggerEvent } from '../utils/events'; +import is from '../utils/is'; +import loadScript from '../utils/loadScript'; +import { formatTime } from '../utils/time'; +import { buildUrlParams } from '../utils/urls'; class Ads { /** @@ -100,7 +100,7 @@ class Ads { const params = { AV_PUBLISHERID: '58c25bb0073ef448b1087ad6', AV_CHANNELID: '5a0458dc28a06145e4519d21', - AV_URL: location.hostname, + AV_URL: window.location.hostname, cb: Date.now(), AV_WIDTH: 640, AV_HEIGHT: 480, diff --git a/src/js/plugins/vimeo.js b/src/js/plugins/vimeo.js index 09339229..4cbdb5c4 100644 --- a/src/js/plugins/vimeo.js +++ b/src/js/plugins/vimeo.js @@ -2,16 +2,16 @@ // Vimeo plugin // ========================================================================== -import captions from './../captions'; -import controls from './../controls'; -import ui from './../ui'; -import { createElement, replaceElement, toggleClass } from './../utils/elements'; -import { triggerEvent } from './../utils/events'; -import fetch from './../utils/fetch'; -import is from './../utils/is'; -import loadScript from './../utils/loadScript'; -import { format, stripHTML } from './../utils/strings'; -import { buildUrlParams } from './../utils/urls'; +import captions from '../captions'; +import controls from '../controls'; +import ui from '../ui'; +import { createElement, replaceElement, toggleClass } from '../utils/elements'; +import { triggerEvent } from '../utils/events'; +import fetch from '../utils/fetch'; +import is from '../utils/is'; +import loadScript from '../utils/loadScript'; +import { format, stripHTML } from '../utils/strings'; +import { buildUrlParams } from '../utils/urls'; // Parse Vimeo ID from URL function parseId(url) { diff --git a/src/js/plugins/youtube.js b/src/js/plugins/youtube.js index 94ab6dfa..b521be3c 100644 --- a/src/js/plugins/youtube.js +++ b/src/js/plugins/youtube.js @@ -2,16 +2,16 @@ // YouTube plugin // ========================================================================== -import controls from './../controls'; -import ui from './../ui'; -import { dedupe } from './../utils/arrays'; -import { createElement, replaceElement, toggleClass } from './../utils/elements'; -import { triggerEvent } from './../utils/events'; -import fetch from './../utils/fetch'; -import is from './../utils/is'; -import loadImage from './../utils/loadImage'; -import loadScript from './../utils/loadScript'; -import { format, generateId } from './../utils/strings'; +import controls from '../controls'; +import ui from '../ui'; +import { dedupe } from '../utils/arrays'; +import { createElement, replaceElement, toggleClass } from '../utils/elements'; +import { triggerEvent } from '../utils/events'; +import fetch from '../utils/fetch'; +import is from '../utils/is'; +import loadImage from '../utils/loadImage'; +import loadScript from '../utils/loadScript'; +import { format, generateId } from '../utils/strings'; // Parse YouTube ID from URL function parseId(url) { diff --git a/src/js/plyr.js b/src/js/plyr.js index 374251e6..78e074df 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -310,18 +310,23 @@ class Plyr { get isHTML5() { return Boolean(this.provider === providers.html5); } + get isEmbed() { return Boolean(this.isYouTube || this.isVimeo); } + get isYouTube() { return Boolean(this.provider === providers.youtube); } + get isVimeo() { return Boolean(this.provider === providers.vimeo); } + get isVideo() { return Boolean(this.type === types.video); } + get isAudio() { return Boolean(this.type === types.audio); } @@ -489,8 +494,9 @@ class Plyr { // Faux duration set via config const fauxDuration = parseFloat(this.config.duration); - // Media duration can be NaN before the media has loaded - const duration = (this.media || {}).duration || 0; + // Media duration can be NaN or Infinity before the media has loaded + const realDuration = (this.media || {}).duration; + const duration = !is.number(realDuration) || realDuration === Infinity ? 0 : realDuration; // If config duration is funky, use regular duration return fauxDuration || duration; @@ -944,6 +950,7 @@ class Plyr { on(event, callback) { on.call(this, this.elements.container, event, callback); } + /** * Add event listeners once * @param {string} event - Event type @@ -952,6 +959,7 @@ class Plyr { once(event, callback) { once.call(this, this.elements.container, event, callback); } + /** * Remove event listeners * @param {string} event - Event type diff --git a/src/js/utils/loadSprite.js b/src/js/utils/loadSprite.js index f05795f8..917bd6ac 100644 --- a/src/js/utils/loadSprite.js +++ b/src/js/utils/loadSprite.js @@ -2,7 +2,7 @@ // Sprite loader // ========================================================================== -import Storage from './../storage'; +import Storage from '../storage'; import fetch from './fetch'; import is from './is'; -- cgit v1.2.3 From 566c05983233f935b2d537b4f9f682e464aab27c Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Fri, 29 Jun 2018 00:38:11 +1000 Subject: 3.3.16 --- src/js/plyr.js | 2 +- src/js/plyr.polyfilled.js | 2 +- src/sass/components/controls.scss | 11 ++++++++--- 3 files changed, 10 insertions(+), 5 deletions(-) (limited to 'src') diff --git a/src/js/plyr.js b/src/js/plyr.js index 78e074df..6ecc328a 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -1,6 +1,6 @@ // ========================================================================== // Plyr -// plyr.js v3.3.15 +// plyr.js v3.3.16 // https://github.com/sampotts/plyr // License: The MIT License (MIT) // ========================================================================== diff --git a/src/js/plyr.polyfilled.js b/src/js/plyr.polyfilled.js index 505163e8..062f11a1 100644 --- a/src/js/plyr.polyfilled.js +++ b/src/js/plyr.polyfilled.js @@ -1,6 +1,6 @@ // ========================================================================== // Plyr Polyfilled Build -// plyr.js v3.3.15 +// plyr.js v3.3.16 // https://github.com/sampotts/plyr // License: The MIT License (MIT) // ========================================================================== diff --git a/src/sass/components/controls.scss b/src/sass/components/controls.scss index 35f00f63..9b203f43 100644 --- a/src/sass/components/controls.scss +++ b/src/sass/components/controls.scss @@ -11,8 +11,8 @@ .plyr__controls { align-items: center; display: flex; - text-align: center; justify-content: flex-end; + text-align: center; // Spacing > .plyr__control, @@ -23,6 +23,7 @@ &:first-child, &:first-child + [data-plyr='pause'] { + margin-left: 0; margin-right: auto; } } @@ -49,13 +50,17 @@ // Video controls .plyr--video .plyr__controls { - background: linear-gradient(rgba($plyr-video-controls-bg, 0), rgba($plyr-video-controls-bg, 0.7)); + background: linear-gradient( + rgba($plyr-video-controls-bg, 0), + rgba($plyr-video-controls-bg, 0.7) + ); border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; bottom: 0; color: $plyr-video-control-color; left: 0; - padding: ($plyr-control-spacing * 3.5) $plyr-control-spacing $plyr-control-spacing; + padding: ($plyr-control-spacing * 3.5) $plyr-control-spacing + $plyr-control-spacing; position: absolute; right: 0; transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out; -- cgit v1.2.3