@labelbee/lb-components 1.23.0-alpha.19 → 1.23.0-alpha.20
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var React=require("react"),getWebPcm2Wac=require("../audioAnnotate/utils/getWebPcm2Wac.js"),_=require("lodash"),icons=require("@ant-design/icons"),lbAnnotation=require("@labelbee/lb-annotation"),antd=require("antd"),index$a=require("../invalidPage/index.js"),index$5=require("../imageError/index.js"),index$9=require("../../utils/index.js"),index$c=require("../videoPlayer/components/SpeedController/index.js"),WaveSurfer=require("@labelbee/wavesurfer"),Region=require("@labelbee/wavesurfer/dist/plugin/wavesurfer.regions.js"),Cursor=require("@labelbee/wavesurfer/dist/plugin/wavesurfer.cursor.js"),index$d=require("./zoomSlider/index.js"),index$e=require("./labelDisplayToggle/index.js"),index$f=require("./clipRegion/index.js"),index=require("../audioAnnotate/audioContext/index.js"),ahooks=require("ahooks"),index$1=require("./useAudioScroll/index.js"),index_module=require("./index.module.scss.js"),audio=require("../../utils/audio.js"),index$b=require("./progressDot/index.js"),index$6=require("./clipTip/index.js"),index$4=require("./useSwitchHotkey/index.js"),index$2=require("./useAudioCombine/index.js"),index$3=require("./useAudioSegment/index.js"),index$7=require("./combineTip/index.js"),index$8=require("./segmentTip/index.js"),index$g=require("../../views/MainView/toolFooter/index.js"),utils=require("../videoPlayer/utils.js");function _interopDefaultLegacy(s){return s&&typeof s=="object"&&"default"in s?s:{default:s}}var React__default=_interopDefaultLegacy(React),___default=_interopDefaultLegacy(_),WaveSurfer__default=_interopDefaultLegacy(WaveSurfer),Region__default=_interopDefaultLegacy(Region),Cursor__default=_interopDefaultLegacy(Cursor),__defProp=Object.defineProperty,__defProps=Object.defineProperties,__getOwnPropDescs=Object.getOwnPropertyDescriptors,__getOwnPropSymbols=Object.getOwnPropertySymbols,__hasOwnProp=Object.prototype.hasOwnProperty,__propIsEnum=Object.prototype.propertyIsEnumerable,__defNormalProp=(s,l,u)=>l in s?__defProp(s,l,{enumerable:!0,configurable:!0,writable:!0,value:u}):s[l]=u,__spreadValues=(s,l)=>{for(var u in l||(l={}))__hasOwnProp.call(l,u)&&__defNormalProp(s,u,l[u]);if(__getOwnPropSymbols)for(var u of __getOwnPropSymbols(l))__propIsEnum.call(l,u)&&__defNormalProp(s,u,l[u]);return s},__spreadProps=(s,l)=>__defProps(s,__getOwnPropDescs(l));const{EToolName}=lbAnnotation.cTool,EKeyCode=lbAnnotation.cKeyCode.default,PER_PROGRESS=.1,AudioPlayerContext=React__default.default.createContext({count:0,isEdit:!1,toolName:EToolName.Empty,imgIndex:0}),AudioPlayer=({fileData:s={},onLoaded:l,context:u,invalid:$e,height:Ie,hideError:Le,onError:te,updateRegion:x,removeRegion:B,regions:C=[],activeToolPanel:Oe,clipConfigurable:Ne,clipTextConfigurable:We,clipAttributeList:Fe,clipAttributeConfigurable:re,secondaryAttributeConfigurable:ze,subAttributeList:He,isCheck:E,hoverRegionId:I,footer:Ue,drawLayerSlot:ne})=>{var oe,ie;const{url:M,path:ae}=s,[L,O]=React.useState(!1),[le,se]=React.useState(!1),[R,Xe]=React.useState(0),[Ze,ue]=React.useState(!1),[D,de]=React.useState(0),o=React.useRef(null),S=React.useRef(null),ce=React.useRef(R),N=e=>{ce.current=e,Xe(e)},[ve,Ke]=React.useState(0),[k,Ve]=React.useState(1),W=React.useRef(null),[fe,Ge]=React.useState({}),{audioClipState:F,setAudioClipState:A}=index.useAudioClipStore(),[z,H]=React.useState(!1),d=ahooks.useLatest(F),me=ahooks.useLatest(fe),Ye=ahooks.useLatest(L),w=ahooks.useLatest(C),pe=ahooks.useUpdate(),[ge,Je]=React.useState([]),[_e,Qe]=React.useState({}),et=_.debounce(()=>{lbAnnotation.EventBus.emit("audioZoom")},500),be=e=>{e<index$d.audioZoomInfo.min||e>index$d.audioZoomInfo.max||(Ve(e),audio.dispatchResizeEvent(),et())};index$1({container:W.current,target:document.querySelector(`[data-id=${(ie=(oe=d.current)==null?void 0:oe.selectedRegion)==null?void 0:ie.id}]`),clipping:z,zoom:k,zoomHandler:be});const $=()=>{let e=w.current;const{attributeLockList:r}=d.current;r.length&&(e=e.filter(t=>r.includes(t.attribute))),X(),e.forEach(t=>{var n;(n=o.current)==null||n.addRegion(__spreadProps(__spreadValues({},t),{drag:!E,resize:!E,color:"rgba(0, 0, 0, 0)"}))}),pe()},v=e=>{var r,t,n,i,a,f,g;const{id:c,loop:m=!0,playImmediately:y=!1}=e;if(c){const T=(n=(t=(r=o.current)==null?void 0:r.regions)==null?void 0:t.list)!=null?n:{};Object.entries(T).forEach(([,p])=>{const{id:P}=p;c===P?p.select():p.cancelSelect()}),A({selectedRegion:{id:c,loop:m},selectedAttribute:(f=(a=(i=w.current)==null?void 0:i.find(p=>p.id===c))==null?void 0:a.attribute)!=null?f:""}),m&&y&&((g=q(c))==null||g.playLoop())}else A({selectedRegion:{}})},{combineInstance:tt}=index$2({waveRef:o,sortByStartRegions:ge,regionMap:_e,updateRegion:x,removeRegion:B,generateRegions:$,setSelectedRegion:v}),{segmentInstance:rt,onRegionMouseMove:nt,segmentTimeTip:ot}=index$3({waveRef:o,regionMap:_e,updateRegion:x,removeRegion:B,generateRegions:$,setSelectedRegion:v}),ye={clipTextConfigurable:We,clipAttributeList:Fe,clipAttributeConfigurable:re,clipConfigurable:Ne,secondaryAttributeConfigurable:ze,subAttributeList:He};React.useEffect(()=>{A({selectedAttribute:""})},[re]),React.useEffect(()=>{U()},[F.selectedAttribute]),React.useEffect(()=>{$()},[F.attributeLockList]),ahooks.useDeepCompareEffect(()=>{A(ye),setTimeout(()=>{Ee()})},[ye]),ahooks.useDeepCompareEffect(()=>{Je(_.sortBy(C,["start"])),Qe(C.reduce((e,r)=>{const{id:t}=r;return __spreadProps(__spreadValues({},e),{[t]:r})},{}))},[C]),React.useEffect(()=>{if(I){const e=Ye.current;v({id:I,loop:e,playImmediately:!0})}else v({})},[I]);const Ee=()=>{var e,r;d.current.clipConfigurable?(!E&&o.current&&((e=o.current)==null||e.enableDragSelection({slop:5})),$()):((r=o.current)==null||r.disableDragSelection(),X()),U()},U=()=>{var e,r,t,n,i;let a="";d.current.clipConfigurable?a=audio.getAttributeColor(d.current.selectedAttribute,(e=d.current.clipAttributeList)!=null?e:[]):a="transparent",((t=(r=o==null?void 0:o.current)==null?void 0:r.cursor)==null?void 0:t.cursor)&&((i=(n=o==null?void 0:o.current)==null?void 0:n.cursor)==null||i.setStyle({border:`2px dashed ${a}`}))},q=e=>{var r,t,n;return((n=(t=(r=o.current)==null?void 0:r.regions)==null?void 0:t.list)!=null?n:{})[e]},Re=()=>{var e,r;if(M){const t=((r=(e=ae==null?void 0:ae.split("."))==null?void 0:e.pop())==null?void 0:r.toLowerCase())==="pcm";ue(!1),t?getWebPcm2Wac.getWebPcm2WavBase64(M).then(n=>{Se(n)}):Se(M)}},Se=e=>{var r;e&&(se(!0),N(0),de(0),(r=o==null?void 0:o.current)==null||r.load(e))},X=()=>{var e;(e=o.current)==null||e.clearRegions()},Z=e=>{const r=q(e);r&&(H(!1),r==null||r.remove(),B==null||B(e),v({}))},{run:he}=ahooks.useThrottleFn(v,{wait:500});index$4({sortByStartRegions:ge,setSelectedRegion:v});const it=e=>{const{start:r,end:t}=me.current;return(r||t)&&e.update(me.current),e},at=({action:e,id:r,eventDownTime:t})=>{var n,i;if(!d.current.clipConfigurable)return;r&&v({id:r});const a=q((r!=null?r:(n=d.current.selectedRegion)==null?void 0:n.id)||""),f=[];(e==="create"?w.current:(i=w.current)==null?void 0:i.filter(m=>m.id!==a.id)).forEach(m=>{const{start:y,end:T,attribute:p}=m;p===d.current.selectedAttribute&&[y,T].forEach(P=>{f.includes(P)||f.push(P)})});const c=audio.getCanMoveRange(f.sort((m,y)=>m-y),t);o.current.range=c},lt=e=>{U(),setTimeout(()=>{H(!1)});const r=it(e),{id:t,start:n,end:i}=r;v({id:t,playImmediately:!0});const a={id:t,start:utils.decimalReserved(n,3),end:utils.decimalReserved(i,3)};x==null||x(a),pe()},st=()=>{const e=WaveSurfer__default.default.create({container:"#waveform",waveColor:"#999",progressColor:"#999",height:Ie||245,normalize:!0,cursorWidth:2,cursorColor:"white",responsive:0,hideScrollbar:!0,plugins:[Region__default.default.create({regions:C,dragSelection:{slop:5},canMove:!1}),Cursor__default.default.create({opacity:1,customStyle:{border:"2px dashed transparent"}})]}),r=()=>{var t;N(((t=o==null?void 0:o.current)==null?void 0:t.getCurrentTime())||0)};e.on("ready",()=>{var t;const n=((t=o==null?void 0:o.current)==null?void 0:t.getDuration())||0;de(n),r(),l==null||l({duration:Math.round(n)}),se(!1),j(),lbAnnotation.EventBus.on("setCurrentTimeByPosition",V),lbAnnotation.EventBus.on("clearRegions",X),lbAnnotation.EventBus.on("removeRegionById",Z),lbAnnotation.EventBus.on("setSelectedRegion",he),e.on("regions-eventDown",at),Ee()}),e.on("audioprocess",()=>{r()}),e.on("play",()=>{O(!0)}),e.on("pause",()=>{O(!1)}),e.on("finish",()=>{O(!1)}),e.on("seek",()=>{r()}),e.on("error",()=>{ue(!0),l==null||l({hasError:!0}),te==null||te()}),e.on("region-created",t=>{const{id:n,start:i,end:a}=t;if(w.current.find(g=>g.id===n))return;const f={id:n,start:utils.decimalReserved(i,3),end:utils.decimalReserved(a,3),attribute:d.current.selectedAttribute,text:""};x==null||x(f)}),e.on("region-updated",(t,n)=>{var i,a,f,g,c,m,y,T,p,P;const je=n==null?void 0:n.action;A({combined:!1,segment:!1}),je==="resize"&&((a=(i=o==null?void 0:o.current)==null?void 0:i.cursor)==null||a.setStyle({borderStyle:"solid"})),je==="drag"&&((g=(f=o==null?void 0:o.current)==null?void 0:f.cursor)==null||g.setStyle({borderColor:"transparent"}));const G={},Y=[],J={},Et=(c=w.current)==null?void 0:c.filter(b=>b.id!==t.id),Rt=(T=(y=(m=o.current)==null?void 0:m.regions)==null?void 0:y.list)!=null?T:{};Et.forEach(b=>{var Me,De;const{element:Q}=(Me=Rt[b.id])!=null?Me:{},{start:Pt,end:xt}=b;if(Q){const{x:ke,width:Ct}=((De=Q.getBoundingClientRect)==null?void 0:De.call(Q))||{},wt=ke+Ct;[ke,wt].forEach((ee,Tt)=>{Y.includes(ee)||(Y.push(ee),J[ee]=Tt===0?Pt:xt)})}});const{x:Be,width:St}=((P=(p=t.element).getBoundingClientRect)==null?void 0:P.call(p))||{},ht=Be+St;Y.forEach(b=>{Math.abs(audio.precisionMinus(b,Be))<5&&(G.start=J[b]),Math.abs(audio.precisionMinus(b,ht))<5&&(G.end=J[b])}),Ge(G),he({id:t.id}),H(!0)}),e.on("region-update-end",t=>{lt(t)}),e.on("region-contextmenu",(t,n)=>{if(!E){if(n.preventDefault(),n.stopPropagation(),audio.isDoubleClick(n)){Z(t.id);return}v({id:t.id,playImmediately:!0})}}),e.on("region-click",(t,n,i)=>{if(!E){if(n.preventDefault(),n.stopPropagation(),d.current.combined){tt(t);return}if(d.current.segment){rt(t,i);return}v({id:t.id,playImmediately:!0})}}),e.on("region-mousemove",nt),o.current=e},ut=L?React__default.default.createElement(icons.PauseOutlined,null):React__default.default.createElement(icons.CaretRightOutlined,null),Pe=e=>e?`${parseFloat((e/D*100).toFixed(4))}%`:"0%",xe=Pe(R),dt=Pe(ve),h=()=>{if(!le)return o==null?void 0:o.current},ct=()=>{var e;(e=h())==null||e.skipForward(PER_PROGRESS)},vt=()=>{var e;(e=h())==null||e.skipBackward(PER_PROGRESS)},j=()=>{var e;(e=h())==null||e.playPause(),v({})},Ce=e=>{var r;switch(e.keyCode){case EKeyCode.Right:ct();break;case EKeyCode.Left:vt();break;case EKeyCode.Space:e.preventDefault(),j();break;case EKeyCode.Delete:if(!E){const{id:t}=((r=d.current)==null?void 0:r.selectedRegion)||{};t&&Z(t)}break}},ft=e=>{V(e)},we=___default.default.throttle(ft,50);let K=!1;const Te=()=>{K&&(j(),K=!1),document.removeEventListener("mousemove",we),document.removeEventListener("mouseup",Te)},mt=e=>{V(e),L&&(K=!0,j()),document.addEventListener("mousemove",we),document.addEventListener("mouseup",Te)},pt=()=>{Re()};React.useEffect(()=>(st(),()=>{var e;(e=o==null?void 0:o.current)==null||e.destroy(),o.current=null,lbAnnotation.EventBus.unbindAll("setCurrentTimeByPosition"),lbAnnotation.EventBus.unbindAll("clearRegions"),lbAnnotation.EventBus.unbindAll("removeRegionById"),lbAnnotation.EventBus.unbindAll("setSelectedRegion")}),[]);const gt=e=>{var r,t,n;(r=h())==null||r.playPause(),(t=h())==null||t.setPlaybackRate(e),(n=h())==null||n.playPause()};React.useEffect(()=>(document.addEventListener("keydown",Ce),()=>{document.removeEventListener("keydown",Ce)})),React.useEffect(()=>{v({}),Re()},[M]);const Ae=e=>{var r,t,n,i;if((o==null?void 0:o.current)&&(S==null?void 0:S.current)){const a=(t=(r=o==null?void 0:o.current)==null?void 0:r.getDuration())!=null?t:0,f=(n=S==null?void 0:S.current)==null?void 0:n.getBoundingClientRect();let c=(e.clientX-f.left)/(((i=S==null?void 0:S.current)==null?void 0:i.clientWidth)||0)*a;return c>a&&(c=a),c}return 0},V=e=>{var r;const t=Ae(e);(r=o==null?void 0:o.current)==null||r.skip(t-ce.current),N(t)},_t=e=>{Ke(Ae(e))},bt=D?Math.max(D-R,0):0,yt=(u==null?void 0:u.toolName)!==EToolName.Empty&&(u==null?void 0:u.isEdit)!==!0&&(Oe==="remark"||E),qe=React__default.default.createElement("div",{className:index_module.audioPlayer},Ze&&!Le&&React__default.default.createElement(index$5,{fileTypeName:"\u97F3\u9891",ignoreOffsetY:!0,reloadImage:pt,backgroundColor:"#ffffffbb"}),React__default.default.createElement(index$6,{getRegionInstanceById:q,clipping:z}),React__default.default.createElement(index$7,{container:W.current}),React__default.default.createElement(index$8,{segmentTimeTip:ot}),React__default.default.createElement("div",{className:index_module.waveformContainer,ref:W},React__default.default.createElement("div",{id:"waveform",style:{width:`${k*100}%`},className:index$9.classnames({[index_module.waveform]:!0,"bee-audio-combined":d.current.combined,"bee-audio-clip":d.current.clipConfigurable})},$e&&React__default.default.createElement(index$a,{isAudio:!0}),React__default.default.createElement("div",{ref:S,className:index_module.progress,onMouseDown:mt,onMouseMove:_t},React__default.default.createElement("div",{className:index$9.classnames({[index_module.radioTooltip]:!0}),style:{left:xe}},audio.formatTime(R)),React__default.default.createElement("div",{className:index$9.classnames({[index_module.radioTooltip]:!0,[index_module.mouseTooltip]:!0}),style:{left:dt}},audio.formatTime(ve)),React__default.default.createElement(index$b,{playPercentage:xe})),yt&&(ne==null?void 0:ne({currentTime:R,remainingTime:bt,audioPlayer:h()})))),React__default.default.createElement("div",{className:index_module.controlBar},React__default.default.createElement(antd.Button,{type:"link",icon:ut,onClick:()=>{j()},className:index$9.classnames({[index_module.playButton]:!0,[index_module.playButtonDisabled]:le})}),React__default.default.createElement("span",{className:index_module.time},`${audio.timeFormat(R,"ss.SSS")} / -${audio.timeFormat(D-R,"ss.SSS")}`),React__default.default.createElement(index$c.default,{playerType:index$c.EPlayerType.Audio,onChange:e=>{gt(e)}}),React__default.default.createElement(index$d.default,{onChange:e=>{be(e)},zoom:k}),React__default.default.createElement(index$e,{EventBus:lbAnnotation.EventBus})));return u?React__default.default.createElement(AudioPlayerContext.Provider,{value:u},qe,C.map(e=>{const{id:r}=e,t=document.querySelector(`[data-id=${r}]`);return t?React__default.default.createElement(index$f,{el:t,key:r,region:e,edgeAdsorption:fe,clipping:z,zoom:k,instance:q(r)}):null}),React__default.default.createElement(index$g.default,{footer:Ue})):qe};exports.AudioPlayer=AudioPlayer,exports.AudioPlayerContext=AudioPlayerContext;
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var React=require("react"),getWebPcm2Wac=require("../audioAnnotate/utils/getWebPcm2Wac.js"),_=require("lodash"),icons=require("@ant-design/icons"),lbAnnotation=require("@labelbee/lb-annotation"),antd=require("antd"),index$a=require("../invalidPage/index.js"),index$5=require("../imageError/index.js"),index$9=require("../../utils/index.js"),index$c=require("../videoPlayer/components/SpeedController/index.js"),WaveSurfer=require("@labelbee/wavesurfer"),Region=require("@labelbee/wavesurfer/dist/plugin/wavesurfer.regions.js"),Cursor=require("@labelbee/wavesurfer/dist/plugin/wavesurfer.cursor.js"),index$d=require("./zoomSlider/index.js"),index$e=require("./labelDisplayToggle/index.js"),index$f=require("./clipRegion/index.js"),index=require("../audioAnnotate/audioContext/index.js"),ahooks=require("ahooks"),index$1=require("./useAudioScroll/index.js"),index_module=require("./index.module.scss.js"),audio=require("../../utils/audio.js"),index$b=require("./progressDot/index.js"),index$6=require("./clipTip/index.js"),index$4=require("./useSwitchHotkey/index.js"),index$2=require("./useAudioCombine/index.js"),index$3=require("./useAudioSegment/index.js"),index$7=require("./combineTip/index.js"),index$8=require("./segmentTip/index.js"),index$g=require("../../views/MainView/toolFooter/index.js"),utils=require("../videoPlayer/utils.js");function _interopDefaultLegacy(u){return u&&typeof u=="object"&&"default"in u?u:{default:u}}var React__default=_interopDefaultLegacy(React),___default=_interopDefaultLegacy(_),WaveSurfer__default=_interopDefaultLegacy(WaveSurfer),Region__default=_interopDefaultLegacy(Region),Cursor__default=_interopDefaultLegacy(Cursor),__defProp=Object.defineProperty,__defProps=Object.defineProperties,__getOwnPropDescs=Object.getOwnPropertyDescriptors,__getOwnPropSymbols=Object.getOwnPropertySymbols,__hasOwnProp=Object.prototype.hasOwnProperty,__propIsEnum=Object.prototype.propertyIsEnumerable,__defNormalProp=(u,s,c)=>s in u?__defProp(u,s,{enumerable:!0,configurable:!0,writable:!0,value:c}):u[s]=c,__spreadValues=(u,s)=>{for(var c in s||(s={}))__hasOwnProp.call(s,c)&&__defNormalProp(u,c,s[c]);if(__getOwnPropSymbols)for(var c of __getOwnPropSymbols(s))__propIsEnum.call(s,c)&&__defNormalProp(u,c,s[c]);return u},__spreadProps=(u,s)=>__defProps(u,__getOwnPropDescs(s));const{EToolName}=lbAnnotation.cTool,EKeyCode=lbAnnotation.cKeyCode.default,PER_PROGRESS=.1,AudioPlayerContext=React__default.default.createContext({count:0,isEdit:!1,toolName:EToolName.Empty,imgIndex:0}),AudioPlayer=({fileData:u={},onLoaded:s,context:c,invalid:$e,height:Le,hideError:Ie,onError:te,updateRegion:x,removeRegion:B,regions:C=[],activeToolPanel:Oe,clipConfigurable:Ne,clipTextConfigurable:We,clipAttributeList:Fe,clipAttributeConfigurable:re,secondaryAttributeConfigurable:ze,subAttributeList:Ue,isCheck:E,hoverRegionId:L,footer:He,drawLayerSlot:ne})=>{var oe,ie;const{url:M,path:ae}=u,[I,O]=React.useState(!1),[le,se]=React.useState(!1),[R,Xe]=React.useState(0),[Ze,ue]=React.useState(!1),[D,ce]=React.useState(0),o=React.useRef(null),S=React.useRef(null),de=React.useRef(R),N=e=>{de.current=e,Xe(e)},[ve,Ke]=React.useState(0),[k,Ve]=React.useState(1),W=React.useRef(null),[fe,Ge]=React.useState({}),{audioClipState:F,setAudioClipState:T}=index.useAudioClipStore(),[z,U]=React.useState(!1),d=ahooks.useLatest(F),me=ahooks.useLatest(fe),Ye=ahooks.useLatest(I),w=ahooks.useLatest(C),pe=ahooks.useUpdate(),[ge,Je]=React.useState([]),[be,Qe]=React.useState({}),et=_.debounce(()=>{lbAnnotation.EventBus.emit("audioZoom")},500),_e=e=>{e<index$d.audioZoomInfo.min||e>index$d.audioZoomInfo.max||(Ve(e),audio.dispatchResizeEvent(),et())};index$1({container:W.current,target:document.querySelector(`[data-id=${(ie=(oe=d.current)==null?void 0:oe.selectedRegion)==null?void 0:ie.id}]`),clipping:z,zoom:k,zoomHandler:_e});const $=()=>{let e=w.current;const{attributeLockList:r}=d.current;r.length&&(e=e.filter(t=>r.includes(t.attribute))),X(),e.forEach(t=>{var n;(n=o.current)==null||n.addRegion(__spreadProps(__spreadValues({},t),{drag:!E,resize:!E,color:"rgba(0, 0, 0, 0)"}))}),pe()},v=e=>{var r,t,n,i,a,f,p;const{id:l,loop:m=!0,playImmediately:y=!1}=e;if(l){const A=(n=(t=(r=o.current)==null?void 0:r.regions)==null?void 0:t.list)!=null?n:{};Object.entries(A).forEach(([,g])=>{const{id:P}=g;l===P?g.select():g.cancelSelect()}),T({selectedRegion:{id:l,loop:m},selectedAttribute:(f=(a=(i=w.current)==null?void 0:i.find(g=>g.id===l))==null?void 0:a.attribute)!=null?f:""}),m&&y&&((p=q(l))==null||p.playLoop())}else T({selectedRegion:{}})},{combineInstance:tt}=index$2({waveRef:o,sortByStartRegions:ge,regionMap:be,updateRegion:x,removeRegion:B,generateRegions:$,setSelectedRegion:v}),{segmentInstance:rt,onRegionMouseMove:nt,segmentTimeTip:ot}=index$3({waveRef:o,regionMap:be,updateRegion:x,removeRegion:B,generateRegions:$,setSelectedRegion:v}),ye={clipTextConfigurable:We,clipAttributeList:Fe,clipAttributeConfigurable:re,clipConfigurable:Ne,secondaryAttributeConfigurable:ze,subAttributeList:Ue};React.useEffect(()=>{T({selectedAttribute:""})},[re]),React.useEffect(()=>{H()},[F.selectedAttribute]),React.useEffect(()=>{$()},[F.attributeLockList]),ahooks.useDeepCompareEffect(()=>{T(ye),setTimeout(()=>{Ee()})},[ye]),ahooks.useDeepCompareEffect(()=>{Je(_.sortBy(C,["start"])),Qe(C.reduce((e,r)=>{const{id:t}=r;return __spreadProps(__spreadValues({},e),{[t]:r})},{}))},[C]),React.useEffect(()=>{if(L){const e=Ye.current;v({id:L,loop:e,playImmediately:!0})}else v({})},[L]);const Ee=()=>{var e,r;d.current.clipConfigurable?(!E&&o.current&&((e=o.current)==null||e.enableDragSelection({slop:5})),$()):((r=o.current)==null||r.disableDragSelection(),X()),H()},H=()=>{var e,r,t,n,i;let a="";d.current.clipConfigurable?a=audio.getAttributeColor(d.current.selectedAttribute,(e=d.current.clipAttributeList)!=null?e:[]):a="transparent",((t=(r=o==null?void 0:o.current)==null?void 0:r.cursor)==null?void 0:t.cursor)&&((i=(n=o==null?void 0:o.current)==null?void 0:n.cursor)==null||i.setStyle({border:`2px dashed ${a}`}))},q=e=>{var r,t,n;return((n=(t=(r=o.current)==null?void 0:r.regions)==null?void 0:t.list)!=null?n:{})[e]},Re=()=>{var e,r;if(M){const t=((r=(e=ae==null?void 0:ae.split("."))==null?void 0:e.pop())==null?void 0:r.toLowerCase())==="pcm";ue(!1),t?getWebPcm2Wac.getWebPcm2WavBase64(M).then(n=>{Se(n)}):Se(M)}},Se=e=>{var r;e&&(se(!0),N(0),ce(0),(r=o==null?void 0:o.current)==null||r.load(e))},X=()=>{var e;(e=o.current)==null||e.clearRegions()},Z=e=>{const r=q(e);r&&(U(!1),r==null||r.remove(),B==null||B(e),v({}))},{run:he}=ahooks.useThrottleFn(v,{wait:500});index$4({sortByStartRegions:ge,setSelectedRegion:v});const it=e=>{const{start:r,end:t}=me.current;return(r||t)&&e.update(me.current),e},at=({action:e,id:r,eventDownTime:t})=>{var n,i;if(!d.current.clipConfigurable)return;r&&v({id:r});const a=q((r!=null?r:(n=d.current.selectedRegion)==null?void 0:n.id)||""),f=[];(e==="create"?w.current:(i=w.current)==null?void 0:i.filter(m=>m.id!==a.id)).forEach(m=>{const{start:y,end:A,attribute:g}=m;g===d.current.selectedAttribute&&[y,A].forEach(P=>{f.includes(P)||f.push(P)})});const l=audio.getCanMoveRange(f.sort((m,y)=>m-y),t);o.current.range=l},lt=e=>{H(),setTimeout(()=>{U(!1)});const r=it(e),{id:t,start:n,end:i}=r;v({id:t,playImmediately:!0});const a={id:t,start:utils.decimalReserved(n,3),end:utils.decimalReserved(i,3)};x==null||x(a),pe()},st=()=>{const e=WaveSurfer__default.default.create({container:"#waveform",waveColor:"#999",progressColor:"#999",height:Le||245,normalize:!0,cursorWidth:2,cursorColor:"white",responsive:0,hideScrollbar:!0,plugins:[Region__default.default.create({regions:C,dragSelection:{slop:5},canMove:!1}),Cursor__default.default.create({opacity:1,customStyle:{border:"2px dashed transparent"}})]}),r=()=>{var t;N(((t=o==null?void 0:o.current)==null?void 0:t.getCurrentTime())||0)};e.on("ready",()=>{var t;const n=((t=o==null?void 0:o.current)==null?void 0:t.getDuration())||0;ce(n),r(),s==null||s({duration:Math.round(n)}),se(!1),j(),lbAnnotation.EventBus.on("setCurrentTimeByPosition",V),lbAnnotation.EventBus.on("clearRegions",X),lbAnnotation.EventBus.on("removeRegionById",Z),lbAnnotation.EventBus.on("setSelectedRegion",he),e.on("regions-eventDown",at),Ee()}),e.on("audioprocess",()=>{r()}),e.on("play",()=>{O(!0)}),e.on("pause",()=>{O(!1)}),e.on("finish",()=>{O(!1)}),e.on("seek",()=>{r()}),e.on("error",()=>{ue(!0),s==null||s({hasError:!0}),te==null||te()}),e.on("region-created",t=>{var n;const{id:i,start:a,end:f}=t;if(w.current.find(l=>l.id===i))return;const p={id:i,start:utils.decimalReserved(a,3),end:utils.decimalReserved(f,3),attribute:d.current.selectedAttribute,text:""};if(d.current.secondaryAttributeConfigurable){const l=lbAnnotation.TagUtils.getDefaultResultByConfig((n=d.current.subAttributeList)!=null?n:[]);p.subAttribute=l!=null?l:{}}x==null||x(p)}),e.on("region-updated",(t,n)=>{var i,a,f,p,l,m,y,A,g,P;const je=n==null?void 0:n.action;T({combined:!1,segment:!1}),je==="resize"&&((a=(i=o==null?void 0:o.current)==null?void 0:i.cursor)==null||a.setStyle({borderStyle:"solid"})),je==="drag"&&((p=(f=o==null?void 0:o.current)==null?void 0:f.cursor)==null||p.setStyle({borderColor:"transparent"}));const G={},Y=[],J={},Et=(l=w.current)==null?void 0:l.filter(b=>b.id!==t.id),Rt=(A=(y=(m=o.current)==null?void 0:m.regions)==null?void 0:y.list)!=null?A:{};Et.forEach(b=>{var Me,De;const{element:Q}=(Me=Rt[b.id])!=null?Me:{},{start:Pt,end:xt}=b;if(Q){const{x:ke,width:Ct}=((De=Q.getBoundingClientRect)==null?void 0:De.call(Q))||{},wt=ke+Ct;[ke,wt].forEach((ee,At)=>{Y.includes(ee)||(Y.push(ee),J[ee]=At===0?Pt:xt)})}});const{x:Be,width:St}=((P=(g=t.element).getBoundingClientRect)==null?void 0:P.call(g))||{},ht=Be+St;Y.forEach(b=>{Math.abs(audio.precisionMinus(b,Be))<5&&(G.start=J[b]),Math.abs(audio.precisionMinus(b,ht))<5&&(G.end=J[b])}),Ge(G),he({id:t.id}),U(!0)}),e.on("region-update-end",t=>{lt(t)}),e.on("region-contextmenu",(t,n)=>{if(!E){if(n.preventDefault(),n.stopPropagation(),audio.isDoubleClick(n)){Z(t.id);return}v({id:t.id,playImmediately:!0})}}),e.on("region-click",(t,n,i)=>{if(!E){if(n.preventDefault(),n.stopPropagation(),d.current.combined){tt(t);return}if(d.current.segment){rt(t,i);return}v({id:t.id,playImmediately:!0})}}),e.on("region-mousemove",nt),o.current=e},ut=I?React__default.default.createElement(icons.PauseOutlined,null):React__default.default.createElement(icons.CaretRightOutlined,null),Pe=e=>e?`${parseFloat((e/D*100).toFixed(4))}%`:"0%",xe=Pe(R),ct=Pe(ve),h=()=>{if(!le)return o==null?void 0:o.current},dt=()=>{var e;(e=h())==null||e.skipForward(PER_PROGRESS)},vt=()=>{var e;(e=h())==null||e.skipBackward(PER_PROGRESS)},j=()=>{var e;(e=h())==null||e.playPause(),v({})},Ce=e=>{var r;switch(e.keyCode){case EKeyCode.Right:dt();break;case EKeyCode.Left:vt();break;case EKeyCode.Space:e.preventDefault(),j();break;case EKeyCode.Delete:if(!E){const{id:t}=((r=d.current)==null?void 0:r.selectedRegion)||{};t&&Z(t)}break}},ft=e=>{V(e)},we=___default.default.throttle(ft,50);let K=!1;const Ae=()=>{K&&(j(),K=!1),document.removeEventListener("mousemove",we),document.removeEventListener("mouseup",Ae)},mt=e=>{V(e),I&&(K=!0,j()),document.addEventListener("mousemove",we),document.addEventListener("mouseup",Ae)},pt=()=>{Re()};React.useEffect(()=>(st(),()=>{var e;(e=o==null?void 0:o.current)==null||e.destroy(),o.current=null,lbAnnotation.EventBus.unbindAll("setCurrentTimeByPosition"),lbAnnotation.EventBus.unbindAll("clearRegions"),lbAnnotation.EventBus.unbindAll("removeRegionById"),lbAnnotation.EventBus.unbindAll("setSelectedRegion")}),[]);const gt=e=>{var r,t,n;(r=h())==null||r.playPause(),(t=h())==null||t.setPlaybackRate(e),(n=h())==null||n.playPause()};React.useEffect(()=>(document.addEventListener("keydown",Ce),()=>{document.removeEventListener("keydown",Ce)})),React.useEffect(()=>{v({}),Re()},[M]);const Te=e=>{var r,t,n,i;if((o==null?void 0:o.current)&&(S==null?void 0:S.current)){const a=(t=(r=o==null?void 0:o.current)==null?void 0:r.getDuration())!=null?t:0,f=(n=S==null?void 0:S.current)==null?void 0:n.getBoundingClientRect();let l=(e.clientX-f.left)/(((i=S==null?void 0:S.current)==null?void 0:i.clientWidth)||0)*a;return l>a&&(l=a),l}return 0},V=e=>{var r;const t=Te(e);(r=o==null?void 0:o.current)==null||r.skip(t-de.current),N(t)},bt=e=>{Ke(Te(e))},_t=D?Math.max(D-R,0):0,yt=(c==null?void 0:c.toolName)!==EToolName.Empty&&(c==null?void 0:c.isEdit)!==!0&&(Oe==="remark"||E),qe=React__default.default.createElement("div",{className:index_module.audioPlayer},Ze&&!Ie&&React__default.default.createElement(index$5,{fileTypeName:"\u97F3\u9891",ignoreOffsetY:!0,reloadImage:pt,backgroundColor:"#ffffffbb"}),React__default.default.createElement(index$6,{getRegionInstanceById:q,clipping:z}),React__default.default.createElement(index$7,{container:W.current}),React__default.default.createElement(index$8,{segmentTimeTip:ot}),React__default.default.createElement("div",{className:index_module.waveformContainer,ref:W},React__default.default.createElement("div",{id:"waveform",style:{width:`${k*100}%`},className:index$9.classnames({[index_module.waveform]:!0,"bee-audio-combined":d.current.combined,"bee-audio-clip":d.current.clipConfigurable})},$e&&React__default.default.createElement(index$a,{isAudio:!0}),React__default.default.createElement("div",{ref:S,className:index_module.progress,onMouseDown:mt,onMouseMove:bt},React__default.default.createElement("div",{className:index$9.classnames({[index_module.radioTooltip]:!0}),style:{left:xe}},audio.formatTime(R)),React__default.default.createElement("div",{className:index$9.classnames({[index_module.radioTooltip]:!0,[index_module.mouseTooltip]:!0}),style:{left:ct}},audio.formatTime(ve)),React__default.default.createElement(index$b,{playPercentage:xe})),yt&&(ne==null?void 0:ne({currentTime:R,remainingTime:_t,audioPlayer:h()})))),React__default.default.createElement("div",{className:index_module.controlBar},React__default.default.createElement(antd.Button,{type:"link",icon:ut,onClick:()=>{j()},className:index$9.classnames({[index_module.playButton]:!0,[index_module.playButtonDisabled]:le})}),React__default.default.createElement("span",{className:index_module.time},`${audio.timeFormat(R,"ss.SSS")} / -${audio.timeFormat(D-R,"ss.SSS")}`),React__default.default.createElement(index$c.default,{playerType:index$c.EPlayerType.Audio,onChange:e=>{gt(e)}}),React__default.default.createElement(index$d.default,{onChange:e=>{_e(e)},zoom:k}),React__default.default.createElement(index$e,{EventBus:lbAnnotation.EventBus})));return c?React__default.default.createElement(AudioPlayerContext.Provider,{value:c},qe,C.map(e=>{const{id:r}=e,t=document.querySelector(`[data-id=${r}]`);return t?React__default.default.createElement(index$f,{el:t,key:r,region:e,edgeAdsorption:fe,clipping:z,zoom:k,instance:q(r)}):null}),React__default.default.createElement(index$g.default,{footer:He})):qe};exports.AudioPlayer=AudioPlayer,exports.AudioPlayerContext=AudioPlayerContext;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import i,{useState as g,useRef as z,useEffect as A}from"react";import{getWebPcm2WavBase64 as Gt}from"../audioAnnotate/utils/getWebPcm2Wac.js";import Yt,{debounce as Jt,sortBy as Qt}from"lodash";import{PauseOutlined as er,CaretRightOutlined as tr}from"@ant-design/icons";import{cKeyCode as rr,cTool as or,EventBus as _}from"@labelbee/lb-annotation";import{Button as nr}from"antd";import ir from"../invalidPage/index.js";import lr from"../imageError/index.js";import{classnames as $}from"../../utils/index.js";import sr,{EPlayerType as ar}from"../videoPlayer/components/SpeedController/index.js";import ur from"@labelbee/wavesurfer";import cr from"@labelbee/wavesurfer/dist/plugin/wavesurfer.regions.js";import dr from"@labelbee/wavesurfer/dist/plugin/wavesurfer.cursor.js";import mr,{audioZoomInfo as Xe}from"./zoomSlider/index.js";import pr from"./labelDisplayToggle/index.js";import fr from"./clipRegion/index.js";import{useAudioClipStore as vr}from"../audioAnnotate/audioContext/index.js";import{useLatest as H,useUpdate as gr,useDeepCompareEffect as Ze,useThrottleFn as br}from"ahooks";import yr from"./useAudioScroll/index.js";import b from"./index.module.scss.js";import{getAttributeColor as _r,formatTime as qe,timeFormat as Ke,dispatchResizeEvent as Er,precisionMinus as Ve,isDoubleClick as hr,getCanMoveRange as Pr}from"../../utils/audio.js";import Sr from"./progressDot/index.js";import Cr from"./clipTip/index.js";import Rr from"./useSwitchHotkey/index.js";import wr from"./useAudioCombine/index.js";import Tr from"./useAudioSegment/index.js";import Ar from"./combineTip/index.js";import jr from"./segmentTip/index.js";import xr from"../../views/MainView/toolFooter/index.js";import{decimalReserved as U}from"../videoPlayer/utils.js";var Dr=Object.defineProperty,Mr=Object.defineProperties,kr=Object.getOwnPropertyDescriptors,Ge=Object.getOwnPropertySymbols,Ir=Object.prototype.hasOwnProperty,Br=Object.prototype.propertyIsEnumerable,Ye=(f,a,u)=>a in f?Dr(f,a,{enumerable:!0,configurable:!0,writable:!0,value:u}):f[a]=u,Je=(f,a)=>{for(var u in a||(a={}))Ir.call(a,u)&&Ye(f,u,a[u]);if(Ge)for(var u of Ge(a))Br.call(a,u)&&Ye(f,u,a[u]);return f},Qe=(f,a)=>Mr(f,kr(a));const{EToolName:et}=or,X=rr.default,tt=.1,rt=i.createContext({count:0,isEdit:!1,toolName:et.Empty,imgIndex:0}),Lr=({fileData:f={},onLoaded:a,context:u,invalid:ot,height:nt,hideError:it,onError:ce,updateRegion:j,removeRegion:L,regions:x=[],activeToolPanel:lt,clipConfigurable:st,clipTextConfigurable:at,clipAttributeList:ut,clipAttributeConfigurable:de,secondaryAttributeConfigurable:ct,subAttributeList:dt,isCheck:S,hoverRegionId:Z,footer:mt,drawLayerSlot:me})=>{var pe,fe;const{url:O,path:ve}=f,[q,K]=g(!1),[ge,be]=g(!1),[C,pt]=g(0),[ft,ye]=g(!1),[N,_e]=g(0),n=z(null),R=z(null),Ee=z(C),V=e=>{Ee.current=e,pt(e)},[he,vt]=g(0),[F,gt]=g(1),G=z(null),[Pe,bt]=g({}),{audioClipState:Y,setAudioClipState:k}=vr(),[J,Q]=g(!1),c=H(Y),Se=H(Pe),yt=H(q),D=H(x),Ce=gr(),[Re,_t]=g([]),[we,Et]=g({}),ht=Jt(()=>{_.emit("audioZoom")},500),Te=e=>{e<Xe.min||e>Xe.max||(gt(e),Er(),ht())};yr({container:G.current,target:document.querySelector(`[data-id=${(fe=(pe=c.current)==null?void 0:pe.selectedRegion)==null?void 0:fe.id}]`),clipping:J,zoom:F,zoomHandler:Te});const W=()=>{let e=D.current;const{attributeLockList:r}=c.current;r.length&&(e=e.filter(t=>r.includes(t.attribute))),te(),e.forEach(t=>{var o;(o=n.current)==null||o.addRegion(Qe(Je({},t),{drag:!S,resize:!S,color:"rgba(0, 0, 0, 0)"}))}),Ce()},m=e=>{var r,t,o,l,s,p,E;const{id:d,loop:v=!0,playImmediately:P=!1}=e;if(d){const M=(o=(t=(r=n.current)==null?void 0:r.regions)==null?void 0:t.list)!=null?o:{};Object.entries(M).forEach(([,y])=>{const{id:T}=y;d===T?y.select():y.cancelSelect()}),k({selectedRegion:{id:d,loop:v},selectedAttribute:(p=(s=(l=D.current)==null?void 0:l.find(y=>y.id===d))==null?void 0:s.attribute)!=null?p:""}),v&&P&&((E=I(d))==null||E.playLoop())}else k({selectedRegion:{}})},{combineInstance:Pt}=wr({waveRef:n,sortByStartRegions:Re,regionMap:we,updateRegion:j,removeRegion:L,generateRegions:W,setSelectedRegion:m}),{segmentInstance:St,onRegionMouseMove:Ct,segmentTimeTip:Rt}=Tr({waveRef:n,regionMap:we,updateRegion:j,removeRegion:L,generateRegions:W,setSelectedRegion:m}),Ae={clipTextConfigurable:at,clipAttributeList:ut,clipAttributeConfigurable:de,clipConfigurable:st,secondaryAttributeConfigurable:ct,subAttributeList:dt};A(()=>{k({selectedAttribute:""})},[de]),A(()=>{ee()},[Y.selectedAttribute]),A(()=>{W()},[Y.attributeLockList]),Ze(()=>{k(Ae),setTimeout(()=>{je()})},[Ae]),Ze(()=>{_t(Qt(x,["start"])),Et(x.reduce((e,r)=>{const{id:t}=r;return Qe(Je({},e),{[t]:r})},{}))},[x]),A(()=>{if(Z){const e=yt.current;m({id:Z,loop:e,playImmediately:!0})}else m({})},[Z]);const je=()=>{var e,r;c.current.clipConfigurable?(!S&&n.current&&((e=n.current)==null||e.enableDragSelection({slop:5})),W()):((r=n.current)==null||r.disableDragSelection(),te()),ee()},ee=()=>{var e,r,t,o,l;let s="";c.current.clipConfigurable?s=_r(c.current.selectedAttribute,(e=c.current.clipAttributeList)!=null?e:[]):s="transparent",((t=(r=n==null?void 0:n.current)==null?void 0:r.cursor)==null?void 0:t.cursor)&&((l=(o=n==null?void 0:n.current)==null?void 0:o.cursor)==null||l.setStyle({border:`2px dashed ${s}`}))},I=e=>{var r,t,o;return((o=(t=(r=n.current)==null?void 0:r.regions)==null?void 0:t.list)!=null?o:{})[e]},xe=()=>{var e,r;if(O){const t=((r=(e=ve==null?void 0:ve.split("."))==null?void 0:e.pop())==null?void 0:r.toLowerCase())==="pcm";ye(!1),t?Gt(O).then(o=>{De(o)}):De(O)}},De=e=>{var r;e&&(be(!0),V(0),_e(0),(r=n==null?void 0:n.current)==null||r.load(e))},te=()=>{var e;(e=n.current)==null||e.clearRegions()},re=e=>{const r=I(e);r&&(Q(!1),r==null||r.remove(),L==null||L(e),m({}))},{run:Me}=br(m,{wait:500});Rr({sortByStartRegions:Re,setSelectedRegion:m});const wt=e=>{const{start:r,end:t}=Se.current;return(r||t)&&e.update(Se.current),e},Tt=({action:e,id:r,eventDownTime:t})=>{var o,l;if(!c.current.clipConfigurable)return;r&&m({id:r});const s=I((r!=null?r:(o=c.current.selectedRegion)==null?void 0:o.id)||""),p=[];(e==="create"?D.current:(l=D.current)==null?void 0:l.filter(v=>v.id!==s.id)).forEach(v=>{const{start:P,end:M,attribute:y}=v;y===c.current.selectedAttribute&&[P,M].forEach(T=>{p.includes(T)||p.push(T)})});const d=Pr(p.sort((v,P)=>v-P),t);n.current.range=d},At=e=>{ee(),setTimeout(()=>{Q(!1)});const r=wt(e),{id:t,start:o,end:l}=r;m({id:t,playImmediately:!0});const s={id:t,start:U(o,3),end:U(l,3)};j==null||j(s),Ce()},jt=()=>{const e=ur.create({container:"#waveform",waveColor:"#999",progressColor:"#999",height:nt||245,normalize:!0,cursorWidth:2,cursorColor:"white",responsive:0,hideScrollbar:!0,plugins:[cr.create({regions:x,dragSelection:{slop:5},canMove:!1}),dr.create({opacity:1,customStyle:{border:"2px dashed transparent"}})]}),r=()=>{var t;V(((t=n==null?void 0:n.current)==null?void 0:t.getCurrentTime())||0)};e.on("ready",()=>{var t;const o=((t=n==null?void 0:n.current)==null?void 0:t.getDuration())||0;_e(o),r(),a==null||a({duration:Math.round(o)}),be(!1),B(),_.on("setCurrentTimeByPosition",ne),_.on("clearRegions",te),_.on("removeRegionById",re),_.on("setSelectedRegion",Me),e.on("regions-eventDown",Tt),je()}),e.on("audioprocess",()=>{r()}),e.on("play",()=>{K(!0)}),e.on("pause",()=>{K(!1)}),e.on("finish",()=>{K(!1)}),e.on("seek",()=>{r()}),e.on("error",()=>{ye(!0),a==null||a({hasError:!0}),ce==null||ce()}),e.on("region-created",t=>{const{id:o,start:l,end:s}=t;if(D.current.find(E=>E.id===o))return;const p={id:o,start:U(l,3),end:U(s,3),attribute:c.current.selectedAttribute,text:""};j==null||j(p)}),e.on("region-updated",(t,o)=>{var l,s,p,E,d,v,P,M,y,T;const We=o==null?void 0:o.action;k({combined:!1,segment:!1}),We==="resize"&&((s=(l=n==null?void 0:n.current)==null?void 0:l.cursor)==null||s.setStyle({borderStyle:"solid"})),We==="drag"&&((E=(p=n==null?void 0:n.current)==null?void 0:p.cursor)==null||E.setStyle({borderColor:"transparent"}));const ie={},le=[],se={},zt=(d=D.current)==null?void 0:d.filter(h=>h.id!==t.id),$t=(M=(P=(v=n.current)==null?void 0:v.regions)==null?void 0:P.list)!=null?M:{};zt.forEach(h=>{var $e,He;const{element:ae}=($e=$t[h.id])!=null?$e:{},{start:Xt,end:Zt}=h;if(ae){const{x:Ue,width:qt}=((He=ae.getBoundingClientRect)==null?void 0:He.call(ae))||{},Kt=Ue+qt;[Ue,Kt].forEach((ue,Vt)=>{le.includes(ue)||(le.push(ue),se[ue]=Vt===0?Xt:Zt)})}});const{x:ze,width:Ht}=((T=(y=t.element).getBoundingClientRect)==null?void 0:T.call(y))||{},Ut=ze+Ht;le.forEach(h=>{Math.abs(Ve(h,ze))<5&&(ie.start=se[h]),Math.abs(Ve(h,Ut))<5&&(ie.end=se[h])}),bt(ie),Me({id:t.id}),Q(!0)}),e.on("region-update-end",t=>{At(t)}),e.on("region-contextmenu",(t,o)=>{if(!S){if(o.preventDefault(),o.stopPropagation(),hr(o)){re(t.id);return}m({id:t.id,playImmediately:!0})}}),e.on("region-click",(t,o,l)=>{if(!S){if(o.preventDefault(),o.stopPropagation(),c.current.combined){Pt(t);return}if(c.current.segment){St(t,l);return}m({id:t.id,playImmediately:!0})}}),e.on("region-mousemove",Ct),n.current=e},xt=q?i.createElement(er,null):i.createElement(tr,null),ke=e=>e?`${parseFloat((e/N*100).toFixed(4))}%`:"0%",Ie=ke(C),Dt=ke(he),w=()=>{if(!ge)return n==null?void 0:n.current},Mt=()=>{var e;(e=w())==null||e.skipForward(tt)},kt=()=>{var e;(e=w())==null||e.skipBackward(tt)},B=()=>{var e;(e=w())==null||e.playPause(),m({})},Be=e=>{var r;switch(e.keyCode){case X.Right:Mt();break;case X.Left:kt();break;case X.Space:e.preventDefault(),B();break;case X.Delete:if(!S){const{id:t}=((r=c.current)==null?void 0:r.selectedRegion)||{};t&&re(t)}break}},It=e=>{ne(e)},Le=Yt.throttle(It,50);let oe=!1;const Oe=()=>{oe&&(B(),oe=!1),document.removeEventListener("mousemove",Le),document.removeEventListener("mouseup",Oe)},Bt=e=>{ne(e),q&&(oe=!0,B()),document.addEventListener("mousemove",Le),document.addEventListener("mouseup",Oe)},Lt=()=>{xe()};A(()=>(jt(),()=>{var e;(e=n==null?void 0:n.current)==null||e.destroy(),n.current=null,_.unbindAll("setCurrentTimeByPosition"),_.unbindAll("clearRegions"),_.unbindAll("removeRegionById"),_.unbindAll("setSelectedRegion")}),[]);const Ot=e=>{var r,t,o;(r=w())==null||r.playPause(),(t=w())==null||t.setPlaybackRate(e),(o=w())==null||o.playPause()};A(()=>(document.addEventListener("keydown",Be),()=>{document.removeEventListener("keydown",Be)})),A(()=>{m({}),xe()},[O]);const Ne=e=>{var r,t,o,l;if((n==null?void 0:n.current)&&(R==null?void 0:R.current)){const s=(t=(r=n==null?void 0:n.current)==null?void 0:r.getDuration())!=null?t:0,p=(o=R==null?void 0:R.current)==null?void 0:o.getBoundingClientRect();let d=(e.clientX-p.left)/(((l=R==null?void 0:R.current)==null?void 0:l.clientWidth)||0)*s;return d>s&&(d=s),d}return 0},ne=e=>{var r;const t=Ne(e);(r=n==null?void 0:n.current)==null||r.skip(t-Ee.current),V(t)},Nt=e=>{vt(Ne(e))},Ft=N?Math.max(N-C,0):0,Wt=(u==null?void 0:u.toolName)!==et.Empty&&(u==null?void 0:u.isEdit)!==!0&&(lt==="remark"||S),Fe=i.createElement("div",{className:b.audioPlayer},ft&&!it&&i.createElement(lr,{fileTypeName:"\u97F3\u9891",ignoreOffsetY:!0,reloadImage:Lt,backgroundColor:"#ffffffbb"}),i.createElement(Cr,{getRegionInstanceById:I,clipping:J}),i.createElement(Ar,{container:G.current}),i.createElement(jr,{segmentTimeTip:Rt}),i.createElement("div",{className:b.waveformContainer,ref:G},i.createElement("div",{id:"waveform",style:{width:`${F*100}%`},className:$({[b.waveform]:!0,"bee-audio-combined":c.current.combined,"bee-audio-clip":c.current.clipConfigurable})},ot&&i.createElement(ir,{isAudio:!0}),i.createElement("div",{ref:R,className:b.progress,onMouseDown:Bt,onMouseMove:Nt},i.createElement("div",{className:$({[b.radioTooltip]:!0}),style:{left:Ie}},qe(C)),i.createElement("div",{className:$({[b.radioTooltip]:!0,[b.mouseTooltip]:!0}),style:{left:Dt}},qe(he)),i.createElement(Sr,{playPercentage:Ie})),Wt&&(me==null?void 0:me({currentTime:C,remainingTime:Ft,audioPlayer:w()})))),i.createElement("div",{className:b.controlBar},i.createElement(nr,{type:"link",icon:xt,onClick:()=>{B()},className:$({[b.playButton]:!0,[b.playButtonDisabled]:ge})}),i.createElement("span",{className:b.time},`${Ke(C,"ss.SSS")} / -${Ke(N-C,"ss.SSS")}`),i.createElement(sr,{playerType:ar.Audio,onChange:e=>{Ot(e)}}),i.createElement(mr,{onChange:e=>{Te(e)},zoom:F}),i.createElement(pr,{EventBus:_})));return u?i.createElement(rt.Provider,{value:u},Fe,x.map(e=>{const{id:r}=e,t=document.querySelector(`[data-id=${r}]`);return t?i.createElement(fr,{el:t,key:r,region:e,edgeAdsorption:Pe,clipping:J,zoom:F,instance:I(r)}):null}),i.createElement(xr,{footer:mt})):Fe};export{Lr as AudioPlayer,rt as AudioPlayerContext};
|
|
1
|
+
import i,{useState as g,useRef as z,useEffect as A}from"react";import{getWebPcm2WavBase64 as Gt}from"../audioAnnotate/utils/getWebPcm2Wac.js";import Yt,{debounce as Jt,sortBy as Qt}from"lodash";import{PauseOutlined as er,CaretRightOutlined as tr}from"@ant-design/icons";import{cKeyCode as rr,cTool as or,EventBus as E,TagUtils as nr}from"@labelbee/lb-annotation";import{Button as ir}from"antd";import lr from"../invalidPage/index.js";import sr from"../imageError/index.js";import{classnames as $}from"../../utils/index.js";import ar,{EPlayerType as ur}from"../videoPlayer/components/SpeedController/index.js";import cr from"@labelbee/wavesurfer";import dr from"@labelbee/wavesurfer/dist/plugin/wavesurfer.regions.js";import mr from"@labelbee/wavesurfer/dist/plugin/wavesurfer.cursor.js";import pr,{audioZoomInfo as Xe}from"./zoomSlider/index.js";import fr from"./labelDisplayToggle/index.js";import vr from"./clipRegion/index.js";import{useAudioClipStore as gr}from"../audioAnnotate/audioContext/index.js";import{useLatest as H,useUpdate as br,useDeepCompareEffect as Ze,useThrottleFn as yr}from"ahooks";import _r from"./useAudioScroll/index.js";import b from"./index.module.scss.js";import{getAttributeColor as Er,formatTime as qe,timeFormat as Ke,dispatchResizeEvent as hr,precisionMinus as Ve,isDoubleClick as Cr,getCanMoveRange as Sr}from"../../utils/audio.js";import Pr from"./progressDot/index.js";import Rr from"./clipTip/index.js";import wr from"./useSwitchHotkey/index.js";import Tr from"./useAudioCombine/index.js";import Ar from"./useAudioSegment/index.js";import jr from"./combineTip/index.js";import xr from"./segmentTip/index.js";import Dr from"../../views/MainView/toolFooter/index.js";import{decimalReserved as U}from"../videoPlayer/utils.js";var Mr=Object.defineProperty,kr=Object.defineProperties,Ir=Object.getOwnPropertyDescriptors,Ge=Object.getOwnPropertySymbols,Br=Object.prototype.hasOwnProperty,Lr=Object.prototype.propertyIsEnumerable,Ye=(f,u,c)=>u in f?Mr(f,u,{enumerable:!0,configurable:!0,writable:!0,value:c}):f[u]=c,Je=(f,u)=>{for(var c in u||(u={}))Br.call(u,c)&&Ye(f,c,u[c]);if(Ge)for(var c of Ge(u))Lr.call(u,c)&&Ye(f,c,u[c]);return f},Qe=(f,u)=>kr(f,Ir(u));const{EToolName:et}=or,X=rr.default,tt=.1,rt=i.createContext({count:0,isEdit:!1,toolName:et.Empty,imgIndex:0}),Or=({fileData:f={},onLoaded:u,context:c,invalid:ot,height:nt,hideError:it,onError:ce,updateRegion:j,removeRegion:L,regions:x=[],activeToolPanel:lt,clipConfigurable:st,clipTextConfigurable:at,clipAttributeList:ut,clipAttributeConfigurable:de,secondaryAttributeConfigurable:ct,subAttributeList:dt,isCheck:S,hoverRegionId:Z,footer:mt,drawLayerSlot:me})=>{var pe,fe;const{url:O,path:ve}=f,[q,K]=g(!1),[ge,be]=g(!1),[P,pt]=g(0),[ft,ye]=g(!1),[N,_e]=g(0),n=z(null),R=z(null),Ee=z(P),V=e=>{Ee.current=e,pt(e)},[he,vt]=g(0),[F,gt]=g(1),G=z(null),[Ce,bt]=g({}),{audioClipState:Y,setAudioClipState:k}=gr(),[J,Q]=g(!1),d=H(Y),Se=H(Ce),yt=H(q),D=H(x),Pe=br(),[Re,_t]=g([]),[we,Et]=g({}),ht=Jt(()=>{E.emit("audioZoom")},500),Te=e=>{e<Xe.min||e>Xe.max||(gt(e),hr(),ht())};_r({container:G.current,target:document.querySelector(`[data-id=${(fe=(pe=d.current)==null?void 0:pe.selectedRegion)==null?void 0:fe.id}]`),clipping:J,zoom:F,zoomHandler:Te});const W=()=>{let e=D.current;const{attributeLockList:r}=d.current;r.length&&(e=e.filter(t=>r.includes(t.attribute))),te(),e.forEach(t=>{var o;(o=n.current)==null||o.addRegion(Qe(Je({},t),{drag:!S,resize:!S,color:"rgba(0, 0, 0, 0)"}))}),Pe()},m=e=>{var r,t,o,l,s,p,y;const{id:a,loop:v=!0,playImmediately:C=!1}=e;if(a){const M=(o=(t=(r=n.current)==null?void 0:r.regions)==null?void 0:t.list)!=null?o:{};Object.entries(M).forEach(([,_])=>{const{id:T}=_;a===T?_.select():_.cancelSelect()}),k({selectedRegion:{id:a,loop:v},selectedAttribute:(p=(s=(l=D.current)==null?void 0:l.find(_=>_.id===a))==null?void 0:s.attribute)!=null?p:""}),v&&C&&((y=I(a))==null||y.playLoop())}else k({selectedRegion:{}})},{combineInstance:Ct}=Tr({waveRef:n,sortByStartRegions:Re,regionMap:we,updateRegion:j,removeRegion:L,generateRegions:W,setSelectedRegion:m}),{segmentInstance:St,onRegionMouseMove:Pt,segmentTimeTip:Rt}=Ar({waveRef:n,regionMap:we,updateRegion:j,removeRegion:L,generateRegions:W,setSelectedRegion:m}),Ae={clipTextConfigurable:at,clipAttributeList:ut,clipAttributeConfigurable:de,clipConfigurable:st,secondaryAttributeConfigurable:ct,subAttributeList:dt};A(()=>{k({selectedAttribute:""})},[de]),A(()=>{ee()},[Y.selectedAttribute]),A(()=>{W()},[Y.attributeLockList]),Ze(()=>{k(Ae),setTimeout(()=>{je()})},[Ae]),Ze(()=>{_t(Qt(x,["start"])),Et(x.reduce((e,r)=>{const{id:t}=r;return Qe(Je({},e),{[t]:r})},{}))},[x]),A(()=>{if(Z){const e=yt.current;m({id:Z,loop:e,playImmediately:!0})}else m({})},[Z]);const je=()=>{var e,r;d.current.clipConfigurable?(!S&&n.current&&((e=n.current)==null||e.enableDragSelection({slop:5})),W()):((r=n.current)==null||r.disableDragSelection(),te()),ee()},ee=()=>{var e,r,t,o,l;let s="";d.current.clipConfigurable?s=Er(d.current.selectedAttribute,(e=d.current.clipAttributeList)!=null?e:[]):s="transparent",((t=(r=n==null?void 0:n.current)==null?void 0:r.cursor)==null?void 0:t.cursor)&&((l=(o=n==null?void 0:n.current)==null?void 0:o.cursor)==null||l.setStyle({border:`2px dashed ${s}`}))},I=e=>{var r,t,o;return((o=(t=(r=n.current)==null?void 0:r.regions)==null?void 0:t.list)!=null?o:{})[e]},xe=()=>{var e,r;if(O){const t=((r=(e=ve==null?void 0:ve.split("."))==null?void 0:e.pop())==null?void 0:r.toLowerCase())==="pcm";ye(!1),t?Gt(O).then(o=>{De(o)}):De(O)}},De=e=>{var r;e&&(be(!0),V(0),_e(0),(r=n==null?void 0:n.current)==null||r.load(e))},te=()=>{var e;(e=n.current)==null||e.clearRegions()},re=e=>{const r=I(e);r&&(Q(!1),r==null||r.remove(),L==null||L(e),m({}))},{run:Me}=yr(m,{wait:500});wr({sortByStartRegions:Re,setSelectedRegion:m});const wt=e=>{const{start:r,end:t}=Se.current;return(r||t)&&e.update(Se.current),e},Tt=({action:e,id:r,eventDownTime:t})=>{var o,l;if(!d.current.clipConfigurable)return;r&&m({id:r});const s=I((r!=null?r:(o=d.current.selectedRegion)==null?void 0:o.id)||""),p=[];(e==="create"?D.current:(l=D.current)==null?void 0:l.filter(v=>v.id!==s.id)).forEach(v=>{const{start:C,end:M,attribute:_}=v;_===d.current.selectedAttribute&&[C,M].forEach(T=>{p.includes(T)||p.push(T)})});const a=Sr(p.sort((v,C)=>v-C),t);n.current.range=a},At=e=>{ee(),setTimeout(()=>{Q(!1)});const r=wt(e),{id:t,start:o,end:l}=r;m({id:t,playImmediately:!0});const s={id:t,start:U(o,3),end:U(l,3)};j==null||j(s),Pe()},jt=()=>{const e=cr.create({container:"#waveform",waveColor:"#999",progressColor:"#999",height:nt||245,normalize:!0,cursorWidth:2,cursorColor:"white",responsive:0,hideScrollbar:!0,plugins:[dr.create({regions:x,dragSelection:{slop:5},canMove:!1}),mr.create({opacity:1,customStyle:{border:"2px dashed transparent"}})]}),r=()=>{var t;V(((t=n==null?void 0:n.current)==null?void 0:t.getCurrentTime())||0)};e.on("ready",()=>{var t;const o=((t=n==null?void 0:n.current)==null?void 0:t.getDuration())||0;_e(o),r(),u==null||u({duration:Math.round(o)}),be(!1),B(),E.on("setCurrentTimeByPosition",ne),E.on("clearRegions",te),E.on("removeRegionById",re),E.on("setSelectedRegion",Me),e.on("regions-eventDown",Tt),je()}),e.on("audioprocess",()=>{r()}),e.on("play",()=>{K(!0)}),e.on("pause",()=>{K(!1)}),e.on("finish",()=>{K(!1)}),e.on("seek",()=>{r()}),e.on("error",()=>{ye(!0),u==null||u({hasError:!0}),ce==null||ce()}),e.on("region-created",t=>{var o;const{id:l,start:s,end:p}=t;if(D.current.find(a=>a.id===l))return;const y={id:l,start:U(s,3),end:U(p,3),attribute:d.current.selectedAttribute,text:""};if(d.current.secondaryAttributeConfigurable){const a=nr.getDefaultResultByConfig((o=d.current.subAttributeList)!=null?o:[]);y.subAttribute=a!=null?a:{}}j==null||j(y)}),e.on("region-updated",(t,o)=>{var l,s,p,y,a,v,C,M,_,T;const We=o==null?void 0:o.action;k({combined:!1,segment:!1}),We==="resize"&&((s=(l=n==null?void 0:n.current)==null?void 0:l.cursor)==null||s.setStyle({borderStyle:"solid"})),We==="drag"&&((y=(p=n==null?void 0:n.current)==null?void 0:p.cursor)==null||y.setStyle({borderColor:"transparent"}));const ie={},le=[],se={},zt=(a=D.current)==null?void 0:a.filter(h=>h.id!==t.id),$t=(M=(C=(v=n.current)==null?void 0:v.regions)==null?void 0:C.list)!=null?M:{};zt.forEach(h=>{var $e,He;const{element:ae}=($e=$t[h.id])!=null?$e:{},{start:Xt,end:Zt}=h;if(ae){const{x:Ue,width:qt}=((He=ae.getBoundingClientRect)==null?void 0:He.call(ae))||{},Kt=Ue+qt;[Ue,Kt].forEach((ue,Vt)=>{le.includes(ue)||(le.push(ue),se[ue]=Vt===0?Xt:Zt)})}});const{x:ze,width:Ht}=((T=(_=t.element).getBoundingClientRect)==null?void 0:T.call(_))||{},Ut=ze+Ht;le.forEach(h=>{Math.abs(Ve(h,ze))<5&&(ie.start=se[h]),Math.abs(Ve(h,Ut))<5&&(ie.end=se[h])}),bt(ie),Me({id:t.id}),Q(!0)}),e.on("region-update-end",t=>{At(t)}),e.on("region-contextmenu",(t,o)=>{if(!S){if(o.preventDefault(),o.stopPropagation(),Cr(o)){re(t.id);return}m({id:t.id,playImmediately:!0})}}),e.on("region-click",(t,o,l)=>{if(!S){if(o.preventDefault(),o.stopPropagation(),d.current.combined){Ct(t);return}if(d.current.segment){St(t,l);return}m({id:t.id,playImmediately:!0})}}),e.on("region-mousemove",Pt),n.current=e},xt=q?i.createElement(er,null):i.createElement(tr,null),ke=e=>e?`${parseFloat((e/N*100).toFixed(4))}%`:"0%",Ie=ke(P),Dt=ke(he),w=()=>{if(!ge)return n==null?void 0:n.current},Mt=()=>{var e;(e=w())==null||e.skipForward(tt)},kt=()=>{var e;(e=w())==null||e.skipBackward(tt)},B=()=>{var e;(e=w())==null||e.playPause(),m({})},Be=e=>{var r;switch(e.keyCode){case X.Right:Mt();break;case X.Left:kt();break;case X.Space:e.preventDefault(),B();break;case X.Delete:if(!S){const{id:t}=((r=d.current)==null?void 0:r.selectedRegion)||{};t&&re(t)}break}},It=e=>{ne(e)},Le=Yt.throttle(It,50);let oe=!1;const Oe=()=>{oe&&(B(),oe=!1),document.removeEventListener("mousemove",Le),document.removeEventListener("mouseup",Oe)},Bt=e=>{ne(e),q&&(oe=!0,B()),document.addEventListener("mousemove",Le),document.addEventListener("mouseup",Oe)},Lt=()=>{xe()};A(()=>(jt(),()=>{var e;(e=n==null?void 0:n.current)==null||e.destroy(),n.current=null,E.unbindAll("setCurrentTimeByPosition"),E.unbindAll("clearRegions"),E.unbindAll("removeRegionById"),E.unbindAll("setSelectedRegion")}),[]);const Ot=e=>{var r,t,o;(r=w())==null||r.playPause(),(t=w())==null||t.setPlaybackRate(e),(o=w())==null||o.playPause()};A(()=>(document.addEventListener("keydown",Be),()=>{document.removeEventListener("keydown",Be)})),A(()=>{m({}),xe()},[O]);const Ne=e=>{var r,t,o,l;if((n==null?void 0:n.current)&&(R==null?void 0:R.current)){const s=(t=(r=n==null?void 0:n.current)==null?void 0:r.getDuration())!=null?t:0,p=(o=R==null?void 0:R.current)==null?void 0:o.getBoundingClientRect();let a=(e.clientX-p.left)/(((l=R==null?void 0:R.current)==null?void 0:l.clientWidth)||0)*s;return a>s&&(a=s),a}return 0},ne=e=>{var r;const t=Ne(e);(r=n==null?void 0:n.current)==null||r.skip(t-Ee.current),V(t)},Nt=e=>{vt(Ne(e))},Ft=N?Math.max(N-P,0):0,Wt=(c==null?void 0:c.toolName)!==et.Empty&&(c==null?void 0:c.isEdit)!==!0&&(lt==="remark"||S),Fe=i.createElement("div",{className:b.audioPlayer},ft&&!it&&i.createElement(sr,{fileTypeName:"\u97F3\u9891",ignoreOffsetY:!0,reloadImage:Lt,backgroundColor:"#ffffffbb"}),i.createElement(Rr,{getRegionInstanceById:I,clipping:J}),i.createElement(jr,{container:G.current}),i.createElement(xr,{segmentTimeTip:Rt}),i.createElement("div",{className:b.waveformContainer,ref:G},i.createElement("div",{id:"waveform",style:{width:`${F*100}%`},className:$({[b.waveform]:!0,"bee-audio-combined":d.current.combined,"bee-audio-clip":d.current.clipConfigurable})},ot&&i.createElement(lr,{isAudio:!0}),i.createElement("div",{ref:R,className:b.progress,onMouseDown:Bt,onMouseMove:Nt},i.createElement("div",{className:$({[b.radioTooltip]:!0}),style:{left:Ie}},qe(P)),i.createElement("div",{className:$({[b.radioTooltip]:!0,[b.mouseTooltip]:!0}),style:{left:Dt}},qe(he)),i.createElement(Pr,{playPercentage:Ie})),Wt&&(me==null?void 0:me({currentTime:P,remainingTime:Ft,audioPlayer:w()})))),i.createElement("div",{className:b.controlBar},i.createElement(ir,{type:"link",icon:xt,onClick:()=>{B()},className:$({[b.playButton]:!0,[b.playButtonDisabled]:ge})}),i.createElement("span",{className:b.time},`${Ke(P,"ss.SSS")} / -${Ke(N-P,"ss.SSS")}`),i.createElement(ar,{playerType:ur.Audio,onChange:e=>{Ot(e)}}),i.createElement(pr,{onChange:e=>{Te(e)},zoom:F}),i.createElement(fr,{EventBus:E})));return c?i.createElement(rt.Provider,{value:c},Fe,x.map(e=>{const{id:r}=e,t=document.querySelector(`[data-id=${r}]`);return t?i.createElement(vr,{el:t,key:r,region:e,edgeAdsorption:Ce,clipping:J,zoom:F,instance:I(r)}):null}),i.createElement(Dr,{footer:mt})):Fe};export{Or as AudioPlayer,rt as AudioPlayerContext};
|