@semantic-components/ui-lab 0.63.0 → 0.65.0

package/src/lib/components/video-player/README.md

@@ -1,275 +0,0 @@
-# Video Player
-
-Full-featured HTML5 video player with composable controls, keyboard shortcuts, and fullscreen support.
-
-## Composable Architecture
-
-The video player uses a **composable architecture** that gives you full control over layout and functionality.
-
-### Basic Usage
-
-```typescript
-import {
-  ScVideoPlayer,
-  ScVideoPlayerVideo,
-  ScVideoPlayerControls,
-  ScVideoPlayerPlayButton,
-  ScVideoPlayerProgress,
-  ScVideoPlayerTime,
-  ScVideoPlayerFullscreenButton,
-} from '@semantic-components/ui-lab';
-
-@Component({
-  imports: [
-    ScVideoPlayer,
-    ScVideoPlayerVideo,
-    ScVideoPlayerControls,
-    ScVideoPlayerPlayButton,
-    ScVideoPlayerProgress,
-    ScVideoPlayerTime,
-    ScVideoPlayerFullscreenButton,
-  ],
-  template: `
-    <div sc-video-player class="relative bg-black rounded-lg overflow-hidden">
-      <video
-        sc-video-player-video
-        [src]="'video.mp4'"
-        [poster]="'poster.jpg'"
-      ></video>
-
-      <div sc-video-player-controls>
-        <div sc-video-player-progress></div>
-        <div class="flex items-center gap-2 mt-2">
-          <button sc-video-player-play>
-            <!-- Play/pause icon -->
-          </button>
-          <span sc-video-player-time></span>
-          <button sc-video-player-fullscreen>
-            <!-- Fullscreen icon -->
-          </button>
-        </div>
-      </div>
-    </div>
-  `,
-})
-```
-
-### Composable Components
-
-**`ScVideoPlayer` (Directive)**
-
-- Root directive that provides context
-- **Selector**: `[sc-video-player]`
-- Manages playback state, volume, fullscreen, etc.
-
-**`ScVideoPlayerVideo` (Component)**
-
-- Video element for playback
-- **Selector**: `video[sc-video-player-video]`
-- **Inputs**: `src`, `sources`, `tracks`, `poster`, `autoplay`, `loop`, `muted`, `playsInline`, `aspectRatio`
-- **Outputs**: `ended`, `timeUpdate`
-
-**`ScVideoPlayerControls` (Component)**
-
-- Container for control elements (uses `<ng-content>`)
-- **Selector**: `div[sc-video-player-controls]`
-- **Default position**: Absolute bottom with gradient overlay
-
-**`ScVideoPlayerPlayButton` (Component)**
-
-- Play/pause toggle button
-- **Selector**: `button[sc-video-player-play]`
-- **Auto state**: Reflects playing/paused state
-
-**`ScVideoPlayerProgress` (Component)**
-
-- Seek bar with buffering indicator
-- **Selector**: `div[sc-video-player-progress]`
-- Shows buffered ranges and current progress
-
-**`ScVideoPlayerVolume` (Component)**
-
-- Volume control with mute button and slider
-- **Selector**: `div[sc-video-player-volume]`
-- Requires `[volume-icon]` selector for icon content
-
-**`ScVideoPlayerTime` (Component)**
-
-- Current time / duration display
-- **Selector**: `span[sc-video-player-time]`
-- Automatically formats time
-
-**`ScVideoPlayerSkipButton` (Component)**
-
-- Skip forward/back button
-- **Selector**: `button[sc-video-player-skip]`
-- **Inputs**: `seconds` (required), `ariaLabel`
-
-**`ScVideoPlayerSpeedButton` (Component)**
-
-- Playback speed menu
-- **Selector**: `div[sc-video-player-speed]`
-- **Inputs**: `speeds` (default: `[0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2]`)
-
-**`ScVideoPlayerFullscreenButton` (Component)**
-
-- Fullscreen toggle
-- **Selector**: `button[sc-video-player-fullscreen]`
-
-**`ScVideoPlayerPipButton` (Component)**
-
-- Picture-in-picture toggle
-- **Selector**: `button[sc-video-player-pip]`
-
-**`ScVideoPlayerBigPlayButton` (Component)**
-
-- Large centered play button overlay
-- **Selector**: `button[sc-video-player-big-play]`
-
-**`ScVideoPlayerBuffering` (Component)**
-
-- Buffering indicator (auto-shows when buffering)
-- **Selector**: `div[sc-video-player-buffering]`
-- Uses `<ng-content>` for custom spinner
-
-### Flexible Examples
-
-#### Minimal Player
-
-```html
-<div sc-video-player class="relative">
-  <video sc-video-player-video [src]="video"></video>
-
-  <div sc-video-player-controls>
-    <button sc-video-player-play>Play</button>
-  </div>
-</div>
-```
-
-#### With Progress and Time
-
-```html
-<div sc-video-player class="relative">
-  <video sc-video-player-video [src]="video"></video>
-
-  <div sc-video-player-controls>
-    <div sc-video-player-progress class="mb-2"></div>
-    <div class="flex items-center gap-2">
-      <button sc-video-player-play>⏯</button>
-      <span sc-video-player-time></span>
-    </div>
-  </div>
-</div>
-```
-
-#### Full-Featured Player
-
-```html
-<div sc-video-player class="relative bg-black rounded-lg overflow-hidden">
-  <!-- Buffering Indicator -->
-  <div sc-video-player-buffering>
-    <div class="size-12 border-4 border-white/30 border-t-white rounded-full animate-spin"></div>
-  </div>
-
-  <!-- Video -->
-  <video sc-video-player-video [src]="video" [poster]="poster"></video>
-
-  <!-- Big Play Button -->
-  @if (!player.isPlaying()) {
-  <button sc-video-player-big-play #player="scVideoPlayer">
-    <div class="size-20 rounded-full bg-white/90 flex items-center justify-center">
-      <!-- Play icon -->
-    </div>
-  </button>
-  }
-
-  <!-- Controls -->
-  <div sc-video-player-controls>
-    <div sc-video-player-progress class="mb-2"></div>
-
-    <div class="flex items-center gap-2">
-      <button sc-video-player-play>⏯</button>
-      <button sc-video-player-skip [seconds]="-10">⏪</button>
-      <button sc-video-player-skip [seconds]="10">⏩</button>
-
-      <div sc-video-player-volume>
-        <svg volume-icon><!-- Volume icon --></svg>
-      </div>
-
-      <span sc-video-player-time class="ml-2"></span>
-
-      <div class="flex-1"></div>
-
-      <div sc-video-player-speed></div>
-      <button sc-video-player-pip>PiP</button>
-      <button sc-video-player-fullscreen>⛶</button>
-    </div>
-  </div>
-</div>
-```
-
-#### Multiple Video Sources
-
-```html
-<video
-  sc-video-player-video
-  [sources]="[
-    { src: 'video.webm', type: 'video/webm' },
-    { src: 'video.mp4', type: 'video/mp4' }
-  ]"
-></video>
-```
-
-#### With Subtitles
-
-```html
-<video
-  sc-video-player-video
-  [src]="video"
-  [tracks]="[
-    { src: 'en.vtt', kind: 'subtitles', srclang: 'en', label: 'English', default: true },
-    { src: 'es.vtt', kind: 'subtitles', srclang: 'es', label: 'Spanish' }
-  ]"
-></video>
-```
-
-## Types
-
-```typescript
-interface ScVideoSource {
-  src: string;
-  type?: string;
-  label?: string;
-}
-
-interface ScVideoTrack {
-  src: string;
-  kind: 'subtitles' | 'captions' | 'descriptions' | 'chapters' | 'metadata';
-  srclang: string;
-  label: string;
-  default?: boolean;
-}
-```
-
-## Features
-
-- ✅ Composable architecture for maximum flexibility
-- ✅ Progress bar with buffering indicator
-- ✅ Volume slider with mute toggle
-- ✅ Playback speed selection
-- ✅ Skip forward/back buttons
-- ✅ Picture-in-picture support
-- ✅ Fullscreen mode
-- ✅ Keyboard navigation
-- ✅ Multiple video sources
-- ✅ Subtitle/caption support
-- ✅ Buffering indicator
-- ✅ Customizable controls layout
-
-## Accessibility
-
-- ARIA labels on all controls
-- Keyboard navigable
-- Screen reader friendly
-- Focus indicators
-- Semantic HTML structure

package/src/lib/components/video-player/index.ts

@@ -1,14 +0,0 @@
-export { ScVideoPlayer } from './video-player';
-export { ScVideoPlayerVideo } from './video-player-video';
-export { ScVideoPlayerControls } from './video-player-controls';
-export { ScVideoPlayerPlayButton } from './video-player-play-button';
-export { ScVideoPlayerProgress } from './video-player-progress';
-export { ScVideoPlayerVolume } from './video-player-volume';
-export { ScVideoPlayerTime } from './video-player-time';
-export { ScVideoPlayerFullscreenButton } from './video-player-fullscreen-button';
-export { ScVideoPlayerSkipButton } from './video-player-skip-button';
-export { ScVideoPlayerSpeedButton } from './video-player-speed-button';
-export { ScVideoPlayerPipButton } from './video-player-pip-button';
-export { ScVideoPlayerBigPlayButton } from './video-player-big-play-button';
-export { ScVideoPlayerBuffering } from './video-player-buffering';
-export type { ScVideoSource, ScVideoTrack } from './video-player-types';

package/src/lib/components/video-player/video-player-big-play-button.ts

@@ -1,35 +0,0 @@
-import {
-  Component,
-  ChangeDetectionStrategy,
-  computed,
-  input,
-  inject,
-  ViewEncapsulation,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-import { SC_VIDEO_PLAYER } from './video-player';
-
-@Component({
-  selector: 'button[sc-video-player-big-play]',
-  template: '<ng-content />',
-  host: {
-    type: 'button',
-    '[class]': 'class()',
-    'aria-label': 'Play video',
-    '(click)': 'player.play()',
-  },
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScVideoPlayerBigPlayButton {
-  protected readonly player = inject(SC_VIDEO_PLAYER);
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  protected readonly class = computed(() =>
-    cn(
-      'absolute inset-0 flex items-center justify-center bg-black/30 hover:bg-black/40 transition-colors group',
-      '[&_svg]:size-5',
-      this.classInput(),
-    ),
-  );
-}

package/src/lib/components/video-player/video-player-buffering.ts

@@ -1,36 +0,0 @@
-import {
-  Component,
-  ChangeDetectionStrategy,
-  computed,
-  input,
-  inject,
-  ViewEncapsulation,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-import { SC_VIDEO_PLAYER } from './video-player';
-
-@Component({
-  selector: 'div[sc-video-player-buffering]',
-  template: `
-    @if (player.isBuffering()) {
-      <ng-content />
-    }
-  `,
-  host: {
-    '[class]': 'class()',
-  },
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScVideoPlayerBuffering {
-  protected readonly player = inject(SC_VIDEO_PLAYER);
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  protected readonly class = computed(() =>
-    cn(
-      'absolute inset-0 flex items-center justify-center bg-black/20 pointer-events-none',
-      '[&_svg]:size-12 [&_svg]:text-white [&_svg]:animate-spin',
-      this.classInput(),
-    ),
-  );
-}

package/src/lib/components/video-player/video-player-controls.ts

@@ -1,28 +0,0 @@
-import {
-  Component,
-  ChangeDetectionStrategy,
-  computed,
-  input,
-  ViewEncapsulation,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-
-@Component({
-  selector: 'div[sc-video-player-controls]',
-  template: '<ng-content />',
-  host: {
-    '[class]': 'class()',
-  },
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScVideoPlayerControls {
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  protected readonly class = computed(() =>
-    cn(
-      'absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/80 to-transparent p-4',
-      this.classInput(),
-    ),
-  );
-}

package/src/lib/components/video-player/video-player-fullscreen-button.ts

@@ -1,38 +0,0 @@
-import {
-  Component,
-  ChangeDetectionStrategy,
-  computed,
-  input,
-  inject,
-  ViewEncapsulation,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-import { SC_VIDEO_PLAYER } from './video-player';
-
-@Component({
-  selector: 'button[sc-video-player-fullscreen]',
-  template: '<ng-content />',
-  host: {
-    type: 'button',
-    '[class]': 'class()',
-    '[attr.aria-label]':
-      'player.isFullscreen() ? "Exit fullscreen" : "Enter fullscreen"',
-    '(click)': 'player.toggleFullscreen()',
-  },
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScVideoPlayerFullscreenButton {
-  protected readonly player = inject(SC_VIDEO_PLAYER);
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  protected readonly class = computed(() =>
-    cn(
-      'size-8 rounded flex items-center justify-center',
-      'text-white hover:bg-white/20 transition-colors',
-      'focus:outline-none focus:ring-2 focus:ring-white/50',
-      '[&_svg]:size-5',
-      this.classInput(),
-    ),
-  );
-}

package/src/lib/components/video-player/video-player-pip-button.ts

@@ -1,37 +0,0 @@
-import {
-  Component,
-  ChangeDetectionStrategy,
-  computed,
-  input,
-  inject,
-  ViewEncapsulation,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-import { SC_VIDEO_PLAYER } from './video-player';
-
-@Component({
-  selector: 'button[sc-video-player-pip]',
-  template: '<ng-content />',
-  host: {
-    type: 'button',
-    '[class]': 'class()',
-    'aria-label': 'Picture in picture',
-    '(click)': 'player.togglePiP()',
-  },
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScVideoPlayerPipButton {
-  protected readonly player = inject(SC_VIDEO_PLAYER);
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  protected readonly class = computed(() =>
-    cn(
-      'size-8 rounded flex items-center justify-center',
-      'text-white hover:bg-white/20 transition-colors',
-      'focus:outline-none focus:ring-2 focus:ring-white/50',
-      '[&_svg]:size-5',
-      this.classInput(),
-    ),
-  );
-}

package/src/lib/components/video-player/video-player-play-button.ts

@@ -1,37 +0,0 @@
-import {
-  Component,
-  ChangeDetectionStrategy,
-  computed,
-  input,
-  inject,
-  ViewEncapsulation,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-import { SC_VIDEO_PLAYER } from './video-player';
-
-@Component({
-  selector: 'button[sc-video-player-play]',
-  template: '<ng-content />',
-  host: {
-    type: 'button',
-    '[class]': 'class()',
-    '[attr.aria-label]': 'player.isPlaying() ? "Pause" : "Play"',
-    '(click)': 'player.togglePlay()',
-  },
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScVideoPlayerPlayButton {
-  protected readonly player = inject(SC_VIDEO_PLAYER);
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  protected readonly class = computed(() =>
-    cn(
-      'size-8 rounded flex items-center justify-center',
-      'text-white hover:bg-white/20 transition-colors',
-      'focus:outline-none focus:ring-2 focus:ring-white/50',
-      '[&_svg]:size-5',
-      this.classInput(),
-    ),
-  );
-}

package/src/lib/components/video-player/video-player-progress.ts

@@ -1,56 +0,0 @@
-import {
-  Component,
-  ChangeDetectionStrategy,
-  computed,
-  input,
-  inject,
-  ViewEncapsulation,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-import { SC_VIDEO_PLAYER } from './video-player';
-
-@Component({
-  selector: 'div[sc-video-player-progress]',
-  template: `
-    <!-- Buffered -->
-    <div
-      class="absolute inset-y-0 left-0 bg-white/50 rounded-full pointer-events-none"
-      [style.width.%]="player.bufferedPercent()"
-    ></div>
-    <!-- Progress -->
-    <div
-      class="absolute inset-y-0 left-0 bg-white rounded-full pointer-events-none"
-      [style.width.%]="player.progressPercent()"
-    ></div>
-    <!-- Thumb -->
-    <div
-      class="absolute top-1/2 -translate-y-1/2 size-3 bg-white rounded-full opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none"
-      [style.left.%]="player.progressPercent()"
-      [style.transform]="'translate(-50%, -50%)'"
-    ></div>
-  `,
-  host: {
-    '[class]': 'class()',
-    '(click)': 'onClick($event)',
-  },
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScVideoPlayerProgress {
-  protected readonly player = inject(SC_VIDEO_PLAYER);
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  protected readonly class = computed(() =>
-    cn(
-      'relative h-1 bg-white/30 rounded-full cursor-pointer group',
-      this.classInput(),
-    ),
-  );
-
-  protected onClick(event: MouseEvent): void {
-    const target = event.currentTarget as HTMLElement;
-    const rect = target.getBoundingClientRect();
-    const percent = ((event.clientX - rect.left) / rect.width) * 100;
-    this.player.seek(percent);
-  }
-}

package/src/lib/components/video-player/video-player-skip-button.ts

@@ -1,44 +0,0 @@
-import {
-  Component,
-  ChangeDetectionStrategy,
-  computed,
-  input,
-  inject,
-  ViewEncapsulation,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-import { SC_VIDEO_PLAYER } from './video-player';
-
-@Component({
-  selector: 'button[sc-video-player-skip]',
-  template: '<ng-content />',
-  host: {
-    type: 'button',
-    '[class]': 'class()',
-    '[attr.aria-label]': 'ariaLabel()',
-    '(click)': 'onClick()',
-  },
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScVideoPlayerSkipButton {
-  protected readonly player = inject(SC_VIDEO_PLAYER);
-
-  readonly seconds = input.required<number>();
-  readonly ariaLabel = input<string>('');
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  protected readonly class = computed(() =>
-    cn(
-      'size-8 rounded flex items-center justify-center',
-      'text-white hover:bg-white/20 transition-colors',
-      'focus:outline-none focus:ring-2 focus:ring-white/50',
-      '[&_svg]:size-5',
-      this.classInput(),
-    ),
-  );
-
-  protected onClick(): void {
-    this.player.skip(this.seconds());
-  }
-}

package/src/lib/components/video-player/video-player-speed-button.ts

@@ -1,74 +0,0 @@
-import {
-  Component,
-  ChangeDetectionStrategy,
-  computed,
-  input,
-  inject,
-  signal,
-  ViewEncapsulation,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-import { SC_VIDEO_PLAYER } from './video-player';
-
-@Component({
-  selector: 'div[sc-video-player-speed]',
-  template: `
-    <button
-      type="button"
-      (click)="showMenu.set(!showMenu())"
-      [class]="buttonClass()"
-      aria-label="Playback speed"
-    >
-      <span class="text-xs font-medium">{{ player.playbackRate() }}x</span>
-    </button>
-    @if (showMenu()) {
-      <div
-        class="absolute bottom-full right-0 mb-2 bg-black/90 rounded-lg py-2 min-w-[80px]"
-      >
-        @for (speed of speeds(); track speed) {
-          <button
-            type="button"
-            (click)="setSpeed(speed)"
-            [class]="getSpeedItemClass(speed)"
-          >
-            {{ speed }}x
-          </button>
-        }
-      </div>
-    }
-  `,
-  host: {
-    '[class]': 'class()',
-  },
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScVideoPlayerSpeedButton {
-  protected readonly player = inject(SC_VIDEO_PLAYER);
-  readonly speeds = input<number[]>([0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2]);
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  protected readonly showMenu = signal(false);
-
-  protected readonly class = computed(() => cn('relative', this.classInput()));
-
-  protected readonly buttonClass = computed(() =>
-    cn(
-      'size-8 rounded flex items-center justify-center',
-      'text-white hover:bg-white/20 transition-colors',
-      'focus:outline-none focus:ring-2 focus:ring-white/50',
-    ),
-  );
-
-  protected getSpeedItemClass(speed: number): string {
-    return cn(
-      'w-full px-4 py-1 text-sm text-white hover:bg-white/20 text-left',
-      this.player.playbackRate() === speed && 'bg-white/10',
-    );
-  }
-
-  protected setSpeed(speed: number): void {
-    this.player.setPlaybackRate(speed);
-    this.showMenu.set(false);
-  }
-}