@swf2es/player 0.0.0-stage → 0.1.0

package/src/display/value-lists.ts

@@ -0,0 +1,50 @@
+// Caches kept as short lists of entries found by their values, the latest
+// used last, rather than in maps by keys formatted from those values on
+// every frame: the renderer's lines, gradients and device runs, and the
+// slices of a set of layers. Each finds its entry in a loop of its own,
+// comparing its fields with `same`, and keeps its list with these.
+
+/** Whether two numbers are the same as a cache's key: NaN the same as NaN, as "NaN" was. */
+export function same(x: number, y: number): boolean {
+  return x === y || (Number.isNaN(x) && Number.isNaN(y));
+}
+
+/** Entry `i` of `list` moved to its end, as the latest used: the entry. */
+export function moveLast<T>(list: T[], i: number): T {
+  const entry = list[i];
+  for (let k = i; k < list.length - 1; k++) {
+    list[k] = list[k + 1];
+  }
+
+  list[list.length - 1] = entry;
+  return entry;
+}
+
+/**
+ * Room made in `list` for one more, where it holds `most` already: those
+ * `gone` dropped in place, then the least lately used, each `let go`.
+ */
+export function makeRoom<T>(
+  list: T[],
+  most: number,
+  gone: (entry: T) => boolean,
+  letGo: (entry: T) => void,
+): void {
+  if (list.length < most) {
+    return;
+  }
+
+  let kept = 0;
+  for (const entry of list) {
+    if (gone(entry)) {
+      letGo(entry);
+    } else {
+      list[kept++] = entry;
+    }
+  }
+
+  list.length = kept;
+  while (list.length >= most) {
+    letGo(list.shift() as T);
+  }
+}

package/src/display/videoobject.ts

@@ -0,0 +1,7 @@
+import { DisplayObject } from "./displayobject.js";
+
+/** A Video: a box of the size it was made at, its bounds; the player plays no video in it, so it draws nothing. */
+export class VideoObject extends DisplayObject {
+  boxWidth = 320;
+  boxHeight = 240;
+}

package/src/display/walk.ts

@@ -0,0 +1,169 @@
+// The walks of the display list the player makes every frame: the clips
+// and buttons whose frames run, kept on each container between changes,
+// and a container's children through the timeline masks that clip them.
+import type { ButtonObject } from "./buttonobject.js";
+import type { Container } from "./container.js";
+import { BUTTON, CLIP, type DisplayObject, OTHER } from "./displayobject.js";
+
+/**
+ * The clips and buttons the frame's walks visit at and under a container,
+ * in tree order, parents first (Player.tick's collect, a round of frame
+ * scripts): `ends[i]` is the index after `items[i]` and all under it, to
+ * leave a clip out with what it holds. A button's states are not in it,
+ * its end the index after it: they are walked as they are, which a button
+ * changes without its parent knowing (`frameChildren`, `scriptChildren`).
+ */
+export interface WalkList {
+  items: DisplayObject[];
+  ends: number[];
+  /** Whether it is what is under its container now; once not, its arrays are made again in. */
+  current: boolean;
+}
+
+/** The shortest list a container keeps for itself; a shorter one its parent's making walks again. */
+const KEPT_WALK = 32;
+
+/**
+ * Those the frame's walks visit at and under `root`, as WalkList lays them
+ * out: kept on each container till a clip or a container comes or goes
+ * under it (Container.relist), so that a frame visits the clips alone,
+ * where its walks visited every object with children, twice or more.
+ * Made again in the arrays it had, as a busy movie's are made again every
+ * frame, some ten thousand objects long.
+ */
+export function walkList(root: Container): WalkList {
+  let list = root.walk;
+  if (list?.current) {
+    return list;
+  }
+
+  list ??= { items: [], ends: [], current: false };
+  const length = listInto(root, list, 0, false);
+  // Cut to length, which keeps the arrays' room unless far shorter: a length of 0 would not.
+  list.items.length = length;
+  list.ends.length = length;
+  list.current = true;
+  root.walk = list;
+  return list;
+}
+
+/**
+ * `c` and those under it written to `list` from index `at`, each
+ * container's kept list copied where it has one; `c`'s own kept too where
+ * `keep`, and long enough. Returns the index after the last written.
+ */
+function listInto(c: Container, list: WalkList, at: number, keep = true): number {
+  // AS3 sees a loaded AVM1 movie as one opaque object; its VM owns the frame walk.
+  if (c.avm1Root) {
+    return at;
+  }
+
+  const { items, ends } = list;
+  const start = at;
+  let n = at;
+  if (c.kind === CLIP) {
+    items[n] = c;
+    ends[n++] = 0;
+  }
+
+  const children = c.children;
+  for (let i = 0; i < children.length; i++) {
+    const child = children[i];
+    if (child.kind === BUTTON) {
+      items[n] = child;
+      ends[n] = n + 1;
+      n++;
+      continue;
+    }
+
+    if (child.kind === OTHER && child.frameChildren.length === 0) {
+      continue;
+    }
+
+    const kept = (child as Container).walk;
+    if (!kept?.current) {
+      n = listInto(child as Container, list, n);
+      continue;
+    }
+
+    const base = n;
+    const keptItems = kept.items;
+    const keptEnds = kept.ends;
+    for (let k = 0; k < keptItems.length; k++) {
+      items[n] = keptItems[k];
+      ends[n++] = keptEnds[k] + base;
+    }
+  }
+
+  if (c.kind === CLIP) {
+    ends[start] = n;
+  }
+
+  // Long enough, kept for the next list made above it, which then copies it.
+  const length = n - start;
+  if (keep && length >= KEPT_WALK) {
+    let own = c.walk;
+    if (!own) {
+      own = { items: [], ends: [], current: false };
+      c.walk = own;
+    }
+
+    const ownItems = own.items;
+    const ownEnds = own.ends;
+    for (let k = 0; k < length; k++) {
+      ownItems[k] = items[start + k];
+      ownEnds[k] = ends[start + k] - start;
+    }
+
+    ownItems.length = length;
+    ownEnds.length = length;
+    own.current = true;
+  }
+
+  return n;
+}
+
+/**
+ * The display objects whose frame scripts a display object's run: those
+ * whose frames its frames run, but a button's first, in a SWF after 9, up,
+ * over, down, then hit test, as Flash runs them while the button is made.
+ */
+export function scriptChildren(d: DisplayObject): readonly DisplayObject[] {
+  if (d.kind === BUTTON && (d as ButtonObject).firstScripts) {
+    const b = d as ButtonObject;
+    b.firstScripts = false;
+    return [b.upState, b.overState, b.downState, b.hitTestState].filter(
+      (o, i, all): o is DisplayObject => o !== null && all.indexOf(o) === i && !o.encloses(b),
+    );
+  }
+
+  return d.kind === BUTTON ? (d as ButtonObject).playingStates() : d.frameChildren;
+}
+
+/**
+ * A walk of a container's children in render order, for the timeline
+ * masks that clip each: a mask clips the children after it until one
+ * placed deeper than its clip depth; one a script put among them has no
+ * depth and ends nothing. A class, not a generator: the renderer walks
+ * every child each time a container's children change.
+ */
+export class Clips {
+  /** The masks open, outermost first. */
+  readonly masks: DisplayObject[] = [];
+
+  /** The next child: how many of `masks`, from the first, clip it; it clips those after it, if a mask. */
+  enter(child: DisplayObject): number {
+    const depth = child.depth;
+    const masks = this.masks;
+    while (depth !== null && masks.length > 0 && masks[masks.length - 1].clipDepth < depth) {
+      masks.pop();
+    }
+
+    const n = masks.length;
+    if (child.clipDepth > 0) {
+      masks.push(child);
+    }
+
+    return n;
+  }
+}

package/src/files.ts

@@ -0,0 +1,466 @@
+// FileReference's host boundary. Paths stay with the host; scripts see metadata and bytes only.
+import type { FetchRequest, FetchResult } from "./hosts.js";
+
+export interface FileFilter {
+  description: string;
+  extension: string;
+}
+
+export interface SelectedFile {
+  name: string;
+  size: number;
+  modificationDate: number;
+  creationDate?: number;
+  read(signal: AbortSignal): Promise<Uint8Array>;
+}
+
+export interface SaveFile {
+  name: string;
+  write(bytes: Uint8Array, signal: AbortSignal): Promise<void>;
+}
+
+/**
+ * A host answers at once, not with a promise, where it shows no dialog: the
+ * player then cancels in the next frame, as Flash does, where a promise's
+ * answer comes only after that frame has begun.
+ */
+export interface FileHost {
+  browse(
+    filters: FileFilter[],
+    multiple: boolean,
+    signal: AbortSignal,
+  ): SelectedFile[] | Promise<SelectedFile[]>;
+  save(name: string, signal: AbortSignal): SaveFile | null | Promise<SaveFile | null>;
+}
+
+/** What of the browser's `navigator` tells a platform's picker apart. */
+type Browser = Pick<Navigator, "userAgent" | "platform" | "maxTouchPoints">;
+
+/**
+ * Whether the browser's file picker greys out every file of a type it does not know when an
+ * input names any, as iOS's and iPadOS's do (an iPad asks as a Mac with touch; so does a Mac
+ * emulating touch in its developer tools): there an input takes no filter, and every file can
+ * be picked.
+ */
+export function filtersGreyOutFiles(navigator: Browser | undefined): boolean {
+  if (!navigator) {
+    return false;
+  }
+
+  return (
+    /\b(iPhone|iPad|iPod)\b/.test(navigator.userAgent) ||
+    (navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1)
+  );
+}
+
+/** The extensions FileReference's filters name, ".xml" for "*.xml"; none for a filter of any file. */
+function extensionsOf(filters: FileFilter[]): string[] {
+  return filters
+    .flatMap((filter) => filter.extension.split(";"))
+    .map((ext) => ext.trim().replace(/^\*\./, "."))
+    .filter((ext) => /^\.[\w-]+$/.test(ext));
+}
+
+/** A file input's `accept` for FileReference's filters, none where the picker would grey files out. */
+export function acceptOf(filters: FileFilter[], navigator: Browser | undefined): string {
+  return filtersGreyOutFiles(navigator) ? "" : extensionsOf(filters).join(",");
+}
+
+/**
+ * Whether a file picked with no filter is one the filters take: where the picker could not
+ * filter, the files it gives are held to them here, as Flash's dialog never offers others.
+ */
+export function filtersTake(filters: FileFilter[], name: string): boolean {
+  const extensions = extensionsOf(filters);
+  const lower = name.toLowerCase();
+  return extensions.length === 0 || extensions.some((ext) => lower.endsWith(ext.toLowerCase()));
+}
+
+/** Browser dialogs are asked synchronously, while transient user activation is still present. */
+export function browserFileHost(): FileHost | null {
+  if (typeof document === "undefined") {
+    return null;
+  }
+
+  const active = () => globalThis.navigator?.userActivation?.isActive === true;
+  return {
+    browse(filters, multiple, signal) {
+      if (!active() || signal.aborted) {
+        return [];
+      }
+
+      return new Promise((resolve, reject) => {
+        const input = document.createElement("input");
+        input.type = "file";
+        input.multiple = multiple;
+        input.accept = acceptOf(filters, globalThis.navigator);
+        const unfiltered = input.accept === "";
+        input.hidden = true;
+        const finish = (files: SelectedFile[]) => {
+          signal.removeEventListener("abort", abort);
+          input.remove();
+          resolve(files);
+        };
+        const abort = () => finish([]);
+        input.addEventListener("cancel", () => finish([]), { once: true });
+        input.addEventListener(
+          "change",
+          () =>
+            finish(
+              // None that the filters take is a cancel, as a dialog closed with none chosen.
+              Array.from(input.files ?? [])
+                .filter((file) => !unfiltered || filtersTake(filters, file.name))
+                .map((file) => ({
+                  name: file.name,
+                  size: file.size,
+                  modificationDate: file.lastModified,
+                  read: async () => new Uint8Array(await file.arrayBuffer()),
+                })),
+            ),
+          { once: true },
+        );
+        signal.addEventListener("abort", abort, { once: true });
+        document.body.append(input);
+        try {
+          if (typeof input.showPicker === "function") {
+            input.showPicker();
+          } else {
+            input.click();
+          }
+        } catch (error) {
+          signal.removeEventListener("abort", abort);
+          input.remove();
+          reject(error);
+        }
+      });
+    },
+    save(name, signal) {
+      if (!active() || signal.aborted) {
+        return null;
+      }
+
+      return pickSaveFile(name);
+    },
+  };
+}
+
+/** Where `save` writes: a file the user picks, or a download where the browser has no picker. */
+async function pickSaveFile(name: string): Promise<SaveFile | null> {
+  const picker = (
+    globalThis as typeof globalThis & {
+      showSaveFilePicker?: (options: { suggestedName: string }) => Promise<{
+        name: string;
+        createWritable(): Promise<{
+          write(bytes: Uint8Array): Promise<void>;
+          close(): Promise<void>;
+          abort(): Promise<void>;
+        }>;
+      }>;
+    }
+  ).showSaveFilePicker;
+  if (picker) {
+    try {
+      const handle = await picker.call(globalThis, { suggestedName: name });
+      return {
+        name: handle.name,
+        async write(bytes, signal) {
+          signal.throwIfAborted();
+          const stream = await handle.createWritable();
+          try {
+            await stream.write(bytes);
+            signal.throwIfAborted();
+            await stream.close();
+          } catch (error) {
+            await stream.abort();
+            throw error;
+          }
+        },
+      };
+    } catch (error) {
+      if ((error as { name?: string }).name === "AbortError") {
+        return null;
+      }
+
+      throw error;
+    }
+  }
+
+  return {
+    name,
+    async write(bytes, signal) {
+      signal.throwIfAborted();
+      const url = URL.createObjectURL(new Blob([bytes.slice().buffer]));
+      const link = document.createElement("a");
+      link.href = url;
+      link.download = name;
+      link.hidden = true;
+      document.body.append(link);
+      link.click();
+      link.remove();
+      // The browser may consume the URL after click returns.
+      setTimeout(() => URL.revokeObjectURL(url), 60_000);
+    },
+  };
+}
+
+export interface FileServices {
+  host: FileHost | null;
+  signal: AbortSignal;
+  defer(deliver: () => void): void;
+  track(task: Promise<void>): void;
+  fetch(request: FetchRequest, signal: AbortSignal): Promise<FetchResult>;
+  error(id: number): never;
+}
+
+type Operation = { generation: number; signal: AbortSignal; abort(): void };
+
+export type FileEvent = (type: string, loaded?: number, total?: number, text?: string) => void;
+
+/** One reference's operation, with stale host callbacks suppressed after cancel or destruction. */
+export class FileReference {
+  file: SelectedFile | null = null;
+  data: Uint8Array | null = null;
+  private operation: Operation | null = null;
+  private generation = 0;
+
+  constructor(
+    private readonly services: FileServices,
+    private readonly event: FileEvent,
+  ) {}
+
+  cancel(): void {
+    this.generation++;
+    this.operation?.abort();
+    this.operation = null;
+  }
+
+  private begin(): Operation {
+    if (this.operation) {
+      this.services.error(2174);
+    }
+
+    const abort = new AbortController();
+    const operation = {
+      generation: ++this.generation,
+      signal: AbortSignal.any([abort.signal, this.services.signal]),
+      abort: () => abort.abort(),
+    };
+    this.operation = operation;
+    return operation;
+  }
+
+  private emit(operation: Operation, type: string, loaded = 0, total = 0, text = ""): boolean {
+    if (operation.signal.aborted || operation.generation !== this.generation) {
+      return false;
+    }
+
+    this.event(type, loaded, total, text);
+    return !operation.signal.aborted && operation.generation === this.generation;
+  }
+
+  private fail(operation: Operation): void {
+    this.operation = null;
+    try {
+      this.emit(operation, "ioError", 0, 0, "Error #2038: File I/O Error.");
+    } finally {
+      // Hosts may hold a save destination even when the transfer never reached write().
+      operation.abort();
+    }
+  }
+
+  /**
+   * Deliver what `task` gives in the next frame; a value already known goes without a promise's
+   * delay. Any thenable is a promise here: a host built in another window has that realm's.
+   */
+  private after<T>(
+    operation: Operation,
+    task: T | PromiseLike<T>,
+    deliver: (value: T) => void,
+  ): void {
+    if (typeof (task as PromiseLike<T> | null)?.then !== "function") {
+      this.services.defer(() => {
+        if (!operation.signal.aborted && operation.generation === this.generation) {
+          deliver(task as T);
+        }
+      });
+      return;
+    }
+
+    this.services.track(
+      Promise.resolve(task as PromiseLike<T>).then(
+        (value) =>
+          this.services.defer(() => {
+            if (!operation.signal.aborted && operation.generation === this.generation) {
+              deliver(value);
+            }
+          }),
+        () =>
+          this.services.defer(() => {
+            if (!operation.signal.aborted && operation.generation === this.generation) {
+              this.fail(operation);
+            }
+          }),
+      ),
+    );
+  }
+
+  browse(
+    filters: FileFilter[],
+    multiple = false,
+    selected?: (files: SelectedFile[]) => void,
+  ): void {
+    const operation = this.begin();
+    const task = this.services.host?.browse(filters, multiple, operation.signal) ?? [];
+    this.after(operation, task, (files) => {
+      this.operation = null;
+      if (files.length) {
+        this.file = files[0];
+        this.data = null;
+        selected?.(files);
+      }
+
+      this.emit(operation, files.length ? "select" : "cancel");
+    });
+  }
+
+  load(): void {
+    const file = this.file ?? this.services.error(2037);
+    const operation = this.begin();
+    this.after(operation, file.read(operation.signal), (bytes) => {
+      this.data = bytes;
+      if (
+        this.emit(operation, "open") &&
+        this.emit(operation, "progress", bytes.length, bytes.length)
+      ) {
+        this.operation = null;
+        this.emit(operation, "complete");
+      }
+    });
+  }
+
+  save(name: string, bytes: Uint8Array | FetchRequest): void {
+    const operation = this.begin();
+    const task = this.services.host?.save(name, operation.signal) ?? null;
+    this.after(operation, task, (destination) => {
+      if (!destination) {
+        this.operation = null;
+        this.emit(operation, "cancel");
+        return;
+      }
+
+      this.file = {
+        name: destination.name,
+        size: 0,
+        modificationDate: 0,
+        read: async () => this.services.error(2037),
+      };
+      this.data = null;
+      if (!this.emit(operation, "select") || !this.emit(operation, "open")) {
+        return;
+      }
+
+      const transfer = async () => {
+        const result =
+          bytes instanceof Uint8Array
+            ? bytes
+            : (await this.services.fetch(bytes, operation.signal)).bytes;
+        if (result === null) {
+          throw new Error("download failed");
+        }
+
+        operation.signal.throwIfAborted();
+        await destination.write(result, operation.signal);
+        return result;
+      };
+      this.after(operation, transfer(), (bytes) => {
+        if (this.file) {
+          this.file.size = bytes.length;
+          this.file.modificationDate = Date.now();
+          this.file.read = async () => bytes.slice();
+        }
+
+        if (this.emit(operation, "progress", bytes.length, bytes.length)) {
+          this.operation = null;
+          this.emit(operation, "complete");
+        }
+      });
+    });
+  }
+
+  upload(request: FetchRequest, field: string | null, test = false): void {
+    const file = this.file ?? this.services.error(2037);
+    const operation = this.begin();
+    const transfer = async () => {
+      const bytes = await file.read(operation.signal);
+      operation.signal.throwIfAborted();
+      const outgoing =
+        field === null
+          ? { ...request, body: bytes }
+          : await multipart(request, file.name, field, bytes);
+      if (test && bytes.length > 10 * 1024) {
+        const probe = await this.services.fetch(
+          { ...outgoing, body: new Uint8Array() },
+          operation.signal,
+        );
+        if (probe.bytes === null) {
+          throw new Error("test upload failed");
+        }
+      }
+
+      const result = await this.services.fetch(outgoing, operation.signal);
+      return { result, size: bytes.length };
+    };
+    this.services.defer(() => this.emit(operation, "open"));
+    this.after(operation, transfer(), ({ result, size }) => {
+      if (!this.emit(operation, "progress", size, size)) {
+        return;
+      }
+
+      if (result.bytes === null || result.status >= 400) {
+        if (result.status && !this.emit(operation, "httpStatus", result.status)) {
+          return;
+        }
+
+        this.fail(operation);
+        return;
+      }
+
+      this.operation = null;
+      if (this.emit(operation, "complete")) {
+        this.emit(
+          operation,
+          "uploadCompleteData",
+          0,
+          0,
+          new TextDecoder().decode(result.bytes as Uint8Array),
+        );
+      }
+    });
+  }
+}
+
+/** Let the platform encode multipart quoting and the boundary, then send through the host's fetch. */
+async function multipart(
+  request: FetchRequest,
+  name: string,
+  field: string,
+  bytes: Uint8Array,
+): Promise<FetchRequest> {
+  const form = new FormData();
+  if (request.body) {
+    for (const [key, value] of new URLSearchParams(new TextDecoder().decode(request.body))) {
+      form.append(key, value);
+    }
+  }
+
+  form.append("Filename", name);
+  form.append(field, new Blob([bytes.slice().buffer], { type: "application/octet-stream" }), name);
+  form.append("Upload", "Submit Query");
+  const encoded = new Response(form);
+  return {
+    ...request,
+    method: "POST",
+    headers: [["Content-Type", encoded.headers.get("content-type") as string]],
+    body: new Uint8Array(await encoded.arrayBuffer()),
+  };
+}