@xrift/world-components 0.10.0 → 0.10.2

package/README.md

@@ -359,6 +359,89 @@ function MyWorld() {
 - ブラウザのautoplay policyのため、動画は初期状態でミュートされています
 - 物理コライダーは含まれていません。必要な場合は別途追加してください
 
+### ScreenShareDisplay コンポーネント
+
+画面共有の映像を3D空間内にスクリーンとして表示するコンポーネントです。`ScreenShareContext` から映像と状態を取得します。
+
+```tsx
+import { ScreenShareDisplay } from '@xrift/world-components'
+
+function MyWorld() {
+  return (
+    <>
+      {/* 基本的な使い方 */}
+      <ScreenShareDisplay id="screen-1" />
+
+      {/* 位置とサイズを指定 */}
+      <ScreenShareDisplay
+        id="screen-2"
+        position={[5, 2, -3]}
+        scale={[3, 3 * (9/16)]}
+      />
+    </>
+  )
+}
+```
+
+#### Props
+
+| プロパティ | 型 | 必須 | デフォルト | 説明 |
+|-----------|-----|------|-----------|------|
+| `id` | `string` | ✓ | - | スクリーンの一意なID |
+| `position` | `[number, number, number]` | - | `[0, 2, -5]` | スクリーンの位置 |
+| `rotation` | `[number, number, number]` | - | `[0, 0, 0]` | スクリーンの回転 |
+| `scale` | `[number, number]` | - | `[4, 4 * (9/16)]` | スクリーンのサイズ [幅, 高さ] |
+
+#### ScreenShareContext
+
+画面共有の状態は `ScreenShareContext` を通じて提供されます。`XRiftProvider` に `screenShareImplementation` を渡すことで設定します。
+
+```tsx
+import { XRiftProvider, ScreenShareDisplay } from '@xrift/world-components'
+
+function App() {
+  const screenShareImpl = {
+    videoElement: myVideoElement,  // HTMLVideoElement
+    isSharing: false,
+    startScreenShare: () => { /* 共有開始処理 */ },
+    stopScreenShare: () => { /* 共有停止処理 */ },
+  }
+
+  return (
+    <XRiftProvider
+      baseUrl="https://..."
+      screenShareImplementation={screenShareImpl}
+    >
+      <MyWorld />
+    </XRiftProvider>
+  )
+}
+```
+
+#### useScreenShareContext フック
+
+コンポーネント内で画面共有の状態を取得するフックです。
+
+```tsx
+import { useScreenShareContext } from '@xrift/world-components'
+
+function MyComponent() {
+  const { videoElement, isSharing, startScreenShare, stopScreenShare } = useScreenShareContext()
+
+  return (
+    <button onClick={isSharing ? stopScreenShare : startScreenShare}>
+      {isSharing ? '共有を停止' : '共有を開始'}
+    </button>
+  )
+}
+```
+
+#### 注意事項
+
+- `XRiftProvider` に `screenShareImplementation` を渡すことが必須です
+- 映像がない場合は「クリックして画面共有」というガイドテキストが表示されます
+- スクリーンをクリックすると `startScreenShare` / `stopScreenShare` が呼び出されます
+
 ### Skybox コンポーネント
 
 画像を使わずにグラデーションで空を表現するシンプルなskyboxコンポーネントです。

package/dist/components/ScreenShareDisplay/hooks.d.ts

@@ -1,10 +1,13 @@
 import * as THREE from 'three';
 /**
  * VideoElement から VideoTexture を作成し管理するフック
+ * @param videoElement 映像のvideo要素
+ * @param screenSize スクリーンのサイズ [幅, 高さ]
  */
-export declare const useVideoTexture: (videoElement: HTMLVideoElement | null) => {
+export declare const useVideoTexture: (videoElement: HTMLVideoElement | null, screenSize: [number, number]) => {
     texture: THREE.VideoTexture<HTMLVideoElement> | null;
     hasVideo: boolean;
     materialRef: import("react").RefObject<THREE.MeshBasicMaterial>;
+    videoSize: [number, number];
 };
 //# sourceMappingURL=hooks.d.ts.map

package/dist/components/ScreenShareDisplay/hooks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../src/components/ScreenShareDisplay/hooks.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B;;GAEG;AACH,eAAO,MAAM,eAAe,GAAI,cAAc,gBAAgB,GAAG,IAAI;;;;CAwDpE,CAAA"}
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../src/components/ScreenShareDisplay/hooks.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAuB9B;;;;GAIG;AACH,eAAO,MAAM,eAAe,GAC1B,cAAc,gBAAgB,GAAG,IAAI,EACrC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC;;;;;CA6E7B,CAAA"}

package/dist/components/ScreenShareDisplay/hooks.js

@@ -1,17 +1,36 @@
 import { useFrame } from '@react-three/fiber';
 import { useEffect, useRef, useState } from 'react';
 import * as THREE from 'three';
+/**
+ * object-fit: contain 用の映像サイズを計算
+ */
+const calculateContainSize = (videoWidth, videoHeight, screenWidth, screenHeight) => {
+    const videoAspect = videoWidth / videoHeight;
+    const screenAspect = screenWidth / screenHeight;
+    if (videoAspect > screenAspect) {
+        // 映像が横長 → 幅に合わせて高さを調整
+        return [screenWidth, screenWidth / videoAspect];
+    }
+    else {
+        // 映像が縦長 → 高さに合わせて幅を調整
+        return [screenHeight * videoAspect, screenHeight];
+    }
+};
 /**
  * VideoElement から VideoTexture を作成し管理するフック
+ * @param videoElement 映像のvideo要素
+ * @param screenSize スクリーンのサイズ [幅, 高さ]
  */
-export const useVideoTexture = (videoElement) => {
+export const useVideoTexture = (videoElement, screenSize) => {
     const materialRef = useRef(null);
     const [texture, setTexture] = useState(null);
+    const [videoSize, setVideoSize] = useState(screenSize);
     const hasVideo = texture !== null;
     // VideoTextureの作成と更新
     useEffect(() => {
         if (!videoElement) {
             setTexture(null);
+            setVideoSize(screenSize);
             return;
         }
         const videoTexture = new THREE.VideoTexture(videoElement);
@@ -20,10 +39,22 @@ export const useVideoTexture = (videoElement) => {
         videoTexture.colorSpace = THREE.SRGBColorSpace;
         videoTexture.needsUpdate = true;
         setTexture(videoTexture);
+        // 映像のメタデータがロードされたらサイズを計算
+        const handleLoadedMetadata = () => {
+            const size = calculateContainSize(videoElement.videoWidth, videoElement.videoHeight, screenSize[0], screenSize[1]);
+            setVideoSize(size);
+        };
+        if (videoElement.videoWidth > 0) {
+            handleLoadedMetadata();
+        }
+        else {
+            videoElement.addEventListener('loadedmetadata', handleLoadedMetadata);
+        }
         return () => {
+            videoElement.removeEventListener('loadedmetadata', handleLoadedMetadata);
             videoTexture.dispose();
         };
-    }, [videoElement]);
+    }, [videoElement, screenSize]);
     // マテリアルにテクスチャをセット
     useEffect(() => {
         if (!materialRef.current || !texture)
@@ -52,6 +83,6 @@ export const useVideoTexture = (videoElement) => {
         const interval = setInterval(checkAndPlay, 1000);
         return () => clearInterval(interval);
     }, [videoElement]);
-    return { texture, hasVideo, materialRef };
+    return { texture, hasVideo, materialRef, videoSize };
 };
 //# sourceMappingURL=hooks.js.map

package/dist/components/ScreenShareDisplay/hooks.js.map

@@ -1 +1 @@
-{"version":3,"file":"hooks.js","sourceRoot":"","sources":["../../../src/components/ScreenShareDisplay/hooks.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAA;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACnD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,YAAqC,EAAE,EAAE;IACvE,MAAM,WAAW,GAAG,MAAM,CAA0B,IAAI,CAAC,CAAA;IACzD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAA4B,IAAI,CAAC,CAAA;IACvE,MAAM,QAAQ,GAAG,OAAO,KAAK,IAAI,CAAA;IAEjC,qBAAqB;IACrB,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,YAAY,EAAE,CAAC;YAClB,UAAU,CAAC,IAAI,CAAC,CAAA;YAChB,OAAM;QACR,CAAC;QAED,MAAM,YAAY,GAAG,IAAI,KAAK,CAAC,YAAY,CAAC,YAAY,CAAC,CAAA;QACzD,YAAY,CAAC,SAAS,GAAG,KAAK,CAAC,YAAY,CAAA;QAC3C,YAAY,CAAC,SAAS,GAAG,KAAK,CAAC,YAAY,CAAA;QAC3C,YAAY,CAAC,UAAU,GAAG,KAAK,CAAC,cAAc,CAAA;QAC9C,YAAY,CAAC,WAAW,GAAG,IAAI,CAAA;QAC/B,UAAU,CAAC,YAAY,CAAC,CAAA;QAExB,OAAO,GAAG,EAAE;YACV,YAAY,CAAC,OAAO,EAAE,CAAA;QACxB,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAA;IAElB,kBAAkB;IAClB,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,WAAW,CAAC,OAAO,IAAI,CAAC,OAAO;YAAE,OAAM;QAC5C,WAAW,CAAC,OAAO,CAAC,GAAG,GAAG,OAAO,CAAA;QACjC,WAAW,CAAC,OAAO,CAAC,WAAW,GAAG,IAAI,CAAA;IACxC,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAA;IAEb,iBAAiB;IACjB,QAAQ,CAAC,GAAG,EAAE;QACZ,IAAI,CAAC,OAAO;YAAE,OAAM;QACpB,OAAO,CAAC,WAAW,GAAG,IAAI,CAAA;IAC5B,CAAC,CAAC,CAAA;IAEF,0BAA0B;IAC1B,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,YAAY;YAAE,OAAM;QAEzB,MAAM,YAAY,GAAG,GAAG,EAAE;YACxB,IAAI,YAAY,CAAC,MAAM,EAAE,CAAC;gBACxB,YAAY,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,GAAG,EAAE;oBAC7B,UAAU;gBACZ,CAAC,CAAC,CAAA;YACJ,CAAC;QACH,CAAC,CAAA;QAED,YAAY,EAAE,CAAA;QACd,MAAM,QAAQ,GAAG,WAAW,CAAC,YAAY,EAAE,IAAI,CAAC,CAAA;QAEhD,OAAO,GAAG,EAAE,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAA;IACtC,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAA;IAElB,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,CAAA;AAC3C,CAAC,CAAA"}
+{"version":3,"file":"hooks.js","sourceRoot":"","sources":["../../../src/components/ScreenShareDisplay/hooks.ts"],"names":[],"mappings":"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"}

package/dist/components/ScreenShareDisplay/index.d.ts

@@ -4,5 +4,5 @@ export type { Props as ScreenShareDisplayProps } from './types';
  * 映像を3D空間内にスクリーンとして表示するコンポーネント
  * 画面共有やカメラ映像などの表示に使用可能
  */
-export declare const ScreenShareDisplay: import("react").MemoExoticComponent<({ id, position, rotation, scale, }: Props) => import("react/jsx-runtime").JSX.Element>;
+export declare const ScreenShareDisplay: import("react").MemoExoticComponent<({ id, position, rotation, width, }: Props) => import("react/jsx-runtime").JSX.Element>;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/ScreenShareDisplay/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ScreenShareDisplay/index.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAEpC,YAAY,EAAE,KAAK,IAAI,uBAAuB,EAAE,MAAM,SAAS,CAAA;AAO/D;;;GAGG;AACH,eAAO,MAAM,kBAAkB,2EAK5B,KAAK,6CA8CN,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ScreenShareDisplay/index.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAEpC,YAAY,EAAE,KAAK,IAAI,uBAAuB,EAAE,MAAM,SAAS,CAAA;AAO/D;;;GAGG;AACH,eAAO,MAAM,kBAAkB,2EAK5B,KAAK,6CA0DN,CAAA"}

package/dist/components/ScreenShareDisplay/index.js

@@ -6,17 +6,18 @@ import { useScreenShareContext } from '../../contexts/ScreenShareContext';
 import { Interactable } from '../Interactable';
 import { useVideoTexture } from './hooks';
 // デフォルト値
-const DEFAULT_SCALE = [4, 4 * (9 / 16)];
+const DEFAULT_WIDTH = 4;
 const DEFAULT_POSITION = [0, 2, -5];
 const DEFAULT_ROTATION = [0, 0, 0];
 /**
  * 映像を3D空間内にスクリーンとして表示するコンポーネント
  * 画面共有やカメラ映像などの表示に使用可能
  */
-export const ScreenShareDisplay = memo(({ id, position = DEFAULT_POSITION, rotation = DEFAULT_ROTATION, scale = DEFAULT_SCALE, }) => {
+export const ScreenShareDisplay = memo(({ id, position = DEFAULT_POSITION, rotation = DEFAULT_ROTATION, width = DEFAULT_WIDTH, }) => {
     const { videoElement, isSharing, startScreenShare, stopScreenShare } = useScreenShareContext();
     const interactionText = isSharing ? '画面共有を停止' : '画面共有を開始';
-    const { texture, hasVideo, materialRef } = useVideoTexture(videoElement);
+    const screenSize = [width, width * (9 / 16)];
+    const { texture, hasVideo, materialRef, videoSize } = useVideoTexture(videoElement, screenSize);
     const handleInteract = useCallback(() => {
         if (isSharing) {
             stopScreenShare();
@@ -25,6 +26,6 @@ export const ScreenShareDisplay = memo(({ id, position = DEFAULT_POSITION, rotat
             startScreenShare();
         }
     }, [isSharing, startScreenShare, stopScreenShare]);
-    return (_jsxs("group", { position: position, rotation: rotation, children: [_jsx(Interactable, { id: id, onInteract: handleInteract, interactionText: interactionText, children: _jsxs("mesh", { children: [_jsx("planeGeometry", { args: [scale[0], scale[1]] }), _jsx("meshBasicMaterial", { ref: materialRef, map: texture, side: THREE.FrontSide, toneMapped: false, color: hasVideo ? 'white' : '#1a1a2a' })] }) }), !hasVideo && (_jsx(Text, { position: [0, 0, 0.01], fontSize: scale[0] * 0.05, color: "#666666", anchorX: "center", anchorY: "middle", children: "\u30AF\u30EA\u30C3\u30AF\u3057\u3066\u753B\u9762\u5171\u6709" }))] }));
+    return (_jsxs("group", { position: position, rotation: rotation, children: [_jsxs(Interactable, { id: id, onInteract: handleInteract, interactionText: interactionText, children: [_jsxs("mesh", { children: [_jsx("planeGeometry", { args: [screenSize[0], screenSize[1]] }), _jsx("meshBasicMaterial", { side: THREE.FrontSide, toneMapped: false, color: "#1a1a2a" })] }), hasVideo && (_jsxs("mesh", { position: [0, 0, 0.001], children: [_jsx("planeGeometry", { args: [videoSize[0], videoSize[1]] }), _jsx("meshBasicMaterial", { ref: materialRef, map: texture, side: THREE.FrontSide, toneMapped: false })] }))] }), !hasVideo && (_jsx(Text, { position: [0, 0, 0.01], fontSize: width * 0.05, color: "#666666", anchorX: "center", anchorY: "middle", children: "\u30AF\u30EA\u30C3\u30AF\u3057\u3066\u753B\u9762\u5171\u6709" }))] }));
 });
 //# sourceMappingURL=index.js.map

package/dist/components/ScreenShareDisplay/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ScreenShareDisplay/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAA;AACxC,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,qBAAqB,EAAE,MAAM,mCAAmC,CAAA;AACzE,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAC9C,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAKzC,SAAS;AACT,MAAM,aAAa,GAAqB,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,CAAA;AACzD,MAAM,gBAAgB,GAA6B,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,CAAA;AAC7D,MAAM,gBAAgB,GAA6B,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAA;AAE5D;;;GAGG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,IAAI,CAAC,CAAC,EACtC,EAAE,EACF,QAAQ,GAAG,gBAAgB,EAC3B,QAAQ,GAAG,gBAAgB,EAC3B,KAAK,GAAG,aAAa,GACf,EAAE,EAAE;IACV,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,gBAAgB,EAAE,eAAe,EAAE,GAAG,qBAAqB,EAAE,CAAA;IAC9F,MAAM,eAAe,GAAG,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAA;IACzD,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,GAAG,eAAe,CAAC,YAAY,CAAC,CAAA;IAExE,MAAM,cAAc,GAAG,WAAW,CAAC,GAAG,EAAE;QACtC,IAAI,SAAS,EAAE,CAAC;YACd,eAAe,EAAE,CAAA;QACnB,CAAC;aAAM,CAAC;YACN,gBAAgB,EAAE,CAAA;QACpB,CAAC;IACH,CAAC,EAAE,CAAC,SAAS,EAAE,gBAAgB,EAAE,eAAe,CAAC,CAAC,CAAA;IAElD,OAAO,CACL,iBAAO,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,aAC3C,KAAC,YAAY,IACX,EAAE,EAAE,EAAE,EACN,UAAU,EAAE,cAAc,EAC1B,eAAe,EAAE,eAAe,YAEhC,2BACE,wBAAe,IAAI,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,GAAI,EAC7C,4BACE,GAAG,EAAE,WAAW,EAChB,GAAG,EAAE,OAAO,EACZ,IAAI,EAAE,KAAK,CAAC,SAAS,EACrB,UAAU,EAAE,KAAK,EACjB,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,GACrC,IACG,GACM,EAGd,CAAC,QAAQ,IAAI,CACZ,KAAC,IAAI,IACH,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC,EACtB,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,IAAI,EACzB,KAAK,EAAC,SAAS,EACf,OAAO,EAAC,QAAQ,EAChB,OAAO,EAAC,QAAQ,6EAGX,CACR,IACK,CACT,CAAA;AACH,CAAC,CAAC,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ScreenShareDisplay/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAA;AACxC,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,qBAAqB,EAAE,MAAM,mCAAmC,CAAA;AACzE,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAC9C,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAKzC,SAAS;AACT,MAAM,aAAa,GAAG,CAAC,CAAA;AACvB,MAAM,gBAAgB,GAA6B,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,CAAA;AAC7D,MAAM,gBAAgB,GAA6B,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAA;AAE5D;;;GAGG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,IAAI,CAAC,CAAC,EACtC,EAAE,EACF,QAAQ,GAAG,gBAAgB,EAC3B,QAAQ,GAAG,gBAAgB,EAC3B,KAAK,GAAG,aAAa,GACf,EAAE,EAAE;IACV,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,gBAAgB,EAAE,eAAe,EAAE,GAAG,qBAAqB,EAAE,CAAA;IAC9F,MAAM,eAAe,GAAG,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAA;IACzD,MAAM,UAAU,GAAqB,CAAC,KAAK,EAAE,KAAK,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,CAAA;IAC9D,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,SAAS,EAAE,GAAG,eAAe,CAAC,YAAY,EAAE,UAAU,CAAC,CAAA;IAE/F,MAAM,cAAc,GAAG,WAAW,CAAC,GAAG,EAAE;QACtC,IAAI,SAAS,EAAE,CAAC;YACd,eAAe,EAAE,CAAA;QACnB,CAAC;aAAM,CAAC;YACN,gBAAgB,EAAE,CAAA;QACpB,CAAC;IACH,CAAC,EAAE,CAAC,SAAS,EAAE,gBAAgB,EAAE,eAAe,CAAC,CAAC,CAAA;IAElD,OAAO,CACL,iBAAO,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,aAC3C,MAAC,YAAY,IACX,EAAE,EAAE,EAAE,EACN,UAAU,EAAE,cAAc,EAC1B,eAAe,EAAE,eAAe,aAGhC,2BACE,wBAAe,IAAI,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,GAAI,EACvD,4BACE,IAAI,EAAE,KAAK,CAAC,SAAS,EACrB,UAAU,EAAE,KAAK,EACjB,KAAK,EAAC,SAAS,GACf,IACG,EAEN,QAAQ,IAAI,CACX,gBAAM,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,KAAK,CAAC,aAC3B,wBAAe,IAAI,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,GAAI,EACrD,4BACE,GAAG,EAAE,WAAW,EAChB,GAAG,EAAE,OAAO,EACZ,IAAI,EAAE,KAAK,CAAC,SAAS,EACrB,UAAU,EAAE,KAAK,GACjB,IACG,CACR,IACY,EAGd,CAAC,QAAQ,IAAI,CACZ,KAAC,IAAI,IACH,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC,EACtB,QAAQ,EAAE,KAAK,GAAG,IAAI,EACtB,KAAK,EAAC,SAAS,EACf,OAAO,EAAC,QAAQ,EAChB,OAAO,EAAC,QAAQ,6EAGX,CACR,IACK,CACT,CAAA;AACH,CAAC,CAAC,CAAA"}

package/dist/components/ScreenShareDisplay/types.d.ts

@@ -5,7 +5,7 @@ export interface Props {
     position?: [number, number, number];
     /** スクリーンの回転 */
     rotation?: [number, number, number];
-    /** スクリーンのサイズ [幅, 高さ] */
-    scale?: [number, number];
+    /** スクリーンの幅（高さは16:9で自動計算） */
+    width?: number;
 }
 //# sourceMappingURL=types.d.ts.map

package/dist/components/ScreenShareDisplay/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/ScreenShareDisplay/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,KAAK;IACpB,kBAAkB;IAClB,EAAE,EAAE,MAAM,CAAA;IACV,eAAe;IACf,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAA;IACnC,eAAe;IACf,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAA;IACnC,wBAAwB;IACxB,KAAK,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;CACzB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/ScreenShareDisplay/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,KAAK;IACpB,kBAAkB;IAClB,EAAE,EAAE,MAAM,CAAA;IACV,eAAe;IACf,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAA;IACnC,eAAe;IACf,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAA;IACnC,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAA;CACf"}

package/dist/contexts/XRiftContext.d.ts

@@ -41,9 +41,10 @@ interface Props {
      */
     instanceStateImplementation?: InstanceStateContextValue;
     /**
-     * 画面共有の実装
+     * 画面共有の実装（オプション）
+     * 指定しない場合はデフォルト実装（no-op）が使用される
      */
-    screenShareImplementation: ScreenShareContextValue;
+    screenShareImplementation?: ScreenShareContextValue;
     children: ReactNode;
 }
 /**

package/dist/contexts/XRiftContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"XRiftContext.d.ts","sourceRoot":"","sources":["../../src/contexts/XRiftContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,SAAS,EAAqC,MAAM,OAAO,CAAA;AACxF,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACrC,OAAO,EAAyB,KAAK,yBAAyB,EAAE,MAAM,wBAAwB,CAAA;AAC9F,OAAO,EAAuB,KAAK,uBAAuB,EAAE,MAAM,sBAAsB,CAAA;AAExF,MAAM,WAAW,iBAAiB;IAChC;;;OAGG;IACH,OAAO,EAAE,MAAM,CAAA;IACf;;;OAGG;IACH,aAAa,EAAE,QAAQ,GAAG,IAAI,CAAA;IAC9B;;;OAGG;IACH,mBAAmB,EAAE,GAAG,CAAC,QAAQ,CAAC,CAAA;IAClC;;OAEG;IACH,oBAAoB,EAAE,CAAC,MAAM,EAAE,QAAQ,KAAK,IAAI,CAAA;IAChD;;OAEG;IACH,sBAAsB,EAAE,CAAC,MAAM,EAAE,QAAQ,KAAK,IAAI,CAAA;CAKnD;AAED;;;GAGG;AACH,eAAO,MAAM,YAAY,mDAAgD,CAAA;AAEzE,UAAU,KAAK;IACb,OAAO,EAAE,MAAM,CAAA;IACf,aAAa,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAA;IAC/B;;;OAGG;IACH,2BAA2B,CAAC,EAAE,yBAAyB,CAAA;IACvD;;OAEG;IACH,yBAAyB,EAAE,uBAAuB,CAAA;IAClD,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED;;;;GAIG;AACH,eAAO,MAAM,aAAa,GAAI,+FAM3B,KAAK,4CA+BP,CAAA;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,QAAQ,QAAO,iBAQ3B,CAAA"}
+{"version":3,"file":"XRiftContext.d.ts","sourceRoot":"","sources":["../../src/contexts/XRiftContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,SAAS,EAA8C,MAAM,OAAO,CAAA;AACjG,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACrC,OAAO,EAAyB,KAAK,yBAAyB,EAAE,MAAM,wBAAwB,CAAA;AAC9F,OAAO,EAAuB,KAAK,uBAAuB,EAAE,MAAM,sBAAsB,CAAA;AAUxF,MAAM,WAAW,iBAAiB;IAChC;;;OAGG;IACH,OAAO,EAAE,MAAM,CAAA;IACf;;;OAGG;IACH,aAAa,EAAE,QAAQ,GAAG,IAAI,CAAA;IAC9B;;;OAGG;IACH,mBAAmB,EAAE,GAAG,CAAC,QAAQ,CAAC,CAAA;IAClC;;OAEG;IACH,oBAAoB,EAAE,CAAC,MAAM,EAAE,QAAQ,KAAK,IAAI,CAAA;IAChD;;OAEG;IACH,sBAAsB,EAAE,CAAC,MAAM,EAAE,QAAQ,KAAK,IAAI,CAAA;CAKnD;AAED;;;GAGG;AACH,eAAO,MAAM,YAAY,mDAAgD,CAAA;AAEzE,UAAU,KAAK;IACb,OAAO,EAAE,MAAM,CAAA;IACf,aAAa,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAA;IAC/B;;;OAGG;IACH,2BAA2B,CAAC,EAAE,yBAAyB,CAAA;IACvD;;;OAGG;IACH,yBAAyB,CAAC,EAAE,uBAAuB,CAAA;IACnD,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED;;;;GAIG;AACH,eAAO,MAAM,aAAa,GAAI,+FAM3B,KAAK,4CAqCP,CAAA;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,QAAQ,QAAO,iBAQ3B,CAAA"}

package/dist/contexts/XRiftContext.js

@@ -1,7 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useCallback, useContext, useState } from 'react';
+import { createContext, useCallback, useContext, useMemo, useState } from 'react';
 import { InstanceStateProvider } from './InstanceStateContext';
 import { ScreenShareProvider } from './ScreenShareContext';
+// デフォルトの画面共有実装（開発環境用）
+const createDefaultScreenShareImplementation = () => ({
+    videoElement: null,
+    isSharing: false,
+    startScreenShare: () => console.log('[ScreenShare] startScreenShare called'),
+    stopScreenShare: () => console.log('[ScreenShare] stopScreenShare called'),
+});
 /**
  * XRift ワールドの情報を提供するContext
  * ワールド側でこのContextを直接参照して情報を取得できる
@@ -15,6 +22,8 @@ export const XRiftContext = createContext(null);
 export const XRiftProvider = ({ baseUrl, currentTarget = null, instanceStateImplementation, screenShareImplementation, children, }) => {
     // インタラクト可能なオブジェクトの管理
     const [interactableObjects] = useState(() => new Set());
+    // 画面共有の実装（指定がない場合はデフォルト実装を使用）
+    const screenShareImpl = useMemo(() => screenShareImplementation ?? createDefaultScreenShareImplementation(), [screenShareImplementation]);
     // オブジェクトの登録
     const registerInteractable = useCallback((object) => {
         interactableObjects.add(object);
@@ -29,7 +38,7 @@ export const XRiftProvider = ({ baseUrl, currentTarget = null, instanceStateImpl
             interactableObjects,
             registerInteractable,
             unregisterInteractable,
-        }, children: _jsx(ScreenShareProvider, { value: screenShareImplementation, children: _jsx(InstanceStateProvider, { implementation: instanceStateImplementation, children: children }) }) }));
+        }, children: _jsx(ScreenShareProvider, { value: screenShareImpl, children: _jsx(InstanceStateProvider, { implementation: instanceStateImplementation, children: children }) }) }));
 };
 /**
  * XRift ワールドの情報を取得するhook

package/dist/contexts/XRiftContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"XRiftContext.js","sourceRoot":"","sources":["../../src/contexts/XRiftContext.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAkB,WAAW,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAExF,OAAO,EAAE,qBAAqB,EAAkC,MAAM,wBAAwB,CAAA;AAC9F,OAAO,EAAE,mBAAmB,EAAgC,MAAM,sBAAsB,CAAA;AAgCxF;;;GAGG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,aAAa,CAA2B,IAAI,CAAC,CAAA;AAiBzE;;;;GAIG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAC5B,OAAO,EACP,aAAa,GAAG,IAAI,EACpB,2BAA2B,EAC3B,yBAAyB,EACzB,QAAQ,GACF,EAAE,EAAE;IACV,qBAAqB;IACrB,MAAM,CAAC,mBAAmB,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,GAAG,EAAY,CAAC,CAAA;IAEjE,YAAY;IACZ,MAAM,oBAAoB,GAAG,WAAW,CAAC,CAAC,MAAgB,EAAE,EAAE;QAC5D,mBAAmB,CAAC,GAAG,CAAC,MAAM,CAAC,CAAA;IACjC,CAAC,EAAE,CAAC,mBAAmB,CAAC,CAAC,CAAA;IAEzB,cAAc;IACd,MAAM,sBAAsB,GAAG,WAAW,CAAC,CAAC,MAAgB,EAAE,EAAE;QAC9D,mBAAmB,CAAC,MAAM,CAAC,MAAM,CAAC,CAAA;IACpC,CAAC,EAAE,CAAC,mBAAmB,CAAC,CAAC,CAAA;IAEzB,OAAO,CACL,KAAC,YAAY,CAAC,QAAQ,IACpB,KAAK,EAAE;YACL,OAAO;YACP,aAAa;YACb,mBAAmB;YACnB,oBAAoB;YACpB,sBAAsB;SACvB,YAED,KAAC,mBAAmB,IAAC,KAAK,EAAE,yBAAyB,YACnD,KAAC,qBAAqB,IAAC,cAAc,EAAE,2BAA2B,YAC/D,QAAQ,GACa,GACJ,GACA,CACzB,CAAA;AACH,CAAC,CAAA;AAED;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAsB,EAAE;IAC9C,MAAM,OAAO,GAAG,UAAU,CAAC,YAAY,CAAC,CAAA;IAExC,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,MAAM,IAAI,KAAK,CAAC,4CAA4C,CAAC,CAAA;IAC/D,CAAC;IAED,OAAO,OAAO,CAAA;AAChB,CAAC,CAAA"}
+{"version":3,"file":"XRiftContext.js","sourceRoot":"","sources":["../../src/contexts/XRiftContext.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAkB,WAAW,EAAE,UAAU,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEjG,OAAO,EAAE,qBAAqB,EAAkC,MAAM,wBAAwB,CAAA;AAC9F,OAAO,EAAE,mBAAmB,EAAgC,MAAM,sBAAsB,CAAA;AAExF,sBAAsB;AACtB,MAAM,sCAAsC,GAAG,GAA4B,EAAE,CAAC,CAAC;IAC7E,YAAY,EAAE,IAAI;IAClB,SAAS,EAAE,KAAK;IAChB,gBAAgB,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,uCAAuC,CAAC;IAC5E,eAAe,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,sCAAsC,CAAC;CAC3E,CAAC,CAAA;AAgCF;;;GAGG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,aAAa,CAA2B,IAAI,CAAC,CAAA;AAkBzE;;;;GAIG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAC5B,OAAO,EACP,aAAa,GAAG,IAAI,EACpB,2BAA2B,EAC3B,yBAAyB,EACzB,QAAQ,GACF,EAAE,EAAE;IACV,qBAAqB;IACrB,MAAM,CAAC,mBAAmB,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,GAAG,EAAY,CAAC,CAAA;IAEjE,8BAA8B;IAC9B,MAAM,eAAe,GAAG,OAAO,CAC7B,GAAG,EAAE,CAAC,yBAAyB,IAAI,sCAAsC,EAAE,EAC3E,CAAC,yBAAyB,CAAC,CAC5B,CAAA;IAED,YAAY;IACZ,MAAM,oBAAoB,GAAG,WAAW,CAAC,CAAC,MAAgB,EAAE,EAAE;QAC5D,mBAAmB,CAAC,GAAG,CAAC,MAAM,CAAC,CAAA;IACjC,CAAC,EAAE,CAAC,mBAAmB,CAAC,CAAC,CAAA;IAEzB,cAAc;IACd,MAAM,sBAAsB,GAAG,WAAW,CAAC,CAAC,MAAgB,EAAE,EAAE;QAC9D,mBAAmB,CAAC,MAAM,CAAC,MAAM,CAAC,CAAA;IACpC,CAAC,EAAE,CAAC,mBAAmB,CAAC,CAAC,CAAA;IAEzB,OAAO,CACL,KAAC,YAAY,CAAC,QAAQ,IACpB,KAAK,EAAE;YACL,OAAO;YACP,aAAa;YACb,mBAAmB;YACnB,oBAAoB;YACpB,sBAAsB;SACvB,YAED,KAAC,mBAAmB,IAAC,KAAK,EAAE,eAAe,YACzC,KAAC,qBAAqB,IAAC,cAAc,EAAE,2BAA2B,YAC/D,QAAQ,GACa,GACJ,GACA,CACzB,CAAA;AACH,CAAC,CAAA;AAED;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAsB,EAAE;IAC9C,MAAM,OAAO,GAAG,UAAU,CAAC,YAAY,CAAC,CAAA;IAExC,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,MAAM,IAAI,KAAK,CAAC,4CAA4C,CAAC,CAAA;IAC/D,CAAC;IAED,OAAO,OAAO,CAAA;AAChB,CAAC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xrift/world-components",
-  "version": "0.10.0",
+  "version": "0.10.2",
   "description": "Shared components and utilities for Xrift worlds",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",