{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "video", "title": "Video", "type": "registry:ui", "files": [ { "path": "packages/registry-angular/components/video/video.component.ts", "content": "import {\n AfterViewInit,\n Component,\n ElementRef,\n EventEmitter,\n Input,\n OnChanges,\n OnDestroy,\n OnInit,\n Output,\n SimpleChanges,\n ViewChild,\n booleanAttribute,\n inject,\n ChangeDetectionStrategy,\n} from '@angular/core'\nimport { cn } from '@/lib/utils'\n\n/**\n * Angular port of UIPKGE Video — native video element with a custom controls\n * overlay (play/pause, skip, volume, rate, fullscreen, progress).\n */\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-video, [ui-video]',\n standalone: true,\n host: {\n '[attr.data-slot]': '\"video\"',\n '[attr.data-uipkge]': '\"\"',\n '[attr.data-playing]': 'playing',\n role: 'region',\n 'aria-label': 'Video player',\n tabindex: '0',\n '[class]': 'hostClass',\n '[style.aspectRatio]': 'aspectRatio',\n '(mousemove)': 'onMouseMove()',\n '(mouseleave)': 'onMouseLeave()',\n '(keydown)': 'onKeydown($event)',\n },\n template: `\n \n\n @if (playbackFailed) {\n

\n Unable to play this video. Check the source or try again.\n

\n }\n\n @if (!nativeControls) {\n
\n
\n\n
\n
\n {{ formatTime(current) }}\n \n {{ formatTime(duration) }}\n
\n\n
\n \n @if (playing) {\n \n \n \n \n } @else {\n \n \n \n }\n \n\n \n \n \n \n \n \n\n \n \n \n \n \n \n\n
\n \n @if (isMuted || volume === 0) {\n \n \n \n \n \n } @else {\n \n \n \n \n \n }\n \n \n
\n\n
\n\n \n @if (isFullscreen) {\n \n \n \n \n \n \n } @else {\n \n \n \n \n \n \n }\n \n
\n
\n
\n }\n `,\n})\nexport class UiVideoComponent implements OnInit, AfterViewInit, OnChanges, OnDestroy {\n private hostEl?: HTMLElement\n\n constructor() {\n try {\n this.hostEl = inject(ElementRef, { optional: true })?.nativeElement\n } catch {\n // Instantiated outside injection context (e.g. unit tests)\n }\n }\n\n @Input({ required: true }) src = ''\n @Input() poster?: string\n @Input({ transform: booleanAttribute }) autoplay = false\n @Input({ transform: booleanAttribute }) loop = false\n @Input({ transform: booleanAttribute }) muted = false\n @Input({ transform: booleanAttribute }) nativeControls = false\n @Input() playbackRate = 1\n @Input() aspectRatio = '16/9'\n @Input('class') hostClassAttr?: string\n @Input() className?: string\n\n @Output() play = new EventEmitter()\n @Output() pause = new EventEmitter()\n @Output() ended = new EventEmitter()\n @Output() timeUpdate = new EventEmitter()\n\n @ViewChild('videoEl') videoElRef?: ElementRef\n\n playing = false\n playbackFailed = false\n current = 0\n duration = 0\n volume = 1\n isMuted = false\n isFullscreen = false\n showControls = true\n private hideTimer: ReturnType | null = null\n\n get hostClass(): string {\n return cn(\n 'block w-full group focus-visible:ring-ring relative overflow-hidden rounded-lg bg-black outline-none focus-visible:ring-2',\n this.hostClassAttr,\n this.className,\n )\n }\n\n get controlsClass(): string {\n return cn(\n 'absolute inset-0 flex flex-col justify-between transition-opacity duration-200 motion-reduce:transition-none',\n this.showControls || !this.playing ? 'opacity-100' : 'pointer-events-none opacity-0',\n )\n }\n\n ngOnInit(): void {\n if (this.muted) {\n this.volume = 0\n this.isMuted = true\n }\n }\n\n ngAfterViewInit(): void {\n if (typeof document !== 'undefined') {\n document.addEventListener('fullscreenchange', this.handleFullscreenChange)\n }\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n const v = this.videoElRef?.nativeElement\n if (v && changes['playbackRate']) v.playbackRate = this.playbackRate\n }\n\n ngOnDestroy(): void {\n if (this.hideTimer) clearTimeout(this.hideTimer)\n if (typeof document !== 'undefined') {\n document.removeEventListener('fullscreenchange', this.handleFullscreenChange)\n }\n }\n\n private handleFullscreenChange = (): void => {\n if (typeof document !== 'undefined') {\n this.isFullscreen = !!document.fullscreenElement\n }\n }\n\n onPlay(): void {\n this.playbackFailed = false\n this.playing = true\n this.play.emit()\n }\n\n onPause(): void {\n this.playing = false\n this.pause.emit()\n }\n\n onTimeUpdate(): void {\n const v = this.videoElRef?.nativeElement\n if (!v) return\n this.current = v.currentTime\n this.timeUpdate.emit(this.current)\n }\n\n onLoadedMetadata(): void {\n const v = this.videoElRef?.nativeElement\n if (!v) return\n this.duration = v.duration || 0\n v.playbackRate = this.playbackRate\n v.volume = this.volume\n }\n\n onVolumeChange(): void {\n const v = this.videoElRef?.nativeElement\n if (!v) return\n this.volume = v.volume\n this.isMuted = v.muted\n }\n\n togglePlay(): void {\n const v = this.videoElRef?.nativeElement\n if (v) {\n if (v.paused) {\n v.play().catch(() => {\n this.playing = false\n this.playbackFailed = true\n })\n } else {\n v.pause()\n }\n } else {\n this.playing = !this.playing\n if (this.playing) this.play.emit()\n else this.pause.emit()\n }\n }\n\n toggleMute(): void {\n const v = this.videoElRef?.nativeElement\n if (v) {\n v.muted = !v.muted\n } else {\n this.isMuted = !this.isMuted\n this.volume = this.isMuted ? 0 : 1\n }\n }\n\n setVolume(v: number): void {\n this.volume = Math.min(1, Math.max(0, v))\n this.isMuted = this.volume === 0\n const el = this.videoElRef?.nativeElement\n if (el) {\n el.volume = this.volume\n el.muted = this.isMuted\n }\n }\n\n onVolumeSlider(e: Event): void {\n const target = e.target as HTMLInputElement\n this.setVolume(Number(target.value))\n }\n\n seek(e: Event): void {\n const target = e.target as HTMLInputElement\n this.seekTo(Number(target.value))\n }\n\n seekTo(t: number): void {\n const max = this.duration > 0 ? this.duration : Number.POSITIVE_INFINITY\n this.current = Math.min(max, Math.max(0, t))\n const v = this.videoElRef?.nativeElement\n if (v) v.currentTime = this.current\n this.timeUpdate.emit(this.current)\n }\n\n skip(seconds: number): void {\n this.seekTo(this.current + seconds)\n }\n\n setRate(r: number): void {\n if (r > 0) {\n this.playbackRate = r\n const v = this.videoElRef?.nativeElement\n if (v) v.playbackRate = r\n }\n }\n\n toggleFullscreen(): void {\n const el = this.hostEl\n if (!el || typeof document === 'undefined') return\n if (document.fullscreenElement) {\n document.exitFullscreen()\n } else {\n el.requestFullscreen()\n }\n }\n\n progress(): number {\n if (!this.duration) return 0\n return Math.min(1, Math.max(0, this.current / this.duration))\n }\n\n formatTime(s: number): string {\n const total = Math.max(0, Math.floor(s))\n const m = Math.floor(total / 60)\n const sec = total % 60\n return `${m}:${String(sec).padStart(2, '0')}`\n }\n\n onMouseMove(): void {\n this.showControls = true\n if (this.hideTimer) clearTimeout(this.hideTimer)\n if (this.playing) {\n this.hideTimer = setTimeout(() => {\n this.showControls = false\n }, 2500)\n }\n }\n\n onMouseLeave(): void {\n if (this.playing) this.showControls = false\n }\n\n onKeydown(e: KeyboardEvent): void {\n if (this.nativeControls) return\n const target = e.target as HTMLElement | null\n if ((e.key === ' ' || e.key === 'Enter') && target?.closest('button')) return\n if (target instanceof HTMLInputElement && target.type === 'range' && e.key.startsWith('Arrow')) return\n\n const key = e.key\n if (key === ' ' || key === 'k' || key === 'K') {\n e.preventDefault()\n this.togglePlay()\n } else if (key === 'm' || key === 'M') {\n e.preventDefault()\n this.toggleMute()\n } else if (key === 'f' || key === 'F') {\n e.preventDefault()\n this.toggleFullscreen()\n } else if (key === 'ArrowLeft') {\n e.preventDefault()\n this.skip(-5)\n } else if (key === 'ArrowRight') {\n e.preventDefault()\n this.skip(5)\n } else if (key === 'ArrowUp') {\n e.preventDefault()\n this.setVolume(this.volume + 0.05)\n } else if (key === 'ArrowDown') {\n e.preventDefault()\n this.setVolume(this.volume - 0.05)\n }\n }\n}\n", "type": "registry:ui", "target": "~/src/app/components/ui/video/video.component.ts" }, { "path": "packages/registry-angular/components/video/index.ts", "content": "export { UiVideoComponent } from './video.component'\n", "type": "registry:ui", "target": "~/src/app/components/ui/video/index.ts" } ], "dependencies": [], "devDependencies": [], "registryDependencies": [], "description": "Video player wrapper with a custom controls overlay on a native video element. Supports src, poster, autoplay, loop, muted, custom or native controls, playback rate, fullscreen, time display, progress bar, play/pause, skip, and volume.", "categories": [ "media", "display" ] }