diff --git a/dist/vidim.js b/dist/vidim.js index f761071..b5a8a36 100644 --- a/dist/vidim.js +++ b/dist/vidim.js @@ -1,6 +1,6 @@ /* - * vidim v1.0.0 - * 2016-11-04T00:33:53.043Z + * vidim v1.0.1 + * 2017-03-13T17:00:04.439Z * https://github.com/OriginalEXE/vidim * * Made by Ante Sepic @@ -20,7 +20,7 @@ var index$1 = createCommonjsModule(function (module) { * Expose `Emitter`. */ -if (typeof module !== 'undefined') { +{ module.exports = Emitter; } @@ -761,6 +761,33 @@ var YouTubeProvider = function (vidim) { } _this2.emit('ready'); + + if (_this2._options.loop) { + + var loopInterval = void 0; + + _this2.on('play', function () { + + loopInterval = setInterval(function () { + + if (_this2.getTime() === 0 || _this2.getTime() + 0.15 > _this2.getDuration()) { + + _this2.setTime(0); + _this2.play(); + } + }, 100); + }); + + _this2.on('pause', function () { + + clearInterval(loopInterval); + }); + + _this2.on('destroy', function () { + + clearInterval(loopInterval); + }); + } }, 'onStateChange': function onStateChange(e) { @@ -789,8 +816,8 @@ var YouTubeProvider = function (vidim) { if (this._options.loop) { - playerParams.playlist = this.videoID; - playerParams.loop = 1; + playerParams.playerVars.playlist = this.videoID; + playerParams.playerVars.loop = 1; } this.player = new YT.Player(toBeReplaced, playerParams); @@ -1104,24 +1131,22 @@ if ('undefined' === typeof window.onYouTubeIframeAPIReady) { window.dispatchEvent(event); }; } else { - (function () { - var oldOnYouTubeIframeAPIReady = window.onYouTubeIframeAPIReady; + var oldOnYouTubeIframeAPIReady = window.onYouTubeIframeAPIReady; - window.onYouTubeIframeAPIReady = function () { + window.onYouTubeIframeAPIReady = function () { - oldOnYouTubeIframeAPIReady(); + oldOnYouTubeIframeAPIReady(); - window.vidimYouTubeAPIReady = true; + window.vidimYouTubeAPIReady = true; - isAPIReady = true; + isAPIReady = true; - window.dispatchEvent(event); - }; - })(); + window.dispatchEvent(event); + }; } -var index = (function factory(global) { +var index = ((function factory(global) { if ('undefined' === typeof global.document) { @@ -1527,7 +1552,7 @@ var index = (function factory(global) { ready(scanDOM); return vidim; -})('undefined' !== typeof window ? window : undefined); +}))('undefined' !== typeof window ? window : undefined); return index; diff --git a/dist/vidim.min.js b/dist/vidim.min.js index 1d1b119..fa448ed 100644 --- a/dist/vidim.min.js +++ b/dist/vidim.min.js @@ -1,8 +1,8 @@ /* - * vidim v1.0.0 - * 2016-11-04T00:33:53.043Z + * vidim v1.0.1 + * 2017-03-13T17:00:04.439Z * https://github.com/OriginalEXE/vidim * * Made by Ante Sepic */ -!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.vidim=e()}(this,function(){"use strict";function t(t,e){return e={exports:{}},t(e,e.exports),e.exports}function e(t,e){var i=Object.keys(e);i.forEach(function(i){t.hasOwnProperty(i)||(t[i]=e[i])})}function i(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:document;return"string"==typeof t?e.querySelector(t):t}function s(t,e){var i,s,o,n,r=0,a=function(){r=Date.now(),i=null,n=t.apply(s,o),i||(s=o=null)},l=function(){var l=Date.now();r||(r=l);var h=e-(l-r);return s=this,o=arguments,h<=0||h>e?(i&&(clearTimeout(i),i=null),r=l,n=t.apply(s,o),i||(s=o=null)):i||(i=setTimeout(a,h)),n};return l.cancel=function(){clearTimeout(i),r=0,i=s=o=null},l}function o(t){"loading"!=document.readyState?t():document.addEventListener("DOMContentLoaded",t)}var n=t(function(t){function e(t){if(t)return i(t)}function i(t){for(var i in e.prototype)t[i]=e.prototype[i];return t}"undefined"!=typeof t&&(t.exports=e),e.prototype.on=e.prototype.addEventListener=function(t,e){return this._callbacks=this._callbacks||{},(this._callbacks["$"+t]=this._callbacks["$"+t]||[]).push(e),this},e.prototype.once=function(t,e){function i(){this.off(t,i),e.apply(this,arguments)}return i.fn=e,this.on(t,i),this},e.prototype.off=e.prototype.removeListener=e.prototype.removeAllListeners=e.prototype.removeEventListener=function(t,e){if(this._callbacks=this._callbacks||{},0==arguments.length)return this._callbacks={},this;var i=this._callbacks["$"+t];if(!i)return this;if(1==arguments.length)return delete this._callbacks["$"+t],this;for(var s,o=0;o0&&void 0!==arguments[0]?arguments[0]:100;return this.el.volume=parseFloat(t/100),this},getVolume:function(){return 100*this.el.volume},mute:function(){return this.el.muted=!0,this},unMute:function(){return this.el.muted=!1,this},setTime:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0;return this.el.currentTime=t,this},getTime:function(){return this.el.currentTime},getDuration:function(){return this.el.duration},showPoster:function(){this.pause().el.style.opacity="0"},changeSource:function(t){var e=arguments.length>1&&void 0!==arguments[1]&&arguments[1];if(this.el.innerHTML="",t.length&&"string"!=typeof t)for(var i=0;ithis._options.ratio&&t/e0&&void 0!==arguments[0]?arguments[0]:100;return this.player.setVolume(t),this},getVolume:function(){return this.getVolume()},mute:function(){return this.player.mute(),this},unMute:function(){return this.player.unMute(),this},setTime:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0;return this.player.seekTo(t,!0),this},getTime:function(){return this.player.getCurrentTime()},getDuration:function(){return this.player.getDuration()},showPoster:function(){this.pause().el.style.opacity="0"},changeSource:function(t){var e=arguments.length>1&&void 0!==arguments[1]&&arguments[1];if(11===t.length)this.videoID=t;else{var i=/^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=|\?v=)([^#\&\?]*).*/,s=t.match(i);if(!s||11!==s[2].length)return new Error("Provided source is not a valid YouTube url");this.videoID=s[2]}if(this.player.loadPlaylist(this.videoID,0,this._options.startAt,this._options.quality),this.player.setLoop(this._options.loop),e){var o=this._options.poster;-1!==this.wrapper.style.backgroundImage.indexOf(o)&&(this.wrapper.style.backgroundImage="url('"+e+"')"),this._options.poster=e}},destroy:function(){this.emit("destroy"),this.player.destroy();try{this.wrapper.parentNode.removeChild(this.wrapper)}catch(t){}t.deleteInstance(this.vidimID),delete this.container.vidimID,this.off()},resize:function(){if(this.el){var t=this.container.offsetHeight,e=this.container.offsetWidth;"BODY"===this.container.nodeName&&(e=window.innerWidth,t=window.innerHeight),1this._options.ratio&&t/e1&&void 0!==arguments[1]?arguments[1]:{};return Object.keys(s).forEach(function(t){w.push(t)}),e(s,_),s.src&&!g[s.type]?new Error("No provider can handle type: '"+s.type+"'"):("string"==typeof s.ratio&&("4/3"===s.ratio?s.ratio=4/3:s.ratio=16/9),this._options=s,this.container=i(t),this.container?(-1===w.indexOf("zIndex")&&"BODY"===this.container.nodeName&&(this._options.zIndex=-1),void this._initialize()):new Error("Could not find the container: "+t))}if("undefined"!=typeof t.document){var v=0,m={},_={wrapperClass:"",overlayClass:"",src:!1,type:"HTML5",ratio:1.7778,autoplay:!0,loop:!0,poster:"",showPosterBeforePlay:!0,showPosterOnEnd:!1,showPosterOnPause:!1,zIndex:0,autoResize:!0,muted:!0,startAt:0,onReady:!1},w=[],g={},b=f.prototype;return b._initialize=function(){if(this.vidimID=v++,this.container.vidimID=this.vidimID,m[this.vidimID]=this,n(this),!this._options.src&&this._options.poster)return this._constructWrapper(),void(this.destroy=function(){this.emit("destroy");try{this.wrapper.parentNode.removeChild(this.wrapper)}catch(t){}f.deleteInstance(this.vidimID),delete this.container.vidimID,this.off()});var t=g[this._options.type];for(var e in t)this[e]=t[e];return"function"!=typeof this._initializeProvider?new Error("Provider is missing method: _initializeProvider"):(this._constructWrapper(),this._initializeProvider(),this._options.autoResize&&window.addEventListener("resize",s(this.resize,200).bind(this),!1),void this.resize())},b._constructWrapper=function(){var t=getComputedStyle(this.container,null);"static"===t.getPropertyValue("position")&&(this.container.style.position="relative"),this.wrapper=document.createElement("div"),"BODY"===this.container.nodeName?this.wrapper.style.position="fixed":this.wrapper.style.position="absolute",this._options.wrapperClass&&("function"==typeof this._options.wrapperClass?this.wrapper.classList.add(this._options.wrapperClass.call(this)):this.wrapper.classList.add(this._options.wrapperClass)),this.wrapper.style.left=0,this.wrapper.style.top=0,this.wrapper.style.height="100%",this.wrapper.style.width="100%",this.wrapper.style.overflow="hidden",this.wrapper.style.zIndex=parseInt(this._options.zIndex,10),this._options.poster&&(this.wrapper.style.backgroundSize="cover",this.wrapper.style.backgroundPosition="center center",this.wrapper.style.backgroundRepear="no-repeat",this._options.showPosterBeforePlay&&(this.wrapper.style.backgroundImage="url('"+this._options.poster+"')")),this.container.insertBefore(this.wrapper,this.container.firstChild)},b._constructOverlay=function(){this.overlay=document.createElement("div"),this.overlay.style.position="absolute",this._options.overlayClass&&("function"==typeof this._options.overlayClass?this.overlay.classList.add(this._options.overlayClass.call(this)):this.overlay.classList.add(this._options.overlayClass)),this.overlay.style.left=0,this.overlay.style.top=0,this.overlay.style.height="100%",this.overlay.style.width="100%",this.wrapper.appendChild(this.overlay)},f.getInstanceFromID=p,f.getInstanceFromElement=c,f.registerProvider=l,f.destroyAllInstances=u,f.deleteInstance=d,f.utility=r,f.scanDOM=y,a(f),h(f),o(y),f}}("undefined"!=typeof window?window:void 0);return u}); +!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.vidim=e()}(this,function(){"use strict";function t(t,e){return e={exports:{}},t(e,e.exports),e.exports}function e(t,e){var i=Object.keys(e);i.forEach(function(i){t.hasOwnProperty(i)||(t[i]=e[i])})}function i(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:document;return"string"==typeof t?e.querySelector(t):t}function s(t,e){var i,s,o,n,r=0,a=function(){r=Date.now(),i=null,n=t.apply(s,o),i||(s=o=null)},l=function(){var l=Date.now();r||(r=l);var h=e-(l-r);return s=this,o=arguments,h<=0||h>e?(i&&(clearTimeout(i),i=null),r=l,n=t.apply(s,o),i||(s=o=null)):i||(i=setTimeout(a,h)),n};return l.cancel=function(){clearTimeout(i),r=0,i=s=o=null},l}function o(t){"loading"!=document.readyState?t():document.addEventListener("DOMContentLoaded",t)}var n=t(function(t){function e(t){if(t)return i(t)}function i(t){for(var i in e.prototype)t[i]=e.prototype[i];return t}t.exports=e,e.prototype.on=e.prototype.addEventListener=function(t,e){return this._callbacks=this._callbacks||{},(this._callbacks["$"+t]=this._callbacks["$"+t]||[]).push(e),this},e.prototype.once=function(t,e){function i(){this.off(t,i),e.apply(this,arguments)}return i.fn=e,this.on(t,i),this},e.prototype.off=e.prototype.removeListener=e.prototype.removeAllListeners=e.prototype.removeEventListener=function(t,e){if(this._callbacks=this._callbacks||{},0==arguments.length)return this._callbacks={},this;var i=this._callbacks["$"+t];if(!i)return this;if(1==arguments.length)return delete this._callbacks["$"+t],this;for(var s,o=0;o0&&void 0!==arguments[0]?arguments[0]:100;return this.el.volume=parseFloat(t/100),this},getVolume:function(){return 100*this.el.volume},mute:function(){return this.el.muted=!0,this},unMute:function(){return this.el.muted=!1,this},setTime:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0;return this.el.currentTime=t,this},getTime:function(){return this.el.currentTime},getDuration:function(){return this.el.duration},showPoster:function(){this.pause().el.style.opacity="0"},changeSource:function(t){var e=arguments.length>1&&void 0!==arguments[1]&&arguments[1];if(this.el.innerHTML="",t.length&&"string"!=typeof t)for(var i=0;ithis._options.ratio&&t/et.getDuration())&&(t.setTime(0),t.play())},100)}),t.on("pause",function(){clearInterval(e)}),t.on("destroy",function(){clearInterval(e)})}},onStateChange:function(e){switch(e.data){case 0:t.emit("end",t);break;case 1:t.emit("play",t);break;case 2:t.emit("pause",t);break;case 3:t.emit("buffering",t)}}}};this._options.loop&&(o.playerVars.playlist=this.videoID,o.playerVars.loop=1),this.player=new YT.Player(s,o),this.el=this.player.getIframe(),this.el.style.position="absolute",this.el.style.left="50%",this.el.style.top="50%",this.el.style.transform="translate(-50%, -50%)",this.el.style.webkitTransform="translate(-50%, -50%)",this.el.style.msTransform="translate(-50%, -50%)",this.el.style.oTransform="translate(-50%, -50%)",this.el.style.mozTransform="translate(-50%, -50%)",this.el.style.minWidth="calc( 100% + 2px )",this.el.style.minHeight="calc( 100% + 2px )",this.el.style.opacity="0",this._constructOverlay(),this.resize()},_listen:function(){var t=this;this.on("play",function(){t.el.style.opacity="1"}),this._options.showPosterBeforePlay||this.once("play",function(){t.wrapper.style.backgroundImage="url('"+t._options.poster+"')"}),this._options.showPosterOnEnd?this.on("end",function(){t.el.style.opacity="0"}):this.on("end",function(){t.player.seekTo(t.player.getDuration()),t.player.playVideo(),t.player.pauseVideo()}),this._options.showPosterOnPause&&this.on("pause",function(){t.el.style.opacity="0"})},play:function(){return this.player.playVideo(),this},pause:function(){return this.player.pauseVideo(),this},setVolume:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:100;return this.player.setVolume(t),this},getVolume:function(){return this.getVolume()},mute:function(){return this.player.mute(),this},unMute:function(){return this.player.unMute(),this},setTime:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0;return this.player.seekTo(t,!0),this},getTime:function(){return this.player.getCurrentTime()},getDuration:function(){return this.player.getDuration()},showPoster:function(){this.pause().el.style.opacity="0"},changeSource:function(t){var e=arguments.length>1&&void 0!==arguments[1]&&arguments[1];if(11===t.length)this.videoID=t;else{var i=/^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=|\?v=)([^#\&\?]*).*/,s=t.match(i);if(!s||11!==s[2].length)return new Error("Provided source is not a valid YouTube url");this.videoID=s[2]}if(this.player.loadPlaylist(this.videoID,0,this._options.startAt,this._options.quality),this.player.setLoop(this._options.loop),e){var o=this._options.poster;-1!==this.wrapper.style.backgroundImage.indexOf(o)&&(this.wrapper.style.backgroundImage="url('"+e+"')"),this._options.poster=e}},destroy:function(){this.emit("destroy"),this.player.destroy();try{this.wrapper.parentNode.removeChild(this.wrapper)}catch(t){}t.deleteInstance(this.vidimID),delete this.container.vidimID,this.off()},resize:function(){if(this.el){var t=this.container.offsetHeight,e=this.container.offsetWidth;"BODY"===this.container.nodeName&&(e=window.innerWidth,t=window.innerHeight),1this._options.ratio&&t/e1&&void 0!==arguments[1]?arguments[1]:{};return Object.keys(s).forEach(function(t){w.push(t)}),e(s,_),s.src&&!g[s.type]?new Error("No provider can handle type: '"+s.type+"'"):("string"==typeof s.ratio&&("4/3"===s.ratio?s.ratio=4/3:s.ratio=16/9),this._options=s,this.container=i(t),this.container?(-1===w.indexOf("zIndex")&&"BODY"===this.container.nodeName&&(this._options.zIndex=-1),void this._initialize()):new Error("Could not find the container: "+t))}if("undefined"!=typeof t.document){var v=0,m={},_={wrapperClass:"",overlayClass:"",src:!1,type:"HTML5",ratio:1.7778,autoplay:!0,loop:!0,poster:"",showPosterBeforePlay:!0,showPosterOnEnd:!1,showPosterOnPause:!1,zIndex:0,autoResize:!0,muted:!0,startAt:0,onReady:!1},w=[],g={},b=f.prototype;return b._initialize=function(){if(this.vidimID=v++,this.container.vidimID=this.vidimID,m[this.vidimID]=this,n(this),!this._options.src&&this._options.poster)return this._constructWrapper(),void(this.destroy=function(){this.emit("destroy");try{this.wrapper.parentNode.removeChild(this.wrapper)}catch(t){}f.deleteInstance(this.vidimID),delete this.container.vidimID,this.off()});var t=g[this._options.type];for(var e in t)this[e]=t[e];return"function"!=typeof this._initializeProvider?new Error("Provider is missing method: _initializeProvider"):(this._constructWrapper(),this._initializeProvider(),this._options.autoResize&&window.addEventListener("resize",s(this.resize,200).bind(this),!1),void this.resize())},b._constructWrapper=function(){var t=getComputedStyle(this.container,null);"static"===t.getPropertyValue("position")&&(this.container.style.position="relative"),this.wrapper=document.createElement("div"),"BODY"===this.container.nodeName?this.wrapper.style.position="fixed":this.wrapper.style.position="absolute",this._options.wrapperClass&&("function"==typeof this._options.wrapperClass?this.wrapper.classList.add(this._options.wrapperClass.call(this)):this.wrapper.classList.add(this._options.wrapperClass)),this.wrapper.style.left=0,this.wrapper.style.top=0,this.wrapper.style.height="100%",this.wrapper.style.width="100%",this.wrapper.style.overflow="hidden",this.wrapper.style.zIndex=parseInt(this._options.zIndex,10),this._options.poster&&(this.wrapper.style.backgroundSize="cover",this.wrapper.style.backgroundPosition="center center",this.wrapper.style.backgroundRepear="no-repeat",this._options.showPosterBeforePlay&&(this.wrapper.style.backgroundImage="url('"+this._options.poster+"')")),this.container.insertBefore(this.wrapper,this.container.firstChild)},b._constructOverlay=function(){this.overlay=document.createElement("div"),this.overlay.style.position="absolute",this._options.overlayClass&&("function"==typeof this._options.overlayClass?this.overlay.classList.add(this._options.overlayClass.call(this)):this.overlay.classList.add(this._options.overlayClass)),this.overlay.style.left=0,this.overlay.style.top=0,this.overlay.style.height="100%",this.overlay.style.width="100%",this.wrapper.appendChild(this.overlay)},f.getInstanceFromID=p,f.getInstanceFromElement=c,f.registerProvider=l,f.destroyAllInstances=u,f.deleteInstance=d,f.utility=r,f.scanDOM=y,a(f),h(f),o(y),f}}("undefined"!=typeof window?window:void 0);return d}); diff --git a/docs/index.html b/docs/index.html index b2a4af6..80d1195 100644 --- a/docs/index.html +++ b/docs/index.html @@ -497,7 +497,7 @@
buffering
- + diff --git a/package.json b/package.json index fe826c9..f9831d1 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vidim", - "version": "1.0.0", + "version": "1.0.1", "description": "Background videos made easy. Supports both YouTube and self hosted videos.", "author": { "name": "Ante Sepic", @@ -24,24 +24,24 @@ }, "license": "MIT", "devDependencies": { - "babel-core": "^6.18.2", - "babel-preset-es2015": "^6.18.0", - "babel-preset-stage-2": "^6.18.0", + "babel-core": "^6.24.0", + "babel-preset-es2015": "^6.24.0", + "babel-preset-stage-2": "^6.22.0", "component-emitter": "^1.2.1", "del": "^2.2.2", "gulp": "github:gulpjs/gulp#4.0", "gulp-autoprefixer": "^3.1.1", - "gulp-sass": "^2.3.2", - "karma": "^1.3.0", + "gulp-sass": "^3.1.0", + "karma": "^1.5.0", "karma-chrome-launcher": "^2.0.0", - "karma-firefox-launcher": "^1.0.0", + "karma-firefox-launcher": "^1.0.1", "karma-ie-launcher": "^1.0.0", "karma-qunit": "^1.2.1", "karma-safari-launcher": "^1.0.0", - "qunitjs": "^2.0.1", - "rollup": "^0.36.3", - "rollup-plugin-babel": "^2.6.1", - "rollup-plugin-commonjs": "^5.0.5", + "qunitjs": "^2.2.0", + "rollup": "^0.41.5", + "rollup-plugin-babel": "^2.7.1", + "rollup-plugin-commonjs": "^8.0.2", "rollup-plugin-eslint": "^3.0.0", "rollup-plugin-node-resolve": "^2.0.0", "rollup-plugin-uglify": "^1.0.1" diff --git a/src/providers/youtube.js b/src/providers/youtube.js index 5d3ced5..c840e55 100644 --- a/src/providers/youtube.js +++ b/src/providers/youtube.js @@ -120,6 +120,42 @@ export default function( vidim ) { this.emit( 'ready' ); + if ( this._options.loop ) { + + let loopInterval; + + this.on( 'play', () => { + + loopInterval = setInterval( () => { + + if ( + this.getTime() === 0 || + this.getTime() + 0.15 > this.getDuration() + ) { + + this.setTime( 0 ); + this.play(); + + } + + }, 100 ); + + }); + + this.on( 'pause', () => { + + clearInterval( loopInterval ); + + }); + + this.on( 'destroy', () => { + + clearInterval( loopInterval ); + + }); + + } + }, 'onStateChange': ( e ) => {