Merge branch 'master' of github.com:selz/plyr
Conflicts: .gitignore
This commit is contained in:
Sam Potts
2
.gitignore
vendored
2
.gitignore
vendored
@ -3,4 +3,4 @@ node_modules
|
||||
*.sublime-workspace
|
||||
.DS_Store
|
||||
aws.json
|
||||
docs/index.dev.html
|
||||
docs/index.dev.html
|
||||
@ -1,6 +1,5 @@
|
||||
{
|
||||
"name": "plyr",
|
||||
"version": "1.0.17",
|
||||
"description": "A simple HTML5 media player using custom controls",
|
||||
"homepage": "http://plyr.io",
|
||||
"keywords": [
|
||||
@ -14,10 +13,11 @@
|
||||
],
|
||||
"dependencies": {},
|
||||
"main": [
|
||||
"dist/css/plyr.css",
|
||||
"dist/js/plyr.js",
|
||||
"dist/plyr.css",
|
||||
"dist/plyr.js",
|
||||
"dist/sprite.svg",
|
||||
"src/less/plyr.less",
|
||||
"src/sass/plyr.sass",
|
||||
"src/js/plyr.js"
|
||||
],
|
||||
"ignore": [
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
"js": {
|
||||
"docs.js": [
|
||||
"docs/src/js/lib/hogan-3.0.2.mustache.js",
|
||||
"docs/dist/js/templates.js",
|
||||
"docs/dist/templates.js",
|
||||
"docs/src/js/docs.js"
|
||||
]
|
||||
}
|
||||
|
||||
@ -1,6 +1,9 @@
|
||||
# Changelog
|
||||
|
||||
## v1.0.7
|
||||
## v1.0.18
|
||||
- Added CDN references
|
||||
|
||||
## v1.0.17
|
||||
- SASS support added (thanks to @brunowego)
|
||||
- Docs completely seperated to avoid any confusion
|
||||
- New gulp tasks (will add more documentation for this)
|
||||
|
||||
0
dist/css/plyr.css → dist/plyr.css
vendored
0
dist/css/plyr.css → dist/plyr.css
vendored
0
dist/js/plyr.js → dist/plyr.js
vendored
0
dist/js/plyr.js → dist/plyr.js
vendored
2
docs/dist/js/docs.js → docs/dist/docs.js
vendored
2
docs/dist/js/docs.js → docs/dist/docs.js
vendored
File diff suppressed because one or more lines are too long
@ -8,10 +8,10 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<!-- Styles -->
|
||||
<link rel="stylesheet" href="../dist/css/plyr.css">
|
||||
<link rel="stylesheet" href="//cdn.plyr.io/1.0.17/plyr.css">
|
||||
|
||||
<!-- Docs styles -->
|
||||
<link rel="stylesheet" href="dist/css/docs.css">
|
||||
<link rel="stylesheet" href="//cdn.plyr.io/1.0.17/docs.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
@ -67,13 +67,13 @@
|
||||
<!-- Load SVG defs -->
|
||||
<!-- You should bundle all SVG/Icons into one file using a build tool such as gulp and svg store -->
|
||||
<script>
|
||||
(function(d,p){var a=new XMLHttpRequest(),b=d.body;a.open("GET",p,!0);a.send();a.onload=function(){var c=d.createElement("div");c.style.display="none";c.innerHTML=a.responseText;b.insertBefore(c,b.childNodes[0])}})(document,"../dist/sprite.svg");
|
||||
(function(d,p){var a=new XMLHttpRequest(),b=d.body;a.open("GET",p,!0);a.send();a.onload=function(){var c=d.createElement("div");c.style.display="none";c.innerHTML=a.responseText;b.insertBefore(c,b.childNodes[0])}})(document,"//cdn.plyr.io/1.0.17/sprite.svg");
|
||||
</script>
|
||||
|
||||
<!-- Plyr core script -->
|
||||
<script src="../dist/js/plyr.js"></script>
|
||||
<script src="//cdn.plyr.io/1.0.17/plyr.js"></script>
|
||||
|
||||
<!-- Docs script -->
|
||||
<script src="dist/js/docs.js"></script>
|
||||
<script src="//cdn.plyr.io/1.0.17/docs.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -15,8 +15,8 @@ plyr.setup({
|
||||
});
|
||||
|
||||
// Google analytics
|
||||
// For demo site (http://plyr.io) only
|
||||
if(document.domain === "plyr.io") {
|
||||
// For demo site (http://[www.]plyr.io) only
|
||||
if(document.domain.indexOf("plyr.io") > -1) {
|
||||
(function(i,s,o,g,r,a,m){i.GoogleAnalyticsObject=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
|
||||
117
gulpfile.js
117
gulpfile.js
@ -16,10 +16,14 @@ var fs = require("fs"),
|
||||
prefix = require("gulp-autoprefixer"),
|
||||
svgstore = require("gulp-svgstore"),
|
||||
svgmin = require("gulp-svgmin"),
|
||||
hogan = require("gulp-hogan-compile");
|
||||
hogan = require("gulp-hogan-compile"),
|
||||
rename = require("gulp-rename"),
|
||||
s3 = require("gulp-s3"),
|
||||
gzip = require("gulp-gzip"),
|
||||
replace = require("gulp-replace");
|
||||
|
||||
var root = __dirname,
|
||||
paths = {
|
||||
paths = {
|
||||
plyr: {
|
||||
// Source paths
|
||||
src: {
|
||||
@ -29,11 +33,7 @@ var root = __dirname,
|
||||
sprite: path.join(root, "src/sprite/*.svg")
|
||||
},
|
||||
// Output paths
|
||||
output: {
|
||||
js: path.join(root, "dist/js/"),
|
||||
css: path.join(root, "dist/css/"),
|
||||
sprite: path.join(root, "dist/")
|
||||
}
|
||||
output: path.join(root, "dist/")
|
||||
},
|
||||
docs: {
|
||||
// Source paths
|
||||
@ -43,11 +43,11 @@ var root = __dirname,
|
||||
templates: path.join(root, "docs/src/templates/*.html")
|
||||
},
|
||||
// Output paths
|
||||
output: {
|
||||
js: path.join(root, "docs/dist/js/"),
|
||||
css: path.join(root, "docs/dist/css/")
|
||||
}
|
||||
}
|
||||
output: path.join(root, "docs/dist/"),
|
||||
// Docs
|
||||
root: path.join(root, "docs/")
|
||||
},
|
||||
upload: [path.join(root, "dist/**"), path.join(root, "docs/dist/**")]
|
||||
},
|
||||
|
||||
// Task arrays
|
||||
@ -58,7 +58,8 @@ tasks = {
|
||||
},
|
||||
|
||||
// Fetch bundles from JSON
|
||||
bundles = loadJSON(path.join(root, "bundles.json"));
|
||||
bundles = loadJSON(path.join(root, "bundles.json")),
|
||||
package = loadJSON(path.join(root, "package.json"));
|
||||
|
||||
// Load json
|
||||
function loadJSON(path) {
|
||||
@ -66,7 +67,7 @@ function loadJSON(path) {
|
||||
}
|
||||
|
||||
var build = {
|
||||
js: function (files, bundle, output) {
|
||||
js: function (files, bundle) {
|
||||
for (var key in files) {
|
||||
(function(key) {
|
||||
var name = "js-" + key;
|
||||
@ -77,12 +78,12 @@ var build = {
|
||||
.src(bundles[bundle].js[key])
|
||||
.pipe(concat(key))
|
||||
.pipe(uglify())
|
||||
.pipe(gulp.dest(output));
|
||||
.pipe(gulp.dest(paths[bundle].output));
|
||||
});
|
||||
})(key);
|
||||
}
|
||||
},
|
||||
less: function(files, bundle, output) {
|
||||
less: function(files, bundle) {
|
||||
for (var key in files) {
|
||||
(function (key) {
|
||||
var name = "less-" + key;
|
||||
@ -96,12 +97,12 @@ var build = {
|
||||
.pipe(concat(key))
|
||||
.pipe(prefix(["last 2 versions"], { cascade: true }))
|
||||
.pipe(minify())
|
||||
.pipe(gulp.dest(output));
|
||||
.pipe(gulp.dest(paths[bundle].output));
|
||||
});
|
||||
})(key);
|
||||
}
|
||||
},
|
||||
sass: function(files, bundle, output) {
|
||||
sass: function(files, bundle) {
|
||||
for (var key in files) {
|
||||
(function (key) {
|
||||
var name = "sass-" + key;
|
||||
@ -115,51 +116,51 @@ var build = {
|
||||
.pipe(concat(key))
|
||||
.pipe(prefix(["last 2 versions"], { cascade: true }))
|
||||
.pipe(minify())
|
||||
.pipe(gulp.dest(output));
|
||||
.pipe(gulp.dest(paths[bundle].output));
|
||||
});
|
||||
})(key);
|
||||
}
|
||||
},
|
||||
sprite: function(source, output) {
|
||||
sprite: function() {
|
||||
// Process Icons
|
||||
gulp.task("sprite", function () {
|
||||
return gulp
|
||||
.src(source)
|
||||
.src(paths.plyr.src.sprite)
|
||||
.pipe(svgmin({
|
||||
plugins: [{
|
||||
removeDesc: true
|
||||
}]
|
||||
}))
|
||||
.pipe(svgstore())
|
||||
.pipe(gulp.dest(output));
|
||||
.pipe(gulp.dest(paths.plyr.output));
|
||||
});
|
||||
},
|
||||
templates: function(source, output) {
|
||||
templates: function() {
|
||||
// Build templates
|
||||
gulp.task("templates", function () {
|
||||
return gulp
|
||||
.src(source)
|
||||
.src(paths.docs.src.templates)
|
||||
.pipe(hogan("templates.js", {
|
||||
wrapper: false,
|
||||
templateName: function (file) {
|
||||
return path.basename(file.relative.replace(/\\/g, "-"), path.extname(file.relative));
|
||||
}
|
||||
}))
|
||||
.pipe(gulp.dest(output));
|
||||
.pipe(gulp.dest(paths.docs.output));
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// Plyr core files
|
||||
build.js(bundles.plyr.js, "plyr", paths.plyr.output.js);
|
||||
build.less(bundles.plyr.less, "plyr", paths.plyr.output.css);
|
||||
build.sass(bundles.plyr.sass, "plyr", paths.plyr.output.css);
|
||||
build.sprite(paths.plyr.src.sprite, paths.plyr.output.sprite);
|
||||
build.js(bundles.plyr.js, "plyr");
|
||||
build.less(bundles.plyr.less, "plyr");
|
||||
build.sass(bundles.plyr.sass, "plyr");
|
||||
build.sprite();
|
||||
|
||||
// Docs files
|
||||
build.templates(paths.docs.src.templates, paths.docs.output.js);
|
||||
build.less(bundles.docs.less, "docs", paths.docs.output.css);
|
||||
build.js(bundles.docs.js, "docs", paths.docs.output.js);
|
||||
build.templates();
|
||||
build.less(bundles.docs.less, "docs");
|
||||
build.js(bundles.docs.js, "docs");
|
||||
|
||||
// Default gulp task
|
||||
gulp.task("default", function(){
|
||||
@ -187,4 +188,56 @@ gulp.task("watch", function () {
|
||||
gulp.watch(paths.docs.src.js, tasks.js);
|
||||
gulp.watch(paths.docs.src.less, tasks.less);
|
||||
gulp.watch(paths.docs.src.templates, "js");
|
||||
});
|
||||
|
||||
// Publish the docs site
|
||||
try {
|
||||
var aws = loadJSON(path.join(root, "aws.json"));
|
||||
}
|
||||
catch (e) { }
|
||||
|
||||
var version = package.version,
|
||||
maxAge = 31536000, // seconds 1 year
|
||||
options = {
|
||||
cdn: {
|
||||
headers: {
|
||||
"Cache-Control": "max-age=" + maxAge + ", no-transform, public",
|
||||
"Vary": "Accept-Encoding"
|
||||
},
|
||||
gzippedOnly: true
|
||||
},
|
||||
docs: {
|
||||
headers: {
|
||||
"Cache-Control": "public, must-revalidate, proxy-revalidate, max-age=0",
|
||||
"Vary": "Accept-Encoding"
|
||||
},
|
||||
gzippedOnly: true
|
||||
}
|
||||
},
|
||||
cdnpath = new RegExp(aws.cdn.bucket + "\/(\\d+\\.)?(\\d+\\.)?(\\*|\\d+)","gi");
|
||||
|
||||
gulp.task("cdn", function () {
|
||||
console.log("Uploading " + version + " to " + aws.cdn.bucket);
|
||||
|
||||
// Upload to CDN
|
||||
gulp.src(paths.upload)
|
||||
.pipe(rename(function (path) {
|
||||
path.dirname = path.dirname.replace(".", version);
|
||||
}))
|
||||
.pipe(gzip())
|
||||
.pipe(s3(aws.cdn, options.cdn));
|
||||
});
|
||||
|
||||
gulp.task("docs", function () {
|
||||
console.log("Uploading " + version + " docs to " + aws.docs.bucket);
|
||||
|
||||
// Replace versioned files in index.html
|
||||
gulp.src([paths.docs.root + "index.html"])
|
||||
.pipe(replace(cdnpath, aws.cdn.bucket + "/" + version))
|
||||
.pipe(gzip())
|
||||
.pipe(s3(aws.docs, options.docs));
|
||||
});
|
||||
|
||||
gulp.task("publish", function () {
|
||||
run("templates", tasks.js, tasks.less, "sprite", "cdn", "docs");
|
||||
});
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "plyr",
|
||||
"version": "1.0.17",
|
||||
"version": "1.0.18",
|
||||
"description": "A simple HTML5 media player using custom controls",
|
||||
"homepage": "http://plyr.io",
|
||||
"main": "gulpfile.js",
|
||||
@ -9,9 +9,13 @@
|
||||
"gulp": "~3.8.6",
|
||||
"gulp-autoprefixer": "^0.0.8",
|
||||
"gulp-concat": "~2.3.3",
|
||||
"gulp-gzip": "^1.0.0",
|
||||
"gulp-hogan-compile": "^0.4.1",
|
||||
"gulp-less": "~1.3.1",
|
||||
"gulp-minify-css": "~0.3.6",
|
||||
"gulp-rename": "^1.2.0",
|
||||
"gulp-replace": "^0.5.3",
|
||||
"gulp-s3": "^0.3.0",
|
||||
"gulp-sass": "^1.3.3",
|
||||
"gulp-svgmin": "^1.0.0",
|
||||
"gulp-svgstore": "^5.0.0",
|
||||
|
||||
18
readme.md
18
readme.md
@ -30,7 +30,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/js/docs.js` for an example setup.
|
||||
Check `docs/index.html` and `docs/dist/docs.js` for an example setup.
|
||||
|
||||
### Bower
|
||||
If bower is your thang, you can grab Plyr using:
|
||||
@ -39,11 +39,21 @@ bower install plyr
|
||||
```
|
||||
More info on setting up dependencies can be found in the [Bower Docs](http://bower.io/docs/creating-packages/#maintaining-dependencies)
|
||||
|
||||
### CDN
|
||||
If you want to use our CDN, you can use the following. Currently it's HTTP only.
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="http://cdn.plyr.io/1.0.18/plyr.css">
|
||||
<script src="http://cdn.plyr.io/1.0.18/plyr.js"></script>
|
||||
```
|
||||
|
||||
You can also access the `sprite.svg` file at `http://cdn.plyr.io/1.0.18/sprite.svg`.
|
||||
|
||||
### CSS
|
||||
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.sass` file included in `/src` in your build to save a request.
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="dist/css/plyr.css">
|
||||
<link rel="stylesheet" href="dist/plyr.css">
|
||||
```
|
||||
|
||||
### SVG
|
||||
@ -62,7 +72,7 @@ The SVG sprite for the controls icons is loaded in by AJAX to help with performa
|
||||
c.innerHTML=a.responseText;
|
||||
b.insertBefore(c,b.childNodes[0])
|
||||
}
|
||||
})(document,"dist/svg/sprite.svg");
|
||||
})(document,"dist/sprite.svg");
|
||||
</script>
|
||||
```
|
||||
More info on SVG sprites here:
|
||||
@ -116,7 +126,7 @@ More info on CORS here:
|
||||
Much of the behaviour of the player is configurable when initialising the library. Below is an example of a default instance.
|
||||
|
||||
```html
|
||||
<script src="dist/js/plyr.js"></script>
|
||||
<script src="dist/plyr.js"></script>
|
||||
<script>
|
||||
plyr.setup({
|
||||
html: **your controls html**
|
||||
|
||||
Reference in New Issue
Block a user