aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--package.json12
-rw-r--r--readme.md2
-rw-r--r--src/js/config/defaults.js3
-rw-r--r--src/js/controls.js27
-rw-r--r--src/js/listeners.js5
-rw-r--r--src/js/plyr.js21
-rw-r--r--src/js/ui.js7
-rw-r--r--src/js/utils/is.js5
8 files changed, 59 insertions, 23 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"
},
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.
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 785f100d..4f453e6a 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 <use> to <svg>
icon.appendChild(use);
@@ -1228,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
@@ -1515,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..f8ea997f 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);
});
@@ -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 e5760d58..dfde03b1 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;
}
// ---------------------------------------
@@ -680,6 +683,7 @@ class Plyr {
set quality(input) {
const config = this.config.quality;
const options = this.options.quality;
+ const { duration, playing } = this;
if (!options.length) {
return;
@@ -713,6 +717,14 @@ class Plyr {
if (updateStorage) {
this.storage.set({ quality: quality });
}
+
+ // Seek to duration before changing quality
+ this.seek = duration;
+
+ // Continue
+ if (playing) {
+ this.play();
+ }
}
/**
@@ -799,6 +811,15 @@ class Plyr {
}
/**
+ * 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/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));
}
},
};
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://')) {
generated by cgit v1.2.3 (git 2.25.1) at 2025-06-08 23:09:15 +0000