All files / picobel/build picobel-component.js

1
2
32x
 
var Q=Object.defineProperty;var X=(e,t)=>{for(var r in t)Q(e,r,{get:t[r],enumerable:!0})};var Y=(e="default")=>{switch(e){case"itunes":return["playPause",[["title","artist"],["timer","progress","duration"]]];case"default":default:return["playPause",["mute","volume"],["title","artist"],["timer","progress","duration"]]}},A=(e={})=>{let t={context:document,theme:"default",preload:!1},{components:r,...o}=e,s=Y(e.theme),i={...t,components:s,...o};return r&&Array.isArray(r)&&(i.components=r),i};var g=e=>{let t=Math.floor(e/3600),r=Math.floor(e%3600/60).toFixed(0).toString(),o=Math.floor(e%3600%60).toFixed(0).toString().padStart(2,"0"),s=`${r}:${o}`;return t>0&&(s=`${t}:${r.padStart(2,"0")}:${o}`),s},T=e=>e.replace(/^.*[\\/]/,"").split(".")[1],$=e=>e.replace(/^.*[\\/]/,"").split(".")[0];var P=e=>[...e.getElementsByTagName("audio")].map((o,s)=>Object.assign(o,{key:s})),C=(e,t,r)=>[...`picobel loading picobel--index-${e} ${t}`.trim().split(" "),r],M=e=>e.map((t,r)=>(t.key=r,t.mute=!1,t.tmpVolume=1,t)),S=e=>{let t=e.currentSrc,r=T(t),o=$(t),s=e.title&&e.title!==""?e.title:`${o}.${r}`,i=e.dataset?.artist?e.dataset.artist:!1;return{url:t,fileType:r,fileName:o,title:s,artist:i}};var f={};X(f,{artist:()=>te,duration:()=>se,mute:()=>ne,playPause:()=>Z,progress:()=>oe,timer:()=>re,title:()=>ee,volume:()=>ie});var _=({namespace:e="picobel",min:t=0,max:r=100,value:o=0,step:s=!1,index:i=0,label:a="slider"})=>{let l=n("div",e),p=n("div",`${e}-slider__wrapper`),c=n("div",`${e}-slider__replacement`),K=n("div",`${e}-slider__background`);c.appendChild(K);let J=n("div",`${e}-slider__indicator`);c.appendChild(J);let z=n("div",`${e}-slider__playhead`);c.appendChild(z),p.appendChild(c);let E=`${e}-slider__range--${i}`,u=n("input",`${e}-slider__range`);u.setAttribute("id",E),u.setAttribute("type","range"),u.setAttribute("min",t.toString()),u.setAttribute("max",r.toString()),u.setAttribute("value",o.toString()),s&&u.setAttribute("step",s.toString()),p.appendChild(u);let d=n("label",`${e}-label`);return typeof a=="string"?d.innerHTML=a:d.appendChild(a),d.setAttribute("for",E),l.appendChild(d),l.appendChild(p),l};var Z=e=>{let t=n("button",`${e}__play-pause`);t.setAttribute("type","button");let r=n("span",`${e}__play-pause__text`);return r.innerHTML="Play",t.appendChild(r),t},ee=(e,t)=>{let r=n("span",`${e}__title`);return r.innerHTML="File "+(t+1),r},te=e=>n("span",`${e}__artist`),re=e=>{let t=n("span",`${e}__timer`);return t.innerHTML="0:00",t},se=e=>{let t=n("span",`${e}__duration`);return t.innerHTML="-:--",t},oe=(e,t)=>{let r=n("span",`${e}__progress-label-inner`);return r.innerHTML="Progress",_({namespace:`${e}__progress`,min:0,max:100,value:0,index:t,label:r})},ne=e=>{let t=n("button",`${e}__mute`);return t.setAttribute("type","button"),t.innerHTML="Mute",t},ie=(e,t)=>{let r=n("span",`${e}__volume-label-inner`),o=n("span",`${e}__volume-label-key`);o.innerHTML="Volume ",r.appendChild(o);let s=n("span",`${e}__volume-label-value`);return s.innerHTML="10",r.appendChild(s),_({namespace:`${e}__volume`,min:0,max:1,value:1,step:.1,index:t,label:r})};var n=(e="div",t="")=>{let r=document.createElement(e);return r.className=t,r},b=({key:e,container:t,components:r,namespace:o})=>(r.forEach(s=>{if(typeof s=="string"&&f[s]){let i=f[s](o,e);t.appendChild(i);return}Eif(Array.isArray(s)&&s.length){let i=s.flat().join("-"),a=n("div",`${o}__wrapper--${i}`),l=b({key:e,container:a,components:s,namespace:o});t.appendChild(l)}}),t);var k=e=>{let t=g(e.duration);return e.elements.durationDisplay&&(e.elements.durationDisplay.innerHTML=t),e},w=(e,t)=>(e.artist&&t.artistDisplay&&(t.artistDisplay.innerHTML=e.artist),t.titleDisplay&&(t.titleDisplay.innerHTML=e.title),t),H=(e,t,r)=>e.map(s=>{let i=n("div"),a=C(s.key,s.className,r);i.classList.add(...a),i.setAttribute("data-picobel-index",s.key.toString());let l=n("div",`${r}__loader`);return i.appendChild(l),b({key:s.key,container:i,components:t,namespace:r})}),N=(e,t,r)=>e.map(o=>{let s=t.querySelector(`[data-picobel-index='${o.key}']`);return o.elements={wrapper:s,playPauseButton:s.querySelector(`.${r}__play-pause`),playPauseButtonText:s.querySelector(`.${r}__play-pause__text`),muteButton:s.querySelector(`.${r}__mute`),playTimer:s.querySelector(`.${r}__timer`),durationDisplay:s.querySelector(`.${r}__duration`),titleDisplay:s.querySelector(`.${r}__title`),artistDisplay:s.querySelector(`.${r}__artist`),progressWrapper:s.querySelector(`.${r}__progress-slider__replacement`),progressRange:s.querySelector(`.${r}__progress-slider__range`),progressPlayhead:s.querySelector(`.${r}__progress-slider__playhead`),progressBackground:s.querySelector(`.${r}__progress-slider__background`),progressIndicator:s.querySelector(`.${r}__progress-slider__indicator`),volumeWrapper:s.querySelector(`.${r}__volume-slider__replacement`),volumeControl:s.querySelector(`.${r}__volume-slider__range`),volumeDisplay:s.querySelector(`.${r}__volume-label-value`),volumeIndicator:s.querySelector(`.${r}__volume-slider__indicator`),volumePlayhead:s.querySelector(`.${r}__volume-slider__playhead`)},o});var le=e=>e.forEach(t=>{F(t)}),B=(e,t)=>{e.paused||e.currentTime===0?(le(t),ae(e)):F(e)},ae=e=>{e.play();let t=e.elements.playPauseButton,r=e.elements.playPauseButtonText;t.classList.remove("paused"),r.innerHTML="Pause",t.classList.add("playing")},F=e=>{e.pause();let t=e.elements.playPauseButton,r=e.elements.playPauseButtonText;t.classList.remove("playing"),r.innerHTML="Play",t.classList.add("paused")},ue=e=>{e.pause();let t=e.elements.playPauseButton,r=e.elements.playPauseButtonText;t.classList.remove("playing"),r.innerHTML="Play"},q=e=>D(e.srcElement),D=e=>{let t=e.currentTime,r=e.duration;if(e.elements.playTimer){let s=g(t);e.elements.playTimer.innerHTML=s}t>=r&&ue(e);let o=(t/r*100).toFixed(2);e.elements.progressRange&&(e.elements.progressRange.value=o,e.elements.progressIndicator.style.width=o+"%",e.elements.progressPlayhead.style.left=o+"%")},O=e=>{k(e),m(e)},m=e=>{e.elements.wrapper.classList.remove("loading");let t=S(e);w(t,e.elements)},R=e=>{e.elements.wrapper.classList.add("error"),e.elements.wrapper.classList.remove("loading"),e.elements.wrapper.innerHTML='<div class="error" style="display:flex;height: 100%;align-items:  center;justify-content: center;"><span class="error__icon"></span><span class="error__message">Error loading audio file</span></div>'},V=(e,t)=>{let s=(t.duration*(e.srcElement.value/100)).toFixed(2);t.currentTime=s,D(t)},v=(e,t)=>e.elements.progressWrapper.classList.toggle("focus",t),G=(e,t)=>{let r=e.srcElement.value;t.tmpVolume=t.volume,t.mute=!1,U(t),y(t,r)},x=(e,t)=>e.elements.volumeWrapper.classList.toggle("focus",t),y=(e,t)=>{let r=t*10,o=(t*100).toFixed(2);e.volume=t,e.elements.volumeDisplay&&(e.elements.volumeDisplay.innerHTML=r),e.elements.volumeControl&&(e.elements.volumeControl.value=t),e.elements.volumeIndicator&&(e.elements.volumeIndicator.style.width=o+"%"),e.elements.volumePlayhead&&(e.elements.volumePlayhead.style.left=o+"%")},I=e=>{e.mute=!e.mute,U(e)},U=e=>{let t=e.elements.muteButton;e.mute?(e.tmpVolume=e.volume,y(e,0),t.classList.add("muted"),t.classList.remove("unmuted"),t.innerHTML="Unmute"):(typeof e.tmpVolume<"u"&&e.tmpVolume>0?y(e,e.tmpVolume):y(e,1),t.classList.remove("muted"),t.classList.add("unmuted"),t.innerHTML="Mute")},pe=(e,t)=>{let r=e.duration,o=(t/r*100).toFixed(2);e.elements.progressBackground&&(e.elements.progressBackground.style.width=o+"%")},h=e=>{if(e.buffered.length>0){let t=e.buffered.end(e.buffered.length-1),r=e.duration;pe(e,t),t>=r&&e.removeEventListener("progress",()=>h(e))}};var W=e=>e.map(t=>(t.addEventListener("progress",()=>h(t),!1),t.addEventListener("timeupdate",q,!1),t.addEventListener("canplaythrough",()=>O(t),!1),t.addEventListener("loadedmetadata",()=>m(t),!1),t.addEventListener("error",()=>R(t),!1),t.elements?.playPauseButton&&t.elements?.playPauseButton.addEventListener("click",()=>B(t,e),!1),t.elements?.progressRange&&t.elements?.progressRange.addEventListener("input",r=>V(r,t),!1),t.elements?.progressRange&&t.elements?.progressRange.addEventListener("focus",()=>v(t,!0),!1),t.elements?.progressRange&&t.elements?.progressRange.addEventListener("blur",()=>v(t,!1),!1),t.elements?.volumeControl&&t.elements?.volumeControl.addEventListener("input",r=>G(r,t),!1),t.elements?.volumeControl&&t.elements?.volumeControl.addEventListener("focus",()=>x(t,!0),!1),t.elements?.volumeControl&&t.elements?.volumeControl.addEventListener("blur",()=>x(t,!1),!1),t.elements?.muteButton&&t.elements?.muteButton.addEventListener("click",()=>I(t),!1),t));var j=(e={})=>{let t=A(e),r={audioNodes:[],theme:t.theme,components:t.components},o=(i,a)=>{i.map((l,p)=>{l.parentNode.replaceChild(a[p],l)})};r.audioNodes=P(t.context),r.audioNodes=M(r.audioNodes);let s=H(r.audioNodes,r.components,r.theme);return o(r.audioNodes,s),r.audioNodes=N(r.audioNodes,t.context,r.theme),r.audioNodes=W(r.audioNodes),r.audioNodes.forEach(i=>{i.readyState>=1&&m(i)}),{state:r}};var L=class extends HTMLElement{constructor(){super()}connectedCallback(){let t=this.classList[0]||"default",o={theme:this.getAttribute("data-theme")||t,context:this},s=this.getAttribute("data-components");s&&(o.components=JSON.parse(s)),j(o)}};typeof window<"u"&&"customElements"in window&&window.customElements.define("picobel-player",L);