@lightningtv/solid 2.11.7 → 2.12.1

package/src/primitives/announcer/speech.ts

@@ -12,6 +12,11 @@ export interface SeriesResult {
   cancel: () => void;
 }
 
+// Aria label
+type AriaLabel = { text: string; lang: string };
+const ARIA_PARENT_ID = 'aria-parent';
+let ariaLabelPhrases: AriaLabel[] = [];
+
 /* global SpeechSynthesisErrorEvent */
 function flattenStrings(series: SpeechType[] = []): SpeechType[] {
   const flattenedSeries = [];
@@ -40,6 +45,82 @@ function delay(pause: number) {
   });
 }
 
+/**
+ * @description This function is called at the end of the speak series
+ * @param Phrase is an object containing the text and the language
+ */
+function addChildrenToAriaDiv(phrase: AriaLabel) {
+  if (phrase?.text?.trim().length === 0) return;
+  ariaLabelPhrases.push(phrase);
+}
+
+/**
+ * @description This function is triggered finally when the speak series is finished and we are to speak the aria labels
+ */
+function focusElementForAria() {
+  const element = createAriaElement();
+
+  if (!element) {
+    console.error(`ARIA div not found: ${ARIA_PARENT_ID}`);
+    return;
+  }
+
+  for (const object of ariaLabelPhrases) {
+    const span = document.createElement('span');
+
+    // TODO: Not sure LG or Samsung support lang attribute on span or switching language
+    span.setAttribute('lang', object.lang);
+    span.setAttribute('aria-label', object.text);
+    element.appendChild(span);
+  }
+
+  // Cleanup
+  setTimeout(() => {
+    ariaLabelPhrases = [];
+    cleanAriaLabelParent();
+    focusCanvas();
+  }, 100);
+}
+
+/**
+ * @description Clean the aria label parent after speaking
+ */
+function cleanAriaLabelParent(): void {
+  const parentTag = document.getElementById(ARIA_PARENT_ID);
+  if (parentTag) {
+    while (parentTag.firstChild) {
+      parentTag.removeChild(parentTag.firstChild);
+    }
+  }
+}
+
+/**
+ * @description Focus the canvas element
+ */
+function focusCanvas(): void {
+  const canvas = document.getElementById('app')?.firstChild as HTMLElement;
+  canvas?.focus();
+}
+
+/**
+ * @description Create the aria element in the DOM if it doesn't exist
+ * @private For xbox, we may need to create a different element each time we wanna use aria
+ */
+function createAriaElement(): HTMLDivElement | HTMLElement {
+  const aria_container = document.getElementById(ARIA_PARENT_ID);
+
+  if (!aria_container) {
+    const element = document.createElement('div');
+    element.setAttribute('id', ARIA_PARENT_ID);
+    element.setAttribute('aria-live', 'assertive');
+    element.setAttribute('tabindex', '0');
+    document.body.appendChild(element);
+    return element;
+  }
+
+  return aria_container;
+}
+
 /**
  * Speak a string
  *
@@ -82,6 +163,7 @@ function speak(
 
 function speakSeries(
   series: SpeechType,
+  aria: boolean,
   lang: string,
   voice?: string,
   root = true,
@@ -118,7 +200,8 @@ function speakSeries(
 
           while (active && retriesLeft > 0) {
             try {
-              await speak(phrase, utterances, lang, voice);
+              if (aria) addChildrenToAriaDiv({ text: phrase, lang });
+              else await speak(phrase, utterances, lang, voice);
               retriesLeft = 0; // Exit retry loop on success
             } catch (e) {
               if (e instanceof SpeechSynthesisErrorEvent) {
@@ -152,8 +235,12 @@ function speakSeries(
 
           while (active && retriesLeft > 0) {
             try {
-              await speak(text, utterances, objectLang, objectVoice?.name);
-              retriesLeft = 0; // Exit retry loop on success
+              if (text) {
+                if (aria) addChildrenToAriaDiv({ text, lang: objectLang });
+                else
+                  await speak(text, utterances, objectLang, objectVoice?.name);
+                retriesLeft = 0; // Exit retry loop on success
+              }
             } catch (e) {
               if (e instanceof SpeechSynthesisErrorEvent) {
                 if (e.error === 'network') {
@@ -178,18 +265,22 @@ function speakSeries(
           }
         } else if (typeof phrase === 'function') {
           // Handle functions
-          const seriesResult = speakSeries(phrase(), lang, voice, false);
+          const seriesResult = speakSeries(phrase(), aria, lang, voice, false);
           nestedSeriesResults.push(seriesResult);
           await seriesResult.series;
         } else if (Array.isArray(phrase)) {
           // Handle nested arrays
-          const seriesResult = speakSeries(phrase, lang, voice, false);
+          const seriesResult = speakSeries(phrase, aria, lang, voice, false);
           nestedSeriesResults.push(seriesResult);
           await seriesResult.series;
         }
       }
     } finally {
       active = false;
+      // Call completion logic only for the original (root) series
+      if (root && aria) {
+        focusElementForAria();
+      }
     }
   })();
 
@@ -205,7 +296,21 @@ function speakSeries(
       if (!active) {
         return;
       }
+
       if (root) {
+        if (aria) {
+          const element = createAriaElement();
+
+          if (element) {
+            ariaLabelPhrases = [];
+            cleanAriaLabelParent();
+            element.focus();
+            focusCanvas();
+          }
+
+          return;
+        }
+
         synth.cancel(); // Cancel all ongoing speech
       }
       nestedSeriesResults.forEach((nestedSeriesResult) => {
@@ -215,13 +320,15 @@ function speakSeries(
     },
   };
 }
+
 let currentSeries: SeriesResult | undefined;
 export default function (
   toSpeak: SpeechType,
+  aria: boolean,
   lang: string = 'en-US',
   voice?: string,
 ) {
   currentSeries && currentSeries.cancel();
-  currentSeries = speakSeries(toSpeak, lang, voice);
+  currentSeries = speakSeries(toSpeak, aria, lang, voice);
   return currentSeries;
 }

package/src/primitives/index.ts

@@ -28,6 +28,7 @@ export {
 } from './utils/chainFunctions.js';
 export * from './utils/handleNavigation.js';
 export { createSpriteMap, type SpriteDef } from './utils/createSpriteMap.js';
+export { createBlurredImage } from './utils/createBlurredImage.js';
 
 export type * from './types.js';
 export type { KeyHandler } from '@lightningtv/core/focusManager';

package/src/primitives/utils/createBlurredImage.ts

@@ -0,0 +1,366 @@
+import { type Accessor, type Resource, createResource } from 'solid-js';
+
+/**
+ * Represents a valid image source that can be used for blurring
+ */
+type ImageSource = string | URL;
+
+/**
+ * Represents a valid image source or null/undefined
+ */
+type NullableImageSource = ImageSource | null | undefined;
+
+/**
+ * Configuration options for Gaussian blur operation
+ */
+interface BlurOptions {
+  /**
+   * The blur radius in pixels
+   * @default 10
+   */
+  readonly radius?: number;
+  /**
+   * CORS setting for image loading
+   * @default 'anonymous'
+   */
+  readonly crossOrigin?: 'anonymous' | 'use-credentials' | '';
+  /**
+   * The resolution of the output image in pixels
+   * @default 1
+   */
+  readonly resolution?: number;
+}
+
+/**
+ * Default blur options
+ */
+const DEFAULT_BLUR_OPTIONS: Required<
+  Pick<BlurOptions, 'radius' | 'crossOrigin' | 'resolution'>
+> = {
+  radius: 10,
+  crossOrigin: 'anonymous',
+  resolution: 1,
+} as const;
+
+/**
+ * Type for Gaussian kernel array
+ * Represents a normalized array of weights
+ */
+type GaussianKernel = readonly number[];
+
+/**
+ * Type for image dimensions
+ */
+interface ImageDimensions {
+  readonly width: number;
+  readonly height: number;
+}
+
+/**
+ * Type for the resource return value from createBlurredImage
+ */
+type BlurredImageResource<T extends NullableImageSource> = Resource<
+  T extends null | undefined ? null : string
+>;
+
+/**
+ * Ensures a number is within valid range
+ */
+type ValidRadius = number & { __brand: 'ValidRadius' };
+
+/**
+ * Validates that radius is a positive number
+ */
+function isValidRadius(radius: number): radius is ValidRadius {
+  return radius > 0 && Number.isFinite(radius);
+}
+
+/**
+ * Ensures a resolution is a positive number
+ */
+function isValidResolution(resolution: number): boolean {
+  return resolution > 0 && resolution <= 1 && Number.isFinite(resolution);
+}
+
+/**
+ * Applies vertical Gaussian blur to image data
+ * @param input - Input pixel data
+ * @param output - Output pixel data buffer
+ * @param width - Image width
+ * @param height - Image height
+ * @param kernel - Gaussian kernel weights
+ * @param half - Half of kernel size
+ */
+function applyVerticalBlur(
+  input: Readonly<Uint8ClampedArray>,
+  output: Uint8ClampedArray,
+  width: number,
+  height: number,
+  kernel: Readonly<GaussianKernel>,
+  half: number,
+): void {
+  for (let y = 0; y < height; y++) {
+    for (let x = 0; x < width; x++) {
+      let r = 0,
+        g = 0,
+        b = 0,
+        a = 0;
+      let weightSum = 0;
+
+      for (let ky = -half; ky <= half; ky++) {
+        const py = y + ky;
+        if (py >= 0 && py < height) {
+          const pixelIndex = (py * width + x) * 4;
+          const weight = kernel[ky + half]!;
+
+          r += input[pixelIndex]! * weight;
+          g += input[pixelIndex + 1]! * weight;
+          b += input[pixelIndex + 2]! * weight;
+          a += input[pixelIndex + 3]! * weight;
+          weightSum += weight;
+        }
+      }
+
+      const outputIndex = (y * width + x) * 4;
+      output[outputIndex] = r / weightSum;
+      output[outputIndex + 1] = g / weightSum;
+      output[outputIndex + 2] = b / weightSum;
+      output[outputIndex + 3] = a / weightSum;
+    }
+  }
+}
+
+/**
+ * Applies horizontal Gaussian blur to image data
+ * @param input - Input pixel data
+ * @param output - Output pixel data buffer
+ * @param width - Image width
+ * @param height - Image height
+ * @param kernel - Gaussian kernel weights
+ * @param half - Half of kernel size
+ */
+function applyHorizontalBlur(
+  input: Readonly<Uint8ClampedArray>,
+  output: Uint8ClampedArray,
+  width: number,
+  height: number,
+  kernel: Readonly<GaussianKernel>,
+  half: number,
+): void {
+  for (let y = 0; y < height; y++) {
+    for (let x = 0; x < width; x++) {
+      let r = 0,
+        g = 0,
+        b = 0,
+        a = 0;
+      let weightSum = 0;
+
+      for (let kx = -half; kx <= half; kx++) {
+        const px = x + kx;
+        if (px >= 0 && px < width) {
+          const pixelIndex = (y * width + px) * 4;
+          const weight = kernel[kx + half]!;
+
+          r += input[pixelIndex]! * weight;
+          g += input[pixelIndex + 1]! * weight;
+          b += input[pixelIndex + 2]! * weight;
+          a += input[pixelIndex + 3]! * weight;
+          weightSum += weight;
+        }
+      }
+
+      const outputIndex = (y * width + x) * 4;
+      output[outputIndex] = r / weightSum;
+      output[outputIndex + 1] = g / weightSum;
+      output[outputIndex + 2] = b / weightSum;
+      output[outputIndex + 3] = a / weightSum;
+    }
+  }
+}
+
+/**
+ * Generates a normalized Gaussian kernel
+ * @param size - Kernel size (must be odd)
+ * @param sigma - Standard deviation
+ * @returns Normalized Gaussian kernel
+ */
+function generateGaussianKernel(
+  size: number,
+  sigma: number,
+): Readonly<GaussianKernel> {
+  const kernel: number[] = [];
+  const half = Math.floor(size / 2);
+  let sum = 0;
+
+  for (let i = -half; i <= half; i++) {
+    const value = Math.exp(-(i * i) / (2 * sigma * sigma));
+    kernel.push(value);
+    sum += value;
+  }
+
+  return Object.freeze(kernel.map((value) => value / sum));
+}
+
+/**
+ * Applies Gaussian blur convolution to image data
+ * @param imageData - Source image data
+ * @param dimensions - Image dimensions
+ * @param radius - Blur radius
+ * @returns Blurred image data
+ */
+function gaussianBlurConvolution(
+  imageData: Readonly<ImageData>,
+  dimensions: Readonly<ImageDimensions>,
+  radius: ValidRadius,
+): ImageData {
+  const { data } = imageData;
+  const { width, height } = dimensions;
+  const output = new Uint8ClampedArray(data.length);
+
+  const kernelSize = Math.ceil(radius * 2) * 2 + 1;
+  const kernel = generateGaussianKernel(kernelSize, radius);
+  const half = Math.floor(kernelSize / 2);
+
+  applyHorizontalBlur(data, output, width, height, kernel, half);
+
+  const tempData = new Uint8ClampedArray(output);
+  applyVerticalBlur(tempData, output, width, height, kernel, half);
+
+  return new ImageData(output, width, height);
+}
+
+/**
+ * Applies Gaussian blur to an image URL
+ * @param imageUrl - Image source (string or URL)
+ * @param options - Blur configuration options
+ * @returns Promise resolving to data URL of blurred image
+ * @throws {Error} If image fails to load or blur operation fails
+ */
+export async function applyGaussianBlur<TSource extends ImageSource>(
+  imageUrl: TSource,
+  options?: Readonly<BlurOptions>,
+): Promise<string> {
+  const opts = { ...DEFAULT_BLUR_OPTIONS, ...options };
+  const radius = opts.radius;
+  const resolution = opts.resolution;
+
+  if (!isValidRadius(radius)) {
+    throw new Error(
+      `Invalid blur radius: ${radius}. Must be a positive number.`,
+    );
+  }
+
+  if (!isValidResolution(resolution)) {
+    throw new Error(
+      `Invalid resolution: ${resolution}. Must be a number between 0 and 1.`,
+    );
+  }
+
+  return new Promise<string>((resolve, reject) => {
+    const img = new Image();
+    img.crossOrigin = opts.crossOrigin;
+
+    img.onload = (): void => {
+      try {
+        const canvas = document.createElement('canvas');
+        const ctx = canvas.getContext('2d', {
+          willReadFrequently: true,
+        });
+
+        if (ctx === null) {
+          reject(new Error('Failed to get canvas context'));
+          return;
+        }
+
+        const scaledWidth = Math.max(1, Math.round(img.width * resolution));
+        const scaledHeight = Math.max(1, Math.round(img.height * resolution));
+
+        const dimensions: ImageDimensions = {
+          width: scaledWidth,
+          height: scaledHeight,
+        };
+
+        canvas.width = dimensions.width;
+        canvas.height = dimensions.height;
+
+        const hasFilterSupport = ctx.filter !== undefined;
+        if (hasFilterSupport) {
+          ctx.filter = `blur(${radius}px)`;
+          ctx.drawImage(img, 0, 0, scaledWidth, scaledHeight);
+          ctx.filter = 'none';
+        } else {
+          ctx.drawImage(img, 0, 0, scaledWidth, scaledHeight);
+          const imageData = ctx.getImageData(
+            0,
+            0,
+            dimensions.width,
+            dimensions.height,
+          );
+          const blurredData = gaussianBlurConvolution(
+            imageData,
+            dimensions,
+            radius,
+          );
+          ctx.putImageData(blurredData, 0, 0);
+        }
+
+        const dataUrl = canvas.toDataURL();
+
+        if (dataUrl) {
+          resolve(dataUrl);
+        } else {
+          reject(new Error('Failed to create image data URL'));
+        }
+      } catch (error) {
+        reject(
+          error instanceof Error
+            ? error
+            : new Error('Unknown error during blur operation'),
+        );
+      }
+    };
+
+    img.onerror = (): void => {
+      reject(new Error('Failed to load image'));
+    };
+
+    const srcString: string =
+      typeof imageUrl === 'string' ? imageUrl : imageUrl.toString();
+    img.src = srcString;
+  });
+}
+
+/**
+ * Hook to create a blurred image resource
+ * @param imageUrl - Accessor function returning image source or null/undefined
+ * @param options - Blur configuration options
+ * @returns Resource containing blurred image data URL or null
+ * @template TSource - Type of image source (string, URL, or null/undefined)
+ *
+ * @example
+ * ```ts
+ * const imageUrl = () => 'https://example.com/image.jpg';
+ * const blurred = createBlurredImage(imageUrl, { radius: 15 });
+ * ```
+ */
+export function createBlurredImage<TSource extends NullableImageSource>(
+  imageUrl: Accessor<TSource>,
+  options?: Readonly<BlurOptions>,
+): BlurredImageResource<TSource> {
+  const imageUrlString: Accessor<string | null | undefined> = () => {
+    const url = imageUrl();
+    if (url === null || url === undefined) {
+      return url;
+    }
+    return typeof url === 'string' ? url : url.toString();
+  };
+
+  const [blurredImage] = createResource(
+    imageUrlString,
+    async (url: string): Promise<string> => {
+      return await applyGaussianBlur(url, options);
+    },
+  );
+
+  return blurredImage as BlurredImageResource<TSource>;
+}

package/src/primitives/utils/handleNavigation.ts

@@ -10,7 +10,7 @@ declare module '@lightningtv/core' {
 }
 
 function idxInArray(idx: number, arr: readonly any[]): boolean {
-  return idx >= 0 && idx < arr.length;
+  return idx === 0 || (idx >= 0 && idx < arr.length);
 }
 
 function findFirstFocusableChildIdx(
@@ -77,20 +77,15 @@ export function onGridFocus(
 export const navigableForwardFocus: lng.ForwardFocusHandler = function () {
   const navigable = this as lngp.NavigableElement;
 
-  // Undo for now - We should only do this when setFocus is called rather than on forwardFocus
-  // needs some more research
-  // if (!lng.isFocused(this)) {
-  //   // if a child already has focus, assume that should be selected
-  //   for (let [i, child] of this.children.entries()) {
-  //     if (lng.isFocused(child)) {
-  //       this.selected = i;
-  //       break;
-  //     }
-  //   }
-  // }
-
   let selected = navigable.selected;
-  selected = idxInArray(selected, this.children) ? selected : 0;
+
+  if (selected !== 0) {
+    selected = lng.clamp(selected, 0, this.children.length - 1);
+    while (!idxInArray(selected, this.children)) {
+      selected--;
+    }
+  }
+
   selected = findFirstFocusableChildIdx(navigable, selected);
   // update selected as firstfocusable maybe different if first element has skipFocus
   navigable.selected = selected;