/**
 * 萤石视频直播（基于萤石云iframe模式，使用方式简单）
 * 官方参考：https://open.ys7.com/console/ezopenIframe.html
 */
'use strict';

import React, { useState } from 'react';
import { connect } from 'react-redux';
import { PlayCircleTwoTone } from '@ant-design/icons'

const YSIframePlayer = props => {

    const { containerId, height, width, url, autoplay, audio, videoState, ysToken } = props;


    const [play, setPlay] = useState(false)

    const at = ysToken
    if (!url || !at) return null;
    // const src = `https://open.ys7.com/ezopen/h5/iframe?audio=${audio ? '1' : '0'}&url=${url}&autoplay=${autoplay || 1}&accessToken=${at}`
    // const src = `https://open.ys7.com/ezopen/h5/iframe?audio=1&url=${url}&autoplay=${autoplay || 1}&accessToken=${at}`
    const src = `https://open.ys7.com/ezopen/h5/iframe?audio=${audio ? '1' : '0'}&url=${url}&autoplay=${play ? '1' : "0"}&accessToken=${at}`

    return (
        <div
            style={{ position: 'relative', height: '100%', width: '100%' }}>
            {
                play == false ?
                    <div style={{
                        height: width || 300, width: width || 400, position: 'absolute', top: 0, background: '#000',
                        display: 'flex', justifyContent: 'center', alignItems: 'center', color: '#fff'
                    }}>
                        <PlayCircleTwoTone style={{ fontSize: 48 }} onClick={() => {
                            setPlay(true)
                        }} />
                    </div>
                    :
                    <iframe
                        frameBorder="0"
                        id={containerId || 'myPlayer'}
                        src={src}
                        // https://open.ys7.com/doc/zh/book/index/live_proto.html 单个播放器的长宽比例限制最小为{width: 400px;height: 300px;}
                        width={width || 400}
                        height={height || 300}
                        allowFullScreen
                        wmode="transparent"
                    >
                    </iframe>
            }
            {
                videoState && videoState.status == 0 ?
                    <div style={{
                        height: width || 300, width: width || 400, position: 'absolute', top: 0, background: '#000',
                        display: 'flex', justifyContent: 'center', alignItems: 'center', color: '#fff'
                    }}>
                        设备中断，正在处理中...
                    </div>
                    : ''
            }
        </div>
    )
}

function mapStateToProps (state) {
    const { auth, } = state;
    return {
        user: auth.user,
    };
}

export default connect(mapStateToProps)(YSIframePlayer);