Compare commits

..

9 Commits

Author SHA1 Message Date
26bd4d0833 Fix for fullscreen issues on Firefox
Fixes #38
2015-03-02 20:16:44 +11:00
b6d5ba43ec Merge branch 'master' of github.com:selz/plyr
Conflicts:
	.gitignore
2015-03-02 19:50:56 +11:00
6cbcfd75d1 Ignore 2015-03-02 19:48:27 +11:00
ce39369d84 Fixed domain check 2015-03-02 01:32:30 +11:00
e73eb87c7e Fixed domain check 2015-03-02 01:31:31 +11:00
daf2cf4b07 Merge branch 'develop' 2015-03-02 01:09:35 +11:00
beba315ec5 Ignore aws 2015-03-02 01:09:26 +11:00
880152d0a0 Added CDN references 2015-03-02 01:08:12 +11:00
4314853640 Publishing to AWS 2015-03-01 23:23:08 +11:00
15 changed files with 129 additions and 54 deletions

2
.gitignore vendored
View File

@ -2,3 +2,5 @@ node_modules
*.sublime-project *.sublime-project
*.sublime-workspace *.sublime-workspace
.DS_Store .DS_Store
aws.json
docs/index.dev.html

View File

@ -1,6 +1,5 @@
{ {
"name": "plyr", "name": "plyr",
"version": "1.0.17",
"description": "A simple HTML5 media player using custom controls", "description": "A simple HTML5 media player using custom controls",
"homepage": "http://plyr.io", "homepage": "http://plyr.io",
"keywords": [ "keywords": [
@ -14,10 +13,11 @@
], ],
"dependencies": {}, "dependencies": {},
"main": [ "main": [
"dist/css/plyr.css", "dist/plyr.css",
"dist/js/plyr.js", "dist/plyr.js",
"dist/sprite.svg", "dist/sprite.svg",
"src/less/plyr.less", "src/less/plyr.less",
"src/sass/plyr.sass",
"src/js/plyr.js" "src/js/plyr.js"
], ],
"ignore": [ "ignore": [

View File

@ -17,7 +17,7 @@
"js": { "js": {
"docs.js": [ "docs.js": [
"docs/src/js/lib/hogan-3.0.2.mustache.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" "docs/src/js/docs.js"
] ]
} }

View File

@ -1,6 +1,12 @@
# Changelog # Changelog
## v1.0.7 ## v1.0.19
- Fixed firefox fullscreen issue (#38)
## v1.0.18
- Added CDN references
## v1.0.17
- SASS support added (thanks to @brunowego) - SASS support added (thanks to @brunowego)
- Docs completely seperated to avoid any confusion - Docs completely seperated to avoid any confusion
- New gulp tasks (will add more documentation for this) - New gulp tasks (will add more documentation for this)

View File

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -8,10 +8,10 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Styles --> <!-- Styles -->
<link rel="stylesheet" href="../dist/css/plyr.css"> <link rel="stylesheet" href="//cdn.plyr.io/1.0.17/plyr.css">
<!-- Docs styles --> <!-- Docs styles -->
<link rel="stylesheet" href="dist/css/docs.css"> <link rel="stylesheet" href="//cdn.plyr.io/1.0.17/docs.css">
</head> </head>
<body> <body>
<header> <header>
@ -67,13 +67,13 @@
<!-- Load SVG defs --> <!-- Load SVG defs -->
<!-- You should bundle all SVG/Icons into one file using a build tool such as gulp and svg store --> <!-- You should bundle all SVG/Icons into one file using a build tool such as gulp and svg store -->
<script> <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> </script>
<!-- Plyr core script --> <!-- Plyr core script -->
<script src="../dist/js/plyr.js"></script> <script src="//cdn.plyr.io/1.0.17/plyr.js"></script>
<!-- Docs script --> <!-- Docs script -->
<script src="dist/js/docs.js"></script> <script src="//cdn.plyr.io/1.0.17/docs.js"></script>
</body> </body>
</html> </html>

View File

@ -15,8 +15,8 @@ plyr.setup({
}); });
// Google analytics // Google analytics
// For demo site (http://plyr.io) only // For demo site (http://[www.]plyr.io) only
if(document.domain === "plyr.io") { if(document.domain.indexOf("plyr.io") > -1) {
(function(i,s,o,g,r,a,m){i.GoogleAnalyticsObject=r;i[r]=i[r]||function(){ (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), (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) m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)

View File

@ -16,7 +16,11 @@ var fs = require("fs"),
prefix = require("gulp-autoprefixer"), prefix = require("gulp-autoprefixer"),
svgstore = require("gulp-svgstore"), svgstore = require("gulp-svgstore"),
svgmin = require("gulp-svgmin"), 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, var root = __dirname,
paths = { paths = {
@ -29,11 +33,7 @@ var root = __dirname,
sprite: path.join(root, "src/sprite/*.svg") sprite: path.join(root, "src/sprite/*.svg")
}, },
// Output paths // Output paths
output: { output: path.join(root, "dist/")
js: path.join(root, "dist/js/"),
css: path.join(root, "dist/css/"),
sprite: path.join(root, "dist/")
}
}, },
docs: { docs: {
// Source paths // Source paths
@ -43,11 +43,11 @@ var root = __dirname,
templates: path.join(root, "docs/src/templates/*.html") templates: path.join(root, "docs/src/templates/*.html")
}, },
// Output paths // Output paths
output: { output: path.join(root, "docs/dist/"),
js: path.join(root, "docs/dist/js/"), // Docs
css: path.join(root, "docs/dist/css/") root: path.join(root, "docs/")
} },
} upload: [path.join(root, "dist/**"), path.join(root, "docs/dist/**")]
}, },
// Task arrays // Task arrays
@ -58,7 +58,8 @@ tasks = {
}, },
// Fetch bundles from JSON // 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 // Load json
function loadJSON(path) { function loadJSON(path) {
@ -66,7 +67,7 @@ function loadJSON(path) {
} }
var build = { var build = {
js: function (files, bundle, output) { js: function (files, bundle) {
for (var key in files) { for (var key in files) {
(function(key) { (function(key) {
var name = "js-" + key; var name = "js-" + key;
@ -77,12 +78,12 @@ var build = {
.src(bundles[bundle].js[key]) .src(bundles[bundle].js[key])
.pipe(concat(key)) .pipe(concat(key))
.pipe(uglify()) .pipe(uglify())
.pipe(gulp.dest(output)); .pipe(gulp.dest(paths[bundle].output));
}); });
})(key); })(key);
} }
}, },
less: function(files, bundle, output) { less: function(files, bundle) {
for (var key in files) { for (var key in files) {
(function (key) { (function (key) {
var name = "less-" + key; var name = "less-" + key;
@ -96,12 +97,12 @@ var build = {
.pipe(concat(key)) .pipe(concat(key))
.pipe(prefix(["last 2 versions"], { cascade: true })) .pipe(prefix(["last 2 versions"], { cascade: true }))
.pipe(minify()) .pipe(minify())
.pipe(gulp.dest(output)); .pipe(gulp.dest(paths[bundle].output));
}); });
})(key); })(key);
} }
}, },
sass: function(files, bundle, output) { sass: function(files, bundle) {
for (var key in files) { for (var key in files) {
(function (key) { (function (key) {
var name = "sass-" + key; var name = "sass-" + key;
@ -115,51 +116,51 @@ var build = {
.pipe(concat(key)) .pipe(concat(key))
.pipe(prefix(["last 2 versions"], { cascade: true })) .pipe(prefix(["last 2 versions"], { cascade: true }))
.pipe(minify()) .pipe(minify())
.pipe(gulp.dest(output)); .pipe(gulp.dest(paths[bundle].output));
}); });
})(key); })(key);
} }
}, },
sprite: function(source, output) { sprite: function() {
// Process Icons // Process Icons
gulp.task("sprite", function () { gulp.task("sprite", function () {
return gulp return gulp
.src(source) .src(paths.plyr.src.sprite)
.pipe(svgmin({ .pipe(svgmin({
plugins: [{ plugins: [{
removeDesc: true removeDesc: true
}] }]
})) }))
.pipe(svgstore()) .pipe(svgstore())
.pipe(gulp.dest(output)); .pipe(gulp.dest(paths.plyr.output));
}); });
}, },
templates: function(source, output) { templates: function() {
// Build templates // Build templates
gulp.task("templates", function () { gulp.task("templates", function () {
return gulp return gulp
.src(source) .src(paths.docs.src.templates)
.pipe(hogan("templates.js", { .pipe(hogan("templates.js", {
wrapper: false, wrapper: false,
templateName: function (file) { templateName: function (file) {
return path.basename(file.relative.replace(/\\/g, "-"), path.extname(file.relative)); return path.basename(file.relative.replace(/\\/g, "-"), path.extname(file.relative));
} }
})) }))
.pipe(gulp.dest(output)); .pipe(gulp.dest(paths.docs.output));
}); });
} }
}; };
// Plyr core files // Plyr core files
build.js(bundles.plyr.js, "plyr", paths.plyr.output.js); build.js(bundles.plyr.js, "plyr");
build.less(bundles.plyr.less, "plyr", paths.plyr.output.css); build.less(bundles.plyr.less, "plyr");
build.sass(bundles.plyr.sass, "plyr", paths.plyr.output.css); build.sass(bundles.plyr.sass, "plyr");
build.sprite(paths.plyr.src.sprite, paths.plyr.output.sprite); build.sprite();
// Docs files // Docs files
build.templates(paths.docs.src.templates, paths.docs.output.js); build.templates();
build.less(bundles.docs.less, "docs", paths.docs.output.css); build.less(bundles.docs.less, "docs");
build.js(bundles.docs.js, "docs", paths.docs.output.js); build.js(bundles.docs.js, "docs");
// Default gulp task // Default gulp task
gulp.task("default", function(){ gulp.task("default", function(){
@ -188,3 +189,55 @@ gulp.task("watch", function () {
gulp.watch(paths.docs.src.less, tasks.less); gulp.watch(paths.docs.src.less, tasks.less);
gulp.watch(paths.docs.src.templates, "js"); 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");
});

View File

@ -1,6 +1,6 @@
{ {
"name": "plyr", "name": "plyr",
"version": "1.0.17", "version": "1.0.19",
"description": "A simple HTML5 media player using custom controls", "description": "A simple HTML5 media player using custom controls",
"homepage": "http://plyr.io", "homepage": "http://plyr.io",
"main": "gulpfile.js", "main": "gulpfile.js",
@ -9,9 +9,13 @@
"gulp": "~3.8.6", "gulp": "~3.8.6",
"gulp-autoprefixer": "^0.0.8", "gulp-autoprefixer": "^0.0.8",
"gulp-concat": "~2.3.3", "gulp-concat": "~2.3.3",
"gulp-gzip": "^1.0.0",
"gulp-hogan-compile": "^0.4.1", "gulp-hogan-compile": "^0.4.1",
"gulp-less": "~1.3.1", "gulp-less": "~1.3.1",
"gulp-minify-css": "~0.3.6", "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-sass": "^1.3.3",
"gulp-svgmin": "^1.0.0", "gulp-svgmin": "^1.0.0",
"gulp-svgstore": "^5.0.0", "gulp-svgstore": "^5.0.0",

View File

@ -30,7 +30,7 @@ If you have any cool ideas or features, please let me know by [creating an issue
## Implementation ## 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 ### Bower
If bower is your thang, you can grab Plyr using: 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) 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.19/plyr.css">
<script src="http://cdn.plyr.io/1.0.19/plyr.js"></script>
```
You can also access the `sprite.svg` file at `http://cdn.plyr.io/1.0.19/sprite.svg`.
### CSS ### 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. 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 ```html
<link rel="stylesheet" href="dist/css/plyr.css"> <link rel="stylesheet" href="dist/plyr.css">
``` ```
### SVG ### 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; c.innerHTML=a.responseText;
b.insertBefore(c,b.childNodes[0]) b.insertBefore(c,b.childNodes[0])
} }
})(document,"dist/svg/sprite.svg"); })(document,"dist/sprite.svg");
</script> </script>
``` ```
More info on SVG sprites here: 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. Much of the behaviour of the player is configurable when initialising the library. Below is an example of a default instance.
```html ```html
<script src="dist/js/plyr.js"></script> <script src="dist/plyr.js"></script>
<script> <script>
plyr.setup({ plyr.setup({
html: **your controls html** html: **your controls html**

View File

@ -1,6 +1,6 @@
// ========================================================================== // ==========================================================================
// Plyr // Plyr
// plyr.js v1.0.17 // plyr.js v1.0.19
// https://github.com/sampotts/plyr // https://github.com/sampotts/plyr
// ========================================================================== // ==========================================================================
// Credits: http://paypal.github.io/accessible-html5-video-player/ // Credits: http://paypal.github.io/accessible-html5-video-player/
@ -795,12 +795,12 @@
} }
// Toggle fullscreen // Toggle fullscreen
function _toggleFullscreen() { function _toggleFullscreen(event) {
// Check for native support // Check for native support
var nativeSupport = fullscreen.supportsFullScreen; var nativeSupport = fullscreen.supportsFullScreen;
// If it's a fullscreen change event, it's probably a native close // If it's a fullscreen change event, it's probably a native close
if(event.type === fullscreen.fullScreenEventName) { if(event && event.type === fullscreen.fullScreenEventName) {
config.fullscreen.active = fullscreen.isFullScreen(); config.fullscreen.active = fullscreen.isFullScreen();
} }
// If there's native support, use it // If there's native support, use it