2026-05-11 15:33:19 +00:00
3 changed files with 54 additions and 19 deletions
@@ -1,34 +1,25 @@
-import { Html } from "@react-three/drei";
+import { WorldVideoPrompt } from "@/components/three/ui/WorldVideoPrompt";
 import type { Vector3Tuple } from "@/types/three/three";

 interface RepairPromptVideoProps {
  src: string;
  position?: Vector3Tuple;
  size?: number;
+  billboard?: boolean;
 }

 export function RepairPromptVideo({
  src,
  position = [0, 1.8, 0],
  size = 96,
+  billboard = true,
 }: RepairPromptVideoProps): React.JSX.Element {
  return (
-    <Html position={position} center transform occlude={false}>
-      <video
-        aria-hidden="true"
-        autoPlay
-        loop
-        muted
-        playsInline
+    <WorldVideoPrompt
+      billboard={billboard}
+      position={position}
+      size={size}
      src={src}
-        style={{
-          display: "block",
-          height: size,
-          objectFit: "contain",
-          pointerEvents: "none",
-          width: size,
-        }}
    />
-    </Html>
  );
 }
@@ -240,7 +240,9 @@ export function RepairRepairingStep({
        );
      })}

+      {isReadyToInstall ? (
        <RepairPromptVideo src={config.interactUiPath} position={[0, 2.3, 0]} />
+      ) : null}
    </group>
  );
 }
@@ -0,0 +1,42 @@
+import { Html } from "@react-three/drei";
+import type { Vector3Tuple } from "@/types/three/three";
+
+interface WorldVideoPromptProps {
+  src: string;
+  position?: Vector3Tuple;
+  size?: number;
+  billboard?: boolean;
+}
+
+export function WorldVideoPrompt({
+  src,
+  position = [0, 0, 0],
+  size = 96,
+  billboard = true,
+}: WorldVideoPromptProps): React.JSX.Element {
+  return (
+    <Html
+      position={position}
+      center
+      transform
+      sprite={billboard}
+      occlude={false}
+    >
+      <video
+        aria-hidden="true"
+        autoPlay
+        loop
+        muted
+        playsInline
+        src={src}
+        style={{
+          display: "block",
+          height: size,
+          objectFit: "contain",
+          pointerEvents: "none",
+          width: size,
+        }}
+      />
+    </Html>
+  );
+}