seethru - npm Package Compare versions

Comparing version 3.3.0 to 4.0.0

dist/seeThru.min.js

@@ -1,2 +0,3 @@
-/*! seethru 3.3.0 19-05-2018 see https://github.com/m90/seeThru for details */
-!function(a,b){"function"==typeof define&&define.amd?define(b):"object"==typeof exports?module.exports=b():a.seeThru=b()}(this,function(){function a(a,b){var c,d=document.createElement("canvas"),e=d.getContext("2d");d.width=b.width,d.height=b.height,e.drawImage(a,0,0,b.width,b.height),c=e.getImageData(0,0,b.width,b.height);for(var f=3,g=c.data.length;g>f;f+=4)c.data[f-1]=c.data[f-2]=c.data[f-3]=c.data[f],c.data[f]=255;return c}function b(a,b){for(var c=3,d=a.data.length;d>c;c+=4)a.data[c]=b[c-1],a.data[c-3]=a.data[c-3]/(b[c-1]?b[c-1]/255:1),a.data[c-2]=a.data[c-2]/(b[c-1]?b[c-1]/255:1),a.data[c-1]=a.data[c-1]/(b[c-1]?b[c-1]/255:1);return a}function c(){for(var a=0,b=["ms","moz","webkit","o"],c=0;c<b.length;c++)if(window[b[c]+"RequestAnimationFrame"])return window[b[c]+"RequestAnimationFrame"];return function(b){var c=(new Date).getTime(),d=Math.max(0,16-(c-a)),e=window.setTimeout(function(){b(c+d)},d);return a=c+d,e}}function d(){for(var a=["ms","moz","webkit","o"],b=0;b<a.length;b++){if(window[a[b]+"CancelAnimationFrame"])return window[a[b]+"CancelAnimationFrame"];if(window[a[b]+"CancelRequestAnimationFrame"])return window[a[b]+"CancelRequestAnimationFrame"]}return function(a){clearTimeout(a)}}function e(a){return[].slice.call(a)}function f(a){return Object.prototype.toString.call(a)}function g(a,b){b.nextSibling?b.parentNode.insertBefore(a,b.nextSibling):b.parentNode.appendChild(a)}function h(a){return a.tagName?a:"[object String]"===f(a)?document.querySelector(a):a.length?a[0]:null}function i(a){var b=[];for(var c in a)a.hasOwnProperty(c)&&b.push(c+": "+a[c]+";");return b.join("")}function j(a){a.fn&&!a.fn.seeThru&&(a.fn.seeThru=function(){var b=e(arguments);return this.each(function(){var c=a(this);if(!b.length||1===b.length&&"[object Object]"===f(b[0])){if(c.data("seeThru"))return;c.data("seeThru",new m(this,b[0])._init())}else if(b.length&&"[object String]"===f(b[0])){if(!c.data("seeThru"))return;c.data("seeThru").ready(function(){c.data("seeThru")[b[0]](b[1]),"revert"===b[0]&&c.data("seeThru",null)})}})})}function k(){var a=[];this.push=function(b){return b?(a.push(b),b):null},this.has=function(b){return a.some(function(a){return a===b})},this.remove=function(b){a=a.filter(function(a){return a!==b})}}function l(e,f){var j,k,l={},m=f.mask?1:2,n={width:parseInt(f.width,10),height:parseInt(f.height,10)},o=document.createElement("canvas"),p=o.getContext("2d"),q=document.createElement("canvas"),r=q.getContext("2d"),s=window.requestAnimationFrame||c(),t=window.cancelAnimationFrame||d(),u=null,v=function(a){var c,d,g,h,i=e.currentTime;if(u!==i&&e.readyState>1){for(u=i,p.drawImage(e,0,0,n.width,n.height*m),c=p.getImageData(0,0,n.width,n.height),d=p.getImageData(0,n.height,n.width,n.height).data,f.unmult&&b(c,d),g=3,h=c.data.length;h>g;g+=4)c.data[g]=f.alphaMask?d[g-1]:Math.max(d[g-1],d[g-2],d[g-3]);r.putImageData(c,0,0,0,0,n.width,n.height)}a&&(k=s(function(){v(!0)}))},w=function(b){if("IMG"!==b.tagName)throw new Error("Cannot use non-image element as mask!");b.width=n.width,b.height=n.height,f.alphaMask?p.putImageData(a(b,n),0,n.height):p.drawImage(b,0,n.height,n.width,n.height),b.style.display="none"};this.startRendering=function(){return v(!0),this},this.stopRendering=function(){return t(k),this},this.teardown=function(){t(k),e.parentNode.removeChild(e.nextSibling),e.parentNode.removeChild(e.nextSibling);for(var a in l)Object.prototype.hasOwnProperty.call(l,a)&&(e.style[a]=l[a]);return this},this.updateMask=function(a){return w(a),this},this.getCanvas=function(){return q},this.getPoster=function(){return j};var x=e.getBoundingClientRect();n.height&&n.width||(e.width||e.height?e.height?e.width?(n.width=n.width||x.width,n.height=n.height||x.height/m):(n.width=n.width||x.height*(e.videoWidth/Math.floor(e.videoHeight/m)),n.height=n.height||x.height):(n.width=n.width||x.width,n.height=n.height||x.width/(e.videoWidth/Math.floor(e.videoHeight/m))):(n.width=n.width||e.videoWidth,n.height=n.height||e.videoHeight/m)),o.width=n.width,o.height=2*n.height,o.style.display="none",o.className="seeThru-buffer",q.width=n.width,q.height=n.height,q.className="seeThru-display",g(o,e),g(q,e),f.mask&&w(h(f.mask)),f.poster&&e.poster&&(j=document.createElement("div"),j.className="seeThru-poster",j.style.cssText=i({width:n.width+"px",height:n.height+"px",position:"absolute",top:0,left:0,"background-size":"cover","background-position":"center","background-image":'url("'+e.poster+'")'}),g(j,e));for(var y in f.videoStyles)Object.prototype.hasOwnProperty.call(f.videoStyles,y)&&(l[y]=window.getComputedStyle(e)[y],e.style[y]=f.videoStyles[y]);"autoplay"===f.start&&e.play()}function m(a,b){var c=this,d=!1,e=[],f={start:"autoplay",end:"loop",mask:!1,alphaMask:!1,width:null,height:null,poster:!1,unmult:!1,videoStyles:{display:"none"}},g=function(){try{return new Event("submit",{bubbles:!1}).bubbles!==!1?!1:new Event("submit",{bubbles:!0}).bubbles!==!0?!1:!0}catch(a){return!1}}(),i=["mouseenter","mouseleave","click","mousedown","mouseup","mousemove","mouseover","hover","dblclick","contextmenu","focus","blur"];if(b=b||{},this._video=h(a),!this._video||"VIDEO"!==this._video.tagName)throw new Error("Could not use specified source");this._options=function(a){for(var b in f)f.hasOwnProperty(b)&&(b in a||(a[b]=f[b]));return a}(b),this._init=function(){var a=function(){function a(){c._video.play(),c._options.poster?c._seeThru.getPoster().removeEventListener("click",a):c._seeThru.getCanvas().removeEventListener("click",a)}if(n.has(this._video))throw new Error("seeThru already initialized on passed video element!");this._seeThru=new l(this._video,this._options),"clicktoplay"===this._options.start?this._options.poster?this._seeThru.getPoster().addEventListener("click",a):this._seeThru.getCanvas().addEventListener("click",a):"autoplay"===this._options.start&&b.poster&&(this._seeThru.getPoster().style.display="none"),"rewind"===this._options.end?this._video.addEventListener("ended",function(){c._video.currentTime=0,c._seeThru.getCanvas().addEventListener("click",a)}):"stop"!==this._options.end&&this._video.addEventListener("ended",function(){c._video.currentTime=0,c._video.play()}),this._options.poster&&this._video.poster&&(this._video.addEventListener("play",function(){c._seeThru.getPoster().style.display="none"}),this._video.addEventListener("pause",function(){c._seeThru.getPoster().style.display="block"})),i.forEach(function(a){c._seeThru.getCanvas().addEventListener(a,function(){var b;g?b=new Event(a):(b=document.createEvent("Event"),b.initEvent(a,!0,!0)),c._video.dispatchEvent(b)})}),this._seeThru.startRendering(),d=!0,n.push(this._video),e.forEach(function(a){a(c,c._video,c.getCanvas())})}.bind(this);return this._video.readyState>0?a():this._video.addEventListener("loadedmetadata",function(){a()}),this},this.getCanvas=function(){return this._seeThru.getCanvas()},this.play=function(){return this._video.play(),this},this.pause=function(){return this._video.pause(),this},this.revert=function(){this._seeThru.teardown(),n.remove(this._video)},this.updateMask=function(a){return this._seeThru.updateMask(h(a)),this},this.ready=function(a){return d?setTimeout(function(){a(c,c._video,c.getCanvas())},0):e.push(a),this}}window.jQuery&&j(window.jQuery);var n=new k;return{create:function(a,b){return new m(a,b)._init()},attach:j}});
+/*! seethru 4.0.0 09-06-2018 see https://github.com/m90/seeThru for details */
+
+!function(e,t){"function"==typeof define&&define.amd?define(t):"object"==typeof exports?module.exports=t():e.seeThru=t()}(this,function(){var o=function(){try{return!1===new Event("submit",{bubbles:!1}).bubbles&&!0===new Event("submit",{bubbles:!0}).bubbles}catch(e){return!1}}(),h=["mouseenter","mouseleave","click","mousedown","mouseup","mousemove","mouseover","hover","dblclick","contextmenu","focus","blur"];function r(e){return Object.prototype.toString.call(e)}function w(e,t){t.nextSibling?t.parentNode.insertBefore(e,t.nextSibling):t.parentNode.appendChild(e)}function _(e){return e.tagName?e:"[object String]"===r(e)?document.querySelector(e):e.length?e[0]:null}function e(a){a.fn&&!a.fn.seeThru&&(a.fn.seeThru=function(){var e,n=(e=arguments,[].slice.call(e)),i=n.shift();return this.each(function(){var e=this,t=a(this);if(0===n.length){if(t.data("seeThru"))return;t.data("seeThru",new s(this,i)._init())}else if("[object String]"===r(i)){if(!t.data("seeThru"))return;t.data("seeThru").ready(function(){t.data("seeThru")[i].apply(e,n),"revert"===i&&t.data("seeThru",null)})}})})}function d(o,h){var e,d,t={},s=h.mask?1:2,u={width:parseInt(h.width,10),height:parseInt(h.height,10)},n=document.createElement("canvas"),c=n.getContext("2d"),i=document.createElement("canvas"),l=i.getContext("2d"),v=window.requestAnimationFrame||function(){for(var a=0,e=["ms","moz","webkit","o"],t=0;t<e.length;t++)if(window[e[t]+"RequestAnimationFrame"])return window[e[t]+"RequestAnimationFrame"];return function(e){var t=(new Date).getTime(),n=Math.max(0,16-(t-a)),i=window.setTimeout(function(){e(t+n)},n);return a=t+n,i}}(),a=window.cancelAnimationFrame||function(){for(var e=["ms","moz","webkit","o"],t=0;t<e.length;t++){if(window[e[t]+"CancelAnimationFrame"])return window[e[t]+"CancelAnimationFrame"];if(window[e[t]+"CancelRequestAnimationFrame"])return window[e[t]+"CancelRequestAnimationFrame"]}return function(e){clearTimeout(e)}}(),g=null,f=function(e){var t,n,i,a,r=o.currentTime;if(g!==r&&1<o.readyState){for(g=r,c.drawImage(o,0,0,u.width,u.height*s),t=c.getImageData(0,0,u.width,u.height),n=c.getImageData(0,u.height,u.width,u.height).data,h.unmult&&function(e,t){for(var n=3,i=e.data.length;n<i;n+=4)e.data[n]=t[n-1],e.data[n-3]=e.data[n-3]/(t[n-1]?t[n-1]/255:1),e.data[n-2]=e.data[n-2]/(t[n-1]?t[n-1]/255:1),e.data[n-1]=e.data[n-1]/(t[n-1]?t[n-1]/255:1)}(t,n),i=3,a=t.data.length;i<a;i+=4)t.data[i]=h.alphaMask?n[i-1]:Math.max(n[i-1],n[i-2],n[i-3]);l.putImageData(t,0,0,0,0,u.width,u.height)}e&&(d=v(function(){f(!0)}))},r=function(e){if("IMG"!==e.tagName)throw new Error("Cannot use non-image element as mask!");e.width=u.width,e.height=u.height,h.alphaMask?c.putImageData(function(e,t){var n,i=document.createElement("canvas"),a=i.getContext("2d");i.width=t.width,i.height=t.height,a.drawImage(e,0,0,t.width,t.height);for(var r=3,o=(n=a.getImageData(0,0,t.width,t.height)).data.length;r<o;r+=4)n.data[r-1]=n.data[r-2]=n.data[r-3]=n.data[r],n.data[r]=255;return n}(e,u),0,u.height):c.drawImage(e,0,u.height,u.width,u.height),e.style.display="none"};this.startRendering=function(){return f(!0),this},this.stopRendering=function(){return a(d),this},this.teardown=function(){for(var e in a(d),o.parentNode.removeChild(o.nextSibling),o.parentNode.removeChild(o.nextSibling),t)Object.prototype.hasOwnProperty.call(t,e)&&(o.style[e]=t[e]);return this},this.updateMask=function(e){return r(e),this},this.getCanvas=function(){return i},this.getPoster=function(){return e};var m=o.getBoundingClientRect();for(var p in u.height&&u.width||(o.width||o.height?o.height?o.width?(u.width=u.width||m.width,u.height=u.height||m.height/s):(u.width=u.width||m.height*(o.videoWidth/Math.floor(o.videoHeight/s)),u.height=u.height||m.height):(u.width=u.width||m.width,u.height=u.height||m.width/(o.videoWidth/Math.floor(o.videoHeight/s))):(u.width=u.width||o.videoWidth,u.height=u.height||o.videoHeight/s)),n.width=u.width,n.height=2*u.height,n.style.display="none",n.className=h.namespace+"-buffer",i.width=u.width,i.height=u.height,i.className=h.namespace+"-display",w(n,o),w(i,o),h.mask&&r(_(h.mask)),h.poster&&o.poster&&((e=document.createElement("div")).className="seeThru-poster",e.style.cssText=function(e){var t=[];for(var n in e)e.hasOwnProperty(n)&&t.push(n+": "+e[n]+";");return t.join("")}({width:u.width+"px",height:u.height+"px",position:"absolute",top:0,left:0,"background-size":"cover","background-position":"center","background-image":'url("'+o.poster+'")'}),w(e,o)),h.videoStyles)Object.prototype.hasOwnProperty.call(h.videoStyles,p)&&(t[p]=window.getComputedStyle(o)[p],o.style[p]=h.videoStyles[p])}function s(e,t){var n=this,i=!1,a=[],r={start:"external",end:"stop",mask:!1,alphaMask:!1,width:null,height:null,poster:!1,unmult:!1,videoStyles:{display:"none"},namespace:"seeThru"};if(t=t||{},n._video=_(e),!n._video||"VIDEO"!==n._video.tagName)throw new Error("Could not use specified source");n._options=function(e){for(var t in r)r.hasOwnProperty(t)&&(t in e||(e[t]=r[t]));return e}(t),n._init=function(){function e(){function e(){n._video.play(),n._options.poster?n._seeThru.getPoster().removeEventListener("click",e):n._seeThru.getCanvas().removeEventListener("click",e)}if(u.has(n._video))throw new Error("seeThru already initialized on passed video element!");n._seeThru=new d(n._video,n._options),"clicktoplay"===n._options.start&&(n._options.poster?n._seeThru.getPoster().addEventListener("click",e):n._seeThru.getCanvas().addEventListener("click",e)),"rewind"===n._options.end?n._video.addEventListener("ended",function(){n._video.currentTime=0,n._seeThru.getCanvas().addEventListener("click",e)}):"stop"!==n._options.end&&n._video.addEventListener("ended",function(){n._video.currentTime=0,n._video.play()}),n._options.poster&&n._video.poster&&(n._video.addEventListener("play",function(){n._seeThru.getPoster().style.display="none"}),n._video.addEventListener("pause",function(){n._seeThru.getPoster().style.display="block"})),h.forEach(function(t){n._seeThru.getCanvas().addEventListener(t,function(){var e;o?e=new Event(t):(e=document.createEvent("Event")).initEvent(t,!0,!0),n._video.dispatchEvent(e)})}),n._seeThru.startRendering(),i=!0,u.push(n._video),a.forEach(function(e){e(n,n._video,n.getCanvas())})}return 0<n._video.readyState?e():n._video.addEventListener("loadedmetadata",e),n},n.getCanvas=function(){return n._seeThru.getCanvas()},n.play=function(){return n._video.play(),n},n.pause=function(){return n._video.pause(),n},n.revert=function(){n._seeThru.teardown(),u.remove(n._video)},n.updateMask=function(e){return n._seeThru.updateMask(_(e)),n},n.ready=function(e){return i?setTimeout(function(){e(n,n._video,n.getCanvas())},0):a.push(e),n}}window.jQuery&&e(window.jQuery);var u=new function(){var n=[];this.push=function(e){return e?(n.push(e),e):null},this.has=function(t){return n.some(function(e){return e===t})},this.remove=function(t){n=n.filter(function(e){return e!==t})}};return{create:function(e,t){return new s(e,t)._init()},attach:e}});

package.json

 {
   "name": "seethru",
   "description": "HTML5 video with alpha channel transparencies",
-  "version": "3.3.0",
-  "author": {
-    "name": "Frederik Ring",
-    "email": "[e-mail]"
-  },
+  "version": "4.0.0",
+  "author": "Frederik Ring <[e-mail]>",
+  "contributors": [
+    "Caio Matias <[e-mail]>",
+    "CookiesEater <[e-mail]>",
+    "DiSoul <[e-mail]>",
+    "Jakob Eriksen <[e-mail]>",
+    "Lukas Drgon <[e-mail]>",
+    "Mandana Eibegger <[e-mail]>",
+    "Matt Stone <[e-mail]>",
+    "Robbert Helling <[e-mail]>",
+    "Zabellfour <[e-mail]>"
+  ],
   "scripts": {
@@ -33,9 +41,9 @@ "posttest": "grunt lint",
   "devDependencies": {
-    "grunt": "~0.4.1",
+    "grunt": "^1.0.3",
     "grunt-cli": "^1.2.0",
-    "grunt-contrib-uglify": "~0.2.0",
+    "grunt-contrib-uglify": "^3.3.0",
     "grunt-eslint": "^20.0.0",
     "grunt-jsonlint": "^1.0.4",
     "jquery": "^3.2.1",
-    "karma": "^1.7.0",
+    "karma": "^2.0.2",
     "karma-chrome-launcher": "^2.1.1",
@@ -42,0 +50,0 @@ "karma-cli": "^1.0.1",

README.md

@@ -7,2 +7,4 @@ # seeThru - HTML5 video with alpha channel transparencies
 
+---
+
 Your HTML5 video source is re-rendered into a canvas-element, adding the possibility to use transparencies in your video. Alpha information is either included in the video's source file (moving) or in a seperate `<img>`-element (static).
@@ -12,4 +14,6 @@
 
-**Breaking News**: Support for VP8/WebM-video with Alpha Transparencies has landed Chrome by now so let's hope other browser vendors will catch up soon. See the **[article at HTML5 Rocks][29]**.
+## Before you start
 
+Native Support for VP8/WebM-video with Alpha Transparencies has landed in Chrome quite a while ago, so ideally other **[browser vendors will catch up soon][35]** and this script becomes obsolete at some point. You can see the **[article at HTML5 Rocks][29]** and read the discussion about **[how to use seeThru as a "polyfill"][34]** for more information.
+
 ## Download / Installation
@@ -29,3 +33,3 @@
 ```html
-<script src="https://unpkg.com/seethru@3/dist/seeThru.min.js"></script>
+<script src="https://unpkg.com/seethru@4/dist/seeThru.min.js"></script>
 <!-- or -->
@@ -39,3 +43,3 @@ <script src="https://cdn.jsdelivr.net/npm/seethru@3/dist/seeThru.min.js"></script>
 
-This approach is a **cheap hack**! Due to the lack of alpha support in HTML5 video it is one of the few ways to use video with alpha, so it might be the only viable option in some cases, but please don't expect it to work like a charm when processing 30fps 1080p video (or multiple videos) on an old machine with 39 browser tabs opened. Test your usage thoroughly on old machines as well and if you're not satisfied with the speed, maybe think about using Flash Video (there, I said it!). Also: the approach has **very limited mobile support**, sorry!!!
+This approach is a **cheap hack**! Due to the lack of alpha support in HTML5 video it is one of the few ways to use video with alpha, so it might be the only viable option in some cases, but please don't expect it to work like a charm when processing 30fps 1080p video (or multiple videos) on an old machine with 39 browser tabs opened. Test your usage thoroughly on old machines as well and if you're not satisfied with the speed, maybe think about using a purely native solution. Also: the mobile support of this approach is **very limited**.
 
@@ -102,4 +106,4 @@ ## Table of contents
 
- - `start` defines the video's behavior on load. It defaults to `autoplay` which will automatically start the video as soon as possible. Other options are `clicktoplay` which will display the first frame of the video until it is clicked or `external` which will just display the first frame of the video and wait for external JS calls (so you can build your own interface or something - note that although the `<video>` is hidden it is still playing and controls the rendered image).
- - `end` defines the video's behavior when it has reached its end. It defaults to `loop` which will loop the video. Other possibilities are `stop` (it will just stop), or `rewind` which will jump back to the first frame and stop. If you use `start: 'clicktoplay'` along with `rewind` or `end` the video will be clickable again when finished.
+ - `start` defines the video's behavior on load. It defaults to `external` which will just display the first frame of the video and wait for the caller to initiate video playback. Other options are `clicktoplay` which will display the first frame of the video until it is clicked.
+ - `end` defines the video's behavior when it has reached its end. It defaults to `stop`. Other possibilities are `rewind` which will jump back to the first frame and stop. If you use `start: 'clicktoplay'` along with `rewind` or `end` the video will be clickable again when finished.
  - `staticMask` lets you use the content of an `<img>` node as alpha information (also black and white). The parameter expects a CSS selector (preferrably ID) that refers directly to an image tag, like `#fancy-mask`. In case the selector matches nothing or a non-image node the option is ignored.
@@ -112,2 +116,3 @@ - `alphaMask` specifies if the script uses either the black and white information (i.e. `false`) or the alpha information (i.e. `true`) of the element specified in the `mask` parameter. Defaults to `false`.
  - `videoStyles` is the CSS (in object notation) that is used to hide the original video - can be updated in order to work around autoplay restrictions. It defaults to `{ display: 'none' }`
+ - `namespace` is the prefix that will be used for the CSS classnames applied to the created DOM elements (buffer, display, posterframe), defaults to `seeThru`
 
@@ -117,3 +122,3 @@ This might look like this:
 ```js
-seeThru.create('#my-video', { start: 'autoplay' , end: 'stop' });
+seeThru.create('#my-video');
 ```
@@ -249,12 +254,12 @@
 
-In any case you will need to add the `playsinline` attribute to the `<video>` tag. If a video has audio adding the `muted` attribute will enable `playsinline`.
+In any case you will need to add the `playsinline` attribute to the `<video>` tag. If a video has audio, adding the `muted` attribute will enable `playsinline`.
 
 ## Browser support
 
-Tested on Chrome, Firefox, Safari, Opera and IE 9.0+
-(the browser has to support `<video>` and `<canvas>` of course)<br/>See caniuse.com for browsers that support **[`<canvas>`][24]** and **[`<video>`][25]**<br/>If you are looking for a tool to detect these features have a look at <a href="http://www.modernizr.com/">Modernizr</a>
+The script is tested on Chrome, Firefox, Safari, Opera and IE 9.0+.  
+See caniuse.com for browsers that support **[`<canvas>`][24]** and **[`<video>`][25]**  
 
 ## License
 
-All source code is licensed under the **[MIT License][11]**, demo content, video and imagery is **[CC-BY-SA 3.0][12]**
+All source code is licensed under the **[MIT License][11]**, demo content, video and imagery is available under **[CC-BY-SA 3.0][12]**
 
@@ -294,1 +299,3 @@ ## Thank you
 [33]:https://webkit.org/blog/6784/new-video-policies-for-ios/
+[34]: https://github.com/m90/seeThru/issues/47
+[35]: https://caniuse.com/#feat=webm

src/seeThru.js

@@ -22,3 +22,30 @@ /**
 })(this, function () {
+	var canConstructEvents = (function () {
+		try {
+			if (new Event('submit', { bubbles: false }).bubbles !== false) {
+				return false;
+			} else if (new Event('submit', { bubbles: true }).bubbles !== true) {
+				return false;
+			}
+			return true;
+		} catch (e) {
+			return false;
+		}
+	})();
 
+	var eventsToEcho = [
+		'mouseenter',
+		'mouseleave',
+		'click',
+		'mousedown',
+		'mouseup',
+		'mousemove',
+		'mouseover',
+		'hover',
+		'dblclick',
+		'contextmenu',
+		'focus',
+		'blur'
+	];
+
 	/**
@@ -148,5 +175,4 @@ * convert an image's alpha channel into a black & white canvasPixelArray
 			return input[0];
-		} else {
-			return null;
 		}
+		return null;
 	}
@@ -174,20 +200,19 @@
 	function attachSelfAsPlugin ($) {
-
 		if (!$.fn || $.fn.seeThru) { return; }
 
 		$.fn.seeThru = function () {
-
 			var args = slice(arguments);
-
+			var head = args.shift();
 			return this.each(function () {
+				var self = this;
 				var $this = $(this);
-				if (!args.length || (args.length === 1 && toString(args[0]) === '[object Object]')) {
+				if (args.length === 0) {
 					if ($this.data('seeThru')) { return; }
-					$this.data('seeThru', new SeeThru(this, args[0])._init());
-				} else if (args.length && toString(args[0]) === '[object String]') {
+					$this.data('seeThru', new SeeThru(this, head)._init());
+				} else if (toString(head) === '[object String]') {
 					if (!$this.data('seeThru')) { return; }
 					// all methods other then init will be deferred until `.ready()`
 					$this.data('seeThru').ready(function () {
-						$this.data('seeThru')[args[0]](args[1]);
-						if (args[0] === 'revert') {
+						$this.data('seeThru')[head].apply(self, args);
+						if (head === 'revert') {
 							$this.data('seeThru', null);
@@ -236,3 +261,2 @@ }
 	function TransparentVideo (video, options) {
-
 		var initialStyles = {};
@@ -278,6 +302,5 @@ var divisor = options.mask ? 1 : 2; //static alpha data will not cut the image dimensions
 			}
+		};
 
-		};
 		var drawStaticMask = function (node) {
-
 			if (node.tagName !== 'IMG') throw new Error('Cannot use non-image element as mask!');
@@ -295,3 +318,2 @@
 			node.style.display = 'none';
-
 		};
@@ -393,7 +415,7 @@
 		bufferCanvas.style.display = 'none';
-		bufferCanvas.className = 'seeThru-buffer';
+		bufferCanvas.className = options.namespace + '-buffer';
 
 		displayCanvas.width = dimensions.width;
 		displayCanvas.height = dimensions.height;
-		displayCanvas.className = 'seeThru-display';
+		displayCanvas.className = options.namespace + '-display';
 
@@ -404,3 +426,5 @@ insertAfter(bufferCanvas, video);
 		// draw static mask if needed
-		if (options.mask) drawStaticMask(getNode(options.mask));
+		if (options.mask) {
+			drawStaticMask(getNode(options.mask));
+		}
 
@@ -430,5 +454,2 @@ // append "posterframe" if option is set and attribute is present on the video
 		}
-
-		if (options.start === 'autoplay') { video.play(); }
-
 	}
@@ -448,4 +469,4 @@
 		var defaultOptions = {
-			start: 'autoplay', // 'autoplay', 'clicktoplay', 'external' (will display the first frame and make the video wait for an external interface) - defaults to autoplay
-			end: 'loop', // 'loop', 'rewind', 'stop' any other input will default to 'loop'
+			start: 'external', // 'clicktoplay' or 'external' defaults to external
+			end: 'stop', // 'loop', 'rewind', 'stop' any other input will default to 'stop'
 			mask: false, // this lets you define a <img> (selected by #id or .class - class will use the first occurence)used as a black and white mask instead of adding the alpha to the video
@@ -457,38 +478,12 @@ alphaMask: false, // defines if the used `mask` uses black and white or alpha information - defaults to false, i.e. black and white
 			unmult: false, // set this to true if your video material is premultiplied on black - might cause performance issues
-			videoStyles: { display: 'none' } // this is the CSS that is used to hide the original video - can be updated in order to work around autoplay restrictions
+			videoStyles: { display: 'none' }, // this is the CSS that is used to hide the original video - can be updated in order to work around autoplay restrictions
+			namespace: 'seeThru' // this will be used for prefixing the CSS classnames applied to the created elements
 		};
-		var canConstructEvents = (function () {
-			try {
-				if (new Event('submit', { bubbles: false }).bubbles !== false) {
-					return false;
-				} else if (new Event('submit', { bubbles: true }).bubbles !== true) {
-					return false;
-				} else {
-					return true;
-				}
-			} catch (e) {
-				return false;
-			}
-		})();
-		var eventsToEcho = [
-			'mouseenter',
-			'mouseleave',
-			'click',
-			'mousedown',
-			'mouseup',
-			'mousemove',
-			'mouseover',
-			'hover',
-			'dblclick',
-			'contextmenu',
-			'focus',
-			'blur'
-		];
 
 		options = options || {};
-		this._video = getNode(DOMNode);
+		self._video = getNode(DOMNode);
 
-		if (!this._video || this._video.tagName !== 'VIDEO') throw new Error('Could not use specified source');
+		if (!self._video || self._video.tagName !== 'VIDEO') throw new Error('Could not use specified source');
 
-		this._options = (function (options) {
+		self._options = (function (options) {
 			for (var key in defaultOptions) {
@@ -510,6 +505,4 @@ if (defaultOptions.hasOwnProperty(key)) {
 		*/
-		this._init = function () {
-
-			var runInit = function () {
-
+		self._init = function () {
+			function runInit () {
 				function playSelfAndUnbind () {
@@ -524,25 +517,23 @@ self._video.play();
 
-				if (elementStore.has(this._video)) { throw new Error('seeThru already initialized on passed video element!'); }
+				if (elementStore.has(self._video)) { throw new Error('seeThru already initialized on passed video element!'); }
 
-				this._seeThru = new TransparentVideo(this._video, this._options);
+				self._seeThru = new TransparentVideo(self._video, self._options);
 
 				// attach behavior for start options
-				if (this._options.start === 'clicktoplay') {
-					if (this._options.poster) {
-						this._seeThru.getPoster().addEventListener('click', playSelfAndUnbind);
+				if (self._options.start === 'clicktoplay') {
+					if (self._options.poster) {
+						self._seeThru.getPoster().addEventListener('click', playSelfAndUnbind);
 					} else {
-						this._seeThru.getCanvas().addEventListener('click', playSelfAndUnbind);
+						self._seeThru.getCanvas().addEventListener('click', playSelfAndUnbind);
 					}
-				} else if (this._options.start === 'autoplay' && options.poster) {
-					this._seeThru.getPoster().style.display = 'none';
 				}
 
 				// attach behavior for end options
-				if (this._options.end === 'rewind') {
-					this._video.addEventListener('ended', function () {
+				if (self._options.end === 'rewind') {
+					self._video.addEventListener('ended', function () {
 						self._video.currentTime = 0;
 						self._seeThru.getCanvas().addEventListener('click', playSelfAndUnbind);
 					});
-				} else if (this._options.end !== 'stop') {
-					this._video.addEventListener('ended', function () {
+				} else if (self._options.end !== 'stop') {
+					self._video.addEventListener('ended', function () {
 						self._video.currentTime = 0;
@@ -554,7 +545,7 @@ self._video.play();
 				// attach behavior for posterframe option
-				if (this._options.poster && this._video.poster) {
-					this._video.addEventListener('play', function () {
+				if (self._options.poster && self._video.poster) {
+					self._video.addEventListener('play', function () {
 						self._seeThru.getPoster().style.display = 'none';
 					});
-					this._video.addEventListener('pause', function () {
+					self._video.addEventListener('pause', function () {
 						self._seeThru.getPoster().style.display = 'block';
@@ -581,22 +572,20 @@ });
 
-				this._seeThru.startRendering();
+				self._seeThru.startRendering();
 
 				ready = true;
 
-				elementStore.push(this._video);
+				elementStore.push(self._video);
 
-				callbacks.forEach(function (cb) { cb(self, self._video, self.getCanvas()); });
+				callbacks.forEach(function (cb) {
+					cb(self, self._video, self.getCanvas());
+				});
+			}
 
-			}.bind(this);
-
-			if (this._video.readyState > 0) {
+			if (self._video.readyState > 0) {
 				runInit();
 			} else {
-				this._video.addEventListener('loadedmetadata', function () {
-					runInit();
-				});
+				self._video.addEventListener('loadedmetadata', runInit);
 			}
 
-			return this;
-
+			return self;
 		};
@@ -610,4 +599,4 @@
 		*/
-		this.getCanvas = function () {
-			return this._seeThru.getCanvas();
+		self.getCanvas = function () {
+			return self._seeThru.getCanvas();
 		};
@@ -621,5 +610,5 @@
 		*/
-		this.play = function () {
-			this._video.play();
-			return this;
+		self.play = function () {
+			self._video.play();
+			return self;
 		};
@@ -633,5 +622,5 @@
 		*/
-		this.pause = function () {
-			this._video.pause();
-			return this;
+		self.pause = function () {
+			self._video.pause();
+			return self;
 		};
@@ -644,5 +633,5 @@
 		*/
-		this.revert = function () {
-			this._seeThru.teardown();
-			elementStore.remove(this._video);
+		self.revert = function () {
+			self._seeThru.teardown();
+			elementStore.remove(self._video);
 		};
@@ -657,5 +646,5 @@
 		*/
-		this.updateMask = function (mask) {
-			this._seeThru.updateMask(getNode(mask));
-			return this;
+		self.updateMask = function (mask) {
+			self._seeThru.updateMask(getNode(mask));
+			return self;
 		};
@@ -671,3 +660,3 @@
 		*/
-		this.ready = function (cb) {
+		self.ready = function (cb) {
 			if (ready) {
@@ -680,3 +669,3 @@ setTimeout(function () {
 			}
-			return this;
+			return self;
 		};
@@ -687,3 +676,5 @@
 	// if we have a global version of jQuery we'll automatically attach the script as a plugin
-	if (window.jQuery) attachSelfAsPlugin(window.jQuery);
+	if (window.jQuery) {
+		attachSelfAsPlugin(window.jQuery);
+	}
 
@@ -690,0 +681,0 @@ var elementStore = new Store();

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Lines of code

749

increased by0.27%

Number of lines in readme file

293

increased by2.45%

Worsened metrics

Total package byte prevSize

52913

decreased by-0.37%

No dependency changes