Video Player

import { VideoPlayer } from "@/components/ui/video-player";

export default function Example() {
  return <VideoPlayer />;
}

"use client";

import { forwardRef, useRef, useState } from "react";
import { cn } from "@/lib/utils";

const VideoPlayer = forwardRef(({ className, src, poster, ...props }, ref) => {
  const videoRef = useRef(null);
  const [playing, setPlaying] = useState(false);

  const toggle = () => {
    if (!videoRef.current) return;
    if (playing) videoRef.current.pause();
    else videoRef.current.play();
    setPlaying(!playing);
  };

  return (
    <div ref={ref} className={cn("relative overflow-hidden rounded-lg bg-black", className)} {...props}>
      <video ref={videoRef} src={src} poster={poster} className="w-full"
        onPlay={() => setPlaying(true)} onPause={() => setPlaying(false)} onEnded={() => setPlaying(false)}
      />
      <div className="absolute inset-0 flex items-center justify-center" onClick={toggle}>
        {!playing && (
          <button className="flex h-16 w-16 items-center justify-center rounded-full bg-white/90 text-black shadow-lg backdrop-blur-sm transition-transform hover:scale-110">
            <svg className="ml-1 h-8 w-8" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z" /></svg>
          </button>
        )}
      </div>
      <div className="absolute bottom-0 left-0 right-0 flex items-center gap-2 bg-gradient-to-t from-black/60 p-3">
        <button onClick={toggle} className="text-white">
          {playing ? (
            <svg className="h-5 w-5" fill="currentColor" viewBox="0 0 24 24"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z" /></svg>
          ) : (
            <svg className="h-5 w-5" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z" /></svg>
          )}
        </button>
      </div>
    </div>
  );
});
VideoPlayer.displayName = "VideoPlayer";

export { VideoPlayer };