Loomix Player

Installation

Install via the shadcn CLI to copy the component source directly into your project, or use the NPM package.

npx shadcn@latest add https://loomix.harshsingh.me/r/loomix-player.json

npm install loomix

Usage

Pass a video source and Loomix renders a complete player. Apply any Tailwind classes to size and position it.

import { LoomixPlayer } from "@/components/ui/loomix-player";

export default function Demo() {
  return (
    <LoomixPlayer
      src="https://cdn.harshsingh.me/croatia.webm"
      youtubeUrl="https://youtube.com/watch?v=..."
      className="aspect-video w-full max-w-4xl"
    />
  );
}

Props

Prop	Type	Description
src	string	Video source URL. Required.
poster	string	Image shown before playback begins.
youtubeUrl	string	When set, a 'Watch on YouTube' button is shown in the control bar.
captions	LoomixCaption[]	Caption / subtitle tracks. When provided, the CC toggle appears.
autoPlay	boolean	Auto-play on mount. Defaults to false.
muted	boolean	Start muted. Defaults to false.
loop	boolean	Loop the video. Defaults to false.
disablePictureInPicture	boolean	Hide the picture-in-picture button.
ariaLabel	string	Accessible label applied to the player root.
className	string	Class name applied to the player root.
videoClassName	string	Class name applied to the underlying <video> element.
onPlayingChange	(isPlaying: boolean) => void	Called whenever play / pause state changes.

Keyboard Shortcuts

Keys	Action
Space / K	Play / pause
M	Mute / unmute
F	Toggle fullscreen
C	Toggle captions
Left / Right	Seek -/+ 5s
Up / Down	Volume -/+ 5%