MigrateRepos/decentralized-video-chat
1
0
Fork 0
mirror of https://github.com/ianramzy/decentralized-video-chat.git synced 2024-11-01 07:59:21 +08:00
Code Issues Releases Wiki Activity

add logo to top right

Browse Source
This commit is contained in:
ian ramzy 2020-03-28 12:36:59 -04:00
parent a58dcb706b
commit dd61e5386f
3 changed files with 53 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
public/chat.html
View File

@ -28,6 +28,11 @@
</head> </head>
<body> <body>
<div id="header">
<img src="/images/logo.svg" alt="Neon" width="48" height="48">
<p>Neon Chat</p>
</div>
<p id="remote-video-text">Waiting for peer to connect...</p> <p id="remote-video-text">Waiting for peer to connect...</p>
<video id="remote-video" autoplay ondblclick={openFullscreen()}></video> <video id="remote-video" autoplay ondblclick={openFullscreen()}></video>

46
public/css/chat.css
View File

@ -1,9 +1,27 @@
@import url("https://fonts.googleapis.com/css?family=Fira+Sans:600|Heebo:400,500,700&display=swap"); @import url("https://fonts.googleapis.com/css?family=Fira+Sans:600|Heebo:400,500,700&display=swap");
/*Fade in page on load*/
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
/*Fade in page on load*/
body { body {
background: #16171B; background: #16171B;
margin: 0; margin: 0;
padding: 0; padding: 0;
opacity:0; /* make things invisible upon start */
-webkit-animation:fadeIn ease-in 1;
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:0.3s;
-moz-animation-duration:0.3s;
animation-duration:0.3s;
} }
@ -11,6 +29,27 @@ video {
background: #16171a; background: #16171a;
} }
#header {
position: absolute;
color: white;
font-family: "Fira Sans", sans-serif;
font-weight: 600;
white-space: nowrap;
top: 40px;
left: 80px;
margin-left: 30px;
margin-top: 30px;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
float: left;
}
#header p, img {
float: left;
padding: 7px;
}
#moveable { #moveable {
z-index: 100; z-index: 100;
right: 14px; right: 14px;
@ -35,7 +74,6 @@ video {
background: rgba(0, 0, 0, 0.38); background: rgba(0, 0, 0, 0.38);
padding: 10px; padding: 10px;
transition: 0.5s; transition: 0.5s;
} }
#local-video { #local-video {
@ -137,3 +175,9 @@ button:hover {
} }
/*Neomorphic buttons*/ /*Neomorphic buttons*/

7
public/js/chat.js
View File

@ -420,11 +420,8 @@ function switchStreamHelper(stream) {
} }
// auto get media
VideoChat.requestMediaStream();
$("#moveable").draggable({containment: 'window'}); $("#moveable").draggable({containment: 'window'});
setInterval(() => console.log(VideoChat.remoteVideo.srcObject), 2000); // auto get media
VideoChat.requestMediaStream();