File size: 2,483 Bytes
065d164 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 |
import React from 'react';
import ThoughtBubble from './ThoughtBubble';
import ParticleEffects from './ParticleEffects';
import PromptEditor from './PromptEditor';
import CameraSetup from './CameraSetup';
import { StatusIndicator } from './UIUtils';
const MainContent = ({
videoRef,
canvasRef,
containerRef,
facingMode,
setFacingMode,
setCameraError,
customPrompt,
setCustomPrompt,
isMac,
isMobile,
canvasWidth,
canvasHeight,
setVideoAspectRatio,
updateCanvasSize,
handDetected,
isMouthOpen,
isLeftHand,
thumbPosition,
isFirstLoad,
thought,
isThinking,
animateThinking,
particles,
popParticles,
createSparkleParticles,
createPopParticles
}) => {
return (
<>
{/* Prompt Editor */}
<PromptEditor
customPrompt={customPrompt}
setCustomPrompt={setCustomPrompt}
isMac={isMac}
/>
<div ref={containerRef} className="relative w-full max-w-4xl canvas-container">
{/* Camera Setup */}
<CameraSetup
videoRef={videoRef}
canvasRef={canvasRef}
containerRef={containerRef}
facingMode={facingMode}
setFacingMode={setFacingMode}
setCameraError={setCameraError}
setVideoAspectRatio={setVideoAspectRatio}
updateCanvasSize={updateCanvasSize}
isMobile={isMobile}
/>
{/* Canvas for hand detection */}
<canvas
ref={canvasRef}
className="rounded-lg shadow-lg w-full"
style={{ height: `${canvasHeight}px` }}
width={canvasWidth}
height={canvasHeight}
/>
{/* Status Indicator */}
<StatusIndicator handDetected={handDetected} />
{/* Particle Effects */}
<ParticleEffects
particles={particles}
popParticles={popParticles}
/>
{/* Thought Bubble */}
<ThoughtBubble
isFirstLoad={isFirstLoad}
isThinking={isThinking}
thought={thought}
isMouthOpen={isMouthOpen}
handDetected={handDetected}
isLeftHand={isLeftHand}
thumbPosition={thumbPosition}
canvasWidth={canvasWidth}
isMobile={isMobile}
animateThinking={animateThinking}
createSparkleParticles={createSparkleParticles}
createPopParticles={createPopParticles}
/>
</div>
</>
);
};
export default MainContent; |