@extends('layouts.conf')

@section('css')
    <style>
        /* scroll bar */
        .custom-scrollbar {
            padding-right: 5px;
        }

        .custom-scrollbar::-webkit-scrollbar {
            width: .5em;
        }

        .custom-scrollbar::-webkit-scrollbar-track {
            box-shadow: inset 0 0 6px rgb(88 88 88 / 30%);
        }

        .custom-scrollbar::-webkit-scrollbar-thumb {
            background-color: #747474;
            border-radius: 5px;
        }

        /* revert video mirror */
        [data-type="video"] video {
            transform: rotateY(180deg);
            -webkit-transform: rotateY(180deg);
            -moz-transform: rotateY(180deg);
        }

        /* chat/participant UI */
        .chat-cont-right .message-body {
            top: 60px;
        }

        @media (max-width: 1536px) {

            .chat-cont-right .chat-header,
            .add-list,
            .chat-cont-right .chat-body ul.list-unstyled {
                padding: 10px;
            }
        }

        .person-view {
            margin-right: 10px;
        }

        .chat-cont-right .chat-body .media .media-body {
            margin-left: 0;
        }

        /* Videos UI responsivity */
        .join-contents.vertical-view {
            align-content: flex-start;
        }

        .fade-whiteboard .join-video {
            overflow: hidden;
        }

        /* .fade-whiteboard .join-video video {
                                        height: 100%;
                                        width: 100%;
                                    } */

        /* small screen */
        @media (max-width: 770px) {
            .fade-whiteboard {
                overflow-y: auto;
            }

            .fade-whiteboard>.join-video.user-active {
                position: relative;
                top: 0;
                bottom: 0;
                right: 0;
                z-index: 1;
                flex: auto !important;
                margin-bottom: 1em !important;
            }

            .fade-whiteboard .vertical-sec {
                width: 100%;
            }
        }

        /* large screen */
        @media (min-width: 771px) {
            .join-contents.vertical-view {
                height: 100%;
            }

            .fade-whiteboard>.join-video.user-active {
                height: 85% !important;
            }

            .fade-whiteboard .vertical-sec {
                height: 90%;
                max-height: 90%;
                overflow-y: auto;

                padding: 5px;
                border-radius: 5px;
            }

            .fade-whiteboard .join-video.single-user {
                width: calc(100% - 10px) !important;
                margin-left: auto;
                margin-right: auto;
                box-shadow: 0px 0px 0px 1px #415b6a;
            }
        }

        .join-video:not(.cam-off) .text-avatar {
            display: none;
        }

        .join-video.cam-off video {
            opacity: 0;
        }
    </style>
@endsection

@section('content')
    <div class="page-content">
        <!-- meeting UI -->
        <div class="meeting">
            <div class="meeting-wrapper">

                <div class="meeting-list">
                    <!-- Vertical view -->
                    <div class="join-contents vertical-view fade-whiteboard custom-scrollbar">

                        <div class="vertical-sec custom-scrollbar">
                        </div>
                    </div>
                    <!-- /Vertical view -->

                    <!-- Whiteboard View -->
                    <div class="join-contents vertical-view show-whiteboard bg-info">
                        <div class="join-video user-active">
                            <div class="whiteboard-sec">
                                <div id='my-holder'></div>
                            </div>
                        </div>
                        <div class="vertical-sec">
                        </div>
                    </div>
                    <!-- /Whiteboard View -->
                </div>

                <!-- Meet Footer -->
                <div class="meet-footer">
                    <div class="meet-icons">
                        <div class="view-more">
                            <ul class="meet-items">
                                <li class="meet-item  dropdown dropdown-action">
                                    <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown"
                                        aria-expanded="false">
                                        <i class="feather-more-vertical"></i>
                                    </a>
                                    <ul class="dropdown-menu settings-menu">
                                        <li><a class="dropdown-item showInviteList" href="#"><i
                                                    class="feather-user-plus"></i> Participants (<span
                                                    class="nb-participant">0</span>)</a></li>
                                        <li><a class="dropdown-item showChatList" href="#"><i
                                                    class="feather-message-circle"></i> Chat</a></li>
                                        <!-- <li><a class="dropdown-item whiteboard" href="#"><i class="feather-edit-3"></i> Whiteboard</a></li> -->
                                        <!-- <li><a class="dropdown-item record-icon" href="#"><i class="far fa-dot-circle"></i> Start Recording</a></li> -->
                                        <li><a class="dropdown-item mute-all-micro" href="#"><i
                                                    class="feather-mic-off"></i> Couper tous les micros</a></li>
                                        <li><a class="dropdown-item mute-all-video" href="#"><i
                                                    class="feather-camera-off"></i> Couper toutes les cameras</a></li>
                                        <!-- <li><a class="dropdown-item" href="#"><i class="feather-youtube"></i> Share a Video</a></li> -->
                                        <!-- <li><a class="dropdown-item" href="#"><i class="feather-settings"></i> Settings</a></li> -->
                                    </ul>
                                </li>
                            </ul>
                        </div>
                        <div class="met-icons">
                            <ul class="meet-items">
                                <li class="meet-item  dropdown dropdown-action">
                                    <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown"
                                        aria-expanded="false">
                                        <i class="feather-settings"></i>
                                    </a>
                                    <ul class="dropdown-menu settings-menu">
                                        <!-- <li><a class="dropdown-item showInviteList" href="#"><i class="feather-user-plus"></i> Invite People</a></li> -->
                                        <li><a class="dropdown-item copy-meet-link"
                                                data-link="{{ route('rooms.join', [$room['id']]) }}"
                                                href="javascript:void(0);"><i class="fas fa-link"></i> Lien de la
                                                réunion</a></li>
                                        <li><a class="dropdown-item win-maximize" href="#max"><i
                                                    class="feather-maximize"></i> Plein écran</a></li>
                                        <!-- <li><a class="dropdown-item record-icon" href="#"><i class="far fa-dot-circle"></i> Start Recording</a></li> -->
                                        <li><a class="dropdown-item mute-all-micro" href="#"><i
                                                    class="feather-mic-off"></i> Couper tous les micros</a></li>
                                        <li><a class="dropdown-item mute-all-video" href="#"><i
                                                    class="feather-camera-off"></i> Couper toutes les Cameras</a></li>
                                        <!-- <li><a class="dropdown-item" href="#"><i class="feather-youtube"></i> Share a Video</a></li> -->
                                        <!-- <li><a class="dropdown-item" href="#"><i class="feather-settings"></i> Settings</a></li> -->
                                        <!-- <li><a class="dropdown-item" href="#"><i class="feather-code"></i> Embed meeting</a></li> -->
                                    </ul>
                                </li>
                                <li class="meet-item">
                                    <a href="#" class="mute-bt">
                                        <i class="feather-mic"></i>
                                    </a>
                                </li>
                                <li class="meet-item">
                                    <a href="#" class="mute-video">
                                        <i class="feather-video"></i>
                                    </a>
                                </li>
                                <li class="meet-item">
                                    <a id="btn-share-screen" href="#" class="share-icon mute-screen">
                                        <i class="mdi mdi-laptop"></i>
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div class="action-icons">
                            <ul class="action-items">
                                <li class="action-item">
                                    <a href="javascript:void(0)" class="callend-icon close-room">
                                        <i class="material-icons">call_end</i>
                                    </a>
                                </li>
                                {{-- <li class="action-item d-block order-1">
                                        <a id="btn-share-screen" href="#" class="share-icon">
                                            <i class="mdi mdi-laptop"></i>
                                        </a>
                                    </li>
                                    <li class="action-item">
                                        <a href="#" class="record-icon">
                                            <i class="far fa-dot-circle"></i>
                                        </a>
                                    </li> --}}
                            </ul>
                        </div>
                        <div class="end-call">
                            <ul class="meet-items">
                                <li class="meet-item d-block">
                                    <a id="btn-raise-hand" href="#" class="hand-raise">
                                        <i class="fas fa-hand-paper"></i>
                                    </a>
                                </li>
                                <li class="meet-item">
                                    <a href="#" class="showInviteList">
                                        <i class="feather-users"></i>
                                    </a>
                                </li>
                                <li class="meet-item d-none">
                                    <a href="#" class="whiteboard">
                                        <i class="feather-edit-3"></i>
                                    </a>
                                </li>
                                <li class="meet-item">
                                    <a href="#" class="showChatList">
                                        <i class="feather-message-circle"></i>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!-- /Meet Footer -->

            </div>
        </div>
    </div>
    <!-- /Join Call -->

    <!-- Record -->
    <div class="show-record">
        <p><i class="far fa-dot-circle text-danger"></i> Recording
        <p>
    </div>
    <!-- /Record -->

    <!-- Chat Right -->
    <div class="chat-cont-right user-sidebar-right">
        <div class="chat-header py-2">
            <h5>Discussion de groupe</h5>
            <a href="#" class="close-btn" id="chatClose">
                <i class="feather-x"></i>
            </a>
        </div>
        <div class="message-body">
            <div class="chat-body custom-scrollbar">
                <div class="chat-scroll">
                    <ul class="list-unstyled chat-container">
                    </ul>
                    <div class="chat-empty h-100 d-flex align-items-center justify-content-center">
                        <h6>Aucun message pour le moment</h6>
                    </div>
                </div>
            </div>
            <div class="chat-footer">
                <div class="input-group">
                    <input type="text" class="input-msg-send form-control" placeholder="Type Message...">
                    <div class="input-group-append">
                        <button type="button" class="btn msg-send-btn"><i class="fab fa-telegram-plane"></i></button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- /Chat Right -->

    <!-- Invite People -->
    <div class="chat-cont-right invite-sidebar-right">
        <div class="chat-header">
            <div class="heading-text">Participants (<span class="nb-participant">0</span>)</div>
            <a href="#" class="close-btn" id="InviteClose">
                <i class="feather-x"></i>
            </a>
        </div>
        <div class="message-body">
            <div class="chat-scroll custom-scrollbar">
                <ul class="add-list">
                </ul>
            </div>
        </div>
        <!-- <div class="chat-footer d-grid">
                                                <button type="button" class="btn heading-text">Invite Someone</button>
                                            </div> -->
    </div>
    </div>
    <!-- /Invite People -->

    </div>
@endsection

@section('js')
    <script>
        const room_id = "{{ $room['id'] }}";
        const compound_room_id = `awmeet-${room_id}`;

        let allowed = {}; // to do not allow a user more than once

        @if ($isOwner)
            putStorage(compound_room_id, {
                name: @json($name, JSON_PRETTY_PRINT),
                audio: @json($audio, JSON_PRETTY_PRINT),
                video: @json($video, JSON_PRETTY_PRINT),
                password: @json($room['password'], JSON_PRETTY_PRINT),
            });
        @endif

        $('.room-name').text("{{ $room['name'] }}");
        $('.user-name').text(getRoomStorage("name"));

        console.log(getRoomStorage('name'));

        // console.log(location.origin+":",localStorage.getItem(compound_room_id))
        // console.log(getStorage(compound_room_id));
        // var api_server_url ="{{ config('app.url') }}"

        const connection = new RTCMultiConnection();

        connection.userid = getRoomStorage('user_id') || connection.userid;
        putStorage(compound_room_id, {
            'user_id': connection.userid
        });

        connection.password = getRoomStorage('password') || '';

        // this line is VERY_important
        // connection.socketURL = "https://rtcserver.africawebradio.bj/";
        connection.socketURL = @json(config('serverconfig.RTC_SERVER') . '/', JSON_PRETTY_PRINT);
        // connection.autoCloseEntireSession = true;
        connection.socketMessageEvent = compound_room_id;
        connection.publicRoomIdentifier = compound_room_id;

        // Configuration de RTCMultiConnection
        connection.bandwidth = {
            video: 256, // en kbps
            audio: 50 // en kbps
        };

        connection.session = {
            'audio': true,
            'video': true,
            'data': true
        }

        connection.mediaConstraints = {
            video: true,
            audio: {
                mandatory: {

                    echoCancellation: true, // Activer l'écho-annulation
                    googEchoCancellation: true, // Ancienne propriété pour l'écho-annulation
                    googAutoGainControl: true, // Activer le contrôle automatique du gain
                    googNoiseSuppression: true, // Activer la suppression du bruit
                    googHighpassFilter: true, // Activer le filtre passe-haut
                    googTypingNoiseDetection: false, // Désactiver la détection des bruits de frappe
                    googAudioMirroring: false
                },
                optional: []
            }
        };

        if (DetectRTC.browser.name === 'Firefox') {
            connection.mediaConstraints = {
                audio: true,
                video: true,
                data: true
            };
        }

        // set STUN and TURN servers
        //   connection.iceServers = [{
        //       urls:"stun:194.31.150.118:5349"
        //   }, {
        //       url:"turn:194.31.150.118:3478",
        //       credential: "survey",
        //       username: "survey"
        //   }];

        //STUN & TURN public Servers
        // connection.iceServers = [{
        //         urls: "stun:a.relay.metered.ca:80",
        //     },
        //     {
        //         urls: "turn:a.relay.metered.ca:80",
        //         username: "ecdd2861920874ba10c76ec3",
        //         credential: "/VHu6eBK8qigXWjy",
        //     },
        //     {
        //         urls: "turn:a.relay.metered.ca:80?transport=tcp",
        //         username: "ecdd2861920874ba10c76ec3",
        //         credential: "/VHu6eBK8qigXWjy",
        //     },
        //     {
        //         urls: "turn:a.relay.metered.ca:443",
        //         username: "ecdd2861920874ba10c76ec3",
        //         credential: "/VHu6eBK8qigXWjy",
        //     },
        //     {
        //         urls: "turn:a.relay.metered.ca:443?transport=tcp",
        //         username: "ecdd2861920874ba10c76ec3",
        //         credential: "/VHu6eBK8qigXWjy",
        //     },
        // ];

        // set  TURN servers for africawebmeet
        //    connection.iceServers = [

        //     {
        //         urls: 'turn:149.100.138.185:3478',
        //         username: 'test',
        //         credential: 'test123'
        //    }];


        // set  TURN servers for africawebmeet
        connection.iceServers = [{
            urls: "stun:149.100.138.185:3478"
        }, {
            urls: 'turn:149.100.138.185:3478',
            username: 'test',
            credential: 'test123'
        }];




        //  connection.iceServers = [{
        //      urls: "stun:fr-turn1.xirsys.com"
        //  }, {

        //      urls:"relay1.expressturn.com:3478",
        //      username: "efNZF1PBAIFNF5Q331",
        //      credential: "ouDddMeVrokQmoAW",
        //  }]

        // connection.iceServers = [{
        //     urls: "{{ config('serverconfig.STUN_SERVER') }}"
        // }, {
        //     url:"{{ config('serverconfig.TURN_SERVER') }}",
        //     credential: "surve{{ config('serverconfig.TURN_CREDENTIAL') }}y",
        //     username: "{{ config('serverconfig.TURN_PASSWORD') }}"
        // }];

        // connection.trickleIce = false;

        connection.candidates = {
            turn: true
        };
        // connection.iceTransportPolicy = 'all';

        connection.extra = {
            isOwner: @json($isOwner, JSON_PRETTY_PRINT),
            name: getRoomStorage("name")
        };

        if (connection.extra.isOwner) {
            connection.extra["ownerId"] = connection.userid;
        }

        connection.sdpConstraints.mandatory = {
            OfferToReceiveAudio: true,
            OfferToReceiveVideo: true,
            VoiceActivityDetection: false,
            IceRestart: false
        };

        // connection.enableLogs = false // TODO : uncomment this on prod

        let microAllowed = getRoomStorage('microAllowed')
        if (microAllowed == null) {
            putStorage(compound_room_id, {
                'microAllowed': true
            });
            microAllowed = true
        }

        connection.maxParticipantsAllowed = 500; // TODO : save it too in DB ?

        // BTNs' event handler ------------------------------------------------------
        $('.input-msg-send').keypress(function(e) {
            if (e.keyCode == 13 && !e.shiftKey) {
                e.preventDefault();
                $('.msg-send-btn').click();
            }
        });

        $('.msg-send-btn').click(function(e) {
            e.preventDefault();
            let chatInput = $('.input-msg-send');
            let chatMessageValue = chatInput.val().trim();
            if (chatMessageValue) {
                // Start getting time
                let now = new Date();
                let hh = now.getHours();
                let min = now.getMinutes();

                hh = hh ? hh : 12;
                hh = hh < 10 ? '0' + hh : hh;
                min = min < 10 ? '0' + min : min;

                let time = hh + " : " + min;
                // End
                $messageHtml = `
            <li class="media sent">
                <div class="media-body">
                    <div class="msg-box">
                        <ul class="chat-msg-info">
                            <li>
                                <div class="chat-time">
                                    Moi <span>${time}</span>
                                </div>
                            </li>
                        </ul>
                        <div>
                            <p>${chatMessageValue}</p>
                        </div>
                    </div>
                </div>
            </li>`;
                let chatlist = $('.chat-container');
                chatlist.append($messageHtml)
                $('.user-sidebar-right .chat-body').animate({
                    scrollTop: chatlist.find('li:last').offset().top
                }, 0);
                let clearChatInput = chatInput.val('');
                $('.chat-empty').remove()
                connection.send({
                    type: 'CHAT',
                    time: time,
                    message: chatMessageValue
                })
            }
        });

        $('.close-room').click(function(e) {
            e.preventDefault();
            console.log("leaving room...");

            if (connection.extra.isOwner) {
                connection.send({
                    type: "ENTIRE_ROOM_CLOSED",
                });

                Swal.fire({
                    html: "Fermerture de la réunion",
                    onBeforeOpen: () => Swal.showLoading(),
                    allowOutsideClick: false,
                });

                leaveOnRoomEmptied();
            } else {
                leaveRoom();
            }
        });

        function leaveOnRoomEmptied() {
            if (connection.getAllParticipants().length > 0) {
                setTimeout(leaveOnRoomEmptied, 500);
                return;
            }

            leaveRoom();
        }

        async function leaveRoom(isEntireRoomClosed = false) {
            // disconnect with all users
            connection.getAllParticipants().forEach(function(pid) {
                connection.disconnectWith(pid);
            });

            // stop all local streams
            connection.attachStreams.forEach(function(localStream) {
                localStream.stop();
            });

            // close socket.io connection
            connection.closeSocket();

            clearStorage();

            // redirect to convenient page 
            if (isEntireRoomClosed) {
                await Swal.fire({
                    type: "info",
                    title: "Réunion terminée",
                    html: "L'hôte a mis fin à la réunion !",
                    confirmButtonText: "Ok",
                });

                location.href = "{{ route('welcome') }}";
            } else {
                location.href = @json($isOwner ? route('rooms.index') : route('rooms.join', $room['id']), JSON_PRETTY_PRINT);
            }
        }

        $("#btn-share-screen").click(function(e) {
            if ($(this).hasClass('stoped')) {
                if (!connection.extra.isOwner) {
                    connection.peers.forEach(peer => {
                        if (peer.extra.isOwner) {
                            connection.send({
                                type: "SCREEN_REQUEST",
                            }, peer.userid)
                        }
                    })
                } else {
                    let current_screen = $('[data-type="screen"]')
                    if (current_screen.length) {
                        stopRemoteScreen(current_screen.attr('data-user'))
                    }
                    stopStream()
                    connection.addStream({
                        screen: true,
                        data: true,
                        audio: true,
                        video: true,
                    });
                }
            } else {
                stopStream()
            }
            // } else {
            //     alert('Un autre participant est déja en train de partager son écran')
            // }
        })

        $(".mute-all-micro").click(function(e) {
            connection.send({
                type: "MICRO_OFF",
            })
        })

        $(".mute-all-video").click(function(e) {
            connection.send({
                type: "VIDEO_OFF",
            })
        });

        $(".copy-meet-link").click(function(e) {
            e.preventDefault();

            navigator.clipboard.writeText($(this).data('link')).then(() => {
                /* clipboard successfully set */
                Swal.fire({
                    html: "Le lien de la réunion a été copié dans votre presse papier!",
                    timer: 1500,
                    showConfirmButton: true,
                });
            }, () => {
                /* clipboard write failed */
                showAlert("", "Impossible de copier le lien dans le presse papier. Veuillez réessayer svp!",
                    'error');
            });
        });

        if (connection.extra.isOwner) {
            $('#btn-raise-hand').closest('.meet-item').remove();
        } else {
            $('.settings-menu').closest('.meet-item').remove();

            $('#btn-raise-hand').click(function(e) {
                e.preventDefault();

                if ($(this).hasClass("active")) {
                    $(this).removeClass("active");
                    connection.send({
                        type: "HAND_OFF",
                    });

                    markHandOff(connection.userid);
                } else {
                    $(this).addClass("active");
                    connection.send({
                        type: "HAND_ON",
                    });

                    markHandOn(connection.userid);
                }
            });
        }

        $('.stop-screen').click(function(e) {
            e.preventDefault();
            const current_screen = $('[data-type="screen"]');
            stopRemoteScreen(current_screen.attr('data-user'));
        });

        // RTC events -----------------------------------------------------------
        connection.onSettingLocalDescription = function(event) {
            const info = event.extra;
            console.info('onSettingLocalDescription ', info);

            console.log(connection.getAllParticipants());

            // HACK : from here create UI for user that joined room instead of using onstream event
        }

        connection.onmessage = function(event) {
            if (event.data.type) {
                switch (event.data.type) {
                    case 'SCREEN_REQUEST':
                        toastr.options = {
                            "closeButton": false,
                            "debug": false,
                            "newestOnTop": true,
                            "progressBar": false,
                            "positionClass": "toast-top-right",
                            "preventDuplicates": false,
                            "onclick": null,
                            "showDuration": "300",
                            "hideDuration": "1000",
                            "timeOut": 0,
                            "extendedTimeOut": 0,
                            "showEasing": "swing",
                            "hideEasing": "linear",
                            "showMethod": "fadeIn",
                            "hideMethod": "fadeOut",
                            "tapToDismiss": false
                        }

                        removeScreenToast(event.userid)
                        toastr.info('<h6 class="text-white">' + event.extra.name + ` demande  à partager son écran!</h6>
                        <div class="row">
                            <div class="col ">
                                <button class="btn-allow-screen-${event.userid} btn btn-primary w-100">Autoriser</button>
                            </div>
                            <div class="col ">
                                <button class="btn-reject-screen-${event.userid} btn btn-danger w-100">Rejeter</button>
                            </div>
                        </div>
                        `, `<h5 class="text-white">Partage d'écran</h5>`);

                        $('.btn-allow-screen-' + event.userid).click(function(e) {
                            connection.send({
                                type: "SCREEN_ACCEPTED",
                            }, event.userid)

                            let current_screen = $('[data-type="screen"]')
                            if (current_screen.length) {
                                if (current_screen.hasClass('owner')) {
                                    stopStream()
                                } else {
                                    stopRemoteScreen(current_screen.attr('data-user'))
                                }
                            }
                            removeScreenToast(event.userid)
                        });

                        $('.btn-reject-screen-' + event.userid).click(function(e) {
                            connection.send({
                                type: "SCREEN_REJECTED",
                            }, event.userid);

                            removeScreenToast(event.userid)
                        });

                        break;
                    case 'SCREEN_ACCEPTED':
                        showAlert("Partage d'écran", 'Vous êtes autorisé à partager votre écran', 'success',
                            function() {
                                stopStream();
                                connection.addStream({
                                    screen: true,
                                    data: true,
                                    video: true,
                                    audio: true

                                });
                            });

                        break;
                    case 'SCREEN_REJECTED':
                        showAlert("Partage d'écran", "Votre demande de partage d'écran a été rejeté", 'error')
                        break;
                        stopStream()
                    case 'SCREEN_OFF':
                        showAlert("Oops!", "Le partage de votre écran a été coupé par l'hôte de la réunion", "error")
                        break;
                    case 'HAND_OFF':
                        if (connection.extra.isOwner) {
                            removeHandToast(event.userid);
                        }
                        markHandOff(event.userid);
                        break;
                    case 'HAND_ON':
                        if (connection.extra.isOwner) {
                            toastr.options = {
                                "closeButton": true,
                                "debug": false,
                                "newestOnTop": true,
                                "progressBar": false,
                                "positionClass": "toast-top-left",
                                "preventDuplicates": false,
                                "onclick": null,
                                "showDuration": "300",
                                "hideDuration": "1000",
                                "timeOut": 3000,
                                "extendedTimeOut": 0,
                                "showEasing": "swing",
                                "hideEasing": "linear",
                                "showMethod": "fadeIn",
                                "hideMethod": "fadeOut",
                                "tapToDismiss": false
                            };

                            removeHandToast(event.userid);

                            toastr.info("<h6>" + event.extra.name +
                                ' a levé la main!</h6><button class=" d-none btn btn-primary btn-allow-hand-' +
                                event.userid + ' w-100">Donner la parole</button>',
                                '<h5 class="text-white">Demande de parole</h5>');

                            // $('.btn-allow-hand-' + event.userid).click(function(e) {
                            //     connection.send({
                            //         type: "MICRO_ON",
                            //     }, event.userid);
                            //     removeHandToast(event.userid)
                            // });
                        }
                        markHandOn(event.userid)
                        break;
                    case 'MICRO_OFF':
                        putStorage(compound_room_id, {
                            'microAllowed': false
                        })
                        turnMicroOff()
                        break;
                    case 'MICRO_ON':
                        putStorage(compound_room_id, {
                            'microAllowed': true
                        })
                        turnMicroOn()
                        if ($('#btn-raise-hand').hasClass("active")) {
                            $('#btn-raise-hand').trigger('click');
                        }
                        break;
                    case 'MICRO_MUTED':
                        markMicroOff(event.userid)
                        break;
                    case 'MICRO_UNMUTED':
                        markMicroOn(event.userid)
                        break;
                    case 'VIDEO_OFF':
                        turnVideoOff()
                        break;
                    case 'VIDEO_ON':
                        turnVideoOn()
                        break;
                    case 'VIDEO_MUTED':
                        markVideoOff(event.userid)
                        break;
                    case 'VIDEO_UNMUTED':
                        markVideoOn(event.userid)
                        break;
                    case 'CHAT':
                        toastr.options = {
                            "closeButton": true,
                            "debug": false,
                            "newestOnTop": true,
                            "progressBar": false,
                            "positionClass": "toast-top-left",
                            "preventDuplicates": false,
                            "onclick": null,
                            "showDuration": "300",
                            "hideDuration": "1000",
                            "timeOut": 3000,
                            "extendedTimeOut": 0,
                            "showEasing": "swing",
                            "hideEasing": "linear",
                            "showMethod": "fadeIn",
                            "hideMethod": "fadeOut",
                            "tapToDismiss": false
                        };

                        removeHandToast(event.userid);

                        toastr.info("<h6>" + event.extra.name +
                            ' A envoyé un message!</h6><button class=" d-none btn btn-primary btn-allow-hand-' +
                            event.userid + ' w-100">Donner la parole</button>',
                            '<h5 class="text-white">Demande de parole</h5>');

                        // $('.btn-allow-hand-' + event.userid).click(function(e) {
                        //     connection.send({
                        //         type: "MICRO_ON",
                        //     }, event.userid);
                        //     removeHandToast(event.userid)
                        // });

                        chatReceived(event.data.message, event.data.time, event.extra.name)
                        break;
                    case 'ENTIRE_ROOM_CLOSED':
                        leaveRoom(true);
                        break;
                    default:
                        console.log('UNKNOWN MESSAGE TYPE', event.data);
                        break;
                }
            }
        };

        connection.onstream = function(event) {
            console.log("onstream", event);

            $('.nb-participant').text(1 + connection.getAllParticipants().length);

            if (event.type === 'local') {
                event.stream.isScreen = JSON.parse(event.stream.idInstance).isScreen ? true : false;
                event.extra.isMain = event.stream.isScreen || (event.extra.isOwner)
                event.extra.audio = getRoomStorage('audio') ? false : true
                event.extra.video = (getRoomStorage('video') ? false : true) && !event.stream.isScreen

                if (!$('.mute-bt').hasClass('micro-' + event.userid)) $('.mute-bt').addClass('micro-' + event.userid);

                if (!$('.mute-video').hasClass('video-' + event.userid)) $(".mute-video").addClass('video-' + event
                    .userid)
            }

            if (event.extra.isMain && $('.fade-whiteboard .user-active').length != 0) {
                mainToItem()
            }

            // add user to list users
            let str_invite = `
            <li class="add-listitem user-${event.userid} ${event.extra.isMain?'user-active':''}">
                <div class="person-info">
                    <div class="person-view">${event.extra.name.charAt(0).toUpperCase()}</div>
                    <div class="person-name">${event.extra.name}</div>
                </div>
                <div class="list-body">
                    <ul class="action-info">
                        <li>
                            <a href="#" class="mute-vid video-${event.userid}">
                                <i class="feather-video"></i>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="mute-mic micro-${event.userid}">
                                <i class="feather-mic"></i>
                            </a>
                        </li>
                    </ul>
                </div>
            </li>
        `;
            $('.add-list').append(str_invite);

            // Manage UI for stream setup
            let str_div = `
            <div class="text-avatar ${event.extra.isMain ? 'ripple' : ''}">
                <div class="text-box">
                    ${event.extra.name.charAt(0).toUpperCase()}
                </div>
            </div>
            <div class="part-name">
                <h4>${event.extra.name}</h4>
            </div>
            <div class="more-icon d-flex align-items-center justify-content-between">
                <a href="#" class="handraise-on">
                    <i class="fas fa-hand-paper"></i>
                </a>
                <a class="micro-${event.userid}" href="#">
                    <i class="feather-mic"></i>
                </a>
            </div>
        `;

            let video = document.createElement('video');
            try {
                video.setAttributeNode(document.createAttribute('autoplay'));
                video.setAttributeNode(document.createAttribute('playsinline'));
                video.setAttributeNode(document.createAttribute('controls'));
                // video.width = 50
                video.muted = true;
            } catch (e) {
                video.setAttribute('autoplay', true);
                video.setAttribute('playsinline', true);
                video.setAttribute('controls', false);
            }
            video.srcObject = event.stream;
            video.id = event.streamid;

            video.style.height = "100%";
            video.style.width = "100%";

            let div = document.createElement('div');

            $(div).attr('data-type', event.stream.isScreen ? 'screen' : 'video')

            // $(div).addClass('join-video mx-auto')
            $(div).addClass('join-video')
            if (event.extra.isOwner) $(div).addClass('owner')

            if (event.extra.isMain) {
                // if (event.stream.isScreen && params.open != 'true') $('#btn-share-screen').css('display', 'none');
                $(div).addClass('user-active');
            } else {
                // $(div).addClass('single-user w-100 px-md-2');
                $(div).addClass('single-user');
            }

            $(div).html(str_div);

            $(div).prepend(video);

            $(div).addClass('user-' + event.userid);

            if (!event.stream) {
                $(div).addClass('cam-off');
            }

            if ($(div).hasClass('user-active')) {
                let icon = "";
                if (event.stream.isScreen && !event.extra.isOwner && connection.extra.isOwner) {
                    icon = document.createElement('a')
                    $(icon).attr('href', 'javascrit:void(0)')
                    $(icon).addClass('mx-2 btn btn-danger')
                    $(icon).html('<i class="mdi mdi-laptop"></i>')
                    $(icon).click(function(e) {
                        e.preventDefault();
                        stopRemoteScreen(event.userid)
                    });
                }
                $(div).find('.more-icon').append(icon)
                $('.current-active').removeClass('current-active')
                $(div).addClass('current-active')
                // if ($('.fade-whiteboard .user-active').length == 0) {
                $(div).attr('data-user', event.userid)
                $('.fade-whiteboard').prepend(div)
                // } else {
                // $('.fade-whiteboard .user-active').replaceWith(div)
                // }
            } else {
                $('.fade-whiteboard .vertical-sec').append(div);
            }

            resizeInnerDiv();

            // Deal with Media status UI's state
            if (!event.extra.audio) {
                if (event.type == 'local') {
                    turnMicroOff()
                } else {
                    markMicroOff(event.userid)
                }
            }

            if (!(event.extra.video)) {
                if (event.type == 'local') {
                    turnVideoOff()
                } else {
                    markVideoOff(event.userid)
                }
            } else {
                if (event.type == 'local') {
                    turnVideoOn()
                } else {
                    markVideoOn(event.userid)
                }
            }

            if (event.type == 'local') {
                if (event.stream.isScreen) {
                    markScreenOn()
                } else {
                    markScreenOff()
                }
            }

            // toggle audio or video btns' event handler
            $(".micro-" + event.userid).click(function(e) {
                e.preventDefault();
                if (event.type == 'local') {
                    if ($(this).hasClass('muted')) {
                        turnMicroOn()
                    } else {
                        turnMicroOff()
                    }
                } else if (connection.extra.isOwner) {
                    if ($(this).hasClass('muted')) {
                        // connection.send({ type: "MICRO_ON",  }, event.userid); // FOR SECURITY CONCERNS, OWNER CAN'T FREELY OPEN THE MICROPHONE OF THE USER.
                    } else {
                        connection.send({
                            type: "MICRO_OFF",
                        }, event.userid)
                    }
                }
            });

            $(".video-" + event.userid).click(function(e) {
                e.preventDefault();
                e.stopPropagation();

                if (event.type == 'local') {
                    if ($(this).hasClass('stoped')) {
                        turnVideoOn()
                    } else {
                        turnVideoOff()
                    }
                } else if (connection.extra.isOwner) {
                    if ($(this).hasClass('stoped')) {
                        // connection.send({ type: "VIDEO_ON" }, event.userid); // FOR SECURITY CONCERNS, OWNER CAN'T FREELY OPEN THE VIDEO OF THE USER.
                    } else {
                        connection.send({
                            type: "VIDEO_OFF",
                        }, event.userid)
                    }
                }
            });
        };

        connection.onstreamended = function(event) {
            console.log('_remove user-' + event.userid)
            $('.nb-participant').text(1 + connection.getAllParticipants().length)
            $('.user-' + event.userid).remove();
            resizeInnerDiv()
            if (event.stream.isScreen) {
                ownerToMain()
                if (event.type === 'local') {
                    connection.addStream({
                        audio: true,
                        video: true,
                    });
                }
            }
        }

        connection.onleave = function(event) {
            console.log("onleave ", event);

            connection.streamEvents.selectAll({
                userid: event.userid
            }).forEach(function(remoteStreamEvent) {
                connection.onstreamended(remoteStreamEvent)
            });
        }

        connection.onMediaError = function(e) {
            if (e.message == 'Permission denied') {
                connection.addStream({
                    audio: true,
                    video: true,
                });
            } else if (e.message === 'Concurrent mic process limit.') {
                if (DetectRTC.audioInputDevices.length <= 1) {
                    alert('Please select external microphone. Check github issue number 483.');
                    return;
                }

                var secondaryMic = DetectRTC.audioInputDevices[1].deviceId;
                connection.mediaConstraints.audio = {
                    deviceId: secondaryMic
                };

                joinRoom()
            } else {
                showAlert("Oops!", e.message, "error")
            }
        };

        let owner_id = null;
        connection.onUserStatusChanged = function(event) {
            console.log("onUserStatusChanged ", event);

            if (event.status === 'online') {
                if (event.extra.isOwner) {
                    owner_id = event.userid;
                }
                allowed[event.userid] = true
            }
        }

        connection.onUserIdAlreadyTaken = function(useridAlreadyTaken, yourNewUserId) {
            // via #683
            connection.close();
            connection.closeSocket();

            connection.isInitiator = false;
            connection.userid = connection.token();
            putStorage(compound_room_id, {
                'user_id': connection.userid
            })

            connection.join(connection.sessionid);

            if (connection.enableLogs) {
                console.warn('Userid already taken.', useridAlreadyTaken, 'Your new userid:', connection.userid);
            }
        };

        // Open socket.io connection -----------------------------------------------------------
        connection.connectSocket(function(socket) {
            initCustomSocketEvents();

            if (connection.extra.isOwner) {
                openRoom();
            } else {
                joinRoom();
            }
        });

        // Used functions -----------------------------------------------------------
        function getRoomStorage(key) {
            let room_storage = getStorage(compound_room_id);
            return room_storage[key];
        }

        function removeUserAllowToast(userid) {
            for (const toast of $('.btn-allow-user-' + userid).closest('.toast')) {
                toastr.clear($(toast), {
                    force: true
                })
            }
        }

        function openRoom() {
            connection.openOrJoin(compound_room_id, function(isRoomOpened, roomid, error) {
                if (error) {
                    if (error === CONNECTION_ERRORS.ROOM_NOT_AVAILABLE) {
                        alert('Someone already created this room. Please either join or create a separate room.');
                        return;
                    }
                }
            });
        }

        // function joinRoom() {
        //     connection.join(compound_room_id, function(isRoomJoined, roomid, error) {
        //         if (error) {
        //             if (error === CONNECTION_ERRORS.ROOM_NOT_AVAILABLE) {
        //                 alert(
        //                     'This room does not exist. Please either create it or wait for moderator to enter in the room.'
        //                 );
        //                 return;
        //             }
        //             if (error === CONNECTION_ERRORS.ROOM_FULL) {
        //                 alert('Room is full.');
        //                 return;
        //             }
        //             if (error === CONNECTION_ERRORS.INVALID_PASSWORD) {
        //                 connection.password = prompt('Please enter room password.') || '';
        //                 if (!connection.password.length) {
        //                     alert('Invalid password.');
        //                     return;
        //                 }

        //                 joinRoom();
        //                 return;
        //             }
        //             alert(error);
        //         } else {
        //             console.log(connection.getAllParticipants());
        //         }
        //     })
        // }
        function joinRoom() {
            connection.mediaConstraints = {
                audio: true, // Autoriser l'audio
                video: false, // Désactiver la vidéo par défaut
            };

            connection.join(compound_room_id, function(isRoomJoined, roomid, error) {
                if (error) {
                    // Gérer les erreurs comme précédemment
                } else {
                    console.log(connection.getAllParticipants());
                }
            });
        }

        function initCustomSocketEvents() {
            connection.socket.on('disconnect', function() {
                console.error('SOCKET_DISCONNECTED !');

                // TODO : Handle this properly with UI
                // location.reload();
            });

            if (connection.extra.isOwner) {
                connection.socket.on(connection.socketCustomEvent, function(event) {
                    switch (event.type) {
                        case 'JOIN_PERMISSION':
                            onJoinPermission(event);
                            break;
                        default:
                            console.warn("Unknown event type", event);
                            break;
                    }
                });
            }
        }

        function onJoinPermission(event) {
            if (allowed[event.userid]) {
                // permission already granted
                connection.socket.emit(connection.socketCustomEvent, {
                    type: 'JOIN_PERMISSION_GRANTED',
                    userid: event.userid,
                });

                return;
            }

            toastr.options = {
                "closeButton": true,
                "debug": false,
                "newestOnTop": true,
                "progressBar": false,
                "positionClass": "toast-top-right",
                "preventDuplicates": false,
                "onclick": null,
                "showDuration": "300",
                "hideDuration": "1000",
                "timeOut": 0,
                "extendedTimeOut": 0,
                "showEasing": "swing",
                "hideEasing": "linear",
                "showMethod": "fadeIn",
                "hideMethod": "fadeOut",
                "tapToDismiss": false
            }

            toastr.info(`<h6 class="text-white"><b class="text-dark">${event.name}</b> souhaite rejoindre la réunion!</h6>
                    <div class="row">
                        <div class="col ">
                            <button class="btn-allow-user-${event.userid} btn btn-primary w-100">Autoriser</button>
                        </div>
                        <div class="col ">
                            <button class="btn-reject-user-${event.userid} btn btn-danger w-100">Rejeter</button>
                        </div>
                    </div>
            `,
                `<h5 class="text-white">Nouvelle connexion</h5>`
            );

            $(`.btn-allow-user-${event.userid}`).click(function(e) {
                e.preventDefault();
                removeUserAllowToast(event.userid);

                allowed[event.userid] = true;

                // inform user join room permission is granted
                connection.socket.emit(connection.socketCustomEvent, {
                    type: 'JOIN_PERMISSION_GRANTED',
                    userid: event.userid,
                });
            });

            $(`.btn-reject-user-${event.userid}`).click(function(e) {
                e.preventDefault();
                removeUserAllowToast(event.userid);

                // inform user join room permission is denied
                connection.socket.emit(connection.socketCustomEvent, {
                    type: 'JOIN_PERMISSION_DENIED',
                    userid: event.userid,
                });
            });
        }

        function removeHandToast(userid) {
            for (const toast of $('.btn-allow-hand-' + userid).closest('.toast')) {
                toastr.clear($(toast), {
                    force: true
                })
            }
        }

        function removeScreenToast(userid) {
            for (const toast of $('.btn-reject-screen-' + userid).closest('.toast')) {
                toastr.clear($(toast), {
                    force: true
                })
            }
        }

        function chatReceived(message, time, sender_name) {
            let now = new Date();
            let hh = now.getHours();
            let min = now.getMinutes();

            hh = hh ? hh : 12;
            hh = hh < 10 ? '0' + hh : hh;
            min = min < 10 ? '0' + min : min;

            let local_time = hh + " : " + min;
            $messageHtml = `
            <li class="media received">
                <div class="avatar person-view">
                    ${sender_name.charAt(0).toUpperCase()}
                </div>
                <div class="media-body">
                    <div class="msg-box">
                        <ul class="chat-msg-info">
                            <li>
                                <div class="chat-time">
                                    ${sender_name} <span>${local_time}</span>
                                </div>
                            </li>
                        </ul>
                        <div>
                            <p>${message}</p>
                        </div>
                    </div>
                </div>
            </li>
                `;
            let chatlist = $('.chat-container');
            chatlist.append($messageHtml)
            $('.user-sidebar-right .chat-body').animate({
                scrollTop: chatlist.find('li:last').offset().top
            }, 0);
            $('.chat-empty').remove()
        }

        function stopStream() {
            connection.streamEvents.selectAll({
                local: true
            }).forEach(_event => {
                _event.stream.getTracks().forEach((track) => {
                    track.stop();
                });
            });
        }

        function turnVideoOff() {
            // mute local video streams
            // connection.streamEvents.selectAll({
            //     local: true,
            //     isVideo: true,
            // }).forEach(_event => {
            //     // mute and release the track
            //     _event.stream.mute("video");
            //     _event.stream.getVideoTracks().forEach(function(track) {
            //         track.stop();
            //     });

            //     // save and inform others
            //     putStorage(compound_room_id, {'videoAllowed': false})
            //     markVideoOff(_event.userid);

            //     connection.send({ type: "VIDEO_MUTED" });
            // });

            connection.streamEvents.selectAll().forEach(_event => {
                if (_event.type === 'local') {
                    if (!_event.stream.isScreen) {
                        _event.stream.getTracks().forEach(track => {
                            if (track.kind == 'video') {
                                track.enabled = false
                            }
                        });
                    }
                    putStorage(compound_room_id, {
                        'videoAllowed': false
                    })
                    markVideoOff(_event.userid);

                    connection.send({
                        type: "VIDEO_MUTED"
                    });
                }

            })
        }

        function turnVideoOn() {
            // const local = connection.streamEvents.selectAll({
            //     local: true,
            //     isVideo: true,
            // });

            // if (local.length) {
            //     local.forEach(_event => _event.stream.unmute("video"));
            // } else {
            //     connection.addStream({
            //         video: true,
            //         streamCallback: function(stream) {
            //             if (!stream) {
            //                 console.log("Couldn't capture video stream !");
            //                 return;
            //             }

            //             stream.unmute("video"); // unmute the

            //             putStorage(compound_room_id, {'video': true})
            //             markVideoOn(connection.userid);

            //             // connection.peers.forEach(peer => {
            //             //     connection.send({
            //             //         type: "VIDEO_UNMUTED",
            //             //     }, peer.userid);
            //             // })

            //             connection.send({ type: "VIDEO_UNMUTED" });
            //         }
            //     });
            // }

            connection.streamEvents.selectAll().forEach(_event => {
                if (_event.type === 'local') {
                    if (!_event.stream.isScreen) {
                        _event.stream.getTracks().forEach(track => {
                            if (track.kind == 'video') {
                                track.enabled = true
                            }
                        });
                        putStorage(compound_room_id, {
                            'video': true
                        })
                        markVideoOn(_event.userid);

                        // connection.peers.forEach(peer => {
                        //     connection.send({
                        //         type: "VIDEO_UNMUTED",
                        //     }, peer.userid);
                        // })

                        connection.send({
                            type: "VIDEO_UNMUTED"
                        });
                    }
                }
            })
        }

        function markVideoOff(userid) {
            connection.streamEvents.selectAll().forEach(_event => {
                if (_event.userid == userid) {
                    if (!_event.stream.isScreen) {
                        $('.user-' + userid).addClass('cam-off');
                    } else {
                        $('.user-' + userid).removeClass('cam-off');
                    }
                }
            })

            for (const element of $(".video-" + userid)) {
                if ($(element).hasClass('mute-video')) {
                    $(element).addClass('stop');
                }
            }

            $(".video-" + userid).addClass('stoped');

            $(".video-" + userid).find('.feather-video').removeClass('feather-video').addClass('feather-video-off');
        }

        function markVideoOn(userid) {
            $('.user-' + userid).removeClass('cam-off');

            for (const element of $(".video-" + userid)) {
                if ($(element).hasClass('mute-video')) {
                    $(element).removeClass('stop');
                }
            }

            $(".video-" + userid).removeClass('stoped');

            $(".video-" + userid).find('.feather-video-off').removeClass('feather-video-off').addClass('feather-video');
        }

        function turnMicroOff() {

            // mute local micro streams
            // connection.streamEvents.selectAll({
            //     local: true,
            //     isAudio: true,
            // }).forEach(_event => {
            //     // mute and release the track
            //     _event.stream.mute("audio");
            //     _event.stream.getAudioTracks().forEach(function(track) {
            //         track.stop();
            //     });

            //     // save and inform others
            //     putStorage(compound_room_id, {'audio': false})
            //     markMicroOff(_event.userid);

            //     // connection.peers.forEach(peer => {
            //     //     connection.send({
            //     //         type: "MICRO_MUTED",
            //     //     }, peer.userid)
            //     // })

            //     connection.send({ type: "MICRO_MUTED" });
            // });

            connection.streamEvents.selectAll().forEach(_event => {
                if (_event.type === 'local') {
                    _event.stream.getTracks().forEach(track => {
                        if (track.kind == 'audio') {
                            track.enabled = false
                            putStorage(compound_room_id, {
                                'audio': false
                            })
                            markMicroOff(_event.userid);

                            // connection.peers.forEach(peer => {
                            //     connection.send({
                            //         type: "MICRO_MUTED",
                            //     }, peer.userid)
                            // })

                            connection.send({
                                type: "MICRO_MUTED"
                            });
                        }
                    });
                }
            })
        }

        function turnMicroOn() {
            if (!getRoomStorage('microAllowed')) {
                // showAlert('Vous n\'êtes pas autorisé à activer votre micro', '', 'error')
                putStorage(compound_room_id, {
                    'microAllowed': true
                });
            } else {
                // const local = connection.streamEvents.selectAll({
                //     local: true,
                //     isAudio: true,
                // });

                // if (local.length) {
                //     local.forEach(_event => _event.stream.unmute("audio"));
                // } else {
                //     connection.addStream({
                //         audio: true,
                //         streamCallback: function(stream) {
                //             if (!stream) {
                //                 console.log("Couldn't capture audio stream !");
                //                 return;
                //             }

                //             stream.unmute("audio"); // unmute the

                //             putStorage(compound_room_id, {'audio': true});
                //             markMicroOn(connection.userid);

                //             // connection.peers.forEach(peer => {
                //             //     connection.send({
                //             //         type: "MICRO_UNMUTED",
                //             //     }, peer.userid)
                //             // })

                //             connection.send({ type: "MICRO_UNMUTED" });
                //         }
                //     });
                // }

                connection.streamEvents.selectAll().forEach(_event => {
                    if (_event.type === 'local') {
                        _event.stream.getTracks().forEach(track => {
                            if (track.kind == 'audio') {
                                track.enabled = true
                                putStorage(compound_room_id, {
                                    'audio': true
                                })
                                markMicroOn(_event.userid)

                                // connection.peers.forEach(peer => {
                                //     connection.send({
                                //         type: "MICRO_UNMUTED",
                                //     }, peer.userid)
                                // })

                                connection.send({
                                    type: "MICRO_UNMUTED"
                                });
                            }
                        });
                    }
                })
            }
        }

        function markMicroOff(userid) {
            for (const el of $(".micro-" + userid)) {
                if ($(el).hasClass('mute-bt')) {
                    $(el).addClass('stop');
                }
            }

            $(".micro-" + userid).addClass('muted');
            $(`.micro-${userid} .feather-mic`).removeClass('feather-mic').addClass('feather-mic-off');
        }

        function markMicroOn(userid) {
            for (const el of $(".micro-" + userid)) {
                if ($(el).hasClass('mute-bt')) {
                    $(el).removeClass('stop');
                }
            }

            $(".micro-" + userid).removeClass('muted');
            $(`.micro-${userid} .feather-mic-off`).removeClass('feather-mic-off').addClass('feather-mic');
        }

        function markScreenOff() {
            $("#btn-share-screen").addClass('stoped');
            $("#btn-share-screen").addClass('stop');
            $("#btn-share-screen").find('.mdi').removeClass('mdi-laptop').addClass('mdi-laptop-off');
        }

        function markScreenOn() {
            $("#btn-share-screen").removeClass('stoped');
            $("#btn-share-screen").removeClass('stop');
            $("#btn-share-screen").find('.mdi').removeClass('mdi-laptop-off').addClass('mdi-laptop');
        }

        function markHandOff(userid) {
            $(".join-video.user-" + userid + " .more-icon .handraise-on").removeClass("active");
        }

        function markHandOn(userid) {
            $(".join-video.user-" + userid + " .more-icon .handraise-on").addClass("active");
        }

        function mainToItem() {
            const el = $('.fade-whiteboard .user-active');
            el.removeClass('.user-active');
            el.addClass('single-user');

            $('.fade-whiteboard .vertical-sec').prepend(el);

            resizeInnerDiv();
        }

        function stopRemoteScreen(userid) {
            connection.send({
                type: "SCREEN_OFF",
            }, userid)
        }

        function ownerToMain() {
            let ele = $('.owner')
            ele.addClass('current-active')
            ele.addClass('user-active')
            ele.removeClass('single-user');
            // ele.removeClass('single-user w-100 px-md-2');
            // ele.parent().remove()
            $('.fade-whiteboard').prepend(ele)
            resizeInnerDiv()
        }

        function resizeInnerDiv() {

            var height = $(window).height();
            var screen_height = $(window).height() - 252;
            var screen_height_vertical_view = $(window).height() - 232;
            var screen_height_horizontal_view = $(window).height() - 292;

            $(".meeting-wrapper .join-contents").css("min-height", screen_height);

            if ($(window).width() < 768) {

                screen_height = $(window).height() - 232;
                screen_height_horizontal_view = $(window).height() - 232;

                let mainH = $(".meeting-list").height() / 2 - 15;
                mainH = Math.max(180, mainH);
                const h = Math.max(80, screen_height / 4);

                $('.join-contents .join-video').css('height', mainH);
                $('.join-contents .join-video img').css('height', mainH);

                $('.join-contents .join-video.single-user img').css('height', h);
                $('.join-contents .join-video.single-user').css('height', h);
                $('.join-contents .join-video.single-user').css('min-height', h);

                $('.grid-view .join-video.single-user img').css('height', h);
                $('.grid-view .join-video.single-user').css('height', h);
                $('.grid-view .join-video.single-user').css('min-height', h);

                $('.vertical-view .join-video.single-user img').css('height', h);
                $('.vertical-view .join-video.single-user').css('height', h);
                $('.vertical-view .join-video.single-user').css('min-height', h);
            } else {

                $('.join-contents .join-video').css('height', (screen_height_horizontal_view / 4) * 2.8);
                $('.join-contents .join-video img').css('height', (screen_height_horizontal_view / 4) * 2.8);

                $('.join-contents .join-video.single-user img').css('height', screen_height / 4);
                $('.join-contents .join-video.single-user').css('height', screen_height / 4);
                $('.join-contents .join-video.single-user').css('min-height', screen_height / 4);

                $('.horizontal-view .join-video.single-user img').css('height', screen_height / 3);
                $('.horizontal-view .join-video.single-user').css('height', screen_height / 3);
                $('.horizontal-view .join-video.single-user').css('min-height', screen_height / 3);

                $('.grid-view .join-video.single-user img').css('height', screen_height / 2);
                $('.grid-view .join-video.single-user').css('height', screen_height / 2);
                $('.grid-view .join-video.single-user').css('min-height', screen_height / 2);

                $('.vertical-view .join-video').css('height', (screen_height_vertical_view / 4) * 3);
                $('.vertical-view .join-video img').css('height', (screen_height_vertical_view / 4) * 3);

                $('.vertical-view .join-video.single-user img').css('height', screen_height / 4);
                $('.vertical-view .join-video.single-user').css('height', screen_height / 4);
                $('.vertical-view .join-video.single-user').css('min-height', screen_height / 4);

                // $('.vertical-view .join-video.single-user').css('width', 0.15 * parseFloat($(window).width()));
            }
        }

        if ($('.page-content').length > 0) {
            resizeInnerDiv();
        }

        $(window).resize(function() {
            if ($('.page-content').length > 0) {
                resizeInnerDiv();
            }
        });
    </script>
    {{-- <script src="https://cdn.webrtc-experiment.com/common.js"></script> --}}
@endsection