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
@@ -12,11 +12,10 @@ import {
|
||||
useEffect,
|
||||
useState,
|
||||
} from "react";
|
||||
import classNames from "classnames";
|
||||
import "@formatjs/intl-durationformat/polyfill";
|
||||
import { DurationFormat } from "@formatjs/intl-durationformat";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
import styles from "./RaisedHandIndicator.module.css";
|
||||
import { ReactionIndicator } from "./ReactionIndicator";
|
||||
|
||||
const durationFormatter = new DurationFormat(undefined, {
|
||||
minutesDisplay: "always",
|
||||
@@ -36,6 +35,7 @@ export function RaisedHandIndicator({
|
||||
showTimer?: boolean;
|
||||
onClick?: () => void;
|
||||
}): ReactNode {
|
||||
const { t } = useTranslation();
|
||||
const [raisedHandDuration, setRaisedHandDuration] = useState("");
|
||||
|
||||
const clickCallback = useCallback<MouseEventHandler<HTMLButtonElement>>(
|
||||
@@ -76,29 +76,19 @@ export function RaisedHandIndicator({
|
||||
}
|
||||
|
||||
const content = (
|
||||
<div
|
||||
className={classNames(styles.raisedHandWidget, {
|
||||
[styles.raisedHandWidgetLarge]: !miniature,
|
||||
})}
|
||||
>
|
||||
<div
|
||||
className={classNames(styles.raisedHand, {
|
||||
[styles.raisedHandLarge]: !miniature,
|
||||
})}
|
||||
>
|
||||
<span role="img" aria-label="raised hand">
|
||||
✋
|
||||
</span>
|
||||
</div>
|
||||
<ReactionIndicator emoji="✋" miniature={miniature}>
|
||||
{showTimer && <p>{raisedHandDuration}</p>}
|
||||
</div>
|
||||
</ReactionIndicator>
|
||||
);
|
||||
|
||||
if (onClick) {
|
||||
return (
|
||||
<button
|
||||
aria-label="lower raised hand"
|
||||
className={styles.button}
|
||||
aria-label={t("action.lower_hand")}
|
||||
style={{
|
||||
display: "contents",
|
||||
background: "none",
|
||||
}}
|
||||
onClick={clickCallback}
|
||||
>
|
||||
{content}
|
||||
|
||||
@@ -1,33 +1,28 @@
|
||||
.raisedHandWidget {
|
||||
.reactionIndicatorWidget {
|
||||
display: flex;
|
||||
background-color: var(--cpd-color-bg-subtle-primary);
|
||||
border-radius: var(--cpd-radius-pill-effect);
|
||||
color: var(--cpd-color-icon-secondary);
|
||||
}
|
||||
|
||||
.button {
|
||||
display: contents;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.raisedHandWidget > p {
|
||||
.reactionIndicatorWidget > p {
|
||||
padding: none;
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
width: 4em;
|
||||
}
|
||||
|
||||
.raisedHandWidgetLarge > p {
|
||||
.reactionIndicatorWidgetLarge > p {
|
||||
padding: var(--cpd-space-2x);
|
||||
}
|
||||
|
||||
.raisedHandLarge {
|
||||
.reactionLarge {
|
||||
margin: var(--cpd-space-2x);
|
||||
padding: var(--cpd-space-2x);
|
||||
padding-block: var(--cpd-space-2x);
|
||||
padding: var(--cpd-space-4x);
|
||||
padding-block: var(--cpd-space-4x);
|
||||
}
|
||||
|
||||
.raisedHand {
|
||||
.reaction {
|
||||
margin: var(--cpd-space-1x);
|
||||
color: var(--cpd-color-icon-secondary);
|
||||
background-color: var(--cpd-color-icon-secondary);
|
||||
@@ -40,18 +35,22 @@
|
||||
box-sizing: border-box;
|
||||
max-inline-size: 100%;
|
||||
max-width: fit-content;
|
||||
padding: var(--cpd-space-1x);
|
||||
padding-block: var(--cpd-space-1x);
|
||||
}
|
||||
|
||||
.raisedHand > span {
|
||||
.reaction > span {
|
||||
width: var(--cpd-space-6x);
|
||||
height: var(--cpd-space-6x);
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
font-size: 1.3em;
|
||||
font-size: 1.2em;
|
||||
/* Centralise */
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.raisedHandLarge > span {
|
||||
width: var(--cpd-space-8x);
|
||||
height: var(--cpd-space-8x);
|
||||
font-size: 1.9em;
|
||||
.reactionLarge > span {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
font-size: 25px;
|
||||
}
|
||||
41
src/reactions/ReactionIndicator.tsx
Normal file
41
src/reactions/ReactionIndicator.tsx
Normal file
@@ -0,0 +1,41 @@
|
||||
/*
|
||||
Copyright 2024 New Vector Ltd.
|
||||
|
||||
SPDX-License-Identifier: AGPL-3.0-only
|
||||
Please see LICENSE in the repository root for full details.
|
||||
*/
|
||||
|
||||
import { PropsWithChildren, ReactNode } from "react";
|
||||
import classNames from "classnames";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
import styles from "./ReactionIndicator.module.css";
|
||||
|
||||
export function ReactionIndicator({
|
||||
emoji,
|
||||
miniature,
|
||||
children,
|
||||
}: PropsWithChildren<{
|
||||
miniature?: boolean;
|
||||
emoji: string;
|
||||
}>): ReactNode {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<div
|
||||
className={classNames(styles.reactionIndicatorWidget, {
|
||||
[styles.reactionIndicatorWidgetLarge]: !miniature,
|
||||
})}
|
||||
>
|
||||
<div
|
||||
className={classNames(styles.reaction, {
|
||||
[styles.reactionLarge]: !miniature,
|
||||
})}
|
||||
>
|
||||
<span role="img" aria-label={t("common.reaction")}>
|
||||
{emoji}
|
||||
</span>
|
||||
</div>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -2,13 +2,13 @@
|
||||
|
||||
exports[`RaisedHandIndicator > renders a smaller indicator when miniature is specified 1`] = `
|
||||
<div
|
||||
class="raisedHandWidget"
|
||||
class="reactionIndicatorWidget"
|
||||
>
|
||||
<div
|
||||
class="raisedHand"
|
||||
class="reaction"
|
||||
>
|
||||
<span
|
||||
aria-label="raised hand"
|
||||
aria-label="common.reaction"
|
||||
role="img"
|
||||
>
|
||||
✋
|
||||
@@ -22,13 +22,13 @@ exports[`RaisedHandIndicator > renders a smaller indicator when miniature is spe
|
||||
|
||||
exports[`RaisedHandIndicator > renders an indicator when a hand has been raised 1`] = `
|
||||
<div
|
||||
class="raisedHandWidget raisedHandWidgetLarge"
|
||||
class="reactionIndicatorWidget reactionIndicatorWidgetLarge"
|
||||
>
|
||||
<div
|
||||
class="raisedHand raisedHandLarge"
|
||||
class="reaction reactionLarge"
|
||||
>
|
||||
<span
|
||||
aria-label="raised hand"
|
||||
aria-label="common.reaction"
|
||||
role="img"
|
||||
>
|
||||
✋
|
||||
@@ -42,13 +42,13 @@ exports[`RaisedHandIndicator > renders an indicator when a hand has been raised
|
||||
|
||||
exports[`RaisedHandIndicator > renders an indicator when a hand has been raised with the expected time 1`] = `
|
||||
<div
|
||||
class="raisedHandWidget raisedHandWidgetLarge"
|
||||
class="reactionIndicatorWidget reactionIndicatorWidgetLarge"
|
||||
>
|
||||
<div
|
||||
class="raisedHand raisedHandLarge"
|
||||
class="reaction reactionLarge"
|
||||
>
|
||||
<span
|
||||
aria-label="raised hand"
|
||||
aria-label="common.reaction"
|
||||
role="img"
|
||||
>
|
||||
✋
|
||||
|
||||
181
src/reactions/index.ts
Normal file
181
src/reactions/index.ts
Normal file
@@ -0,0 +1,181 @@
|
||||
/*
|
||||
Copyright 2024 New Vector Ltd.
|
||||
|
||||
SPDX-License-Identifier: AGPL-3.0-only
|
||||
Please see LICENSE in the repository root for full details.
|
||||
*/
|
||||
|
||||
import { RelationType } from "matrix-js-sdk/src/types";
|
||||
|
||||
import catSoundOgg from "../sound/reactions/cat.ogg?url";
|
||||
import catSoundMp3 from "../sound/reactions/cat.mp3?url";
|
||||
import clapSoundOgg from "../sound/reactions/clap.ogg?url";
|
||||
import clapSoundMp3 from "../sound/reactions/clap.mp3?url";
|
||||
import cricketsSoundOgg from "../sound/reactions/crickets.ogg?url";
|
||||
import cricketsSoundMp3 from "../sound/reactions/crickets.mp3?url";
|
||||
import dogSoundOgg from "../sound/reactions/dog.ogg?url";
|
||||
import dogSoundMp3 from "../sound/reactions/dog.mp3?url";
|
||||
import genericSoundOgg from "../sound/reactions/generic.ogg?url";
|
||||
import genericSoundMp3 from "../sound/reactions/generic.mp3?url";
|
||||
import lightbulbSoundOgg from "../sound/reactions/lightbulb.ogg?url";
|
||||
import lightbulbSoundMp3 from "../sound/reactions/lightbulb.mp3?url";
|
||||
import partySoundOgg from "../sound/reactions/party.ogg?url";
|
||||
import partySoundMp3 from "../sound/reactions/party.mp3?url";
|
||||
import deerSoundOgg from "../sound/reactions/deer.ogg?url";
|
||||
import deerSoundMp3 from "../sound/reactions/deer.mp3?url";
|
||||
import rockSoundOgg from "../sound/reactions/rock.ogg?url";
|
||||
import rockSoundMp3 from "../sound/reactions/rock.mp3?url";
|
||||
|
||||
export const ElementCallReactionEventType = "io.element.call.reaction";
|
||||
|
||||
export interface ReactionOption {
|
||||
/**
|
||||
* The emoji to display. This is always displayed even if no emoji is matched
|
||||
* from `ReactionSet`.
|
||||
*
|
||||
* @note Any excess characters are trimmed from this string.
|
||||
*/
|
||||
emoji: string;
|
||||
/**
|
||||
* The name of the emoji. This is the unique key used when looking for a local
|
||||
* effect in our `ReactionSet` array.
|
||||
*/
|
||||
name: string;
|
||||
/**
|
||||
* Optional aliases to look for when searching for an emoji in the interface.
|
||||
*/
|
||||
alias?: string[];
|
||||
/**
|
||||
* Optional sound to play. An ogg sound must always be provided.
|
||||
* If this sound isn't given, `GenericReaction` is used.
|
||||
*/
|
||||
sound?: {
|
||||
mp3?: string;
|
||||
ogg: string;
|
||||
};
|
||||
}
|
||||
|
||||
export interface ECallReactionEventContent {
|
||||
"m.relates_to": {
|
||||
rel_type: RelationType.Reference;
|
||||
event_id: string;
|
||||
};
|
||||
emoji: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
export const GenericReaction: ReactionOption = {
|
||||
name: "generic",
|
||||
emoji: "", // Filled in by user
|
||||
sound: {
|
||||
mp3: genericSoundMp3,
|
||||
ogg: genericSoundOgg,
|
||||
},
|
||||
};
|
||||
|
||||
// The first 6 reactions are always visible.
|
||||
export const ReactionSet: ReactionOption[] = [
|
||||
{
|
||||
emoji: "👍",
|
||||
name: "thumbsup",
|
||||
// TODO: These need to be translated.
|
||||
alias: ["+1", "yes", "thumbs up"],
|
||||
},
|
||||
{
|
||||
emoji: "🎉",
|
||||
name: "party",
|
||||
alias: ["hurray", "success"],
|
||||
sound: {
|
||||
ogg: partySoundOgg,
|
||||
mp3: partySoundMp3,
|
||||
},
|
||||
},
|
||||
{
|
||||
emoji: "👏",
|
||||
name: "clapping",
|
||||
alias: ["celebrate", "success"],
|
||||
sound: {
|
||||
ogg: clapSoundOgg,
|
||||
mp3: clapSoundMp3,
|
||||
},
|
||||
},
|
||||
{
|
||||
emoji: "🐶",
|
||||
name: "dog",
|
||||
alias: ["doggo", "pupper", "woofer", "bark"],
|
||||
sound: {
|
||||
ogg: dogSoundOgg,
|
||||
mp3: dogSoundMp3,
|
||||
},
|
||||
},
|
||||
{
|
||||
emoji: "🐱",
|
||||
name: "cat",
|
||||
alias: ["meow", "kitty"],
|
||||
sound: {
|
||||
ogg: catSoundOgg,
|
||||
mp3: catSoundMp3,
|
||||
},
|
||||
},
|
||||
{
|
||||
emoji: "💡",
|
||||
name: "lightbulb",
|
||||
alias: ["bulb", "light", "idea", "ping"],
|
||||
sound: {
|
||||
ogg: lightbulbSoundOgg,
|
||||
mp3: lightbulbSoundMp3,
|
||||
},
|
||||
},
|
||||
{
|
||||
emoji: "🦗",
|
||||
name: "crickets",
|
||||
alias: ["awkward", "silence"],
|
||||
sound: {
|
||||
ogg: cricketsSoundOgg,
|
||||
mp3: cricketsSoundMp3,
|
||||
},
|
||||
},
|
||||
{
|
||||
emoji: "👎",
|
||||
name: "thumbsdown",
|
||||
alias: ["-1", "no", "thumbs no"],
|
||||
},
|
||||
{
|
||||
emoji: "😵💫",
|
||||
name: "dizzy",
|
||||
alias: ["dazed", "confused"],
|
||||
},
|
||||
{
|
||||
emoji: "👌",
|
||||
name: "ok",
|
||||
alias: ["okay", "cool"],
|
||||
},
|
||||
{
|
||||
emoji: "🥰",
|
||||
name: "heart",
|
||||
alias: ["heart", "love", "smiling"],
|
||||
},
|
||||
{
|
||||
emoji: "😄",
|
||||
name: "laugh",
|
||||
alias: ["giggle", "joy", "smiling"],
|
||||
},
|
||||
{
|
||||
emoji: "🦌",
|
||||
name: "deer",
|
||||
alias: ["stag", "doe", "bleat"],
|
||||
sound: {
|
||||
ogg: deerSoundOgg,
|
||||
mp3: deerSoundMp3,
|
||||
},
|
||||
},
|
||||
{
|
||||
emoji: "🤘",
|
||||
name: "rock",
|
||||
alias: ["cool", "horns", "guitar"],
|
||||
sound: {
|
||||
ogg: rockSoundOgg,
|
||||
mp3: rockSoundMp3,
|
||||
},
|
||||
},
|
||||
];
|
||||
Reference in New Issue
Block a user