@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: -2%; left: 0%; z-index: 3;border-width:0.2px;">
    <br>
    <img src="img/LiveEZ_Logo.svg" style="opacity: 0.5;width:40px" >
    <div style="background-color: #fff">
        <span style="color: black;font-size: 12px">會議人數：<span id="people_count" style="color: black;"></span></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="40" height="40" src="svg/microphone_on.svg"
        data-toggle="tooltip" data-placement="right" title="麥克風聲音開關"><br><br>
    <img class="tip-content" id="camera_img" width="40" height="40" src="svg/camera_on.svg" data-toggle="tooltip"
        data-placement="right" title="攝影機畫面開關"><br><br>
    <img class="tip-content" id="fullscreen_img" width="40" height="40" src="svg/fullscreen_off.svg"
        data-toggle="tooltip" data-placement="right" title="全螢幕控制"><br><br>

    <img class="tip-content" id="raise_hand_img" width="40" height="40" src="svg/raise_hand_off.svg" style="display: none;" data-toggle="tooltip" data-placement="right" title="舉手發言">    <br>
    <br>
    <div id="demo_box" style="color:#ff00ff">
        <span class="pop_ctrl" style="color:#fff;" alt="set"><i class="fa fa-cogs fa-2x" 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" width="40" 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" width="40" data-toggle="tooltip" data-placement="bottom" title="辨識翻譯訊息">
            </li>
            <li class="demo_li">
                <a href="#">
                    <img class="tip-content" src="svg/desktop_share_off.svg" width="40" 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" width="40" 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" width="40" 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" width="40"
                        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" width="40"
                        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);transition:transform 0.5s ease;">
    <div class="title" style="background: rgba(0%,10%,20%,0.6);"></span> <span style="color: white;">連線人員</span>
        <i class="fa fa-microphone-slash fa-2x float-right" aria-hidden="true"></i>
        <i class="fa fa-microphone fa-2x float-right" aria-hidden="true"></i>

    </div>
    <div id="app" class="col-lg-12">

        <div class="card" v-for="(item,key) in datas" :key="item.id">
            <div class="card-header">
                <a data-toggle="collapse" :href="'#showvideo'+key">
                    <div style="margin-top: -10%">
                        <span style="font-size: 15px;color:black;"><img
                                src="img/connect_people_new.png">@{{item.name}}</span><span>
                            <canvas :ref="item.name + '_microphone_meter'" width="100%" height="25px"
                                style="position: fixed"></canvas></span>
                    </div>
                    <span :ref="item.name + '_network_traffic_content'"
                        style="position: absolute;bottom: 7%;font-size: 12px;color:blue;background-color: #fff"></span>
                </a>

            </div>

            {{-- <div class="card-body"> --}}

            <div :id="'showvideo'+key" class="card-collapse collapse">
                <video :ref="item.name + '_video_content'" :src-object.prop.camel="item.src" :muted="item.isStreamMuted"
                    @click="change_main_view(key)" width="100%" preload="none" playsinline autoplay></video>
                {{-- <div style="margin-top: 60%;position: absolute; top: 0; width:30%;height: 100%;"> --}}

                {{-- </div> --}}
            </div>
            {{-- </div> --}}
        </div>

        {{-- <div style="width: 100%">
            <div style=" " v-for="(item,key) in datas" :key="item.id">
                <div style="width: 100%;height: 30px;">

                    <button class="btn btn-default" data-toggle="collapse" :data-target="'#showvideo'+key">
                        <div style="margin-top: -10%">
                            <span style="font-size: 15px;color:black;"><img
                                    src="img/connect_people_new.png">@{{item.name}}</span><span><canvas
                :ref="item.name + '_microphone_meter'" width="100px" height="25px"
                style="background-color: rgba(22, 113, 205, 0.1);"></canvas></span>
    </div>
    </button>

    <div :id="'showvideo'+key" class="collapse" style="position: static;">
        <video :ref="item.name + '_video_content'" :src-object.prop.camel="item.src" :muted="item.isStreamMuted"
            @click="change_main_view(key)" width="100%" preload="none" playsinline autoplay></video>
        <div style="margin-top: 60%;position: fixed; top: 0; width:30%;height: 100%;">
            <span :ref="item.name + '_network_traffic_content'"
                style="position: fixed;bottom: 7%;font-size: 12px;color:blue;background-color: #fff"></span>
        </div>
    </div>




    </div>
    </div> --}}
</aside>



<aside id="user_list_content" data-pushbar-id="bottom" class="pushbar from_bottom"
    style=" background:rgba(0%,10%,20%,0.5);
                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">
                <a href="#" data-toggle="modal" data-target="#speech_control">
                   <img src="../room/google_translate_30855.png" style="width:40px"
                        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>

           
                {{-- style="background-color: transparent; border: 0;" --}}

               <button  id="start_recognition_button" style="font-size: 12px; position:absolute;
                  right:150px;" class="btn btn-info ">
                {{--  <img src="../room/vo-removebg-preview.png" style="width:60px"> --}}語音轉文字
</button>

               　<button id="recognition_download_button" class="btn btn-success" style="font-size: 12px; position:absolute;right:50px;">文本下載</button>
          
           {{--  <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%;font-size: 18px;overflow-y: auto; float: left;height: 200px;">
            {{-- border:2px blue solid --}}
            <div style="padding : 2%">
                <span style="font-size: 1em">原文:</span>
            <div style="background-color: #fff;color:#000;font-size: 14px">
            <div>哈嚕世界!!</div>
            <div>哈嚕世界!!</div>
            <div>哈嚕世界!!</div>
            <div>哈嚕世界!!</div>
            <div>哈嚕世界!!</div>
            <div>哈嚕世界!!</div>
            <div>哈嚕世界!!</div>
            

            </div>
            </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 id="speech_translate_content"
            style="width: 50%;font-size: 18px;overflow-y: auto; float: left; height: 200px;">
            {{-- border:2px blue solid --}}
            <div style="padding : 2%">
                譯文:
            <div style="background-color: #fff;color:#000;font-size: 14px">
            <div>HelloWord!!</div>
            <div>HelloWord!!</div>
            <div>HelloWord!!</div>
            <div>HelloWord!!</div>
            <div>HelloWord!!</div>
            <div>HelloWord!!</div>
            <div>HelloWord!!</div>

            </div>
            </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>
</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': '-30',              //彈出位移距離
  'iconSize': '50px',       //icon長寬
  // 'iconSize': '50px'       //icon長寬
});
</script>
@endsection