65 lines
58 KiB
JavaScript
65 lines
58 KiB
JavaScript
|
|
import{store as Pe,getContext as N,getElement as Ae}from"@wordpress/interactivity";var Wt={grad:.9,turn:360,rad:360/(2*Math.PI)},_=function(e){return typeof e=="string"?e.length>0:typeof e=="number"},b=function(e,t,i){return t===void 0&&(t=0),i===void 0&&(i=Math.pow(10,t)),Math.round(i*e)/i+0},T=function(e,t,i){return t===void 0&&(t=0),i===void 0&&(i=1),e>i?i:e>t?e:t},nt=function(e){return(e=isFinite(e)?e%360:0)>0?e:e+360},Z=function(e){return{r:T(e.r,0,255),g:T(e.g,0,255),b:T(e.b,0,255),a:T(e.a)}},U=function(e){return{r:b(e.r),g:b(e.g),b:b(e.b),a:b(e.a,3)}},$t=/^#([0-9a-f]{3,8})$/i,O=function(e){var t=e.toString(16);return t.length<2?"0"+t:t},lt=function(e){var t=e.r,i=e.g,a=e.b,r=e.a,s=Math.max(t,i,a),o=s-Math.min(t,i,a),n=o?s===t?(i-a)/o:s===i?2+(a-t)/o:4+(t-i)/o:0;return{h:60*(n<0?n+6:n),s:s?o/s*100:0,v:s/255*100,a:r}},ht=function(e){var t=e.h,i=e.s,a=e.v,r=e.a;t=t/360*6,i/=100,a/=100;var s=Math.floor(t),o=a*(1-i),n=a*(1-(t-s)*i),l=a*(1-(1-t+s)*i),h=s%6;return{r:255*[a,n,o,o,l,a][h],g:255*[l,a,a,n,o,o][h],b:255*[o,o,l,a,a,n][h],a:r}},tt=function(e){return{h:nt(e.h),s:T(e.s,0,100),l:T(e.l,0,100),a:T(e.a)}},et=function(e){return{h:b(e.h),s:b(e.s),l:b(e.l),a:b(e.a,3)}},it=function(e){return ht((i=(t=e).s,{h:t.h,s:(i*=((a=t.l)<50?a:100-a)/100)>0?2*i/(a+i)*100:0,v:a+i,a:t.a}));var t,i,a},B=function(e){return{h:(t=lt(e)).h,s:(r=(200-(i=t.s))*(a=t.v)/100)>0&&r<200?i*a/100/(r<=100?r:200-r)*100:0,l:r/2,a:t.a};var t,i,a,r},Nt=/^hsla?\(\s*([+-]?\d*\.?\d+)(deg|rad|grad|turn)?\s*,\s*([+-]?\d*\.?\d+)%\s*,\s*([+-]?\d*\.?\d+)%\s*(?:,\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i,qt=/^hsla?\(\s*([+-]?\d*\.?\d+)(deg|rad|grad|turn)?\s+([+-]?\d*\.?\d+)%\s+([+-]?\d*\.?\d+)%\s*(?:\/\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i,Ot=/^rgba?\(\s*([+-]?\d*\.?\d+)(%)?\s*,\s*([+-]?\d*\.?\d+)(%)?\s*,\s*([+-]?\d*\.?\d+)(%)?\s*(?:,\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i,zt=/^rgba?\(\s*([+-]?\d*\.?\d+)(%)?\s+([+-]?\d*\.?\d+)(%)?\s+([+-]?\d*\.?\d+)(%)?\s*(?:\/\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i,at={string:[[function(e){var t=$t.exec(e);return t?(e=t[1]).length<=4?{r:parseInt(e[0]+e[0],16),g:parseInt(e[1]+e[1],16),b:parseInt(e[2]+e[2],16),a:e.length===4?b(parseInt(e[3]+e[3],16)/255,2):1}:e.length===6||e.length===8?{r:parseInt(e.substr(0,2),16),g:parseInt(e.substr(2,2),16),b:parseInt(e.substr(4,2),16),a:e.length===8?b(parseInt(e.substr(6,2),16)/255,2):1}:null:null},"hex"],[function(e){var t=Ot.exec(e)||zt.exec(e);return t?t[2]!==t[4]||t[4]!==t[6]?null:Z({r:Number(t[1])/(t[2]?100/255:1),g:Number(t[3])/(t[4]?100/255:1),b:Number(t[5])/(t[6]?100/255:1),a:t[7]===void 0?1:Number(t[7])/(t[8]?100:1)}):null},"rgb"],[function(e){var t=Nt.exec(e)||qt.exec(e);if(!t)return null;var i,a,r=tt({h:(i=t[1],a=t[2],a===void 0&&(a="deg"),Number(i)*(Wt[a]||1)),s:Number(t[3]),l:Number(t[4]),a:t[5]===void 0?1:Number(t[5])/(t[6]?100:1)});return it(r)},"hsl"]],object:[[function(e){var t=e.r,i=e.g,a=e.b,r=e.a,s=r===void 0?1:r;return _(t)&&_(i)&&_(a)?Z({r:Number(t),g:Number(i),b:Number(a),a:Number(s)}):null},"rgb"],[function(e){var t=e.h,i=e.s,a=e.l,r=e.a,s=r===void 0?1:r;if(!_(t)||!_(i)||!_(a))return null;var o=tt({h:Number(t),s:Number(i),l:Number(a),a:Number(s)});return it(o)},"hsl"],[function(e){var t=e.h,i=e.s,a=e.v,r=e.a,s=r===void 0?1:r;if(!_(t)||!_(i)||!_(a))return null;var o=(function(n){return{h:nt(n.h),s:T(n.s,0,100),v:T(n.v,0,100),a:T(n.a)}})({h:Number(t),s:Number(i),v:Number(a),a:Number(s)});return ht(o)},"hsv"]]},rt=function(e,t){for(var i=0;i<t.length;i++){var a=t[i][0](e);if(a)return[a,t[i][1]]}return[null,void 0]},Ft=function(e){return typeof e=="string"?rt(e.trim(),at.string):typeof e=="object"&&e!==null?rt(e,at.object):[null,void 0]};var j=function(e,t){var i=B(e);return{h:i.h,s:T(i.s+100*t,0,100),l:i.l,a:i.a}},G=function(e){return(299*e.r+587*e.g+114*e.b)/1e3/255},st=function(e,t){var i=B(e);return{h:i.h,s:i.s,l:T(i.l+100*t,0,100),a:i.a}},ot=(function(){function e(t){this.parsed=Ft(t)[0],this.rgba=this.parsed||{r:0,g:0,b:0,a:1}}return e.prototype.isValid=function(){return this.parsed!==null},e.prototype.brightness=function(){return b(G(this.rgba),2)},e.prototype.isDark=function(){return G(thi
|
||
|
|
<button class="waveform-btn${this.options.buttonStyle==="minimal"?" waveform-btn-minimal":""}${r?" waveform-btn-has-artwork":""}" aria-label="${L(this.options.playPauseLabel)}"${a}>
|
||
|
|
${s}
|
||
|
|
<span class="waveform-icon-play">${this.options.playIcon}</span>
|
||
|
|
<span class="waveform-icon-pause" style="display:none;">${this.options.pauseIcon}</span>
|
||
|
|
</button>
|
||
|
|
`:"",n=this.options.showInfo?`
|
||
|
|
<div class="waveform-info">
|
||
|
|
${this.options.artworkPosition!=="button"&&this.options.artwork?`
|
||
|
|
<img class="waveform-artwork" src="${L(this.options.artwork)}" alt="${L(this.options.artworkAlt)}" style="
|
||
|
|
width: 40px;
|
||
|
|
height: 40px;
|
||
|
|
border-radius: 4px;
|
||
|
|
object-fit: cover;
|
||
|
|
flex-shrink: 0;
|
||
|
|
">
|
||
|
|
`:""}
|
||
|
|
<div class="waveform-text">
|
||
|
|
<span class="waveform-title"></span>
|
||
|
|
${this.options.artist?`<span class="waveform-artist">${L(this.options.artist)}</span>`:""}
|
||
|
|
</div>
|
||
|
|
<div class="waveform-meta" style="display: flex; align-items: center; gap: 1rem;">
|
||
|
|
${this.options.showBPM?`
|
||
|
|
<span class="waveform-bpm" style="display: none;">
|
||
|
|
<span class="bpm-value">--</span> BPM
|
||
|
|
</span>
|
||
|
|
`:""}
|
||
|
|
${this.options.showPlaybackSpeed?`
|
||
|
|
<div class="waveform-speed">
|
||
|
|
<button class="speed-btn" aria-label="${L(this.options.speedLabel)}" aria-haspopup="menu" aria-expanded="false">
|
||
|
|
<span class="speed-value">1x</span>
|
||
|
|
</button>
|
||
|
|
<div class="speed-menu" role="menu" aria-label="${L(this.options.speedLabel)}" style="display: none;">
|
||
|
|
${this.options.playbackRates.map(l=>`<button class="speed-option" role="menuitemradio" tabindex="-1" aria-checked="false" data-rate="${l}">${l}x</button>`).join("")}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
`:""}
|
||
|
|
${this.options.showTime?`
|
||
|
|
<span class="waveform-time">
|
||
|
|
<span class="time-current">0:00</span> / <span class="time-total">0:00</span>
|
||
|
|
</span>
|
||
|
|
`:""}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
`:"";this.container.innerHTML=`
|
||
|
|
<div class="waveform-player-inner">
|
||
|
|
<div class="waveform-body">
|
||
|
|
<div class="waveform-track waveform-align-${t}">
|
||
|
|
${o}
|
||
|
|
|
||
|
|
<div class="waveform-container">
|
||
|
|
<canvas></canvas>
|
||
|
|
<div class="waveform-markers"></div>
|
||
|
|
<div class="waveform-loading" style="display:none;"></div>
|
||
|
|
<div class="waveform-error" style="display:none;" role="alert">
|
||
|
|
<span class="waveform-error-text">${L(this.options.errorText)}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
${n}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
`,this.playBtn=this.container.querySelector(".waveform-btn"),this.canvas=this.container.querySelector("canvas"),this.ctx=this.canvas.getContext("2d"),this.titleEl=this.container.querySelector(".waveform-title"),this.artistEl=this.container.querySelector(".waveform-artist"),this.artworkEl=this.container.querySelector(".waveform-artwork, .waveform-btn-artwork"),this.bindArtworkFallback(this.artworkEl),this.currentTimeEl=this.container.querySelector(".time-current"),this.totalTimeEl=this.container.querySelector(".time-total"),this.bpmEl=this.container.querySelector(".waveform-bpm"),this.bpmValueEl=this.container.querySelector(".bpm-value"),this.loadingEl=this.container.querySelector(".waveform-loading"),this.errorEl=this.container.querySelector(".waveform-error"),this.markersContainer=this.container.querySelector(".waveform-markers"),this.speedBtn=this.container.querySelector(".speed-btn"),this.speedMenu=this.container.querySelector(".speed-menu"),this.resizeCanvas(),this.updateBPMDisplay()}bindArtworkFallback(t){t&&t.addEventListener("error",()=>{t.src.startsWith("data:")||(t.src=he)},{signal:this._ac.signal})}createArtworkElement(){let t=document.createElement("img");return t.className="waveform-artwork",t.style.width="40px",t.style.height="40px",t.style.borderRadius="4px",t.style.objectFit="cover",t.style.flexShrink="0",this.bindArtworkFallback(t),t}createButtonArtworkElement(){let t=document.createElement("img");return t.className="waveform-btn-artwork",t.alt="",t.setAttribute("aria-hidden","true"),this.bindArtworkFallback(t),t}createArtistElement(){let t=document.createElement("span");return t.className="waveform-artist",t}syncArtist(t){if(this.options.artist=t||null,!!this.options.showInfo){if(!t){this.artistEl?.remove(),this.artistEl=null;return}if(!this.artistEl){let i=this.container.querySelector(".waveform-title");if(!i)return;this.artistEl=this.createArtistElement(),i.after(this.artistEl)}this.artistEl.textContent=t,this.artistEl.style.display=""}}syncButtonArtwork(t){if(this.playBtn){if(!t){this.artworkEl?.remove(),this.artworkEl=null,this.playBtn.classList.remove("waveform-btn-has-artwork");return}this.artworkEl||(this.artworkEl=this.createButtonArtworkElement(),this.playBtn.prepend(this.artworkEl)),this.artworkEl.src=t,this.playBtn.classList.add("waveform-btn-has-artwork")}}syncArtwork(t,i=""){if(this.options.artwork=t||null,this.options.artworkAlt=i||"",this.options.artworkPosition==="button"){this.syncButtonArtwork(this.options.artwork);return}if(this.options.showInfo){if(!t){this.artworkEl?.remove(),this.artworkEl=null;return}if(!this.artworkEl){let a=this.container.querySelector(".waveform-text");if(!a)return;this.artworkEl=this.createArtworkElement(),a.before(this.artworkEl)}this.artworkEl.src=t,this.artworkEl.alt=i||""}}createAudio(){if(this.options.audioMode==="external"){this.audio=null;return}this.audio=new Audio,this.audio.preload=this.options.preload||"metadata",this.options.crossOrigin&&(this.audio.crossOrigin=this.options.crossOrigin)}initPlaybackSpeed(){this.audio&&this.options.playbackRate&&this.options.playbackRate!==1&&(this.audio.playbackRate=this.options.playbackRate),this.options.showPlaybackSpeed&&this.initSpeedControls()}initSpeedControls(){let t=this.container.querySelector(".speed-btn"),i=this.container.querySelector(".speed-menu");if(!t||!i)return;let a=()=>Array.from(i.querySelectorAll(".speed-option")),r=()=>i.style.display!=="none",s=l=>{if(i.style.display=l?"block":"none",t.setAttribute("aria-expanded",l?"true":"false"),l){let h=a();(h.find(u=>u.getAttribute("aria-checked")==="true")||h[0])?.focus()}},o=l=>{let h=a();h.length&&h[(l+h.length)%h.length].focus()},n=l=>{this.setPlaybackRate(parseFloat(l.dataset.rate)),s(!1),t.focus()};t.addEventListener("click",l=>{l.stopPropagation(),s(!r())},{signal:this._ac.signal}),document.addEventListener("click",()=>s(!1),{signal:this._ac.signal}),i.addEventListener("click",l=>{l.stopPropagation();let h=l.target.closest(".speed-option");h&&n(h)},{signal:this._ac.signal}),t.closest(".waveform-speed")?.addEventListener("keydown",l=>{let h=a(),u=h
|