クイックスタート

import { useEffect, useRef, useState } from "react";
import type { Five as FiveInstance, Mode, State } from "@realsee/five";
import { requestApi } from "./api";

export type Scene =
  | { kind: "demo"; label: string }
  | { kind: "team"; label: string; handle: string };
export type SceneStatus = {
  state: "idle" | "loading" | "ready" | "error";
  message: string;
  stage: "demo" | "work" | "scene";
};

export function Viewer({
  scene,
  status,
  onStatus,
}: {
  scene: Scene | null;
  status: SceneStatus;
  onStatus: (value: SceneStatus) => void;
}) {
  const host = useRef<HTMLDivElement>(null);
  const viewer = useRef<FiveInstance | null>(null);
  const initial = useRef<State | null>(null);
  const [currentMode, setCurrentMode] = useState<Mode | null>(null);
  const [modeChanging, setModeChanging] = useState(false);
  const [modeError, setModeError] = useState("");

  useEffect(() => {
    if (!scene || !host.current) return;
    const controller = new AbortController();
    let instance: FiveInstance | null = null;
    let resize: ResizeObserver | null = null;
    let stopped = false;
    let stopModeListener: (() => void) | undefined;
    const layer = document.createElement("div");
    layer.className = "canvas-layer";
    host.current.append(layer);

    async function load() {
      onStatus({
        state: "loading",
        stage: scene!.kind === "demo" ? "demo" : "work",
        message:
          scene!.kind === "demo"
            ? "Loading the public sample…"
            : "Checking your selection and fetching Work…",
      });
      try {
        const [{ Five, parseWork }, work] = await Promise.all([
          import("@realsee/five"),
          scene!.kind === "demo"
            ? import(
                "@realsee/open-works/virtual/816lPVZQkQDF5XOpPo/work.json"
              ).then((module) => module.default)
            : requestApi<{ work: unknown }>("/api/team/work", {
                method: "POST",
                body: JSON.stringify({
                  sceneHandle: (scene as Extract<Scene, { kind: "team" }>)
                    .handle,
                }),
                signal: controller.signal,
              }).then((data) => data.work),
        ]);
        if (stopped) return;
        onStatus({
          state: "loading",
          stage: "scene",
          message: "Rendering the spatial scene…",
        });
        instance = new Five({ imageOptions: { size: 512 } });
        viewer.current = instance;
        stopModeListener = instance.on("modeChange", (mode) => {
          if (!stopped) setCurrentMode(mode);
        });
        instance.appendTo(layer);
        await instance.load(
          parseWork(work as Parameters<typeof parseWork>[0]),
          "initial"
        );
        if (stopped) return;
        initial.current = {
          ...instance.state,
          offset: instance.state.offset.clone(),
        };
        setCurrentMode(instance.state.mode);
        setModeError("");
        setModeChanging(false);
        instance.refresh();
        resize = new ResizeObserver(() => instance?.refresh());
        resize.observe(layer);
        onStatus({
          state: "ready",
          stage: "scene",
          message:
            "Scene ready. Drag to look around and select a floor point to move.",
        });
      } catch (error) {
        if (stopped) return;
        instance?.dispose();
        instance = null;
        viewer.current = null;
        layer.replaceChildren();
        const detail =
          error && typeof error === "object" && "detail" in error
            ? error.detail
            : undefined;
        const stage =
          detail && typeof detail === "object" && "stage" in detail
            ? detail.stage
            : "scene";
        onStatus({
          state: "error",
          stage: stage === "work" || stage === "selection" ? "work" : "scene",
          message:
            error instanceof Error && detail
              ? error.message
              : "The scene could not render. Check WebGL and access to the scene assets, then reload the scene. API success and scene rendering are separate checks.",
        });
      }
    }
    void load();
    return () => {
      stopped = true;
      controller.abort();
      resize?.disconnect();
      stopModeListener?.();
      if (viewer.current === instance) viewer.current = null;
      initial.current = null;
      instance?.dispose();
      layer.remove();
    };
  }, [scene, onStatus]);

  async function toggleMode() {
    const instance = viewer.current;
    if (!instance || modeChanging) return;
    setModeChanging(true);
    setModeError("");
    try {
      const nextMode =
        instance.state.mode === "Panorama" ? "Floorplan" : "Panorama";
      await instance.changeMode(nextMode);
    } catch {
      if (viewer.current === instance)
        setModeError(
          "This scene could not switch modes. Some Work data has no floorplan model. The current view is still available."
        );
    } finally {
      if (viewer.current === instance) setModeChanging(false);
    }
  }

  return (
    <section className="viewer-card" aria-label="Spatial scene viewer">
      <div className="viewer-heading">
        <span className="eyebrow">FIVE SDK · LIVE CANVAS</span>
        <span
          className={`scene-badge ${
            status.state === "ready" ? "is-ready" : ""
          }`}
        >
          <span className="status-dot" />
          {status.state === "ready"
            ? "Ready"
            : status.state === "loading"
            ? "Loading"
            : scene
            ? "Needs attention"
            : "No scene selected"}
        </span>
      </div>
      <div
        ref={host}
        className="viewer"
        role="region"
        aria-label={scene?.label || "Select a Team VR to render"}
        aria-busy={status.state === "loading"}
        tabIndex={0}
        onKeyDown={(event) => {
          if (
            event.target === event.currentTarget &&
            event.key.toLowerCase() === "r" &&
            initial.current
          )
            viewer.current?.setState(initial.current, true);
        }}
      >
        {status.state !== "ready" && (
          <div
            className="viewer-overlay"
            role={status.state === "error" ? "alert" : "status"}
          >
            <div>
              <div
                className={`spatial-mark ${
                  status.state === "loading" ? "is-loading" : ""
                }`}
                aria-hidden="true"
              >
                ⌘
              </div>
              <p>
                {scene
                  ? status.message
                  : "Select a VR from your Team directory."}
              </p>
              {!scene && (
                <span className="viewer-hint">
                  Your public demo is one tab away.
                </span>
              )}
            </div>
          </div>
        )}
      </div>
      <div className="viewer-footer">
        <span>
          {scene?.label || "Team scene"}{" "}
          <span className="subtle">
            ·{" "}
            {scene?.kind === "demo"
              ? "Public sample Work"
              : "Your configured Team"}
          </span>
        </span>
        <div className="viewer-actions">
          <button
            className="text-button"
            disabled={status.state !== "ready" || modeChanging}
            onClick={() => void toggleMode()}
          >
            {modeChanging
              ? "Switching…"
              : currentMode === "Panorama"
              ? "Switch to floorplan"
              : "Switch to panorama"}
          </button>
          <button
            className="text-button"
            disabled={status.state !== "ready" || modeChanging}
            onClick={() => {
              if (initial.current)
                viewer.current?.setState(initial.current, true);
            }}
          >
            Reset view <span aria-hidden="true">↗</span>
          </button>
        </div>
      </div>
      {modeError && (
        <p className="viewer-mode-error" role="alert">
          {modeError}
        </p>
      )}
    </section>
  );
}