@swf2es/player-hosts 0.1.3 → 0.1.4

package/dist/thread/player/avm1/keyboard.js

@@ -65,6 +65,19 @@ export class Avm1Keyboard {
         const used = this.avm1.input.keyPress(printable(k.charCode));
         return used || this.edit(k);
     }
+    get editing() {
+        return this.field()?.type === "input";
+    }
+    /** An input method's text: no key went with it, so no keyPress, only the field's edit. */
+    insert(text) {
+        this.handled++;
+        const field = this.field();
+        if (field?.type !== "input") {
+            return false;
+        }
+        const typed = pasteable(field.multiline, text);
+        return typed !== "" && this.editor.type(field, typed);
+    }
     field() {
         const d = this.avm1.focused;
         return !this.avm1.halted && d instanceof TextObject && !this.avm1.removed(d) ? d : null;

package/dist/thread/player/avm1/loads.js

@@ -19,6 +19,7 @@ import { BitmapStore } from "../bitmap/bitmap.js";
 import { decodeImageFile, decodeImages, imageFormat } from "../bitmap/images.js";
 import { BitmapObject, EMPTY_TIMELINE, MovieClip } from "../display/display.js";
 import { readLibrary, } from "../display/timeline.js";
+import { warmAudioFor } from "../media/sounds.js";
 import { resolve } from "../scripting/loads.js";
 import { formRequest } from "./globals/LoadVars.js";
 import { textFor } from "./net.js";
@@ -171,6 +172,8 @@ export class MovieLoads {
             if (load.status !== "pending") {
                 return SKIPPED;
             }
+            // Its sounds' device opens as it arrives, before the frame that shows it.
+            warmAudioFor(this.movie.audio, a.library);
             return { ...a, blocks: await this.movie.compile(a.swf, a.library.actions ?? null) };
         })
             .catch(() => ({ type: "unknown", status: 0 }));

package/dist/thread/player/input/keyboard.js

@@ -11,6 +11,7 @@ import { apply } from "../display/geometry.js";
 import { TEXT } from "../scripting/clipboard.js";
 import { dispatchEvent } from "../scripting/events.js";
 import { caretAt, pasteable, selectionAt, TextEditor } from "./text-editor.js";
+import { isTextInput } from "./text-input.js";
 const TAB = 9;
 const fieldsOf = (d) => (d.object ?? {});
 /**
@@ -129,6 +130,21 @@ export class KeyboardInput {
                 : false;
         });
     }
+    get editing() {
+        const focus = this.focused();
+        return focus instanceof TextObject && focus.type === "input";
+    }
+    insert(text) {
+        this.handled++;
+        return this.scripting.clipboard.gesture(() => {
+            const focus = this.focused();
+            if (!(focus instanceof TextObject) || focus.type !== "input") {
+                return false;
+            }
+            const typed = pasteable(focus.multiline, text);
+            return typed !== "" && this.editor.type(focus, typed);
+        });
+    }
     key(type, k, edits) {
         const s = this.scripting;
         const focus = this.focused();
@@ -376,12 +392,15 @@ function charCodeOf(e) {
 /** Whether a browser event is the page's own: typed into its input or button, or editable content. */
 function pagesOwn(e) {
     const into = e.target;
+    if (isTextInput(into)) {
+        return false;
+    }
     return (!!into?.isContentEditable || /^(INPUT|TEXTAREA|SELECT|BUTTON|A)$/.test(into?.tagName ?? ""));
 }
 /**
  * Send the browser's keys on `target` (the window, say) to the player. A
  * key goes to the SWF unless it is typed into the page's own input or
- * button, or comes from an IME, which the player cannot compose; the
+ * button, or composes an IME's text, which comes by bindTextInput; the
  * browser is kept from acting on a field's edit or caret, Tab moving the
  * SWF's focus, or a scrolling key meant for the SWF. Its shortcuts stay.
  * The copy, cut and paste events the browser sends for Ctrl+C, X and V,

package/dist/thread/player/input/text-input.js

@@ -0,0 +1,99 @@
+// Text that comes with no key of its own: an IME's composed text, a soft
+// keyboard's, or any insertion a browser makes (DevTools' Input.insertText).
+// A browser sends those only to an editable element, which the player's
+// canvas is not, so the host keeps a hidden textarea of its own, focused
+// while a SWF's input field has focus. Keys typed in it still bubble to
+// bindKeyboard's listener, which types their characters; only text
+// without such a key goes to the field from here.
+/** The hidden textareas the player made: their keys are the SWF's, not the page's. */
+const editors = new WeakSet();
+/** Whether `target` is the player's own textarea, whose keys are the SWF's. */
+export function isTextInput(target) {
+    return !!target && editors.has(target);
+}
+/**
+ * A hidden textarea in `box`, inside `host`, the element the page focuses,
+ * through which committed text reaches the player: an insertion without a
+ * composition, or a composition's end. Text a key typed, which the player
+ * has from its keydown, is left out, as is text in mid-composition, which
+ * the SWF never sees, and what was inserted is cleared away at once.
+ */
+export function bindTextInput(player, host, box) {
+    const editor = box.ownerDocument.createElement("textarea");
+    editors.add(editor);
+    editor.tabIndex = -1;
+    editor.autocomplete = "off";
+    editor.spellcheck = false;
+    editor.setAttribute("autocapitalize", "off");
+    editor.setAttribute("autocorrect", "off");
+    editor.style.cssText =
+        "position:absolute;left:0;top:0;width:1px;height:1px;padding:0;border:0;margin:0;" +
+            "opacity:0;resize:none;overflow:hidden;pointer-events:none;caret-color:transparent";
+    box.append(editor);
+    // A key bindKeyboard sent the SWF, down until let go: what it inserts, its keydown typed.
+    let keyed = false;
+    const insert = (text) => {
+        if (text !== "") {
+            player.keyboard?.insert(text);
+        }
+    };
+    const keydown = (event) => {
+        const e = event;
+        keyed = !e.isComposing && e.keyCode !== 229;
+    };
+    const keyup = () => {
+        keyed = false;
+    };
+    const compositionend = (event) => {
+        insert(event.data);
+        editor.value = "";
+    };
+    const input = (event) => {
+        const e = event;
+        if (e.isComposing) {
+            return;
+        }
+        // A composition's own inputs, Safari's insertFromComposition after its end among them, are
+        // left to compositionend, and a paste to bindKeyboard's paste listener.
+        if (e.inputType === "insertText" && !keyed && e.data) {
+            insert(e.data);
+        }
+        editor.value = "";
+    };
+    const listeners = [
+        ["keydown", keydown],
+        ["keyup", keyup],
+        ["compositionend", compositionend],
+        ["input", input],
+    ];
+    for (const [type, listener] of listeners) {
+        editor.addEventListener(type, listener);
+    }
+    // The host's own methods, not what is on it: a SWF's ExternalInterface callbacks may be.
+    const focusHost = () => HTMLElement.prototype.focus.call(host, { preventScroll: true });
+    const focusOf = (node) => Node.prototype.getRootNode.call(node).activeElement;
+    return {
+        sync() {
+            const outer = focusOf(host);
+            const inEditor = focusOf(editor) === editor;
+            const hostFocused = outer === host || (outer !== null && Node.prototype.contains.call(host, outer));
+            const editing = player.keyboard?.editing ?? false;
+            if (editing && hostFocused && !inEditor) {
+                editor.focus({ preventScroll: true });
+            }
+            else if (!editing && inEditor) {
+                focusHost();
+            }
+        },
+        destroy() {
+            for (const [type, listener] of listeners) {
+                editor.removeEventListener(type, listener);
+            }
+            // Removed while focused, the focus would leave the host for the page's body.
+            if (focusOf(editor) === editor) {
+                focusHost();
+            }
+            editor.remove();
+        },
+    };
+}

package/dist/thread/player/media/audio.js

@@ -26,6 +26,17 @@ export function browserAudioHost() {
             streams.add(stream);
             return stream;
         },
+        warm() {
+            if (closed) {
+                return;
+            }
+            try {
+                context ??= new Context();
+            }
+            catch {
+                // A browser out of contexts refuses one: the first decode asks again, and fails there.
+            }
+        },
         close() {
             // A browser keeps a context, and its thread, until it is closed.
             closed = true;

package/dist/thread/player/media/sounds.js

@@ -26,6 +26,26 @@ export function outputMix(local, global) {
     };
 }
 export const mixerMix = (s) => mixerMixes.get(s) ?? mixOf(null);
+/**
+ * Has `audio` open its device as `library` arrives, if the library has a
+ * sound or a stream to play: before its first frame, not at its first sound
+ * mid-play. A movie without either opens no device for it.
+ */
+export function warmAudioFor(audio, library) {
+    if (!audio?.warm) {
+        return;
+    }
+    if (library.root.stream) {
+        audio.warm();
+        return;
+    }
+    for (const character of library.characters.values()) {
+        if (character.type === "sound" || (character.type === "sprite" && character.timeline.stream)) {
+            audio.warm();
+            return;
+        }
+    }
+}
 const hosts = new WeakMap();
 /** An AS3 movie's SoundHost: its device, clock and symbols, its sprites' and SoundMixer's transforms. */
 export function soundHostOf(s) {

package/dist/thread/player/player.js

@@ -15,7 +15,7 @@ import { customContextMenu } from "./input/context-menu.js";
 import { KeyboardInput } from "./input/keyboard.js";
 import { PointerInput } from "./input/pointer.js";
 import { TouchInput } from "./input/touch.js";
-import { soundHostOf, streamFrames } from "./media/sounds.js";
+import { soundHostOf, streamFrames, warmAudioFor } from "./media/sounds.js";
 /** Ordinary frames one advance() may run at most, however fast the SWF and slow the display. */
 const MAX_FRAMES_PER_CALL = 5;
 /** A stream may catch up further when its scripts are cheap; input still gets a bounded turn. */
@@ -108,6 +108,8 @@ export class Player {
         this.avm1 = avm1;
         this.swf = readSwf(bytes);
         this.library = readLibrary(this.swf);
+        // The audio device opens while the page waits for the movie, not at its first sound.
+        warmAudioFor(scripting?.audio ?? avm1?.audio ?? null, this.library);
         this.width = Math.round((this.swf.frameSize.xMax - this.swf.frameSize.xMin) / 20);
         this.height = Math.round((this.swf.frameSize.yMax - this.swf.frameSize.yMin) / 20);
         setStageSize(this.stage, this.width, this.height);

package/dist/thread/player/playerglobal/flash/media/Sound.js

@@ -327,6 +327,9 @@ export function soundNatives(s) {
                 throw s.rt.error("Error", 2037);
             }
             sound.used = true;
+            // What it loads is decoded as it arrives, which may be mid-play: the
+            // device opens now, as it is asked for, rather than then.
+            s.audio?.warm?.();
             const generation = ++sound.generation;
             const abort = new AbortController();
             sound.abort = abort;

package/dist/thread/player/scripting/loads.js

@@ -12,7 +12,7 @@ import { decodeImageFile, decodeImages, hasUndecoded, imageFormat } from "../bit
 import { MovieClip, rootOf, unloads } from "../display/display.js";
 import { readLibrary } from "../display/timeline.js";
 import { LoadedAvm1Input } from "../input/avm1.js";
-import { streamFrames } from "../media/sounds.js";
+import { streamFrames, warmAudioFor } from "../media/sounds.js";
 import { dispatchEvent } from "./events.js";
 export class Loads {
     s;
@@ -240,6 +240,7 @@ export class Loads {
     avm1Library(swf, domain) {
         const library = readLibrary(swf);
         library.domain = domain;
+        warmAudioFor(this.s.audio, library);
         return library;
     }
     /**
@@ -522,6 +523,8 @@ export class Loads {
         }
         const library = readLibrary(swf);
         library.domain = load.domain;
+        // Its sounds' device opens as it arrives, before the frame that shows it.
+        warmAudioFor(this.s.audio, library);
         // Its images first: once its code is linked, a script in the domain can
         // make its symbols, whose bitmaps take the pixels there are then.
         await decodeImages(library, this.s.decodeImage);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swf2es/player-hosts",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "Optional Node and WebSocket transports, worker threads, an IndexedDB module cache and precompiled modules for the swf2es player",
   "keywords": [
     "swf",
@@ -60,6 +60,6 @@
     "LICENSE.third-party"
   ],
   "dependencies": {
-    "@swf2es/player": "0.1.3"
+    "@swf2es/player": "0.1.4"
   }
 }