{
  "name": "cropper-video-demo",
  "type": "registry:example",
  "registryDependencies": [
    "cropper",
    "button",
    "label",
    "select"
  ],
  "files": [
    {
      "path": "examples/cropper-video-demo.tsx",
      "type": "registry:example",
      "content": "\"use client\";\n\nimport { PauseIcon, PlayIcon } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport { Button } from \"@/registry/bases/radix/ui/button\";\nimport {\n  Cropper,\n  CropperArea,\n  type CropperPoint,\n  CropperVideo,\n} from \"@/registry/bases/radix/ui/cropper\";\n\nexport default function CropperVideoDemo() {\n  const [crop, setCrop] = React.useState<CropperPoint>({ x: 0, y: 0 });\n  const [zoom, setZoom] = React.useState(1);\n  const [isPlaying, setIsPlaying] = React.useState(true);\n  const videoRef = React.useRef<HTMLVideoElement>(null);\n\n  const onPlayToggle = React.useCallback(() => {\n    if (videoRef.current) {\n      if (isPlaying) {\n        videoRef.current.pause();\n      } else {\n        videoRef.current.play();\n      }\n      setIsPlaying(!isPlaying);\n    }\n  }, [isPlaying]);\n\n  const onMetadataLoaded = React.useCallback(() => {\n    if (videoRef.current && isPlaying) {\n      videoRef.current.play();\n    }\n  }, [isPlaying]);\n\n  return (\n    <div className=\"flex size-full flex-col gap-4\">\n      <Button\n        size=\"sm\"\n        className=\"w-fit [&_svg]:fill-current\"\n        onClick={onPlayToggle}\n      >\n        {isPlaying ? (\n          <>\n            <PauseIcon />\n            Pause\n          </>\n        ) : (\n          <>\n            <PlayIcon />\n            Play\n          </>\n        )}\n      </Button>\n      <Cropper\n        aspectRatio={16 / 9}\n        crop={crop}\n        zoom={zoom}\n        onCropChange={setCrop}\n        onZoomChange={setZoom}\n        className=\"h-96\"\n        objectFit=\"cover\"\n        withGrid\n      >\n        <CropperVideo\n          ref={videoRef}\n          src=\"https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4\"\n          crossOrigin=\"anonymous\"\n          onLoadedMetadata={onMetadataLoaded}\n        />\n        <CropperArea />\n      </Cropper>\n    </div>\n  );\n}\n",
      "target": ""
    }
  ]
}