@bothub-chat/ui/dist/components/message/music/index.js

Bothub UI Components

import{__rest as r,__awaiter as e}from"tslib";import{jsxs as t,jsx as o,Fragment as i}from"react/jsx-runtime";import{useRef as n,useState as a,useEffect as c,useCallback as s}from"react";import{MessageMusicStyled as l,MessageMusicAudio as d,MessageMusicSkeleton as m,MessageMusicCover as u,MessageMusicCoverImage as p,MessageMusicIconBadge as h,MessageMusicContent as f,MessageMusicMeta as v,MessageMusicTitle as y,MessageMusicPlayerRow as b,MessageMusicControlButton as j,MessageMusicTime as g,MessageMusicSliderWrap as w,MessageMusicSlider as x}from"./styled.js";import{IconProvider as k}from"../../icon/context.js";import"../../icon/styled.js";import"@react-spring/web";import"react-markdown";import"react-dom";import"../../portal/styled.js";import"../../tooltip/styled.js";import"../../tooltip/arrow/styled.js";import"../../../theme/index.js";import"../../tooltip/context.js";import"unified";import"remark-parse";import"remark-gfm";import"mdast-util-to-markdown";import"../../../utils/colors/calculateGrayScale.js";import"../../../utils/colors/calculateAccentColors.js";import{formatSeconds as C}from"../../../utils/formatSeconds.js";import{MusicNoteIcon as $}from"../../../icons/music-note/index.js";import{PlayButtonIcon as S}from"../../../icons/play-button/index.js";import{PauseButtonIcon as E}from"../../../icons/pause-button/index.js";import{useMessage as L}from"../context.js";import{useTheme as M}from"../../../theme/hook.js";const P="messageVoicePlay",T=T=>{var{src:A,coverSrc:z,isLoading:B=!1,title:F,checkAlive:G,refreshSrc:H}=T,O=r(T,["src","coverSrc","isLoading","title","checkAlive","refreshSrc"]);const U=M(),{variant:V}=L(),q=n(null),D=n(!1),[I,J]=a(!0),[K,N]=a(!1),[Q,R]=a(0),[W,X]=a(0),[Y,Z]=a(!1),_=I||B,rr=Boolean(z)&&!Y,er=_&&W<=0;c(()=>{const r=r=>{const e=q.current,t=r.detail.audio;e&&t!==e&&!e.paused&&e.pause()};return window.addEventListener(P,r),()=>{window.removeEventListener(P,r)}},[]),c(()=>{N(!1),R(0),X(0),J(!0),Z(!1),q.current&&q.current.load()},[A]),c(()=>{Z(!1)},[z]);const tr=s(()=>e(void 0,void 0,void 0,function*(){if(!_){if(G){if(!(yield G()))return void(null==H||H())}if(q.current){const r=new CustomEvent(P,{detail:{audio:q.current}});window.dispatchEvent(r),yield q.current.play()}}}),[G,H,_]),or=s(()=>{q.current&&q.current.pause()},[]),ir=s(()=>{q.current&&!_&&(K?or():tr())},[K,_,tr,or]),nr=s(r=>{const e=q.current;if(!e||_)return;const t=Math.min(Math.max(r,0),W||e.duration);e.currentTime=t,R(t)},[W,_]),ar=s(r=>{const e="number"==typeof r?r:r[0];D.current=!0,R(e),q.current&&(q.current.currentTime=e)},[]),cr=s(r=>{const e="number"==typeof r?r:r[0];nr(e),D.current=!1},[nr]),sr=s(()=>{!D.current&&q.current&&R(q.current.currentTime)},[]),lr=s(()=>{q.current&&(X(q.current.duration||0),J(!1))},[]),dr=s(()=>{R(0),N(!1)},[]),mr="assistant"===V?U.colors.base.white:U.bright||"standard"===U.scheme&&"light"===U.mode?U.default.colors.base.black:U.default.colors.base.white,ur=K?"Pause":"Play",pr=`${C(Q)} / ${C(W)}`,hr=W>0?W:1,fr=_||W<=0;return t(l,Object.assign({},O,{$hasCover:rr,role:"group","aria-label":F?`Music: ${F}`:"Music player",children:[o(d,{ref:q,src:A,preload:"metadata",onPlay:()=>N(!0),onPause:()=>N(!1),onLoadedMetadata:lr,onCanPlayThrough:()=>J(!1),onTimeUpdate:sr,onEnded:dr}),er?o(m,{$hasCover:Boolean(z)}):t(i,{children:[rr?o(u,{children:o(p,{src:z,alt:F||"Track cover",onError:()=>Z(!0)})}):o(h,{"aria-hidden":!0,children:o(k,{size:48,fill:U.colors.grayScale.gray1,children:o($,{})})}),t(f,{children:[F&&o(v,{children:o(y,{$variant:V,title:F,children:F})}),t(b,{children:[o(j,{variant:"secondary",disabled:_,"aria-label":ur,"aria-pressed":K,onClick:ir,children:o(k,{size:24,fill:mr,children:o(K?E:S,{})})}),o(g,{$variant:V,"aria-live":"off",children:pr})]}),o(w,{children:o(x,{min:0,max:hr,step:.1,value:Math.min(Q,hr),disabled:fr,$disabled:fr,ariaLabelForHandle:ur,onChange:ar,onChangeComplete:cr})})]})]})]}))};export{T as MessageMusic};