From cb41489a7e9c37e0c37b7d70b686a20d1187fe6b Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Mon, 16 Dec 2024 09:53:34 +0300
Subject: [PATCH] Show current room in a center's button

---
 src/features/ecency-center/center-button.tsx  | 16 ++++-
 .../ecency-live/ecency-live-wave-icon.scss    | 43 +++++++++++++
 .../ecency-live/ecency-live-wave-icon.tsx     | 62 +++++++++++++++++++
 3 files changed, 120 insertions(+), 1 deletion(-)
 create mode 100644 src/features/ecency-live/ecency-live-wave-icon.scss
 create mode 100644 src/features/ecency-live/ecency-live-wave-icon.tsx

diff --git a/src/features/ecency-center/center-button.tsx b/src/features/ecency-center/center-button.tsx
index 8aa3d3c7e..f0a9697e1 100644
--- a/src/features/ecency-center/center-button.tsx
+++ b/src/features/ecency-center/center-button.tsx
@@ -1,11 +1,16 @@
 import { motion } from "framer-motion";
 import Image from "next/image";
+import { useEcencyLive } from "@/features/ecency-live";
+import { UilMicrophoneSlash } from "@tooni/iconscout-unicons-react";
+import { EcencyLiveWaveIcon } from "@/features/ecency-live/ecency-live-wave-icon";
 
 interface Props {
   onClick?: () => void;
 }
 
 export function CenterButton(props: Props) {
+  const { room, activeUserState } = useEcencyLive();
+
   return (
     <motion.div
       {...props}
@@ -32,7 +37,16 @@ export function CenterButton(props: Props) {
           className="w-[3rem] h-[3rem] duration-300"
         />
       </motion.div>
-      <div className="pl-2 pr-4 font-semibold text-sm text-blue-dark-sky">Center</div>
+      <div className="flex flex-col">
+        <div className="pl-2 pr-4 font-semibold text-sm text-blue-dark-sky">Center</div>
+        {room && (
+          <div className="pl-2 pr-3 gap-1 flex items-center text-xs text-gray-600 dark:text-gray-400">
+            <EcencyLiveWaveIcon />
+            {room.name}
+            {activeUserState?.micMuted && <UilMicrophoneSlash className="w-3 h-3" />}
+          </div>
+        )}
+      </div>
     </motion.div>
   );
 }
diff --git a/src/features/ecency-live/ecency-live-wave-icon.scss b/src/features/ecency-live/ecency-live-wave-icon.scss
new file mode 100644
index 000000000..fc71e4ee3
--- /dev/null
+++ b/src/features/ecency-live/ecency-live-wave-icon.scss
@@ -0,0 +1,43 @@
+html, body {
+  height: 100%;
+}
+
+body {
+  background: #101010;
+}
+
+.loader {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+#wave {
+  height: 20px;
+  width: 20px;
+}
+
+@for $i from 1 through 9 {
+  #Line_#{$i} {
+    animation: pulseWave 1s infinite;
+    animation-delay: $i * .15s;
+  }
+}
+
+@keyframes pulseWave {
+  0% {
+    transform: scaleY(1);
+    transform-origin: 50% 50%;
+  }
+
+  50% {
+    transform: scaleY(.7);
+    transform-origin: 50% 50%;
+  }
+
+  100% {
+    transform: scaleY(1);
+    transform-origin: 50% 50%;
+  }
+}
\ No newline at end of file
diff --git a/src/features/ecency-live/ecency-live-wave-icon.tsx b/src/features/ecency-live/ecency-live-wave-icon.tsx
new file mode 100644
index 000000000..6c6871b88
--- /dev/null
+++ b/src/features/ecency-live/ecency-live-wave-icon.tsx
@@ -0,0 +1,62 @@
+import "./ecency-live-wave-icon.scss";
+
+export function EcencyLiveWaveIcon() {
+  return (
+    <div className="loader">
+      <svg
+        id="wave"
+        fill="currentColor"
+        data-name="Layer 1"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 50 38.05"
+      >
+        <title>Audio Wave</title>
+        <path
+          id="Line_1"
+          data-name="Line 1"
+          d="M0.91,15L0.78,15A1,1,0,0,0,0,16v6a1,1,0,1,0,2,0s0,0,0,0V16a1,1,0,0,0-1-1H0.91Z"
+        />
+        <path
+          id="Line_2"
+          data-name="Line 2"
+          d="M6.91,9L6.78,9A1,1,0,0,0,6,10V28a1,1,0,1,0,2,0s0,0,0,0V10A1,1,0,0,0,7,9H6.91Z"
+        />
+        <path
+          id="Line_3"
+          data-name="Line 3"
+          d="M12.91,0L12.78,0A1,1,0,0,0,12,1V37a1,1,0,1,0,2,0s0,0,0,0V1a1,1,0,0,0-1-1H12.91Z"
+        />
+        <path
+          id="Line_4"
+          data-name="Line 4"
+          d="M18.91,10l-0.12,0A1,1,0,0,0,18,11V27a1,1,0,1,0,2,0s0,0,0,0V11a1,1,0,0,0-1-1H18.91Z"
+        />
+        <path
+          id="Line_5"
+          data-name="Line 5"
+          d="M24.91,15l-0.12,0A1,1,0,0,0,24,16v6a1,1,0,0,0,2,0s0,0,0,0V16a1,1,0,0,0-1-1H24.91Z"
+        />
+        <path
+          id="Line_6"
+          data-name="Line 6"
+          d="M30.91,10l-0.12,0A1,1,0,0,0,30,11V27a1,1,0,1,0,2,0s0,0,0,0V11a1,1,0,0,0-1-1H30.91Z"
+        />
+        <path
+          id="Line_7"
+          data-name="Line 7"
+          d="M36.91,0L36.78,0A1,1,0,0,0,36,1V37a1,1,0,1,0,2,0s0,0,0,0V1a1,1,0,0,0-1-1H36.91Z"
+        />
+        <path
+          id="Line_8"
+          data-name="Line 8"
+          d="M42.91,9L42.78,9A1,1,0,0,0,42,10V28a1,1,0,1,0,2,0s0,0,0,0V10a1,1,0,0,0-1-1H42.91Z"
+        />
+        <path
+          id="Line_9"
+          data-name="Line 9"
+          d="M48.91,15l-0.12,0A1,1,0,0,0,48,16v6a1,1,0,1,0,2,0s0,0,0,0V16a1,1,0,0,0-1-1H48.91Z"
+        />
+      </svg>
+    </div>
+  );
+}