mirror of
https://github.com/ianramzy/decentralized-video-chat.git
synced 2025-02-21 23:45:06 +08:00
implemented basic styled chat
This commit is contained in:
ian ramzy
parent
d0b086f287
commit
157d1c2aa6
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8"/>
|
||||
<title>Neon Chat</title>
|
||||
<link rel="shortcut icon" href="images/logo.svg">
|
||||
<link rel="shortcut icon" href="/images/logo.svg">
|
||||
<link rel="stylesheet" href="../css/chat.css">
|
||||
<link rel="stylesheet" href="../css/snackbar.css">
|
||||
<script src="https://kit.fontawesome.com/9d7bb7e31a.js" crossorigin="anonymous"></script>
|
||||
@ -34,16 +34,37 @@
|
||||
<img src="/images/logo.svg" alt="Neon" width="48" height="48">
|
||||
<p>Neon Chat</p>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div>
|
||||
<p id="remote-video-text">Waiting for peer to connect...</p>
|
||||
<video id="remote-video" autoplay ondblclick={openFullscreen()}></video>
|
||||
<div id="moveable">
|
||||
<p id="local-video-text">No webcam input</p>
|
||||
<video id="local-video" autoplay muted></video>
|
||||
<p id="remote-video-text"></p>
|
||||
<video id="remote-video" autoplay ondblclick={openFullscreen()}></video>
|
||||
<div id="moveable">
|
||||
<p id="local-video-text">No webcam input</p>
|
||||
<video id="local-video" autoplay muted></video>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="entire-chat">
|
||||
<form class="compose">
|
||||
<textarea type="text" placeholder="Type a message"></textarea>
|
||||
</form>
|
||||
<div id="chat-zone">
|
||||
<div class="chat-messages">
|
||||
|
||||
<div class="message-item customer">
|
||||
<div class="message-bloc">
|
||||
<div class="message">Have you tried this chat?</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="message-item moderator">
|
||||
<div class="message-bloc">
|
||||
<div class="message">Not yet! It looks awesome</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -85,11 +106,36 @@
|
||||
</button>
|
||||
<div class="HoverState" id="caption-text">Start Live Caption</div>
|
||||
</div>
|
||||
<div class="buttonContainer">
|
||||
<button class="hoverButton" onclick="{$('#entire-chat').fadeToggle();}">
|
||||
<i class="fas fa-comment-alt fa-xs"></i>
|
||||
</button>
|
||||
<div class="HoverState">Open Chat</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script src="/socket.io/socket.io.js"></script>
|
||||
<script src="../js/snackbar.js"></script>
|
||||
<script src="../js/chat.js"></script>
|
||||
<script>
|
||||
$('#entire-chat').hide();
|
||||
var input = document.querySelector('.compose textarea');
|
||||
var socket = io();
|
||||
|
||||
input.addEventListener('keypress', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
event.preventDefault();
|
||||
socket.emit('chat message', input.value);
|
||||
$('.chat-messages').append('<div class="message-item customer"><div class="message-bloc"><div class="message">' + input.value + '</div></div></div>');
|
||||
input.value = '';
|
||||
}
|
||||
});
|
||||
|
||||
socket.on('chat message', function (msg) {
|
||||
$('.chat-messages').append('<div class="message-item moderator"><div class="message-bloc"><div class="message">' + msg + '</div></div></div>');
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -215,7 +215,117 @@ button:hover {
|
||||
/*Neomorphic buttons*/
|
||||
|
||||
|
||||
/*simple chat*/
|
||||
|
||||
#entire-chat{
|
||||
/*border: blue 1px solid;*/
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
right: 0;
|
||||
width: 13vw;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.compose {
|
||||
width: 100%;
|
||||
height: 10%;
|
||||
overflow: hidden;
|
||||
font-family: "Heebo", sans-serif;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
margin: 0;
|
||||
/*z-index: 1;*/
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.compose textarea::placeholder {
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
||||
.compose textarea {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
border: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 16px;
|
||||
resize: none;
|
||||
outline: none;
|
||||
color: white;
|
||||
background: #3a4150;
|
||||
|
||||
}
|
||||
|
||||
|
||||
#chat-zone {
|
||||
padding-top: 15px;
|
||||
box-sizing: border-box;
|
||||
/*border: red 1px solid;*/
|
||||
|
||||
position: absolute;
|
||||
height: 90%;
|
||||
right: 0;
|
||||
width: 15vw;
|
||||
background: 0 0;
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
font-family: "Heebo", sans-serif;
|
||||
}
|
||||
|
||||
#chat-zone .chat-messages .message-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-end;
|
||||
padding: 0 16px 4px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
|
||||
#chat-zone .chat-messages .message-item.customer {
|
||||
padding-left: 40px;
|
||||
}
|
||||
|
||||
|
||||
#chat-zone .message-item.moderator .message-bloc {
|
||||
background-color: #3a4150;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 12px;
|
||||
max-width: 100%;
|
||||
border-radius: 5px 20px 20px 5px;
|
||||
}
|
||||
|
||||
#chat-zone .message-item.customer .message-bloc {
|
||||
color: rgba(0, 0, 0, .87);
|
||||
background-color: #e0e0e0;
|
||||
}
|
||||
|
||||
#chat-zone .chat-messages .message-item.customer .message-bloc {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
#chat-zone .chat-messages .message-item .message-bloc {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 12px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
#chat-zone .message-item.customer .message-bloc {
|
||||
border-radius: 20px 20px 5px 20px;
|
||||
}
|
||||
|
||||
#chat-zone .message-item.moderator .message-bloc {
|
||||
border-radius: 20px 20px 20px 5px;
|
||||
}
|
||||
|
||||
/*simple chat*/
|
||||
@ -83,7 +83,7 @@ var VideoChat = {
|
||||
text: 'Share this URL with a friend to get started',
|
||||
actionText: 'Copy Link',
|
||||
width: '355px',
|
||||
pos: 'top-left',
|
||||
pos: 'top-center',
|
||||
actionTextColor: '#8688ff',
|
||||
duration: 500000,
|
||||
backgroundColor: '#16171a',
|
||||
@ -149,6 +149,7 @@ var VideoChat = {
|
||||
VideoChat.socket.on('answer', VideoChat.onAnswer);
|
||||
VideoChat.socket.on('requestToggleCaptions', () => toggleSendCaptions());
|
||||
VideoChat.socket.on('recieveCaptions', (captions) => VideoChat.recieveCaptions(captions));
|
||||
|
||||
callback();
|
||||
};
|
||||
},
|
||||
@ -348,6 +349,7 @@ function muteMicrophone() {
|
||||
|
||||
function pauseVideo() {
|
||||
var paused = VideoChat.localStream.getVideoTracks()[0].enabled;
|
||||
alert(paused);
|
||||
VideoChat.localStream.getVideoTracks()[0].enabled = !paused;
|
||||
const micIcon = document.getElementById("video-icon");
|
||||
const micText = document.getElementById("video-text");
|
||||
@ -462,7 +464,7 @@ function switchStreamHelper(stream) {
|
||||
|
||||
|
||||
$("#moveable").draggable({containment: 'window'});
|
||||
|
||||
$('#remote-video-text').text("").fadeOut();
|
||||
|
||||
var sendingCaptions = false;
|
||||
var receivingCaptions = false;
|
||||
@ -470,7 +472,7 @@ var receivingCaptions = false;
|
||||
|
||||
function requestToggleCaptions() {
|
||||
if (!VideoChat.connected) {
|
||||
alert("You must be connected to a peer to use Live Caption")
|
||||
alert("You must be connected to a peer to use Live Caption");
|
||||
return
|
||||
}
|
||||
if (receivingCaptions) {
|
||||
@ -567,3 +569,5 @@ VideoChat.requestMediaStream();
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -310,38 +310,21 @@
|
||||
<div class="brand">
|
||||
<a href="/"><img src="images/logo.svg" alt="Neon" width="32" height="32"></a>
|
||||
</div>
|
||||
<!-- <div class="footer-social">-->
|
||||
<!-- <ul class="list-reset">-->
|
||||
<!-- <li><a href="#">-->
|
||||
<!-- <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">-->
|
||||
<!-- <title>Facebook</title>-->
|
||||
<!-- <path d="M6.023 16L6 9H3V6h3V4c0-2.7 1.672-4 4.08-4 1.153 0 2.144.086 2.433.124v2.821h-1.67c-1.31 0-1.563.623-1.563 1.536V6H13l-1 3H9.28v7H6.023z"/>-->
|
||||
<!-- </svg>-->
|
||||
<!-- </a></li>-->
|
||||
<!-- <li><a href="#">-->
|
||||
<!-- <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">-->
|
||||
<!-- <title>Twitter</title>-->
|
||||
<!-- <path d="M16 3c-.6.3-1.2.4-1.9.5.7-.4 1.2-1 1.4-1.8-.6.4-1.3.6-2.1.8-.6-.6-1.5-1-2.4-1-1.7 0-3.2 1.5-3.2 3.3 0 .3 0 .5.1.7-2.7-.1-5.2-1.4-6.8-3.4-.3.5-.4 1-.4 1.7 0 1.1.6 2.1 1.5 2.7-.5 0-1-.2-1.5-.4C.7 7.7 1.8 9 3.3 9.3c-.3.1-.6.1-.9.1-.2 0-.4 0-.6-.1.4 1.3 1.6 2.3 3.1 2.3-1.1.9-2.5 1.4-4.1 1.4H0c1.5.9 3.2 1.5 5 1.5 6 0 9.3-5 9.3-9.3v-.4C15 4.3 15.6 3.7 16 3z"/>-->
|
||||
<!-- </svg>-->
|
||||
<!-- </a></li>-->
|
||||
<!-- <li><a href="#">-->
|
||||
<!-- <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">-->
|
||||
<!-- <title>Instagram</title>-->
|
||||
<!-- <g>-->
|
||||
<!-- <circle cx="12.145" cy="3.892" r="1"/>-->
|
||||
<!-- <path d="M8 12c-2.206 0-4-1.794-4-4s1.794-4 4-4 4 1.794 4 4-1.794 4-4 4zm0-6c-1.103 0-2 .897-2 2s.897 2 2 2 2-.897 2-2-.897-2-2-2z"/>-->
|
||||
<!-- <path d="M12 16H4c-2.056 0-4-1.944-4-4V4c0-2.056 1.944-4 4-4h8c2.056 0 4 1.944 4 4v8c0 2.056-1.944 4-4 4zM4 2c-.935 0-2 1.065-2 2v8c0 .953 1.047 2 2 2h8c.935 0 2-1.065 2-2V4c0-.935-1.065-2-2-2H4z"/>-->
|
||||
<!-- </g>-->
|
||||
<!-- </svg>-->
|
||||
<!-- </a></li>-->
|
||||
<!-- </ul>-->
|
||||
<!-- </div>-->
|
||||
<div class="footer-social">
|
||||
<div><a href="https://github.com/ianramzy/decentralized-video-chat">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<title>GitHub</title>
|
||||
<path d="M7.95 0C3.578 0 0 3.578 0 7.95c0 3.479 2.286 6.46 5.466 7.553.397.1.497-.199.497-.397v-1.392c-2.187.497-2.683-.994-2.683-.994-.398-.894-.895-1.192-.895-1.192-.696-.497.1-.497.1-.497.795.1 1.192.795 1.192.795.696 1.292 1.888.894 2.286.696.1-.497.298-.895.497-1.093-1.79-.2-3.578-.895-3.578-3.976 0-.894.298-1.59.795-2.087-.1-.198-.397-.993.1-2.086 0 0 .695-.2 2.186.795a6.408 6.408 0 0 1 1.987-.299c.696 0 1.392.1 1.988.299 1.49-.994 2.186-.795 2.186-.795.398 1.093.199 1.888.1 2.086.496.597.795 1.292.795 2.087 0 3.081-1.889 3.677-3.677 3.876.298.398.596.895.596 1.59v2.187c0 .198.1.496.596.397C13.714 14.41 16 11.43 16 7.95 15.9 3.578 12.323 0 7.95 0z"/>
|
||||
</svg>
|
||||
</a></div>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-bottom space-between text-xxs invert-order-desktop">
|
||||
<nav class="footer-nav">
|
||||
<ul class="list-reset">
|
||||
<li><a href="https://ianramzy.com">Another Project By Ian Ramzy</a></li>
|
||||
<!-- <li><a href="#">Contact</a></li>-->
|
||||
<li><a href="https://ianramzy.com">Made with ❤️ by Ian Ramzy</a></li>
|
||||
<!-- <li><a href="#">Contact</a></li>-->
|
||||
<!-- <li><a href="#">About us</a></li>-->
|
||||
<!-- <li><a href="#">FAQ's</a></li>-->
|
||||
<!-- <li><a href="#">Support</a></li>-->
|
||||
|
||||
@ -17,7 +17,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,8 +32,8 @@
|
||||
<div class="container">
|
||||
<div class="site-header-inner">
|
||||
<div class="brand"><h1 class="m-0"><a href="/"><img src="images/logo.svg" alt="Neon"
|
||||
width="32"
|
||||
height="32"></a></h1></div>
|
||||
width="32"
|
||||
height="32"></a></h1></div>
|
||||
<button id="header-nav-toggle" class="header-nav-toggle" aria-controls="primary-menu"
|
||||
aria-expanded="false"><span class="screen-reader">Menu</span> <span class="hamburger"><span
|
||||
class="hamburger-inner"></span></span></button>
|
||||
@ -91,18 +95,28 @@
|
||||
<div class="brand">
|
||||
<a href="/"><img src="images/logo.svg" alt="Neon" width="32" height="32"></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-bottom space-between text-xxs invert-order-desktop">
|
||||
<nav class="footer-nav">
|
||||
<ul class="list-reset">
|
||||
<li><a href="https://ianramzy.com">Another Project By Ian Ramzy</a></li>
|
||||
<div class="footer-social">
|
||||
<div><a href="https://github.com/ianramzy/decentralized-video-chat">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<title>GitHub</title>
|
||||
<path d="M7.95 0C3.578 0 0 3.578 0 7.95c0 3.479 2.286 6.46 5.466 7.553.397.1.497-.199.497-.397v-1.392c-2.187.497-2.683-.994-2.683-.994-.398-.894-.895-1.192-.895-1.192-.696-.497.1-.497.1-.497.795.1 1.192.795 1.192.795.696 1.292 1.888.894 2.286.696.1-.497.298-.895.497-1.093-1.79-.2-3.578-.895-3.578-3.976 0-.894.298-1.59.795-2.087-.1-.198-.397-.993.1-2.086 0 0 .695-.2 2.186.795a6.408 6.408 0 0 1 1.987-.299c.696 0 1.392.1 1.988.299 1.49-.994 2.186-.795 2.186-.795.398 1.093.199 1.888.1 2.086.496.597.795 1.292.795 2.087 0 3.081-1.889 3.677-3.677 3.876.298.398.596.895.596 1.59v2.187c0 .198.1.496.596.397C13.714 14.41 16 11.43 16 7.95 15.9 3.578 12.323 0 7.95 0z"/>
|
||||
</svg>
|
||||
</a></div>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="footer-copyright">© 2020 Neon Chat, all rights reserved</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-bottom space-between text-xxs invert-order-desktop">
|
||||
<nav class="footer-nav">
|
||||
<ul class="list-reset">
|
||||
<li><a href="https://ianramzy.com">Made with ❤️ by Ian Ramzy</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="footer-copyright">© 2020 Neon Chat, all rights reserved</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
<script src="js/landing.js"></script>
|
||||
<script src="js/newroom.js"></script>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user