@labelbee/lb-components 1.24.0-alpha.6 → 1.24.0-alpha.61

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

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

package/dist/components/videoPlayer/components/SpeedController/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var icons=require("@ant-design/icons"),React=require("react"),index_module=require("./index.module.scss.js"),lbAnnotation=require("@labelbee/lb-annotation"),reactI18next=require("react-i18next");function _interopDefaultLegacy(e){return e&&typeof e=="object"&&"default"in e?e:{default:e}}var React__default=_interopDefaultLegacy(React);const EKeyCode=lbAnnotation.cKeyCode.default,VIDEO_PLAYBACK_RATE_SPEED=[.5,1,1.5,2,4,6,8,16],AUDIO_PLAYBACK_RATE_SPEED=[.5,.75,1,1.25,1.5,1.75,2];exports.EPlayerType=void 0,function(e){e[e.Video=0]="Video",e[e.Audio=1]="Audio"}(exports.EPlayerType||(exports.EPlayerType={}));var ESpeedChange;(function(e){e[e.Increase=0]="Increase",e[e.Reduce=1]="Reduce"})(ESpeedChange||(ESpeedChange={}));const PLAYER_TYPE_RATE_SPEED={[0]:VIDEO_PLAYBACK_RATE_SPEED,[1]:AUDIO_PLAYBACK_RATE_SPEED},SpeedController=e=>{const{onChange:l,playerType:i}=e,{t:d}=reactI18next.useTranslation(),n=PLAYER_TYPE_RATE_SPEED[i],u=n.slice(-1)[0],E=n[0],[o,_]=React.useState(1),r=t=>{const a=t===0?1:-1;if(a===1&&o===u||a===-1&&o===E)return;const A=n.findIndex(f=>f===o)+a,c=n[A];_(c),l(c)},s=t=>{!lbAnnotation.CommonToolUtils.hotkeyFilter(t)||(t.keyCode===EKeyCode.Up&&r(0),t.keyCode===EKeyCode.Down&&r(1))};return React.useEffect(()=>(window.addEventListener("keydown",s),()=>window.removeEventListener("keydown",s))),React__default.default.createElement("div",{className:index_module.speedControllerWrap},React__default.default.createElement("span",{style:{display:"flex",alignItems:"center"}},React__default.default.createElement("span",{style:{fontSize:12}},d("Speed")),o,"x"),React__default.default.createElement("span",{className:index_module.speedController},React__default.default.createElement(icons.CaretUpOutlined,{onClick:()=>r(0)}),React__default.default.createElement(icons.CaretDownOutlined,{onClick:()=>r(1)})))};exports.AUDIO_PLAYBACK_RATE_SPEED=AUDIO_PLAYBACK_RATE_SPEED,exports.PLAYER_TYPE_RATE_SPEED=PLAYER_TYPE_RATE_SPEED,exports.VIDEO_PLAYBACK_RATE_SPEED=VIDEO_PLAYBACK_RATE_SPEED,exports.default=SpeedController;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var icons=require("@ant-design/icons"),React=require("react"),index_module=require("./index.module.scss.js"),lbAnnotation=require("@labelbee/lb-annotation"),reactI18next=require("react-i18next");function _interopDefaultLegacy(e){return e&&typeof e=="object"&&"default"in e?e:{default:e}}var React__default=_interopDefaultLegacy(React);const EKeyCode=lbAnnotation.cKeyCode.default,VIDEO_PLAYBACK_RATE_SPEED=[.1,.2,.3,.4,.5,1,1.5,2,4,6,8,16],AUDIO_PLAYBACK_RATE_SPEED=[.5,.75,1,1.25,1.5,1.75,2];exports.EPlayerType=void 0,function(e){e[e.Video=0]="Video",e[e.Audio=1]="Audio"}(exports.EPlayerType||(exports.EPlayerType={}));var ESpeedChange;(function(e){e[e.Increase=0]="Increase",e[e.Reduce=1]="Reduce"})(ESpeedChange||(ESpeedChange={}));const PLAYER_TYPE_RATE_SPEED={[0]:VIDEO_PLAYBACK_RATE_SPEED,[1]:AUDIO_PLAYBACK_RATE_SPEED},SpeedController=e=>{const{onChange:l,playerType:i}=e,{t:d}=reactI18next.useTranslation(),n=PLAYER_TYPE_RATE_SPEED[i],u=n.slice(-1)[0],E=n[0],[o,_]=React.useState(1),r=t=>{const a=t===0?1:-1;if(a===1&&o===u||a===-1&&o===E)return;const A=n.findIndex(f=>f===o)+a,c=n[A];_(c),l(c)},s=t=>{!lbAnnotation.CommonToolUtils.hotkeyFilter(t)||(t.keyCode===EKeyCode.Up&&r(0),t.keyCode===EKeyCode.Down&&r(1))};return React.useEffect(()=>(window.addEventListener("keydown",s),()=>window.removeEventListener("keydown",s))),React__default.default.createElement("div",{className:index_module.speedControllerWrap},React__default.default.createElement("span",{style:{display:"flex",alignItems:"center"}},React__default.default.createElement("span",{style:{fontSize:12}},d("Speed")),o,"x"),React__default.default.createElement("span",{className:index_module.speedController},React__default.default.createElement(icons.CaretUpOutlined,{onClick:()=>r(0)}),React__default.default.createElement(icons.CaretDownOutlined,{onClick:()=>r(1)})))};exports.AUDIO_PLAYBACK_RATE_SPEED=AUDIO_PLAYBACK_RATE_SPEED,exports.PLAYER_TYPE_RATE_SPEED=PLAYER_TYPE_RATE_SPEED,exports.VIDEO_PLAYBACK_RATE_SPEED=VIDEO_PLAYBACK_RATE_SPEED,exports.default=SpeedController;

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),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;
+"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;

package/dist/constant/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.EStepType=void 0,function(o){o[o.Check=0]="Check",o[o.ANNOTATION=1]="ANNOTATION",o[o.QUALITY_INSPECTION=2]="QUALITY_INSPECTION",o[o.PRE_ANNOTATION=3]="PRE_ANNOTATION",o[o.MANUAL_CORRECTION=4]="MANUAL_CORRECTION"}(exports.EStepType||(exports.EStepType={})),exports.ESubmitType=void 0,function(o){o[o.Backward=1]="Backward",o[o.Forward=2]="Forward",o[o.Jump=3]="Jump",o[o.Quit=4]="Quit",o[o.Export=5]="Export",o[o.StepChanged=6]="StepChanged",o[o.Save=7]="Save",o[o.BatchUpdateTrackID=8]="BatchUpdateTrackID",o[o.BatchUpdateImgList=9]="BatchUpdateImgList",o[o.SyncImgList=10001]="SyncImgList",o[o.SyncCurrentPageData=10002]="SyncCurrentPageData"}(exports.ESubmitType||(exports.ESubmitType={}));const prefix="bee",componentCls=`${prefix}-component`;exports.EDataFormatType=void 0,function(o){o.Default="default",o.Markdown="markdown"}(exports.EDataFormatType||(exports.EDataFormatType={})),exports.ELLMDataType=void 0,function(o){o.Picture="picture",o.Text="text",o.None="none"}(exports.ELLMDataType||(exports.ELLMDataType={})),exports.componentCls=componentCls,exports.prefix=prefix;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.EStepType=void 0,function(o){o[o.Check=0]="Check",o[o.ANNOTATION=1]="ANNOTATION",o[o.QUALITY_INSPECTION=2]="QUALITY_INSPECTION",o[o.PRE_ANNOTATION=3]="PRE_ANNOTATION",o[o.MANUAL_CORRECTION=4]="MANUAL_CORRECTION"}(exports.EStepType||(exports.EStepType={})),exports.ESubmitType=void 0,function(o){o[o.Backward=1]="Backward",o[o.Forward=2]="Forward",o[o.Jump=3]="Jump",o[o.Quit=4]="Quit",o[o.Export=5]="Export",o[o.StepChanged=6]="StepChanged",o[o.Save=7]="Save",o[o.BatchUpdateTrackID=8]="BatchUpdateTrackID",o[o.BatchUpdateImgList=9]="BatchUpdateImgList",o[o.SyncImgList=10001]="SyncImgList",o[o.SyncCurrentPageData=10002]="SyncCurrentPageData"}(exports.ESubmitType||(exports.ESubmitType={}));const prefix="bee",componentCls=`${prefix}-component`;exports.EDataFormatType=void 0,function(o){o.Default="default",o.Markdown="markdown",o.Latex="latex"}(exports.EDataFormatType||(exports.EDataFormatType={})),exports.ELLMDataType=void 0,function(o){o.Picture="picture",o.Text="text",o.None="none",o.Audio="audio"}(exports.ELLMDataType||(exports.ELLMDataType={})),exports.componentCls=componentCls,exports.prefix=prefix;

package/dist/index.css

@@ -81,73 +81,62 @@
   margin-right: 8px;
 }
 .dynamic-resizer-content {
+  display: flex;
   width: 100%;
   height: 100%;
-  flex-shrink: 0;
-  flex-grow: 0;
   position: relative;
+  overflow: hidden;
 }
-
-.divider {
-  height: 10px;
-  width: 100%;
-  position: absolute;
-  top: -5px;
-  left: 0;
-  cursor: row-resize;
-  user-select: none;
-  display: flex;
-  align-items: center;
+.dynamic-resizer-content.horizontal {
+  flex-direction: row;
+}
+.dynamic-resizer-content.vertical {
   flex-direction: column;
-  justify-content: center;
 }
-.divider:hover .divider-top, .divider:hover .divider-bottom, .divider:hover .divider-all {
-  display: block;
+.dynamic-resizer-content .resizable-container {
+  display: flex;
 }
-
-.divider-top,
-.divider-bottom,
-.divider-all {
+.dynamic-resizer-content .resizable-child {
+  width: 100%;
+  height: 100%;
+}
+.dynamic-resizer-content .resizable-child-two {
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+  position: relative;
+}
+.dynamic-resizer-content .divider-all {
   width: 20px;
   height: 20px;
-  cursor: pointer;
-  display: none;
-  user-select: none;
-}
-
-.divider-all {
   position: absolute;
-  top: -50%;
+  top: 0;
   left: 50%;
-  transform: translate(-50%);
+  transform: translate(-50%, -50%);
+  z-index: 1;
 }
-
-.divider-icon {
-  width: 100%;
-  height: 20px;
-  position: relative;
+.dynamic-resizer-content .split-divider {
+  background-color: #ccc;
+  width: 5px;
+  height: 100%;
 }
-.divider-icon::after {
+.dynamic-resizer-content .dynamic-right-handle {
+  cursor: ew-resize !important;
+  z-index: 100;
+}
+.dynamic-resizer-content .dynamic-bottom-handle {
+  cursor: ns-resize !important;
+  z-index: 100;
+}
+.dynamic-resizer-content .dynamic-bottom-handle::after {
   content: "";
-  display: block;
   position: absolute;
-  top: 50%;
   left: 0;
   right: 0;
-  width: 90%;
+  top: 50%;
+  transform: translateY(-50%);
   height: 1px;
   background: #ccc;
-  margin: 0 auto;
-}
-
-.dynamic-resizer-top {
-  width: 100%;
-  overflow-y: auto;
-}
-
-.dynamic-resizer-bottom {
-  width: 100%;
-  overflow-y: auto;
 }
 
 .hide-scrollbar * {
@@ -262,7 +251,6 @@
 }
 .index-module_tagList__cvWor .index-module_right__RHSL5 .index-module_tagItem__hicyz {
   display: flex;
-  max-width: 60px;
 }
 .index-module_tagList__cvWor .index-module_right__RHSL5 .index-module_disabled__lpoBn {
   animation: none;
@@ -478,6 +466,35 @@
 .index-module_timeSliceListContent__gvFHy .index-module_timeSliceItem__Xa-cQ:hover .index-module_timeSliceItemDeleteIcon__nlQ6B {
   opacity: 1;
 }
+.custom-attribute-input-wrapper {
+  padding: 12px;
+}
+.custom-attribute-input-wrapper.display {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.custom-attribute-input-wrapper.display .attribute-text {
+  flex: 1;
+  font-size: 14px;
+  color: rgba(0, 0, 0, 0.85);
+  word-break: break-all;
+}
+.custom-attribute-input-wrapper.display .ant-btn-link {
+  padding: 0 8px;
+  height: auto;
+}
+.custom-attribute-input-wrapper.editing .ant-input {
+  font-size: 14px;
+  margin-bottom: 8px;
+}
+.custom-attribute-input-wrapper.editing .button-group {
+  display: flex;
+  justify-content: flex-end;
+}
+.custom-attribute-input-wrapper.editing .button-group .ant-btn {
+  font-size: 12px;
+}
 .index-module_clipContainer__L8DlL {
   width: 100%;
   height: 100%;
@@ -533,14 +550,28 @@
   word-break: break-all;
 }
 .index-module_timeSliceWrapper__kebC3 .index-module_timeSliceItemText__FJFwH {
-  background-color: #CCC;
+  width: 100%;
   padding: 8px 24px;
+  background-color: #ccc;
 }
-.index-module_timeSliceWrapper__kebC3 .index-module_timeSliceItemAttribute__--3E1 span {
-  display: inline-block;
-  height: 40px;
-  line-height: 40px;
-  padding: 0 24px;
+.index-module_timeSliceWrapper__kebC3 .index-module_timeSliceItemAttribute__--3E1 {
+  width: 100%;
+  padding: 8px 24px;
+  text-align: left;
+}
+.index-module_timeSliceWrapper__kebC3 .index-module_timeSliceItemSubAttribute__MtsgS {
+  font-size: 14px;
+  color: #fff;
+  padding: 8px 24px;
+  word-break: break-all;
+  line-height: 1.5;
+  width: 100%;
+}
+.index-module_timeSliceWrapper__kebC3 .index-module_timeSliceItemSubAttribute__MtsgS div {
+  margin-bottom: 4px;
+}
+.index-module_timeSliceWrapper__kebC3 .index-module_timeSliceItemSubAttribute__MtsgS div:last-child {
+  margin-bottom: 0;
 }
 .index-module_speedControllerWrap__aFz7r {
   display: flex;
@@ -1547,6 +1578,14 @@
 .bee-sidebar__toolOption + .bee-sidebar__toolOption {
   margin-left: 16px;
 }
+.bee-sidebar__multiBox {
+  display: flex;
+  align-items: center;
+  margin: 0 5px;
+}
+.bee-sidebar__dropdown .ant-dropdown-menu-item:not(.ant-dropdown-menu-item-selected) {
+  color: #999999;
+}
 .bee-sidebar__singleTool {
   max-width: 20px;
   max-height: 20px;
@@ -2043,7 +2082,11 @@
   font-size: 12px;
 }
 
+.tagOperationMenu {
+  height: 100%;
+}
 .tagOperationMenu .main {
+  height: 100%;
   padding: 8px 8px;
   overflow: auto;
   -moz-user-select: none;
@@ -2591,6 +2634,7 @@
   padding: 4px 8px;
   background-color: #fff;
   color: #000000;
+  cursor: pointer;
 }
 
 .bee-point-cloud-wrapper {
@@ -2616,17 +2660,22 @@
   line-height: 40px;
   display: flex;
   justify-content: space-between;
+  height: auto;
 }
 .bee-point-cloud-wrapper .bee-point-cloud-container__header-title {
-  flex: 1;
+  flex-shrink: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   font-weight: 500;
+  height: 40px;
 }
 .bee-point-cloud-wrapper .bee-point-cloud-container__header-toolbar {
+  flex: 1;
   display: flex;
   align-items: center;
   font-size: 14px;
+  flex-wrap: wrap;
+  justify-content: flex-end;
 }
 .bee-point-cloud-wrapper .bee-point-cloud-container__header-toolbar .bee-point-cloud__rotate-reserve {
   display: inline-block;
@@ -2713,8 +2762,13 @@
 .bee-point-cloud-wrapper .bee-point-cloud-container__zoom .bee-point-cloud-highlight-view {
   display: none;
 }
-.bee-point-cloud-wrapper .bee-point-cloud-container__left {
-  width: 455px;
+.bee-point-cloud-wrapper .bee-point-cloud-container__left-large {
+  width: 100%;
+}
+.bee-point-cloud-wrapper .bee-point-cloud-container__left-noLarge {
+  width: 100%;
+}
+.bee-point-cloud-wrapper .bee-point-cloud-container__left-large, .bee-point-cloud-wrapper .bee-point-cloud-container__left-noLarge {
   display: flex;
   flex-direction: column;
   border-right: 1px solid #fff;
@@ -2722,22 +2776,23 @@
   overflow: hidden;
   flex-shrink: 0;
 }
-.bee-point-cloud-wrapper .bee-point-cloud-container__left .bee-point-cloud-3d-container {
+.bee-point-cloud-wrapper .bee-point-cloud-container__left-large .bee-point-cloud-3d-container, .bee-point-cloud-wrapper .bee-point-cloud-container__left-noLarge .bee-point-cloud-3d-container {
+  background: #444;
   display: flex;
   flex-direction: column;
   overflow: hidden;
   flex: 1;
 }
-.bee-point-cloud-wrapper .bee-point-cloud-container__left .bee-point-cloud-3d-container .bee-point-cloud-3d-content {
+.bee-point-cloud-wrapper .bee-point-cloud-container__left-large .bee-point-cloud-3d-container .bee-point-cloud-3d-content, .bee-point-cloud-wrapper .bee-point-cloud-container__left-noLarge .bee-point-cloud-3d-container .bee-point-cloud-3d-content {
   display: flex;
   flex: 1;
   overflow: hidden;
 }
-.bee-point-cloud-wrapper .bee-point-cloud-container__left .bee-point-cloud-3d-container .bee-point-cloud-3d-content .bee-point-cloud-3d-view {
+.bee-point-cloud-wrapper .bee-point-cloud-container__left-large .bee-point-cloud-3d-container .bee-point-cloud-3d-content .bee-point-cloud-3d-view, .bee-point-cloud-wrapper .bee-point-cloud-container__left-noLarge .bee-point-cloud-3d-container .bee-point-cloud-3d-content .bee-point-cloud-3d-view {
   flex: 1;
   overflow: hidden;
 }
-.bee-point-cloud-wrapper .bee-point-cloud-container__left .bee-point-cloud-3d-container .bee-point-cloud-3d-sidebar {
+.bee-point-cloud-wrapper .bee-point-cloud-container__left-large .bee-point-cloud-3d-container .bee-point-cloud-3d-sidebar, .bee-point-cloud-wrapper .bee-point-cloud-container__left-noLarge .bee-point-cloud-3d-container .bee-point-cloud-3d-sidebar {
   transition: width 0.5s;
   padding-left: 16px;
   height: 100%;
@@ -2749,10 +2804,10 @@
   justify-content: flex-start;
   overflow-y: scroll;
 }
-.bee-point-cloud-wrapper .bee-point-cloud-container__left .bee-point-cloud-3d-container .bee-point-cloud-3d-sidebar::-webkit-scrollbar {
+.bee-point-cloud-wrapper .bee-point-cloud-container__left-large .bee-point-cloud-3d-container .bee-point-cloud-3d-sidebar::-webkit-scrollbar, .bee-point-cloud-wrapper .bee-point-cloud-container__left-noLarge .bee-point-cloud-3d-container .bee-point-cloud-3d-sidebar::-webkit-scrollbar {
   display: none;
 }
-.bee-point-cloud-wrapper .bee-point-cloud-container__left .bee-point-cloud-3d-container .bee-point-cloud-3d-view__reset, .bee-point-cloud-wrapper .bee-point-cloud-container__left .bee-point-cloud-3d-container .bee-point-cloud-3d-view__followTop {
+.bee-point-cloud-wrapper .bee-point-cloud-container__left-large .bee-point-cloud-3d-container .bee-point-cloud-3d-view__reset, .bee-point-cloud-wrapper .bee-point-cloud-container__left-large .bee-point-cloud-3d-container .bee-point-cloud-3d-view__followTop, .bee-point-cloud-wrapper .bee-point-cloud-container__left-noLarge .bee-point-cloud-3d-container .bee-point-cloud-3d-view__reset, .bee-point-cloud-wrapper .bee-point-cloud-container__left-noLarge .bee-point-cloud-3d-container .bee-point-cloud-3d-view__followTop {
   display: inline-block;
   height: 36px;
   width: 36px;
@@ -2764,16 +2819,16 @@
   background-color: #444;
   border-radius: 4px;
 }
-.bee-point-cloud-wrapper .bee-point-cloud-container__left .bee-point-cloud-3d-container .bee-point-cloud-3d-view__reset {
+.bee-point-cloud-wrapper .bee-point-cloud-container__left-large .bee-point-cloud-3d-container .bee-point-cloud-3d-view__reset, .bee-point-cloud-wrapper .bee-point-cloud-container__left-noLarge .bee-point-cloud-3d-container .bee-point-cloud-3d-view__reset {
   background-image: url("../dist/assets/icons/25ef334b.svg");
   margin: 16px 0;
 }
-.bee-point-cloud-wrapper .bee-point-cloud-container__left .bee-point-cloud-3d-container .bee-point-cloud-3d-view__followTop {
+.bee-point-cloud-wrapper .bee-point-cloud-container__left-large .bee-point-cloud-3d-container .bee-point-cloud-3d-view__followTop, .bee-point-cloud-wrapper .bee-point-cloud-container__left-noLarge .bee-point-cloud-3d-container .bee-point-cloud-3d-view__followTop {
   margin: 16px 0 0 0;
   background-size: 36px;
   background-image: url("../dist/assets/icons/aa147cfc.png");
 }
-.bee-point-cloud-wrapper .bee-point-cloud-container__left .bee-point-cloud-3d-container .bee-point-cloud-3d-view__top, .bee-point-cloud-wrapper .bee-point-cloud-container__left .bee-point-cloud-3d-container .bee-point-cloud-3d-view__front, .bee-point-cloud-wrapper .bee-point-cloud-container__left .bee-point-cloud-3d-container .bee-point-cloud-3d-view__left, .bee-point-cloud-wrapper .bee-point-cloud-container__left .bee-point-cloud-3d-container .bee-point-cloud-3d-view__right, .bee-point-cloud-wrapper .bee-point-cloud-container__left .bee-point-cloud-3d-container .bee-point-cloud-3d-view__back, .bee-point-cloud-wrapper .bee-point-cloud-container__left .bee-point-cloud-3d-container .bee-point-cloud-3d-view__bottom, .bee-point-cloud-wrapper .bee-point-cloud-container__left .bee-point-cloud-3d-container .bee-point-cloud-3d-view__lft, .bee-point-cloud-wrapper .bee-point-cloud-container__left .bee-point-cloud-3d-container .bee-point-cloud-3d-view__rbt {
+.bee-point-cloud-wrapper .bee-point-cloud-container__left-large .bee-point-cloud-3d-container .bee-point-cloud-3d-view__top, .bee-point-cloud-wrapper .bee-point-cloud-container__left-large .bee-point-cloud-3d-container .bee-point-cloud-3d-view__front, .bee-point-cloud-wrapper .bee-point-cloud-container__left-large .bee-point-cloud-3d-container .bee-point-cloud-3d-view__left, .bee-point-cloud-wrapper .bee-point-cloud-container__left-large .bee-point-cloud-3d-container .bee-point-cloud-3d-view__right, .bee-point-cloud-wrapper .bee-point-cloud-container__left-large .bee-point-cloud-3d-container .bee-point-cloud-3d-view__back, .bee-point-cloud-wrapper .bee-point-cloud-container__left-large .bee-point-cloud-3d-container .bee-point-cloud-3d-view__bottom, .bee-point-cloud-wrapper .bee-point-cloud-container__left-large .bee-point-cloud-3d-container .bee-point-cloud-3d-view__lft, .bee-point-cloud-wrapper .bee-point-cloud-container__left-large .bee-point-cloud-3d-container .bee-point-cloud-3d-view__rbt, .bee-point-cloud-wrapper .bee-point-cloud-container__left-noLarge .bee-point-cloud-3d-container .bee-point-cloud-3d-view__top, .bee-point-cloud-wrapper .bee-point-cloud-container__left-noLarge .bee-point-cloud-3d-container .bee-point-cloud-3d-view__front, .bee-point-cloud-wrapper .bee-point-cloud-container__left-noLarge .bee-point-cloud-3d-container .bee-point-cloud-3d-view__left, .bee-point-cloud-wrapper .bee-point-cloud-container__left-noLarge .bee-point-cloud-3d-container .bee-point-cloud-3d-view__right, .bee-point-cloud-wrapper .bee-point-cloud-container__left-noLarge .bee-point-cloud-3d-container .bee-point-cloud-3d-view__back, .bee-point-cloud-wrapper .bee-point-cloud-container__left-noLarge .bee-point-cloud-3d-container .bee-point-cloud-3d-view__bottom, .bee-point-cloud-wrapper .bee-point-cloud-container__left-noLarge .bee-point-cloud-3d-container .bee-point-cloud-3d-view__lft, .bee-point-cloud-wrapper .bee-point-cloud-container__left-noLarge .bee-point-cloud-3d-container .bee-point-cloud-3d-view__rbt {
   display: inline-block;
   height: 36px;
   width: 36px;
@@ -2783,60 +2838,60 @@
   background-image: url("../dist/assets/icons/c5b4262e.png");
   margin-bottom: 8px;
 }
-.bee-point-cloud-wrapper .bee-point-cloud-container__left .bee-point-cloud-3d-container .bee-point-cloud-3d-view__top.active, .bee-point-cloud-wrapper .bee-point-cloud-container__left .bee-point-cloud-3d-container .bee-point-cloud-3d-view__front.active, .bee-point-cloud-wrapper .bee-point-cloud-container__left .bee-point-cloud-3d-container .bee-point-cloud-3d-view__left.active, .bee-point-cloud-wrapper .bee-point-cloud-container__left .bee-point-cloud-3d-container .bee-point-cloud-3d-view__right.active, .bee-point-cloud-wrapper .bee-point-cloud-container__left .bee-point-cloud-3d-container .bee-point-cloud-3d-view__back.active, .bee-point-cloud-wrapper .bee-point-cloud-container__left .bee-point-cloud-3d-container .bee-point-cloud-3d-view__bottom.active, .bee-point-cloud-wrapper .bee-point-cloud-container__left .bee-point-cloud-3d-container .bee-point-cloud-3d-view__lft.active, .bee-point-cloud-wrapper .bee-point-cloud-container__left .bee-point-cloud-3d-container .bee-point-cloud-3d-view__rbt.active {
+.bee-point-cloud-wrapper .bee-point-cloud-container__left-large .bee-point-cloud-3d-container .bee-point-cloud-3d-view__top.active, .bee-point-cloud-wrapper .bee-point-cloud-container__left-large .bee-point-cloud-3d-container .bee-point-cloud-3d-view__front.active, .bee-point-cloud-wrapper .bee-point-cloud-container__left-large .bee-point-cloud-3d-container .bee-point-cloud-3d-view__left.active, .bee-point-cloud-wrapper .bee-point-cloud-container__left-large .bee-point-cloud-3d-container .bee-point-cloud-3d-view__right.active, .bee-point-cloud-wrapper .bee-point-cloud-container__left-large .bee-point-cloud-3d-container .bee-point-cloud-3d-view__back.active, .bee-point-cloud-wrapper .bee-point-cloud-container__left-large .bee-point-cloud-3d-container .bee-point-cloud-3d-view__bottom.active, .bee-point-cloud-wrapper .bee-point-cloud-container__left-large .bee-point-cloud-3d-container .bee-point-cloud-3d-view__lft.active, .bee-point-cloud-wrapper .bee-point-cloud-container__left-large .bee-point-cloud-3d-container .bee-point-cloud-3d-view__rbt.active, .bee-point-cloud-wrapper .bee-point-cloud-container__left-noLarge .bee-point-cloud-3d-container .bee-point-cloud-3d-view__top.active, .bee-point-cloud-wrapper .bee-point-cloud-container__left-noLarge .bee-point-cloud-3d-container .bee-point-cloud-3d-view__front.active, .bee-point-cloud-wrapper .bee-point-cloud-container__left-noLarge .bee-point-cloud-3d-container .bee-point-cloud-3d-view__left.active, .bee-point-cloud-wrapper .bee-point-cloud-container__left-noLarge .bee-point-cloud-3d-container .bee-point-cloud-3d-view__right.active, .bee-point-cloud-wrapper .bee-point-cloud-container__left-noLarge .bee-point-cloud-3d-container .bee-point-cloud-3d-view__back.active, .bee-point-cloud-wrapper .bee-point-cloud-container__left-noLarge .bee-point-cloud-3d-container .bee-point-cloud-3d-view__bottom.active, .bee-point-cloud-wrapper .bee-point-cloud-container__left-noLarge .bee-point-cloud-3d-container .bee-point-cloud-3d-view__lft.active, .bee-point-cloud-wrapper .bee-point-cloud-container__left-noLarge .bee-point-cloud-3d-container .bee-point-cloud-3d-view__rbt.active {
   background-image: url("../dist/assets/icons/e4f0b7fe.png");
 }
-.bee-point-cloud-wrapper .bee-point-cloud-container__left .bee-point-cloud-3d-container .bee-point-cloud-3d-view__top {
+.bee-point-cloud-wrapper .bee-point-cloud-container__left-large .bee-point-cloud-3d-container .bee-point-cloud-3d-view__top, .bee-point-cloud-wrapper .bee-point-cloud-container__left-noLarge .bee-point-cloud-3d-container .bee-point-cloud-3d-view__top {
   background-position: 0 0;
 }
-.bee-point-cloud-wrapper .bee-point-cloud-container__left .bee-point-cloud-3d-container .bee-point-cloud-3d-view__front {
+.bee-point-cloud-wrapper .bee-point-cloud-container__left-large .bee-point-cloud-3d-container .bee-point-cloud-3d-view__front, .bee-point-cloud-wrapper .bee-point-cloud-container__left-noLarge .bee-point-cloud-3d-container .bee-point-cloud-3d-view__front {
   background-position-y: -44px;
 }
-.bee-point-cloud-wrapper .bee-point-cloud-container__left .bee-point-cloud-3d-container .bee-point-cloud-3d-view__left {
+.bee-point-cloud-wrapper .bee-point-cloud-container__left-large .bee-point-cloud-3d-container .bee-point-cloud-3d-view__left, .bee-point-cloud-wrapper .bee-point-cloud-container__left-noLarge .bee-point-cloud-3d-container .bee-point-cloud-3d-view__left {
   background-position-y: -88px;
 }
-.bee-point-cloud-wrapper .bee-point-cloud-container__left .bee-point-cloud-3d-container .bee-point-cloud-3d-view__back {
+.bee-point-cloud-wrapper .bee-point-cloud-container__left-large .bee-point-cloud-3d-container .bee-point-cloud-3d-view__back, .bee-point-cloud-wrapper .bee-point-cloud-container__left-noLarge .bee-point-cloud-3d-container .bee-point-cloud-3d-view__back {
   background-position-y: -132px;
 }
-.bee-point-cloud-wrapper .bee-point-cloud-container__left .bee-point-cloud-3d-container .bee-point-cloud-3d-view__right {
+.bee-point-cloud-wrapper .bee-point-cloud-container__left-large .bee-point-cloud-3d-container .bee-point-cloud-3d-view__right, .bee-point-cloud-wrapper .bee-point-cloud-container__left-noLarge .bee-point-cloud-3d-container .bee-point-cloud-3d-view__right {
   background-position-y: -176px;
 }
-.bee-point-cloud-wrapper .bee-point-cloud-container__left .bee-point-cloud-3d-container .bee-point-cloud-3d-view__bottom {
+.bee-point-cloud-wrapper .bee-point-cloud-container__left-large .bee-point-cloud-3d-container .bee-point-cloud-3d-view__bottom, .bee-point-cloud-wrapper .bee-point-cloud-container__left-noLarge .bee-point-cloud-3d-container .bee-point-cloud-3d-view__bottom {
   background-position-y: -220px;
 }
-.bee-point-cloud-wrapper .bee-point-cloud-container__left .bee-point-cloud-3d-container .bee-point-cloud-3d-view__lft {
+.bee-point-cloud-wrapper .bee-point-cloud-container__left-large .bee-point-cloud-3d-container .bee-point-cloud-3d-view__lft, .bee-point-cloud-wrapper .bee-point-cloud-container__left-noLarge .bee-point-cloud-3d-container .bee-point-cloud-3d-view__lft {
   background-position-y: -264px;
 }
-.bee-point-cloud-wrapper .bee-point-cloud-container__left .bee-point-cloud-3d-container .bee-point-cloud-3d-view__rbt {
+.bee-point-cloud-wrapper .bee-point-cloud-container__left-large .bee-point-cloud-3d-container .bee-point-cloud-3d-view__rbt, .bee-point-cloud-wrapper .bee-point-cloud-container__left-noLarge .bee-point-cloud-3d-container .bee-point-cloud-3d-view__rbt {
   background-position-y: -308px;
   margin-bottom: 0px;
 }
-.bee-point-cloud-wrapper .bee-point-cloud-container__left .bee-point-cloud-3d-container .bee-point-cloud-3d-sidebarZoom {
+.bee-point-cloud-wrapper .bee-point-cloud-container__left-large .bee-point-cloud-3d-container .bee-point-cloud-3d-sidebarZoom, .bee-point-cloud-wrapper .bee-point-cloud-container__left-noLarge .bee-point-cloud-3d-container .bee-point-cloud-3d-sidebarZoom {
   padding-left: 16px;
   height: 100%;
   background-color: #4c4c4c;
   box-sizing: content-box;
   display: flex;
 }
-.bee-point-cloud-wrapper .bee-point-cloud-container__left .bee-point-cloud-3d-container .bee-point-cloud-3d-sidebarZoom .bee-point-cloud-3d-view__reset {
+.bee-point-cloud-wrapper .bee-point-cloud-container__left-large .bee-point-cloud-3d-container .bee-point-cloud-3d-sidebarZoom .bee-point-cloud-3d-view__reset, .bee-point-cloud-wrapper .bee-point-cloud-container__left-noLarge .bee-point-cloud-3d-container .bee-point-cloud-3d-sidebarZoom .bee-point-cloud-3d-view__reset {
   margin: 0px 4px;
 }
-.bee-point-cloud-wrapper .bee-point-cloud-container__left .bee-point-cloud-3d-container .bee-point-cloud-3d-sidebarZoom .bee-point-cloud-3d-view__followTop {
+.bee-point-cloud-wrapper .bee-point-cloud-container__left-large .bee-point-cloud-3d-container .bee-point-cloud-3d-sidebarZoom .bee-point-cloud-3d-view__followTop, .bee-point-cloud-wrapper .bee-point-cloud-container__left-noLarge .bee-point-cloud-3d-container .bee-point-cloud-3d-sidebarZoom .bee-point-cloud-3d-view__followTop {
   margin: 0px 4px;
 }
-.bee-point-cloud-wrapper .bee-point-cloud-container__left .bee-point-cloud-3d-container .bee-point-cloud-3d-sidebarZoom .bee-point-cloud-3d-view__top, .bee-point-cloud-wrapper .bee-point-cloud-container__left .bee-point-cloud-3d-container .bee-point-cloud-3d-sidebarZoom .bee-point-cloud-3d-view__front, .bee-point-cloud-wrapper .bee-point-cloud-container__left .bee-point-cloud-3d-container .bee-point-cloud-3d-sidebarZoom .bee-point-cloud-3d-view__left, .bee-point-cloud-wrapper .bee-point-cloud-container__left .bee-point-cloud-3d-container .bee-point-cloud-3d-sidebarZoom .bee-point-cloud-3d-view__right, .bee-point-cloud-wrapper .bee-point-cloud-container__left .bee-point-cloud-3d-container .bee-point-cloud-3d-sidebarZoom .bee-point-cloud-3d-view__back, .bee-point-cloud-wrapper .bee-point-cloud-container__left .bee-point-cloud-3d-container .bee-point-cloud-3d-sidebarZoom .bee-point-cloud-3d-view__bottom, .bee-point-cloud-wrapper .bee-point-cloud-container__left .bee-point-cloud-3d-container .bee-point-cloud-3d-sidebarZoom .bee-point-cloud-3d-view__lft, .bee-point-cloud-wrapper .bee-point-cloud-container__left .bee-point-cloud-3d-container .bee-point-cloud-3d-sidebarZoom .bee-point-cloud-3d-view__rbt {
+.bee-point-cloud-wrapper .bee-point-cloud-container__left-large .bee-point-cloud-3d-container .bee-point-cloud-3d-sidebarZoom .bee-point-cloud-3d-view__top, .bee-point-cloud-wrapper .bee-point-cloud-container__left-large .bee-point-cloud-3d-container .bee-point-cloud-3d-sidebarZoom .bee-point-cloud-3d-view__front, .bee-point-cloud-wrapper .bee-point-cloud-container__left-large .bee-point-cloud-3d-container .bee-point-cloud-3d-sidebarZoom .bee-point-cloud-3d-view__left, .bee-point-cloud-wrapper .bee-point-cloud-container__left-large .bee-point-cloud-3d-container .bee-point-cloud-3d-sidebarZoom .bee-point-cloud-3d-view__right, .bee-point-cloud-wrapper .bee-point-cloud-container__left-large .bee-point-cloud-3d-container .bee-point-cloud-3d-sidebarZoom .bee-point-cloud-3d-view__back, .bee-point-cloud-wrapper .bee-point-cloud-container__left-large .bee-point-cloud-3d-container .bee-point-cloud-3d-sidebarZoom .bee-point-cloud-3d-view__bottom, .bee-point-cloud-wrapper .bee-point-cloud-container__left-large .bee-point-cloud-3d-container .bee-point-cloud-3d-sidebarZoom .bee-point-cloud-3d-view__lft, .bee-point-cloud-wrapper .bee-point-cloud-container__left-large .bee-point-cloud-3d-container .bee-point-cloud-3d-sidebarZoom .bee-point-cloud-3d-view__rbt, .bee-point-cloud-wrapper .bee-point-cloud-container__left-noLarge .bee-point-cloud-3d-container .bee-point-cloud-3d-sidebarZoom .bee-point-cloud-3d-view__top, .bee-point-cloud-wrapper .bee-point-cloud-container__left-noLarge .bee-point-cloud-3d-container .bee-point-cloud-3d-sidebarZoom .bee-point-cloud-3d-view__front, .bee-point-cloud-wrapper .bee-point-cloud-container__left-noLarge .bee-point-cloud-3d-container .bee-point-cloud-3d-sidebarZoom .bee-point-cloud-3d-view__left, .bee-point-cloud-wrapper .bee-point-cloud-container__left-noLarge .bee-point-cloud-3d-container .bee-point-cloud-3d-sidebarZoom .bee-point-cloud-3d-view__right, .bee-point-cloud-wrapper .bee-point-cloud-container__left-noLarge .bee-point-cloud-3d-container .bee-point-cloud-3d-sidebarZoom .bee-point-cloud-3d-view__back, .bee-point-cloud-wrapper .bee-point-cloud-container__left-noLarge .bee-point-cloud-3d-container .bee-point-cloud-3d-sidebarZoom .bee-point-cloud-3d-view__bottom, .bee-point-cloud-wrapper .bee-point-cloud-container__left-noLarge .bee-point-cloud-3d-container .bee-point-cloud-3d-sidebarZoom .bee-point-cloud-3d-view__lft, .bee-point-cloud-wrapper .bee-point-cloud-container__left-noLarge .bee-point-cloud-3d-container .bee-point-cloud-3d-sidebarZoom .bee-point-cloud-3d-view__rbt {
   background-color: #444;
   border-radius: 4px;
   margin: 0px 4px;
 }
-.bee-point-cloud-wrapper .bee-point-cloud-container__left .bee-point-cloud-container__left-bottom-float {
+.bee-point-cloud-wrapper .bee-point-cloud-container__left-large .bee-point-cloud-container__left-bottom-float, .bee-point-cloud-wrapper .bee-point-cloud-container__left-noLarge .bee-point-cloud-container__left-bottom-float {
   position: fixed;
   bottom: 0px;
   right: 0px;
   z-index: 1003;
   border: 1px solid #fff;
 }
-.bee-point-cloud-wrapper .bee-point-cloud-container__left .bee-point-cloud-container__left-bottom-float .bee-point-cloud-container__left-bottom-floatHeader {
+.bee-point-cloud-wrapper .bee-point-cloud-container__left-large .bee-point-cloud-container__left-bottom-float .bee-point-cloud-container__left-bottom-floatHeader, .bee-point-cloud-wrapper .bee-point-cloud-container__left-noLarge .bee-point-cloud-container__left-bottom-float .bee-point-cloud-container__left-bottom-floatHeader {
   line-height: 24px;
   font-size: 12px;
   width: 100%;
@@ -2845,13 +2900,13 @@
   text-align: center;
   cursor: grabbing;
 }
-.bee-point-cloud-wrapper .bee-point-cloud-container__left .bee-point-cloud-container__left-bottom {
+.bee-point-cloud-wrapper .bee-point-cloud-container__left-large .bee-point-cloud-container__left-bottom, .bee-point-cloud-wrapper .bee-point-cloud-container__left-noLarge .bee-point-cloud-container__left-bottom {
   flex: 1;
   flex-direction: column;
   display: flex;
   overflow: hidden;
 }
-.bee-point-cloud-wrapper .bee-point-cloud-container__left .bee-point-cloud-container__left-bottom .bee-point-cloud-container__empty-page {
+.bee-point-cloud-wrapper .bee-point-cloud-container__left-large .bee-point-cloud-container__left-bottom .bee-point-cloud-container__empty-page, .bee-point-cloud-wrapper .bee-point-cloud-container__left-noLarge .bee-point-cloud-container__left-bottom .bee-point-cloud-container__empty-page {
   position: absolute;
   left: 0;
   top: 0;
@@ -2867,11 +2922,12 @@
   height: 100%;
   width: 100%;
 }
-.bee-point-cloud-wrapper .bee-point-cloud-container__left .bee-point-cloud-container__left-bottom .bee-point-cloud-container__empty-page .bee-point-cloud-container__empty-page__text {
+.bee-point-cloud-wrapper .bee-point-cloud-container__left-large .bee-point-cloud-container__left-bottom .bee-point-cloud-container__empty-page .bee-point-cloud-container__empty-page__text, .bee-point-cloud-wrapper .bee-point-cloud-container__left-noLarge .bee-point-cloud-container__left-bottom .bee-point-cloud-container__empty-page .bee-point-cloud-container__empty-page__text {
   margin-top: 8px;
 }
-.bee-point-cloud-wrapper .bee-point-cloud-container__left .bee-point-cloud-container__left-bottom .bee-point-cloud-container__side-view,
-.bee-point-cloud-wrapper .bee-point-cloud-container__left .bee-point-cloud-container__left-bottom .bee-point-cloud-container__back-view {
+.bee-point-cloud-wrapper .bee-point-cloud-container__left-large .bee-point-cloud-container__left-bottom .bee-point-cloud-container__side-view,
+.bee-point-cloud-wrapper .bee-point-cloud-container__left-large .bee-point-cloud-container__left-bottom .bee-point-cloud-container__back-view, .bee-point-cloud-wrapper .bee-point-cloud-container__left-noLarge .bee-point-cloud-container__left-bottom .bee-point-cloud-container__side-view,
+.bee-point-cloud-wrapper .bee-point-cloud-container__left-noLarge .bee-point-cloud-container__left-bottom .bee-point-cloud-container__back-view {
   position: relative;
   flex: 1;
   display: flex;
@@ -2879,12 +2935,14 @@
   flex-direction: column;
   border-top: 1px solid white;
 }
-.bee-point-cloud-wrapper .bee-point-cloud-container__left .bee-point-cloud-container__left-bottom .bee-point-cloud-container__side-view .bee-point-cloud-container__bottom-view-content,
-.bee-point-cloud-wrapper .bee-point-cloud-container__left .bee-point-cloud-container__left-bottom .bee-point-cloud-container__back-view .bee-point-cloud-container__bottom-view-content {
-  flex: 1;
+.bee-point-cloud-wrapper .bee-point-cloud-container__left-large .bee-point-cloud-container__left-bottom .bee-point-cloud-container__side-view .bee-point-cloud-container__bottom-view-content,
+.bee-point-cloud-wrapper .bee-point-cloud-container__left-large .bee-point-cloud-container__left-bottom .bee-point-cloud-container__back-view .bee-point-cloud-container__bottom-view-content, .bee-point-cloud-wrapper .bee-point-cloud-container__left-noLarge .bee-point-cloud-container__left-bottom .bee-point-cloud-container__side-view .bee-point-cloud-container__bottom-view-content,
+.bee-point-cloud-wrapper .bee-point-cloud-container__left-noLarge .bee-point-cloud-container__left-bottom .bee-point-cloud-container__back-view .bee-point-cloud-container__bottom-view-content {
+  height: 100%;
 }
-.bee-point-cloud-wrapper .bee-point-cloud-container__left .bee-point-cloud-container__left-bottom .bee-point-cloud-container__side-view .bee-point-cloud-container__bottom-view-content .bee-point-cloud-container__core-instance,
-.bee-point-cloud-wrapper .bee-point-cloud-container__left .bee-point-cloud-container__left-bottom .bee-point-cloud-container__back-view .bee-point-cloud-container__bottom-view-content .bee-point-cloud-container__core-instance {
+.bee-point-cloud-wrapper .bee-point-cloud-container__left-large .bee-point-cloud-container__left-bottom .bee-point-cloud-container__side-view .bee-point-cloud-container__bottom-view-content .bee-point-cloud-container__core-instance,
+.bee-point-cloud-wrapper .bee-point-cloud-container__left-large .bee-point-cloud-container__left-bottom .bee-point-cloud-container__back-view .bee-point-cloud-container__bottom-view-content .bee-point-cloud-container__core-instance, .bee-point-cloud-wrapper .bee-point-cloud-container__left-noLarge .bee-point-cloud-container__left-bottom .bee-point-cloud-container__side-view .bee-point-cloud-container__bottom-view-content .bee-point-cloud-container__core-instance,
+.bee-point-cloud-wrapper .bee-point-cloud-container__left-noLarge .bee-point-cloud-container__left-bottom .bee-point-cloud-container__back-view .bee-point-cloud-container__bottom-view-content .bee-point-cloud-container__core-instance {
   position: relative;
   width: 100%;
   height: 100%;
@@ -2910,13 +2968,15 @@
   font-size: 14px;
 }
 .bee-point-cloud-wrapper .bee-point-cloud-container__right {
-  flex: 1;
+  width: 100%;
+  height: 100%;
   display: flex;
   flex-direction: column;
   overflow: hidden;
   background-color: #444;
 }
 .bee-point-cloud-wrapper .bee-point-cloud-container__right .bee-point-cloud-container__top-view {
+  height: 100%;
   border-bottom: 1px solid #fff;
   overflow: hidden;
   display: flex;
@@ -2944,18 +3004,23 @@
   border-right: 1px solid #fff;
   border-bottom: 1px solid #fff;
 }
-.bee-point-cloud-wrapper .bee-point-cloud-container__right .bee-point-cloud-container__right-bottom {
+.bee-point-cloud-wrapper .bee-point-cloud-container__right .bee-point-cloud-container__right-bottom-large {
   flex: 1;
+}
+.bee-point-cloud-wrapper .bee-point-cloud-container__right .bee-point-cloud-container__right-bottom-noLarge {
+  height: 100%;
+}
+.bee-point-cloud-wrapper .bee-point-cloud-container__right .bee-point-cloud-container__right-bottom-large, .bee-point-cloud-wrapper .bee-point-cloud-container__right .bee-point-cloud-container__right-bottom-noLarge {
   display: flex;
   overflow: auto;
 }
-.bee-point-cloud-wrapper .bee-point-cloud-container__right .bee-point-cloud-container__right-bottom .bee-point-cloud-2d-container {
+.bee-point-cloud-wrapper .bee-point-cloud-container__right .bee-point-cloud-container__right-bottom-large .bee-point-cloud-2d-container, .bee-point-cloud-wrapper .bee-point-cloud-container__right .bee-point-cloud-container__right-bottom-noLarge .bee-point-cloud-2d-container {
   flex-direction: column;
   display: flex;
   overflow: hidden;
   flex-shrink: 0;
 }
-.bee-point-cloud-wrapper .bee-point-cloud-container__right .bee-point-cloud-container__right-bottom .bee-point-cloud-2d-image {
+.bee-point-cloud-wrapper .bee-point-cloud-container__right .bee-point-cloud-container__right-bottom-large .bee-point-cloud-2d-image, .bee-point-cloud-wrapper .bee-point-cloud-container__right .bee-point-cloud-container__right-bottom-noLarge .bee-point-cloud-2d-image {
   flex: 1;
   height: 100%;
   background-color: #4c4c4c;