Bit of a rewrite
This commit is contained in:
parent
b6377bd228
commit
82dd6fd398
11 changed files with 787 additions and 953 deletions
147
public/script.js
147
public/script.js
|
|
@ -1,147 +0,0 @@
|
|||
const socket = io("/")
|
||||
const videos = document.getElementById("videos")
|
||||
const myPeer = new Peer()
|
||||
const popup = document.querySelector("#popup")
|
||||
const hrefInput = document.querySelector("#href")
|
||||
const myVideo = document.createElement("video")
|
||||
|
||||
myVideo.muted = true
|
||||
|
||||
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)
|
||||
}
|
||||
|
||||
const connectToNewUser = (userId, stream) => {
|
||||
console.log("somebody joined", stream, userId)
|
||||
const call = myPeer.call(userId, stream)
|
||||
const video = document.createElement("video")
|
||||
|
||||
call.on("stream", (userVideoStream) =>
|
||||
addVideoStream(video, userVideoStream)
|
||||
)
|
||||
|
||||
call.on("close", () => video.remove())
|
||||
}
|
||||
|
||||
const addVideoStream = (video, stream, isYours) => {
|
||||
video.srcObject = stream
|
||||
video.addEventListener("loadedmetadata", () => video.play())
|
||||
if (isYours) {
|
||||
const container = document.createElement("div")
|
||||
container.classList.add("your-video")
|
||||
container.append(video)
|
||||
videos.append(container)
|
||||
return dragElement(container)
|
||||
}
|
||||
|
||||
video.controls = "controls"
|
||||
videos.append(video)
|
||||
}
|
||||
|
||||
document
|
||||
.querySelector("#share")
|
||||
.addEventListener("click", () => popup.classList.remove("dismissed"))
|
||||
|
||||
hrefInput.value = window.location.href
|
||||
|
||||
document.querySelector("#copy").addEventListener("click", () => {
|
||||
hrefInput.focus()
|
||||
hrefInput.select()
|
||||
navigator.clipboard.writeText(hrefInput.value)
|
||||
document.querySelector("#is-copied").classList.add("copied")
|
||||
})
|
||||
|
||||
document
|
||||
.querySelector("#close")
|
||||
.addEventListener("click", () => popup.classList.add("dismissed"))
|
||||
|
||||
myPeer.on("open", (id) =>
|
||||
navigator.mediaDevices
|
||||
.getUserMedia({
|
||||
video: true,
|
||||
audio: true,
|
||||
})
|
||||
.then((stream) => {
|
||||
console.log("You connected")
|
||||
addVideoStream(myVideo, stream, true)
|
||||
myPeer.on("call", (call) => {
|
||||
call.answer(stream)
|
||||
const video = document.createElement("video")
|
||||
call.on("close", () => video.remove())
|
||||
call.on("stream", (userVideoStream) =>
|
||||
addVideoStream(video, userVideoStream)
|
||||
)
|
||||
})
|
||||
|
||||
socket.on("user-connected", (userId) =>
|
||||
connectToNewUser(userId, stream)
|
||||
)
|
||||
socket.emit("join-room", ROOM_ID, id)
|
||||
})
|
||||
)
|
||||
|
||||
socket.on("user-disconnected", (userId) => {
|
||||
const call = myPeer.connections[userId]
|
||||
if (call) call[0].close()
|
||||
console.log("somebody left", userId)
|
||||
})
|
||||
Reference in a new issue