@twick/2d 0.13.0 → 0.14.2

package/src/lib/utils/diff.ts

@@ -1,148 +1,148 @@
-interface TransformDiff<T> {
-  inserted: TransformDiffItem<T>[];
-  deleted: TransformDiffItem<T>[];
-  transformed: TransformDiffItemTransformed<T>[];
-}
-
-interface TransformDiffItem<T> {
-  before?: T;
-  beforeIdIndex: number;
-  current: T;
-  currentIndex: number;
-}
-
-interface TransformDiffItemTransformed<T> {
-  insert: boolean;
-  remove: boolean;
-  from: TransformDiffItem<T>;
-  to: TransformDiffItem<T>;
-}
-
-interface ApplyTransformInserted<T> {
-  item: TransformDiffItem<T>;
-  order: number;
-}
-
-interface ApplyTransformResult<T> {
-  inserted: ApplyTransformInserted<T>[];
-}
-
-interface Idable {
-  id: string;
-}
-
-function getIdMap<T extends Idable>(list: T[]) {
-  const map = new Map<string, TransformDiffItem<T>[]>();
-  let before: T | undefined = undefined;
-  for (const [index, current] of list.entries()) {
-    const currentArray = map.get(current.id) ?? [];
-    if (!map.has(current.id)) {
-      map.set(current.id, currentArray);
-    }
-
-    currentArray.push({
-      before,
-      current,
-      beforeIdIndex: before ? map.get(before.id)!.length - 1 : -1,
-      currentIndex: index,
-    });
-    before = current;
-  }
-  return map;
-}
-
-export function getTransformDiff<T extends Idable>(
-  from: T[],
-  to: T[],
-): TransformDiff<T> {
-  const diff: TransformDiff<T> = {
-    inserted: [],
-    deleted: [],
-    transformed: [],
-  };
-
-  const fromMap = getIdMap(from);
-  const toMap = getIdMap(to);
-
-  for (const [key, fromItem] of fromMap.entries()) {
-    const toItem = toMap.get(key);
-    if (toItem) {
-      toMap.delete(key);
-      for (let i = 0; i < Math.max(fromItem.length, toItem.length); i++) {
-        const insert = i >= fromItem.length;
-        const remove = i >= toItem.length;
-
-        const fromNode = !insert ? fromItem[i] : fromItem[fromItem.length - 1];
-        const toNode = !remove ? toItem[i] : toItem[toItem.length - 1];
-
-        diff.transformed.push({
-          insert,
-          remove,
-          from: fromNode,
-          to: toNode,
-        });
-      }
-    } else {
-      for (const node of fromItem) {
-        diff.deleted.push(node);
-      }
-    }
-  }
-
-  for (const toItem of toMap.values()) {
-    for (const node of toItem) {
-      diff.inserted.push(node);
-    }
-  }
-
-  return diff;
-}
-
-export function applyTransformDiff<T extends Idable>(
-  current: T[],
-  diff: TransformDiff<T>,
-  cloner: (original: T) => T,
-): ApplyTransformResult<T> {
-  function insert(item: TransformDiffItem<T>) {
-    let idIndex = -1;
-    const index = item.before
-      ? current.findIndex(({id}) => {
-          if (id === item.before?.id) {
-            idIndex++;
-            if (idIndex === item.beforeIdIndex) return true;
-          }
-          return false;
-        })
-      : 0;
-    current.splice(index + 1, 0, item.current);
-  }
-
-  const result: ApplyTransformResult<T> = {
-    inserted: diff.inserted.map(item => ({
-      item,
-      order: item.currentIndex,
-    })),
-  };
-
-  for (const item of diff.transformed) {
-    if (!item.insert) continue;
-
-    const from = item.from;
-    item.from = {
-      ...item.to,
-      current: cloner(from.current),
-    };
-    result.inserted.push({
-      item: item.from,
-      order: item.to.currentIndex,
-    });
-  }
-
-  result.inserted.sort((a, b) => a.order - b.order);
-
-  for (const item of result.inserted) {
-    insert(item.item);
-  }
-
-  return result;
-}
+interface TransformDiff<T> {
+  inserted: TransformDiffItem<T>[];
+  deleted: TransformDiffItem<T>[];
+  transformed: TransformDiffItemTransformed<T>[];
+}
+
+interface TransformDiffItem<T> {
+  before?: T;
+  beforeIdIndex: number;
+  current: T;
+  currentIndex: number;
+}
+
+interface TransformDiffItemTransformed<T> {
+  insert: boolean;
+  remove: boolean;
+  from: TransformDiffItem<T>;
+  to: TransformDiffItem<T>;
+}
+
+interface ApplyTransformInserted<T> {
+  item: TransformDiffItem<T>;
+  order: number;
+}
+
+interface ApplyTransformResult<T> {
+  inserted: ApplyTransformInserted<T>[];
+}
+
+interface Idable {
+  id: string;
+}
+
+function getIdMap<T extends Idable>(list: T[]) {
+  const map = new Map<string, TransformDiffItem<T>[]>();
+  let before: T | undefined = undefined;
+  for (const [index, current] of list.entries()) {
+    const currentArray = map.get(current.id) ?? [];
+    if (!map.has(current.id)) {
+      map.set(current.id, currentArray);
+    }
+
+    currentArray.push({
+      before,
+      current,
+      beforeIdIndex: before ? map.get(before.id)!.length - 1 : -1,
+      currentIndex: index,
+    });
+    before = current;
+  }
+  return map;
+}
+
+export function getTransformDiff<T extends Idable>(
+  from: T[],
+  to: T[],
+): TransformDiff<T> {
+  const diff: TransformDiff<T> = {
+    inserted: [],
+    deleted: [],
+    transformed: [],
+  };
+
+  const fromMap = getIdMap(from);
+  const toMap = getIdMap(to);
+
+  for (const [key, fromItem] of fromMap.entries()) {
+    const toItem = toMap.get(key);
+    if (toItem) {
+      toMap.delete(key);
+      for (let i = 0; i < Math.max(fromItem.length, toItem.length); i++) {
+        const insert = i >= fromItem.length;
+        const remove = i >= toItem.length;
+
+        const fromNode = !insert ? fromItem[i] : fromItem[fromItem.length - 1];
+        const toNode = !remove ? toItem[i] : toItem[toItem.length - 1];
+
+        diff.transformed.push({
+          insert,
+          remove,
+          from: fromNode,
+          to: toNode,
+        });
+      }
+    } else {
+      for (const node of fromItem) {
+        diff.deleted.push(node);
+      }
+    }
+  }
+
+  for (const toItem of toMap.values()) {
+    for (const node of toItem) {
+      diff.inserted.push(node);
+    }
+  }
+
+  return diff;
+}
+
+export function applyTransformDiff<T extends Idable>(
+  current: T[],
+  diff: TransformDiff<T>,
+  cloner: (original: T) => T,
+): ApplyTransformResult<T> {
+  function insert(item: TransformDiffItem<T>) {
+    let idIndex = -1;
+    const index = item.before
+      ? current.findIndex(({id}) => {
+          if (id === item.before?.id) {
+            idIndex++;
+            if (idIndex === item.beforeIdIndex) return true;
+          }
+          return false;
+        })
+      : 0;
+    current.splice(index + 1, 0, item.current);
+  }
+
+  const result: ApplyTransformResult<T> = {
+    inserted: diff.inserted.map(item => ({
+      item,
+      order: item.currentIndex,
+    })),
+  };
+
+  for (const item of diff.transformed) {
+    if (!item.insert) continue;
+
+    const from = item.from;
+    item.from = {
+      ...item.to,
+      current: cloner(from.current),
+    };
+    result.inserted.push({
+      item: item.from,
+      order: item.to.currentIndex,
+    });
+  }
+
+  result.inserted.sort((a, b) => a.order - b.order);
+
+  for (const item of result.inserted) {
+    insert(item.item);
+  }
+
+  return result;
+}

package/src/lib/utils/index.ts

@@ -1,2 +1,2 @@
-export * from './CanvasUtils';
-export * from './is';
+export * from './CanvasUtils';
+export * from './is';

package/src/lib/utils/is.ts

@@ -1,11 +1,11 @@
-/**
- * Create a predicate that checks if the given object is an instance of the
- * given class.
- *
- * @param klass - The class to check against.
- */
-export function is<T>(
-  klass: new (...args: any[]) => T,
-): (object: any) => object is T {
-  return (object): object is T => object instanceof klass;
-}
+/**
+ * Create a predicate that checks if the given object is an instance of the
+ * given class.
+ *
+ * @param klass - The class to check against.
+ */
+export function is<T>(
+  klass: new (...args: any[]) => T,
+): (object: any) => object is T {
+  return (object): object is T => object instanceof klass;
+}

package/src/lib/utils/makeSignalExtensions.ts

@@ -1,30 +1,30 @@
-import type {SignalExtensions} from '@twick/core';
-import {capitalize} from '@twick/core';
-import type {PropertyMetadata} from '../decorators';
-
-export function makeSignalExtensions<TSetterValue, TValue extends TSetterValue>(
-  meta: Partial<PropertyMetadata<TValue>> = {},
-  owner?: any,
-  name?: string,
-) {
-  const extensions: Partial<SignalExtensions<TSetterValue, TValue>> = {};
-
-  if (name && owner) {
-    const setter = meta.setter ?? owner?.[`set${capitalize(name)}`];
-    if (setter) {
-      extensions.setter = setter.bind(owner);
-    }
-
-    const getter = meta.getter ?? owner?.[`get${capitalize(name)}`];
-    if (getter) {
-      extensions.getter = getter.bind(owner);
-    }
-
-    const tweener = meta.tweener ?? owner?.[`tween${capitalize(name)}`];
-    if (tweener) {
-      extensions.tweener = tweener.bind(owner);
-    }
-  }
-
-  return extensions;
-}
+import type {SignalExtensions} from '@twick/core';
+import {capitalize} from '@twick/core';
+import type {PropertyMetadata} from '../decorators';
+
+export function makeSignalExtensions<TSetterValue, TValue extends TSetterValue>(
+  meta: Partial<PropertyMetadata<TValue>> = {},
+  owner?: any,
+  name?: string,
+) {
+  const extensions: Partial<SignalExtensions<TSetterValue, TValue>> = {};
+
+  if (name && owner) {
+    const setter = meta.setter ?? owner?.[`set${capitalize(name)}`];
+    if (setter) {
+      extensions.setter = setter.bind(owner);
+    }
+
+    const getter = meta.getter ?? owner?.[`get${capitalize(name)}`];
+    if (getter) {
+      extensions.getter = getter.bind(owner);
+    }
+
+    const tweener = meta.tweener ?? owner?.[`tween${capitalize(name)}`];
+    if (tweener) {
+      extensions.tweener = tweener.bind(owner);
+    }
+  }
+
+  return extensions;
+}

package/src/lib/utils/video/declarations.d.ts

@@ -1 +1 @@
-declare module 'mp4box';
+declare module 'mp4box';

package/src/lib/utils/video/ffmpeg-client.ts

@@ -1,50 +1,50 @@
-export class ImageCommunication {
-  public constructor() {
-    if (!import.meta.hot) {
-      throw new Error('FfmpegVideoFrame can only be used with HMR.');
-    }
-  }
-
-  public async getFrame(
-    id: string,
-    src: string,
-    time: number,
-    duration: number,
-    fps: number,
-  ) {
-    const response = await fetch('/twick-ffmpeg-decoder/video-frame', {
-      method: 'POST',
-      headers: {
-        // eslint-disable-next-line
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify({
-        id,
-        filePath: src,
-        startTime: time,
-        duration,
-        fps,
-      }),
-    });
-
-    if (!response.ok) {
-      throw new Error(`HTTP error! status: ${response.status}`);
-    }
-
-    const width = parseInt(response.headers.get('X-Frame-Width') || '1080', 10);
-    const height = parseInt(
-      response.headers.get('X-Frame-Height') || '1920',
-      10,
-    );
-
-    const arrayBuffer = await response.arrayBuffer();
-
-    const imageData = new ImageData(
-      new Uint8ClampedArray(arrayBuffer),
-      width,
-      height,
-    );
-
-    return createImageBitmap(imageData);
-  }
-}
+export class ImageCommunication {
+  public constructor() {
+    if (!import.meta.hot) {
+      throw new Error('FfmpegVideoFrame can only be used with HMR.');
+    }
+  }
+
+  public async getFrame(
+    id: string,
+    src: string,
+    time: number,
+    duration: number,
+    fps: number,
+  ) {
+    const response = await fetch('/twick-ffmpeg-decoder/video-frame', {
+      method: 'POST',
+      headers: {
+        // eslint-disable-next-line
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        id,
+        filePath: src,
+        startTime: time,
+        duration,
+        fps,
+      }),
+    });
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+
+    const width = parseInt(response.headers.get('X-Frame-Width') || '1080', 10);
+    const height = parseInt(
+      response.headers.get('X-Frame-Height') || '1920',
+      10,
+    );
+
+    const arrayBuffer = await response.arrayBuffer();
+
+    const imageData = new ImageData(
+      new Uint8ClampedArray(arrayBuffer),
+      width,
+      height,
+    );
+
+    return createImageBitmap(imageData);
+  }
+}

package/src/lib/utils/video/mp4-parser-manager.ts

@@ -1,72 +1,72 @@
-import {Mp4Parser} from './parser';
-
-// List of VideoFrameExtractors
-const videoFrameExtractors = new Map<string, Mp4Parser>();
-
-export async function dropExtractor(id: string, filePath: string) {
-  const extractorId = filePath + '-' + id;
-  const extractor = videoFrameExtractors.get(extractorId);
-  if (extractor) {
-    extractor.close();
-    videoFrameExtractors.delete(extractorId);
-  }
-}
-
-export async function getFrame(
-  id: string,
-  filePath: string,
-  time: number,
-  fps: number,
-) {
-  // Check if we already have a VideoFrameExtractor for this video
-  const extractorId = filePath + '-' + id;
-  let extractor = videoFrameExtractors.get(extractorId);
-
-  const frameDuration = 1 / fps;
-
-  /**
-   * Sometimes, HTMLVideoElement.duration is not accurate, which can lead to the
-   * requested time being greater than the duration.
-   * To prevent this, we clamp the time to the duration reported by the extractor.
-   */
-  const duration = extractor?.getDuration();
-  if (duration && time > duration) {
-    time = duration;
-  }
-
-  const isOldFrame =
-    extractor && Math.abs(time - extractor.getLastTime()) < frameDuration / 2;
-
-  // If time has not changed, return the last frame
-  if (extractor && isOldFrame) {
-    const lastFrame = extractor.getLastFrame();
-    if (!lastFrame) {
-      throw new Error('No last frame');
-    }
-
-    return lastFrame;
-  }
-
-  // If the video has skipped back we need to create a new extractor
-  if (extractor && time + frameDuration < extractor.getTime()) {
-    extractor.close();
-    videoFrameExtractors.delete(extractorId);
-    extractor = undefined;
-  }
-
-  // If the video has skipped forward we need to create a new extractor
-  if (extractor && time > extractor.getTime() + frameDuration * 1.5) {
-    extractor.close();
-    videoFrameExtractors.delete(extractorId);
-    extractor = undefined;
-  }
-
-  if (!extractor) {
-    extractor = new Mp4Parser(filePath, fps, time);
-    await extractor.start();
-    videoFrameExtractors.set(extractorId, extractor);
-  }
-
-  // Go to the frame that is closest to the requested time
-  return extractor.getNextFrame();
-}
+import {Mp4Parser} from './parser';
+
+// List of VideoFrameExtractors
+const videoFrameExtractors = new Map<string, Mp4Parser>();
+
+export async function dropExtractor(id: string, filePath: string) {
+  const extractorId = filePath + '-' + id;
+  const extractor = videoFrameExtractors.get(extractorId);
+  if (extractor) {
+    extractor.close();
+    videoFrameExtractors.delete(extractorId);
+  }
+}
+
+export async function getFrame(
+  id: string,
+  filePath: string,
+  time: number,
+  fps: number,
+) {
+  // Check if we already have a VideoFrameExtractor for this video
+  const extractorId = filePath + '-' + id;
+  let extractor = videoFrameExtractors.get(extractorId);
+
+  const frameDuration = 1 / fps;
+
+  /**
+   * Sometimes, HTMLVideoElement.duration is not accurate, which can lead to the
+   * requested time being greater than the duration.
+   * To prevent this, we clamp the time to the duration reported by the extractor.
+   */
+  const duration = extractor?.getDuration();
+  if (duration && time > duration) {
+    time = duration;
+  }
+
+  const isOldFrame =
+    extractor && Math.abs(time - extractor.getLastTime()) < frameDuration / 2;
+
+  // If time has not changed, return the last frame
+  if (extractor && isOldFrame) {
+    const lastFrame = extractor.getLastFrame();
+    if (!lastFrame) {
+      throw new Error('No last frame');
+    }
+
+    return lastFrame;
+  }
+
+  // If the video has skipped back we need to create a new extractor
+  if (extractor && time + frameDuration < extractor.getTime()) {
+    extractor.close();
+    videoFrameExtractors.delete(extractorId);
+    extractor = undefined;
+  }
+
+  // If the video has skipped forward we need to create a new extractor
+  if (extractor && time > extractor.getTime() + frameDuration * 1.5) {
+    extractor.close();
+    videoFrameExtractors.delete(extractorId);
+    extractor = undefined;
+  }
+
+  if (!extractor) {
+    extractor = new Mp4Parser(filePath, fps, time);
+    await extractor.start();
+    videoFrameExtractors.set(extractorId, extractor);
+  }
+
+  // Go to the frame that is closest to the requested time
+  return extractor.getNextFrame();
+}

package/src/lib/utils/video/parser/index.ts

@@ -1 +1 @@
-export * from './parser';
+export * from './parser';