Will HuntandGitHub
abf2ecd521
* Add support for using CallViewModel for reactions sounds. * Drop setting * Convert reaction sounds to call view model / rxjs * Use call view model for hand raised reactions * Support raising reactions for matrix rtc members. * Tie up last bits of useReactions * linting * Update calleventaudiorenderer * Update reaction audio renderer * more test bits * All the test bits and pieces * More refactors * Refactor reactions into a sender and receiver. * Fixup reaction toggle button * Adapt reactions test * Tests all pass. * lint * fix a couple of bugs * remove unused helper file * lint * finnish notation * Add tests for useReactionsReader * remove mistaken vitest file * fix * filter * invert * fixup tests with fake timers * Port useReactionsReader hook to ReactionsReader class. * lint * exclude some files from coverage * Add screen share sound effect. * cancel sub on destroy * tidy tidy
35 lines
1.0 KiB
TypeScript
35 lines
1.0 KiB
TypeScript
/*
|
|
Copyright 2024 New Vector Ltd.
|
|
|
|
SPDX-License-Identifier: AGPL-3.0-only
|
|
Please see LICENSE in the repository root for full details.
|
|
*/
|
|
|
|
import { type ReactNode } from "react";
|
|
import { useObservableState } from "observable-hooks";
|
|
|
|
import styles from "./ReactionsOverlay.module.css";
|
|
import { type CallViewModel } from "../state/CallViewModel";
|
|
|
|
export function ReactionsOverlay({ vm }: { vm: CallViewModel }): ReactNode {
|
|
const reactionsIcons = useObservableState(vm.visibleReactions$);
|
|
return (
|
|
<div className={styles.container}>
|
|
{reactionsIcons?.map(({ sender, emoji, startX }) => (
|
|
<span
|
|
// Reactions effects are considered presentation elements. The reaction
|
|
// is also present on the sender's tile, which assistive technology can
|
|
// read from instead.
|
|
role="presentation"
|
|
style={{ left: `${startX}vw` }}
|
|
className={styles.reaction}
|
|
// A sender can only send one emoji at a time.
|
|
key={sender}
|
|
>
|
|
{emoji}
|
|
</span>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|