@lightningtv/renderer 3.0.0-beta1 → 3.2.4

package/src/core/textures/ImageTexture.ts

@@ -1,31 +1,21 @@
-/*
- * 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 { CoreTextureManager } from '../CoreTextureManager.js';
 import { Texture, TextureType, type TextureData } from './Texture.js';
 import {
   isCompressedTextureContainer,
   loadCompressedTexture,
 } from '../lib/textureCompression.js';
-import { convertUrlToAbsolute, isBase64Image } from '../lib/utils.js';
+import {
+  convertUrlToAbsolute,
+  dataURIToBlob,
+  isBase64Image,
+} from '../lib/utils.js';
 import { isSvgImage, loadSvg } from '../lib/textureSvg.js';
-import { fetchJson } from '../text-rendering/font-face-types/utils.js';
+import { fetchJson } from '../lib/utils.js';
+import type { Platform } from '../platforms/Platform.js';
+import {
+  ENABLE_COMPRESSED_TEXTURES,
+  isProductionEnvironment,
+} from '../../utils.js';
 
 /**
  * Properties of the {@link ImageTexture}
@@ -40,7 +30,7 @@ export interface ImageTextureProps {
    *
    * @default ''
    */
-  src?: string | ImageData | (() => ImageData | null);
+  src?: string | Blob | ImageData | (() => ImageData | null);
   /**
    * Whether to premultiply the alpha channel into the color channels of the
    * image.
@@ -61,12 +51,12 @@ export interface ImageTextureProps {
    * Width of the image to be used as a texture. If not provided, the image's
    * natural width will be used.
    */
-  width?: number | null;
+  w?: number | null;
   /**
    * Height of the image to be used as a texture. If not provided, the image's
    * natural height will be used.
    */
-  height?: number | null;
+  h?: number | null;
   /**
    * Type, indicate an image type for overriding type detection
    *
@@ -103,6 +93,12 @@ export interface ImageTextureProps {
    * @default null
    */
   sy?: number | null;
+  /**
+   * Maximum number of times to retry loading the image if it fails.
+   *
+   * @default 5
+   */
+  maxRetryCount?: number;
 }
 
 /**
@@ -120,40 +116,57 @@ export interface ImageTextureProps {
  * {@link ImageTextureProps.premultiplyAlpha} prop to `false`.
  */
 export class ImageTexture extends Texture {
-  public props: Required<ImageTextureProps>;
+  private platform: Platform;
 
+  public props: Required<ImageTextureProps>;
   public override type: TextureType = TextureType.image;
 
-  constructor(txManager: CoreTextureManager, props: ImageTextureProps) {
+  constructor(
+    txManager: CoreTextureManager,
+    props: Required<ImageTextureProps>,
+  ) {
     super(txManager);
-    this.props = ImageTexture.resolveDefaults(props);
+
+    this.platform = txManager.platform;
+    this.props = props;
+    this.maxRetryCount = props.maxRetryCount as number;
   }
 
   hasAlphaChannel(mimeType: string) {
     return mimeType.indexOf('image/png') !== -1;
   }
 
-  async loadImageFallback(src: string, hasAlpha: boolean) {
+  async loadImageFallback(src: string | Blob, hasAlpha: boolean) {
     const img = new Image();
 
-    if (isBase64Image(src) === false) {
+    if (typeof src === 'string' && isBase64Image(src) === false) {
       img.crossOrigin = 'anonymous';
     }
 
-    return new Promise<{ data: HTMLImageElement; premultiplyAlpha: boolean }>(
-      (resolve) => {
-        img.onload = () => {
-          resolve({ data: img, premultiplyAlpha: hasAlpha });
-        };
+    return new Promise<{
+      data: HTMLImageElement | null;
+      premultiplyAlpha: boolean;
+    }>((resolve, reject) => {
+      img.onload = () => {
+        resolve({ data: img, premultiplyAlpha: hasAlpha });
+      };
 
-        img.onerror = () => {
-          console.warn('Image loading failed, returning fallback object.');
-          resolve({ data: img, premultiplyAlpha: hasAlpha });
-        };
+      img.onerror = (err) => {
+        const errorMessage =
+          err instanceof Error
+            ? err.message
+            : err instanceof Event
+            ? `Image loading failed for ${img.src}`
+            : 'Unknown image loading error';
+        reject(new Error(`Image loading failed: ${errorMessage}`));
+      };
 
+      if (src instanceof Blob) {
+        img.src = URL.createObjectURL(src);
+      } else {
         img.src = src;
-      },
-    );
+      }
+    });
   }
 
   async createImageBitmap(
@@ -172,23 +185,30 @@ export class ImageTexture extends Texture {
 
     if (imageBitmapSupported.full === true && sw !== null && sh !== null) {
       // createImageBitmap with crop
-      const bitmap = await createImageBitmap(blob, sx || 0, sy || 0, sw, sh, {
-        premultiplyAlpha: hasAlphaChannel ? 'premultiply' : 'none',
-        colorSpaceConversion: 'none',
-        imageOrientation: 'none',
-      });
+      const bitmap = await this.platform.createImageBitmap(
+        blob,
+        sx || 0,
+        sy || 0,
+        sw,
+        sh,
+        {
+          premultiplyAlpha: hasAlphaChannel ? 'premultiply' : 'none',
+          colorSpaceConversion: 'none',
+          imageOrientation: 'none',
+        },
+      );
       return { data: bitmap, premultiplyAlpha: hasAlphaChannel };
     } else if (imageBitmapSupported.basic === true) {
       // basic createImageBitmap without options or crop
       // this is supported for Chrome v50 to v52/54 that doesn't support options
       return {
-        data: await createImageBitmap(blob),
+        data: await this.platform.createImageBitmap(blob),
         premultiplyAlpha: hasAlphaChannel,
       };
     }
 
     // default createImageBitmap without crop but with options
-    const bitmap = await createImageBitmap(blob, {
+    const bitmap = await this.platform.createImageBitmap(blob, {
       premultiplyAlpha: hasAlphaChannel ? 'premultiply' : 'none',
       colorSpaceConversion: 'none',
       imageOrientation: 'none',
@@ -215,9 +235,16 @@ export class ImageTexture extends Texture {
         );
       }
 
-      const blob = await fetchJson(src, 'blob').then(
-        (response) => response as Blob,
-      );
+      let blob;
+
+      if (isBase64Image(src) === true) {
+        blob = dataURIToBlob(src);
+      } else {
+        blob = await fetchJson(src, 'blob').then(
+          (response) => response as Blob,
+        );
+      }
+
       return this.createImageBitmap(blob, premultiplyAlpha, sx, sy, sw, sh);
     }
 
@@ -225,11 +252,12 @@ export class ImageTexture extends Texture {
   }
 
   override async getTextureSource(): Promise<TextureData> {
-    let resp;
+    let resp: TextureData;
     try {
       resp = await this.determineImageTypeAndLoadImage();
     } catch (e) {
       this.setState('failed', e as Error);
+
       return {
         data: null,
       };
@@ -242,23 +270,6 @@ export class ImageTexture extends Texture {
       };
     }
 
-    let width, height;
-    // check if resp.data is typeof Uint8ClampedArray else
-    // use resp.data.width and resp.data.height
-    if (resp.data instanceof Uint8Array) {
-      width = this.props.width ?? 0;
-      height = this.props.height ?? 0;
-    } else {
-      width = resp.data?.width ?? (this.props.width || 0);
-      height = resp.data?.height ?? (this.props.height || 0);
-    }
-
-    // we're loaded!
-    this.setState('fetched', {
-      width,
-      height,
-    });
-
     return {
       data: resp.data,
       premultiplyAlpha: this.props.premultiplyAlpha ?? true,
@@ -274,6 +285,14 @@ export class ImageTexture extends Texture {
     }
 
     if (typeof src !== 'string') {
+      if (src instanceof Blob) {
+        if (this.txManager.hasCreateImageBitmap === true) {
+          const { sx, sy, sw, sh } = this.props;
+          return this.createImageBitmap(src, premultiplyAlpha, sx, sy, sw, sh);
+        } else {
+          return this.loadImageFallback(src, premultiplyAlpha ?? true);
+        }
+      }
       if (src instanceof ImageData) {
         return {
           data: src,
@@ -294,8 +313,8 @@ export class ImageTexture extends Texture {
     if (type === 'svg') {
       return loadSvg(
         absoluteSrc,
-        this.props.width,
-        this.props.height,
+        this.props.w,
+        this.props.h,
         this.props.sx,
         this.props.sy,
         this.props.sw,
@@ -306,8 +325,8 @@ export class ImageTexture extends Texture {
     if (isSvgImage(src) === true) {
       return loadSvg(
         absoluteSrc,
-        this.props.width,
-        this.props.height,
+        this.props.w,
+        this.props.h,
         this.props.sx,
         this.props.sy,
         this.props.sw,
@@ -315,11 +334,10 @@ export class ImageTexture extends Texture {
       );
     }
 
-    if (type === 'compressed') {
-      return loadCompressedTexture(absoluteSrc);
-    }
-
-    if (isCompressedTextureContainer(src) === true) {
+    if (
+      ENABLE_COMPRESSED_TEXTURES &&
+      (type === 'compressed' || isCompressedTextureContainer(src) === true)
+    ) {
       return loadCompressedTexture(absoluteSrc);
     }
 
@@ -333,26 +351,25 @@ export class ImageTexture extends Texture {
    * @returns The cache key as a string, or `false` if the key cannot be generated.
    */
   static override makeCacheKey(props: ImageTextureProps): string | false {
-    const resolvedProps = ImageTexture.resolveDefaults(props);
     // Only cache key-able textures; prioritise key
-    const key = resolvedProps.key || resolvedProps.src;
+    const key = props.key || props.src;
     if (typeof key !== 'string') {
       return false;
     }
 
-    // if we have source dimensions, cache the texture separately
-    let dimensionProps = '';
-    if (resolvedProps.sh !== null && resolvedProps.sw !== null) {
-      dimensionProps += ',';
-      dimensionProps += resolvedProps.sx ?? '';
-      dimensionProps += resolvedProps.sy ?? '';
-      dimensionProps += resolvedProps.sw || '';
-      dimensionProps += resolvedProps.sh || '';
+    let cacheKey = `ImageTexture,${key},${props.premultiplyAlpha ?? 'true'},${
+      props.maxRetryCount
+    }`;
+
+    if (props.sh !== null && props.sw !== null) {
+      cacheKey += ',';
+      cacheKey += props.sx ?? '';
+      cacheKey += props.sy ?? '';
+      cacheKey += props.sw || '';
+      cacheKey += props.sh || '';
     }
 
-    return `ImageTexture,${key},${
-      resolvedProps.premultiplyAlpha ?? 'true'
-    }${dimensionProps}`;
+    return cacheKey;
   }
 
   static override resolveDefaults(
@@ -363,12 +380,13 @@ export class ImageTexture extends Texture {
       premultiplyAlpha: props.premultiplyAlpha ?? true, // null,
       key: props.key ?? null,
       type: props.type ?? null,
-      width: props.width ?? null,
-      height: props.height ?? null,
+      w: props.w ?? null,
+      h: props.h ?? null,
       sx: props.sx ?? null,
       sy: props.sy ?? null,
       sw: props.sw ?? null,
       sh: props.sh ?? null,
+      maxRetryCount: props.maxRetryCount ?? 5,
     };
   }
 

package/src/core/textures/NoiseTexture.ts

@@ -1,22 +1,3 @@
-/*
- * 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 { CoreTextureManager } from '../CoreTextureManager.js';
 import { Texture, TextureType, type TextureData } from './Texture.js';
 
@@ -29,13 +10,13 @@ export interface NoiseTextureProps {
    *
    * @default 128
    */
-  width?: number;
+  w?: number;
   /**
    * Height of texture
    *
    * @default 128
    */
-  height?: number;
+  h?: number;
   /**
    * A number value that can be varied to force new textures to be generated
    *
@@ -58,14 +39,17 @@ export class NoiseTexture extends Texture {
 
   public override type: TextureType = TextureType.noise;
 
-  constructor(txManager: CoreTextureManager, props: NoiseTextureProps) {
+  constructor(
+    txManager: CoreTextureManager,
+    props: Required<NoiseTextureProps>,
+  ) {
     super(txManager);
-    this.props = NoiseTexture.resolveDefaults(props);
+    this.props = props;
   }
 
   override async getTextureSource(): Promise<TextureData> {
-    const { width, height } = this.props;
-    const size = width * height * 4;
+    const { w, h } = this.props;
+    const size = w * h * 4;
     const pixelData8 = new Uint8ClampedArray(size);
     for (let i = 0; i < size; i += 4) {
       const v = Math.floor(Math.random() * 256);
@@ -75,10 +59,9 @@ export class NoiseTexture extends Texture {
       pixelData8[i + 3] = 255;
     }
 
-    this.setState('fetched');
-
+    // Noise Texture data ready - dimensions will be set during upload
     return {
-      data: new ImageData(pixelData8, width, height),
+      data: new ImageData(pixelData8, w, h),
     };
   }
 
@@ -87,15 +70,15 @@ export class NoiseTexture extends Texture {
       return false;
     }
     const resolvedProps = NoiseTexture.resolveDefaults(props);
-    return `NoiseTexture,${resolvedProps.width},${resolvedProps.height},${resolvedProps.cacheId}`;
+    return `NoiseTexture,${resolvedProps.w},${resolvedProps.h},${resolvedProps.cacheId}`;
   }
 
   static override resolveDefaults(
     props: NoiseTextureProps,
   ): Required<NoiseTextureProps> {
     return {
-      width: props.width ?? 128,
-      height: props.height ?? 128,
+      w: props.w ?? 128,
+      h: props.h ?? 128,
       cacheId: props.cacheId ?? 0,
     };
   }

package/src/core/textures/RenderTexture.ts

@@ -1,22 +1,3 @@
-/*
- * 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 { CoreTextureManager } from '../CoreTextureManager.js';
 import { Texture, TextureType, type TextureData } from './Texture.js';
 
@@ -28,13 +9,13 @@ export interface RenderTextureProps {
    * WebGL Texture width
    * @default 256
    */
-  width?: number;
+  w?: number;
 
   /**
    * WebGL Texture height
    * @default 256
    */
-  height?: number;
+  h?: number;
 }
 
 export class RenderTexture extends Texture {
@@ -42,30 +23,32 @@ export class RenderTexture extends Texture {
 
   public override type: TextureType = TextureType.renderToTexture;
 
-  constructor(txManager: CoreTextureManager, props?: RenderTextureProps) {
+  constructor(
+    txManager: CoreTextureManager,
+    props: Required<RenderTextureProps>,
+  ) {
     super(txManager);
-    this.props = RenderTexture.resolveDefaults(props || {});
+    this.props = props;
   }
 
-  get width() {
-    return this.props.width;
+  get w() {
+    return this.props.w;
   }
 
-  set width(value: number) {
-    this.props.width = value;
+  set w(value: number) {
+    this.props.w = value;
   }
 
-  get height() {
-    return this.props.height;
+  get h() {
+    return this.props.h;
   }
 
-  set height(value: number) {
-    this.props.height = value;
+  set h(value: number) {
+    this.props.h = value;
   }
 
   override async getTextureSource(): Promise<TextureData> {
-    this.setState('fetched');
-
+    // Render texture data ready - dimensions will be set during upload
     return {
       data: null,
       premultiplyAlpha: null,
@@ -76,8 +59,8 @@ export class RenderTexture extends Texture {
     props: RenderTextureProps,
   ): Required<RenderTextureProps> {
     return {
-      width: props.width || 256,
-      height: props.height || 256,
+      w: props.w || 256,
+      h: props.h || 256,
     };
   }