(function webpackUniversalModuleDefinition(root, factory) { if(typeof exports === 'object' && typeof module === 'object') module.exports = factory(require("clappr")); else if(typeof define === 'function' && define.amd) define(["clappr"], factory); else if(typeof exports === 'object') exports["ClapprThumbnailsPlugin"] = factory(require("clappr")); else root["ClapprThumbnailsPlugin"] = factory(root["Clappr"]); })(this, function(__WEBPACK_EXTERNAL_MODULE_8__) { return /******/ (function(modules) { // webpackBootstrap /******/ // The module cache /******/ var installedModules = {}; /******/ // The require function /******/ function __webpack_require__(moduleId) { /******/ // Check if module is in cache /******/ if(installedModules[moduleId]) /******/ return installedModules[moduleId].exports; /******/ // Create a new module (and put it into the cache) /******/ var module = installedModules[moduleId] = { /******/ exports: {}, /******/ id: moduleId, /******/ loaded: false /******/ }; /******/ // Execute the module function /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); /******/ // Flag the module as loaded /******/ module.loaded = true; /******/ // Return the exports of the module /******/ return module.exports; /******/ } /******/ // expose the modules object (__webpack_modules__) /******/ __webpack_require__.m = modules; /******/ // expose the module cache /******/ __webpack_require__.c = installedModules; /******/ // __webpack_public_path__ /******/ __webpack_require__.p = ""; /******/ // Load entry module and return exports /******/ return __webpack_require__(0); /******/ }) /************************************************************************/ /******/ ([ /* 0 */ /***/ (function(module, exports, __webpack_require__) { 'use strict';Object.defineProperty(exports,"__esModule",{value:true});var _createClass=function(){function defineProperties(target,props){for(var i=0;i0){_this2._renderPlugin();}});});}// provide a reference to the thumb object you provided to remove it // thumbSrc may be an array to remove multiple },{key:'removeThumbnail',value:function removeThumbnail(thumbSrc){var _this3=this;var thumbSrcs=thumbSrc.constructor===Array?thumbSrc:[thumbSrc];return this._onThumbsLoaded.then(function(){var foundAll=true;var foundOne=false;thumbSrcs.forEach(function(a){var found=_this3._thumbs.some(function(thumb,i){if(thumb.src===a){_this3._thumbs.splice(i,1);if(_this3._getOptions().backdropHeight){// remove image from carousel _this3._$backdropCarouselImgs[i].remove();_this3._$backdropCarouselImgs.splice(i,1);}return true;}return false;});if(!found){foundAll=false;}else{foundOne=true;}});if(foundOne){_this3._renderPlugin();}return _es6PromisePolyfill.Promise.resolve(foundAll);});}},{key:'_init',value:function _init(){if(!this._thumbsLoaded){// _init() will be called when the thumbs are loaded, // and whenever the media control rendered event is fired as just before this the dom elements get wiped in IE (https://github.com/tjenkinson/clappr-thumbnails-plugin/issues/5) return;}// Init the backdropCarousel as array to keep reference of thumbnail images this._$backdropCarouselImgs=[];// create/recreate the dom elements for the plugin this._createElements();this._loadBackdrop();this._renderPlugin();}},{key:'_getOptions',value:function _getOptions(){if(!("scrubThumbnails"in this.core.options)){throw"'scrubThumbnails property missing from options object.";}return this.core.options.scrubThumbnails;}},{key:'_appendElToMediaControl',value:function _appendElToMediaControl(){// insert after the background this.core.mediaControl.$el.find(".media-control-background").first().after(this.el);}},{key:'_onMouseMove',value:function _onMouseMove(e){this._calculateHoverPosition(e);this._show=true;this._renderPlugin();}},{key:'_onMouseLeave',value:function _onMouseLeave(){this._show=false;this._renderPlugin();}},{key:'_calculateHoverPosition',value:function _calculateHoverPosition(e){var offset=e.pageX-this.core.mediaControl.$seekBarContainer.offset().left;// proportion into the seek bar that the mouse is hovered over 0-1 this._hoverPosition=Math.min(1,Math.max(offset/this.core.mediaControl.$seekBarContainer.width(),0));}},{key:'_buildThumbsFromOptions',value:function _buildThumbsFromOptions(){var _this4=this;var thumbs=this._getOptions().thumbs;var promises=thumbs.map(function(thumb){return _this4._addThumbFromSrc(thumb);});return _es6PromisePolyfill.Promise.all(promises);}},{key:'_addThumbFromSrc',value:function _addThumbFromSrc(thumbSrc){var _this5=this;return new _es6PromisePolyfill.Promise(function(resolve,reject){var img=new Image();img.onload=function(){resolve(img);};img.onerror=reject;img.src=thumbSrc.url;}).then(function(img){var startTime=thumbSrc.time;// determine the thumb index var index=null;_this5._thumbs.some(function(thumb,i){if(startTime0?_this5._thumbs[index-1]:null;if(prev){// update the duration of the previous thumbnail prev.duration=startTime-prev.time;}// the duration this thumb lasts for // if it is the last thumb then duration will be null var duration=next?next.time-thumbSrc.time:null;var imageW=img.width;var imageH=img.height;var thumb={imageW:imageW,// actual width of image imageH:imageH,// actual height of image x:thumbSrc.x||0,// x coord in image of sprite y:thumbSrc.y||0,// y coord in image of sprite w:thumbSrc.w||imageW,// width of sprite h:thumbSrc.h||imageH,// height of sprite url:thumbSrc.url,time:startTime,// time this thumb represents duration:duration,// how long (from time) this thumb represents src:thumbSrc};_this5._thumbs.splice(index,0,thumb);return thumb;});}// builds a dom element which represents the thumbnail // scaled to the provided height },{key:'_buildImg',value:function _buildImg(thumb,height){var scaleFactor=height/thumb.h;var $img=(0,_clappr.$)("").addClass("thumbnail-img").attr("src",thumb.url);// the container will contain the image positioned so that the correct sprite // is visible var $container=(0,_clappr.$)("
").addClass("thumbnail-container");$container.css("width",thumb.w*scaleFactor);$container.css("height",height);$img.css({height:thumb.imageH*scaleFactor,left:-1*thumb.x*scaleFactor,top:-1*thumb.y*scaleFactor});$container.append($img);return $container;}},{key:'_loadBackdrop',value:function _loadBackdrop(){if(!this._getOptions().backdropHeight){// disabled return;}// append each of the thumbnails to the backdrop carousel var $carousel=this._$carousel;for(var i=0;i=0;i--){var thumb=thumbs[i];if(thumb.time<=time){return i;}}// stretch the first thumbnail back to the start return 0;}},{key:'_renderPlugin',value:function _renderPlugin(){if(!this._thumbsLoaded){return;}if(this._show&&this._thumbs.length>0){this.$el.removeClass("hidden");this._updateCarousel();this._updateSpotlightThumb();}else{this.$el.addClass("hidden");}}},{key:'_createElements',value:function _createElements(){this.$el.html(this.template({'backdropHeight':this._getOptions().backdropHeight,'spotlightHeight':this._getOptions().spotlightHeight}));this.$el.append(_clappr.Styler.getStyleFor(_style2.default));// cache dom references this._$spotlight=this.$el.find(".spotlight");this._$backdrop=this.$el.find(".backdrop");this._$carousel=this._$backdrop.find(".carousel");this.$el.addClass("hidden");this._appendElToMediaControl();}}]);return ScrubThumbnailsPlugin;}(_clappr.UICorePlugin);exports.default=ScrubThumbnailsPlugin;module.exports=exports['default']; /***/ }), /* 1 */ /***/ (function(module, exports) { "use strict";/* MIT License http://www.opensource.org/licenses/mit-license.php Author Tobias Koppers @sokra */// css base code, injected by the css-loader module.exports=function(){var list=[];// return the list of modules as css string list.toString=function toString(){var result=[];for(var i=0;i1){for(var i=1;i element; its readystatechange event will be fired asynchronously once it is inserted // into the document. Do so, thus queuing up the task. Remember to clean up once it's been called. var script=doc.createElement("script");script.onreadystatechange=function(){runIfPresent(handle);script.onreadystatechange=null;html.removeChild(script);script=null;};html.appendChild(script);};}function installSetTimeoutImplementation(){registerImmediate=function registerImmediate(handle){setTimeout(runIfPresent,0,handle);};}// If supported, we should attach to the prototype of global, since that is where setTimeout et al. live. var attachTo=Object.getPrototypeOf&&Object.getPrototypeOf(global);attachTo=attachTo&&attachTo.setTimeout?attachTo:global;// Don't get fooled by e.g. browserify environments. if({}.toString.call(global.process)==="[object process]"){// For Node.js before 0.9 installNextTickImplementation();}else if(canUsePostMessage()){// For non-IE10 modern browsers installPostMessageImplementation();}else if(global.MessageChannel){// For web workers, where supported installMessageChannelImplementation();}else if(doc&&"onreadystatechange"in doc.createElement("script")){// For IE 6–8 installReadyStateChangeImplementation();}else{// For older browsers installSetTimeoutImplementation();}attachTo.setImmediate=setImmediate;attachTo.clearImmediate=clearImmediate;})(typeof self==="undefined"?typeof global==="undefined"?undefined:global:self); /* WEBPACK VAR INJECTION */}.call(exports, (function() { return this; }()), __webpack_require__(3))) /***/ }), /* 5 */ /***/ (function(module, exports, __webpack_require__) { /* WEBPACK VAR INJECTION */(function(global) {"use strict";var scope=typeof global!=="undefined"&&global||typeof self!=="undefined"&&self||window;var apply=Function.prototype.apply;// DOM APIs, for completeness exports.setTimeout=function(){return new Timeout(apply.call(setTimeout,scope,arguments),clearTimeout);};exports.setInterval=function(){return new Timeout(apply.call(setInterval,scope,arguments),clearInterval);};exports.clearTimeout=exports.clearInterval=function(timeout){if(timeout){timeout.close();}};function Timeout(id,clearFn){this._id=id;this._clearFn=clearFn;}Timeout.prototype.unref=Timeout.prototype.ref=function(){};Timeout.prototype.close=function(){this._clearFn.call(scope,this._id);};// Does not start the time, just sets up the members needed. exports.enroll=function(item,msecs){clearTimeout(item._idleTimeoutId);item._idleTimeout=msecs;};exports.unenroll=function(item){clearTimeout(item._idleTimeoutId);item._idleTimeout=-1;};exports._unrefActive=exports.active=function(item){clearTimeout(item._idleTimeoutId);var msecs=item._idleTimeout;if(msecs>=0){item._idleTimeoutId=setTimeout(function onTimeout(){if(item._onTimeout)item._onTimeout();},msecs);}};// setimmediate attaches itself to the global object __webpack_require__(4);// On some exotic environments, it's not clear which object `setimmediate` was // able to install onto. Search each possibility in the same order as the // `setimmediate` library. exports.setImmediate=typeof self!=="undefined"&&self.setImmediate||typeof global!=="undefined"&&global.setImmediate||undefined&&undefined.setImmediate;exports.clearImmediate=typeof self!=="undefined"&&self.clearImmediate||typeof global!=="undefined"&&global.clearImmediate||undefined&&undefined.clearImmediate; /* WEBPACK VAR INJECTION */}.call(exports, (function() { return this; }()))) /***/ }), /* 6 */ /***/ (function(module, exports, __webpack_require__) { exports = module.exports = __webpack_require__(1)(); // imports // module exports.push([module.id, ".scrub-thumbnails {\n position: absolute;\n bottom: 55px;\n width: 100%;\n -webkit-transition: opacity 0.3s ease;\n -moz-transition: opacity 0.3s ease;\n -o-transition: opacity 0.3s ease;\n transition: opacity 0.3s ease; }\n .scrub-thumbnails.hidden {\n opacity: 0; }\n .scrub-thumbnails .thumbnail-container {\n display: inline-block;\n position: relative;\n overflow: hidden;\n background-color: #000000; }\n .scrub-thumbnails .thumbnail-container .thumbnail-img {\n position: absolute;\n width: auto; }\n .scrub-thumbnails .spotlight {\n background-color: #000000;\n overflow: hidden;\n position: absolute;\n bottom: 0;\n left: 0;\n border-color: #ffffff;\n border-style: solid;\n border-width: 2px; }\n .scrub-thumbnails .spotlight img {\n width: auto; }\n .scrub-thumbnails .backdrop {\n position: absolute;\n left: 0;\n bottom: 0;\n right: 0;\n background-color: #000000;\n overflow: hidden; }\n .scrub-thumbnails .backdrop .carousel {\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n white-space: nowrap; }\n .scrub-thumbnails .backdrop .carousel img {\n width: auto; }\n", ""]); // exports /***/ }), /* 7 */ /***/ (function(module, exports) { module.exports = "<% if (backdropHeight) { %>\n
px;\">\n\t
\n
\n<% }; %>\n<% if (spotlightHeight) { %>\n
px;\">
\n<% }; %>\n"; /***/ }), /* 8 */ /***/ (function(module, exports) { module.exports = __WEBPACK_EXTERNAL_MODULE_8__; /***/ }) /******/ ]) }); ;