From b56cbe7ae214c231bfecdefb4c0c197661463eaf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?H=C3=A5var=20Aamb=C3=B8=20Fosstveit?= <havar@fosstveit.net>
Date: Wed, 31 Oct 2018 11:28:02 +0100
Subject: [PATCH] Added pulse animation to new peer joining

---
 app/lib/components/HiddenPeers.jsx         | 42 +++++++++-----
 app/stylus/components/HiddenPeersView.styl | 64 ++++++++++++++++------
 2 files changed, 73 insertions(+), 33 deletions(-)

diff --git a/app/lib/components/HiddenPeers.jsx b/app/lib/components/HiddenPeers.jsx
index 1c9bed1..cb1542a 100644
--- a/app/lib/components/HiddenPeers.jsx
+++ b/app/lib/components/HiddenPeers.jsx
@@ -1,27 +1,38 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
+import classnames from 'classnames';
 import * as stateActions from '../redux/stateActions';
 
 class HiddenPeers extends Component
 {
-	state = {
-		controlsVisible : false
-	};
-
-	handleMouseOver = () =>
+	constructor(props)
 	{
-		this.setState({
-			controlsVisible : true
-		});
-	};
+		super(props);
+		this.state = { className: '' };
+	}
 
-	handleMouseOut = () =>
+	componentDidUpdate(prevProps)
 	{
-		this.setState({
-			controlsVisible : false
-		});
-	};
+		const { hiddenPeersCount } = this.props;
+
+		if (hiddenPeersCount !== prevProps.hiddenPeersCount)
+		{
+			// eslint-disable-next-line react/no-did-update-set-state
+			this.setState({ className: 'pulse' }, () =>
+			{
+				if (this.timeout)
+				{
+					clearTimeout(this.timeout);
+				}
+
+				this.timeout = setTimeout(() =>
+				{
+					this.setState({ className: '' });
+				}, 1000);
+			});
+		}
+	}
 
 	render()
 	{
@@ -33,11 +44,12 @@ class HiddenPeers extends Component
 		return (
 			<div
 				data-component='HiddenPeers'
+				className={this.state.className}
 				onMouseOver={this.handleMouseOver}
 				onMouseOut={this.handleMouseOut}
 			>
 				<div data-component='HiddenPeersView'>
-					<div className='view-container' onClick={() => openUsersTab()}>
+					<div className={classnames('view-container', this.state.className)} onClick={() => openUsersTab()}>
 						<p>+{hiddenPeersCount} <br /> participant
 							{(hiddenPeersCount === 1) ? null : 's'}
 						</p>
diff --git a/app/stylus/components/HiddenPeersView.styl b/app/stylus/components/HiddenPeersView.styl
index a591b07..45adaa7 100644
--- a/app/stylus/components/HiddenPeersView.styl
+++ b/app/stylus/components/HiddenPeersView.styl
@@ -4,6 +4,7 @@
 	display: flex;
 	flex-direction: column;
 	overflow: hidden;
+
 	> .info {
 		$backgroundTint = #000;
 		position: absolute;
@@ -16,13 +17,15 @@
 		flex-direction: column;
 		justify-content: space-between;
 	}
+
 	> .view-container {
 		width: 12vmin;
-    height: 9vmin;
-    position: absolute;
-    bottom: 3%;
-    right: 3%;
+		height: 9vmin;
+		position: absolute;
+		bottom: 3%;
+		right: 3%;
 		color: #aaa;
+		cursor: pointer;
 		background-image: url('/resources/images/buddy.svg');
 		background-color: rgba(#2a4b58, 1);
 		background-position: bottom;
@@ -32,34 +35,59 @@
 		vertical-align: middle;
 		line-height: 1.8vmin;
 		font-size: 1.7vmin;
+		font-weight: bolder;
+		animation: none;
+
+		&.pulse {
+			animation: pulse 1s;
+		}
 	}
+
 	.view-container>p{
 		transform: translate(0%,50%);
 	}
+
 	.view-container,
 	.view-container::before,
 	.view-container::after {
-	  /* Add shadow to distinguish sheets from one another */
-	  box-shadow: 2px 1px 1px rgba(0,0,0,0.15);
+		/* Add shadow to distinguish sheets from one another */
+		box-shadow: 2px 1px 1px rgba(0,0,0,0.15);
 	}
+
 	.view-container::before,
-  .view-container::after {
-	  content: "";
-	  position: absolute;
-	  width: 100%;
-	  height: 100%;
-	  background-color: #2a4b58;
+	.view-container::after {
+		content: "";
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		background-color: #2a4b58;
 	}
+
 	/* Second sheet of paper */
 	.view-container::before {
-	  left: .7vmin;
-	  top: .7vmin;
-	  z-index: -1;
+		left: .7vmin;
+		top: .7vmin;
+		z-index: -1;
 	}
+
 	/* Third sheet of paper */
 	.view-container::after {
-	  left: 1.4vmin;
-	  top: 1.4vmin;
-	  z-index: -2;
+		left: 1.4vmin;
+		top: 1.4vmin;
+		z-index: -2;
+	}
+}
+
+@keyframes pulse {
+	0% {
+		box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.9);
+	}
+
+	70% {
+		box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
+	}
+
+	100% {
+		box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
 	}
 }