https://www.leonwong282.com/_next/static/chunks/3391.47bd908770ac6cc5.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[3391,11633],{3391:(e,t,r)=>{r.r(t),r.d(t,{default:()=>i});var n=r(37876),a=r(14232),s=r(98477),l=r(11633);function i(e){let{post:t}=e,[r,i]=(0,a.useState)([]);return(0,a.useEffect)(()=>{let e=(()=>{let e=document.querySelectorAll("#notion-article .notion-audio"),t=[];return e.forEach(e=>{let r=e.querySelector("audio"),n=null==r?void 0:r.getAttribute("src");if(!n)return;let a=r.style.display;r.style.display="none";let s=document.createElement("div");e.appendChild(s),t.push({mount:s,nativeAudio:r,originalDisplay:a,src:n})}),t})();return i(e),()=>e.forEach(e=>{let{mount:t,nativeAudio:r,originalDisplay:n}=e;t.remove(),r.style.display=n})},[null==t?void 0:t.id]),(0,n.jsx)(n.Fragment,{children:r.map(e=>{let{mount:t,src:r}=e;return(0,s.createPortal)((0,n.jsx)(l.default,{src:r}),t)})})}},11633:(e,t,r)=>{r.r(t),r.d(t,{default:()=>l});var n=r(37876),a=r(14232);let s=e=>{if(!Number.isFinite(e)||e<0)return"0:00";let t=Math.floor(e),r=Math.floor(t/60);return"".concat(r,":").concat((t%60).toString().padStart(2,"0"))};function l(e){let{src:t}=e,r=(0,a.useRef)(null),l=(0,a.useRef)(null),[i,d]=(0,a.useState)(!1),[o,c]=(0,a.useState)(0),[u,h]=(0,a.useState)(0),[x,v]=(0,a.useState)(!1),[f,p]=(0,a.useState)(!1),m=e=>{let t=r.current,n=l.current;if(!t||!n||!u)return;let a=n.getBoundingClientRect(),s=Math.min(1,Math.max(0,(e-a.left)/a.width))*u;t.currentTime=s,c(s)},b=()=>{p(!1)};(0,a.useEffect)(()=>{let e=r.current;if(!e)return;let t=()=>c(e.currentTime),n=()=>h(e.duration||0),a=()=>{d(!0),v(!1)},s=()=>{d(!1),v(!1)},l=()=>v(!0),i=()=>{d(!1),c(0),e.currentTime=0},o=()=>{v(!1),d(!1)};return e.addEventListener("timeupdate",t),e.addEventListener("loadedmetadata",n),e.addEventListener("playing",a),e.addEventListener("pause",s),e.addEventListener("waiting",l),e.addEventListener("ended",i),e.addEventListener("error",o),()=>{e.removeEventListener("timeupdate",t),e.removeEventListener("loadedmetadata",n),e.removeEventListener("playing",a),e.removeEventListener("pause",s),e.removeEventListener("waiting",l),e.removeEventListener("ended",i),e.removeEventListener("error",o)}},[t]);let w=u?o/u*100:0;return(0,n.jsxs)("div",{className:"flex items-center gap-3 border-2 border-[#0284c7] rounded-sm shadow-[3px_3px_0px_0px_#0284c7] bg-[#ffffff] dark:bg-slate-800 p-3 select-none",onPointerMove:e=>{f&&m(e.clientX)},onPointerUp:b,onPointerLeave:b,children:[(0,n.jsx)("audio",{ref:r,src:t,preload:"none",className:"hidden"}),(0,n.jsx)("button",{onClick:()=>{let e=r.current;e&&(e.paused?e.play().catch(()=>{}):e.pause())},"aria-label":i?"暂停":"播放",className:"w-10 h-10 shrink-0 flex items-center justify-center border-2 border-[#0284c7] rounded-sm bg-[#fde68a] text-[#0284c7] font-black text-base shadow-[2px_2px_0px_0px_#0284c7] hover:bg-[#0ea5e9] hover:text-white active:translate-x-0.5 active:translate-y-0.5 active:shadow-none transition-all",children:x?(0,n.jsx)("span",{className:"inline-block w-3 h-3 border-2 border-[#0284c7] border-t-transparent rounded-full animate-spin"}):i?(0,n.jsxs)("svg",{width:"14",height:"14",viewBox:"0 0 14 14",fill:"currentColor",children:[(0,n.jsx)("rect",{x:"2",y:"1",width:"4",height:"12",rx:"0.5"}),(0,n.jsx)("rect",{x:"8",y:"1",width:"4",height:"12",rx:"0.5"})]}):(0,n.jsx)("svg",{width:"14",height:"14",viewBox:"0 0 14 14",fill:"currentColor",children:(0,n.jsx)("path",{d:"M3 1.5v11l9-5.5z"})})}),(0,n.jsxs)("div",{className:"flex-1 min-w-0",children:[(0,n.jsxs)("div",{ref:l,onPointerDown:e=>{e.preventDefault(),p(!0),m(e.clientX)},className:"group relative h-4 cursor-pointer",role:"slider","aria-valuemin":"0","aria-valuemax":u||0,"aria-valuenow":o,"aria-label":"播放进度",children:[(0,n.jsx)("div",{className:"absolute inset-x-0 top-1/2 -translate-y-1/2 h-2 border-2 border-[#0284c7] rounded-sm bg-[#f1f5f9] dark:bg-slate-700 overflow-hidden",children:(0,n.jsx)("div",{className:"h-full bg-[#0284c7] transition-[width] duration-100",style:{width:"".concat(w,"%")}})}),(0,n.jsx)("div",{className:"absolute top-1/2 -translate-y-1/2 -translate-x-1/2 w-3.5 h-3.5 border-2 border-[#0284c7] rounded-sm bg-[#fde68a] shadow-[1px_1px_0px_0px_#0284c7]",style:{left:"".concat(w,"%")}})]}),(0,n.jsxs)("div",{className:"flex justify-between mt-1 text-[10px] font-black tabular-nums text-slate-500 dark:text-slate-400",children:[(0,n.jsx)("span",{children:s(o)}),(0,n.jsx)("span",{children:s(u)})]})]})]})}}}]);