@lightningtv/renderer 3.0.0-beta1 → 3.2.4

package/src/core/lib/utils.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 { Vec4 } from '../renderers/webgl/internal/ShaderUtils.js';
 
 export const PROTOCOL_REGEX = /^(data|ftps?|https?):/;
@@ -97,6 +78,11 @@ export interface Bound {
   y2: number;
 }
 
+export interface Coord {
+  x: number;
+  y: number;
+}
+
 export interface BoundWithValid extends Bound {
   valid: boolean;
 }
@@ -255,6 +241,10 @@ export function boundLargeThanBound(bound1: Bound, bound2: Bound) {
   );
 }
 
+export function pointInBound(x: number, y: number, bound: Bound) {
+  return !(x < bound.x1 || x > bound.x2 || y < bound.y1 || y > bound.y2);
+}
+
 export function isBoundPositive(bound: Bound): boolean {
   return bound.x1 < bound.x2 && bound.y1 < bound.y2;
 }
@@ -273,12 +263,14 @@ export function isRectPositive(rect: Rect): boolean {
 export function createPreloadBounds(
   strictBound: Bound,
   boundsMargin: [number, number, number, number],
+  out?: Bound,
 ): Bound {
   return createBound(
     strictBound.x1 - boundsMargin[3],
     strictBound.y1 - boundsMargin[0],
     strictBound.x2 + boundsMargin[1],
     strictBound.y2 + boundsMargin[2],
+    out,
   );
 }
 
@@ -359,3 +351,50 @@ export function calcFactoredRadiusArray(
   result[3] *= factor;
   return result;
 }
+
+export function dataURIToBlob(dataURI: string): Blob {
+  dataURI = dataURI.replace(/^data:/, '');
+
+  const type = dataURI.match(/image\/[^;]+/)?.[0] || '';
+  const base64 = dataURI.replace(/^[^,]+,/, '');
+
+  const sliceSize = 1024;
+  const byteCharacters = atob(base64);
+  const bytesLength = byteCharacters.length;
+  const slicesCount = Math.ceil(bytesLength / sliceSize);
+  const byteArrays = new Array(slicesCount);
+
+  for (let sliceIndex = 0; sliceIndex < slicesCount; ++sliceIndex) {
+    const begin = sliceIndex * sliceSize;
+    const end = Math.min(begin + sliceSize, bytesLength);
+
+    const bytes = new Array(end - begin);
+    for (let offset = begin, i = 0; offset < end; ++i, ++offset) {
+      bytes[i] = byteCharacters[offset]?.charCodeAt(0);
+    }
+    byteArrays[sliceIndex] = new Uint8Array(bytes);
+  }
+  return new Blob(byteArrays, { type });
+}
+
+export function fetchJson(
+  url: string,
+  responseType: XMLHttpRequestResponseType = '',
+): Promise<unknown> {
+  return new Promise((resolve, reject) => {
+    const xhr = new XMLHttpRequest();
+    xhr.responseType = responseType;
+    xhr.onreadystatechange = function () {
+      if (xhr.readyState == XMLHttpRequest.DONE) {
+        // On most devices like WebOS and Tizen, the file protocol returns 0 while http(s) protocol returns 200
+        if (xhr.status === 0 || xhr.status === 200) {
+          resolve(xhr.response);
+        } else {
+          reject(xhr.statusText);
+        }
+      }
+    };
+    xhr.open('GET', url, true);
+    xhr.send(null);
+  });
+}

package/src/core/lib/validateImageBitmap.ts

@@ -1,10 +1,14 @@
+import type { Platform } from '../platforms/Platform.js';
+
 export interface CreateImageBitmapSupport {
   basic: boolean; // Supports createImageBitmap(image)
   options: boolean; // Supports createImageBitmap(image, options)
   full: boolean; // Supports createImageBitmap(image, sx, sy, sw, sh, options)
 }
 
-export async function validateCreateImageBitmap(): Promise<CreateImageBitmapSupport> {
+export async function validateCreateImageBitmap(
+  platform: Platform,
+): Promise<CreateImageBitmapSupport> {
   // Test if createImageBitmap is supported using a simple 1x1 PNG image
   // prettier-ignore
   const pngBinaryData = new Uint8Array([
@@ -47,14 +51,14 @@ export async function validateCreateImageBitmap(): Promise<CreateImageBitmapSupp
 
   // Test basic createImageBitmap support
   const blob = new Blob([pngBinaryData], { type: 'image/png' });
-  const bitmap = await createImageBitmap(blob);
+  const bitmap = await platform.createImageBitmap(blob);
   bitmap.close?.();
   support.basic = true;
 
   // Test createImageBitmap with options support
   try {
     const options = { premultiplyAlpha: 'none' as const };
-    const bitmapWithOptions = await createImageBitmap(blob, options);
+    const bitmapWithOptions = await platform.createImageBitmap(blob, options);
     bitmapWithOptions.close?.();
     support.options = true;
   } catch (e) {
@@ -63,9 +67,16 @@ export async function validateCreateImageBitmap(): Promise<CreateImageBitmapSupp
 
   // Test createImageBitmap with full options support
   try {
-    const bitmapWithFullOptions = await createImageBitmap(blob, 0, 0, 1, 1, {
-      premultiplyAlpha: 'none',
-    });
+    const bitmapWithFullOptions = await platform.createImageBitmap(
+      blob,
+      0,
+      0,
+      1,
+      1,
+      {
+        premultiplyAlpha: 'none',
+      },
+    );
     bitmapWithFullOptions.close?.();
     support.full = true;
   } catch (e) {

package/src/core/platforms/Platform.ts

@@ -0,0 +1,64 @@
+import { type Stage } from '../Stage.js';
+
+export abstract class Platform {
+  /**
+   * Creates a new canvas element.
+   * @returns The created HTMLCanvasElement.
+   */
+  abstract createCanvas(): HTMLCanvasElement;
+
+  /**
+   * Get a DOM element by ID
+   * @returns The DOM element (or null)
+   */
+  abstract getElementById(id: string): HTMLElement | null;
+
+  /**
+   * Starts the main rendering loop, calling the provided update function every frame.
+   * @param Stage - The stage for rendering
+   */
+  abstract startLoop(stage: Stage): void;
+
+  /**
+   * Abstracted createImageBitmap method.
+   * @param blob - The image source to create the ImageBitmap from.
+   * @param sxOrOptions - The source rectangle x coordinate or ImageBitmapOptions.
+   * @param sy - The source rectangle y coordinate.
+   * @param sw - The source rectangle width.
+   * @param sh - The source rectangle height.
+   * @param options - The ImageBitmapOptions.
+   * @returns A promise that resolves with the created ImageBitmap.
+   */
+  abstract createImageBitmap(blob: ImageBitmapSource): Promise<ImageBitmap>;
+  abstract createImageBitmap(
+    blob: ImageBitmapSource,
+    options: ImageBitmapOptions,
+  ): Promise<ImageBitmap>;
+  abstract createImageBitmap(
+    blob: ImageBitmapSource,
+    sx: number,
+    sy: number,
+    sw: number,
+    sh: number,
+  ): Promise<ImageBitmap>;
+  abstract createImageBitmap(
+    blob: ImageBitmapSource,
+    sx: number,
+    sy: number,
+    sw: number,
+    sh: number,
+    options: ImageBitmapOptions,
+  ): Promise<ImageBitmap>;
+
+  /**
+   * Retrieves the current timestamp.
+   * @returns The current timestamp.
+   */
+  abstract getTimeStamp(): number;
+
+  /**
+   * Adds a FontFace to the platforms FontFaceSet
+   * @param font - The FontFace to add
+   */
+  abstract addFont(font: FontFace): void;
+}

package/src/core/platforms/web/WebPlatform.ts

@@ -0,0 +1,132 @@
+import { Platform } from '../Platform.js';
+import type { Stage } from '../../Stage.js';
+
+/**
+ * make fontface add not show errors
+ */
+interface FontFaceSetWithAdd extends FontFaceSet {
+  add(font: FontFace): void;
+}
+
+export class WebPlatform extends Platform {
+  ////////////////////////
+  // Platform-specific methods
+  ////////////////////////
+
+  override createCanvas(): HTMLCanvasElement {
+    const canvas = document.createElement('canvas');
+    return canvas;
+  }
+
+  override getElementById(id: string): HTMLElement | null {
+    return document.getElementById(id);
+  }
+
+  ////////////////////////
+  // Update loop
+  ////////////////////////
+
+  override startLoop(stage: Stage): void {
+    let isIdle = false;
+    let lastFrameTime = 0;
+    const buffer = 4;
+
+    const runLoop = (currentTime: number = 0) => {
+      const targetFrameTime = stage.targetFrameTime;
+
+      // Frame Limiting logic
+      if (targetFrameTime > 0) {
+        // Calculate elapsed time since the last frame
+        const elapsed = currentTime - lastFrameTime;
+
+        // If not enough time has passed, skip this frame
+        if (elapsed < targetFrameTime) {
+          const wait = targetFrameTime - elapsed;
+
+          if (wait > buffer) {
+            setTimeout(requestLoop, wait - buffer);
+          } else {
+            requestAnimationFrame(runLoop);
+          }
+          return;
+        }
+
+        // Adjust lastFrameTime to maintain the target FPS
+        lastFrameTime = currentTime - (elapsed % targetFrameTime);
+      } else {
+        lastFrameTime = currentTime;
+      }
+
+      stage.updateFrameTime();
+      const hasActiveAnimations = stage.updateAnimations();
+
+      if (!stage.hasSceneUpdates()) {
+        // We still need to calculate the fps else it looks like the app is frozen
+        stage.calculateFps();
+
+        // We use 15ms instead of 16.6ms to provide a safety buffer.
+        // This ensures we wake up slightly before the next frame to check for updates,
+        // preventing us from missing a frame due to timer variances.
+        setTimeout(requestLoop, Math.max(targetFrameTime, 15));
+
+        if (isIdle === false) {
+          stage.shManager.cleanup();
+          stage.eventBus.emit('idle');
+          isIdle = true;
+        }
+
+        if (stage.txMemManager.checkCleanup() === true) {
+          stage.txMemManager.cleanup();
+        }
+
+        stage.flushFrameEvents();
+        return;
+      }
+
+      isIdle = false;
+      stage.drawFrame(hasActiveAnimations);
+      stage.flushFrameEvents();
+
+      // Schedule next frame
+      requestAnimationFrame(runLoop);
+    };
+
+    const requestLoop = () => requestAnimationFrame(runLoop);
+
+    requestAnimationFrame(runLoop);
+  }
+
+  ////////////////////////
+  // ImageBitmap
+  ////////////////////////
+
+  override 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);
+    }
+  }
+
+  getTimeStamp(): number {
+    return Date.now();
+  }
+
+  override addFont(font: FontFace): void {
+    (document.fonts as FontFaceSetWithAdd).add(font);
+  }
+}

package/src/core/renderers/CoreContextTexture.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 { TextureMemoryManager } from '../TextureMemoryManager.js';
 import type { Texture } from '../textures/Texture.js';
 
@@ -34,7 +15,8 @@ export abstract class CoreContextTexture {
     this.memManager.setTextureMemUse(this.textureSource, byteSize);
   }
 
-  abstract load(): void;
+  abstract load(): Promise<void>;
+  abstract release(): void;
   abstract free(): void;
 
   get renderable(): boolean {

package/src/core/renderers/CoreRenderOp.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.
- */
-
 export abstract class CoreRenderOp {
   abstract draw(): void;
 }

package/src/core/renderers/CoreRenderer.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 { Dimensions } from '../../common/CommonTypes.js';
 import type { CoreNode } from '../CoreNode.js';
 import type { TextureOptions } from '../CoreTextureManager.js';
@@ -25,7 +6,7 @@ import type { ContextSpy } from '../lib/ContextSpy.js';
 import type { RenderCoords } from '../lib/RenderCoords.js';
 import type { RectWithValid } from '../lib/utils.js';
 import type { CoreShaderProgram } from './CoreShaderProgram.js';
-import type { Texture } from '../textures/Texture.js';
+import type { Texture, TextureCoords } from '../textures/Texture.js';
 import { CoreContextTexture } from './CoreContextTexture.js';
 import type { CoreShaderType, CoreShaderNode } from './CoreShaderNode.js';
 
@@ -38,6 +19,7 @@ export interface QuadOptions {
   colorBr: number;
   texture: Texture | null;
   textureOptions: TextureOptions | null;
+  textureCoords: TextureCoords | undefined;
   zIndex: number;
   shader: CoreShaderNode | null;
   alpha: number;
@@ -51,7 +33,8 @@ export interface QuadOptions {
   renderCoords?: RenderCoords;
   rtt: boolean;
   parentHasRenderTexture: boolean;
-  framebufferDimensions: Dimensions;
+  framebufferDimensions: Dimensions | null;
+  time?: number | null;
 }
 
 export interface CoreRendererOptions {
@@ -69,7 +52,7 @@ export interface BufferInfo {
 export abstract class CoreRenderer {
   public options: CoreRendererOptions;
   public mode: 'webgl' | 'canvas' | undefined;
-
+  defaultTextureCoords: TextureCoords | undefined = undefined;
   readonly stage: Stage;
 
   //// Core Managers
@@ -82,7 +65,7 @@ export abstract class CoreRenderer {
 
   abstract reset(): void;
   abstract render(surface?: 'screen' | CoreContextTexture): void;
-  abstract addQuad(quad: QuadOptions): void;
+  abstract addQuad(node: CoreNode): void;
   abstract createCtxTexture(textureSource: Texture): CoreContextTexture;
   abstract createShaderProgram(
     shaderConfig: Readonly<CoreShaderType>,
@@ -103,5 +86,15 @@ export abstract class CoreRenderer {
   abstract renderToTexture(node: CoreNode): void;
   abstract getBufferInfo(): BufferInfo | null;
   abstract getQuadCount(): number | null;
+  abstract updateViewport(): void;
   abstract updateClearColor(color: number): void;
+  getTextureCoords?(node: CoreNode): TextureCoords | undefined;
+
+  /**
+   * Optional hook called when the render list changes structurally
+   * (node added / removed / reordered). Implementations may use this to
+   * invalidate any cached GPU buffer layouts and force a full re-upload
+   * on the next render call.
+   */
+  invalidateQuadBuffer?(): void;
 }

package/src/core/renderers/CoreShaderNode.ts

@@ -66,9 +66,7 @@ export function resolveShaderProps(
  * You could view a ShaderType as a configuration object that contains methods,
  * and values that you can use to alter the way a node is drawn by the Renderer.
  */
-export interface CoreShaderType<
-  Props extends object = Record<string, unknown>,
-> {
+export interface CoreShaderType<Props extends object = any> {
   /**
    * Values you use to draw the Shader
    */
@@ -77,6 +75,11 @@ export interface CoreShaderType<
    * used for making a cache key to check for reusability, currently only used for webgl ShaderTypes but might be needed for other types of renderer
    */
   getCacheMarkers?: (props: Props) => string;
+  /**
+   * timer that updates every loop, by default uses the stage elapsed time If you want to do a special calculation you can define a function.
+   * When you calculate your own value you can use the Stage timing values deltaTime, lastFrameTime, and currentFrameTime;
+   */
+  time?: boolean | ((stage: Stage) => number);
 }
 
 /**
@@ -88,10 +91,15 @@ export class CoreShaderNode<Props extends object = Record<string, unknown>> {
   readonly stage: Stage;
   readonly shaderType: CoreShaderType<Props>;
   protected propsConfig: ShaderProps<Props> | undefined;
-  protected resolvedProps: Props | undefined = undefined;
+  readonly resolvedProps: Props | undefined = undefined;
   protected definedProps: Props | undefined = undefined;
   protected node: CoreNode | null = null;
+  readonly time: CoreShaderType['time'] = undefined;
   update: (() => void) | undefined = undefined;
+  private _valueKeyCache = '';
+  private _valueKeyDirty = true;
+  private _lastW = 0;
+  private _lastH = 0;
 
   constructor(
     readonly shaderKey: string,
@@ -101,6 +109,7 @@ export class CoreShaderNode<Props extends object = Record<string, unknown>> {
   ) {
     this.stage = stage;
     this.shaderType = type;
+    this.time = type.time;
 
     if (props !== undefined) {
       /**
@@ -136,6 +145,7 @@ export class CoreShaderNode<Props extends object = Record<string, unknown>> {
           } else {
             this.resolvedProps![key] = value;
           }
+          this._valueKeyDirty = true;
 
           if (this.update !== undefined && this.node !== null) {
             this.node.setUpdateType(UpdateType.RecalcUniforms);
@@ -152,8 +162,29 @@ export class CoreShaderNode<Props extends object = Record<string, unknown>> {
     this.node = node;
   }
 
-  getResolvedProps() {
-    return this.resolvedProps;
+  createValueKey() {
+    if (
+      this._valueKeyDirty === false &&
+      this.node !== null &&
+      this.node.w === this._lastW &&
+      this.node.h === this._lastH
+    ) {
+      return this._valueKeyCache;
+    }
+
+    let valueKey = '';
+    for (const key in this.resolvedProps) {
+      valueKey += `${key}:${this.resolvedProps[key]!};`;
+    }
+    valueKey += `node-width:${this.node!.w}`;
+    valueKey += `node-height:${this.node!.h}`;
+
+    this._valueKeyCache = valueKey;
+    this._valueKeyDirty = false;
+    this._lastW = this.node!.w;
+    this._lastH = this.node!.h;
+
+    return valueKey;
   }
 
   get props(): Props | undefined {

package/src/core/renderers/CoreShaderProgram.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.
- */
-
 export interface CoreShaderProgram {
   attach?: () => void;
   detach?: () => void;