lint

src/room/InCallView.module.css

@@ -94,8 +94,6 @@ Please see LICENSE in the repository root for full details.
   justify-self: end;
 }
 
-
-
 @media (max-width: 370px) {
   .raiseHand {
     display: none;
@@ -167,4 +165,4 @@ Please see LICENSE in the repository root for full details.
 .tile.maximised {
   position: relative;
   flex-grow: 1;
-}
+}

src/room/InCallView.tsx

@@ -85,10 +85,7 @@ import handSoundOgg from "../sound/raise_hand.ogg?url";
 import handSoundMp3 from "../sound/raise_hand.mp3?url";
 import { ReactionsAudioRenderer } from "./ReactionAudioRenderer";
 import { useSwitchCamera } from "./useSwitchCamera";
-import {
-  soundEffectVolumeSetting,
-  useSetting,
-} from "../settings/settings";
+import { soundEffectVolumeSetting, useSetting } from "../settings/settings";
 import { ReactionsOverlay } from "./ReactionsOverlay";
 
 const canScreenshare = "getDisplayMedia" in (navigator.mediaDevices ?? {});

src/room/ReactionsOverlay.test.tsx

@@ -9,17 +9,15 @@ import { render } from "@testing-library/react";
 import { expect, test } from "vitest";
 import { TooltipProvider } from "@vector-im/compound-web";
 import { act, ReactNode } from "react";
+import { afterEach } from "node:test";
 
 import {
   MockRoom,
   MockRTCSession,
   TestReactionsWrapper,
 } from "../utils/testReactions";
-import {
-  showReactions,
-} from "../settings/settings";
+import { showReactions } from "../settings/settings";
 import { ReactionsOverlay } from "./ReactionsOverlay";
-import { afterEach } from "node:test";
 import { ReactionSet } from "../reactions";
 
 const memberUserIdAlice = "@alice:example.org";
@@ -49,7 +47,6 @@ function TestComponent({
   );
 }
 
-
 afterEach(() => {
   showReactions.setValue(showReactions.defaultValue);
 });
@@ -61,51 +58,51 @@ test("defaults to showing no reactions", () => {
     membership,
   );
   const { container } = render(<TestComponent rtcSession={rtcSession} />);
-  expect(container.getElementsByTagName("span")).toHaveLength(
-    0
-  );
+  expect(container.getElementsByTagName("span")).toHaveLength(0);
 });
 
 test("shows a reaction when sent", () => {
   showReactions.setValue(true);
   const reaction = ReactionSet[0];
   const room = new MockRoom(memberUserIdAlice);
-  const rtcSession = new MockRTCSession(
-    room,
-    membership,
-  );
+  const rtcSession = new MockRTCSession(room, membership);
   const { getByRole } = render(<TestComponent rtcSession={rtcSession} />);
-  act(() => room.testSendReaction(memberEventAlice, reaction, membership));
-  const span = getByRole('presentation');
-  expect(getByRole('presentation')).toBeTruthy();
+  act(() => {
+    room.testSendReaction(memberEventAlice, reaction, membership);
+  });
+  const span = getByRole("presentation");
+  expect(getByRole("presentation")).toBeTruthy();
   expect(span.innerHTML).toEqual(reaction.emoji);
 });
 
 test("shows two of the same reaction when sent", () => {
   showReactions.setValue(true);
+  const reaction = ReactionSet[0];
   const room = new MockRoom(memberUserIdAlice);
-  const rtcSession = new MockRTCSession(
-    room,
-    membership,
-  );
+  const rtcSession = new MockRTCSession(room, membership);
   const { getAllByRole } = render(<TestComponent rtcSession={rtcSession} />);
-  act(() => room.testSendReaction(memberEventAlice, ReactionSet[0], membership));
-  act(() => room.testSendReaction(memberEventBob, ReactionSet[0], membership));
-  expect(getAllByRole('presentation')).toHaveLength(2);
+  act(() => {
+    room.testSendReaction(memberEventAlice, reaction, membership);
+  });
+  act(() => {
+    room.testSendReaction(memberEventBob, reaction, membership);
+  });
+  expect(getAllByRole("presentation")).toHaveLength(2);
 });
 
 test("shows two different reactions when sent", () => {
   showReactions.setValue(true);
   const room = new MockRoom(memberUserIdAlice);
-  const rtcSession = new MockRTCSession(
-    room,
-    membership,
-  );
+  const rtcSession = new MockRTCSession(room, membership);
   const [reactionA, reactionB] = ReactionSet;
   const { getAllByRole } = render(<TestComponent rtcSession={rtcSession} />);
-  act(() => room.testSendReaction(memberEventAlice, reactionA, membership));
-  act(() => room.testSendReaction(memberEventBob, reactionB, membership));
-  const [reactionElementA, reactionElementB] = getAllByRole('presentation');
+  act(() => {
+    room.testSendReaction(memberEventAlice, reactionA, membership);
+  });
+  act(() => {
+    room.testSendReaction(memberEventBob, reactionB, membership);
+  });
+  const [reactionElementA, reactionElementB] = getAllByRole("presentation");
   expect(reactionElementA.innerHTML).toEqual(reactionA.emoji);
   expect(reactionElementB.innerHTML).toEqual(reactionB.emoji);
 });
@@ -114,13 +111,10 @@ test("hides reactions when reaction animations are disabled", () => {
   showReactions.setValue(false);
   const reaction = ReactionSet[0];
   const room = new MockRoom(memberUserIdAlice);
-  const rtcSession = new MockRTCSession(
-    room,
-    membership,
-  );
-  act(() => room.testSendReaction(memberEventAlice, reaction, membership));
+  const rtcSession = new MockRTCSession(room, membership);
+  act(() => {
+    room.testSendReaction(memberEventAlice, reaction, membership);
+  });
   const { container } = render(<TestComponent rtcSession={rtcSession} />);
-  expect(container.getElementsByTagName("span")).toHaveLength(
-    0
-  );
-});
+  expect(container.getElementsByTagName("span")).toHaveLength(0);
+});

src/useReactions.tsx

@@ -62,7 +62,7 @@ interface RaisedHandInfo {
   time: Date;
 }
 
-const REACTION_ACTIVE_TIME_MS = 3000;
+const REACTION_ACTIVE_TIME_MS = 90000;
 
 export const useReactions = (): ReactionsContextType => {
   const context = useContext(ReactionsContext);