@labelbee/lb-components 1.24.0-alpha.63 → 1.24.0-alpha.64

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

@@ -1 +1 @@
-"use strict";var audio=require("../../../../../utils/audio.js"),index$1=require("../../../../../utils/index.js"),icons=require("@ant-design/icons"),React=require("react"),constant=require("../../constant.js"),index=require("../timeSliceRange/index.js"),ToolTipForClip=require("../ToolTipForClip.js"),index$2=require("../videoTrack/index.js"),index_module=require("./index.module.scss.js"),utils=require("../../../../videoPlayer/utils.js"),ctx=require("../../../../../store/ctx.js"),reactRedux=require("react-redux"),reactI18next=require("react-i18next");function _interopDefaultLegacy(e){return e&&typeof e=="object"&&"default"in e?e:{default:e}}var React__default=_interopDefaultLegacy(React);const TimeSliceIcon=({type:e})=>e===constant.ETimeSliceType.Time?React__default.default.createElement(icons.EnvironmentFilled,null):React__default.default.createElement(icons.ScissorOutlined,{rotate:270}),EmptyVideoClipAnnotatedList=()=>{const{t:e}=reactI18next.useTranslation();return React__default.default.createElement("div",{className:index_module.noContent},React__default.default.createElement("div",null,e("NoClippedData")),React__default.default.createElement("div",null,React__default.default.createElement("span",{className:index_module.hotkey},"X"),e("ClipSlice")),React__default.default.createElement("div",null,React__default.default.createElement("span",{className:index_module.hotkey},"E"),e("TimeStamp")))},VideoClipAnnotatedListWrapper=({children:e,scrollRef:t})=>{const a=e.length===0;return React__default.default.createElement("div",{ref:t,className:index$1.classnames({[index_module.empty]:a,[index_module.timeSliceListContent]:!0})},a?React__default.default.createElement(EmptyVideoClipAnnotatedList,null):e)},VideoClipAnnotatedItem=({timeSliceProps:e,index:t,exportContext:a,onItemClick:r})=>{const{selectedID:c,attributeList:i,removeTimeSlice:d}=a;return React__default.default.createElement("div",{key:t,className:index$1.classnames({[index_module.timeSliceItem]:!0,[index_module.timeSliceItemActivated]:e.id===c}),onClick:()=>{r(e)}},React__default.default.createElement(ToolTipForClip,{slot:React__default.default.createElement("div",{className:index_module.timeSliceItemContent},React__default.default.createElement("div",{className:index_module.textOverflow},`${t+1}\u3001\u3010${constant.TIME_SLICE_TYPE[e.type]}\u3011 ${index$2.getDisplayContent(e,i)}`),React__default.default.createElement("div",{className:index$1.classnames({[index_module.textOverflow]:!0})},React__default.default.createElement(TimeSliceIcon,{type:e.type}),React__default.default.createElement("span",{style:{marginLeft:10}},`${audio.timeFormat(e.start,"ss:SS")} ${e.end&&e.type===constant.ETimeSliceType.Period?"~ "+audio.timeFormat(e.end,"ss:SS")+", "+utils.decimalReserved(e.end-e.start,2)+"s":""}`))),item:e,attributeList:i}),React__default.default.createElement(icons.CloseCircleFilled,{className:index_module.timeSliceItemDeleteIcon,onClick:s=>{s.stopPropagation(),d(e)}}))},VideoClipAnnotatedList=e=>{const{toolInstance:t}=e,{selectedID:a,result:r,videoPlayer:c,clipStatus:i,updateSelectedSliceTimeProperty:d}=(t==null?void 0:t.exportContext)||{},[s,v]=React.useState(0),o=React.useRef(null),m=React.useRef(!1),{t:p}=reactI18next.useTranslation();React.useEffect(()=>(t&&t.singleOn("changeClipSidebar",l=>{v(n=>n+1)}),()=>{var l;(l=t==null?void 0:t.unbindAll)==null||l.call(t,"changeClipSidebar")}),[t]);const E=r==null?void 0:r.find(l=>l.id===a),u=React.useMemo(()=>{var l;return[...(l=r==null?void 0:r.filter(n=>n.end!==null))!=null?l:[]].sort((n,f)=>n.start-f.start)},[r,s]),x=l=>{m.current=!0,t.exportContext.onSelectedTimeSlice(l)};return React.useLayoutEffect(()=>{var l;if(!a||!o.current)return;if(m.current){m.current=!1;return}const n=u.findIndex(f=>f.id===a);n>=0&&((l=o.current.children[n])==null||l.scrollIntoView({block:"nearest"}))},[a,s,u]),(t==null?void 0:t.exportContext)?React__default.default.createElement("div",null,React__default.default.createElement("div",{className:index_module.timeSliceListHeader},p("AnnotatedList")),React__default.default.createElement(VideoClipAnnotatedListWrapper,{scrollRef:o},u==null?void 0:u.map((l,n)=>React__default.default.createElement(VideoClipAnnotatedItem,{timeSliceProps:l,index:n,key:l.id,exportContext:(t==null?void 0:t.exportContext)||{},onItemClick:x}))),React__default.default.createElement(index,{selectedTimeSlice:E,videoPlayer:c,updateTimeForSelected:d,disabled:i===constant.EClipStatus.Clipping})):null},mapStateToProps=({annotation:e})=>{const{toolInstance:t}=e;return{toolInstance:t}};var VideoClipAnnotatedList$1=reactRedux.connect(mapStateToProps,null,null,{context:ctx.LabelBeeContext})(VideoClipAnnotatedList);module.exports=VideoClipAnnotatedList$1;
+"use strict";var audio=require("../../../../../utils/audio.js"),index$1=require("../../../../../utils/index.js"),icons=require("@ant-design/icons"),React=require("react"),constant=require("../../constant.js"),index=require("../timeSliceRange/index.js"),ToolTipForClip=require("../ToolTipForClip.js"),index$2=require("../videoTrack/index.js"),index_module=require("./index.module.scss.js"),utils=require("../../../../videoPlayer/utils.js"),ctx=require("../../../../../store/ctx.js"),reactRedux=require("react-redux"),reactI18next=require("react-i18next");function _interopDefaultLegacy(e){return e&&typeof e=="object"&&"default"in e?e:{default:e}}var React__default=_interopDefaultLegacy(React);const TimeSliceIcon=({type:e})=>e===constant.ETimeSliceType.Time?React__default.default.createElement(icons.EnvironmentFilled,null):React__default.default.createElement(icons.ScissorOutlined,{rotate:270}),EmptyVideoClipAnnotatedList=()=>{const{t:e}=reactI18next.useTranslation();return React__default.default.createElement("div",{className:index_module.noContent},React__default.default.createElement("div",null,e("NoClippedData")),React__default.default.createElement("div",null,React__default.default.createElement("span",{className:index_module.hotkey},"X"),e("ClipSlice")),React__default.default.createElement("div",null,React__default.default.createElement("span",{className:index_module.hotkey},"E"),e("TimeStamp")))},VideoClipAnnotatedListWrapper=({children:e,scrollRef:t})=>{const a=e.length===0;return React__default.default.createElement("div",{ref:t,className:index$1.classnames({[index_module.empty]:a,[index_module.timeSliceListContent]:!0})},a?React__default.default.createElement(EmptyVideoClipAnnotatedList,null):e)},VideoClipAnnotatedItem=({timeSliceProps:e,index:t,exportContext:a,onItemClick:r})=>{const{selectedID:c,attributeList:s,removeTimeSlice:d}=a;return React__default.default.createElement("div",{key:t,className:index$1.classnames({[index_module.timeSliceItem]:!0,[index_module.timeSliceItemActivated]:e.id===c}),onClick:()=>{r(e)}},React__default.default.createElement(ToolTipForClip,{slot:React__default.default.createElement("div",{className:index_module.timeSliceItemContent},React__default.default.createElement("div",{className:index_module.textOverflow},`${t+1}\u3001\u3010${constant.TIME_SLICE_TYPE[e.type]}\u3011 ${index$2.getDisplayContent(e,s)}`),React__default.default.createElement("div",{className:index$1.classnames({[index_module.textOverflow]:!0})},React__default.default.createElement(TimeSliceIcon,{type:e.type}),React__default.default.createElement("span",{style:{marginLeft:10}},`${audio.timeFormat(e.start,"ss:SS")} ${e.end&&e.type===constant.ETimeSliceType.Period?"~ "+audio.timeFormat(e.end,"ss:SS")+", "+utils.decimalReserved(e.end-e.start,2)+"s":""}`))),item:e,attributeList:s}),React__default.default.createElement(icons.CloseCircleFilled,{className:index_module.timeSliceItemDeleteIcon,onClick:i=>{i.stopPropagation(),d(e)}}))},VideoClipAnnotatedList=e=>{const{toolInstance:t}=e,{selectedID:a,result:r,videoPlayer:c,clipStatus:s,updateSelectedSliceTimeProperty:d,linkageConfigurable:i}=(t==null?void 0:t.exportContext)||{},[v,p]=React.useState(0),o=React.useRef(null),m=React.useRef(!1),{t:E}=reactI18next.useTranslation();React.useEffect(()=>(t&&t.singleOn("changeClipSidebar",l=>{p(n=>n+1)}),()=>{var l;(l=t==null?void 0:t.unbindAll)==null||l.call(t,"changeClipSidebar")}),[t]);const x=r==null?void 0:r.find(l=>l.id===a),u=React.useMemo(()=>{var l;return[...(l=r==null?void 0:r.filter(n=>n.end!==null))!=null?l:[]].sort((n,f)=>n.start-f.start)},[r,v]),C=l=>{i&&(m.current=!0),t.exportContext.onSelectedTimeSlice(l)};return React.useLayoutEffect(()=>{var l;if(!i||!a||!o.current)return;if(m.current){m.current=!1;return}const n=u.findIndex(f=>f.id===a);n>=0&&((l=o.current.children[n])==null||l.scrollIntoView({block:"nearest"}))},[i,a,v,u]),(t==null?void 0:t.exportContext)?React__default.default.createElement("div",null,React__default.default.createElement("div",{className:index_module.timeSliceListHeader},E("AnnotatedList")),React__default.default.createElement(VideoClipAnnotatedListWrapper,{scrollRef:i?o:void 0},u==null?void 0:u.map((l,n)=>React__default.default.createElement(VideoClipAnnotatedItem,{timeSliceProps:l,index:n,key:l.id,exportContext:(t==null?void 0:t.exportContext)||{},onItemClick:C}))),React__default.default.createElement(index,{selectedTimeSlice:x,videoPlayer:c,updateTimeForSelected:d,disabled:s===constant.EClipStatus.Clipping})):null},mapStateToProps=({annotation:e})=>{const{toolInstance:t}=e;return{toolInstance:t}};var VideoClipAnnotatedList$1=reactRedux.connect(mapStateToProps,null,null,{context:ctx.LabelBeeContext})(VideoClipAnnotatedList);module.exports=VideoClipAnnotatedList$1;

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

@@ -1,2 +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(o){return o&&typeof o=="object"&&"default"in o?o:{default:o}}var ___default=_interopDefaultLegacy(_),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=(o,s,t)=>s in o?__defProp(o,s,{enumerable:!0,configurable:!0,writable:!0,value:t}):o[s]=t,__spreadValues=(o,s)=>{for(var t in s||(s={}))__hasOwnProp.call(s,t)&&__defNormalProp(o,t,s[t]);if(__getOwnPropSymbols)for(var t of __getOwnPropSymbols(s))__propIsEnum.call(s,t)&&__defNormalProp(o,t,s[t]);return o},__spreadProps=(o,s)=>__defProps(o,__getOwnPropDescs(s));class VideoClipTool extends React__default.default.Component{constructor(s){super(s);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(r=>r.end!==null),{valid:this.state.valid,duration:i}]},this.exportCustomData=()=>({extraResult:this.state.extraResult}),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 r=(i=(e=this.videoPlayer)==null?void 0:e.duration)!=null?i:0,{end:l,start:n,type:a}=this.state.result[this.selectedSliceIndex],u=lbAnnotation.MathUtils.withinRange(audio.precisionAdd(n,t),[0,audio.precisionMinus(a===constant.ETimeSliceType.Time?r:l,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 r=this.state.result[this.selectedSliceIndex],l=(i=(e=this.videoPlayer)==null?void 0:e.duration)!=null?i:0;if(r.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}=r,u=lbAnnotation.MathUtils.withinRange(audio.precisionAdd(n,t),[audio.precisionAdd(a,constant.PER_SLICE_CHANGE),l]);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:r}=this.state;r===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 r=t.findIndex(l=>l.id===e);r>-1&&(t.splice(r,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,r,l,n,a,u;if(this.disabled)return;const{clipStatus:c,selectedAttribute:p}=this.state,d=c!==constant.EClipStatus.Clipping;let h=d?constant.EClipStatus.Clipping:constant.EClipStatus.Stop,{result:S,selectedID:f,textValue:m}=this.state;const g=___default.default.cloneDeep(S),T=t||((e=this.videoPlayer)==null?void 0:e.currentTime),E=(i=this.videoPlayer)==null?void 0:i.duration;if(E===void 0||T===void 0)return;const I=utils.decimalReserved(T,2);if(d){const v=lbAnnotation.uuid(),b={};f=v;const C=((r=this.props.config)==null?void 0:r.customAttributeInput)===!0?"\u65E0\u5C5E\u6027":p;g.push({start:I,end:null,attribute:C,textAttribute:this.defaultTextAttribute,duration:E,id:v,type:constant.ETimeSliceType.Period,subAttribute:b,text:this.getSubAttributeShowText(b,(n=(l=this.props.config)==null?void 0:l.inputList)!=null?n:[])}),m=this.defaultTextAttribute}else{const v=g.findIndex(C=>C.id===f),b=g[v];b&&(T-b.start<constant.SLICE_MIN_TIME?(g.splice(v,1),antd.message.info(`\u622A\u53D6\u7247\u6BB5\u4E0D\u80FD\u77ED\u4E8E${constant.SLICE_MIN_TIME}s`),h=constant.EClipStatus.Stop,f="",m=""):(g[v].end=utils.decimalReserved(T,2),(a=this.videoPlayer)==null||a.pause(),antd.message.success(`\u5DF2\u622A\u53D6\u7247\u6BB5${S.length}`)))}const x={clipStatus:h,result:g,selectedID:f,textValue:m};((u=this.props.config)==null?void 0:u.customAttributeInput)&&d&&(x.selectedAttribute="\u65E0\u5C5E\u6027"),this.setState(x),this.updateSidebar()},this.addTime=()=>{var t,e,i,r,l,n;if(this.disabled)return;const{result:a,selectedAttribute:u,selectedID:c}=this.state,p=lbAnnotation.uuid(),d=___default.default.cloneDeep(a),h=((t=this.videoPlayer)==null?void 0:t.currentTime)||0,S=((e=this.props.config)==null?void 0:e.customAttributeInput)?"\u65E0\u5C5E\u6027":u;d.push({start:h,end:h,attribute:S,textAttribute:this.defaultTextAttribute,id:p,type:constant.ETimeSliceType.Time,duration:(r=(i=this.videoPlayer)==null?void 0:i.duration)!=null?r:0,subAttribute:{}});const f={result:d,selectedID:p,textValue:this.defaultTextAttribute};((l=this.props.config)==null?void 0:l.customAttributeInput)&&(f.selectedAttribute="\u65E0\u5C5E\u6027");const m=d.find(g=>g.id===c);this.isClipping&&m?(delete f.selectedID,delete f.textValue,antd.message.success(`\u5DF2\u622A\u53D6\u65F6\u95F4\u70B9${d.length-1}`)):(n=this.videoPlayer)==null||n.pause(),this.setState(f),this.updateSidebar()},this.updateCurrentTime=t=>{this.setState({currentTime:t}),this.selectTimeSliceByTime(t)},this.findTimeSliceByTime=t=>{const e=utils.decimalReserved(t,2);return this.state.result.find(i=>i.end===null?!1:i.type===constant.ETimeSliceType.Time?utils.decimalReserved(i.start,2)===e:i.start<=e&&e<i.end)},this.selectTimeSliceByTime=t=>{if(this.isClipping)return;const e=this.findTimeSliceByTime(t);if(e){if(e.id===this.state.selectedID)return;this.setState({selectedID:e.id,selectedAttribute:e.attribute,textValue:e.textAttribute})}else{if(!this.state.selectedID)return;this.setState({selectedID:""})}this.updateSidebar()},this.contextToCancel=t=>{this.state.clipStatus===constant.EClipStatus.Stop&&(t.preventDefault(),this.setState({selectedID:""}),this.updateSidebar())},this.onTrackResize=(t,e,i)=>{var r,l;const{result:n}=this.state,a=n.find(u=>u.id===t);if(a){const u=a.duration,c=e==="left",p=c?"start":"end",d=c?-u*i:u*i,h=c?[0,Math.max(((r=a.end)!=null?r:0)-constant.SLICE_MIN_TIME,0)]:[a.start+constant.SLICE_MIN_TIME,u],S=lbAnnotation.MathUtils.withinRange(d+((l=a==null?void 0:a[p])!=null?l:0),h);a[p]=S,this.throttledUpdateTime(S)}this.setState({result:[...n]}),this.updateSidebar()},this.renderMediaContent=()=>{var t,e,i;const{pageForward:r,pageJump:l,pageBackward:n}=this.props,{result:a,videoError:u,valid:c,currentTime:p}=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:r,pageJump:l,valid:c,setVideoRef:d=>{this.videoPlayer=d},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:p,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,r=e.findIndex(l=>l.id===t.id);r>-1&&(e.splice(r,1),this.setState({result:[...e],selectedID:i}),this.updateSidebar())},this.setResult=(t=!0,e=this.props)=>{var i,r;try{const{imgIndex:l,imgList:n}=e;if(!n[l])return;const u=index$2.jsonParser(n[l].result)[`step_${this.stepInfo().step}`],c=(u==null?void 0:u.result)||[],p=(u==null?void 0:u.extraResult)||{globalTag:{}},d=(r=(i=this.props.config)==null?void 0:i.inputList)!=null?r:[];c.forEach(S=>{S.text=this.getSubAttributeShowText(S.subAttribute,d)});const h=audio.isImageValue(n[l].result||"[]");this.setState({result:c,loading:t,selectedID:"",textValue:"",selectedAttribute:"",clipStatus:constant.EClipStatus.Stop,valid:h,extraResult:p},()=>{this.updateSidebar(),h||antd.message.info("\u65E0\u6548\u89C6\u9891\uFF0C\u8BF7\u8DF3\u8FC7")})}catch(l){console.error("\u6570\u636E\u89E3\u6790\u5931\u8D25"),this.setState({result:[],loading:!1,selectedID:"",textValue:"",selectedAttribute:"",valid:!0,extraResult:{globalTag:{}}},()=>{this.updateSidebar()})}},this.setDefaultAttribute=t=>{const{result:e,selectedID:i}=this.state,r=e.find(l=>l.id===i);r&&i&&(r.attribute=t),this.setState({selectedAttribute:t,result:[...e]}),this.updateSidebar()},this.setSubAttribute=(t,e)=>{var i,r;const{result:l,selectedID:n}=this.state;if(n){const a=l.find(u=>u.id===n);a&&(a.subAttribute||(a.subAttribute={}),a.subAttribute[t]=e,a.text=this.getSubAttributeShowText(a.subAttribute,(r=(i=this.props.config)==null?void 0:i.inputList)!=null?r:[]),this.setState({result:[...l]}),this.updateSidebar())}},this.textChange=t=>{const{result:e,selectedID:i}=this.state;if(this.setState({textValue:t}),i){const r=e.find(l=>l.id===i);r&&(r.textAttribute=t,this.setState({result:[...e]}),this.updateSidebar())}},this.setGlobalTag=(t,e)=>{const{extraResult:i}=this.state;this.setState({extraResult:__spreadProps(__spreadValues({},i),{globalTag:__spreadProps(__spreadValues({},i.globalTag||{}),{[t]:e})})})},this.getSubAttributeShowText=(t,e)=>{if(!t||(e==null?void 0:e.length)===0)return"";let i="";return lbAnnotation.TagUtils.getTagNameList(t,e).forEach(l=>{i+=`
-${l.keyName}: ${l.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,extraResult:{globalTag:{}}}}get videoUrl(){var s;const{imgIndex:t,imgList:e}=this.props;return((s=e[t])==null?void 0:s.url)||""}get isClipping(){return this.state.clipStatus===constant.EClipStatus.Clipping}get resultJSON(){const{imgIndex:s,imgList:t}=this.props;return t.length===0||!t[s]?"[]":t[s].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(s=>s.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,extraResult:this.state.extraResult}}get valid(){return this.state.valid}get config(){var s;return index$2.jsonParser((s=this.props.stepInfo)==null?void 0:s.config)}get selectedText(){var s,t;return(t=(s=this.state.result)==null?void 0:s[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(s,t){const e=s.imgIndex-this.props.imgIndex,i=s.step-this.props.step;return(e!==0||i!==0)&&(this.setResult(!0,s),i!==0&&this.setState({loading:!1})),!0}singleOn(s,t){this.fns.set(s,[t])}on(s,t){this.singleOn(s,t)}unbindAll(s){this.fns.delete(s)}render(){const{selectedID:s,result:t,clipStatus:e,selectedAttribute:i}=this.state;return React__default.default.createElement(VideoClipToolContext.VideoClipToolContextProvider,{value:{videoPlayer:this.videoPlayer,result:t,selectedID:s,attributeList:this.props.config.attributeList,clipStatus:e,selectedAttribute:i,contextToCancel:this.contextToCancel,selectTimeSliceByTime:this.selectTimeSliceByTime}},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(o){return o&&typeof o=="object"&&"default"in o?o:{default:o}}var ___default=_interopDefaultLegacy(_),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=(o,s,t)=>s in o?__defProp(o,s,{enumerable:!0,configurable:!0,writable:!0,value:t}):o[s]=t,__spreadValues=(o,s)=>{for(var t in s||(s={}))__hasOwnProp.call(s,t)&&__defNormalProp(o,t,s[t]);if(__getOwnPropSymbols)for(var t of __getOwnPropSymbols(s))__propIsEnum.call(s,t)&&__defNormalProp(o,t,s[t]);return o},__spreadProps=(o,s)=>__defProps(o,__getOwnPropDescs(s));class VideoClipTool extends React__default.default.Component{constructor(s){super(s);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(r=>r.end!==null),{valid:this.state.valid,duration:i}]},this.exportCustomData=()=>({extraResult:this.state.extraResult}),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 r=(i=(e=this.videoPlayer)==null?void 0:e.duration)!=null?i:0,{end:l,start:n,type:a}=this.state.result[this.selectedSliceIndex],u=lbAnnotation.MathUtils.withinRange(audio.precisionAdd(n,t),[0,audio.precisionMinus(a===constant.ETimeSliceType.Time?r:l,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 r=this.state.result[this.selectedSliceIndex],l=(i=(e=this.videoPlayer)==null?void 0:e.duration)!=null?i:0;if(r.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}=r,u=lbAnnotation.MathUtils.withinRange(audio.precisionAdd(n,t),[audio.precisionAdd(a,constant.PER_SLICE_CHANGE),l]);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:r}=this.state;r===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 r=t.findIndex(l=>l.id===e);r>-1&&(t.splice(r,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,r,l,n,a,u;if(this.disabled)return;const{clipStatus:c,selectedAttribute:h}=this.state,d=c!==constant.EClipStatus.Clipping;let p=d?constant.EClipStatus.Clipping:constant.EClipStatus.Stop,{result:S,selectedID:f,textValue:m}=this.state;const g=___default.default.cloneDeep(S),T=t||((e=this.videoPlayer)==null?void 0:e.currentTime),E=(i=this.videoPlayer)==null?void 0:i.duration;if(E===void 0||T===void 0)return;const I=utils.decimalReserved(T,2);if(d){const v=lbAnnotation.uuid(),b={};f=v;const C=((r=this.props.config)==null?void 0:r.customAttributeInput)===!0?"\u65E0\u5C5E\u6027":h;g.push({start:I,end:null,attribute:C,textAttribute:this.defaultTextAttribute,duration:E,id:v,type:constant.ETimeSliceType.Period,subAttribute:b,text:this.getSubAttributeShowText(b,(n=(l=this.props.config)==null?void 0:l.inputList)!=null?n:[])}),m=this.defaultTextAttribute}else{const v=g.findIndex(C=>C.id===f),b=g[v];b&&(T-b.start<constant.SLICE_MIN_TIME?(g.splice(v,1),antd.message.info(`\u622A\u53D6\u7247\u6BB5\u4E0D\u80FD\u77ED\u4E8E${constant.SLICE_MIN_TIME}s`),p=constant.EClipStatus.Stop,f="",m=""):(g[v].end=utils.decimalReserved(T,2),(a=this.videoPlayer)==null||a.pause(),antd.message.success(`\u5DF2\u622A\u53D6\u7247\u6BB5${S.length}`)))}const x={clipStatus:p,result:g,selectedID:f,textValue:m};((u=this.props.config)==null?void 0:u.customAttributeInput)&&d&&(x.selectedAttribute="\u65E0\u5C5E\u6027"),this.setState(x),this.updateSidebar()},this.addTime=()=>{var t,e,i,r,l,n;if(this.disabled)return;const{result:a,selectedAttribute:u,selectedID:c}=this.state,h=lbAnnotation.uuid(),d=___default.default.cloneDeep(a),p=((t=this.videoPlayer)==null?void 0:t.currentTime)||0,S=((e=this.props.config)==null?void 0:e.customAttributeInput)?"\u65E0\u5C5E\u6027":u;d.push({start:p,end:p,attribute:S,textAttribute:this.defaultTextAttribute,id:h,type:constant.ETimeSliceType.Time,duration:(r=(i=this.videoPlayer)==null?void 0:i.duration)!=null?r:0,subAttribute:{}});const f={result:d,selectedID:h,textValue:this.defaultTextAttribute};((l=this.props.config)==null?void 0:l.customAttributeInput)&&(f.selectedAttribute="\u65E0\u5C5E\u6027");const m=d.find(g=>g.id===c);this.isClipping&&m?(delete f.selectedID,delete f.textValue,antd.message.success(`\u5DF2\u622A\u53D6\u65F6\u95F4\u70B9${d.length-1}`)):(n=this.videoPlayer)==null||n.pause(),this.setState(f),this.updateSidebar()},this.updateCurrentTime=t=>{var e;this.setState({currentTime:t}),((e=this.props.config)==null?void 0:e.linkageConfigurable)===!0&&this.selectTimeSliceByTime(t)},this.findTimeSliceByTime=t=>{const e=utils.decimalReserved(t,2);return this.state.result.find(i=>i.end===null?!1:i.type===constant.ETimeSliceType.Time?utils.decimalReserved(i.start,2)===e:i.start<=e&&e<i.end)},this.selectTimeSliceByTime=t=>{if(this.isClipping)return;const e=this.findTimeSliceByTime(t);if(e){if(e.id===this.state.selectedID)return;this.setState({selectedID:e.id,selectedAttribute:e.attribute,textValue:e.textAttribute})}else{if(!this.state.selectedID)return;this.setState({selectedID:""})}this.updateSidebar()},this.contextToCancel=t=>{this.state.clipStatus===constant.EClipStatus.Stop&&(t.preventDefault(),this.setState({selectedID:""}),this.updateSidebar())},this.onTrackResize=(t,e,i)=>{var r,l;const{result:n}=this.state,a=n.find(u=>u.id===t);if(a){const u=a.duration,c=e==="left",h=c?"start":"end",d=c?-u*i:u*i,p=c?[0,Math.max(((r=a.end)!=null?r:0)-constant.SLICE_MIN_TIME,0)]:[a.start+constant.SLICE_MIN_TIME,u],S=lbAnnotation.MathUtils.withinRange(d+((l=a==null?void 0:a[h])!=null?l:0),p);a[h]=S,this.throttledUpdateTime(S)}this.setState({result:[...n]}),this.updateSidebar()},this.renderMediaContent=()=>{var t,e,i,r;const{pageForward:l,pageJump:n,pageBackward:a}=this.props,{result:u,videoError:c,valid:h,currentTime:d}=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:a,pageForward:l,pageJump:n,valid:h,setVideoRef:p=>{this.videoPlayer=p},showVideoTrack:!c,onTrackResize:this.onTrackResize,drawLayerSlot:this.props.drawLayerSlot,footer:this.props.footer,dataLoaded:this.props.onVideoLoaded,toggleClipStatus:this.toggleClipStatus,addTime:this.addTime,updateCurrentTime:this.updateCurrentTime,syncTimeOnPlay:((t=this.props.config)==null?void 0:t.linkageConfigurable)===!0}),React__default.default.createElement(index$1,{key:(e=this.videoPlayer)==null?void 0:e.currentTime,result:u,currentTime:d,attributeList:this.props.config.attributeList,inputList:(r=(i=this.props.config)==null?void 0:i.inputList)!=null?r:[],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,r=e.findIndex(l=>l.id===t.id);r>-1&&(e.splice(r,1),this.setState({result:[...e],selectedID:i}),this.updateSidebar())},this.setResult=(t=!0,e=this.props)=>{var i,r;try{const{imgIndex:l,imgList:n}=e;if(!n[l])return;const u=index$2.jsonParser(n[l].result)[`step_${this.stepInfo().step}`],c=(u==null?void 0:u.result)||[],h=(u==null?void 0:u.extraResult)||{globalTag:{}},d=(r=(i=this.props.config)==null?void 0:i.inputList)!=null?r:[];c.forEach(S=>{S.text=this.getSubAttributeShowText(S.subAttribute,d)});const p=audio.isImageValue(n[l].result||"[]");this.setState({result:c,loading:t,selectedID:"",textValue:"",selectedAttribute:"",clipStatus:constant.EClipStatus.Stop,valid:p,extraResult:h},()=>{this.updateSidebar(),p||antd.message.info("\u65E0\u6548\u89C6\u9891\uFF0C\u8BF7\u8DF3\u8FC7")})}catch(l){console.error("\u6570\u636E\u89E3\u6790\u5931\u8D25"),this.setState({result:[],loading:!1,selectedID:"",textValue:"",selectedAttribute:"",valid:!0,extraResult:{globalTag:{}}},()=>{this.updateSidebar()})}},this.setDefaultAttribute=t=>{const{result:e,selectedID:i}=this.state,r=e.find(l=>l.id===i);r&&i&&(r.attribute=t),this.setState({selectedAttribute:t,result:[...e]}),this.updateSidebar()},this.setSubAttribute=(t,e)=>{var i,r;const{result:l,selectedID:n}=this.state;if(n){const a=l.find(u=>u.id===n);a&&(a.subAttribute||(a.subAttribute={}),a.subAttribute[t]=e,a.text=this.getSubAttributeShowText(a.subAttribute,(r=(i=this.props.config)==null?void 0:i.inputList)!=null?r:[]),this.setState({result:[...l]}),this.updateSidebar())}},this.textChange=t=>{const{result:e,selectedID:i}=this.state;if(this.setState({textValue:t}),i){const r=e.find(l=>l.id===i);r&&(r.textAttribute=t,this.setState({result:[...e]}),this.updateSidebar())}},this.setGlobalTag=(t,e)=>{const{extraResult:i}=this.state;this.setState({extraResult:__spreadProps(__spreadValues({},i),{globalTag:__spreadProps(__spreadValues({},i.globalTag||{}),{[t]:e})})})},this.getSubAttributeShowText=(t,e)=>{if(!t||(e==null?void 0:e.length)===0)return"";let i="";return lbAnnotation.TagUtils.getTagNameList(t,e).forEach(l=>{i+=`
+${l.keyName}: ${l.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,extraResult:{globalTag:{}}}}get videoUrl(){var s;const{imgIndex:t,imgList:e}=this.props;return((s=e[t])==null?void 0:s.url)||""}get isClipping(){return this.state.clipStatus===constant.EClipStatus.Clipping}get resultJSON(){const{imgIndex:s,imgList:t}=this.props;return t.length===0||!t[s]?"[]":t[s].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(s=>s.id===this.state.selectedID)}get exportContext(){var s;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,extraResult:this.state.extraResult,linkageConfigurable:((s=this.props.config)==null?void 0:s.linkageConfigurable)===!0}}get valid(){return this.state.valid}get config(){var s;return index$2.jsonParser((s=this.props.stepInfo)==null?void 0:s.config)}get selectedText(){var s,t;return(t=(s=this.state.result)==null?void 0:s[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(s,t){const e=s.imgIndex-this.props.imgIndex,i=s.step-this.props.step;return(e!==0||i!==0)&&(this.setResult(!0,s),i!==0&&this.setState({loading:!1})),!0}singleOn(s,t){this.fns.set(s,[t])}on(s,t){this.singleOn(s,t)}unbindAll(s){this.fns.delete(s)}render(){const{selectedID:s,result:t,clipStatus:e,selectedAttribute:i}=this.state;return React__default.default.createElement(VideoClipToolContext.VideoClipToolContextProvider,{value:{videoPlayer:this.videoPlayer,result:t,selectedID:s,attributeList:this.props.config.attributeList,clipStatus:e,selectedAttribute:i,contextToCancel:this.contextToCancel,selectTimeSliceByTime:this.selectTimeSliceByTime}},this.renderMediaContent())}}module.exports=VideoClipTool;

package/dist/components/videoPlayer/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var React=require("react"),index$2=require("./components/controller/index.js"),index=require("../videoAnnotate/videoClipTool/components/videoTrack/index.js"),dom=require("../../utils/dom.js"),lbAnnotation=require("@labelbee/lb-annotation"),utils=require("./utils.js"),index$1=require("../fileException/index.js");function _interopDefaultLegacy(o){return o&&typeof o=="object"&&"default"in o?o:{default:o}}var React__default=_interopDefaultLegacy(React);const EKeyCode=lbAnnotation.cKeyCode.default,VideoPlayerCtx=React__default.default.createContext({isPlay:!1,playPause:()=>{},updateNextPlaybackRate:()=>{},playbackRate:1,currentTime:0,duration:0,buffered:0,setCurrentTime:()=>{},imgList:[],imgIndex:-1,pageBackward:()=>{},pageJump:o=>{},pageForward:()=>{},addTime:()=>{},toggleClipStatus:()=>{}}),PER_INTERVAL=300,PER_FORWARD=.1,PLAYBACK_RATES=[.1,.2,.3,.4,.5,1,1.5,2,4,6,8,16];class VideoPlayer extends React__default.default.Component{constructor(a){super(a);this.changePlaybackPate=e=>{this.videoElm&&(this.videoElm.playbackRate=e,this.setState({playbackRate:e}))},this.playPause=()=>{var e,t,i;((e=this.videoElm)==null?void 0:e.paused)?(t=this.videoElm)==null||t.play():(i=this.videoElm)==null||i.pause()},this.updateNextPlaybackRate=(e=!0)=>{const t=PLAYBACK_RATES.findIndex(r=>r===this.state.playbackRate);let i=e?Math.min(t+1,PLAYBACK_RATES.length-1):Math.max(t-1,0);this.changePlaybackPate(PLAYBACK_RATES[i])},this.fastForward=()=>{this.videoElm&&this.setCurrentTime(this.videoElm.currentTime+PER_FORWARD)},this.rewind=()=>{this.videoElm&&this.setCurrentTime(this.videoElm.currentTime-PER_FORWARD)},this.keydown=e=>{e.keyCode===EKeyCode.Space&&(e.preventDefault(),this.playPause()),e.keyCode===EKeyCode.Up&&(e.preventDefault(),this.updateNextPlaybackRate()),e.keyCode===EKeyCode.Down&&(e.preventDefault(),this.updateNextPlaybackRate(!1)),e.keyCode===EKeyCode.Left&&(e.preventDefault(),this.rewind()),e.keyCode===EKeyCode.Right&&(e.preventDefault(),this.fastForward())},this.onPlay=()=>{this.setState({isPlay:!0},this.onVideoStart)},this.onPause=()=>{this.onVideoStopped()},this.onTimeUpdate=()=>{var e;this.videoElm&&this.setState({currentTime:utils.decimalReserved((e=this.videoElm)==null?void 0:e.currentTime,1)})},this.onVideoStopped=()=>{this.setState({isPlay:!1}),this.timeInterval&&(clearInterval(this.timeInterval),this.timeInterval=void 0),this.videoElm&&this.setCurrentTime(this.videoElm.currentTime)},this.onVideoStart=()=>{this.timeInterval=window.setInterval(()=>{var e,t,i,r,d;if(this.videoElm)try{if(((e=this.videoElm)==null?void 0:e.buffered.length)>0){const s=(t=this.videoElm)==null?void 0:t.buffered.end(0);this.setState({buffered:s})}(d=(r=this.props).updateCurrentTime)==null||d.call(r,utils.decimalReserved((i=this.videoElm)==null?void 0:i.currentTime,1))}catch(s){console.error(s)}},PER_INTERVAL)},this.resetVideoData=()=>{this.setState({currentTime:0,buffered:0,error:!1,isPlay:!1}),this.videoElm&&(this.videoElm.playbackRate=this.state.playbackRate),this.onVideoStopped()},this.setDuration=()=>{var e,t,i;if(this.videoElm){const r=utils.decimalReserved((e=this.videoElm)==null?void 0:e.duration,1);(i=(t=this.props).dataLoaded)==null||i.call(t),this.setState({duration:r})}},this.setCurrentTime=e=>{var t,i;this.videoElm&&(this.videoElm.currentTime=e,this.setState({currentTime:e}),(i=(t=this.props).updateCurrentTime)==null||i.call(t,e))},this.reload=()=>{var e;(e=this.videoElm)==null||e.load()},this.onError=()=>{var e,t;(t=(e=this.props).dataLoaded)==null||t.call(e,!0),this.resetVideoData(),this.setState({error:!0})},this.state={playbackRate:1,currentTime:0,isPlay:!1,duration:0,buffered:0,error:!1},this.videoRef=React__default.default.createRef()}get videoElm(){var a;return(a=this.videoRef)==null?void 0:a.current}get videoSrc(){var a,e;const{imgIndex:t,imgList:i}=this.props;return t>-1&&(e=(a=i[t])==null?void 0:a.url)!=null?e:""}componentDidMount(){var a,e;window.addEventListener("keydown",this.keydown),((a=this.videoRef)==null?void 0:a.current)&&this.props.setVideoRef&&this.props.setVideoRef((e=this.videoRef)==null?void 0:e.current)}componentWillUnmount(){window.removeEventListener("keydown",this.keydown)}render(){const{isPlay:a,playbackRate:e,currentTime:t,duration:i,buffered:r,error:d}=this.state,{imgList:s,imgIndex:h,pageBackward:c,pageJump:v,pageForward:m,valid:p,footer:f,drawLayerSlot:l}=this.props,y=isNaN(i)?0:Math.max(utils.decimalReserved(i,1)-t,0),{playPause:n,updateNextPlaybackRate:E,onPause:g,onPlay:R,onTimeUpdate:P,resetVideoData:b,setDuration:k,setCurrentTime:T,onError:_,videoRef:x,videoSrc:C}=this;return React__default.default.createElement(VideoPlayerCtx.Provider,{value:{videoRef:this.videoRef,addTime:this.props.addTime,toggleClipStatus:this.props.toggleClipStatus,isPlay:a,playPause:n,updateNextPlaybackRate:E,playbackRate:e,currentTime:t,duration:i,buffered:r,setCurrentTime:T,imgIndex:h,imgList:s,pageBackward:c,pageJump:v,pageForward:m}},React__default.default.createElement(React__default.default.Fragment,null,l==null?void 0:l({currentTime:t,remainingTime:y,zoom:1,currentPos:{x:0,y:0}}),React__default.default.createElement("div",{className:dom.getClassName("video-wrapper")},React__default.default.createElement("div",{className:dom.getClassName("video-container")},React__default.default.createElement("video",{ref:x,className:dom.getClassName(this.props.showVideoTrack?"video-track":"video"),src:C,onPause:g,onPlay:R,onTimeUpdate:P,onLoadedMetadata:b,onError:_,onDurationChange:k,width:"100%",height:"100%",onClick:n}),this.props.showVideoTrack&&React__default.default.createElement(index.default,{currentTime:t,onTrackResize:this.props.onTrackResize,onTrackResizeStart:()=>{var u;(u=this.videoElm)==null||u.pause()},readonly:!1}),React__default.default.createElement(index$1,{fileType:"video",errorProps:{reloadImage:this.reload,backgroundColor:"#e2e2e2",ignoreOffsetY:!0,isError:d},invalidProps:{isValid:p}})),React__default.default.createElement(index$2.default,{footer:f}))))}}exports.VideoPlayer=VideoPlayer,exports.VideoPlayerCtx=VideoPlayerCtx,exports.default=VideoPlayer;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var React=require("react"),index$2=require("./components/controller/index.js"),index=require("../videoAnnotate/videoClipTool/components/videoTrack/index.js"),dom=require("../../utils/dom.js"),lbAnnotation=require("@labelbee/lb-annotation"),utils=require("./utils.js"),index$1=require("../fileException/index.js");function _interopDefaultLegacy(s){return s&&typeof s=="object"&&"default"in s?s:{default:s}}var React__default=_interopDefaultLegacy(React);const EKeyCode=lbAnnotation.cKeyCode.default,VideoPlayerCtx=React__default.default.createContext({isPlay:!1,playPause:()=>{},updateNextPlaybackRate:()=>{},playbackRate:1,currentTime:0,duration:0,buffered:0,setCurrentTime:()=>{},imgList:[],imgIndex:-1,pageBackward:()=>{},pageJump:s=>{},pageForward:()=>{},addTime:()=>{},toggleClipStatus:()=>{}}),PER_INTERVAL_DEFAULT=50,PER_INTERVAL_SYNC=300,PER_FORWARD=.1,PLAYBACK_RATES=[.1,.2,.3,.4,.5,1,1.5,2,4,6,8,16];class VideoPlayer extends React__default.default.Component{constructor(a){super(a);this.changePlaybackPate=e=>{this.videoElm&&(this.videoElm.playbackRate=e,this.setState({playbackRate:e}))},this.playPause=()=>{var e,t,i;((e=this.videoElm)==null?void 0:e.paused)?(t=this.videoElm)==null||t.play():(i=this.videoElm)==null||i.pause()},this.updateNextPlaybackRate=(e=!0)=>{const t=PLAYBACK_RATES.findIndex(r=>r===this.state.playbackRate);let i=e?Math.min(t+1,PLAYBACK_RATES.length-1):Math.max(t-1,0);this.changePlaybackPate(PLAYBACK_RATES[i])},this.fastForward=()=>{this.videoElm&&this.setCurrentTime(this.videoElm.currentTime+PER_FORWARD)},this.rewind=()=>{this.videoElm&&this.setCurrentTime(this.videoElm.currentTime-PER_FORWARD)},this.keydown=e=>{e.keyCode===EKeyCode.Space&&(e.preventDefault(),this.playPause()),e.keyCode===EKeyCode.Up&&(e.preventDefault(),this.updateNextPlaybackRate()),e.keyCode===EKeyCode.Down&&(e.preventDefault(),this.updateNextPlaybackRate(!1)),e.keyCode===EKeyCode.Left&&(e.preventDefault(),this.rewind()),e.keyCode===EKeyCode.Right&&(e.preventDefault(),this.fastForward())},this.onPlay=()=>{this.setState({isPlay:!0},this.onVideoStart)},this.onPause=()=>{this.onVideoStopped()},this.onTimeUpdate=()=>{var e;this.videoElm&&this.setState({currentTime:utils.decimalReserved((e=this.videoElm)==null?void 0:e.currentTime,1)})},this.onVideoStopped=()=>{this.setState({isPlay:!1}),this.timeInterval&&(clearInterval(this.timeInterval),this.timeInterval=void 0),this.videoElm&&this.setCurrentTime(this.videoElm.currentTime)},this.onVideoStart=()=>{const e=this.props.syncTimeOnPlay===!0,t=e?PER_INTERVAL_SYNC:PER_INTERVAL_DEFAULT;this.timeInterval=window.setInterval(()=>{var i,r,l,d,n,u;if(this.videoElm)try{if(((i=this.videoElm)==null?void 0:i.buffered.length)>0){const o=(r=this.videoElm)==null?void 0:r.buffered.end(0);e?this.setState({buffered:o}):this.setState({currentTime:utils.decimalReserved((l=this.videoElm)==null?void 0:l.currentTime,1),buffered:o})}e&&((u=(n=this.props).updateCurrentTime)==null||u.call(n,utils.decimalReserved((d=this.videoElm)==null?void 0:d.currentTime,1)))}catch(o){console.error(o)}},t)},this.resetVideoData=()=>{this.setState({currentTime:0,buffered:0,error:!1,isPlay:!1}),this.videoElm&&(this.videoElm.playbackRate=this.state.playbackRate),this.onVideoStopped()},this.setDuration=()=>{var e,t,i;if(this.videoElm){const r=utils.decimalReserved((e=this.videoElm)==null?void 0:e.duration,1);(i=(t=this.props).dataLoaded)==null||i.call(t),this.setState({duration:r})}},this.setCurrentTime=e=>{var t,i;this.videoElm&&(this.videoElm.currentTime=e,this.setState({currentTime:e}),(i=(t=this.props).updateCurrentTime)==null||i.call(t,e))},this.reload=()=>{var e;(e=this.videoElm)==null||e.load()},this.onError=()=>{var e,t;(t=(e=this.props).dataLoaded)==null||t.call(e,!0),this.resetVideoData(),this.setState({error:!0})},this.state={playbackRate:1,currentTime:0,isPlay:!1,duration:0,buffered:0,error:!1},this.videoRef=React__default.default.createRef()}get videoElm(){var a;return(a=this.videoRef)==null?void 0:a.current}get videoSrc(){var a,e;const{imgIndex:t,imgList:i}=this.props;return t>-1&&(e=(a=i[t])==null?void 0:a.url)!=null?e:""}componentDidMount(){var a,e;window.addEventListener("keydown",this.keydown),((a=this.videoRef)==null?void 0:a.current)&&this.props.setVideoRef&&this.props.setVideoRef((e=this.videoRef)==null?void 0:e.current)}componentWillUnmount(){window.removeEventListener("keydown",this.keydown)}render(){const{isPlay:a,playbackRate:e,currentTime:t,duration:i,buffered:r,error:l}=this.state,{imgList:d,imgIndex:n,pageBackward:u,pageJump:o,pageForward:m,valid:p,footer:f,drawLayerSlot:c}=this.props,y=isNaN(i)?0:Math.max(utils.decimalReserved(i,1)-t,0),{playPause:h,updateNextPlaybackRate:E,onPause:R,onPlay:T,onTimeUpdate:P,resetVideoData:g,setDuration:_,setCurrentTime:b,onError:k,videoRef:C,videoSrc:x}=this;return React__default.default.createElement(VideoPlayerCtx.Provider,{value:{videoRef:this.videoRef,addTime:this.props.addTime,toggleClipStatus:this.props.toggleClipStatus,isPlay:a,playPause:h,updateNextPlaybackRate:E,playbackRate:e,currentTime:t,duration:i,buffered:r,setCurrentTime:b,imgIndex:n,imgList:d,pageBackward:u,pageJump:o,pageForward:m}},React__default.default.createElement(React__default.default.Fragment,null,c==null?void 0:c({currentTime:t,remainingTime:y,zoom:1,currentPos:{x:0,y:0}}),React__default.default.createElement("div",{className:dom.getClassName("video-wrapper")},React__default.default.createElement("div",{className:dom.getClassName("video-container")},React__default.default.createElement("video",{ref:C,className:dom.getClassName(this.props.showVideoTrack?"video-track":"video"),src:x,onPause:R,onPlay:T,onTimeUpdate:P,onLoadedMetadata:g,onError:k,onDurationChange:_,width:"100%",height:"100%",onClick:h}),this.props.showVideoTrack&&React__default.default.createElement(index.default,{currentTime:t,onTrackResize:this.props.onTrackResize,onTrackResizeStart:()=>{var v;(v=this.videoElm)==null||v.pause()},readonly:!1}),React__default.default.createElement(index$1,{fileType:"video",errorProps:{reloadImage:this.reload,backgroundColor:"#e2e2e2",ignoreOffsetY:!0,isError:l},invalidProps:{isValid:p}})),React__default.default.createElement(index$2.default,{footer:f}))))}}exports.VideoPlayer=VideoPlayer,exports.VideoPlayerCtx=VideoPlayerCtx,exports.default=VideoPlayer;

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

@@ -49,6 +49,7 @@ declare class VideoClipTool extends React.Component<IVideoClipProps, IState> {
         removeTimeSlice: (item: IVideoTimeSlice) => void;
         updateSelectedSliceTimeProperty: (val: number, key: "end" | "start") => void;
         extraResult: IExtraResult;
+        linkageConfigurable: boolean;
     };
     fns: Map<string, any[]>;
     videoPlayer?: any;

package/dist/types/components/videoPlayer/index.d.ts

@@ -40,6 +40,8 @@ interface IVideoPlayerProps {
     toggleClipStatus?: () => void;
     drawLayerSlot?: any;
     updateCurrentTime?: (time: number) => void;
+    /** 开启后播放过程持续同步 currentTime（具身联动） */
+    syncTimeOnPlay?: boolean;
 }
 interface IVideoPlayerState {
     playbackRate: number;

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

@@ -1 +1 @@
-import{timeFormat as C}from"../../../../../utils/audio.js";import{classnames as v}from"../../../../../utils/index.js";import{CloseCircleFilled as k,EnvironmentFilled as N,ScissorOutlined as j}from"@ant-design/icons";import t,{useState as R,useRef as x,useEffect as A,useMemo as _,useLayoutEffect as b}from"react";import{EClipStatus as h,TIME_SLICE_TYPE as F,ETimeSliceType as T}from"../../constant.js";import V from"../timeSliceRange/index.js";import $ from"../ToolTipForClip.js";import{getDisplayContent as D}from"../videoTrack/index.js";import r from"./index.module.scss.js";import{decimalReserved as O}from"../../../../videoPlayer/utils.js";import{LabelBeeContext as w}from"../../../../../store/ctx.js";import{connect as M}from"react-redux";import{useTranslation as y}from"react-i18next";const B=({type:e})=>e===T.Time?t.createElement(N,null):t.createElement(j,{rotate:270}),H=()=>{const{t:e}=y();return t.createElement("div",{className:r.noContent},t.createElement("div",null,e("NoClippedData")),t.createElement("div",null,t.createElement("span",{className:r.hotkey},"X"),e("ClipSlice")),t.createElement("div",null,t.createElement("span",{className:r.hotkey},"E"),e("TimeStamp")))},W=({children:e,scrollRef:n})=>{const o=e.length===0;return t.createElement("div",{ref:n,className:v({[r.empty]:o,[r.timeSliceListContent]:!0})},o?t.createElement(H,null):e)},X=({timeSliceProps:e,index:n,exportContext:o,onItemClick:a})=>{const{selectedID:d,attributeList:s,removeTimeSlice:u}=o;return t.createElement("div",{key:n,className:v({[r.timeSliceItem]:!0,[r.timeSliceItemActivated]:e.id===d}),onClick:()=>{a(e)}},t.createElement($,{slot:t.createElement("div",{className:r.timeSliceItemContent},t.createElement("div",{className:r.textOverflow},`${n+1}\u3001\u3010${F[e.type]}\u3011 ${D(e,s)}`),t.createElement("div",{className:v({[r.textOverflow]:!0})},t.createElement(B,{type:e.type}),t.createElement("span",{style:{marginLeft:10}},`${C(e.start,"ss:SS")} ${e.end&&e.type===T.Period?"~ "+C(e.end,"ss:SS")+", "+O(e.end-e.start,2)+"s":""}`))),item:e,attributeList:s}),t.createElement(k,{className:r.timeSliceItemDeleteIcon,onClick:c=>{c.stopPropagation(),u(e)}}))},Y=e=>{const{toolInstance:n}=e,{selectedID:o,result:a,videoPlayer:d,clipStatus:s,updateSelectedSliceTimeProperty:u}=(n==null?void 0:n.exportContext)||{},[c,S]=R(0),p=x(null),f=x(!1),{t:I}=y();A(()=>(n&&n.singleOn("changeClipSidebar",l=>{S(i=>i+1)}),()=>{var l;(l=n==null?void 0:n.unbindAll)==null||l.call(n,"changeClipSidebar")}),[n]);const L=a==null?void 0:a.find(l=>l.id===o),m=_(()=>{var l;return[...(l=a==null?void 0:a.filter(i=>i.end!==null))!=null?l:[]].sort((i,E)=>i.start-E.start)},[a,c]),g=l=>{f.current=!0,n.exportContext.onSelectedTimeSlice(l)};return b(()=>{var l;if(!o||!p.current)return;if(f.current){f.current=!1;return}const i=m.findIndex(E=>E.id===o);i>=0&&((l=p.current.children[i])==null||l.scrollIntoView({block:"nearest"}))},[o,c,m]),(n==null?void 0:n.exportContext)?t.createElement("div",null,t.createElement("div",{className:r.timeSliceListHeader},I("AnnotatedList")),t.createElement(W,{scrollRef:p},m==null?void 0:m.map((l,i)=>t.createElement(X,{timeSliceProps:l,index:i,key:l.id,exportContext:(n==null?void 0:n.exportContext)||{},onItemClick:g}))),t.createElement(V,{selectedTimeSlice:L,videoPlayer:d,updateTimeForSelected:u,disabled:s===h.Clipping})):null},q=({annotation:e})=>{const{toolInstance:n}=e;return{toolInstance:n}};var z=M(q,null,null,{context:w})(Y);export{z as default};
+import{timeFormat as x}from"../../../../../utils/audio.js";import{classnames as E}from"../../../../../utils/index.js";import{CloseCircleFilled as N,EnvironmentFilled as j,ScissorOutlined as R}from"@ant-design/icons";import t,{useState as b,useRef as T,useEffect as A,useMemo as _,useLayoutEffect as h}from"react";import{EClipStatus as F,TIME_SLICE_TYPE as V,ETimeSliceType as y}from"../../constant.js";import $ from"../timeSliceRange/index.js";import D from"../ToolTipForClip.js";import{getDisplayContent as O}from"../videoTrack/index.js";import r from"./index.module.scss.js";import{decimalReserved as w}from"../../../../videoPlayer/utils.js";import{LabelBeeContext as M}from"../../../../../store/ctx.js";import{connect as B}from"react-redux";import{useTranslation as S}from"react-i18next";const H=({type:e})=>e===y.Time?t.createElement(j,null):t.createElement(R,{rotate:270}),W=()=>{const{t:e}=S();return t.createElement("div",{className:r.noContent},t.createElement("div",null,e("NoClippedData")),t.createElement("div",null,t.createElement("span",{className:r.hotkey},"X"),e("ClipSlice")),t.createElement("div",null,t.createElement("span",{className:r.hotkey},"E"),e("TimeStamp")))},X=({children:e,scrollRef:n})=>{const o=e.length===0;return t.createElement("div",{ref:n,className:E({[r.empty]:o,[r.timeSliceListContent]:!0})},o?t.createElement(W,null):e)},Y=({timeSliceProps:e,index:n,exportContext:o,onItemClick:a})=>{const{selectedID:d,attributeList:c,removeTimeSlice:u}=o;return t.createElement("div",{key:n,className:E({[r.timeSliceItem]:!0,[r.timeSliceItemActivated]:e.id===d}),onClick:()=>{a(e)}},t.createElement(D,{slot:t.createElement("div",{className:r.timeSliceItemContent},t.createElement("div",{className:r.textOverflow},`${n+1}\u3001\u3010${V[e.type]}\u3011 ${O(e,c)}`),t.createElement("div",{className:E({[r.textOverflow]:!0})},t.createElement(H,{type:e.type}),t.createElement("span",{style:{marginLeft:10}},`${x(e.start,"ss:SS")} ${e.end&&e.type===y.Period?"~ "+x(e.end,"ss:SS")+", "+w(e.end-e.start,2)+"s":""}`))),item:e,attributeList:c}),t.createElement(N,{className:r.timeSliceItemDeleteIcon,onClick:s=>{s.stopPropagation(),u(e)}}))},q=e=>{const{toolInstance:n}=e,{selectedID:o,result:a,videoPlayer:d,clipStatus:c,updateSelectedSliceTimeProperty:u,linkageConfigurable:s}=(n==null?void 0:n.exportContext)||{},[C,I]=b(0),p=T(null),f=T(!1),{t:g}=S();A(()=>(n&&n.singleOn("changeClipSidebar",l=>{I(i=>i+1)}),()=>{var l;(l=n==null?void 0:n.unbindAll)==null||l.call(n,"changeClipSidebar")}),[n]);const L=a==null?void 0:a.find(l=>l.id===o),m=_(()=>{var l;return[...(l=a==null?void 0:a.filter(i=>i.end!==null))!=null?l:[]].sort((i,v)=>i.start-v.start)},[a,C]),k=l=>{s&&(f.current=!0),n.exportContext.onSelectedTimeSlice(l)};return h(()=>{var l;if(!s||!o||!p.current)return;if(f.current){f.current=!1;return}const i=m.findIndex(v=>v.id===o);i>=0&&((l=p.current.children[i])==null||l.scrollIntoView({block:"nearest"}))},[s,o,C,m]),(n==null?void 0:n.exportContext)?t.createElement("div",null,t.createElement("div",{className:r.timeSliceListHeader},g("AnnotatedList")),t.createElement(X,{scrollRef:s?p:void 0},m==null?void 0:m.map((l,i)=>t.createElement(Y,{timeSliceProps:l,index:i,key:l.id,exportContext:(n==null?void 0:n.exportContext)||{},onItemClick:k}))),t.createElement($,{selectedTimeSlice:L,videoPlayer:d,updateTimeForSelected:u,disabled:c===F.Clipping})):null},z=({annotation:e})=>{const{toolInstance:n}=e;return{toolInstance:n}};var G=B(z,null,null,{context:M})(q);export{G as default};

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

@@ -1,2 +1,2 @@
-import{MathUtils as w,CommonToolUtils as $,uuid as B,TagUtils as z,AttributeUtils as G}from"@labelbee/lb-annotation";import{jsonParser as V}from"../../../utils/index.js";import{precisionAdd as R,precisionMinus as J,isImageValue as H}from"../../../utils/audio.js";import{message as b}from"antd";import E from"lodash";import T from"react";import k from"./index.module.scss.js";import{VideoClipToolContextProvider as W}from"./VideoClipToolContext.js";import{EClipStatus as d,ETimeSliceType as I,PER_SLICE_CHANGE as x,SLICE_MIN_TIME as A}from"./constant.js";import{VideoPlayer as q}from"../../videoPlayer/index.js";import K from"./components/videoTimeSlicesOverVideo/index.js";import Q from"../../../assets/annotation/video/icon_videoCutting.svg.js";import{decimalReserved as P}from"../../videoPlayer/utils.js";var X=Object.defineProperty,Y=Object.defineProperties,Z=Object.getOwnPropertyDescriptors,O=Object.getOwnPropertySymbols,tt=Object.prototype.hasOwnProperty,et=Object.prototype.propertyIsEnumerable,j=(h,s,t)=>s in h?X(h,s,{enumerable:!0,configurable:!0,writable:!0,value:t}):h[s]=t,U=(h,s)=>{for(var t in s||(s={}))tt.call(s,t)&&j(h,t,s[t]);if(O)for(var t of O(s))et.call(s,t)&&j(h,t,s[t]);return h},M=(h,s)=>Y(h,Z(s));class it extends T.Component{constructor(s){super(s);this.fns=new Map,this.throttledUpdateTime=E.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(r=>r.end!==null),{valid:this.state.valid,duration:i}]},this.exportCustomData=()=>({extraResult:this.state.extraResult}),this.updateSelectedSliceTimeStartByPer=t=>{var e,i;if(this.state.clipStatus===d.Clipping){b.info("\u622A\u53D6\u4E2D\u4E0D\u652F\u6301\u8C03\u6574\u5F00\u59CB\u65F6\u95F4");return}if(this.selectedSliceIndex>-1){const r=(i=(e=this.videoPlayer)==null?void 0:e.duration)!=null?i:0,{end:l,start:n,type:u}=this.state.result[this.selectedSliceIndex],a=w.withinRange(R(n,t),[0,J(u===I.Time?r:l,x)]);this.updateSelectedSliceTimeProperty(a,"start")}},this.updateSelectedSliceTimeEndByPer=t=>{var e,i;if(this.state.clipStatus===d.Clipping){b.info("\u622A\u53D6\u4E2D\u4E0D\u652F\u6301\u8C03\u6574\u7ED3\u675F\u65F6\u95F4");return}if(this.selectedSliceIndex>-1){const r=this.state.result[this.selectedSliceIndex],l=(i=(e=this.videoPlayer)==null?void 0:e.duration)!=null?i:0;if(r.type===I.Time){b.info("\u65F6\u95F4\u70B9\u4EC5\u652F\u6301\u8C03\u6574\u5F00\u59CB\u65F6\u95F4");return}const{end:n,start:u}=r,a=w.withinRange(R(n,t),[R(u,x),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:E.cloneDeep(i)}),this.updateSidebar()}},this.keyDownEvents=t=>{if(!$.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(-x);break;case"=":this.updateSelectedSliceTimeStartByPer(x);break;case"[":this.updateSelectedSliceTimeEndByPer(-x);break;case"]":this.updateSelectedSliceTimeEndByPer(x);break}},this.setVideoError=(t,e,i)=>{if(t){const{clipStatus:r}=this.state;r===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 r=t.findIndex(l=>l.id===e);r>-1&&(t.splice(r,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,r,l,n,u,a;if(this.disabled)return;const{clipStatus:c,selectedAttribute:p}=this.state,o=c!==d.Clipping;let f=o?d.Clipping:d.Stop,{result:S,selectedID:m,textValue:y}=this.state;const g=E.cloneDeep(S),_=t||((e=this.videoPlayer)==null?void 0:e.currentTime),L=(i=this.videoPlayer)==null?void 0:i.duration;if(L===void 0||_===void 0)return;const N=P(_,2);if(o){const v=B(),C={};m=v;const D=((r=this.props.config)==null?void 0:r.customAttributeInput)===!0?"\u65E0\u5C5E\u6027":p;g.push({start:N,end:null,attribute:D,textAttribute:this.defaultTextAttribute,duration:L,id:v,type:I.Period,subAttribute:C,text:this.getSubAttributeShowText(C,(n=(l=this.props.config)==null?void 0:l.inputList)!=null?n:[])}),y=this.defaultTextAttribute}else{const v=g.findIndex(D=>D.id===m),C=g[v];C&&(_-C.start<A?(g.splice(v,1),b.info(`\u622A\u53D6\u7247\u6BB5\u4E0D\u80FD\u77ED\u4E8E${A}s`),f=d.Stop,m="",y=""):(g[v].end=P(_,2),(u=this.videoPlayer)==null||u.pause(),b.success(`\u5DF2\u622A\u53D6\u7247\u6BB5${S.length}`)))}const F={clipStatus:f,result:g,selectedID:m,textValue:y};((a=this.props.config)==null?void 0:a.customAttributeInput)&&o&&(F.selectedAttribute="\u65E0\u5C5E\u6027"),this.setState(F),this.updateSidebar()},this.addTime=()=>{var t,e,i,r,l,n;if(this.disabled)return;const{result:u,selectedAttribute:a,selectedID:c}=this.state,p=B(),o=E.cloneDeep(u),f=((t=this.videoPlayer)==null?void 0:t.currentTime)||0,S=((e=this.props.config)==null?void 0:e.customAttributeInput)?"\u65E0\u5C5E\u6027":a;o.push({start:f,end:f,attribute:S,textAttribute:this.defaultTextAttribute,id:p,type:I.Time,duration:(r=(i=this.videoPlayer)==null?void 0:i.duration)!=null?r:0,subAttribute:{}});const m={result:o,selectedID:p,textValue:this.defaultTextAttribute};((l=this.props.config)==null?void 0:l.customAttributeInput)&&(m.selectedAttribute="\u65E0\u5C5E\u6027");const y=o.find(g=>g.id===c);this.isClipping&&y?(delete m.selectedID,delete m.textValue,b.success(`\u5DF2\u622A\u53D6\u65F6\u95F4\u70B9${o.length-1}`)):(n=this.videoPlayer)==null||n.pause(),this.setState(m),this.updateSidebar()},this.updateCurrentTime=t=>{this.setState({currentTime:t}),this.selectTimeSliceByTime(t)},this.findTimeSliceByTime=t=>{const e=P(t,2);return this.state.result.find(i=>i.end===null?!1:i.type===I.Time?P(i.start,2)===e:i.start<=e&&e<i.end)},this.selectTimeSliceByTime=t=>{if(this.isClipping)return;const e=this.findTimeSliceByTime(t);if(e){if(e.id===this.state.selectedID)return;this.setState({selectedID:e.id,selectedAttribute:e.attribute,textValue:e.textAttribute})}else{if(!this.state.selectedID)return;this.setState({selectedID:""})}this.updateSidebar()},this.contextToCancel=t=>{this.state.clipStatus===d.Stop&&(t.preventDefault(),this.setState({selectedID:""}),this.updateSidebar())},this.onTrackResize=(t,e,i)=>{var r,l;const{result:n}=this.state,u=n.find(a=>a.id===t);if(u){const a=u.duration,c=e==="left",p=c?"start":"end",o=c?-a*i:a*i,f=c?[0,Math.max(((r=u.end)!=null?r:0)-A,0)]:[u.start+A,a],S=w.withinRange(o+((l=u==null?void 0:u[p])!=null?l:0),f);u[p]=S,this.throttledUpdateTime(S)}this.setState({result:[...n]}),this.updateSidebar()},this.renderMediaContent=()=>{var t,e,i;const{pageForward:r,pageJump:l,pageBackward:n}=this.props,{result:u,videoError:a,valid:c,currentTime:p}=this.state;return T.createElement("div",{className:k.clipContainer},T.createElement(q,{imgIndex:this.props.imgIndex,imgList:this.props.imgList,pageBackward:n,pageForward:r,pageJump:l,valid:c,setVideoRef:o=>{this.videoPlayer=o},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}),T.createElement(K,{key:(t=this.videoPlayer)==null?void 0:t.currentTime,result:u,currentTime:p,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&&T.createElement("i",{className:k.clipping,style:{backgroundImage:Q}}))},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,r=e.findIndex(l=>l.id===t.id);r>-1&&(e.splice(r,1),this.setState({result:[...e],selectedID:i}),this.updateSidebar())},this.setResult=(t=!0,e=this.props)=>{var i,r;try{const{imgIndex:l,imgList:n}=e;if(!n[l])return;const a=V(n[l].result)[`step_${this.stepInfo().step}`],c=(a==null?void 0:a.result)||[],p=(a==null?void 0:a.extraResult)||{globalTag:{}},o=(r=(i=this.props.config)==null?void 0:i.inputList)!=null?r:[];c.forEach(S=>{S.text=this.getSubAttributeShowText(S.subAttribute,o)});const f=H(n[l].result||"[]");this.setState({result:c,loading:t,selectedID:"",textValue:"",selectedAttribute:"",clipStatus:d.Stop,valid:f,extraResult:p},()=>{this.updateSidebar(),f||b.info("\u65E0\u6548\u89C6\u9891\uFF0C\u8BF7\u8DF3\u8FC7")})}catch(l){console.error("\u6570\u636E\u89E3\u6790\u5931\u8D25"),this.setState({result:[],loading:!1,selectedID:"",textValue:"",selectedAttribute:"",valid:!0,extraResult:{globalTag:{}}},()=>{this.updateSidebar()})}},this.setDefaultAttribute=t=>{const{result:e,selectedID:i}=this.state,r=e.find(l=>l.id===i);r&&i&&(r.attribute=t),this.setState({selectedAttribute:t,result:[...e]}),this.updateSidebar()},this.setSubAttribute=(t,e)=>{var i,r;const{result:l,selectedID:n}=this.state;if(n){const u=l.find(a=>a.id===n);u&&(u.subAttribute||(u.subAttribute={}),u.subAttribute[t]=e,u.text=this.getSubAttributeShowText(u.subAttribute,(r=(i=this.props.config)==null?void 0:i.inputList)!=null?r:[]),this.setState({result:[...l]}),this.updateSidebar())}},this.textChange=t=>{const{result:e,selectedID:i}=this.state;if(this.setState({textValue:t}),i){const r=e.find(l=>l.id===i);r&&(r.textAttribute=t,this.setState({result:[...e]}),this.updateSidebar())}},this.setGlobalTag=(t,e)=>{const{extraResult:i}=this.state;this.setState({extraResult:M(U({},i),{globalTag:M(U({},i.globalTag||{}),{[t]:e})})})},this.getSubAttributeShowText=(t,e)=>{if(!t||(e==null?void 0:e.length)===0)return"";let i="";return z.getTagNameList(t,e).forEach(l=>{i+=`
-${l.keyName}: ${l.value.join("\u3001")}`}),i},this.state={result:[],selectedAttribute:"",textValue:"",clipStatus:d.Stop,selectedID:"",loading:!1,videoError:!1,remainingTime:0,currentTime:0,configLoading:!1,valid:!0,extraResult:{globalTag:{}}}}get videoUrl(){var s;const{imgIndex:t,imgList:e}=this.props;return((s=e[t])==null?void 0:s.url)||""}get isClipping(){return this.state.clipStatus===d.Clipping}get resultJSON(){const{imgIndex:s,imgList:t}=this.props;return t.length===0||!t[s]?"[]":t[s].result}get disabled(){return!this.state.valid||this.state.videoError}get loading(){return this.state.loading||this.state.configLoading}get defaultTextAttribute(){return G.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(s=>s.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,extraResult:this.state.extraResult}}get valid(){return this.state.valid}get config(){var s;return V((s=this.props.stepInfo)==null?void 0:s.config)}get selectedText(){var s,t;return(t=(s=this.state.result)==null?void 0:s[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(s,t){const e=s.imgIndex-this.props.imgIndex,i=s.step-this.props.step;return(e!==0||i!==0)&&(this.setResult(!0,s),i!==0&&this.setState({loading:!1})),!0}singleOn(s,t){this.fns.set(s,[t])}on(s,t){this.singleOn(s,t)}unbindAll(s){this.fns.delete(s)}render(){const{selectedID:s,result:t,clipStatus:e,selectedAttribute:i}=this.state;return T.createElement(W,{value:{videoPlayer:this.videoPlayer,result:t,selectedID:s,attributeList:this.props.config.attributeList,clipStatus:e,selectedAttribute:i,contextToCancel:this.contextToCancel,selectTimeSliceByTime:this.selectTimeSliceByTime}},this.renderMediaContent())}}export{it as default};
+import{MathUtils as w,CommonToolUtils as $,uuid as F,TagUtils as z,AttributeUtils as G}from"@labelbee/lb-annotation";import{jsonParser as B}from"../../../utils/index.js";import{precisionAdd as R,precisionMinus as J,isImageValue as H}from"../../../utils/audio.js";import{message as b}from"antd";import E from"lodash";import T from"react";import V from"./index.module.scss.js";import{VideoClipToolContextProvider as W}from"./VideoClipToolContext.js";import{EClipStatus as d,ETimeSliceType as I,PER_SLICE_CHANGE as x,SLICE_MIN_TIME as A}from"./constant.js";import{VideoPlayer as q}from"../../videoPlayer/index.js";import K from"./components/videoTimeSlicesOverVideo/index.js";import Q from"../../../assets/annotation/video/icon_videoCutting.svg.js";import{decimalReserved as P}from"../../videoPlayer/utils.js";var X=Object.defineProperty,Y=Object.defineProperties,Z=Object.getOwnPropertyDescriptors,O=Object.getOwnPropertySymbols,tt=Object.prototype.hasOwnProperty,et=Object.prototype.propertyIsEnumerable,j=(f,s,t)=>s in f?X(f,s,{enumerable:!0,configurable:!0,writable:!0,value:t}):f[s]=t,U=(f,s)=>{for(var t in s||(s={}))tt.call(s,t)&&j(f,t,s[t]);if(O)for(var t of O(s))et.call(s,t)&&j(f,t,s[t]);return f},M=(f,s)=>Y(f,Z(s));class it extends T.Component{constructor(s){super(s);this.fns=new Map,this.throttledUpdateTime=E.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(r=>r.end!==null),{valid:this.state.valid,duration:i}]},this.exportCustomData=()=>({extraResult:this.state.extraResult}),this.updateSelectedSliceTimeStartByPer=t=>{var e,i;if(this.state.clipStatus===d.Clipping){b.info("\u622A\u53D6\u4E2D\u4E0D\u652F\u6301\u8C03\u6574\u5F00\u59CB\u65F6\u95F4");return}if(this.selectedSliceIndex>-1){const r=(i=(e=this.videoPlayer)==null?void 0:e.duration)!=null?i:0,{end:l,start:u,type:n}=this.state.result[this.selectedSliceIndex],a=w.withinRange(R(u,t),[0,J(n===I.Time?r:l,x)]);this.updateSelectedSliceTimeProperty(a,"start")}},this.updateSelectedSliceTimeEndByPer=t=>{var e,i;if(this.state.clipStatus===d.Clipping){b.info("\u622A\u53D6\u4E2D\u4E0D\u652F\u6301\u8C03\u6574\u7ED3\u675F\u65F6\u95F4");return}if(this.selectedSliceIndex>-1){const r=this.state.result[this.selectedSliceIndex],l=(i=(e=this.videoPlayer)==null?void 0:e.duration)!=null?i:0;if(r.type===I.Time){b.info("\u65F6\u95F4\u70B9\u4EC5\u652F\u6301\u8C03\u6574\u5F00\u59CB\u65F6\u95F4");return}const{end:u,start:n}=r,a=w.withinRange(R(u,t),[R(n,x),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:E.cloneDeep(i)}),this.updateSidebar()}},this.keyDownEvents=t=>{if(!$.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(-x);break;case"=":this.updateSelectedSliceTimeStartByPer(x);break;case"[":this.updateSelectedSliceTimeEndByPer(-x);break;case"]":this.updateSelectedSliceTimeEndByPer(x);break}},this.setVideoError=(t,e,i)=>{if(t){const{clipStatus:r}=this.state;r===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 r=t.findIndex(l=>l.id===e);r>-1&&(t.splice(r,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,r,l,u,n,a;if(this.disabled)return;const{clipStatus:c,selectedAttribute:h}=this.state,o=c!==d.Clipping;let p=o?d.Clipping:d.Stop,{result:S,selectedID:g,textValue:y}=this.state;const m=E.cloneDeep(S),_=t||((e=this.videoPlayer)==null?void 0:e.currentTime),L=(i=this.videoPlayer)==null?void 0:i.duration;if(L===void 0||_===void 0)return;const N=P(_,2);if(o){const v=F(),C={};g=v;const D=((r=this.props.config)==null?void 0:r.customAttributeInput)===!0?"\u65E0\u5C5E\u6027":h;m.push({start:N,end:null,attribute:D,textAttribute:this.defaultTextAttribute,duration:L,id:v,type:I.Period,subAttribute:C,text:this.getSubAttributeShowText(C,(u=(l=this.props.config)==null?void 0:l.inputList)!=null?u:[])}),y=this.defaultTextAttribute}else{const v=m.findIndex(D=>D.id===g),C=m[v];C&&(_-C.start<A?(m.splice(v,1),b.info(`\u622A\u53D6\u7247\u6BB5\u4E0D\u80FD\u77ED\u4E8E${A}s`),p=d.Stop,g="",y=""):(m[v].end=P(_,2),(n=this.videoPlayer)==null||n.pause(),b.success(`\u5DF2\u622A\u53D6\u7247\u6BB5${S.length}`)))}const k={clipStatus:p,result:m,selectedID:g,textValue:y};((a=this.props.config)==null?void 0:a.customAttributeInput)&&o&&(k.selectedAttribute="\u65E0\u5C5E\u6027"),this.setState(k),this.updateSidebar()},this.addTime=()=>{var t,e,i,r,l,u;if(this.disabled)return;const{result:n,selectedAttribute:a,selectedID:c}=this.state,h=F(),o=E.cloneDeep(n),p=((t=this.videoPlayer)==null?void 0:t.currentTime)||0,S=((e=this.props.config)==null?void 0:e.customAttributeInput)?"\u65E0\u5C5E\u6027":a;o.push({start:p,end:p,attribute:S,textAttribute:this.defaultTextAttribute,id:h,type:I.Time,duration:(r=(i=this.videoPlayer)==null?void 0:i.duration)!=null?r:0,subAttribute:{}});const g={result:o,selectedID:h,textValue:this.defaultTextAttribute};((l=this.props.config)==null?void 0:l.customAttributeInput)&&(g.selectedAttribute="\u65E0\u5C5E\u6027");const y=o.find(m=>m.id===c);this.isClipping&&y?(delete g.selectedID,delete g.textValue,b.success(`\u5DF2\u622A\u53D6\u65F6\u95F4\u70B9${o.length-1}`)):(u=this.videoPlayer)==null||u.pause(),this.setState(g),this.updateSidebar()},this.updateCurrentTime=t=>{var e;this.setState({currentTime:t}),((e=this.props.config)==null?void 0:e.linkageConfigurable)===!0&&this.selectTimeSliceByTime(t)},this.findTimeSliceByTime=t=>{const e=P(t,2);return this.state.result.find(i=>i.end===null?!1:i.type===I.Time?P(i.start,2)===e:i.start<=e&&e<i.end)},this.selectTimeSliceByTime=t=>{if(this.isClipping)return;const e=this.findTimeSliceByTime(t);if(e){if(e.id===this.state.selectedID)return;this.setState({selectedID:e.id,selectedAttribute:e.attribute,textValue:e.textAttribute})}else{if(!this.state.selectedID)return;this.setState({selectedID:""})}this.updateSidebar()},this.contextToCancel=t=>{this.state.clipStatus===d.Stop&&(t.preventDefault(),this.setState({selectedID:""}),this.updateSidebar())},this.onTrackResize=(t,e,i)=>{var r,l;const{result:u}=this.state,n=u.find(a=>a.id===t);if(n){const a=n.duration,c=e==="left",h=c?"start":"end",o=c?-a*i:a*i,p=c?[0,Math.max(((r=n.end)!=null?r:0)-A,0)]:[n.start+A,a],S=w.withinRange(o+((l=n==null?void 0:n[h])!=null?l:0),p);n[h]=S,this.throttledUpdateTime(S)}this.setState({result:[...u]}),this.updateSidebar()},this.renderMediaContent=()=>{var t,e,i,r;const{pageForward:l,pageJump:u,pageBackward:n}=this.props,{result:a,videoError:c,valid:h,currentTime:o}=this.state;return T.createElement("div",{className:V.clipContainer},T.createElement(q,{imgIndex:this.props.imgIndex,imgList:this.props.imgList,pageBackward:n,pageForward:l,pageJump:u,valid:h,setVideoRef:p=>{this.videoPlayer=p},showVideoTrack:!c,onTrackResize:this.onTrackResize,drawLayerSlot:this.props.drawLayerSlot,footer:this.props.footer,dataLoaded:this.props.onVideoLoaded,toggleClipStatus:this.toggleClipStatus,addTime:this.addTime,updateCurrentTime:this.updateCurrentTime,syncTimeOnPlay:((t=this.props.config)==null?void 0:t.linkageConfigurable)===!0}),T.createElement(K,{key:(e=this.videoPlayer)==null?void 0:e.currentTime,result:a,currentTime:o,attributeList:this.props.config.attributeList,inputList:(r=(i=this.props.config)==null?void 0:i.inputList)!=null?r:[],extraStyle:{top:this.props.drawLayerSlot?40:0}}),this.isClipping&&T.createElement("i",{className:V.clipping,style:{backgroundImage:Q}}))},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,r=e.findIndex(l=>l.id===t.id);r>-1&&(e.splice(r,1),this.setState({result:[...e],selectedID:i}),this.updateSidebar())},this.setResult=(t=!0,e=this.props)=>{var i,r;try{const{imgIndex:l,imgList:u}=e;if(!u[l])return;const a=B(u[l].result)[`step_${this.stepInfo().step}`],c=(a==null?void 0:a.result)||[],h=(a==null?void 0:a.extraResult)||{globalTag:{}},o=(r=(i=this.props.config)==null?void 0:i.inputList)!=null?r:[];c.forEach(S=>{S.text=this.getSubAttributeShowText(S.subAttribute,o)});const p=H(u[l].result||"[]");this.setState({result:c,loading:t,selectedID:"",textValue:"",selectedAttribute:"",clipStatus:d.Stop,valid:p,extraResult:h},()=>{this.updateSidebar(),p||b.info("\u65E0\u6548\u89C6\u9891\uFF0C\u8BF7\u8DF3\u8FC7")})}catch(l){console.error("\u6570\u636E\u89E3\u6790\u5931\u8D25"),this.setState({result:[],loading:!1,selectedID:"",textValue:"",selectedAttribute:"",valid:!0,extraResult:{globalTag:{}}},()=>{this.updateSidebar()})}},this.setDefaultAttribute=t=>{const{result:e,selectedID:i}=this.state,r=e.find(l=>l.id===i);r&&i&&(r.attribute=t),this.setState({selectedAttribute:t,result:[...e]}),this.updateSidebar()},this.setSubAttribute=(t,e)=>{var i,r;const{result:l,selectedID:u}=this.state;if(u){const n=l.find(a=>a.id===u);n&&(n.subAttribute||(n.subAttribute={}),n.subAttribute[t]=e,n.text=this.getSubAttributeShowText(n.subAttribute,(r=(i=this.props.config)==null?void 0:i.inputList)!=null?r:[]),this.setState({result:[...l]}),this.updateSidebar())}},this.textChange=t=>{const{result:e,selectedID:i}=this.state;if(this.setState({textValue:t}),i){const r=e.find(l=>l.id===i);r&&(r.textAttribute=t,this.setState({result:[...e]}),this.updateSidebar())}},this.setGlobalTag=(t,e)=>{const{extraResult:i}=this.state;this.setState({extraResult:M(U({},i),{globalTag:M(U({},i.globalTag||{}),{[t]:e})})})},this.getSubAttributeShowText=(t,e)=>{if(!t||(e==null?void 0:e.length)===0)return"";let i="";return z.getTagNameList(t,e).forEach(l=>{i+=`
+${l.keyName}: ${l.value.join("\u3001")}`}),i},this.state={result:[],selectedAttribute:"",textValue:"",clipStatus:d.Stop,selectedID:"",loading:!1,videoError:!1,remainingTime:0,currentTime:0,configLoading:!1,valid:!0,extraResult:{globalTag:{}}}}get videoUrl(){var s;const{imgIndex:t,imgList:e}=this.props;return((s=e[t])==null?void 0:s.url)||""}get isClipping(){return this.state.clipStatus===d.Clipping}get resultJSON(){const{imgIndex:s,imgList:t}=this.props;return t.length===0||!t[s]?"[]":t[s].result}get disabled(){return!this.state.valid||this.state.videoError}get loading(){return this.state.loading||this.state.configLoading}get defaultTextAttribute(){return G.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(s=>s.id===this.state.selectedID)}get exportContext(){var s;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,extraResult:this.state.extraResult,linkageConfigurable:((s=this.props.config)==null?void 0:s.linkageConfigurable)===!0}}get valid(){return this.state.valid}get config(){var s;return B((s=this.props.stepInfo)==null?void 0:s.config)}get selectedText(){var s,t;return(t=(s=this.state.result)==null?void 0:s[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(s,t){const e=s.imgIndex-this.props.imgIndex,i=s.step-this.props.step;return(e!==0||i!==0)&&(this.setResult(!0,s),i!==0&&this.setState({loading:!1})),!0}singleOn(s,t){this.fns.set(s,[t])}on(s,t){this.singleOn(s,t)}unbindAll(s){this.fns.delete(s)}render(){const{selectedID:s,result:t,clipStatus:e,selectedAttribute:i}=this.state;return T.createElement(W,{value:{videoPlayer:this.videoPlayer,result:t,selectedID:s,attributeList:this.props.config.attributeList,clipStatus:e,selectedAttribute:i,contextToCancel:this.contextToCancel,selectTimeSliceByTime:this.selectTimeSliceByTime}},this.renderMediaContent())}}export{it as default};

package/es/components/videoPlayer/index.js

@@ -1 +1 @@
-import o from"react";import A from"./components/controller/index.js";import j from"../videoAnnotate/videoClipTool/components/videoTrack/index.js";import{getClassName as h}from"../../utils/dom.js";import{cKeyCode as M}from"@labelbee/lb-annotation";import{decimalReserved as n}from"./utils.js";import z from"../fileException/index.js";const l=M.default,v=o.createContext({isPlay:!1,playPause:()=>{},updateNextPlaybackRate:()=>{},playbackRate:1,currentTime:0,duration:0,buffered:0,setCurrentTime:()=>{},imgList:[],imgIndex:-1,pageBackward:()=>{},pageJump:y=>{},pageForward:()=>{},addTime:()=>{},toggleClipStatus:()=>{}}),U=300,f=.1,m=[.1,.2,.3,.4,.5,1,1.5,2,4,6,8,16];class E extends o.Component{constructor(a){super(a);this.changePlaybackPate=e=>{this.videoElm&&(this.videoElm.playbackRate=e,this.setState({playbackRate:e}))},this.playPause=()=>{var e,t,i;((e=this.videoElm)==null?void 0:e.paused)?(t=this.videoElm)==null||t.play():(i=this.videoElm)==null||i.pause()},this.updateNextPlaybackRate=(e=!0)=>{const t=m.findIndex(r=>r===this.state.playbackRate);let i=e?Math.min(t+1,m.length-1):Math.max(t-1,0);this.changePlaybackPate(m[i])},this.fastForward=()=>{this.videoElm&&this.setCurrentTime(this.videoElm.currentTime+f)},this.rewind=()=>{this.videoElm&&this.setCurrentTime(this.videoElm.currentTime-f)},this.keydown=e=>{e.keyCode===l.Space&&(e.preventDefault(),this.playPause()),e.keyCode===l.Up&&(e.preventDefault(),this.updateNextPlaybackRate()),e.keyCode===l.Down&&(e.preventDefault(),this.updateNextPlaybackRate(!1)),e.keyCode===l.Left&&(e.preventDefault(),this.rewind()),e.keyCode===l.Right&&(e.preventDefault(),this.fastForward())},this.onPlay=()=>{this.setState({isPlay:!0},this.onVideoStart)},this.onPause=()=>{this.onVideoStopped()},this.onTimeUpdate=()=>{var e;this.videoElm&&this.setState({currentTime:n((e=this.videoElm)==null?void 0:e.currentTime,1)})},this.onVideoStopped=()=>{this.setState({isPlay:!1}),this.timeInterval&&(clearInterval(this.timeInterval),this.timeInterval=void 0),this.videoElm&&this.setCurrentTime(this.videoElm.currentTime)},this.onVideoStart=()=>{this.timeInterval=window.setInterval(()=>{var e,t,i,r,d;if(this.videoElm)try{if(((e=this.videoElm)==null?void 0:e.buffered.length)>0){const s=(t=this.videoElm)==null?void 0:t.buffered.end(0);this.setState({buffered:s})}(d=(r=this.props).updateCurrentTime)==null||d.call(r,n((i=this.videoElm)==null?void 0:i.currentTime,1))}catch(s){console.error(s)}},U)},this.resetVideoData=()=>{this.setState({currentTime:0,buffered:0,error:!1,isPlay:!1}),this.videoElm&&(this.videoElm.playbackRate=this.state.playbackRate),this.onVideoStopped()},this.setDuration=()=>{var e,t,i;if(this.videoElm){const r=n((e=this.videoElm)==null?void 0:e.duration,1);(i=(t=this.props).dataLoaded)==null||i.call(t),this.setState({duration:r})}},this.setCurrentTime=e=>{var t,i;this.videoElm&&(this.videoElm.currentTime=e,this.setState({currentTime:e}),(i=(t=this.props).updateCurrentTime)==null||i.call(t,e))},this.reload=()=>{var e;(e=this.videoElm)==null||e.load()},this.onError=()=>{var e,t;(t=(e=this.props).dataLoaded)==null||t.call(e,!0),this.resetVideoData(),this.setState({error:!0})},this.state={playbackRate:1,currentTime:0,isPlay:!1,duration:0,buffered:0,error:!1},this.videoRef=o.createRef()}get videoElm(){var a;return(a=this.videoRef)==null?void 0:a.current}get videoSrc(){var a,e;const{imgIndex:t,imgList:i}=this.props;return t>-1&&(e=(a=i[t])==null?void 0:a.url)!=null?e:""}componentDidMount(){var a,e;window.addEventListener("keydown",this.keydown),((a=this.videoRef)==null?void 0:a.current)&&this.props.setVideoRef&&this.props.setVideoRef((e=this.videoRef)==null?void 0:e.current)}componentWillUnmount(){window.removeEventListener("keydown",this.keydown)}render(){const{isPlay:a,playbackRate:e,currentTime:t,duration:i,buffered:r,error:d}=this.state,{imgList:s,imgIndex:k,pageBackward:g,pageJump:T,pageForward:R,valid:P,footer:b,drawLayerSlot:u}=this.props,C=isNaN(i)?0:Math.max(n(i,1)-t,0),{playPause:c,updateNextPlaybackRate:_,onPause:w,onPlay:x,onTimeUpdate:S,resetVideoData:V,setDuration:D,setCurrentTime:I,onError:L,videoRef:N,videoSrc:F}=this;return o.createElement(v.Provider,{value:{videoRef:this.videoRef,addTime:this.props.addTime,toggleClipStatus:this.props.toggleClipStatus,isPlay:a,playPause:c,updateNextPlaybackRate:_,playbackRate:e,currentTime:t,duration:i,buffered:r,setCurrentTime:I,imgIndex:k,imgList:s,pageBackward:g,pageJump:T,pageForward:R}},o.createElement(o.Fragment,null,u==null?void 0:u({currentTime:t,remainingTime:C,zoom:1,currentPos:{x:0,y:0}}),o.createElement("div",{className:h("video-wrapper")},o.createElement("div",{className:h("video-container")},o.createElement("video",{ref:N,className:h(this.props.showVideoTrack?"video-track":"video"),src:F,onPause:w,onPlay:x,onTimeUpdate:S,onLoadedMetadata:V,onError:L,onDurationChange:D,width:"100%",height:"100%",onClick:c}),this.props.showVideoTrack&&o.createElement(j,{currentTime:t,onTrackResize:this.props.onTrackResize,onTrackResizeStart:()=>{var p;(p=this.videoElm)==null||p.pause()},readonly:!1}),o.createElement(z,{fileType:"video",errorProps:{reloadImage:this.reload,backgroundColor:"#e2e2e2",ignoreOffsetY:!0,isError:d},invalidProps:{isValid:P}})),o.createElement(A,{footer:b}))))}}export{E as VideoPlayer,v as VideoPlayerCtx,E as default};
+import o from"react";import F from"./components/controller/index.js";import j from"../videoAnnotate/videoClipTool/components/videoTrack/index.js";import{getClassName as c}from"../../utils/dom.js";import{cKeyCode as M}from"@labelbee/lb-annotation";import{decimalReserved as l}from"./utils.js";import U from"../fileException/index.js";const d=M.default,y=o.createContext({isPlay:!1,playPause:()=>{},updateNextPlaybackRate:()=>{},playbackRate:1,currentTime:0,duration:0,buffered:0,setCurrentTime:()=>{},imgList:[],imgIndex:-1,pageBackward:()=>{},pageJump:P=>{},pageForward:()=>{},addTime:()=>{},toggleClipStatus:()=>{}}),z=50,O=300,T=.1,p=[.1,.2,.3,.4,.5,1,1.5,2,4,6,8,16];class k extends o.Component{constructor(a){super(a);this.changePlaybackPate=e=>{this.videoElm&&(this.videoElm.playbackRate=e,this.setState({playbackRate:e}))},this.playPause=()=>{var e,t,i;((e=this.videoElm)==null?void 0:e.paused)?(t=this.videoElm)==null||t.play():(i=this.videoElm)==null||i.pause()},this.updateNextPlaybackRate=(e=!0)=>{const t=p.findIndex(r=>r===this.state.playbackRate);let i=e?Math.min(t+1,p.length-1):Math.max(t-1,0);this.changePlaybackPate(p[i])},this.fastForward=()=>{this.videoElm&&this.setCurrentTime(this.videoElm.currentTime+T)},this.rewind=()=>{this.videoElm&&this.setCurrentTime(this.videoElm.currentTime-T)},this.keydown=e=>{e.keyCode===d.Space&&(e.preventDefault(),this.playPause()),e.keyCode===d.Up&&(e.preventDefault(),this.updateNextPlaybackRate()),e.keyCode===d.Down&&(e.preventDefault(),this.updateNextPlaybackRate(!1)),e.keyCode===d.Left&&(e.preventDefault(),this.rewind()),e.keyCode===d.Right&&(e.preventDefault(),this.fastForward())},this.onPlay=()=>{this.setState({isPlay:!0},this.onVideoStart)},this.onPause=()=>{this.onVideoStopped()},this.onTimeUpdate=()=>{var e;this.videoElm&&this.setState({currentTime:l((e=this.videoElm)==null?void 0:e.currentTime,1)})},this.onVideoStopped=()=>{this.setState({isPlay:!1}),this.timeInterval&&(clearInterval(this.timeInterval),this.timeInterval=void 0),this.videoElm&&this.setCurrentTime(this.videoElm.currentTime)},this.onVideoStart=()=>{const e=this.props.syncTimeOnPlay===!0,t=e?O:z;this.timeInterval=window.setInterval(()=>{var i,r,n,h,m,u;if(this.videoElm)try{if(((i=this.videoElm)==null?void 0:i.buffered.length)>0){const s=(r=this.videoElm)==null?void 0:r.buffered.end(0);e?this.setState({buffered:s}):this.setState({currentTime:l((n=this.videoElm)==null?void 0:n.currentTime,1),buffered:s})}e&&((u=(m=this.props).updateCurrentTime)==null||u.call(m,l((h=this.videoElm)==null?void 0:h.currentTime,1)))}catch(s){console.error(s)}},t)},this.resetVideoData=()=>{this.setState({currentTime:0,buffered:0,error:!1,isPlay:!1}),this.videoElm&&(this.videoElm.playbackRate=this.state.playbackRate),this.onVideoStopped()},this.setDuration=()=>{var e,t,i;if(this.videoElm){const r=l((e=this.videoElm)==null?void 0:e.duration,1);(i=(t=this.props).dataLoaded)==null||i.call(t),this.setState({duration:r})}},this.setCurrentTime=e=>{var t,i;this.videoElm&&(this.videoElm.currentTime=e,this.setState({currentTime:e}),(i=(t=this.props).updateCurrentTime)==null||i.call(t,e))},this.reload=()=>{var e;(e=this.videoElm)==null||e.load()},this.onError=()=>{var e,t;(t=(e=this.props).dataLoaded)==null||t.call(e,!0),this.resetVideoData(),this.setState({error:!0})},this.state={playbackRate:1,currentTime:0,isPlay:!1,duration:0,buffered:0,error:!1},this.videoRef=o.createRef()}get videoElm(){var a;return(a=this.videoRef)==null?void 0:a.current}get videoSrc(){var a,e;const{imgIndex:t,imgList:i}=this.props;return t>-1&&(e=(a=i[t])==null?void 0:a.url)!=null?e:""}componentDidMount(){var a,e;window.addEventListener("keydown",this.keydown),((a=this.videoRef)==null?void 0:a.current)&&this.props.setVideoRef&&this.props.setVideoRef((e=this.videoRef)==null?void 0:e.current)}componentWillUnmount(){window.removeEventListener("keydown",this.keydown)}render(){const{isPlay:a,playbackRate:e,currentTime:t,duration:i,buffered:r,error:n}=this.state,{imgList:h,imgIndex:m,pageBackward:u,pageJump:s,pageForward:R,valid:g,footer:_,drawLayerSlot:v}=this.props,b=isNaN(i)?0:Math.max(l(i,1)-t,0),{playPause:f,updateNextPlaybackRate:C,onPause:w,onPlay:S,onTimeUpdate:x,resetVideoData:V,setDuration:D,setCurrentTime:I,onError:L,videoRef:N,videoSrc:A}=this;return o.createElement(y.Provider,{value:{videoRef:this.videoRef,addTime:this.props.addTime,toggleClipStatus:this.props.toggleClipStatus,isPlay:a,playPause:f,updateNextPlaybackRate:C,playbackRate:e,currentTime:t,duration:i,buffered:r,setCurrentTime:I,imgIndex:m,imgList:h,pageBackward:u,pageJump:s,pageForward:R}},o.createElement(o.Fragment,null,v==null?void 0:v({currentTime:t,remainingTime:b,zoom:1,currentPos:{x:0,y:0}}),o.createElement("div",{className:c("video-wrapper")},o.createElement("div",{className:c("video-container")},o.createElement("video",{ref:N,className:c(this.props.showVideoTrack?"video-track":"video"),src:A,onPause:w,onPlay:S,onTimeUpdate:x,onLoadedMetadata:V,onError:L,onDurationChange:D,width:"100%",height:"100%",onClick:f}),this.props.showVideoTrack&&o.createElement(j,{currentTime:t,onTrackResize:this.props.onTrackResize,onTrackResizeStart:()=>{var E;(E=this.videoElm)==null||E.pause()},readonly:!1}),o.createElement(U,{fileType:"video",errorProps:{reloadImage:this.reload,backgroundColor:"#e2e2e2",ignoreOffsetY:!0,isError:n},invalidProps:{isValid:g}})),o.createElement(F,{footer:_}))))}}export{k as VideoPlayer,y as VideoPlayerCtx,k as default};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@labelbee/lb-components",
-  "version": "1.24.0-alpha.63",
+  "version": "1.24.0-alpha.64",
   "description": "Provide a complete library of annotation components",
   "main": "./dist/index.js",
   "es": "./es/index.js",