Added share button
This commit is contained in:
parent
b5f857edf5
commit
98a9f281d2
3 changed files with 131 additions and 0 deletions
|
|
@ -1,6 +1,8 @@
|
||||||
const socket = io("/")
|
const socket = io("/")
|
||||||
const videos = document.getElementById("videos")
|
const videos = document.getElementById("videos")
|
||||||
const myPeer = new Peer()
|
const myPeer = new Peer()
|
||||||
|
const popup = document.querySelector("#popup")
|
||||||
|
const hrefInput = document.querySelector("#href")
|
||||||
const myVideo = document.createElement("video")
|
const myVideo = document.createElement("video")
|
||||||
|
|
||||||
myVideo.muted = true
|
myVideo.muted = true
|
||||||
|
|
@ -85,6 +87,23 @@ const addVideoStream = (video, stream, isYours) => {
|
||||||
videos.append(video)
|
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
|
navigator.mediaDevices
|
||||||
.getUserMedia({
|
.getUserMedia({
|
||||||
video: true,
|
video: true,
|
||||||
|
|
|
||||||
|
|
@ -135,3 +135,89 @@ button:is(:disabled, :hover) {
|
||||||
video.your-video {
|
video.your-video {
|
||||||
display: none;
|
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;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -18,5 +18,31 @@
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="videos"></div>
|
<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">✕</button>
|
||||||
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
Reference in a new issue