@lightningjs/renderer 3.0.0-beta9 → 3.0.1

package/src/core/platforms/web/lib/ImageWorker.ts

@@ -0,0 +1,192 @@
+/*
+ * If not stated otherwise in this file or this component's LICENSE file the
+ * following copyright and licenses apply:
+ *
+ * Copyright 2023 Comcast Cable Communications Management, LLC.
+ *
+ * Licensed under the Apache License, Version 2.0 (the License);
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { ImageResponse } from '../../../textures/ImageTexture.js';
+
+export type ImageWorkerFactory = () => void;
+
+type MessageCallback = [
+  (value: ImageResponse) => void,
+  (reason: unknown) => void,
+];
+
+interface ImageWorkerLegacyResponse {
+  data: Blob;
+  premultiplyAlpha: boolean | null;
+}
+
+interface ImageWorkerMessage {
+  id: number;
+  src: string;
+  data: ImageResponse | ImageWorkerLegacyResponse;
+  error: string;
+  sx: number | null;
+  sy: number | null;
+  sw: number | null;
+  sh: number | null;
+}
+
+export class ImageWorkerManager {
+  imageWorkersEnabled = true;
+  messageManager: Record<number, MessageCallback> = {};
+  workers: Worker[] = [];
+  workerLoad: number[] = [];
+  nextId = 0;
+
+  constructor(numImageWorkers: number, workerFactory: ImageWorkerFactory) {
+    this.workers = this.createWorkers(numImageWorkers, workerFactory);
+    this.workers.forEach((worker, index) => {
+      worker.onmessage = (event) => this.handleMessage(event, index);
+    });
+  }
+
+  private isLegacyResponse(
+    data: ImageResponse | ImageWorkerLegacyResponse,
+  ): data is ImageWorkerLegacyResponse {
+    return data.data instanceof Blob;
+  }
+
+  private createImageFromBlob(
+    blob: Blob,
+    premultiplyAlpha: boolean | null,
+  ): Promise<ImageResponse> {
+    return new Promise((resolve, reject) => {
+      const objectUrl = URL.createObjectURL(blob);
+      const image = new Image();
+
+      image.onload = () => {
+        URL.revokeObjectURL(objectUrl);
+        resolve({ data: image, premultiplyAlpha });
+      };
+
+      image.onerror = () => {
+        URL.revokeObjectURL(objectUrl);
+        reject(new Error('Image loading failed for legacy worker response.'));
+      };
+
+      image.src = objectUrl;
+    });
+  }
+
+  private handleMessage(event: MessageEvent, workerIndex: number) {
+    const { id, data, error } = event.data as ImageWorkerMessage;
+    const msg = this.messageManager[id];
+
+    if (this.workerLoad[workerIndex]) {
+      this.workerLoad[workerIndex]--;
+    }
+
+    if (msg) {
+      const [resolve, reject] = msg;
+      delete this.messageManager[id];
+      if (error) {
+        reject(new Error(error));
+      } else if (this.isLegacyResponse(data)) {
+        this.createImageFromBlob(data.data, data.premultiplyAlpha)
+          .then(resolve)
+          .catch(reject);
+      } else {
+        resolve(data);
+      }
+    }
+  }
+
+  private createWorkers(
+    numWorkers = 1,
+    workerFactory: ImageWorkerFactory,
+  ): Worker[] {
+    let workerCode = `(${workerFactory.toString()})()`;
+
+    workerCode = workerCode.replace('"use strict";', '');
+    const blob: Blob = new Blob([workerCode], {
+      type: 'application/javascript',
+    });
+
+    const blobURL: string = (self.URL ? URL : webkitURL).createObjectURL(blob);
+    const workers: Worker[] = [];
+    for (let i = 0; i < numWorkers; i++) {
+      workers.push(new Worker(blobURL));
+      this.workerLoad.push(0);
+    }
+    return workers;
+  }
+
+  private getNextWorkerIndex(): number {
+    if (this.workers.length === 0) return -1;
+
+    let minLoad = 99;
+    let workerIndex = 0;
+
+    for (let i = 0; i < this.workers.length; i++) {
+      const load = this.workerLoad[i] || 0;
+
+      if (load === 0) {
+        return i;
+      }
+
+      if (load < minLoad) {
+        minLoad = load;
+        workerIndex = i;
+      }
+    }
+    return workerIndex;
+  }
+
+  getImage(
+    src: string,
+    premultiplyAlpha: boolean | null,
+    sx: number | null,
+    sy: number | null,
+    sw: number | null,
+    sh: number | null,
+  ): Promise<ImageResponse> {
+    return new Promise((resolve, reject) => {
+      try {
+        if (this.workers) {
+          const id = this.nextId++;
+          this.messageManager[id] = [resolve, reject];
+          const nextWorkerIndex = this.getNextWorkerIndex();
+
+          if (nextWorkerIndex !== -1) {
+            const worker = this.workers[nextWorkerIndex];
+            if (worker === undefined) {
+              delete this.messageManager[id];
+              reject(new Error('No image worker available.'));
+              return;
+            }
+
+            this.workerLoad[nextWorkerIndex] =
+              (this.workerLoad[nextWorkerIndex] ?? 0) + 1;
+            worker.postMessage({
+              id,
+              src: src,
+              premultiplyAlpha,
+              sx,
+              sy,
+              sw,
+              sh,
+            });
+          }
+        }
+      } catch (error) {
+        reject(error);
+      }
+    });
+  }
+}

package/src/core/platforms/web/lib/ImageWorkerDefault.ts

@@ -0,0 +1,117 @@
+/*
+ * If not stated otherwise in this file or this component's LICENSE file the
+ * following copyright and licenses apply:
+ *
+ * Copyright 2026 Comcast Cable Communications Management, LLC.
+ *
+ * Licensed under the Apache License, Version 2.0 (the License);
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an AS IS BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Note that, within the createImageWorker function, we must only use ES5 code
+ * to keep it ES5-valid after babelifying, as the converted code of this section
+ * is converted to a blob and used as the js of the web worker thread.
+ */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-argument */
+export function createImageWorker() {
+  function hasAlphaChannel(mimeType: string) {
+    return mimeType.indexOf('image/png') !== -1;
+  }
+
+  function getImage(
+    src: string,
+    premultiplyAlpha: boolean | null,
+    x: number | null,
+    y: number | null,
+    width: number | null,
+    height: number | null,
+  ) {
+    return new Promise(function (resolve, reject) {
+      var xhr = new XMLHttpRequest();
+      xhr.open('GET', src, true);
+      xhr.responseType = 'blob';
+
+      xhr.onload = function () {
+        if (xhr.status !== 200 && xhr.status !== 0) {
+          return reject(
+            new Error(
+              `Image loading failed. HTTP status code: ${
+                xhr.status || 'N/A'
+              }. URL: ${src}`,
+            ),
+          );
+        }
+
+        var blob = xhr.response;
+        var withAlphaChannel =
+          premultiplyAlpha !== undefined
+            ? premultiplyAlpha
+            : hasAlphaChannel(blob.type);
+
+        if (width !== null && height !== null) {
+          createImageBitmap(blob, x || 0, y || 0, width, height, {
+            premultiplyAlpha: withAlphaChannel ? 'premultiply' : 'none',
+            colorSpaceConversion: 'none',
+            imageOrientation: 'none',
+          })
+            .then(function (data) {
+              resolve({ data, premultiplyAlpha: premultiplyAlpha });
+            })
+            .catch(function (error) {
+              reject(error);
+            });
+          return;
+        }
+
+        createImageBitmap(blob, {
+          premultiplyAlpha: withAlphaChannel ? 'premultiply' : 'none',
+          colorSpaceConversion: 'none',
+          imageOrientation: 'none',
+        })
+          .then(function (data) {
+            resolve({ data, premultiplyAlpha: premultiplyAlpha });
+          })
+          .catch(function (error) {
+            reject(error);
+          });
+      };
+
+      xhr.onerror = function () {
+        reject(
+          new Error('Network error occurred while trying to fetch the image.'),
+        );
+      };
+
+      xhr.send();
+    });
+  }
+
+  self.onmessage = (event) => {
+    var src = event.data.src;
+    var id = event.data.id;
+    var premultiplyAlpha = event.data.premultiplyAlpha;
+    var x = event.data.sx;
+    var y = event.data.sy;
+    var width = event.data.sw;
+    var height = event.data.sh;
+
+    getImage(src, premultiplyAlpha, x, y, width, height)
+      .then(function (data) {
+        // @ts-expect-error ts has wrong postMessage signature
+        self.postMessage({ id: id, src: src, data: data }, [data.data]);
+      })
+      .catch(function (error) {
+        self.postMessage({ id: id, src: src, error: error.message });
+      });
+  };
+}

package/src/core/platforms/web/lib/ImageWorkerLegacy.ts

@@ -0,0 +1,87 @@
+/*
+ * If not stated otherwise in this file or this component's LICENSE file the
+ * following copyright and licenses apply:
+ *
+ * Copyright 2026 Comcast Cable Communications Management, LLC.
+ *
+ * Licensed under the Apache License, Version 2.0 (the License);
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an AS IS BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* eslint-disable @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unused-vars
+ */
+export function createImageWorkerLegacy() {
+  function hasAlphaChannel(mimeType: string) {
+    return mimeType.indexOf('image/png') !== -1;
+  }
+
+  function getImage(
+    src: string,
+    premultiplyAlpha: boolean | null,
+    x: number | null,
+    y: number | null,
+    width: number | null,
+    height: number | null,
+  ): Promise<{ data: Blob; premultiplyAlpha: boolean | null }> {
+    return new Promise(function (resolve, reject) {
+      var xhr = new XMLHttpRequest();
+      xhr.open('GET', src, true);
+      xhr.responseType = 'blob';
+
+      xhr.onload = function () {
+        if (xhr.status !== 200 && xhr.status !== 0) {
+          return reject(
+            new Error(
+              `Image loading failed. HTTP status code: ${
+                xhr.status || 'N/A'
+              }. URL: ${src}`,
+            ),
+          );
+        }
+
+        var blob = xhr.response;
+        var withAlphaChannel =
+          premultiplyAlpha !== undefined
+            ? premultiplyAlpha
+            : hasAlphaChannel(blob.type);
+
+        resolve({ data: blob, premultiplyAlpha: withAlphaChannel });
+      };
+
+      xhr.onerror = function () {
+        reject(
+          new Error('Network error occurred while trying to fetch the image.'),
+        );
+      };
+
+      xhr.send();
+    });
+  }
+
+  self.onmessage = (event) => {
+    var src = event.data.src;
+    var id = event.data.id;
+    var premultiplyAlpha = event.data.premultiplyAlpha;
+    var x = event.data.sx;
+    var y = event.data.sy;
+    var width = event.data.sw;
+    var height = event.data.sh;
+
+    getImage(src, premultiplyAlpha, x, y, width, height)
+      .then(function (data) {
+        self.postMessage({ id: id, src: src, data: data });
+      })
+      .catch(function (error) {
+        self.postMessage({ id: id, src: src, error: error.message });
+      });
+  };
+}

package/src/core/platforms/web/lib/ImageWorkerNoOptions.ts

@@ -0,0 +1,99 @@
+/*
+ * If not stated otherwise in this file or this component's LICENSE file the
+ * following copyright and licenses apply:
+ *
+ * Copyright 2026 Comcast Cable Communications Management, LLC.
+ *
+ * Licensed under the Apache License, Version 2.0 (the License);
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an AS IS BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Note that, within the createImageWorkerNoOptions function, we must only use
+ * ES5 code to keep it ES5-valid after babelifying, as the converted code of
+ * this section is converted to a blob and used as the js of the web worker
+ * thread.
+ */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-argument */
+export function createImageWorkerNoOptions() {
+  function hasAlphaChannel(mimeType: string) {
+    return mimeType.indexOf('image/png') !== -1;
+  }
+
+  function getImage(
+    src: string,
+    premultiplyAlpha: boolean | null,
+    x: number | null,
+    y: number | null,
+    width: number | null,
+    height: number | null,
+  ): Promise<{ data: ImageBitmap; premultiplyAlpha: boolean | null }> {
+    return new Promise(function (resolve, reject) {
+      var xhr = new XMLHttpRequest();
+      xhr.open('GET', src, true);
+      xhr.responseType = 'blob';
+
+      xhr.onload = function () {
+        if (xhr.status !== 200 && xhr.status !== 0) {
+          return reject(
+            new Error(
+              `Image loading failed. HTTP status code: ${
+                xhr.status || 'N/A'
+              }. URL: ${src}`,
+            ),
+          );
+        }
+
+        var blob = xhr.response;
+        var withAlphaChannel =
+          premultiplyAlpha !== undefined
+            ? premultiplyAlpha
+            : hasAlphaChannel(blob.type);
+
+        createImageBitmap(blob)
+          .then(function (data) {
+            resolve({ data, premultiplyAlpha: withAlphaChannel });
+          })
+          .catch(function (error) {
+            reject(error);
+          });
+      };
+
+      xhr.onerror = function () {
+        reject(
+          new Error('Network error occurred while trying to fetch the image.'),
+        );
+      };
+
+      xhr.send();
+    });
+  }
+
+  self.onmessage = (event) => {
+    var src = event.data.src;
+    var id = event.data.id;
+    var premultiplyAlpha = event.data.premultiplyAlpha;
+    var x = event.data.sx;
+    var y = event.data.sy;
+    var width = event.data.sw;
+    var height = event.data.sh;
+
+    getImage(src, premultiplyAlpha, x, y, width, height)
+      .then(function (data) {
+        // @ts-expect-error ts has wrong postMessage signature
+        self.postMessage({ id: id, src: src, data: data }, [data.data]);
+      })
+      .catch(function (error) {
+        self.postMessage({ id: id, src: src, error: error.message });
+      });
+  };
+}

package/src/core/platforms/web/lib/createImageBitmap.ts

@@ -0,0 +1,40 @@
+/*
+ * If not stated otherwise in this file or this component's LICENSE file the
+ * following copyright and licenses apply:
+ *
+ * Copyright 2026 Comcast Cable Communications Management, LLC.
+ *
+ * Licensed under the Apache License, Version 2.0 (the License);
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export const createImageBitmap = (
+  blob: ImageBitmapSource,
+  sxOrOptions?: number | ImageBitmapOptions,
+  sy?: number,
+  sw?: number,
+  sh?: number,
+  options?: ImageBitmapOptions,
+): Promise<ImageBitmap> => {
+  if (typeof sxOrOptions === 'number') {
+    return createImageBitmap(
+      blob,
+      sxOrOptions,
+      sy ?? 0,
+      sw ?? 0,
+      sh ?? 0,
+      options,
+    );
+  } else {
+    return createImageBitmap(blob, sxOrOptions);
+  }
+};