@labelbee/lb-components 1.21.0-alpha.3 → 1.21.0-alpha.4

package/dist/components/videoAnnotate/videoClipTool/components/videoTimeSlicesOverVideo/index.module.scss.js

@@ -1 +1 @@
-"use strict";var styles={videoTimeSlices:"index-module_videoTimeSlices__v-2k1",timeSliceWrapper:"index-module_timeSliceWrapper__kebC3",active:"index-module_active__cIGVq",timeSliceItemText:"index-module_timeSliceItemText__FJFwH",timeSliceItemAttribute:"index-module_timeSliceItemAttribute__--3E1"};module.exports=styles;
+"use strict";var styles={videoTimeSlices:"index-module_videoTimeSlices__v-2k1",timeSliceWrapper:"index-module_timeSliceWrapper__kebC3",timeSliceItemText:"index-module_timeSliceItemText__FJFwH",timeSliceItemAttribute:"index-module_timeSliceItemAttribute__--3E1"};module.exports=styles;

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

@@ -1 +1 @@
-"use strict";var lbAnnotation=require("@labelbee/lb-annotation"),index=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$1=require("../../videoPlayer/index.js"),index$2=require("./components/videoTimeSlicesOverVideo/index.js"),icon_videoCutting=require("../../../assets/annotation/video/icon_videoCutting.svg.js"),utils=require("../../videoPlayer/utils.js");function _interopDefaultLegacy(d){return d&&typeof d=="object"&&"default"in d?d:{default:d}}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=(d,r,t)=>r in d?__defProp(d,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):d[r]=t,__spreadValues=(d,r)=>{for(var t in r||(r={}))__hasOwnProp.call(r,t)&&__defNormalProp(d,t,r[t]);if(__getOwnPropSymbols)for(var t of __getOwnPropSymbols(r))__propIsEnum.call(r,t)&&__defNormalProp(d,t,r[t]);return d},__spreadProps=(d,r)=>__defProps(d,__getOwnPropDescs(r));class VideoClipTool extends React__default.default.Component{constructor(r){super(r);this.fns=new Map,this.throttledUpdateTime=___default.default.throttle(t=>{this.videoPlayer.currentTime=t},100,{trailing:!0}),this.stepInfo=()=>this.props.stepInfo,this.emitEvent=t=>{const e=this.fns.get(t);e&&e.forEach(i=>{i&&i()})},this.setValid=t=>{this.setState({valid:t}),t===!1&&(this.clearResult(),this.updateSidebar())},this.updateSidebar=()=>{this.emitEvent("changeClipSidebar")},this.exportData=()=>{var t,e;const i=(e=(t=this.videoRef)==null?void 0:t.duration)!=null?e:0;return[this.state.result.filter(s=>s.end!==null),{valid:this.state.valid,duration:i}]},this.updateSelectedSliceTimeStartByPer=t=>{var e,i;if(this.state.clipStatus===constant.EClipStatus.Clipping){antd.message.info("\u622A\u53D6\u4E2D\u4E0D\u652F\u6301\u8C03\u6574\u5F00\u59CB\u65F6\u95F4");return}if(this.selectedSliceIndex>-1){const s=(i=(e=this.videoPlayer)==null?void 0:e.duration)!=null?i:0,{end:a,start:u,type:l}=this.state.result[this.selectedSliceIndex],n=lbAnnotation.MathUtils.withinRange(audio.precisionAdd(u,t),[0,audio.precisionMinus(l===constant.ETimeSliceType.Time?s:a,constant.PER_SLICE_CHANGE)]);this.updateSelectedSliceTimeProperty(n,"start")}},this.updateSelectedSliceTimeEndByPer=t=>{var e,i;if(this.state.clipStatus===constant.EClipStatus.Clipping){antd.message.info("\u622A\u53D6\u4E2D\u4E0D\u652F\u6301\u8C03\u6574\u7ED3\u675F\u65F6\u95F4");return}if(this.selectedSliceIndex>-1){const s=this.state.result[this.selectedSliceIndex],a=(i=(e=this.videoPlayer)==null?void 0:e.duration)!=null?i:0;if(s.type===constant.ETimeSliceType.Time){antd.message.info("\u65F6\u95F4\u70B9\u4EC5\u652F\u6301\u8C03\u6574\u5F00\u59CB\u65F6\u95F4");return}const{end:u,start:l}=s,n=lbAnnotation.MathUtils.withinRange(audio.precisionAdd(u,t),[audio.precisionAdd(l,constant.PER_SLICE_CHANGE),a]);this.updateSelectedSliceTimeProperty(n,"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.videoLoaded=t=>{var e;const i=this.resultJSON,s=i&&!["","{}"].includes(i),a=t?parseFloat(t.toFixed(2)):0,u={loading:!1};((e=index.jsonParser(i))==null?void 0:e.duration)||Object.assign(u,{result:JSON.stringify(__spreadProps(__spreadValues({},index.jsonParser(i)),{duration:a}))}),s||Object.assign(u,{result:JSON.stringify({width:0,height:0,rotate:0,valid:!0,duration:a})}),this.setState({loading:!1})},this.setVideoError=(t,e,i)=>{if(t){const{clipStatus:s}=this.state;s===constant.EClipStatus.Clipping&&this.toggleClipStatus(i)}this.setState({videoError:t,loading:!1})},this.clearResult=()=>{this.setState({result:[],selectedID:"",textValue:""}),this.updateSidebar()},this.cancelClipped=()=>{const{result:t,selectedID:e,clipStatus:i}=this.state;if(i!==constant.EClipStatus.Clipping)return;const s=t.findIndex(a=>a.id===e);s>-1&&(t.splice(s,1),this.setState({result:t,selectedID:"",clipStatus:constant.EClipStatus.Stop}),this.updateSidebar())},this.toggleClipStatus=t=>{var e,i,s;if(this.disabled)return;const{clipStatus:a,selectedAttribute:u}=this.state,l=a!==constant.EClipStatus.Clipping;let n=l?constant.EClipStatus.Clipping:constant.EClipStatus.Stop,{result:o,selectedID:c,textValue:h}=this.state;const p=___default.default.cloneDeep(o),S=t||((e=this.videoPlayer)==null?void 0:e.currentTime),g=(i=this.videoPlayer)==null?void 0:i.duration;if(g===void 0||S===void 0)return;const C=utils.decimalReserved(S,2);if(l){const f=lbAnnotation.uuid();c=f,p.push({start:C,end:null,attribute:u,textAttribute:this.defaultTextAttribute,duration:g,id:f,type:constant.ETimeSliceType.Period}),h=this.defaultTextAttribute}else{const f=p.findIndex(m=>m.id===c),v=p[f];v&&(S-v.start<constant.SLICE_MIN_TIME?(p.splice(f,1),antd.message.info(`\u622A\u53D6\u7247\u6BB5\u4E0D\u80FD\u77ED\u4E8E${constant.SLICE_MIN_TIME}s`),n=constant.EClipStatus.Stop,c="",h=""):(p[f].end=utils.decimalReserved(S,2),(s=this.videoPlayer)==null||s.pause(),antd.message.success(`\u5DF2\u622A\u53D6\u7247\u6BB5${o.length}`)))}this.setState({clipStatus:n,result:p,selectedID:c,textValue:h}),this.updateSidebar()},this.addTime=()=>{var t,e,i,s;if(this.disabled)return;const{result:a,selectedAttribute:u,selectedID:l}=this.state,n=lbAnnotation.uuid(),o=___default.default.cloneDeep(a),c=((t=this.videoPlayer)==null?void 0:t.currentTime)||0;o.push({start:c,end:c,attribute:u,textAttribute:this.defaultTextAttribute,id:n,type:constant.ETimeSliceType.Time,duration:(i=(e=this.videoPlayer)==null?void 0:e.duration)!=null?i:0});const h={result:o,selectedID:n,textValue:this.defaultTextAttribute},p=o.find(S=>S.id===l);this.isClipping&&p?(delete h.selectedID,delete h.textValue,antd.message.success(`\u5DF2\u622A\u53D6\u65F6\u95F4\u70B9${o.length-1}`)):(s=this.videoPlayer)==null||s.pause(),this.setState(h),this.updateSidebar()},this.contextToCancel=t=>{this.state.clipStatus===constant.EClipStatus.Stop&&(t.preventDefault(),this.setState({selectedID:""}),this.updateSidebar())},this.onTrackResize=(t,e,i)=>{var s,a;const{result:u}=this.state,l=u.find(n=>n.id===t);if(l){const n=l.duration,o=e==="left",c=o?"start":"end",h=o?-n*i:n*i,p=o?[0,Math.max(((s=l.end)!=null?s:0)-constant.SLICE_MIN_TIME,0)]:[l.start+constant.SLICE_MIN_TIME,n],S=lbAnnotation.MathUtils.withinRange(h+((a=l==null?void 0:l[c])!=null?a:0),p);l[c]=S,this.throttledUpdateTime(S)}this.setState({result:[...u]}),this.updateSidebar()},this.renderMediaContent=()=>{const{pageForward:t,pageJump:e,pageBackward:i}=this.props,{result:s,currentTime:a,videoError:u,valid:l}=this.state;return React__default.default.createElement("div",{className:index_module.clipContainer},React__default.default.createElement(index$1.VideoPlayer,{imgIndex:this.props.imgIndex,imgList:this.props.imgList,pageBackward:i,pageForward:t,pageJump:e,valid:l,setVideoRef:n=>{this.videoPlayer=n},showVideoTrack:!u,onTrackResize:this.onTrackResize,drawLayerSlot:this.props.drawLayerSlot,footer:this.props.footer,dataLoaded:this.videoLoaded,toggleClipStatus:this.toggleClipStatus,addTime:this.addTime}),React__default.default.createElement(index$2,{result:s,currentTime:a,attributeList:this.props.config.attributeList,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}),this.updateSidebar(),(e=this.videoPlayer)==null||e.pause(),this.videoPlayer.currentTime=t.start)},this.removeTimeSlice=t=>{const{result:e}=this.state,i=this.state.selectedID===t.id?"":this.state.selectedID,s=e.findIndex(a=>a.id===t.id);s>-1&&(e.splice(s,1),this.setState({result:[...e],selectedID:i}),this.updateSidebar())},this.setResult=(t=!0,e=this.props)=>{try{const{imgIndex:i,imgList:s}=e;if(!s[i])return;const u=index.jsonParser(s[i].result)[`step_${this.stepInfo().step}`],l=(u==null?void 0:u.result)||[],n=audio.isImageValue(s[i].result||"[]");this.setState({result:l,loading:t,selectedID:"",textValue:"",selectedAttribute:"",clipStatus:constant.EClipStatus.Stop,valid:n},()=>{this.updateSidebar(),n||antd.message.info("\u65E0\u6548\u89C6\u9891\uFF0C\u8BF7\u8DF3\u8FC7")})}catch(i){console.error("\u6570\u636E\u89E3\u6790\u5931\u8D25"),this.setState({result:[],loading:!1,selectedID:"",textValue:"",selectedAttribute:"",valid:!0},()=>{this.updateSidebar()})}},this.setDefaultAttribute=t=>{const{result:e,selectedID:i}=this.state,s=e.find(a=>a.id===i);s&&i&&(s.attribute=t),this.setState({selectedAttribute:t,result:[...e]}),this.updateSidebar()},this.setTextAttribute=t=>{const{result:e,selectedID:i}=this.state;if(this.setState({textValue:t}),i){const s=e.find(a=>a.id===i);s&&(s.textAttribute=t,this.setState({result:[...e]}),this.updateSidebar())}},this.state={result:[],selectedAttribute:"",textValue:"",clipStatus:constant.EClipStatus.Stop,selectedID:"",loading:!1,videoError:!1,remainingTime:0,currentTime:0,configLoading:!1,valid:!0}}get videoUrl(){var r;const{imgIndex:t,imgList:e}=this.props;return((r=e[t])==null?void 0:r.url)||""}get isClipping(){return this.state.clipStatus===constant.EClipStatus.Clipping}get resultJSON(){const{imgIndex:r,imgList:t}=this.props;return t.length===0||!t[r]?"[]":t[r].result}get disabled(){return!this.state.valid||this.state.videoError}get loading(){return this.state.loading||this.state.configLoading}get defaultTextAttribute(){return lbAnnotation.AttributeUtils.getTextAttribute(this.state.result,this.props.config.textCheckType)}get defaultAttribute(){return this.state.selectedAttribute}get selectedSliceIndex(){return this.state.result.findIndex(r=>r.id===this.state.selectedID)}get exportContext(){return{selectedID:this.state.selectedID,result:this.state.result,clipStatus:this.state.clipStatus,videoPlayer:this.videoPlayer,attributeList:this.props.config.attributeList,onSelectedTimeSlice:this.onSelectedTimeSlice,removeTimeSlice:this.removeTimeSlice,updateSelectedSliceTimeProperty:this.updateSelectedSliceTimeProperty}}get valid(){return this.state.valid}componentDidMount(){this.setState({loading:!1}),this.setResult(!1),this.props.onMounted(this),window.addEventListener("keydown",this.keyDownEvents)}componentWillUnmount(){this.props.onUnmounted(),window.removeEventListener("keydown",this.keyDownEvents)}shouldComponentUpdate(r,t){const e=r.imgIndex-this.props.imgIndex,i=r.step-this.props.step;return(e!==0||i!==0)&&(this.setResult(!0,r),i!==0&&this.setState({loading:!1})),!0}singleOn(r,t){this.fns.set(r,[t])}on(r,t){this.singleOn(r,t)}unbindAll(r){this.fns.delete(r)}render(){const{selectedID:r,result:t,clipStatus:e,selectedAttribute:i}=this.state;return React__default.default.createElement(VideoClipToolContext.VideoClipToolContextProvider,{value:{videoPlayer:this.videoPlayer,result:t,selectedID:r,attributeList:this.props.config.attributeList,clipStatus:e,selectedAttribute:i,contextToCancel:this.contextToCancel}},this.renderMediaContent())}}module.exports=VideoClipTool;
+"use strict";var lbAnnotation=require("@labelbee/lb-annotation"),index=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$1=require("../../videoPlayer/index.js"),index$2=require("./components/videoTimeSlicesOverVideo/index.js"),icon_videoCutting=require("../../../assets/annotation/video/icon_videoCutting.svg.js"),utils=require("../../videoPlayer/utils.js");function _interopDefaultLegacy(d){return d&&typeof d=="object"&&"default"in d?d:{default:d}}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=(d,s,t)=>s in d?__defProp(d,s,{enumerable:!0,configurable:!0,writable:!0,value:t}):d[s]=t,__spreadValues=(d,s)=>{for(var t in s||(s={}))__hasOwnProp.call(s,t)&&__defNormalProp(d,t,s[t]);if(__getOwnPropSymbols)for(var t of __getOwnPropSymbols(s))__propIsEnum.call(s,t)&&__defNormalProp(d,t,s[t]);return d},__spreadProps=(d,s)=>__defProps(d,__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.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:a,start:u,type:l}=this.state.result[this.selectedSliceIndex],n=lbAnnotation.MathUtils.withinRange(audio.precisionAdd(u,t),[0,audio.precisionMinus(l===constant.ETimeSliceType.Time?r:a,constant.PER_SLICE_CHANGE)]);this.updateSelectedSliceTimeProperty(n,"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],a=(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:u,start:l}=r,n=lbAnnotation.MathUtils.withinRange(audio.precisionAdd(u,t),[audio.precisionAdd(l,constant.PER_SLICE_CHANGE),a]);this.updateSelectedSliceTimeProperty(n,"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.videoLoaded=t=>{var e;const i=this.resultJSON,r=i&&!["","{}"].includes(i),a=t?parseFloat(t.toFixed(2)):0,u={loading:!1};((e=index.jsonParser(i))==null?void 0:e.duration)||Object.assign(u,{result:JSON.stringify(__spreadProps(__spreadValues({},index.jsonParser(i)),{duration:a}))}),r||Object.assign(u,{result:JSON.stringify({width:0,height:0,rotate:0,valid:!0,duration:a})}),this.setState({loading:!1})},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(a=>a.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,r;if(this.disabled)return;const{clipStatus:a,selectedAttribute:u}=this.state,l=a!==constant.EClipStatus.Clipping;let n=l?constant.EClipStatus.Clipping:constant.EClipStatus.Stop,{result:o,selectedID:c,textValue:h}=this.state;const p=___default.default.cloneDeep(o),S=t||((e=this.videoPlayer)==null?void 0:e.currentTime),v=(i=this.videoPlayer)==null?void 0:i.duration;if(v===void 0||S===void 0)return;const C=utils.decimalReserved(S,2);if(l){const f=lbAnnotation.uuid();c=f,p.push({start:C,end:null,attribute:u,textAttribute:this.defaultTextAttribute,duration:v,id:f,type:constant.ETimeSliceType.Period}),h=this.defaultTextAttribute}else{const f=p.findIndex(m=>m.id===c),g=p[f];g&&(S-g.start<constant.SLICE_MIN_TIME?(p.splice(f,1),antd.message.info(`\u622A\u53D6\u7247\u6BB5\u4E0D\u80FD\u77ED\u4E8E${constant.SLICE_MIN_TIME}s`),n=constant.EClipStatus.Stop,c="",h=""):(p[f].end=utils.decimalReserved(S,2),(r=this.videoPlayer)==null||r.pause(),antd.message.success(`\u5DF2\u622A\u53D6\u7247\u6BB5${o.length}`)))}this.setState({clipStatus:n,result:p,selectedID:c,textValue:h}),this.updateSidebar()},this.addTime=()=>{var t,e,i,r;if(this.disabled)return;const{result:a,selectedAttribute:u,selectedID:l}=this.state,n=lbAnnotation.uuid(),o=___default.default.cloneDeep(a),c=((t=this.videoPlayer)==null?void 0:t.currentTime)||0;o.push({start:c,end:c,attribute:u,textAttribute:this.defaultTextAttribute,id:n,type:constant.ETimeSliceType.Time,duration:(i=(e=this.videoPlayer)==null?void 0:e.duration)!=null?i:0});const h={result:o,selectedID:n,textValue:this.defaultTextAttribute},p=o.find(S=>S.id===l);this.isClipping&&p?(delete h.selectedID,delete h.textValue,antd.message.success(`\u5DF2\u622A\u53D6\u65F6\u95F4\u70B9${o.length-1}`)):(r=this.videoPlayer)==null||r.pause(),this.setState(h),this.updateSidebar()},this.updateCurrentTime=t=>{this.setState({currentTime:t})},this.contextToCancel=t=>{this.state.clipStatus===constant.EClipStatus.Stop&&(t.preventDefault(),this.setState({selectedID:""}),this.updateSidebar())},this.onTrackResize=(t,e,i)=>{var r,a;const{result:u}=this.state,l=u.find(n=>n.id===t);if(l){const n=l.duration,o=e==="left",c=o?"start":"end",h=o?-n*i:n*i,p=o?[0,Math.max(((r=l.end)!=null?r:0)-constant.SLICE_MIN_TIME,0)]:[l.start+constant.SLICE_MIN_TIME,n],S=lbAnnotation.MathUtils.withinRange(h+((a=l==null?void 0:l[c])!=null?a:0),p);l[c]=S,this.throttledUpdateTime(S)}this.setState({result:[...u]}),this.updateSidebar()},this.renderMediaContent=()=>{var t;const{pageForward:e,pageJump:i,pageBackward:r}=this.props,{result:a,videoError:u,valid:l,currentTime:n}=this.state;return React__default.default.createElement("div",{className:index_module.clipContainer},React__default.default.createElement(index$1.VideoPlayer,{imgIndex:this.props.imgIndex,imgList:this.props.imgList,pageBackward:r,pageForward:e,pageJump:i,valid:l,setVideoRef:o=>{this.videoPlayer=o},showVideoTrack:!u,onTrackResize:this.onTrackResize,drawLayerSlot:this.props.drawLayerSlot,footer:this.props.footer,dataLoaded:this.videoLoaded,toggleClipStatus:this.toggleClipStatus,addTime:this.addTime,updateCurrentTime:this.updateCurrentTime}),React__default.default.createElement(index$2,{key:(t=this.videoPlayer)==null?void 0:t.currentTime,result:a,currentTime:n,attributeList:this.props.config.attributeList,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}),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(a=>a.id===t.id);r>-1&&(e.splice(r,1),this.setState({result:[...e],selectedID:i}),this.updateSidebar())},this.setResult=(t=!0,e=this.props)=>{try{const{imgIndex:i,imgList:r}=e;if(!r[i])return;const u=index.jsonParser(r[i].result)[`step_${this.stepInfo().step}`],l=(u==null?void 0:u.result)||[],n=audio.isImageValue(r[i].result||"[]");this.setState({result:l,loading:t,selectedID:"",textValue:"",selectedAttribute:"",clipStatus:constant.EClipStatus.Stop,valid:n},()=>{this.updateSidebar(),n||antd.message.info("\u65E0\u6548\u89C6\u9891\uFF0C\u8BF7\u8DF3\u8FC7")})}catch(i){console.error("\u6570\u636E\u89E3\u6790\u5931\u8D25"),this.setState({result:[],loading:!1,selectedID:"",textValue:"",selectedAttribute:"",valid:!0},()=>{this.updateSidebar()})}},this.setDefaultAttribute=t=>{const{result:e,selectedID:i}=this.state,r=e.find(a=>a.id===i);r&&i&&(r.attribute=t),this.setState({selectedAttribute:t,result:[...e]}),this.updateSidebar()},this.textChange=t=>{const{result:e,selectedID:i}=this.state;if(this.setState({textValue:t}),i){const r=e.find(a=>a.id===i);r&&(r.textAttribute=t,this.setState({result:[...e]}),this.updateSidebar())}},this.state={result:[],selectedAttribute:"",textValue:"",clipStatus:constant.EClipStatus.Stop,selectedID:"",loading:!1,videoError:!1,remainingTime:0,currentTime:0,configLoading:!1,valid:!0}}get videoUrl(){var 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}}get valid(){return this.state.valid}get config(){var s;return index.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}},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=50,PER_FORWARD=.1,PLAYBACK_RATES=[.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;if(this.videoElm)try{if(((e=this.videoElm)==null?void 0:e.buffered.length)>0){const r=(t=this.videoElm)==null?void 0:t.buffered.end(0);this.setState({currentTime:utils.decimalReserved((i=this.videoElm)==null?void 0:i.currentTime,1),buffered:r})}}catch(r){console.error(r)}},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,r),this.setState({duration:r})}},this.setCurrentTime=e=>{this.videoElm&&(this.videoElm.currentTime=e,this.setState({currentTime:e}))},this.reload=()=>{var e;(e=this.videoElm)==null||e.load()},this.onError=()=>{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:n}=this.state,{imgList:u,imgIndex:h,pageBackward:c,pageJump:m,pageForward:v,valid:f,footer:p,drawLayerSlot:s}=this.props,y=isNaN(i)?0:Math.max(utils.decimalReserved(i,1)-t,0),{playPause:d,updateNextPlaybackRate:E,onPause:g,onPlay:R,onTimeUpdate:P,resetVideoData:k,setDuration:T,setCurrentTime:b,onError:x,videoRef:C,videoSrc:w}=this;return React__default.default.createElement(VideoPlayerCtx.Provider,{value:{videoRef:this.videoRef,addTime:this.props.addTime,toggleClipStatus:this.props.toggleClipStatus,isPlay:a,playPause:d,updateNextPlaybackRate:E,playbackRate:e,currentTime:t,duration:i,buffered:r,setCurrentTime:b,imgIndex:h,imgList:u,pageBackward:c,pageJump:m,pageForward:v}},React__default.default.createElement(React__default.default.Fragment,null,s==null?void 0:s({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:w,onPause:g,onPlay:R,onTimeUpdate:P,onLoadedMetadata:k,onError:x,onDurationChange:T,width:"100%",height:"100%",onClick:d}),this.props.showVideoTrack&&React__default.default.createElement(index.default,{currentTime:t,onTrackResize:this.props.onTrackResize,onTrackResizeStart:()=>{var l;(l=this.videoElm)==null||l.pause()},readonly:!1}),React__default.default.createElement(index$1,{fileType:"video",errorProps:{reloadImage:this.reload,backgroundColor:"#e2e2e2",ignoreOffsetY:!0,isError:n},invalidProps:{isValid:f}})),React__default.default.createElement(index$2.default,{footer:p}))))}}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(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=50,PER_FORWARD=.1,PLAYBACK_RATES=[.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;if(this.videoElm)try{if(((e=this.videoElm)==null?void 0:e.buffered.length)>0){const r=(t=this.videoElm)==null?void 0:t.buffered.end(0);this.setState({currentTime:utils.decimalReserved((i=this.videoElm)==null?void 0:i.currentTime,1),buffered:r})}}catch(r){console.error(r)}},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,r),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=()=>{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:n}=this.state,{imgList:u,imgIndex:h,pageBackward:c,pageJump:v,pageForward:m,valid:p,footer:f,drawLayerSlot:s}=this.props,y=isNaN(i)?0:Math.max(utils.decimalReserved(i,1)-t,0),{playPause:d,updateNextPlaybackRate:E,onPause:g,onPlay:R,onTimeUpdate:P,resetVideoData:k,setDuration:b,setCurrentTime:T,onError:x,videoRef:C,videoSrc:_}=this;return React__default.default.createElement(VideoPlayerCtx.Provider,{value:{videoRef:this.videoRef,addTime:this.props.addTime,toggleClipStatus:this.props.toggleClipStatus,isPlay:a,playPause:d,updateNextPlaybackRate:E,playbackRate:e,currentTime:t,duration:i,buffered:r,setCurrentTime:T,imgIndex:h,imgList:u,pageBackward:c,pageJump:v,pageForward:m}},React__default.default.createElement(React__default.default.Fragment,null,s==null?void 0:s({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:_,onPause:g,onPlay:R,onTimeUpdate:P,onLoadedMetadata:k,onError:x,onDurationChange:b,width:"100%",height:"100%",onClick:d}),this.props.showVideoTrack&&React__default.default.createElement(index.default,{currentTime:t,onTrackResize:this.props.onTrackResize,onTrackResizeStart:()=>{var l;(l=this.videoElm)==null||l.pause()},readonly:!1}),React__default.default.createElement(index$1,{fileType:"video",errorProps:{reloadImage:this.reload,backgroundColor:"#e2e2e2",ignoreOffsetY:!0,isError:n},invalidProps:{isValid:p}})),React__default.default.createElement(index$2.default,{footer:f}))))}}exports.VideoPlayer=VideoPlayer,exports.VideoPlayerCtx=VideoPlayerCtx,exports.default=VideoPlayer;

package/dist/index.css

@@ -337,26 +337,25 @@
   position: absolute;
   top: 0;
   right: 0;
-  max-height: calc(100% - 80px - 90px - 24px);
+  max-width: 416px;
+  max-height: 80%;
   padding-right: 4px;
   overflow: auto;
   z-index: 22;
 }
 
 .index-module_timeSliceWrapper__kebC3 {
-  height: 80px;
+  min-height: 80px;
   margin-bottom: 8px;
   transition: opacity 0.4s ease-in-out;
-  opacity: 0.3;
-}
-.index-module_timeSliceWrapper__kebC3.index-module_active__cIGVq {
-  opacity: 1;
+  opacity: 0.9;
 }
 .index-module_timeSliceWrapper__kebC3 .index-module_timeSliceItemText__FJFwH,
 .index-module_timeSliceWrapper__kebC3 .index-module_timeSliceItemAttribute__--3E1 {
-  height: 40px;
+  min-height: 40px;
   font-size: 16px;
   color: white;
+  word-break: break-all;
 }
 .index-module_timeSliceWrapper__kebC3 .index-module_timeSliceItemText__FJFwH {
   background-color: #CCC;

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

@@ -32,6 +32,7 @@ declare class VideoClipTool extends React.Component<IVideoClipProps, IState> {
     get loading(): boolean;
     get defaultTextAttribute(): string;
     get defaultAttribute(): string;
+    get selectedID(): string;
     get selectedSliceIndex(): number;
     get exportContext(): {
         selectedID: string;
@@ -50,6 +51,8 @@ declare class VideoClipTool extends React.Component<IVideoClipProps, IState> {
     throttledUpdateTime: _.DebouncedFunc<(newValue: number) => void>;
     constructor(props: IVideoClipProps);
     get valid(): boolean;
+    get config(): any;
+    get selectedText(): string;
     /** 步骤信息 */
     stepInfo: () => import("../../../types/step").IStepInfo;
     componentDidMount(): void;
@@ -90,6 +93,8 @@ declare class VideoClipTool extends React.Component<IVideoClipProps, IState> {
     toggleClipStatus: (curTime?: number) => void;
     /** 添加时间点 */
     addTime: () => void;
+    /** 更新当前时间 */
+    updateCurrentTime: (time: number) => void;
     /**
      * 视频右键操作
      * @param e
@@ -125,7 +130,7 @@ declare class VideoClipTool extends React.Component<IVideoClipProps, IState> {
      * 设置当前选中片段的文本
      * @param textValue
      */
-    setTextAttribute: (textValue: string) => void;
+    textChange: (textValue: string) => void;
     render(): React.JSX.Element;
 }
 export default VideoClipTool;

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

@@ -39,6 +39,7 @@ interface IVideoPlayerProps {
     addTime?: () => void;
     toggleClipStatus?: () => void;
     drawLayerSlot?: any;
+    updateCurrentTime?: (time: number) => void;
 }
 interface IVideoPlayerState {
     playbackRate: number;

package/es/components/videoAnnotate/videoClipTool/components/videoTimeSlicesOverVideo/index.module.scss.js

@@ -1 +1 @@
-var e={videoTimeSlices:"index-module_videoTimeSlices__v-2k1",timeSliceWrapper:"index-module_timeSliceWrapper__kebC3",active:"index-module_active__cIGVq",timeSliceItemText:"index-module_timeSliceItemText__FJFwH",timeSliceItemAttribute:"index-module_timeSliceItemAttribute__--3E1"};export{e as default};
+var e={videoTimeSlices:"index-module_videoTimeSlices__v-2k1",timeSliceWrapper:"index-module_timeSliceWrapper__kebC3",timeSliceItemText:"index-module_timeSliceItemText__FJFwH",timeSliceItemAttribute:"index-module_timeSliceItemAttribute__--3E1"};export{e as default};

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

@@ -1 +1 @@
-import{MathUtils as C,CommonToolUtils as V,uuid as w,AttributeUtils as k}from"@labelbee/lb-annotation";import{jsonParser as I}from"../../../utils/index.js";import{precisionAdd as D,precisionMinus as j,isImageValue as B}from"../../../utils/audio.js";import{message as f}from"antd";import y from"lodash";import v from"react";import A from"./index.module.scss.js";import{VideoClipToolContextProvider as M}from"./VideoClipToolContext.js";import{EClipStatus as u,ETimeSliceType as T,PER_SLICE_CHANGE as b,SLICE_MIN_TIME as x}from"./constant.js";import{VideoPlayer as N}from"../../videoPlayer/index.js";import U from"./components/videoTimeSlicesOverVideo/index.js";import J from"../../../assets/annotation/video/icon_videoCutting.svg.js";import{decimalReserved as F}from"../../videoPlayer/utils.js";var $=Object.defineProperty,z=Object.defineProperties,G=Object.getOwnPropertyDescriptors,L=Object.getOwnPropertySymbols,H=Object.prototype.hasOwnProperty,W=Object.prototype.propertyIsEnumerable,O=(c,r,t)=>r in c?$(c,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):c[r]=t,q=(c,r)=>{for(var t in r||(r={}))H.call(r,t)&&O(c,t,r[t]);if(L)for(var t of L(r))W.call(r,t)&&O(c,t,r[t]);return c},K=(c,r)=>z(c,G(r));class Q extends v.Component{constructor(r){super(r);this.fns=new Map,this.throttledUpdateTime=y.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.exportData=()=>{var t,e;const i=(e=(t=this.videoRef)==null?void 0:t.duration)!=null?e:0;return[this.state.result.filter(s=>s.end!==null),{valid:this.state.valid,duration:i}]},this.updateSelectedSliceTimeStartByPer=t=>{var e,i;if(this.state.clipStatus===u.Clipping){f.info("\u622A\u53D6\u4E2D\u4E0D\u652F\u6301\u8C03\u6574\u5F00\u59CB\u65F6\u95F4");return}if(this.selectedSliceIndex>-1){const s=(i=(e=this.videoPlayer)==null?void 0:e.duration)!=null?i:0,{end:a,start:o,type:l}=this.state.result[this.selectedSliceIndex],n=C.withinRange(D(o,t),[0,j(l===T.Time?s:a,b)]);this.updateSelectedSliceTimeProperty(n,"start")}},this.updateSelectedSliceTimeEndByPer=t=>{var e,i;if(this.state.clipStatus===u.Clipping){f.info("\u622A\u53D6\u4E2D\u4E0D\u652F\u6301\u8C03\u6574\u7ED3\u675F\u65F6\u95F4");return}if(this.selectedSliceIndex>-1){const s=this.state.result[this.selectedSliceIndex],a=(i=(e=this.videoPlayer)==null?void 0:e.duration)!=null?i:0;if(s.type===T.Time){f.info("\u65F6\u95F4\u70B9\u4EC5\u652F\u6301\u8C03\u6574\u5F00\u59CB\u65F6\u95F4");return}const{end:o,start:l}=s,n=C.withinRange(D(o,t),[D(l,b),a]);this.updateSelectedSliceTimeProperty(n,"end")}},this.updateSelectedSliceTimeProperty=(t,e)=>{if(this.selectedSliceIndex>-1){const{result:i}=this.state;i[this.selectedSliceIndex][e]=t,this.setState({result:y.cloneDeep(i)}),this.updateSidebar()}},this.keyDownEvents=t=>{if(!V.hotkeyFilter(t))return;const e=t.target;switch(e&&(e==null?void 0:e.tag)==="INPUT"&&(e==null?void 0:e.type)==="radio"&&t.preventDefault(),t.key.toLocaleLowerCase()){case"x":this.toggleClipStatus();break;case"e":this.addTime();break;case"escape":this.cancelClipped();break;case"-":this.updateSelectedSliceTimeStartByPer(-b);break;case"=":this.updateSelectedSliceTimeStartByPer(b);break;case"[":this.updateSelectedSliceTimeEndByPer(-b);break;case"]":this.updateSelectedSliceTimeEndByPer(b);break}},this.videoLoaded=t=>{var e;const i=this.resultJSON,s=i&&!["","{}"].includes(i),a=t?parseFloat(t.toFixed(2)):0,o={loading:!1};((e=I(i))==null?void 0:e.duration)||Object.assign(o,{result:JSON.stringify(K(q({},I(i)),{duration:a}))}),s||Object.assign(o,{result:JSON.stringify({width:0,height:0,rotate:0,valid:!0,duration:a})}),this.setState({loading:!1})},this.setVideoError=(t,e,i)=>{if(t){const{clipStatus:s}=this.state;s===u.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!==u.Clipping)return;const s=t.findIndex(a=>a.id===e);s>-1&&(t.splice(s,1),this.setState({result:t,selectedID:"",clipStatus:u.Stop}),this.updateSidebar())},this.toggleClipStatus=t=>{var e,i,s;if(this.disabled)return;const{clipStatus:a,selectedAttribute:o}=this.state,l=a!==u.Clipping;let n=l?u.Clipping:u.Stop,{result:d,selectedID:p,textValue:S}=this.state;const h=y.cloneDeep(d),m=t||((e=this.videoPlayer)==null?void 0:e.currentTime),E=(i=this.videoPlayer)==null?void 0:i.duration;if(E===void 0||m===void 0)return;const R=F(m,2);if(l){const g=w();p=g,h.push({start:R,end:null,attribute:o,textAttribute:this.defaultTextAttribute,duration:E,id:g,type:T.Period}),S=this.defaultTextAttribute}else{const g=h.findIndex(_=>_.id===p),P=h[g];P&&(m-P.start<x?(h.splice(g,1),f.info(`\u622A\u53D6\u7247\u6BB5\u4E0D\u80FD\u77ED\u4E8E${x}s`),n=u.Stop,p="",S=""):(h[g].end=F(m,2),(s=this.videoPlayer)==null||s.pause(),f.success(`\u5DF2\u622A\u53D6\u7247\u6BB5${d.length}`)))}this.setState({clipStatus:n,result:h,selectedID:p,textValue:S}),this.updateSidebar()},this.addTime=()=>{var t,e,i,s;if(this.disabled)return;const{result:a,selectedAttribute:o,selectedID:l}=this.state,n=w(),d=y.cloneDeep(a),p=((t=this.videoPlayer)==null?void 0:t.currentTime)||0;d.push({start:p,end:p,attribute:o,textAttribute:this.defaultTextAttribute,id:n,type:T.Time,duration:(i=(e=this.videoPlayer)==null?void 0:e.duration)!=null?i:0});const S={result:d,selectedID:n,textValue:this.defaultTextAttribute},h=d.find(m=>m.id===l);this.isClipping&&h?(delete S.selectedID,delete S.textValue,f.success(`\u5DF2\u622A\u53D6\u65F6\u95F4\u70B9${d.length-1}`)):(s=this.videoPlayer)==null||s.pause(),this.setState(S),this.updateSidebar()},this.contextToCancel=t=>{this.state.clipStatus===u.Stop&&(t.preventDefault(),this.setState({selectedID:""}),this.updateSidebar())},this.onTrackResize=(t,e,i)=>{var s,a;const{result:o}=this.state,l=o.find(n=>n.id===t);if(l){const n=l.duration,d=e==="left",p=d?"start":"end",S=d?-n*i:n*i,h=d?[0,Math.max(((s=l.end)!=null?s:0)-x,0)]:[l.start+x,n],m=C.withinRange(S+((a=l==null?void 0:l[p])!=null?a:0),h);l[p]=m,this.throttledUpdateTime(m)}this.setState({result:[...o]}),this.updateSidebar()},this.renderMediaContent=()=>{const{pageForward:t,pageJump:e,pageBackward:i}=this.props,{result:s,currentTime:a,videoError:o,valid:l}=this.state;return v.createElement("div",{className:A.clipContainer},v.createElement(N,{imgIndex:this.props.imgIndex,imgList:this.props.imgList,pageBackward:i,pageForward:t,pageJump:e,valid:l,setVideoRef:n=>{this.videoPlayer=n},showVideoTrack:!o,onTrackResize:this.onTrackResize,drawLayerSlot:this.props.drawLayerSlot,footer:this.props.footer,dataLoaded:this.videoLoaded,toggleClipStatus:this.toggleClipStatus,addTime:this.addTime}),v.createElement(U,{result:s,currentTime:a,attributeList:this.props.config.attributeList,extraStyle:{top:this.props.drawLayerSlot?40:0}}),this.isClipping&&v.createElement("i",{className:A.clipping,style:{backgroundImage:J}}))},this.onSelectedTimeSlice=t=>{var e;this.isClipping||(this.setState({selectedID:t.id,selectedAttribute:t.attribute,textValue:t.textAttribute}),this.updateSidebar(),(e=this.videoPlayer)==null||e.pause(),this.videoPlayer.currentTime=t.start)},this.removeTimeSlice=t=>{const{result:e}=this.state,i=this.state.selectedID===t.id?"":this.state.selectedID,s=e.findIndex(a=>a.id===t.id);s>-1&&(e.splice(s,1),this.setState({result:[...e],selectedID:i}),this.updateSidebar())},this.setResult=(t=!0,e=this.props)=>{try{const{imgIndex:i,imgList:s}=e;if(!s[i])return;const o=I(s[i].result)[`step_${this.stepInfo().step}`],l=(o==null?void 0:o.result)||[],n=B(s[i].result||"[]");this.setState({result:l,loading:t,selectedID:"",textValue:"",selectedAttribute:"",clipStatus:u.Stop,valid:n},()=>{this.updateSidebar(),n||f.info("\u65E0\u6548\u89C6\u9891\uFF0C\u8BF7\u8DF3\u8FC7")})}catch(i){console.error("\u6570\u636E\u89E3\u6790\u5931\u8D25"),this.setState({result:[],loading:!1,selectedID:"",textValue:"",selectedAttribute:"",valid:!0},()=>{this.updateSidebar()})}},this.setDefaultAttribute=t=>{const{result:e,selectedID:i}=this.state,s=e.find(a=>a.id===i);s&&i&&(s.attribute=t),this.setState({selectedAttribute:t,result:[...e]}),this.updateSidebar()},this.setTextAttribute=t=>{const{result:e,selectedID:i}=this.state;if(this.setState({textValue:t}),i){const s=e.find(a=>a.id===i);s&&(s.textAttribute=t,this.setState({result:[...e]}),this.updateSidebar())}},this.state={result:[],selectedAttribute:"",textValue:"",clipStatus:u.Stop,selectedID:"",loading:!1,videoError:!1,remainingTime:0,currentTime:0,configLoading:!1,valid:!0}}get videoUrl(){var r;const{imgIndex:t,imgList:e}=this.props;return((r=e[t])==null?void 0:r.url)||""}get isClipping(){return this.state.clipStatus===u.Clipping}get resultJSON(){const{imgIndex:r,imgList:t}=this.props;return t.length===0||!t[r]?"[]":t[r].result}get disabled(){return!this.state.valid||this.state.videoError}get loading(){return this.state.loading||this.state.configLoading}get defaultTextAttribute(){return k.getTextAttribute(this.state.result,this.props.config.textCheckType)}get defaultAttribute(){return this.state.selectedAttribute}get selectedSliceIndex(){return this.state.result.findIndex(r=>r.id===this.state.selectedID)}get exportContext(){return{selectedID:this.state.selectedID,result:this.state.result,clipStatus:this.state.clipStatus,videoPlayer:this.videoPlayer,attributeList:this.props.config.attributeList,onSelectedTimeSlice:this.onSelectedTimeSlice,removeTimeSlice:this.removeTimeSlice,updateSelectedSliceTimeProperty:this.updateSelectedSliceTimeProperty}}get valid(){return this.state.valid}componentDidMount(){this.setState({loading:!1}),this.setResult(!1),this.props.onMounted(this),window.addEventListener("keydown",this.keyDownEvents)}componentWillUnmount(){this.props.onUnmounted(),window.removeEventListener("keydown",this.keyDownEvents)}shouldComponentUpdate(r,t){const e=r.imgIndex-this.props.imgIndex,i=r.step-this.props.step;return(e!==0||i!==0)&&(this.setResult(!0,r),i!==0&&this.setState({loading:!1})),!0}singleOn(r,t){this.fns.set(r,[t])}on(r,t){this.singleOn(r,t)}unbindAll(r){this.fns.delete(r)}render(){const{selectedID:r,result:t,clipStatus:e,selectedAttribute:i}=this.state;return v.createElement(M,{value:{videoPlayer:this.videoPlayer,result:t,selectedID:r,attributeList:this.props.config.attributeList,clipStatus:e,selectedAttribute:i,contextToCancel:this.contextToCancel}},this.renderMediaContent())}}export{Q as default};
+import{MathUtils as I,CommonToolUtils as V,uuid as w,AttributeUtils as k}from"@labelbee/lb-annotation";import{jsonParser as T}from"../../../utils/index.js";import{precisionAdd as D,precisionMinus as j,isImageValue as B}from"../../../utils/audio.js";import{message as f}from"antd";import y from"lodash";import v from"react";import A from"./index.module.scss.js";import{VideoClipToolContextProvider as M}from"./VideoClipToolContext.js";import{EClipStatus as d,ETimeSliceType as x,PER_SLICE_CHANGE as b,SLICE_MIN_TIME as C}from"./constant.js";import{VideoPlayer as N}from"../../videoPlayer/index.js";import U from"./components/videoTimeSlicesOverVideo/index.js";import J from"../../../assets/annotation/video/icon_videoCutting.svg.js";import{decimalReserved as F}from"../../videoPlayer/utils.js";var $=Object.defineProperty,z=Object.defineProperties,G=Object.getOwnPropertyDescriptors,L=Object.getOwnPropertySymbols,H=Object.prototype.hasOwnProperty,W=Object.prototype.propertyIsEnumerable,O=(c,s,t)=>s in c?$(c,s,{enumerable:!0,configurable:!0,writable:!0,value:t}):c[s]=t,q=(c,s)=>{for(var t in s||(s={}))H.call(s,t)&&O(c,t,s[t]);if(L)for(var t of L(s))W.call(s,t)&&O(c,t,s[t]);return c},K=(c,s)=>z(c,G(s));class Q extends v.Component{constructor(s){super(s);this.fns=new Map,this.throttledUpdateTime=y.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.updateSelectedSliceTimeStartByPer=t=>{var e,i;if(this.state.clipStatus===d.Clipping){f.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:a,start:o,type:l}=this.state.result[this.selectedSliceIndex],n=I.withinRange(D(o,t),[0,j(l===x.Time?r:a,b)]);this.updateSelectedSliceTimeProperty(n,"start")}},this.updateSelectedSliceTimeEndByPer=t=>{var e,i;if(this.state.clipStatus===d.Clipping){f.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],a=(i=(e=this.videoPlayer)==null?void 0:e.duration)!=null?i:0;if(r.type===x.Time){f.info("\u65F6\u95F4\u70B9\u4EC5\u652F\u6301\u8C03\u6574\u5F00\u59CB\u65F6\u95F4");return}const{end:o,start:l}=r,n=I.withinRange(D(o,t),[D(l,b),a]);this.updateSelectedSliceTimeProperty(n,"end")}},this.updateSelectedSliceTimeProperty=(t,e)=>{if(this.selectedSliceIndex>-1){const{result:i}=this.state;i[this.selectedSliceIndex][e]=t,this.setState({result:y.cloneDeep(i)}),this.updateSidebar()}},this.keyDownEvents=t=>{if(!V.hotkeyFilter(t))return;const e=t.target;switch(e&&(e==null?void 0:e.tag)==="INPUT"&&(e==null?void 0:e.type)==="radio"&&t.preventDefault(),t.key.toLocaleLowerCase()){case"x":this.toggleClipStatus();break;case"e":this.addTime();break;case"escape":this.cancelClipped();break;case"-":this.updateSelectedSliceTimeStartByPer(-b);break;case"=":this.updateSelectedSliceTimeStartByPer(b);break;case"[":this.updateSelectedSliceTimeEndByPer(-b);break;case"]":this.updateSelectedSliceTimeEndByPer(b);break}},this.videoLoaded=t=>{var e;const i=this.resultJSON,r=i&&!["","{}"].includes(i),a=t?parseFloat(t.toFixed(2)):0,o={loading:!1};((e=T(i))==null?void 0:e.duration)||Object.assign(o,{result:JSON.stringify(K(q({},T(i)),{duration:a}))}),r||Object.assign(o,{result:JSON.stringify({width:0,height:0,rotate:0,valid:!0,duration:a})}),this.setState({loading:!1})},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(a=>a.id===e);r>-1&&(t.splice(r,1),this.setState({result:t,selectedID:"",clipStatus:d.Stop}),this.updateSidebar())},this.toggleClipStatus=t=>{var e,i,r;if(this.disabled)return;const{clipStatus:a,selectedAttribute:o}=this.state,l=a!==d.Clipping;let n=l?d.Clipping:d.Stop,{result:u,selectedID:p,textValue:S}=this.state;const h=y.cloneDeep(u),m=t||((e=this.videoPlayer)==null?void 0:e.currentTime),_=(i=this.videoPlayer)==null?void 0:i.duration;if(_===void 0||m===void 0)return;const R=F(m,2);if(l){const g=w();p=g,h.push({start:R,end:null,attribute:o,textAttribute:this.defaultTextAttribute,duration:_,id:g,type:x.Period}),S=this.defaultTextAttribute}else{const g=h.findIndex(P=>P.id===p),E=h[g];E&&(m-E.start<C?(h.splice(g,1),f.info(`\u622A\u53D6\u7247\u6BB5\u4E0D\u80FD\u77ED\u4E8E${C}s`),n=d.Stop,p="",S=""):(h[g].end=F(m,2),(r=this.videoPlayer)==null||r.pause(),f.success(`\u5DF2\u622A\u53D6\u7247\u6BB5${u.length}`)))}this.setState({clipStatus:n,result:h,selectedID:p,textValue:S}),this.updateSidebar()},this.addTime=()=>{var t,e,i,r;if(this.disabled)return;const{result:a,selectedAttribute:o,selectedID:l}=this.state,n=w(),u=y.cloneDeep(a),p=((t=this.videoPlayer)==null?void 0:t.currentTime)||0;u.push({start:p,end:p,attribute:o,textAttribute:this.defaultTextAttribute,id:n,type:x.Time,duration:(i=(e=this.videoPlayer)==null?void 0:e.duration)!=null?i:0});const S={result:u,selectedID:n,textValue:this.defaultTextAttribute},h=u.find(m=>m.id===l);this.isClipping&&h?(delete S.selectedID,delete S.textValue,f.success(`\u5DF2\u622A\u53D6\u65F6\u95F4\u70B9${u.length-1}`)):(r=this.videoPlayer)==null||r.pause(),this.setState(S),this.updateSidebar()},this.updateCurrentTime=t=>{this.setState({currentTime:t})},this.contextToCancel=t=>{this.state.clipStatus===d.Stop&&(t.preventDefault(),this.setState({selectedID:""}),this.updateSidebar())},this.onTrackResize=(t,e,i)=>{var r,a;const{result:o}=this.state,l=o.find(n=>n.id===t);if(l){const n=l.duration,u=e==="left",p=u?"start":"end",S=u?-n*i:n*i,h=u?[0,Math.max(((r=l.end)!=null?r:0)-C,0)]:[l.start+C,n],m=I.withinRange(S+((a=l==null?void 0:l[p])!=null?a:0),h);l[p]=m,this.throttledUpdateTime(m)}this.setState({result:[...o]}),this.updateSidebar()},this.renderMediaContent=()=>{var t;const{pageForward:e,pageJump:i,pageBackward:r}=this.props,{result:a,videoError:o,valid:l,currentTime:n}=this.state;return v.createElement("div",{className:A.clipContainer},v.createElement(N,{imgIndex:this.props.imgIndex,imgList:this.props.imgList,pageBackward:r,pageForward:e,pageJump:i,valid:l,setVideoRef:u=>{this.videoPlayer=u},showVideoTrack:!o,onTrackResize:this.onTrackResize,drawLayerSlot:this.props.drawLayerSlot,footer:this.props.footer,dataLoaded:this.videoLoaded,toggleClipStatus:this.toggleClipStatus,addTime:this.addTime,updateCurrentTime:this.updateCurrentTime}),v.createElement(U,{key:(t=this.videoPlayer)==null?void 0:t.currentTime,result:a,currentTime:n,attributeList:this.props.config.attributeList,extraStyle:{top:this.props.drawLayerSlot?40:0}}),this.isClipping&&v.createElement("i",{className:A.clipping,style:{backgroundImage:J}}))},this.onSelectedTimeSlice=t=>{var e;this.isClipping||(this.setState({selectedID:t.id,selectedAttribute:t.attribute,textValue:t.textAttribute}),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(a=>a.id===t.id);r>-1&&(e.splice(r,1),this.setState({result:[...e],selectedID:i}),this.updateSidebar())},this.setResult=(t=!0,e=this.props)=>{try{const{imgIndex:i,imgList:r}=e;if(!r[i])return;const o=T(r[i].result)[`step_${this.stepInfo().step}`],l=(o==null?void 0:o.result)||[],n=B(r[i].result||"[]");this.setState({result:l,loading:t,selectedID:"",textValue:"",selectedAttribute:"",clipStatus:d.Stop,valid:n},()=>{this.updateSidebar(),n||f.info("\u65E0\u6548\u89C6\u9891\uFF0C\u8BF7\u8DF3\u8FC7")})}catch(i){console.error("\u6570\u636E\u89E3\u6790\u5931\u8D25"),this.setState({result:[],loading:!1,selectedID:"",textValue:"",selectedAttribute:"",valid:!0},()=>{this.updateSidebar()})}},this.setDefaultAttribute=t=>{const{result:e,selectedID:i}=this.state,r=e.find(a=>a.id===i);r&&i&&(r.attribute=t),this.setState({selectedAttribute:t,result:[...e]}),this.updateSidebar()},this.textChange=t=>{const{result:e,selectedID:i}=this.state;if(this.setState({textValue:t}),i){const r=e.find(a=>a.id===i);r&&(r.textAttribute=t,this.setState({result:[...e]}),this.updateSidebar())}},this.state={result:[],selectedAttribute:"",textValue:"",clipStatus:d.Stop,selectedID:"",loading:!1,videoError:!1,remainingTime:0,currentTime:0,configLoading:!1,valid:!0}}get videoUrl(){var 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 k.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}}get valid(){return this.state.valid}get config(){var s;return T((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 v.createElement(M,{value:{videoPlayer:this.videoPlayer,result:t,selectedID:s,attributeList:this.props.config.attributeList,clipStatus:e,selectedAttribute:i,contextToCancel:this.contextToCancel}},this.renderMediaContent())}}export{Q 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 l}from"../../utils/dom.js";import{cKeyCode as M}from"@labelbee/lb-annotation";import{decimalReserved as d}from"./utils.js";import z from"../fileException/index.js";const s=M.default,c=o.createContext({isPlay:!1,playPause:()=>{},updateNextPlaybackRate:()=>{},playbackRate:1,currentTime:0,duration:0,buffered:0,setCurrentTime:()=>{},imgList:[],imgIndex:-1,pageBackward:()=>{},pageJump:f=>{},pageForward:()=>{},addTime:()=>{},toggleClipStatus:()=>{}}),U=50,p=.1,n=[.5,1,1.5,2,4,6,8,16];class v 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=n.findIndex(r=>r===this.state.playbackRate);let i=e?Math.min(t+1,n.length-1):Math.max(t-1,0);this.changePlaybackPate(n[i])},this.fastForward=()=>{this.videoElm&&this.setCurrentTime(this.videoElm.currentTime+p)},this.rewind=()=>{this.videoElm&&this.setCurrentTime(this.videoElm.currentTime-p)},this.keydown=e=>{e.keyCode===s.Space&&(e.preventDefault(),this.playPause()),e.keyCode===s.Up&&(e.preventDefault(),this.updateNextPlaybackRate()),e.keyCode===s.Down&&(e.preventDefault(),this.updateNextPlaybackRate(!1)),e.keyCode===s.Left&&(e.preventDefault(),this.rewind()),e.keyCode===s.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:d((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;if(this.videoElm)try{if(((e=this.videoElm)==null?void 0:e.buffered.length)>0){const r=(t=this.videoElm)==null?void 0:t.buffered.end(0);this.setState({currentTime:d((i=this.videoElm)==null?void 0:i.currentTime,1),buffered:r})}}catch(r){console.error(r)}},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=d((e=this.videoElm)==null?void 0:e.duration,1);(i=(t=this.props).dataLoaded)==null||i.call(t,r),this.setState({duration:r})}},this.setCurrentTime=e=>{this.videoElm&&(this.videoElm.currentTime=e,this.setState({currentTime:e}))},this.reload=()=>{var e;(e=this.videoElm)==null||e.load()},this.onError=()=>{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:E}=this.state,{imgList:y,imgIndex:k,pageBackward:g,pageJump:T,pageForward:R,valid:P,footer:b,drawLayerSlot:h}=this.props,C=isNaN(i)?0:Math.max(d(i,1)-t,0),{playPause:m,updateNextPlaybackRate:w,onPause:x,onPlay:S,onTimeUpdate:_,resetVideoData:V,setDuration:D,setCurrentTime:I,onError:N,videoRef:L,videoSrc:F}=this;return o.createElement(c.Provider,{value:{videoRef:this.videoRef,addTime:this.props.addTime,toggleClipStatus:this.props.toggleClipStatus,isPlay:a,playPause:m,updateNextPlaybackRate:w,playbackRate:e,currentTime:t,duration:i,buffered:r,setCurrentTime:I,imgIndex:k,imgList:y,pageBackward:g,pageJump:T,pageForward:R}},o.createElement(o.Fragment,null,h==null?void 0:h({currentTime:t,remainingTime:C,zoom:1,currentPos:{x:0,y:0}}),o.createElement("div",{className:l("video-wrapper")},o.createElement("div",{className:l("video-container")},o.createElement("video",{ref:L,className:l(this.props.showVideoTrack?"video-track":"video"),src:F,onPause:x,onPlay:S,onTimeUpdate:_,onLoadedMetadata:V,onError:N,onDurationChange:D,width:"100%",height:"100%",onClick:m}),this.props.showVideoTrack&&o.createElement(j,{currentTime:t,onTrackResize:this.props.onTrackResize,onTrackResizeStart:()=>{var u;(u=this.videoElm)==null||u.pause()},readonly:!1}),o.createElement(z,{fileType:"video",errorProps:{reloadImage:this.reload,backgroundColor:"#e2e2e2",ignoreOffsetY:!0,isError:E},invalidProps:{isValid:P}})),o.createElement(A,{footer:b}))))}}export{v as VideoPlayer,c as VideoPlayerCtx,v as default};
+import o from"react";import A from"./components/controller/index.js";import j from"../videoAnnotate/videoClipTool/components/videoTrack/index.js";import{getClassName as l}from"../../utils/dom.js";import{cKeyCode as M}from"@labelbee/lb-annotation";import{decimalReserved as d}from"./utils.js";import z from"../fileException/index.js";const s=M.default,c=o.createContext({isPlay:!1,playPause:()=>{},updateNextPlaybackRate:()=>{},playbackRate:1,currentTime:0,duration:0,buffered:0,setCurrentTime:()=>{},imgList:[],imgIndex:-1,pageBackward:()=>{},pageJump:f=>{},pageForward:()=>{},addTime:()=>{},toggleClipStatus:()=>{}}),U=50,p=.1,n=[.5,1,1.5,2,4,6,8,16];class v 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=n.findIndex(r=>r===this.state.playbackRate);let i=e?Math.min(t+1,n.length-1):Math.max(t-1,0);this.changePlaybackPate(n[i])},this.fastForward=()=>{this.videoElm&&this.setCurrentTime(this.videoElm.currentTime+p)},this.rewind=()=>{this.videoElm&&this.setCurrentTime(this.videoElm.currentTime-p)},this.keydown=e=>{e.keyCode===s.Space&&(e.preventDefault(),this.playPause()),e.keyCode===s.Up&&(e.preventDefault(),this.updateNextPlaybackRate()),e.keyCode===s.Down&&(e.preventDefault(),this.updateNextPlaybackRate(!1)),e.keyCode===s.Left&&(e.preventDefault(),this.rewind()),e.keyCode===s.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:d((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;if(this.videoElm)try{if(((e=this.videoElm)==null?void 0:e.buffered.length)>0){const r=(t=this.videoElm)==null?void 0:t.buffered.end(0);this.setState({currentTime:d((i=this.videoElm)==null?void 0:i.currentTime,1),buffered:r})}}catch(r){console.error(r)}},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=d((e=this.videoElm)==null?void 0:e.duration,1);(i=(t=this.props).dataLoaded)==null||i.call(t,r),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=()=>{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:E}=this.state,{imgList:y,imgIndex:k,pageBackward:g,pageJump:T,pageForward:R,valid:P,footer:b,drawLayerSlot:h}=this.props,C=isNaN(i)?0:Math.max(d(i,1)-t,0),{playPause:m,updateNextPlaybackRate:w,onPause:x,onPlay:S,onTimeUpdate:_,resetVideoData:V,setDuration:D,setCurrentTime:I,onError:N,videoRef:L,videoSrc:F}=this;return o.createElement(c.Provider,{value:{videoRef:this.videoRef,addTime:this.props.addTime,toggleClipStatus:this.props.toggleClipStatus,isPlay:a,playPause:m,updateNextPlaybackRate:w,playbackRate:e,currentTime:t,duration:i,buffered:r,setCurrentTime:I,imgIndex:k,imgList:y,pageBackward:g,pageJump:T,pageForward:R}},o.createElement(o.Fragment,null,h==null?void 0:h({currentTime:t,remainingTime:C,zoom:1,currentPos:{x:0,y:0}}),o.createElement("div",{className:l("video-wrapper")},o.createElement("div",{className:l("video-container")},o.createElement("video",{ref:L,className:l(this.props.showVideoTrack?"video-track":"video"),src:F,onPause:x,onPlay:S,onTimeUpdate:_,onLoadedMetadata:V,onError:N,onDurationChange:D,width:"100%",height:"100%",onClick:m}),this.props.showVideoTrack&&o.createElement(j,{currentTime:t,onTrackResize:this.props.onTrackResize,onTrackResizeStart:()=>{var u;(u=this.videoElm)==null||u.pause()},readonly:!1}),o.createElement(z,{fileType:"video",errorProps:{reloadImage:this.reload,backgroundColor:"#e2e2e2",ignoreOffsetY:!0,isError:E},invalidProps:{isValid:P}})),o.createElement(A,{footer:b}))))}}export{v as VideoPlayer,c as VideoPlayerCtx,v as default};

package/es/index.css

@@ -337,26 +337,25 @@
   position: absolute;
   top: 0;
   right: 0;
-  max-height: calc(100% - 80px - 90px - 24px);
+  max-width: 416px;
+  max-height: 80%;
   padding-right: 4px;
   overflow: auto;
   z-index: 22;
 }
 
 .index-module_timeSliceWrapper__kebC3 {
-  height: 80px;
+  min-height: 80px;
   margin-bottom: 8px;
   transition: opacity 0.4s ease-in-out;
-  opacity: 0.3;
-}
-.index-module_timeSliceWrapper__kebC3.index-module_active__cIGVq {
-  opacity: 1;
+  opacity: 0.9;
 }
 .index-module_timeSliceWrapper__kebC3 .index-module_timeSliceItemText__FJFwH,
 .index-module_timeSliceWrapper__kebC3 .index-module_timeSliceItemAttribute__--3E1 {
-  height: 40px;
+  min-height: 40px;
   font-size: 16px;
   color: white;
+  word-break: break-all;
 }
 .index-module_timeSliceWrapper__kebC3 .index-module_timeSliceItemText__FJFwH {
   background-color: #CCC;

package/package.json

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