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

Run prettier

This commit is contained in:
ian ramzy 2020-03-30 14:16:08 -04:00
parent d131909b8e
commit f9b94795e7
18 changed files with 4468 additions and 3669 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
public/chat.html
View File

@ -3,18 +3,30 @@
<head>
<meta charset="UTF-8" />
<title>Neon Chat</title>
<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>
<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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.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">
<meta property="og:image" content="https://neonchat.io/images/preview.png">
<meta property="og:url" content="https://neonchat.io/">
<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"
/>
<meta
property="og:image"
content="https://neonchat.io/images/preview.png"
/>
<meta property="og:url" content="https://neonchat.io/" />
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-162048272-1"></script>
<script
async
src="https://www.googletagmanager.com/gtag/js?id=UA-162048272-1"
></script>
<script>
window.dataLayer = window.dataLayer || [];
@ -22,36 +34,31 @@
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'UA-162048272-1');
gtag("js", new Date());
gtag("config", "UA-162048272-1");
</script>
</head>
<body>
<div id="header">
<a href="/">
<img src="/images/logo.svg" alt="Neon" width="48" height="48">
<img src="/images/logo.svg" alt="Neon" width="48" height="48" />
<p>Neon Chat</p>
</a>
</div>
<p id="remote-video-text"></p>
<video id="remote-video" autoplay ondblclick={openFullscreen()}></video>
<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>-->
@ -63,12 +70,10 @@
<!-- <div class="message">Not yet! It looks awesome</div>-->
<!-- </div>-->
<!-- </div>-->
</div>
</div>
</div>
<div class="multi-button">
<div class="buttonContainer">
<button class="hoverButton" onclick="{muteMicrophone()}">
@ -95,7 +100,10 @@
<div class="HoverState" id="swap-text">Share Screen</div>
</div>
<div class="buttonContainer">
<button class="hoverButton" onclick="{window.location.href = '/newroom'}">
<button
class="hoverButton"
onclick="{window.location.href = '/newroom'}"
>
<i class="fas fa-phone-slash fa-xs"></i>
</button>
<div class="HoverState">End Call</div>
@ -113,14 +121,17 @@
<div class="HoverState" id="chat-text">Show Chat</div>
</div>
<div class="buttonContainer">
<button class="hoverButton" id="pip-button" onclick="{togglePictureInPicture()}">
<button
class="hoverButton"
id="pip-button"
onclick="{togglePictureInPicture()}"
>
<i class="fas fa-external-link-alt fa-xs"></i>
</button>
<div class="HoverState" id="pip-text">Enter Picture in Picture</div>
</div>
</div>
<script src="/socket.io/socket.io.js"></script>
<script src="../js/snackbar.js"></script>
<script src="../js/chat.js"></script>

32
public/css/chat.css
View File

@ -1,6 +1,5 @@
@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 {
@ -31,9 +30,8 @@
/*Fade in page on load*/
body {
background: #16171B;
background: #16171b;
margin: 0;
padding: 0;
opacity: 0; /* make things invisible upon start */
@ -48,7 +46,6 @@ body {
animation-duration: 0.3s;
}
video {
background: #16171a;
}
@ -68,26 +65,25 @@ video {
float: left;
}
#header p, img {
#header p,
img {
float: left;
padding: 7px;
}
#header, a {
#header,
a {
color: white;
text-decoration: none;
}
#moveable {
z-index: 100;
position: absolute;
width: 15%;
cursor: move;
}
#moveable p {
z-index: 101;
position: absolute;
@ -130,7 +126,7 @@ video {
/*white-space: nowrap;*/
font-weight: bold;
text-align: left;
background: rgba(0, 0, 0, 0.20);
background: rgba(0, 0, 0, 0.2);
border-radius: 10px;
padding: 10px;
}
@ -155,15 +151,13 @@ video {
background-repeat: no-repeat;
background-position: center center;
box-shadow: 9px 9px 16px #0a0b0c, -9px -9px 16px #222328;
}
/*Neomorphic buttons*/
button {
border: none;
font-size: 1.5rem;
transition: all .3s ease-in-out;
transition: all 0.3s ease-in-out;
color: gray;
background: transparent;
cursor: pointer;
@ -187,7 +181,6 @@ button:hover {
-ms-transform: translate(0%, -50%);
transform: translate(0%, -50%);
z-index: 999;
border-radius: 10px;
background: #16171a;
@ -218,7 +211,6 @@ button:hover {
/*Neomorphic buttons*/
/*simple chat*/
#entire-chat {
@ -245,14 +237,12 @@ button:hover {
margin: 20px;
box-sizing: border-box;
padding: 16px;
}
.compose textarea::placeholder {
color: white;
}
.compose textarea {
font-family: inherit;
font-size: inherit;
@ -266,11 +256,8 @@ button:hover {
/*background: #3a4150;*/
background-color: rgb(22, 23, 26);
/*box-shadow: 6px 6px 12px #111314, -6px -6px 12px #292a30;*/
}
#chat-zone {
padding-top: 20px;
box-sizing: border-box;
@ -301,12 +288,10 @@ button:hover {
margin-bottom: 20px;
}
#chat-zone .chat-messages .message-item.customer {
padding-left: 40px;
}
/*Your messages*/
#chat-zone .message-item.moderator .message-bloc {
background-color: rgb(22, 23, 26);
@ -319,17 +304,14 @@ button:hover {
max-width: 100%;
border-radius: 20px 20px 20px 5px;
box-shadow: 6px 6px 12px #030506, -6px -6px 12px #23242a;
}
/*Recieved messages*/
#chat-zone .message-item.customer .message-bloc {
background-color: rgb(42, 43, 47);
color: #fff;
border-radius: 20px 20px 5px 20px;
box-shadow: 6px 6px 12px #030506, -6px -6px 12px #22232a;
}
#chat-zone .chat-messages .message-item.customer .message-bloc {

1837
public/css/landing.css
View File

File diff suppressed because it is too large Load Diff

27
public/css/snackbar.css
View File

@ -1,6 +1,6 @@
.snackbar-container {
box-shadow: 9px 9px 16px #0a0b0c, -9px -9px 16px #222328;
transition: all .5s ease;
transition: all 0.5s ease;
transition-property: top, right, bottom, left, opacity;
font-family: "Heebo", sans-serif;
font-size: 14px;
@ -15,7 +15,7 @@
bottom: -100px;
top: -100px;
opacity: 0;
z-index: 9999
z-index: 9999;
}
.snackbar-container .action {
@ -28,7 +28,7 @@
margin: 0 0 0 24px;
padding: 0;
min-width: min-content;
cursor: pointer
cursor: pointer;
}
@media (min-width: 640px) {
@ -37,7 +37,7 @@
max-width: 568px;
display: inline-flex;
border-radius: 5px;
margin: 24px
margin: 24px;
}
}
@ -45,7 +45,7 @@
.snackbar-container {
left: 0;
right: 0;
width: 100%
width: 100%;
}
}
@ -53,43 +53,44 @@
top: auto !important;
bottom: 0;
left: 50%;
transform: translate(-50%, 0)
transform: translate(-50%, 0);
}
.snackbar-pos.bottom-left {
top: auto !important;
bottom: 0;
left: 0
left: 0;
}
.snackbar-pos.bottom-right {
top: auto !important;
bottom: 0;
right: 0
right: 0;
}
.snackbar-pos.top-left {
bottom: auto !important;
top: 0;
left: 0
left: 0;
}
.snackbar-pos.top-center {
bottom: auto !important;
top: 0;
left: 50%;
transform: translate(-50%, 0)
transform: translate(-50%, 0);
}
.snackbar-pos.top-right {
bottom: auto !important;
top: 0;
right: 0
right: 0;
}
@media (max-width: 640px) {
.snackbar-pos.bottom-center, .snackbar-pos.top-center {
.snackbar-pos.bottom-center,
.snackbar-pos.top-center {
left: 0;
transform: none
transform: none;
}
}

32
public/js/accordion.js
View File

@ -1,26 +1,28 @@
; (function () {
'use strict'
const accordionEl = document.getElementsByClassName('accordion-header')
(function () {
"use strict";
const accordionEl = document.getElementsByClassName("accordion-header");
function openAccordion(parent, panel) {
parent.classList.add('is-active')
panel.style.maxHeight = panel.scrollHeight + 'px'
parent.classList.add("is-active");
panel.style.maxHeight = panel.scrollHeight + "px";
}
function closeAccordion(parent, panel) {
parent.classList.remove('is-active')
panel.style.maxHeight = null
parent.classList.remove("is-active");
panel.style.maxHeight = null;
}
if (accordionEl.length > 0) {
for (let i = 0; i < accordionEl.length; i++) {
const el = accordionEl[i]
const parent = el.parentNode
const panel = el.nextElementSibling
parent.classList.contains('is-active') && openAccordion(parent, panel)
el.addEventListener('click', function () {
parent.classList.contains('is-active') ? closeAccordion(parent, panel) : openAccordion(parent, panel)
})
const el = accordionEl[i];
const parent = el.parentNode;
const panel = el.nextElementSibling;
parent.classList.contains("is-active") && openAccordion(parent, panel);
el.addEventListener("click", function () {
parent.classList.contains("is-active")
? closeAccordion(parent, panel)
: openAccordion(parent, panel);
});
}
}
}())
})();

204
public/js/carousel.js
View File

@ -1,5 +1,5 @@
; (function () {
'use strict'
(function () {
"use strict";
// Swipe detector
// https://gist.github.com/chrishaensel/e17c9f3838f246d75fe3bd19d6bb92e8#file-swipe-js
@ -11,161 +11,185 @@
swipeCallback: function () {},
init: function (detectionZone, callback) {
swipe.swipeCallback = callback
detectionZone.addEventListener('touchstart', function (event) {
swipe.touchStartX = event.changedTouches[0].screenX
}, false)
detectionZone.addEventListener('touchend', function (event) {
swipe.touchEndX = event.changedTouches[0].screenX
swipe.handleSwipeGesture()
}, false)
swipe.swipeCallback = callback;
detectionZone.addEventListener(
"touchstart",
function (event) {
swipe.touchStartX = event.changedTouches[0].screenX;
},
false
);
detectionZone.addEventListener(
"touchend",
function (event) {
swipe.touchEndX = event.changedTouches[0].screenX;
swipe.handleSwipeGesture();
},
false
);
},
handleSwipeGesture: function () {
let direction, moved
let direction, moved;
if (swipe.touchEndX <= swipe.touchStartX) {
moved = swipe.touchStartX - swipe.touchEndX
direction = 'left'
moved = swipe.touchStartX - swipe.touchEndX;
direction = "left";
}
if (swipe.touchEndX >= swipe.touchStartX) {
moved = swipe.touchEndX - swipe.touchStartX
direction = 'right'
moved = swipe.touchEndX - swipe.touchStartX;
direction = "right";
}
if (moved > swipe.minSwipePixels && direction !== 'undefined') {
swipe.swipe(direction, moved)
if (moved > swipe.minSwipePixels && direction !== "undefined") {
swipe.swipe(direction, moved);
}
},
swipe: function (direction, movedPixels) {
let ret = {}
ret.direction = direction
ret.movedPixels = movedPixels
swipe.swipeCallback(ret)
}
}
let ret = {};
ret.direction = direction;
ret.movedPixels = movedPixels;
swipe.swipeCallback(ret);
},
};
const carousels = document.getElementsByClassName('carousel-items')
const carousels = document.getElementsByClassName("carousel-items");
// Rotate the carousel forward or backward
function rotateCarousel(el, dir) {
if (dir === undefined) {
dir = 'next'
dir = "next";
}
let currentItem = el.getElementsByClassName('carousel-item is-active')[0]
let nextItem = (dir === 'next') ? currentItem.nextElementSibling : currentItem.previousElementSibling
let index = currentItem.getAttribute('data-carousel')
let currentBullet = el.parentNode.getElementsByClassName('carousel-bullet')[index]
let nextBullet = (dir === 'next') ? currentBullet.nextElementSibling : currentBullet.previousElementSibling
currentItem.classList.remove('is-active')
currentBullet.classList.remove('is-active')
let currentItem = el.getElementsByClassName("carousel-item is-active")[0];
let nextItem =
dir === "next"
? currentItem.nextElementSibling
: currentItem.previousElementSibling;
let index = currentItem.getAttribute("data-carousel");
let currentBullet = el.parentNode.getElementsByClassName("carousel-bullet")[
index
];
let nextBullet =
dir === "next"
? currentBullet.nextElementSibling
: currentBullet.previousElementSibling;
currentItem.classList.remove("is-active");
currentBullet.classList.remove("is-active");
if (nextItem) {
nextItem.classList.add('is-active')
nextBullet.classList.add('is-active')
nextItem.classList.add("is-active");
nextBullet.classList.add("is-active");
} else {
if (dir === 'next') {
el.firstElementChild.classList.add('is-active')
el.parentNode.getElementsByClassName('carousel-bullets')[0].firstElementChild.classList.add('is-active')
if (dir === "next") {
el.firstElementChild.classList.add("is-active");
el.parentNode
.getElementsByClassName("carousel-bullets")[0]
.firstElementChild.classList.add("is-active");
} else {
el.lastElementChild.classList.add('is-active')
el.parentNode.getElementsByClassName('carousel-bullets')[0].lastElementChild.classList.add('is-active')
el.lastElementChild.classList.add("is-active");
el.parentNode
.getElementsByClassName("carousel-bullets")[0]
.lastElementChild.classList.add("is-active");
}
}
}
// Equal heights fix
function equalHeightCarousel(carousel, items) {
let taller = 0
let height
let taller = 0;
let height;
for (let i = 0; i < items.length; i++) {
items[0].parentNode.style.minHeight = taller + 'px'
items[i].classList.add('is-loading')
height = items[i].offsetHeight
items[i].classList.remove('is-loading')
items[0].parentNode.style.minHeight = taller + "px";
items[i].classList.add("is-loading");
height = items[i].offsetHeight;
items[i].classList.remove("is-loading");
if (height > taller) {
taller = height
taller = height;
}
}
items[0].parentNode.style.minHeight = taller + 'px'
items[0].parentNode.style.minHeight = taller + "px";
}
// Clear autorotate
function clearAutorotate(autorotate) {
if (autorotate) {
clearInterval(autorotate)
clearInterval(autorotate);
}
}
if (carousels.length > 0) {
for (let i = 0; i < carousels.length; i++) {
let carousel = carousels[i]
let items = carousel.getElementsByClassName('carousel-item')
let activeItem = 0
let autorotateTiming = carousel.getAttribute('data-autorotate')
let carousel = carousels[i];
let items = carousel.getElementsByClassName("carousel-item");
let activeItem = 0;
let autorotateTiming = carousel.getAttribute("data-autorotate");
// Generate bullets container
const bulletsContainer = document.createElement('div')
bulletsContainer.className = 'carousel-bullets'
carousel.parentNode.insertBefore(bulletsContainer, carousel.nextSibling)
const bulletsContainer = document.createElement("div");
bulletsContainer.className = "carousel-bullets";
carousel.parentNode.insertBefore(bulletsContainer, carousel.nextSibling);
for (let i = 0; i < items.length; i++) {
// Add data attributes
items[i].setAttribute('data-carousel', i)
items[i].setAttribute("data-carousel", i);
// Determine a new active item, if any
if (items[i].classList.contains('is-active')) activeItem = i
if (items[i].classList.contains("is-active")) activeItem = i;
// Generate bullets
let bullet = document.createElement('button')
bullet.className = 'carousel-bullet'
bullet.setAttribute('data-bullet', i)
carousel.parentNode.getElementsByClassName('carousel-bullets')[0].appendChild(bullet)
let bullet = document.createElement("button");
bullet.className = "carousel-bullet";
bullet.setAttribute("data-bullet", i);
carousel.parentNode
.getElementsByClassName("carousel-bullets")[0]
.appendChild(bullet);
}
// Add is-active class to first carousel item and bullet
items[activeItem].classList.add('is-active')
let bullets = carousel.parentNode.getElementsByClassName('carousel-bullet')
bullets[activeItem].classList.add('is-active')
items[activeItem].classList.add("is-active");
let bullets = carousel.parentNode.getElementsByClassName(
"carousel-bullet"
);
bullets[activeItem].classList.add("is-active");
// Equal height items
equalHeightCarousel(carousel, items)
window.addEventListener('resize', function () {
equalHeightCarousel(carousel, items)
})
equalHeightCarousel(carousel, items);
window.addEventListener("resize", function () {
equalHeightCarousel(carousel, items);
});
// Autorotate
let autorotate = false
let autorotate = false;
if (autorotateTiming) {
autorotate = setInterval(function () {
rotateCarousel(carousel, 'next')
}, autorotateTiming)
rotateCarousel(carousel, "next");
}, autorotateTiming);
}
// Rotate by bullet click
for (let i = 0; i < bullets.length; i++) {
let bullet = bullets[i]
bullet.addEventListener('click', function (e) {
e.preventDefault()
let bullet = bullets[i];
bullet.addEventListener("click", function (e) {
e.preventDefault();
// Do nothing if item is active
if (bullet.classList.contains('is-active')) {
return
if (bullet.classList.contains("is-active")) {
return;
}
// Remove active classes
for (let i = 0; i < bullets.length; i++) {
bullets[i].classList.remove('is-active')
bullets[i].classList.remove("is-active");
}
for (let i = 0; i < items.length; i++) {
items[i].classList.remove('is-active')
items[i].classList.remove("is-active");
}
// Add active classes to corresponding items and bullets
let index = this.getAttribute('data-bullet')
items[index].classList.add('is-active')
this.classList.add('is-active')
let index = this.getAttribute("data-bullet");
items[index].classList.add("is-active");
this.classList.add("is-active");
// Clear autorotate timing
clearAutorotate(autorotate)
})
clearAutorotate(autorotate);
});
}
// Rotate on swipe
swipe.init(carousel, function (e) {
if (e.direction === 'left') {
rotateCarousel(carousel, 'next')
} else if (e.direction === 'right') {
rotateCarousel(carousel, 'prev')
if (e.direction === "left") {
rotateCarousel(carousel, "next");
} else if (e.direction === "right") {
rotateCarousel(carousel, "prev");
}
// Clear autorotate timing
clearAutorotate(autorotate)
})
clearAutorotate(autorotate);
});
}
}
}())
})();

351
public/js/chat.js
View File

@ -1,7 +1,7 @@
// Vars
const browserName = getBrowserName();
const url = window.location.href;
const roomHash = url.substring(url.lastIndexOf('/') + 1).toLowerCase();
const roomHash = url.substring(url.lastIndexOf("/") + 1).toLowerCase();
var mode = "camera";
var isFullscreen = false;
var sendingCaptions = false;
@ -14,18 +14,16 @@ const isWebRTCSupported =
window.RTCPeerConnection;
// Element vars
const chatInput = document.querySelector('.compose textarea');
const pipVideo = document.getElementById('remote-video');
const chatInput = document.querySelector(".compose textarea");
const pipVideo = document.getElementById("remote-video");
var VideoChat = {
connected: false,
willInitiateCall: false,
localICECandidates: [],
socket: io(),
remoteVideo: document.getElementById('remote-video'),
localVideo: document.getElementById('local-video'),
remoteVideo: document.getElementById("remote-video"),
localVideo: document.getElementById("local-video"),
recognition: undefined,
// Call to getUserMedia (provided by adapter.js for cross browser compatibility)
@ -35,77 +33,88 @@ var VideoChat = {
requestMediaStream: function (event) {
logIt("requestMediaStream");
rePositionLocalVideo();
navigator.mediaDevices.getUserMedia({
navigator.mediaDevices
.getUserMedia({
video: true,
audio: true
}).then(stream => {
audio: true,
})
.then((stream) => {
VideoChat.onMediaStream(stream);
$('#local-video-text').text("Drag Me");
setTimeout(() => $('#local-video-text').fadeOut(), 5000);
}).catch(error => {
$("#local-video-text").text("Drag Me");
setTimeout(() => $("#local-video-text").fadeOut(), 5000);
})
.catch((error) => {
logIt(error);
logIt('Failed to get local webcam video, check webcam privacy settings');
logIt(
"Failed to get local webcam video, check webcam privacy settings"
);
setTimeout(VideoChat.requestMediaStream, 1000);
});
},
// The onMediaStream function receives the media stream as an argument.
onMediaStream: function (stream) {
logIt("onMediaStream");
VideoChat.localStream = stream;
// Add the stream as video's srcObject.
Snackbar.show({
text: 'Share this URL with a friend to get started',
actionText: 'Copy Link',
width: '355px',
pos: 'top-center',
actionTextColor: '#8688ff',
text: "Share this URL with a friend to get started",
actionText: "Copy Link",
width: "355px",
pos: "top-center",
actionTextColor: "#8688ff",
duration: 500000,
backgroundColor: '#16171a',
backgroundColor: "#16171a",
onActionClick: function (element) {
var copyContent = window.location.href;
$('<input id="some-element">').val(copyContent).appendTo('body').select();
document.execCommand('copy');
var toRemove = document.querySelector('#some-element');
$('<input id="some-element">')
.val(copyContent)
.appendTo("body")
.select();
document.execCommand("copy");
var toRemove = document.querySelector("#some-element");
toRemove.parentNode.removeChild(toRemove);
$(element).css('opacity', 0); //Set opacity of element to 0 to close Snackbar
}
$(element).css("opacity", 0); //Set opacity of element to 0 to close Snackbar
},
});
VideoChat.localVideo.srcObject = stream;
// Now we're ready to join the chat room.
VideoChat.socket.emit('join', roomHash);
VideoChat.socket.on('full', chatRoomFull);
VideoChat.socket.on('offer', VideoChat.onOffer);
VideoChat.socket.on('ready', VideoChat.readyToCall);
VideoChat.socket.on('willInitiateCall', () => VideoChat.willInitiateCall = true);
VideoChat.socket.emit("join", roomHash);
VideoChat.socket.on("full", chatRoomFull);
VideoChat.socket.on("offer", VideoChat.onOffer);
VideoChat.socket.on("ready", VideoChat.readyToCall);
VideoChat.socket.on(
"willInitiateCall",
() => (VideoChat.willInitiateCall = true)
);
},
// When we are ready to call, enable the Call button.
readyToCall: function (event) {
logIt("readyToCall");
if (VideoChat.willInitiateCall) {
logIt("Initiating call")
VideoChat.startCall()
logIt("Initiating call");
VideoChat.startCall();
}
},
// Set up a callback to run when we have the ephemeral token to use Twilio's TURN server.
startCall: function (event) {
logIt("startCall");
logIt('>>> Sending token request...');
VideoChat.socket.on('token', VideoChat.onToken(VideoChat.createOffer));
VideoChat.socket.emit('token', roomHash);
logIt(">>> Sending token request...");
VideoChat.socket.on("token", VideoChat.onToken(VideoChat.createOffer));
VideoChat.socket.emit("token", roomHash);
},
// When we receive the ephemeral token back from the server.
onToken: function (callback) {
logIt("onToken");
return function (token) {
logIt('<<< Received token');
logIt("<<< Received token");
// Set up a new RTCPeerConnection using the token's iceServers.
VideoChat.peerConnection = new RTCPeerConnection({iceServers: token.iceServers});
VideoChat.peerConnection = new RTCPeerConnection({
iceServers: token.iceServers,
});
// Add the local video stream to the peerConnection.
VideoChat.localStream.getTracks().forEach(function (track) {
VideoChat.peerConnection.addTrack(track, VideoChat.localStream);
@ -116,10 +125,12 @@ var VideoChat = {
VideoChat.peerConnection.onaddstream = VideoChat.onAddStream;
// Set up listeners on the socket for candidates or answers being passed
// over the socket connection.
VideoChat.socket.on('candidate', VideoChat.onCandidate);
VideoChat.socket.on('answer', VideoChat.onAnswer);
VideoChat.socket.on('requestToggleCaptions', () => toggleSendCaptions());
VideoChat.socket.on('recieveCaptions', (captions) => recieveCaptions(captions));
VideoChat.socket.on("candidate", VideoChat.onCandidate);
VideoChat.socket.on("answer", VideoChat.onAnswer);
VideoChat.socket.on("requestToggleCaptions", () => toggleSendCaptions());
VideoChat.socket.on("recieveCaptions", (captions) =>
recieveCaptions(captions)
);
callback();
};
@ -129,10 +140,16 @@ var VideoChat = {
onIceCandidate: function (event) {
logIt("onIceCandidate");
if (event.candidate) {
logIt(`<<< Received local ICE candidate from STUN/TURN server (${event.candidate.address})`);
logIt(
`<<< Received local ICE candidate from STUN/TURN server (${event.candidate.address})`
);
if (VideoChat.connected) {
logIt(`>>> Sending local ICE candidate (${event.candidate.address})`);
VideoChat.socket.emit('candidate', JSON.stringify(event.candidate), roomHash);
VideoChat.socket.emit(
"candidate",
JSON.stringify(event.candidate),
roomHash
);
} else {
// If we are not 'connected' to the other peer, we are buffering the local ICE candidates.
// This most likely is happening on the "caller" side.
@ -148,21 +165,23 @@ var VideoChat = {
onCandidate: function (candidate) {
logIt("onCandidate");
rtcCandidate = new RTCIceCandidate(JSON.parse(candidate));
logIt(`<<< Received remote ICE candidate (${rtcCandidate.address} - ${rtcCandidate.relatedAddress})`);
logIt(
`<<< Received remote ICE candidate (${rtcCandidate.address} - ${rtcCandidate.relatedAddress})`
);
VideoChat.peerConnection.addIceCandidate(rtcCandidate);
},
// Create an offer that contains the media capabilities of the browser.
createOffer: function () {
logIt("createOffer");
logIt('>>> Creating offer...');
logIt(">>> Creating offer...");
VideoChat.peerConnection.createOffer(
function (offer) {
// If the offer is created successfully, set it as the local description
// and send it over the socket connection to initiate the peerConnection
// on the other side.
VideoChat.peerConnection.setLocalDescription(offer);
VideoChat.socket.emit('offer', JSON.stringify(offer), roomHash);
VideoChat.socket.emit("offer", JSON.stringify(offer), roomHash);
},
function (err) {
logIt("failed offer creation");
@ -179,13 +198,13 @@ var VideoChat = {
createAnswer: function (offer) {
logIt("createAnswer");
return function () {
logIt('>>> Creating answer...');
logIt(">>> Creating answer...");
rtcOffer = new RTCSessionDescription(JSON.parse(offer));
VideoChat.peerConnection.setRemoteDescription(rtcOffer);
VideoChat.peerConnection.createAnswer(
function (answer) {
VideoChat.peerConnection.setLocalDescription(answer);
VideoChat.socket.emit('answer', JSON.stringify(answer), roomHash);
VideoChat.socket.emit("answer", JSON.stringify(answer), roomHash);
},
function (err) {
logIt("Failed answer creation.");
@ -199,22 +218,25 @@ var VideoChat = {
// ephemeral token is returned from Twilio.
onOffer: function (offer) {
logIt("onOffer");
logIt('<<< Received offer');
VideoChat.socket.on('token', VideoChat.onToken(VideoChat.createAnswer(offer)));
VideoChat.socket.emit('token', roomHash);
logIt("<<< Received offer");
VideoChat.socket.on(
"token",
VideoChat.onToken(VideoChat.createAnswer(offer))
);
VideoChat.socket.emit("token", roomHash);
},
// When an answer is received, add it to the peerConnection as the remote description.
onAnswer: function (answer) {
logIt("onAnswer");
logIt('<<< Received answer');
logIt("<<< Received answer");
var rtcAnswer = new RTCSessionDescription(JSON.parse(answer));
VideoChat.peerConnection.setRemoteDescription(rtcAnswer);
VideoChat.localICECandidates.forEach(candidate => {
VideoChat.localICECandidates.forEach((candidate) => {
// The caller now knows that the callee is ready to accept new ICE candidates, so sending the buffer over
logIt(`>>> Sending local ICE candidate (${candidate.address})`);
VideoChat.socket.emit('candidate', JSON.stringify(candidate), roomHash);
VideoChat.socket.emit("candidate", JSON.stringify(candidate), roomHash);
});
// Reset the buffer of local ICE candidates. This is not really needed, but it's good practice
VideoChat.localICECandidates = [];
@ -222,13 +244,13 @@ var VideoChat = {
onAddStream: function (event) {
logIt("onAddStream");
logIt('<<< Received new stream from remote. Adding it...');
logIt("<<< Received new stream from remote. Adding it...");
VideoChat.remoteVideo.srcObject = event.stream;
Snackbar.close();
VideoChat.remoteVideo.style.background = 'none';
VideoChat.remoteVideo.style.background = "none";
VideoChat.connected = true;
$('#remote-video-text').fadeOut();
$('#local-video-text').fadeOut();
$("#remote-video-text").fadeOut();
$("#local-video-text").fadeOut();
var timesRun = 0;
var interval = setInterval(function () {
@ -236,12 +258,11 @@ var VideoChat = {
if (timesRun === 20) {
clearInterval(interval);
}
rePositionLocalVideo()
rePositionLocalVideo();
}, 300);
},
};
function getBrowserName() {
var name = "Unknown";
if (window.navigator.userAgent.indexOf("MSIE") !== -1) {
@ -262,7 +283,9 @@ function logIt(message, error) {
}
function chatRoomFull() {
alert("Chat room is full. Check to make sure you don't have multiple open tabs, or try with a new room link");
alert(
"Chat room is full. Check to make sure you don't have multiple open tabs, or try with a new room link"
);
window.location.href = "/newroom";
}
@ -270,37 +293,41 @@ function rePositionLocalVideo() {
var bounds = $("#remote-video").position();
bounds.top += 10;
bounds.left += 10;
$("#moveable").css(bounds)
$("#moveable").css(bounds);
}
//
// Fullscreen
//
function openFullscreen() {
var elem = document.getElementById("remote-video");
if (!isFullscreen) {
isFullscreen = true;
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) { /* Firefox */
} else if (elem.mozRequestFullScreen) {
/* Firefox */
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
} else if (elem.webkitRequestFullscreen) {
/* Chrome, Safari and Opera */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE/Edge */
} else if (elem.msRequestFullscreen) {
/* IE/Edge */
elem.msRequestFullscreen();
}
} else {
isFullscreen = false;
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) { /* Firefox */
} else if (document.mozCancelFullScreen) {
/* Firefox */
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */
} else if (document.webkitExitFullscreen) {
/* Chrome, Safari and Opera */
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { /* IE/Edge */
} else if (document.msExitFullscreen) {
/* IE/Edge */
document.msExitFullscreen();
}
}
@ -310,7 +337,6 @@ function openFullscreen() {
// End Fullscreen
//
//
// Mute microphone
//
@ -322,11 +348,11 @@ function muteMicrophone() {
if (muted) {
micIcon.classList.remove("fa-microphone");
micIcon.classList.add("fa-microphone-slash");
micText.innerText = "Unmute"
micText.innerText = "Unmute";
} else {
micIcon.classList.add("fa-microphone");
micIcon.classList.remove("fa-microphone-slash");
micText.innerText = "Mute"
micText.innerText = "Mute";
}
}
@ -345,11 +371,11 @@ function pauseVideo() {
if (paused) {
micIcon.classList.remove("fa-video");
micIcon.classList.add("fa-video-slash");
micText.innerText = "Unpause Video"
micText.innerText = "Unpause Video";
} else {
micIcon.classList.add("fa-video");
micIcon.classList.remove("fa-video-slash");
micText.innerText = "Pause Video"
micText.innerText = "Pause Video";
}
}
@ -357,7 +383,6 @@ function pauseVideo() {
// End pause Video
//
//
// Swap camera / screen share
//
@ -365,15 +390,17 @@ function pauseVideo() {
function swap() {
if (!VideoChat.connected) {
alert("You must join a call before you can share your screen.");
return
return;
}
const swapIcon = document.getElementById("swap-icon");
const swapText = document.getElementById("swap-text");
if (mode === "camera") {
navigator.mediaDevices.getDisplayMedia({
navigator.mediaDevices
.getDisplayMedia({
video: true,
audio: true
}).then(function (stream) {
audio: true,
})
.then(function (stream) {
mode = "screen";
swapIcon.classList.remove("fa-desktop");
swapIcon.classList.add("fa-camera");
@ -381,11 +408,13 @@ function swap() {
switchStreamHelper(stream);
});
} else {
VideoChat.localVideo.srcObject.getTracks().forEach(track => track.stop());
navigator.mediaDevices.getUserMedia({
VideoChat.localVideo.srcObject.getTracks().forEach((track) => track.stop());
navigator.mediaDevices
.getUserMedia({
video: true,
audio: true
}).then(function (stream) {
audio: true,
})
.then(function (stream) {
mode = "camera";
swapIcon.classList.remove("fa-camera");
swapIcon.classList.add("fa-desktop");
@ -411,7 +440,6 @@ function switchStreamHelper(stream) {
// End swap camera / screen share
//
//
// Live caption
//
@ -419,18 +447,20 @@ function switchStreamHelper(stream) {
function requestToggleCaptions() {
if (!VideoChat.connected) {
alert("You must be connected to a peer to use Live Caption");
return
return;
}
if (receivingCaptions) {
$('#remote-video-text').text("").fadeOut();
$('#caption-text').text("Start Live Caption");
$("#remote-video-text").text("").fadeOut();
$("#caption-text").text("Start Live Caption");
receivingCaptions = false;
} else {
alert("This is an expirimental feature. Live transcription requires the other user to have chrome.");
$('#caption-text').text("End Live Caption");
alert(
"This is an expirimental feature. Live transcription requires the other user to have chrome."
);
$("#caption-text").text("End Live Caption");
receivingCaptions = true;
}
VideoChat.socket.emit('requestToggleCaptions', roomHash);
VideoChat.socket.emit("requestToggleCaptions", roomHash);
}
function toggleSendCaptions() {
@ -445,15 +475,16 @@ function toggleSendCaptions() {
function startSpeech() {
try {
var SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
var SpeechRecognition =
window.SpeechRecognition || window.webkitSpeechRecognition;
var recognition = new SpeechRecognition();
VideoChat.recognition = recognition;
} catch (e) {
sendingCaptions = false;
logIt(e);
logIt("error importing speech library");
VideoChat.socket.emit('sendCaptions', "notusingchrome", roomHash);
return
VideoChat.socket.emit("sendCaptions", "notusingchrome", roomHash);
return;
}
// If false, the recording will stop after a few seconds of silence.
@ -465,14 +496,14 @@ function startSpeech() {
var finalTranscript;
recognition.onresult = (event) => {
let interimTranscript = '';
let interimTranscript = "";
for (let i = event.resultIndex, len = event.results.length; i < len; i++) {
let transcript = event.results[i][0].transcript;
if (event.results[i].isFinal) {
finalTranscript += transcript;
} else {
interimTranscript += transcript;
VideoChat.socket.emit('sendCaptions', interimTranscript, roomHash);
VideoChat.socket.emit("sendCaptions", interimTranscript, roomHash);
// console.log(interimTranscript);
}
}
@ -487,7 +518,7 @@ function startSpeech() {
};
recognition.onerror = function (event) {
if (event.error === 'no-speech') {
if (event.error === "no-speech") {
console.log("no speech detected");
}
};
@ -496,7 +527,7 @@ function startSpeech() {
console.log("on end");
console.log(sendingCaptions);
if (sendingCaptions) {
startSpeech()
startSpeech();
} else {
VideoChat.recognition.stop();
}
@ -506,21 +537,21 @@ function startSpeech() {
}
function recieveCaptions(captions) {
$('#remote-video-text').text("").fadeIn();
$("#remote-video-text").text("").fadeIn();
if (!receivingCaptions) {
$('#remote-video-text').text("").fadeOut();
$("#remote-video-text").text("").fadeOut();
}
if (captions === "notusingchrome") {
alert("Other caller must be using chrome for this feature to work");
receivingCaptions = false;
$('#remote-video-text').text("").fadeOut();
$('#caption-text').text("Start Live Caption");
return
$("#remote-video-text").text("").fadeOut();
$("#caption-text").text("Start Live Caption");
return;
}
if (captions.length > 100) {
$('#remote-video-text').text(captions.substr(captions.length - 199));
$("#remote-video-text").text(captions.substr(captions.length - 199));
} else {
$('#remote-video-text').text(captions);
$("#remote-video-text").text(captions);
}
}
@ -534,30 +565,36 @@ function recieveCaptions(captions) {
var socket = VideoChat.socket;
chatInput.addEventListener('keypress', function (event) {
chatInput.addEventListener("keypress", function (event) {
if (event.keyCode === 13) {
event.preventDefault();
socket.emit('chat message', chatInput.value, roomHash);
$('.chat-messages').append('<div class="message-item customer"><div class="message-bloc"><div class="message">' + chatInput.value + '</div></div></div>');
$('#chat-zone').scrollTop($('#chat-zone')[0].scrollHeight);
chatInput.value = '';
socket.emit("chat message", chatInput.value, roomHash);
$(".chat-messages").append(
'<div class="message-item customer"><div class="message-bloc"><div class="message">' +
chatInput.value +
"</div></div></div>"
);
$("#chat-zone").scrollTop($("#chat-zone")[0].scrollHeight);
chatInput.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>');
$('#chat-zone').scrollTop($('#chat-zone')[0].scrollHeight);
if ($('#entire-chat').is(":hidden")) {
toggleChat()
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>"
);
$("#chat-zone").scrollTop($("#chat-zone")[0].scrollHeight);
if ($("#entire-chat").is(":hidden")) {
toggleChat();
}
});
function toggleChat() {
var entireChat = $('#entire-chat');
var entireChat = $("#entire-chat");
var chatIcon = document.getElementById("chat-icon");
var chatText = $('#chat-text');
var chatText = $("#chat-text");
if (entireChat.is(":visible")) {
entireChat.fadeOut();
chatText.text("Show Chat");
@ -580,42 +617,40 @@ function toggleChat() {
//
function togglePictureInPicture() {
if ('pictureInPictureEnabled' in document) {
if ("pictureInPictureEnabled" in document) {
if (document.pictureInPictureElement) {
document.exitPictureInPicture()
.catch(error => {
document.exitPictureInPicture().catch((error) => {
logIt("Error exiting pip.");
logIt(error);
});
} else {
pipVideo.requestPictureInPicture()
.catch(error => {
pipVideo.requestPictureInPicture().catch((error) => {
logIt("Error entering pip.");
logIt(error);
});
}
} else {
alert("Picture in picture is not supported in your browser. Consider using Chrome.")
alert(
"Picture in picture is not supported in your browser. Consider using Chrome."
);
}
}
pipVideo.addEventListener('enterpictureinpicture', () => {
$('#pip-text').text("Exit Picture in Picture");
pipVideo.addEventListener("enterpictureinpicture", () => {
$("#pip-text").text("Exit Picture in Picture");
});
pipVideo.addEventListener('leavepictureinpicture', () => {
$('#pip-text').text("Enter Picture in Picture");
pipVideo.addEventListener("leavepictureinpicture", () => {
$("#pip-text").text("Enter Picture in Picture");
});
//
//Picture in picture
//
function startUp() {
// strip url parameters
if (url.indexOf('?') > -1) {
window.location.href = url.split('?')[0];
if (url.indexOf("?") > -1) {
window.location.href = url.split("?")[0];
}
// if no chat room provided go back to newroom
@ -624,23 +659,29 @@ function startUp() {
}
// Redirect unsupported browsers
if (!isWebRTCSupported || browserName === "Safari" || browserName === "MSIE") {
alert("Your browser doesn't support Neon Chat. Please use Chrome or Firefox.");
if (
!isWebRTCSupported ||
browserName === "Safari" ||
browserName === "MSIE"
) {
alert(
"Your browser doesn't support Neon Chat. Please use Chrome or Firefox."
);
window.location.href = "/";
}
document.title = 'Neon Chat - ' + url.substring(url.lastIndexOf('/') + 1);
document.title = "Neon Chat - " + url.substring(url.lastIndexOf("/") + 1);
// get webcam on load
VideoChat.requestMediaStream();
$('#remote-video-text').text("").fadeOut();
$("#remote-video-text").text("").fadeOut();
$("#moveable").draggable({containment: 'window'});
$("#moveable").draggable({ containment: "window" });
$(".HoverState").hide();
$('#entire-chat').hide();
$("#entire-chat").hide();
//
// Show hide button labels on hover
@ -660,7 +701,6 @@ function startUp() {
// End show hide button labels on hover
//
//
// Fade out / show UI on mouse move
//
@ -669,16 +709,16 @@ function startUp() {
function delayCheck() {
if (timedelay === 5) {
$('.multi-button').fadeOut();
$('#header').fadeOut();
$(".multi-button").fadeOut();
$("#header").fadeOut();
timedelay = 1;
}
timedelay = timedelay + 1;
}
$(document).mousemove(function () {
$('.multi-button').fadeIn();
$('#header').fadeIn();
$(".multi-button").fadeIn();
$("#header").fadeIn();
timedelay = 1;
clearInterval(_delay);
_delay = setInterval(delayCheck, 500);
@ -691,16 +731,19 @@ function startUp() {
// Show accept webcam snackbar
Snackbar.show({
text: 'Please allow microphone and webcam access',
actionText: 'Show Me How',
width: '455px',
pos: 'top-right',
actionTextColor: '#8688ff',
text: "Please allow microphone and webcam access",
actionText: "Show Me How",
width: "455px",
pos: "top-right",
actionTextColor: "#8688ff",
duration: 50000,
backgroundColor: '#292B32',
backgroundColor: "#292B32",
onActionClick: function (element) {
window.open('https://getacclaim.zendesk.com/hc/en-us/articles/360001547832-Setting-the-default-camera-on-your-browser', '_blank');
}
window.open(
"https://getacclaim.zendesk.com/hc/en-us/articles/360001547832-Setting-the-default-camera-on-your-browser",
"_blank"
);
},
});
}

350
public/js/landing.js
View File

@ -1,137 +1,250 @@
!function () {
!(function () {
"use strict";
const e = document.getElementsByClassName("accordion-header");
function t(e, t) {
e.classList.add("is-active"), t.style.maxHeight = t.scrollHeight + "px"
e.classList.add("is-active"), (t.style.maxHeight = t.scrollHeight + "px");
}
function n(e, t) {
e.classList.remove("is-active"), t.style.maxHeight = null
e.classList.remove("is-active"), (t.style.maxHeight = null);
}
if (e.length > 0) for (let i = 0; i < e.length; i++) {
const s = e[i], a = s.parentNode, l = s.nextElementSibling;
a.classList.contains("is-active") && t(a, l), s.addEventListener("click", function () {
a.classList.contains("is-active") ? n(a, l) : t(a, l)
})
if (e.length > 0)
for (let i = 0; i < e.length; i++) {
const s = e[i],
a = s.parentNode,
l = s.nextElementSibling;
a.classList.contains("is-active") && t(a, l),
s.addEventListener("click", function () {
a.classList.contains("is-active") ? n(a, l) : t(a, l);
});
}
}(), function () {
})(),
(function () {
"use strict";
let e = {
touchStartX: 0, touchEndX: 0, minSwipePixels: 30, detectionZone: void 0, swipeCallback: function () {
}, init: function (t, n) {
e.swipeCallback = n, t.addEventListener("touchstart", function (t) {
e.touchStartX = t.changedTouches[0].screenX
}, !1), t.addEventListener("touchend", function (t) {
e.touchEndX = t.changedTouches[0].screenX, e.handleSwipeGesture()
}, !1)
}, handleSwipeGesture: function () {
touchStartX: 0,
touchEndX: 0,
minSwipePixels: 30,
detectionZone: void 0,
swipeCallback: function () {},
init: function (t, n) {
(e.swipeCallback = n),
t.addEventListener(
"touchstart",
function (t) {
e.touchStartX = t.changedTouches[0].screenX;
},
!1
),
t.addEventListener(
"touchend",
function (t) {
(e.touchEndX = t.changedTouches[0].screenX),
e.handleSwipeGesture();
},
!1
);
},
handleSwipeGesture: function () {
let t, n;
e.touchEndX <= e.touchStartX && (n = e.touchStartX - e.touchEndX, t = "left"), e.touchEndX >= e.touchStartX && (n = e.touchEndX - e.touchStartX, t = "right"), n > e.minSwipePixels && "undefined" !== t && e.swipe(t, n)
}, swipe: function (t, n) {
e.touchEndX <= e.touchStartX &&
((n = e.touchStartX - e.touchEndX), (t = "left")),
e.touchEndX >= e.touchStartX &&
((n = e.touchEndX - e.touchStartX), (t = "right")),
n > e.minSwipePixels && "undefined" !== t && e.swipe(t, n);
},
swipe: function (t, n) {
let i = {};
i.direction = t, i.movedPixels = n, e.swipeCallback(i)
}
(i.direction = t), (i.movedPixels = n), e.swipeCallback(i);
},
};
const t = document.getElementsByClassName("carousel-items");
function n(e, t) {
void 0 === t && (t = "next");
let n = e.getElementsByClassName("carousel-item is-active")[0],
i = "next" === t ? n.nextElementSibling : n.previousElementSibling, s = n.getAttribute("data-carousel"),
i = "next" === t ? n.nextElementSibling : n.previousElementSibling,
s = n.getAttribute("data-carousel"),
a = e.parentNode.getElementsByClassName("carousel-bullet")[s],
l = "next" === t ? a.nextElementSibling : a.previousElementSibling;
n.classList.remove("is-active"), a.classList.remove("is-active"), i ? (i.classList.add("is-active"), l.classList.add("is-active")) : "next" === t ? (e.firstElementChild.classList.add("is-active"), e.parentNode.getElementsByClassName("carousel-bullets")[0].firstElementChild.classList.add("is-active")) : (e.lastElementChild.classList.add("is-active"), e.parentNode.getElementsByClassName("carousel-bullets")[0].lastElementChild.classList.add("is-active"))
n.classList.remove("is-active"),
a.classList.remove("is-active"),
i
? (i.classList.add("is-active"), l.classList.add("is-active"))
: "next" === t
? (e.firstElementChild.classList.add("is-active"),
e.parentNode
.getElementsByClassName("carousel-bullets")[0]
.firstElementChild.classList.add("is-active"))
: (e.lastElementChild.classList.add("is-active"),
e.parentNode
.getElementsByClassName("carousel-bullets")[0]
.lastElementChild.classList.add("is-active"));
}
function i(e, t) {
let n, i = 0;
for (let e = 0; e < t.length; e++) t[0].parentNode.style.minHeight = i + "px", t[e].classList.add("is-loading"), n = t[e].offsetHeight, t[e].classList.remove("is-loading"), n > i && (i = n);
t[0].parentNode.style.minHeight = i + "px"
let n,
i = 0;
for (let e = 0; e < t.length; e++)
(t[0].parentNode.style.minHeight = i + "px"),
t[e].classList.add("is-loading"),
(n = t[e].offsetHeight),
t[e].classList.remove("is-loading"),
n > i && (i = n);
t[0].parentNode.style.minHeight = i + "px";
}
function s(e) {
e && clearInterval(e)
e && clearInterval(e);
}
if (t.length > 0) for (let a = 0; a < t.length; a++) {
let l = t[a], c = l.getElementsByClassName("carousel-item"), o = 0, r = l.getAttribute("data-autorotate");
if (t.length > 0)
for (let a = 0; a < t.length; a++) {
let l = t[a],
c = l.getElementsByClassName("carousel-item"),
o = 0,
r = l.getAttribute("data-autorotate");
const d = document.createElement("div");
d.className = "carousel-bullets", l.parentNode.insertBefore(d, l.nextSibling);
(d.className = "carousel-bullets"),
l.parentNode.insertBefore(d, l.nextSibling);
for (let e = 0; e < c.length; e++) {
c[e].setAttribute("data-carousel", e), c[e].classList.contains("is-active") && (o = e);
c[e].setAttribute("data-carousel", e),
c[e].classList.contains("is-active") && (o = e);
let t = document.createElement("button");
t.className = "carousel-bullet", t.setAttribute("data-bullet", e), l.parentNode.getElementsByClassName("carousel-bullets")[0].appendChild(t)
(t.className = "carousel-bullet"),
t.setAttribute("data-bullet", e),
l.parentNode
.getElementsByClassName("carousel-bullets")[0]
.appendChild(t);
}
c[o].classList.add("is-active");
let u = l.parentNode.getElementsByClassName("carousel-bullet");
u[o].classList.add("is-active"), i(0, c), window.addEventListener("resize", function () {
i(0, c)
u[o].classList.add("is-active"),
i(0, c),
window.addEventListener("resize", function () {
i(0, c);
});
let m = !1;
r && (m = setInterval(function () {
n(l, "next")
r &&
(m = setInterval(function () {
n(l, "next");
}, r));
for (let e = 0; e < u.length; e++) {
let t = u[e];
t.addEventListener("click", function (e) {
if (e.preventDefault(), t.classList.contains("is-active")) return;
for (let e = 0; e < u.length; e++) u[e].classList.remove("is-active");
for (let e = 0; e < c.length; e++) c[e].classList.remove("is-active");
if ((e.preventDefault(), t.classList.contains("is-active"))) return;
for (let e = 0; e < u.length; e++)
u[e].classList.remove("is-active");
for (let e = 0; e < c.length; e++)
c[e].classList.remove("is-active");
let n = this.getAttribute("data-bullet");
c[n].classList.add("is-active"), this.classList.add("is-active"), s(m)
})
c[n].classList.add("is-active"),
this.classList.add("is-active"),
s(m);
});
}
e.init(l, function (e) {
"left" === e.direction ? n(l, "next") : "right" === e.direction && n(l, "prev"), s(m)
})
"left" === e.direction
? n(l, "next")
: "right" === e.direction && n(l, "prev"),
s(m);
});
}
}(), function () {
})(),
(function () {
"use strict";
document.documentElement.classList.remove("no-js"), document.documentElement.classList.add("js"), window.addEventListener("load", function () {
document.body.classList.add("is-loaded")
})
}(), function () {
document.documentElement.classList.remove("no-js"),
document.documentElement.classList.add("js"),
window.addEventListener("load", function () {
document.body.classList.add("is-loaded");
});
})(),
(function () {
"use strict";
const e = document.getElementById("header-nav-toggle"), t = document.getElementById("header-nav");
e && (e.addEventListener("click", function () {
document.body.classList.toggle("off-nav-is-active"), t.classList.toggle("is-active"), t.style.maxHeight ? t.style.maxHeight = null : t.style.maxHeight = t.scrollHeight + "px", "true" === this.getAttribute("aria-expanded") ? this.setAttribute("aria-expanded", "false") : this.setAttribute("aria-expanded", "true")
}), document.addEventListener("click", function (n) {
n.target === t || n.target === e || t.contains(n.target) || (document.body.classList.remove("off-nav-is-active"), t.classList.remove("is-active"), t.style.maxHeight = null, e.setAttribute("aria-expanded", "false"))
}))
}(), function () {
const e = document.getElementById("header-nav-toggle"),
t = document.getElementById("header-nav");
e &&
(e.addEventListener("click", function () {
document.body.classList.toggle("off-nav-is-active"),
t.classList.toggle("is-active"),
t.style.maxHeight
? (t.style.maxHeight = null)
: (t.style.maxHeight = t.scrollHeight + "px"),
"true" === this.getAttribute("aria-expanded")
? this.setAttribute("aria-expanded", "false")
: this.setAttribute("aria-expanded", "true");
}),
document.addEventListener("click", function (n) {
n.target === t ||
n.target === e ||
t.contains(n.target) ||
(document.body.classList.remove("off-nav-is-active"),
t.classList.remove("is-active"),
(t.style.maxHeight = null),
e.setAttribute("aria-expanded", "false"));
}));
})(),
(function () {
"use strict";
const e = document.getElementsByClassName("modal"), t = document.getElementsByClassName("modal-trigger");
const e = document.getElementsByClassName("modal"),
t = document.getElementsByClassName("modal-trigger");
function n() {
document.body.classList.remove("modal-is-active");
for (let t = 0; t < e.length; t++) e[t].classList.remove("is-active")
for (let t = 0; t < e.length; t++) e[t].classList.remove("is-active");
}
if (e.length > 0 && t.length > 0) for (let e = 0; e < t.length; e++) {
let n = t[e], i = document.getElementById(n.getAttribute("aria-controls"));
i && (n.hasAttribute("data-video") && (null !== i.querySelector("iframe") ? i.querySelector("iframe").setAttribute("src", n.getAttribute("data-video")) : null !== i.querySelector("video") && i.querySelector("video").setAttribute("src", n.getAttribute("data-video"))), n.addEventListener("click", function (e) {
if (e.length > 0 && t.length > 0)
for (let e = 0; e < t.length; e++) {
let n = t[e],
i = document.getElementById(n.getAttribute("aria-controls"));
i &&
(n.hasAttribute("data-video") &&
(null !== i.querySelector("iframe")
? i
.querySelector("iframe")
.setAttribute("src", n.getAttribute("data-video"))
: null !== i.querySelector("video") &&
i
.querySelector("video")
.setAttribute("src", n.getAttribute("data-video"))),
n.addEventListener("click", function (e) {
var t;
e.preventDefault(), n.hasAttribute("aria-controls") && (t = i) && (document.body.classList.add("modal-is-active"), t.classList.add("is-active"))
}))
e.preventDefault(),
n.hasAttribute("aria-controls") &&
(t = i) &&
(document.body.classList.add("modal-is-active"),
t.classList.add("is-active"));
}));
}
document.addEventListener("click", function (e) {
(e.target.classList.contains("modal") || e.target.classList.contains("modal-close-trigger")) && (e.preventDefault(), n())
}), document.addEventListener("keydown", function (e) {
27 === (e || window.event).keyCode && n()
})
}(), function () {
(e.target.classList.contains("modal") ||
e.target.classList.contains("modal-close-trigger")) &&
(e.preventDefault(), n());
}),
document.addEventListener("keydown", function (e) {
27 === (e || window.event).keyCode && n();
});
})(),
(function () {
"use strict";
const e = document.getElementById("pricing-toggle");
function t() {
const t = document.getElementsByClassName("pricing-switchable");
if (e.checked) for (let e = 0; e < t.length; e++) t[e].innerHTML = t[e].getAttribute("data-pricing-yearly"); else for (let e = 0; e < t.length; e++) t[e].innerHTML = t[e].getAttribute("data-pricing-monthly")
if (e.checked)
for (let e = 0; e < t.length; e++)
t[e].innerHTML = t[e].getAttribute("data-pricing-yearly");
else
for (let e = 0; e < t.length; e++)
t[e].innerHTML = t[e].getAttribute("data-pricing-monthly");
}
e && (window.addEventListener("load", t), e.addEventListener("change", t))
}(), function () {
e && (window.addEventListener("load", t), e.addEventListener("change", t));
})(),
(function () {
"use strict";
const e = document.querySelectorAll("[class*=reveal-]");
let t = window.innerHeight;
@ -139,58 +252,89 @@
function n(e, t) {
var n = 0;
return function () {
var i = (new Date).getTime();
if (!(i - n < e)) return n = i, t.apply(void 0, arguments)
}
var i = new Date().getTime();
if (!(i - n < e)) return (n = i), t.apply(void 0, arguments);
};
}
function i() {
for (let i = 0; i < e.length; i++) {
let s = e[i], a = s.getAttribute("data-reveal-delay"),
l = s.getAttribute("data-reveal-offset") ? s.getAttribute("data-reveal-offset") : "200",
c = s.getAttribute("data-reveal-container") ? s.closest(s.getAttribute("data-reveal-container")) : s;
n = l, c.getBoundingClientRect().top <= t - n && !s.classList.contains("is-revealed") && (a && 0 !== a ? setTimeout(function () {
s.classList.add("is-revealed")
}, a) : s.classList.add("is-revealed"))
let s = e[i],
a = s.getAttribute("data-reveal-delay"),
l = s.getAttribute("data-reveal-offset")
? s.getAttribute("data-reveal-offset")
: "200",
c = s.getAttribute("data-reveal-container")
? s.closest(s.getAttribute("data-reveal-container"))
: s;
(n = l),
c.getBoundingClientRect().top <= t - n &&
!s.classList.contains("is-revealed") &&
(a && 0 !== a
? setTimeout(function () {
s.classList.add("is-revealed");
}, a)
: s.classList.add("is-revealed"));
}
var n;
!function () {
if (e.length > document.querySelectorAll("[class*=reveal-].is-revealed").length) return;
window.removeEventListener("load", i), window.removeEventListener("scroll", s), window.removeEventListener("resize", a)
}()
!(function () {
if (
e.length >
document.querySelectorAll("[class*=reveal-].is-revealed").length
)
return;
window.removeEventListener("load", i),
window.removeEventListener("scroll", s),
window.removeEventListener("resize", a);
})();
}
function s() {
n(30, i())
n(30, i());
}
function a() {
t = window.innerHeight, n(30, i())
(t = window.innerHeight), n(30, i());
}
e.length > 0 && document.body.classList.contains("has-animations") && (window.addEventListener("load", i), window.addEventListener("scroll", s), window.addEventListener("resize", a))
}(), function () {
e.length > 0 &&
document.body.classList.contains("has-animations") &&
(window.addEventListener("load", i),
window.addEventListener("scroll", s),
window.addEventListener("resize", a));
})(),
(function () {
"use strict";
const e = document.getElementsByClassName("smooth-scroll"), t = (e, n, i, s, a) => {
const e = document.getElementsByClassName("smooth-scroll"),
t = (e, n, i, s, a) => {
const l = n - e;
let c = l / i;
const o = function (e) {
return e < .5 ? 2 * e * e : (4 - 2 * e) * e - 1
}(c = Math.min(c, 1));
window.scroll(0, a + s * o), l < i && window.requestAnimationFrame(n => {
const l = n || (new Date).getTime();
t(e, l, i, s, a)
})
const o = (function (e) {
return e < 0.5 ? 2 * e * e : (4 - 2 * e) * e - 1;
})((c = Math.min(c, 1)));
window.scroll(0, a + s * o),
l < i &&
window.requestAnimationFrame((n) => {
const l = n || new Date().getTime();
t(e, l, i, s, a);
});
};
if (e.length > 0) for (let n = 0; n < e.length; n++) {
if (e.length > 0)
for (let n = 0; n < e.length; n++) {
e[n].addEventListener("click", function (e) {
e.preventDefault();
const n = e.target.closest(".smooth-scroll"), i = n.href.split("#")[1], s = document.getElementById(i),
const n = e.target.closest(".smooth-scroll"),
i = n.href.split("#")[1],
s = document.getElementById(i),
a = n.getAttribute("data-duration") || 1e3;
s && window.requestAnimationFrame(e => {
const n = e || (new Date).getTime(), i = n, l = window.pageYOffset, c = s.getBoundingClientRect().top;
t(i, n, a, c, l)
})
})
s &&
window.requestAnimationFrame((e) => {
const n = e || new Date().getTime(),
i = n,
l = window.pageYOffset,
c = s.getBoundingClientRect().top;
t(i, n, a, c, l);
});
});
}
}();
})();

44
public/js/mobile-menu.js
View File

@ -1,28 +1,34 @@
;(function () {
'use strict'
const navToggle = document.getElementById('header-nav-toggle')
const mainNav = document.getElementById('header-nav')
(function () {
"use strict";
const navToggle = document.getElementById("header-nav-toggle");
const mainNav = document.getElementById("header-nav");
if (navToggle) {
// Open menu
navToggle.addEventListener('click', function () {
document.body.classList.toggle('off-nav-is-active')
mainNav.classList.toggle('is-active')
navToggle.addEventListener("click", function () {
document.body.classList.toggle("off-nav-is-active");
mainNav.classList.toggle("is-active");
if (mainNav.style.maxHeight) {
mainNav.style.maxHeight = null
mainNav.style.maxHeight = null;
} else {
mainNav.style.maxHeight = mainNav.scrollHeight + 'px'
mainNav.style.maxHeight = mainNav.scrollHeight + "px";
}
this.getAttribute('aria-expanded') === 'true' ? this.setAttribute('aria-expanded', 'false') : this.setAttribute('aria-expanded', 'true')
})
this.getAttribute("aria-expanded") === "true"
? this.setAttribute("aria-expanded", "false")
: this.setAttribute("aria-expanded", "true");
});
// Close menu
document.addEventListener('click', function (e) {
if (e.target !== mainNav && e.target !== navToggle && !mainNav.contains(e.target)) {
document.body.classList.remove('off-nav-is-active')
mainNav.classList.remove('is-active')
mainNav.style.maxHeight = null
navToggle.setAttribute('aria-expanded', 'false')
document.addEventListener("click", function (e) {
if (
e.target !== mainNav &&
e.target !== navToggle &&
!mainNav.contains(e.target)
) {
document.body.classList.remove("off-nav-is-active");
mainNav.classList.remove("is-active");
mainNav.style.maxHeight = null;
navToggle.setAttribute("aria-expanded", "false");
}
})
});
}
}())
})();

69
public/js/modal.js
View File

@ -1,56 +1,65 @@
;(function () {
'use strict'
const modals = document.getElementsByClassName('modal')
const modalTriggers = document.getElementsByClassName('modal-trigger')
(function () {
"use strict";
const modals = document.getElementsByClassName("modal");
const modalTriggers = document.getElementsByClassName("modal-trigger");
function openModal(el) {
if (el) {
document.body.classList.add('modal-is-active')
el.classList.add('is-active')
document.body.classList.add("modal-is-active");
el.classList.add("is-active");
}
}
function closeModals() {
document.body.classList.remove('modal-is-active')
document.body.classList.remove("modal-is-active");
for (let i = 0; i < modals.length; i++) {
modals[i].classList.remove('is-active')
modals[i].classList.remove("is-active");
}
}
if (modals.length > 0 && modalTriggers.length > 0) {
for (let i = 0; i < modalTriggers.length; i++) {
let modalTrigger = modalTriggers[i]
let modal = document.getElementById(modalTrigger.getAttribute('aria-controls'))
let modalTrigger = modalTriggers[i];
let modal = document.getElementById(
modalTrigger.getAttribute("aria-controls")
);
if (modal) {
// Modal video
if (modalTrigger.hasAttribute('data-video')) {
if (modal.querySelector('iframe') !== null) {
modal.querySelector('iframe').setAttribute('src', modalTrigger.getAttribute('data-video'))
} else if (modal.querySelector('video') !== null) {
modal.querySelector('video').setAttribute('src', modalTrigger.getAttribute('data-video'))
if (modalTrigger.hasAttribute("data-video")) {
if (modal.querySelector("iframe") !== null) {
modal
.querySelector("iframe")
.setAttribute("src", modalTrigger.getAttribute("data-video"));
} else if (modal.querySelector("video") !== null) {
modal
.querySelector("video")
.setAttribute("src", modalTrigger.getAttribute("data-video"));
}
}
modalTrigger.addEventListener('click', function (e) {
e.preventDefault()
if (modalTrigger.hasAttribute('aria-controls')) {
openModal(modal)
modalTrigger.addEventListener("click", function (e) {
e.preventDefault();
if (modalTrigger.hasAttribute("aria-controls")) {
openModal(modal);
}
})
});
}
}
}
document.addEventListener('click', function (e) {
if (e.target.classList.contains('modal') || e.target.classList.contains('modal-close-trigger')) {
e.preventDefault()
closeModals()
document.addEventListener("click", function (e) {
if (
e.target.classList.contains("modal") ||
e.target.classList.contains("modal-close-trigger")
) {
e.preventDefault();
closeModals();
}
})
});
document.addEventListener('keydown', function (event) {
var e = event || window.event
document.addEventListener("keydown", function (event) {
var e = event || window.event;
if (e.keyCode === 27) {
closeModals()
closeModals();
}
})
}())
});
})();

128
public/js/newroom.js
View File

@ -1,16 +1,124 @@
var adjectives = ["small", "big", "large", "smelly", "new", "happy", "shiny", "old", "clean", "nice", "bad", "cool",
"hot", "cold", "warm", "hungry", "slow", "fast", "red", "white", "black", "blue", "green", "basic", "strong",
"cute", "poor", "nice", "huge", "rare", "lucky", "weak", "tall", "short", "tiny", "great", "long", "single", "rich",
"young", "dirty", "fresh", "brown", "dark", "crazy", "sad", "loud", "brave", "calm", "silly", "smart"];
var adjectives = [
"small",
"big",
"large",
"smelly",
"new",
"happy",
"shiny",
"old",
"clean",
"nice",
"bad",
"cool",
"hot",
"cold",
"warm",
"hungry",
"slow",
"fast",
"red",
"white",
"black",
"blue",
"green",
"basic",
"strong",
"cute",
"poor",
"nice",
"huge",
"rare",
"lucky",
"weak",
"tall",
"short",
"tiny",
"great",
"long",
"single",
"rich",
"young",
"dirty",
"fresh",
"brown",
"dark",
"crazy",
"sad",
"loud",
"brave",
"calm",
"silly",
"smart",
];
var nouns = ["dog", "bat", "wrench", "apple", "pear", "ghost", "cat", "wolf", "squid", "goat", "snail", "hat",
"sock", "plum", "bear", "snake", "turtle", "horse", "spoon", "fork", "spider", "tree", "chair", "table",
"couch", "towel", "panda", "bread", "grape", "cake", "brick", "rat", "mouse", "bird", "oven", "phone", "photo",
"frog", "bear", "camel", "sheep", "shark", "tiger", "zebra", "duck", "eagle", "fish", "kitten", "lobster", "monkey",
"owl", "puppy", "pig", "rabbit", "fox", "whale", "beaver", "gorilla", "lizard", "parrot", "sloth", "swan"];
var nouns = [
"dog",
"bat",
"wrench",
"apple",
"pear",
"ghost",
"cat",
"wolf",
"squid",
"goat",
"snail",
"hat",
"sock",
"plum",
"bear",
"snake",
"turtle",
"horse",
"spoon",
"fork",
"spider",
"tree",
"chair",
"table",
"couch",
"towel",
"panda",
"bread",
"grape",
"cake",
"brick",
"rat",
"mouse",
"bird",
"oven",
"phone",
"photo",
"frog",
"bear",
"camel",
"sheep",
"shark",
"tiger",
"zebra",
"duck",
"eagle",
"fish",
"kitten",
"lobster",
"monkey",
"owl",
"puppy",
"pig",
"rabbit",
"fox",
"whale",
"beaver",
"gorilla",
"lizard",
"parrot",
"sloth",
"swan",
];
var adjective = adjectives[Math.floor(Math.random() * adjectives.length)];
var noun = nouns[Math.floor(Math.random() * nouns.length)];
noun = noun.charAt(0).toUpperCase() + noun.substring(1);
adjective = adjective.charAt(0).toUpperCase() + adjective.substring(1);
document.getElementById('input-01').value = adjective + noun;
document.getElementById("input-01").value = adjective + noun;

22
public/js/pricing-switcher.js
View File

@ -1,22 +1,26 @@
;(function () {
'use strict'
const pricingToggle = document.getElementById('pricing-toggle')
(function () {
"use strict";
const pricingToggle = document.getElementById("pricing-toggle");
if (pricingToggle) {
window.addEventListener('load', pricingSwitch)
pricingToggle.addEventListener('change', pricingSwitch)
window.addEventListener("load", pricingSwitch);
pricingToggle.addEventListener("change", pricingSwitch);
}
function pricingSwitch() {
const switchables = document.getElementsByClassName('pricing-switchable')
const switchables = document.getElementsByClassName("pricing-switchable");
if (pricingToggle.checked) {
for (let i = 0; i < switchables.length; i++) {
switchables[i].innerHTML = switchables[i].getAttribute('data-pricing-yearly')
switchables[i].innerHTML = switchables[i].getAttribute(
"data-pricing-yearly"
);
}
} else {
for (let i = 0; i < switchables.length; i++) {
switchables[i].innerHTML = switchables[i].getAttribute('data-pricing-monthly')
switchables[i].innerHTML = switchables[i].getAttribute(
"data-pricing-monthly"
);
}
}
}
}())
})();

78
public/js/scroll-reveal.js
View File

@ -1,62 +1,76 @@
;(function () {
'use strict'
const revealEl = document.querySelectorAll('[class*=reveal-]')
let viewportHeight = window.innerHeight
(function () {
"use strict";
const revealEl = document.querySelectorAll("[class*=reveal-]");
let viewportHeight = window.innerHeight;
function throttle(delay, fn) {
var lastCall = 0
var lastCall = 0;
return function () {
var now = new Date().getTime()
var now = new Date().getTime();
if (now - lastCall < delay) {
return
}
lastCall = now
return fn.apply(void 0, arguments)
return;
}
lastCall = now;
return fn.apply(void 0, arguments);
};
}
function elementIsVisible(el, offset) {
return (el.getBoundingClientRect().top <= viewportHeight - offset)
return el.getBoundingClientRect().top <= viewportHeight - offset;
}
function revealElements() {
for (let i = 0; i < revealEl.length; i++) {
let el = revealEl[i]
let revealDelay = el.getAttribute('data-reveal-delay')
let revealOffset = (el.getAttribute('data-reveal-offset') ? el.getAttribute('data-reveal-offset') : '200')
let listenedEl = (el.getAttribute('data-reveal-container') ? el.closest(el.getAttribute('data-reveal-container')) : el)
if (elementIsVisible(listenedEl, revealOffset) && !el.classList.contains('is-revealed')) {
let el = revealEl[i];
let revealDelay = el.getAttribute("data-reveal-delay");
let revealOffset = el.getAttribute("data-reveal-offset")
? el.getAttribute("data-reveal-offset")
: "200";
let listenedEl = el.getAttribute("data-reveal-container")
? el.closest(el.getAttribute("data-reveal-container"))
: el;
if (
elementIsVisible(listenedEl, revealOffset) &&
!el.classList.contains("is-revealed")
) {
if (revealDelay && revealDelay !== 0) {
setTimeout(function () {
el.classList.add('is-revealed')
}, revealDelay)
el.classList.add("is-revealed");
}, revealDelay);
} else {
el.classList.add('is-revealed')
el.classList.add("is-revealed");
}
}
}
revealDone()
revealDone();
}
function revealScroll() {
throttle(30, revealElements())
throttle(30, revealElements());
}
function revealResize() {
viewportHeight = window.innerHeight
throttle(30, revealElements())
viewportHeight = window.innerHeight;
throttle(30, revealElements());
}
function revealDone() {
if (revealEl.length > document.querySelectorAll('[class*=reveal-].is-revealed').length) return
window.removeEventListener('load', revealElements)
window.removeEventListener('scroll', revealScroll)
window.removeEventListener('resize', revealResize)
if (
revealEl.length >
document.querySelectorAll("[class*=reveal-].is-revealed").length
)
return;
window.removeEventListener("load", revealElements);
window.removeEventListener("scroll", revealScroll);
window.removeEventListener("resize", revealResize);
}
if (revealEl.length > 0 && document.body.classList.contains('has-animations')) {
window.addEventListener('load', revealElements)
window.addEventListener('scroll', revealScroll)
window.addEventListener('resize', revealResize)
if (
revealEl.length > 0 &&
document.body.classList.contains("has-animations")
) {
window.addEventListener("load", revealElements);
window.addEventListener("scroll", revealScroll);
window.addEventListener("resize", revealResize);
}
}())
})();

80
public/js/smooth-scroll.js
View File

@ -1,51 +1,69 @@
;(function () {
'use strict'
const smoothScrollLinks = document.getElementsByClassName('smooth-scroll')
(function () {
"use strict";
const smoothScrollLinks = document.getElementsByClassName("smooth-scroll");
const easeInOutQuad = function (t) {
return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t
}
return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
};
const scrollToEl = (startTime, currentTime, duration, scrollEndElemTop, startScrollOffset) => {
const runtime = currentTime - startTime
let progress = runtime / duration
const scrollToEl = (
startTime,
currentTime,
duration,
scrollEndElemTop,
startScrollOffset
) => {
const runtime = currentTime - startTime;
let progress = runtime / duration;
progress = Math.min(progress, 1)
progress = Math.min(progress, 1);
const ease = easeInOutQuad(progress)
const ease = easeInOutQuad(progress);
window.scroll(0, startScrollOffset + (scrollEndElemTop * ease))
window.scroll(0, startScrollOffset + scrollEndElemTop * ease);
if (runtime < duration) {
window.requestAnimationFrame((timestamp) => {
const currentTime = timestamp || new Date().getTime()
scrollToEl(startTime, currentTime, duration, scrollEndElemTop, startScrollOffset)
})
}
const currentTime = timestamp || new Date().getTime();
scrollToEl(
startTime,
currentTime,
duration,
scrollEndElemTop,
startScrollOffset
);
});
}
};
if (smoothScrollLinks.length > 0) {
for (let i = 0; i < smoothScrollLinks.length; i++) {
const smoothScrollLink = smoothScrollLinks[i]
const smoothScrollLink = smoothScrollLinks[i];
smoothScrollLink.addEventListener('click', function (e) {
e.preventDefault()
const link = e.target.closest('.smooth-scroll')
const targetId = link.href.split('#')[1]
const target = document.getElementById(targetId)
const duration = link.getAttribute('data-duration') || 1000
smoothScrollLink.addEventListener("click", function (e) {
e.preventDefault();
const link = e.target.closest(".smooth-scroll");
const targetId = link.href.split("#")[1];
const target = document.getElementById(targetId);
const duration = link.getAttribute("data-duration") || 1000;
if (!target) return
if (!target) return;
window.requestAnimationFrame((timestamp) => {
const stamp = timestamp || new Date().getTime()
const start = stamp
const stamp = timestamp || new Date().getTime();
const start = stamp;
const startScrollOffset = window.pageYOffset
const scrollEndElemTop = target.getBoundingClientRect().top
const startScrollOffset = window.pageYOffset;
const scrollEndElemTop = target.getBoundingClientRect().top;
scrollToEl(start, stamp, duration, scrollEndElemTop, startScrollOffset)
})
})
scrollToEl(
start,
stamp,
duration,
scrollEndElemTop,
startScrollOffset
);
});
});
}
}
}())
})();

83
public/js/snackbar.js
View File

@ -8,13 +8,13 @@
*/
(function (root, factory) {
'use strict';
"use strict";
if (typeof define === 'function' && define.amd) {
if (typeof define === "function" && define.amd) {
define([], function () {
return (root.Snackbar = factory());
});
} else if (typeof module === 'object' && module.exports) {
} else if (typeof module === "object" && module.exports) {
module.exports = root.Snackbar = factory();
} else {
root.Snackbar = factory();
@ -24,27 +24,27 @@
Snackbar.current = null;
var $defaults = {
text: 'Default Text',
textColor: '#FFFFFF',
width: 'auto',
text: "Default Text",
textColor: "#FFFFFF",
width: "auto",
showAction: true,
actionText: 'Dismiss',
actionTextAria: 'Dismiss, Description for Screen Readers',
actionText: "Dismiss",
actionTextAria: "Dismiss, Description for Screen Readers",
alertScreenReader: false,
actionTextColor: '#4CAF50',
actionTextColor: "#4CAF50",
showSecondButton: false,
secondButtonText: '',
secondButtonAria: 'Description for Screen Readers',
secondButtonTextColor: '#4CAF50',
backgroundColor: '#323232',
pos: 'bottom-left',
secondButtonText: "",
secondButtonAria: "Description for Screen Readers",
secondButtonTextColor: "#4CAF50",
backgroundColor: "#323232",
pos: "bottom-left",
duration: 5000,
customClass: '',
customClass: "",
onActionClick: function (element) {
element.style.opacity = 0;
},
onSecondButtonClick: function (element) {},
onClose: function(element) {}
onClose: function (element) {},
};
Snackbar.show = function ($options) {
@ -63,39 +63,39 @@
);
}
Snackbar.snackbar = document.createElement('div');
Snackbar.snackbar.className = 'snackbar-container ' + options.customClass;
Snackbar.snackbar = document.createElement("div");
Snackbar.snackbar.className = "snackbar-container " + options.customClass;
Snackbar.snackbar.style.width = options.width;
var $p = document.createElement('p');
var $p = document.createElement("p");
$p.style.margin = 0;
$p.style.padding = 0;
$p.style.color = options.textColor;
$p.style.fontSize = '14px';
$p.style.fontSize = "14px";
$p.style.fontWeight = 300;
$p.style.lineHeight = '1em';
$p.style.lineHeight = "1em";
$p.innerHTML = options.text;
Snackbar.snackbar.appendChild($p);
Snackbar.snackbar.style.background = options.backgroundColor;
if (options.showSecondButton) {
var secondButton = document.createElement('button');
secondButton.className = 'action';
var secondButton = document.createElement("button");
secondButton.className = "action";
secondButton.innerHTML = options.secondButtonText;
secondButton.setAttribute('aria-label', options.secondButtonAria);
secondButton.setAttribute("aria-label", options.secondButtonAria);
secondButton.style.color = options.secondButtonTextColor;
secondButton.addEventListener('click', function() {
secondButton.addEventListener("click", function () {
options.onSecondButtonClick(Snackbar.snackbar);
});
Snackbar.snackbar.appendChild(secondButton);
}
if (options.showAction) {
var actionButton = document.createElement('button');
actionButton.className = 'action';
var actionButton = document.createElement("button");
actionButton.className = "action";
actionButton.innerHTML = options.actionText;
actionButton.setAttribute('aria-label', options.actionTextAria);
actionButton.setAttribute("aria-label", options.actionTextAria);
actionButton.style.color = options.actionTextColor;
actionButton.addEventListener('click', function() {
actionButton.addEventListener("click", function () {
options.onActionClick(Snackbar.snackbar);
});
Snackbar.snackbar.appendChild(actionButton);
@ -107,8 +107,8 @@
if (Snackbar.current === this) {
Snackbar.current.style.opacity = 0;
// When natural remove event occurs let's move the snackbar to its origins
Snackbar.current.style.top = '-100px';
Snackbar.current.style.bottom = '-100px';
Snackbar.current.style.top = "-100px";
Snackbar.current.style.bottom = "-100px";
}
}.bind(Snackbar.snackbar),
options.duration
@ -116,15 +116,14 @@
}
if (options.alertScreenReader) {
Snackbar.snackbar.setAttribute('role', 'alert');
Snackbar.snackbar.setAttribute("role", "alert");
}
Snackbar.snackbar.addEventListener(
'transitionend',
"transitionend",
function (event, elapsed) {
if (event.propertyName === 'opacity' && this.style.opacity === '0') {
if (typeof(options.onClose) === 'function')
options.onClose(this);
if (event.propertyName === "opacity" && this.style.opacity === "0") {
if (typeof options.onClose === "function") options.onClose(this);
this.parentElement.removeChild(this);
if (Snackbar.current === this) {
@ -141,7 +140,10 @@
var $top = getComputedStyle(Snackbar.snackbar).top;
Snackbar.snackbar.style.opacity = 1;
Snackbar.snackbar.className =
'snackbar-container ' + options.customClass + ' snackbar-pos ' + options.pos;
"snackbar-container " +
options.customClass +
" snackbar-pos " +
options.pos;
};
Snackbar.close = function () {
@ -158,7 +160,7 @@
var i = 0;
var length = arguments.length;
if (Object.prototype.toString.call(arguments[0]) === '[object Boolean]') {
if (Object.prototype.toString.call(arguments[0]) === "[object Boolean]") {
deep = arguments[0];
i++;
}
@ -166,7 +168,10 @@
var merge = function (obj) {
for (var prop in obj) {
if (Object.prototype.hasOwnProperty.call(obj, prop)) {
if (deep && Object.prototype.toString.call(obj[prop]) === '[object Object]') {
if (
deep &&
Object.prototype.toString.call(obj[prop]) === "[object Object]"
) {
extended[prop] = Extend(true, extended[prop], obj[prop]);
} else {
extended[prop] = obj[prop];

312
public/landing.html
View File

@ -1,20 +1,29 @@
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Neon Chat</title>
<link rel="stylesheet" href="css/landing.css">
<link rel="shortcut icon" href="images/logo.svg">
<meta property="og:title" content="Neonchat - Decentralized video calls">
<meta property="og:description" content="Decentralized video
<link rel="stylesheet" href="css/landing.css" />
<link rel="shortcut icon" href="images/logo.svg" />
<meta property="og:title" content="Neonchat - Decentralized video calls" />
<meta
property="og:description"
content="Decentralized video
calling provides real-time HD quality and latency simply
not available with traditional technology.">
<meta property="og:image" content="https://neonchat.io/images/preview.png">
<meta property="og:url" content="https://neonchat.io/">
not available with traditional technology."
/>
<meta
property="og:image"
content="https://neonchat.io/images/preview.png"
/>
<meta property="og:url" content="https://neonchat.io/" />
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-162048272-1"></script>
<script
async
src="https://www.googletagmanager.com/gtag/js?id=UA-162048272-1"
></script>
<script>
window.dataLayer = window.dataLayer || [];
@ -22,8 +31,8 @@
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'UA-162048272-1');
gtag("js", new Date());
gtag("config", "UA-162048272-1");
</script>
</head>
<body class="has-animations">
@ -32,14 +41,23 @@
<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 class="m-0">
<a href="/"
><img src="images/logo.svg" alt="Neon" 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>
<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>
</div>
</div>
</header>
@ -49,24 +67,46 @@
<div class="hero-inner section-inner">
<div class="split-wrap invert-mobile">
<div class="split-item">
<div class="hero-content split-item-content center-content-mobile"><h1
class="mt-0 mb-16 reveal-from-bottom" data-reveal-delay="150">Neon Chat.<br>The most
advanced
video chat ever created.</h1>
<p class="mt-0 mb-32 reveal-from-bottom" data-reveal-delay="300">Decentralized video
calling provides quality and latency simply
not available with traditional technology.</p>
<div class="reveal-from-bottom" data-reveal-delay="450"><a
<div
class="hero-content split-item-content center-content-mobile"
>
<h1
class="mt-0 mb-16 reveal-from-bottom"
data-reveal-delay="150"
>
Neon Chat.<br />The most advanced video chat ever created.
</h1>
<p
class="mt-0 mb-32 reveal-from-bottom"
data-reveal-delay="300"
>
Decentralized video calling provides quality and latency
simply not available with traditional technology.
</p>
<div class="reveal-from-bottom" data-reveal-delay="450">
<a
class="button button-primary button-wide-mobile pulse"
style="border:0; background: linear-gradient(100deg, #376DF9 0, #FF5FA0 75%, #FFC55A 100%);"
href="/newroom">Try now</a>
style="
border: 0;
background: linear-gradient(
100deg,
#376df9 0,
#ff5fa0 75%,
#ffc55a 100%
);
"
href="/newroom"
>Try now</a
>
</div>
</div>
<style>@media (min-width: 641px) {
<style>
@media (min-width: 641px) {
.hero .split-wrap .split-item {
min-height: 492px
min-height: 492px;
}
}</style>
}
</style>
</div>
</div>
</div>
@ -124,74 +164,126 @@
<div class="container">
<div class="features-tiles-inner section-inner has-top-divider">
<div class="section-header">
<div class="container-xs reveal-from-bottom" data-reveal-delay="650"><h2 class="mt-0 mb-16">See
the whole picture</h2>
<p class="m-0">Neon Chat is built radically different. We ditched slow bulky servers,
opting for decentralized peer to peer calling. Maximum video quality and
lowest latency. Its good, trust us.</p></div>
<div
class="container-xs reveal-from-bottom"
data-reveal-delay="650"
>
<h2 class="mt-0 mb-16">See the whole picture</h2>
<p class="m-0">
Neon Chat is built radically different. We ditched slow
bulky servers, opting for decentralized peer to peer
calling. Maximum video quality and lowest latency. Its good,
trust us.
</p>
</div>
</div>
<div class="tiles-wrap">
<div class="tiles-item reveal-from-right">
<div class="tiles-item-inner">
<div class="features-tiles-item-header">
<div class="features-tiles-item-image mb-16"><img
src="images/feature-tile-icon-01.svg" alt="Feature tile icon 01" width="72"
height="72"></div>
<div class="features-tiles-item-image mb-16">
<img
src="images/feature-tile-icon-01.svg"
alt="Feature tile icon 01"
width="72"
height="72"
/>
</div>
<div class="features-tiles-item-content"><h4 class="mt-0 mb-8">Lowest Latency</h4>
<p class="m-0 text-sm">Breakthrough peer to peer WebRTC technology means your
video goes directly to the other person without a server. No middleman. No
extra stops.</p>
</div>
<div class="features-tiles-item-content">
<h4 class="mt-0 mb-8">Lowest Latency</h4>
<p class="m-0 text-sm">
Breakthrough peer to peer WebRTC technology means your
video goes directly to the other person without a
server. No middleman. No extra stops.
</p>
</div>
</div>
</div>
<div class="tiles-item reveal-from-left">
<div class="tiles-item-inner">
<div class="features-tiles-item-header">
<div class="features-tiles-item-image mb-16"><img
src="images/feature-tile-icon-02.svg" alt="Feature tile icon 02" width="72"
height="72"></div>
<div class="features-tiles-item-image mb-16">
<img
src="images/feature-tile-icon-02.svg"
alt="Feature tile icon 02"
width="72"
height="72"
/>
</div>
</div>
<div class="features-tiles-item-content">
<h4 class="mt-0 mb-8">Best Video Quality</h4>
<p class="m-0 text-sm">
State of the art VP9 video compression combined with our
custom scaling optimization means your calls have never
looked better.
</p>
</div>
<div class="features-tiles-item-content"><h4 class="mt-0 mb-8">Best Video Quality</h4>
<p class="m-0 text-sm">State of the art VP9 video compression combined with our
custom scaling optimization means your calls have never looked better.</p></div>
</div>
</div>
<div class="tiles-item reveal-from-right">
<div class="tiles-item-inner">
<div class="features-tiles-item-header">
<div class="features-tiles-item-image mb-16"><img
src="images/feature-tile-icon-03.svg" alt="Feature tile icon 03" width="72"
height="72"></div>
<div class="features-tiles-item-image mb-16">
<img
src="images/feature-tile-icon-03.svg"
alt="Feature tile icon 03"
width="72"
height="72"
/>
</div>
</div>
<div class="features-tiles-item-content">
<h4 class="mt-0 mb-8">Total Privacy</h4>
<p class="m-0 text-sm">
Each chat room is single use, with data kept between you
and your friend. Your data is yours to keep.
</p>
</div>
<div class="features-tiles-item-content"><h4 class="mt-0 mb-8">Total Privacy</h4>
<p class="m-0 text-sm">Each chat room is single use, with data
kept between you and your friend. Your data is yours to keep.</p></div>
</div>
</div>
<div class="tiles-item reveal-from-left">
<div class="tiles-item-inner">
<div class="features-tiles-item-header">
<div class="features-tiles-item-image mb-16"><img
src="images/feature-tile-icon-04.svg" alt="Feature tile icon 04" width="72"
height="72"></div>
<div class="features-tiles-item-image mb-16">
<img
src="images/feature-tile-icon-04.svg"
alt="Feature tile icon 04"
width="72"
height="72"
/>
</div>
</div>
<div class="features-tiles-item-content">
<h4 class="mt-0 mb-8">No Download Required</h4>
<p class="m-0 text-sm">
No download means you can get back to what matters most.
Just open Neon Chats in Chrome or Firefox.
</p>
</div>
<div class="features-tiles-item-content"><h4 class="mt-0 mb-8">No Download Required</h4>
<p class="m-0 text-sm">No download means you can get back to what matters most. Just
open Neon Chats in Chrome or Firefox.</p></div>
</div>
</div>
<div class="tiles-item reveal-from-right">
<div class="tiles-item-inner">
<div class="features-tiles-item-header">
<div class="features-tiles-item-image mb-16"><img
src="images/feature-tile-icon-05.svg" alt="Feature tile icon 05" width="72"
height="72"></div>
<div class="features-tiles-item-image mb-16">
<img
src="images/feature-tile-icon-05.svg"
alt="Feature tile icon 05"
width="72"
height="72"
/>
</div>
<div class="features-tiles-item-content"><h4 class="mt-0 mb-8">No Server Needed</h4>
<p class="m-0 text-sm">Calls are entirely between you and your friend.
Decentralized from any server. Data never leaves the browser. Cool right?</p>
</div>
<div class="features-tiles-item-content">
<h4 class="mt-0 mb-8">No Server Needed</h4>
<p class="m-0 text-sm">
Calls are entirely between you and your friend.
Decentralized from any server. Data never leaves the
browser. Cool right?
</p>
</div>
</div>
</div>
@ -199,32 +291,51 @@
<div class="tiles-item reveal-from-left">
<div class="tiles-item-inner">
<div class="features-tiles-item-header">
<div class="features-tiles-item-image mb-16"><img
src="images/feature-tile-icon-06.svg" alt="Feature tile icon 06" width="72"
height="72"></div>
</div>
<div class="features-tiles-item-content"><h4 class="mt-0 mb-8">Maximum Security</h4>
<p class="m-0 text-sm">End to end state of the art encryption means your calls are
exactly that. Your calls.</p></div>
<div class="features-tiles-item-image mb-16">
<img
src="images/feature-tile-icon-06.svg"
alt="Feature tile icon 06"
width="72"
height="72"
/>
</div>
</div>
<div class="features-tiles-item-content">
<h4 class="mt-0 mb-8">Maximum Security</h4>
<p class="m-0 text-sm">
End to end state of the art encryption means your calls
are exactly that. Your calls.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="section">
<div class="container">
<div class="section-inner has-top-divider">
<div class="container-xs">
<div class="section-header center-content"><h2 class="m-0">Tired of the old way of
chatting? </h2></div>
<div class="section-header center-content">
<h2 class="m-0">Tired of the old way of chatting?</h2>
</div>
<div class="center-content">
<a class="button button-primary button-wide-mobile pulse"
style="border:0; background: linear-gradient(100deg, #376DF9 0, #FF5FA0 75%, #FFC55A 100%);"
href="/newroom">Try now</a>
<a
class="button button-primary button-wide-mobile pulse"
style="
border: 0;
background: linear-gradient(
100deg,
#376df9 0,
#ff5fa0 75%,
#ffc55a 100%
);
"
href="/newroom"
>Try now</a
>
</div>
</div>
</div>
@ -301,36 +412,53 @@
<!-- </div>-->
<!-- </section>-->
</div>
</main>
<footer class="site-footer center-content-mobile">
<div class="container">
<div class="site-footer-inner">
<div class="footer-top space-between text-xxs">
<div class="brand">
<a href="/"><img src="images/logo.svg" alt="Neon" width="32" height="32"></a>
<a href="/"
><img src="images/logo.svg" alt="Neon" width="32" height="32"
/></a>
</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">
<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"/>
<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>
</a>
</div>
</div>
<div class="footer-bottom space-between text-xxs invert-order-desktop">
</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>
<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>-->
</ul>
</nav>
<div class="footer-copyright">&copy; 2020 Neon Chat, all rights reserved</div>
<div class="footer-copyright">
&copy; 2020 Neon Chat, all rights reserved
</div>
</div>
</div>
</div>

154
public/newroom.html
View File

@ -1,20 +1,29 @@
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Neon Chat</title>
<link rel="stylesheet" href="css/landing.css">
<link rel="shortcut icon" href="images/logo.svg">
<meta property="og:title" content="Neonchat - Decentralized video calls">
<meta property="og:description" content="Decentralized video
<link rel="stylesheet" href="css/landing.css" />
<link rel="shortcut icon" href="images/logo.svg" />
<meta property="og:title" content="Neonchat - Decentralized video calls" />
<meta
property="og:description"
content="Decentralized video
calling provides real-time HD quality and latency simply
not available with traditional technology.">
<meta property="og:image" content="https://neonchat.io/images/preview.png">
<meta property="og:url" content="https://neonchat.io/">
not available with traditional technology."
/>
<meta
property="og:image"
content="https://neonchat.io/images/preview.png"
/>
<meta property="og:url" content="https://neonchat.io/" />
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-162048272-1"></script>
<script
async
src="https://www.googletagmanager.com/gtag/js?id=UA-162048272-1"
></script>
<script>
window.dataLayer = window.dataLayer || [];
@ -22,8 +31,8 @@
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'UA-162048272-1');
gtag("js", new Date());
gtag("config", "UA-162048272-1");
</script>
</head>
<body class="has-animations">
@ -31,35 +40,59 @@
<header class="site-header reveal-from-top">
<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>
<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>
<div class="brand">
<h1 class="m-0">
<a href="/"
><img src="images/logo.svg" alt="Neon" 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>
</div>
</div>
</header>
<main class="site-content">
<section class="hero section illustration-section-01">
<div class="container">
<div class="hero-inner section-inner">
<div class="split-wrap invert-mobile">
<div class="split-item">
<div class="hero-content split-item-content center-content-mobile">
<h1 class="mt-0 mb-16 reveal-from-bottom" data-reveal-delay="150">
Get room. <br> Share URL. <br> Start chatting.</h1>
<p class="mt-0 mb-32 reveal-from-bottom" data-reveal-delay="300">
Each chat has its own disposable URL. Just get a room and share your custom link.
It's really that easy.
<div
class="hero-content split-item-content center-content-mobile"
>
<h1
class="mt-0 mb-16 reveal-from-bottom"
data-reveal-delay="150"
>
Get room. <br />
Share URL. <br />
Start chatting.
</h1>
<p
class="mt-0 mb-32 reveal-from-bottom"
data-reveal-delay="300"
>
Each chat has its own disposable URL. Just get a room and
share your custom link. It's really that easy.
</p>
</div>
<style>@media (min-width: 641px) {
<style>
@media (min-width: 641px) {
.hero .split-wrap .split-item {
min-height: 492px
min-height: 492px;
}
}</style>
}
</style>
</div>
</div>
</div>
@ -69,14 +102,28 @@
<section class="cta section center-content-mobile reveal-from-bottom">
<div class="container">
<div class="cta-inner section-inner cta-split">
<div class="cta-slogan"><h3 class="m-0">Pick a room name.<br> How about this one?</h3></div>
<div class="cta-slogan">
<h3 class="m-0">
Pick a room name.<br />
How about this one?
</h3>
</div>
<div class="cta-action">
<div class="mb-24" style="margin-top: 30px">
<label class="form-label screen-reader" for="input-01">This is a label</label>
<div class="mb-24" style="margin-top: 30px;">
<label class="form-label screen-reader" for="input-01"
>This is a label</label
>
<div class="form-group-desktop">
<input class="form-input" type="text" id="input-01" value="PurpleSquid">
<button class="button button-primary pulse"
onclick="{window.location.href = '/room/' + document.getElementById('input-01').value}">
<input
class="form-input"
type="text"
id="input-01"
value="PurpleSquid"
/>
<button
class="button button-primary pulse"
onclick="{window.location.href = '/room/' + document.getElementById('input-01').value}"
>
Go To My Room
</button>
</div>
@ -85,34 +132,49 @@
</div>
</div>
</section>
</main>
<footer class="site-footer center-content-mobile">
<div class="container">
<div class="site-footer-inner">
<div class="footer-top space-between text-xxs">
<div class="brand">
<a href="/"><img src="images/logo.svg" alt="Neon" width="32" height="32"></a>
<a href="/"
><img src="images/logo.svg" alt="Neon" width="32" height="32"
/></a>
</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">
<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"/>
<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>
</a>
</div>
</div>
</div>
<div class="footer-bottom space-between text-xxs invert-order-desktop">
</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>
<li>
<a href="https://ianramzy.com">Made with ❤️ by Ian Ramzy</a>
</li>
</ul>
</nav>
<div class="footer-copyright">&copy; 2020 Neon Chat, all rights reserved</div>
<div class="footer-copyright">
&copy; 2020 Neon Chat, all rights reserved
</div>
</div>
</div>

97
server.js
View File

@ -1,114 +1,111 @@
require('dotenv').config();
var sslRedirect = require('heroku-ssl-redirect');
var twilio = require('twilio')(process.env.TWILIO_ACCOUNT_SID, process.env.TWILIO_AUTH_TOKEN);
var express = require('express');
require("dotenv").config();
var sslRedirect = require("heroku-ssl-redirect");
var twilio = require("twilio")(
process.env.TWILIO_ACCOUNT_SID,
process.env.TWILIO_AUTH_TOKEN
);
var express = require("express");
var app = express();
var http = require('http').createServer(app);
var io = require('socket.io')(http);
var path = require('path');
var public = path.join(__dirname, 'public');
var http = require("http").createServer(app);
var io = require("socket.io")(http);
var path = require("path");
var public = path.join(__dirname, "public");
// enable ssl redirect
app.use(sslRedirect());
app.get('/', function (req, res) {
res.sendFile(path.join(public, 'landing.html'));
app.get("/", function (req, res) {
res.sendFile(path.join(public, "landing.html"));
});
app.get('/newroom', function (req, res) {
res.sendFile(path.join(public, 'newroom.html'));
app.get("/newroom", function (req, res) {
res.sendFile(path.join(public, "newroom.html"));
});
app.get('/room/*', function (req, res) {
res.sendFile(path.join(public, 'chat.html'));
app.get("/room/*", function (req, res) {
res.sendFile(path.join(public, "chat.html"));
});
app.use(express.static('public'));
app.use(express.static("public"));
function logIt(msg, room) {
console.log(room + ": " + msg)
console.log(room + ": " + msg);
}
// When a socket connects, set up the specific listeners we will use.
io.on('connection', function (socket) {
io.on("connection", function (socket) {
// When a client tries to join a room, only allow them if they are first or
// second in the room. Otherwise it is full.
socket.on('join', function (room) {
logIt('A client joined the room', room);
socket.on("join", function (room) {
logIt("A client joined the room", room);
var clients = io.sockets.adapter.rooms[room];
var numClients = typeof clients !== 'undefined' ? clients.length : 0;
var numClients = typeof clients !== "undefined" ? clients.length : 0;
if (numClients === 0) {
socket.join(room);
} else if (numClients === 1) {
socket.join(room);
// When the client is second to join the room, both clients are ready.
logIt('Broadcasting ready message', room);
socket.broadcast.to(room).emit('willInitiateCall', room);
socket.emit('ready', room).to(room);
socket.broadcast.to(room).emit('ready', room);
logIt("Broadcasting ready message", room);
socket.broadcast.to(room).emit("willInitiateCall", room);
socket.emit("ready", room).to(room);
socket.broadcast.to(room).emit("ready", room);
} else {
logIt("room already full", room);
socket.emit('full', room);
socket.emit("full", room);
}
});
// When receiving the token message, use the Twilio REST API to request an
// token to get ephemeral credentials to use the TURN server.
socket.on('token', function (room) {
logIt('Received token request', room);
socket.on("token", function (room) {
logIt("Received token request", room);
twilio.tokens.create(function (err, response) {
if (err) {
logIt(err, room);
} else {
logIt('Token generated. Returning it to the browser client', room);
socket.emit('token', response).to(room);
logIt("Token generated. Returning it to the browser client", room);
socket.emit("token", response).to(room);
}
});
});
// Relay candidate messages
socket.on('candidate', function (candidate, room) {
logIt('Received candidate. Broadcasting...', room);
socket.broadcast.to(room).emit('candidate', candidate);
socket.on("candidate", function (candidate, room) {
logIt("Received candidate. Broadcasting...", room);
socket.broadcast.to(room).emit("candidate", candidate);
});
// Relay offers
socket.on('offer', function (offer, room) {
logIt('Received offer. Broadcasting...', room);
socket.broadcast.to(room).emit('offer', offer);
socket.on("offer", function (offer, room) {
logIt("Received offer. Broadcasting...", room);
socket.broadcast.to(room).emit("offer", offer);
});
// Relay answers
socket.on('answer', function (answer, room) {
logIt('Received answer. Broadcasting...', room);
socket.broadcast.to(room).emit('answer', answer);
socket.on("answer", function (answer, room) {
logIt("Received answer. Broadcasting...", room);
socket.broadcast.to(room).emit("answer", answer);
});
// Relay answers
socket.on('sendCaptions', function (captions, room) {
socket.on("sendCaptions", function (captions, room) {
// logIt(captions, room);
socket.broadcast.to(room).emit('recieveCaptions', captions);
socket.broadcast.to(room).emit("recieveCaptions", captions);
});
// Relay answers
socket.on('requestToggleCaptions', function (room) {
socket.on("requestToggleCaptions", function (room) {
logIt("requesting captions", room);
socket.broadcast.to(room).emit('requestToggleCaptions');
socket.broadcast.to(room).emit("requestToggleCaptions");
});
// Relay chat messages
socket.on('chat message', function(msg, room){
socket.broadcast.to(room).emit('chat message', msg);
socket.on("chat message", function (msg, room) {
socket.broadcast.to(room).emit("chat message", msg);
});
});
var port = process.env.PORT || 3000;
http.listen(port, function () {
console.log("http://localhost:" + port);
});