cropper-video-demo

1"use client";
2 
3import { PauseIcon, PlayIcon } from "lucide-react";
4import * as React from "react";
5import { Button } from "@/registry/bases/base/ui/button";
6import {
7  Cropper,
8  CropperArea,
9  type CropperPoint,
10  CropperVideo,
11} from "@/registry/bases/base/ui/cropper";
12 
13export default function CropperVideoDemo() {
14  const [crop, setCrop] = React.useState<CropperPoint>({ x: 0, y: 0 });
15  const [zoom, setZoom] = React.useState(1);
16  const [isPlaying, setIsPlaying] = React.useState(true);
17  const videoRef = React.useRef<HTMLVideoElement>(null);
18 
19  const onPlayToggle = React.useCallback(() => {
20    if (videoRef.current) {
21      if (isPlaying) {
22        videoRef.current.pause();
23      } else {
24        videoRef.current.play();
25      }
26      setIsPlaying(!isPlaying);
27    }
28  }, [isPlaying]);
29 
30  const onMetadataLoaded = React.useCallback(() => {
31    if (videoRef.current && isPlaying) {
32      videoRef.current.play();
33    }
34  }, [isPlaying]);
35 
36  return (
37    <div className="flex size-full flex-col gap-4">
38      <Button
39        size="sm"
40        className="w-fit [&_svg]:fill-current"
41        onClick={onPlayToggle}
42      >
43        {isPlaying ? (
44          <>
45            <PauseIcon />
46            Pause
47          </>
48        ) : (
49          <>
50            <PlayIcon />
51            Play
52          </>
53        )}
54      </Button>
55      <Cropper
56        aspectRatio={16 / 9}
57        crop={crop}
58        zoom={zoom}
59        onCropChange={setCrop}
60        onZoomChange={setZoom}
61        className="h-96"
62        objectFit="cover"
63        withGrid
64      >
65        <CropperVideo
66          ref={videoRef}
67          src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
68          crossOrigin="anonymous"
69          onLoadedMetadata={onMetadataLoaded}
70        />
71        <CropperArea />
72      </Cropper>
73    </div>
74  );
75}