MigrateRepos/decentralized-video-chat
1
0
Fork 0
mirror of https://github.com/ianramzy/decentralized-video-chat.git synced 2025-02-22 16:05:03 +08:00
Code Issues Releases Wiki Activity

add copy url snackbar

Browse Source
This commit is contained in:
ian ramzy 2020-03-25 17:57:54 -04:00
parent 90cd3741e4
commit 92f10af3ad
5 changed files with 308 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
public/chat.css
View File

@ -43,12 +43,6 @@ video {
} }
.video-overlay {
z-index: 1;
}
.buttons { .buttons {
width: 700px; width: 700px;
margin-left: -350px; margin-left: -350px;
@ -82,3 +76,99 @@ video {
.round-button:hover { .round-button:hover {
background: #3d3f47; background: #3d3f47;
} }
.snackbar-container {
transition: all .5s ease;
transition-property: top, right, bottom, left, opacity;
font-family: "Heebo", sans-serif;
font-size: 14px;
min-height: 14px;
position: fixed;
display: flex;
justify-content: space-between;
align-items: center;
color: #fff;
line-height: 22px;
padding: 18px 24px;
bottom: -100px;
top: -100px;
opacity: 0;
z-index: 9999
}
.snackbar-container .action {
background: inherit;
display: inline-block;
border: none;
font-size: inherit;
text-transform: uppercase;
color: #4caf50;
margin: 0 0 0 24px;
padding: 0;
min-width: min-content;
cursor: pointer
}
@media (min-width: 640px) {
.snackbar-container {
min-width: 288px;
max-width: 568px;
display: inline-flex;
border-radius: 2px;
margin: 24px
}
}
@media (max-width: 640px) {
.snackbar-container {
left: 0;
right: 0;
width: 100%
}
}
.snackbar-pos.bottom-center {
top: auto !important;
bottom: 0;
left: 50%;
transform: translate(-50%, 0)
}
.snackbar-pos.bottom-left {
top: auto !important;
bottom: 0;
left: 0
}
.snackbar-pos.bottom-right {
top: auto !important;
bottom: 0;
right: 0
}
.snackbar-pos.top-left {
bottom: auto !important;
top: 0;
left: 0
}
.snackbar-pos.top-center {
bottom: auto !important;
top: 0;
left: 50%;
transform: translate(-50%, 0)
}
.snackbar-pos.top-right {
bottom: auto !important;
top: 0;
right: 0
}
@media (max-width: 640px) {
.snackbar-pos.bottom-center, .snackbar-pos.top-center {
left: 0;
transform: none
}
}

3
public/chat.html
View File

@ -6,6 +6,7 @@
<link rel="shortcut icon" href="landing/images/logo.svg"> <link rel="shortcut icon" href="landing/images/logo.svg">
<link rel="stylesheet" href="chat.css"> <link rel="stylesheet" href="chat.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="snackbar.js"></script>
</head> </head>
<body> <body>
@ -23,10 +24,10 @@
<a class="round-button" onclick="{openFullscreen()}">Fullscreen</a> <a class="round-button" onclick="{openFullscreen()}">Fullscreen</a>
<a class="round-button" onclick="{muteMicrophone()}" id="muteButton">Mute </a> <a class="round-button" onclick="{muteMicrophone()}" id="muteButton">Mute </a>
<a class="round-button" onclick="{pauseVideo()}" id="videoPauseButton">Pause </a> <a class="round-button" onclick="{pauseVideo()}" id="videoPauseButton">Pause </a>
<a class="round-button" onclick="{alert('hangup')}">Share Screen </a>
</div> </div>
</div> </div>
<script src="/socket.io/socket.io.js"></script> <script src="/socket.io/socket.io.js"></script>
<script src="/chat.js"></script> <script src="/chat.js"></script>
</body> </body>

23
public/chat.js
View File

@ -239,6 +239,7 @@ var VideoChat = {
console.log("onAddStream"); console.log("onAddStream");
logIt('<<< Received new stream from remote. Adding it...'); logIt('<<< Received new stream from remote. Adding it...');
VideoChat.remoteVideo.srcObject = event.stream; VideoChat.remoteVideo.srcObject = event.stream;
Snackbar.close();
} }
}; };
@ -285,7 +286,7 @@ function pauseVideo() {
} }
//Show and hide buttons automatically
var timedelay = 1; var timedelay = 1;
function delayCheck() { function delayCheck() {
@ -303,3 +304,23 @@ $(document).mousemove(function () {
_delay = setInterval(delayCheck, 500); _delay = setInterval(delayCheck, 500);
}); });
_delay = setInterval(delayCheck, 500); _delay = setInterval(delayCheck, 500);
// Show share URL
Snackbar.show({
text: 'Share this URL with a friend to get started',
actionText: 'Copy URL',
width: '355px',
pos: 'top-left',
actionTextColor: '#8688ff',
duration: 50000,
backgroundColor :'#292B32',
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');
toRemove.parentNode.removeChild(toRemove);
$(element).css('opacity', 0); //Set opacity of element to 0 to close Snackbar
}
});

2
public/landing/newroom.html
View File

@ -68,7 +68,7 @@
<div class="split-item"> <div class="split-item">
<div class="hero-content split-item-content center-content-mobile"> <div class="hero-content split-item-content center-content-mobile">
<h1 class="mt-0 mb-16 reveal-from-bottom" data-reveal-delay="150"> <h1 class="mt-0 mb-16 reveal-from-bottom" data-reveal-delay="150">
Get chat room. <br> Share URL. <br> Start chatting.</h1> Get room. <br> Share URL. <br> Start chatting.</h1>
<p class="mt-0 mb-32 reveal-from-bottom" data-reveal-delay="300"> <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. Each chat has its own disposable URL, just get a room and share your custom link.
It's really that easy. It's really that easy.

187
public/snackbar.js Executable file
View File

@ -0,0 +1,187 @@
/*!
* Snackbar v0.1.14
* http://polonel.com/Snackbar
*
* Copyright 2018 Chris Brame and other contributors
* Released under the MIT license
* https://github.com/polonel/Snackbar/blob/master/LICENSE
*/
(function(root, factory) {
'use strict';
if (typeof define === 'function' && define.amd) {
define([], function() {
return (root.Snackbar = factory());
});
} else if (typeof module === 'object' && module.exports) {
module.exports = root.Snackbar = factory();
} else {
root.Snackbar = factory();
}
})(this, function() {
var Snackbar = {};
Snackbar.current = null;
var $defaults = {
text: 'Default Text',
textColor: '#FFFFFF',
width: 'auto',
showAction: true,
actionText: 'Dismiss',
actionTextAria: 'Dismiss, Description for Screen Readers',
alertScreenReader: false,
actionTextColor: '#4CAF50',
showSecondButton: false,
secondButtonText: '',
secondButtonAria: 'Description for Screen Readers',
secondButtonTextColor: '#4CAF50',
backgroundColor: '#323232',
pos: 'bottom-left',
duration: 5000,
customClass: '',
onActionClick: function(element) {
element.style.opacity = 0;
},
onSecondButtonClick: function(element) {},
onClose: function(element) {}
};
Snackbar.show = function($options) {
var options = Extend(true, $defaults, $options);
if (Snackbar.current) {
Snackbar.current.style.opacity = 0;
setTimeout(
function() {
var $parent = this.parentElement;
if ($parent)
// possible null if too many/fast Snackbars
$parent.removeChild(this);
}.bind(Snackbar.current),
500
);
}
Snackbar.snackbar = document.createElement('div');
Snackbar.snackbar.className = 'snackbar-container ' + options.customClass;
Snackbar.snackbar.style.width = options.width;
var $p = document.createElement('p');
$p.style.margin = 0;
$p.style.padding = 0;
$p.style.color = options.textColor;
$p.style.fontSize = '14px';
$p.style.fontWeight = 300;
$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';
secondButton.innerHTML = options.secondButtonText;
secondButton.setAttribute('aria-label', options.secondButtonAria);
secondButton.style.color = options.secondButtonTextColor;
secondButton.addEventListener('click', function() {
options.onSecondButtonClick(Snackbar.snackbar);
});
Snackbar.snackbar.appendChild(secondButton);
}
if (options.showAction) {
var actionButton = document.createElement('button');
actionButton.className = 'action';
actionButton.innerHTML = options.actionText;
actionButton.setAttribute('aria-label', options.actionTextAria);
actionButton.style.color = options.actionTextColor;
actionButton.addEventListener('click', function() {
options.onActionClick(Snackbar.snackbar);
});
Snackbar.snackbar.appendChild(actionButton);
}
if (options.duration) {
setTimeout(
function() {
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';
}
}.bind(Snackbar.snackbar),
options.duration
);
}
if (options.alertScreenReader) {
Snackbar.snackbar.setAttribute('role', 'alert');
}
Snackbar.snackbar.addEventListener(
'transitionend',
function(event, elapsed) {
if (event.propertyName === 'opacity' && this.style.opacity === '0') {
if (typeof(options.onClose) === 'function')
options.onClose(this);
this.parentElement.removeChild(this);
if (Snackbar.current === this) {
Snackbar.current = null;
}
}
}.bind(Snackbar.snackbar)
);
Snackbar.current = Snackbar.snackbar;
document.body.appendChild(Snackbar.snackbar);
var $bottom = getComputedStyle(Snackbar.snackbar).bottom;
var $top = getComputedStyle(Snackbar.snackbar).top;
Snackbar.snackbar.style.opacity = 1;
Snackbar.snackbar.className =
'snackbar-container ' + options.customClass + ' snackbar-pos ' + options.pos;
};
Snackbar.close = function() {
if (Snackbar.current) {
Snackbar.current.style.opacity = 0;
}
};
// Pure JS Extend
// http://gomakethings.com/vanilla-javascript-version-of-jquery-extend/
var Extend = function() {
var extended = {};
var deep = false;
var i = 0;
var length = arguments.length;
if (Object.prototype.toString.call(arguments[0]) === '[object Boolean]') {
deep = arguments[0];
i++;
}
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]') {
extended[prop] = Extend(true, extended[prop], obj[prop]);
} else {
extended[prop] = obj[prop];
}
}
}
};
for (; i < length; i++) {
var obj = arguments[i];
merge(obj);
}
return extended;
};
return Snackbar;
});