Merge branch 'livekit' into narrow-footer

src/room/InCallView.tsx

@@ -41,7 +41,7 @@ import {
   VideoButton,
   ShareScreenButton,
   SettingsButton,
-  RaiseHandToggleButton,
+  ReactionToggleButton,
   SwitchCameraButton,
 } from "../button";
 import { Header, LeftNav, RightNav, RoomHeaderInfo } from "../Header";
@@ -83,7 +83,9 @@ import { GridTileViewModel, TileViewModel } from "../state/TileViewModel";
 import { ReactionsProvider, useReactions } from "../useReactions";
 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 { showReactions, useSetting } from "../settings/settings";
 
 const canScreenshare = "getDisplayMedia" in (navigator.mediaDevices ?? {});
 
@@ -179,13 +181,26 @@ export const InCallView: FC<InCallViewProps> = ({
   connState,
   onShareClick,
 }) => {
-  const { supportsReactions, raisedHands } = useReactions();
+  const [shouldShowReactions] = useSetting(showReactions);
+  const { supportsReactions, raisedHands, reactions } = useReactions();
   const raisedHandCount = useMemo(
     () => Object.keys(raisedHands).length,
     [raisedHands],
   );
   const previousRaisedHandCount = useDeferredValue(raisedHandCount);
 
+  const reactionsIcons = useMemo(
+    () =>
+      shouldShowReactions
+        ? Object.entries(reactions).map(([sender, { emoji }]) => ({
+            sender,
+            emoji,
+            startX: -Math.ceil(Math.random() * 50) - 25,
+          }))
+        : [],
+    [shouldShowReactions, reactions],
+  );
+
   useWakeLock();
 
   useEffect(() => {
@@ -545,7 +560,7 @@ export const InCallView: FC<InCallViewProps> = ({
   }
   if (supportsReactions) {
     buttons.push(
-      <RaiseHandToggleButton
+      <ReactionToggleButton
         key="raise_hand"
         className={styles.raiseHand}
         client={client}
@@ -636,10 +651,20 @@ export const InCallView: FC<InCallViewProps> = ({
         ))}
       <RoomAudioRenderer />
       {renderContent()}
-      <audio ref={handRaisePlayer} hidden>
+      <audio ref={handRaisePlayer} preload="auto" hidden>
         <source src={handSoundOgg} type="audio/ogg; codecs=vorbis" />
         <source src={handSoundMp3} type="audio/mpeg" />
       </audio>
+      <ReactionsAudioRenderer />
+      {reactionsIcons.map(({ sender, emoji, startX }) => (
+        <span
+          style={{ left: `${startX}vw` }}
+          className={styles.floatingReaction}
+          key={sender}
+        >
+          {emoji}
+        </span>
+      ))}
       {footer}
       {layout.type !== "pip" && (
         <>