ProximaEntertainment/plyr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'develop' into fix-html5-quality-settings

Browse Source
This commit is contained in:
Sam Potts
2018-10-24 22:39:10 +11:00
committed by GitHub
parent a86bbae851 aa20ebaa9c
commit b6175b1ca9
8 changed files with 59 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
package.json
View File

@ -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"
},

2
readme.md
View File

@ -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.

3
src/js/config/defaults.js
View File

@ -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}',

27
src/js/controls.js vendored
View File

@ -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,

5
src/js/listeners.js
View File

@ -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);

21
src/js/plyr.js
View File

@ -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();
}
}
/**
@ -798,6 +810,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

7
src/js/ui.js
View File

@ -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));
}
},
};

5
src/js/utils/is.js
View File

@ -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://')) {