Custom Avatars

src/plugins/thirdroom/thirdroom.common.ts

@@ -14,11 +14,13 @@ export enum ThirdRoomMessageType {
   GLTFViewerLoadError = "gltf-viewer-load-error",
   ReticleFocus = "reticle-focus",
   FindResourceRetainers = "find-resource-retainers",
+  UpdateWorldMembers = "update-world-members",
 }
 
 export interface EnterWorldMessage {
   type: ThirdRoomMessageType.EnterWorld;
   id: number;
+  avatarUrl?: string;
 }
 
 export interface EnteredWorldMessage {
@@ -89,3 +91,12 @@ export interface FindResourceRetainersMessage {
   type: ThirdRoomMessageType.FindResourceRetainers;
   resourceId: number;
 }
+
+export interface WorldMember {
+  avatarUrl?: string;
+}
+
+export interface UpdateWorldMembersMessage {
+  type: ThirdRoomMessageType.UpdateWorldMembers;
+  worldMembers: Map<string, WorldMember>;
+}

src/plugins/thirdroom/thirdroom.game.ts

@@ -24,6 +24,7 @@ import {
   EnteredWorldMessage,
   EnterWorldErrorMessage,
   FindResourceRetainersMessage,
+  UpdateWorldMembersMessage,
 } from "./thirdroom.common";
 import { createNodeFromGLTFURI, loadDefaultGLTFScene, loadGLTF } from "../../engine/gltf/gltf.game";
 import { createRemotePerspectiveCamera, getCamera } from "../../engine/camera/camera.game";
@@ -218,6 +219,7 @@ export const ThirdRoomModule = defineModule<GameState, ThirdRoomModuleState>({
     const disposables = [
       registerMessageHandler(ctx, ThirdRoomMessageType.LoadWorld, onLoadWorld),
       registerMessageHandler(ctx, ThirdRoomMessageType.EnterWorld, onEnterWorld),
+      registerMessageHandler(ctx, ThirdRoomMessageType.UpdateWorldMembers, onUpdateWorldMembers),
       registerMessageHandler(ctx, ThirdRoomMessageType.ExitWorld, onExitWorld),
       registerMessageHandler(ctx, NetworkMessageType.AddPeerId, onAddPeerId),
       registerMessageHandler(ctx, ThirdRoomMessageType.PrintThreadState, onPrintThreadState),
@@ -370,6 +372,8 @@ async function onEnterWorld(ctx: GameState, message: EnterWorldMessage) {
     const physics = getModule(ctx, PhysicsModule);
     const input = getModule(ctx, InputModule);
 
+    console.log(message.avatarUrl);
+
     loadPlayerRig(ctx, physics, input, network);
 
     await waitUntil(() => ourPlayerQuery(ctx.world).length > 0);
@@ -391,6 +395,10 @@ async function onEnterWorld(ctx: GameState, message: EnterWorldMessage) {
   }
 }
 
+function onUpdateWorldMembers(ctx: GameState, message: UpdateWorldMembersMessage) {
+  console.log("onUpdateWorldMembers", message);
+}
+
 function onExitWorld(ctx: GameState, message: ExitWorldMessage) {
   disposeWorld(ctx.worldResource);
   ctx.sendMessage<ExitedWorldMessage>(Thread.Main, {

src/plugins/thirdroom/thirdroom.main.ts

@@ -109,7 +109,7 @@ export async function loadWorld(ctx: IMainThreadContext, url: string, scriptUrl:
   return loadingEnvironment.promise;
 }
 
-export async function enterWorld(ctx: IMainThreadContext) {
+export async function enterWorld(ctx: IMainThreadContext, avatarUrl?: string) {
   const thirdroom = getModule(ctx, ThirdroomModule);
   const enteringWorld = createDeferred(false);
 
@@ -141,6 +141,7 @@ export async function enterWorld(ctx: IMainThreadContext) {
   ctx.sendMessage<EnterWorldMessage>(Thread.Game, {
     type: ThirdRoomMessageType.EnterWorld,
     id,
+    avatarUrl,
   });
 
   return enteringWorld.promise;

src/ui/hooks/useHomeWorld.ts

@@ -31,7 +31,7 @@ async function createHomeWorld(session: Session) {
         "m.room.encrypted": 100,
         "m.sticker": 0,
         "org.matrix.msc3401.call.member": 0,
-        "org.matrix.msc3815.member.world": 0,
+        "org.matrix.msc3815.world.member": 0,
       },
       users: {
         [session.userId]: 100,

src/ui/hooks/useHydrogen.tsx

@@ -1,21 +1,11 @@
-import {
-  Platform,
-  Navigation,
-  Client,
-  Session,
-  ILogger,
-  URLRouter,
-  Room,
-  ILoginMethod,
-} from "@thirdroom/hydrogen-view-sdk";
+import { Platform, Navigation, Client, Session, ILogger, URLRouter, ILoginMethod } from "@thirdroom/hydrogen-view-sdk";
 import { createContext, useContext } from "react";
 
 export interface HydrogenContext {
   client: Client;
   navigation: Navigation;
   platform: Platform;
   session?: Session;
-  profileRoom?: Room;
   logger: ILogger;
   urlRouter: URLRouter;
   login: (loginMethod: ILoginMethod) => Promise<void>;
@@ -24,7 +14,6 @@ export interface HydrogenContext {
 
 export interface AuthenticatedHydrogenContext extends HydrogenContext {
   session: Session;
-  profileRoom: Room;
 }
 
 export const HydrogenContext = createContext<HydrogenContext | undefined>(undefined);

src/ui/hooks/useStateEvents.ts

@@ -4,17 +4,21 @@ import { useEffect, useState } from "react";
 import { useIsMounted } from "./useIsMounted";
 import { useObservableMap } from "./useObservableMap";
 
-export function useStateEvents(room: Room, eventType: string) {
+export function useStateEvents(room: Room | undefined, eventType: string) {
   const [eventObservable, setEventObservable] = useState(new ObservableMap<string, StateEvent>());
   const isMounted = useIsMounted();
 
   const events = useObservableMap(() => eventObservable, [eventObservable]);
 
   useEffect(() => {
-    room.observeStateType(eventType).then((stateObserver) => {
-      if (!isMounted()) return;
-      setEventObservable(stateObserver);
-    });
+    if (!room) {
+      setEventObservable(new ObservableMap<string, StateEvent>());
+    } else {
+      room.observeStateType(eventType).then((stateObserver) => {
+        if (!isMounted()) return;
+        setEventObservable(stateObserver);
+      });
+    }
   }, [eventType, room, isMounted]);
 
   return events;

src/ui/hooks/useUpdateWorldMembers.ts

@@ -0,0 +1,29 @@
+import { Room } from "@thirdroom/hydrogen-view-sdk";
+import { useEffect } from "react";
+
+import { Thread } from "../../engine/module/module.common";
+import { ThirdRoomMessageType, UpdateWorldMembersMessage, WorldMember } from "../../plugins/thirdroom/thirdroom.common";
+import { useHydrogen } from "./useHydrogen";
+import { useMainThreadContext } from "./useMainThread";
+import { useStateEvents } from "./useStateEvents";
+
+export function useUpdateWorldMembers(world?: Room) {
+  const { session } = useHydrogen(true);
+  const worldMembersEvents = useStateEvents(world, "org.matrix.msc3815.world.member");
+  const mainThread = useMainThreadContext();
+
+  useEffect(() => {
+    const worldMembers: Map<string, WorldMember> = new Map(
+      Array.from(worldMembersEvents).map(([userId, event]) => {
+        const avatarMxcUrl = event.content.avatar_url;
+        const avatarUrl = avatarMxcUrl ? session.mediaRepository.mxcUrl(avatarMxcUrl) : undefined;
+        return [userId, { avatarUrl }];
+      })
+    );
+
+    mainThread.sendMessage<UpdateWorldMembersMessage>(Thread.Game, {
+      type: ThirdRoomMessageType.UpdateWorldMembers,
+      worldMembers,
+    });
+  }, [mainThread, worldMembersEvents, session]);
+}

src/ui/hooks/useUserProfile.ts

@@ -1,128 +1,46 @@
-import { useCallback, useEffect, useState } from "react";
-import { Session, Client, SyncStatus, Room, RoomVisibility, RoomType } from "@thirdroom/hydrogen-view-sdk";
+import { useEffect } from "react";
+import { Session, Client } from "@thirdroom/hydrogen-view-sdk";
 import { useSetAtom } from "jotai";
 
-import { getMxIdUsername, getProfileRoom, waitToCreateRoom } from "../utils/matrixUtils";
+import { getMxIdUsername, getUserProfile } from "../utils/matrixUtils";
 import { useIsMounted } from "./useIsMounted";
 import { userProfileAtom } from "../state/userProfile";
 
 export function useUserProfile(client: Client, session?: Session) {
   const setUserProfile = useSetAtom(userProfileAtom);
   const isMounted = useIsMounted();
-  const [profileRoom, setProfileRoom] = useState<Room>();
-
-  const updateProfile = useCallback(
-    (userId: string, displayName?: string, avatarUrl?: string) => {
-      setUserProfile({
-        userId,
-        displayName: displayName || getMxIdUsername(userId),
-        avatarUrl,
-      });
-    },
-    [setUserProfile]
-  );
-
-  const updateFromServer = useCallback(
-    (session: Session) => {
-      session.hsApi
-        .profile(session.userId)
-        .response()
-        .then((data) => {
-          if (!isMounted()) return;
-          updateProfile(session.userId, data.displayname, data.avatar_url);
-        })
-        .catch(() => {
-          // Silence error since not all users have profile routes
-        });
-    },
-    [isMounted, updateProfile]
-  );
-
-  const listenProfileChange = useCallback(
-    async (session: Session, profileRoom: Room) => {
-      setProfileRoom(profileRoom);
-      const memberObserver = await profileRoom.observeMember(session.userId);
-
-      const unSubs = memberObserver?.subscribe((member) => {
-        if (member.membership !== "join") unSubs?.();
-
-        const { avatarUrl, displayName } = member;
-        updateProfile(session.userId, avatarUrl, displayName);
-      });
-    },
-    [updateProfile, setProfileRoom]
-  );
-
-  const initProfileRoom = useCallback(
-    async (session: Session) => {
-      const profileRoom = getProfileRoom(session.rooms);
-
-      if (profileRoom) {
-        listenProfileChange(session, profileRoom);
-      } else {
-        const roomBeingCreated = session.createRoom({
-          type: RoomType.Profile,
-          visibility: RoomVisibility.Private,
-          name: "Third Room - Profile",
-          topic: "This room contain profile information.",
-          isEncrypted: false,
-          isFederationDisabled: false,
-          powerLevelContentOverride: {
-            invite: 100,
-            kick: 100,
-            ban: 100,
-            redact: 100,
-            state_default: 100,
-            events_default: 100,
-            users_default: 0,
-            users: {
-              [session.userId]: 100,
-            },
-          },
-        });
-
-        const profileRoom = await waitToCreateRoom(session, roomBeingCreated);
-        if (!profileRoom) {
-          window.setTimeout(() => window.location.reload());
-          return;
-        }
-        listenProfileChange(session, profileRoom);
-      }
-    },
-    [listenProfileChange]
-  );
 
   useEffect(() => {
-    let unSubs: () => void;
-    const { sync } = client;
     if (!session) {
-      setProfileRoom(undefined);
       return;
     }
 
-    updateProfile(session.userId);
-    updateFromServer(session);
-
-    // Make sure catchup sync has completed
-    // so we don't create redundant profile room.
-    if (sync.status.get() === "Syncing" || getProfileRoom(session.rooms)) {
-      initProfileRoom(session);
-    } else {
-      let prevStatus: SyncStatus = sync.status.get();
-      unSubs = sync.status.subscribe((syncStatus) => {
-        if (prevStatus === syncStatus) return;
-        prevStatus = syncStatus;
-        if (syncStatus === "Syncing") {
-          initProfileRoom(session);
-          unSubs?.();
-        }
+    setUserProfile({
+      userId: session.userId,
+      displayName: getMxIdUsername(session.userId),
+    });
+
+    Promise.all([session.hsApi.profile(session.userId).response(), getUserProfile(session)])
+      .then(([profileData, userProfile]) => {
+        if (!isMounted()) return;
+
+        setUserProfile({
+          userId: session.userId,
+          displayName: profileData.displayname || getMxIdUsername(session.userId),
+          avatarUrl: profileData.avatar_url,
+          avatarModelUrl: userProfile?.avatar_url,
+          avatarModelPreviewUrl: userProfile?.avatar_preview_url,
+        });
+      })
+      .catch(() => {
+        // Silence error since not all users have profile routes
       });
-    }
+
     return () => {
-      unSubs?.();
-      updateProfile("@dummy:server.xyz");
+      setUserProfile({
+        userId: "@dummy:server.xyz",
+        displayName: getMxIdUsername("@dummy:server.xyz"),
+      });
     };
-  }, [client, session, updateProfile, updateFromServer, initProfileRoom]);
-
-  return profileRoom;
+  }, [client, session, setUserProfile, isMounted]);
 }

src/ui/hooks/useWorldLoader.ts

@@ -125,7 +125,7 @@ export function useWorldLoader(): WorldLoader {
           groupCall = await connectGroupCall(world);
         }
 
-        await updateWorldProfile(session, world);
+        const profile = await updateWorldProfile(session, world);
 
         setLocalMediaStream(mainThread, groupCall.localMedia?.userMedia);
 
@@ -138,7 +138,7 @@ export function useWorldLoader(): WorldLoader {
         );
         registerMatrixNetworkInterface(matrixNetworkInterface);
 
-        await enterWorld(mainThread);
+        await enterWorld(mainThread, profile?.avatar_url);
 
         const audio = getModule(mainThread, AudioModule);
         audio.context.resume().catch(() => console.error("Couldn't resume audio context"));