Add screen share sound effect. (#2917)

src/room/CallEventAudioRenderer.tsx

@@ -13,8 +13,10 @@ import joinCallSoundMp3 from "../sound/join_call.mp3";
 import joinCallSoundOgg from "../sound/join_call.ogg";
 import leftCallSoundMp3 from "../sound/left_call.mp3";
 import leftCallSoundOgg from "../sound/left_call.ogg";
-import handSoundOgg from "../sound/raise_hand.ogg?url";
-import handSoundMp3 from "../sound/raise_hand.mp3?url";
+import handSoundOgg from "../sound/raise_hand.ogg";
+import handSoundMp3 from "../sound/raise_hand.mp3";
+import screenShareStartedOgg from "../sound/screen_share_started.ogg";
+import screenShareStartedMp3 from "../sound/screen_share_started.mp3";
 import { useAudioContext } from "../useAudioContext";
 import { prefetchSounds } from "../soundUtils";
 import { useReactions } from "../useReactions";
@@ -38,6 +40,10 @@ export const callEventAudioSounds = prefetchSounds({
     mp3: handSoundMp3,
     ogg: handSoundOgg,
   },
+  screenshareStarted: {
+    mp3: screenShareStartedMp3,
+    ogg: screenShareStartedOgg,
+  },
 });
 
 export function CallEventAudioRenderer({
@@ -89,9 +95,14 @@ export function CallEventAudioRenderer({
         void audioEngineRef.current?.playSound("left");
       });
 
+    const screenshareSub = vm.newScreenShare$.subscribe(() => {
+      void audioEngineRef.current?.playSound("screenshareStarted");
+    });
+
     return (): void => {
       joinSub.unsubscribe();
       leftSub.unsubscribe();
+      screenshareSub.unsubscribe();
     };
   }, [audioEngineRef, vm]);
 

src/state/CallViewModel.ts

@@ -1170,6 +1170,21 @@ export class CallViewModel extends ViewModel {
     }),
     this.scope.state(),
   );
+  /**
+   * Emits an event every time a new screenshare is started in
+   * the call.
+   */
+  public readonly newScreenShare$ = this.screenShares$.pipe(
+    map((v) => v.length),
+    scan(
+      (acc, newValue) => ({
+        value: newValue,
+        playSounds: newValue > acc.value,
+      }),
+      { value: 0, playSounds: false },
+    ),
+    filter((v) => v.playSounds),
+  );
 
   public constructor(
     // A call is permanently tied to a single Matrix room and LiveKit room