UNPKG

vue-playlist

Version:

Simple vue component that takes an array of videos as a prop and stitches them together/plays seamlessly in a custom video player

2 lines 17.3 kB
(function(t,e){"object"===typeof exports&&"object"===typeof module?module.exports=e(require("vue")):"function"===typeof define&&define.amd?define([],e):"object"===typeof exports?exports["mishka"]=e(require("vue")):t["mishka"]=e(t["Vue"])})("undefined"!==typeof self?self:this,function(t){return function(t){var e={};function n(r){if(e[r])return e[r].exports;var i=e[r]={i:r,l:!1,exports:{}};return t[r].call(i.exports,i,i.exports,n),i.l=!0,i.exports}return n.m=t,n.c=e,n.d=function(t,e,r){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:r})},n.r=function(t){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"===typeof t&&t&&t.__esModule)return t;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var i in t)n.d(r,i,function(e){return t[e]}.bind(null,i));return r},n.n=function(t){var e=t&&t.__esModule?function(){return t["default"]}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s="fb15")}({"01f9":function(t,e,n){"use strict";var r=n("2d00"),i=n("5ca1"),o=n("2aba"),a=n("32e9"),u=n("84f2"),c=n("41a0"),s=n("7f20"),l=n("38fd"),f=n("2b4c")("iterator"),p=!([].keys&&"next"in[].keys()),y="@@iterator",d="keys",v="values",h=function(){return this};t.exports=function(t,e,n,b,m,x,g){c(n,e,b);var P,I,S,_=function(t){if(!p&&t in j)return j[t];switch(t){case d:return function(){return new n(this,t)};case v:return function(){return new n(this,t)}}return function(){return new n(this,t)}},O=e+" Iterator",T=m==v,w=!1,j=t.prototype,E=j[f]||j[y]||m&&j[m],k=E||_(m),L=m?T?_("entries"):k:void 0,M="Array"==e&&j.entries||E;if(M&&(S=l(M.call(new t)),S!==Object.prototype&&S.next&&(s(S,O,!0),r||"function"==typeof S[f]||a(S,f,h))),T&&E&&E.name!==v&&(w=!0,k=function(){return E.call(this)}),r&&!g||!p&&!w&&j[f]||a(j,f,k),u[e]=k,u[O]=h,m)if(P={values:T?k:_(v),keys:x?k:_(d),entries:L},g)for(I in P)I in j||o(j,I,P[I]);else i(i.P+i.F*(p||w),e,P);return P}},"0d58":function(t,e,n){var r=n("ce10"),i=n("e11e");t.exports=Object.keys||function(t){return r(t,i)}},1495:function(t,e,n){var r=n("86cc"),i=n("cb7c"),o=n("0d58");t.exports=n("9e1e")?Object.defineProperties:function(t,e){i(t);var n,a=o(e),u=a.length,c=0;while(u>c)r.f(t,n=a[c++],e[n]);return t}},"230e":function(t,e,n){var r=n("d3f4"),i=n("7726").document,o=r(i)&&r(i.createElement);t.exports=function(t){return o?i.createElement(t):{}}},"2aba":function(t,e,n){var r=n("7726"),i=n("32e9"),o=n("69a8"),a=n("ca5a")("src"),u="toString",c=Function[u],s=(""+c).split(u);n("8378").inspectSource=function(t){return c.call(t)},(t.exports=function(t,e,n,u){var c="function"==typeof n;c&&(o(n,"name")||i(n,"name",e)),t[e]!==n&&(c&&(o(n,a)||i(n,a,t[e]?""+t[e]:s.join(String(e)))),t===r?t[e]=n:u?t[e]?t[e]=n:i(t,e,n):(delete t[e],i(t,e,n)))})(Function.prototype,u,function(){return"function"==typeof this&&this[a]||c.call(this)})},"2aeb":function(t,e,n){var r=n("cb7c"),i=n("1495"),o=n("e11e"),a=n("613b")("IE_PROTO"),u=function(){},c="prototype",s=function(){var t,e=n("230e")("iframe"),r=o.length,i="<",a=">";e.style.display="none",n("fab2").appendChild(e),e.src="javascript:",t=e.contentWindow.document,t.open(),t.write(i+"script"+a+"document.F=Object"+i+"/script"+a),t.close(),s=t.F;while(r--)delete s[c][o[r]];return s()};t.exports=Object.create||function(t,e){var n;return null!==t?(u[c]=r(t),n=new u,u[c]=null,n[a]=t):n=s(),void 0===e?n:i(n,e)}},"2b4c":function(t,e,n){var r=n("5537")("wks"),i=n("ca5a"),o=n("7726").Symbol,a="function"==typeof o,u=t.exports=function(t){return r[t]||(r[t]=a&&o[t]||(a?o:i)("Symbol."+t))};u.store=r},"2d00":function(t,e){t.exports=!1},"2d95":function(t,e){var n={}.toString;t.exports=function(t){return n.call(t).slice(8,-1)}},"32e9":function(t,e,n){var r=n("86cc"),i=n("4630");t.exports=n("9e1e")?function(t,e,n){return r.f(t,e,i(1,n))}:function(t,e,n){return t[e]=n,t}},"38fd":function(t,e,n){var r=n("69a8"),i=n("4bf8"),o=n("613b")("IE_PROTO"),a=Object.prototype;t.exports=Object.getPrototypeOf||function(t){return t=i(t),r(t,o)?t[o]:"function"==typeof t.constructor&&t instanceof t.constructor?t.constructor.prototype:t instanceof Object?a:null}},"41a0":function(t,e,n){"use strict";var r=n("2aeb"),i=n("4630"),o=n("7f20"),a={};n("32e9")(a,n("2b4c")("iterator"),function(){return this}),t.exports=function(t,e,n){t.prototype=r(a,{next:i(1,n)}),o(t,e+" Iterator")}},"41bc":function(t,e,n){"use strict";var r=n("6848"),i=n.n(r);i.a},"456d":function(t,e,n){var r=n("4bf8"),i=n("0d58");n("5eda")("keys",function(){return function(t){return i(r(t))}})},4588:function(t,e){var n=Math.ceil,r=Math.floor;t.exports=function(t){return isNaN(t=+t)?0:(t>0?r:n)(t)}},4630:function(t,e){t.exports=function(t,e){return{enumerable:!(1&t),configurable:!(2&t),writable:!(4&t),value:e}}},"4bf8":function(t,e,n){var r=n("be13");t.exports=function(t){return Object(r(t))}},5537:function(t,e,n){var r=n("8378"),i=n("7726"),o="__core-js_shared__",a=i[o]||(i[o]={});(t.exports=function(t,e){return a[t]||(a[t]=void 0!==e?e:{})})("versions",[]).push({version:r.version,mode:n("2d00")?"pure":"global",copyright:"© 2018 Denis Pushkarev (zloirock.ru)"})},"5ca1":function(t,e,n){var r=n("7726"),i=n("8378"),o=n("32e9"),a=n("2aba"),u=n("9b43"),c="prototype",s=function(t,e,n){var l,f,p,y,d=t&s.F,v=t&s.G,h=t&s.S,b=t&s.P,m=t&s.B,x=v?r:h?r[e]||(r[e]={}):(r[e]||{})[c],g=v?i:i[e]||(i[e]={}),P=g[c]||(g[c]={});for(l in v&&(n=e),n)f=!d&&x&&void 0!==x[l],p=(f?x:n)[l],y=m&&f?u(p,r):b&&"function"==typeof p?u(Function.call,p):p,x&&a(x,l,p,t&s.U),g[l]!=p&&o(g,l,y),b&&P[l]!=p&&(P[l]=p)};r.core=i,s.F=1,s.G=2,s.S=4,s.P=8,s.B=16,s.W=32,s.U=64,s.R=128,t.exports=s},"5eda":function(t,e,n){var r=n("5ca1"),i=n("8378"),o=n("79e5");t.exports=function(t,e){var n=(i.Object||{})[t]||Object[t],a={};a[t]=e(n),r(r.S+r.F*o(function(){n(1)}),"Object",a)}},"613b":function(t,e,n){var r=n("5537")("keys"),i=n("ca5a");t.exports=function(t){return r[t]||(r[t]=i(t))}},"626a":function(t,e,n){var r=n("2d95");t.exports=Object("z").propertyIsEnumerable(0)?Object:function(t){return"String"==r(t)?t.split(""):Object(t)}},6821:function(t,e,n){var r=n("626a"),i=n("be13");t.exports=function(t){return r(i(t))}},6848:function(t,e,n){},"69a8":function(t,e){var n={}.hasOwnProperty;t.exports=function(t,e){return n.call(t,e)}},"6a99":function(t,e,n){var r=n("d3f4");t.exports=function(t,e){if(!r(t))return t;var n,i;if(e&&"function"==typeof(n=t.toString)&&!r(i=n.call(t)))return i;if("function"==typeof(n=t.valueOf)&&!r(i=n.call(t)))return i;if(!e&&"function"==typeof(n=t.toString)&&!r(i=n.call(t)))return i;throw TypeError("Can't convert object to primitive value")}},7726:function(t,e){var n=t.exports="undefined"!=typeof window&&window.Math==Math?window:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")();"number"==typeof __g&&(__g=n)},"77f1":function(t,e,n){var r=n("4588"),i=Math.max,o=Math.min;t.exports=function(t,e){return t=r(t),t<0?i(t+e,0):o(t,e)}},"79e5":function(t,e){t.exports=function(t){try{return!!t()}catch(e){return!0}}},"7f20":function(t,e,n){var r=n("86cc").f,i=n("69a8"),o=n("2b4c")("toStringTag");t.exports=function(t,e,n){t&&!i(t=n?t:t.prototype,o)&&r(t,o,{configurable:!0,value:e})}},"7f7f":function(t,e,n){var r=n("86cc").f,i=Function.prototype,o=/^\s*function ([^ (]*)/,a="name";a in i||n("9e1e")&&r(i,a,{configurable:!0,get:function(){try{return(""+this).match(o)[1]}catch(t){return""}}})},8378:function(t,e){var n=t.exports={version:"2.5.7"};"number"==typeof __e&&(__e=n)},"84f2":function(t,e){t.exports={}},"86cc":function(t,e,n){var r=n("cb7c"),i=n("c69a"),o=n("6a99"),a=Object.defineProperty;e.f=n("9e1e")?Object.defineProperty:function(t,e,n){if(r(t),e=o(e,!0),r(n),i)try{return a(t,e,n)}catch(u){}if("get"in n||"set"in n)throw TypeError("Accessors not supported!");return"value"in n&&(t[e]=n.value),t}},"8bbf":function(e,n){e.exports=t},"9b43":function(t,e,n){var r=n("d8e8");t.exports=function(t,e,n){if(r(t),void 0===e)return t;switch(n){case 1:return function(n){return t.call(e,n)};case 2:return function(n,r){return t.call(e,n,r)};case 3:return function(n,r,i){return t.call(e,n,r,i)}}return function(){return t.apply(e,arguments)}}},"9c6c":function(t,e,n){var r=n("2b4c")("unscopables"),i=Array.prototype;void 0==i[r]&&n("32e9")(i,r,{}),t.exports=function(t){i[r][t]=!0}},"9def":function(t,e,n){var r=n("4588"),i=Math.min;t.exports=function(t){return t>0?i(r(t),9007199254740991):0}},"9e1e":function(t,e,n){t.exports=!n("79e5")(function(){return 7!=Object.defineProperty({},"a",{get:function(){return 7}}).a})},ac6a:function(t,e,n){for(var r=n("cadf"),i=n("0d58"),o=n("2aba"),a=n("7726"),u=n("32e9"),c=n("84f2"),s=n("2b4c"),l=s("iterator"),f=s("toStringTag"),p=c.Array,y={CSSRuleList:!0,CSSStyleDeclaration:!1,CSSValueList:!1,ClientRectList:!1,DOMRectList:!1,DOMStringList:!1,DOMTokenList:!0,DataTransferItemList:!1,FileList:!1,HTMLAllCollection:!1,HTMLCollection:!1,HTMLFormElement:!1,HTMLSelectElement:!1,MediaList:!0,MimeTypeArray:!1,NamedNodeMap:!1,NodeList:!0,PaintRequestList:!1,Plugin:!1,PluginArray:!1,SVGLengthList:!1,SVGNumberList:!1,SVGPathSegList:!1,SVGPointList:!1,SVGStringList:!1,SVGTransformList:!1,SourceBufferList:!1,StyleSheetList:!0,TextTrackCueList:!1,TextTrackList:!1,TouchList:!1},d=i(y),v=0;v<d.length;v++){var h,b=d[v],m=y[b],x=a[b],g=x&&x.prototype;if(g&&(g[l]||u(g,l,p),g[f]||u(g,f,b),c[b]=p,m))for(h in r)g[h]||o(g,h,r[h],!0)}},be13:function(t,e){t.exports=function(t){if(void 0==t)throw TypeError("Can't call method on "+t);return t}},c366:function(t,e,n){var r=n("6821"),i=n("9def"),o=n("77f1");t.exports=function(t){return function(e,n,a){var u,c=r(e),s=i(c.length),l=o(a,s);if(t&&n!=n){while(s>l)if(u=c[l++],u!=u)return!0}else for(;s>l;l++)if((t||l in c)&&c[l]===n)return t||l||0;return!t&&-1}}},c69a:function(t,e,n){t.exports=!n("9e1e")&&!n("79e5")(function(){return 7!=Object.defineProperty(n("230e")("div"),"a",{get:function(){return 7}}).a})},ca5a:function(t,e){var n=0,r=Math.random();t.exports=function(t){return"Symbol(".concat(void 0===t?"":t,")_",(++n+r).toString(36))}},cadf:function(t,e,n){"use strict";var r=n("9c6c"),i=n("d53b"),o=n("84f2"),a=n("6821");t.exports=n("01f9")(Array,"Array",function(t,e){this._t=a(t),this._i=0,this._k=e},function(){var t=this._t,e=this._k,n=this._i++;return!t||n>=t.length?(this._t=void 0,i(1)):i(0,"keys"==e?n:"values"==e?t[n]:[n,t[n]])},"values"),o.Arguments=o.Array,r("keys"),r("values"),r("entries")},cb7c:function(t,e,n){var r=n("d3f4");t.exports=function(t){if(!r(t))throw TypeError(t+" is not an object!");return t}},ce10:function(t,e,n){var r=n("69a8"),i=n("6821"),o=n("c366")(!1),a=n("613b")("IE_PROTO");t.exports=function(t,e){var n,u=i(t),c=0,s=[];for(n in u)n!=a&&r(u,n)&&s.push(n);while(e.length>c)r(u,n=e[c++])&&(~o(s,n)||s.push(n));return s}},d3f4:function(t,e){t.exports=function(t){return"object"===typeof t?null!==t:"function"===typeof t}},d53b:function(t,e){t.exports=function(t,e){return{value:e,done:!!t}}},d8e8:function(t,e){t.exports=function(t){if("function"!=typeof t)throw TypeError(t+" is not a function!");return t}},e11e:function(t,e){t.exports="constructor,hasOwnProperty,isPrototypeOf,propertyIsEnumerable,toLocaleString,toString,valueOf".split(",")},fab2:function(t,e,n){var r=n("7726").document;t.exports=r&&r.documentElement},fb15:function(t,e,n){"use strict";var r;(n.r(e),"undefined"!==typeof window)&&((r=window.document.currentScript)&&(r=r.src.match(/(.+\/)[^\/]+\.js(\?.*)?$/))&&(n.p=r[1]));n("7f7f"),n("cadf"),n("456d"),n("ac6a");var i=n("8bbf"),o=n.n(i),a=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"player"},[n("div",{attrs:{id:"audio-players"}}),n("div",{attrs:{id:"video-players"}},[n("div",{staticClass:"progress-seek",attrs:{id:"progress"}},[n("button",{attrs:{id:"playPauseBtn"},on:{click:function(e){t.playerButton()}}},[n("i",{staticClass:"fa fa-pause"})]),n("input",{staticClass:"slider",attrs:{type:"range",id:"seek-bar",value:"0"}})])])])},u=[],c={name:"VuePlaylist",data:function(){return{id:null,name:null,creatorId:null,slug:null,videos:[],playerIndex:0,uploadDate:null,players:[],currentPlayer:null,currentZIndex:1e3}},props:["playlist"],mounted:function(){for(var t=this,e=document.getElementById("video-players"),n=document.getElementById("audio-players"),r=0,i=function(e){t.playlist[e].timeInPlaylist=[],t.playlist[e].duration=0;var i=document.createElement("audio");i.setAttribute("id","audio"+e),i.setAttribute("src",t.playlist[e].bucketRef),n.appendChild(i),i.addEventListener("canplaythrough",function(n){r=Math.round(n.currentTarget.duration),t.playlist[e].duration=r})},o=0;o<this.playlist.length;o++)i(o);for(var a=0,u=setInterval(function(){for(var e=0,n=0;n<t.playlist.length;n++)t.playlist[n].timeInPlaylist[0]=e,e+=t.playlist[n].duration,t.playlist[n].timeInPlaylist[1]=e;5===++a&&window.clearInterval(u)},1e3),c=0;c<t.playlist.length;c++){var s=document.createElement("video");s.setAttribute("id","player"+c),s.src=t.playlist[c].bucketRef,s.load(),e.appendChild(s),document.getElementById("player"+c).volume=1,t.players[c]=document.getElementById("player"+c)}for(c=0;c<t.players.length;c++)t.players[c].onended=function(){t.switchVideo()},t.players[c].onclick=function(){t.playerButton()},t.players[c].style.maxWidth="100%",t.players[c].style.top="0",t.players[c].style.left="0",t.players[c].style.position="absolute";t.currentPlayer=t.players[0],t.currentPlayer.style.zIndex=t.currentZIndex;var l=document.getElementById("seek-bar");t.currentPlayer.addEventListener("timeupdate",function(){var e=100/t.getTotalDuration(t.playlist)*t.currentPlayer.currentTime;l.value=e}),l.addEventListener("change",function(){var e=t.currentPlayer.duration*(l.value/100),n=t.playerIndex;t.checkSeekBarVideo(l.value,n,e)})},methods:{previewVideo:function(){},switchVideo:function(){if(this.playerIndex<this.playlist.length-1){var t=this;this.playerIndex++;var e=document.getElementById("seek-bar");t.currentPlayer=t.players[t.playerIndex],t.playerIndex>0&&(t.players[t.playerIndex-1].style.zIndex="0"),t.currentPlayer.style.zIndex=t.currentZIndex++,t.currentPlayer.addEventListener("timeupdate",function(){var n=100/t.getTotalDuration(t.playlist)*(t.playlist[t.playerIndex].timeInPlaylist[0]+t.currentPlayer.currentTime);e.value=n}),e.addEventListener("change",function(){var n=t.currentPlayer.duration*(e.value/100),r=t.playerIndex;t.checkSeekBarVideo(e.value,r,n)});var n=t.currentPlayer.play();void 0!==n&&n.then(function(e){t.currentPlayer.play()}).catch(function(t){})}else this.currentPlayer=this.players[0],this.currentPlayer.style.zIndex=this.currentZIndex,this.currentPlayer.currentTime=0},playerButton:function(){var t=this.currentPlayer;if(1==t.paused){var e=t.play();void 0!==e&&e.then(function(e){t.play()}).catch(function(t){}),document.getElementById("playPauseBtn").innerHTML="<i class='fa fa-pause'></i>"}else{var n=t.pause();void 0!==n&&n.then(function(e){t.pause()}).catch(function(t){}),document.getElementById("playPauseBtn").innerHTML="<i class='fa fa-play'></i>"}},getTotalDuration:function(t){for(var e=0,n=0;n<t.length;n++)e+=t[n].duration;return e},checkSeekBarVideo:function(t,e,n){var r=this,i=document.getElementById("seek-bar");if(t<this.playlist[e].timeInPlaylist[1]/this.getTotalDuration(this.playlist)*100&&t>this.playlist[e].timeInPlaylist[0]/this.getTotalDuration(this.playlist)*100){i.value=t,this.currentPlayer.currentTime=this.getTotalDuration(this.playlist)*(t/100)-this.playlist[e].timeInPlaylist[0];var o=this.currentPlayer.play();void 0!==o&&o.then(function(t){r.currentPlayer.play()}).catch(function(t){})}else for(var a=this.getTotalDuration(this.playlist)*(t/100),u=0;u<this.playlist.length;u++)if(a<this.playlist[u].timeInPlaylist[1]&&a>this.playlist[u].timeInPlaylist[0]){var c=this.currentPlayer.pause();void 0!==c&&c.then(function(t){r.currentPlayer.pause()}).catch(function(t){}),this.playerIndex=u,this.currentPlayer=this.players[this.playerIndex],this.currentPlayer.currentTime=a-this.playlist[u].timeInPlaylist[0],this.currentPlayer.style.zIndex=this.currentZIndex++;var s=this.currentPlayer.play();void 0!==s&&s.then(function(t){r.currentPlayer.play()}).catch(function(t){})}}}},s=c;n("41bc");function l(t,e,n,r,i,o,a,u){var c,s="function"===typeof t?t.options:t;if(e&&(s.render=e,s.staticRenderFns=n,s._compiled=!0),r&&(s.functional=!0),o&&(s._scopeId="data-v-"+o),a?(c=function(t){t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,t||"undefined"===typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),i&&i.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(a)},s._ssrRegister=c):i&&(c=u?function(){i.call(this,this.$root.$options.shadowRoot)}:i),c)if(s.functional){s._injectStyles=c;var l=s.render;s.render=function(t,e){return c.call(e),l(t,e)}}else{var f=s.beforeCreate;s.beforeCreate=f?[].concat(f,c):[c]}return{exports:t,options:s}}var f=l(s,a,u,!1,null,"f2261ab2",null);f.options.__file="Playlist.vue";var p=f.exports,y={VuePlaylist:p};Object.keys(y).forEach(function(t){o.a.component(t,y[t])});var d=y;e["default"]=d}})}); //# sourceMappingURL=mishka.umd.min.js.map