@labelbee/lb-components 1.24.0-alpha.52 → 1.24.0-alpha.54

package/dist/components/videoAnnotate/videoClipTool/components/ToolTipForClip.js

@@ -1 +1 @@
-"use strict";var audio=require("../../../../utils/audio.js"),lbAnnotation=require("@labelbee/lb-annotation"),antd=require("antd"),React=require("react"),constant=require("../constant.js"),utils=require("../../../videoPlayer/utils.js"),reactI18next=require("react-i18next");function _interopDefaultLegacy(t){return t&&typeof t=="object"&&"default"in t?t:{default:t}}var React__default=_interopDefaultLegacy(React);const ToolTipForClip=t=>{var a,l;const{slot:n,item:e,attributeList:o}=t,{t:r}=reactI18next.useTranslation();if(!n)return null;const{type:s,attribute:d,textAttribute:c}=e;if(e.start===void 0||e.end===void 0)return null;const i=utils.decimalReserved(e.start,2),u=(l=utils.decimalReserved((a=e.end)!=null?a:0,2))!=null?l:0,v=React__default.default.createElement("div",null,React__default.default.createElement("div",null,s===constant.ETimeSliceType.Period?`${audio.timeFormat(i,"ss:SS")}~${audio.timeFormat(u,"ss:SS")}\uFF0C${audio.precisionMinus(u,i)}s`:audio.timeFormat(i,"ss:SS")),React__default.default.createElement("div",null,`${r("Attribute")}\uFF1A${lbAnnotation.AttributeUtils.getAttributeShowText(d,o)||r("NoAttribute")}`),React__default.default.createElement("div",null,`${r("textTool")}\uFF1A${c}`));return React__default.default.createElement(antd.Tooltip,{title:v},n)};module.exports=ToolTipForClip;
+"use strict";var audio=require("../../../../utils/audio.js"),lbAnnotation=require("@labelbee/lb-annotation"),antd=require("antd"),React=require("react"),constant=require("../constant.js"),utils=require("../../../videoPlayer/utils.js"),reactI18next=require("react-i18next");function _interopDefaultLegacy(t){return t&&typeof t=="object"&&"default"in t?t:{default:t}}var React__default=_interopDefaultLegacy(React);const ToolTipForClip=t=>{var a,l;const{slot:u,item:e,attributeList:o}=t,{t:r}=reactI18next.useTranslation();if(!u)return null;const{type:s,attribute:d,textAttribute:c,text:v}=e;if(e.start===void 0||e.end===void 0)return null;const i=utils.decimalReserved(e.start,2),n=(l=utils.decimalReserved((a=e.end)!=null?a:0,2))!=null?l:0,m=React__default.default.createElement("div",null,React__default.default.createElement("div",null,s===constant.ETimeSliceType.Period?`${audio.timeFormat(i,"ss:SS")}~${audio.timeFormat(n,"ss:SS")}\uFF0C${audio.precisionMinus(n,i)}s`:audio.timeFormat(i,"ss:SS")),React__default.default.createElement("div",null,`${r("Attribute")}\uFF1A${lbAnnotation.AttributeUtils.getAttributeShowText(d,o)||r("NoAttribute")}`),React__default.default.createElement("div",null,`${r("SubAttribute")}\uFF1A${v}`),React__default.default.createElement("div",null,`${r("textTool")}\uFF1A${c}`));return React__default.default.createElement(antd.Tooltip,{title:m},u)};module.exports=ToolTipForClip;

package/dist/components/videoAnnotate/videoClipTool/components/videoTrack/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var audio=require("../../../../../utils/audio.js"),lbAnnotation=require("@labelbee/lb-annotation"),icons=require("@ant-design/icons"),React=require("react"),index$1=require("../resizableSnippet/index.js"),constant=require("../../constant.js"),ToolTipForClip=require("../ToolTipForClip.js"),index_module=require("./index.module.scss.js"),utils=require("../../../../videoPlayer/utils.js"),VideoClipToolContext=require("../../VideoClipToolContext.js"),index=require("../../../../videoPlayer/index.js"),reactI18next=require("react-i18next");function _interopDefaultLegacy(r){return r&&typeof r=="object"&&"default"in r?r:{default:r}}var React__default=_interopDefaultLegacy(React),__defProp=Object.defineProperty,__defProps=Object.defineProperties,__getOwnPropDescs=Object.getOwnPropertyDescriptors,__getOwnPropSymbols=Object.getOwnPropertySymbols,__hasOwnProp=Object.prototype.hasOwnProperty,__propIsEnum=Object.prototype.propertyIsEnumerable,__defNormalProp=(r,a,e)=>a in r?__defProp(r,a,{enumerable:!0,configurable:!0,writable:!0,value:e}):r[a]=e,__spreadValues=(r,a)=>{for(var e in a||(a={}))__hasOwnProp.call(a,e)&&__defNormalProp(r,e,a[e]);if(__getOwnPropSymbols)for(var e of __getOwnPropSymbols(a))__propIsEnum.call(a,e)&&__defNormalProp(r,e,a[e]);return r},__spreadProps=(r,a)=>__defProps(r,__getOwnPropDescs(a));const getDisplayContent=(r,a)=>{const{t:e}=reactI18next.useTranslation(),{attribute:u,textAttribute:n}=r;return[lbAnnotation.AttributeUtils.getAttributeShowText(u,a)||e("NoAttribute"),n?`${e("textTool")}: ${n}`:""].filter(m=>m).join("\uFF0C")},sortTrack=(r,a)=>{const e=(r||[]).filter(n=>n).map(()=>[]);r.forEach(n=>{if(n.id!==a){const l=e.findIndex(m=>{const i=n.start,s=n.end;return m.every(p=>{const v=[p.start,p.end],d=[i,s];return!lbAnnotation.MathUtils.isInRange(i,v)&&!lbAnnotation.MathUtils.isInRange(s,v)&&!lbAnnotation.MathUtils.isInRange(p.start,d)&&!lbAnnotation.MathUtils.isInRange(p.end,d)})});l>-1&&e[l].push(n)}});const u=fillArrayLen(e.filter(n=>n.length>0));return u==null?void 0:u.map(n=>({data:n,id:utils.hashCode(n==null?void 0:n.map(l=>l.id).join("_"))}))},fillArrayLen=(r,a=2)=>{let e=r;return e.length-a<0&&(e=e.concat(Array.from({length:a-e.length}))),e},VideoTrack=r=>{var a;const{currentTime:e,readonly:u,onTrackResizeStart:n}=r,{result:l,selectedAttribute:m,attributeList:i,selectedID:s,clipStatus:p,contextToCancel:v}=React.useContext(VideoClipToolContext.VideoClipToolContext),{duration:d}=React.useContext(index.VideoPlayerCtx),T=React.useRef(null),k=e/d,g=(t,o=4)=>`${utils.decimalReserved(t*100,o)}%`,x=t=>{if(t){const o=lbAnnotation.AttributeUtils.getAttributeColor(t.attribute,i),f=Math.max((t.end||e)-t.start,0)/d,c={backgroundColor:o,left:g(t.start/d,2),width:g(t.end?Math.max(f,.001):f,2),position:"absolute",borderRadius:5};return t.type===constant.ETimeSliceType.Time&&(delete c.width,delete c.backgroundColor,c.top="50%",c.transform="translate(-50%)",c.color=o),c}return{}},b=lbAnnotation.AttributeUtils.getAttributeColor(m,i),C=((a=T.current)==null?void 0:a.clientWidth)||0,_=utils.decimalReserved(Math.max(C*k,0),0),E=utils.decimalReserved(Math.min(_,Math.floor(C-68)),0),h=t=>{if(t)return t.type===constant.ETimeSliceType.Time?React__default.default.createElement(ToolTipForClip,{slot:React__default.default.createElement(icons.EnvironmentFilled,{style:x(t)}),item:__spreadProps(__spreadValues({},t),{end:t.end===null?e:t.end}),attributeList:i}):React__default.default.createElement(index$1,{track:t,currentTime:e,style:x(t),onResize:(o,f)=>r.onTrackResize(t.id,o,f),onTrackResizeStart:n,onClipping:p===constant.EClipStatus.Clipping,isSelected:t.id===s,readonly:u,attributeList:i})},P=React.useMemo(()=>{const t=sortTrack(l,s);return t==null?void 0:t.map((o,f)=>{var c;return React__default.default.createElement("div",{className:index_module.track,key:(o==null?void 0:o.id)||f},(c=o.data)==null?void 0:c.map((y,R)=>React__default.default.createElement(React__default.default.Fragment,{key:(y==null?void 0:y.id)||`${o==null?void 0:o.id}_${R}`},h(y))))})},[l,s,d,JSON.stringify(i)]),O=React.useMemo(()=>{const t=l.find(o=>(o==null?void 0:o.id)===s);return s&&t?React__default.default.createElement("div",{className:index_module.track,key:t==null?void 0:t.id},h(t)):null},[l,s,d,e,JSON.stringify(i)]);return React__default.default.createElement("div",{className:index_module.videoTrackContainer,ref:T,onContextMenu:v},React__default.default.createElement("div",{className:index_module.timeTrack}),React__default.default.createElement("div",{className:index_module.videoTrack},O,P),React__default.default.createElement("div",{className:index_module.timeline,style:{transform:`translate3d(${_}px, 0px, 0px)`,backgroundColor:b}}),React__default.default.createElement("div",{className:index_module.displayTime,style:{backgroundColor:b,transform:`translateX(${E}px, 0px, 0px)`}},audio.timeFormat(e)))};var VideoTrack$1=VideoTrack;exports.default=VideoTrack$1,exports.getDisplayContent=getDisplayContent;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var audio=require("../../../../../utils/audio.js"),lbAnnotation=require("@labelbee/lb-annotation"),icons=require("@ant-design/icons"),React=require("react"),index$1=require("../resizableSnippet/index.js"),constant=require("../../constant.js"),ToolTipForClip=require("../ToolTipForClip.js"),index_module=require("./index.module.scss.js"),utils=require("../../../../videoPlayer/utils.js"),VideoClipToolContext=require("../../VideoClipToolContext.js"),index=require("../../../../videoPlayer/index.js"),reactI18next=require("react-i18next");function _interopDefaultLegacy(r){return r&&typeof r=="object"&&"default"in r?r:{default:r}}var React__default=_interopDefaultLegacy(React),__defProp=Object.defineProperty,__defProps=Object.defineProperties,__getOwnPropDescs=Object.getOwnPropertyDescriptors,__getOwnPropSymbols=Object.getOwnPropertySymbols,__hasOwnProp=Object.prototype.hasOwnProperty,__propIsEnum=Object.prototype.propertyIsEnumerable,__defNormalProp=(r,a,e)=>a in r?__defProp(r,a,{enumerable:!0,configurable:!0,writable:!0,value:e}):r[a]=e,__spreadValues=(r,a)=>{for(var e in a||(a={}))__hasOwnProp.call(a,e)&&__defNormalProp(r,e,a[e]);if(__getOwnPropSymbols)for(var e of __getOwnPropSymbols(a))__propIsEnum.call(a,e)&&__defNormalProp(r,e,a[e]);return r},__spreadProps=(r,a)=>__defProps(r,__getOwnPropDescs(a));const getDisplayContent=(r,a)=>{const{t:e}=reactI18next.useTranslation(),{attribute:u,textAttribute:n}=r,l=lbAnnotation.AttributeUtils.getAttributeShowText(u,a)||e("NoAttribute"),p=(r==null?void 0:r.text)||"";return[l,p?`${e("SubAttribute")}: ${p}`:"",n?`${e("textTool")}: ${n}`:""].filter(i=>i).join("\uFF0C")},sortTrack=(r,a)=>{const e=(r||[]).filter(n=>n).map(()=>[]);r.forEach(n=>{if(n.id!==a){const l=e.findIndex(p=>{const i=n.start,s=n.end;return p.every(f=>{const v=[f.start,f.end],c=[i,s];return!lbAnnotation.MathUtils.isInRange(i,v)&&!lbAnnotation.MathUtils.isInRange(s,v)&&!lbAnnotation.MathUtils.isInRange(f.start,c)&&!lbAnnotation.MathUtils.isInRange(f.end,c)})});l>-1&&e[l].push(n)}});const u=fillArrayLen(e.filter(n=>n.length>0));return u==null?void 0:u.map(n=>({data:n,id:utils.hashCode(n==null?void 0:n.map(l=>l.id).join("_"))}))},fillArrayLen=(r,a=2)=>{let e=r;return e.length-a<0&&(e=e.concat(Array.from({length:a-e.length}))),e},VideoTrack=r=>{var a;const{currentTime:e,readonly:u,onTrackResizeStart:n}=r,{result:l,selectedAttribute:p,attributeList:i,selectedID:s,clipStatus:f,contextToCancel:v}=React.useContext(VideoClipToolContext.VideoClipToolContext),{duration:c}=React.useContext(index.VideoPlayerCtx),b=React.useRef(null),k=e/c,T=(t,o=4)=>`${utils.decimalReserved(t*100,o)}%`,x=t=>{if(t){const o=lbAnnotation.AttributeUtils.getAttributeColor(t.attribute,i),m=Math.max((t.end||e)-t.start,0)/c,d={backgroundColor:o,left:T(t.start/c,2),width:T(t.end?Math.max(m,.001):m,2),position:"absolute",borderRadius:5};return t.type===constant.ETimeSliceType.Time&&(delete d.width,delete d.backgroundColor,d.top="50%",d.transform="translate(-50%)",d.color=o),d}return{}},g=lbAnnotation.AttributeUtils.getAttributeColor(p,i),C=((a=b.current)==null?void 0:a.clientWidth)||0,_=utils.decimalReserved(Math.max(C*k,0),0),E=utils.decimalReserved(Math.min(_,Math.floor(C-68)),0),h=t=>{if(t)return t.type===constant.ETimeSliceType.Time?React__default.default.createElement(ToolTipForClip,{slot:React__default.default.createElement(icons.EnvironmentFilled,{style:x(t)}),item:__spreadProps(__spreadValues({},t),{end:t.end===null?e:t.end}),attributeList:i}):React__default.default.createElement(index$1,{track:t,currentTime:e,style:x(t),onResize:(o,m)=>r.onTrackResize(t.id,o,m),onTrackResizeStart:n,onClipping:f===constant.EClipStatus.Clipping,isSelected:t.id===s,readonly:u,attributeList:i})},P=React.useMemo(()=>{if(!c)return;const t=sortTrack(l,s);return t==null?void 0:t.map((o,m)=>{var d;return React__default.default.createElement("div",{className:index_module.track,key:(o==null?void 0:o.id)||m},(d=o.data)==null?void 0:d.map((y,O)=>React__default.default.createElement(React__default.default.Fragment,{key:(y==null?void 0:y.id)||`${o==null?void 0:o.id}_${O}`},h(y))))})},[l,s,c,JSON.stringify(i)]),A=React.useMemo(()=>{const t=l.find(o=>(o==null?void 0:o.id)===s);return s&&t?React__default.default.createElement("div",{className:index_module.track,key:t==null?void 0:t.id},h(t)):null},[l,s,c,e,JSON.stringify(i)]);return React__default.default.createElement("div",{className:index_module.videoTrackContainer,ref:b,onContextMenu:v},React__default.default.createElement("div",{className:index_module.timeTrack}),React__default.default.createElement("div",{className:index_module.videoTrack},A,P),React__default.default.createElement("div",{className:index_module.timeline,style:{transform:`translate3d(${_}px, 0px, 0px)`,backgroundColor:g}}),React__default.default.createElement("div",{className:index_module.displayTime,style:{backgroundColor:g,transform:`translateX(${E}px, 0px, 0px)`}},audio.timeFormat(e)))};var VideoTrack$1=VideoTrack;exports.default=VideoTrack$1,exports.getDisplayContent=getDisplayContent;

package/dist/components/videoAnnotate/videoClipTool/index.js

@@ -1 +1,2 @@
-"use strict";var lbAnnotation=require("@labelbee/lb-annotation"),index$2=require("../../../utils/index.js"),audio=require("../../../utils/audio.js"),antd=require("antd"),_=require("lodash"),React=require("react"),index_module=require("./index.module.scss.js"),VideoClipToolContext=require("./VideoClipToolContext.js"),constant=require("./constant.js"),index=require("../../videoPlayer/index.js"),index$1=require("./components/videoTimeSlicesOverVideo/index.js"),icon_videoCutting=require("../../../assets/annotation/video/icon_videoCutting.svg.js"),utils=require("../../videoPlayer/utils.js");function _interopDefaultLegacy(S){return S&&typeof S=="object"&&"default"in S?S:{default:S}}var ___default=_interopDefaultLegacy(_),React__default=_interopDefaultLegacy(React);class VideoClipTool extends React__default.default.Component{constructor(r){super(r);this.fns=new Map,this.throttledUpdateTime=___default.default.throttle(t=>{this.videoPlayer.currentTime=t},100,{trailing:!0}),this.stepInfo=()=>this.props.stepInfo,this.emitEvent=t=>{const e=this.fns.get(t);e&&e.forEach(i=>{i&&i()})},this.setValid=t=>{this.setState({valid:t}),t===!1&&(this.clearResult(),this.updateSidebar())},this.updateSidebar=()=>{this.emitEvent("changeClipSidebar"),this.emitEvent("updateTextAttribute"),this.emitEvent("changeAttributeSidebar")},this.exportData=()=>{var t,e;const i=(e=(t=this.videoRef)==null?void 0:t.duration)!=null?e:0;return[this.state.result.filter(s=>s.end!==null),{valid:this.state.valid,duration:i}]},this.updateSelectedSliceTimeStartByPer=t=>{var e,i;if(this.state.clipStatus===constant.EClipStatus.Clipping){antd.message.info("\u622A\u53D6\u4E2D\u4E0D\u652F\u6301\u8C03\u6574\u5F00\u59CB\u65F6\u95F4");return}if(this.selectedSliceIndex>-1){const s=(i=(e=this.videoPlayer)==null?void 0:e.duration)!=null?i:0,{end:a,start:n,type:l}=this.state.result[this.selectedSliceIndex],u=lbAnnotation.MathUtils.withinRange(audio.precisionAdd(n,t),[0,audio.precisionMinus(l===constant.ETimeSliceType.Time?s:a,constant.PER_SLICE_CHANGE)]);this.updateSelectedSliceTimeProperty(u,"start")}},this.updateSelectedSliceTimeEndByPer=t=>{var e,i;if(this.state.clipStatus===constant.EClipStatus.Clipping){antd.message.info("\u622A\u53D6\u4E2D\u4E0D\u652F\u6301\u8C03\u6574\u7ED3\u675F\u65F6\u95F4");return}if(this.selectedSliceIndex>-1){const s=this.state.result[this.selectedSliceIndex],a=(i=(e=this.videoPlayer)==null?void 0:e.duration)!=null?i:0;if(s.type===constant.ETimeSliceType.Time){antd.message.info("\u65F6\u95F4\u70B9\u4EC5\u652F\u6301\u8C03\u6574\u5F00\u59CB\u65F6\u95F4");return}const{end:n,start:l}=s,u=lbAnnotation.MathUtils.withinRange(audio.precisionAdd(n,t),[audio.precisionAdd(l,constant.PER_SLICE_CHANGE),a]);this.updateSelectedSliceTimeProperty(u,"end")}},this.updateSelectedSliceTimeProperty=(t,e)=>{if(this.selectedSliceIndex>-1){const{result:i}=this.state;i[this.selectedSliceIndex][e]=t,this.setState({result:___default.default.cloneDeep(i)}),this.updateSidebar()}},this.keyDownEvents=t=>{if(!lbAnnotation.CommonToolUtils.hotkeyFilter(t))return;const e=t.target;switch(e&&(e==null?void 0:e.tag)==="INPUT"&&(e==null?void 0:e.type)==="radio"&&t.preventDefault(),t.key.toLocaleLowerCase()){case"x":this.toggleClipStatus();break;case"e":this.addTime();break;case"escape":this.cancelClipped();break;case"-":this.updateSelectedSliceTimeStartByPer(-constant.PER_SLICE_CHANGE);break;case"=":this.updateSelectedSliceTimeStartByPer(constant.PER_SLICE_CHANGE);break;case"[":this.updateSelectedSliceTimeEndByPer(-constant.PER_SLICE_CHANGE);break;case"]":this.updateSelectedSliceTimeEndByPer(constant.PER_SLICE_CHANGE);break}},this.setVideoError=(t,e,i)=>{if(t){const{clipStatus:s}=this.state;s===constant.EClipStatus.Clipping&&this.toggleClipStatus(i)}this.setState({videoError:t,loading:!1})},this.clearResult=()=>{this.setState({result:[],selectedID:"",textValue:""}),this.updateSidebar()},this.cancelClipped=()=>{const{result:t,selectedID:e,clipStatus:i}=this.state;if(i!==constant.EClipStatus.Clipping)return;const s=t.findIndex(a=>a.id===e);s>-1&&(t.splice(s,1),this.setState({result:t,selectedID:"",clipStatus:constant.EClipStatus.Stop}),this.updateSidebar())},this.toggleClipStatus=t=>{var e,i;if(typeof((e=this.props)==null?void 0:e.annotationBefore)=="function"){(i=this.props)==null||i.annotationBefore(()=>this.setClipResult(t));return}this.setClipResult(t)},this.setClipResult=t=>{var e,i,s;if(this.disabled)return;const{clipStatus:a,selectedAttribute:n}=this.state,l=a!==constant.EClipStatus.Clipping;let u=l?constant.EClipStatus.Clipping:constant.EClipStatus.Stop,{result:d,selectedID:o,textValue:c}=this.state;const p=___default.default.cloneDeep(d),h=t||((e=this.videoPlayer)==null?void 0:e.currentTime),v=(i=this.videoPlayer)==null?void 0:i.duration;if(v===void 0||h===void 0)return;const b=utils.decimalReserved(h,2);if(l){const f=lbAnnotation.uuid();o=f,p.push({start:b,end:null,attribute:n,textAttribute:this.defaultTextAttribute,duration:v,id:f,type:constant.ETimeSliceType.Period,subAttribute:{}}),c=this.defaultTextAttribute}else{const f=p.findIndex(m=>m.id===o),g=p[f];g&&(h-g.start<constant.SLICE_MIN_TIME?(p.splice(f,1),antd.message.info(`\u622A\u53D6\u7247\u6BB5\u4E0D\u80FD\u77ED\u4E8E${constant.SLICE_MIN_TIME}s`),u=constant.EClipStatus.Stop,o="",c=""):(p[f].end=utils.decimalReserved(h,2),(s=this.videoPlayer)==null||s.pause(),antd.message.success(`\u5DF2\u622A\u53D6\u7247\u6BB5${d.length}`)))}this.setState({clipStatus:u,result:p,selectedID:o,textValue:c}),this.updateSidebar()},this.addTime=()=>{var t,e,i,s;if(this.disabled)return;const{result:a,selectedAttribute:n,selectedID:l}=this.state,u=lbAnnotation.uuid(),d=___default.default.cloneDeep(a),o=((t=this.videoPlayer)==null?void 0:t.currentTime)||0;d.push({start:o,end:o,attribute:n,textAttribute:this.defaultTextAttribute,id:u,type:constant.ETimeSliceType.Time,duration:(i=(e=this.videoPlayer)==null?void 0:e.duration)!=null?i:0,subAttribute:{}});const c={result:d,selectedID:u,textValue:this.defaultTextAttribute},p=d.find(h=>h.id===l);this.isClipping&&p?(delete c.selectedID,delete c.textValue,antd.message.success(`\u5DF2\u622A\u53D6\u65F6\u95F4\u70B9${d.length-1}`)):(s=this.videoPlayer)==null||s.pause(),this.setState(c),this.updateSidebar()},this.updateCurrentTime=t=>{this.setState({currentTime:t})},this.contextToCancel=t=>{this.state.clipStatus===constant.EClipStatus.Stop&&(t.preventDefault(),this.setState({selectedID:""}),this.updateSidebar())},this.onTrackResize=(t,e,i)=>{var s,a;const{result:n}=this.state,l=n.find(u=>u.id===t);if(l){const u=l.duration,d=e==="left",o=d?"start":"end",c=d?-u*i:u*i,p=d?[0,Math.max(((s=l.end)!=null?s:0)-constant.SLICE_MIN_TIME,0)]:[l.start+constant.SLICE_MIN_TIME,u],h=lbAnnotation.MathUtils.withinRange(c+((a=l==null?void 0:l[o])!=null?a:0),p);l[o]=h,this.throttledUpdateTime(h)}this.setState({result:[...n]}),this.updateSidebar()},this.renderMediaContent=()=>{var t,e,i;const{pageForward:s,pageJump:a,pageBackward:n}=this.props,{result:l,videoError:u,valid:d,currentTime:o}=this.state;return React__default.default.createElement("div",{className:index_module.clipContainer},React__default.default.createElement(index.VideoPlayer,{imgIndex:this.props.imgIndex,imgList:this.props.imgList,pageBackward:n,pageForward:s,pageJump:a,valid:d,setVideoRef:c=>{this.videoPlayer=c},showVideoTrack:!u,onTrackResize:this.onTrackResize,drawLayerSlot:this.props.drawLayerSlot,footer:this.props.footer,dataLoaded:this.props.onVideoLoaded,toggleClipStatus:this.toggleClipStatus,addTime:this.addTime,updateCurrentTime:this.updateCurrentTime}),React__default.default.createElement(index$1,{key:(t=this.videoPlayer)==null?void 0:t.currentTime,result:l,currentTime:o,attributeList:this.props.config.attributeList,inputList:(i=(e=this.props.config)==null?void 0:e.inputList)!=null?i:[],extraStyle:{top:this.props.drawLayerSlot?40:0}}),this.isClipping&&React__default.default.createElement("i",{className:index_module.clipping,style:{backgroundImage:icon_videoCutting}}))},this.onSelectedTimeSlice=t=>{var e;this.isClipping||(this.setState({selectedID:t.id,selectedAttribute:t.attribute,textValue:t.textAttribute,currentTime:t.start}),this.updateSidebar(),(e=this.videoPlayer)==null||e.pause(),this.videoPlayer.currentTime=t.start)},this.removeTimeSlice=t=>{const{result:e}=this.state,i=this.state.selectedID===t.id?"":this.state.selectedID,s=e.findIndex(a=>a.id===t.id);s>-1&&(e.splice(s,1),this.setState({result:[...e],selectedID:i}),this.updateSidebar())},this.setResult=(t=!0,e=this.props)=>{try{const{imgIndex:i,imgList:s}=e;if(!s[i])return;const n=index$2.jsonParser(s[i].result)[`step_${this.stepInfo().step}`],l=(n==null?void 0:n.result)||[],u=audio.isImageValue(s[i].result||"[]");this.setState({result:l,loading:t,selectedID:"",textValue:"",selectedAttribute:"",clipStatus:constant.EClipStatus.Stop,valid:u},()=>{this.updateSidebar(),u||antd.message.info("\u65E0\u6548\u89C6\u9891\uFF0C\u8BF7\u8DF3\u8FC7")})}catch(i){console.error("\u6570\u636E\u89E3\u6790\u5931\u8D25"),this.setState({result:[],loading:!1,selectedID:"",textValue:"",selectedAttribute:"",valid:!0},()=>{this.updateSidebar()})}},this.setDefaultAttribute=t=>{const{result:e,selectedID:i}=this.state,s=e.find(a=>a.id===i);s&&i&&(s.attribute=t),this.setState({selectedAttribute:t,result:[...e]}),this.updateSidebar()},this.setSubAttribute=(t,e)=>{const{result:i,selectedID:s}=this.state;if(s){const a=i.find(n=>n.id===s);a&&(a.subAttribute||(a.subAttribute={}),a.subAttribute[t]=e,this.setState({result:[...i]}),this.updateSidebar())}},this.textChange=t=>{const{result:e,selectedID:i}=this.state;if(this.setState({textValue:t}),i){const s=e.find(a=>a.id===i);s&&(s.textAttribute=t,this.setState({result:[...e]}),this.updateSidebar())}},this.state={result:[],selectedAttribute:"",textValue:"",clipStatus:constant.EClipStatus.Stop,selectedID:"",loading:!1,videoError:!1,remainingTime:0,currentTime:0,configLoading:!1,valid:!0}}get videoUrl(){var r;const{imgIndex:t,imgList:e}=this.props;return((r=e[t])==null?void 0:r.url)||""}get isClipping(){return this.state.clipStatus===constant.EClipStatus.Clipping}get resultJSON(){const{imgIndex:r,imgList:t}=this.props;return t.length===0||!t[r]?"[]":t[r].result}get disabled(){return!this.state.valid||this.state.videoError}get loading(){return this.state.loading||this.state.configLoading}get defaultTextAttribute(){return lbAnnotation.AttributeUtils.getTextAttribute(this.state.result,this.props.config.textCheckType)}get defaultAttribute(){return this.state.selectedAttribute}get selectedID(){return this.state.selectedID}get selectedSliceIndex(){return this.state.result.findIndex(r=>r.id===this.state.selectedID)}get exportContext(){return{selectedID:this.state.selectedID,result:this.state.result,clipStatus:this.state.clipStatus,videoPlayer:this.videoPlayer,attributeList:this.props.config.attributeList,onSelectedTimeSlice:this.onSelectedTimeSlice,removeTimeSlice:this.removeTimeSlice,updateSelectedSliceTimeProperty:this.updateSelectedSliceTimeProperty}}get valid(){return this.state.valid}get config(){var r;return index$2.jsonParser((r=this.props.stepInfo)==null?void 0:r.config)}get selectedText(){var r,t;return(t=(r=this.state.result)==null?void 0:r[this.selectedSliceIndex])==null?void 0:t.textAttribute}componentDidMount(){this.setState({loading:!1}),this.setResult(!1),this.props.onMounted(this),window.addEventListener("keydown",this.keyDownEvents)}componentWillUnmount(){this.props.onUnmounted(),window.removeEventListener("keydown",this.keyDownEvents)}shouldComponentUpdate(r,t){const e=r.imgIndex-this.props.imgIndex,i=r.step-this.props.step;return(e!==0||i!==0)&&(this.setResult(!0,r),i!==0&&this.setState({loading:!1})),!0}singleOn(r,t){this.fns.set(r,[t])}on(r,t){this.singleOn(r,t)}unbindAll(r){this.fns.delete(r)}render(){const{selectedID:r,result:t,clipStatus:e,selectedAttribute:i}=this.state;return React__default.default.createElement(VideoClipToolContext.VideoClipToolContextProvider,{value:{videoPlayer:this.videoPlayer,result:t,selectedID:r,attributeList:this.props.config.attributeList,clipStatus:e,selectedAttribute:i,contextToCancel:this.contextToCancel}},this.renderMediaContent())}}module.exports=VideoClipTool;
+"use strict";var lbAnnotation=require("@labelbee/lb-annotation"),index$2=require("../../../utils/index.js"),audio=require("../../../utils/audio.js"),antd=require("antd"),_=require("lodash"),React=require("react"),index_module=require("./index.module.scss.js"),VideoClipToolContext=require("./VideoClipToolContext.js"),constant=require("./constant.js"),index=require("../../videoPlayer/index.js"),index$1=require("./components/videoTimeSlicesOverVideo/index.js"),icon_videoCutting=require("../../../assets/annotation/video/icon_videoCutting.svg.js"),utils=require("../../videoPlayer/utils.js");function _interopDefaultLegacy(S){return S&&typeof S=="object"&&"default"in S?S:{default:S}}var ___default=_interopDefaultLegacy(_),React__default=_interopDefaultLegacy(React);class VideoClipTool extends React__default.default.Component{constructor(l){super(l);this.fns=new Map,this.throttledUpdateTime=___default.default.throttle(t=>{this.videoPlayer.currentTime=t},100,{trailing:!0}),this.stepInfo=()=>this.props.stepInfo,this.emitEvent=t=>{const e=this.fns.get(t);e&&e.forEach(i=>{i&&i()})},this.setValid=t=>{this.setState({valid:t}),t===!1&&(this.clearResult(),this.updateSidebar())},this.updateSidebar=()=>{this.emitEvent("changeClipSidebar"),this.emitEvent("updateTextAttribute"),this.emitEvent("changeAttributeSidebar")},this.exportData=()=>{var t,e;const i=(e=(t=this.videoRef)==null?void 0:t.duration)!=null?e:0;return[this.state.result.filter(s=>s.end!==null),{valid:this.state.valid,duration:i}]},this.updateSelectedSliceTimeStartByPer=t=>{var e,i;if(this.state.clipStatus===constant.EClipStatus.Clipping){antd.message.info("\u622A\u53D6\u4E2D\u4E0D\u652F\u6301\u8C03\u6574\u5F00\u59CB\u65F6\u95F4");return}if(this.selectedSliceIndex>-1){const s=(i=(e=this.videoPlayer)==null?void 0:e.duration)!=null?i:0,{end:r,start:n,type:a}=this.state.result[this.selectedSliceIndex],u=lbAnnotation.MathUtils.withinRange(audio.precisionAdd(n,t),[0,audio.precisionMinus(a===constant.ETimeSliceType.Time?s:r,constant.PER_SLICE_CHANGE)]);this.updateSelectedSliceTimeProperty(u,"start")}},this.updateSelectedSliceTimeEndByPer=t=>{var e,i;if(this.state.clipStatus===constant.EClipStatus.Clipping){antd.message.info("\u622A\u53D6\u4E2D\u4E0D\u652F\u6301\u8C03\u6574\u7ED3\u675F\u65F6\u95F4");return}if(this.selectedSliceIndex>-1){const s=this.state.result[this.selectedSliceIndex],r=(i=(e=this.videoPlayer)==null?void 0:e.duration)!=null?i:0;if(s.type===constant.ETimeSliceType.Time){antd.message.info("\u65F6\u95F4\u70B9\u4EC5\u652F\u6301\u8C03\u6574\u5F00\u59CB\u65F6\u95F4");return}const{end:n,start:a}=s,u=lbAnnotation.MathUtils.withinRange(audio.precisionAdd(n,t),[audio.precisionAdd(a,constant.PER_SLICE_CHANGE),r]);this.updateSelectedSliceTimeProperty(u,"end")}},this.updateSelectedSliceTimeProperty=(t,e)=>{if(this.selectedSliceIndex>-1){const{result:i}=this.state;i[this.selectedSliceIndex][e]=t,this.setState({result:___default.default.cloneDeep(i)}),this.updateSidebar()}},this.keyDownEvents=t=>{if(!lbAnnotation.CommonToolUtils.hotkeyFilter(t))return;const e=t.target;switch(e&&(e==null?void 0:e.tag)==="INPUT"&&(e==null?void 0:e.type)==="radio"&&t.preventDefault(),t.key.toLocaleLowerCase()){case"x":this.toggleClipStatus();break;case"e":this.addTime();break;case"escape":this.cancelClipped();break;case"-":this.updateSelectedSliceTimeStartByPer(-constant.PER_SLICE_CHANGE);break;case"=":this.updateSelectedSliceTimeStartByPer(constant.PER_SLICE_CHANGE);break;case"[":this.updateSelectedSliceTimeEndByPer(-constant.PER_SLICE_CHANGE);break;case"]":this.updateSelectedSliceTimeEndByPer(constant.PER_SLICE_CHANGE);break}},this.setVideoError=(t,e,i)=>{if(t){const{clipStatus:s}=this.state;s===constant.EClipStatus.Clipping&&this.toggleClipStatus(i)}this.setState({videoError:t,loading:!1})},this.clearResult=()=>{this.setState({result:[],selectedID:"",textValue:""}),this.updateSidebar()},this.cancelClipped=()=>{const{result:t,selectedID:e,clipStatus:i}=this.state;if(i!==constant.EClipStatus.Clipping)return;const s=t.findIndex(r=>r.id===e);s>-1&&(t.splice(s,1),this.setState({result:t,selectedID:"",clipStatus:constant.EClipStatus.Stop}),this.updateSidebar())},this.toggleClipStatus=t=>{var e,i;if(typeof((e=this.props)==null?void 0:e.annotationBefore)=="function"){(i=this.props)==null||i.annotationBefore(()=>this.setClipResult(t));return}this.setClipResult(t)},this.setClipResult=t=>{var e,i,s,r,n;if(this.disabled)return;const{clipStatus:a,selectedAttribute:u}=this.state,d=a!==constant.EClipStatus.Clipping;let c=d?constant.EClipStatus.Clipping:constant.EClipStatus.Stop,{result:o,selectedID:p,textValue:h}=this.state;const f=___default.default.cloneDeep(o),m=t||((e=this.videoPlayer)==null?void 0:e.currentTime),b=(i=this.videoPlayer)==null?void 0:i.duration;if(b===void 0||m===void 0)return;const T=utils.decimalReserved(m,2);if(d){const g=lbAnnotation.uuid(),v={};p=g,f.push({start:T,end:null,attribute:u,textAttribute:this.defaultTextAttribute,duration:b,id:g,type:constant.ETimeSliceType.Period,subAttribute:v,text:this.getSubAttributeShowText(v,(r=(s=this.props.config)==null?void 0:s.inputList)!=null?r:[])}),h=this.defaultTextAttribute}else{const g=f.findIndex(C=>C.id===p),v=f[g];v&&(m-v.start<constant.SLICE_MIN_TIME?(f.splice(g,1),antd.message.info(`\u622A\u53D6\u7247\u6BB5\u4E0D\u80FD\u77ED\u4E8E${constant.SLICE_MIN_TIME}s`),c=constant.EClipStatus.Stop,p="",h=""):(f[g].end=utils.decimalReserved(m,2),(n=this.videoPlayer)==null||n.pause(),antd.message.success(`\u5DF2\u622A\u53D6\u7247\u6BB5${o.length}`)))}this.setState({clipStatus:c,result:f,selectedID:p,textValue:h}),this.updateSidebar()},this.addTime=()=>{var t,e,i,s;if(this.disabled)return;const{result:r,selectedAttribute:n,selectedID:a}=this.state,u=lbAnnotation.uuid(),d=___default.default.cloneDeep(r),c=((t=this.videoPlayer)==null?void 0:t.currentTime)||0;d.push({start:c,end:c,attribute:n,textAttribute:this.defaultTextAttribute,id:u,type:constant.ETimeSliceType.Time,duration:(i=(e=this.videoPlayer)==null?void 0:e.duration)!=null?i:0,subAttribute:{}});const o={result:d,selectedID:u,textValue:this.defaultTextAttribute},p=d.find(h=>h.id===a);this.isClipping&&p?(delete o.selectedID,delete o.textValue,antd.message.success(`\u5DF2\u622A\u53D6\u65F6\u95F4\u70B9${d.length-1}`)):(s=this.videoPlayer)==null||s.pause(),this.setState(o),this.updateSidebar()},this.updateCurrentTime=t=>{this.setState({currentTime:t})},this.contextToCancel=t=>{this.state.clipStatus===constant.EClipStatus.Stop&&(t.preventDefault(),this.setState({selectedID:""}),this.updateSidebar())},this.onTrackResize=(t,e,i)=>{var s,r;const{result:n}=this.state,a=n.find(u=>u.id===t);if(a){const u=a.duration,d=e==="left",c=d?"start":"end",o=d?-u*i:u*i,p=d?[0,Math.max(((s=a.end)!=null?s:0)-constant.SLICE_MIN_TIME,0)]:[a.start+constant.SLICE_MIN_TIME,u],h=lbAnnotation.MathUtils.withinRange(o+((r=a==null?void 0:a[c])!=null?r:0),p);a[c]=h,this.throttledUpdateTime(h)}this.setState({result:[...n]}),this.updateSidebar()},this.renderMediaContent=()=>{var t,e,i;const{pageForward:s,pageJump:r,pageBackward:n}=this.props,{result:a,videoError:u,valid:d,currentTime:c}=this.state;return React__default.default.createElement("div",{className:index_module.clipContainer},React__default.default.createElement(index.VideoPlayer,{imgIndex:this.props.imgIndex,imgList:this.props.imgList,pageBackward:n,pageForward:s,pageJump:r,valid:d,setVideoRef:o=>{this.videoPlayer=o},showVideoTrack:!u,onTrackResize:this.onTrackResize,drawLayerSlot:this.props.drawLayerSlot,footer:this.props.footer,dataLoaded:this.props.onVideoLoaded,toggleClipStatus:this.toggleClipStatus,addTime:this.addTime,updateCurrentTime:this.updateCurrentTime}),React__default.default.createElement(index$1,{key:(t=this.videoPlayer)==null?void 0:t.currentTime,result:a,currentTime:c,attributeList:this.props.config.attributeList,inputList:(i=(e=this.props.config)==null?void 0:e.inputList)!=null?i:[],extraStyle:{top:this.props.drawLayerSlot?40:0}}),this.isClipping&&React__default.default.createElement("i",{className:index_module.clipping,style:{backgroundImage:icon_videoCutting}}))},this.onSelectedTimeSlice=t=>{var e;this.isClipping||(this.setState({selectedID:t.id,selectedAttribute:t.attribute,textValue:t.textAttribute,currentTime:t.start}),this.updateSidebar(),(e=this.videoPlayer)==null||e.pause(),this.videoPlayer.currentTime=t.start)},this.removeTimeSlice=t=>{const{result:e}=this.state,i=this.state.selectedID===t.id?"":this.state.selectedID,s=e.findIndex(r=>r.id===t.id);s>-1&&(e.splice(s,1),this.setState({result:[...e],selectedID:i}),this.updateSidebar())},this.setResult=(t=!0,e=this.props)=>{var i,s;try{const{imgIndex:r,imgList:n}=e;if(!n[r])return;const u=index$2.jsonParser(n[r].result)[`step_${this.stepInfo().step}`],d=(u==null?void 0:u.result)||[],c=(s=(i=this.props.config)==null?void 0:i.inputList)!=null?s:[];d.forEach(p=>{p.text=this.getSubAttributeShowText(p.subAttribute,c)});const o=audio.isImageValue(n[r].result||"[]");this.setState({result:d,loading:t,selectedID:"",textValue:"",selectedAttribute:"",clipStatus:constant.EClipStatus.Stop,valid:o},()=>{this.updateSidebar(),o||antd.message.info("\u65E0\u6548\u89C6\u9891\uFF0C\u8BF7\u8DF3\u8FC7")})}catch(r){console.error("\u6570\u636E\u89E3\u6790\u5931\u8D25"),this.setState({result:[],loading:!1,selectedID:"",textValue:"",selectedAttribute:"",valid:!0},()=>{this.updateSidebar()})}},this.setDefaultAttribute=t=>{const{result:e,selectedID:i}=this.state,s=e.find(r=>r.id===i);s&&i&&(s.attribute=t),this.setState({selectedAttribute:t,result:[...e]}),this.updateSidebar()},this.setSubAttribute=(t,e)=>{var i,s;const{result:r,selectedID:n}=this.state;if(n){const a=r.find(u=>u.id===n);a&&(a.subAttribute||(a.subAttribute={}),a.subAttribute[t]=e,a.text=this.getSubAttributeShowText(a.subAttribute,(s=(i=this.props.config)==null?void 0:i.inputList)!=null?s:[]),this.setState({result:[...r]}),this.updateSidebar())}},this.textChange=t=>{const{result:e,selectedID:i}=this.state;if(this.setState({textValue:t}),i){const s=e.find(r=>r.id===i);s&&(s.textAttribute=t,this.setState({result:[...e]}),this.updateSidebar())}},this.getSubAttributeShowText=(t,e)=>{if(!t||(e==null?void 0:e.length)===0)return"";let i="";return lbAnnotation.TagUtils.getTagNameList(t,e).forEach(r=>{i+=`
+${r.keyName}: ${r.value.join("\u3001")}`}),i},this.state={result:[],selectedAttribute:"",textValue:"",clipStatus:constant.EClipStatus.Stop,selectedID:"",loading:!1,videoError:!1,remainingTime:0,currentTime:0,configLoading:!1,valid:!0}}get videoUrl(){var l;const{imgIndex:t,imgList:e}=this.props;return((l=e[t])==null?void 0:l.url)||""}get isClipping(){return this.state.clipStatus===constant.EClipStatus.Clipping}get resultJSON(){const{imgIndex:l,imgList:t}=this.props;return t.length===0||!t[l]?"[]":t[l].result}get disabled(){return!this.state.valid||this.state.videoError}get loading(){return this.state.loading||this.state.configLoading}get defaultTextAttribute(){return lbAnnotation.AttributeUtils.getTextAttribute(this.state.result,this.props.config.textCheckType)}get defaultAttribute(){return this.state.selectedAttribute}get selectedID(){return this.state.selectedID}get selectedSliceIndex(){return this.state.result.findIndex(l=>l.id===this.state.selectedID)}get exportContext(){return{selectedID:this.state.selectedID,result:this.state.result,clipStatus:this.state.clipStatus,videoPlayer:this.videoPlayer,attributeList:this.props.config.attributeList,onSelectedTimeSlice:this.onSelectedTimeSlice,removeTimeSlice:this.removeTimeSlice,updateSelectedSliceTimeProperty:this.updateSelectedSliceTimeProperty}}get valid(){return this.state.valid}get config(){var l;return index$2.jsonParser((l=this.props.stepInfo)==null?void 0:l.config)}get selectedText(){var l,t;return(t=(l=this.state.result)==null?void 0:l[this.selectedSliceIndex])==null?void 0:t.textAttribute}componentDidMount(){this.setState({loading:!1}),this.setResult(!1),this.props.onMounted(this),window.addEventListener("keydown",this.keyDownEvents)}componentWillUnmount(){this.props.onUnmounted(),window.removeEventListener("keydown",this.keyDownEvents)}shouldComponentUpdate(l,t){const e=l.imgIndex-this.props.imgIndex,i=l.step-this.props.step;return(e!==0||i!==0)&&(this.setResult(!0,l),i!==0&&this.setState({loading:!1})),!0}singleOn(l,t){this.fns.set(l,[t])}on(l,t){this.singleOn(l,t)}unbindAll(l){this.fns.delete(l)}render(){const{selectedID:l,result:t,clipStatus:e,selectedAttribute:i}=this.state;return React__default.default.createElement(VideoClipToolContext.VideoClipToolContextProvider,{value:{videoPlayer:this.videoPlayer,result:t,selectedID:l,attributeList:this.props.config.attributeList,clipStatus:e,selectedAttribute:i,contextToCancel:this.contextToCancel}},this.renderMediaContent())}}module.exports=VideoClipTool;

package/dist/types/components/videoAnnotate/videoClipTool/index.d.ts

@@ -138,6 +138,13 @@ declare class VideoClipTool extends React.Component<IVideoClipProps, IState> {
      * @param textValue
      */
     textChange: (textValue: string) => void;
+    /**
+     * Splicing sub attributes into the format required for display
+     * @param subAttribute Sub attribute object
+     * @param subAttributeList Secondary attribute configuration list
+     * @returns The formatted text string
+     */
+    getSubAttributeShowText: (subAttribute: Record<string, string> | undefined, subAttributeList: any[]) => string;
     render(): React.JSX.Element;
 }
 export default VideoClipTool;

package/es/components/videoAnnotate/videoClipTool/components/ToolTipForClip.js

@@ -1 +1 @@
-import{timeFormat as o,precisionMinus as v}from"../../../../utils/audio.js";import{AttributeUtils as F}from"@labelbee/lb-annotation";import{Tooltip as S}from"antd";import e from"react";import{ETimeSliceType as T}from"../constant.js";import{decimalReserved as u}from"../../../videoPlayer/utils.js";import{useTranslation as A}from"react-i18next";const $=m=>{var l,n;const{slot:s,item:t,attributeList:c}=m,{t:r}=A();if(!s)return null;const{type:d,attribute:p,textAttribute:b}=t;if(t.start===void 0||t.end===void 0)return null;const i=u(t.start,2),a=(n=u((l=t.end)!=null?l:0,2))!=null?n:0,f=e.createElement("div",null,e.createElement("div",null,d===T.Period?`${o(i,"ss:SS")}~${o(a,"ss:SS")}\uFF0C${v(a,i)}s`:o(i,"ss:SS")),e.createElement("div",null,`${r("Attribute")}\uFF1A${F.getAttributeShowText(p,c)||r("NoAttribute")}`),e.createElement("div",null,`${r("textTool")}\uFF1A${b}`));return e.createElement(S,{title:f},s)};export{$ as default};
+import{timeFormat as o,precisionMinus as F}from"../../../../utils/audio.js";import{AttributeUtils as A}from"@labelbee/lb-annotation";import{Tooltip as S}from"antd";import t from"react";import{ETimeSliceType as $}from"../constant.js";import{decimalReserved as a}from"../../../videoPlayer/utils.js";import{useTranslation as T}from"react-i18next";const E=m=>{var l,n;const{slot:s,item:e,attributeList:c}=m,{t:r}=T();if(!s)return null;const{type:d,attribute:p,textAttribute:b,text:f}=e;if(e.start===void 0||e.end===void 0)return null;const i=a(e.start,2),u=(n=a((l=e.end)!=null?l:0,2))!=null?n:0,v=t.createElement("div",null,t.createElement("div",null,d===$.Period?`${o(i,"ss:SS")}~${o(u,"ss:SS")}\uFF0C${F(u,i)}s`:o(i,"ss:SS")),t.createElement("div",null,`${r("Attribute")}\uFF1A${A.getAttributeShowText(p,c)||r("NoAttribute")}`),t.createElement("div",null,`${r("SubAttribute")}\uFF1A${f}`),t.createElement("div",null,`${r("textTool")}\uFF1A${b}`));return t.createElement(S,{title:v},s)};export{E as default};

package/es/components/videoAnnotate/videoClipTool/components/videoTrack/index.js

@@ -1 +1 @@
-import{timeFormat as z}from"../../../../../utils/audio.js";import{AttributeUtils as x,MathUtils as b}from"@labelbee/lb-annotation";import{EnvironmentFilled as D}from"@ant-design/icons";import s,{useContext as S,useRef as X,useMemo as j}from"react";import U from"../resizableSnippet/index.js";import{ETimeSliceType as N,EClipStatus as W}from"../../constant.js";import L from"../ToolTipForClip.js";import u from"./index.module.scss.js";import{decimalReserved as C,hashCode as q}from"../../../../videoPlayer/utils.js";import{VideoClipToolContext as B}from"../../VideoClipToolContext.js";import{VideoPlayerCtx as G}from"../../../../videoPlayer/index.js";import{useTranslation as H}from"react-i18next";var K=Object.defineProperty,Q=Object.defineProperties,Y=Object.getOwnPropertyDescriptors,w=Object.getOwnPropertySymbols,Z=Object.prototype.hasOwnProperty,J=Object.prototype.propertyIsEnumerable,A=(o,r,t)=>r in o?K(o,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):o[r]=t,tt=(o,r)=>{for(var t in r||(r={}))Z.call(r,t)&&A(o,t,r[t]);if(w)for(var t of w(r))J.call(r,t)&&A(o,t,r[t]);return o},et=(o,r)=>Q(o,Y(r));const rt=(o,r)=>{const{t}=H(),{attribute:p,textAttribute:n}=o;return[x.getAttributeShowText(p,r)||t("NoAttribute"),n?`${t("textTool")}: ${n}`:""].filter(y=>y).join("\uFF0C")},ot=(o,r)=>{const t=(o||[]).filter(n=>n).map(()=>[]);o.forEach(n=>{if(n.id!==r){const l=t.findIndex(y=>{const i=n.start,c=n.end;return y.every(f=>{const T=[f.start,f.end],m=[i,c];return!b.isInRange(i,T)&&!b.isInRange(c,T)&&!b.isInRange(f.start,m)&&!b.isInRange(f.end,m)})});l>-1&&t[l].push(n)}});const p=nt(t.filter(n=>n.length>0));return p==null?void 0:p.map(n=>({data:n,id:q(n==null?void 0:n.map(l=>l.id).join("_"))}))},nt=(o,r=2)=>{let t=o;return t.length-r<0&&(t=t.concat(Array.from({length:r-t.length}))),t},at=o=>{var r;const{currentTime:t,readonly:p,onTrackResizeStart:n}=o,{result:l,selectedAttribute:y,attributeList:i,selectedID:c,clipStatus:f,contextToCancel:T}=S(B),{duration:m}=S(G),_=X(null),I=t/m,k=(e,a=4)=>`${C(e*100,a)}%`,h=e=>{if(e){const a=x.getAttributeColor(e.attribute,i),v=Math.max((e.end||t)-e.start,0)/m,d={backgroundColor:a,left:k(e.start/m,2),width:k(e.end?Math.max(v,.001):v,2),position:"absolute",borderRadius:5};return e.type===N.Time&&(delete d.width,delete d.backgroundColor,d.top="50%",d.transform="translate(-50%)",d.color=a),d}return{}},E=x.getAttributeColor(y,i),P=((r=_.current)==null?void 0:r.clientWidth)||0,O=C(Math.max(P*I,0),0),F=C(Math.min(O,Math.floor(P-68)),0),R=e=>{if(e)return e.type===N.Time?s.createElement(L,{slot:s.createElement(D,{style:h(e)}),item:et(tt({},e),{end:e.end===null?t:e.end}),attributeList:i}):s.createElement(U,{track:e,currentTime:t,style:h(e),onResize:(a,v)=>o.onTrackResize(e.id,a,v),onTrackResizeStart:n,onClipping:f===W.Clipping,isSelected:e.id===c,readonly:p,attributeList:i})},M=j(()=>{const e=ot(l,c);return e==null?void 0:e.map((a,v)=>{var d;return s.createElement("div",{className:u.track,key:(a==null?void 0:a.id)||v},(d=a.data)==null?void 0:d.map((g,V)=>s.createElement(s.Fragment,{key:(g==null?void 0:g.id)||`${a==null?void 0:a.id}_${V}`},R(g))))})},[l,c,m,JSON.stringify(i)]),$=j(()=>{const e=l.find(a=>(a==null?void 0:a.id)===c);return c&&e?s.createElement("div",{className:u.track,key:e==null?void 0:e.id},R(e)):null},[l,c,m,t,JSON.stringify(i)]);return s.createElement("div",{className:u.videoTrackContainer,ref:_,onContextMenu:T},s.createElement("div",{className:u.timeTrack}),s.createElement("div",{className:u.videoTrack},$,M),s.createElement("div",{className:u.timeline,style:{transform:`translate3d(${O}px, 0px, 0px)`,backgroundColor:E}}),s.createElement("div",{className:u.displayTime,style:{backgroundColor:E,transform:`translateX(${F}px, 0px, 0px)`}},z(t)))};var st=at;export{st as default,rt as getDisplayContent};
+import{timeFormat as z}from"../../../../../utils/audio.js";import{AttributeUtils as x,MathUtils as g}from"@labelbee/lb-annotation";import{EnvironmentFilled as D}from"@ant-design/icons";import s,{useContext as R,useRef as X,useMemo as j}from"react";import U from"../resizableSnippet/index.js";import{ETimeSliceType as A,EClipStatus as W}from"../../constant.js";import L from"../ToolTipForClip.js";import u from"./index.module.scss.js";import{decimalReserved as C,hashCode as q}from"../../../../videoPlayer/utils.js";import{VideoClipToolContext as B}from"../../VideoClipToolContext.js";import{VideoPlayerCtx as G}from"../../../../videoPlayer/index.js";import{useTranslation as H}from"react-i18next";var K=Object.defineProperty,Q=Object.defineProperties,Y=Object.getOwnPropertyDescriptors,N=Object.getOwnPropertySymbols,Z=Object.prototype.hasOwnProperty,J=Object.prototype.propertyIsEnumerable,w=(o,r,t)=>r in o?K(o,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):o[r]=t,tt=(o,r)=>{for(var t in r||(r={}))Z.call(r,t)&&w(o,t,r[t]);if(N)for(var t of N(r))J.call(r,t)&&w(o,t,r[t]);return o},et=(o,r)=>Q(o,Y(r));const rt=(o,r)=>{const{t}=H(),{attribute:p,textAttribute:n}=o,l=x.getAttributeShowText(p,r)||t("NoAttribute"),f=(o==null?void 0:o.text)||"";return[l,f?`${t("SubAttribute")}: ${f}`:"",n?`${t("textTool")}: ${n}`:""].filter(i=>i).join("\uFF0C")},ot=(o,r)=>{const t=(o||[]).filter(n=>n).map(()=>[]);o.forEach(n=>{if(n.id!==r){const l=t.findIndex(f=>{const i=n.start,c=n.end;return f.every(v=>{const T=[v.start,v.end],d=[i,c];return!g.isInRange(i,T)&&!g.isInRange(c,T)&&!g.isInRange(v.start,d)&&!g.isInRange(v.end,d)})});l>-1&&t[l].push(n)}});const p=nt(t.filter(n=>n.length>0));return p==null?void 0:p.map(n=>({data:n,id:q(n==null?void 0:n.map(l=>l.id).join("_"))}))},nt=(o,r=2)=>{let t=o;return t.length-r<0&&(t=t.concat(Array.from({length:r-t.length}))),t},at=o=>{var r;const{currentTime:t,readonly:p,onTrackResizeStart:n}=o,{result:l,selectedAttribute:f,attributeList:i,selectedID:c,clipStatus:v,contextToCancel:T}=R(B),{duration:d}=R(G),_=X(null),I=t/d,k=(e,a=4)=>`${C(e*100,a)}%`,h=e=>{if(e){const a=x.getAttributeColor(e.attribute,i),y=Math.max((e.end||t)-e.start,0)/d,m={backgroundColor:a,left:k(e.start/d,2),width:k(e.end?Math.max(y,.001):y,2),position:"absolute",borderRadius:5};return e.type===A.Time&&(delete m.width,delete m.backgroundColor,m.top="50%",m.transform="translate(-50%)",m.color=a),m}return{}},E=x.getAttributeColor(f,i),P=((r=_.current)==null?void 0:r.clientWidth)||0,O=C(Math.max(P*I,0),0),$=C(Math.min(O,Math.floor(P-68)),0),S=e=>{if(e)return e.type===A.Time?s.createElement(L,{slot:s.createElement(D,{style:h(e)}),item:et(tt({},e),{end:e.end===null?t:e.end}),attributeList:i}):s.createElement(U,{track:e,currentTime:t,style:h(e),onResize:(a,y)=>o.onTrackResize(e.id,a,y),onTrackResizeStart:n,onClipping:v===W.Clipping,isSelected:e.id===c,readonly:p,attributeList:i})},F=j(()=>{if(!d)return;const e=ot(l,c);return e==null?void 0:e.map((a,y)=>{var m;return s.createElement("div",{className:u.track,key:(a==null?void 0:a.id)||y},(m=a.data)==null?void 0:m.map((b,V)=>s.createElement(s.Fragment,{key:(b==null?void 0:b.id)||`${a==null?void 0:a.id}_${V}`},S(b))))})},[l,c,d,JSON.stringify(i)]),M=j(()=>{const e=l.find(a=>(a==null?void 0:a.id)===c);return c&&e?s.createElement("div",{className:u.track,key:e==null?void 0:e.id},S(e)):null},[l,c,d,t,JSON.stringify(i)]);return s.createElement("div",{className:u.videoTrackContainer,ref:_,onContextMenu:T},s.createElement("div",{className:u.timeTrack}),s.createElement("div",{className:u.videoTrack},M,F),s.createElement("div",{className:u.timeline,style:{transform:`translate3d(${O}px, 0px, 0px)`,backgroundColor:E}}),s.createElement("div",{className:u.displayTime,style:{backgroundColor:E,transform:`translateX(${$}px, 0px, 0px)`}},z(t)))};var st=at;export{st as default,rt as getDisplayContent};

package/es/components/videoAnnotate/videoClipTool/index.js

@@ -1 +1,2 @@
-import{MathUtils as C,CommonToolUtils as F,uuid as A,AttributeUtils as R}from"@labelbee/lb-annotation";import{jsonParser as _}from"../../../utils/index.js";import{precisionAdd as I,precisionMinus as k,isImageValue as V}from"../../../utils/audio.js";import{message as m}from"antd";import b from"lodash";import g from"react";import P from"./index.module.scss.js";import{VideoClipToolContextProvider as B}from"./VideoClipToolContext.js";import{EClipStatus as d,ETimeSliceType as T,PER_SLICE_CHANGE as v,SLICE_MIN_TIME as x}from"./constant.js";import{VideoPlayer as j}from"../../videoPlayer/index.js";import M from"./components/videoTimeSlicesOverVideo/index.js";import U from"../../../assets/annotation/video/icon_videoCutting.svg.js";import{decimalReserved as L}from"../../videoPlayer/utils.js";class N extends g.Component{constructor(r){super(r);this.fns=new Map,this.throttledUpdateTime=b.throttle(t=>{this.videoPlayer.currentTime=t},100,{trailing:!0}),this.stepInfo=()=>this.props.stepInfo,this.emitEvent=t=>{const e=this.fns.get(t);e&&e.forEach(i=>{i&&i()})},this.setValid=t=>{this.setState({valid:t}),t===!1&&(this.clearResult(),this.updateSidebar())},this.updateSidebar=()=>{this.emitEvent("changeClipSidebar"),this.emitEvent("updateTextAttribute"),this.emitEvent("changeAttributeSidebar")},this.exportData=()=>{var t,e;const i=(e=(t=this.videoRef)==null?void 0:t.duration)!=null?e:0;return[this.state.result.filter(s=>s.end!==null),{valid:this.state.valid,duration:i}]},this.updateSelectedSliceTimeStartByPer=t=>{var e,i;if(this.state.clipStatus===d.Clipping){m.info("\u622A\u53D6\u4E2D\u4E0D\u652F\u6301\u8C03\u6574\u5F00\u59CB\u65F6\u95F4");return}if(this.selectedSliceIndex>-1){const s=(i=(e=this.videoPlayer)==null?void 0:e.duration)!=null?i:0,{end:l,start:u,type:n}=this.state.result[this.selectedSliceIndex],a=C.withinRange(I(u,t),[0,k(n===T.Time?s:l,v)]);this.updateSelectedSliceTimeProperty(a,"start")}},this.updateSelectedSliceTimeEndByPer=t=>{var e,i;if(this.state.clipStatus===d.Clipping){m.info("\u622A\u53D6\u4E2D\u4E0D\u652F\u6301\u8C03\u6574\u7ED3\u675F\u65F6\u95F4");return}if(this.selectedSliceIndex>-1){const s=this.state.result[this.selectedSliceIndex],l=(i=(e=this.videoPlayer)==null?void 0:e.duration)!=null?i:0;if(s.type===T.Time){m.info("\u65F6\u95F4\u70B9\u4EC5\u652F\u6301\u8C03\u6574\u5F00\u59CB\u65F6\u95F4");return}const{end:u,start:n}=s,a=C.withinRange(I(u,t),[I(n,v),l]);this.updateSelectedSliceTimeProperty(a,"end")}},this.updateSelectedSliceTimeProperty=(t,e)=>{if(this.selectedSliceIndex>-1){const{result:i}=this.state;i[this.selectedSliceIndex][e]=t,this.setState({result:b.cloneDeep(i)}),this.updateSidebar()}},this.keyDownEvents=t=>{if(!F.hotkeyFilter(t))return;const e=t.target;switch(e&&(e==null?void 0:e.tag)==="INPUT"&&(e==null?void 0:e.type)==="radio"&&t.preventDefault(),t.key.toLocaleLowerCase()){case"x":this.toggleClipStatus();break;case"e":this.addTime();break;case"escape":this.cancelClipped();break;case"-":this.updateSelectedSliceTimeStartByPer(-v);break;case"=":this.updateSelectedSliceTimeStartByPer(v);break;case"[":this.updateSelectedSliceTimeEndByPer(-v);break;case"]":this.updateSelectedSliceTimeEndByPer(v);break}},this.setVideoError=(t,e,i)=>{if(t){const{clipStatus:s}=this.state;s===d.Clipping&&this.toggleClipStatus(i)}this.setState({videoError:t,loading:!1})},this.clearResult=()=>{this.setState({result:[],selectedID:"",textValue:""}),this.updateSidebar()},this.cancelClipped=()=>{const{result:t,selectedID:e,clipStatus:i}=this.state;if(i!==d.Clipping)return;const s=t.findIndex(l=>l.id===e);s>-1&&(t.splice(s,1),this.setState({result:t,selectedID:"",clipStatus:d.Stop}),this.updateSidebar())},this.toggleClipStatus=t=>{var e,i;if(typeof((e=this.props)==null?void 0:e.annotationBefore)=="function"){(i=this.props)==null||i.annotationBefore(()=>this.setClipResult(t));return}this.setClipResult(t)},this.setClipResult=t=>{var e,i,s;if(this.disabled)return;const{clipStatus:l,selectedAttribute:u}=this.state,n=l!==d.Clipping;let a=n?d.Clipping:d.Stop,{result:o,selectedID:c,textValue:p}=this.state;const h=b.cloneDeep(o),S=t||((e=this.videoPlayer)==null?void 0:e.currentTime),y=(i=this.videoPlayer)==null?void 0:i.duration;if(y===void 0||S===void 0)return;const w=L(S,2);if(n){const f=A();c=f,h.push({start:w,end:null,attribute:u,textAttribute:this.defaultTextAttribute,duration:y,id:f,type:T.Period,subAttribute:{}}),p=this.defaultTextAttribute}else{const f=h.findIndex(E=>E.id===c),D=h[f];D&&(S-D.start<x?(h.splice(f,1),m.info(`\u622A\u53D6\u7247\u6BB5\u4E0D\u80FD\u77ED\u4E8E${x}s`),a=d.Stop,c="",p=""):(h[f].end=L(S,2),(s=this.videoPlayer)==null||s.pause(),m.success(`\u5DF2\u622A\u53D6\u7247\u6BB5${o.length}`)))}this.setState({clipStatus:a,result:h,selectedID:c,textValue:p}),this.updateSidebar()},this.addTime=()=>{var t,e,i,s;if(this.disabled)return;const{result:l,selectedAttribute:u,selectedID:n}=this.state,a=A(),o=b.cloneDeep(l),c=((t=this.videoPlayer)==null?void 0:t.currentTime)||0;o.push({start:c,end:c,attribute:u,textAttribute:this.defaultTextAttribute,id:a,type:T.Time,duration:(i=(e=this.videoPlayer)==null?void 0:e.duration)!=null?i:0,subAttribute:{}});const p={result:o,selectedID:a,textValue:this.defaultTextAttribute},h=o.find(S=>S.id===n);this.isClipping&&h?(delete p.selectedID,delete p.textValue,m.success(`\u5DF2\u622A\u53D6\u65F6\u95F4\u70B9${o.length-1}`)):(s=this.videoPlayer)==null||s.pause(),this.setState(p),this.updateSidebar()},this.updateCurrentTime=t=>{this.setState({currentTime:t})},this.contextToCancel=t=>{this.state.clipStatus===d.Stop&&(t.preventDefault(),this.setState({selectedID:""}),this.updateSidebar())},this.onTrackResize=(t,e,i)=>{var s,l;const{result:u}=this.state,n=u.find(a=>a.id===t);if(n){const a=n.duration,o=e==="left",c=o?"start":"end",p=o?-a*i:a*i,h=o?[0,Math.max(((s=n.end)!=null?s:0)-x,0)]:[n.start+x,a],S=C.withinRange(p+((l=n==null?void 0:n[c])!=null?l:0),h);n[c]=S,this.throttledUpdateTime(S)}this.setState({result:[...u]}),this.updateSidebar()},this.renderMediaContent=()=>{var t,e,i;const{pageForward:s,pageJump:l,pageBackward:u}=this.props,{result:n,videoError:a,valid:o,currentTime:c}=this.state;return g.createElement("div",{className:P.clipContainer},g.createElement(j,{imgIndex:this.props.imgIndex,imgList:this.props.imgList,pageBackward:u,pageForward:s,pageJump:l,valid:o,setVideoRef:p=>{this.videoPlayer=p},showVideoTrack:!a,onTrackResize:this.onTrackResize,drawLayerSlot:this.props.drawLayerSlot,footer:this.props.footer,dataLoaded:this.props.onVideoLoaded,toggleClipStatus:this.toggleClipStatus,addTime:this.addTime,updateCurrentTime:this.updateCurrentTime}),g.createElement(M,{key:(t=this.videoPlayer)==null?void 0:t.currentTime,result:n,currentTime:c,attributeList:this.props.config.attributeList,inputList:(i=(e=this.props.config)==null?void 0:e.inputList)!=null?i:[],extraStyle:{top:this.props.drawLayerSlot?40:0}}),this.isClipping&&g.createElement("i",{className:P.clipping,style:{backgroundImage:U}}))},this.onSelectedTimeSlice=t=>{var e;this.isClipping||(this.setState({selectedID:t.id,selectedAttribute:t.attribute,textValue:t.textAttribute,currentTime:t.start}),this.updateSidebar(),(e=this.videoPlayer)==null||e.pause(),this.videoPlayer.currentTime=t.start)},this.removeTimeSlice=t=>{const{result:e}=this.state,i=this.state.selectedID===t.id?"":this.state.selectedID,s=e.findIndex(l=>l.id===t.id);s>-1&&(e.splice(s,1),this.setState({result:[...e],selectedID:i}),this.updateSidebar())},this.setResult=(t=!0,e=this.props)=>{try{const{imgIndex:i,imgList:s}=e;if(!s[i])return;const u=_(s[i].result)[`step_${this.stepInfo().step}`],n=(u==null?void 0:u.result)||[],a=V(s[i].result||"[]");this.setState({result:n,loading:t,selectedID:"",textValue:"",selectedAttribute:"",clipStatus:d.Stop,valid:a},()=>{this.updateSidebar(),a||m.info("\u65E0\u6548\u89C6\u9891\uFF0C\u8BF7\u8DF3\u8FC7")})}catch(i){console.error("\u6570\u636E\u89E3\u6790\u5931\u8D25"),this.setState({result:[],loading:!1,selectedID:"",textValue:"",selectedAttribute:"",valid:!0},()=>{this.updateSidebar()})}},this.setDefaultAttribute=t=>{const{result:e,selectedID:i}=this.state,s=e.find(l=>l.id===i);s&&i&&(s.attribute=t),this.setState({selectedAttribute:t,result:[...e]}),this.updateSidebar()},this.setSubAttribute=(t,e)=>{const{result:i,selectedID:s}=this.state;if(s){const l=i.find(u=>u.id===s);l&&(l.subAttribute||(l.subAttribute={}),l.subAttribute[t]=e,this.setState({result:[...i]}),this.updateSidebar())}},this.textChange=t=>{const{result:e,selectedID:i}=this.state;if(this.setState({textValue:t}),i){const s=e.find(l=>l.id===i);s&&(s.textAttribute=t,this.setState({result:[...e]}),this.updateSidebar())}},this.state={result:[],selectedAttribute:"",textValue:"",clipStatus:d.Stop,selectedID:"",loading:!1,videoError:!1,remainingTime:0,currentTime:0,configLoading:!1,valid:!0}}get videoUrl(){var r;const{imgIndex:t,imgList:e}=this.props;return((r=e[t])==null?void 0:r.url)||""}get isClipping(){return this.state.clipStatus===d.Clipping}get resultJSON(){const{imgIndex:r,imgList:t}=this.props;return t.length===0||!t[r]?"[]":t[r].result}get disabled(){return!this.state.valid||this.state.videoError}get loading(){return this.state.loading||this.state.configLoading}get defaultTextAttribute(){return R.getTextAttribute(this.state.result,this.props.config.textCheckType)}get defaultAttribute(){return this.state.selectedAttribute}get selectedID(){return this.state.selectedID}get selectedSliceIndex(){return this.state.result.findIndex(r=>r.id===this.state.selectedID)}get exportContext(){return{selectedID:this.state.selectedID,result:this.state.result,clipStatus:this.state.clipStatus,videoPlayer:this.videoPlayer,attributeList:this.props.config.attributeList,onSelectedTimeSlice:this.onSelectedTimeSlice,removeTimeSlice:this.removeTimeSlice,updateSelectedSliceTimeProperty:this.updateSelectedSliceTimeProperty}}get valid(){return this.state.valid}get config(){var r;return _((r=this.props.stepInfo)==null?void 0:r.config)}get selectedText(){var r,t;return(t=(r=this.state.result)==null?void 0:r[this.selectedSliceIndex])==null?void 0:t.textAttribute}componentDidMount(){this.setState({loading:!1}),this.setResult(!1),this.props.onMounted(this),window.addEventListener("keydown",this.keyDownEvents)}componentWillUnmount(){this.props.onUnmounted(),window.removeEventListener("keydown",this.keyDownEvents)}shouldComponentUpdate(r,t){const e=r.imgIndex-this.props.imgIndex,i=r.step-this.props.step;return(e!==0||i!==0)&&(this.setResult(!0,r),i!==0&&this.setState({loading:!1})),!0}singleOn(r,t){this.fns.set(r,[t])}on(r,t){this.singleOn(r,t)}unbindAll(r){this.fns.delete(r)}render(){const{selectedID:r,result:t,clipStatus:e,selectedAttribute:i}=this.state;return g.createElement(B,{value:{videoPlayer:this.videoPlayer,result:t,selectedID:r,attributeList:this.props.config.attributeList,clipStatus:e,selectedAttribute:i,contextToCancel:this.contextToCancel}},this.renderMediaContent())}}export{N as default};
+import{MathUtils as D,CommonToolUtils as R,uuid as P,TagUtils as V,AttributeUtils as B}from"@labelbee/lb-annotation";import{jsonParser as L}from"../../../utils/index.js";import{precisionAdd as E,precisionMinus as j,isImageValue as U}from"../../../utils/audio.js";import{message as m}from"antd";import C from"lodash";import v from"react";import w from"./index.module.scss.js";import{VideoClipToolContextProvider as M}from"./VideoClipToolContext.js";import{EClipStatus as c,ETimeSliceType as y,PER_SLICE_CHANGE as b,SLICE_MIN_TIME as I}from"./constant.js";import{VideoPlayer as N}from"../../videoPlayer/index.js";import $ from"./components/videoTimeSlicesOverVideo/index.js";import O from"../../../assets/annotation/video/icon_videoCutting.svg.js";import{decimalReserved as F}from"../../videoPlayer/utils.js";class z extends v.Component{constructor(l){super(l);this.fns=new Map,this.throttledUpdateTime=C.throttle(t=>{this.videoPlayer.currentTime=t},100,{trailing:!0}),this.stepInfo=()=>this.props.stepInfo,this.emitEvent=t=>{const e=this.fns.get(t);e&&e.forEach(i=>{i&&i()})},this.setValid=t=>{this.setState({valid:t}),t===!1&&(this.clearResult(),this.updateSidebar())},this.updateSidebar=()=>{this.emitEvent("changeClipSidebar"),this.emitEvent("updateTextAttribute"),this.emitEvent("changeAttributeSidebar")},this.exportData=()=>{var t,e;const i=(e=(t=this.videoRef)==null?void 0:t.duration)!=null?e:0;return[this.state.result.filter(s=>s.end!==null),{valid:this.state.valid,duration:i}]},this.updateSelectedSliceTimeStartByPer=t=>{var e,i;if(this.state.clipStatus===c.Clipping){m.info("\u622A\u53D6\u4E2D\u4E0D\u652F\u6301\u8C03\u6574\u5F00\u59CB\u65F6\u95F4");return}if(this.selectedSliceIndex>-1){const s=(i=(e=this.videoPlayer)==null?void 0:e.duration)!=null?i:0,{end:r,start:u,type:n}=this.state.result[this.selectedSliceIndex],a=D.withinRange(E(u,t),[0,j(n===y.Time?s:r,b)]);this.updateSelectedSliceTimeProperty(a,"start")}},this.updateSelectedSliceTimeEndByPer=t=>{var e,i;if(this.state.clipStatus===c.Clipping){m.info("\u622A\u53D6\u4E2D\u4E0D\u652F\u6301\u8C03\u6574\u7ED3\u675F\u65F6\u95F4");return}if(this.selectedSliceIndex>-1){const s=this.state.result[this.selectedSliceIndex],r=(i=(e=this.videoPlayer)==null?void 0:e.duration)!=null?i:0;if(s.type===y.Time){m.info("\u65F6\u95F4\u70B9\u4EC5\u652F\u6301\u8C03\u6574\u5F00\u59CB\u65F6\u95F4");return}const{end:u,start:n}=s,a=D.withinRange(E(u,t),[E(n,b),r]);this.updateSelectedSliceTimeProperty(a,"end")}},this.updateSelectedSliceTimeProperty=(t,e)=>{if(this.selectedSliceIndex>-1){const{result:i}=this.state;i[this.selectedSliceIndex][e]=t,this.setState({result:C.cloneDeep(i)}),this.updateSidebar()}},this.keyDownEvents=t=>{if(!R.hotkeyFilter(t))return;const e=t.target;switch(e&&(e==null?void 0:e.tag)==="INPUT"&&(e==null?void 0:e.type)==="radio"&&t.preventDefault(),t.key.toLocaleLowerCase()){case"x":this.toggleClipStatus();break;case"e":this.addTime();break;case"escape":this.cancelClipped();break;case"-":this.updateSelectedSliceTimeStartByPer(-b);break;case"=":this.updateSelectedSliceTimeStartByPer(b);break;case"[":this.updateSelectedSliceTimeEndByPer(-b);break;case"]":this.updateSelectedSliceTimeEndByPer(b);break}},this.setVideoError=(t,e,i)=>{if(t){const{clipStatus:s}=this.state;s===c.Clipping&&this.toggleClipStatus(i)}this.setState({videoError:t,loading:!1})},this.clearResult=()=>{this.setState({result:[],selectedID:"",textValue:""}),this.updateSidebar()},this.cancelClipped=()=>{const{result:t,selectedID:e,clipStatus:i}=this.state;if(i!==c.Clipping)return;const s=t.findIndex(r=>r.id===e);s>-1&&(t.splice(s,1),this.setState({result:t,selectedID:"",clipStatus:c.Stop}),this.updateSidebar())},this.toggleClipStatus=t=>{var e,i;if(typeof((e=this.props)==null?void 0:e.annotationBefore)=="function"){(i=this.props)==null||i.annotationBefore(()=>this.setClipResult(t));return}this.setClipResult(t)},this.setClipResult=t=>{var e,i,s,r,u;if(this.disabled)return;const{clipStatus:n,selectedAttribute:a}=this.state,o=n!==c.Clipping;let h=o?c.Clipping:c.Stop,{result:d,selectedID:p,textValue:S}=this.state;const f=C.cloneDeep(d),x=t||((e=this.videoPlayer)==null?void 0:e.currentTime),A=(i=this.videoPlayer)==null?void 0:i.duration;if(A===void 0||x===void 0)return;const k=F(x,2);if(o){const g=P(),T={};p=g,f.push({start:k,end:null,attribute:a,textAttribute:this.defaultTextAttribute,duration:A,id:g,type:y.Period,subAttribute:T,text:this.getSubAttributeShowText(T,(r=(s=this.props.config)==null?void 0:s.inputList)!=null?r:[])}),S=this.defaultTextAttribute}else{const g=f.findIndex(_=>_.id===p),T=f[g];T&&(x-T.start<I?(f.splice(g,1),m.info(`\u622A\u53D6\u7247\u6BB5\u4E0D\u80FD\u77ED\u4E8E${I}s`),h=c.Stop,p="",S=""):(f[g].end=F(x,2),(u=this.videoPlayer)==null||u.pause(),m.success(`\u5DF2\u622A\u53D6\u7247\u6BB5${d.length}`)))}this.setState({clipStatus:h,result:f,selectedID:p,textValue:S}),this.updateSidebar()},this.addTime=()=>{var t,e,i,s;if(this.disabled)return;const{result:r,selectedAttribute:u,selectedID:n}=this.state,a=P(),o=C.cloneDeep(r),h=((t=this.videoPlayer)==null?void 0:t.currentTime)||0;o.push({start:h,end:h,attribute:u,textAttribute:this.defaultTextAttribute,id:a,type:y.Time,duration:(i=(e=this.videoPlayer)==null?void 0:e.duration)!=null?i:0,subAttribute:{}});const d={result:o,selectedID:a,textValue:this.defaultTextAttribute},p=o.find(S=>S.id===n);this.isClipping&&p?(delete d.selectedID,delete d.textValue,m.success(`\u5DF2\u622A\u53D6\u65F6\u95F4\u70B9${o.length-1}`)):(s=this.videoPlayer)==null||s.pause(),this.setState(d),this.updateSidebar()},this.updateCurrentTime=t=>{this.setState({currentTime:t})},this.contextToCancel=t=>{this.state.clipStatus===c.Stop&&(t.preventDefault(),this.setState({selectedID:""}),this.updateSidebar())},this.onTrackResize=(t,e,i)=>{var s,r;const{result:u}=this.state,n=u.find(a=>a.id===t);if(n){const a=n.duration,o=e==="left",h=o?"start":"end",d=o?-a*i:a*i,p=o?[0,Math.max(((s=n.end)!=null?s:0)-I,0)]:[n.start+I,a],S=D.withinRange(d+((r=n==null?void 0:n[h])!=null?r:0),p);n[h]=S,this.throttledUpdateTime(S)}this.setState({result:[...u]}),this.updateSidebar()},this.renderMediaContent=()=>{var t,e,i;const{pageForward:s,pageJump:r,pageBackward:u}=this.props,{result:n,videoError:a,valid:o,currentTime:h}=this.state;return v.createElement("div",{className:w.clipContainer},v.createElement(N,{imgIndex:this.props.imgIndex,imgList:this.props.imgList,pageBackward:u,pageForward:s,pageJump:r,valid:o,setVideoRef:d=>{this.videoPlayer=d},showVideoTrack:!a,onTrackResize:this.onTrackResize,drawLayerSlot:this.props.drawLayerSlot,footer:this.props.footer,dataLoaded:this.props.onVideoLoaded,toggleClipStatus:this.toggleClipStatus,addTime:this.addTime,updateCurrentTime:this.updateCurrentTime}),v.createElement($,{key:(t=this.videoPlayer)==null?void 0:t.currentTime,result:n,currentTime:h,attributeList:this.props.config.attributeList,inputList:(i=(e=this.props.config)==null?void 0:e.inputList)!=null?i:[],extraStyle:{top:this.props.drawLayerSlot?40:0}}),this.isClipping&&v.createElement("i",{className:w.clipping,style:{backgroundImage:O}}))},this.onSelectedTimeSlice=t=>{var e;this.isClipping||(this.setState({selectedID:t.id,selectedAttribute:t.attribute,textValue:t.textAttribute,currentTime:t.start}),this.updateSidebar(),(e=this.videoPlayer)==null||e.pause(),this.videoPlayer.currentTime=t.start)},this.removeTimeSlice=t=>{const{result:e}=this.state,i=this.state.selectedID===t.id?"":this.state.selectedID,s=e.findIndex(r=>r.id===t.id);s>-1&&(e.splice(s,1),this.setState({result:[...e],selectedID:i}),this.updateSidebar())},this.setResult=(t=!0,e=this.props)=>{var i,s;try{const{imgIndex:r,imgList:u}=e;if(!u[r])return;const a=L(u[r].result)[`step_${this.stepInfo().step}`],o=(a==null?void 0:a.result)||[],h=(s=(i=this.props.config)==null?void 0:i.inputList)!=null?s:[];o.forEach(p=>{p.text=this.getSubAttributeShowText(p.subAttribute,h)});const d=U(u[r].result||"[]");this.setState({result:o,loading:t,selectedID:"",textValue:"",selectedAttribute:"",clipStatus:c.Stop,valid:d},()=>{this.updateSidebar(),d||m.info("\u65E0\u6548\u89C6\u9891\uFF0C\u8BF7\u8DF3\u8FC7")})}catch(r){console.error("\u6570\u636E\u89E3\u6790\u5931\u8D25"),this.setState({result:[],loading:!1,selectedID:"",textValue:"",selectedAttribute:"",valid:!0},()=>{this.updateSidebar()})}},this.setDefaultAttribute=t=>{const{result:e,selectedID:i}=this.state,s=e.find(r=>r.id===i);s&&i&&(s.attribute=t),this.setState({selectedAttribute:t,result:[...e]}),this.updateSidebar()},this.setSubAttribute=(t,e)=>{var i,s;const{result:r,selectedID:u}=this.state;if(u){const n=r.find(a=>a.id===u);n&&(n.subAttribute||(n.subAttribute={}),n.subAttribute[t]=e,n.text=this.getSubAttributeShowText(n.subAttribute,(s=(i=this.props.config)==null?void 0:i.inputList)!=null?s:[]),this.setState({result:[...r]}),this.updateSidebar())}},this.textChange=t=>{const{result:e,selectedID:i}=this.state;if(this.setState({textValue:t}),i){const s=e.find(r=>r.id===i);s&&(s.textAttribute=t,this.setState({result:[...e]}),this.updateSidebar())}},this.getSubAttributeShowText=(t,e)=>{if(!t||(e==null?void 0:e.length)===0)return"";let i="";return V.getTagNameList(t,e).forEach(r=>{i+=`
+${r.keyName}: ${r.value.join("\u3001")}`}),i},this.state={result:[],selectedAttribute:"",textValue:"",clipStatus:c.Stop,selectedID:"",loading:!1,videoError:!1,remainingTime:0,currentTime:0,configLoading:!1,valid:!0}}get videoUrl(){var l;const{imgIndex:t,imgList:e}=this.props;return((l=e[t])==null?void 0:l.url)||""}get isClipping(){return this.state.clipStatus===c.Clipping}get resultJSON(){const{imgIndex:l,imgList:t}=this.props;return t.length===0||!t[l]?"[]":t[l].result}get disabled(){return!this.state.valid||this.state.videoError}get loading(){return this.state.loading||this.state.configLoading}get defaultTextAttribute(){return B.getTextAttribute(this.state.result,this.props.config.textCheckType)}get defaultAttribute(){return this.state.selectedAttribute}get selectedID(){return this.state.selectedID}get selectedSliceIndex(){return this.state.result.findIndex(l=>l.id===this.state.selectedID)}get exportContext(){return{selectedID:this.state.selectedID,result:this.state.result,clipStatus:this.state.clipStatus,videoPlayer:this.videoPlayer,attributeList:this.props.config.attributeList,onSelectedTimeSlice:this.onSelectedTimeSlice,removeTimeSlice:this.removeTimeSlice,updateSelectedSliceTimeProperty:this.updateSelectedSliceTimeProperty}}get valid(){return this.state.valid}get config(){var l;return L((l=this.props.stepInfo)==null?void 0:l.config)}get selectedText(){var l,t;return(t=(l=this.state.result)==null?void 0:l[this.selectedSliceIndex])==null?void 0:t.textAttribute}componentDidMount(){this.setState({loading:!1}),this.setResult(!1),this.props.onMounted(this),window.addEventListener("keydown",this.keyDownEvents)}componentWillUnmount(){this.props.onUnmounted(),window.removeEventListener("keydown",this.keyDownEvents)}shouldComponentUpdate(l,t){const e=l.imgIndex-this.props.imgIndex,i=l.step-this.props.step;return(e!==0||i!==0)&&(this.setResult(!0,l),i!==0&&this.setState({loading:!1})),!0}singleOn(l,t){this.fns.set(l,[t])}on(l,t){this.singleOn(l,t)}unbindAll(l){this.fns.delete(l)}render(){const{selectedID:l,result:t,clipStatus:e,selectedAttribute:i}=this.state;return v.createElement(M,{value:{videoPlayer:this.videoPlayer,result:t,selectedID:l,attributeList:this.props.config.attributeList,clipStatus:e,selectedAttribute:i,contextToCancel:this.contextToCancel}},this.renderMediaContent())}}export{z as default};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@labelbee/lb-components",
-  "version": "1.24.0-alpha.52",
+  "version": "1.24.0-alpha.54",
   "description": "Provide a complete library of annotation components",
   "main": "./dist/index.js",
   "es": "./es/index.js",
@@ -43,8 +43,8 @@
   },
   "dependencies": {
     "@ant-design/icons": "^4.6.2",
-    "@labelbee/lb-annotation": "1.28.0-alpha.29",
-    "@labelbee/lb-utils": "1.20.0-alpha.7",
+    "@labelbee/lb-annotation": "1.28.0-alpha.31",
+    "@labelbee/lb-utils": "1.20.0-alpha.8",
     "@labelbee/wavesurfer": "1.1.0",
     "@types/react-dom": "18.3.1",
     "@types/react-transition-group": "^4.4.9",