Henry-Hiles/Video-Chat
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added share button

Browse source
This commit is contained in:
Henry Hiles 2022-02-09 12:20:44 -05:00
parent b5f857edf5
commit 98a9f281d2
3 changed files with 131 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

19
public/script.js
View file

@ -1,6 +1,8 @@
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
@ -85,6 +87,23 @@ const addVideoStream = (video, stream, isYours) => {
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"))
navigator.mediaDevices
.getUserMedia({
video: true,

86
public/style.css
View file

@ -135,3 +135,89 @@ button:is(:disabled, :hover) {
video.your-video {
display: none;
}
#share {
position: absolute;
top: 10px;
color: white;
right: 10px;
}
#popup {
background: #e0e0e0;
position: absolute;
display: flex;
align-items: center;
flex-direction: column;
box-shadow: 0 10px 20px #00000033;
top: 50%;
left: 50%;
border-radius: 0.5em;
transform: translate(-50%, -50%);
width: 500px;
transition: 0.3s opacity ease-in-out;
}
#popup.dismissed {
opacity: 0;
}
#popup hr {
width: 90%;
}
#close {
color: #b0b0b0;
position: absolute;
top: 5px;
font-size: 1.5em;
right: -5px;
}
.input-group {
display: flex;
}
.input-field {
flex: 1;
}
.input-field:not(:first-child) {
border-left: 0;
}
.input-field:not(:last-child) {
border-right: 0;
}
.input-item {
background-color: var(--secondary);
font: inherit;
font-weight: normal;
}
.input-field,
.input-item {
border: 1px solid #93806c40;
padding: 0.5em 0.75em;
}
.input-field:first-child,
.input-item:first-child {
border-radius: 5px 0 0 5px;
}
.input-field:last-child,
.input-item:last-child {
border-radius: 0 5px 5px 0;
}
#is-copied.copied {
opacity: 100;
}
#is-copied {
opacity: 0;
transition: opacity 0.25s ease-in;
color: #8f8d8d;
padding: 20px;
}

26
views/room.ejs
View file

@ -18,5 +18,31 @@
</head>
<body>
<div id="videos"></div>
<button id="share">
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
class="bi bi-share"
viewBox="0 0 16 16"
>
<path
d="M13.5 1a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zM11 2.5a2.5 2.5 0 1 1 .603 1.628l-6.718 3.12a2.499 2.499 0 0 1 0 1.504l6.718 3.12a2.5 2.5 0 1 1-.488.876l-6.718-3.12a2.5 2.5 0 1 1 0-3.256l6.718-3.12A2.5 2.5 0 0 1 11 2.5zm-8.5 4a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm11 5.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3z"
/>
</svg>
</button>
<div id="popup" class="dismissed">
<h1 class="medium-header">Share</h1>
<hr />
<div class="input-group">
<input type="text" id="href" readonly class="input-field" />
<button class="input-item" id="copy">Copy</button>
</div>
<span id="is-copied">Copied to clipboard</span>
<button id="close">&#10005;</button>
</div>
</body>
</html>