@mux/mux-uploader/dist/index.mjs

An uploader elements to be used with Mux Direct Uploads

var Ae=Object.defineProperty;var J=i=>{throw TypeError(i)};var Te=(i,t)=>{for(var e in t)Ae(i,e,{get:t[e],enumerable:!0})};var Q=(i,t,e)=>t.has(i)||J("Cannot "+e);var o=(i,t,e)=>(Q(i,t,"read from private field"),e?e.call(i):t.get(i)),l=(i,t,e)=>t.has(i)?J("Cannot add the same private member more than once"):t instanceof WeakSet?t.add(i):t.set(i,e),u=(i,t,e,r)=>(Q(i,t,"write to private field"),r?r.call(i,e):t.set(i,e),e);var q={};Te(q,{ProgressTypes:()=>L});var L={BAR:"bar",RADIAL:"radial",PERCENTAGE:"percentage"};var F={"Drop a video file here to upload":"Drop a video file here to upload",or:"or","Upload complete!":"Upload complete!",Retry:"Retry","Pausing...":"Pausing...",Resume:"Resume",Pause:"Pause","Upload a video":"Upload a video","No url or endpoint specified - cannot handle upload":"No url or endpoint specified - cannot handle upload"};var V={"Drop a video file here to upload":"Arrastra un archivo de video aqu\xED para subir",or:"o","Upload complete!":"\xA1Subida completada!",Retry:"Reintentar","Pausing...":"Pausando...",Resume:"Reanudar",Pause:"Pausar","Upload a video":"Subir un video","No url or endpoint specified - cannot handle upload":"No se especific\xF3 URL o endpoint - no se puede manejar la subida"};var ee={"Drop a video file here to upload":"D\xE9posez un fichier vid\xE9o ici pour le t\xE9l\xE9charger",or:"ou","Upload complete!":"T\xE9l\xE9chargement termin\xE9!",Retry:"R\xE9essayer","Pausing...":"En pause...",Resume:"Reprendre",Pause:"Pause","Upload a video":"T\xE9l\xE9charger une vid\xE9o","No url or endpoint specified - cannot handle upload":"Aucune URL ou point de terminaison sp\xE9cifi\xE9 - impossible de g\xE9rer le t\xE9l\xE9chargement"};var te={"Drop a video file here to upload":"Legen Sie hier eine Videodatei zum Hochladen ab",or:"oder","Upload complete!":"Upload abgeschlossen!",Retry:"Wiederholen","Pausing...":"Pausiere...",Resume:"Fortsetzen",Pause:"Pausieren","Upload a video":"Video hochladen","No url or endpoint specified - cannot handle upload":"Keine URL oder Endpunkt angegeben - Upload kann nicht verarbeitet werden"};var oe={"Drop a video file here to upload":"Arraste um arquivo de v\xEDdeo aqui para fazer o upload",or:"ou","Upload complete!":"Upload completo!",Retry:"Tentar novamente","Pausing...":"Pausando...",Resume:"Retomar",Pause:"Pausar","Upload a video":"Fazer upload de um v\xEDdeo","No url or endpoint specified - cannot handle upload":"Nenhum URL ou endpoint especificado - n\xE3o \xE9 poss\xEDvel processar o upload"};var re={"Drop a video file here to upload":"Trascina qui un file video per caricarlo",or:"o","Upload complete!":"Caricamento completato!",Retry:"Riprova","Pausing...":"In pausa...",Resume:"Riprendi",Pause:"Pausa","Upload a video":"Carica un video","No url or endpoint specified - cannot handle upload":"Nessun URL o endpoint specificato - impossibile gestire il caricamento"};var se={"Drop a video file here to upload":"\u5C06\u89C6\u9891\u6587\u4EF6\u62D6\u653E\u5230\u6B64\u5904\u4EE5\u4E0A\u4F20",or:"\u6216","Upload complete!":"\u4E0A\u4F20\u5B8C\u6210\uFF01",Retry:"\u91CD\u8BD5","Pausing...":"\u6682\u505C...",Resume:"\u7EE7\u7EED",Pause:"\u6682\u505C","Upload a video":"\u4E0A\u4F20\u89C6\u9891","No url or endpoint specified - cannot handle upload":"\u672A\u6307\u5B9A URL \u6216 endpoint - \u65E0\u6CD5\u5904\u7406\u4E0A\u4F20"};var Le={en:F,es:V,fr:ee,de:te,pt:oe,it:re,zh:se};var Me=()=>typeof globalThis.navigator=="undefined"||!globalThis.navigator.language?"en":globalThis.navigator.language.split("-")[0],ie=["en","es","fr","de","pt","it","zh"],ke=i=>{if(i&&ie.includes(i))return i;let t=Me();return ie.includes(t)?t:"en"},c=(i,t)=>{let e=ke(t);return(Le[e]||F)[i]||F[i]};var M=class{addEventListener(){}removeEventListener(){}dispatchEvent(t){return!0}};if(typeof DocumentFragment=="undefined"){class i extends M{}globalThis.DocumentFragment=i}var S=class extends M{},G=class extends M{},Ce={get(i){},define(i,t,e){},getName(i){return null},upgrade(i){},whenDefined(i){return Promise.resolve(S)}},D,W=class{constructor(t,e={}){l(this,D);u(this,D,e==null?void 0:e.detail)}get detail(){return o(this,D)}initCustomEvent(){}};D=new WeakMap;function Ue(i,t){return new S}var ne={document:{createElement:Ue},DocumentFragment,customElements:Ce,CustomEvent:W,EventTarget:M,HTMLElement:S,HTMLVideoElement:G},ae=typeof window=="undefined"||typeof globalThis.customElements=="undefined",a=ae?ne:globalThis,h=ae?ne.document:globalThis.document;import{UpChunk as Fe}from"@mux/upchunk";var le=(i,t)=>{if(!i)return null;let e=i.closest(t);return e||le(i.getRootNode().host,t)},f=i=>{let t=i.getAttribute("mux-uploader");return t?document.getElementById(t):le(i,"mux-uploader")};var ue=h.createElement("template");ue.innerHTML=`
<style>
  :host {
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px dashed #ccc;
    padding: 2.5rem 2rem;
    border-radius: .25rem;
  }

  slot[name='heading'] > * {
    margin-bottom: 0.75rem;
    font-size: 1.75rem;
    text-align: center;
  }

  slot[name='separator'] > * {
    margin-bottom: 0.75rem;
  }

  #overlay {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    height: 100%;
    width: 100%;
  }

  :host([active][overlay]) > #overlay {
    background: var(--overlay-background-color, rgba(226, 253, 255, 0.95));
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  :host([file-ready])::part(heading),
  :host([file-ready])::part(separator) {
    display: none;
  }
</style>

<slot name="heading" part="heading">
  <span id="drop-text">Drop a video file here to upload</span>
</slot>
<slot name="separator" part="separator">
  <span id="separator-text">or</span>
</slot>
<slot></slot>

<div id="overlay">
  <h1 id="overlay-label"></h1>
</div>
`;var X={MUX_UPLOADER:"mux-uploader",OVERLAY_TEXT:"overlay-text"},z,g,k,H=class extends a.HTMLElement{constructor(){super();l(this,z);l(this,g);l(this,k);let e=this.attachShadow({mode:"open"});e.appendChild(ue.content.cloneNode(!0)),u(this,z,e.getElementById("overlay-label"))}connectedCallback(){if(u(this,g,f(this)),u(this,k,new AbortController),o(this,g)){let e={signal:o(this,k).signal};o(this,g).addEventListener("file-ready",()=>this.toggleAttribute("file-ready",!0),e),o(this,g).addEventListener("uploadstart",()=>this.toggleAttribute("upload-in-progress",!0),e),o(this,g).addEventListener("success",()=>{this.toggleAttribute("upload-in-progress",!1),this.toggleAttribute("upload-complete",!0)},e),o(this,g).addEventListener("reset",()=>{this.toggleAttribute("file-ready",!1),this.toggleAttribute("upload-in-progress",!1),this.toggleAttribute("upload-complete",!1)},e),this.setupDragEvents(e),this.toggleAttribute("upload-in-progress",o(this,g).hasAttribute("upload-in-progress")),this.toggleAttribute("upload-complete",o(this,g).hasAttribute("upload-complete")),this.toggleAttribute("file-ready",o(this,g).hasAttribute("file-ready")),o(this,g).addEventListener("localechange",()=>this.updateText(),e),this.updateText()}}disconnectedCallback(){var e;(e=o(this,k))==null||e.abort()}attributeChangedCallback(e,r,s){e===X.OVERLAY_TEXT&&r!==s?o(this,z).innerHTML=s!=null?s:"":e==="active"&&this.hasAttribute("overlay")&&s!=null&&(this._currentDragTarget=this)}static get observedAttributes(){return[X.OVERLAY_TEXT,X.MUX_UPLOADER,"active"]}setupDragEvents(e){this.addEventListener("dragenter",r=>{this._currentDragTarget=r.target,r.preventDefault(),r.stopPropagation(),this.toggleAttribute("active",!0)},e),this.addEventListener("dragleave",r=>{this._currentDragTarget===r.target&&(this._currentDragTarget=void 0,this.toggleAttribute("active",!1))},e),this.addEventListener("dragover",r=>{r.preventDefault(),r.stopPropagation()},e),this.addEventListener("drop",r=>{var T;r.preventDefault(),r.stopPropagation();let{dataTransfer:s}=r,{files:n}=s,p=n[0];((T=o(this,g))!=null?T:this).dispatchEvent(new CustomEvent("file-ready",{composed:!0,bubbles:!0,detail:p})),this.removeAttribute("active")},e)}updateText(){var n,p,E;let e=(n=o(this,g))==null?void 0:n.locale,r=(p=this.shadowRoot)==null?void 0:p.getElementById("drop-text"),s=(E=this.shadowRoot)==null?void 0:E.getElementById("separator-text");r&&(r.textContent=c("Drop a video file here to upload",e)),s&&(s.textContent=c("or",e))}};z=new WeakMap,g=new WeakMap,k=new WeakMap;a.customElements.get("mux-uploader-drop")||(a.customElements.define("mux-uploader-drop",H),a.MuxUploaderDropElement=H);var Re=H;function de(i){return`${Math.floor(i)}%`}var pe=h.createElement("template"),we="Media upload progress bar";pe.innerHTML=`
<style>
  :host {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }

  .bar-type {
    background: var(--progress-bar-background-color, #e6e6e6);
    border-radius: var(--progress-bar-border-radius, 100px);
    height: var(--progress-bar-height, 4px);
    width: 100%;
  }

  .radial-type,
  .bar-type,
  #percentage-type,
  :host([type="bar"][upload-error]) #percentage-type {
    display: none;
  }

  :host([type="radial"][upload-in-progress]) .radial-type,
  :host([type="bar"][upload-in-progress]) .bar-type {
    display: block;
  }

  :host([type="percentage"][upload-in-progress]) #percentage-type {
    display: var(--progress-percentage-display, block);
  }

  :host([type="bar"][upload-error]) .progress-bar {
    background: #e22c3e;
  }

  .progress-bar {
    box-shadow: var(--progress-bar-box-shadow, 0 10px 40px -10px #fff);
    border-radius: var(--progress-bar-border-radius, 100px);
    background: var(--progress-bar-fill-color, #000000);
    height: var(--progress-bar-height, 4px);
    width: 0%;
    transition: width 0.25s;
  }

  circle {
    stroke: var(--progress-radial-fill-color, black);
    stroke-width: 6;  /* Thickness of the circle */
    fill: transparent; /* Make inside of the circle see-through */

    /* Animation */
    transition: 0.35s;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
  }

  #percentage-type {
    font-size: inherit;
    margin: 0 0 1em;
  }
</style>

<slot></slot>

<p id="percentage-type"></p>
<div class="bar-type">
  <div role="progressbar" aria-valuemin="0" aria-valuemax="100" class="progress-bar" id="progress-bar" tabindex="0"></div>
</div>
<div class="radial-type">
  <svg
    width="120"
    height="120">
    <!-- To prevent overflow of the SVG wrapper, radius must be  (svgWidth / 2) - (circleStrokeWidth * 2)
      or use overflow: visible on the svg.-->
    <circle
      r="52"
      cx="60"
      cy="60"
    />
  <svg>
</div>
`;var y,C,N=class extends a.HTMLElement{constructor(){var r,s,n,p;super();l(this,y);l(this,C);this.onUploadStart=()=>{var e;(e=this.progressBar)==null||e.focus(),this.toggleAttribute("upload-in-progress",!0)};this.onProgress=e=>{var s;let r=e.detail;switch((s=this.progressBar)==null||s.setAttribute("aria-valuenow",`${Math.floor(r)}`),this.getAttribute("type")){case L.BAR:{this.progressBar&&(this.progressBar.style.width=`${r}%`);break}case L.RADIAL:{if(this.svgCircle){let n=this.getCircumference()-r/100*this.getCircumference();this.svgCircle.style.strokeDashoffset=n.toString()}break}case L.PERCENTAGE:{this.uploadPercentage&&(this.uploadPercentage.innerHTML=de(r));break}}};this.onSuccess=()=>{this.toggleAttribute("upload-in-progress",!1),this.toggleAttribute("upload-complete",!0)};this.onReset=()=>{this.toggleAttribute("upload-in-progress",!1),this.uploadPercentage&&(this.uploadPercentage.innerHTML=""),this.svgCircle&&(this.svgCircle.style.strokeDashoffset=`${this.getCircumference()}`)};this.attachShadow({mode:"open"}).appendChild(pe.content.cloneNode(!0)),this.svgCircle=(r=this.shadowRoot)==null?void 0:r.querySelector("circle"),this.progressBar=(s=this.shadowRoot)==null?void 0:s.getElementById("progress-bar"),this.uploadPercentage=(n=this.shadowRoot)==null?void 0:n.getElementById("percentage-type"),(p=this.progressBar)==null||p.setAttribute("aria-description",we)}connectedCallback(){if(this.setDefaultType(),u(this,y,f(this)),u(this,C,new AbortController),o(this,y)){let e={signal:o(this,C).signal};o(this,y).addEventListener("uploadstart",this.onUploadStart,e),o(this,y).addEventListener("reset",this.onReset),o(this,y).addEventListener("progress",this.onProgress),o(this,y).addEventListener("success",this.onSuccess),this.toggleAttribute("upload-in-progress",o(this,y).hasAttribute("upload-in-progress")),this.toggleAttribute("upload-complete",o(this,y).hasAttribute("upload-complete"))}}disconnectedCallback(){var e;(e=o(this,C))==null||e.abort()}getRadius(){var e;return Number((e=this.svgCircle)==null?void 0:e.getAttribute("r"))}getCircumference(){return this.getRadius()*2*Math.PI}setDefaultType(){let e=this.getAttribute("type");e||this.setAttribute("type",L.BAR),e===L.RADIAL&&this.svgCircle&&(this.svgCircle.style.strokeDasharray=`${this.getCircumference()} ${this.getCircumference()}`,this.svgCircle.style.strokeDashoffset=`${this.getCircumference()}`)}};y=new WeakMap,C=new WeakMap;a.customElements.get("mux-uploader-progress")||a.customElements.define("mux-uploader-progress",N);var Pe=N;var ce=h.createElement("template");ce.innerHTML=`
<style>

:host([upload-error]) {
  color: #e22c3e;
}
</style>

<span id="status-message" role="status" aria-live="polite"></span>
`;var m,U,_=class extends a.HTMLElement{constructor(){var r;super();l(this,m);l(this,U);this.clearStatusMessage=()=>{this.toggleAttribute("upload-error",!1),this.statusMessage&&(this.statusMessage.innerHTML="")};this.onUploadError=e=>{this.toggleAttribute("upload-error",!0),this.statusMessage&&(this.statusMessage.innerHTML=e.detail.message)};this.onSuccess=()=>{var s;this.toggleAttribute("upload-error",!1);let e=(s=o(this,m))==null?void 0:s.locale,r=c("Upload complete!",e);this.statusMessage&&(this.statusMessage.innerHTML=r),console.info(r)};this.onOffline=()=>{this.toggleAttribute("upload-error",!1);let e="Currently offline. Upload will resume automatically when online.";this.statusMessage&&(this.statusMessage.innerHTML=e)};this.attachShadow({mode:"open"}).appendChild(ce.content.cloneNode(!0)),this.statusMessage=(r=this.shadowRoot)==null?void 0:r.getElementById("status-message")}connectedCallback(){if(u(this,m,f(this)),u(this,U,new AbortController),o(this,m)){let e={signal:o(this,U).signal};o(this,m).addEventListener("reset",this.clearStatusMessage,e),o(this,m).addEventListener("uploaderror",this.onUploadError,e),o(this,m).addEventListener("success",this.onSuccess,e),o(this,m).addEventListener("uploadstart",this.clearStatusMessage,e),o(this,m).addEventListener("offline",this.onOffline,e),o(this,m).addEventListener("online",this.clearStatusMessage,e),this.toggleAttribute("upload-in-progress",o(this,m).hasAttribute("upload-in-progress")),this.toggleAttribute("upload-complete",o(this,m).hasAttribute("upload-complete")),this.toggleAttribute("upload-error",o(this,m).hasAttribute("upload-error")),o(this,m).addEventListener("localechange",()=>{var r,s,n;if((r=this.statusMessage)!=null&&r.textContent&&((s=o(this,m))!=null&&s.hasAttribute("upload-complete"))){let p=(n=o(this,m))==null?void 0:n.locale;this.statusMessage.innerHTML=c("Upload complete!",p)}},e)}}disconnectedCallback(){var e;(e=o(this,U))==null||e.abort()}};m=new WeakMap,U=new WeakMap;a.customElements.get("mux-uploader-status")||a.customElements.define("mux-uploader-status",_);var Se=_;var he=h.createElement("template");he.innerHTML=`
<style>
  #retry-button {
    color: #e22c3e;
    text-decoration-line: underline;
    cursor: pointer;
    position: relative;
    display: none;
  }

  :host([upload-error]) #retry-button {
    display: inline-block;
  }
</style>

<span id="retry-button" role="button" tabindex="0">Try again</span>
`;var v,R,I=class extends a.HTMLElement{constructor(){var r;super();l(this,v);l(this,R);this.handleKeyup=e=>{let r=["Enter"," "],{key:s}=e;r.includes(s)&&this.triggerReset()};this.triggerReset=()=>{var e;(e=o(this,v))==null||e.dispatchEvent(new CustomEvent("reset"))};this.attachShadow({mode:"open"}).appendChild(he.content.cloneNode(!0)),this.retryButton=(r=this.shadowRoot)==null?void 0:r.getElementById("retry-button")}connectedCallback(){var e,r;if(u(this,v,f(this)),u(this,R,new AbortController),o(this,v)){let s={signal:o(this,R).signal};o(this,v).addEventListener("uploaderror",()=>this.toggleAttribute("upload-error",!0)),o(this,v).addEventListener("reset",()=>this.toggleAttribute("upload-error",!1)),(e=this.retryButton)==null||e.addEventListener("click",this.triggerReset,s),(r=this.retryButton)==null||r.addEventListener("keyup",this.handleKeyup,s),this.toggleAttribute("upload-error",o(this,v).hasAttribute("upload-error")),o(this,v).addEventListener("localechange",()=>this.updateText(),s),this.updateText()}}disconnectedCallback(){var e;(e=o(this,R))==null||e.abort()}updateText(){var r;let e=(r=o(this,v))==null?void 0:r.locale;this.retryButton&&(this.retryButton.textContent=c("Retry",e))}};v=new WeakMap,R=new WeakMap;a.customElements.get("mux-uploader-retry")||a.customElements.define("mux-uploader-retry",I);var De=I;var me=h.createElement("template");me.innerHTML=`
<style>
#pause-button {
  cursor: pointer;
  line-height: 16px;
  background: #fff;
  border: 1px solid #000;
  color: #000000;
  padding: 16px 24px;
  border-radius: 4px;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  font-family: inherit;
  font-size: inherit;
  position: relative;
  display: none;
}

#pause-button:hover:not(:disabled) {
  color: #fff;
  background: #404040;
}

#pause-button:active {
  color: #fff;
  background: #000;
}

#pause-button:disabled {
  cursor: not-allowed;
}

:host([upload-in-progress]:not([upload-error], [upload-complete])) #pause-button {
  display: initial;
}
</style>

<button id="pause-button">Pause</span>
`;var d,w,O=class extends a.HTMLElement{constructor(){super();l(this,d);l(this,w);this.triggerPause=()=>{if(!o(this,d)){console.warn("pausing before a mux-uploader element is associated is unsupported!");return}this.pauseButton.disabled||(o(this,d).paused=!o(this,d).paused)};this.attachShadow({mode:"open"}).appendChild(me.content.cloneNode(!0))}connectedCallback(){if(u(this,d,f(this)),u(this,w,new AbortController),o(this,d)){let e={signal:o(this,w).signal};o(this,d).addEventListener("uploadstart",()=>this.toggleAttribute("upload-in-progress",!0),e),o(this,d).addEventListener("uploaderror",()=>{this.toggleAttribute("upload-error",!0),this.toggleAttribute("upload-complete",!1),this.toggleAttribute("upload-in-progress",!1)}),o(this,d).addEventListener("success",()=>{this.toggleAttribute("upload-complete",!0),this.toggleAttribute("upload-error",!1),this.toggleAttribute("upload-in-progress",!1)}),o(this,d).addEventListener("reset",()=>{this.toggleAttribute("upload-error",!1),this.toggleAttribute("upload-in-progress",!1),this.toggleAttribute("upload-complete",!1)}),o(this,d).addEventListener("pausedchange",()=>{var s;if(this.pauseButton.disabled=!1,!o(this,d))return;let r=(s=o(this,d).paused)!=null?s:!1;this.updateText(),r&&(this.pauseButton.disabled=!0,o(this,d).addEventListener("chunksuccess",()=>{this.updateText(),this.pauseButton.disabled=!1},{once:!0}))}),this.pauseButton.addEventListener("click",this.triggerPause,e),this.toggleAttribute("upload-in-progress",o(this,d).hasAttribute("upload-in-progress")),this.toggleAttribute("upload-complete",o(this,d).hasAttribute("upload-complete")),this.toggleAttribute("upload-error",o(this,d).hasAttribute("upload-error")),o(this,d).addEventListener("localechange",()=>this.updateText(),e),this.updateText()}}disconnectedCallback(){var e;(e=o(this,w))==null||e.abort()}get pauseButton(){var e;return(e=this.shadowRoot)==null?void 0:e.getElementById("pause-button")}updateText(){var n,p,E,T;let e=(n=o(this,d))==null?void 0:n.locale,r=(E=(p=o(this,d))==null?void 0:p.paused)!=null?E:!1;((T=this.pauseButton)==null?void 0:T.disabled)&&r?this.pauseButton.innerHTML=c("Pausing...",e):this.pauseButton.innerHTML=r?c("Resume",e):c("Pause",e)}};d=new WeakMap,w=new WeakMap;a.customElements.get("mux-uploader-pause")||a.customElements.define("mux-uploader-pause",O);var He=O;var Y=`
  <style>
  #file-select {
    cursor: pointer;
    line-height: 16px;
    background: #fff;
    border: 1px solid #000;
    color: #000000;
    padding: 16px 24px;
    border-radius: 4px;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
    font-family: inherit;
    font-size: inherit;
    position: relative;
  }

  #file-select:hover {
    color: #fff;
    background: #404040;
  }

  #file-select:active {
    color: #fff;
    background: #000;
  }

  </style>

  <button id="file-select" type="button" part="file-select-button">Upload a video</button>
`,ge=h.createElement("template");ge.innerHTML=`
  <style>
    :host { display: inline-block; }

    :host([file-ready]) > slot  {
      display: none;
    }
  </style>

  <slot>
    ${Y}
  </slot>
`;var x,b,P,$=class extends a.HTMLElement{constructor(){var r,s,n;super();l(this,x);l(this,b);l(this,P);this.attachShadow({mode:"open"}).appendChild(ge.content.cloneNode(!0)),this.handleFilePickerElClick=this.handleFilePickerElClick.bind(this),this.filePickerEl=(r=this.shadowRoot)==null?void 0:r.querySelector("button"),(n=(s=this.shadowRoot)==null?void 0:s.querySelector("slot"))==null||n.addEventListener("slotchange",p=>{let E=p.currentTarget;this.filePickerEl=E.assignedElements({flatten:!0}).filter(T=>!["STYLE"].includes(T.nodeName))[0],this.updateText()})}connectedCallback(){if(u(this,b,f(this)),u(this,P,new AbortController),o(this,b)){let e={signal:o(this,P).signal};o(this,b).addEventListener("file-ready",()=>{this.toggleAttribute("file-ready",!0)},e),o(this,b).addEventListener("uploadstart",()=>this.toggleAttribute("upload-in-progress",!0),e),o(this,b).addEventListener("success",()=>{this.toggleAttribute("upload-in-progress",!1),this.toggleAttribute("upload-complete",!0)},e),o(this,b).addEventListener("reset",()=>{this.toggleAttribute("file-ready",!1)},e),this.toggleAttribute("upload-in-progress",o(this,b).hasAttribute("upload-in-progress")),this.toggleAttribute("upload-complete",o(this,b).hasAttribute("upload-complete")),this.toggleAttribute("file-ready",o(this,b).hasAttribute("file-ready")),o(this,b).addEventListener("localechange",()=>this.updateText(),e),this.updateText()}}disconnectedCallback(){var e;(e=o(this,P))==null||e.abort()}get filePickerEl(){return o(this,x)}set filePickerEl(e){e!==o(this,x)&&(o(this,x)&&o(this,x).removeEventListener("click",this.handleFilePickerElClick),u(this,x,e),o(this,x)&&o(this,x).addEventListener("click",this.handleFilePickerElClick))}handleFilePickerElClick(){var s,n;let e=this.getAttribute("mux-uploader"),r=e?h.getElementById(e):this.getRootNode().host;(n=(s=r==null?void 0:r.shadowRoot)==null?void 0:s.querySelector("#hidden-file-input"))==null||n.click()}updateText(){var n,p;let e=(n=o(this,b))==null?void 0:n.locale,r=c("Upload a video",e),s=(p=this.shadowRoot)==null?void 0:p.querySelector("#file-select");s&&(s.textContent=r)}};x=new WeakMap,b=new WeakMap,P=new WeakMap;a.customElements.get("mux-uploader-file-select")||a.customElements.define("mux-uploader-file-select",$);var ze=$;function K(i,t){return i?"":t}var Be=(i,t)=>{if(t==null||t===!1)return"";let e=t===!0?"":`${t}`;return`${i}="${e}"`};function Z(i){let{noDrop:t,noProgress:e,noStatus:r,noRetry:s,pausable:n,type:p}=i,E=t?"div":'mux-uploader-drop overlay part="drop"',T=K(e,`
      <mux-uploader-progress part="progress progress-percentage" type="percentage"></mux-uploader-progress>
      <mux-uploader-progress part="progress progress-bar" ${Be("type",p)}></mux-uploader-progress>
    `),ye=K(r,'<mux-uploader-status part="status"></mux-uploader-status>'),ve=K(s,'<mux-uploader-retry part="retry"></mux-uploader-retry>'),xe=K(!n,'<mux-uploader-pause part="pause"></mux-uploader-pause>');return h.createRange().createContextualFragment(`
    <${E}>
      ${ye}
      ${ve}
      ${xe}

      <mux-uploader-file-select part="file-select">
        <slot name="file-select">
          ${Y}
        </slot>
      </mux-uploader-file-select>

      ${T}
    </${E}>
  `)}var fe=h.createElement("template");fe.innerHTML=`
<style>
  :host {
    display: flex;
    flex-direction: column;
  }

  mux-uploader-drop {
    flex-grow: 1;
  }

  input[type="file"] {
    display: none;
  }
</style>

<input id="hidden-file-input" type="file" accept="video/*, audio/*" />
<mux-uploader-sr-text></mux-uploader-sr-text>
`;var B=class extends a.HTMLElement{static get observedAttributes(){return["pausable","type","no-drop","no-progress","no-status","no-retry","max-file-size","use-large-file-workaround","locale"]}constructor(){var e;super(),this.attachShadow({mode:"open"}).appendChild(fe.content.cloneNode(!0)),this.updateLayout(),(e=this.hiddenFileInput)==null||e.addEventListener("change",()=>{var s,n;let r=(n=(s=this.hiddenFileInput)==null?void 0:s.files)==null?void 0:n[0];this.toggleAttribute("file-ready",!!r),r&&this.dispatchEvent(new CustomEvent("file-ready",{composed:!0,bubbles:!0,detail:r}))})}connectedCallback(){this.addEventListener("file-ready",this.handleUpload),this.addEventListener("reset",this.resetState)}disconnectedCallback(){this.removeEventListener("file-ready",this.handleUpload,!1),this.removeEventListener("reset",this.resetState)}attributeChangedCallback(t,e,r){t==="locale"&&e!==r?this.dispatchEvent(new CustomEvent("localechange",{detail:{locale:r}})):t!=="locale"&&this.updateLayout()}get hiddenFileInput(){var t;return(t=this.shadowRoot)==null?void 0:t.querySelector("#hidden-file-input")}get endpoint(){var t;return(t=this.getAttribute("endpoint"))!=null?t:this._endpoint}set endpoint(t){t!==this.endpoint&&(typeof t=="string"?this.setAttribute("endpoint",t):t==null&&this.removeAttribute("endpoint"),this._endpoint=t)}get type(){var t;return(t=this.getAttribute("type"))!=null?t:void 0}set type(t){t!=this.type&&(t?this.setAttribute("type",t):this.removeAttribute("type"))}get noDrop(){return this.hasAttribute("no-drop")}set noDrop(t){this.toggleAttribute("no-drop",!!t)}get noProgress(){return this.hasAttribute("no-progress")}set noProgress(t){this.toggleAttribute("no-progress",!!t)}get noStatus(){return this.hasAttribute("no-status")}set noStatus(t){this.toggleAttribute("no-status",!!t)}get noRetry(){return this.hasAttribute("no-retry")}set noRetry(t){this.toggleAttribute("no-retry",!!t)}get pausable(){return this.hasAttribute("pausable")}set pausable(t){this.toggleAttribute("pausable",!!t)}get dynamicChunkSize(){return this.hasAttribute("dynamic-chunk-size")}set dynamicChunkSize(t){t!==this.hasAttribute("dynamic-chunk-size")&&(t?this.setAttribute("dynamic-chunk-size",""):this.removeAttribute("dynamic-chunk-size"))}get useLargeFileWorkaround(){return this.hasAttribute("use-large-file-workaround")}set useLargeFileWorkaround(t){t!=this.useLargeFileWorkaround&&this.toggleAttribute("use-large-file-workaround",!!t)}get maxFileSize(){let t=this.getAttribute("max-file-size");return t!==null?parseInt(t):void 0}set maxFileSize(t){t?this.setAttribute("max-file-size",t.toString()):this.removeAttribute("max-file-size")}get chunkSize(){let t=this.getAttribute("chunk-size");return t!==null?parseInt(t):void 0}set chunkSize(t){t?this.setAttribute("chunk-size",t.toString()):this.removeAttribute("chunk-size")}get locale(){return this.getAttribute("locale")}set locale(t){t!==this.locale&&(t?this.setAttribute("locale",t):this.removeAttribute("locale"))}get upload(){return this._upload}get paused(){var t,e;return(e=(t=this.upload)==null?void 0:t.paused)!=null?e:!1}set paused(t){if(!this.upload){console.warn("Pausing before an upload has begun is unsupported");return}let e=!!t;e!==this.paused&&(e?this.upload.pause():this.upload.resume(),this.toggleAttribute("paused",e),this.dispatchEvent(new CustomEvent("pausedchange",{detail:e})))}updateLayout(){var r,s;let t=(r=this.shadowRoot)==null?void 0:r.querySelector("mux-uploader-drop, div");t&&t.remove();let e=Z(this);(s=this.shadowRoot)==null||s.appendChild(e)}setError(t){this.setAttribute("upload-error",""),this.dispatchEvent(new CustomEvent("uploaderror",{detail:{message:t}}))}resetState(){this.removeAttribute("upload-error"),this.removeAttribute("upload-in-progress"),this.removeAttribute("upload-complete"),this.hiddenFileInput.value=""}handleUpload(t){let e=this.endpoint,r=this.dynamicChunkSize;if(e)this.removeAttribute("upload-error");else{this.setError(c("No url or endpoint specified - cannot handle upload",this.locale));return}try{let s=Fe.createUpload({endpoint:e,dynamicChunkSize:r,file:t.detail,maxFileSize:this.maxFileSize,chunkSize:this.chunkSize,useLargeFileWorkaround:this.useLargeFileWorkaround});this._upload=s,this.dispatchEvent(new CustomEvent("uploadstart",{detail:{file:s.file,chunkSize:s.chunkSize}})),this.setAttribute("upload-in-progress",""),s.offline&&this.dispatchEvent(new CustomEvent("offline")),s.on("attempt",n=>{this.dispatchEvent(new CustomEvent("chunkattempt",n))}),s.on("chunkSuccess",n=>{this.dispatchEvent(new CustomEvent("chunksuccess",n))}),s.on("error",n=>{this.setAttribute("upload-error",""),console.error("error handler",n.detail.message),this.dispatchEvent(new CustomEvent("uploaderror",n))}),s.on("progress",n=>{this.dispatchEvent(new CustomEvent("progress",n))}),s.on("success",n=>{this.removeAttribute("upload-in-progress"),this.setAttribute("upload-complete",""),this.dispatchEvent(new CustomEvent("success",n))}),s.on("offline",n=>{this.dispatchEvent(new CustomEvent("offline",n))}),s.on("online",n=>{this.dispatchEvent(new CustomEvent("online",n))})}catch(s){s instanceof Error&&this.setError(s.message)}}};a.customElements.get("mux-uploader")||(a.customElements.define("mux-uploader",B),a.MuxUploaderElement=B);var be=B;var Ee=h.createElement("template");Ee.innerHTML=`
<style>

.sr-only {
  position:absolute;
  left:-10000px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}
</style>

<div class="sr-only" id="sr-only" aria-live="polite"></div>
`;var A,j=class extends a.HTMLElement{constructor(){var r;super();l(this,A);this.attachShadow({mode:"open"}).appendChild(Ee.content.cloneNode(!0)),this.srOnlyText=(r=this.shadowRoot)==null?void 0:r.getElementById("sr-only")}connectedCallback(){u(this,A,f(this)),o(this,A)&&(o(this,A).addEventListener("success",this.updateText.bind(this)),o(this,A).addEventListener("localechange",()=>{var e;(e=this.srOnlyText)!=null&&e.textContent&&this.updateText()}))}disconnectedCallback(){o(this,A)&&o(this,A).removeEventListener("success",this.updateText.bind(this))}updateText(){var e;if(this.srOnlyText){let r=(e=o(this,A))==null?void 0:e.locale;this.srOnlyText.textContent=c("Upload complete!",r)}}};A=new WeakMap;a.customElements.get("mux-uploader-sr-text")||a.customElements.define("mux-uploader-sr-text",j);var Ne=j;var po=be;export{Re as MuxUploaderDropElement,ze as MuxUploaderFileSelectElement,He as MuxUploaderPauseElement,Pe as MuxUploaderProgressElement,De as MuxUploaderRetryElement,Ne as MuxUploaderSrTextElement,Se as MuxUploaderStatusElement,q as constants,po as default,c as t};
//# sourceMappingURL=index.mjs.map