@extends('liveez.room.main')

<style>
    .國防布 {
        background-image: url(https://vignette.wikia.nocookie.net/evctw/images/3/32/-14-638.jpg/revision/latest?cb=20150927043815);
        background-size: cover;
    }
</style>


@section('content')




<div style="width: 6%; position: fixed; top: 5%; left: 2%; z-index: 3;">
    <br>
    <img src="img/LiveEZ_Logo.svg" style="opacity: 0.3;">
    <div><span style="color: black;">會議人數：</span><span id="people_count" style="color: blue;"></span></div>
</div>


<div id="menu_show_event_area"
    style="position: fixed;z-index: 2;bottom: 0;width: 100%;height: 9%;background-color:rgba(0, 0, 0, 0);"></div>

<div class="wrapper">

    <video style="position: fixed;right: 0;bottom: 0;top: 0;min-width:100%; min-height: 100%;" class="box1"
        id="index-video" preload="none" playsinline autoplay muted></video>


    <!--<select id="camera" onchange="changeCamera(this)"><option value="...">請選擇</option></select>-->
</div>

<div class="box2">



    <img class="tip-content" id="microphone_img" width="60" height="60" src="svg/microphone_on.svg"
        data-toggle="tooltip" data-placement="right" title="麥克風聲音開關"><br><br>
    <img class="tip-content" id="camera_img" width="60" height="60" src="svg/camera_on.svg" data-toggle="tooltip"
        data-placement="right" title="攝影機畫面開關"><br><br>
    <img class="tip-content" id="fullscreen_img" width="60" height="60" src="svg/fullscreen_off.svg"
        data-toggle="tooltip" data-placement="right" title="全螢幕控制"><br><br>

    <img class="tip-content" id="raise_hand_img" width="60" height="60" src="svg/raise_hand_off.svg" style="display: none;" data-toggle="tooltip" data-placement="right" title="舉手發言">
    <div id="demo_box" style="color:#ff00ff">
        <span class="pop_ctrl"><i class="fa fa-cogs fa-3x" aria-hidden="true"></i></span>

        <ul id="demo_ul">

            <li class="demo_li">
                <a id="user_list_action" href="#" data-pushbar-target="right"><img class="tip-content"
                        src="svg/people_connect.svg" data-toggle="tooltip" data-placement="bottom" title="連線人員"></a>

            </li>
            <li class="demo_li">
                <a id="translate_action" href="#" data-pushbar-target="bottom"><img class="tip-content"
                        src="svg/recognition_off.svg" data-toggle="tooltip" data-placement="bottom" title="辨識翻譯訊息">
            </li>
            <li class="demo_li">
                <a href="#">
                    <img class="tip-content" src="svg/desktop_share_off.svg" data-toggle="tooltip" id="share_desktop"
                        data-placement="bottom" title="桌面分享">
                </a>
            </li>
            @if (@!$token=='')
            <li class="demo_li">
                <a href="#" data-toggle="modal" data-target="#record_mode"><img class="tip-content"
                        id="record_status_img" src="svg/recording_on.svg" data-toggle="tooltip" data-placement="bottom"
                        title="錄影功能"></a>
            </li>
            <li class="demo_li">
                <a href="#" data-toggle="modal" data-target="#share_room_page"><img class="tip-content"
                        src="svg/share_link_on.svg" data-toggle="tooltip" id="share_room" data-placement="bottom"
                        title="分享會議"></a>
            </li>
            @endif

            <li class="demo_li">
                <a href="#" data-toggle="modal" data-target="#myModal"><img class="tip-content" src="svg/setting_on.svg"
                        data-toggle="tooltip" data-placement="bottom" title="設備切換"></a>
            </li>
            <li class="demo_li">
                <a href="javascript: location.href='../login'"><img class="tip-content" src="svg/exit_on.svg"
                        data-toggle="tooltip" data-placement="bottom" title="離開會議"></a>
            </li>



        </ul>
    </div>

</div>
<aside id="user_list_content" class="user_connect_page" style="background: rgba(1, 51, 11, 0.6);">
    <div class="title" style="background: rgba(0%,10%,20%,0.6);"></span> 連線人員</div>
    <div id="app" class="col-lg-12">
        <div style="width: 100%">
            <div style="position: relative;" v-for="(item,key) in datas" :key="item.id">
                <video :ref="item.name + '_video_content'" :src-object.prop.camel="item.src" :muted="item.isStreamMuted"
                    width="100%" preload="none" playsinline autoplay></video>
                <div style="position: absolute; top: 0; width: 100%;height: 100%;" class="國防布"
                    @click="change_main_view(key)">
                    <span style="font-size: 20px;color:black;background-color: yellow;">@{{item.name}}</span><br>
                    <canvas :ref="item.name + '_microphone_meter'" width="100px" height="25px"
                        style="background-color: rgba(22, 113, 205, 0.1);"></canvas><br>
                    <span :ref="item.name + '_network_traffic_content'"
                        style="position: absolute;bottom: 7%;font-size: 12px;color:blue;"></span>
                </div>
            </div>
        </div>
    </div>
</aside>



<aside id="user_list_content" data-pushbar-id="bottom" class="pushbar from_bottom"
    style="background: rgba(7, 64, 205, 0.6);overflow-y: hidden">

    <div class="title " style="position:sticky;top: 0;background: rgba(0%,10%,20%,0.8);z-index: 10;">
        <span data-pushbar-close class="close push_right"></span>

        <div class="form-inline" role="form">
            <div class="form-group">

                            </div>
            <div class="form-group">
                <a href="#" data-toggle="modal" data-target="#speech_control">
                    <img class="tip-content" src="img/translate_summary.png" width="60" height="60"
                        data-toggle="tooltip" data-placement="bottom" title="即時翻譯">
                </a>
            </div>


            <div class="form-group hidden" id="speech_box">
                <label for="">翻譯模式：</label>
                <span id="show_speech_mod">中文＞泰文</span>
            </div>
            <div class="form-group">
                <div class="col-xs-9 col-sm-9 col-md-9 col-lg-9">
                    <input id="chat_message_input" type="text" placeholder="在此輸入留言" name="message" class="form-control"
                        size="50vh">
                </div>
                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                    <button id="chat_message_button" class="btn btn-success ">傳送</button>
                </div>
            </div>
        </div>






        <div id="speech_translate_content"
            style=" width: 50%;line-height: 20vh;font-size: 18px;overflow-y: auto; float: left;border:2px blue solid;">

            <div style="height: 16px;">原文: </div>
            <div>dsddsds</div>
            <!--                    <details>-->
            <!--                        <summary>A說：１２３４５123123123</summary>-->
            <!--                        <p>A say: one two three four five</p>-->
            <!--                    </details>-->
            <!--                    <details>-->
            <!--                        <summary>B說：你好嗎？</summary>-->
            <!--                        <p>B say: How are you?</p>-->
            <!--                    </details>-->
        </div>
        <div style="width: 48%;line-height: 20vh;float: left;border:2px green solid;">

            <div>譯文: </div>
            <div>fdsfdsvrwfew</div>


        </div>


    </div>
</aside>

<aside id="new_menu_content" data-pushbar-id="test_bottom" class="pushbar from_bottom_new_menu"
    style="background: linear-gradient(to top,rgba(0, 0, 0, 0.25),rgba(224, 224, 235, 0.0));">
    <div class="col-lg-12">
        <div id="new_menu_content" style="position: fixed;width: 99%;font-size: 18px;text-align:center;">

            <span style="position: relative;left: 6%; text-align: center;">


                <a id="user_list_action" href="#" data-pushbar-target="right"><img class="tip-content"
                        src="svg/people_connect.svg" width="60" height="60" data-toggle="tooltip"
                        data-placement="bottom" title="連線人員"></a>
                &emsp;&emsp;
                <a id="translate_action" href="#" data-pushbar-target="bottom"><img class="tip-content"
                        src="svg/recognition_off.svg" width="60" height="60" data-toggle="tooltip"
                        data-placement="bottom" title="辨識翻譯訊息">
                    <!--<span id="chat_no_read" class="badge badge-danger badge-pill" style="position: relative;right: 2%;bottom: 15px;">99</span>--></a>
                '&emsp;&emsp;
                <img class="tip-content" src="svg/desktop_share_off.svg" width="60" height="60" data-toggle="tooltip"
                    id="share_desktop" data-placement="bottom" title="桌面分享">
                <!--                    <a id="friend_action" href="#" data-pushbar-target="left"><img class="tip-content" src="img/friend.png" width="60" height="60" data-toggle="tooltip" data-placement="bottom" title="好友列表"></a>-->



                                &emsp;&emsp;
                <a href="#" data-toggle="modal" data-target="#myModal"><img class="tip-content" src="svg/setting_on.svg"
                        width="60" height="60" data-toggle="tooltip" data-placement="bottom" title="設備切換"></a>


            </span>

            <span style="position: relative; left: 15%;">

                <img src="img/down.png" data-pushbar-close width="64" height="64">

            </span>


            <!-- &emsp;&emsp; -->
            <!-- <a tabindex="0" style="position: relative;bottom: 3%;" data-container="body" data-toggle="popover" data-placement="top" data-trigger="focus" title="更多選項"><img width="64" height="64" src="img/menu_new.png"></a> -->

            &emsp;&emsp;
            &emsp;&emsp;

            <span style="float: right;">

                <a href="javascript: location.href='../login'"><img class="tip-content" src="svg/exit_on.svg" width="60"
                        height="60" data-toggle="tooltip" data-placement="bottom" title="離開會議"></a>
                &emsp;&emsp;&emsp;&emsp;

            </span>



            <!-- <ul id="popover-content" class="list-group" style="display: none;">
                    <a href="#" class="list-group-item">提高音量</a>
                    <a href="#" class="list-group-item">降低音量</a>
                    <a href="#" class="list-group-item">意見回饋</a>
                </ul> -->
        </div>
    </div>
</aside>

<aside data-pushbar-id="left" class="pushbar from_left" style="background: rgba(0%,10%,20%,0.6);">
    <div class="title"><span data-pushbar-close class="close push_right"></span> 邀請列表</div>
    <!-- 搜尋 -->
    <div class="input-group md-form form-sm form-1 pl-0">
        <div class="input-group-prepend">
            <span class="input-group-text cyan lighten-2" id="basic-text1"><i class="fas fa-search text-white"
                    aria-hidden="true"></i></span>
        </div>
        <input class="form-control my-0 py-1" type="text" placeholder="Search" aria-label="Search">
    </div>
    <div style="height:300px;overflow:auto;">
        <div style="width:20px;height:20px; border-radius:999em;background-color:green;">
            <span style="margin-left: 120%">kkbb</span>
        </div><br>

    </div>
    <hr>
    <!-- 搜尋end -->
    <!-- 最愛 -->
    <img src="style/img/tag.png" style="max-height: 40px">我的好友列表

    <div style="height:300px;overflow:auto;">
        <div style="width:20px;height:20px; border-radius:999em;background-color:green;">
            <span style="margin-left: 120%">kkbb</span>
        </div><br>
        <div style="width:20px;height:20px; border-radius:999em;background-color:green;"><span
                style="margin-left: 120%">kkbb</span></div><br>

        <div style="width:20px;height:20px; border-radius:999em;background-color:green;"><span
                style="margin-left: 120%">kkbb</span></div><br>

        <div style="width:20px;height:20px; border-radius:999em;background-color:green;"><span
                style="margin-left: 120%">kkbb</span></div><br>

        <div style="width:20px;height:20px; border-radius:999em;background-color:green;"><span
                style="margin-left: 120%">kkbb</span></div><br>

        <div style="width:20px;height:20px; border-radius:999em;background-color:green;"><span
                style="margin-left: 120%">kkbb</span></div><br>

        <div style="width:20px;height:20px; border-radius:999em;background-color:#AE0000;"><span
                style="margin-left: 120%">kkbb</span></div><br>

        <div style="width:20px;height:20px; border-radius:999em;background-color:#AE0000;"><span
                style="margin-left: 120%">kkbb</span></div><br>
    </div>



    <!-- 最愛end -->
</aside>




<div id="share_room_page" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg">

        <!-- Modal content-->
        <div class="modal-content " style="color: black;">
            <div class="modal-header">
                <h4 class="modal-title">分享會議空間</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>

            </div>
            <div class="modal-body">
                分享網址: <div id="url" style="width: 80%;">
                    https://www.liveez.cc/joinRoom.php?openExternalBrowser=1&uuid=1234</div>
                <br><button class="btn btn-primary" data-clipboard-target="#code" id="copy_url_button">複製</button>
            </div>

        </div>

    </div>
</div>


<div id="record_mode" class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog"
    aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">

            <div class="modal-header">
                <h5 class="modal-title h4" id="myLargeModalLabel">選擇錄影模式</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" style="text-align: center;">
                <button class="btn btn-primary" id="people_stream_record_button">人像</button>
            </div>
        </div>
    </div>
</div>



<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg">

        <!-- Modal content-->
        <div class="modal-content" style="color: black;">
            <div class="modal-header">
                <h4 class="modal-title">設備清單</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>

            </div>
            <div class="modal-body">
                攝影機: <select id="camera"></select><br><br>麥克風: <select id="audio"></select><br><br>喇　叭: <select
                    id="speaker_hardware"></select>
                            </div>

        </div>

    </div>
</div>

<div id="return_window" class="modal fade" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content" style="color: black;">
            <div class="modal-header">
                <h4 class="modal-title">提示訊息</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>

            </div>
            <div class="modal-body" id="return_information">
            </div>

        </div>

    </div>
</div>


<div id="speech_control" class="modal fade" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content" style="color: black;">
            <div class="modal-header">
                <h4 class="modal-title">語音辨識</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>

            </div>
            <div class="modal-body">

                <p style="text-align:center;"><button class="btn btn-warning" onclick="">開始辨識</button></p><br>

                <td style="width:10%">
                    <p style="text-align:center;">辨識語系選擇</p>
                    <select class="toolbar_button form-control" onchange="change_speech_source(this.value)">
                        <option value="en-US,en">English</option>
                        <option value="cmn-Hant-TW,zh-TW" selected>中文</option>
                        <option value="th-TH,th">ภาษาไทย</option>
                        <option value="ja,ja">日本語</option>
                        <option value="vi,vi">Tiếng Việt</option>
                        <option value="id,id">Basa Sunda</option>
                        <option value="my,my">Basa Jawa</option>
                    </select>　
                </td>
                <td>&emsp;&emsp;</td>

                <td style="width:10%">
                    <p style="text-align:center;">翻譯語系選擇</p>
                    <select class="toolbar_button form-control" @change="change_translate_text($event,key)">
                        <option value="en">English</option>
                        <option value="zh-TW">中文</option>
                        <option value="th">ภาษาไทย</option>
                        <option value="ja">日本語</option>
                        <option value="vi">Tiếng Việt</option>
                        <option value="id">Basa Sunda</option>
                        <option value="my">Basa Jawa</option>
                    </select>　
                </td>
                <td>&emsp;&emsp;</td>
            </div>

        </div>

    </div>
</div>

<script>
    $('#demo_box').popmenu({
//   'controller': true,       //false會一直卡住
  'width': '50%',         //總寬度
//   'background': '#34495e',  //背景色
//   'focusColor': '#1abc9c',  //hover顏色
//   'borderRadius': '10px',   //邊角弧度
  'top': '0',              //彈出位移距離
  'left': '-50',              //彈出位移距離
  'iconSize': '80px'       //icon長寬
});
</script>
@endsection