@lightningtv/solid 3.0.0-8 → 3.0.0

package/src/primitives/Visible.tsx

@@ -13,7 +13,6 @@ import { ElementNode } from '@lightningtv/solid';
 export function Visible<T>(props: {
   when: T | undefined | null | false;
   keyed?: boolean;
-  fallback?: JSX.Element;
   children: JSX.Element;
 }): JSX.Element {
   let child: ChildrenReturn | undefined;
@@ -55,6 +54,6 @@ export function Visible<T>(props: {
       }
     });
 
-    return c ? child : props.fallback;
+    return c || child ? child : null;
   }) as unknown as JSX.Element;
 };

package/src/primitives/announcer/announcer.ts

@@ -109,18 +109,24 @@ function onFocusChangeCore(focusPath: ElementNode[] = []) {
   }
 }
 
-function textToSpeech(toSpeak: SpeechType, lang: string, voice?: string) {
+function textToSpeech(
+  toSpeak: SpeechType,
+  aria: boolean,
+  lang: string,
+  voice?: string,
+) {
   if (voiceOutDisabled) {
     return;
   }
 
-  return (currentlySpeaking = SpeechEngine(toSpeak, lang, voice));
+  return (currentlySpeaking = SpeechEngine(toSpeak, aria, lang, voice));
 }
 
 export interface Announcer {
   debug: boolean;
   enabled: boolean;
   lang: string;
+  aria: boolean;
   voice?: string;
   cancel: VoidFunction;
   clearPrevFocus: (depth?: number) => void;
@@ -140,6 +146,7 @@ export const Announcer: Announcer = {
   debug: false,
   enabled: true,
   lang: 'en-US',
+  aria: false,
   cancel: function () {
     currentlySpeaking && currentlySpeaking.cancel();
   },
@@ -149,12 +156,11 @@ export const Announcer: Announcer = {
   },
   speak: function (text, { append = false, notification = false } = {}) {
     if (Announcer.onFocusChange && Announcer.enabled) {
-      Announcer.onFocusChange.flush();
       if (append && currentlySpeaking && currentlySpeaking.active) {
         currentlySpeaking.append(text);
       } else {
         Announcer.cancel();
-        textToSpeech(text, Announcer.lang, Announcer.voice);
+        textToSpeech(text, Announcer.aria, Announcer.lang, Announcer.voice);
       }
 
       if (notification) {

package/src/primitives/announcer/speech.ts

@@ -1,4 +1,8 @@
-type CoreSpeechType = string | (() => SpeechType) | SpeechType[];
+type CoreSpeechType =
+  | string
+  | (() => SpeechType)
+  | SpeechType[]
+  | SpeechSynthesisUtterance;
 export type SpeechType = CoreSpeechType | Promise<CoreSpeechType>;
 
 export interface SeriesResult {
@@ -8,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 = [];
@@ -36,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
  *
@@ -78,6 +163,7 @@ function speak(
 
 function speakSeries(
   series: SpeechType,
+  aria: boolean,
   lang: string,
   voice?: string,
   root = true,
@@ -87,11 +173,6 @@ function speakSeries(
     Array.isArray(series) ? series : [series],
   );
   const nestedSeriesResults: SeriesResult[] = [];
-  /*
-    We hold this array of SpeechSynthesisUtterances in order to prevent them from being
-    garbage collected prematurely on STB hardware which can cause the 'onend' events of
-    utterances to not fire consistently.
-  */
   const utterances: SpeechSynthesisUtterance[] = [];
   let active: boolean = true;
 
@@ -100,24 +181,66 @@ function speakSeries(
       while (active && remainingPhrases.length) {
         const phrase = await Promise.resolve(remainingPhrases.shift());
         if (!active) {
-          // Exit
-          // Need to check this after the await in case it was cancelled in between
-          break;
-        } else if (typeof phrase === 'string' && phrase.includes('PAUSE-')) {
-          // Pause it
-          let pause = Number(phrase.split('PAUSE-')[1]) * 1000;
-          if (isNaN(pause)) {
-            pause = 0;
+          break; // Exit if canceled
+        }
+
+        if (typeof phrase === 'string' && phrase.includes('PAUSE-')) {
+          // Handle pauses
+          const pause = Number(phrase.split('PAUSE-')[1]) * 1000;
+          if (!isNaN(pause)) {
+            await delay(pause);
+          }
+        } else if (typeof phrase === 'string') {
+          if (!phrase) {
+            continue; // Skip empty strings
+          }
+          // Handle regular strings with retry logic
+          const totalRetries = 3;
+          let retriesLeft = totalRetries;
+
+          while (active && retriesLeft > 0) {
+            try {
+              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) {
+                if (e.error === 'network') {
+                  retriesLeft--;
+                  console.warn(
+                    `Speech synthesis network error. Retries left: ${retriesLeft}`,
+                  );
+                  await delay(500 * (totalRetries - retriesLeft));
+                } else if (
+                  e.error === 'canceled' ||
+                  e.error === 'interrupted'
+                ) {
+                  // Cancel or interrupt error (ignore)
+                  retriesLeft = 0;
+                } else {
+                  throw new Error(`SpeechSynthesisErrorEvent: ${e.error}`);
+                }
+              } else {
+                throw e;
+              }
+            }
           }
-          await delay(pause);
-        } else if (typeof phrase === 'string' && phrase.length) {
-          // Speak it
+        } else if (phrase instanceof SpeechSynthesisUtterance) {
+          // Handle SpeechSynthesisUtterance objects with retry logic
           const totalRetries = 3;
           let retriesLeft = totalRetries;
+          const text = phrase.text;
+          const objectLang = phrase?.lang;
+          const objectVoice = phrase?.voice;
+
           while (active && retriesLeft > 0) {
             try {
-              await speak(phrase, utterances, lang, voice);
-              retriesLeft = 0;
+              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') {
@@ -141,20 +264,26 @@ function speakSeries(
             }
           }
         } else if (typeof phrase === 'function') {
-          const seriesResult = speakSeries(phrase(), lang, voice, false);
+          // Handle functions
+          const seriesResult = speakSeries(phrase(), aria, lang, voice, false);
           nestedSeriesResults.push(seriesResult);
           await seriesResult.series;
         } else if (Array.isArray(phrase)) {
-          // Speak it (recursively)
-          const seriesResult = speakSeries(phrase, lang, voice, false);
+          // Handle nested arrays
+          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();
+      }
     }
   })();
+
   return {
     series: seriesChain,
     get active() {
@@ -167,11 +296,25 @@ function speakSeries(
       if (!active) {
         return;
       }
+
       if (root) {
-        synth.cancel();
+        if (aria) {
+          const element = createAriaElement();
+
+          if (element) {
+            ariaLabelPhrases = [];
+            cleanAriaLabelParent();
+            element.focus();
+            focusCanvas();
+          }
+
+          return;
+        }
+
+        synth.cancel(); // Cancel all ongoing speech
       }
-      nestedSeriesResults.forEach((nestedSeriesResults) => {
-        nestedSeriesResults.cancel();
+      nestedSeriesResults.forEach((nestedSeriesResult) => {
+        nestedSeriesResult.cancel();
       });
       active = false;
     },
@@ -181,10 +324,11 @@ 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/createFocusStack.tsx

@@ -17,7 +17,7 @@
  * - `restoreFocus()`: Restores focus to the last stored element and removes it from the stack. Returns `true` if successful, `false` otherwise.
  * - `clearFocusStack()`: Empties the focus stack.
  */
-import { createSignal, createContext, useContext, JSX } from 'solid-js';
+import * as s from 'solid-js';
 import { type ElementNode } from '@lightningtv/solid';
 
 interface FocusStackContextType {
@@ -26,13 +26,16 @@ interface FocusStackContextType {
   clearFocusStack: () => void;
 }
 
-const FocusStackContext = createContext<FocusStackContextType | undefined>(undefined);
+const FocusStackContext = s.createContext<FocusStackContextType | undefined>(undefined);
 
-export function FocusStackProvider(props: { children: JSX.Element}) {
-  const [_focusStack, setFocusStack] = createSignal<ElementNode[]>([]);
+export function FocusStackProvider(props: { children: s.JSX.Element}) {
+  const [_focusStack, setFocusStack] = s.createSignal<ElementNode[]>([]);
 
   function storeFocus(element: ElementNode, prevElement?: ElementNode) {
-    setFocusStack((stack) => [...stack, prevElement || element]);
+    const elm = prevElement || element;
+    if (elm) {
+      setFocusStack(stack => [...stack, elm]);
+    }
   }
 
   function restoreFocus(): boolean {
@@ -59,10 +62,18 @@ export function FocusStackProvider(props: { children: JSX.Element}) {
   );
 }
 
-export function useFocusStack() {
-  const context = useContext(FocusStackContext);
+export function useFocusStack(autoClear = true) {
+  const context = s.useContext(FocusStackContext);
   if (!context) {
     throw new Error("useFocusStack must be used within a FocusStackProvider");
   }
+
+  if (autoClear) {
+    s.onCleanup(() => {
+      // delay clearing the focus stack so restoreFocus can happen first.
+      setTimeout(() => context.clearFocusStack(), 5);
+    });
+  }
+
   return context;
 }

package/src/primitives/createTag.tsx

@@ -0,0 +1,33 @@
+import * as s from 'solid-js'
+import * as lng from '@lightningtv/solid'
+
+interface Destroyable {
+  (props: lng.NodeProps): s.JSX.Element;
+  destroy: () => void;
+}
+
+export function createTag(children: s.JSX.Element): Destroyable {
+  const [texture, setTexture] = s.createSignal<lng.Texture | null | undefined>(null);
+  const Tag = <view
+    x={lng.rootNode.w - 1}
+    y={lng.rootNode.h - 1}
+    display='flex'
+    onLayout={(n) => {
+      if (n.preFlexwidth && n.width !== n.preFlexwidth) {
+        n.rtt = true;
+        setTimeout(() => setTexture(n.texture), 1);
+      }
+    }}
+    parent={lng.rootNode} children={children}
+    textureOptions={{
+    preventCleanup: true
+  }} /> as any as lng.ElementNode
+  Tag.render(false);
+
+  const TagComponent = (props: lng.NodeProps) => {
+    return <view color={0xffffffff} autosize {...props} texture={texture()} />;
+  };
+  TagComponent.destroy = () => Tag.destroy();
+
+  return TagComponent;
+}

package/src/primitives/index.ts

@@ -4,6 +4,7 @@ export * from './createInfiniteItems.js';
 export * from './useMouse.js';
 export * from './portal.jsx';
 export * from './Lazy.jsx';
+export * from './Image.jsx';
 export * from './Visible.jsx';
 export * from './router.js';
 export * from './Column.jsx';
@@ -11,16 +12,24 @@ export * from './Row.jsx';
 export * from './Grid.jsx';
 export * from './FPSCounter.jsx';
 export * from './FadeInOut.jsx';
+export * from './Preserve.jsx';
+export * from './Suspense.jsx';
+export * from './Marquee.jsx';
 export * from './createFocusStack.jsx';
-export * from './marquee.jsx';
-export { withScrolling } from './utils/withScrolling.js';
+export * from './useHold.js';
+export * from './KeepAlive.jsx';
+export * from './VirtualGrid.jsx';
+export * from './Virtual.jsx';
+export * from './utils/withScrolling.js';
+export * from './createTag.jsx';
 export {
   type AnyFunction,
   chainFunctions,
   chainRefs,
 } from './utils/chainFunctions.js';
-export { handleNavigation, onGridFocus } from './utils/handleNavigation.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';
+export type { KeyHandler } from '../core/focusManager.js';

package/src/primitives/types.ts

@@ -1,5 +1,6 @@
-import type { ElementNode, NodeProps, NodeStyles } from '@lightningtv/solid';
-import type { KeyHandler } from '@lightningtv/core/focusManager';
+import type { ElementNode, NodeProps, NodeStyles } from '../index.js';
+import type { KeyHandler } from '../core/focusManager.js';
+
 export type OnSelectedChanged = (
   this: NavigableElement,
   selectedIndex: number,
@@ -7,6 +8,7 @@ export type OnSelectedChanged = (
   active: ElementNode,
   lastSelectedIndex?: number,
 ) => void;
+
 export interface NavigableProps extends NodeProps {
   /** function to be called when the selected of the component changes */
   onSelectedChanged?: OnSelectedChanged;
@@ -40,11 +42,19 @@ export interface NavigableProps extends NodeProps {
    * Wrap the row so active goes back to the beginning of the row
    */
   wrap?: boolean;
+
+  /** function to be called when scrolled */
+  onScrolled?: (
+    elm: NavigableElement,
+    offset: number,
+    isInitial: boolean,
+  ) => void;
 }
 
 // @ts-expect-error animationSettings is not identical - weird
 export interface NavigableElement extends ElementNode, NavigableProps {
   selected: number;
+  scrollToIndex: (this: NavigableElement, index: number) => void;
 }
 
 export interface NavigableStyleProperties {

package/src/primitives/useFocusManager.ts

@@ -6,13 +6,13 @@ import {
   getOwner,
   runWithOwner,
 } from 'solid-js';
-import { Config } from '@lightningtv/core';
-import type { ElementNode } from '@lightningtv/core';
+import { Config } from '../core/index.js';
+import type { ElementNode } from '../core/index.js';
 import {
   useFocusManager as useFocusManagerCore,
   type KeyMap,
   type KeyHoldOptions,
-} from '@lightningtv/core/focusManager';
+} from '../core/focusManager.js';
 import { activeElement, setActiveElement } from '../activeElement.js';
 
 const [focusPath, setFocusPath] = createSignal<ElementNode[]>([]);

package/src/primitives/useHold.ts

@@ -0,0 +1,69 @@
+import { createMemo } from 'solid-js';
+
+export type UseHoldProps = {
+  onHold: () => void;
+  onEnter: () => void;
+  onRelease?: () => void;
+  holdThreshold?: number;
+  performOnEnterImmediately?: boolean;
+};
+
+/**
+ * @example
+ * const [holdRight, releaseRight] = useHold({
+ *   onHold: handleHoldRight,
+ *   onEnter: handleOnRight,
+ *   onRelease: handleReleaseHold,
+ *   holdThreshold: 200,
+ *   performOnEnterImmediately: true
+ * });
+ *
+ * <View
+ *   onRight={holdRight}
+ *   onRightRelease={releaseRight}
+ * />
+ *
+ * @param {UseHoldProps} props - The properties for configuring the hold behavior.
+ * @returns {[() => boolean, () => boolean]} A tuple containing `startHold` and `releaseHold` functions.
+ */
+
+export function useHold(props: UseHoldProps) {
+  const holdThreshold = createMemo(() => props.holdThreshold ?? 500);
+  const performOnEnterImmediately = createMemo(
+    () => props.performOnEnterImmediately ?? false,
+  );
+
+  let holdTimeout = -1;
+  let wasHeld = false;
+
+  const startHold = () => {
+    if (holdTimeout === -1) {
+      if (performOnEnterImmediately()) {
+        props.onEnter();
+      }
+      holdTimeout = setTimeout(() => {
+        wasHeld = true;
+        props.onHold();
+      }, holdThreshold()) as unknown as number;
+    }
+    return true;
+  };
+
+  const releaseHold = () => {
+    if (holdTimeout !== -1) {
+      clearTimeout(holdTimeout);
+      holdTimeout = -1;
+      if (!wasHeld) {
+        if (!performOnEnterImmediately()) props.onEnter();
+        return;
+      }
+      props.onRelease?.();
+      wasHeld = false;
+    }
+    return true;
+  };
+
+  return [startHold, releaseHold];
+}
+
+export default useHold;