mirror of
https://github.com/ianramzy/decentralized-video-chat.git
synced 2024-11-01 07:59:21 +08:00
Neomorphic buttons
This commit is contained in:
ian ramzy
parent
53c1486793
commit
c3855ddda7
@ -5,6 +5,7 @@
|
||||
<title>Neon Chat</title>
|
||||
<link rel="shortcut icon" href="images/logo.svg">
|
||||
<link rel="stylesheet" href="../css/chat.css">
|
||||
<script src="https://kit.fontawesome.com/9d7bb7e31a.js" crossorigin="anonymous"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
|
||||
<meta property="og:title" content="Join your friends call - Neonchat">
|
||||
<meta property="og:description" content="Click the link to join this chat room using Neonchat">
|
||||
@ -14,7 +15,11 @@
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-162048272-1"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
|
||||
function gtag() {
|
||||
dataLayer.push(arguments);
|
||||
}
|
||||
|
||||
gtag('js', new Date());
|
||||
gtag('config', 'UA-162048272-1');
|
||||
</script>
|
||||
@ -28,12 +33,30 @@
|
||||
</div>
|
||||
|
||||
|
||||
<div class="buttons" id="buttons">
|
||||
<div class="center">
|
||||
<a href="/" class="round-button">Back</a>
|
||||
<a class="round-button" onclick="{openFullscreen()}">Fullscreen</a>
|
||||
<a class="round-button" onclick="{muteMicrophone()}" id="muteButton">Mute </a>
|
||||
<a class="round-button" onclick="{pauseVideo()}" id="videoPauseButton">Pause </a>
|
||||
<div class="multi-button">
|
||||
<div class="buttonContainer">
|
||||
<button class="hoverButton" onclick="{muteMicrophone()}">
|
||||
<i id="mic-icon" class="fas fa-microphone fa-xs"></i>
|
||||
</button>
|
||||
<div class="HoverState" id="mic-text">Mute</div>
|
||||
</div>
|
||||
<div class="buttonContainer">
|
||||
<button class="hoverButton" onclick="{openFullscreen()}">
|
||||
<i class="fas fa-compress fa-xs"></i>
|
||||
</button>
|
||||
<div class="HoverState">Fullscreen</div>
|
||||
</div>
|
||||
<div class="buttonContainer">
|
||||
<button class="hoverButton" onclick="{pauseVideo()}">
|
||||
<i class="fas fa-video fa-xs" id="video-icon"></i>
|
||||
</button>
|
||||
<div class="HoverState" id="video-text">Pause Video</div>
|
||||
</div>
|
||||
<div class="buttonContainer">
|
||||
<button class="hoverButton" onclick="{window.location.href = '/newroom'}">
|
||||
<i class="fas fa-phone-slash fa-xs"></i>
|
||||
</button>
|
||||
<div class="HoverState">End Call</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -7,32 +7,29 @@
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
align-items: center;
|
||||
/*padding: 0 50px;*/
|
||||
}
|
||||
|
||||
body {
|
||||
background: #16171B;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
/*background: #ececec;*/
|
||||
}
|
||||
|
||||
video {
|
||||
background: #292B32;
|
||||
/*background: white;*/
|
||||
margin: 0 5%;
|
||||
box-sizing: border-box;
|
||||
border-radius: 10px;
|
||||
padding: 0;
|
||||
/*box-shadow: rgba(118, 143, 255, 0.4) 0px 16px 24px 0px;*/
|
||||
|
||||
}
|
||||
|
||||
|
||||
#local-video {
|
||||
width: 20%;
|
||||
height: auto;
|
||||
-webkit-transform: scaleX(-1);
|
||||
transform: scaleX(-1);
|
||||
background: #16171a;
|
||||
}
|
||||
|
||||
#remote-video {
|
||||
@ -45,42 +42,8 @@ video {
|
||||
}
|
||||
|
||||
|
||||
.buttons {
|
||||
width: 700px;
|
||||
margin-left: -350px;
|
||||
bottom: 0px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
.buttons a {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
.round-button {
|
||||
display: block;
|
||||
width: 100px;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
border-radius: 4px;
|
||||
background: #292B32;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
transition: 0.2s;
|
||||
margin: 20px;
|
||||
font-family: "Heebo", sans-serif;
|
||||
font-weight: 400;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.round-button:hover {
|
||||
background: #3d3f47;
|
||||
}
|
||||
|
||||
|
||||
.snackbar-container {
|
||||
box-shadow: 9px 9px 16px #0a0b0c, -9px -9px 16px #222328;
|
||||
transition: all .5s ease;
|
||||
transition-property: top, right, bottom, left, opacity;
|
||||
font-family: "Heebo", sans-serif;
|
||||
@ -174,3 +137,56 @@ video {
|
||||
transform: none
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*Neomorphic buttons*/
|
||||
button {
|
||||
border: none;
|
||||
font-size: 2rem;
|
||||
transition: all .3s ease-in-out;
|
||||
color: gray;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
color: white;
|
||||
border-radius: 100px;
|
||||
background: #16171a;
|
||||
/*box-shadow: 9px 9px 16px #1e1f21, -9px -9px 16px #2f3035;*/
|
||||
|
||||
}
|
||||
|
||||
.multi-button {
|
||||
position: absolute;
|
||||
right: 50px;
|
||||
top: 50px;
|
||||
z-index: 999;
|
||||
/*border-radius: 50px;*/
|
||||
border-radius: 10px;
|
||||
background: #16171a;
|
||||
box-shadow: 9px 9px 16px #0a0b0c, -9px -9px 16px #222328;
|
||||
padding: 15px;
|
||||
display: grid;
|
||||
grid-gap: 0.5rem;
|
||||
width: 50px;
|
||||
margin-left: 200px;
|
||||
}
|
||||
|
||||
.HoverState {
|
||||
color: white;
|
||||
font-family: "Heebo", sans-serif;
|
||||
position: absolute;
|
||||
right: 70px;
|
||||
white-space: nowrap;
|
||||
top: 25px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.buttonContainer {
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/*Neomorphic buttons*/
|
||||
@ -282,39 +282,49 @@ function openFullscreen() {
|
||||
function muteMicrophone() {
|
||||
var muted = VideoChat.localStream.getAudioTracks()[0].enabled;
|
||||
VideoChat.localStream.getAudioTracks()[0].enabled = !muted;
|
||||
const mutedButton = document.getElementById("muteButton");
|
||||
const micIcon = document.getElementById("mic-icon");
|
||||
const micText = document.getElementById("mic-text");
|
||||
if (muted) {
|
||||
mutedButton.innerText = "Unmute"
|
||||
micIcon.classList.remove("fa-microphone");
|
||||
micIcon.classList.add("fa-microphone-slash");
|
||||
micText.innerText = "Unmute"
|
||||
} else {
|
||||
mutedButton.innerText = "Mute"
|
||||
micIcon.classList.add("fa-microphone");
|
||||
micIcon.classList.remove("fa-microphone-slash");
|
||||
micText.innerText = "Mute"
|
||||
}
|
||||
}
|
||||
|
||||
function pauseVideo() {
|
||||
var paused = VideoChat.localStream.getVideoTracks()[0].enabled;
|
||||
VideoChat.localStream.getVideoTracks()[0].enabled = !paused;
|
||||
const pausedButton = document.getElementById("videoPauseButton");
|
||||
const micIcon = document.getElementById("video-icon");
|
||||
const micText = document.getElementById("video-text");
|
||||
if (paused) {
|
||||
pausedButton.innerText = "Unpause"
|
||||
micIcon.classList.remove("fa-video");
|
||||
micIcon.classList.add("fa-video-slash");
|
||||
micText.innerText = "Unpause Video"
|
||||
} else {
|
||||
pausedButton.innerText = "Pause"
|
||||
micIcon.classList.add("fa-video");
|
||||
micIcon.classList.remove("fa-video-slash");
|
||||
micText.innerText = "Pause Video"
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
//Show and hide buttons automatically
|
||||
var timedelay = 1;
|
||||
|
||||
function delayCheck() {
|
||||
if (timedelay === 5) {
|
||||
$('#buttons').fadeOut();
|
||||
$('.multi-button').fadeOut();
|
||||
timedelay = 1;
|
||||
}
|
||||
timedelay = timedelay + 1;
|
||||
}
|
||||
|
||||
$(document).mousemove(function () {
|
||||
$('#buttons').fadeIn();
|
||||
$('.multi-button').fadeIn();
|
||||
timedelay = 1;
|
||||
clearInterval(_delay);
|
||||
_delay = setInterval(delayCheck, 500);
|
||||
@ -342,3 +352,15 @@ Snackbar.show({
|
||||
VideoChat.requestMediaStream();
|
||||
|
||||
|
||||
//Neomorphic buttons
|
||||
$(".HoverState").hide();
|
||||
$(document).ready(function () {
|
||||
$(".hoverButton").mouseover(function () {
|
||||
$(".HoverState").hide();
|
||||
$(this).next().show();
|
||||
});
|
||||
$(".hoverButton").mouseout(function () {
|
||||
$(".HoverState").hide();
|
||||
});
|
||||
});
|
||||
//Neomorphic buttons
|
||||
Loading…
Reference in New Issue
Block a user