import React, { Component } from "react"
import "./allVideoCom.css"
import flvjs from "flv.js";
import DPlayer from 'dplayer';
export default class AllVideoCom extends Component {
    constructor(props) {
        super(props);
        this.state = {
            id: new Date().getTime() + Math.floor(Math.random() * (10000 - 1)) + 1,
            videoUrl: ""
        }
    }
    shouldComponentUpdate(nextProps) {
        if (nextProps.videoUrl !== this.props.videoUrl || !this.state.videoUrl) {
            if (nextProps.videoUrl) {
                this.playerFlvVideo(nextProps.videoUrl)
            }

            return true
        }
        return false
    }
    componentDidMount() {
        if (this.props.videoUrl) {
            this.playerFlvVideo(this.props.videoUrl)
        }
    }
    playerFlvVideo(videoUrl) {
        this.setState({ videoUrl })
        if (!this.dp) {
            this.createFlvPlayer(videoUrl)
        } else {
            this.dp.destroy();
            this.flvPlayer.pause();
            this.flvPlayer.unload();
            this.flvPlayer.detachMediaElement();
            this.flvPlayer.destroy();
            clearInterval(this.timer)
            this.timer = null;
            this.flvPlayer = null;
            this.dp = null;
            this.createFlvPlayer(videoUrl)
        }
    }
    createFlvPlayer(videoUrl) {
        let { id } = this.state
        let { volume=0, autoplay = true, config = {}, maxCount = 5, testingTimer = 30 } = this.props;
        this.count = 0;//重连次数
        this.dp = new DPlayer({
            container: document.getElementById(id),
            screenshot: true,
            autoplay: autoplay,
            airplay: true,
            mutex: false,
            volume: volume,
            video: {
                url: videoUrl,
                type: "flv",
                type: "customFlv",
                customType: {
                    customFlv: (video) => {
                        this.flvPlayer = flvjs.createPlayer({
                            type: 'flv',
                            url: video.src,
                        }, Object.assign({
                            autoCleanupSourceBuffer: true
                        }, config));
                        this.flvPlayer.attachMediaElement(video);
                        this.flvPlayer.load();
                        this.timer = setInterval(() => {
                            this.getNewVideo()
                        }, 1000 * testingTimer)
                        this.flvPlayer.on("error", (e) => {
                            if (e && e === "NetworkError") {
                                this.count++
                                if (parseInt(maxCount) >= this.count) {
                                    this.flvPlayer.pause();
                                    this.flvPlayer.unload();
                                    this.flvPlayer.detachMediaElement();
                                    setTimeout(() => {
                                        this.flvPlayer.attachMediaElement(video);
                                        this.flvPlayer.load();
                                        this.flvPlayer.play();
                                    }, 500)
                                } else {
                                    clearInterval(this.timer)
                                    this.timer = null;
                                    console.log("重连失败")
                                }
                            }
                        })
                    },
                },
            },
        });
    }
    componentWillUnmount() {
        if (this.timer) {
            clearInterval(this.timer)
            this.timer = null;
        }
    }
    getNewVideo() {
        let { id } = this.state
        var element = document.getElementById(id);
        var videoElement = element.getElementsByTagName("video")[0];
        if (videoElement) {
            let buffered = videoElement.buffered
            let newest_point = -1
            for (let i = 0; i < buffered.length; i++) {
                let to = buffered.end(i)
                if (to > newest_point) {
                    videoElement.currentTime = to - 0.1
                }
            }
        }
    }
    render() {
        let { id } = this.state;
        return (
            <div className="dplayerWaikuang">
                <div id={id} style={{ width: "100%", height: "100%" }}></div>
            </div>
        )
    }
}