{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "video-player",
  "type": "registry:component",
  "title": "Lens Video Player",
  "description": "An video player component for playing video attachments in Lens posts.",
  "dependencies": ["@lens-protocol/react@0.0.0-canary-20250820102520", "lucide-react", "react-player@3.3.2"],
  "registryDependencies": ["https://lensblocks.com/r/utils.json"],
  "files": [
    {
      "path": "registry/new-york/components/common/lens-video-player.tsx",
      "content": "import ReactPlayer from \"react-player\";\nimport { CSSProperties } from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { MediaVideo } from \"@lens-protocol/react\";\nimport { getVideoExtension, parseUri } from \"@/registry/new-york/lib/lens-utils\";\nimport { Skeleton } from \"@/registry/new-york/ui/skeleton\";\n\ntype Props = {\n  video: MediaVideo;\n  preload?: \"none\" | \"metadata\" | \"auto\" | \"\";\n  playsInline?: boolean;\n  style?: CSSProperties;\n  className?: string;\n  onError?: (e: any) => void;\n};\n\nexport const LensVideoPlayer = (props: Props) => {\n  const {\n    video,\n    preload = \"metadata\",\n    playsInline = true,\n    style = {\n      width: \"100%\",\n      height: \"100%\",\n    },\n    className,\n    onError,\n  } = props;\n\n  // ReactPlayer looks at the file extension in the source URI to determine how to play the file\n  // so we need to append the extension to the url for instances where the audio url does not have an extension\n  // e.g. when using IPFS urls like https://api.grove.storage/<key>\n  // or when using a proxy server that does not preserve the original file name\n  const videoUri = video ? parseUri(video.item) + \"?extension=.\" + getVideoExtension(video.type) : null;\n\n  if (!videoUri) {\n    return null;\n  }\n\n  return (\n    <div className=\"w-full aspect-video\" onClick={event => event.stopPropagation()}>\n      <ReactPlayer\n        slot=\"media\"\n        src={videoUri}\n        fallback={video.cover}\n        controls={true}\n        preload={preload}\n        playsInline={playsInline}\n        style={style}\n        className={cn(\"w-full h-full rounded-xl\", className)}\n        onError={onError}\n      />\n    </div>\n  );\n};\n\nexport const LensVideoPlayerSkeleton = () => {\n  return (\n    <div className=\"w-full aspect-video bg-black dark border rounded-xl flex flex-col justify-end p-4 gap-4\">\n      <div className=\"w-full flex items-center gap-2\">\n        <Skeleton className=\"h-5 w-5 rounded-full\" />\n        <Skeleton className=\"h-3 w-8 rounded-full ml-2\" />\n        <Skeleton className=\"h-3 w-8 rounded-full\" />\n        <div className=\"flex-grow flex justify-end gap-4\">\n          <Skeleton className=\"h-5 w-5 rounded-full ml-2\" />\n          <Skeleton className=\"h-5 w-5 rounded-full ml-2\" />\n          <Skeleton className=\"h-5 w-5 rounded-full ml-2\" />\n        </div>\n      </div>\n      <div className=\"w-full\">\n        <Skeleton className=\"h-2 w-full rounded-full\" />\n      </div>\n    </div>\n  );\n};\n",
      "type": "registry:component"
    }
  ]
}