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-workspace
.DS_Store
aws.json
docs/index.dev.html

View File

@ -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": [

View File

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

View File

@ -1,6 +1,12 @@
# 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)
- Docs completely seperated to avoid any confusion
- 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">
<!-- 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>

View File

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

View File

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

View File

@ -1,6 +1,6 @@
{
"name": "plyr",
"version": "1.0.17",
"version": "1.0.19",
"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",

View File

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

View File

@ -1,6 +1,6 @@
// ==========================================================================
// Plyr
// plyr.js v1.0.17
// plyr.js v1.0.19
// https://github.com/sampotts/plyr
// ==========================================================================
// Credits: http://paypal.github.io/accessible-html5-video-player/
@ -795,12 +795,12 @@
}
// Toggle fullscreen
function _toggleFullscreen() {
function _toggleFullscreen(event) {
// Check for native support
var nativeSupport = fullscreen.supportsFullScreen;
// 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();
}
// If there's native support, use it