92 lines
3.2 KiB
JavaScript
92 lines
3.2 KiB
JavaScript
const dragElement = (element) => {
|
|
let startX, startY, startWidth, startHeight
|
|
|
|
const doDrag = (event) =>
|
|
(element.style.width =
|
|
startWidth +
|
|
(event.clientX || event.touches[0].clientX) -
|
|
startX +
|
|
"px")
|
|
|
|
let pos1 = 0,
|
|
pos2 = 0,
|
|
pos3 = 0,
|
|
pos4 = 0
|
|
|
|
const elementDrag = (event) => {
|
|
pos1 = pos3 - (event.clientX || event.touches[0].clientX)
|
|
pos2 = pos4 - (event.clientY || event.touches[0].clientY)
|
|
pos3 = event.clientX || event.touches[0].clientX
|
|
pos4 = event.clientY || event.touches[0].clientY
|
|
element.style.top = `${element.offsetTop - pos2}px`
|
|
element.style.left = `${element.offsetLeft - pos1}px`
|
|
}
|
|
|
|
const removeFunctions = (resize) => {
|
|
document.removeEventListener("mousemove", resize ? doDrag : elementDrag)
|
|
document.removeEventListener("mouseup", this)
|
|
document.removeEventListener("touchmove", resize ? doDrag : elementDrag)
|
|
document.removeEventListener("touchend", this)
|
|
}
|
|
|
|
const initDrag = (event) => {
|
|
startX = event.clientX || event.touches[0].clientX
|
|
startY = event.clientY || event.touches[0].clientY
|
|
startWidth = element.clientWidth
|
|
startHeight = element.clientHeight
|
|
|
|
document.addEventListener("mousemove", doDrag)
|
|
document.addEventListener("touchmove", doDrag)
|
|
document.addEventListener("touchend", () => removeFunctions(true))
|
|
document.addEventListener("mouseup", () => removeFunctions(true))
|
|
}
|
|
|
|
const resizer = document.createElement("div")
|
|
resizer.className = "resizer"
|
|
element.appendChild(resizer)
|
|
resizer.addEventListener("mousedown", initDrag)
|
|
resizer.addEventListener("touchstart", initDrag)
|
|
|
|
const dragMouseDown = (event) => {
|
|
if (event.target == resizer) return
|
|
|
|
pos3 = event.clientX || event.touches[0].clientX
|
|
pos4 = event.clientY || event.touches[0].clientY
|
|
document.addEventListener("mousemove", elementDrag)
|
|
document.addEventListener("touchmove", elementDrag)
|
|
document.addEventListener("touchend", () => removeFunctions())
|
|
document.addEventListener("mouseup", () => removeFunctions())
|
|
}
|
|
|
|
element.addEventListener("mousedown", dragMouseDown)
|
|
element.addEventListener("touchstart", dragMouseDown)
|
|
}
|
|
|
|
export const addVideoStream = (videoContainer, username, stream, isYours) => {
|
|
const videos = document.querySelector("#videos")
|
|
|
|
const video = videoContainer.querySelector("video")
|
|
video.srcObject = stream
|
|
video.addEventListener("loadedmetadata", () => video.play())
|
|
if (isYours) {
|
|
video.muted = true
|
|
videoContainer.classList.add("your-video")
|
|
videos.append(videoContainer)
|
|
return dragElement(videoContainer)
|
|
}
|
|
|
|
videoContainer.querySelector(".name").innerText = username
|
|
|
|
videos.append(videoContainer)
|
|
}
|
|
|
|
export const connectToNewUser = (userId, username, stream) => {
|
|
const call = myPeer.call(userId, stream)
|
|
const video = template.content.firstElementChild.cloneNode(true)
|
|
|
|
call.on("stream", (userVideoStream) =>
|
|
addVideoStream(video, username, userVideoStream)
|
|
)
|
|
|
|
call.on("close", () => video.remove())
|
|
}
|