Scroll-Linked Video Scrubber

"use client";

import * as React from "react";
import { ScrollLinkedVideoScrubber } from "@/components/ui/scroll-linked-video-scrubber";

export default function VideoScrubberDemo() {
  const containerRef = React.useRef<HTMLDivElement>(null);

  return (
    <div className="flex w-full items-center justify-center bg-background p-6">
      <div className="w-full max-w-2xl">
        <div
          ref={containerRef}
          className="h-96 overflow-y-auto rounded-xl border border-border"
        >
          <ScrollLinkedVideoScrubber
            src="https://www.pulkit.page/components/scroll-linked-video-scrubber/demo.mp4"
            poster="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?auto=format&fit=crop&w=1600&q=80"
            scroller={containerRef}
            scrollHeight="500%"
          />
        </div>
        <p className="mt-3 text-center text-sm text-muted-foreground">
          Scroll inside the frame to scrub the video timeline
        </p>
      </div>
    </div>
  );
}