Sam Potts
GitHub
commit
4d3b6b882e
@ -2,8 +2,9 @@ demo
|
||||
.github
|
||||
.vscode
|
||||
*.code-workspace
|
||||
build.json
|
||||
credentials.json
|
||||
bundles.json
|
||||
deploy.json
|
||||
yarn.lock
|
||||
package-lock.json
|
||||
*.mp4
|
||||
|
||||
@ -1,3 +1,7 @@
|
||||
## v3.5.1
|
||||
|
||||
- Fixed build issues with babel and browserslist
|
||||
|
||||
## v3.5.0
|
||||
|
||||
- Preview seek/scrubbing thumbnails (thanks @jamesoflol)
|
||||
|
||||
82
gulpfile.js
82
gulpfile.js
@ -30,6 +30,7 @@ const header = require('gulp-header');
|
||||
const gitbranch = require('git-branch');
|
||||
const rename = require('gulp-rename');
|
||||
const replace = require('gulp-replace');
|
||||
const ansi = require('ansi-colors');
|
||||
const log = require('fancy-log');
|
||||
const open = require('gulp-open');
|
||||
const plumber = require('gulp-plumber');
|
||||
@ -104,32 +105,14 @@ const tasks = {
|
||||
css: [],
|
||||
js: [],
|
||||
sprite: [],
|
||||
clean: ['clean'],
|
||||
clean: 'clean',
|
||||
};
|
||||
|
||||
// Size plugin
|
||||
const sizeOptions = { showFiles: true, gzip: true };
|
||||
|
||||
// Babel config
|
||||
const babelrc = (polyfill = false) => ({
|
||||
presets: [
|
||||
[
|
||||
'@babel/preset-env',
|
||||
{
|
||||
targets: {
|
||||
browsers,
|
||||
},
|
||||
useBuiltIns: polyfill ? 'usage' : false,
|
||||
modules: false,
|
||||
},
|
||||
],
|
||||
],
|
||||
babelrc: false,
|
||||
exclude: 'node_modules/**',
|
||||
});
|
||||
|
||||
// Clean out /dist
|
||||
gulp.task('clean', done => {
|
||||
gulp.task(tasks.clean, done => {
|
||||
const dirs = [paths.plyr.output, paths.demo.output].map(dir => path.join(dir, '**/*'));
|
||||
|
||||
// Don't delete the mp4
|
||||
@ -148,19 +131,34 @@ Object.entries(build.js).forEach(([filename, entry]) => {
|
||||
const polyfill = filename.includes('polyfilled');
|
||||
const extension = format === 'es' ? 'mjs' : 'js';
|
||||
|
||||
gulp.task(name, () => {
|
||||
return gulp
|
||||
gulp.task(name, () =>
|
||||
gulp
|
||||
.src(entry.src)
|
||||
.pipe(plumber())
|
||||
.pipe(sourcemaps.init())
|
||||
.pipe(
|
||||
rollup(
|
||||
{
|
||||
plugins: [resolve(), commonjs(), babel(babelrc(polyfill))],
|
||||
plugins: [
|
||||
resolve(),
|
||||
commonjs(),
|
||||
babel({
|
||||
presets: [
|
||||
[
|
||||
'@babel/env',
|
||||
{
|
||||
// debug: true,
|
||||
useBuiltIns: polyfill ? 'usage' : false,
|
||||
},
|
||||
],
|
||||
],
|
||||
babelrc: false,
|
||||
exclude: [/\/core-js\//],
|
||||
}),
|
||||
],
|
||||
},
|
||||
{
|
||||
name: entry.namespace,
|
||||
// exports: 'named',
|
||||
format,
|
||||
},
|
||||
),
|
||||
@ -172,13 +170,13 @@ Object.entries(build.js).forEach(([filename, entry]) => {
|
||||
}),
|
||||
)
|
||||
.pipe(gulp.dest(entry.dist))
|
||||
.pipe(filter(`**/*${extension}`))
|
||||
.pipe(filter(`**/*.${extension}`))
|
||||
.pipe(terser())
|
||||
.pipe(rename({ suffix: minSuffix }))
|
||||
.pipe(size(sizeOptions))
|
||||
.pipe(sourcemaps.write(''))
|
||||
.pipe(gulp.dest(entry.dist));
|
||||
});
|
||||
.pipe(gulp.dest(entry.dist)),
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
@ -187,8 +185,8 @@ Object.entries(build.css).forEach(([filename, entry]) => {
|
||||
const name = `css:${filename}`;
|
||||
tasks.css.push(name);
|
||||
|
||||
gulp.task(name, () => {
|
||||
return gulp
|
||||
gulp.task(name, () =>
|
||||
gulp
|
||||
.src(entry.src)
|
||||
.pipe(plumber())
|
||||
.pipe(sass())
|
||||
@ -199,8 +197,8 @@ Object.entries(build.css).forEach(([filename, entry]) => {
|
||||
)
|
||||
.pipe(clean())
|
||||
.pipe(size(sizeOptions))
|
||||
.pipe(gulp.dest(entry.dist));
|
||||
});
|
||||
.pipe(gulp.dest(entry.dist)),
|
||||
);
|
||||
});
|
||||
|
||||
// SVG Sprites
|
||||
@ -208,18 +206,16 @@ Object.entries(build.sprite).forEach(([filename, entry]) => {
|
||||
const name = `sprite:${filename}`;
|
||||
tasks.sprite.push(name);
|
||||
|
||||
log(path.basename(filename));
|
||||
|
||||
gulp.task(name, () => {
|
||||
return gulp
|
||||
gulp.task(name, () =>
|
||||
gulp
|
||||
.src(entry.src)
|
||||
.pipe(plumber())
|
||||
.pipe(imagemin())
|
||||
.pipe(svgstore())
|
||||
.pipe(rename({ basename: path.parse(filename).name }))
|
||||
.pipe(size(sizeOptions))
|
||||
.pipe(gulp.dest(entry.dist));
|
||||
});
|
||||
.pipe(gulp.dest(entry.dist)),
|
||||
);
|
||||
});
|
||||
|
||||
// Build all JS
|
||||
@ -317,7 +313,7 @@ gulp.task('version', done => {
|
||||
|
||||
const { domain } = deploy.cdn;
|
||||
|
||||
console.log(`Updating versions to '${version}'...`);
|
||||
log(`Uploading ${ansi.green.bold(version)} to ${ansi.cyan(domain)}...`);
|
||||
|
||||
// Replace versioned URLs in source
|
||||
const files = ['plyr.js', 'plyr.polyfilled.js', 'config/defaults.js'];
|
||||
@ -342,7 +338,7 @@ gulp.task('cdn', done => {
|
||||
throw new Error('No publisher instance. Check AWS configuration.');
|
||||
}
|
||||
|
||||
console.log(`Uploading '${version}' to ${domain}...`);
|
||||
log(`Uploading ${ansi.green.bold(pkg.version)} to ${ansi.cyan(domain)}...`);
|
||||
|
||||
// Upload to CDN
|
||||
return (
|
||||
@ -385,13 +381,13 @@ gulp.task('purge', () => {
|
||||
const purge = new FastlyPurge(fastly.token);
|
||||
|
||||
list.forEach(url => {
|
||||
console.log(`Purging ${url}...`);
|
||||
log(`Purging ${ansi.cyan(url)}...`);
|
||||
|
||||
purge.url(url, (error, result) => {
|
||||
if (error) {
|
||||
console.log(error);
|
||||
log.error(error);
|
||||
} else if (result) {
|
||||
console.log(result);
|
||||
log(result);
|
||||
}
|
||||
});
|
||||
});
|
||||
@ -412,7 +408,7 @@ gulp.task('demo', done => {
|
||||
throw new Error('No publisher instance. Check AWS configuration.');
|
||||
}
|
||||
|
||||
console.log(`Uploading '${version}' demo to ${deploy.demo.domain}...`);
|
||||
log(`Uploading ${ansi.green.bold(pkg.version)} to ${ansi.cyan(domain)}...`);
|
||||
|
||||
// Replace versioned files in readme.md
|
||||
gulp.src([`${__dirname}/readme.md`])
|
||||
|
||||
19
package.json
19
package.json
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "plyr",
|
||||
"version": "3.5.0",
|
||||
"version": "3.5.1",
|
||||
"description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
|
||||
"homepage": "https://plyr.io",
|
||||
"author": "Sam Potts <sam@potts.es>",
|
||||
@ -27,10 +27,7 @@
|
||||
"bugs": {
|
||||
"url": "https://github.com/sampotts/plyr/issues"
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
"not dead"
|
||||
],
|
||||
"browserslist": "> 1%",
|
||||
"scripts": {
|
||||
"build": "gulp build",
|
||||
"lint": "eslint src/js && npm run-script remark",
|
||||
@ -38,13 +35,13 @@
|
||||
"deploy": "yarn lint && gulp deploy"
|
||||
},
|
||||
"devDependencies": {
|
||||
"aws-sdk": "^2.404.0",
|
||||
"ansi-colors": "^3.2.3",
|
||||
"aws-sdk": "^2.409.0",
|
||||
"@babel/core": "^7.3.3",
|
||||
"@babel/preset-env": "^7.3.1",
|
||||
"babel-eslint": "^10.0.1",
|
||||
"babel-preset-minify": "^0.5.0",
|
||||
"del": "^3.0.0",
|
||||
"eslint": "^5.14.0",
|
||||
"eslint": "^5.14.1",
|
||||
"eslint-config-airbnb-base": "^13.1.0",
|
||||
"eslint-config-prettier": "^4.0.0",
|
||||
"eslint-plugin-import": "^2.16.0",
|
||||
@ -66,7 +63,7 @@
|
||||
"gulp-replace": "^1.0.0",
|
||||
"gulp-sass": "^4.0.2",
|
||||
"gulp-size": "^3.0.0",
|
||||
"gulp-sourcemaps": "^2.6.4",
|
||||
"gulp-sourcemaps": "^2.6.5",
|
||||
"gulp-svgstore": "^7.0.1",
|
||||
"gulp-terser": "^1.1.7",
|
||||
"postcss-custom-properties": "^8.0.9",
|
||||
@ -76,13 +73,13 @@
|
||||
"remark-validate-links": "^8.0.0",
|
||||
"rollup-plugin-babel": "^4.3.2",
|
||||
"rollup-plugin-commonjs": "^9.2.0",
|
||||
"rollup-plugin-node-resolve": "^4.0.0",
|
||||
"rollup-plugin-node-resolve": "^4.0.1",
|
||||
"stylelint": "^9.10.1",
|
||||
"stylelint-config-prettier": "^4.0.0",
|
||||
"stylelint-config-recommended": "^2.1.0",
|
||||
"stylelint-config-sass-guidelines": "^5.3.0",
|
||||
"stylelint-order": "^2.0.0",
|
||||
"stylelint-scss": "^3.5.3",
|
||||
"stylelint-scss": "^3.5.4",
|
||||
"stylelint-selector-bem-pattern": "^2.0.0",
|
||||
"through2": "^3.0.0"
|
||||
},
|
||||
|
||||
@ -17,7 +17,7 @@ import { buildUrlParams } from '../utils/urls';
|
||||
class Ads {
|
||||
/**
|
||||
* Ads constructor.
|
||||
* @param {object} player
|
||||
* @param {Object} player
|
||||
* @return {Ads}
|
||||
*/
|
||||
constructor(player) {
|
||||
@ -198,7 +198,7 @@ class Ads {
|
||||
|
||||
/**
|
||||
* Update the ad countdown
|
||||
* @param {boolean} start
|
||||
* @param {Boolean} start
|
||||
*/
|
||||
pollCountdown(start = false) {
|
||||
if (!start) {
|
||||
@ -559,7 +559,7 @@ class Ads {
|
||||
|
||||
/**
|
||||
* Handles callbacks after an ad event was invoked
|
||||
* @param {string} event - Event type
|
||||
* @param {String} event - Event type
|
||||
*/
|
||||
trigger(event, ...args) {
|
||||
const handlers = this.events[event];
|
||||
@ -575,8 +575,8 @@ class Ads {
|
||||
|
||||
/**
|
||||
* Add event listeners
|
||||
* @param {string} event - Event type
|
||||
* @param {function} callback - Callback for when event occurs
|
||||
* @param {String} event - Event type
|
||||
* @param {Function} callback - Callback for when event occurs
|
||||
* @return {Ads}
|
||||
*/
|
||||
on(event, callback) {
|
||||
@ -594,8 +594,8 @@ class Ads {
|
||||
* The advertisement has 12 seconds to get its things together. We stop this timer when the
|
||||
* advertisement is playing, or when a user action is required to start, then we clear the
|
||||
* timer on ad ready
|
||||
* @param {number} time
|
||||
* @param {string} from
|
||||
* @param {Number} time
|
||||
* @param {String} from
|
||||
*/
|
||||
startSafetyTimer(time, from) {
|
||||
this.player.debug.log(`Safety timer invoked from: ${from}`);
|
||||
@ -608,7 +608,7 @@ class Ads {
|
||||
|
||||
/**
|
||||
* Clear our safety timer(s)
|
||||
* @param {string} from
|
||||
* @param {String} from
|
||||
*/
|
||||
clearSafetyTimer(from) {
|
||||
if (!is.nullOrUndefined(this.safetyTimer)) {
|
||||
|
||||
@ -403,7 +403,7 @@ class Plyr {
|
||||
|
||||
/**
|
||||
* Toggle playback based on current status
|
||||
* @param {boolean} input
|
||||
* @param {Boolean} input
|
||||
*/
|
||||
togglePlay(input) {
|
||||
// Toggle based on current state if nothing passed
|
||||
@ -437,7 +437,7 @@ class Plyr {
|
||||
|
||||
/**
|
||||
* Rewind
|
||||
* @param {number} seekTime - how far to rewind in seconds. Defaults to the config.seekTime
|
||||
* @param {Number} seekTime - how far to rewind in seconds. Defaults to the config.seekTime
|
||||
*/
|
||||
rewind(seekTime) {
|
||||
this.currentTime = this.currentTime - (is.number(seekTime) ? seekTime : this.config.seekTime);
|
||||
@ -445,7 +445,7 @@ class Plyr {
|
||||
|
||||
/**
|
||||
* Fast forward
|
||||
* @param {number} seekTime - how far to fast forward in seconds. Defaults to the config.seekTime
|
||||
* @param {Number} seekTime - how far to fast forward in seconds. Defaults to the config.seekTime
|
||||
*/
|
||||
forward(seekTime) {
|
||||
this.currentTime = this.currentTime + (is.number(seekTime) ? seekTime : this.config.seekTime);
|
||||
@ -453,7 +453,7 @@ class Plyr {
|
||||
|
||||
/**
|
||||
* Seek to a time
|
||||
* @param {number} input - where to seek to in seconds. Defaults to 0 (the start)
|
||||
* @param {Number} input - where to seek to in seconds. Defaults to 0 (the start)
|
||||
*/
|
||||
set currentTime(input) {
|
||||
// Bail if media duration isn't available yet
|
||||
@ -523,7 +523,7 @@ class Plyr {
|
||||
|
||||
/**
|
||||
* Set the player volume
|
||||
* @param {number} value - must be between 0 and 1. Defaults to the value from local storage and config.volume if not set in storage
|
||||
* @param {Number} value - must be between 0 and 1. Defaults to the value from local storage and config.volume if not set in storage
|
||||
*/
|
||||
set volume(value) {
|
||||
let volume = value;
|
||||
@ -574,7 +574,7 @@ class Plyr {
|
||||
|
||||
/**
|
||||
* Increase volume
|
||||
* @param {boolean} step - How much to decrease by (between 0 and 1)
|
||||
* @param {Boolean} step - How much to decrease by (between 0 and 1)
|
||||
*/
|
||||
increaseVolume(step) {
|
||||
const volume = this.media.muted ? 0 : this.volume;
|
||||
@ -583,7 +583,7 @@ class Plyr {
|
||||
|
||||
/**
|
||||
* Decrease volume
|
||||
* @param {boolean} step - How much to decrease by (between 0 and 1)
|
||||
* @param {Boolean} step - How much to decrease by (between 0 and 1)
|
||||
*/
|
||||
decreaseVolume(step) {
|
||||
this.increaseVolume(-step);
|
||||
@ -591,7 +591,7 @@ class Plyr {
|
||||
|
||||
/**
|
||||
* Set muted state
|
||||
* @param {boolean} mute
|
||||
* @param {Boolean} mute
|
||||
*/
|
||||
set muted(mute) {
|
||||
let toggle = mute;
|
||||
@ -643,7 +643,7 @@ class Plyr {
|
||||
|
||||
/**
|
||||
* Set playback speed
|
||||
* @param {number} speed - the speed of playback (0.5-2.0)
|
||||
* @param {Number} speed - the speed of playback (0.5-2.0)
|
||||
*/
|
||||
set speed(input) {
|
||||
let speed = null;
|
||||
@ -690,7 +690,7 @@ class Plyr {
|
||||
/**
|
||||
* Set playback quality
|
||||
* Currently HTML5 & YouTube only
|
||||
* @param {number} input - Quality level
|
||||
* @param {Number} input - Quality level
|
||||
*/
|
||||
set quality(input) {
|
||||
const config = this.config.quality;
|
||||
@ -740,7 +740,7 @@ class Plyr {
|
||||
/**
|
||||
* Toggle loop
|
||||
* TODO: Finish fancy new logic. Set the indicator on load as user may pass loop as config
|
||||
* @param {boolean} input - Whether to loop or not
|
||||
* @param {Boolean} input - Whether to loop or not
|
||||
*/
|
||||
set loop(input) {
|
||||
const toggle = is.boolean(input) ? input : this.config.loop.active;
|
||||
@ -800,7 +800,7 @@ class Plyr {
|
||||
|
||||
/**
|
||||
* Set new media source
|
||||
* @param {object} input - The new source object (see docs)
|
||||
* @param {Object} input - The new source object (see docs)
|
||||
*/
|
||||
set source(input) {
|
||||
source.change.call(this, input);
|
||||
@ -824,7 +824,7 @@ class Plyr {
|
||||
|
||||
/**
|
||||
* Set the poster image for a video
|
||||
* @param {input} - the URL for the new poster image
|
||||
* @param {String} input - the URL for the new poster image
|
||||
*/
|
||||
set poster(input) {
|
||||
if (!this.isVideo) {
|
||||
@ -848,7 +848,7 @@ class Plyr {
|
||||
|
||||
/**
|
||||
* Set the autoplay state
|
||||
* @param {boolean} input - Whether to autoplay or not
|
||||
* @param {Boolean} input - Whether to autoplay or not
|
||||
*/
|
||||
set autoplay(input) {
|
||||
const toggle = is.boolean(input) ? input : this.config.autoplay;
|
||||
@ -864,7 +864,7 @@ class Plyr {
|
||||
|
||||
/**
|
||||
* Toggle captions
|
||||
* @param {boolean} input - Whether to enable captions
|
||||
* @param {Boolean} input - Whether to enable captions
|
||||
*/
|
||||
toggleCaptions(input) {
|
||||
captions.toggle.call(this, input, false);
|
||||
@ -872,7 +872,7 @@ class Plyr {
|
||||
|
||||
/**
|
||||
* Set the caption track by index
|
||||
* @param {number} - Caption index
|
||||
* @param {Number} - Caption index
|
||||
*/
|
||||
set currentTrack(input) {
|
||||
captions.set.call(this, input, false);
|
||||
@ -889,7 +889,7 @@ class Plyr {
|
||||
/**
|
||||
* Set the wanted language for captions
|
||||
* Since tracks can be added later it won't update the actual caption track until there is a matching track
|
||||
* @param {string} - Two character ISO language code (e.g. EN, FR, PT, etc)
|
||||
* @param {String} - Two character ISO language code (e.g. EN, FR, PT, etc)
|
||||
*/
|
||||
set language(input) {
|
||||
captions.setLanguage.call(this, input, false);
|
||||
@ -962,7 +962,7 @@ class Plyr {
|
||||
|
||||
/**
|
||||
* Toggle the player controls
|
||||
* @param {boolean} [toggle] - Whether to show the controls
|
||||
* @param {Boolean} [toggle] - Whether to show the controls
|
||||
*/
|
||||
toggleControls(toggle) {
|
||||
// Don't toggle if missing UI support or if it's audio
|
||||
@ -995,8 +995,8 @@ class Plyr {
|
||||
|
||||
/**
|
||||
* Add event listeners
|
||||
* @param {string} event - Event type
|
||||
* @param {function} callback - Callback for when event occurs
|
||||
* @param {String} event - Event type
|
||||
* @param {Function} callback - Callback for when event occurs
|
||||
*/
|
||||
on(event, callback) {
|
||||
on.call(this, this.elements.container, event, callback);
|
||||
@ -1004,8 +1004,8 @@ class Plyr {
|
||||
|
||||
/**
|
||||
* Add event listeners once
|
||||
* @param {string} event - Event type
|
||||
* @param {function} callback - Callback for when event occurs
|
||||
* @param {String} event - Event type
|
||||
* @param {Function} callback - Callback for when event occurs
|
||||
*/
|
||||
once(event, callback) {
|
||||
once.call(this, this.elements.container, event, callback);
|
||||
@ -1013,8 +1013,8 @@ class Plyr {
|
||||
|
||||
/**
|
||||
* Remove event listeners
|
||||
* @param {string} event - Event type
|
||||
* @param {function} callback - Callback for when event occurs
|
||||
* @param {String} event - Event type
|
||||
* @param {Function} callback - Callback for when event occurs
|
||||
*/
|
||||
off(event, callback) {
|
||||
off(this.elements.container, event, callback);
|
||||
@ -1024,8 +1024,8 @@ class Plyr {
|
||||
* Destroy an instance
|
||||
* Event listeners are removed when elements are removed
|
||||
* http://stackoverflow.com/questions/12528049/if-a-dom-element-is-removed-are-its-listeners-also-removed-from-memory
|
||||
* @param {function} callback - Callback for when destroy is complete
|
||||
* @param {boolean} soft - Whether it's a soft destroy (for source changes etc)
|
||||
* @param {Function} callback - Callback for when destroy is complete
|
||||
* @param {Boolean} soft - Whether it's a soft destroy (for source changes etc)
|
||||
*/
|
||||
destroy(callback, soft = false) {
|
||||
if (!this.ready) {
|
||||
@ -1124,7 +1124,7 @@ class Plyr {
|
||||
|
||||
/**
|
||||
* Check for support for a mime type (HTML5 only)
|
||||
* @param {string} type - Mime type
|
||||
* @param {String} type - Mime type
|
||||
*/
|
||||
supports(type) {
|
||||
return support.mime.call(this, type);
|
||||
@ -1132,9 +1132,9 @@ class Plyr {
|
||||
|
||||
/**
|
||||
* Check for support
|
||||
* @param {string} type - Player type (audio/video)
|
||||
* @param {string} provider - Provider (html5/youtube/vimeo)
|
||||
* @param {bool} inline - Where player has `playsinline` sttribute
|
||||
* @param {String} type - Player type (audio/video)
|
||||
* @param {String} provider - Provider (html5/youtube/vimeo)
|
||||
* @param {Boolean} inline - Where player has `playsinline` sttribute
|
||||
*/
|
||||
static supported(type, provider, inline) {
|
||||
return support.check(type, provider, inline);
|
||||
@ -1142,8 +1142,8 @@ class Plyr {
|
||||
|
||||
/**
|
||||
* Load an SVG sprite into the page
|
||||
* @param {string} url - URL for the SVG sprite
|
||||
* @param {string} [id] - Unique ID
|
||||
* @param {String} url - URL for the SVG sprite
|
||||
* @param {String} [id] - Unique ID
|
||||
*/
|
||||
static loadSprite(url, id) {
|
||||
return loadSprite(url, id);
|
||||
@ -1152,7 +1152,7 @@ class Plyr {
|
||||
/**
|
||||
* Setup multiple instances
|
||||
* @param {*} selector
|
||||
* @param {object} options
|
||||
* @param {Object} options
|
||||
*/
|
||||
static setup(selector, options = {}) {
|
||||
let targets = null;
|
||||
|
||||
@ -6,8 +6,8 @@ import is from './is';
|
||||
|
||||
/**
|
||||
* Parse a string to a URL object
|
||||
* @param {string} input - the URL to be parsed
|
||||
* @param {boolean} safe - failsafe parsing
|
||||
* @param {String} input - the URL to be parsed
|
||||
* @param {Boolean} safe - failsafe parsing
|
||||
*/
|
||||
export function parseUrl(input, safe = true) {
|
||||
let url = input;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user