pixuireactcomponents 1.2.2 → 1.2.31

package/ui/components/videoplayer/VideoPlayer.tsx

@@ -1,200 +0,0 @@
-import { Component, createRef, CSSProperties } from 'preact';
-import { Images } from '../../sample/Images';
-import videoLess from './../../sample/less/video.less';
-
-const videoWrapperStyle: CSSProperties = {
-    width: '100%',
-    height: '100%',
-    // backgroundColor: '#FFF00066'
-};
-
-const screenClickerStyle: CSSProperties = {
-    position: 'absolute',
-    width: '100%',
-    height: '100%',
-};
-
-const loadingContainerStyle: CSSProperties = {
-    position: 'absolute',
-    width: '100%',
-    height: '100%',
-    backgroundColor: 'rgba(0, 0, 0)',
-};
-
-const controllerBarStyle: CSSProperties = {
-    position: 'absolute',
-    bottom: '0px',
-    height: '80px',
-    width: '100%',
-    backgroundColor: 'rgba(0, 0, 0, 0.7)'
-};
-
-const playIconStyle: CSSProperties = {
-    width: '48px',
-    height: '48px',
-};
-
-const reloadIconStyle: CSSProperties = {
-    width: '34px',
-    height: '34px',
-    marginLeft: '40px',
-};
-
-export interface VideoPlayerProps {
-    playUrl: string;
-    onPlaying: Function | null;
-    onError: Function | null;
-    onNetworkFailed: Function | null;
-    onEnded: Function | null;
-}
-
-// 4个视频播放态
-enum VideoStatus {
-    Loading, LoadError, Playing, Pause
-}
-
-export class VideoPlayer extends Component<
-    {
-        config: VideoPlayerProps;
-    },
-    {
-        showLoadingBar: boolean;
-        showBottomBar: boolean;
-        videoStatus: VideoStatus;
-    }>{
-    private refVideo: any = createRef()
-    private hideTopBottomBarTimer: any = null
-
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            showLoadingBar: true,
-            showBottomBar: false,
-            videoStatus: VideoStatus.Loading
-        };
-    }
-
-    componentWillUnmount() {
-    }
-
-    onplaying = () => {
-        // 加载第一帧画面
-        console.warn('----------first frame');
-        this.setState({
-            showLoadingBar: false,
-            videoStatus: VideoStatus.Playing
-        });
-    }
-
-    onerror = () => {
-        console.warn('----------onerror');
-        // 播放错误，比如给一个无法播放的url
-    }
-
-    onnetworkfailed = () => {
-        console.warn('----------onnetworkfailed');
-
-    }
-
-    onended = () => {
-        // 视频播放结束
-        console.warn('-----------end');
-        this.refVideo.current.load();
-    }
-
-    onScreenClick = () => {
-        if (this.state.showBottomBar) {   // 当前已显示bottomBar
-            this.clearHideBottomBarTimer();
-            this.setState({
-                showBottomBar: false
-            });
-        }
-        else {   // 当前未显示bottomBar
-            this.setState({
-                showBottomBar: true
-            }, this.setHideBottomBarTimer);
-        }
-    }
-
-    // 3秒钟自动隐藏TopBar BottomBar
-    setHideBottomBarTimer = () => {
-        this.clearHideBottomBarTimer();
-
-        let outThis = this;
-        this.hideTopBottomBarTimer = setTimeout(function () {
-            outThis.setState({
-                showBottomBar: false
-            });
-        }, 3000);
-    }
-
-    //  清理3秒隐藏TopBar BottomBar的计时器
-    clearHideBottomBarTimer = () => {
-        if (this.hideTopBottomBarTimer != null) {
-            clearTimeout(this.hideTopBottomBarTimer);
-            this.hideTopBottomBarTimer = null;
-        }
-    }
-
-    switchPlayState = () => {
-        if (this.state.videoStatus == VideoStatus.Playing) {
-            this.onPause();
-        }
-        else if (this.state.videoStatus == VideoStatus.Pause) {
-            this.onPlay();
-        }
-    }
-
-    onPause = () => {
-        this.refVideo.current.pause();
-        this.setState({
-            videoStatus: VideoStatus.Pause
-        });
-    }
-
-    onPlay = () => {
-        this.refVideo.current.play();
-
-        this.setState({
-            videoStatus: VideoStatus.Playing
-        });
-    }
-
-    reloadVideo = () => {
-        this.refVideo.current.load();
-        this.setState({
-            videoStatus: VideoStatus.Loading,
-            showLoadingBar: true,
-            showBottomBar: false
-        });
-    }
-
-    render() {
-        let playIconUrl = this.state.videoStatus == VideoStatus.Playing ? Images.video_pause : Images.video_play;
-
-
-        return (
-            <div style={videoWrapperStyle}>
-                <video ref={this.refVideo} src={this.props.config.playUrl} object-fit="no" autoPlay="autoplay" muted
-                    style={{ width: '100%', height: '100%' }}
-                    onplaying={this.onplaying} onerror={this.onerror}
-                    onnetworkfailed={this.onnetworkfailed} onended={this.onended}>
-                </video>
-                <div style={screenClickerStyle} onClick={this.onScreenClick}></div>
-                {this.state.showLoadingBar ?
-                    <div style={loadingContainerStyle} className={videoLess.row_center_center}>
-                        <img src={Images.loading} style={{ witdh: '42px', height: '42px' }} className={videoLess.loading_anim} />
-                    </div> : null
-                }
-                {this.state.showBottomBar ?
-                    <div style={controllerBarStyle}>
-                        <div style={{ height: '100%', marginLeft: '40px', flexGrow: 2 }} className={videoLess.row_start_center}>
-                            <img src={playIconUrl} style={playIconStyle} onClick={this.switchPlayState} />
-                            <img src={Images.video_reload} style={reloadIconStyle} onClick={this.reloadVideo} />
-                        </div>
-                    </div> : null}
-            </div>
-        );
-    }
-}