Merge pull request #6436 from mozilla/bit-sfx-update

Bit SFX update

src/bit-systems/media-loading.ts

@@ -162,10 +162,10 @@ export function* animateScale(world: HubsWorld, mediaLoaderEid: EntityID) {
 }
 
 function* finish(world: HubsWorld, mediaLoaderEid: EntityID) {
+  if (entityExists(world, mediaLoaderEid) && MediaLoader.flags[mediaLoaderEid] & MEDIA_LOADER_FLAGS.ANIMATE_LOAD) {
+    yield* animateScale(world, mediaLoaderEid);
+  }
   if (entityExists(world, mediaLoaderEid)) {
-    if (MediaLoader.flags[mediaLoaderEid] & MEDIA_LOADER_FLAGS.ANIMATE_LOAD) {
-      yield* animateScale(world, mediaLoaderEid);
-    }
     inflatePhysicsShape(world, mediaLoaderEid, {
       type: Shape.HULL,
       minHalfExtent: 0.04

src/bit-systems/sfx-button-system.ts

@@ -0,0 +1,42 @@
+import { defineQuery, enterQuery } from "bitecs";
+import { HubsWorld } from "../app";
+import {
+  HeldHandLeft,
+  HeldHandRight,
+  HeldRemoteLeft,
+  HeldRemoteRight,
+  HoldableButton,
+  HoverButton,
+  HoveredHandLeft,
+  HoveredHandRight,
+  HoveredRemoteLeft,
+  HoveredRemoteRight
+} from "../bit-components";
+import { SOUND_HOVER_OR_GRAB } from "../systems/sound-effects-system";
+
+const hoveredRemoteRightQuery = defineQuery([HoverButton, HoveredRemoteRight]);
+const hoveredRemoteRightEnterQuery = enterQuery(hoveredRemoteRightQuery);
+const hoveredRemoteLeftQuery = defineQuery([HoverButton, HoveredRemoteLeft]);
+const hoveredRemoteLeftEnterQuery = enterQuery(hoveredRemoteLeftQuery);
+const hoveredHandRightQuery = defineQuery([HoverButton, HoveredHandRight]);
+const hoveredHandRightEnterQuery = enterQuery(hoveredHandRightQuery);
+const hoveredHandLeftQuery = defineQuery([HoverButton, HoveredHandLeft]);
+const hoveredHandLeftEnterQuery = enterQuery(hoveredHandLeftQuery);
+const heldRemoteRightQuery = defineQuery([HoldableButton, HeldRemoteRight]);
+const heldRemoteRightEnterQuery = enterQuery(heldRemoteRightQuery);
+const heldRemoteLeftQuery = defineQuery([HoldableButton, HeldRemoteLeft]);
+const heldRemoteLeftEnterQuery = enterQuery(heldRemoteLeftQuery);
+const heldHandRightQuery = defineQuery([HoldableButton, HeldHandRight]);
+const heldHandRightEnterQuery = enterQuery(heldHandRightQuery);
+const heldHandLeftQuery = defineQuery([HoldableButton, HeldHandLeft]);
+const heldHandLeftEnterQuery = enterQuery(heldHandLeftQuery);
+export function sfxButtonSystem(world: HubsWorld, sfxSystem: any) {
+  hoveredRemoteRightEnterQuery(world).forEach(() => sfxSystem.playSoundOneShot(SOUND_HOVER_OR_GRAB));
+  hoveredRemoteLeftEnterQuery(world).forEach(() => sfxSystem.playSoundOneShot(SOUND_HOVER_OR_GRAB));
+  hoveredHandRightEnterQuery(world).forEach(() => sfxSystem.playSoundOneShot(SOUND_HOVER_OR_GRAB));
+  hoveredHandLeftEnterQuery(world).forEach(() => sfxSystem.playSoundOneShot(SOUND_HOVER_OR_GRAB));
+  heldRemoteRightEnterQuery(world).forEach(() => sfxSystem.playSoundOneShot(SOUND_HOVER_OR_GRAB));
+  heldRemoteLeftEnterQuery(world).forEach(() => sfxSystem.playSoundOneShot(SOUND_HOVER_OR_GRAB));
+  heldHandRightEnterQuery(world).forEach(() => sfxSystem.playSoundOneShot(SOUND_HOVER_OR_GRAB));
+  heldHandLeftEnterQuery(world).forEach(() => sfxSystem.playSoundOneShot(SOUND_HOVER_OR_GRAB));
+}

src/bit-systems/sfx-media-system.ts

@@ -0,0 +1,46 @@
+import { Not, defineQuery, enterQuery, exitQuery } from "bitecs";
+import { HubsWorld } from "../app";
+import { Deleting, MediaLoaded, MediaLoader, MediaLoading, Networked } from "../bit-components";
+import { SOUND_MEDIA_LOADED, SOUND_MEDIA_LOADING } from "../systems/sound-effects-system";
+
+const loadingSounds = new Map();
+const mediaLoadingQuery = defineQuery([Networked, MediaLoader, MediaLoading, Not(Deleting)]);
+const mediaLoadingEnterQuery = enterQuery(mediaLoadingQuery);
+const mediaLoadingExitQuery = exitQuery(mediaLoadingQuery);
+const mediaLoadedQuery = defineQuery([MediaLoaded]);
+const mediaLoadedEnterQuery = enterQuery(mediaLoadedQuery);
+const mediaLoadedExitQuery = exitQuery(mediaLoadedQuery);
+export function sfxMediaSystem(world: HubsWorld, sfxSystem: any) {
+  mediaLoadingExitQuery(world).forEach(eid => {
+    if (loadingSounds.has(eid)) {
+      sfxSystem.stopPositionalAudio(loadingSounds.get(eid));
+      loadingSounds.delete(eid);
+    }
+  });
+  mediaLoadingEnterQuery(world).forEach(eid => {
+    if (loadingSounds.has(eid)) {
+      sfxSystem.stopPositionalAudio(loadingSounds.get(eid));
+      loadingSounds.delete(eid);
+    }
+    if (Networked.owner[eid] === APP.getSid(NAF.clientId)) {
+      const obj = world.eid2obj.get(eid);
+      const audio = sfxSystem.playPositionalSoundFollowing(SOUND_MEDIA_LOADING, obj, true);
+      loadingSounds.set(eid, audio);
+    }
+  });
+  mediaLoadedExitQuery(world).forEach(eid => {
+    if (loadingSounds.has(eid)) {
+      sfxSystem.stopPositionalAudio(loadingSounds.get(eid));
+      loadingSounds.delete(eid);
+    }
+  });
+  mediaLoadedEnterQuery(world).forEach(eid => {
+    if (loadingSounds.has(eid)) {
+      sfxSystem.stopPositionalAudio(loadingSounds.get(eid));
+      loadingSounds.delete(eid);
+    }
+    const obj = world.eid2obj.get(eid);
+    const audio = sfxSystem.playPositionalSoundFollowing(SOUND_MEDIA_LOADED, obj, false);
+    loadingSounds.set(eid, audio);
+  });
+}

src/react-components/room/hooks/useMicrophoneStatus.js

@@ -1,5 +1,6 @@
 import { useState, useEffect, useCallback } from "react";
 import { MediaDevices, MediaDevicesEvents } from "../../../utils/media-devices-utils";
+import { SOUND_TOGGLE_MIC } from "../../../systems/sound-effects-system";
 
 export function useMicrophoneStatus(scene) {
   const mediaDevicesManager = APP.mediaDevicesManager;
@@ -45,7 +46,8 @@ export function useMicrophoneStatus(scene) {
     } else {
       mediaDevicesManager.startMicShare({ unmute: true });
     }
-  }, [mediaDevicesManager]);
+    scene.systems["hubs-systems"].soundEffectsSystem.playSoundOneShot(SOUND_TOGGLE_MIC);
+  }, [mediaDevicesManager, scene]);
 
   return {
     isMicMuted,

src/systems/hubs-systems.ts

@@ -82,6 +82,8 @@ import { loopAnimationSystem } from "../bit-systems/loop-animation";
 import { linkSystem } from "../bit-systems/link-system";
 import { objectMenuTransformSystem } from "../bit-systems/object-menu-transform-system";
 import { bitPenCompatSystem } from "./bit-pen-system";
+import { sfxButtonSystem } from "../bit-systems/sfx-button-system";
+import { sfxMediaSystem } from "../bit-systems/sfx-media-system";
 
 declare global {
   interface Window {
@@ -191,6 +193,7 @@ export function mainTick(xrFrame: XRFrame, renderer: WebGLRenderer, scene: Scene
   onOwnershipLost(world);
   sceneLoadingSystem(world, hubsSystems.environmentSystem, hubsSystems.characterController);
   mediaLoadingSystem(world);
+  sfxMediaSystem(world, aframeSystems["hubs-systems"].soundEffectsSystem);
 
   networkedTransformSystem(world);
 
@@ -199,6 +202,7 @@ export function mainTick(xrFrame: XRFrame, renderer: WebGLRenderer, scene: Scene
   interactionSystem(world, hubsSystems.cursorTargettingSystem, t, aframeSystems);
 
   buttonSystems(world);
+  sfxButtonSystem(world, aframeSystems["hubs-systems"].soundEffectsSystem);
 
   physicsCompatSystem(world, hubsSystems.physicsSystem);
   hubsSystems.physicsSystem.tick(dt);