From 92f10af3ad0d309690136efad9e25aae6030f4f5 Mon Sep 17 00:00:00 2001 From: ian ramzy Date: Wed, 25 Mar 2020 17:57:54 -0400 Subject: [PATCH] add copy url snackbar --- public/chat.css | 102 ++++++++++++++++++-- public/chat.html | 3 +- public/chat.js | 23 ++++- public/landing/newroom.html | 2 +- public/snackbar.js | 187 ++++++++++++++++++++++++++++++++++++ 5 files changed, 308 insertions(+), 9 deletions(-) create mode 100755 public/snackbar.js diff --git a/public/chat.css b/public/chat.css index 95ad035..6944874 100644 --- a/public/chat.css +++ b/public/chat.css @@ -43,12 +43,6 @@ video { } -.video-overlay { - z-index: 1; - -} - - .buttons { width: 700px; margin-left: -350px; @@ -81,4 +75,100 @@ video { .round-button:hover { 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 + } } \ No newline at end of file diff --git a/public/chat.html b/public/chat.html index 31a71b1..f3c95bb 100644 --- a/public/chat.html +++ b/public/chat.html @@ -6,6 +6,7 @@ + @@ -23,10 +24,10 @@ Fullscreen Mute Pause - Share Screen + diff --git a/public/chat.js b/public/chat.js index baa3bc5..08c3196 100644 --- a/public/chat.js +++ b/public/chat.js @@ -239,6 +239,7 @@ var VideoChat = { console.log("onAddStream"); logIt('<<< Received new stream from remote. Adding it...'); VideoChat.remoteVideo.srcObject = event.stream; + Snackbar.close(); } }; @@ -285,7 +286,7 @@ function pauseVideo() { } - +//Show and hide buttons automatically var timedelay = 1; function delayCheck() { @@ -303,3 +304,23 @@ $(document).mousemove(function () { _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; + $('').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 + } +}); \ No newline at end of file diff --git a/public/landing/newroom.html b/public/landing/newroom.html index a7e115c..cb27560 100755 --- a/public/landing/newroom.html +++ b/public/landing/newroom.html @@ -68,7 +68,7 @@

- Get chat room.
Share URL.
Start chatting.

+ Get room.
Share URL.
Start chatting.

Each chat has its own disposable URL, just get a room and share your custom link. It's really that easy. diff --git a/public/snackbar.js b/public/snackbar.js new file mode 100755 index 0000000..053f573 --- /dev/null +++ b/public/snackbar.js @@ -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; +});