Skip to content

Commit

Permalink
Merge branch '1.0.0'
Browse files Browse the repository at this point in the history
  • Loading branch information
@moay
moay committed Sep 18, 2017
2 parents f776a9a + abbed00 commit 303d929
Show file tree
Hide file tree
Showing 29 changed files with 13,483 additions and 10,583 deletions.
3 changes: 2 additions & 1 deletion bower.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
"node_modules",
"bower_components",
"test",
"tests"
"tests",
"sandbox",
]
}
27 changes: 14 additions & 13 deletions dist/afterglow.min.js
View file

Large diffs are not rendered by default.

Binary file modified dist/afterglow.zip
View file
Binary file not shown.
3 changes: 2 additions & 1 deletion gulpfile.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,8 @@ gulp.task('build-afterglow', ['compileES6'], function(){
]))
.pipe(plugins.addSrc.append([
'./vendor/videojs/plugins/videojs.hotkeys.js',
'./vendor/videojs/plugins/Youtube.js'
'./vendor/videojs/plugins/Youtube.js',
'./vendor/videojs/plugins/videojs-vimeo.js'
]))
.pipe(plugins.addSrc.append([
'./dist/tmp/afterglow-bundle.js'
Expand Down
7 changes: 5 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "afterglow",
"description": "An easy to integrate HTML5 video player with lightbox support.",
"version": "0.4.2",
"version": "1.0.0",
"license": "MIT",
"repository": {
"type": "git",
Expand Down Expand Up @@ -42,7 +42,7 @@
"istanbul-traceur": "^1.0.7",
"jquery": "^2.1.4",
"jsdom": "^6.5.0",
"karma": "^1",
"karma": "^0.13.10",
"mocha": "^2.3.2",
"mocha-jsdom": "^1.0.0",
"mocha-notifier-reporter": "^0.1.1",
Expand All @@ -54,5 +54,8 @@
"scripts": {
"test": "babel-node ./node_modules/.bin/isparta cover _mocha -- --reporter dot && cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js && rm -rf ./coverage",
"coverage": "babel-node ./node_modules/.bin/isparta cover --report text --report html _mocha -- --reporter dot"
},
"dependencies": {
"eventbusjs": "^0.2.0"
}
}
52 changes: 39 additions & 13 deletions sandbox/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
<script src="js/less.min.js" type="text/javascript"></script>
<script type="text/javascript" src="../vendor/videojs/video.js"></script>
<script type="text/javascript" src="../vendor/videojs/plugins/Youtube.js"></script>
<script type="text/javascript" src="../vendor/videojs/plugins/videojs-vimeo.js"></script>
<script type="text/javascript" src="../vendor/videojs/plugins/videojs.hotkeys.js"></script>
<script type="text/javascript" src="../dist/tmp/afterglow-bundle.js"></script>

Expand All @@ -32,15 +33,15 @@
<h1>This is just a sandbox for development.</h1>
<!-- YOUTUBE TEST -->
<h2>Youtube video</h2>
<video id="video1" class="afterglow" width="1920" height="1080" data-youtube-id="HgbHx4CY300" data-autoresize="fit" preload="none" ytControls="true" data-skin="dark"></video>
<video id="video1" class="afterglow" width="1920" height="1080" data-youtube-id="HgbHx4CY300" data-skin="dark"></video>

<!-- LOCAL TEST -->
<h2>Local video, single source, with poster</h2>
<video id="video2" class="afterglow" width="1920" height="1080" poster="http://afterglowplayer.com/sandbox/video/Snapshots/afterglow_local.jpg" data-autoresize="fit" preload="none" src="http://afterglowplayer.com/sandbox/video/MP4/afterglow_local.mp4"></video>
<h2>Local video, single source, with poster and bound play event</h2>
<video id="video2" class="afterglow" width="1920" height="1080" poster="http://afterglowplayer.com/sandbox/video/Snapshots/afterglow_local.jpg" preload="none" src="http://afterglowplayer.com/sandbox/video/MP4/afterglow_local.mp4"></video>

<!-- LOCAL TEST -->
<h2>Local video with poster and resolution test, dark skin</h2>
<video id="video-subtitles" class="sublime" width="640" height="360" poster="http://afterglowplayer.com/sandbox/video/Snapshots/afterglow_local.jpg" data-volume="0.7" data-autoresize="fit" data-skin="dark">
<video id="video-subtitles" class="sublime" width="640" height="360" poster="http://afterglowplayer.com/sandbox/video/Snapshots/afterglow_local.jpg" data-volume="0.7" data-skin="dark">
<source src="http://afterglowplayer.com/sandbox/video/MP4/afterglow_local_hd.mp4" type="video/mp4" data-quality="hd" />
<source src="http://afterglowplayer.com/sandbox/video/MP4/afterglow_local.mp4" type="video/mp4"/>
<source src="http://afterglowplayer.com/sandbox/video/WEBM/afterglow_local_hd.webm" type="video/webm" data-quality="hd" />
Expand All @@ -52,32 +53,57 @@ <h2>Local video with poster and resolution test, dark skin</h2>
</video>

<h2>Local video with poster and resolution test light skin</h2>
<video id="video-subtitles" class="sublime" width="640" height="360" poster="http://afterglowplayer.com/sandbox/video/Snapshots/afterglow_local.jpg" data-volume="0.7" data-autoresize="fit" data-skin="light">
<video id="video-subtitles" class="sublime" width="640" height="360" poster="http://afterglowplayer.com/sandbox/video/Snapshots/afterglow_local.jpg" data-volume="0.7" data-skin="light">
<source src="http://afterglowplayer.com/sandbox/video/MP4/afterglow_local_hd.mp4" type="video/mp4" data-quality="hd" />
<source src="http://afterglowplayer.com/sandbox/video/MP4/afterglow_local.mp4" type="video/mp4"/>
<source src="http://afterglowplayer.com/sandbox/video/WEBM/afterglow_local_hd.webm" type="video/webm" data-quality="hd" />
<source src="http://afterglowplayer.com/sandbox/video/WEBM/afterglow_local.webm" type="video/webm" />
<source src="http://afterglowplayer.com/sandbox/video/OGV/afterglow_local_hd.ogv" type="video/ogv" data-quality="hd" />
<source src="http://afterglowplayer.com/sandbox/video/OGV/afterglow_local.ogv" type="video/ogv" />

<track kind="subtitles" src="text/subtitles-demo.vtt" srclang="en" label="English" default>
</video>


<!-- VIMEO TEST -->
<h2>Vimeo video</h2>
<video id="video-vimeo" class="afterglow" width="1920" height="1080" data-vimeo-id="233970493"> </video>

<!-- LIGHTBOX TEST -->
<!-- LOCAL TEST -->
<h2>Local video with poster opened in lightbox</h2>
<a href="#video3" class="afterglow">Open the lightbox</a>
<video id="video3" data-skin="dark" width="640" height="360" poster="http://afterglowplayer.com/sandbox/video/Snapshots/afterglow_local.jpg" data-autoresize="fit" data-skin="dark">
<video id="video3" data-skin="dark" width="640" height="360" poster="http://afterglowplayer.com/sandbox/video/Snapshots/afterglow_local.jpg" data-skin="dark">
<source src="http://afterglowplayer.com/sandbox/video/MP4/afterglow_local.mp4" type="video/mp4" />
<source src="http://afterglowplayer.com/sandbox/video/MP4/afterglow_local_hd.mp4" type="video/mp4" data-quality="hd" />
<source src="http://afterglowplayer.com/sandbox/video/WEBM/afterglow_local.webm" type="video/webm" />
</video>
<!-- LOCAL TEST -->
<h2>Youtube opened in lightbox</h2>
<a href="#video4" class="afterglow">Open the lightbox</a>
<video id="video4" width="1920" height="1080" data-youtube-id="HgbHx4CY300" data-autoresize="fit" data-skin="dark" ></video>
<video id="video4" width="1920" height="1080" data-youtube-id="HgbHx4CY300" data-skin="dark" ></video>
<!-- LOCAL TEST -->
<h2>Vimeo opened in lightbox</h2>
<a href="#videovimeol" class="afterglow">Open the lightbox</a>
<video id="videovimeol" width="1920" height="1080" data-vimeo-id="191169455" data-skin="dark" ></video>


<script>
var events = ['play', 'paused', 'ended', 'volume-changed', 'ready', 'lightbox-launched', 'lightbox-closed', 'fullscreen-entered', 'fullscreen-left', 'fullscreen-changed'];
for (var i = 0; i < events.length; i++) {
var eventname = events[i];
console.log('Binding ' + eventname);
afterglow.on('video2',eventname,function(e){
console.log('EVENT video2: ' + e.type);
});
afterglow.on('video3',eventname,function(e){
console.log('EVENT video3 (LB): ' + e.type);
});
afterglow.on('video1',eventname,function(e){
console.log('EVENT video1 (YT): ' + e.type);
});
afterglow.on('video-vimeo',eventname,function(e){
console.log('EVENT video1 (YT): ' + e.type);
});
afterglow.on('videovimeol',eventname,function(e){
console.log('EVENT video1 (YT): ' + e.type);
});
}

</script>
</body>
</html>
18 changes: 9 additions & 9 deletions sandbox/js/less.min.js
View file

Large diffs are not rendered by default.

23 changes: 15 additions & 8 deletions sandbox/releasetest.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,39 +20,41 @@ <h1>This is just a sandbox for development.</h1>

<!-- YOUTUBE TEST -->
<h2>Youtube video</h2>
<video id="video1" class="afterglow" width="1920" height="1080" data-youtube-id="HgbHx4CY300" data-autoresize="fit"></video>
<video id="video1" class="afterglow" width="1920" height="1080" data-youtube-id="HgbHx4CY300"></video>
<h2>Vimeo video</h2>
<video id="vimeovideo" class="afterglow" width="1920" height="1080" data-vimeo-id="191169455"></video>

<!-- LOCAL TEST -->
<h2>Local video with poster</h2>
<video id="video2" class="afterglow" width="1920" height="1080" poster="http://afterglowplayer.com/sandbox/video/Snapshots/afterglow_local.jpg" data-autoresize="fit" preload="none">
<video id="video2" class="afterglow" width="1920" height="1080" poster="http://afterglowplayer.com/sandbox/video/Snapshots/afterglow_local.jpg" preload="none">
<source src="http://afterglowplayer.com/sandbox/video/MP4/afterglow_local.mp4" type="video/mp4" />
<source src="http://afterglowplayer.com/sandbox/video/MP4/afterglow_local_hd.mp4" type="video/mp4" data-quality="hd" />
<source src="http://afterglowplayer.com/sandbox/video/WEBM/afterglow_local.webm" type="video/webm" />
</video>
<video id="video2dark" class="afterglow" width="1920" height="1080" poster="http://afterglowplayer.com/sandbox/video/Snapshots/afterglow_local.jpg" data-autoresize="fit" data-skin="dark">
<video id="video2dark" class="afterglow" width="1920" height="1080" poster="http://afterglowplayer.com/sandbox/video/Snapshots/afterglow_local.jpg" data-skin="dark">
<source src="http://afterglowplayer.com/sandbox/video/MP4/afterglow_local.mp4" type="video/mp4" />
<source src="http://afterglowplayer.com/sandbox/video/MP4/afterglow_local_hd.mp4" type="video/mp4" data-quality="hd" />
<source src="http://afterglowplayer.com/sandbox/video/WEBM/afterglow_local.webm" type="video/webm" />
</video>
<video id="video2light" class="afterglow" width="1920" height="1080" poster="http://afterglowplayer.com/sandbox/video/Snapshots/afterglow_local.jpg" data-autoresize="fit" data-skin="light">
<video id="video2light" class="afterglow" width="1920" height="1080" poster="http://afterglowplayer.com/sandbox/video/Snapshots/afterglow_local.jpg" data-skin="light">
<source src="http://afterglowplayer.com/sandbox/video/MP4/afterglow_local.mp4" type="video/mp4" />
<source src="http://afterglowplayer.com/sandbox/video/MP4/afterglow_local_hd.mp4" type="video/mp4" data-quality="hd" />
<source src="http://afterglowplayer.com/sandbox/video/WEBM/afterglow_local.webm" type="video/webm" />
</video>

<h2>Local video with poster opened in lightbox</h2>
<a href="#video3" class="afterglow">Open the lightbox</a>
<video id="video3" width="640" height="360" poster="http://afterglowplayer.com/sandbox/video/Snapshots/afterglow_local.jpg" data-autoresize="fit" preload="none">
<video id="video3" width="640" height="360" poster="http://afterglowplayer.com/sandbox/video/Snapshots/afterglow_local.jpg" preload="none">
<source src="http://afterglowplayer.com/sandbox/video/MP4/afterglow_local.mp4" type="video/mp4" />
<source src="http://afterglowplayer.com/sandbox/video/WEBM/afterglow_local.webm" type="video/webm" />
</video>
<a href="#video3dark" class="afterglow">Open the lightbox (dark)</a>
<video id="video3dark" width="640" height="360" poster="http://afterglowplayer.com/sandbox/video/Snapshots/afterglow_local.jpg" data-autoresize="fit" data-skin="dark">
<video id="video3dark" width="640" height="360" poster="http://afterglowplayer.com/sandbox/video/Snapshots/afterglow_local.jpg" data-skin="dark">
<source src="http://afterglowplayer.com/sandbox/video/MP4/afterglow_local.mp4" type="video/mp4" />
<source src="http://afterglowplayer.com/sandbox/video/WEBM/afterglow_local.webm" type="video/webm" />
</video>
<a href="#video3light" class="afterglow">Open the lightbox (light)</a>
<video id="video3light" width="640" height="360" poster="http://afterglowplayer.com/sandbox/video/Snapshots/afterglow_local.jpg" data-autoresize="fit" data-skin="light">
<video id="video3light" width="640" height="360" poster="http://afterglowplayer.com/sandbox/video/Snapshots/afterglow_local.jpg" data-skin="light">
<source src="http://afterglowplayer.com/sandbox/video/MP4/afterglow_local.mp4" type="video/mp4" />
<source src="http://afterglowplayer.com/sandbox/video/WEBM/afterglow_local.webm" type="video/webm" />
</video>
Expand All @@ -62,6 +64,11 @@ <h2>Local video with poster opened in lightbox</h2>
<!-- LOCAL TEST -->
<h2>Youtube opened in lightbox</h2>
<a href="#video4" class="afterglow">Open the lightbox</a>
<video id="video4" width="1920" height="1080" data-youtube-id="HgbHx4CY300" data-autoresize="fit" preload="none"></video>
<video id="video4" width="1920" height="1080" data-youtube-id="HgbHx4CY300" preload="none"></video>


<h2>Vimeo opened in lightbox</h2>
<a href="#video5" class="afterglow">Open the lightbox</a>
<video id="video5" width="1920" height="1080" data-vimeo-id="191169455" preload="none"></video>
</body>
</html>
67 changes: 67 additions & 0 deletions src/js/afterglow/Afterglow.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
import Player from './components/Player';
import Lightbox from './components/Lightbox';
import LightboxTrigger from './components/LightboxTrigger';
import Eventbus from './components/Eventbus';
import DOMElement from './lib/DOMElement';


Expand All @@ -19,10 +20,21 @@ class Afterglow {
* Will hold the players in order to make them accessible
*/
this.players = [];

/**
* Will hold the trigger elements which will launch lightbox players
*/
this.lightboxtriggers = [];

/**
* Will hold the event bus which registers and dispatches events
*/
this.eventbus = false;

/**
* Container for callbacks that have to be executed when afterglow is initalized
*/
this.afterinit = [];
}

/**
Expand All @@ -33,11 +45,20 @@ class Afterglow {
// Run some preparations
this.configureVideoJS();

// prepare the event bus
this.prepareEventbus();

// initialize regular players
this.initVideoElements();

// prepare Lightboxes
this.prepareLightboxVideos();

// execute things to do when init done
for (var i = 0; i < this.afterinit.length; i++) {
this.afterinit[i]();
}
this.afterinit = [];
}

/**
Expand Down Expand Up @@ -75,6 +96,52 @@ class Afterglow {
}
}

/**
* Initializes the event bus
* @return void
*/
prepareEventbus() {
// Reset the event bus
this.eventbus = false;
this.eventbus = new Eventbus();
}

/**
* Binds an event for any given player
*
* @param string playerid The playerid
* @param string eventname The eventname
* @param mixed _callback The callback
*/
on(playerid, eventname, _callback){
if(!this.eventbus){
this.afterinit.push(() => {
this.on(playerid, eventname, _callback);
});
}
else{
this.eventbus.subscribe(playerid, eventname, _callback);
}
}

/**
* Removes an event for any given player
*
* @param string playerid The playerid
* @param string eventname The eventname
* @param mixed _callback The callback
*/
off(playerid, eventname, _callback){
if(!this.eventbus){
this.afterinit.push(() => {
this.off(playerid, eventname, _callback);
});
}
else{
this.eventbus.unsubscribe(playerid, eventname, _callback);
}
}

/**
* Binds some elements for lightbox triggers.
* @param {object} the trigger object
Expand Down
18 changes: 17 additions & 1 deletion src/js/afterglow/components/Config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,10 @@ class Config {
if(util.isYoutubePlayer(this.videoelement)){
this.setYoutubeOptions();
}
// Initialize vimeo if the current player is a vimeo player
if(util.isVimeoPlayer(this.videoelement)){
this.setVimeoOptions();
}
}
}

Expand Down Expand Up @@ -126,7 +130,8 @@ class Config {
if(util.ie().actualVersion >= 8 && util.ie().actualVersion <= 11){
this.options.youtube = {
ytControls : 2,
modestbranding: 1
color : "white",
modestbranding : 1
};
}
else{
Expand All @@ -137,6 +142,17 @@ class Config {
}
}

/**
* Sets options needed for vimeo to work and replaces the sources with the correct vimeo source
*/
setVimeoOptions(){
this.options.techOrder = ["vimeo"];
this.options.sources = [{
"type": "video/vimeo",
"src": "https://vimeo.com/"+this.getPlayerAttributeFromVideoElement('vimeo-id')
}];
}

/**
* Returns the CSS class for the video element
* @return {string}
Expand Down
Loading

0 comments on commit 303d929

Please sign in to comment.