Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@mux/mux-uploader

Package Overview
Dependencies
Maintainers
2
Versions
542
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@mux/mux-uploader - npm Package Compare versions

Comparing version 0.1.0-canary.10-8eff156 to 0.1.0-canary.10-90bbbcb

20

CHANGELOG.md

@@ -6,2 +6,22 @@ # Change Log

# [0.1.0-beta.3](https://github.com/muxinc/elements/compare/@mux/mux-uploader@0.1.0-beta.2...@mux/mux-uploader@0.1.0-beta.3) (2022-07-11)
### Bug Fixes
- **mux-uploader:** Fix default format progress to include percent symbol. Move to module fn. ([6f519f7](https://github.com/muxinc/elements/commit/6f519f7335c62b031781d9d68de4aadab39b2089))
- **mux-uploader:** Fix syntax in README for components. ([affb4ca](https://github.com/muxinc/elements/commit/affb4ca365f7a9410d03b9d4bfe69eac3d40dca3))
- **mux-uploader:** handle slotted/changing buttons. rename slot per informal conventions on other projects ([1829fd9](https://github.com/muxinc/elements/commit/1829fd9817976750797cae4de0054d0e165bb269))
- **mux-uploader:** Polyfill for SSR. ([f559f68](https://github.com/muxinc/elements/commit/f559f68b3f3746d74155a3db919521aa864a7321))
- **mux-uploader:** re-add drop import to ensure custom element registration. Start work on overlay css. ([1ae4a2e](https://github.com/muxinc/elements/commit/1ae4a2e3e83467fa97fe86aadfe9fbeed09981c5))
- **mux-uploader:** Refactor overlay behavior for drop. Remove z-index assumptions from uploader. Rename overlay text attr to overlay-text for clarity. ([dcf2c80](https://github.com/muxinc/elements/commit/dcf2c8052581e8174bed59a01a1ca30a7780fa93))
- **mux-uploader:** Refactor so that drop can only be done with mux-uploader-drop. ([59ddb56](https://github.com/muxinc/elements/commit/59ddb56f22a59b8ba8d4f83cab5653097781bd16))
- **mux-uploader:** Simplify drop internal DOM structure to have more predictable layout & styling. ([ec108ba](https://github.com/muxinc/elements/commit/ec108bae3c047b35c7316b350ee69d8dc2beffd7))
### Features
- Add formatProgress method for customization. Bugfix for default uploader button. ([e7860e9](https://github.com/muxinc/elements/commit/e7860e910df648355f1a18c51d248e088f7d3221))
- **mux-uploader:** Add events that correspond to upchunk events. Early bail when no URL is provided. ([740aa96](https://github.com/muxinc/elements/commit/740aa96455c910f16c88b440dc78f8321a3c3d44))
- **mux-uploader:** move some dom elements around to make eventual overlay (re)styling a bit easier. ([919072a](https://github.com/muxinc/elements/commit/919072a8ba0788c4f154684415db21ec37d2e5df))
- **mux-uploader:** Simplify mux-uploader-drop styling. Update vanilla uploader example to demo usage with simplified styling. ([8029a1d](https://github.com/muxinc/elements/commit/8029a1d48cf9a1651b26d7a4740abb4d0ef182a4))
# 0.1.0-beta.2 (2022-07-05)

@@ -8,0 +28,0 @@

86

dist/mux-uploader.js

@@ -1,29 +0,11 @@

(()=>{var Ot=Object.create;var st=Object.defineProperty;var Bt=Object.getOwnPropertyDescriptor;var Dt=Object.getOwnPropertyNames;var It=Object.getPrototypeOf,jt=Object.prototype.hasOwnProperty;var _t=f=>st(f,"__esModule",{value:!0});var Ut=(f,o)=>()=>(o||f((o={exports:{}}).exports,o),o.exports);var Ft=(f,o,a)=>{if(o&&typeof o=="object"||typeof o=="function")for(let r of Dt(o))!jt.call(f,r)&&r!=="default"&&st(f,r,{get:()=>o[r],enumerable:!(a=Bt(o,r))||a.enumerable});return f},Ht=f=>Ft(_t(st(f!=null?Ot(It(f)):{},"default",f&&f.__esModule&&"default"in f?{get:()=>f.default,enumerable:!0}:{value:f,enumerable:!0})),f);var xt=Ut((Y,it)=>{(function(f,o){typeof Y=="object"&&typeof it=="object"?it.exports=o():typeof define=="function"&&define.amd?define([],o):typeof Y=="object"?Y.UpChunk=o():f.UpChunk=o()})(Y,function(){return function(f){var o={};function a(r){if(o[r])return o[r].exports;var i=o[r]={i:r,l:!1,exports:{}};return f[r].call(i.exports,i,i.exports,a),i.l=!0,i.exports}return a.m=f,a.c=o,a.d=function(r,i,h){a.o(r,i)||Object.defineProperty(r,i,{enumerable:!0,get:h})},a.r=function(r){typeof Symbol!="undefined"&&Symbol.toStringTag&&Object.defineProperty(r,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(r,"__esModule",{value:!0})},a.t=function(r,i){if(1&i&&(r=a(r)),8&i||4&i&&typeof r=="object"&&r&&r.__esModule)return r;var h=Object.create(null);if(a.r(h),Object.defineProperty(h,"default",{enumerable:!0,value:r}),2&i&&typeof r!="string")for(var b in r)a.d(h,b,function(w){return r[w]}.bind(null,b));return h},a.n=function(r){var i=r&&r.__esModule?function(){return r.default}:function(){return r};return a.d(i,"a",i),i},a.o=function(r,i){return Object.prototype.hasOwnProperty.call(r,i)},a.p="",a(a.s=1)}([function(f,o){var a;a=function(){return this}();try{a=a||new Function("return this")()}catch{typeof window=="object"&&(a=window)}f.exports=a},function(f,o,a){"use strict";var r=this&&this.__assign||function(){return(r=Object.assign||function(d){for(var t,u=1,v=arguments.length;u<v;u++)for(var T in t=arguments[u])Object.prototype.hasOwnProperty.call(t,T)&&(d[T]=t[T]);return d}).apply(this,arguments)};o.__esModule=!0,o.createUpload=o.UpChunk=void 0;var i=a(2),h=a(4),b=[200,201,202,204,308],w=[408,502,503,504],y=function(){function d(t){var u=this;this.endpoint=t.endpoint,this.file=t.file,this.headers=t.headers||{},this.method=t.method||"PUT",this.chunkSize=t.chunkSize||30720,this.attempts=t.attempts||5,this.delayBeforeAttempt=t.delayBeforeAttempt||1,this.maxFileBytes=1024*(t.maxFileSize||0),this.chunkCount=0,this.chunkByteSize=1024*this.chunkSize,this.totalChunks=Math.ceil(this.file.size/this.chunkByteSize),this.attemptCount=0,this.offline=!1,this.paused=!1,this.success=!1,this.reader=new FileReader,this.eventTarget=new i.EventTarget,this.validateOptions(),this.getEndpoint().then(function(){return u.sendChunks()}),typeof window!="undefined"&&(window.addEventListener("online",function(){u.offline&&(u.offline=!1,u.dispatch("online"),u.sendChunks())}),window.addEventListener("offline",function(){u.offline=!0,u.dispatch("offline")}))}return d.prototype.on=function(t,u){this.eventTarget.addEventListener(t,u)},d.prototype.abort=function(){var t;this.pause(),(t=this.currentXhr)===null||t===void 0||t.abort()},d.prototype.pause=function(){this.paused=!0},d.prototype.resume=function(){this.paused&&(this.paused=!1,this.sendChunks())},d.prototype.dispatch=function(t,u){var v=new CustomEvent(t,{detail:u});this.eventTarget.dispatchEvent(v)},d.prototype.validateOptions=function(){if(!this.endpoint||typeof this.endpoint!="function"&&typeof this.endpoint!="string")throw new TypeError("endpoint must be defined as a string or a function that returns a promise");if(!(this.file instanceof File))throw new TypeError("file must be a File object");if(this.headers&&typeof this.headers!="object")throw new TypeError("headers must be null or an object");if(this.chunkSize&&(typeof this.chunkSize!="number"||this.chunkSize<=0||this.chunkSize%256!=0))throw new TypeError("chunkSize must be a positive number in multiples of 256");if(this.maxFileBytes>0&&this.maxFileBytes<this.file.size)throw new Error("file size exceeds maximum (".concat(this.file.size," > ").concat(this.maxFileBytes,")"));if(this.attempts&&(typeof this.attempts!="number"||this.attempts<=0))throw new TypeError("retries must be a positive number");if(this.delayBeforeAttempt&&(typeof this.delayBeforeAttempt!="number"||this.delayBeforeAttempt<0))throw new TypeError("delayBeforeAttempt must be a positive number")},d.prototype.getEndpoint=function(){var t=this;return typeof this.endpoint=="string"?(this.endpointValue=this.endpoint,Promise.resolve(this.endpoint)):this.endpoint(this.file).then(function(u){return t.endpointValue=u,t.endpointValue})},d.prototype.getChunk=function(){var t=this;return new Promise(function(u){var v=t.totalChunks===1?t.file.size:t.chunkByteSize,T=v*t.chunkCount;t.reader.onload=function(){t.reader.result!==null&&(t.chunk=new Blob([t.reader.result],{type:"application/octet-stream"})),u()},t.reader.readAsArrayBuffer(t.file.slice(T,T+v))})},d.prototype.xhrPromise=function(t){var u=this,v=function(T){T.upload.onprogress=function(O){var k,E=100/u.totalChunks,A=E*u.file.size,c=E*u.chunkCount,_=O.loaded/((k=O.total)!==null&&k!==void 0?k:A)*E;u.dispatch("progress",Math.min(c+_,100))}};return new Promise(function(T,O){u.currentXhr=(0,h.default)(r(r({},t),{beforeSend:v}),function(k,E){return u.currentXhr=void 0,k?O(k):T(E)})})},d.prototype.sendChunk=function(){var t=this.chunkCount*this.chunkByteSize,u=t+this.chunk.size-1,v=r(r({},this.headers),{"Content-Type":this.file.type,"Content-Range":"bytes ".concat(t,"-").concat(u,"/").concat(this.file.size)});return this.dispatch("attempt",{chunkNumber:this.chunkCount,chunkSize:this.chunk.size}),this.xhrPromise({headers:v,url:this.endpointValue,method:this.method,body:this.chunk})},d.prototype.manageRetries=function(){var t=this;if(this.attemptCount<this.attempts)return setTimeout(function(){return t.sendChunks()},1e3*this.delayBeforeAttempt),void this.dispatch("attemptFailure",{message:"An error occured uploading chunk ".concat(this.chunkCount,". ").concat(this.attempts-this.attemptCount," retries left."),chunkNumber:this.chunkCount,attemptsLeft:this.attempts-this.attemptCount});this.dispatch("error",{message:"An error occured uploading chunk ".concat(this.chunkCount,". No more retries, stopping upload"),chunk:this.chunkCount,attempts:this.attemptCount})},d.prototype.sendChunks=function(){var t=this;this.paused||this.offline||this.success||this.getChunk().then(function(){return t.attemptCount=t.attemptCount+1,t.sendChunk()}).then(function(u){if(b.includes(u.statusCode)){t.dispatch("chunkSuccess",{chunk:t.chunkCount,attempts:t.attemptCount,response:u}),t.attemptCount=0,t.chunkCount=t.chunkCount+1,t.chunkCount<t.totalChunks?t.sendChunks():(t.success=!0,t.dispatch("success"));var v=100*(t.chunkCount/t.totalChunks*t.file.size)/t.file.size;t.dispatch("progress",v)}else if(w.includes(u.statusCode)){if(t.paused||t.offline)return;t.manageRetries()}else{if(t.paused||t.offline)return;t.dispatch("error",{message:"Server responded with ".concat(u.statusCode,". Stopping upload."),chunkNumber:t.chunkCount,attempts:t.attemptCount})}}).catch(function(u){t.paused||t.offline||t.manageRetries()})},d}();o.UpChunk=y,o.createUpload=function(d){return new y(d)}},function(f,o,a){"use strict";(function(r,i){function h(e,n,...s){if(!e)throw new TypeError(b(n,s))}function b(e,n){let s=0;return e.replace(/%[os]/gu,()=>w(n[s++]))}function w(e){return typeof e!="object"||e===null?String(e):Object.prototype.toString.call(e)}let y;Object.defineProperty(o,"__esModule",{value:!0});let d=typeof window!="undefined"?window:typeof self!="undefined"?self:i!==void 0?i:typeof globalThis!="undefined"?globalThis:void 0,t;class u{constructor(n,s){this.code=n,this.message=s}warn(...n){var s;try{if(t)return void t({...this,args:n});let l=((s=new Error().stack)!==null&&s!==void 0?s:"").replace(/^(?:.+?\n){2}/gu,`
`);console.warn(this.message,...n,l)}catch{}}}let v=new u("W01","Unable to initialize event under dispatching."),T=new u("W02","Assigning any falsy value to 'cancelBubble' property has no effect."),O=new u("W03","Assigning any truthy value to 'returnValue' property has no effect."),k=new u("W04","Unable to preventDefault on non-cancelable events."),E=new u("W05","Unable to preventDefault inside passive event listener invocation."),A=new u("W06","An event listener wasn't added because it has been added already: %o, %o"),c=new u("W07","The %o option value was abandoned because the event listener wasn't added as duplicated."),_=new u("W08","The 'callback' argument must be a function or an object that has 'handleEvent' method: %o"),z=new u("W09","Event attribute handler must be a function: %o");class S{static get NONE(){return q}static get CAPTURING_PHASE(){return B}static get AT_TARGET(){return V}static get BUBBLING_PHASE(){return J}constructor(n,s){Object.defineProperty(this,"isTrusted",{value:!1,enumerable:!0});let l=s!=null?s:{};X.set(this,{type:String(n),bubbles:Boolean(l.bubbles),cancelable:Boolean(l.cancelable),composed:Boolean(l.composed),target:null,currentTarget:null,stopPropagationFlag:!1,stopImmediatePropagationFlag:!1,canceledFlag:!1,inPassiveListenerFlag:!1,dispatchFlag:!1,timeStamp:Date.now()})}get type(){return g(this).type}get target(){return g(this).target}get srcElement(){return g(this).target}get currentTarget(){return g(this).currentTarget}composedPath(){let n=g(this).currentTarget;return n?[n]:[]}get NONE(){return q}get CAPTURING_PHASE(){return B}get AT_TARGET(){return V}get BUBBLING_PHASE(){return J}get eventPhase(){return g(this).dispatchFlag?2:0}stopPropagation(){g(this).stopPropagationFlag=!0}get cancelBubble(){return g(this).stopPropagationFlag}set cancelBubble(n){n?g(this).stopPropagationFlag=!0:T.warn()}stopImmediatePropagation(){let n=g(this);n.stopPropagationFlag=n.stopImmediatePropagationFlag=!0}get bubbles(){return g(this).bubbles}get cancelable(){return g(this).cancelable}get returnValue(){return!g(this).canceledFlag}set returnValue(n){n?O.warn():x(g(this))}preventDefault(){x(g(this))}get defaultPrevented(){return g(this).canceledFlag}get composed(){return g(this).composed}get isTrusted(){return!1}get timeStamp(){return g(this).timeStamp}initEvent(n,s=!1,l=!1){let p=g(this);p.dispatchFlag?v.warn():X.set(this,{...p,type:String(n),bubbles:Boolean(s),cancelable:Boolean(l),target:null,currentTarget:null,stopPropagationFlag:!1,stopImmediatePropagationFlag:!1,canceledFlag:!1})}}let q=0,B=1,V=2,J=3,X=new WeakMap;function g(e,n="this"){let s=X.get(e);return h(s!=null,"'%s' must be an object that Event constructor created, but got another one: %o",n,e),s}function x(e){e.inPassiveListenerFlag?E.warn():e.cancelable?e.canceledFlag=!0:k.warn()}Object.defineProperty(S,"NONE",{enumerable:!0}),Object.defineProperty(S,"CAPTURING_PHASE",{enumerable:!0}),Object.defineProperty(S,"AT_TARGET",{enumerable:!0}),Object.defineProperty(S,"BUBBLING_PHASE",{enumerable:!0});let D=Object.getOwnPropertyNames(S.prototype);for(let e=0;e<D.length;++e)D[e]!=="constructor"&&Object.defineProperty(S.prototype,D[e],{enumerable:!0});let H;d!==void 0&&d.Event!==void 0&&Object.setPrototypeOf(S.prototype,d.Event.prototype);let ut={INDEX_SIZE_ERR:1,DOMSTRING_SIZE_ERR:2,HIERARCHY_REQUEST_ERR:3,WRONG_DOCUMENT_ERR:4,INVALID_CHARACTER_ERR:5,NO_DATA_ALLOWED_ERR:6,NO_MODIFICATION_ALLOWED_ERR:7,NOT_FOUND_ERR:8,NOT_SUPPORTED_ERR:9,INUSE_ATTRIBUTE_ERR:10,INVALID_STATE_ERR:11,SYNTAX_ERR:12,INVALID_MODIFICATION_ERR:13,NAMESPACE_ERR:14,INVALID_ACCESS_ERR:15,VALIDATION_ERR:16,TYPE_MISMATCH_ERR:17,SECURITY_ERR:18,NETWORK_ERR:19,ABORT_ERR:20,URL_MISMATCH_ERR:21,QUOTA_EXCEEDED_ERR:22,TIMEOUT_ERR:23,INVALID_NODE_TYPE_ERR:24,DATA_CLONE_ERR:25};function lt(e){let n=Object.keys(ut);for(let s=0;s<n.length;++s){let l=n[s],p=ut[l];Object.defineProperty(e,l,{get:()=>p,configurable:!0,enumerable:!0})}}class K extends S{static wrap(n){return new(function s(l){let p=Object.getPrototypeOf(l);if(p==null)return K;let m=Z.get(p);return m==null&&(m=function(C,P){class L extends C{}let R=Object.keys(P);for(let M=0;M<R.length;++M)Object.defineProperty(L.prototype,R[M],pt(P,R[M]));return L}(s(p),p),Z.set(p,m)),m}(n))(n)}constructor(n){super(n.type,{bubbles:n.bubbles,cancelable:n.cancelable,composed:n.composed}),n.cancelBubble&&super.stopPropagation(),n.defaultPrevented&&super.preventDefault(),ct.set(this,{original:n});let s=Object.keys(n);for(let l=0;l<s.length;++l){let p=s[l];p in this||Object.defineProperty(this,p,pt(n,p))}}stopPropagation(){super.stopPropagation();let{original:n}=F(this);"stopPropagation"in n&&n.stopPropagation()}get cancelBubble(){return super.cancelBubble}set cancelBubble(n){super.cancelBubble=n;let{original:s}=F(this);"cancelBubble"in s&&(s.cancelBubble=n)}stopImmediatePropagation(){super.stopImmediatePropagation();let{original:n}=F(this);"stopImmediatePropagation"in n&&n.stopImmediatePropagation()}get returnValue(){return super.returnValue}set returnValue(n){super.returnValue=n;let{original:s}=F(this);"returnValue"in s&&(s.returnValue=n)}preventDefault(){super.preventDefault();let{original:n}=F(this);"preventDefault"in n&&n.preventDefault()}get timeStamp(){let{original:n}=F(this);return"timeStamp"in n?n.timeStamp:super.timeStamp}}let ct=new WeakMap;function F(e){let n=ct.get(e);return h(n!=null,"'this' is expected an Event object, but got",e),n}let Z=new WeakMap;function pt(e,n){let s=Object.getOwnPropertyDescriptor(e,n);return{get(){let l=F(this).original,p=l[n];return typeof p=="function"?p.bind(l):p},set(l){F(this).original[n]=l},configurable:s.configurable,enumerable:s.enumerable}}function dt(e){return(1&e.flags)==1}function ht(e){return(2&e.flags)==2}function ft(e){return(4&e.flags)==4}function St(e){return(8&e.flags)==8}function Mt({callback:e},n,s){try{typeof e=="function"?e.call(n,s):typeof e.handleEvent=="function"&&e.handleEvent(s)}catch(l){(function(p){try{let m=p instanceof Error?p:new Error(w(p));if(y)return void y(m);if(typeof dispatchEvent=="function"&&typeof ErrorEvent=="function")dispatchEvent(new ErrorEvent("error",{error:m,message:m.message}));else if(r!==void 0&&typeof r.emit=="function")return void r.emit("uncaughtException",m);console.error(m)}catch{}})(l)}}function gt({listeners:e},n,s){for(let l=0;l<e.length;++l)if(e[l].callback===n&&dt(e[l])===s)return l;return-1}function bt(e,n,s,l,p,m){let C;m&&(C=rt.bind(null,e,n,s),m.addEventListener("abort",C));let P=function(L,R,M,I,tt,j){return{callback:L,flags:(R?1:0)|(M?2:0)|(I?4:0),signal:tt,signalListener:j}}(n,s,l,p,m,C);return e.cow?(e.cow=!1,e.listeners=[...e.listeners,P]):e.listeners.push(P),P}function rt(e,n,s){let l=gt(e,n,s);return l!==-1&&mt(e,l)}function mt(e,n,s=!1){let l=e.listeners[n];return function(p){p.flags|=8}(l),l.signal&&l.signal.removeEventListener("abort",l.signalListener),e.cow&&!s?(e.cow=!1,e.listeners=e.listeners.filter((p,m)=>m!==n),!1):(e.listeners.splice(n,1),!0)}function yt(e,n){var s;return(s=e[n])!==null&&s!==void 0?s:e[n]={attrCallback:void 0,attrListener:void 0,cow:!1,listeners:[]}}Z.set(Object.prototype,K),d!==void 0&&d.Event!==void 0&&Z.set(d.Event.prototype,K);class G{constructor(){vt.set(this,Object.create(null))}addEventListener(n,s,l){let p=W(this),{callback:m,capture:C,once:P,passive:L,signal:R,type:M}=function(j,N,U){var Q;return Et(N),typeof U=="object"&&U!==null?{type:String(j),callback:N!=null?N:void 0,capture:Boolean(U.capture),passive:Boolean(U.passive),once:Boolean(U.once),signal:(Q=U.signal)!==null&&Q!==void 0?Q:void 0}:{type:String(j),callback:N!=null?N:void 0,capture:Boolean(U),passive:!1,once:!1,signal:void 0}}(n,s,l);if(m==null||(R==null?void 0:R.aborted))return;let I=yt(p,M),tt=gt(I,m,C);tt===-1?bt(I,m,C,L,P,R):function(j,N,U,Q){A.warn(dt(j)?"capture":"bubble",j.callback),ht(j)!==N&&c.warn("passive"),ft(j)!==U&&c.warn("once"),j.signal!==Q&&c.warn("signal")}(I.listeners[tt],L,P,R)}removeEventListener(n,s,l){let p=W(this),{callback:m,capture:C,type:P}=function(R,M,I){return Et(M),typeof I=="object"&&I!==null?{type:String(R),callback:M!=null?M:void 0,capture:Boolean(I.capture)}:{type:String(R),callback:M!=null?M:void 0,capture:Boolean(I)}}(n,s,l),L=p[P];m!=null&&L&&rt(L,m,C)}dispatchEvent(n){let s=W(this)[String(n.type)];if(s==null)return!0;let l=n instanceof S?n:K.wrap(n),p=g(l,"event");if(p.dispatchFlag)throw m="This event has been in dispatching.",d.DOMException?new d.DOMException(m,"InvalidStateError"):(H==null&&(H=class Rt extends Error{constructor(P){super(P),Error.captureStackTrace&&Error.captureStackTrace(this,Rt)}get code(){return 11}get name(){return"InvalidStateError"}},Object.defineProperties(H.prototype,{code:{enumerable:!0},name:{enumerable:!0}}),lt(H),lt(H.prototype)),new H(m));var m;if(p.dispatchFlag=!0,p.target=p.currentTarget=this,!p.stopPropagationFlag){let{cow:C,listeners:P}=s;s.cow=!0;for(let L=0;L<P.length;++L){let R=P[L];if(!St(R)&&(ft(R)&&mt(s,L,!C)&&(L-=1),p.inPassiveListenerFlag=ht(R),Mt(R,this,l),p.inPassiveListenerFlag=!1,p.stopImmediatePropagationFlag))break}C||(s.cow=!1)}return p.target=null,p.currentTarget=null,p.stopImmediatePropagationFlag=!1,p.stopPropagationFlag=!1,p.dispatchFlag=!1,!p.canceledFlag}}let vt=new WeakMap;function W(e,n="this"){let s=vt.get(e);return h(s!=null,"'%s' must be an object that EventTarget constructor created, but got another one: %o",n,e),s}function Et(e){if(typeof e!="function"&&(typeof e!="object"||e===null||typeof e.handleEvent!="function")){if(e!=null&&typeof e!="object")throw new TypeError(b(_.message,[e]));_.warn(e)}}let ot=Object.getOwnPropertyNames(G.prototype);for(let e=0;e<ot.length;++e)ot[e]!=="constructor"&&Object.defineProperty(G.prototype,ot[e],{enumerable:!0});function wt(e,n){var s,l;return(l=(s=W(e,"target")[n])===null||s===void 0?void 0:s.attrCallback)!==null&&l!==void 0?l:null}function Tt(e,n,s){s!=null&&typeof s!="function"&&z.warn(s),typeof s=="function"||typeof s=="object"&&s!==null?function(l,p,m){let C=yt(W(l,"target"),String(p));C.attrCallback=m,C.attrListener==null&&(C.attrListener=bt(C,function(P){return function(L){let R=P.attrCallback;typeof R=="function"&&R.call(this,L)}}(C),!1,!1,!1,void 0))}(e,n,s):function(l,p){let m=W(l,"target")[String(p)];m&&m.attrListener&&(rt(m,m.attrListener.callback,!1),m.attrCallback=m.attrListener=void 0)}(e,n)}function kt(e,n,s){Object.defineProperty(e,"on"+n,{get(){return wt(this,n)},set(l){Tt(this,n,l)},configurable:!0,enumerable:!0})}d!==void 0&&d.EventTarget!==void 0&&Object.setPrototypeOf(G.prototype,d.EventTarget.prototype),o.Event=S,o.EventTarget=G,o.default=G,o.defineCustomEventTarget=function(...e){class n extends G{}for(let s=0;s<e.length;++s)kt(n.prototype,e[s]);return n},o.defineEventAttribute=kt,o.getEventAttributeValue=wt,o.setErrorHandler=function(e){h(typeof e=="function"||e===void 0,"The error handler must be a function or undefined, but got %o.",e),y=e},o.setEventAttributeValue=Tt,o.setWarningHandler=function(e){h(typeof e=="function"||e===void 0,"The warning handler must be a function or undefined, but got %o.",e),t=e}}).call(this,a(3),a(0))},function(f,o){var a,r,i=f.exports={};function h(){throw new Error("setTimeout has not been defined")}function b(){throw new Error("clearTimeout has not been defined")}function w(E){if(a===setTimeout)return setTimeout(E,0);if((a===h||!a)&&setTimeout)return a=setTimeout,setTimeout(E,0);try{return a(E,0)}catch{try{return a.call(null,E,0)}catch{return a.call(this,E,0)}}}(function(){try{a=typeof setTimeout=="function"?setTimeout:h}catch{a=h}try{r=typeof clearTimeout=="function"?clearTimeout:b}catch{r=b}})();var y,d=[],t=!1,u=-1;function v(){t&&y&&(t=!1,y.length?d=y.concat(d):u=-1,d.length&&T())}function T(){if(!t){var E=w(v);t=!0;for(var A=d.length;A;){for(y=d,d=[];++u<A;)y&&y[u].run();u=-1,A=d.length}y=null,t=!1,function(c){if(r===clearTimeout)return clearTimeout(c);if((r===b||!r)&&clearTimeout)return r=clearTimeout,clearTimeout(c);try{r(c)}catch{try{return r.call(null,c)}catch{return r.call(this,c)}}}(E)}}function O(E,A){this.fun=E,this.array=A}function k(){}i.nextTick=function(E){var A=new Array(arguments.length-1);if(arguments.length>1)for(var c=1;c<arguments.length;c++)A[c-1]=arguments[c];d.push(new O(E,A)),d.length!==1||t||w(T)},O.prototype.run=function(){this.fun.apply(null,this.array)},i.title="browser",i.browser=!0,i.env={},i.argv=[],i.version="",i.versions={},i.on=k,i.addListener=k,i.once=k,i.off=k,i.removeListener=k,i.removeAllListeners=k,i.emit=k,i.prependListener=k,i.prependOnceListener=k,i.listeners=function(E){return[]},i.binding=function(E){throw new Error("process.binding is not supported")},i.cwd=function(){return"/"},i.chdir=function(E){throw new Error("process.chdir is not supported")},i.umask=function(){return 0}},function(f,o,a){"use strict";var r=a(5),i=a(6),h=a(7),b=a(8);function w(t,u,v){var T=t;return i(u)?(v=u,typeof t=="string"&&(T={uri:t})):T=b(u,{uri:t}),T.callback=v,T}function y(t,u,v){return d(u=w(t,u,v))}function d(t){if(t.callback===void 0)throw new Error("callback argument missing");var u=!1,v=function(g,x,D){u||(u=!0,t.callback(g,x,D))};function T(){var g=void 0;if(g=c.response?c.response:c.responseText||function(x){try{if(x.responseType==="document")return x.responseXML;var D=x.responseXML&&x.responseXML.documentElement.nodeName==="parsererror";if(x.responseType===""&&!D)return x.responseXML}catch{}return null}(c),J)try{g=JSON.parse(g)}catch{}return g}function O(g){return clearTimeout(_),g instanceof Error||(g=new Error(""+(g||"Unknown XMLHttpRequest Error"))),g.statusCode=0,v(g,X)}function k(){if(!A){var g;clearTimeout(_),g=t.useXDR&&c.status===void 0?200:c.status===1223?204:c.status;var x=X,D=null;return g!==0?(x={body:T(),statusCode:g,method:S,headers:{},url:z,rawRequest:c},c.getAllResponseHeaders&&(x.headers=h(c.getAllResponseHeaders()))):D=new Error("Internal XMLHttpRequest Error"),v(D,x,x.body)}}var E,A,c=t.xhr||null;c||(c=t.cors||t.useXDR?new y.XDomainRequest:new y.XMLHttpRequest);var _,z=c.url=t.uri||t.url,S=c.method=t.method||"GET",q=t.body||t.data,B=c.headers=t.headers||{},V=!!t.sync,J=!1,X={body:void 0,headers:{},statusCode:0,method:S,url:z,rawRequest:c};if("json"in t&&t.json!==!1&&(J=!0,B.accept||B.Accept||(B.Accept="application/json"),S!=="GET"&&S!=="HEAD"&&(B["content-type"]||B["Content-Type"]||(B["Content-Type"]="application/json"),q=JSON.stringify(t.json===!0?q:t.json))),c.onreadystatechange=function(){c.readyState===4&&setTimeout(k,0)},c.onload=k,c.onerror=O,c.onprogress=function(){},c.onabort=function(){A=!0},c.ontimeout=O,c.open(S,z,!V,t.username,t.password),V||(c.withCredentials=!!t.withCredentials),!V&&t.timeout>0&&(_=setTimeout(function(){if(!A){A=!0,c.abort("timeout");var g=new Error("XMLHttpRequest timeout");g.code="ETIMEDOUT",O(g)}},t.timeout)),c.setRequestHeader)for(E in B)B.hasOwnProperty(E)&&c.setRequestHeader(E,B[E]);else if(t.headers&&!function(g){for(var x in g)if(g.hasOwnProperty(x))return!1;return!0}(t.headers))throw new Error("Headers cannot be set on an XDomainRequest object");return"responseType"in t&&(c.responseType=t.responseType),"beforeSend"in t&&typeof t.beforeSend=="function"&&t.beforeSend(c),c.send(q||null),c}f.exports=y,f.exports.default=y,y.XMLHttpRequest=r.XMLHttpRequest||function(){},y.XDomainRequest="withCredentials"in new y.XMLHttpRequest?y.XMLHttpRequest:r.XDomainRequest,function(t,u){for(var v=0;v<t.length;v++)u(t[v])}(["get","put","post","patch","head","delete"],function(t){y[t==="delete"?"del":t]=function(u,v,T){return(v=w(u,v,T)).method=t.toUpperCase(),d(v)}})},function(f,o,a){(function(r){var i;i=typeof window!="undefined"?window:r!==void 0?r:typeof self!="undefined"?self:{},f.exports=i}).call(this,a(0))},function(f,o){f.exports=function(r){if(!r)return!1;var i=a.call(r);return i==="[object Function]"||typeof r=="function"&&i!=="[object RegExp]"||typeof window!="undefined"&&(r===window.setTimeout||r===window.alert||r===window.confirm||r===window.prompt)};var a=Object.prototype.toString},function(f,o){var a=function(r){return r.replace(/^\s+|\s+$/g,"")};f.exports=function(r){if(!r)return{};for(var i,h={},b=a(r).split(`
`),w=0;w<b.length;w++){var y=b[w],d=y.indexOf(":"),t=a(y.slice(0,d)).toLowerCase(),u=a(y.slice(d+1));h[t]===void 0?h[t]=u:(i=h[t],Object.prototype.toString.call(i)==="[object Array]"?h[t].push(u):h[t]=[h[t],u])}return h}},function(f,o){f.exports=function(){for(var r={},i=0;i<arguments.length;i++){var h=arguments[i];for(var b in h)a.call(h,b)&&(r[b]=h[b])}return r};var a=Object.prototype.hasOwnProperty}])})});var At=Ht(xt());var Ct=document.createElement("template");Ct.innerHTML=`
(()=>{var Ut=Object.create;var at=Object.defineProperty;var Nt=Object.getOwnPropertyDescriptor;var zt=Object.getOwnPropertyNames;var Xt=Object.getPrototypeOf,Vt=Object.prototype.hasOwnProperty;var qt=a=>at(a,"__esModule",{value:!0});var Wt=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports);var Gt=(a,e,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of zt(e))!Vt.call(a,n)&&n!=="default"&&at(a,n,{get:()=>e[n],enumerable:!(s=Nt(e,n))||s.enumerable});return a},Yt=a=>Gt(qt(at(a!=null?Ut(Xt(a)):{},"default",a&&a.__esModule&&"default"in a?{get:()=>a.default,enumerable:!0}:{value:a,enumerable:!0})),a);var Ct=(a,e,s)=>{if(!e.has(a))throw TypeError("Cannot "+s)};var Lt=(a,e,s)=>(Ct(a,e,"read from private field"),s?s.call(a):e.get(a)),At=(a,e,s)=>{if(e.has(a))throw TypeError("Cannot add the same private member more than once");e instanceof WeakSet?e.add(a):e.set(a,s)},xt=(a,e,s,n)=>(Ct(a,e,"write to private field"),n?n.call(a,s):e.set(a,s),s);var St=Wt((Q,lt)=>{(function(a,e){typeof Q=="object"&&typeof lt=="object"?lt.exports=e():typeof define=="function"&&define.amd?define([],e):typeof Q=="object"?Q.UpChunk=e():a.UpChunk=e()})(Q,function(){return function(a){var e={};function s(n){if(e[n])return e[n].exports;var u=e[n]={i:n,l:!1,exports:{}};return a[n].call(u.exports,u,u.exports,s),u.l=!0,u.exports}return s.m=a,s.c=e,s.d=function(n,u,p){s.o(n,u)||Object.defineProperty(n,u,{enumerable:!0,get:p})},s.r=function(n){typeof Symbol!="undefined"&&Symbol.toStringTag&&Object.defineProperty(n,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(n,"__esModule",{value:!0})},s.t=function(n,u){if(1&u&&(n=s(n)),8&u||4&u&&typeof n=="object"&&n&&n.__esModule)return n;var p=Object.create(null);if(s.r(p),Object.defineProperty(p,"default",{enumerable:!0,value:n}),2&u&&typeof n!="string")for(var v in n)s.d(p,v,function(R){return n[R]}.bind(null,v));return p},s.n=function(n){var u=n&&n.__esModule?function(){return n.default}:function(){return n};return s.d(u,"a",u),u},s.o=function(n,u){return Object.prototype.hasOwnProperty.call(n,u)},s.p="",s(s.s=1)}([function(a,e){var s;s=function(){return this}();try{s=s||new Function("return this")()}catch{typeof window=="object"&&(s=window)}a.exports=s},function(a,e,s){"use strict";var n=this&&this.__assign||function(){return(n=Object.assign||function(f){for(var t,l=1,b=arguments.length;l<b;l++)for(var T in t=arguments[l])Object.prototype.hasOwnProperty.call(t,T)&&(f[T]=t[T]);return f}).apply(this,arguments)};e.__esModule=!0,e.createUpload=e.UpChunk=void 0;var u=s(2),p=s(4),v=[200,201,202,204,308],R=[408,502,503,504],E=function(){function f(t){var l=this;this.endpoint=t.endpoint,this.file=t.file,this.headers=t.headers||{},this.method=t.method||"PUT",this.chunkSize=t.chunkSize||30720,this.attempts=t.attempts||5,this.delayBeforeAttempt=t.delayBeforeAttempt||1,this.maxFileBytes=1024*(t.maxFileSize||0),this.chunkCount=0,this.chunkByteSize=1024*this.chunkSize,this.totalChunks=Math.ceil(this.file.size/this.chunkByteSize),this.attemptCount=0,this.offline=!1,this.paused=!1,this.success=!1,this.reader=new FileReader,this.eventTarget=new u.EventTarget,this.validateOptions(),this.getEndpoint().then(function(){return l.sendChunks()}),typeof window!="undefined"&&(window.addEventListener("online",function(){l.offline&&(l.offline=!1,l.dispatch("online"),l.sendChunks())}),window.addEventListener("offline",function(){l.offline=!0,l.dispatch("offline")}))}return f.prototype.on=function(t,l){this.eventTarget.addEventListener(t,l)},f.prototype.abort=function(){var t;this.pause(),(t=this.currentXhr)===null||t===void 0||t.abort()},f.prototype.pause=function(){this.paused=!0},f.prototype.resume=function(){this.paused&&(this.paused=!1,this.sendChunks())},f.prototype.dispatch=function(t,l){var b=new CustomEvent(t,{detail:l});this.eventTarget.dispatchEvent(b)},f.prototype.validateOptions=function(){if(!this.endpoint||typeof this.endpoint!="function"&&typeof this.endpoint!="string")throw new TypeError("endpoint must be defined as a string or a function that returns a promise");if(!(this.file instanceof File))throw new TypeError("file must be a File object");if(this.headers&&typeof this.headers!="object")throw new TypeError("headers must be null or an object");if(this.chunkSize&&(typeof this.chunkSize!="number"||this.chunkSize<=0||this.chunkSize%256!=0))throw new TypeError("chunkSize must be a positive number in multiples of 256");if(this.maxFileBytes>0&&this.maxFileBytes<this.file.size)throw new Error("file size exceeds maximum (".concat(this.file.size," > ").concat(this.maxFileBytes,")"));if(this.attempts&&(typeof this.attempts!="number"||this.attempts<=0))throw new TypeError("retries must be a positive number");if(this.delayBeforeAttempt&&(typeof this.delayBeforeAttempt!="number"||this.delayBeforeAttempt<0))throw new TypeError("delayBeforeAttempt must be a positive number")},f.prototype.getEndpoint=function(){var t=this;return typeof this.endpoint=="string"?(this.endpointValue=this.endpoint,Promise.resolve(this.endpoint)):this.endpoint(this.file).then(function(l){return t.endpointValue=l,t.endpointValue})},f.prototype.getChunk=function(){var t=this;return new Promise(function(l){var b=t.totalChunks===1?t.file.size:t.chunkByteSize,T=b*t.chunkCount;t.reader.onload=function(){t.reader.result!==null&&(t.chunk=new Blob([t.reader.result],{type:"application/octet-stream"})),l()},t.reader.readAsArrayBuffer(t.file.slice(T,T+b))})},f.prototype.xhrPromise=function(t){var l=this,b=function(T){T.upload.onprogress=function(M){var w,y=100/l.totalChunks,k=y*l.file.size,d=y*l.chunkCount,H=M.loaded/((w=M.total)!==null&&w!==void 0?w:k)*y;l.dispatch("progress",Math.min(d+H,100))}};return new Promise(function(T,M){l.currentXhr=(0,p.default)(n(n({},t),{beforeSend:b}),function(w,y){return l.currentXhr=void 0,w?M(w):T(y)})})},f.prototype.sendChunk=function(){var t=this.chunkCount*this.chunkByteSize,l=t+this.chunk.size-1,b=n(n({},this.headers),{"Content-Type":this.file.type,"Content-Range":"bytes ".concat(t,"-").concat(l,"/").concat(this.file.size)});return this.dispatch("attempt",{chunkNumber:this.chunkCount,chunkSize:this.chunk.size}),this.xhrPromise({headers:b,url:this.endpointValue,method:this.method,body:this.chunk})},f.prototype.manageRetries=function(){var t=this;if(this.attemptCount<this.attempts)return setTimeout(function(){return t.sendChunks()},1e3*this.delayBeforeAttempt),void this.dispatch("attemptFailure",{message:"An error occured uploading chunk ".concat(this.chunkCount,". ").concat(this.attempts-this.attemptCount," retries left."),chunkNumber:this.chunkCount,attemptsLeft:this.attempts-this.attemptCount});this.dispatch("error",{message:"An error occured uploading chunk ".concat(this.chunkCount,". No more retries, stopping upload"),chunk:this.chunkCount,attempts:this.attemptCount})},f.prototype.sendChunks=function(){var t=this;this.paused||this.offline||this.success||this.getChunk().then(function(){return t.attemptCount=t.attemptCount+1,t.sendChunk()}).then(function(l){if(v.includes(l.statusCode)){t.dispatch("chunkSuccess",{chunk:t.chunkCount,attempts:t.attemptCount,response:l}),t.attemptCount=0,t.chunkCount=t.chunkCount+1,t.chunkCount<t.totalChunks?t.sendChunks():(t.success=!0,t.dispatch("success"));var b=100*(t.chunkCount/t.totalChunks*t.file.size)/t.file.size;t.dispatch("progress",b)}else if(R.includes(l.statusCode)){if(t.paused||t.offline)return;t.manageRetries()}else{if(t.paused||t.offline)return;t.dispatch("error",{message:"Server responded with ".concat(l.statusCode,". Stopping upload."),chunkNumber:t.chunkCount,attempts:t.attemptCount})}}).catch(function(l){t.paused||t.offline||t.manageRetries()})},f}();e.UpChunk=E,e.createUpload=function(f){return new E(f)}},function(a,e,s){"use strict";(function(n,u){function p(r,o,...i){if(!r)throw new TypeError(v(o,i))}function v(r,o){let i=0;return r.replace(/%[os]/gu,()=>R(o[i++]))}function R(r){return typeof r!="object"||r===null?String(r):Object.prototype.toString.call(r)}let E;Object.defineProperty(e,"__esModule",{value:!0});let f=typeof window!="undefined"?window:typeof self!="undefined"?self:u!==void 0?u:typeof globalThis!="undefined"?globalThis:void 0,t;class l{constructor(o,i){this.code=o,this.message=i}warn(...o){var i;try{if(t)return void t({...this,args:o});let c=((i=new Error().stack)!==null&&i!==void 0?i:"").replace(/^(?:.+?\n){2}/gu,`
`);console.warn(this.message,...o,c)}catch{}}}let b=new l("W01","Unable to initialize event under dispatching."),T=new l("W02","Assigning any falsy value to 'cancelBubble' property has no effect."),M=new l("W03","Assigning any truthy value to 'returnValue' property has no effect."),w=new l("W04","Unable to preventDefault on non-cancelable events."),y=new l("W05","Unable to preventDefault inside passive event listener invocation."),k=new l("W06","An event listener wasn't added because it has been added already: %o, %o"),d=new l("W07","The %o option value was abandoned because the event listener wasn't added as duplicated."),H=new l("W08","The 'callback' argument must be a function or an object that has 'handleEvent' method: %o"),z=new l("W09","Event attribute handler must be a function: %o");class _{static get NONE(){return X}static get CAPTURING_PHASE(){return B}static get AT_TARGET(){return V}static get BUBBLING_PHASE(){return Y}constructor(o,i){Object.defineProperty(this,"isTrusted",{value:!1,enumerable:!0});let c=i!=null?i:{};q.set(this,{type:String(o),bubbles:Boolean(c.bubbles),cancelable:Boolean(c.cancelable),composed:Boolean(c.composed),target:null,currentTarget:null,stopPropagationFlag:!1,stopImmediatePropagationFlag:!1,canceledFlag:!1,inPassiveListenerFlag:!1,dispatchFlag:!1,timeStamp:Date.now()})}get type(){return g(this).type}get target(){return g(this).target}get srcElement(){return g(this).target}get currentTarget(){return g(this).currentTarget}composedPath(){let o=g(this).currentTarget;return o?[o]:[]}get NONE(){return X}get CAPTURING_PHASE(){return B}get AT_TARGET(){return V}get BUBBLING_PHASE(){return Y}get eventPhase(){return g(this).dispatchFlag?2:0}stopPropagation(){g(this).stopPropagationFlag=!0}get cancelBubble(){return g(this).stopPropagationFlag}set cancelBubble(o){o?g(this).stopPropagationFlag=!0:T.warn()}stopImmediatePropagation(){let o=g(this);o.stopPropagationFlag=o.stopImmediatePropagationFlag=!0}get bubbles(){return g(this).bubbles}get cancelable(){return g(this).cancelable}get returnValue(){return!g(this).canceledFlag}set returnValue(o){o?M.warn():C(g(this))}preventDefault(){C(g(this))}get defaultPrevented(){return g(this).canceledFlag}get composed(){return g(this).composed}get isTrusted(){return!1}get timeStamp(){return g(this).timeStamp}initEvent(o,i=!1,c=!1){let h=g(this);h.dispatchFlag?b.warn():q.set(this,{...h,type:String(o),bubbles:Boolean(i),cancelable:Boolean(c),target:null,currentTarget:null,stopPropagationFlag:!1,stopImmediatePropagationFlag:!1,canceledFlag:!1})}}let X=0,B=1,V=2,Y=3,q=new WeakMap;function g(r,o="this"){let i=q.get(r);return p(i!=null,"'%s' must be an object that Event constructor created, but got another one: %o",o,r),i}function C(r){r.inPassiveListenerFlag?y.warn():r.cancelable?r.canceledFlag=!0:w.warn()}Object.defineProperty(_,"NONE",{enumerable:!0}),Object.defineProperty(_,"CAPTURING_PHASE",{enumerable:!0}),Object.defineProperty(_,"AT_TARGET",{enumerable:!0}),Object.defineProperty(_,"BUBBLING_PHASE",{enumerable:!0});let S=Object.getOwnPropertyNames(_.prototype);for(let r=0;r<S.length;++r)S[r]!=="constructor"&&Object.defineProperty(_.prototype,S[r],{enumerable:!0});let U;f!==void 0&&f.Event!==void 0&&Object.setPrototypeOf(_.prototype,f.Event.prototype);let ct={INDEX_SIZE_ERR:1,DOMSTRING_SIZE_ERR:2,HIERARCHY_REQUEST_ERR:3,WRONG_DOCUMENT_ERR:4,INVALID_CHARACTER_ERR:5,NO_DATA_ALLOWED_ERR:6,NO_MODIFICATION_ALLOWED_ERR:7,NOT_FOUND_ERR:8,NOT_SUPPORTED_ERR:9,INUSE_ATTRIBUTE_ERR:10,INVALID_STATE_ERR:11,SYNTAX_ERR:12,INVALID_MODIFICATION_ERR:13,NAMESPACE_ERR:14,INVALID_ACCESS_ERR:15,VALIDATION_ERR:16,TYPE_MISMATCH_ERR:17,SECURITY_ERR:18,NETWORK_ERR:19,ABORT_ERR:20,URL_MISMATCH_ERR:21,QUOTA_EXCEEDED_ERR:22,TIMEOUT_ERR:23,INVALID_NODE_TYPE_ERR:24,DATA_CLONE_ERR:25};function pt(r){let o=Object.keys(ct);for(let i=0;i<o.length;++i){let c=o[i],h=ct[c];Object.defineProperty(r,c,{get:()=>h,configurable:!0,enumerable:!0})}}class $ extends _{static wrap(o){return new(function i(c){let h=Object.getPrototypeOf(c);if(h==null)return $;let m=tt.get(h);return m==null&&(m=function(L,A){class x extends L{}let P=Object.keys(A);for(let O=0;O<P.length;++O)Object.defineProperty(x.prototype,P[O],ht(A,P[O]));return x}(i(h),h),tt.set(h,m)),m}(o))(o)}constructor(o){super(o.type,{bubbles:o.bubbles,cancelable:o.cancelable,composed:o.composed}),o.cancelBubble&&super.stopPropagation(),o.defaultPrevented&&super.preventDefault(),dt.set(this,{original:o});let i=Object.keys(o);for(let c=0;c<i.length;++c){let h=i[c];h in this||Object.defineProperty(this,h,ht(o,h))}}stopPropagation(){super.stopPropagation();let{original:o}=F(this);"stopPropagation"in o&&o.stopPropagation()}get cancelBubble(){return super.cancelBubble}set cancelBubble(o){super.cancelBubble=o;let{original:i}=F(this);"cancelBubble"in i&&(i.cancelBubble=o)}stopImmediatePropagation(){super.stopImmediatePropagation();let{original:o}=F(this);"stopImmediatePropagation"in o&&o.stopImmediatePropagation()}get returnValue(){return super.returnValue}set returnValue(o){super.returnValue=o;let{original:i}=F(this);"returnValue"in i&&(i.returnValue=o)}preventDefault(){super.preventDefault();let{original:o}=F(this);"preventDefault"in o&&o.preventDefault()}get timeStamp(){let{original:o}=F(this);return"timeStamp"in o?o.timeStamp:super.timeStamp}}let dt=new WeakMap;function F(r){let o=dt.get(r);return p(o!=null,"'this' is expected an Event object, but got",r),o}let tt=new WeakMap;function ht(r,o){let i=Object.getOwnPropertyDescriptor(r,o);return{get(){let c=F(this).original,h=c[o];return typeof h=="function"?h.bind(c):h},set(c){F(this).original[o]=c},configurable:i.configurable,enumerable:i.enumerable}}function ft(r){return(1&r.flags)==1}function gt(r){return(2&r.flags)==2}function mt(r){return(4&r.flags)==4}function Dt(r){return(8&r.flags)==8}function Ft({callback:r},o,i){try{typeof r=="function"?r.call(o,i):typeof r.handleEvent=="function"&&r.handleEvent(i)}catch(c){(function(h){try{let m=h instanceof Error?h:new Error(R(h));if(E)return void E(m);if(typeof dispatchEvent=="function"&&typeof ErrorEvent=="function")dispatchEvent(new ErrorEvent("error",{error:m,message:m.message}));else if(n!==void 0&&typeof n.emit=="function")return void n.emit("uncaughtException",m);console.error(m)}catch{}})(c)}}function bt({listeners:r},o,i){for(let c=0;c<r.length;++c)if(r[c].callback===o&&ft(r[c])===i)return c;return-1}function vt(r,o,i,c,h,m){let L;m&&(L=st.bind(null,r,o,i),m.addEventListener("abort",L));let A=function(x,P,O,j,et,I){return{callback:x,flags:(P?1:0)|(O?2:0)|(j?4:0),signal:et,signalListener:I}}(o,i,c,h,m,L);return r.cow?(r.cow=!1,r.listeners=[...r.listeners,A]):r.listeners.push(A),A}function st(r,o,i){let c=bt(r,o,i);return c!==-1&&yt(r,c)}function yt(r,o,i=!1){let c=r.listeners[o];return function(h){h.flags|=8}(c),c.signal&&c.signal.removeEventListener("abort",c.signalListener),r.cow&&!i?(r.cow=!1,r.listeners=r.listeners.filter((h,m)=>m!==o),!1):(r.listeners.splice(o,1),!0)}function Et(r,o){var i;return(i=r[o])!==null&&i!==void 0?i:r[o]={attrCallback:void 0,attrListener:void 0,cow:!1,listeners:[]}}tt.set(Object.prototype,$),f!==void 0&&f.Event!==void 0&&tt.set(f.Event.prototype,$);class W{constructor(){Tt.set(this,Object.create(null))}addEventListener(o,i,c){let h=G(this),{callback:m,capture:L,once:A,passive:x,signal:P,type:O}=function(I,N,D){var K;return wt(N),typeof D=="object"&&D!==null?{type:String(I),callback:N!=null?N:void 0,capture:Boolean(D.capture),passive:Boolean(D.passive),once:Boolean(D.once),signal:(K=D.signal)!==null&&K!==void 0?K:void 0}:{type:String(I),callback:N!=null?N:void 0,capture:Boolean(D),passive:!1,once:!1,signal:void 0}}(o,i,c);if(m==null||(P==null?void 0:P.aborted))return;let j=Et(h,O),et=bt(j,m,L);et===-1?vt(j,m,L,x,A,P):function(I,N,D,K){k.warn(ft(I)?"capture":"bubble",I.callback),gt(I)!==N&&d.warn("passive"),mt(I)!==D&&d.warn("once"),I.signal!==K&&d.warn("signal")}(j.listeners[et],x,A,P)}removeEventListener(o,i,c){let h=G(this),{callback:m,capture:L,type:A}=function(P,O,j){return wt(O),typeof j=="object"&&j!==null?{type:String(P),callback:O!=null?O:void 0,capture:Boolean(j.capture)}:{type:String(P),callback:O!=null?O:void 0,capture:Boolean(j)}}(o,i,c),x=h[A];m!=null&&x&&st(x,m,L)}dispatchEvent(o){let i=G(this)[String(o.type)];if(i==null)return!0;let c=o instanceof _?o:$.wrap(o),h=g(c,"event");if(h.dispatchFlag)throw m="This event has been in dispatching.",f.DOMException?new f.DOMException(m,"InvalidStateError"):(U==null&&(U=class Bt extends Error{constructor(A){super(A),Error.captureStackTrace&&Error.captureStackTrace(this,Bt)}get code(){return 11}get name(){return"InvalidStateError"}},Object.defineProperties(U.prototype,{code:{enumerable:!0},name:{enumerable:!0}}),pt(U),pt(U.prototype)),new U(m));var m;if(h.dispatchFlag=!0,h.target=h.currentTarget=this,!h.stopPropagationFlag){let{cow:L,listeners:A}=i;i.cow=!0;for(let x=0;x<A.length;++x){let P=A[x];if(!Dt(P)&&(mt(P)&&yt(i,x,!L)&&(x-=1),h.inPassiveListenerFlag=gt(P),Ft(P,this,c),h.inPassiveListenerFlag=!1,h.stopImmediatePropagationFlag))break}L||(i.cow=!1)}return h.target=null,h.currentTarget=null,h.stopImmediatePropagationFlag=!1,h.stopPropagationFlag=!1,h.dispatchFlag=!1,!h.canceledFlag}}let Tt=new WeakMap;function G(r,o="this"){let i=Tt.get(r);return p(i!=null,"'%s' must be an object that EventTarget constructor created, but got another one: %o",o,r),i}function wt(r){if(typeof r!="function"&&(typeof r!="object"||r===null||typeof r.handleEvent!="function")){if(r!=null&&typeof r!="object")throw new TypeError(v(H.message,[r]));H.warn(r)}}let it=Object.getOwnPropertyNames(W.prototype);for(let r=0;r<it.length;++r)it[r]!=="constructor"&&Object.defineProperty(W.prototype,it[r],{enumerable:!0});function kt(r,o){var i,c;return(c=(i=G(r,"target")[o])===null||i===void 0?void 0:i.attrCallback)!==null&&c!==void 0?c:null}function Pt(r,o,i){i!=null&&typeof i!="function"&&z.warn(i),typeof i=="function"||typeof i=="object"&&i!==null?function(c,h,m){let L=Et(G(c,"target"),String(h));L.attrCallback=m,L.attrListener==null&&(L.attrListener=vt(L,function(A){return function(x){let P=A.attrCallback;typeof P=="function"&&P.call(this,x)}}(L),!1,!1,!1,void 0))}(r,o,i):function(c,h){let m=G(c,"target")[String(h)];m&&m.attrListener&&(st(m,m.attrListener.callback,!1),m.attrCallback=m.attrListener=void 0)}(r,o)}function Rt(r,o,i){Object.defineProperty(r,"on"+o,{get(){return kt(this,o)},set(c){Pt(this,o,c)},configurable:!0,enumerable:!0})}f!==void 0&&f.EventTarget!==void 0&&Object.setPrototypeOf(W.prototype,f.EventTarget.prototype),e.Event=_,e.EventTarget=W,e.default=W,e.defineCustomEventTarget=function(...r){class o extends W{}for(let i=0;i<r.length;++i)Rt(o.prototype,r[i]);return o},e.defineEventAttribute=Rt,e.getEventAttributeValue=kt,e.setErrorHandler=function(r){p(typeof r=="function"||r===void 0,"The error handler must be a function or undefined, but got %o.",r),E=r},e.setEventAttributeValue=Pt,e.setWarningHandler=function(r){p(typeof r=="function"||r===void 0,"The warning handler must be a function or undefined, but got %o.",r),t=r}}).call(this,s(3),s(0))},function(a,e){var s,n,u=a.exports={};function p(){throw new Error("setTimeout has not been defined")}function v(){throw new Error("clearTimeout has not been defined")}function R(y){if(s===setTimeout)return setTimeout(y,0);if((s===p||!s)&&setTimeout)return s=setTimeout,setTimeout(y,0);try{return s(y,0)}catch{try{return s.call(null,y,0)}catch{return s.call(this,y,0)}}}(function(){try{s=typeof setTimeout=="function"?setTimeout:p}catch{s=p}try{n=typeof clearTimeout=="function"?clearTimeout:v}catch{n=v}})();var E,f=[],t=!1,l=-1;function b(){t&&E&&(t=!1,E.length?f=E.concat(f):l=-1,f.length&&T())}function T(){if(!t){var y=R(b);t=!0;for(var k=f.length;k;){for(E=f,f=[];++l<k;)E&&E[l].run();l=-1,k=f.length}E=null,t=!1,function(d){if(n===clearTimeout)return clearTimeout(d);if((n===v||!n)&&clearTimeout)return n=clearTimeout,clearTimeout(d);try{n(d)}catch{try{return n.call(null,d)}catch{return n.call(this,d)}}}(y)}}function M(y,k){this.fun=y,this.array=k}function w(){}u.nextTick=function(y){var k=new Array(arguments.length-1);if(arguments.length>1)for(var d=1;d<arguments.length;d++)k[d-1]=arguments[d];f.push(new M(y,k)),f.length!==1||t||R(T)},M.prototype.run=function(){this.fun.apply(null,this.array)},u.title="browser",u.browser=!0,u.env={},u.argv=[],u.version="",u.versions={},u.on=w,u.addListener=w,u.once=w,u.off=w,u.removeListener=w,u.removeAllListeners=w,u.emit=w,u.prependListener=w,u.prependOnceListener=w,u.listeners=function(y){return[]},u.binding=function(y){throw new Error("process.binding is not supported")},u.cwd=function(){return"/"},u.chdir=function(y){throw new Error("process.chdir is not supported")},u.umask=function(){return 0}},function(a,e,s){"use strict";var n=s(5),u=s(6),p=s(7),v=s(8);function R(t,l,b){var T=t;return u(l)?(b=l,typeof t=="string"&&(T={uri:t})):T=v(l,{uri:t}),T.callback=b,T}function E(t,l,b){return f(l=R(t,l,b))}function f(t){if(t.callback===void 0)throw new Error("callback argument missing");var l=!1,b=function(g,C,S){l||(l=!0,t.callback(g,C,S))};function T(){var g=void 0;if(g=d.response?d.response:d.responseText||function(C){try{if(C.responseType==="document")return C.responseXML;var S=C.responseXML&&C.responseXML.documentElement.nodeName==="parsererror";if(C.responseType===""&&!S)return C.responseXML}catch{}return null}(d),Y)try{g=JSON.parse(g)}catch{}return g}function M(g){return clearTimeout(H),g instanceof Error||(g=new Error(""+(g||"Unknown XMLHttpRequest Error"))),g.statusCode=0,b(g,q)}function w(){if(!k){var g;clearTimeout(H),g=t.useXDR&&d.status===void 0?200:d.status===1223?204:d.status;var C=q,S=null;return g!==0?(C={body:T(),statusCode:g,method:_,headers:{},url:z,rawRequest:d},d.getAllResponseHeaders&&(C.headers=p(d.getAllResponseHeaders()))):S=new Error("Internal XMLHttpRequest Error"),b(S,C,C.body)}}var y,k,d=t.xhr||null;d||(d=t.cors||t.useXDR?new E.XDomainRequest:new E.XMLHttpRequest);var H,z=d.url=t.uri||t.url,_=d.method=t.method||"GET",X=t.body||t.data,B=d.headers=t.headers||{},V=!!t.sync,Y=!1,q={body:void 0,headers:{},statusCode:0,method:_,url:z,rawRequest:d};if("json"in t&&t.json!==!1&&(Y=!0,B.accept||B.Accept||(B.Accept="application/json"),_!=="GET"&&_!=="HEAD"&&(B["content-type"]||B["Content-Type"]||(B["Content-Type"]="application/json"),X=JSON.stringify(t.json===!0?X:t.json))),d.onreadystatechange=function(){d.readyState===4&&setTimeout(w,0)},d.onload=w,d.onerror=M,d.onprogress=function(){},d.onabort=function(){k=!0},d.ontimeout=M,d.open(_,z,!V,t.username,t.password),V||(d.withCredentials=!!t.withCredentials),!V&&t.timeout>0&&(H=setTimeout(function(){if(!k){k=!0,d.abort("timeout");var g=new Error("XMLHttpRequest timeout");g.code="ETIMEDOUT",M(g)}},t.timeout)),d.setRequestHeader)for(y in B)B.hasOwnProperty(y)&&d.setRequestHeader(y,B[y]);else if(t.headers&&!function(g){for(var C in g)if(g.hasOwnProperty(C))return!1;return!0}(t.headers))throw new Error("Headers cannot be set on an XDomainRequest object");return"responseType"in t&&(d.responseType=t.responseType),"beforeSend"in t&&typeof t.beforeSend=="function"&&t.beforeSend(d),d.send(X||null),d}a.exports=E,a.exports.default=E,E.XMLHttpRequest=n.XMLHttpRequest||function(){},E.XDomainRequest="withCredentials"in new E.XMLHttpRequest?E.XMLHttpRequest:n.XDomainRequest,function(t,l){for(var b=0;b<t.length;b++)l(t[b])}(["get","put","post","patch","head","delete"],function(t){E[t==="delete"?"del":t]=function(l,b,T){return(b=R(l,b,T)).method=t.toUpperCase(),f(b)}})},function(a,e,s){(function(n){var u;u=typeof window!="undefined"?window:n!==void 0?n:typeof self!="undefined"?self:{},a.exports=u}).call(this,s(0))},function(a,e){a.exports=function(n){if(!n)return!1;var u=s.call(n);return u==="[object Function]"||typeof n=="function"&&u!=="[object RegExp]"||typeof window!="undefined"&&(n===window.setTimeout||n===window.alert||n===window.confirm||n===window.prompt)};var s=Object.prototype.toString},function(a,e){var s=function(n){return n.replace(/^\s+|\s+$/g,"")};a.exports=function(n){if(!n)return{};for(var u,p={},v=s(n).split(`
`),R=0;R<v.length;R++){var E=v[R],f=E.indexOf(":"),t=s(E.slice(0,f)).toLowerCase(),l=s(E.slice(f+1));p[t]===void 0?p[t]=l:(u=p[t],Object.prototype.toString.call(u)==="[object Array]"?p[t].push(l):p[t]=[p[t],l])}return p}},function(a,e){a.exports=function(){for(var n={},u=0;u<arguments.length;u++){var p=arguments[u];for(var v in p)s.call(p,v)&&(n[v]=p[v])}return n};var s=Object.prototype.hasOwnProperty}])})});if(typeof DocumentFragment=="undefined"){class a{}globalThis.DocumentFragment=a}globalThis.customElements||(globalThis.customElements={get(a){},define(a,e,s){},upgrade(a){},whenDefined(a){return Promise.resolve(globalThis.HTMLElement)}});var J;if(!globalThis.CustomEvent){class a{constructor(s,n={}){At(this,J,void 0);xt(this,J,n==null?void 0:n.detail)}get detail(){Lt(this,J)}initCustomEvent(s,n,u,p){}}J=new WeakMap,globalThis.CustomEvent=a}if(!globalThis.EventTarget){class a{addEventListener(){}removeEventListener(){}dispatchEvent(s){return!0}}globalThis.EventTarget=a}if(!globalThis.HTMLElement){class a extends EventTarget{}globalThis.HTMLElement=a}if(!globalThis.HTMLVideoElement){class a extends EventTarget{}globalThis.HTMLVideoElement=a}var Mt,_t;if(!((Mt=globalThis.document)==null?void 0:Mt.createElement)){let a=(_t=globalThis.document)!=null?_t:{};a.createElement=function(s,n){return new HTMLElement},globalThis.document=a}var Ot=document.createElement("template");Ot.innerHTML=`
<style>
/* These styles simulate a user passing these via props. Until
that's implemented, we just hardcode it for non-full-screen demo purposes. (TD).
*/
.dropzone {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100%;
width: 100%;
:host {
position: relative;
}
/* TO-DO: Make default dropzone hover more apparent. (TD).*/
:host([disable-drop]) .dropzone {
#overlay {
display: none;
}
.overlay {
display: none;
}
:host([fullscreen]) .dropzone {
position: absolute;

@@ -36,20 +18,6 @@ top: 0;

width: 100%;
z-index: 1;
}
:host([fullscreen][overlay]) .overlay {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
height: 100%;
width: 100%;
z-index: -1;
}
:host([active][fullscreen][overlay]) .overlay {
z-index: 10;
background-color: var(--overlay-background-color, rgba(226, 253, 255, 0.95));
:host([active][overlay]) > #overlay {
background: var(--overlay-background-color, rgba(226, 253, 255, 0.95));
display: flex;

@@ -60,18 +28,9 @@ flex-direction: column;

}
h1 {
display: none;
}
:host([active][overlay]) h1 {
display: block;
}
</style>
<div class="overlay" id="overlay">
<h1 id="overlay-text"></h1>
<slot></slot>
<div id="overlay">
<h1 id="overlay-label"></h1>
</div>
<div class="dropzone" id="dropzone">
</div>
`;var at=class extends HTMLElement{constructor(){super();let o=this.attachShadow({mode:"open"});o.appendChild(Ct.content.cloneNode(!0)),this.overlay=o.getElementById("overlay"),this.overlayText=o.getElementById("overlay-text")}connectedCallback(){this.setupDragEvents()}attributeChangedCallback(){this.shadowRoot.getElementById("overlay-text").innerHTML=this.getAttribute("text")}static get observedAttributes(){return["text","mux-uploader"]}get muxUploader(){let o=this.getAttribute("mux-uploader");return o?document.getElementById(o):null}setupDragEvents(){this.addEventListener("dragenter",o=>{o.preventDefault(),o.stopPropagation(),this.setAttribute("active","")}),this.addEventListener("dragleave",o=>{this.removeAttribute("active")}),this.addEventListener("dragover",o=>{o.preventDefault(),o.stopPropagation()}),this.addEventListener("drop",o=>{var b;o.preventDefault(),o.stopPropagation();let{dataTransfer:a}=o,{files:r}=a,i=r[0];((b=this.muxUploader)!=null?b:this).dispatchEvent(new CustomEvent("file-ready",{composed:!0,bubbles:!0,detail:i})),this.removeAttribute("active")})}};globalThis.customElements.get("mux-uploader-drop")||(globalThis.customElements.define("mux-uploader-drop",at),globalThis.MuxUploaderDropElement=at);var Nt=`
`;var nt={MUX_UPLOADER:"mux-uploader",OVERLAY_TEXT:"overlay-text"},ut=class extends HTMLElement{constructor(){super();let e=this.attachShadow({mode:"open"});e.appendChild(Ot.content.cloneNode(!0)),this.overlayText=e.getElementById("overlay-label")}connectedCallback(){this.setupDragEvents()}attributeChangedCallback(e,s,n){e===nt.OVERLAY_TEXT&&s!==n&&(this.overlayText.innerHTML=n!=null?n:"")}static get observedAttributes(){return[nt.OVERLAY_TEXT,nt.MUX_UPLOADER]}get muxUploader(){let e=this.getAttribute(nt.MUX_UPLOADER);return e?document.getElementById(e):null}setupDragEvents(){this.addEventListener("dragenter",e=>{e.preventDefault(),e.stopPropagation(),this.setAttribute("active","")}),this.addEventListener("dragleave",e=>{this.removeAttribute("active")}),this.addEventListener("dragover",e=>{e.preventDefault(),e.stopPropagation()}),this.addEventListener("drop",e=>{var v;e.preventDefault(),e.stopPropagation();let{dataTransfer:s}=e,{files:n}=s,u=n[0];((v=this.muxUploader)!=null?v:this).dispatchEvent(new CustomEvent("file-ready",{composed:!0,bubbles:!0,detail:u})),this.removeAttribute("active")})}};globalThis.customElements.get("mux-uploader-drop")||(globalThis.customElements.define("mux-uploader-drop",ut),globalThis.MuxUploaderDropElement=ut);var jt=Yt(St()),$t=`
:host {

@@ -112,3 +71,2 @@ font-family: var(--uploader-font-family, Arial);

font-size: inherit;
z-index: 10;
position: relative;

@@ -151,3 +109,2 @@ }

cursor: pointer;
z-index: 10;
position: relative;

@@ -243,9 +200,7 @@ }

}
`,Pt=document.createElement("template");Pt.innerHTML=`
`,It=document.createElement("template");It.innerHTML=`
<style>
${Nt}
${$t}
</style>
<p class="upload-instruction" id="upload-instruction">Drop file to upload</p>
<div class="sr-only" id="sr-only" aria-live="polite"></div>

@@ -258,6 +213,5 @@

<input type="file" />
<!--TO-DO: Slots not receiving events or not having the right visual behaviour as the original elements. (TD).-->
<slot name="custom-button"><button type="button">Upload video</button></slot>
<slot name="custom-progress"><p class="upload-status" id="upload-status"></p></slot>
<input id="hidden-file-input" type="file" />
<slot name="upload-button"><button type="button">Upload video</button></slot>
<p class="upload-status" id="upload-status"></p>

@@ -280,7 +234,3 @@ <div class="bar-type">

</div>
<slot name="dropzone">
<mux-uploader-drop></mux-uploader-drop>
</slot>
`;var et={BAR:"bar",RADIAL:"radial"},zt=f=>{var o;return Number((o=f.svgCircle)==null?void 0:o.getAttribute("r"))},$=f=>zt(f)*2*Math.PI,qt="Media upload progress bar",Lt=["Enter"," "],nt=class extends HTMLElement{constructor(){super();var r,i,h,b,w,y,d,t,u;let o=this.attachShadow({mode:"open"}),a=Pt.content.cloneNode(!0);o.appendChild(a),this.hiddenFileInput=(r=this.shadowRoot)==null?void 0:r.querySelector('input[type="file"]'),this.filePickerButton=(i=this.shadowRoot)==null?void 0:i.querySelector("button"),this.svgCircle=(h=this.shadowRoot)==null?void 0:h.querySelector("circle"),this.progressBar=(b=this.shadowRoot)==null?void 0:b.getElementById("progress-bar"),this.uploadPercentage=(w=this.shadowRoot)==null?void 0:w.getElementById("upload-status"),this.statusMessage=(y=this.shadowRoot)==null?void 0:y.getElementById("status-message"),this.retryButton=(d=this.shadowRoot)==null?void 0:d.getElementById("retry-button"),this.srOnlyText=(t=this.shadowRoot)==null?void 0:t.getElementById("sr-only"),(u=this.progressBar)==null||u.setAttribute("aria-description",qt)}connectedCallback(){var o;if(this.setDefaultType(),this.setupFilePickerButton(),this.setupRetry(),this.setupDropHandler(),this.hasAttribute("disable-drop")){let a=(o=this.shadowRoot)==null?void 0:o.querySelector("mux-uploader-drop");a==null||a.setAttribute("disable-drop","")}}disconnectedCallback(){this.removeEventListener("file-ready",this.handleUpload,!1)}get url(){return this.getAttribute("url")}set url(o){this.setAttribute("url",o)}setDefaultType(){let o=this.getAttribute("type");o||this.setAttribute("type",et.BAR),o===et.RADIAL&&this.svgCircle&&(this.svgCircle.style.strokeDasharray=`${$(this)} ${$(this)}`,this.svgCircle.style.strokeDashoffset=`${$(this)}`)}setupRetry(){var a;(a=this.retryButton)==null||a.addEventListener("click",()=>{this.resetState()});let o=r=>{let{key:i}=r;if(!Lt.includes(i)){this.removeEventListener("keyup",o);return}this.resetState()};this.addEventListener("keydown",r=>{let{metaKey:i,altKey:h,key:b}=r;if(i||h||!Lt.includes(b)){this.removeEventListener("keyup",o);return}this.addEventListener("keyup",o)})}setupDropHandler(){this.addEventListener("file-ready",this.handleUpload)}resetState(){this.removeAttribute("upload-error"),this.removeAttribute("upload-in-progress"),this.statusMessage&&(this.statusMessage.innerHTML=""),this.uploadPercentage&&(this.uploadPercentage.innerHTML="")}setupFilePickerButton(){var o,a,r,i;(a=(o=this.shadowRoot)==null?void 0:o.querySelector("slot[name=custom-button]"))==null||a.addEventListener("slotchange",()=>{var h;this.filePickerButton=(h=this.shadowRoot)==null?void 0:h.querySelector("slot[name=custom-button]")}),(r=this.filePickerButton)==null||r.addEventListener("click",()=>{var h;(h=this.hiddenFileInput)==null||h.click()}),(i=this.hiddenFileInput)==null||i.addEventListener("change",h=>{var w,y;let b=(y=(w=this.hiddenFileInput)==null?void 0:w.files)==null?void 0:y[0];b&&this.dispatchEvent(new CustomEvent("file-ready",{composed:!0,bubbles:!0,detail:b}))})}setProgress(o){var a;switch(this.uploadPercentage&&(this.uploadPercentage.innerHTML=`${Math.floor(o)}%`),(a=this.progressBar)==null||a.setAttribute("aria-valuenow",`${Math.floor(o)}`),this.getAttribute("type")){case et.BAR:this.progressBar&&(this.progressBar.style.width=`${o}%`);case et.RADIAL:if(this.svgCircle){let r=$(this)-o/100*$(this);this.svgCircle.style.strokeDashoffset=r.toString()}}}handleUpload(o){var h;let a=this.url,r="No url attribute specified -- cannot handleUpload";a?this.statusMessage&&(this.statusMessage.innerHTML=""):(this.statusMessage&&(this.statusMessage.innerHTML=r),console.error(r)),this.statusMessage&&(this.removeAttribute("upload-error"),this.statusMessage.innerHTML=""),this.setAttribute("upload-in-progress",""),(h=this.progressBar)==null||h.focus();let i=At.createUpload({endpoint:a||"https://storage.googleapis.com/video-storage-us-east1-uploads/B6vYEZ9utvayi7tJlcwjG4ckho8W5100QHse5OEIyOqg?Expires=1654714562&GoogleAccessId=direct-uploads-writer-prod%40mux-cloud.iam.gserviceaccount.com&Signature=ZQLdkP8u432oNZ5WtQwPB22qR%2B03BWd0DOdEFohak0dNG2fzJpE9RLCyAb8uJo3N8YH62UecxJs%2FefKFETicJd978Dldh3E4yTJQLWFR%2B%2FpCrYdS6EQRG7D08Vb9yz82jRJRgJ37cnJgNCzUFUx8AFX%2FG0o8BA3Wcm2AkdcLRWhvt2tj5wTzbxm8ZBflhYckJs7kNaiKEfIXk0UzNBPRJPGzyjzKUyyU1Keu0rERepH7BM8wJeGiw7KrD1TkqeMcA2NSpht4COKXYp3aNrryLGYfx%2B362U3KR0TaRalskKdqODbhBtTlLbFRALog3mGFq3CVJ2CG5Vztq6rXa00VRQ%3D%3D&upload_id=ADPycdsGqgIsU8tBAiu2k4Gt5hPa4QUaURD71neXpjQMfoQUeFGVDvE3qyAN7kzAVUcbSfK6tDhHwpSNiQMSvW41tPiTxw",file:o.detail});i.on("error",b=>{let w="An error has occurred";this.setAttribute("upload-error",""),this.statusMessage&&(this.statusMessage.innerHTML=w),console.error(b.detail.message)}),i.on("progress",b=>{this.setProgress(b.detail)}),i.on("success",()=>{let b="Upload complete!";this.statusMessage&&(this.statusMessage.innerHTML=b),this.srOnlyText&&(this.srOnlyText.innerHTML=b),console.info(b)})}};globalThis.customElements.get("mux-uploader")||(globalThis.customElements.define("mux-uploader",nt),globalThis.MuxUploaderElement=nt);var Wt=nt;})();
`;var rt={BAR:"bar",RADIAL:"radial"},Kt=a=>`${Math.floor(a)}%`,Jt=a=>{var e;return Number((e=a.svgCircle)==null?void 0:e.getAttribute("r"))},Z=a=>Jt(a)*2*Math.PI,Qt="Media upload progress bar",Ht=["Enter"," "],ot=class extends HTMLElement{constructor(){super();var n,u,p,v,R,E,f,t,l,b,T;this.handleFilePickerButtonClick=this.handleFilePickerButtonClick.bind(this);let e=this.attachShadow({mode:"open"}),s=It.content.cloneNode(!0);e.appendChild(s),this.filePickerButton=(n=this.shadowRoot)==null?void 0:n.querySelector("slot[name=upload-button] > *"),this.svgCircle=(u=this.shadowRoot)==null?void 0:u.querySelector("circle"),this.progressBar=(p=this.shadowRoot)==null?void 0:p.getElementById("progress-bar"),this.uploadPercentage=(v=this.shadowRoot)==null?void 0:v.getElementById("upload-status"),this.statusMessage=(R=this.shadowRoot)==null?void 0:R.getElementById("status-message"),this.retryButton=(E=this.shadowRoot)==null?void 0:E.getElementById("retry-button"),this.srOnlyText=(f=this.shadowRoot)==null?void 0:f.getElementById("sr-only"),(t=this.progressBar)==null||t.setAttribute("aria-description",Qt),(l=this.hiddenFileInput)==null||l.addEventListener("change",M=>{var y,k;let w=(k=(y=this.hiddenFileInput)==null?void 0:y.files)==null?void 0:k[0];w&&this.dispatchEvent(new CustomEvent("file-ready",{composed:!0,bubbles:!0,detail:w}))}),(T=(b=this.shadowRoot)==null?void 0:b.querySelector("slot[name=upload-button]"))==null||T.addEventListener("slotchange",()=>{var M,w;this.filePickerButton=(w=(M=this.shadowRoot)==null?void 0:M.querySelector("slot[name=upload-button]"))==null?void 0:w.assignedNodes()[0]})}connectedCallback(){this.setDefaultType(),this.setupRetry(),this.addEventListener("file-ready",this.handleUpload)}disconnectedCallback(){this.removeEventListener("file-ready",this.handleUpload,!1)}get filePickerButton(){return this._filePickerButton}set filePickerButton(e){e!==this._filePickerButton&&(this._filePickerButton&&this._filePickerButton.removeEventListener("click",this.handleFilePickerButtonClick),this._filePickerButton=e,this._filePickerButton&&this._filePickerButton.addEventListener("click",this.handleFilePickerButtonClick))}get hiddenFileInput(){var e;return(e=this.shadowRoot)==null?void 0:e.querySelector("#hidden-file-input")}handleFilePickerButtonClick(e){this.hiddenFileInput.click()}get url(){return this.getAttribute("url")}set url(e){this.setAttribute("url",e)}get formatProgress(){var e;return(e=this._formatProgress)!=null?e:Kt}set formatProgress(e){this._formatProgress=e}setDefaultType(){let e=this.getAttribute("type");e||this.setAttribute("type",rt.BAR),e===rt.RADIAL&&this.svgCircle&&(this.svgCircle.style.strokeDasharray=`${Z(this)} ${Z(this)}`,this.svgCircle.style.strokeDashoffset=`${Z(this)}`)}setupRetry(){var s;(s=this.retryButton)==null||s.addEventListener("click",()=>{this.resetState()});let e=n=>{let{key:u}=n;if(!Ht.includes(u)){this.removeEventListener("keyup",e);return}this.resetState()};this.addEventListener("keydown",n=>{let{metaKey:u,altKey:p,key:v}=n;if(u||p||!Ht.includes(v)){this.removeEventListener("keyup",e);return}this.addEventListener("keyup",e)})}resetState(){this.removeAttribute("upload-error"),this.removeAttribute("upload-in-progress"),this.hiddenFileInput.value="",this.statusMessage&&(this.statusMessage.innerHTML=""),this.uploadPercentage&&(this.uploadPercentage.innerHTML="")}setProgress(e){var s;switch(this.uploadPercentage&&(this.uploadPercentage.innerHTML=this.formatProgress(e)),(s=this.progressBar)==null||s.setAttribute("aria-valuenow",`${Math.floor(e)}`),this.getAttribute("type")){case rt.BAR:this.progressBar&&(this.progressBar.style.width=`${e}%`);case rt.RADIAL:if(this.svgCircle){let n=Z(this)-e/100*Z(this);this.svgCircle.style.strokeDashoffset=n.toString()}}}handleUpload(e){var u;let s=this.url;if(s)this.removeAttribute("upload-error"),this.statusMessage&&(this.statusMessage.innerHTML="");else{let p="No url attribute specified -- cannot handleUpload";this.statusMessage&&(this.statusMessage.innerHTML=p),this.setAttribute("upload-error",""),console.error(p);return}this.setAttribute("upload-in-progress",""),(u=this.progressBar)==null||u.focus();let n=jt.createUpload({endpoint:s,file:e.detail});n.on("error",p=>{let v="An error has occurred";this.setAttribute("upload-error",""),this.statusMessage&&(this.statusMessage.innerHTML=v),console.error(p.detail.message),this.dispatchEvent(new CustomEvent("error",p))}),n.on("progress",p=>{this.setProgress(p.detail),this.dispatchEvent(new CustomEvent("progress",p))}),n.on("success",p=>{let v="Upload complete!";this.statusMessage&&(this.statusMessage.innerHTML=v),this.srOnlyText&&(this.srOnlyText.innerHTML=v),console.info(v),this.dispatchEvent(new CustomEvent("success",p))})}};globalThis.customElements.get("mux-uploader")||(globalThis.customElements.define("mux-uploader",ot),globalThis.MuxUploaderElement=ot);var ae=ot;})();
//# sourceMappingURL=mux-uploader.js.map

11

dist/types-ts3.4/index.d.ts

@@ -0,5 +1,6 @@

import '@mux/polyfills';
import './mux-uploader-drop';
declare class MuxUploaderElement extends HTMLElement {
hiddenFileInput: HTMLInputElement | null | undefined;
filePickerButton: HTMLButtonElement | null | undefined;
protected _formatProgress: ((percent: number) => string) | null | undefined;
protected _filePickerButton: HTMLElement | null | undefined;
svgCircle: SVGCircleElement | null | undefined;

@@ -14,8 +15,10 @@ progressBar: HTMLElement | null | undefined;

disconnectedCallback(): void;
protected filePickerButton: HTMLElement | null | undefined;
protected readonly hiddenFileInput: HTMLInputElement;
handleFilePickerButtonClick(e: MouseEvent): void;
url: string;
formatProgress: (percent: number) => string;
setDefaultType(): void;
setupRetry(): void;
setupDropHandler(): void;
resetState(): void;
setupFilePickerButton(): void;
setProgress(percent: number): void;

@@ -22,0 +25,0 @@ handleUpload(evt: CustomEvent): void;

6

dist/types-ts3.4/mux-uploader-drop.d.ts

@@ -0,7 +1,7 @@

import '@mux/polyfills';
declare class MuxUploaderDropElement extends HTMLElement {
overlay: HTMLElement | null | undefined;
overlayText: HTMLElement | null | undefined;
overlayText: HTMLElement;
constructor();
connectedCallback(): void;
attributeChangedCallback(): void;
attributeChangedCallback(attributeName: string, oldValue: string | null, newValue: string | null): void;
static readonly observedAttributes: string[];

@@ -8,0 +8,0 @@ readonly muxUploader: HTMLElement | null;

13

dist/types/index.d.ts

@@ -0,5 +1,6 @@

import '@mux/polyfills';
import './mux-uploader-drop';
declare class MuxUploaderElement extends HTMLElement {
hiddenFileInput: HTMLInputElement | null | undefined;
filePickerButton: HTMLButtonElement | null | undefined;
protected _formatProgress: ((percent: number) => string) | null | undefined;
protected _filePickerButton: HTMLElement | null | undefined;
svgCircle: SVGCircleElement | null | undefined;

@@ -14,9 +15,13 @@ progressBar: HTMLElement | null | undefined;

disconnectedCallback(): void;
protected get filePickerButton(): HTMLElement | null | undefined;
protected set filePickerButton(value: HTMLElement | null | undefined);
protected get hiddenFileInput(): HTMLInputElement;
handleFilePickerButtonClick(e: MouseEvent): void;
get url(): string;
set url(value: string);
get formatProgress(): (percent: number) => string;
set formatProgress(value: ((percent: number) => string) | null | undefined);
setDefaultType(): void;
setupRetry(): void;
setupDropHandler(): void;
resetState(): void;
setupFilePickerButton(): void;
setProgress(percent: number): void;

@@ -23,0 +28,0 @@ handleUpload(evt: CustomEvent): void;

6

dist/types/mux-uploader-drop.d.ts

@@ -0,7 +1,7 @@

import '@mux/polyfills';
declare class MuxUploaderDropElement extends HTMLElement {
overlay: HTMLElement | null | undefined;
overlayText: HTMLElement | null | undefined;
overlayText: HTMLElement;
constructor();
connectedCallback(): void;
attributeChangedCallback(): void;
attributeChangedCallback(attributeName: string, oldValue: string | null, newValue: string | null): void;
static get observedAttributes(): string[];

@@ -8,0 +8,0 @@ get muxUploader(): HTMLElement | null;

2

package.json
{
"name": "@mux/mux-uploader",
"version": "0.1.0-canary.10-8eff156",
"version": "0.1.0-canary.10-90bbbcb",
"description": "An uploader elements to be used with Mux Direct Uploads",

@@ -5,0 +5,0 @@ "main": "./dist/index.cjs",

68

README.md

@@ -10,5 +10,5 @@ <p align="center">

`<mux-uploader></mux-uploader>` is web component for uploading files to Mux.
`<mux-uploader>` is web component for uploading files to Mux.
`mux-uploader-drop` is an optional supporting web component for drop-in drag and drop and overlay. You can always configure your own drag and drop with `mux-uploader`.
`<mux-uploader-drop>` is an optional supporting container-style web component for drag and drop. You can always configure your own drag and drop with `<mux-uploader>`.

@@ -50,3 +50,3 @@ If you are looking for a direct upload interface and a progress bar, you're in the right place.

```html
<script src="https://unpkg.com/@mux/mux-uploader@0.1.0-beta.0"></script>
<script src="https://unpkg.com/@mux/mux-uploader"></script>
```

@@ -57,3 +57,3 @@

```html
<script type="module" src="https://unpkg.com/@mux/mux-uploader@0.1.0-beta.0/dist/mux-uploader.mjs"></script>
<script type="module" src="https://unpkg.com/@mux/mux-uploader/dist/mux-uploader.mjs"></script>
```

@@ -71,6 +71,7 @@

<!-- Upload button with access to additional drag and drop features via slots i.e. fullscreen drag and drop with text overlay (work-in-progress).-->
<mux-uploader url="authenticated-url">
<mux-uploader-drop slot="dropzone" text="Upload to stream.new" fullscreen overlay></mux-uploader-drop>
</mux-uploader>
<!-- Upload button with access to optional supplentary drag and drop features..-->
<mux-uploader-drop mux-uploader="uploader" overlay overlay-text="Show this while dragging file over me">
<mux-uploader id="uploader" url="authenticated-url"></mux-uploader>
<div>Other stuff you want in the mux-uploader-drop drop zone container</div>
</mux-uploader-drop>
</body>

@@ -81,3 +82,4 @@ ```

The `mux-uploader`, whether you use `mux-uploader-drop` and its additional features or not i.e. fullscreen and text overlay, has basic drag and drop functionality available to it by default. If you'd rather shop your own drag and drop solution, you can disable the default drag and drop on `mux-uploader` and dispatch a custom `file-ready` event when you need to upload. `mux-uploader` will handle the upload upon receiving the event.
`<mux-uploader-drop>` is available for drag and drop functionality. It works like a `<div>` or other "container" element in the sense that you can style it and populate it with whatever children you see fit (including but not necessarily a `<mux-uploader>`). Similar to `<input>` and `<label>` relationships, you associate a `<mux-uploader-drop>` with its corresponding `<mux-uploader>` via `id` using the `mux-uploader` attribute (See example above). When a file is dropped, this will dispatch a custom `file-ready` event to the corresponding `<mux-uploader>` with the relevant file.
This also means you can implement your own drag and drop (or other) components for specific use cases, so long as you dispatch a custom `file-ready` event when you need to upload. `<mux-uploader>` will handle the upload upon receiving the event.

@@ -101,3 +103,3 @@ ```html

#### `mux-uploader`
#### `<mux-uploader>`

@@ -107,30 +109,42 @@ | Attribute | Type | Description | Default |

| `url` | `string` | The authenticated URL that your file will be uploaded to. Check out the [direct uploads docs](https://docs.mux.com/guides/video/upload-files-directly#1-create-an-authenticated-mux-url) for how to create one. Required. | `undefined` |
| `id` | `string` | An ID that allows `mux-uploader-drop` to locate `mux-uploader`. Not necessary unless the unlikely scenario you need to nest `mux-uploader` inside `mux-uploader-drop`. | N/A |
| `id` | `string` | An ID that allows `mux-uploader-drop` to locate `mux-uploader`. Required if you use `mux-uploader-drop`. | N/A |
| `type` | `"bar"` | Specifies the visual type of progress bar. A radial type is in-progress. | "bar" |
| `upload-in-progress` | `boolean` | Toggles visual status of progress bar while upload is in progress. Can be targeted with CSS if you want to control styles while in progress i.e. mux-uploader[upload-in-progress]. | false |
| `upload-error` | `boolean` | Toggles visual status of progress bar when upload encounters an error. Can be targeted with CSS if you want to control styles when an error occurs i.e. mux-uploader[upload-error]. | false |
| `upload-in-progress` | `boolean` | (Read-only) Toggles visual status of progress bar while upload is in progress. Can be targeted with CSS if you want to control styles while in progress i.e. mux-uploader[upload-in-progress]. | false |
| `upload-error` | `boolean` | (Read-only) Toggles visual status of progress bar when upload encounters an error. Can be targeted with CSS if you want to control styles when an error occurs i.e. mux-uploader[upload-error]. | false |
| `status` | `boolean` | Toggles text status visibility of progress bar. The text that is displayed is a percentage by default. If you prefer just the progress bar with no text upload status, don't include this attribute. | false |
#### `mux-uploader-drop`
#### `<mux-uploader-drop>`
| Attribute | Type | Description | Default |
| --------------- | --------- | ------------------------------------------------------ | ------- |
| `fullscreen` | `boolean` | Toggles fullscreen drag and drop (work-in-progress). | false |
| `overlay` | `boolean` | Toggles fullscreen overlay on dragover. | false |
| `disable-drop ` | `boolean` | Toggles off drag and drop which is enabled by default. | false |
| Attribute | Type | Description | Default |
| -------------- | --------- | ---------------------------------------------------------- | ------- |
| `overlay` | `boolean` | Toggles showing an overlay on dragover. | `false` |
| `overlay-text` | `boolean` | Optional text to display on dragover when `overlay` is on. | `''` |
| `mux-uploader` | `string ` | Must match the `id` on `MuxUploader`. Required. | N/A |
### Methods
### Properties
| Method | Description |
| ---------------- | --------------------------- |
| `handleUpload()` | Begins upload of the media. |
#### `<mux-uploader>`
| Attribute | Type | Description | Default |
| ---------------- | ---------- | --------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------- |
| `formatProgress` | `function` | A function that accepts numeric percent and is expected to return a string. Allows for customizing how the progress should be rendered. | A function the yields a percent progress string |
### Events
#### `<mux-uploader>`
`<mux-uploader>` has a handful of events to monitor uploading state.
| Event | Description |
| ---------- | ------------------------------------------------------------------------ |
| `error` | Fired when an error occurs in the chunked upload process. |
| `progress` | Fired whenever a chunk of the file has successfully completed uploading. |
| `success` | Fired when the entire file has successfully completed uploading. |
### Styling
`mux-uploader` can be styled with CSS variables.
`<mux-uploader>` and `<mux-uploader-drop>` can be styled with standard CSS, but also includes these CSS variables for "under the hood" styling.
#### Elements
#### `<mux-uploader>`
- `<mux-uploader/>`
| Name | CSS Property | Default Value | Description | Notes |

@@ -137,0 +151,0 @@ | ------------------------------ | ------------------ | ------------- | ------------------------------------------------------- | ------------------------------------------------------------------------------------------------- |

167

src/index.ts

@@ -0,3 +1,6 @@

import '@mux/polyfills';
// Still need to import this to ensure component registration occurs when using the main module.
// Consider refactoring module structure to avoid this. (CJP)
import './mux-uploader-drop';
import * as UpChunk from '@mux/upchunk';
import './mux-uploader-drop';

@@ -40,3 +43,2 @@ const styles = `

font-size: inherit;
z-index: 10;
position: relative;

@@ -79,3 +81,2 @@ }

cursor: pointer;
z-index: 10;
position: relative;

@@ -180,4 +181,2 @@ }

<p class="upload-instruction" id="upload-instruction">Drop file to upload</p>
<div class="sr-only" id="sr-only" aria-live="polite"></div>

@@ -190,6 +189,5 @@

<input type="file" />
<!--TO-DO: Slots not receiving events or not having the right visual behaviour as the original elements. (TD).-->
<slot name="custom-button"><button type="button">Upload video</button></slot>
<slot name="custom-progress"><p class="upload-status" id="upload-status"></p></slot>
<input id="hidden-file-input" type="file" />
<slot name="upload-button"><button type="button">Upload video</button></slot>
<p class="upload-status" id="upload-status"></p>

@@ -212,6 +210,2 @@ <div class="bar-type">

</div>
<slot name="dropzone">
<mux-uploader-drop></mux-uploader-drop>
</slot>
`;

@@ -225,2 +219,4 @@

const defaultFormatProgress = (percent: number) => `${Math.floor(percent)}%`;
const getRadius = (el: MuxUploaderElement) => Number(el.svgCircle?.getAttribute('r'));

@@ -235,4 +231,4 @@

class MuxUploaderElement extends HTMLElement {
hiddenFileInput: HTMLInputElement | null | undefined;
filePickerButton: HTMLButtonElement | null | undefined;
protected _formatProgress: ((percent: number) => string) | null | undefined;
protected _filePickerButton: HTMLElement | null | undefined;
svgCircle: SVGCircleElement | null | undefined;

@@ -248,2 +244,6 @@ progressBar: HTMLElement | null | undefined;

// NOTE: Binding this so that we have a reference to remove the event listener
// but can still reference `this` in the method. (CJP)
this.handleFilePickerButtonClick = this.handleFilePickerButtonClick.bind(this);
const shadow = this.attachShadow({ mode: 'open' });

@@ -253,4 +253,5 @@ const uploaderHtml = template.content.cloneNode(true);

this.hiddenFileInput = this.shadowRoot?.querySelector('input[type="file"]');
this.filePickerButton = this.shadowRoot?.querySelector('button');
// Since we have a "default slotted" element, we still need to initialize the slottable elements
// (Note the difference in selectors and related code in 'slotchange' handler, below)
this.filePickerButton = this.shadowRoot?.querySelector('slot[name=upload-button] > *');
this.svgCircle = this.shadowRoot?.querySelector('circle');

@@ -264,2 +265,22 @@ this.progressBar = this.shadowRoot?.getElementById('progress-bar');

this.progressBar?.setAttribute('aria-description', ariaDescription);
// These should only ever be setup once on instantiation/construction.
this.hiddenFileInput?.addEventListener('change', (evt) => {
const file = this.hiddenFileInput?.files?.[0];
if (file) {
this.dispatchEvent(
new CustomEvent('file-ready', {
composed: true,
bubbles: true,
detail: file,
})
);
}
});
this.shadowRoot?.querySelector('slot[name=upload-button]')?.addEventListener('slotchange', () => {
this.filePickerButton = (
this.shadowRoot?.querySelector('slot[name=upload-button]') as HTMLSlotElement
)?.assignedNodes()[0] as HTMLButtonElement;
});
}

@@ -269,15 +290,5 @@

this.setDefaultType();
this.setupFilePickerButton();
this.setupRetry();
this.setupDropHandler();
// TO-DO: Might want to standardize if we prefer to have users disable or enable things. (TD).
// Edge case: User wants to use the uploader without drag.
// Because we slot a default mux-uploader-drop if they don't slot one,
// in order to disable drop, the user has to pass disable-drop to mux-uploader and mux-uploader-drop
// must apply it in order to disable the drop. It currently requires you to explicit pass "true".
if (this.hasAttribute('disable-drop')) {
const muxUploaderDrop = this.shadowRoot?.querySelector('mux-uploader-drop');
muxUploaderDrop?.setAttribute('disable-drop', '');
}
//@ts-ignore
this.addEventListener('file-ready', this.handleUpload);
}

@@ -290,2 +301,28 @@

protected get filePickerButton() {
return this._filePickerButton;
}
protected set filePickerButton(value: HTMLElement | null | undefined) {
if (value === this._filePickerButton) return;
if (this._filePickerButton) {
this._filePickerButton.removeEventListener('click', this.handleFilePickerButtonClick);
}
this._filePickerButton = value;
if (this._filePickerButton) {
this._filePickerButton.addEventListener('click', this.handleFilePickerButtonClick);
}
}
protected get hiddenFileInput() {
return this.shadowRoot?.querySelector('#hidden-file-input') as HTMLInputElement;
}
handleFilePickerButtonClick(e: MouseEvent) {
// TO-DO: Allow user to reattempt uploading the same file after an error.
// Note: Apparently Chrome and Firefox do not allow changing an indexed property on FileList...(TD).
// Source: https://stackoverflow.com/a/46689013
this.hiddenFileInput.click();
}
get url() {

@@ -299,2 +336,10 @@ return this.getAttribute('url') as string;

get formatProgress(): (percent: number) => string {
return this._formatProgress ?? defaultFormatProgress;
}
set formatProgress(value: ((percent: number) => string) | null | undefined) {
this._formatProgress = value;
}
setDefaultType() {

@@ -349,10 +394,7 @@ const currentType = this.getAttribute('type');

setupDropHandler() {
//@ts-ignore
this.addEventListener('file-ready', this.handleUpload);
}
resetState() {
this.removeAttribute('upload-error');
this.removeAttribute('upload-in-progress');
// Reset file to ensure change/input events will fire, even if selecting the same file (CJP).
this.hiddenFileInput.value = '';
if (this.statusMessage) this.statusMessage.innerHTML = '';

@@ -362,33 +404,4 @@ if (this.uploadPercentage) this.uploadPercentage.innerHTML = '';

setupFilePickerButton() {
// TO-DO: Troubleshoot click event when user clicks custom button. Currently not getting the slotted element. (TD).
this.shadowRoot?.querySelector('slot[name=custom-button]')?.addEventListener('slotchange', () => {
this.filePickerButton = this.shadowRoot?.querySelector('slot[name=custom-button]');
});
this.filePickerButton?.addEventListener('click', () => {
// TO-DO: Allow user to reattempt uploading the same file after an error.
// Note: Apparently Chrome and Firefox do not allow changing an indexed property on FileList...(TD).
// Source: https://stackoverflow.com/a/46689013
this.hiddenFileInput?.click();
});
this.hiddenFileInput?.addEventListener('change', (evt) => {
const file = this.hiddenFileInput?.files?.[0];
if (file) {
this.dispatchEvent(
new CustomEvent('file-ready', {
composed: true,
bubbles: true,
detail: file,
})
);
}
});
}
setProgress(percent: number) {
if (this.uploadPercentage) this.uploadPercentage.innerHTML = `${Math.floor(percent)}%`;
if (this.uploadPercentage) this.uploadPercentage.innerHTML = this.formatProgress(percent);
this.progressBar?.setAttribute('aria-valuenow', `${Math.floor(percent)}`);

@@ -414,14 +427,17 @@

const url = this.url;
const invalidUrlMessage = 'No url attribute specified -- cannot handleUpload';
if (!url) {
if (this.statusMessage) this.statusMessage.innerHTML = invalidUrlMessage;
const invalidUrlMessage = 'No url attribute specified -- cannot handleUpload';
if (this.statusMessage) {
this.statusMessage.innerHTML = invalidUrlMessage;
}
this.setAttribute('upload-error', '');
console.error(invalidUrlMessage);
// Bail early if no url.
return;
} else {
if (this.statusMessage) this.statusMessage.innerHTML = '';
}
if (this.statusMessage) {
this.removeAttribute('upload-error');
this.statusMessage.innerHTML = '';
if (this.statusMessage) {
this.statusMessage.innerHTML = '';
}
}

@@ -433,5 +449,3 @@

const upload = UpChunk.createUpload({
endpoint:
url ||
'https://storage.googleapis.com/video-storage-us-east1-uploads/B6vYEZ9utvayi7tJlcwjG4ckho8W5100QHse5OEIyOqg?Expires=1654714562&GoogleAccessId=direct-uploads-writer-prod%40mux-cloud.iam.gserviceaccount.com&Signature=ZQLdkP8u432oNZ5WtQwPB22qR%2B03BWd0DOdEFohak0dNG2fzJpE9RLCyAb8uJo3N8YH62UecxJs%2FefKFETicJd978Dldh3E4yTJQLWFR%2B%2FpCrYdS6EQRG7D08Vb9yz82jRJRgJ37cnJgNCzUFUx8AFX%2FG0o8BA3Wcm2AkdcLRWhvt2tj5wTzbxm8ZBflhYckJs7kNaiKEfIXk0UzNBPRJPGzyjzKUyyU1Keu0rERepH7BM8wJeGiw7KrD1TkqeMcA2NSpht4COKXYp3aNrryLGYfx%2B362U3KR0TaRalskKdqODbhBtTlLbFRALog3mGFq3CVJ2CG5Vztq6rXa00VRQ%3D%3D&upload_id=ADPycdsGqgIsU8tBAiu2k4Gt5hPa4QUaURD71neXpjQMfoQUeFGVDvE3qyAN7kzAVUcbSfK6tDhHwpSNiQMSvW41tPiTxw',
endpoint: url,
file: evt.detail,

@@ -450,2 +464,3 @@ });

console.error(err.detail.message);
this.dispatchEvent(new CustomEvent('error', err));
});

@@ -455,5 +470,6 @@

this.setProgress(progress.detail);
this.dispatchEvent(new CustomEvent('progress', progress));
});
upload.on('success', () => {
upload.on('success', (event) => {
const successMessage = 'Upload complete!';

@@ -472,2 +488,3 @@

console.info(successMessage);
this.dispatchEvent(new CustomEvent('success', event));
});

@@ -474,0 +491,0 @@ }

105

src/mux-uploader-drop.ts

@@ -0,29 +1,13 @@

import '@mux/polyfills';
const template = document.createElement('template');
/** @todo: Currently removing all styles. Follow up on overlay styling (CJP) */
template.innerHTML = `
<style>
/* These styles simulate a user passing these via props. Until
that's implemented, we just hardcode it for non-full-screen demo purposes. (TD).
*/
.dropzone {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100%;
width: 100%;
:host {
position: relative;
}
/* TO-DO: Make default dropzone hover more apparent. (TD).*/
:host([disable-drop]) .dropzone {
#overlay {
display: none;
}
.overlay {
display: none;
}
:host([fullscreen]) .dropzone {
position: absolute;

@@ -36,20 +20,6 @@ top: 0;

width: 100%;
z-index: 1;
}
:host([fullscreen][overlay]) .overlay {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
height: 100%;
width: 100%;
z-index: -1;
}
:host([active][fullscreen][overlay]) .overlay {
z-index: 10;
background-color: var(--overlay-background-color, rgba(226, 253, 255, 0.95));
:host([active][overlay]) > #overlay {
background: var(--overlay-background-color, rgba(226, 253, 255, 0.95));
display: flex;

@@ -60,22 +30,17 @@ flex-direction: column;

}
h1 {
display: none;
}
:host([active][overlay]) h1 {
display: block;
}
</style>
<div class="overlay" id="overlay">
<h1 id="overlay-text"></h1>
<slot></slot>
<div id="overlay">
<h1 id="overlay-label"></h1>
</div>
<div class="dropzone" id="dropzone">
</div>
`;
const Attributes = {
MUX_UPLOADER: 'mux-uploader',
OVERLAY_TEXT: 'overlay-text',
};
class MuxUploaderDropElement extends HTMLElement {
overlay: HTMLElement | null | undefined;
overlayText: HTMLElement | null | undefined;
overlayText: HTMLElement;

@@ -87,4 +52,3 @@ constructor() {

this.overlay = shadowRoot.getElementById('overlay');
this.overlayText = shadowRoot.getElementById('overlay-text');
this.overlayText = shadowRoot.getElementById('overlay-label') as HTMLElement;
}

@@ -96,40 +60,17 @@

attributeChangedCallback() {
//@ts-ignore
this.shadowRoot.getElementById('overlay-text').innerHTML = this.getAttribute('text');
attributeChangedCallback(attributeName: string, oldValue: string | null, newValue: string | null) {
if (attributeName === Attributes.OVERLAY_TEXT && oldValue !== newValue) {
this.overlayText.innerHTML = newValue ?? '';
}
}
static get observedAttributes() {
return ['text', 'mux-uploader'];
return [Attributes.OVERLAY_TEXT, Attributes.MUX_UPLOADER];
}
get muxUploader() {
const uploaderId = this.getAttribute('mux-uploader');
const uploaderId = this.getAttribute(Attributes.MUX_UPLOADER);
return uploaderId ? document.getElementById(uploaderId) : null;
}
/* TO-DO: Maybe use something like this from player so allow users to fully customize the dropzone
without having to make a ton of CSS variables available i.e. position absolute. (TD).
kebabCase(string: String) {
return string.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
}
stylePropsToString(props: any) {
let style = '';
Object.entries(props).forEach(([key, value]) => {
style += `${this.kebabCase(key)}: ${value}; `;
});
return style ? style.trim() : undefined;
}
customizeDropzone() {
if(this.getAttribute('props')) {
// change .dropzone to use styles returned from stylePropsToString;
// this.setClass('dropzone', this.stylePropsToString(this.getAttribute('props')));
}
}
*/
setupDragEvents() {

@@ -136,0 +77,0 @@ this.addEventListener('dragenter', (evt) => {

dist/index.cjs

Sorry, the diff of this file is not supported yet

dist/index.cjs.map

Sorry, the diff of this file is not supported yet

dist/index.mjs

Sorry, the diff of this file is not supported yet

dist/index.mjs.map

Sorry, the diff of this file is not supported yet

dist/mux-uploader.js.map

Sorry, the diff of this file is not supported yet

dist/mux-uploader.mjs

Sorry, the diff of this file is not supported yet

dist/mux-uploader.mjs.map

Sorry, the diff of this file is not supported yet

dist/tsconfig.tsbuildinfo

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc