@labelbee/lb-components 1.10.0-alpha.2 → 1.10.0-alpha.4

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

@@ -1 +1,131 @@
-"use strict";var React=require("react"),dom=require("../../../../utils/dom.js"),icons=require("@ant-design/icons"),index=require("../../index.js"),Pagination=require("../../../../views/MainView/toolFooter/Pagination.js"),icon_keyboard_h=require("../../../../assets/annotation/video/icon_keyboard_h.svg.js"),index$1=require("../../../../views/MainView/toolFooter/FooterTips/ToolHotKey/index.js"),reactI18next=require("react-i18next"),utils=require("../../utils.js"),lbAnnotation=require("@labelbee/lb-annotation");function _interopDefaultLegacy(e){return e&&typeof e=="object"&&"default"in e?e:{default:e}}var React__default=_interopDefaultLegacy(React);const{EVideoToolName}=lbAnnotation.cTool,videoTimeFormat=e=>{const t=Math.floor(e/60),a=~~(e%60).toFixed(),o=(e*10).toString().split("").pop(),l=r=>r<10?`0${r}`:r;return`${l(t)}:${l(a)}:${o}`},VideoProgress=()=>{const{currentTime:e,duration:t,buffered:a,setCurrentTime:o}=React__default.default.useContext(index.VideoPlayerCtx),l=React__default.default.useRef(null),r=`${utils.decimalReserved(a/t*100,1)}%`,n=`${utils.decimalReserved(e/t*100,1)}%`,i=s=>{if(l.current){const d=s.clientX,c=l.current.clientWidth,u=utils.decimalReserved(d/c*t,1);o(u)}};return React__default.default.createElement("div",{className:dom.getClassName("video-progress"),ref:l,onClick:s=>{s.stopPropagation(),s.nativeEvent.stopImmediatePropagation(),i(s)}},React__default.default.createElement("div",{className:dom.getClassName("video-slider")},React__default.default.createElement("div",{className:dom.getClassName("video-slider","played"),style:{width:n}}),React__default.default.createElement("div",{className:dom.getClassName("video-slider","loaded"),style:{width:r}}),React__default.default.createElement("div",{className:dom.getClassName("video-slider","played"),style:{width:n}})),React__default.default.createElement("div",{className:dom.getClassName("video-slider-bar"),style:{left:n}}))},VideoSpeedButton=()=>{const{updateNextPlaybackRate:e,playbackRate:t}=React__default.default.useContext(index.VideoPlayerCtx),{t:a}=reactI18next.useTranslation();return React__default.default.createElement("span",{className:dom.getClassName("video-controller","speed")},React__default.default.createElement("span",null,a("Speed")),React__default.default.createElement("span",{className:dom.getClassName("video-controller","speedNum")},`${t}x`),React__default.default.createElement("span",{className:dom.getClassName("video-controller","speedButton")},React__default.default.createElement(icons.CaretUpOutlined,{onClick:()=>{e()}}),React__default.default.createElement(icons.CaretDownOutlined,{onClick:()=>{e(!1)}})))},VideoHotKeys=()=>{const{t:e}=reactI18next.useTranslation();return React__default.default.createElement(index$1.default,{title:React__default.default.createElement("span",{className:dom.getClassName("video-controller","hotkey")},React__default.default.createElement("img",{src:icon_keyboard_h}),e("Hotkeys")),style:{},toolName:EVideoToolName.VideoTagTool})},VideoPageChange=()=>{const{imgIndex:e,imgList:t,pageBackward:a,pageJump:o,pageForward:l}=React__default.default.useContext(index.VideoPlayerCtx);return React__default.default.createElement(Pagination.Pagination,{isVideo:!0,pageBackward:a,imgIndex:e,pageJump:o,totalPage:t.length,pageForward:l,footerCls:dom.getClassName("video-controller")})},VideoTime=()=>{const{currentTime:e,duration:t}=React__default.default.useContext(index.VideoPlayerCtx),a=t*10-e*10,o=(a>0?a:0)/10;return React__default.default.createElement("div",{className:dom.getClassName("video-controller","time")},`${videoTimeFormat(e)} / -${videoTimeFormat(o)}`)},VideoController=()=>{const{playPause:e,isPlay:t}=React__default.default.useContext(index.VideoPlayerCtx);return React__default.default.createElement("div",{className:dom.getClassName("video-controller","wrapper")},React__default.default.createElement(VideoProgress,null),React__default.default.createElement("div",{className:dom.getClassName("video-controller")},React__default.default.createElement("span",{onClick:()=>{e()},className:dom.getClassName("video-controller","playButton")},t?React__default.default.createElement(icons.PauseOutlined,null):React__default.default.createElement(icons.CaretRightOutlined,null)),React__default.default.createElement(VideoTime,null),React__default.default.createElement(VideoSpeedButton,null),React__default.default.createElement("div",{className:dom.getClassName("video-controller","holder")}),React__default.default.createElement(VideoPageChange,null),React__default.default.createElement(VideoHotKeys,null)))};module.exports=VideoController;
+'use strict';
+
+var React = require('react');
+var dom = require('../../../../utils/dom.js');
+var icons = require('@ant-design/icons');
+var index = require('../../index.js');
+var Pagination = require('../../../../views/MainView/toolFooter/Pagination.js');
+var icon_keyboard_h = require('../../../../assets/annotation/video/icon_keyboard_h.svg.js');
+var index$1 = require('../../../../views/MainView/toolFooter/FooterTips/ToolHotKey/index.js');
+var reactI18next = require('react-i18next');
+var utils = require('../../utils.js');
+var lbAnnotation = require('@labelbee/lb-annotation');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const {EVideoToolName} = lbAnnotation.cTool;
+const videoTimeFormat = (time) => {
+  const min = Math.floor(time / 60);
+  const sec = ~~(time % 60).toFixed();
+  const minSec = (time * 10).toString().split("").pop();
+  const fillZero = (num) => num < 10 ? `0${num}` : num;
+  return `${fillZero(min)}:${fillZero(sec)}:${minSec}`;
+};
+const VideoProgress = () => {
+  const {currentTime, duration, buffered, setCurrentTime} = React__default["default"].useContext(index.VideoPlayerCtx);
+  const progressRef = React__default["default"].useRef(null);
+  const bufferLoadedPercent = `${utils.decimalReserved(buffered / duration * 100, 1)}%`;
+  const playedPercent = `${utils.decimalReserved(currentTime / duration * 100, 1)}%`;
+  const toCurrentTime = (event) => {
+    if (progressRef.current) {
+      const offsetX = event.clientX;
+      const width = progressRef.current.clientWidth;
+      const toTime = utils.decimalReserved(offsetX / width * duration, 1);
+      setCurrentTime(toTime);
+    }
+  };
+  return /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: dom.getClassName("video-progress"),
+    ref: progressRef,
+    onClick: (event) => {
+      event.stopPropagation();
+      event.nativeEvent.stopImmediatePropagation();
+      toCurrentTime(event);
+    }
+  }, /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: dom.getClassName("video-slider")
+  }, /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: dom.getClassName("video-slider", "played"),
+    style: {width: playedPercent}
+  }), /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: dom.getClassName("video-slider", "loaded"),
+    style: {width: bufferLoadedPercent}
+  }), /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: dom.getClassName("video-slider", "played"),
+    style: {width: playedPercent}
+  })), /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: dom.getClassName("video-slider-bar"),
+    style: {left: playedPercent}
+  }));
+};
+const VideoSpeedButton = () => {
+  const {updateNextPlaybackRate, playbackRate} = React__default["default"].useContext(index.VideoPlayerCtx);
+  const {t} = reactI18next.useTranslation();
+  return /* @__PURE__ */ React__default["default"].createElement("span", {
+    className: dom.getClassName("video-controller", "speed")
+  }, /* @__PURE__ */ React__default["default"].createElement("span", null, t("Speed")), /* @__PURE__ */ React__default["default"].createElement("span", {
+    className: dom.getClassName("video-controller", "speedNum")
+  }, `${playbackRate}x`), /* @__PURE__ */ React__default["default"].createElement("span", {
+    className: dom.getClassName("video-controller", "speedButton")
+  }, /* @__PURE__ */ React__default["default"].createElement(icons.CaretUpOutlined, {
+    onClick: () => {
+      updateNextPlaybackRate();
+    }
+  }), /* @__PURE__ */ React__default["default"].createElement(icons.CaretDownOutlined, {
+    onClick: () => {
+      updateNextPlaybackRate(false);
+    }
+  })));
+};
+const VideoHotKeys = () => {
+  const {t} = reactI18next.useTranslation();
+  return /* @__PURE__ */ React__default["default"].createElement(index$1["default"], {
+    title: /* @__PURE__ */ React__default["default"].createElement("span", {
+      className: dom.getClassName("video-controller", "hotkey")
+    }, /* @__PURE__ */ React__default["default"].createElement("img", {
+      src: icon_keyboard_h
+    }), t("Hotkeys")),
+    style: {},
+    toolName: EVideoToolName.VideoTagTool
+  });
+};
+const VideoPageChange = () => {
+  const {imgIndex, imgList, pageBackward, pageJump, pageForward} = React__default["default"].useContext(index.VideoPlayerCtx);
+  return /* @__PURE__ */ React__default["default"].createElement(Pagination.Pagination, {
+    isVideo: true,
+    pageBackward,
+    imgIndex,
+    pageJump,
+    totalPage: imgList.length,
+    pageForward,
+    footerCls: dom.getClassName("video-controller")
+  });
+};
+const VideoTime = () => {
+  const {currentTime, duration} = React__default["default"].useContext(index.VideoPlayerCtx);
+  const remained10x = duration * 10 - currentTime * 10;
+  const remaingTime = (remained10x > 0 ? remained10x : 0) / 10;
+  return /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: dom.getClassName("video-controller", "time")
+  }, `${videoTimeFormat(currentTime)} / -${videoTimeFormat(remaingTime)}`);
+};
+const VideoController = () => {
+  const {playPause, isPlay} = React__default["default"].useContext(index.VideoPlayerCtx);
+  return /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: dom.getClassName("video-controller", "wrapper")
+  }, /* @__PURE__ */ React__default["default"].createElement(VideoProgress, null), /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: dom.getClassName("video-controller")
+  }, /* @__PURE__ */ React__default["default"].createElement("span", {
+    onClick: () => {
+      playPause();
+    },
+    className: dom.getClassName("video-controller", "playButton")
+  }, isPlay ? /* @__PURE__ */ React__default["default"].createElement(icons.PauseOutlined, null) : /* @__PURE__ */ React__default["default"].createElement(icons.CaretRightOutlined, null)), /* @__PURE__ */ React__default["default"].createElement(VideoTime, null), /* @__PURE__ */ React__default["default"].createElement(VideoSpeedButton, null), /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: dom.getClassName("video-controller", "holder")
+  }), /* @__PURE__ */ React__default["default"].createElement(VideoPageChange, null), /* @__PURE__ */ React__default["default"].createElement(VideoHotKeys, null)));
+};
+
+module.exports = VideoController;
+//# sourceMappingURL=index.js.map

package/dist/components/videoPlayer/components/controller/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../src/components/videoPlayer/components/controller/index.tsx"],"sourcesContent":["import React from 'react';\nimport { getClassName } from '@/utils/dom';\nimport {\n  CaretRightOutlined,\n  CaretUpOutlined,\n  CaretDownOutlined,\n  PauseOutlined,\n} from '@ant-design/icons';\nimport { VideoPlayerCtx } from '../..';\nimport { Pagination } from '@/views/MainView/toolFooter/Pagination';\nimport hotkey from '@/assets/annotation/video/icon_keyboard_h.svg';\nimport ToolHotKey from '@/views/MainView/toolFooter/FooterTips/ToolHotKey';\nimport { useTranslation } from 'react-i18next';\nimport { decimalReserved } from '../../utils';\nimport { cTool } from '@labelbee/lb-annotation';\nconst { EVideoToolName } = cTool;\n\n/**\n * Format video time to display\n * Such as 61.9 => 01:01:9\n * @param {Number} time\n * @returns {String} displayTime (min:sec:mircoSec)\n */\nconst videoTimeFormat = (time: number) => {\n  const min = Math.floor(time / 60);\n  const sec = ~~(time % 60).toFixed();\n  const minSec = (time * 10).toString().split('').pop();\n  const fillZero = (num: number) => (num < 10 ? `0${num}` : num);\n  return `${fillZero(min)}:${fillZero(sec)}:${minSec}`;\n};\n\nconst VideoProgress = () => {\n  const { currentTime, duration, buffered, setCurrentTime } = React.useContext(VideoPlayerCtx);\n  const progressRef = React.useRef<HTMLDivElement>(null);\n  const bufferLoadedPercent = `${decimalReserved((buffered / duration) * 100, 1)}%`;\n  const playedPercent = `${decimalReserved((currentTime / duration) * 100, 1)}%`;\n  const toCurrentTime = (event: React.MouseEvent<HTMLDivElement>) => {\n    if (progressRef.current) {\n      const offsetX = event.clientX;\n      const width = progressRef.current.clientWidth;\n      const toTime = decimalReserved((offsetX / width) * duration, 1);\n      setCurrentTime(toTime);\n    }\n  };\n\n  return (\n    <div\n      className={getClassName('video-progress')}\n      ref={progressRef}\n      onClick={(event: React.MouseEvent<HTMLDivElement>) => {\n        event.stopPropagation();\n        event.nativeEvent.stopImmediatePropagation();\n        toCurrentTime(event);\n      }}\n    >\n      <div className={getClassName('video-slider')}>\n        <div className={getClassName('video-slider', 'played')} style={{ width: playedPercent }} />\n        <div\n          className={getClassName('video-slider', 'loaded')}\n          style={{ width: bufferLoadedPercent }}\n        />\n        <div className={getClassName('video-slider', 'played')} style={{ width: playedPercent }} />\n      </div>\n\n      <div className={getClassName('video-slider-bar')} style={{ left: playedPercent }} />\n    </div>\n  );\n};\n\nconst VideoSpeedButton = () => {\n  const { updateNextPlaybackRate, playbackRate } = React.useContext(VideoPlayerCtx);\n  const { t } = useTranslation();\n\n  return (\n    <span className={getClassName('video-controller', 'speed')}>\n      <span>{t('Speed')}</span>\n      <span className={getClassName('video-controller', 'speedNum')}>{`${playbackRate}x`}</span>\n      <span className={getClassName('video-controller', 'speedButton')}>\n        <CaretUpOutlined\n          onClick={() => {\n            updateNextPlaybackRate();\n          }}\n        />\n        <CaretDownOutlined\n          onClick={() => {\n            updateNextPlaybackRate(false);\n          }}\n        />\n      </span>\n    </span>\n  );\n};\n\nconst VideoHotKeys = () => {\n  const { t } = useTranslation();\n  return (\n    <ToolHotKey\n      title={\n        <span className={getClassName('video-controller', 'hotkey')}>\n          <img src={hotkey} />\n          {t('Hotkeys')}\n        </span>\n      }\n      style={{}}\n      toolName={EVideoToolName.VideoTagTool}\n    />\n  );\n};\n\nconst VideoPageChange = () => {\n  const { imgIndex, imgList, pageBackward, pageJump, pageForward } =\n    React.useContext(VideoPlayerCtx);\n\n  return (\n    <Pagination\n      isVideo={true}\n      pageBackward={pageBackward}\n      imgIndex={imgIndex}\n      pageJump={pageJump}\n      totalPage={imgList.length}\n      pageForward={pageForward}\n      footerCls={getClassName('video-controller')}\n    />\n  );\n};\n\nconst VideoTime = () => {\n  const { currentTime, duration } = React.useContext(VideoPlayerCtx);\n  const remained10x = duration * 10 - currentTime * 10;\n  const remaingTime = (remained10x > 0 ? remained10x : 0) / 10;\n\n  return (\n    <div className={getClassName('video-controller', 'time')}>\n      {`${videoTimeFormat(currentTime)} / -${videoTimeFormat(remaingTime)}`}\n    </div>\n  );\n};\n\nconst VideoController = () => {\n  const { playPause, isPlay } = React.useContext(VideoPlayerCtx);\n\n  return (\n    <div className={getClassName('video-controller', 'wrapper')}>\n      <VideoProgress />\n      <div className={getClassName('video-controller')}>\n        <span\n          onClick={() => {\n            playPause();\n          }}\n          className={getClassName('video-controller', 'playButton')}\n        >\n          {isPlay ? <PauseOutlined /> : <CaretRightOutlined />}\n        </span>\n        <VideoTime />\n        <VideoSpeedButton />\n        <div className={getClassName('video-controller', 'holder')} />\n        <VideoPageChange />\n        <VideoHotKeys />\n      </div>\n    </div>\n  );\n};\n\nexport default VideoController;\n"],"names":["cTool","React","VideoPlayerCtx","decimalReserved","getClassName","useTranslation","CaretUpOutlined","CaretDownOutlined","ToolHotKey","hotkey","Pagination","PauseOutlined","CaretRightOutlined"],"mappings":"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"}

package/dist/components/videoPlayer/index.js

@@ -1 +1,267 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var React=require("react"),index$1=require("./components/controller/index.js"),dom=require("../../utils/dom.js"),lbAnnotation=require("@labelbee/lb-annotation"),utils=require("./utils.js"),index=require("../fileException/index.js");function _interopDefaultLegacy(r){return r&&typeof r=="object"&&"default"in r?r:{default:r}}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:r=>{},pageForward:()=>{}}),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(i){super(i);this.changePlaybackPate=e=>{this.videoElm&&(this.videoElm.playbackRate=e,this.setState({playbackRate:e}))},this.playPause=()=>{var e,t,a;((e=this.videoElm)==null?void 0:e.paused)?(t=this.videoElm)==null||t.play():(a=this.videoElm)==null||a.pause()},this.updateNextPlaybackRate=(e=!0)=>{const t=PLAYBACK_RATES.findIndex(s=>s===this.state.playbackRate);let a=e?Math.min(t+1,PLAYBACK_RATES.length-1):Math.max(t-1,0);this.changePlaybackPate(PLAYBACK_RATES[a])},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.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,a;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({currentTime:utils.decimalReserved((a=this.videoElm)==null?void 0:a.currentTime,1),buffered:s})}}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;if(this.videoElm){const t=utils.decimalReserved((e=this.videoElm)==null?void 0:e.duration,1);this.setState({duration:t})}},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 i;return(i=this.videoRef)==null?void 0:i.current}get videoSrc(){var i,e;const{imgIndex:t,imgList:a}=this.props;return t>-1&&(e=(i=a[t])==null?void 0:i.url)!=null?e:""}componentDidMount(){var i,e;window.addEventListener("keydown",this.keydown),((i=this.videoRef)==null?void 0:i.current)&&this.props.setVideoRef&&this.props.setVideoRef((e=this.videoRef)==null?void 0:e.current)}componentWillUnmount(){window.removeEventListener("keydown",this.keydown)}render(){const{isPlay:i,playbackRate:e,currentTime:t,duration:a,buffered:s,error:d}=this.state,{imgList:l,imgIndex:n,pageBackward:u,pageJump:h,pageForward:c,valid:f}=this.props,{playPause:o,updateNextPlaybackRate:v,onPause:m,onPlay:p,resetVideoData:y,setDuration:E,setCurrentTime:P,onError:R,videoRef:b,videoSrc:g}=this;return React__default.default.createElement(VideoPlayerCtx.Provider,{value:{videoRef:this.videoRef,isPlay:i,playPause:o,updateNextPlaybackRate:v,playbackRate:e,currentTime:t,duration:a,buffered:s,setCurrentTime:P,imgIndex:n,imgList:l,pageBackward:u,pageJump:h,pageForward:c}},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:b,className:dom.getClassName("video"),src:g,onPause:m,onPlay:p,onLoadedMetadata:y,onError:R,onDurationChange:E,width:"100%",height:"100%",onClick:o}),React__default.default.createElement(index,{fileType:"video",errorProps:{reloadImage:this.reload,backgroundColor:"#e2e2e2",ignoreOffsetY:!0,isError:d},invalidProps:{isValid:f}})),React__default.default.createElement(index$1,null)))}}exports.VideoPlayer=VideoPlayer,exports.VideoPlayerCtx=VideoPlayerCtx,exports.default=VideoPlayer;
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var index$1 = require('./components/controller/index.js');
+var dom = require('../../utils/dom.js');
+var lbAnnotation = require('@labelbee/lb-annotation');
+var utils = require('./utils.js');
+var index = require('../fileException/index.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const EKeyCode = lbAnnotation.cKeyCode.default;
+const VideoPlayerCtx = React__default["default"].createContext({
+  isPlay: false,
+  playPause: () => {
+  },
+  updateNextPlaybackRate: () => {
+  },
+  playbackRate: 1,
+  currentTime: 0,
+  duration: 0,
+  buffered: 0,
+  setCurrentTime: () => {
+  },
+  imgList: [],
+  imgIndex: -1,
+  pageBackward: () => {
+  },
+  pageJump: (page) => {
+  },
+  pageForward: () => {
+  }
+});
+const PER_INTERVAL = 50;
+const PER_FORWARD = 0.1;
+const PLAYBACK_RATES = [0.5, 1, 1.5, 2, 4, 6, 8, 16];
+class VideoPlayer extends React__default["default"].Component {
+  constructor(props) {
+    super(props);
+    this.changePlaybackPate = (playbackRate) => {
+      if (this.videoElm) {
+        this.videoElm.playbackRate = playbackRate;
+        this.setState({
+          playbackRate
+        });
+      }
+    };
+    this.playPause = () => {
+      var _a, _b, _c;
+      if ((_a = this.videoElm) == null ? void 0 : _a.paused) {
+        (_b = this.videoElm) == null ? void 0 : _b.play();
+      } else {
+        (_c = this.videoElm) == null ? void 0 : _c.pause();
+      }
+    };
+    this.updateNextPlaybackRate = (isForward = true) => {
+      const idx = PLAYBACK_RATES.findIndex((r) => r === this.state.playbackRate);
+      let nextIdx = isForward ? Math.min(idx + 1, PLAYBACK_RATES.length - 1) : Math.max(idx - 1, 0);
+      this.changePlaybackPate(PLAYBACK_RATES[nextIdx]);
+    };
+    this.fastForward = () => {
+      if (this.videoElm) {
+        this.setCurrentTime(this.videoElm.currentTime + PER_FORWARD);
+      }
+    };
+    this.rewind = () => {
+      if (this.videoElm) {
+        this.setCurrentTime(this.videoElm.currentTime - PER_FORWARD);
+      }
+    };
+    this.keydown = (event) => {
+      if (event.keyCode === EKeyCode.Space) {
+        event.preventDefault();
+        this.playPause();
+      }
+      if (event.keyCode === EKeyCode.Up) {
+        event.preventDefault();
+        this.updateNextPlaybackRate();
+      }
+      if (event.keyCode === EKeyCode.Down) {
+        event.preventDefault();
+        this.updateNextPlaybackRate(false);
+      }
+      if (event.keyCode === EKeyCode.Left) {
+        event.preventDefault();
+        this.rewind();
+      }
+      if (event.keyCode === EKeyCode.Right) {
+        event.preventDefault();
+        this.fastForward();
+      }
+    };
+    this.onPlay = () => {
+      this.setState({
+        isPlay: true
+      }, this.onVideoStart);
+    };
+    this.onPause = () => {
+      this.onVideoStopped();
+    };
+    this.onVideoStopped = () => {
+      this.setState({
+        isPlay: false
+      });
+      if (this.timeInterval) {
+        clearInterval(this.timeInterval);
+        this.timeInterval = void 0;
+      }
+      if (this.videoElm) {
+        this.setCurrentTime(this.videoElm.currentTime);
+      }
+    };
+    this.onVideoStart = () => {
+      this.timeInterval = window.setInterval(() => {
+        var _a, _b, _c;
+        if (this.videoElm) {
+          try {
+            if (((_a = this.videoElm) == null ? void 0 : _a.buffered.length) > 0) {
+              const buffered = (_b = this.videoElm) == null ? void 0 : _b.buffered.end(0);
+              this.setState({
+                currentTime: utils.decimalReserved((_c = this.videoElm) == null ? void 0 : _c.currentTime, 1),
+                buffered
+              });
+            }
+          } catch (error) {
+            console.error(error);
+          }
+        }
+      }, PER_INTERVAL);
+    };
+    this.resetVideoData = () => {
+      this.setState({
+        currentTime: 0,
+        buffered: 0,
+        error: false,
+        isPlay: false
+      });
+      if (this.videoElm) {
+        this.videoElm.playbackRate = this.state.playbackRate;
+      }
+      this.onVideoStopped();
+    };
+    this.setDuration = () => {
+      var _a;
+      if (this.videoElm) {
+        const duration = utils.decimalReserved((_a = this.videoElm) == null ? void 0 : _a.duration, 1);
+        this.setState({
+          duration
+        });
+      }
+    };
+    this.setCurrentTime = (currentTime) => {
+      if (this.videoElm) {
+        this.videoElm.currentTime = currentTime;
+        this.setState({
+          currentTime
+        });
+      }
+    };
+    this.reload = () => {
+      var _a;
+      (_a = this.videoElm) == null ? void 0 : _a.load();
+    };
+    this.onError = () => {
+      this.resetVideoData();
+      this.setState({error: true});
+    };
+    this.state = {
+      playbackRate: 1,
+      currentTime: 0,
+      isPlay: false,
+      duration: 0,
+      buffered: 0,
+      error: false
+    };
+    this.videoRef = React__default["default"].createRef();
+  }
+  get videoElm() {
+    var _a;
+    return (_a = this.videoRef) == null ? void 0 : _a.current;
+  }
+  get videoSrc() {
+    var _a, _b;
+    const {imgIndex, imgList} = this.props;
+    return imgIndex > -1 ? (_b = (_a = imgList[imgIndex]) == null ? void 0 : _a.url) != null ? _b : "" : "";
+  }
+  componentDidMount() {
+    var _a, _b;
+    window.addEventListener("keydown", this.keydown);
+    if (((_a = this.videoRef) == null ? void 0 : _a.current) && this.props.setVideoRef) {
+      this.props.setVideoRef((_b = this.videoRef) == null ? void 0 : _b.current);
+    }
+  }
+  componentWillUnmount() {
+    window.removeEventListener("keydown", this.keydown);
+  }
+  render() {
+    const {isPlay, playbackRate, currentTime, duration, buffered, error} = this.state;
+    const {imgList, imgIndex, pageBackward, pageJump, pageForward, valid} = this.props;
+    const {
+      playPause,
+      updateNextPlaybackRate,
+      onPause,
+      onPlay,
+      resetVideoData,
+      setDuration,
+      setCurrentTime,
+      onError,
+      videoRef,
+      videoSrc
+    } = this;
+    return /* @__PURE__ */ React__default["default"].createElement(VideoPlayerCtx.Provider, {
+      value: {
+        videoRef: this.videoRef,
+        isPlay,
+        playPause,
+        updateNextPlaybackRate,
+        playbackRate,
+        currentTime,
+        duration,
+        buffered,
+        setCurrentTime,
+        imgIndex,
+        imgList,
+        pageBackward,
+        pageJump,
+        pageForward
+      }
+    }, /* @__PURE__ */ React__default["default"].createElement("div", {
+      className: dom.getClassName("video-wrapper")
+    }, /* @__PURE__ */ React__default["default"].createElement("div", {
+      className: dom.getClassName("video-container")
+    }, /* @__PURE__ */ React__default["default"].createElement("video", {
+      ref: videoRef,
+      className: dom.getClassName("video"),
+      src: videoSrc,
+      onPause,
+      onPlay,
+      onLoadedMetadata: resetVideoData,
+      onError,
+      onDurationChange: setDuration,
+      width: "100%",
+      height: "100%",
+      onClick: playPause
+    }), /* @__PURE__ */ React__default["default"].createElement(index, {
+      fileType: "video",
+      errorProps: {
+        reloadImage: this.reload,
+        backgroundColor: "#e2e2e2",
+        ignoreOffsetY: true,
+        isError: error
+      },
+      invalidProps: {
+        isValid: valid
+      }
+    })), /* @__PURE__ */ React__default["default"].createElement(index$1, null)));
+  }
+}
+
+exports.VideoPlayer = VideoPlayer;
+exports.VideoPlayerCtx = VideoPlayerCtx;
+exports["default"] = VideoPlayer;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/videoPlayer/index.tsx"],"sourcesContent":["/**\n * @author Glenfiddish <edwinlee0927@hotmail.com>\n * @file Implement video player, including mouse and keyboard event\n * @date 2022-06-02\n */\n\nimport React from 'react';\nimport VideoController from './components/controller';\nimport { getClassName } from '@/utils/dom';\nimport { cKeyCode } from '@labelbee/lb-annotation';\nimport { IFileItem } from '@/types/data';\nimport { decimalReserved } from './utils';\nimport FileException from '../fileException';\n\nconst EKeyCode = cKeyCode.default;\n\nexport const VideoPlayerCtx = React.createContext<{\n  videoRef?: React.RefObject<HTMLVideoElement> | null;\n  isPlay: boolean;\n  playPause: () => void;\n  updateNextPlaybackRate: (isForward?: boolean) => void;\n  setCurrentTime: (time: number) => void;\n  playbackRate: number;\n  currentTime: number;\n  duration: number;\n  buffered: number;\n  imgList: IFileItem[];\n  imgIndex: number;\n  pageBackward: () => void;\n  pageJump: (page: string) => void;\n  pageForward: () => void;\n}>({\n  isPlay: false,\n  playPause: () => {},\n  updateNextPlaybackRate: () => {},\n  playbackRate: 1,\n  currentTime: 0,\n  duration: 0,\n  buffered: 0,\n  setCurrentTime: () => {},\n  imgList: [],\n  imgIndex: -1,\n  pageBackward: () => {},\n  pageJump: (page: string) => {},\n  pageForward: () => {},\n});\n\nconst PER_INTERVAL = 50;\nconst PER_FORWARD = 0.1;\nconst PLAYBACK_RATES = [0.5, 1, 1.5, 2, 4, 6, 8, 16];\n\ninterface IVideoPlayerProps {\n  imgList: IFileItem[];\n  imgIndex: number;\n  pageBackward: () => void;\n  pageJump: (page: string) => void;\n  pageForward: () => void;\n  valid: boolean;\n  setVideoRef?: (video: HTMLVideoElement) => void;\n}\n\ninterface IVideoPlayerState {\n  playbackRate: number;\n  currentTime: number;\n  isPlay: boolean;\n  duration: number;\n  buffered: number;\n  error: boolean;\n}\n\nexport class VideoPlayer extends React.Component<IVideoPlayerProps, IVideoPlayerState> {\n  public videoRef?: React.RefObject<HTMLVideoElement>;\n  public timeInterval?: number;\n\n  public constructor(props: IVideoPlayerProps) {\n    super(props);\n    this.state = {\n      playbackRate: 1,\n      currentTime: 0,\n      isPlay: false,\n      duration: 0,\n      buffered: 0,\n      error: false,\n    };\n    this.videoRef = React.createRef();\n  }\n\n  public get videoElm() {\n    return this.videoRef?.current;\n  }\n\n  public get videoSrc() {\n    const { imgIndex, imgList } = this.props;\n    return imgIndex > -1 ? imgList[imgIndex]?.url ?? '' : '';\n  }\n\n  public changePlaybackPate = (playbackRate: number) => {\n    if (this.videoElm) {\n      this.videoElm.playbackRate = playbackRate;\n      this.setState({\n        playbackRate,\n      });\n    }\n  };\n\n  public playPause = () => {\n    if (this.videoElm?.paused) {\n      this.videoElm?.play();\n    } else {\n      this.videoElm?.pause();\n    }\n  };\n\n  public updateNextPlaybackRate = (isForward = true) => {\n    const idx = PLAYBACK_RATES.findIndex((r) => r === this.state.playbackRate);\n    let nextIdx = isForward ? Math.min(idx + 1, PLAYBACK_RATES.length - 1) : Math.max(idx - 1, 0);\n    this.changePlaybackPate(PLAYBACK_RATES[nextIdx]);\n  };\n\n  public fastForward = () => {\n    if (this.videoElm) {\n      this.setCurrentTime(this.videoElm.currentTime + PER_FORWARD);\n    }\n  };\n\n  public rewind = () => {\n    if (this.videoElm) {\n      this.setCurrentTime(this.videoElm.currentTime - PER_FORWARD);\n    }\n  };\n\n  /**\n   * Implement Video's keydown\n   * Play / Pause           -   Space\n   * Rewind / FastForward   -   ⬅️  /  ➡️\n   * Speed                  -   ⬆️  /  ⬇\n   * @param event\n   */\n  public keydown = (event: KeyboardEvent) => {\n    if (event.keyCode === EKeyCode.Space) {\n      event.preventDefault();\n      this.playPause();\n    }\n\n    if (event.keyCode === EKeyCode.Up) {\n      event.preventDefault();\n      this.updateNextPlaybackRate();\n    }\n\n    if (event.keyCode === EKeyCode.Down) {\n      event.preventDefault();\n      this.updateNextPlaybackRate(false);\n    }\n\n    if (event.keyCode === EKeyCode.Left) {\n      event.preventDefault();\n      this.rewind();\n    }\n\n    if (event.keyCode === EKeyCode.Right) {\n      event.preventDefault();\n      this.fastForward();\n    }\n  };\n\n  public onPlay = () => {\n    this.setState(\n      {\n        isPlay: true,\n      },\n      this.onVideoStart,\n    );\n  };\n\n  public onPause = () => {\n    this.onVideoStopped();\n  };\n\n  public onVideoStopped = () => {\n    this.setState({\n      isPlay: false,\n    });\n\n    if (this.timeInterval) {\n      clearInterval(this.timeInterval);\n      this.timeInterval = undefined;\n    }\n\n    /** Due to speedrate can less than PER_INTERVAL, it need to set current time after stopped */\n    if (this.videoElm) {\n      this.setCurrentTime(this.videoElm.currentTime);\n    }\n  };\n\n  public onVideoStart = () => {\n    this.timeInterval = window.setInterval(() => {\n      if (this.videoElm) {\n        try {\n          if (this.videoElm?.buffered.length > 0) {\n            const buffered = this.videoElm?.buffered.end(0);\n\n            this.setState({\n              currentTime: decimalReserved(this.videoElm?.currentTime, 1),\n              buffered,\n            });\n          }\n        } catch (error) {\n          console.error(error);\n        }\n      }\n    }, PER_INTERVAL);\n  };\n\n  public resetVideoData = () => {\n    this.setState({\n      currentTime: 0,\n      buffered: 0,\n      error: false,\n      isPlay: false,\n    });\n\n    if (this.videoElm) {\n      this.videoElm.playbackRate = this.state.playbackRate;\n    }\n    this.onVideoStopped();\n  };\n\n  public setDuration = () => {\n    if (this.videoElm) {\n      const duration = decimalReserved(this.videoElm?.duration, 1);\n\n      this.setState({\n        duration,\n      });\n    }\n  };\n\n  public setCurrentTime = (currentTime: number) => {\n    if (this.videoElm) {\n      this.videoElm.currentTime = currentTime;\n      this.setState({\n        currentTime,\n      });\n    }\n  };\n\n  public reload = () => {\n    this.videoElm?.load();\n  };\n\n  public onError = () => {\n    this.resetVideoData();\n    this.setState({ error: true });\n  };\n\n  public componentDidMount() {\n    window.addEventListener('keydown', this.keydown);\n    if (this.videoRef?.current && this.props.setVideoRef) {\n      this.props.setVideoRef(this.videoRef?.current as HTMLVideoElement);\n    }\n  }\n\n  public componentWillUnmount() {\n    window.removeEventListener('keydown', this.keydown);\n  }\n\n  public render() {\n    const { isPlay, playbackRate, currentTime, duration, buffered, error } = this.state;\n    const { imgList, imgIndex, pageBackward, pageJump, pageForward, valid } = this.props;\n\n    const {\n      playPause,\n      updateNextPlaybackRate,\n      onPause,\n      onPlay,\n      resetVideoData,\n      setDuration,\n      setCurrentTime,\n      onError,\n      videoRef,\n      videoSrc,\n    } = this;\n\n    return (\n      <VideoPlayerCtx.Provider\n        // eslint-disable-next-line react/jsx-no-constructed-context-values\n        value={{\n          videoRef: this.videoRef,\n          isPlay,\n          playPause,\n          updateNextPlaybackRate,\n          playbackRate,\n          currentTime,\n          duration,\n          buffered,\n          setCurrentTime,\n          imgIndex,\n          imgList,\n          pageBackward,\n          pageJump,\n          pageForward,\n        }}\n      >\n        <div className={getClassName('video-wrapper')}>\n          <div className={getClassName('video-container')}>\n            <video\n              ref={videoRef}\n              className={getClassName('video')}\n              src={videoSrc}\n              onPause={onPause}\n              onPlay={onPlay}\n              onLoadedMetadata={resetVideoData}\n              onError={onError}\n              onDurationChange={setDuration}\n              width='100%'\n              height='100%'\n              onClick={playPause}\n            />\n\n            <FileException\n              fileType='video'\n              errorProps={{\n                reloadImage: this.reload,\n                backgroundColor: '#e2e2e2',\n                ignoreOffsetY: true,\n                isError: error,\n              }}\n              invalidProps={{\n                isValid: valid,\n              }}\n            />\n          </div>\n          <VideoController />\n        </div>\n      </VideoPlayerCtx.Provider>\n    );\n  }\n}\n\nexport default VideoPlayer;\n"],"names":["cKeyCode","React","decimalReserved","getClassName","FileException","VideoController"],"mappings":"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"}

package/dist/components/videoPlayer/utils.js

@@ -1 +1,59 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const findTagLabel=(e,r,l)=>{const t=l.find(a=>a.value===e),n=t.subSelected.find(a=>a.value===r);return{keyLabel:t.key,valueLabel:n.key}},tagsSortThruInputList=(e,r)=>e.sort((l,t)=>{const n=r.findIndex(s=>l===s.value),a=r.findIndex(s=>t===s.value);return n-a}),result2LabelKey=(e,r)=>{var l;try{return(l=e==null?void 0:e.reduce((t,n)=>(tagsSortThruInputList(Object.keys(n.result),r).forEach(a=>{var s;const u=(s=n.result[a])==null?void 0:s.split(";");findLabelFromValuesArray(u,a,r,t)}),t),[]))!=null?l:[]}catch(t){return[]}},findLabelFromValuesArray=(e,r,l,t)=>{e.forEach(n=>{const{keyLabel:a,valueLabel:s}=findTagLabel(r,n,l),u=t.find(o=>o.keyLabel===a);u?u.valuesLabelArray.push(s):t.push({keyLabel:a,valuesLabelArray:[s]})})},getKeyCodeNumber=e=>e<=57&&e>=49?e-48:e<=105&&e>=97?e-96:0,decimalReserved=(e,r=2)=>typeof e=="number"?parseFloat(e.toFixed(r)):e;exports.decimalReserved=decimalReserved,exports.findTagLabel=findTagLabel,exports.getKeyCodeNumber=getKeyCodeNumber,exports.result2LabelKey=result2LabelKey,exports.tagsSortThruInputList=tagsSortThruInputList;
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const findTagLabel = (key, value, inputList) => {
+  const primaryTagConfig = inputList.find((i) => i.value === key);
+  const secondaryTagConfig = primaryTagConfig.subSelected.find((i) => i.value === value);
+  return {keyLabel: primaryTagConfig.key, valueLabel: secondaryTagConfig.key};
+};
+const tagsSortThruInputList = (tagsKeys, inputList) => {
+  return tagsKeys.sort((key1, key2) => {
+    const key1Idx = inputList.findIndex((input) => key1 === input.value);
+    const key2Idx = inputList.findIndex((input) => key2 === input.value);
+    return key1Idx - key2Idx;
+  });
+};
+const result2LabelKey = (result, inputList) => {
+  var _a;
+  try {
+    return (_a = result == null ? void 0 : result.reduce((exitsTags, res) => {
+      tagsSortThruInputList(Object.keys(res.result), inputList).forEach((key) => {
+        var _a2;
+        const valuesArray = (_a2 = res.result[key]) == null ? void 0 : _a2.split(";");
+        findLabelFromValuesArray(valuesArray, key, inputList, exitsTags);
+      });
+      return exitsTags;
+    }, [])) != null ? _a : [];
+  } catch (error) {
+    return [];
+  }
+};
+const findLabelFromValuesArray = (valuesArray, key, inputList, exitsTags) => {
+  valuesArray.forEach((value) => {
+    const {keyLabel, valueLabel} = findTagLabel(key, value, inputList);
+    const tagHasAssign = exitsTags.find((i) => i.keyLabel === keyLabel);
+    if (tagHasAssign) {
+      tagHasAssign.valuesLabelArray.push(valueLabel);
+    } else {
+      exitsTags.push({keyLabel, valuesLabelArray: [valueLabel]});
+    }
+  });
+};
+const getKeyCodeNumber = (keyCode) => {
+  if (keyCode <= 57 && keyCode >= 49) {
+    return keyCode - 48;
+  }
+  if (keyCode <= 105 && keyCode >= 97) {
+    return keyCode - 96;
+  }
+  return 0;
+};
+const decimalReserved = (num, places = 2) => typeof num === "number" ? parseFloat(num.toFixed(places)) : num;
+
+exports.decimalReserved = decimalReserved;
+exports.findTagLabel = findTagLabel;
+exports.getKeyCodeNumber = getKeyCodeNumber;
+exports.result2LabelKey = result2LabelKey;
+exports.tagsSortThruInputList = tagsSortThruInputList;
+//# sourceMappingURL=utils.js.map

package/dist/components/videoPlayer/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../src/components/videoPlayer/utils.ts"],"sourcesContent":["import type { ITagLabelsArray } from './types';\n\n/**\n * Find key and value to display label through inputList\n * @param key\n * @param value\n * @param inputList\n */\nexport const findTagLabel = (key: string, value: string, inputList: any[]) => {\n  const primaryTagConfig = inputList.find((i) => i.value === key);\n  const secondaryTagConfig = primaryTagConfig.subSelected.find(\n    (i: { value: string }) => i.value === value,\n  );\n  return { keyLabel: primaryTagConfig.key, valueLabel: secondaryTagConfig.key };\n};\n\n/**\n * Sort tags through inputList\n * @param tagsKeys\n * @param inputList\n */\nexport const tagsSortThruInputList = (tagsKeys: string[], inputList: any[]) => {\n  return tagsKeys.sort((key1, key2) => {\n    const key1Idx = inputList.findIndex((input) => key1 === input.value);\n    const key2Idx = inputList.findIndex((input) => key2 === input.value);\n    return key1Idx - key2Idx;\n  });\n};\n\n/**\n * Convent result's array to array of showing the labels\n * @param result\n * @param inputList\n * @returns {ITagLabelsArray}\n */\nexport const result2LabelKey = (result: any[], inputList: any[]) => {\n  try {\n    return (\n      result?.reduce((exitsTags: ITagLabelsArray, res: { result: { [key: string]: string } }) => {\n        tagsSortThruInputList(Object.keys(res.result), inputList).forEach((key) => {\n          const valuesArray = res.result[key]?.split(';');\n          findLabelFromValuesArray(valuesArray, key, inputList, exitsTags);\n        });\n        return exitsTags;\n      }, []) ?? []\n    );\n  } catch (error) {\n    return [];\n  }\n};\n\n/**\n * find label from valuesArray and push to exitsTags\n * @param valuesArray\n * @param key\n * @param inputList\n * @param exitsTags\n */\nconst findLabelFromValuesArray = (\n  valuesArray: string[],\n  key: string,\n  inputList: any[],\n  exitsTags: ITagLabelsArray,\n) => {\n  valuesArray.forEach((value) => {\n    const { keyLabel, valueLabel } = findTagLabel(key, value, inputList);\n    const tagHasAssign = exitsTags.find((i) => i.keyLabel === keyLabel);\n    if (tagHasAssign) {\n      tagHasAssign.valuesLabelArray.push(valueLabel);\n    } else {\n      exitsTags.push({ keyLabel, valuesLabelArray: [valueLabel] });\n    }\n  });\n};\n\n/**\n * Get key number through keyCode, Such as 49(keycode) => 1(number)\n * @param {Number} keyCode\n * @returns {Number} keyCode in scope if it greater than 0\n */\nexport const getKeyCodeNumber = (keyCode: number) => {\n  if (keyCode <= 57 && keyCode >= 49) {\n    return keyCode - 48;\n  }\n\n  if (keyCode <= 105 && keyCode >= 97) {\n    return keyCode - 96;\n  }\n\n  return 0;\n};\n\n/**\n * Preserve decimals for number\n * @param num\n * @param places\n * @returns {Number}\n */\nexport const decimalReserved = (num: number, places = 2) =>\n  typeof num === 'number' ? parseFloat(num.toFixed(places)) : num;\n"],"names":[],"mappings":"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"}

package/dist/configureStore.js

@@ -1 +1,16 @@
-"use strict";var redux=require("redux"),thunk=require("redux-thunk"),index=require("./store/index.js");function _interopDefaultLegacy(e){return e&&typeof e=="object"&&"default"in e?e:{default:e}}var thunk__default=_interopDefaultLegacy(thunk);function configureStore(){return redux.createStore(index.rootReducer,redux.applyMiddleware(thunk__default.default))}module.exports=configureStore;
+'use strict';
+
+var redux = require('redux');
+var thunk = require('redux-thunk');
+var index = require('./store/index.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var thunk__default = /*#__PURE__*/_interopDefaultLegacy(thunk);
+
+function configureStore() {
+  return redux.createStore(index.rootReducer, redux.applyMiddleware(thunk__default["default"]));
+}
+
+module.exports = configureStore;
+//# sourceMappingURL=configureStore.js.map

package/dist/configureStore.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"configureStore.js","sources":["../src/configureStore.ts"],"sourcesContent":["import { createStore, applyMiddleware } from 'redux';\nimport thunk from 'redux-thunk';\nimport { rootReducer } from './store';\n\nexport default function configureStore() {\n  return createStore(rootReducer, applyMiddleware(thunk));\n}\n"],"names":["createStore","rootReducer","applyMiddleware","thunk"],"mappings":";;;;;;;;;;AAIyC,SAAA,cAAA,GAAA;AACvC,EAAO,OAAAA,iBAAA,CAAYC,mBAAaC,qBAAgB,CAAAC,yBAAA,CAAA,CAAA,CAAA;AAAA;;;;"}

package/dist/constant/index.js

@@ -1 +1,32 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.EStepType=void 0,function(r){r[r.Check=0]="Check",r[r.ANNOTATION=1]="ANNOTATION",r[r.QUALITY_INSPECTION=2]="QUALITY_INSPECTION",r[r.PRE_ANNOTATION=3]="PRE_ANNOTATION",r[r.MANUAL_CORRECTION=4]="MANUAL_CORRECTION"}(exports.EStepType||(exports.EStepType={})),exports.ESubmitType=void 0,function(r){r[r.Backward=1]="Backward",r[r.Forward=2]="Forward",r[r.Jump=3]="Jump",r[r.Quit=4]="Quit",r[r.Export=5]="Export",r[r.StepChanged=6]="StepChanged",r[r.Save=7]="Save",r[r.BatchUpdateTrackID=8]="BatchUpdateTrackID",r[r.BatchUpdateImgList=9]="BatchUpdateImgList",r[r.SyncImgList=10001]="SyncImgList",r[r.SyncCurrentPageData=10002]="SyncCurrentPageData"}(exports.ESubmitType||(exports.ESubmitType={}));const prefix="bee",componentCls=`${prefix}-component`;exports.componentCls=componentCls,exports.prefix=prefix;
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+exports.EStepType = void 0;
+(function(EStepType2) {
+  EStepType2[EStepType2["Check"] = 0] = "Check";
+  EStepType2[EStepType2["ANNOTATION"] = 1] = "ANNOTATION";
+  EStepType2[EStepType2["QUALITY_INSPECTION"] = 2] = "QUALITY_INSPECTION";
+  EStepType2[EStepType2["PRE_ANNOTATION"] = 3] = "PRE_ANNOTATION";
+  EStepType2[EStepType2["MANUAL_CORRECTION"] = 4] = "MANUAL_CORRECTION";
+})(exports.EStepType || (exports.EStepType = {}));
+exports.ESubmitType = void 0;
+(function(ESubmitType2) {
+  ESubmitType2[ESubmitType2["Backward"] = 1] = "Backward";
+  ESubmitType2[ESubmitType2["Forward"] = 2] = "Forward";
+  ESubmitType2[ESubmitType2["Jump"] = 3] = "Jump";
+  ESubmitType2[ESubmitType2["Quit"] = 4] = "Quit";
+  ESubmitType2[ESubmitType2["Export"] = 5] = "Export";
+  ESubmitType2[ESubmitType2["StepChanged"] = 6] = "StepChanged";
+  ESubmitType2[ESubmitType2["Save"] = 7] = "Save";
+  ESubmitType2[ESubmitType2["BatchUpdateTrackID"] = 8] = "BatchUpdateTrackID";
+  ESubmitType2[ESubmitType2["BatchUpdateImgList"] = 9] = "BatchUpdateImgList";
+  ESubmitType2[ESubmitType2["SyncImgList"] = 10001] = "SyncImgList";
+  ESubmitType2[ESubmitType2["SyncCurrentPageData"] = 10002] = "SyncCurrentPageData";
+})(exports.ESubmitType || (exports.ESubmitType = {}));
+const prefix = "bee";
+const componentCls = `${prefix}-component`;
+
+exports.componentCls = componentCls;
+exports.prefix = prefix;
+//# sourceMappingURL=index.js.map

package/dist/constant/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/constant/index.tsx"],"sourcesContent":["export enum EStepType {\n  Check = 0, // 查看模式\n  ANNOTATION = 1, // 正常标注\n  QUALITY_INSPECTION, // 标注质检\n  PRE_ANNOTATION, // 预标注\n  MANUAL_CORRECTION, // 人工修正\n}\n\nexport enum ESubmitType {\n  Backward = 1, // 向前翻页\n  Forward = 2, // 向后翻页\n  Jump = 3, // 分页器的跳页翻页\n  Quit = 4, // 左上角后退触发\n  Export = 5, // 数据导出时\n  StepChanged = 6, // 切换步骤\n  Save = 7, // 点击保存\n  BatchUpdateTrackID = 8, // 批量更改 TrackID (PointCloud)\n  BatchUpdateImgList = 9, // 批量更改 ImgList (PointCloud)\n  SyncImgList = 10001, // 仅更改数据\n  SyncCurrentPageData = 10002, // 同步当页数据\n}\n// css 命名前缀\nexport const prefix = 'bee';\nexport const componentCls = `${prefix}-component`;\n"],"names":["EStepType","ESubmitType"],"mappings":";;;;AAAYA,2BAAA;AAAL,CAAA,SAAK,UAAL,EAAA;AACL,EAAA,UAAA,CAAA,UAAA,CAAA,OAAA,CAAA,GAAQ,CAAR,CAAA,GAAA,OAAA,CAAA;AACA,EAAA,UAAA,CAAA,UAAA,CAAA,YAAA,CAAA,GAAa,CAAb,CAAA,GAAA,YAAA,CAAA;AACA,EAAA,UAAA,CAAA,UAAA,CAAA,oBAAA,CAAA,GAAA,CAAA,CAAA,GAAA,oBAAA,CAAA;AACA,EAAA,UAAA,CAAA,UAAA,CAAA,gBAAA,CAAA,GAAA,CAAA,CAAA,GAAA,gBAAA,CAAA;AACA,EAAA,UAAA,CAAA,UAAA,CAAA,mBAAA,CAAA,GAAA,CAAA,CAAA,GAAA,mBAAA,CAAA;AAAA,CALU,EAAAA,iBAAA,KAAAA,iBAAA,GAAA,EAAA,CAAA,CAAA,CAAA;AAQAC,6BAAA;AAAL,CAAA,SAAK,YAAL,EAAA;AACL,EAAA,YAAA,CAAA,YAAA,CAAA,UAAA,CAAA,GAAW,CAAX,CAAA,GAAA,UAAA,CAAA;AACA,EAAA,YAAA,CAAA,YAAA,CAAA,SAAA,CAAA,GAAU,CAAV,CAAA,GAAA,SAAA,CAAA;AACA,EAAA,YAAA,CAAA,YAAA,CAAA,MAAA,CAAA,GAAO,CAAP,CAAA,GAAA,MAAA,CAAA;AACA,EAAA,YAAA,CAAA,YAAA,CAAA,MAAA,CAAA,GAAO,CAAP,CAAA,GAAA,MAAA,CAAA;AACA,EAAA,YAAA,CAAA,YAAA,CAAA,QAAA,CAAA,GAAS,CAAT,CAAA,GAAA,QAAA,CAAA;AACA,EAAA,YAAA,CAAA,YAAA,CAAA,aAAA,CAAA,GAAc,CAAd,CAAA,GAAA,aAAA,CAAA;AACA,EAAA,YAAA,CAAA,YAAA,CAAA,MAAA,CAAA,GAAO,CAAP,CAAA,GAAA,MAAA,CAAA;AACA,EAAA,YAAA,CAAA,YAAA,CAAA,oBAAA,CAAA,GAAqB,CAArB,CAAA,GAAA,oBAAA,CAAA;AACA,EAAA,YAAA,CAAA,YAAA,CAAA,oBAAA,CAAA,GAAqB,CAArB,CAAA,GAAA,oBAAA,CAAA;AACA,EAAA,YAAA,CAAA,YAAA,CAAA,aAAA,CAAA,GAAc,KAAd,CAAA,GAAA,aAAA,CAAA;AACA,EAAA,YAAA,CAAA,YAAA,CAAA,qBAAA,CAAA,GAAsB,KAAtB,CAAA,GAAA,qBAAA,CAAA;AAAA,CAXU,EAAAA,mBAAA,KAAAA,mBAAA,GAAA,EAAA,CAAA,CAAA,CAAA;AAcL,MAAM,MAAS,GAAA,MAAA;AACf,MAAM,eAAe,CAAG,EAAA,MAAA,CAAA,UAAA;;;;;"}