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);