@labelbee/lb-components 1.24.0-alpha.48 → 1.24.0-alpha.49

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=50,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;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;

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

@@ -1 +1 @@
-import{CaretUpOutlined as k,CaretDownOutlined as x}from"@ant-design/icons";import t,{useState as I,useEffect as K}from"react";import d from"./index.module.scss.js";import{cKeyCode as L,CommonToolUtils as S}from"@labelbee/lb-annotation";import{useTranslation as T}from"react-i18next";const E=L.default,m=[.5,1,1.5,2,4,6,8,16],A=[.5,.75,1,1.25,1.5,1.75,2];var c;(function(e){e[e.Video=0]="Video",e[e.Audio=1]="Audio"})(c||(c={}));var f;(function(e){e[e.Increase=0]="Increase",e[e.Reduce=1]="Reduce"})(f||(f={}));const u={[0]:m,[1]:A},Y=e=>{const{onChange:_,playerType:C}=e,{t:p}=T(),o=u[C],P=o.slice(-1)[0],R=o[0],[s,y]=I(1),r=n=>{const a=n===0?1:-1;if(a===1&&s===P||a===-1&&s===R)return;const w=o.findIndex(D=>D===s)+a,l=o[w];y(l),_(l)},i=n=>{!S.hotkeyFilter(n)||(n.keyCode===E.Up&&r(0),n.keyCode===E.Down&&r(1))};return K(()=>(window.addEventListener("keydown",i),()=>window.removeEventListener("keydown",i))),t.createElement("div",{className:d.speedControllerWrap},t.createElement("span",{style:{display:"flex",alignItems:"center"}},t.createElement("span",{style:{fontSize:12}},p("Speed")),s,"x"),t.createElement("span",{className:d.speedController},t.createElement(k,{onClick:()=>r(0)}),t.createElement(x,{onClick:()=>r(1)})))};export{A as AUDIO_PLAYBACK_RATE_SPEED,c as EPlayerType,u as PLAYER_TYPE_RATE_SPEED,m as VIDEO_PLAYBACK_RATE_SPEED,Y as default};
+import{CaretUpOutlined as k,CaretDownOutlined as x}from"@ant-design/icons";import t,{useState as I,useEffect as K}from"react";import d from"./index.module.scss.js";import{cKeyCode as L,CommonToolUtils as S}from"@labelbee/lb-annotation";import{useTranslation as T}from"react-i18next";const E=L.default,m=[.1,.2,.3,.4,.5,1,1.5,2,4,6,8,16],A=[.5,.75,1,1.25,1.5,1.75,2];var c;(function(e){e[e.Video=0]="Video",e[e.Audio=1]="Audio"})(c||(c={}));var f;(function(e){e[e.Increase=0]="Increase",e[e.Reduce=1]="Reduce"})(f||(f={}));const u={[0]:m,[1]:A},Y=e=>{const{onChange:_,playerType:C}=e,{t:p}=T(),o=u[C],P=o.slice(-1)[0],R=o[0],[s,y]=I(1),r=n=>{const a=n===0?1:-1;if(a===1&&s===P||a===-1&&s===R)return;const w=o.findIndex(D=>D===s)+a,l=o[w];y(l),_(l)},i=n=>{!S.hotkeyFilter(n)||(n.keyCode===E.Up&&r(0),n.keyCode===E.Down&&r(1))};return K(()=>(window.addEventListener("keydown",i),()=>window.removeEventListener("keydown",i))),t.createElement("div",{className:d.speedControllerWrap},t.createElement("span",{style:{display:"flex",alignItems:"center"}},t.createElement("span",{style:{fontSize:12}},p("Speed")),s,"x"),t.createElement("span",{className:d.speedController},t.createElement(k,{onClick:()=>r(0)}),t.createElement(x,{onClick:()=>r(1)})))};export{A as AUDIO_PLAYBACK_RATE_SPEED,c as EPlayerType,u as PLAYER_TYPE_RATE_SPEED,m as VIDEO_PLAYBACK_RATE_SPEED,Y as default};

package/es/components/videoPlayer/index.js

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

package/package.json

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