From 0eab4c62ac35043ebd9d896e96a44e7ee946c116 Mon Sep 17 00:00:00 2001 From: Henry Hiles Date: Mon, 6 Jun 2022 15:48:30 -0400 Subject: [PATCH] Some nice changes like a better grid that is more responsive. --- public/scripts/login.js | 33 +++++++++++++++++++-------------- public/scripts/utils.js | 2 ++ public/scripts/video.js | 14 ++++++-------- public/style.css | 18 ++++++++++++++---- server.js | 8 ++------ views/index.ejs | 22 +--------------------- views/login.ejs | 34 ++++++++++++++++++++++++++++++++++ views/room.ejs | 20 -------------------- 8 files changed, 78 insertions(+), 73 deletions(-) create mode 100644 views/login.ejs diff --git a/public/scripts/login.js b/public/scripts/login.js index 0d3d89d..2e1f88f 100644 --- a/public/scripts/login.js +++ b/public/scripts/login.js @@ -1,29 +1,34 @@ -const socket = io("/") -const login = document.querySelector("#login") const nameButton = document.querySelector("#name") const nameInput = document.querySelector("#name-input") const nameDisplay = document.querySelector("#name-display") +const loginURL = new URL("login", window.location.origin) +try { + loginURL.searchParams.append("roomId", ROOM_ID) +} catch (error) { + if (!error instanceof ReferenceError) throw error +} + document .querySelector("#change-name") - .addEventListener("click", () => login.classList.remove("done")) + ?.addEventListener("click", () => (window.location = loginURL)) const yourName = localStorage.getItem("name") -if (yourName) nameDisplay.innerText = yourName -else login.classList.remove("done") +if (!yourName && window.location.pathname != "/login") + window.location = loginURL +if (yourName && nameDisplay) nameDisplay.innerText = yourName const validate = () => { if (!nameInput.value) return (nameInput.required = true) - document.querySelector("#login").classList.add("done") localStorage.setItem("name", nameInput.value) - nameDisplay.innerText = nameInput.value - socket.emit("name-change", nameInput.value) + + window.location.href = + new URLSearchParams(window.location.search).get("roomId") || "/" } -if (nameButton) nameButton.addEventListener("click", validate) -if (nameInput) - nameInput.addEventListener( - "keydown", - (event) => event.keyCode == "13" && validate() - ) +nameButton?.addEventListener?.("click", validate) +nameInput?.addEventListener?.( + "keydown", + (event) => event.keyCode == "13" && validate() +) diff --git a/public/scripts/utils.js b/public/scripts/utils.js index 4d408d7..e15f1bb 100644 --- a/public/scripts/utils.js +++ b/public/scripts/utils.js @@ -70,6 +70,8 @@ export const addVideoStream = (videoContainer, username, stream, isYours) => { const video = videoContainer.querySelector("video") video.srcObject = stream + if (CSS.supports("::-webkit-media-controls-panel")) + video.controls = "controls" video.addEventListener("loadedmetadata", () => video.play()) if (isYours) { video.muted = true diff --git a/public/scripts/video.js b/public/scripts/video.js index f10badd..6bcee53 100644 --- a/public/scripts/video.js +++ b/public/scripts/video.js @@ -2,10 +2,14 @@ import { addVideoStream, connectToNewUser, showNoVideoPrompt } from "./utils.js" const socket = io("/") const myPeer = new Peer() const template = document.querySelector("#video-template") -const yourName = localStorage.getItem("name") myPeer.on("open", async (id) => { try { + while (!localStorage.getItem("name")) { + await new Promise((resolve) => setTimeout(resolve, 2000)) + } + const yourName = localStorage.getItem("name") + const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true, @@ -28,13 +32,7 @@ myPeer.on("open", async (id) => { connectToNewUser(userId, username, stream, myPeer) ) } catch (error) { - if ( - error.name == "NotAllowedError" || - error.name == "NotFoundError" || - error.name == "PermissionDeniedError" || - error.name == "DevicesNotFoundError" - ) - return showNoVideoPrompt() + if (error instanceof DOMException) return showNoVideoPrompt() throw error } diff --git a/public/style.css b/public/style.css index c6240d4..bad9b84 100644 --- a/public/style.css +++ b/public/style.css @@ -21,6 +21,7 @@ body { height: 100vh; grid-auto-rows: 100vh; display: grid; + overflow: hidden; } #go { @@ -41,19 +42,27 @@ main { background-color: var(--secondary); } +@media (min-width: 800px) { + #videos { + grid-template-columns: repeat(auto-fit, minmax(33%, 1fr)); + } +} + #videos { display: grid; - grid-template-columns: repeat(auto-fit, minmax(33%, 1fr)); grid-template-rows: repeat(auto-fit, minmax(33%, 1fr)); color: white; - max-height: 100vh; + height: 100vh; + width: 100vw; background-color: var(--secondary); gap: 2px; } video { width: 100%; + height: 100%; max-height: 100vh; + object-fit: cover; } .your-video { @@ -72,11 +81,12 @@ video { } .your-video .resizer { - width: 10px; - height: 10px; + width: 15px; + height: 15px; background: var(--primary); position: absolute; right: 0; + border-radius: 5px; bottom: 0; cursor: se-resize; } diff --git a/server.js b/server.js index 226f1e1..19224b7 100644 --- a/server.js +++ b/server.js @@ -9,6 +9,8 @@ app.use(express.static("public")) app.get("/", (_, res) => res.render("index")) +app.get("/login", (_, res) => res.render("login")) + app.get("/:room", (req, res) => res.render("room", { roomId: req.params.room })) const users = {} @@ -25,12 +27,6 @@ io.on("connection", (socket) => }) socket.on("get-username", (userId, callback) => callback(users[userId])) - - socket.on("name-change", (name) => { - users[userId] = name - - socket.to(roomId).emit("name-changed", userId) - }) }) ) diff --git a/views/index.ejs b/views/index.ejs index 857a0ea..199397b 100644 --- a/views/index.ejs +++ b/views/index.ejs @@ -6,31 +6,11 @@ - + Video Chat -
-

Login

-
- - -
-
diff --git a/views/login.ejs b/views/login.ejs new file mode 100644 index 0000000..85b881b --- /dev/null +++ b/views/login.ejs @@ -0,0 +1,34 @@ + + + + + + + + + + Video Chat + + +
+

Choose a name

+
+ + +
+
+ + diff --git a/views/room.ejs b/views/room.ejs index 1ddc635..ae382a3 100644 --- a/views/room.ejs +++ b/views/room.ejs @@ -19,26 +19,6 @@ Video Chat -
-

Login

-
- - -
-

No Video / Audio Device Found