From 5f373571af97ff4fbcbd0930ecba66121e6f6a38 Mon Sep 17 00:00:00 2001
From: Marks Polakovs <github@markspolakovs.me>
Date: Fri, 24 Apr 2020 17:30:36 +0200
Subject: [PATCH] Add an animation to the register/cancel button

Hopefully this will stop people mashing the button and DoS'ing shittyserver
---
 package.json                  |  1 +
 src/broadcast/rtc_streamer.ts |  6 ++++++
 src/navbar/index.tsx          | 26 ++++++++++++++++++++++----
 src/navbar/navbar.scss        |  7 +++++++
 yarn.lock                     |  5 +++++
 5 files changed, 41 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 10141b5..9bbd843 100644
--- a/package.json
+++ b/package.json
@@ -95,6 +95,7 @@
     "strict-event-emitter-types": "^2.0.0",
     "style-loader": "1.0.0",
     "terser-webpack-plugin": "1.4.1",
+    "three-dots": "^0.2.0",
     "ts-pnp": "1.1.4",
     "typescript": "3.7.2",
     "url-loader": "2.1.0",
diff --git a/src/broadcast/rtc_streamer.ts b/src/broadcast/rtc_streamer.ts
index 2029169..c9ff002 100644
--- a/src/broadcast/rtc_streamer.ts
+++ b/src/broadcast/rtc_streamer.ts
@@ -110,6 +110,7 @@ export class WebRTCStreamer extends Streamer {
     const data = JSON.parse(evt.data);
     switch (data.kind) {
       case "HELLO":
+        this.onStateChange("CONNECTING");
         console.log("WS HELLO, our client ID is " + data.connectionId);
         this.dispatch(BroadcastState.setWsID(data.connectionId));
         if (this.state !== "HELLO") {
@@ -258,6 +259,11 @@ export class WebRTCStreamer extends Streamer {
         return "NOT_CONNECTED";
       }
     }
+    console.log(
+      "Relevant values: ",
+      this.pc?.iceConnectionState,
+      this.ws?.readyState
+    );
     switch (this.pc.iceConnectionState) {
       case "connected":
       case "completed":
diff --git a/src/navbar/index.tsx b/src/navbar/index.tsx
index feb8c5b..d7e4ca9 100644
--- a/src/navbar/index.tsx
+++ b/src/navbar/index.tsx
@@ -1,4 +1,4 @@
-import React, { useRef, useEffect } from "react";
+import React, { useRef, useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import Clock from "react-live-clock";
 
@@ -40,6 +40,17 @@ export function NavBar() {
   const broadcastState = useSelector((state: RootState) => state.broadcast);
   const settings = useSelector((state: RootState) => state.settings);
   const redirect_url = encodeURIComponent(window.location.toString());
+
+  const [connectButtonAnimating, setConnectButtonAnimating] = useState(false);
+
+  const prevRegistrationStage = useRef(broadcastState.stage);
+  useEffect(() => {
+    if (broadcastState.stage !== prevRegistrationStage.current) {
+      setConnectButtonAnimating(false);
+    }
+    prevRegistrationStage.current = broadcastState.stage;
+  }, [broadcastState.stage]);
+
   return (
     <>
       <div className="navbar-nav navbar-left">
@@ -77,8 +88,9 @@ export function NavBar() {
           </div>
         </li>
         <li
-          className="btn btn-outline-light rounded-0 pt-2 pb-1 nav-item nav-link"
+          className="btn btn-outline-light rounded-0 pt-2 pb-1 nav-item nav-link connect"
           onClick={() => {
+            setConnectButtonAnimating(true);
             switch (broadcastState.stage) {
               case "NOT_REGISTERED":
                 dispatch(BroadcastState.goOnAir());
@@ -89,8 +101,14 @@ export function NavBar() {
             }
           }}
         >
-          {broadcastState.stage === "NOT_REGISTERED" && "Register for show"}
-          {broadcastState.stage === "REGISTERED" && "Cancel registration"}
+          {connectButtonAnimating ? (
+            <span className="dot-pulse" />
+          ) : (
+            <>
+              {broadcastState.stage === "NOT_REGISTERED" && "Register for show"}
+              {broadcastState.stage === "REGISTERED" && "Cancel registration"}
+            </>
+          )}
         </li>
         {settings.enableRecording && (
           <li className="nav-item nav-link">
diff --git a/src/navbar/navbar.scss b/src/navbar/navbar.scss
index b21e6cd..95d16df 100644
--- a/src/navbar/navbar.scss
+++ b/src/navbar/navbar.scss
@@ -1,6 +1,9 @@
 /* Stuff to get the nav to collapse at 991px (when the menu collapses)
  * Taken from http://stackoverflow.com/a/36289507/995325 */
 
+$dot-color: #fff;
+@import "~three-dots/sass/three-dots";
+
 @media (max-width: 991px) {
   .navbar-header {
     float: none;
@@ -251,3 +254,7 @@
   font-weight: bold;
   font-size: 1.1em;
 }
+
+.nav-link.connect {
+  min-width: 80px;
+}
diff --git a/yarn.lock b/yarn.lock
index 0317f9b..545bcc4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10427,6 +10427,11 @@ text-table@0.2.0, text-table@^0.2.0:
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
   integrity sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=
 
+three-dots@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/three-dots/-/three-dots-0.2.0.tgz#a854461cfdcaae829587a72d7693b0a774da05cb"
+  integrity sha512-UIbDvl8F1qjoBigeEjcl2h101Frx+CaWCJSr7xabRh6BjFUkkJU1GW2jzmt0IQP7yVAOKW9q5bMj7Tafz0pP1g==
+
 throat@^4.0.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/throat/-/throat-4.1.0.tgz#89037cbc92c56ab18926e6ba4cbb200e15672a6a"