<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Laravel</title>
    <!-- 引入 CDN -->
    {{--<script src="https://cdn.bootcss.com/flv.js/1.3.2/flv.min.js"></script>--}}
    {{--<link href="/css/video-js.css" rel="stylesheet">--}}
    {{--<script src="/js/video.js"></script>--}}
    {{--<script src="/js/video.min.js"></script>--}}
    <script src="/js/flv.min.js"></script>
    {{--<script src="/js/videojs-flvjs.min.js"></script>--}}

{{--    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>--}}
{{--    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">--}}
{{--    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>--}}
{{--    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>--}}

{{--    toast request cdn--}}
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

    <style type="text/css">
        video.max-9{
            height: 100%;
            width: 100%;
            border-style: ridge;
            border-color: wheat;
        }
        div.max-9{
            width: 33%;
            height: initial;
            padding-left: 0px;
            padding-right: 0px;
            background-color: black;
        }
    </style>
</head>
<body>
<form action="{{ url()->current() }}" method="post">
    @csrf
    <label>time</label>
    <input type="text" name="time">
    <label>id</label>
    <input type="text" name="id">
    <label>score</label>
    <input type="text" name="score">
    <label>snapshot</label>
    <input type="text" name="snapshot">
    <button type="submit">submit</button>
</form>

<button onclick="ready_all()">準備</button>
<button onclick="play_all()">播放</button>
<button ondblclick="add_stream('RD','01','http://192.168.5.17/RD/01.flv');">新增畫面1</button>
<button ondblclick="add_stream('RD','02','http://192.168.5.17/RD/02.flv');">新增畫面2</button>
<br>

<div class="toast" data-autohide="false">
    <div class="toast-header">
        <svg class=" rounded mr-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img">
            <rect fill="#007aff" width="100%" height="100%" /></svg>
        <strong class="mr-auto">Bootstrap</strong>
        <small class="text-muted">11 mins ago</small>
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="toast-body">
        Hello, world! This is a toast message.
    </div>
</div>

<div class="row container" style="width: 80vw;height: 80vh;">
    <div class="col-2">
        left
    </div>
    <div class="col-8" style="width: 60vw;">
        {{-- print row --}}
        @for($i=1;$i<4;$i++)
            <div class="row" style="height: 33%">
                {{-- print col --}}
                @for($j=1;$j<4;$j++)
                    <div class="col-sm-4 max-9">
                        <video id="{{ "videoElement".$i.$j }}" class="max-9" muted></video>
                    </div>
                @endfor
            </div>
        @endfor
    </div>
</div>

<div class="scrollbar scrollbar-primary">
    tt
    <div class="force-overflow">
        gg
    </div>
</div>

<script>
    player_list=["videoElement11","videoElement21","videoElement31"];
    video_list=["http://192.168.5.17/RD/01.flv","http://192.168.5.17/RD/02.flv","http://192.168.5.17/480P/RD/01.flv"];
    function ready_camera(vid,url) {
        if (flvjs.isSupported()) {
            var videoElement = document.getElementById(vid);
            var flvPlayer = flvjs.createPlayer({
                type: 'flv',
                hasAudio:false,
                hasVideo:true,
                url: url,
                autoplay:true
            });
            flvPlayer.attachMediaElement(videoElement);
            flvPlayer.load();
            flvPlayer.play();

            videoElement.ondblclick=function () {
                videoElement.requestFullscreen();
            };

            flv_playlist.push(flvPlayer);
        }
    }
    function ready_all() {
        player_list.forEach(function (item,index) {
            ready_camera(item,video_list[index])
        })

    }

    function play_all() {
        flv_playlist.forEach(function (item,index) {
            item.play();
        });
    }
</script>

{{--new screan function test--}}
<script>
    var videos=document.getElementsByTagName('video');
    function new_screan() {
        var flvPlayer = flvjs.createPlayer({
            type: 'flv',
            hasAudio:false,
            hasVideo:true,
            url: "http://192.168.5.17/RD/01.flv",
            autoplay:false
        });
        var videoElement=videos[flv_playlist.length];
        flvPlayer.attachMediaElement(videoElement);
        flvPlayer.load();
        // flvPlayer.play();

        videoElement.ondblclick=function () {
            videoElement.requestFullscreen();
        };

        flv_playlist.push(flvPlayer);
    }
</script>

<script>
    onplay_stream=[];
    onplay_player=[];
    flv_playlist=[];
    // 取得所有video標籤(撥放器)的id
    video_players=[];
    Array.from(document.getElementsByTagName('video'))
        .forEach(function (item) {
            video_players.push(item.getAttribute('id'));
        });
    // console.log(video_players.filter(n =>!onplay_player.includes(n)));
    function add_stream(group,cam,stream) {
        // 確認是否已經撥放
        let index=onplay_stream.indexOf(stream);
        if (index >-1) {
            // 存在
            // 取消播放
            flv_playlist[index].destroy();
            // 從array移除
            flv_playlist.splice(index,1);
            onplay_stream.splice(index,1);
            onplay_player.splice(index,1);
        } else {
            // 不存在
            // 播放此串流
            // 搜尋可用撥放器(所有撥放器減去正在播放的)
            let offplay_player = video_players.filter(n => !onplay_player.includes(n));
            // 判斷是否還有空的撥放器
            if(offplay_player.length!==0){
                let flvPlayer = flvjs.createPlayer({
                    type: 'flv',
                    hasAudio:false,
                    hasVideo:true,
                    url: stream,
                    autoplay:false
                });
                let videoElement=document.getElementById(offplay_player[0]);
                flvPlayer.attachMediaElement(videoElement);
                flvPlayer.load();
                // flvPlayer.play();

                videoElement.ondblclick=function () {
                    videoElement.requestFullscreen();
                };

                flv_playlist.push(flvPlayer);
                onplay_player.push(offplay_player[0]);
                onplay_stream.push(stream);
            }
        }
    }
</script>

{{--IOT laravel echo test--}}
<script src="//192.168.5.17:6001/socket.io/socket.io.js"></script>
<script src="{{ url("/js/laravel-echo-setup.js") }}" type="text/javascript"></script>
<script>
    window.Echo.channel('IOT')
        .listen('UpdateIOT',(e)=>{
            console.log(e);
        })
</script>

{{--toast test--}}
<script type="javascript">
    $(document).ready(function(){
        $('.toast').toast('show');
    });
</script>
<!-- End -->
</body>
</html>
