Support for generic reactions (#2708)
* Initial support for Hand Raise feature Signed-off-by: Milton Moura <miltonmoura@gmail.com> * Refactored to use reaction and redaction events Signed-off-by: Milton Moura <miltonmoura@gmail.com> * Replacing button svg with raised hand emoji Signed-off-by: Milton Moura <miltonmoura@gmail.com> * SpotlightTile should not duplicate the raised hand Signed-off-by: Milton Moura <miltonmoura@gmail.com> * Update src/room/useRaisedHands.tsx Element Call recently changed to AGPL-3.0 * Use relations to load existing reactions when joining the call Signed-off-by: Milton Moura <miltonmoura@gmail.com> * Links to sha commit of matrix-js-sdk that exposes the call membership event id and refactors some async code Signed-off-by: Milton Moura <miltonmoura@gmail.com> * Removing RaiseHand.svg * Check for reaction & redaction capabilities in widget mode Signed-off-by: Milton Moura <miltonmoura@gmail.com> * Fix failing GridTile test Signed-off-by: Milton Moura <miltonmoura@gmail.com> * Center align hand raise. * Add support for displaying the duration of a raised hand. * Add a sound for when a hand is raised. * Refactor raised hand indicator and add tests. * lint * Refactor into own files. * Redact the right thing. * Tidy up useEffect * Lint tests * Remove extra layer * Add better sound. (woosh) * Add a small mode for spotlight * Fix timestamp calculation on relaod. * Fix call border resizing video * lint * Fix and update tests * Allow timer to be configurable. * Add preferences tab for choosing to enable timer. * Drop border from raised hand icon * Handle cases when a new member event happens. * Prevent infinite loop * Major refactor to support various state problems. * Tidy up and finish test rewrites * Add some explanation comments. * Even more comments. * Use proper duration formatter * Remove rerender * Fix redactions not working because they pick up events in transit. * More tidying * Use deferred value * linting * Add tests for cases where we got a reaction from someone else. * Be even less brittle. * Transpose border to GridTile. * First PoC for reactions * hide menu by default * Add lightbulb. * Add reaction indicator. * Add sounds. * Tidy up + add support for floating emoji. * Linting and general stability improvements. * Subscribe to the ecall reaction event type. * fix import * Center emoji picker * Overflow buttons when screen is too narrow * lint * Add settings for disabling animations / sounds. * Make vertical divider more visually distinct. * Make event listener more resillient. * lint * Fix some tests. * Remove old raised hand component * Add new icon * Update text * Update compound hand raised icon. * Add deer. * Fix case where you could send larger strings as emoji * Const the active time. * Document time in css. * Add rock emoji * Add licence file. * Add type def for custom reaction type. * better reaction description * Factor out reactions test structure to utils file. * Add tests for ReactionToggleButton * Add keyboard shortcuts for reaction sending. * type tidyups * lint * Add tests for ReactionAudioRenderer * lint * prettier * i18n sort * final lint? * Preload reaction sounds to prevent delays. * Update rock sounds * add onclick back * Fix test * lint * simplify * Tweak line height * modal impl * Modal refactor attempts. * Remove closed menu test since we're using Modal. * Swap icon, make mobile view better. * Fix mobile view for emoji picker. * Use Intl.Segmenter * Clear timeouts on component close. * Remove useless useCallback * Use prefers-reduced-motion * Add toggle for raise hand. * Add lower hand text * Add lower motion mode. * Decomplicate className system for Modal * Add error for failured to send reaction. * i18n * Spacing for emoji buttons search * Remove unrequired media query * Fix generic sound not playing. * Clear reactions if we're clearing timeouts. * Fix tests * Relabel lower hand * More translations * Add comments on reaction interface * Move polyfill. * lint * Replace deer sound * Another attempt to fix the sizing of the reactions * cleanup * fix button * fix --------- Signed-off-by: Milton Moura <miltonmoura@gmail.com> Co-authored-by: Milton Moura <miltonmoura@gmail.com> Co-authored-by: fkwp <fkwp@users.noreply.github.com>
This commit is contained in:
Will Hunt
@@ -48,6 +48,7 @@ import { useLatest } from "../useLatest";
|
||||
import { GridTileViewModel } from "../state/TileViewModel";
|
||||
import { useMergedRefs } from "../useMergedRefs";
|
||||
import { useReactions } from "../useReactions";
|
||||
import { ReactionOption } from "../reactions";
|
||||
|
||||
interface TileProps {
|
||||
className?: string;
|
||||
@@ -93,7 +94,7 @@ const UserMediaTile = forwardRef<HTMLDivElement, UserMediaTileProps>(
|
||||
},
|
||||
[vm],
|
||||
);
|
||||
const { raisedHands, lowerHand } = useReactions();
|
||||
const { raisedHands, lowerHand, reactions } = useReactions();
|
||||
|
||||
const MicIcon = audioEnabled ? MicOnSolidIcon : MicOffSolidIcon;
|
||||
|
||||
@@ -112,6 +113,8 @@ const UserMediaTile = forwardRef<HTMLDivElement, UserMediaTileProps>(
|
||||
);
|
||||
|
||||
const handRaised: Date | undefined = raisedHands[vm.member?.userId ?? ""];
|
||||
const currentReaction: ReactionOption | undefined =
|
||||
reactions[vm.member?.userId ?? ""];
|
||||
const raisedHandOnClick =
|
||||
vm.local && handRaised ? (): void => void lowerHand() : undefined;
|
||||
|
||||
@@ -157,6 +160,7 @@ const UserMediaTile = forwardRef<HTMLDivElement, UserMediaTileProps>(
|
||||
</Menu>
|
||||
}
|
||||
raisedHandTime={handRaised}
|
||||
currentReaction={currentReaction}
|
||||
raisedHandOnClick={raisedHandOnClick}
|
||||
{...props}
|
||||
/>
|
||||
|
||||
@@ -20,6 +20,8 @@ import { Avatar } from "../Avatar";
|
||||
import { EncryptionStatus } from "../state/MediaViewModel";
|
||||
import { RaisedHandIndicator } from "../reactions/RaisedHandIndicator";
|
||||
import { showHandRaisedTimer, useSetting } from "../settings/settings";
|
||||
import { ReactionOption } from "../reactions";
|
||||
import { ReactionIndicator } from "../reactions/ReactionIndicator";
|
||||
|
||||
interface Props extends ComponentProps<typeof animated.div> {
|
||||
className?: string;
|
||||
@@ -37,6 +39,7 @@ interface Props extends ComponentProps<typeof animated.div> {
|
||||
displayName: string;
|
||||
primaryButton?: ReactNode;
|
||||
raisedHandTime?: Date;
|
||||
currentReaction?: ReactionOption;
|
||||
raisedHandOnClick?: () => void;
|
||||
}
|
||||
|
||||
@@ -58,6 +61,7 @@ export const MediaView = forwardRef<HTMLDivElement, Props>(
|
||||
primaryButton,
|
||||
encryptionStatus,
|
||||
raisedHandTime,
|
||||
currentReaction,
|
||||
raisedHandOnClick,
|
||||
...props
|
||||
},
|
||||
@@ -98,6 +102,20 @@ export const MediaView = forwardRef<HTMLDivElement, Props>(
|
||||
)}
|
||||
</div>
|
||||
<div className={styles.fg}>
|
||||
<div style={{ display: "flex" }}>
|
||||
<RaisedHandIndicator
|
||||
raisedHandTime={raisedHandTime}
|
||||
miniature={avatarSize < 96}
|
||||
showTimer={handRaiseTimerVisible}
|
||||
onClick={raisedHandOnClick}
|
||||
/>
|
||||
{currentReaction && (
|
||||
<ReactionIndicator
|
||||
miniature={avatarSize < 96}
|
||||
emoji={currentReaction.emoji}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
{/* TODO: Bring this back once encryption status is less broken */}
|
||||
{/*encryptionStatus !== EncryptionStatus.Okay && (
|
||||
<div className={styles.status}>
|
||||
@@ -113,12 +131,6 @@ export const MediaView = forwardRef<HTMLDivElement, Props>(
|
||||
</Text>
|
||||
</div>
|
||||
)*/}
|
||||
<RaisedHandIndicator
|
||||
raisedHandTime={raisedHandTime}
|
||||
miniature={avatarSize < 96}
|
||||
showTimer={handRaiseTimerVisible}
|
||||
onClick={raisedHandOnClick}
|
||||
/>
|
||||
<div className={styles.nameTag}>
|
||||
{nameTagLeadingIcon}
|
||||
<Text as="span" size="sm" weight="medium" className={styles.name}>
|
||||
|
||||
Reference in New Issue
Block a user