diff --git a/src/room/InCallView.module.css b/src/room/InCallView.module.css
index 08022979..d23aa8e4 100644
--- a/src/room/InCallView.module.css
+++ b/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;
-}
\ No newline at end of file
+}
diff --git a/src/room/InCallView.tsx b/src/room/InCallView.tsx
index f5520530..18afa95e 100644
--- a/src/room/InCallView.tsx
+++ b/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 ?? {});
diff --git a/src/room/ReactionsOverlay.test.tsx b/src/room/ReactionsOverlay.test.tsx
index 86027d83..121594ab 100644
--- a/src/room/ReactionsOverlay.test.tsx
+++ b/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();
- 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();
- 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();
- 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();
- 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();
- expect(container.getElementsByTagName("span")).toHaveLength(
- 0
- );
-});
\ No newline at end of file
+ expect(container.getElementsByTagName("span")).toHaveLength(0);
+});
diff --git a/src/useReactions.tsx b/src/useReactions.tsx
index c8d3c3b5..4a09ffbc 100644
--- a/src/useReactions.tsx
+++ b/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);