From dfe95697207a3cc63da1af171e7c78ad4fdecdc1 Mon Sep 17 00:00:00 2001
From: Half-Shot <will@half-shot.uk>
Date: Fri, 1 Nov 2024 15:27:20 +0000
Subject: [PATCH] Tidy up + add support for floating emoji.

---
 src/button/RaisedHandToggleButton.module.css  |  1 -
 src/button/RaisedHandToggleButton.tsx         | 32 ++++++-------------
 src/reactions/RaisedHandIndicator.tsx         |  2 --
 ...odule.css => ReactionIndicator.module.css} |  0
 src/reactions/ReactionIndicator.tsx           |  2 +-
 src/reactions/index.ts                        | 11 ++++++-
 src/room/InCallView.module.css                | 24 ++++++++++++++
 src/room/InCallView.tsx                       | 19 +++++++++++
 8 files changed, 64 insertions(+), 27 deletions(-)
 rename src/reactions/{RaisedHandIndicator.module.css => ReactionIndicator.module.css} (100%)

diff --git a/src/button/RaisedHandToggleButton.module.css b/src/button/RaisedHandToggleButton.module.css
index 1dd2766c..d6920cc0 100644
--- a/src/button/RaisedHandToggleButton.module.css
+++ b/src/button/RaisedHandToggleButton.module.css
@@ -1,7 +1,6 @@
 .reactionPopupMenu {
   padding: 1em;
   position: absolute;
-  z-index: 99;
   background: var(--cpd-color-bg-canvas-default);
   top: -8em;
   border-radius: var(--cpd-space-4x);
diff --git a/src/button/RaisedHandToggleButton.tsx b/src/button/RaisedHandToggleButton.tsx
index f81aeaf4..00b5d223 100644
--- a/src/button/RaisedHandToggleButton.tsx
+++ b/src/button/RaisedHandToggleButton.tsx
@@ -12,6 +12,7 @@ import {
   Search,
   Form,
 } from "@vector-im/compound-web";
+import { ReactionIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 import {
   ChangeEventHandler,
   ComponentPropsWithoutRef,
@@ -46,23 +47,11 @@ const InnerButton: FC<InnerButtonProps> = ({ raised, ...props }) => {
   return (
     <Tooltip label={t("action.send_reaction")}>
       <CpdButton
+        iconOnly
         kind={raised ? "primary" : "secondary"}
         {...props}
-        style={{ paddingLeft: 8, paddingRight: 8 }}
-      >
-        <p
-          role="img"
-          aria-hidden
-          style={{
-            width: "30px",
-            height: "0px",
-            display: "inline-block",
-            fontSize: "22px",
-          }}
-        >
-          ✋
-        </p>
-      </CpdButton>
+        Icon={ReactionIcon}
+      />
     </Tooltip>
   );
 };
@@ -101,14 +90,14 @@ export function ReactionPopupMenu({
           <CpdButton
             kind={isHandRaised ? "primary" : "secondary"}
             className={styles.reactionButton}
-            key={"raise-hand"}
+            key="raise-hand"
             onClick={() => toggleRaisedHand()}
           >
             🖐️
           </CpdButton>
         </Tooltip>
       </section>
-      <div className={styles.verticalSeperator}></div>
+      <div className={styles.verticalSeperator} />
       <section>
         <Form.Root onSubmit={(e) => e.preventDefault()}>
           <Search
@@ -168,8 +157,7 @@ export function RaiseHandToggleButton({
       const parentEventId = myMembership.eventId;
       try {
         setBusy(true);
-        // XXX: Trying to send a unspec'd event seems to miss the 3rd overload, need to come back to this.
-        // @ts-expect-error
+        // @ts-expect-error Trying to send a unspec'd event seems to miss the 3rd overload, need to come back to this.
         await client.sendEvent(
           rtcSession.room.roomId,
           null,
@@ -190,7 +178,7 @@ export function RaiseHandToggleButton({
         setBusy(false);
       }
     },
-    [memberships, client],
+    [memberships, client, userId, rtcSession],
   );
 
   const toggleRaisedHand = useCallback(() => {
@@ -253,13 +241,13 @@ export function RaiseHandToggleButton({
       <InnerButton
         disabled={busy}
         onClick={() => setShowReactionsMenu((show) => !show)}
-        raised={isHandRaised}
+        raised={isHandRaised || showReactionsMenu}
       />
       {showReactionsMenu && (
         <ReactionPopupMenu
           isHandRaised={isHandRaised}
           canReact={canReact}
-          sendRelation={sendRelation}
+          sendRelation={(reaction) => void sendRelation(reaction)}
           toggleRaisedHand={toggleRaisedHand}
         />
       )}
diff --git a/src/reactions/RaisedHandIndicator.tsx b/src/reactions/RaisedHandIndicator.tsx
index 072db00d..0cc1e2c7 100644
--- a/src/reactions/RaisedHandIndicator.tsx
+++ b/src/reactions/RaisedHandIndicator.tsx
@@ -6,11 +6,9 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { ReactNode, useEffect, useState } from "react";
-import classNames from "classnames";
 import "@formatjs/intl-durationformat/polyfill";
 import { DurationFormat } from "@formatjs/intl-durationformat";
 
-import styles from "./RaisedHandIndicator.module.css";
 import { ReactionIndicator } from "./ReactionIndicator";
 
 const durationFormatter = new DurationFormat(undefined, {
diff --git a/src/reactions/RaisedHandIndicator.module.css b/src/reactions/ReactionIndicator.module.css
similarity index 100%
rename from src/reactions/RaisedHandIndicator.module.css
rename to src/reactions/ReactionIndicator.module.css
diff --git a/src/reactions/ReactionIndicator.tsx b/src/reactions/ReactionIndicator.tsx
index 5b3c9cfb..677d3b30 100644
--- a/src/reactions/ReactionIndicator.tsx
+++ b/src/reactions/ReactionIndicator.tsx
@@ -9,7 +9,7 @@ import { PropsWithChildren, ReactNode } from "react";
 import classNames from "classnames";
 import "@formatjs/intl-durationformat/polyfill";
 
-import styles from "./RaisedHandIndicator.module.css";
+import styles from "./ReactionIndicator.module.css";
 
 export function ReactionIndicator({
   emoji,
diff --git a/src/reactions/index.ts b/src/reactions/index.ts
index f9f3cfee..a9f2fde3 100644
--- a/src/reactions/index.ts
+++ b/src/reactions/index.ts
@@ -1,3 +1,12 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only
+Please see LICENSE in the repository root for full details.
+*/
+
+import { RelationType } from "matrix-js-sdk/src/types";
+
 import catSoundOgg from "../sound/reactions/cat.mp3?url";
 import catSoundMp3 from "../sound/reactions/cat.mp3?url";
 import cricketsSoundOgg from "../sound/reactions/crickets.mp3?url";
@@ -8,7 +17,7 @@ import genericSoundOgg from "../sound/reactions/generic.mp3?url";
 import genericSoundMp3 from "../sound/reactions/generic.mp3?url";
 import lightbulbSoundOgg from "../sound/reactions/lightbulb.mp3?url";
 import lightbulbSoundMp3 from "../sound/reactions/lightbulb.mp3?url";
-import { RelationType } from "matrix-js-sdk/src/types";
+
 
 export interface ReactionOption {
   emoji: string;
diff --git a/src/room/InCallView.module.css b/src/room/InCallView.module.css
index 14e58be7..e6a67547 100644
--- a/src/room/InCallView.module.css
+++ b/src/room/InCallView.module.css
@@ -144,3 +144,27 @@ Please see LICENSE in the repository root for full details.
   position: relative;
   flex-grow: 1;
 }
+
+.floatingReaction {
+  position: relative;
+  z-index: 2;
+  font-size: 32pt;
+  animation-duration: 5s;
+  animation-name: reaction-up;
+  bottom: 0;
+  width: fit-content;
+}
+
+@keyframes reaction-up {
+  from {
+    opacity: 1;
+    translate: 100vw 0;
+    scale: 200%;
+  }
+
+  to {
+    opacity: 0;
+    translate: 100vw -100vh;
+    scale: 100%;
+  }
+}
diff --git a/src/room/InCallView.tsx b/src/room/InCallView.tsx
index 2c3cc383..f93bbfca 100644
--- a/src/room/InCallView.tsx
+++ b/src/room/InCallView.tsx
@@ -188,6 +188,16 @@ export const InCallView: FC<InCallViewProps> = ({
     [reactions],
   );
 
+  const reactionsIcons = useMemo(
+    () =>
+      Object.entries(reactions).map(([sender, { emoji }]) => ({
+        sender,
+        emoji,
+        startX: -Math.ceil(Math.random() * 50) - 25,
+      })),
+    [reactions],
+  );
+
   useWakeLock();
 
   useEffect(() => {
@@ -651,6 +661,15 @@ export const InCallView: FC<InCallViewProps> = ({
             </audio>
           ),
       )}
+      {reactionsIcons.map(({ sender, emoji, startX }) => (
+        <span
+          style={{ left: `${startX}vw` }}
+          className={styles.floatingReaction}
+          key={sender}
+        >
+          {emoji}
+        </span>
+      ))}
       {footer}
       {!noControls && <RageshakeRequestModal {...rageshakeRequestModalProps} />}
       <SettingsModal