Video Streaming

import {Video} from '@rixl/videosdk-react';

function VideoPlayer({videoId}) {
return (
<Video
id={videoId}
   className="w-full h-auto rounded-lg"
   progressBar={true}
   allowFullscreen={true}
   autoplay={false}
   muted={false}
/>
);
}

import {Video, useProgressBar} from '@rixl/videosdk-react';
import {useRef} from 'react';

function AdvancedVideoPlayer({videoId, onComplete}) {
const videoRef = useRef(null);
const {progress, duration, isPlaying} = useProgressBar({video: videoRef.current});

return (
<div className="video-container">
<Video
ref={videoRef}
   id={videoId}
   className="w-full h-auto rounded-lg shadow-lg"
   progressBar={true}
   allowFullscreen={true}
   controls={true}
   poster={`https://cdn.rixl.com/${videoId}/thumbnail.jpg`}
   onPlay={() => console.log('Video started')}
   onPause={() => console.log('Video paused')}
   onEnded={onComplete}
/>

<div className="video-info mt-4 p-4 bg-gray-100 rounded">
<div className="flex justify-between items-center">
  <span>Progress: {Math.round(progress * 100)}%</span>
  <span>Duration: {Math.round(duration)}s</span>
  <span className={`status ${isPlaying ? 'text-green-600' : 'text-gray-600'}`}>
          {isPlaying ? 'Playing' : 'Paused'}
        </span>
</div>
</div>
</div>
);
}

import {Video, useProgressBar} from '@rixl/videosdk-react';
import {useState, useRef} from 'react';

function CustomVideoPlayer({videoId}) {
const videoRef = useRef(null);
const {progress, duration, isPlaying} = useProgressBar({video: videoRef.current});
const [showControls, setShowControls] = useState(true);

const handlePlayPause = () => {
if (videoRef.current) {
if (isPlaying) {
videoRef.current.pause();
} else {
videoRef.current.play();
}
}
};

const handleSeek = (value) => {
if (videoRef.current && duration) {
videoRef.current.currentTime = value * duration;
}
};

return (
<div
className="relative video-container"
onMouseEnter={() => setShowControls(true)}
   onMouseLeave={() => setShowControls(false)}
>
<Video
  ref={videoRef}
  id={videoId}
  className="w-full h-auto"
  progressBar={false}
  controls={false}
  allowFullscreen={true}
/>

{showControls && (
  <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-4">
    <div className="flex items-center gap-4">
      <button
        onClick={handlePlayPause}
        className="text-white hover:text-gray-300"
      >
        {isPlaying ? '⏸️' : '▶️'}
      </button>

      <div className="flex-1">
        <input
          type="range"
          min="0"
          max="1"
          step="0.01"
          value={progress}
          onChange={(e) => handleSeek(parseFloat(e.target.value))}
          className="w-full"
        />
      </div>

      <span className="text-white text-sm">
            {Math.round(progress * duration)}s / {Math.round(duration)}s
          </span>
    </div>
  </div>
)}
</div>
);
}

// Initialize video upload with quality tier
const uploadVideo = async (videoFile, qualityTier = 'pro') => {
const initResponse = await fetch('https://api.rixl.com/videos/upload/init', {
method: 'POST',
headers: {
'X-API-Key': 'YOUR_PROJECT_API_KEY',
'Content-Type': 'application/json'
},
body: JSON.stringify({
file_name: videoFile.name,
video_quality: qualityTier,
image_format: 'jpg'
})
});

const {video_id, video_presigned_url, upload_expires} = await initResponse.json();

// Upload file to presigned URL
await fetch(video_presigned_url, {
method: 'PUT',
body: videoFile,
headers: {
'Content-Type': videoFile.type
}
});

return video_id;
};

// Monitor video processing status
const monitorProcessing = async (videoId) => {
const checkStatus = async () => {
const response = await fetch(`https://api.rixl.com/videos/${videoId}`, {
headers: {
'X-API-Key': 'YOUR_PROJECT_API_KEY'
}
});

const result = await response.json();
return result.data;
};

// Poll every 5 seconds until processing is complete
return new Promise((resolve) => {
const interval = setInterval(async () => {
const video = await checkStatus();

console.log(`Processing status: ${video.file.status}`);

if (video.file.status === 'ready') {
clearInterval(interval);
resolve(video);
} else if (video.file.status === 'error') {
clearInterval(interval);
throw new Error('Video processing failed');
}
}, 5000);
});
};

// Get video details and streaming URLs
const getVideoDetails = async (videoId) => {
const response = await fetch(`https://api.rixl.com/videos/${videoId}`, {
headers: {
'X-API-Key': 'YOUR_PROJECT_API_KEY'
}
});

const result = await response.json();
const video = result.data;

return {
id: video.id,
duration: video.duration,
width: video.width,
height: video.height,
streamingUrl: video.file.url,
thumbnailUrl: `https://cdn.rixl.com/${video.id}/thumbnail.jpg`,
status: video.file.status,
createdAt: video.created_at
};
};