145 lines
5.6 KiB
HTML
145 lines
5.6 KiB
HTML
|
{{ 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>
|
||
|
|