import { VidtreoRecorder } from '@vidtreo/recorder-react';

function BasicRecorder() {
  return (
    <VidtreoRecorder
      apiKey={import.meta.env.VITE_VIDTREO_API_KEY}
      onUploadComplete={(result) => {
        console.log('Video ready:', result.uploadUrl);
      }}
    />
  );
}

import { VidtreoRecorder } from '@vidtreo/recorder-react';
import { useState } from 'react';

function RecorderWithState() {
  const [videoUrl, setVideoUrl] = useState<string | null>(null);
  const [isUploading, setIsUploading] = useState(false);

  return (
    <div>
      <VidtreoRecorder
        apiKey={import.meta.env.VITE_VIDTREO_API_KEY}
        onRecordingStop={() => setIsUploading(true)}
        onUploadComplete={(result) => {
          setVideoUrl(result.uploadUrl);
          setIsUploading(false);
        }}
      />

      {isUploading && <p>Processing video...</p>}

      {videoUrl && (
        <div>
          <h3>Your Recording</h3>
          <video src={videoUrl} controls style={{ maxWidth: '100%' }} />
        </div>
      )}
    </div>
  );
}

<VidtreoRecorder
  apiKey={import.meta.env.VITE_VIDTREO_API_KEY}
  userMetadata={{
    userId: 'user-123',
    projectId: 'project-456',
    type: 'feedback',
    timestamp: new Date().toISOString()
  }}
  onUploadComplete={(result) => {
    // Metadata is stored with the video
    saveToDatabase({
      videoId: result.recordingId,
      url: result.uploadUrl
    });
  }}
/>

<!DOCTYPE html>
<html>
<head>
  <script type="module" src="https://cdn.jsdelivr.net/npm/@vidtreo/recorder-wc@latest/dist/vidtreo-recorder.js"></script>
</head>
<body>
  <vidtreo-recorder
    api-key="your-api-key"
    id="recorder"
  ></vidtreo-recorder>

  <script>
    document.getElementById('recorder').addEventListener('upload-complete', (e) => {
      alert('Video uploaded: ' + e.detail.uploadUrl);
    });
  </script>
</body>
</html>

<VidtreoRecorder
  apiKey={import.meta.env.VITE_VIDTREO_API_KEY}
  maxRecordingTime={60000}  // 1 minute
  countdownDuration={3000}   // 3 second countdown
  onRecordingStop={() => {
    console.log('Recording ended');
  }}
/>