@labelbee/lb-components 1.16.0-alpha.1 → 1.16.0-alpha.10

package/dist/components/videoPlayer/index.js

@@ -1 +1 @@
-"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:!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.default,null)))}}exports.VideoPlayer=VideoPlayer,exports.VideoPlayerCtx=VideoPlayerCtx,exports.default=VideoPlayer;