diff --git a/src/res/sounds/raise-hand.ogg b/src/res/sounds/raise-hand.ogg new file mode 100644 index 00000000..d1b350d5 Binary files /dev/null and b/src/res/sounds/raise-hand.ogg differ diff --git a/src/room/InCallView.tsx b/src/room/InCallView.tsx index 08454006..8cd2b47a 100644 --- a/src/room/InCallView.tsx +++ b/src/room/InCallView.tsx @@ -87,6 +87,7 @@ import { makeSpotlightLandscapeLayout } from "../grid/SpotlightLandscapeLayout"; import { makeSpotlightPortraitLayout } from "../grid/SpotlightPortraitLayout"; import { useMatrixRTCSessionMemberships } from "../useMatrixRTCSessionMemberships"; import { useReactions } from "../useReactions"; +import handSound from "../res/sounds/raise-hand.ogg?url"; const canScreenshare = "getDisplayMedia" in (navigator.mediaDevices ?? {}); @@ -314,6 +315,8 @@ export const InCallView: FC = ({ const [reactionId, setReactionId] = useState(null); const userId = client.getUserId()!; + const handRaisePlayer = useRef(null); + const isHandRaised = !!raisedHands[userId]; useEffect(() => { @@ -369,6 +372,9 @@ export const InCallView: FC = ({ const content = event.getContent() as ReactionEventContent; if (content?.["m.relates_to"].key === "🖐️") { addRaisedHand(sender, new Date(event.localTimestamp)); + handRaisePlayer.current?.play().catch((ex) => { + logger.warn("Failed to play hand raise sound", ex); + }); } } if (event.getType() === EventType.RoomRedaction && event.getSender()) { @@ -737,6 +743,7 @@ export const InCallView: FC = ({ ))} {renderContent()} +