{{ template "partial/chat" . }}

<div class="viewer">
    <p class="icon-users" id="viewer-count"></p>
</div>

<div id="noperm" class="columns">
    <div class="column notif">
        <article class="notification is-link">
            Камера и микрофон нужны для присоединения к комнате. <br>
            Или же вы можете присоединиться как наблюдатель к <a href="{{ .StreamLink }}"><strong>стриму</strong></a>.
        </article>
    </div>
</div>

<div id="peers">
    <div class="columns is-multiline" id="videos">
        <div class="column is-6 peer draggable" >
            <video id="localVideo" class="video-area mirror " autoplay muted></video>
        </div>
        <div id="noone" class="column is-6 notif">
            <article id="noonein" class="notification is-primary is-light">
                <button class="delete">X</button>
                Больше нет стримов в данной комнате <br>
            </article>
            <article class="notification is-primary is-light">
                <button class="delete">X</button>
                Поделиться ссылкой на стрим(только наблюдение).
            </article>
        </div>
        <div id="nocon" class="column is-6 notif">
            <article class="notification is-danger">
                Подключение закрыто<br>
                Обновите страницу.
            </article>
        </div>
    </div>
</div>
<hr>
<div class="buttons">
    <button id="startCamera" class="button is-link">
        <img src="/svg/camera.svg" alt="Description of the image" width="40px" height="40px">
    </button>
    <button id="startScreen" class="button is-link">
        <img src="/svg/screencast.svg" alt="Description of the image" width="40px" height="40px">
    </button>
    <button id="resetStreams" class="button is-link">
        <img id="resetStreamImgs" src="/svg/tiles.svg" alt="Нажмите для восстановления положения окон" width="40px" height="40px">
    </button>
    <button id="changeAudio" class="button is-link">
        <img id="imageMicro" src="/svg/microphone_enabled.svg" alt="Нажмите для отключения микрофона" width="40px" height="40px">
    </button>
    <button id="resetStreams" class="button is-link">
        <img id="resetStreamImgs" src="/svg/porno.svg" alt="Нажмите 5 раз" width="40px" height="40px">
    </button>
    <div id="resolution-controls">
        <label for="resolution">Разрешение экрана:</label>
        <select id="resolution">
            <option value="640x480">640x480</option>
            <option value="1280x720">1280x720</option>
            <option value="1920x1080">1920x1080</option>
        </select>
    </div>
    
    
</div>
<footer class="footer">
	<div class="content footer-dropzone">
		
	</div>
	<script>
            interact('.footer-dropzone').dropzone({
            accept: '.draggable',
            overlap: 0.75,
            ondropactivate: function (event) {
                event.target.classList.add('drop-active')
            },
            ondragenter: function (event) {
                var draggableElement = event.relatedTarget
                var dropzoneElement = event.target
                dropzoneElement.classList.add('drop-target')
                draggableElement.classList.add('can-drop')
                },
            ondragleave: function (event) {
                event.target.classList.remove('drop-target')
                event.relatedTarget.classList.remove('can-drop')
                
            },
            ondrop: function (event) {
                
            },
            ondropdeactivate: function (event) {
                event.target.classList.remove('drop-active')
                event.target.classList.remove('drop-target')
            }
        })
	
        interact('.draggable')
            .draggable({
            inertia: true,
            modifiers: [
                interact.modifiers.restrictRect({
                restriction: 'parent',
                endOnly: true
                })
            ],
            autoScroll: true,
            listeners: {
                move(event) {
                const target = event.target
                const x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx
                const y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy
                target.style.transform = `translate(${x}px, ${y}px)`
                target.setAttribute('data-x', x)
                target.setAttribute('data-y', y)
                }
            }
            })
            .resizable({
            edges: { left: true, right: true, bottom: true, top: true },
            listeners: {
                move(event) {
                let { x, y } = event.target.dataset
                x = (parseFloat(x) || 0) + event.deltaRect.left
                y = (parseFloat(y) || 0) + event.deltaRect.top
                Object.assign(event.target.style, {
                    width: `${event.rect.width}px`,
                    height: `${event.rect.height}px`,
                    transform: `translate(${x}px, ${y}px)`
                })
                Object.assign(event.target.dataset, { x, y })
                }
            }
            })

    </script>
</footer>
<script>
    let RoomWebsocketAddr = "{{.RoomWebsocketAddr}}";
    let ChatWebsocketAddr = "{{.ChatWebsocketAddr}}";
    let ViewerWebsocketAddr = "{{.ViewerWebsocketAddr}}";
</script><script src="/js/peer.js?version=5"></script><script src="/js/chat.js"></script>
<script src="/js/viewer.js"></script>