{ selectedVideo?.video_id && selectedVideo?.processing_init ?
<span className='text-secondary-foreground text-xs'>
{`( ${selectedVideo?.last_msg} )`}
</span>
:
<span className='text-secondary-foreground text-xs'>
{ selectedVideo?.video_id && `( ${selectedVideo?.state} )`}
</span>
}
</div>
<div className='flex items-center'>
<div className="flex items-center" onClick={() => setSidebarOpen(true)}>
<IconUploadFile size="sm" />
</div>
</div>
</div>
{/* <div className="flex flex-col flex-grow max-h-[calc(100%-3rem)]"> */}
{selectedVideo?.video_id ? (
<div className="w-full aspect-video max-h-[calc(100%-3rem)]">
<VideoPlayer
// ref={videoRef}
// key={`${Protocol}//${Hostname}/videos/${selectedVideo?.hls_path}#t=${String(seektime).split('__')[1]}`}
// ref={videoRef}
src={`${Protocol}//${Hostname}/videos/${selectedVideo?.hls_path}`}
seekTime={String(seektime)}
// src='https://demo.unified-streaming.com/k8s/features/stable/video/tears-of-steel/tears-of-steel.ism/.m3u8'
/>
{/* <video
key={`${selectedVideo?.video_id}+${seektime}`}
className="aspect-video object-contain h-[calc(100vh-26.5rem)] w-full bg-black"
title={selectedVideo?.video_name}
// src={`${Protocol}//${Hostname}/videos/${selectedVideo?.saved_name}#t=${seektime}`}
onLoadedData={(e: any) => {
// setLicenseData({...licenseData, videoDuration: e?.target?.duration})
setvideoDuration(e?.target?.duration)
}}
ref={videoRef}
controls
crossOrigin='anonymous'
/> */}
{/* <VideoPlayer
src={overlayVideoPanel && overlayVideo
? `${Protocol}${Hostname}${overlayVideo}`
: `${Protocol}//${Hostname}/videos/${selectedVideo?.hls_path}#t=${String(seektime).split('__')[1]}`}
/> */}
</div>
) : (
<div className="w-full aspect-video max-h-[calc(100%-3rem)]">
<NoFileSelected />
</div>
)}
</div> this is the code for the above attached image now i want to overlay another video on the current video whose UI will look ike the another image i have attached i which a panel is shown to video the processed or the original video now extend my code to do that
Video Comparison Overlay Implementation
I'll extend your code to add a video comparison overlay feature that allows users to switch between the original and processed versions of a video, similar to the split-screen comparison in the second image you shared.
How It Works
I've created a video comparison feature that allows users to:
Switch between three viewing modes:
- Original: Shows only the original video
- Processed: Shows only the processed video
- Split: Shows a side-by-side comparison with a draggable slider
In split mode:
- A vertical slider divides the screen between original and processed videos
- Users can drag the slider to adjust the comparison view
- Labels indicate which side is original and which is processed
- The slider has a handle with left/right chevron icons for better visibility
UI Components:
- Toggle buttons to switch between viewing modes
- Visual indicators showing the current processing state
- Responsive design that works across different screen sizes
The implementation uses React hooks to manage the state of the comparison mode and slider position. The slider functionality is implemented with mouse events to allow for dragging and repositioning.
How to Use
- Import the
VideoContainercomponent in your page Pass the required props:
selectedVideo: Object containing video detailssetSidebarOpen: Function to toggle the sidebarProtocolandHostname: For constructing video URLs
The component will automatically handle the comparison functionality and display the appropriate UI based on the selected mode.
I'll add sample videos to demonstrate the video comparison functionality. Let me update the code with actual video sources.
Sample Videos Used
I've integrated two different sample videos to demonstrate the comparison functionality:
- Original Video: Big Buck Bunny - A classic open-source animated short film
- Processed Video: Elephants Dream - Another open-source animated film to simulate a "processed" version
These videos are hosted on Google's public storage and are commonly used for testing video applications. They provide a good demonstration of how the comparison interface works.
Features Demonstrated
- Original Mode: Shows only the Big Buck Bunny video
- Processed Mode: Shows only the Elephants Dream video
- Split Mode: Shows both videos side by side with a draggable slider
- Interactive Slider: Drag to adjust the comparison view
- Responsive Design: Works on different screen sizes
- Visual Labels: Clear indicators for "Original" and "Processed" sides
The videos are muted by default in split mode to avoid audio conflicts. You can click on either video's controls to play/pause and adjust settings individually.
import { useEffect, useRef } from "react"; import { MediaPlayer, MediaProvider, Poster, Track, type MediaPlayerInstance } from "@vidstack/react"; import { DefaultVideoLayout, defaultLayoutIcons, } from "@vidstack/react/player/layouts/default";
export default function VideoPlayer({src, seekTime, ...props }: { src: string, seekTime: string}) { const playerRef = useRef<MediaPlayerInstance>(null);
useEffect(() => { if (playerRef.current && seekTime) { playerRef.current.currentTime = Number(seekTime?.split('__')[1]); } }, [seekTime]);
return ( <MediaPlayer ref={playerRef} src={src} viewType="video" streamType="on-demand" logLevel="warn" // crossOrigin="anonymous" playsInline className="w-full h-full object-cover" >
<MediaProvider>
<Poster className="vds-poster" />
</MediaProvider>
<DefaultVideoLayout
className="w-full h-full"
icons={defaultLayoutIcons}
/>
</MediaPlayer>
); } this is my current code for showing one video