@xrift/world-components 0.21.12 → 0.22.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/LiveVideoPlayer/components/ControlPanel/LiveIndicator.d.ts +8 -0
- package/dist/components/LiveVideoPlayer/components/ControlPanel/LiveIndicator.d.ts.map +1 -0
- package/dist/components/LiveVideoPlayer/{LiveIndicator.js → components/ControlPanel/LiveIndicator.js} +5 -5
- package/dist/components/LiveVideoPlayer/components/ControlPanel/LiveIndicator.js.map +1 -0
- package/dist/components/LiveVideoPlayer/components/ControlPanel/index.d.ts +16 -0
- package/dist/components/LiveVideoPlayer/components/ControlPanel/index.d.ts.map +1 -0
- package/dist/components/LiveVideoPlayer/components/ControlPanel/index.js +28 -0
- package/dist/components/LiveVideoPlayer/components/ControlPanel/index.js.map +1 -0
- package/dist/components/LiveVideoPlayer/components/LiveVideoTexture.d.ts +14 -0
- package/dist/components/LiveVideoPlayer/components/LiveVideoTexture.d.ts.map +1 -0
- package/dist/components/LiveVideoPlayer/components/LiveVideoTexture.js +18 -0
- package/dist/components/LiveVideoPlayer/components/LiveVideoTexture.js.map +1 -0
- package/dist/components/LiveVideoPlayer/components/index.d.ts +3 -0
- package/dist/components/LiveVideoPlayer/components/index.d.ts.map +1 -0
- package/dist/components/LiveVideoPlayer/components/index.js +3 -0
- package/dist/components/LiveVideoPlayer/components/index.js.map +1 -0
- package/dist/components/LiveVideoPlayer/hooks/useHlsVideo/__tests__/utils.test.d.ts +2 -0
- package/dist/components/LiveVideoPlayer/hooks/useHlsVideo/__tests__/utils.test.d.ts.map +1 -0
- package/dist/components/LiveVideoPlayer/hooks/useHlsVideo/__tests__/utils.test.js +196 -0
- package/dist/components/LiveVideoPlayer/hooks/useHlsVideo/__tests__/utils.test.js.map +1 -0
- package/dist/components/LiveVideoPlayer/hooks/useHlsVideo/classes/HlsJsPlayer.d.ts +17 -0
- package/dist/components/LiveVideoPlayer/hooks/useHlsVideo/classes/HlsJsPlayer.d.ts.map +1 -0
- package/dist/components/LiveVideoPlayer/hooks/useHlsVideo/classes/HlsJsPlayer.js +73 -0
- package/dist/components/LiveVideoPlayer/hooks/useHlsVideo/classes/HlsJsPlayer.js.map +1 -0
- package/dist/components/LiveVideoPlayer/hooks/useHlsVideo/classes/NativeHlsPlayer.d.ts +14 -0
- package/dist/components/LiveVideoPlayer/hooks/useHlsVideo/classes/NativeHlsPlayer.d.ts.map +1 -0
- package/dist/components/LiveVideoPlayer/hooks/useHlsVideo/classes/NativeHlsPlayer.js +46 -0
- package/dist/components/LiveVideoPlayer/hooks/useHlsVideo/classes/NativeHlsPlayer.js.map +1 -0
- package/dist/components/LiveVideoPlayer/hooks/useHlsVideo/classes/RecoveryTracker.d.ts +21 -0
- package/dist/components/LiveVideoPlayer/hooks/useHlsVideo/classes/RecoveryTracker.d.ts.map +1 -0
- package/dist/components/LiveVideoPlayer/hooks/useHlsVideo/classes/RecoveryTracker.js +54 -0
- package/dist/components/LiveVideoPlayer/hooks/useHlsVideo/classes/RecoveryTracker.js.map +1 -0
- package/dist/components/LiveVideoPlayer/hooks/useHlsVideo/classes/__tests__/HlsJsPlayer.test.d.ts +2 -0
- package/dist/components/LiveVideoPlayer/hooks/useHlsVideo/classes/__tests__/HlsJsPlayer.test.d.ts.map +1 -0
- package/dist/components/LiveVideoPlayer/hooks/useHlsVideo/classes/__tests__/HlsJsPlayer.test.js +146 -0
- package/dist/components/LiveVideoPlayer/hooks/useHlsVideo/classes/__tests__/HlsJsPlayer.test.js.map +1 -0
- package/dist/components/LiveVideoPlayer/hooks/useHlsVideo/classes/__tests__/NativeHlsPlayer.test.d.ts +2 -0
- package/dist/components/LiveVideoPlayer/hooks/useHlsVideo/classes/__tests__/NativeHlsPlayer.test.d.ts.map +1 -0
- package/dist/components/LiveVideoPlayer/hooks/useHlsVideo/classes/__tests__/NativeHlsPlayer.test.js +94 -0
- package/dist/components/LiveVideoPlayer/hooks/useHlsVideo/classes/__tests__/NativeHlsPlayer.test.js.map +1 -0
- package/dist/components/LiveVideoPlayer/hooks/useHlsVideo/classes/__tests__/RecoveryTracker.test.d.ts +2 -0
- package/dist/components/LiveVideoPlayer/hooks/useHlsVideo/classes/__tests__/RecoveryTracker.test.d.ts.map +1 -0
- package/dist/components/LiveVideoPlayer/hooks/useHlsVideo/classes/__tests__/RecoveryTracker.test.js +74 -0
- package/dist/components/LiveVideoPlayer/hooks/useHlsVideo/classes/__tests__/RecoveryTracker.test.js.map +1 -0
- package/dist/components/LiveVideoPlayer/hooks/useHlsVideo/index.d.ts +31 -0
- package/dist/components/LiveVideoPlayer/hooks/useHlsVideo/index.d.ts.map +1 -0
- package/dist/components/LiveVideoPlayer/hooks/useHlsVideo/index.js +108 -0
- package/dist/components/LiveVideoPlayer/hooks/useHlsVideo/index.js.map +1 -0
- package/dist/components/LiveVideoPlayer/hooks/useHlsVideo/types.d.ts +34 -0
- package/dist/components/LiveVideoPlayer/hooks/useHlsVideo/types.d.ts.map +1 -0
- package/dist/components/LiveVideoPlayer/hooks/useHlsVideo/types.js +2 -0
- package/dist/components/LiveVideoPlayer/hooks/useHlsVideo/types.js.map +1 -0
- package/dist/components/LiveVideoPlayer/hooks/useHlsVideo/utils.d.ts +15 -0
- package/dist/components/LiveVideoPlayer/hooks/useHlsVideo/utils.d.ts.map +1 -0
- package/dist/components/LiveVideoPlayer/hooks/useHlsVideo/utils.js +62 -0
- package/dist/components/LiveVideoPlayer/hooks/useHlsVideo/utils.js.map +1 -0
- package/dist/components/LiveVideoPlayer/hooks/useLiveVideoPlayer/index.d.ts +25 -0
- package/dist/components/LiveVideoPlayer/hooks/useLiveVideoPlayer/index.d.ts.map +1 -0
- package/dist/components/LiveVideoPlayer/hooks/useLiveVideoPlayer/index.js +97 -0
- package/dist/components/LiveVideoPlayer/hooks/useLiveVideoPlayer/index.js.map +1 -0
- package/dist/components/LiveVideoPlayer/hooks/useLiveVideoPlayer.d.ts +25 -0
- package/dist/components/LiveVideoPlayer/hooks/useLiveVideoPlayer.d.ts.map +1 -0
- package/dist/components/LiveVideoPlayer/hooks/useLiveVideoPlayer.js +97 -0
- package/dist/components/LiveVideoPlayer/hooks/useLiveVideoPlayer.js.map +1 -0
- package/dist/components/LiveVideoPlayer/index.d.ts +20 -3
- package/dist/components/LiveVideoPlayer/index.d.ts.map +1 -1
- package/dist/components/LiveVideoPlayer/index.js +16 -133
- package/dist/components/LiveVideoPlayer/index.js.map +1 -1
- package/dist/components/LiveVideoPlayer/types.d.ts +6 -66
- package/dist/components/LiveVideoPlayer/types.d.ts.map +1 -1
- package/dist/components/Video180Sphere/EyeView.d.ts +14 -0
- package/dist/components/Video180Sphere/EyeView.d.ts.map +1 -0
- package/dist/components/Video180Sphere/EyeView.js +77 -0
- package/dist/components/Video180Sphere/EyeView.js.map +1 -0
- package/dist/components/Video180Sphere/index.d.ts +19 -0
- package/dist/components/Video180Sphere/index.d.ts.map +1 -0
- package/dist/components/Video180Sphere/index.js +90 -0
- package/dist/components/Video180Sphere/index.js.map +1 -0
- package/dist/components/Video180Sphere/types.d.ts +35 -0
- package/dist/components/Video180Sphere/types.d.ts.map +1 -0
- package/dist/components/Video180Sphere/types.js +2 -0
- package/dist/components/Video180Sphere/types.js.map +1 -0
- package/dist/components/VideoPlayer/ControlPanel.d.ts +1 -1
- package/dist/components/VideoPlayer/ControlPanel.d.ts.map +1 -1
- package/dist/components/VideoPlayer/ControlPanel.js +20 -9
- package/dist/components/VideoPlayer/ControlPanel.js.map +1 -1
- package/dist/components/VideoPlayer/ProgressBar.d.ts.map +1 -1
- package/dist/components/VideoPlayer/ProgressBar.js +2 -1
- package/dist/components/VideoPlayer/ProgressBar.js.map +1 -1
- package/dist/components/VideoPlayer/__tests__/utils.test.d.ts +2 -0
- package/dist/components/VideoPlayer/__tests__/utils.test.d.ts.map +1 -0
- package/dist/components/VideoPlayer/__tests__/utils.test.js +23 -0
- package/dist/components/VideoPlayer/__tests__/utils.test.js.map +1 -0
- package/dist/components/VideoPlayer/components/ControlPanel.d.ts +18 -0
- package/dist/components/VideoPlayer/components/ControlPanel.d.ts.map +1 -0
- package/dist/components/VideoPlayer/components/ControlPanel.js +34 -0
- package/dist/components/VideoPlayer/components/ControlPanel.js.map +1 -0
- package/dist/components/VideoPlayer/components/ProgressBar.d.ts +12 -0
- package/dist/components/VideoPlayer/components/ProgressBar.d.ts.map +1 -0
- package/dist/components/VideoPlayer/components/ProgressBar.js +21 -0
- package/dist/components/VideoPlayer/components/ProgressBar.js.map +1 -0
- package/dist/components/VideoPlayer/components/index.d.ts +3 -0
- package/dist/components/VideoPlayer/components/index.d.ts.map +1 -0
- package/dist/components/VideoPlayer/components/index.js +3 -0
- package/dist/components/VideoPlayer/components/index.js.map +1 -0
- package/dist/components/VideoPlayer/index.d.ts +20 -3
- package/dist/components/VideoPlayer/index.d.ts.map +1 -1
- package/dist/components/VideoPlayer/index.js +29 -89
- package/dist/components/VideoPlayer/index.js.map +1 -1
- package/dist/components/VideoPlayer/types.d.ts +1 -28
- package/dist/components/VideoPlayer/types.d.ts.map +1 -1
- package/dist/components/VideoPlayer/utils.d.ts +0 -27
- package/dist/components/VideoPlayer/utils.d.ts.map +1 -1
- package/dist/components/VideoPlayer/utils.js +0 -28
- package/dist/components/VideoPlayer/utils.js.map +1 -1
- package/dist/components/VideoPlayer/utils.test.js +1 -87
- package/dist/components/VideoPlayer/utils.test.js.map +1 -1
- package/dist/components/commons/ErrorBoundary/index.d.ts +18 -0
- package/dist/components/commons/ErrorBoundary/index.d.ts.map +1 -0
- package/dist/components/commons/ErrorBoundary/index.js +22 -0
- package/dist/components/commons/ErrorBoundary/index.js.map +1 -0
- package/dist/components/commons/IconButton/index.d.ts +23 -0
- package/dist/components/commons/IconButton/index.d.ts.map +1 -0
- package/dist/components/commons/IconButton/index.js +12 -0
- package/dist/components/commons/IconButton/index.js.map +1 -0
- package/dist/components/commons/PlaceholderScreen/index.d.ts +9 -0
- package/dist/components/commons/PlaceholderScreen/index.d.ts.map +1 -0
- package/dist/components/commons/PlaceholderScreen/index.js +6 -0
- package/dist/components/commons/PlaceholderScreen/index.js.map +1 -0
- package/dist/components/commons/VideoMesh/index.d.ts +14 -0
- package/dist/components/commons/VideoMesh/index.d.ts.map +1 -0
- package/dist/components/commons/VideoMesh/index.js +91 -0
- package/dist/components/commons/VideoMesh/index.js.map +1 -0
- package/dist/components/commons/VolumeControl/index.d.ts +9 -0
- package/dist/components/commons/VolumeControl/index.d.ts.map +1 -0
- package/dist/components/{LiveVideoPlayer/VolumeControl.js → commons/VolumeControl/index.js} +6 -3
- package/dist/components/commons/VolumeControl/index.js.map +1 -0
- package/dist/components/commons/utils.d.ts +24 -0
- package/dist/components/commons/utils.d.ts.map +1 -0
- package/dist/components/commons/utils.js +23 -0
- package/dist/components/commons/utils.js.map +1 -0
- package/dist/components/commons/utils.test.d.ts +2 -0
- package/dist/components/commons/utils.test.d.ts.map +1 -0
- package/dist/components/commons/utils.test.js +79 -0
- package/dist/components/commons/utils.test.js.map +1 -0
- package/dist/hooks/useSyncState.d.ts +8 -0
- package/dist/hooks/useSyncState.d.ts.map +1 -0
- package/dist/hooks/useSyncState.js +16 -0
- package/dist/hooks/useSyncState.js.map +1 -0
- package/dist/hooks/useVideoElement.d.ts +30 -0
- package/dist/hooks/useVideoElement.d.ts.map +1 -0
- package/dist/hooks/useVideoElement.js +182 -0
- package/dist/hooks/useVideoElement.js.map +1 -0
- package/dist/index.d.ts +3 -2
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +3 -2
- package/dist/index.js.map +1 -1
- package/package.json +2 -1
- package/dist/components/LiveVideoPlayer/ControlPanel.d.ts +0 -3
- package/dist/components/LiveVideoPlayer/ControlPanel.d.ts.map +0 -1
- package/dist/components/LiveVideoPlayer/ControlPanel.js +0 -17
- package/dist/components/LiveVideoPlayer/ControlPanel.js.map +0 -1
- package/dist/components/LiveVideoPlayer/LiveIndicator.d.ts +0 -3
- package/dist/components/LiveVideoPlayer/LiveIndicator.d.ts.map +0 -1
- package/dist/components/LiveVideoPlayer/LiveIndicator.js.map +0 -1
- package/dist/components/LiveVideoPlayer/PlayPauseButton.d.ts +0 -3
- package/dist/components/LiveVideoPlayer/PlayPauseButton.d.ts.map +0 -1
- package/dist/components/LiveVideoPlayer/PlayPauseButton.js +0 -9
- package/dist/components/LiveVideoPlayer/PlayPauseButton.js.map +0 -1
- package/dist/components/LiveVideoPlayer/ReloadButton.d.ts +0 -3
- package/dist/components/LiveVideoPlayer/ReloadButton.d.ts.map +0 -1
- package/dist/components/LiveVideoPlayer/ReloadButton.js +0 -9
- package/dist/components/LiveVideoPlayer/ReloadButton.js.map +0 -1
- package/dist/components/LiveVideoPlayer/UrlInputButton.d.ts +0 -3
- package/dist/components/LiveVideoPlayer/UrlInputButton.d.ts.map +0 -1
- package/dist/components/LiveVideoPlayer/UrlInputButton.js +0 -23
- package/dist/components/LiveVideoPlayer/UrlInputButton.js.map +0 -1
- package/dist/components/LiveVideoPlayer/VolumeControl.d.ts +0 -3
- package/dist/components/LiveVideoPlayer/VolumeControl.d.ts.map +0 -1
- package/dist/components/LiveVideoPlayer/VolumeControl.js.map +0 -1
- package/dist/components/VideoPlayer/PlayPauseButton.d.ts +0 -3
- package/dist/components/VideoPlayer/PlayPauseButton.d.ts.map +0 -1
- package/dist/components/VideoPlayer/PlayPauseButton.js +0 -9
- package/dist/components/VideoPlayer/PlayPauseButton.js.map +0 -1
- package/dist/components/VideoPlayer/StopButton.d.ts +0 -3
- package/dist/components/VideoPlayer/StopButton.d.ts.map +0 -1
- package/dist/components/VideoPlayer/StopButton.js +0 -9
- package/dist/components/VideoPlayer/StopButton.js.map +0 -1
- package/dist/components/VideoPlayer/UrlInputButton.d.ts +0 -3
- package/dist/components/VideoPlayer/UrlInputButton.d.ts.map +0 -1
- package/dist/components/VideoPlayer/UrlInputButton.js +0 -23
- package/dist/components/VideoPlayer/UrlInputButton.js.map +0 -1
- package/dist/components/VideoPlayer/VolumeControl.d.ts +0 -3
- package/dist/components/VideoPlayer/VolumeControl.d.ts.map +0 -1
- package/dist/components/VideoPlayer/VolumeControl.js +0 -26
- package/dist/components/VideoPlayer/VolumeControl.js.map +0 -1
|
@@ -1,101 +1,44 @@
|
|
|
1
|
-
import { jsx as _jsx,
|
|
2
|
-
import { memo, Suspense, useState, useCallback,
|
|
3
|
-
import {
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { memo, Suspense, useState, useCallback, useRef } from 'react';
|
|
3
|
+
import { Text } from '@react-three/drei';
|
|
4
4
|
import { useFrame } from '@react-three/fiber';
|
|
5
|
-
import { ControlPanel } from './ControlPanel';
|
|
6
|
-
import {
|
|
5
|
+
import { ControlPanel } from './components/ControlPanel';
|
|
6
|
+
import { useVideoElement } from '../../hooks/useVideoElement';
|
|
7
|
+
import { VideoMesh } from '../commons/VideoMesh';
|
|
8
|
+
import { ErrorBoundary } from '../commons/ErrorBoundary';
|
|
9
|
+
import { PlaceholderScreen } from '../commons/PlaceholderScreen';
|
|
7
10
|
const DEFAULT_POSITION = [0, 2, -5];
|
|
8
11
|
const DEFAULT_ROTATION = [0, 0, 0];
|
|
9
12
|
const DEFAULT_WIDTH = 4;
|
|
10
|
-
class VideoErrorBoundary extends Component {
|
|
11
|
-
constructor(props) {
|
|
12
|
-
super(props);
|
|
13
|
-
this.state = { hasError: false };
|
|
14
|
-
}
|
|
15
|
-
static getDerivedStateFromError() {
|
|
16
|
-
return { hasError: true };
|
|
17
|
-
}
|
|
18
|
-
componentDidCatch(error) {
|
|
19
|
-
console.error('Video load error:', error);
|
|
20
|
-
this.props.onError?.(error);
|
|
21
|
-
}
|
|
22
|
-
render() {
|
|
23
|
-
if (this.state.hasError) {
|
|
24
|
-
return this.props.fallback;
|
|
25
|
-
}
|
|
26
|
-
return this.props.children;
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
13
|
/** 動画テクスチャを表示するコンポーネント(Suspense内で使用) */
|
|
30
|
-
const
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
14
|
+
const VideoTextureInner = memo(({ url, cacheKey, width, screenHeight, playing, volume, onDurationChange, onProgressChange, seekTimeRef, }) => {
|
|
15
|
+
const { texture, videoRef } = useVideoElement({
|
|
16
|
+
url,
|
|
17
|
+
cacheKey,
|
|
18
|
+
playing,
|
|
19
|
+
volume,
|
|
35
20
|
loop: true,
|
|
36
|
-
|
|
21
|
+
onDurationChange,
|
|
37
22
|
});
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
}, [texture, videoRef]);
|
|
41
|
-
useEffect(() => {
|
|
23
|
+
// シーク処理
|
|
24
|
+
useFrame(() => {
|
|
42
25
|
const video = videoRef.current;
|
|
43
26
|
if (!video)
|
|
44
27
|
return;
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
}
|
|
50
|
-
else {
|
|
51
|
-
video.pause();
|
|
28
|
+
// シークリクエストがあれば処理
|
|
29
|
+
if (seekTimeRef.current !== null) {
|
|
30
|
+
video.currentTime = seekTimeRef.current;
|
|
31
|
+
seekTimeRef.current = null;
|
|
52
32
|
}
|
|
53
|
-
|
|
54
|
-
// Web Audio API を使用した音量制御(iOS対応)
|
|
55
|
-
useWebAudioVolume(videoRef.current, volume);
|
|
56
|
-
useEffect(() => {
|
|
57
|
-
const video = videoRef.current;
|
|
58
|
-
if (!video)
|
|
59
|
-
return;
|
|
60
|
-
const handleLoadedMetadata = () => {
|
|
61
|
-
onDurationChange(video.duration || 0);
|
|
62
|
-
};
|
|
33
|
+
// 進捗更新
|
|
63
34
|
if (video.duration) {
|
|
64
|
-
|
|
35
|
+
const currentProgress = video.currentTime / video.duration;
|
|
36
|
+
onProgressChange(currentProgress);
|
|
65
37
|
}
|
|
66
|
-
video.addEventListener('loadedmetadata', handleLoadedMetadata);
|
|
67
|
-
return () => {
|
|
68
|
-
video.removeEventListener('loadedmetadata', handleLoadedMetadata);
|
|
69
|
-
};
|
|
70
|
-
}, [texture, onDurationChange, videoRef]);
|
|
71
|
-
useFrame(() => {
|
|
72
|
-
const video = videoRef.current;
|
|
73
|
-
if (!video || !video.duration)
|
|
74
|
-
return;
|
|
75
|
-
const currentProgress = video.currentTime / video.duration;
|
|
76
|
-
onProgressChange(currentProgress);
|
|
77
38
|
});
|
|
78
|
-
|
|
79
|
-
const video = texture.image;
|
|
80
|
-
return () => {
|
|
81
|
-
// 再生を停止
|
|
82
|
-
video.pause();
|
|
83
|
-
// ソースを完全にクリア
|
|
84
|
-
video.src = '';
|
|
85
|
-
video.removeAttribute('src');
|
|
86
|
-
video.srcObject = null;
|
|
87
|
-
// MediaSourceをリリースするためにloadを呼び出し
|
|
88
|
-
video.load();
|
|
89
|
-
// テクスチャを破棄
|
|
90
|
-
texture.dispose();
|
|
91
|
-
};
|
|
92
|
-
}, [texture]);
|
|
93
|
-
return (_jsxs("mesh", { children: [_jsx("planeGeometry", { args: [width, screenHeight] }), _jsx("meshBasicMaterial", { map: texture, toneMapped: false })] }));
|
|
39
|
+
return _jsx(VideoMesh, { texture: texture, width: width, height: screenHeight });
|
|
94
40
|
});
|
|
95
|
-
|
|
96
|
-
/** プレースホルダー画面(読み込み中/エラー時/URL未設定時) */
|
|
97
|
-
const PlaceholderScreen = memo(({ width, screenHeight, color }) => (_jsxs("mesh", { children: [_jsx("planeGeometry", { args: [width, screenHeight] }), _jsx("meshBasicMaterial", { color: color })] })));
|
|
98
|
-
PlaceholderScreen.displayName = 'PlaceholderScreen';
|
|
41
|
+
VideoTextureInner.displayName = 'VideoTextureInner';
|
|
99
42
|
export const VideoPlayer = memo(({ id, position = DEFAULT_POSITION, rotation = DEFAULT_ROTATION, width = DEFAULT_WIDTH, url: initialUrl, playing: initialPlaying = true, volume: initialVolume = 1, }) => {
|
|
100
43
|
const [currentUrl, setCurrentUrl] = useState(initialUrl);
|
|
101
44
|
const [playing, setPlaying] = useState(initialPlaying);
|
|
@@ -104,7 +47,7 @@ export const VideoPlayer = memo(({ id, position = DEFAULT_POSITION, rotation = D
|
|
|
104
47
|
const [duration, setDuration] = useState(0);
|
|
105
48
|
const [hasError, setHasError] = useState(false);
|
|
106
49
|
const [reloadKey, setReloadKey] = useState(0);
|
|
107
|
-
const
|
|
50
|
+
const seekTimeRef = useRef(null);
|
|
108
51
|
const screenHeight = width * (9 / 16);
|
|
109
52
|
const handleUrlChange = useCallback((newUrl) => {
|
|
110
53
|
setCurrentUrl(newUrl);
|
|
@@ -127,10 +70,7 @@ export const VideoPlayer = memo(({ id, position = DEFAULT_POSITION, rotation = D
|
|
|
127
70
|
setVolume(newVolume);
|
|
128
71
|
}, []);
|
|
129
72
|
const handleSeek = useCallback((time) => {
|
|
130
|
-
|
|
131
|
-
if (!video)
|
|
132
|
-
return;
|
|
133
|
-
video.currentTime = time;
|
|
73
|
+
seekTimeRef.current = time;
|
|
134
74
|
}, []);
|
|
135
75
|
const handleDurationChange = useCallback((newDuration) => {
|
|
136
76
|
setDuration(newDuration);
|
|
@@ -142,7 +82,7 @@ export const VideoPlayer = memo(({ id, position = DEFAULT_POSITION, rotation = D
|
|
|
142
82
|
console.error('VideoPlayer error:', error);
|
|
143
83
|
setHasError(true);
|
|
144
84
|
}, []);
|
|
145
|
-
return (_jsxs("group", { position: position, rotation: rotation, children: [!currentUrl || hasError ? (_jsxs(_Fragment, { children: [_jsx(PlaceholderScreen, { width: width, screenHeight: screenHeight, color: "#000000" }), !currentUrl && (_jsx(Text, { position: [0, 0, 0.01], fontSize: width * 0.05, color: "#666666", anchorX: "center", anchorY: "middle", children: "URL\u3092\u5165\u529B\u3057\u3066\u304F\u3060\u3055\u3044" }))] })) : (_jsx(
|
|
85
|
+
return (_jsxs("group", { position: position, rotation: rotation, children: [!currentUrl || hasError ? (_jsxs(_Fragment, { children: [_jsx(PlaceholderScreen, { width: width, screenHeight: screenHeight, color: "#000000" }), !currentUrl && (_jsx(Text, { position: [0, 0, 0.01], fontSize: width * 0.05, color: "#666666", anchorX: "center", anchorY: "middle", children: "URL\u3092\u5165\u529B\u3057\u3066\u304F\u3060\u3055\u3044" }))] })) : (_jsx(ErrorBoundary, { fallback: _jsx(PlaceholderScreen, { width: width, screenHeight: screenHeight, color: "#000000" }), onError: handleError, children: _jsx(Suspense, { fallback: _jsx(PlaceholderScreen, { width: width, screenHeight: screenHeight, color: "#333333" }), children: _jsx(VideoTextureInner, { url: currentUrl, cacheKey: reloadKey, width: width, screenHeight: screenHeight, playing: playing, volume: volume, onDurationChange: handleDurationChange, onProgressChange: handleProgressChange, seekTimeRef: seekTimeRef }, `${currentUrl}-${reloadKey}`) }) })), _jsx(ControlPanel, { id: id, width: width, screenHeight: screenHeight, playing: playing, progress: progress, duration: duration, volume: volume, url: currentUrl || '', onPlayPause: handlePlayPause, onStop: handleStop, onSeek: handleSeek, onVolumeChange: handleVolumeChange, onUrlChange: handleUrlChange })] }));
|
|
146
86
|
});
|
|
147
87
|
VideoPlayer.displayName = 'VideoPlayer';
|
|
148
88
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/VideoPlayer/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,WAAW,EAAE,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/VideoPlayer/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -25,20 +25,13 @@ export interface ControlPanelProps {
|
|
|
25
25
|
progress: number;
|
|
26
26
|
duration: number;
|
|
27
27
|
volume: number;
|
|
28
|
-
|
|
28
|
+
url: string;
|
|
29
29
|
onPlayPause: () => void;
|
|
30
30
|
onStop: () => void;
|
|
31
31
|
onSeek: (time: number) => void;
|
|
32
32
|
onVolumeChange: (volume: number) => void;
|
|
33
33
|
onUrlChange: (url: string) => void;
|
|
34
34
|
}
|
|
35
|
-
export interface PlayPauseButtonProps {
|
|
36
|
-
id: string;
|
|
37
|
-
position: [number, number, number];
|
|
38
|
-
size: number;
|
|
39
|
-
playing: boolean;
|
|
40
|
-
onInteract: () => void;
|
|
41
|
-
}
|
|
42
35
|
export interface ProgressBarProps {
|
|
43
36
|
id: string;
|
|
44
37
|
position: [number, number, number];
|
|
@@ -48,24 +41,4 @@ export interface ProgressBarProps {
|
|
|
48
41
|
duration: number;
|
|
49
42
|
onSeek: (time: number) => void;
|
|
50
43
|
}
|
|
51
|
-
export interface VolumeControlProps {
|
|
52
|
-
id: string;
|
|
53
|
-
position: [number, number, number];
|
|
54
|
-
size: number;
|
|
55
|
-
volume: number;
|
|
56
|
-
onVolumeChange: (volume: number) => void;
|
|
57
|
-
}
|
|
58
|
-
export interface UrlInputButtonProps {
|
|
59
|
-
id: string;
|
|
60
|
-
position: [number, number, number];
|
|
61
|
-
size: number;
|
|
62
|
-
currentUrl: string;
|
|
63
|
-
onUrlChange: (url: string) => void;
|
|
64
|
-
}
|
|
65
|
-
export interface StopButtonProps {
|
|
66
|
-
id: string;
|
|
67
|
-
position: [number, number, number];
|
|
68
|
-
size: number;
|
|
69
|
-
onInteract: () => void;
|
|
70
|
-
}
|
|
71
44
|
//# sourceMappingURL=types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/VideoPlayer/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;AAE5D,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,gBAAgB,EAAE,OAAO,GAAG,aAAa,GAAG,OAAO,CAAC;IACjG,sBAAsB;IACtB,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,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,aAAa;IACb,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,0BAA0B;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,yBAAyB;IACzB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,6BAA6B;IAC7B,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAA;CAC1B;AAED,MAAM,WAAW,iBAAiB;IAChC,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,YAAY,EAAE,MAAM,CAAA;IACpB,OAAO,EAAE,OAAO,CAAA;IAChB,QAAQ,EAAE,MAAM,CAAA;IAChB,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,EAAE,MAAM,CAAA;IACd,
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/VideoPlayer/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;AAE5D,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,gBAAgB,EAAE,OAAO,GAAG,aAAa,GAAG,OAAO,CAAC;IACjG,sBAAsB;IACtB,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,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,aAAa;IACb,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,0BAA0B;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,yBAAyB;IACzB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,6BAA6B;IAC7B,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAA;CAC1B;AAED,MAAM,WAAW,iBAAiB;IAChC,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,YAAY,EAAE,MAAM,CAAA;IACpB,OAAO,EAAE,OAAO,CAAA;IAChB,QAAQ,EAAE,MAAM,CAAA;IAChB,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,EAAE,MAAM,CAAA;IACd,GAAG,EAAE,MAAM,CAAA;IACX,WAAW,EAAE,MAAM,IAAI,CAAA;IACvB,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IAC9B,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IACxC,WAAW,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;CACnC;AAED,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,MAAM,CAAA;IACV,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAA;IAClC,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;IACd,QAAQ,EAAE,MAAM,CAAA;IAChB,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;CAC/B"}
|
|
@@ -2,31 +2,4 @@
|
|
|
2
2
|
* 時間を「M:SS」形式にフォーマット
|
|
3
3
|
*/
|
|
4
4
|
export declare const formatTime: (seconds: number) => string;
|
|
5
|
-
/**
|
|
6
|
-
* セグメント情報を生成
|
|
7
|
-
*/
|
|
8
|
-
export interface Segment {
|
|
9
|
-
index: number;
|
|
10
|
-
xPos: number;
|
|
11
|
-
value: number;
|
|
12
|
-
label: string;
|
|
13
|
-
}
|
|
14
|
-
export interface CalculateSegmentsOptions {
|
|
15
|
-
segments: number;
|
|
16
|
-
width: number;
|
|
17
|
-
maxValue: number;
|
|
18
|
-
formatLabel: (value: number, index: number) => string;
|
|
19
|
-
}
|
|
20
|
-
export declare const calculateSegments: ({ segments, width, maxValue, formatLabel, }: CalculateSegmentsOptions) => Segment[];
|
|
21
|
-
/**
|
|
22
|
-
* 音量に応じたアイコンを取得
|
|
23
|
-
*/
|
|
24
|
-
export declare const getVolumeIcon: (volume: number) => string;
|
|
25
|
-
/**
|
|
26
|
-
* 進捗バーの幅とオフセットを計算
|
|
27
|
-
*/
|
|
28
|
-
export declare const calculateProgressBar: (progress: number, totalWidth: number) => {
|
|
29
|
-
width: number;
|
|
30
|
-
offset: number;
|
|
31
|
-
};
|
|
32
5
|
//# sourceMappingURL=utils.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/VideoPlayer/utils.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,eAAO,MAAM,UAAU,GAAI,SAAS,MAAM,KAAG,MAI5C,CAAA
|
|
1
|
+
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/VideoPlayer/utils.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,eAAO,MAAM,UAAU,GAAI,SAAS,MAAM,KAAG,MAI5C,CAAA"}
|
|
@@ -6,32 +6,4 @@ export const formatTime = (seconds) => {
|
|
|
6
6
|
const secs = Math.floor(seconds % 60);
|
|
7
7
|
return `${mins}:${secs.toString().padStart(2, '0')}`;
|
|
8
8
|
};
|
|
9
|
-
export const calculateSegments = ({ segments, width, maxValue, formatLabel, }) => {
|
|
10
|
-
const segmentWidth = width / segments;
|
|
11
|
-
return Array.from({ length: segments }).map((_, i) => {
|
|
12
|
-
const value = (i / (segments - 1)) * maxValue;
|
|
13
|
-
const xPos = -width / 2 + segmentWidth * (i + 0.5);
|
|
14
|
-
return {
|
|
15
|
-
index: i,
|
|
16
|
-
xPos,
|
|
17
|
-
value,
|
|
18
|
-
label: formatLabel(value, i),
|
|
19
|
-
};
|
|
20
|
-
});
|
|
21
|
-
};
|
|
22
|
-
/**
|
|
23
|
-
* 音量に応じたアイコンを取得
|
|
24
|
-
*/
|
|
25
|
-
export const getVolumeIcon = (volume) => {
|
|
26
|
-
return volume === 0 ? '🔇' : '🔈';
|
|
27
|
-
};
|
|
28
|
-
/**
|
|
29
|
-
* 進捗バーの幅とオフセットを計算
|
|
30
|
-
*/
|
|
31
|
-
export const calculateProgressBar = (progress, totalWidth) => {
|
|
32
|
-
const clampedProgress = Math.min(1, Math.max(0, progress));
|
|
33
|
-
const width = totalWidth * clampedProgress;
|
|
34
|
-
const offset = -totalWidth / 2 + width / 2;
|
|
35
|
-
return { width, offset };
|
|
36
|
-
};
|
|
37
9
|
//# sourceMappingURL=utils.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/components/VideoPlayer/utils.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,OAAe,EAAU,EAAE;IACpD,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,EAAE,CAAC,CAAA;IACrC,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,EAAE,CAAC,CAAA;IACrC,OAAO,GAAG,IAAI,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,CAAA;AACtD,CAAC,CAAA
|
|
1
|
+
{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/components/VideoPlayer/utils.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,OAAe,EAAU,EAAE;IACpD,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,EAAE,CAAC,CAAA;IACrC,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,EAAE,CAAC,CAAA;IACrC,OAAO,GAAG,IAAI,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,CAAA;AACtD,CAAC,CAAA"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { describe, it, expect } from 'vitest';
|
|
2
|
-
import { formatTime
|
|
2
|
+
import { formatTime } from './utils';
|
|
3
3
|
describe('formatTime', () => {
|
|
4
4
|
it('0秒を0:00にフォーマット', () => {
|
|
5
5
|
expect(formatTime(0)).toBe('0:00');
|
|
@@ -20,90 +20,4 @@ describe('formatTime', () => {
|
|
|
20
20
|
expect(formatTime(65.9)).toBe('1:05');
|
|
21
21
|
});
|
|
22
22
|
});
|
|
23
|
-
describe('calculateSegments', () => {
|
|
24
|
-
it('5セグメントで0-100の値を生成', () => {
|
|
25
|
-
const segments = calculateSegments({
|
|
26
|
-
segments: 5,
|
|
27
|
-
width: 10,
|
|
28
|
-
maxValue: 100,
|
|
29
|
-
formatLabel: (value) => `${value}%`,
|
|
30
|
-
});
|
|
31
|
-
expect(segments).toHaveLength(5);
|
|
32
|
-
expect(segments[0].value).toBe(0);
|
|
33
|
-
expect(segments[4].value).toBe(100);
|
|
34
|
-
expect(segments[2].value).toBe(50);
|
|
35
|
-
});
|
|
36
|
-
it('11セグメントで0-1の値を生成(音量バー)', () => {
|
|
37
|
-
const segments = calculateSegments({
|
|
38
|
-
segments: 11,
|
|
39
|
-
width: 3,
|
|
40
|
-
maxValue: 1,
|
|
41
|
-
formatLabel: (value) => `${Math.round(value * 100)}%`,
|
|
42
|
-
});
|
|
43
|
-
expect(segments).toHaveLength(11);
|
|
44
|
-
expect(segments[0].value).toBe(0);
|
|
45
|
-
expect(segments[10].value).toBe(1);
|
|
46
|
-
expect(segments[5].value).toBeCloseTo(0.5);
|
|
47
|
-
});
|
|
48
|
-
it('xPosがセグメントの中央に配置される', () => {
|
|
49
|
-
const segments = calculateSegments({
|
|
50
|
-
segments: 4,
|
|
51
|
-
width: 8,
|
|
52
|
-
maxValue: 1,
|
|
53
|
-
formatLabel: () => '',
|
|
54
|
-
});
|
|
55
|
-
// width=8, segments=4 => segmentWidth=2
|
|
56
|
-
// 中央位置: -4 + 2*(0.5) = -3, -4 + 2*(1.5) = -1, -4 + 2*(2.5) = 1, -4 + 2*(3.5) = 3
|
|
57
|
-
expect(segments[0].xPos).toBe(-3);
|
|
58
|
-
expect(segments[1].xPos).toBe(-1);
|
|
59
|
-
expect(segments[2].xPos).toBe(1);
|
|
60
|
-
expect(segments[3].xPos).toBe(3);
|
|
61
|
-
});
|
|
62
|
-
it('formatLabelが正しく呼ばれる', () => {
|
|
63
|
-
const segments = calculateSegments({
|
|
64
|
-
segments: 3,
|
|
65
|
-
width: 6,
|
|
66
|
-
maxValue: 60,
|
|
67
|
-
formatLabel: (value, index) => index === 0 ? '最初' : `${value}秒`,
|
|
68
|
-
});
|
|
69
|
-
expect(segments[0].label).toBe('最初');
|
|
70
|
-
expect(segments[1].label).toBe('30秒');
|
|
71
|
-
expect(segments[2].label).toBe('60秒');
|
|
72
|
-
});
|
|
73
|
-
});
|
|
74
|
-
describe('getVolumeIcon', () => {
|
|
75
|
-
it('音量0のときはミュートアイコン', () => {
|
|
76
|
-
expect(getVolumeIcon(0)).toBe('🔇');
|
|
77
|
-
});
|
|
78
|
-
it('音量0以外のときはスピーカーアイコン', () => {
|
|
79
|
-
expect(getVolumeIcon(0.1)).toBe('🔈');
|
|
80
|
-
expect(getVolumeIcon(0.5)).toBe('🔈');
|
|
81
|
-
expect(getVolumeIcon(1)).toBe('🔈');
|
|
82
|
-
});
|
|
83
|
-
});
|
|
84
|
-
describe('calculateProgressBar', () => {
|
|
85
|
-
it('進捗0のとき幅は0', () => {
|
|
86
|
-
const result = calculateProgressBar(0, 10);
|
|
87
|
-
expect(result.width).toBe(0);
|
|
88
|
-
expect(result.offset).toBe(-5);
|
|
89
|
-
});
|
|
90
|
-
it('進捗1のとき幅は全体', () => {
|
|
91
|
-
const result = calculateProgressBar(1, 10);
|
|
92
|
-
expect(result.width).toBe(10);
|
|
93
|
-
expect(result.offset).toBe(0);
|
|
94
|
-
});
|
|
95
|
-
it('進捗0.5のとき幅は半分', () => {
|
|
96
|
-
const result = calculateProgressBar(0.5, 10);
|
|
97
|
-
expect(result.width).toBe(5);
|
|
98
|
-
expect(result.offset).toBe(-2.5);
|
|
99
|
-
});
|
|
100
|
-
it('進捗が1を超えても1にクランプ', () => {
|
|
101
|
-
const result = calculateProgressBar(1.5, 10);
|
|
102
|
-
expect(result.width).toBe(10);
|
|
103
|
-
});
|
|
104
|
-
it('進捗が0未満でも0にクランプ', () => {
|
|
105
|
-
const result = calculateProgressBar(-0.5, 10);
|
|
106
|
-
expect(result.width).toBe(0);
|
|
107
|
-
});
|
|
108
|
-
});
|
|
109
23
|
//# sourceMappingURL=utils.test.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.test.js","sourceRoot":"","sources":["../../../src/components/VideoPlayer/utils.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAA;AAC7C,OAAO,
|
|
1
|
+
{"version":3,"file":"utils.test.js","sourceRoot":"","sources":["../../../src/components/VideoPlayer/utils.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAA;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAEpC,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE;IAC1B,EAAE,CAAC,gBAAgB,EAAE,GAAG,EAAE;QACxB,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;IACpC,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,iBAAiB,EAAE,GAAG,EAAE;QACzB,MAAM,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;IACrC,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,iBAAiB,EAAE,GAAG,EAAE;QACzB,MAAM,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;IACrC,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,iBAAiB,EAAE,GAAG,EAAE;QACzB,MAAM,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;IACrC,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,oBAAoB,EAAE,GAAG,EAAE;QAC5B,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;IACxC,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,YAAY,EAAE,GAAG,EAAE;QACpB,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;IACvC,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { Component, ReactNode } from 'react';
|
|
2
|
+
interface ErrorBoundaryProps {
|
|
3
|
+
children: ReactNode;
|
|
4
|
+
fallback: ReactNode;
|
|
5
|
+
onError?: (error: Error) => void;
|
|
6
|
+
}
|
|
7
|
+
interface ErrorBoundaryState {
|
|
8
|
+
hasError: boolean;
|
|
9
|
+
}
|
|
10
|
+
/** エラー境界:子コンポーネントでエラーが発生した場合にfallbackを表示 */
|
|
11
|
+
export declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
|
|
12
|
+
constructor(props: ErrorBoundaryProps);
|
|
13
|
+
static getDerivedStateFromError(): ErrorBoundaryState;
|
|
14
|
+
componentDidCatch(error: Error): void;
|
|
15
|
+
render(): ReactNode;
|
|
16
|
+
}
|
|
17
|
+
export {};
|
|
18
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/commons/ErrorBoundary/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAE5C,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,SAAS,CAAA;IACnB,QAAQ,EAAE,SAAS,CAAA;IACnB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;CACjC;AAED,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,OAAO,CAAA;CAClB;AAED,4CAA4C;AAC5C,qBAAa,aAAc,SAAQ,SAAS,CAAC,kBAAkB,EAAE,kBAAkB,CAAC;gBACtE,KAAK,EAAE,kBAAkB;IAKrC,MAAM,CAAC,wBAAwB,IAAI,kBAAkB;IAIrD,iBAAiB,CAAC,KAAK,EAAE,KAAK;IAK9B,MAAM;CAMP"}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { Component } from 'react';
|
|
2
|
+
/** エラー境界:子コンポーネントでエラーが発生した場合にfallbackを表示 */
|
|
3
|
+
export class ErrorBoundary extends Component {
|
|
4
|
+
constructor(props) {
|
|
5
|
+
super(props);
|
|
6
|
+
this.state = { hasError: false };
|
|
7
|
+
}
|
|
8
|
+
static getDerivedStateFromError() {
|
|
9
|
+
return { hasError: true };
|
|
10
|
+
}
|
|
11
|
+
componentDidCatch(error) {
|
|
12
|
+
console.error('ErrorBoundary caught error:', error);
|
|
13
|
+
this.props.onError?.(error);
|
|
14
|
+
}
|
|
15
|
+
render() {
|
|
16
|
+
if (this.state.hasError) {
|
|
17
|
+
return this.props.fallback;
|
|
18
|
+
}
|
|
19
|
+
return this.props.children;
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/commons/ErrorBoundary/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAa,MAAM,OAAO,CAAA;AAY5C,4CAA4C;AAC5C,MAAM,OAAO,aAAc,SAAQ,SAAiD;IAClF,YAAY,KAAyB;QACnC,KAAK,CAAC,KAAK,CAAC,CAAA;QACZ,IAAI,CAAC,KAAK,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAA;IAClC,CAAC;IAED,MAAM,CAAC,wBAAwB;QAC7B,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAA;IAC3B,CAAC;IAED,iBAAiB,CAAC,KAAY;QAC5B,OAAO,CAAC,KAAK,CAAC,6BAA6B,EAAE,KAAK,CAAC,CAAA;QACnD,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC,KAAK,CAAC,CAAA;IAC7B,CAAC;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;YACxB,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAA;QAC5B,CAAC;QACD,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAA;IAC5B,CAAC;CACF"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
export interface IconButtonProps {
|
|
2
|
+
/** ボタンの一意なID */
|
|
3
|
+
id: string;
|
|
4
|
+
/** ボタンの位置 */
|
|
5
|
+
position: [number, number, number];
|
|
6
|
+
/** ボタンのサイズ */
|
|
7
|
+
size: number;
|
|
8
|
+
/** 表示するアイコン(絵文字やテキスト) */
|
|
9
|
+
icon: string;
|
|
10
|
+
/** インタラクション時のツールチップテキスト */
|
|
11
|
+
interactionText: string;
|
|
12
|
+
/** クリック時のコールバック */
|
|
13
|
+
onInteract: () => void;
|
|
14
|
+
/** 背景色(デフォルト: #444444) */
|
|
15
|
+
backgroundColor?: string;
|
|
16
|
+
/** アイコン色(デフォルト: #ffffff) */
|
|
17
|
+
iconColor?: string;
|
|
18
|
+
}
|
|
19
|
+
/**
|
|
20
|
+
* 円形のアイコンボタン
|
|
21
|
+
*/
|
|
22
|
+
export declare const IconButton: import("react").MemoExoticComponent<({ id, position, size, icon, interactionText, onInteract, backgroundColor, iconColor, }: IconButtonProps) => import("react/jsx-runtime").JSX.Element>;
|
|
23
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/commons/IconButton/index.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,eAAe;IAC9B,gBAAgB;IAChB,EAAE,EAAE,MAAM,CAAC;IACX,aAAa;IACb,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IACnC,cAAc;IACd,IAAI,EAAE,MAAM,CAAC;IACb,yBAAyB;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,2BAA2B;IAC3B,eAAe,EAAE,MAAM,CAAC;IACxB,mBAAmB;IACnB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,0BAA0B;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,eAAO,MAAM,UAAU,+HAUlB,eAAe,6CAqBnB,CAAC"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { memo } from "react";
|
|
3
|
+
import { Text } from "@react-three/drei";
|
|
4
|
+
import { Interactable } from "../../Interactable";
|
|
5
|
+
/**
|
|
6
|
+
* 円形のアイコンボタン
|
|
7
|
+
*/
|
|
8
|
+
export const IconButton = memo(({ id, position, size, icon, interactionText, onInteract, backgroundColor = "#444444", iconColor = "#ffffff", }) => {
|
|
9
|
+
return (_jsxs("group", { position: position, children: [_jsx(Interactable, { id: id, onInteract: onInteract, interactionText: interactionText, children: _jsxs("mesh", { children: [_jsx("circleGeometry", { args: [size / 2, 32] }), _jsx("meshBasicMaterial", { color: backgroundColor })] }) }), _jsx(Text, { position: [0, 0, 0.01], fontSize: size * 0.4, color: iconColor, anchorX: "center", anchorY: "middle", children: icon })] }));
|
|
10
|
+
});
|
|
11
|
+
IconButton.displayName = "IconButton";
|
|
12
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/commons/IconButton/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAC7B,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAqBlD;;GAEG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,IAAI,CAC5B,CAAC,EACC,EAAE,EACF,QAAQ,EACR,IAAI,EACJ,IAAI,EACJ,eAAe,EACf,UAAU,EACV,eAAe,GAAG,SAAS,EAC3B,SAAS,GAAG,SAAS,GACL,EAAE,EAAE;IACpB,OAAO,CACL,iBAAO,QAAQ,EAAE,QAAQ,aACvB,KAAC,YAAY,IAAC,EAAE,EAAE,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,eAAe,EAAE,eAAe,YAC5E,2BACE,yBAAgB,IAAI,EAAE,CAAC,IAAI,GAAG,CAAC,EAAE,EAAE,CAAC,GAAI,EACxC,4BAAmB,KAAK,EAAE,eAAe,GAAI,IACxC,GACM,EACf,KAAC,IAAI,IACH,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC,EACtB,QAAQ,EAAE,IAAI,GAAG,GAAG,EACpB,KAAK,EAAE,SAAS,EAChB,OAAO,EAAC,QAAQ,EAChB,OAAO,EAAC,QAAQ,YAEf,IAAI,GACA,IACD,CACT,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
interface PlaceholderScreenProps {
|
|
2
|
+
width: number;
|
|
3
|
+
screenHeight: number;
|
|
4
|
+
color: string;
|
|
5
|
+
}
|
|
6
|
+
/** プレースホルダー画面(読み込み中/エラー時/URL未設定時) */
|
|
7
|
+
export declare const PlaceholderScreen: import("react").MemoExoticComponent<({ width, screenHeight, color }: PlaceholderScreenProps) => import("react/jsx-runtime").JSX.Element>;
|
|
8
|
+
export {};
|
|
9
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/commons/PlaceholderScreen/index.tsx"],"names":[],"mappings":"AAEA,UAAU,sBAAsB;IAC9B,KAAK,EAAE,MAAM,CAAA;IACb,YAAY,EAAE,MAAM,CAAA;IACpB,KAAK,EAAE,MAAM,CAAA;CACd;AAED,qCAAqC;AACrC,eAAO,MAAM,iBAAiB,uEACK,sBAAsB,6CAMxD,CAAA"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { memo } from 'react';
|
|
3
|
+
/** プレースホルダー画面(読み込み中/エラー時/URL未設定時) */
|
|
4
|
+
export const PlaceholderScreen = memo(({ width, screenHeight, color }) => (_jsxs("mesh", { children: [_jsx("planeGeometry", { args: [width, screenHeight] }), _jsx("meshBasicMaterial", { color: color })] })));
|
|
5
|
+
PlaceholderScreen.displayName = 'PlaceholderScreen';
|
|
6
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/commons/PlaceholderScreen/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,OAAO,CAAA;AAQ5B,qCAAqC;AACrC,MAAM,CAAC,MAAM,iBAAiB,GAAG,IAAI,CACnC,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,KAAK,EAA0B,EAAE,EAAE,CAAC,CAC1D,2BACE,wBAAe,IAAI,EAAE,CAAC,KAAK,EAAE,YAAY,CAAC,GAAI,EAC9C,4BAAmB,KAAK,EAAE,KAAK,GAAI,IAC9B,CACR,CACF,CAAA;AAED,iBAAiB,CAAC,WAAW,GAAG,mBAAmB,CAAA"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import * as THREE from "three";
|
|
2
|
+
export interface VideoMeshProps {
|
|
3
|
+
/** 動画テクスチャ */
|
|
4
|
+
texture: THREE.VideoTexture;
|
|
5
|
+
/** スクリーンの幅 */
|
|
6
|
+
width: number;
|
|
7
|
+
/** スクリーンの高さ */
|
|
8
|
+
height: number;
|
|
9
|
+
}
|
|
10
|
+
/**
|
|
11
|
+
* 動画テクスチャをレターボックス/ピラーボックス対応で表示するメッシュ
|
|
12
|
+
*/
|
|
13
|
+
export declare const VideoMesh: import("react").MemoExoticComponent<({ texture, width, height }: VideoMeshProps) => import("react/jsx-runtime").JSX.Element>;
|
|
14
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/commons/VideoMesh/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAsC/B,MAAM,WAAW,cAAc;IAC7B,cAAc;IACd,OAAO,EAAE,KAAK,CAAC,YAAY,CAAC;IAC5B,cAAc;IACd,KAAK,EAAE,MAAM,CAAC;IACd,eAAe;IACf,MAAM,EAAE,MAAM,CAAC;CAChB;AAED;;GAEG;AACH,eAAO,MAAM,SAAS,mEAAqC,cAAc,6CA+DvE,CAAC"}
|