@mediafox/core 1.2.8 → 1.2.10

package/src/playback/renderers/webgpu.ts

@@ -0,0 +1,395 @@
+import type { IRenderer, Rotation } from './types';
+
+export interface WebGPURendererOptions {
+  canvas: HTMLCanvasElement | OffscreenCanvas;
+  powerPreference?: 'high-performance' | 'low-power';
+  rotation?: Rotation;
+}
+
+export class WebGPURenderer implements IRenderer {
+  private canvas: HTMLCanvasElement | OffscreenCanvas;
+  private device: GPUDevice | null = null;
+  private context: GPUCanvasContext | null = null;
+  private pipeline: GPURenderPipeline | null = null;
+  private texture: GPUTexture | null = null;
+  private sampler: GPUSampler | null = null;
+  private bindGroup: GPUBindGroup | null = null;
+  private vertexBuffer: GPUBuffer | null = null;
+  private isInitialized = false;
+  private textureWidth = 0;
+  private textureHeight = 0;
+  private powerPreference: 'high-performance' | 'low-power';
+  private rotation: Rotation = 0;
+  // Pre-allocated typed array for quad vertices (4 vertices * 4 floats each: x, y, u, v)
+  private quadArray = new Float32Array(16);
+
+  private readonly vertexShaderSource = `
+    struct VSOut {
+      @builtin(position) pos : vec4f,
+      @location(0) uv : vec2f,
+    };
+
+    @vertex
+    fn vs_main(@location(0) in_pos: vec2f, @location(1) in_uv: vec2f) -> VSOut {
+      var out: VSOut;
+      out.pos = vec4f(in_pos, 0.0, 1.0);
+      out.uv = in_uv;
+      return out;
+    }
+  `;
+
+  private readonly fragmentShaderSource = `
+    @group(0) @binding(0) var texture_sampler: sampler;
+    @group(0) @binding(1) var texture_view: texture_2d<f32>;
+
+    @fragment
+    fn fs_main(@location(0) uv: vec2f) -> @location(0) vec4f {
+      return textureSample(texture_view, texture_sampler, uv);
+    }
+  `;
+
+  constructor(options: WebGPURendererOptions) {
+    this.canvas = options.canvas;
+    this.powerPreference = options.powerPreference || 'high-performance';
+    this.rotation = options.rotation ?? 0;
+    this.initialize().catch((err) => {
+      console.error('WebGPU initialization failed:', err);
+    });
+  }
+
+  private async initialize(): Promise<boolean> {
+    try {
+      const nav = navigator as Navigator & { gpu?: GPU };
+      if (!nav.gpu) {
+        console.log('WebGPU not available in navigator');
+        return false;
+      }
+
+      const adapter = await nav.gpu.requestAdapter({
+        powerPreference: this.powerPreference,
+      });
+
+      if (!adapter) {
+        console.log('WebGPU adapter not available');
+        return false;
+      }
+
+      this.device = await adapter.requestDevice();
+      if (!this.device) {
+        console.log('WebGPU device not available');
+        return false;
+      }
+
+      if ('getContext' in this.canvas) {
+        this.context = this.canvas.getContext('webgpu') as GPUCanvasContext | null;
+      }
+
+      if (!this.context) {
+        console.log('WebGPU context not available on canvas');
+        return false;
+      }
+
+      const canvasFormat = nav.gpu.getPreferredCanvasFormat();
+      this.context.configure({
+        device: this.device,
+        format: canvasFormat,
+        usage: GPUTextureUsage.RENDER_ATTACHMENT,
+        alphaMode: 'opaque',
+      });
+
+      await this.createRenderPipeline();
+      this.createVertexBuffer();
+
+      this.isInitialized = true;
+      console.log('WebGPU renderer initialized successfully');
+      return true;
+    } catch (error) {
+      console.error('WebGPU initialization error:', error);
+      return false;
+    }
+  }
+
+  private async createRenderPipeline(): Promise<void> {
+    if (!this.device) return;
+
+    const nav = navigator as Navigator & { gpu?: GPU };
+    if (!nav.gpu) return;
+
+    const vertexShaderModule = this.device.createShaderModule({
+      code: this.vertexShaderSource,
+    });
+
+    const fragmentShaderModule = this.device.createShaderModule({
+      code: this.fragmentShaderSource,
+    });
+
+    this.pipeline = this.device.createRenderPipeline({
+      layout: 'auto',
+      vertex: {
+        module: vertexShaderModule,
+        entryPoint: 'vs_main',
+        buffers: [
+          {
+            arrayStride: 16,
+            attributes: [
+              { shaderLocation: 0, offset: 0, format: 'float32x2' },
+              { shaderLocation: 1, offset: 8, format: 'float32x2' },
+            ],
+          },
+        ],
+      },
+      fragment: {
+        module: fragmentShaderModule,
+        entryPoint: 'fs_main',
+        targets: [{ format: nav.gpu.getPreferredCanvasFormat() }],
+      },
+      primitive: { topology: 'triangle-strip' },
+    });
+  }
+
+  private createVertexBuffer(): void {
+    if (!this.device) return;
+
+    this.vertexBuffer = this.device.createBuffer({
+      size: 4 * 4 * 4,
+      usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
+    });
+  }
+
+  private createTexture(width: number, height: number): void {
+    if (!this.device) return;
+
+    if (this.texture) this.texture.destroy();
+
+    this.texture = this.device.createTexture({
+      size: { width, height },
+      format: 'rgba8unorm',
+      usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT,
+    });
+
+    if (!this.sampler) {
+      this.sampler = this.device.createSampler({
+        magFilter: 'linear',
+        minFilter: 'linear',
+        addressModeU: 'clamp-to-edge',
+        addressModeV: 'clamp-to-edge',
+      });
+    }
+
+    this.createBindGroup();
+  }
+
+  private createBindGroup(): void {
+    if (!this.device || !this.texture || !this.sampler || !this.pipeline) return;
+
+    this.bindGroup = this.device.createBindGroup({
+      layout: this.pipeline.getBindGroupLayout(0),
+      entries: [
+        { binding: 0, resource: this.sampler },
+        { binding: 1, resource: this.texture.createView() },
+      ],
+    });
+  }
+
+  public isReady(): boolean {
+    return this.isInitialized && this.device !== null && this.context !== null && this.pipeline !== null;
+  }
+
+  public render(source: HTMLCanvasElement | OffscreenCanvas): boolean {
+    if (!this.isReady() || !this.device || !this.context || !this.pipeline) return false;
+
+    try {
+      const sourceWidth = source.width;
+      const sourceHeight = source.height;
+
+      if (sourceWidth === 0 || sourceHeight === 0) {
+        console.warn(`WebGPU: Source canvas has zero dimensions (${sourceWidth}x${sourceHeight})`);
+        return false;
+      }
+
+      const canvasWidth = this.canvas.width;
+      const canvasHeight = this.canvas.height;
+
+      if (canvasWidth === 0 || canvasHeight === 0) {
+        console.warn(`WebGPU: Output canvas has zero dimensions (${canvasWidth}x${canvasHeight})`);
+        return false;
+      }
+
+      if (sourceWidth !== this.textureWidth || sourceHeight !== this.textureHeight) {
+        this.createTexture(sourceWidth, sourceHeight);
+        this.textureWidth = sourceWidth;
+        this.textureHeight = sourceHeight;
+      }
+
+      if (!this.texture) return false;
+
+      // Use copyExternalImageToTexture for better performance
+      try {
+        this.device.queue.copyExternalImageToTexture(
+          { source },
+          { texture: this.texture },
+          { width: sourceWidth, height: sourceHeight }
+        );
+      } catch {
+        // Fallback to getImageData if copyExternalImageToTexture fails
+        const sourceCtx = source.getContext('2d');
+        if (!sourceCtx) return false;
+
+        const imageData = sourceCtx.getImageData(0, 0, sourceWidth, sourceHeight);
+        const data = new Uint8Array(imageData.data.buffer);
+
+        this.device.queue.writeTexture(
+          { texture: this.texture, origin: { x: 0, y: 0, z: 0 } },
+          data,
+          { bytesPerRow: sourceWidth * 4, rowsPerImage: sourceHeight },
+          { width: sourceWidth, height: sourceHeight, depthOrArrayLayers: 1 }
+        );
+      }
+
+      const commandEncoder = this.device.createCommandEncoder();
+      const textureView = this.context.getCurrentTexture().createView();
+
+      const renderPass = commandEncoder.beginRenderPass({
+        colorAttachments: [
+          {
+            view: textureView,
+            clearValue: { r: 0, g: 0, b: 0, a: 1 },
+            loadOp: 'clear',
+            storeOp: 'store',
+          },
+        ],
+      });
+
+      renderPass.setPipeline(this.pipeline);
+      if (this.bindGroup) renderPass.setBindGroup(0, this.bindGroup);
+
+      // For 90/270 rotation, swap source dimensions for aspect ratio calculation
+      const isRotated90or270 = this.rotation === 90 || this.rotation === 270;
+      const effectiveWidth = isRotated90or270 ? this.textureHeight : this.textureWidth;
+      const effectiveHeight = isRotated90or270 ? this.textureWidth : this.textureHeight;
+
+      // Calculate letterbox dimensions to preserve aspect ratio
+      const scale = Math.min(canvasWidth / effectiveWidth, canvasHeight / effectiveHeight);
+      const drawW = Math.round(effectiveWidth * scale);
+      const drawH = Math.round(effectiveHeight * scale);
+      const x = Math.round((canvasWidth - drawW) / 2);
+      const y = Math.round((canvasHeight - drawH) / 2);
+
+      // Calculate clip-space coordinates
+      const left = (x / canvasWidth) * 2 - 1;
+      const right = ((x + drawW) / canvasWidth) * 2 - 1;
+      const top = 1 - (y / canvasHeight) * 2;
+      const bottom = 1 - ((y + drawH) / canvasHeight) * 2;
+
+      // Calculate center of quad
+      const cx = (left + right) / 2;
+      const cy = (top + bottom) / 2;
+      const hw = (right - left) / 2;
+      const hh = (top - bottom) / 2;
+
+      // Apply rotation by rotating vertex positions
+      const rad = (this.rotation * Math.PI) / 180;
+      const cos = Math.cos(rad);
+      const sin = Math.sin(rad);
+
+      // For rotated quads, we need to swap half-width/half-height
+      const rhw = isRotated90or270 ? hh : hw;
+      const rhh = isRotated90or270 ? hw : hh;
+
+      // Calculate rotated corner positions with texture coordinates using pre-allocated array
+      // Corner order: bottom-left, bottom-right, top-left, top-right
+      // Each vertex: x, y, u, v
+      const quad = this.quadArray;
+
+      // bottom-left (-rhw, -rhh, 0.0, 1.0)
+      quad[0] = -rhw * cos - -rhh * sin + cx;
+      quad[1] = -rhw * sin + -rhh * cos + cy;
+      quad[2] = 0.0;
+      quad[3] = 1.0;
+
+      // bottom-right (rhw, -rhh, 1.0, 1.0)
+      quad[4] = rhw * cos - -rhh * sin + cx;
+      quad[5] = rhw * sin + -rhh * cos + cy;
+      quad[6] = 1.0;
+      quad[7] = 1.0;
+
+      // top-left (-rhw, rhh, 0.0, 0.0)
+      quad[8] = -rhw * cos - rhh * sin + cx;
+      quad[9] = -rhw * sin + rhh * cos + cy;
+      quad[10] = 0.0;
+      quad[11] = 0.0;
+
+      // top-right (rhw, rhh, 1.0, 0.0)
+      quad[12] = rhw * cos - rhh * sin + cx;
+      quad[13] = rhw * sin + rhh * cos + cy;
+      quad[14] = 1.0;
+      quad[15] = 0.0;
+
+      if (this.vertexBuffer) {
+        this.device.queue.writeBuffer(this.vertexBuffer, 0, quad);
+        renderPass.setVertexBuffer(0, this.vertexBuffer);
+      }
+
+      renderPass.draw(4, 1, 0, 0);
+      renderPass.end();
+
+      this.device.queue.submit([commandEncoder.finish()]);
+
+      return true;
+    } catch {
+      return false;
+    }
+  }
+
+  public clear(): void {
+    if (!this.isReady() || !this.device || !this.context) return;
+
+    try {
+      const commandEncoder = this.device.createCommandEncoder();
+      const textureView = this.context.getCurrentTexture().createView();
+
+      const renderPass = commandEncoder.beginRenderPass({
+        colorAttachments: [
+          {
+            view: textureView,
+            clearValue: { r: 0, g: 0, b: 0, a: 1 },
+            loadOp: 'clear',
+            storeOp: 'store',
+          },
+        ],
+      });
+
+      renderPass.end();
+      this.device.queue.submit([commandEncoder.finish()]);
+    } catch {}
+  }
+
+  public setRotation(rotation: Rotation): void {
+    this.rotation = rotation;
+  }
+
+  public getRotation(): Rotation {
+    return this.rotation;
+  }
+
+  public dispose(): void {
+    try {
+      if (this.texture) {
+        this.texture.destroy();
+        this.texture = null;
+      }
+
+      if (this.vertexBuffer) {
+        this.vertexBuffer.destroy();
+        this.vertexBuffer = null;
+      }
+
+      this.device = null;
+      this.context = null;
+      this.pipeline = null;
+      this.sampler = null;
+      this.bindGroup = null;
+      this.isInitialized = false;
+    } catch {}
+  }
+}

package/src/playlist/manager.ts

@@ -0,0 +1,268 @@
+import type { TypedEventEmitter } from '../events/types';
+import type { SourceManager } from '../sources/manager';
+import type { StateStore } from '../state/types';
+import type { MediaSource, PlayerEventMap, Playlist, PlaylistItem, PlaylistMode } from '../types';
+
+// Simple ID generator (no uuid dep for now)
+function generateId(): string {
+  return crypto?.randomUUID?.() ?? Date.now().toString(36) + Math.random().toString(36).substr(2);
+}
+
+interface PlaylistItemConfig {
+  mediaSource: MediaSource;
+  title?: string;
+  poster?: string;
+}
+
+export class PlaylistManager {
+  private store: StateStore;
+  private emitter: TypedEventEmitter<PlayerEventMap>;
+  private switchSource?: (item: PlaylistItem, autoplay: boolean) => Promise<void>;
+  private sourceManager?: SourceManager;
+
+  constructor(
+    store: StateStore,
+    emitter: TypedEventEmitter<PlayerEventMap>,
+    switchSource?: (item: PlaylistItem, autoplay: boolean) => Promise<void>,
+    sourceManager?: SourceManager
+  ) {
+    this.store = store;
+    this.emitter = emitter;
+    this.switchSource = switchSource;
+    this.sourceManager = sourceManager;
+  }
+
+  async loadPlaylist(
+    items: Array<MediaSource | PlaylistItemConfig>,
+    options: { autoplay?: boolean; startTime?: number } = {}
+  ): Promise<void> {
+    const playlist: Playlist = items.map((item) => {
+      // Check if it's a PlaylistItemConfig (has mediaSource property)
+      if (item && typeof item === 'object' && 'mediaSource' in item) {
+        // PlaylistItemConfig
+        return {
+          id: generateId(),
+          mediaSource: item.mediaSource,
+          title: item.title,
+          poster: item.poster,
+          savedPosition: null,
+          duration: null,
+        } as PlaylistItem;
+      } else {
+        // MediaSource
+        return {
+          id: generateId(),
+          mediaSource: item as MediaSource,
+          savedPosition: null,
+          duration: null,
+        } as PlaylistItem;
+      }
+    });
+
+    this.store.updatePlaylist(playlist, playlist.length > 0 ? 0 : null);
+    this.emitter.emit('playlistchange', { playlist });
+
+    if (playlist.length > 0 && this.switchSource) {
+      const firstItem = playlist[0];
+      // Override savedPosition with startTime if provided
+      if (options.startTime !== undefined) {
+        firstItem.savedPosition = options.startTime;
+      }
+      await this.switchSource(firstItem, options.autoplay ?? false);
+    }
+  }
+
+  addToPlaylist(itemInput: MediaSource | PlaylistItemConfig, index?: number): void {
+    const item: PlaylistItem = this.createPlaylistItem(itemInput);
+
+    this.store.addToPlaylist(item, index);
+    this.emitter.emit('playlistadd', { item, index: index ?? this.store.getState().playlist.length - 1 });
+  }
+
+  async removeFromPlaylist(index: number): Promise<void> {
+    const state = this.store.getState();
+    const currentIndex = state.currentPlaylistIndex;
+    const wasPlaying = state.playing;
+
+    this.store.removeFromPlaylist(index);
+    this.emitter.emit('playlistremove', { index });
+
+    // Dispose if queued (for removed item)
+    this.sourceManager?.disposeQueued(state.playlist[index]?.id || '');
+
+    const newState = this.store.getState();
+    const newCurrentIndex = newState.currentPlaylistIndex;
+
+    if (newState.playlist.length === 0) {
+      this.sourceManager?.disposeAll();
+      this.emitter.emit('playlistchange', { playlist: newState.playlist });
+      this.emitter.emit('playlistend', undefined);
+    }
+
+    if (currentIndex === index && newCurrentIndex !== null && newCurrentIndex !== currentIndex && this.switchSource) {
+      const newItem = newState.playlist[newCurrentIndex];
+      try {
+        await this.switchSource(newItem, wasPlaying);
+      } catch (error) {
+        this.emitter.emit('playlistitemerror', { index: newCurrentIndex, error: error as Error });
+      }
+    }
+  }
+
+  clearPlaylist(): void {
+    this.store.clearPlaylist();
+    this.emitter.emit('playlistchange', { playlist: [] });
+    this.emitter.emit('playlistend', undefined);
+    // Dispose all sources
+    this.sourceManager?.disposeAll();
+  }
+
+  async next(): Promise<void> {
+    const state = this.store.getState();
+    const currentIndex = state.currentPlaylistIndex ?? 0;
+    const playlist = state.playlist;
+    const mode = state.playlistMode;
+
+    let newIndex: number | null = null;
+
+    if (mode === 'repeat-one') {
+      newIndex = currentIndex; // Stay on current for repeat-one
+    } else if (mode === 'sequential' || mode === 'repeat') {
+      if (currentIndex < playlist.length - 1) {
+        newIndex = currentIndex + 1;
+      } else if (mode === 'repeat') {
+        newIndex = 0;
+      } else {
+        this.emitter.emit('playlistend', undefined);
+        return;
+      }
+    } else {
+      // manual or null, just next if possible
+      if (currentIndex < playlist.length - 1) {
+        newIndex = currentIndex + 1;
+      }
+    }
+
+    if (newIndex !== null) {
+      await this.switchTo(newIndex);
+    }
+  }
+
+  async prev(): Promise<void> {
+    const state = this.store.getState();
+    const currentIndex = state.currentPlaylistIndex ?? 0;
+
+    if (currentIndex > 0) {
+      await this.switchTo(currentIndex - 1);
+    }
+  }
+
+  async jumpTo(index: number): Promise<void> {
+    const state = this.store.getState();
+    const playlist = state.playlist;
+
+    if (index >= 0 && index < playlist.length) {
+      await this.switchTo(index);
+    } else if (index >= playlist.length) {
+      // end
+      this.emitter.emit('playlistend', undefined);
+    }
+  }
+
+  setMode(mode: PlaylistMode): void {
+    const validModes: PlaylistMode[] = ['sequential', 'manual', 'repeat', 'repeat-one', null];
+    if (!validModes.includes(mode)) {
+      throw new Error(
+        `Invalid playlist mode: ${mode}. Valid modes: ${validModes.filter((m) => m !== null).join(', ')}, null`
+      );
+    }
+    this.store.updatePlaylistMode(mode);
+  }
+
+  private async switchTo(index: number): Promise<void> {
+    const state = this.store.getState();
+    const previousIndex = state.currentPlaylistIndex;
+    const wasPlaying = state.playing;
+
+    const newPlaylist = [...state.playlist];
+    if (previousIndex !== null && previousIndex !== index) {
+      const oldItem = newPlaylist[previousIndex];
+      newPlaylist[previousIndex] = { ...oldItem, savedPosition: state.currentTime };
+      // Dispose old source if queued (but since lazy, only current is loaded)
+      // sourceManager.disposeQueued(oldItem.id); // If preloaded
+    }
+
+    this.store.updatePlaylist(newPlaylist, index);
+
+    const item = newPlaylist[index];
+
+    this.emitter.emit('playlistitemchange', {
+      index,
+      item,
+      previousIndex: previousIndex ?? undefined,
+    });
+
+    if (this.switchSource) {
+      await this.switchSource(item, wasPlaying);
+    }
+
+    // Optional prefetch next if sequential
+    const mode = state.playlistMode;
+    if (mode === 'sequential' && index < newPlaylist.length - 1) {
+      const nextItem = newPlaylist[index + 1];
+      // If sourceManager available, preload
+      this.sourceManager?.preloadSource(nextItem.mediaSource, nextItem.id);
+    }
+  }
+
+  private createPlaylistItem(input: MediaSource | PlaylistItemConfig): PlaylistItem {
+    // Check if it's a PlaylistItemConfig (has mediaSource property)
+    if (input && typeof input === 'object' && 'mediaSource' in input) {
+      // PlaylistItemConfig
+      return {
+        id: generateId(),
+        mediaSource: input.mediaSource,
+        title: input.title,
+        poster: input.poster,
+        savedPosition: null,
+        duration: null,
+      };
+    } else {
+      // MediaSource
+      return {
+        id: generateId(),
+        mediaSource: input as MediaSource,
+        savedPosition: null,
+        duration: null,
+      };
+    }
+  }
+
+  // Getters
+  get playlist(): Playlist {
+    return this.store.getState().playlist;
+  }
+
+  get currentIndex(): number | null {
+    return this.store.getState().currentPlaylistIndex;
+  }
+
+  get currentItem(): PlaylistItem | null {
+    const index = this.currentIndex;
+    return index !== null ? this.playlist[index] : null;
+  }
+
+  get mode(): PlaylistMode {
+    return this.store.getState().playlistMode;
+  }
+
+  dispose(): void {
+    // Clear any queued sources
+    if (this.sourceManager) {
+      // The sourceManager will be disposed by the main MediaFox class
+      // Just clear any playlist-specific references
+      this.sourceManager = undefined;
+    }
+    this.switchSource = undefined;
+  }
+}