@semantic-components/ui-lab 0.62.0 → 0.63.0

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

@@ -0,0 +1,275 @@
+# 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

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1,35 @@
+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

@@ -0,0 +1,36 @@
+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

@@ -0,0 +1,28 @@
+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

@@ -0,0 +1,38 @@
+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

@@ -0,0 +1,37 @@
+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

@@ -0,0 +1,37 @@
+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

@@ -0,0 +1,56 @@
+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

@@ -0,0 +1,44 @@
+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

@@ -0,0 +1,74 @@
+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);
+  }
+}