@semantic-components/ui-lab 0.62.0 → 0.63.0

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

@@ -0,0 +1,31 @@
+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: 'span[sc-video-player-time]',
+  template: `
+    {{ player.formatTime(player.currentTime()) }} /
+    {{ player.formatTime(player.duration()) }}
+  `,
+  host: {
+    '[class]': 'class()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScVideoPlayerTime {
+  protected readonly player = inject(SC_VIDEO_PLAYER);
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() =>
+    cn('text-sm text-white', this.classInput()),
+  );
+}

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

@@ -0,0 +1,13 @@
+export interface ScVideoSource {
+  src: string;
+  type?: string;
+  label?: string;
+}
+
+export interface ScVideoTrack {
+  src: string;
+  kind: 'subtitles' | 'captions' | 'descriptions' | 'chapters' | 'metadata';
+  srclang: string;
+  label: string;
+  default?: boolean;
+}

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

@@ -0,0 +1,127 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  DestroyRef,
+  ElementRef,
+  ViewEncapsulation,
+  afterNextRender,
+  computed,
+  inject,
+  input,
+  output,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+import { SC_VIDEO_PLAYER } from './video-player';
+import type { ScVideoSource, ScVideoTrack } from './video-player-types';
+
+@Component({
+  selector: 'video[sc-video-player-video]',
+  template: `
+    @for (source of sources(); track source.src) {
+      <source [src]="source.src" [type]="source.type || 'video/mp4'" />
+    }
+    @if (src()) {
+      <source [src]="src()" type="video/mp4" />
+    }
+    @for (track of tracks(); track track.src) {
+      <track
+        [src]="track.src"
+        [kind]="track.kind"
+        [srclang]="track.srclang"
+        [label]="track.label"
+        [default]="track.default"
+      />
+    }
+  `,
+  host: {
+    '[class]': 'class()',
+    '[poster]': 'poster()',
+    '[autoplay]': 'autoplay()',
+    '[loop]': 'loop()',
+    '[muted]': 'muted()',
+    '[playsInline]': 'playsInline()',
+    '(timeupdate)': 'onTimeUpdate()',
+    '(loadedmetadata)': 'onLoadedMetadata()',
+    '(ended)': 'ended.emit()',
+    '(play)': 'onPlay()',
+    '(pause)': 'onPause()',
+    '(waiting)': 'player.isBuffering.set(true)',
+    '(canplay)': 'player.isBuffering.set(false)',
+    '(volumechange)': 'onVolumeChange()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScVideoPlayerVideo {
+  protected readonly player = inject(SC_VIDEO_PLAYER);
+  private readonly elementRef = inject(ElementRef<HTMLVideoElement>);
+  private readonly destroyRef = inject(DestroyRef);
+
+  readonly src = input<string>('');
+  readonly sources = input<ScVideoSource[]>([]);
+  readonly tracks = input<ScVideoTrack[]>([]);
+  readonly poster = input<string>('');
+  readonly autoplay = input<boolean>(false);
+  readonly loop = input<boolean>(false);
+  readonly muted = input<boolean>(false);
+  readonly playsInline = input<boolean>(true);
+  readonly aspectRatio = input<string>('16/9');
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  // Outputs
+  readonly ended = output<void>();
+  readonly timeUpdate = output<number>();
+
+  protected readonly class = computed(() =>
+    cn(
+      'w-full h-full object-contain',
+      `aspect-[${this.aspectRatio()}]`,
+      this.classInput(),
+    ),
+  );
+
+  constructor() {
+    afterNextRender(() => {
+      const video = this.elementRef.nativeElement;
+      this.player.videoElement.set(video);
+    });
+
+    this.destroyRef.onDestroy(() => {
+      this.player.videoElement.set(null);
+    });
+  }
+
+  protected onTimeUpdate(): void {
+    const video = this.elementRef.nativeElement;
+    this.player.currentTime.set(video.currentTime);
+    this.timeUpdate.emit(video.currentTime);
+
+    // Update buffered
+    if (video.buffered.length > 0) {
+      this.player.buffered.set(video.buffered.end(video.buffered.length - 1));
+    }
+  }
+
+  protected onLoadedMetadata(): void {
+    const video = this.elementRef.nativeElement;
+    this.player.duration.set(video.duration);
+    video.volume = this.player.volume();
+    video.playbackRate = this.player.playbackRate();
+  }
+
+  protected onPlay(): void {
+    this.player.isPlaying.set(true);
+  }
+
+  protected onPause(): void {
+    this.player.isPlaying.set(false);
+  }
+
+  protected onVolumeChange(): void {
+    const video = this.elementRef.nativeElement;
+    this.player.isMuted.set(video.muted);
+    if (!video.muted) {
+      this.player.volume.set(video.volume);
+    }
+  }
+}

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

@@ -0,0 +1,61 @@
+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-volume]',
+  template: `
+    <button
+      type="button"
+      (click)="player.toggleMute()"
+      [class]="buttonClass()"
+      [attr.aria-label]="player.isMuted() ? 'Unmute' : 'Mute'"
+    >
+      <ng-content select="[volume-icon]" />
+    </button>
+    <input
+      type="range"
+      min="0"
+      max="1"
+      step="0.01"
+      [value]="player.volume()"
+      (input)="onVolumeInput($event)"
+      class="w-0 group-hover:w-20 transition-all duration-200 h-1 accent-white cursor-pointer"
+      aria-label="Volume"
+    />
+  `,
+  host: {
+    '[class]': 'class()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScVideoPlayerVolume {
+  protected readonly player = inject(SC_VIDEO_PLAYER);
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() =>
+    cn('flex items-center gap-1 group', 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',
+      '[&_svg]:size-5',
+    ),
+  );
+
+  protected onVolumeInput(event: Event): void {
+    const value = +(event.target as HTMLInputElement).value;
+    this.player.setVolume(value);
+  }
+}

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

@@ -0,0 +1,139 @@
+import { computed, Directive, InjectionToken, signal } from '@angular/core';
+
+export const SC_VIDEO_PLAYER = new InjectionToken<ScVideoPlayer>(
+  'SC_VIDEO_PLAYER',
+);
+
+@Directive({
+  selector: '[sc-video-player]',
+  exportAs: 'scVideoPlayer',
+  providers: [{ provide: SC_VIDEO_PLAYER, useExisting: ScVideoPlayer }],
+  host: {
+    'data-slot': 'video-player',
+  },
+})
+export class ScVideoPlayer {
+  // Video element reference
+  readonly videoElement = signal<HTMLVideoElement | null>(null);
+
+  // Playback state
+  readonly isPlaying = signal(false);
+  readonly isBuffering = signal(false);
+  readonly currentTime = signal(0);
+  readonly duration = signal(0);
+  readonly buffered = signal(0);
+
+  // Volume state
+  readonly volume = signal(1);
+  readonly isMuted = signal(false);
+
+  // UI state
+  readonly isFullscreen = signal(false);
+  readonly showControls = signal(true);
+  readonly playbackRate = signal(1);
+
+  // Computed
+  readonly progressPercent = computed(() => {
+    const duration = this.duration();
+    if (duration === 0) return 0;
+    return (this.currentTime() / duration) * 100;
+  });
+
+  readonly bufferedPercent = computed(() => {
+    const duration = this.duration();
+    if (duration === 0) return 0;
+    return (this.buffered() / duration) * 100;
+  });
+
+  // Methods
+  play(): void {
+    this.videoElement()?.play();
+  }
+
+  pause(): void {
+    this.videoElement()?.pause();
+  }
+
+  togglePlay(): void {
+    if (this.isPlaying()) {
+      this.pause();
+    } else {
+      this.play();
+    }
+  }
+
+  skip(seconds: number): void {
+    const video = this.videoElement();
+    if (!video) return;
+    video.currentTime = Math.max(
+      0,
+      Math.min(video.duration, video.currentTime + seconds),
+    );
+  }
+
+  setVolume(value: number): void {
+    const video = this.videoElement();
+    if (!video) return;
+    video.volume = value;
+    video.muted = value === 0;
+    this.volume.set(value);
+    this.isMuted.set(value === 0);
+  }
+
+  toggleMute(): void {
+    const video = this.videoElement();
+    if (!video) return;
+
+    if (this.isMuted()) {
+      video.muted = false;
+      const vol = this.volume() || 0.5;
+      video.volume = vol;
+      this.isMuted.set(false);
+    } else {
+      video.muted = true;
+      this.isMuted.set(true);
+    }
+  }
+
+  setPlaybackRate(rate: number): void {
+    const video = this.videoElement();
+    if (!video) return;
+    video.playbackRate = rate;
+    this.playbackRate.set(rate);
+  }
+
+  seek(percent: number): void {
+    const video = this.videoElement();
+    if (!video) return;
+    video.currentTime = (percent / 100) * video.duration;
+  }
+
+  toggleFullscreen(): void {
+    const container = this.videoElement()?.parentElement;
+    if (!container) return;
+
+    if (this.isFullscreen()) {
+      document.exitFullscreen?.();
+    } else {
+      container.requestFullscreen?.();
+    }
+  }
+
+  togglePiP(): void {
+    const video = this.videoElement();
+    if (!video) return;
+
+    if (document.pictureInPictureElement) {
+      document.exitPictureInPicture?.();
+    } else {
+      video.requestPictureInPicture?.();
+    }
+  }
+
+  formatTime(seconds: number): string {
+    if (!isFinite(seconds) || isNaN(seconds)) return '0:00';
+    const mins = Math.floor(seconds / 60);
+    const secs = Math.floor(seconds % 60);
+    return `${mins}:${secs.toString().padStart(2, '0')}`;
+  }
+}

package/src/lib/components/virtual-list/README.md

@@ -0,0 +1,120 @@
+# Virtual List
+
+A high-performance virtualized list component that efficiently renders large datasets by only rendering visible items.
+
+## Installation
+
+```typescript
+import { ScVirtualList } from '@/ui/virtual-list';
+import type { VirtualListItem, VirtualListRange } from '@/ui/virtual-list';
+```
+
+## Usage
+
+### Basic Usage
+
+```html
+<sc-virtual-list [items]="items" [itemHeight]="48" [height]="400">
+  <ng-template let-item let-index="index">
+    <div class="p-3 border-b">{{ index }}: {{ item }}</div>
+  </ng-template>
+</sc-virtual-list>
+```
+
+```typescript
+items = Array.from({ length: 10000 }, (_, i) => `Item ${i + 1}`);
+```
+
+### Custom Item Template
+
+```html
+<sc-virtual-list [items]="users" [itemHeight]="64">
+  <ng-template let-user let-index="index">
+    <div class="flex items-center gap-3 p-3 border-b">
+      <img [src]="user.avatar" class="w-10 h-10 rounded-full" />
+      <div>
+        <div class="font-medium">{{ user.name }}</div>
+        <div class="text-sm text-muted-foreground">{{ user.email }}</div>
+      </div>
+    </div>
+  </ng-template>
+</sc-virtual-list>
+```
+
+### With Custom Track Function
+
+```html
+<sc-virtual-list [items]="items" [trackByFn]="trackById">
+  <ng-template let-item>{{ item.name }}</ng-template>
+</sc-virtual-list>
+```
+
+```typescript
+trackById = (index: number, item: User) => item.id;
+```
+
+### Listening to Range Changes
+
+```html
+<sc-virtual-list [items]="items" (rangeChange)="onRangeChange($event)">
+  <ng-template let-item>{{ item }}</ng-template>
+</sc-virtual-list>
+```
+
+```typescript
+onRangeChange(range: VirtualListRange) {
+  console.log('Visible range:', range.start, '-', range.end);
+}
+```
+
+## API Reference
+
+### Inputs
+
+| Input        | Type                                  | Default    | Description                       |
+| ------------ | ------------------------------------- | ---------- | --------------------------------- |
+| `items`      | `T[]`                                 | `[]`       | Array of items to render          |
+| `itemHeight` | `number`                              | `48`       | Fixed height of each item in px   |
+| `overscan`   | `number`                              | `3`        | Extra items to render above/below |
+| `height`     | `string \| number`                    | `'400px'`  | Container height                  |
+| `class`      | `string`                              | `''`       | Additional CSS classes            |
+| `trackByFn`  | `(index: number, item: T) => unknown` | `(i) => i` | Track function for items          |
+
+### Outputs
+
+| Output        | Type               | Description                        |
+| ------------- | ------------------ | ---------------------------------- |
+| `rangeChange` | `VirtualListRange` | Emitted when visible range changes |
+
+### Methods
+
+| Method                                    | Description                   |
+| ----------------------------------------- | ----------------------------- |
+| `scrollToIndex(index: number, behavior?)` | Scroll to specific item index |
+| `scrollToTop(behavior?)`                  | Scroll to top of list         |
+| `scrollToBottom(behavior?)`               | Scroll to bottom of list      |
+
+## Type Definitions
+
+```typescript
+interface VirtualListRange {
+  start: number;
+  end: number;
+}
+
+interface VirtualListItem<T = unknown> {
+  index: number;
+  data: T;
+}
+```
+
+## Features
+
+- Efficient virtualization for large datasets
+- Fixed-height item rendering
+- Configurable overscan for smoother scrolling
+- Custom item templates via ng-template
+- Custom track function support
+- Programmatic scroll methods
+- Range change events for infinite loading
+- Smooth scroll behavior support

package/src/lib/components/virtual-list/index.ts

@@ -0,0 +1,2 @@
+export { ScVirtualList } from './virtual-list';
+export type { VirtualListItem, VirtualListRange } from './virtual-list-types';

package/src/lib/components/virtual-list/virtual-list-types.ts

@@ -0,0 +1,9 @@
+export interface VirtualListRange {
+  start: number;
+  end: number;
+}
+
+export interface VirtualListItem<T = unknown> {
+  index: number;
+  data: T;
+}

package/src/lib/components/virtual-list/virtual-list.ts

@@ -0,0 +1,174 @@
+import {
+  afterNextRender,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  contentChild,
+  DestroyRef,
+  ElementRef,
+  inject,
+  input,
+  output,
+  signal,
+  TemplateRef,
+  viewChild,
+  ViewEncapsulation,
+} from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { cn } from '@semantic-components/ui';
+import type { VirtualListItem, VirtualListRange } from './virtual-list-types';
+
+@Component({
+  selector: 'sc-virtual-list',
+  imports: [NgTemplateOutlet],
+  template: `
+    <div
+      #container
+      [class]="containerClass()"
+      [style.height]="containerHeight()"
+      (scroll)="onScroll()"
+    >
+      <!-- Spacer for total content height -->
+      <div [style.height.px]="totalHeight()" class="relative">
+        <!-- Rendered items -->
+        <div
+          [style.transform]="'translateY(' + offsetY() + 'px)'"
+          class="absolute top-0 left-0 right-0"
+        >
+          @for (
+            item of visibleItems();
+            track trackByFn()(item.index, item.data)
+          ) {
+            <div [style.height.px]="itemHeight()">
+              <ng-container
+                [ngTemplateOutlet]="itemTemplate()"
+                [ngTemplateOutletContext]="{
+                  $implicit: item.data,
+                  index: item.index,
+                }"
+              />
+            </div>
+          }
+        </div>
+      </div>
+    </div>
+  `,
+  styles: `
+    :host {
+      display: block;
+    }
+  `,
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScVirtualList<T> {
+  private readonly destroyRef = inject(DestroyRef);
+
+  readonly containerRef = viewChild<ElementRef<HTMLDivElement>>('container');
+  readonly itemTemplate =
+    contentChild.required<TemplateRef<{ $implicit: T; index: number }>>(
+      TemplateRef,
+    );
+
+  readonly items = input<T[]>([]);
+  readonly itemHeight = input(48);
+  readonly overscan = input(3);
+  readonly height = input<string | number>('400px');
+  readonly class = input<string>('');
+  readonly trackByFn = input<(index: number, item: T) => unknown>(
+    (index) => index,
+  );
+
+  readonly rangeChange = output<VirtualListRange>();
+
+  protected readonly scrollTop = signal(0);
+
+  protected readonly containerHeight = computed(() => {
+    const h = this.height();
+    return typeof h === 'number' ? `${h}px` : h;
+  });
+
+  protected readonly totalHeight = computed(() => {
+    return this.items().length * this.itemHeight();
+  });
+
+  protected readonly visibleCount = computed(() => {
+    const h = this.height();
+    const heightPx = typeof h === 'number' ? h : parseInt(h, 10) || 400;
+    return Math.ceil(heightPx / this.itemHeight()) + 1;
+  });
+
+  protected readonly startIndex = computed(() => {
+    const index = Math.floor(this.scrollTop() / this.itemHeight());
+    return Math.max(0, index - this.overscan());
+  });
+
+  protected readonly endIndex = computed(() => {
+    const start = this.startIndex();
+    const visible = this.visibleCount();
+    const overscan = this.overscan();
+    const total = this.items().length;
+    return Math.min(total, start + visible + overscan * 2);
+  });
+
+  protected readonly offsetY = computed(() => {
+    return this.startIndex() * this.itemHeight();
+  });
+
+  protected readonly visibleItems = computed<VirtualListItem<T>[]>(() => {
+    const allItems = this.items();
+    const start = this.startIndex();
+    const end = this.endIndex();
+
+    const result: VirtualListItem<T>[] = [];
+    for (let i = start; i < end; i++) {
+      if (allItems[i] !== undefined) {
+        result.push({ index: i, data: allItems[i] });
+      }
+    }
+    return result;
+  });
+
+  protected readonly containerClass = computed(() =>
+    cn('overflow-auto', this.class()),
+  );
+
+  constructor() {
+    afterNextRender(() => {
+      // Initial range emit
+      this.emitRange();
+    });
+  }
+
+  onScroll(): void {
+    const container = this.containerRef()?.nativeElement;
+    if (container) {
+      this.scrollTop.set(container.scrollTop);
+      this.emitRange();
+    }
+  }
+
+  private emitRange(): void {
+    this.rangeChange.emit({
+      start: this.startIndex(),
+      end: this.endIndex(),
+    });
+  }
+
+  scrollToIndex(index: number, behavior: ScrollBehavior = 'auto'): void {
+    const container = this.containerRef()?.nativeElement;
+    if (container) {
+      const top = index * this.itemHeight();
+      container.scrollTo({ top, behavior });
+    }
+  }
+
+  scrollToTop(behavior: ScrollBehavior = 'auto'): void {
+    this.scrollToIndex(0, behavior);
+  }
+
+  scrollToBottom(behavior: ScrollBehavior = 'auto'): void {
+    const lastIndex = Math.max(0, this.items().length - 1);
+    this.scrollToIndex(lastIndex, behavior);
+  }
+}