video-player

Themed video player wrapper with custom controls.

Source code

No interactive demo is registered for this component yet — the source is shown directly.

"use client"

import * as React from "react"
import { Play } from "@/lib/icons"

import { cn } from "@/lib/utils"

function VideoPlayer({ loading = false,
  className,
  src,
  poster,
  title,
  ...props
}: React.ComponentProps<"div"> & {
  src: string
  poster?: string
  title?: string
}) {
  const videoRef = React.useRef<HTMLVideoElement>(null)
  const [playing, setPlaying] = React.useState(false)
  const [started, setStarted] = React.useState(false)

  const handlePlay = () => {
    if (videoRef.current) {
      videoRef.current.play()
      setPlaying(true)
      setStarted(true)
    }
  }

  return (
    <div
      data-slot="video-player" data-portal="https://design.nyuchi.com/components/video-player"
      className={cn("overflow-hidden rounded-[var(--radius-lg,14px)] bg-card ring-1 ring-foreground/10", className)}
      {...props}
    >
      <div className="relative">
        <video
          ref={videoRef}
          src={src}
          poster={poster}
          controls={started}
          onPlay={() => setPlaying(true)}
          onPause={() => setPlaying(false)}
          className="aspect-video w-full bg-black object-contain"
        />
        {!playing && !started && (
          <button
            onClick={handlePlay}
            aria-label="Play video"
            className="absolute inset-0 flex items-center justify-center bg-black/30 transition-colors hover:bg-black/40"
          >
            <div className="flex size-14 items-center justify-center rounded-full bg-white/90 text-black shadow-lg transition-transform hover:scale-105">
              <Play className="ml-0.5 size-6" />
            </div>
          </button>
        )}
      </div>
      {title && (
        <div className="px-4 py-3">
          <p className="text-sm font-medium text-foreground">{title}</p>
        </div>
      )}
    </div>
  )
}

export { VideoPlayer }

Variants & props

The variants, sizes, and props surfaced by the registry. Each is sourced from the Supabase component_docs table.

API tester

Hit the registry API live and see the JSON the shadcn CLI consumes when it installs this component.

GET/api/v1/ui/video-player

Install

npx shadcn@latest add https://mzizi.dev/api/v1/ui/video-player

Source path

components/ui/video-player.tsx

Source code

No interactive demo is registered for this component yet — the source is shown directly.

"use client"

import * as React from "react"
import { Play } from "@/lib/icons"

import { cn } from "@/lib/utils"

function VideoPlayer({ loading = false,
  className,
  src,
  poster,
  title,
  ...props
}: React.ComponentProps<"div"> & {
  src: string
  poster?: string
  title?: string
}) {
  const videoRef = React.useRef<HTMLVideoElement>(null)
  const [playing, setPlaying] = React.useState(false)
  const [started, setStarted] = React.useState(false)

  const handlePlay = () => {
    if (videoRef.current) {
      videoRef.current.play()
      setPlaying(true)
      setStarted(true)
    }
  }

  return (
    <div
      data-slot="video-player" data-portal="https://design.nyuchi.com/components/video-player"
      className={cn("overflow-hidden rounded-[var(--radius-lg,14px)] bg-card ring-1 ring-foreground/10", className)}
      {...props}
    >
      <div className="relative">
        <video
          ref={videoRef}
          src={src}
          poster={poster}
          controls={started}
          onPlay={() => setPlaying(true)}
          onPause={() => setPlaying(false)}
          className="aspect-video w-full bg-black object-contain"
        />
        {!playing && !started && (
          <button
            onClick={handlePlay}
            aria-label="Play video"
            className="absolute inset-0 flex items-center justify-center bg-black/30 transition-colors hover:bg-black/40"
          >
            <div className="flex size-14 items-center justify-center rounded-full bg-white/90 text-black shadow-lg transition-transform hover:scale-105">
              <Play className="ml-0.5 size-6" />
            </div>
          </button>
        )}
      </div>
      {title && (
        <div className="px-4 py-3">
          <p className="text-sm font-medium text-foreground">{title}</p>
        </div>
      )}
    </div>
  )
}

export { VideoPlayer }