From a2a82a96a6ab51ed42597dbb9479c4fedeaad927 Mon Sep 17 00:00:00 2001 From: Mohamed Elbahja Date: Sat, 13 Oct 2018 12:59:59 +0100 Subject: [PATCH 1/7] 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(); + } } /** 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: [PATCH 2/7] 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(); } } From 5c78ecc15da28b4f86ceb02bc109d5a1e73a2628 Mon Sep 17 00:00:00 2001 From: e_palm Date: Tue, 16 Oct 2018 14:48:10 +0200 Subject: [PATCH 3/7] 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. From 69d0d6d7eec8729da952aeea497db8f747a0ddfb Mon Sep 17 00:00:00 2001 From: James Date: Tue, 23 Oct 2018 10:08:46 +1100 Subject: [PATCH 4/7] 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)); } }, }; From c232eb2478f16ed913de6eced7ed18d03ca7a1fb Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Wed, 24 Oct 2018 22:30:41 +1100 Subject: [PATCH 5/7] 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); From ebaded66b4c1f05b7b323b968fbe506002c8f019 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Wed, 24 Oct 2018 22:31:16 +1100 Subject: [PATCH 6/7] 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" }, From 03c9b53232aeab78a7c592e1bcf387312f77a569 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Wed, 24 Oct 2018 22:31:35 +1100 Subject: [PATCH 7/7] 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://')) {