<!DOCTYPE html>
<html>
<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <title>直播监控</title>
    <link rel="stylesheet" href="<?= RESOURCES ?>/layuiadmin/layuiadmin/layui/css/layui.css">
    <link rel="stylesheet" href="<?= RESOURCES ?>/live/css/style.css">
</head>
<body>
<div class="live-list">
    <div class="mainContainer">
        <video id="videoElement" class="centeredVideo" controls autoplay data-url="<?=$live['play_url']?>">
            Your browser is too old which doesn't support HTML5 video.
        </video>
        <ul class="sys">
            <li>
                主播昵称：<?=$live['user']['nickname']?>
            </li>
            <li>
                主播编号：<?=$live['user']['number']?>
            </li>
            <li>
                房间编号：<?=$live['user']['room_number']?>
            </li>
            <li>
                观看人数：<?= !empty($live['user']['user_num'])?$live['user']['user_num']:0?>
            </li>
            <li>
                举报次数：<?= !empty($live['user']['warning'])?$live['user']['warning']:0?>
            </li>
            <li>
                开播时长：<?=$live['live_time']?>
            </li>
            <li>
                <div class="controls">
                    <button onclick="flv_start()">开始</button>
                    <button onclick="flv_pause()">暂停</button>
                    <button onclick="flv_warning()">警告</button>
                    <button onclick="flv_ban()">禁播</button>
                    <button onclick="flv_close()">关闭</button>
                </div>
            </li>
            <?php include "warning.html"?>
        </ul>
    </div>

</div>
<script src='//cdn.bootcss.com/socket.io/1.3.7/socket.io.js'></script>
<script src="<?= RESOURCES ?>/live/js/flv.min.js"></script>
<script src="<?= RESOURCES ?>/live/js/jweixin-1.0.0.js"></script>
<script src="<?= RESOURCES ?>/live/js/jquery.min.js"></script>
<script src="<?= RESOURCES ?>/layuiadmin/layuiadmin/layui/layui.js"></script>
<script src="<?= RESOURCES ?>/layuiadmin/layuiadmin/modules/common.js"></script>
<script>
    layui.use(['table', 'form','layer'], function(){
        var table = layui.table,
            admin = layui.admin,
            form = layui.form,
            layer = layui.layer;
    });

    var player = document.getElementById('videoElement');
    if (flvjs.isSupported()) {
        var flvPlayer = flvjs.createPlayer({
            type: 'flv',
            isLive: true,
            url: '<?=$live["play_url"]?>',
        });
        flvPlayer.attachMediaElement(videoElement);
        flvPlayer.load(); //加载
        flv_start();
    }
    // 连接服务端
    var socket = io('https://zhibo.cdsile.cn:2000');
    // 触发服务端的chat message事件
    var data = {
        'number':'88888888',
        'room_id':1,
    }
    socket.emit('userLogin', data);
    //服务端通过emit('chat message from server', $msg)触发客户端的chat message from server事件
    socket.on('userLogin', function(msg){
        console.log('userLogin:' + msg + ' from server');
    });
    function flv_warning() {
        $('.tanchu').css('display','block');
        // layer.open({
        //     type: 2,
        //     title: '警告内容',
        //     shade: false,
        //     maxmin: true,
        //     area: ["80%", "80%"],
        //     content: "/<?= ADMIN_NAME ?>/liveMonitor/warningContent?id=<?=$live['user']['number']?>"
        // });
    }
    $('.ensure').click(function () {
        //获取下拉框内容、获取输入框内容
       let type  = $("#type option:selected").val();
       let id = "<?=$live['user']['number']?>";
       let content = $('#content').val();
        $.post("/<?= ADMIN_NAME ?>/liveMonitor/warningUser",{'id':id,'type':type,'content':content},function(rel){
            if(rel.code==0 || rel.code=='0'){
                $("#type option:selected").val('');
                $('#content').val('');
                socket.emit('warning', {'number':id,'type':type,'content':content});
                //服务端通过emit('chat message from server', $msg)触发客户端的chat message from server事件
                socket.on('warning', function(le){
                    if (le.code == 200 || le.code == '200'){
                        layer.msg(le.msg);
                        setTimeout(function () {
                            $('.tanchu').css('display','none');
                        },2000);
                    }
                });

            }else{
                layer.msg(rel.msg);
            }
        },'json');
    });
    $('.cancel').click(function () {
        $(this).parents('.tanchu').css('display','none');
    });

    //禁播ban
    function flv_ban() {
        let user_number = "<?=$live['user']['number']?>";
        layer.confirm('确定禁播该主播？', function(index) {
            $.post("/<?= ADMIN_NAME ?>/liveMonitor/ban",{'id':user_number},function(rel){
                if(rel.code==200){
                    socket.emit('ban', {'number':user_number});
                    //服务端通过emit('chat message from server', $msg)触发客户端的chat message from server事件
                    socket.on('ban', function(le){
                        console.log(le);
                        if (le.code == 200 || le.code == '200'){
                            layer.msg(le.message);
                        }
                    });

                }else{
                    layer.msg(rel.msg);
                }
            },'json');
        });
    }
    var id = '<?=$live["id"]?>';

    //开始
    function flv_start() {
        player.play();
    }

    //暂停
    function flv_pause() {
        player.pause();
    }

    //警告




    //关闭
    function flv_close() {
        layer.confirm('确定关闭直播？', function(index) {
            let user_number = "<?=$live['user']['number']?>";
            $.post("/<?= ADMIN_NAME ?>/liveMonitor/close",{'id':id},function(rel){
                if(rel.code==200){
                    socket.emit('close', {'number':user_number});
                    //服务端通过emit('chat message from server', $msg)触发客户端的chat message from server事件
                    socket.on('close', function(le){
                        console.log(le);
                        if (le.code == 200 || le.code == '200'){
                            layer.msg(le.message);
                            setTimeout(function () {
                                layer.close(index);
                            },2000);

                        }
                    });
                }else{
                    layer.msg(rel.msg);
                }
            },'json');
        });
    }


</script>
</body>

</html>