From a2a82a96a6ab51ed42597dbb9479c4fedeaad927 Mon Sep 17 00:00:00 2001 From: Mohamed Elbahja Date: Sat, 13 Oct 2018 12:59:59 +0100 Subject: fix: continue with the current duration after changing video quality --- src/js/plyr.js | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/js/plyr.js b/src/js/plyr.js index 77582dd7..2b296181 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -680,6 +680,8 @@ class Plyr { set quality(input) { const config = this.config.quality; const options = this.options.quality; + const duration = this.duration; + const isPlaying = this.playing; if (!options.length) { return; @@ -703,6 +705,14 @@ class Plyr { // Set quality this.media.quality = quality; + + // seek to duration before changing quality + this.seek = duration; + + // continue + if (isPlaying) { + this.play(); + } } /** -- cgit v1.2.3 From 06db3f702d21ec440d53451ce8cb115f036ddec4 Mon Sep 17 00:00:00 2001 From: Mohamed Elbahja <8259014+melbahja@users.noreply.github.com> Date: Sat, 13 Oct 2018 13:23:42 +0100 Subject: Update plyr.js --- src/js/plyr.js | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/js/plyr.js b/src/js/plyr.js index 2b296181..5a9a1bd3 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -680,8 +680,7 @@ class Plyr { set quality(input) { const config = this.config.quality; const options = this.options.quality; - const duration = this.duration; - const isPlaying = this.playing; + const { duration, playing } = this; if (!options.length) { return; @@ -706,11 +705,11 @@ class Plyr { // Set quality this.media.quality = quality; - // seek to duration before changing quality + // Seek to duration before changing quality this.seek = duration; - // continue - if (isPlaying) { + // Continue + if (playing) { this.play(); } } -- cgit v1.2.3 From 5c78ecc15da28b4f86ceb02bc109d5a1e73a2628 Mon Sep 17 00:00:00 2001 From: e_palm Date: Tue, 16 Oct 2018 14:48:10 +0200 Subject: typo --- readme.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/readme.md b/readme.md index 97a1765f..f07ff7a8 100644 --- a/readme.md +++ b/readme.md @@ -175,7 +175,7 @@ Any questions regarding the ads can be sent straight to vi.ai and any issues wit ### SASS You can use `bundle.scss` file included in `/src` as part of your build and change variables to suit your design. The SASS require you to -use the [autoprefixer](https://www.npmjs.com/package/gulp-autoprefixer) plugin (you be should already!) as all declarations use the W3C definitions. +use the [autoprefixer](https://www.npmjs.com/package/gulp-autoprefixer) plugin (you should be already!) as all declarations use the W3C definitions. The HTML markup uses the BEM methodology with `plyr` as the block, e.g. `.plyr__controls`. You can change the class hooks in the options to match any custom CSS you write. Check out the JavaScript source for more on this. -- cgit v1.2.3 From 69d0d6d7eec8729da952aeea497db8f747a0ddfb Mon Sep 17 00:00:00 2001 From: James Date: Tue, 23 Oct 2018 10:08:46 +1100 Subject: Prevent immediate hiding of controls on mobile --- src/js/listeners.js | 3 +++ src/js/plyr.js | 3 +++ src/js/ui.js | 7 +++++-- 3 files changed, 11 insertions(+), 2 deletions(-) diff --git a/src/js/listeners.js b/src/js/listeners.js index 31d74af6..63100365 100644 --- a/src/js/listeners.js +++ b/src/js/listeners.js @@ -620,6 +620,9 @@ class Listeners { return; } + // Record seek time so we can prevent hiding controls for a few seconds after seek + player.lastSeekTime = Date.now(); + // Was playing before? const play = seek.hasAttribute(attribute); diff --git a/src/js/plyr.js b/src/js/plyr.js index 77582dd7..ebc0b733 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -302,6 +302,9 @@ class Plyr { if (this.config.autoplay) { this.play(); } + + // Seek time will be recorded (in listeners.js) so we can prevent hiding controls for a few seconds after seek + this.lastSeekTime = 0; } // --------------------------------------- diff --git a/src/js/ui.js b/src/js/ui.js index f0c898bf..8e50bb83 100644 --- a/src/js/ui.js +++ b/src/js/ui.js @@ -247,8 +247,11 @@ const ui = { const { controls } = this.elements; if (controls && this.config.hideControls) { - // Show controls if force, loading, paused, or button interaction, otherwise hide - this.toggleControls(Boolean(force || this.loading || this.paused || controls.pressed || controls.hover)); + // Don't hide controls if a touch-device user recently seeked. (Must be limited to touch devices, or it occasionally prevents desktop controls from hiding.) + const recentTouchSeek = (this.touch && this.lastSeekTime + 2000 > Date.now()); + + // Show controls if force, loading, paused, button interaction, or recent seek, otherwise hide + this.toggleControls(Boolean(force || this.loading || this.paused || controls.pressed || controls.hover || recentTouchSeek)); } }, }; -- cgit v1.2.3 From c232eb2478f16ed913de6eced7ed18d03ca7a1fb Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Wed, 24 Oct 2018 22:30:41 +1100 Subject: Fix SVG issue for older browsers (fixes #1191) --- src/js/controls.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/js/controls.js b/src/js/controls.js index 785f100d..efc45e8a 100644 --- a/src/js/controls.js +++ b/src/js/controls.js @@ -111,10 +111,11 @@ const controls = { // https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/xlink:href if ('href' in use) { use.setAttributeNS('http://www.w3.org/1999/xlink', 'href', path); - } else { - use.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', path); } + // Always set the older attribute even though it's "deprecated" (it'll be around for ages) + use.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', path); + // Add to icon.appendChild(use); -- cgit v1.2.3 From ebaded66b4c1f05b7b323b968fbe506002c8f019 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Wed, 24 Oct 2018 22:31:16 +1100 Subject: Package updates --- package.json | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index fa29602b..fd992700 100644 --- a/package.json +++ b/package.json @@ -36,10 +36,10 @@ }, "devDependencies": { "babel-core": "^6.26.3", - "babel-eslint": "^10.0.0", + "babel-eslint": "^10.0.1", "@babel/preset-env": "^7.1.0", "del": "^3.0.0", - "eslint": "^5.6.0", + "eslint": "^5.7.0", "eslint-config-airbnb-base": "^13.1.0", "eslint-config-prettier": "^3.1.0", "eslint-plugin-import": "^2.14.0", @@ -57,20 +57,20 @@ "gulp-rename": "^1.4.0", "gulp-replace": "^1.0.0", "gulp-s3": "^0.11.0", - "gulp-sass": "^4.0.1", + "gulp-sass": "^4.0.2", "gulp-size": "^3.0.0", "gulp-sourcemaps": "^2.6.4", "gulp-svgmin": "^2.1.0", "gulp-svgstore": "^7.0.0", "gulp-uglify-es": "^1.0.4", "gulp-util": "^3.0.8", - "postcss-custom-properties": "^8.0.6", + "postcss-custom-properties": "^8.0.8", "prettier-eslint": "^8.8.2", "prettier-stylelint": "^0.4.2", "remark-cli": "^5.0.0", "remark-validate-links": "^7.1.0", "rollup-plugin-babel": "^4.0.3", - "rollup-plugin-commonjs": "^9.1.8", + "rollup-plugin-commonjs": "^9.2.0", "rollup-plugin-node-resolve": "^3.4.0", "run-sequence": "^2.2.1", "stylelint": "^9.6.0", @@ -78,7 +78,7 @@ "stylelint-config-recommended": "^2.1.0", "stylelint-config-sass-guidelines": "^5.2.0", "stylelint-order": "^1.0.0", - "stylelint-scss": "^3.3.1", + "stylelint-scss": "^3.3.2", "stylelint-selector-bem-pattern": "^2.0.0", "through2": "^2.0.3" }, -- cgit v1.2.3 From 03c9b53232aeab78a7c592e1bcf387312f77a569 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Wed, 24 Oct 2018 22:31:35 +1100 Subject: Allow custom download URL (for streaming, etc) --- src/js/config/defaults.js | 3 ++- src/js/controls.js | 22 ++++++++++++---------- src/js/listeners.js | 2 +- src/js/plyr.js | 9 +++++++++ src/js/utils/is.js | 5 +++++ 5 files changed, 29 insertions(+), 12 deletions(-) diff --git a/src/js/config/defaults.js b/src/js/config/defaults.js index 5e2fc4a9..7d0ca7d0 100644 --- a/src/js/config/defaults.js +++ b/src/js/config/defaults.js @@ -133,7 +133,7 @@ const defaults = { 'settings', 'pip', 'airplay', - 'download', + // 'download', 'fullscreen', ], settings: ['captions', 'quality', 'speed'], @@ -186,6 +186,7 @@ const defaults = { // URLs urls: { + download: null, vimeo: { sdk: 'https://player.vimeo.com/api/player.js', iframe: 'https://player.vimeo.com/video/{0}?{1}', diff --git a/src/js/controls.js b/src/js/controls.js index efc45e8a..4f453e6a 100644 --- a/src/js/controls.js +++ b/src/js/controls.js @@ -1229,11 +1229,15 @@ const controls = { // Set the download link setDownloadLink() { - // Set download link - const { download } = this.elements.buttons; - if (is.element(download)) { - download.setAttribute('href', this.source); + const button = this.elements.buttons.download; + + // Bail if no button + if (!is.element(button)) { + return; } + + // Set download link + button.setAttribute('href', this.download); }, // Build the default HTML @@ -1516,15 +1520,13 @@ const controls = { if (this.config.controls.includes('download')) { const attributes = { element: 'a', - href: this.source, + href: this.download, target: '_blank', }; - if (this.isHTML5) { - extend(attributes, { - download: '', - }); - } else if (this.isEmbed) { + const { download } = this.config.urls; + + if (!is.url(download) && this.isEmbed) { extend(attributes, { icon: `logo-${this.provider}`, label: this.provider, diff --git a/src/js/listeners.js b/src/js/listeners.js index 31d74af6..f21e3357 100644 --- a/src/js/listeners.js +++ b/src/js/listeners.js @@ -431,7 +431,7 @@ class Listeners { controls.updateSetting.call(player, 'quality', null, event.detail.quality); }); - // Update download link + // Update download link when ready and if quality changes on.call(player, player.media, 'ready qualitychange', () => { controls.setDownloadLink.call(player); }); diff --git a/src/js/plyr.js b/src/js/plyr.js index 77582dd7..d549b177 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -788,6 +788,15 @@ class Plyr { return this.media.currentSrc; } + /** + * Get a download URL (either source or custom) + */ + get download() { + const { download } = this.config.urls; + + return is.url(download) ? download : this.source; + } + /** * Set the poster image for a video * @param {input} - the URL for the new poster image diff --git a/src/js/utils/is.js b/src/js/utils/is.js index 2952d486..ab28f2ab 100644 --- a/src/js/utils/is.js +++ b/src/js/utils/is.js @@ -31,6 +31,11 @@ const isUrl = input => { return true; } + // Must be string from here + if (!isString(input)) { + return false; + } + // Add the protocol if required let string = input; if (!input.startsWith('http://') || !input.startsWith('https://')) { -- cgit v1.2.3