Merge pull request #208 from SuperViz/lab

January update #2

apps/playground/src/App.tsx

@@ -49,7 +49,7 @@ function App() {
           });
         })}
       </aside>
-      <section className="flex-1">
+      <section className="flex-1 h-full overflow-hidden">
         <Outlet />
       </section>
     </main>

apps/playground/src/pages/autodesk-with-new-room.tsx

@@ -0,0 +1,162 @@
+import { v4 as generateId } from "uuid";
+import { Presence3D } from "@superviz/autodesk-viewer-plugin";
+import { createRoom, Room } from '@superviz/room'
+
+import { useCallback, useEffect, useRef } from "react";
+import { getConfig } from "../config";
+
+import "../styles/autodesk.css";
+import { Helmet } from "react-helmet-async";
+
+const SUPERVIZ_KEY = getConfig<string>("keys.superviz");
+const SUPERVIZ_ROOM_PREFIX = getConfig<string>("roomPrefix");
+const FORGE_CLIENT = getConfig<string>("keys.forge.clientId");
+const FORGE_SECRET = getConfig<string>("keys.forge.clientSecret");
+
+const componentName = "autodesk-with-new-room";
+
+export function AutodeskWithNewRoom() {
+  const room = useRef<Room | null>(null);
+  const loaded = useRef<boolean>(false);
+  const autodesk = useRef<Presence3D>();
+  const viewerDiv = useRef<HTMLDivElement>();
+  const viewer = useRef<Autodesk.Viewing.GuiViewer3D | null>(null);
+
+  const initializeSuperViz = useCallback(async () => {
+    const uuid = generateId();
+
+    room.current = await createRoom({
+      developerToken: SUPERVIZ_KEY,
+      roomId: `${SUPERVIZ_ROOM_PREFIX}-${componentName}`,
+      participant: {
+        name: "Participant",
+        id: uuid,
+      },
+      group: {
+        name: SUPERVIZ_ROOM_PREFIX,
+        id: SUPERVIZ_ROOM_PREFIX,
+      },
+      environment: "dev",
+      debug: true,
+    });
+
+    autodesk.current = new Presence3D(viewer.current as Autodesk.Viewing.GuiViewer3D, {
+      isAvatarsEnabled: true,
+      isLaserEnabled: true,
+      isNameEnabled: true,
+      avatarConfig: {
+        height: 0,
+        scale: 1,
+        laserOrigin: { x: 0, y: 0, z: 0 },
+      },
+    });
+
+    room.current.addComponent(autodesk.current);
+  }, []);
+
+  const onDocumentLoadSuccess = useCallback(async (document: Autodesk.Viewing.Document) => {
+    const viewable = document.getRoot().getDefaultGeometry();
+
+    if(!viewable) return
+
+    try {
+      await viewer.current!.loadDocumentNode(document, viewable, {
+        applyScaling: 'meters'
+      })
+
+      await initializeSuperViz()
+    } catch (error) { 
+      console.log('Document loaded failed', error)
+    }
+
+  }, [initializeSuperViz])
+
+  const onDocumentLoadFailure = () => {
+    console.log('Document loaded failed')
+  }
+
+  const forge = useCallback(async (modelURN: string) => {
+    if(loaded.current) return
+
+    loaded.current = true
+
+    const AUTH_URL =
+      "https://developer.api.autodesk.com/authentication/v2/token";
+
+    // Convert client_id and client_secret to Base64 for the Authorization header
+    const credentials = btoa(`${FORGE_CLIENT}:${FORGE_SECRET}`);
+
+    const data = {
+      grant_type: "client_credentials",
+      scope: "data:read bucket:read",
+    };
+
+    fetch(AUTH_URL, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/x-www-form-urlencoded",
+        Authorization: `Basic ${credentials}`,
+      },
+      body: new URLSearchParams(data).toString(),
+    })
+      .then((res) => {
+        return res.json();
+      })
+      .then((dataToken) => {
+        console.log("sucess get token", dataToken);
+
+        const options = {
+          env: "AutodeskProduction2",
+          api: "streamingV2",
+          accessToken: dataToken.access_token,
+        };
+        const modelID = btoa(modelURN);
+        const documentId = `urn:${modelID}`;
+
+        Autodesk.Viewing.Initializer(options, async () => {
+          viewerDiv.current = document.getElementById(
+            "forge-viewer"
+          ) as HTMLDivElement;
+          viewer.current = new Autodesk.Viewing.GuiViewer3D(viewerDiv.current);
+
+          await viewer.current!.start();
+          viewer.current!.setTheme("dark-theme");
+          viewer.current!.setQualityLevel(false, false);
+          viewer.current!.setGhosting(false);
+          viewer.current!.setGroundShadow(false);
+          viewer.current!.setGroundReflection(false);
+          viewer.current!.setOptimizeNavigation(true);
+          viewer.current!.setProgressiveRendering(true);
+
+          Autodesk.Viewing.Document.load(
+            documentId,
+            onDocumentLoadSuccess,
+            onDocumentLoadFailure,
+          );
+        });
+      });
+  }, [onDocumentLoadSuccess]);
+
+  useEffect(() => {
+    forge("urn:adsk.objects:os.object:e8d17563-1a4e-4471-bd72-a0a7e8d719bc/fileifc.ifc")
+
+    return () => {
+      room.current?.leave();
+    };
+  }, []);
+
+  return (
+    <>
+      <Helmet>
+        <script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.min.js"></script>
+      </Helmet>
+      <main>
+        <section>
+          <div id="forge-container">
+            <div id="forge-viewer" className="forge-viewer" />
+          </div>
+        </section>
+      </main>
+    </>
+  );
+}

apps/playground/src/pages/matterport-with-new-superviz-room.tsx

@@ -0,0 +1,115 @@
+import { v4 as generateId } from "uuid";
+
+
+import { getConfig } from "../config";
+import { useCallback, useEffect, useRef } from "react";
+import { createRoom, Room } from "@superviz/room";
+import { Presence3D } from "@superviz/matterport-plugin";
+
+const MATTERPORT_KEY = getConfig<string>("keys.matterport");
+const SUPERVIZ_KEY = getConfig<string>("keys.superviz");
+const SUPERVIZ_ROOM_PREFIX = getConfig<string>("roomPrefix");
+
+type WindowWithMP_SDK = Window & {
+  MP_SDK: {
+    connect: (window: Window, key: string) => Promise<unknown>;
+  };
+};
+
+export function MatterportWithNewRoom() {
+  const containerId = "matterport-container";
+  const modelId = "Zh14WDtkjdC";
+  const room = useRef<Room | null>(null);
+  const mpSdk = useRef<any | null>(null);
+  const matterportPresence = useRef<Presence3D | null>(null);
+
+  const initializeSuperViz = useCallback(async () => {
+    const uuid = generateId();
+
+    room.current = await createRoom({
+      developerToken: SUPERVIZ_KEY,
+      participant: {
+        name: "Participant Name",
+        id: uuid,
+      },
+      group: {
+        name: SUPERVIZ_ROOM_PREFIX,
+        id: SUPERVIZ_ROOM_PREFIX,
+      },
+      roomId: `${SUPERVIZ_ROOM_PREFIX}-matterport-with-new-room`,
+      debug: true, 
+      environment: 'dev',
+    });
+
+    addMatterport();
+  }, []);
+
+  const initializeMatterport = useCallback(async () => {
+    const showcase = document.getElementById(containerId) as HTMLIFrameElement;
+
+    if (!showcase) return;
+
+    showcase.onload = async () => {
+      const showcaseWindow = showcase.contentWindow as WindowWithMP_SDK;
+
+      mpSdk.current = await showcaseWindow.MP_SDK.connect(
+        showcaseWindow,
+        MATTERPORT_KEY
+      );
+
+      initializeSuperViz();
+    };
+  }, [initializeSuperViz]);
+
+  useEffect(() => {
+    initializeMatterport();
+
+    return () => {
+      room.current?.leave();
+      mpSdk.current?.disconnect();
+    };
+  }, []);
+
+  const addMatterport = () => {
+    if (!room.current || !mpSdk.current || matterportPresence.current) return;
+
+    matterportPresence.current = new Presence3D(mpSdk.current, {
+      isAvatarsEnabled: true,
+      isLaserEnabled: true,
+      isNameEnabled: true,
+    });
+
+    room.current?.addComponent(matterportPresence.current);
+  }
+
+  const removeMatterport = () => {
+    if (!room.current || !mpSdk.current || !matterportPresence.current) return;
+
+    room.current?.removeComponent(matterportPresence.current);
+    matterportPresence.current = null;
+  }
+
+  return (
+    <div className="w-full h-full flex">
+      <div>
+        <button 
+          // disabled={!room.current || !mpSdk.current || !!matterportPresence.current}
+          onClick={addMatterport}
+        >
+          Add Matterport
+        </button>
+        <button 
+          // disabled={!room.current || !mpSdk.current || !matterportPresence.current}
+          onClick={removeMatterport}
+        >
+          Remove Matterport
+        </button>
+      </div>
+      <iframe
+        className="matterport-iframe"
+        id={containerId}
+        src={`/mp-bundle/showcase.html?&brand=0&mls=2&mt=0&search=0&kb=0&play=1&qs=1&applicationKey=${MATTERPORT_KEY}&m=${modelId}`}
+      />
+    </div>
+  );
+}

apps/playground/src/pages/matterport-with-video.tsx

@@ -60,9 +60,7 @@ export function MatterportWithVideo() {
 
     room.current.addComponent(videoConference);
 
-    videoConference.subscribe('meeting.state-update', (state: number) => {
-      if (state !== 3) return;
-
+    videoConference.subscribe('my-participant.joined', () => {
       const matterport = new MatterportPresence3D(mpSdk.current!);
       room.current!.addComponent(matterport);
     });