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

Build changes, sprite.svg => plyr.svg

Browse Source
This commit is contained in:
Sam Potts 2016-05-15 18:57:21 +10:00
parent 602944ea4f
commit 21c2276359
7 changed files with 89 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
changelog.md
View File

@ -1,5 +1,9 @@
# Changelog
## v1.6.9
- Added 'latest' CDN option
- Renamed `sprite.svg` to `plyr.svg` to be inline with the other package files
## v1.6.8
- Fix for bug introduced in v1.6.7

0
dist/sprite.svg → dist/plyr.svg vendored
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.7 KiB

After

Width:  |  Height:  |  Size: 3.7 KiB

2
docs/index.html
View File

@ -79,7 +79,7 @@
<script>
(function() {
[
'../dist/sprite.svg',
'../dist/plyr.svg',
'dist/docs.svg'
]
.forEach(function(u) {

92
gulpfile.js
View File

@ -1,7 +1,7 @@
// ==========================================================================
// Gulp build script
// ==========================================================================
/*global require, __dirname*/
/*global require, __dirname,Buffer*/
/*jshint -W079 */
var fs = require("fs"),
@ -19,10 +19,10 @@ var fs = require("fs"),
svgmin = require("gulp-svgmin"),
rename = require("gulp-rename"),
s3 = require("gulp-s3"),
gzip = require("gulp-gzip"),
replace = require("gulp-replace"),
open = require("gulp-open"),
size = require("gulp-size");
size = require("gulp-size"),
through = require("through2");
var root = __dirname,
paths = {
@ -74,6 +74,29 @@ function loadJSON(path) {
}
}
// Create a file from a string
// http://stackoverflow.com/questions/23230569/how-do-you-create-a-file-from-a-string-in-gulp
function createFile(filename, string) {
var src = require('stream').Readable({
objectMode: true
});
src._read = function () {
this.push(new gutil.File({
cwd: "",
base: "",
path: filename,
contents: new Buffer(string),
// stats also required for some functions
// https://nodejs.org/api/fs.html#fs_class_fs_stats
stat: {
size: string.length
}
}));
this.push(null);
}
return src
}
var build = {
js: function (files, bundle) {
for (var key in files) {
@ -143,7 +166,7 @@ var build = {
}]
}))
.pipe(svgstore())
.pipe(rename({ basename: (bundle == "plyr" ? "sprite" : bundle) }))
.pipe(rename({ basename: bundle }))
.pipe(gulp.dest(paths[bundle].output));
});
}
@ -200,15 +223,21 @@ options = {
headers: {
"Cache-Control": "max-age=" + maxAge,
"Vary": "Accept-Encoding"
},
gzippedOnly: true
}
},
docs: {
headers: {
"Cache-Control": "public, must-revalidate, proxy-revalidate, max-age=0",
"Cache-Control": "no-cache, no-store, must-revalidate, max-age=0",
"Vary": "Accept-Encoding"
},
gzippedOnly: true
}
},
symlinks: function(version, filename) {
return {
headers: {
"X-Amz-Website-Redirect-Location": "/" + version + "/" + filename,
"Cache-Control": "no-cache, no-store, must-revalidate, max-age=0"
}
}
}
};
@ -217,15 +246,16 @@ if("cdn" in aws) {
var regex = "(?:0|[1-9][0-9]*)\\.(?:0|[1-9][0-9]*)\.(?:0|[1-9][0-9]*)(?:-[\\da-z\\-]+(?:\.[\\da-z\\-]+)*)?(?:\\+[\\da-z\\-]+(?:\.[\\da-z\\-]+)*)?",
cdnpath = new RegExp(aws.cdn.bucket + "\/" + regex, "gi"),
semver = new RegExp("v" + regex, "gi"),
localpath = new RegExp("(\.\.\/)?dist", "gi");
localpath = new RegExp("(\.\.\/)?dist", "gi"),
latest = "https://" + aws.cdn.bucket + "/latest";
}
// Publish version to CDN bucket
gulp.task("cdn", function () {
console.log("Uploading " + version + " to " + aws.cdn.bucket);
console.log("Uploading " + version + " to " + aws.cdn.bucket + "...");
// Upload to CDN
gulp.src(paths.upload)
return gulp.src(paths.upload)
.pipe(size({
showFiles: true,
gzip: true
@ -233,13 +263,12 @@ gulp.task("cdn", function () {
.pipe(rename(function (path) {
path.dirname = path.dirname.replace(".", version);
}))
.pipe(gzip())
.pipe(s3(aws.cdn, options.cdn));
});
// Publish to Docs bucket
gulp.task("docs", function () {
console.log("Uploading " + version + " docs to " + aws.docs.bucket);
console.log("Uploading " + version + " docs to " + aws.docs.bucket + "...");
// Replace versioned files in readme.md
gulp.src([root + "/readme.md"])
@ -254,17 +283,38 @@ gulp.task("docs", function () {
// Replace local file paths with remote paths in docs
// e.g. "../dist/plyr.js" to "https://cdn.plyr.io/x.x.x/plyr.js"
gulp.src([paths.docs.root + "*.html"])
.pipe(replace(localpath, "https://" + aws.cdn.bucket + "/" + version))
.pipe(gzip())
.pipe(replace(localpath, latest))
.pipe(s3(aws.docs, options.docs));
// Upload error.html to cdn (as well as docs site)
gulp.src([paths.docs.root + "error.html"])
.pipe(replace(localpath, "https://" + aws.cdn.bucket + "/" + version))
.pipe(gzip())
return gulp.src([paths.docs.root + "error.html"])
.pipe(replace(localpath, latest))
.pipe(s3(aws.cdn, options.docs));
});
// Open the docs site to check it's sweet
gulp.task("symlinks", function () {
console.log("Updating symlinks...");
return gulp.src(paths.upload)
.pipe(through.obj(function (chunk, enc, callback) {
if (chunk.stat.isFile()) {
// Get the filename
var filename = chunk.path.split("/").reverse()[0];
// Create the 0 byte redirect files to upload
createFile(filename, "")
.pipe(rename(function (path) {
path.dirname = path.dirname.replace(".", "latest");
}))
// Upload to S3 with correct headers
.pipe(s3(aws.cdn, options.symlinks(version, filename)));
}
callback(null, chunk);
}));
});
// Open the docs site to check it's sweet
gulp.task("open", function () {
console.log("Opening " + aws.docs.bucket + "...");
@ -272,7 +322,7 @@ gulp.task("open", function () {
// A file must be specified or gulp will skip the task
// Doesn't matter which file since we set the URL above
// Weird, I know...
gulp.src([paths.docs.root + "index.html"])
return gulp.src([paths.docs.root + "index.html"])
.pipe(open("", {
url: "http://" + aws.docs.bucket
}));
@ -280,5 +330,5 @@ gulp.task("open", function () {
// Do everything
gulp.task("publish", function () {
run(tasks.js, tasks.less, tasks.sprite, "cdn", "docs");
run(tasks.js, tasks.less, tasks.sprite, "cdn", "docs", "symlinks");
});

10
package.json
View File

@ -1,6 +1,6 @@
{
"name": "plyr",
"version": "1.6.8",
"version": "1.6.9",
"description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
"homepage": "http://plyr.io",
"main": "src/js/plyr.js",
@ -8,10 +8,9 @@
"devDependencies": {
"gulp": "^3.9.1",
"gulp-autoprefixer": "^3.1.0",
"gulp-concat": "^2.3.3",
"gulp-gzip": "^1.0.0",
"gulp-less": "^3.0.5",
"gulp-clean-css": "^2.0.6",
"gulp-concat": "^2.3.3",
"gulp-less": "^3.0.5",
"gulp-open": "^2.0.0",
"gulp-rename": "^1.2.0",
"gulp-replace": "^0.5.3",
@ -22,7 +21,8 @@
"gulp-svgstore": "^5.0.5",
"gulp-uglify": "^1.5.3",
"gulp-util": "^3.0.7",
"run-sequence": "^1.1.5"
"run-sequence": "^1.1.5",
"through2": "^2.0.1"
},
"keywords": [
"HTML5 Video",

14
readme.md
View File

@ -40,7 +40,7 @@ If you have any cool ideas or features, please let me know by [creating an issue
## Implementation
Check `docs/index.html` and `docs/dist/docs.js` for an example setup.
**Heads up:** the example `index.html` file needs to be served from a webserver (such as Apache, Nginx, IIS or similar) unless you change the file sources to include http or https. e.g. change `//cdn.plyr.io/1.6.8/plyr.js` to `https://cdn.plyr.io/1.6.8/plyr.js`
**Heads up:** the example `index.html` file needs to be served from a webserver (such as Apache, Nginx, IIS or similar) unless you change the file sources to include http or https. e.g. change `//cdn.plyr.io/1.6.9/plyr.js` to `https://cdn.plyr.io/1.6.9/plyr.js`
### Node Package Manager (NPM)
@ -71,11 +71,11 @@ More info is on [npm](https://www.npmjs.com/package/ember-cli-plyr) and [GitHub]
If you want to use our CDN, you can use the following:
```html
<link rel="stylesheet" href="https://cdn.plyr.io/1.6.8/plyr.css">
<script src="https://cdn.plyr.io/1.6.8/plyr.js"></script>
<link rel="stylesheet" href="https://cdn.plyr.io/1.6.9/plyr.css">
<script src="https://cdn.plyr.io/1.6.9/plyr.js"></script>
```
You can also access the `sprite.svg` file at `https://cdn.plyr.io/1.6.8/sprite.svg`.
The SVG sprite/defs file can be found here: `https://cdn.plyr.io/1.6.9/plyr.svg`.
### CSS & Styling
If you want to use the default css, add the `plyr.css` file from `/dist` into your head, or even better use `plyr.less` or `plyr.scss` file included in `/src` in your build to save a request.
@ -94,7 +94,7 @@ The SVG sprite for the controls icons can be loaded two ways:
#### Using the `iconUrl` option
This method requires the SVG sprite to be hosted on the *same domain* as your page hosting the player. Currently no browser supports cross origin SVG sprites due to XSS issues. Fingers crossed this will come soon though. An example value for this option would be:
```
/path/to/sprite.svg
/path/to/plyr.svg
```
#### Using AJAX
@ -113,7 +113,7 @@ Using AJAX means you can load the sprite from a different origin. Avoiding the i
c.innerHTML = a.responseText;
b.insertBefore(c, b.childNodes[0]);
};
})(document, 'https://cdn.plyr.io/1.6.8/sprite.svg');
})(document, 'https://cdn.plyr.io/1.6.9/plyr.svg');
</script>
```
@ -188,7 +188,7 @@ Be sure to [validate your caption files](https://quuz.org/webvtt/)
Here's an example of a default setup:
```html
<script src="https://cdn.plyr.io/1.6.8/plyr.js"></script>
<script src="https://cdn.plyr.io/1.6.9/plyr.js"></script>
<script>plyr.setup();</script>
```

2
src/js/plyr.js
View File

@ -1,6 +1,6 @@
// ==========================================================================
// Plyr
// plyr.js v1.6.8
// plyr.js v1.6.9
// https://github.com/selz/plyr
// License: The MIT License (MIT)
// ==========================================================================