MigrateRepos
/
decentralized-video-chat
mirror of https://github.com/ianramzy/decentralized-video-chat.git
1
0
Fork 0
Code Issues Releases Wiki Activity

new loader, mute btn works, autohide btns, fullscreen btn

This commit is contained in:
ian ramzy 2020-03-24 18:47:10 -04:00
parent df8af1039f
commit 73c724fff3
3 changed files with 68 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
public/chat.css
View File

@ -38,42 +38,47 @@ video {
height: auto;
background-image: url(loader.gif);
background-size: 400px auto;
background-repeat:no-repeat;
background-repeat: no-repeat;
background-position: center center;
}
.video-overlay{
.video-overlay {
z-index: 1;
}
.buttons {
width: 520px;
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;
display: block;
width: 100px;
height: 60px;
line-height: 60px;
border-radius: 4px;
background: #292B32;
text-align:center;
text-align: center;
text-decoration: none;
color: white;
transition: 0.2s;
margin: 20px;
font-family: "Heebo", sans-serif;
font-weight: 400;
float:left;
float: left;
}
.round-button:hover {
background: #3d3f47;
}

26
public/chat.html
View File

@ -5,32 +5,24 @@
<title>Neon Chat</title>
<link rel="shortcut icon" href="landing/images/logo.svg">
<link rel="stylesheet" href="chat.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<!--<div class="video-overlay">-->
<!-- <p>-->
<!-- Waiting for the other person to join. Just share this URL.-->
<!-- </p>-->
<!--</div>-->
<div class="videos">
<video id="remote-video" height="500" autoplay ondblclick={this.requestFullscreen()}>
</video>
<video id="remote-video" height="500" autoplay ondblclick={openFullscreen()}></video>
<video id="local-video" height="150" autoplay muted></video>
</div>
<div style="position: absolute; left: 50%; margin-left:-200px; bottom: 0px; z-index: 1">
<div class="buttons">
<div class="center">
<a href="http://example.com" class="round-button">Back</a>
<a href="http://example.com" class="round-button">Fullscreen</a>
<a href="http://example.com" class="round-button">Mute</a>
</div>
<div class="buttons" id="buttons">
<div class="center">
<a href="/landing" 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="{alert('hangup')}">Share Screen </a>
</div>
</div>

44
public/chat.js
View File

@ -235,3 +235,47 @@ var VideoChat = {
// VideoChat.requestScreenStream();
VideoChat.requestMediaStream();
function openFullscreen() {
if (VideoChat.remoteVideo.requestFullscreen) {
VideoChat.remoteVideo.requestFullscreen();
} else if (VideoChat.remoteVideo.mozRequestFullScreen) { /* Firefox */
VideoChat.remoteVideo.mozRequestFullScreen();
} else if (VideoChat.remoteVideo.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
VideoChat.remoteVideo.webkitRequestFullscreen();
} else if (VideoChat.remoteVideo.msRequestFullscreen) { /* IE/Edge */
VideoChat.remoteVideo.msRequestFullscreen();
}
}
function muteMicrophone() {
var muted = !VideoChat.localStream.getAudioTracks()[0].enabled;
VideoChat.localStream.getAudioTracks()[0].enabled = muted;
var mutedButton = document.getElementById("muteButton");
if (!muted) {
mutedButton.innerText = "Unmute"
} else {
mutedButton.innerText = "Mute"
}
}
var timedelay = 1;
function delayCheck() {
if (timedelay === 5) {
$('#buttons').fadeOut();
timedelay = 1;
}
timedelay = timedelay + 1;
}
$(document).mousemove(function () {
$('#buttons').fadeIn();
timedelay = 1;
clearInterval(_delay);
_delay = setInterval(delayCheck, 500);
});
// page loads starts delay timer
_delay = setInterval(delayCheck, 500);