@lightningtv/solid 3.0.0-2 → 3.0.0-20

package/src/primitives/VirtualGrid.tsx

@@ -0,0 +1,199 @@
+import * as s from 'solid-js';
+import * as lng from '@lightningtv/solid';
+import * as lngp from '@lightningtv/solid/primitives';
+import { List } from '@solid-primitives/list';
+import * as utils from '../utils.js';
+
+const columnScroll = lngp.withScrolling(false);
+
+const rowStyles: lng.NodeStyles = {
+  display: 'flex',
+  flexWrap: 'wrap',
+  transition: {
+    y: true,
+  },
+};
+
+export type VirtualGridProps<T> = lng.NewOmit<lngp.RowProps, 'children'> & {
+  each: readonly T[] | undefined | null | false;
+  columns: number; // items per row
+  rows?: number; // number of visible rows (default: 1)
+  buffer?: number;
+  onEndReached?: () => void;
+  onEndReachedThreshold?: number;
+  children: (item: s.Accessor<T>, index: s.Accessor<number>) => s.JSX.Element;
+};
+
+export function VirtualGrid<T>(props: VirtualGridProps<T>): s.JSX.Element {
+  const bufferSize = () => props.buffer ?? 2;
+  const [ cursor, setCursor ] = s.createSignal(props.selected ?? 0);
+  const items = s.createMemo(() => props.each || []);
+  const itemsPerRow = () => props.columns;
+  const numberOfRows = () => props.rows ?? 1;
+  const totalVisibleItems = () => itemsPerRow() * numberOfRows();
+
+  const start = s.createMemo(() => {
+    const perRow = itemsPerRow();
+    const newRowIndex = Math.floor(cursor() / perRow);
+    const rawStart = newRowIndex * perRow - bufferSize() * perRow;
+    return Math.max(0, rawStart);
+  });
+
+  const end = s.createMemo(() => {
+    const perRow = itemsPerRow();
+    const newRowIndex = Math.floor(cursor() / perRow);
+    const rawEnd = (newRowIndex + bufferSize()) * perRow + totalVisibleItems();
+    return Math.min(items().length, rawEnd);
+  });
+
+  const [slice, setSlice] = s.createSignal(items().slice(start(), end()));
+
+  let viewRef!: lngp.NavigableElement;
+
+  function onVerticalNav(dir: -1 | 1): lngp.KeyHandler {
+    return function () {
+      const perRow = itemsPerRow();
+      const currentRowIndex = Math.floor(cursor() / perRow);
+      const maxRows = Math.floor(items().length / perRow);
+
+      if (
+        currentRowIndex === 0 && dir === -1
+        || currentRowIndex === maxRows && dir === 1
+      ) return;
+
+      const selected = this.selected || 0;
+      const offset = dir * perRow;
+      const newIndex = utils.clamp(selected + offset, 0, items().length - 1);
+      const lastIdx = selected;
+      this.selected = newIndex;
+      const active = this.children[this.selected];
+
+      if (active instanceof lng.ElementNode) {
+        active.setFocus();
+        chainedOnSelectedChanged.call(
+          this as lngp.NavigableElement,
+          this.selected,
+          this as lngp.NavigableElement,
+          active,
+          lastIdx
+        );
+        return true;
+      }
+    };
+  }
+
+  const onUp = onVerticalNav(-1);
+  const onDown = onVerticalNav(1);
+
+  const onSelectedChanged: lngp.OnSelectedChanged = function (_idx, elm, active, _lastIdx,) {
+    let idx = _idx;
+    let lastIdx = _lastIdx;
+    const perRow = itemsPerRow();
+    const newRowIndex = Math.floor(idx / perRow);
+    const prevRowIndex = Math.floor((lastIdx || 0) / perRow);
+    const prevStart = start();
+
+    setCursor(prevStart + idx);
+    if (newRowIndex === prevRowIndex) return;
+
+    setSlice(items().slice(start(), end()));
+
+    // this.selected is relative to the slice
+    // and it doesn't get corrected automatically after children change
+    const idxCorrection = prevStart - start();
+    if (lastIdx) lastIdx += idxCorrection;
+    idx += idxCorrection;
+    this.selected += idxCorrection;
+
+    if (props.onEndReachedThreshold !== undefined && cursor() >= items().length - props.onEndReachedThreshold) {
+      props.onEndReached?.();
+    }
+
+    queueMicrotask(() => {
+      const prevRowY = this.y + active.y;
+      this.updateLayout();
+      this.lng.y = prevRowY - active.y;
+      columnScroll(idx, elm, active, lastIdx);
+    });
+  };
+
+  const chainedOnSelectedChanged = lngp.chainFunctions(props.onSelectedChanged, onSelectedChanged)!;
+
+  let cachedSelected: number | undefined;
+  const updateSelected = ([selected, _items]: [number?, any?]) => {
+    if (!viewRef || selected == null) return;
+
+    if (cachedSelected !== undefined) {
+      selected = cachedSelected;
+      cachedSelected = undefined;
+    }
+
+    if (selected >= items().length && props.onEndReached) {
+      props.onEndReached?.();
+      cachedSelected = selected;
+      return;
+    }
+
+    const item = items()[selected];
+    let active = viewRef.children.find(x => x.item === item);
+    const lastSelected = viewRef.selected;
+
+    if (active instanceof lng.ElementNode) {
+      viewRef.selected = viewRef.children.indexOf(active);
+      active.setFocus();
+      chainedOnSelectedChanged.call(viewRef, viewRef.selected, viewRef, active, lastSelected);
+    } else {
+      setCursor(selected);
+      setSlice(items().slice(start(), end()));
+
+      queueMicrotask(() => {
+        viewRef.updateLayout();
+        active = viewRef.children.find(x => x.item === item);
+        if (active instanceof lng.ElementNode) {
+          viewRef.selected = viewRef.children.indexOf(active);
+          active.setFocus();
+          chainedOnSelectedChanged.call(viewRef, viewRef.selected, viewRef, active, lastSelected);
+        }
+      });
+    }
+  };
+
+  const scrollToIndex = (index: number) => {
+    s.untrack(() => updateSelected([index]));
+  }
+
+  s.createEffect(s.on([() => props.selected, items], updateSelected));
+
+  s.createEffect(
+    s.on(items, () => {
+      if (!viewRef) return;
+      if (cachedSelected !== undefined) {
+        updateSelected([cachedSelected]);
+        return;
+      }
+      setSlice(items().slice(start(), end()));
+    }, { defer: true })
+  );
+
+
+  return (
+    <view
+      {...props}
+      scroll={props.scroll || 'always'}
+      ref={lngp.chainRefs(el => { viewRef = el as lngp.NavigableElement; }, props.ref)}
+      selected={props.selected || 0}
+      cursor={cursor()}
+      onLeft={/* @once */ lngp.chainFunctions(props.onLeft, lngp.navigableHandleNavigation)}
+      onRight={/* @once */ lngp.chainFunctions(props.onRight, lngp.navigableHandleNavigation)}
+      onUp={/* @once */ lngp.chainFunctions(props.onUp, onUp)}
+      onDown={/* @once */ lngp.chainFunctions(props.onDown, onDown)}
+      forwardFocus={/* @once */ lngp.navigableForwardFocus}
+      onCreate={/* @once */ props.selected ? lngp.chainFunctions(props.onCreate, columnScroll) : props.onCreate}
+      scrollToIndex={/* @once */ scrollToIndex}
+      onSelectedChanged={/* @once */ chainedOnSelectedChanged}
+      style={/* @once */ lng.combineStyles(props.style, rowStyles)}
+    >
+      <List each={slice()}>{props.children}</List>
+    </view>
+  );
+}

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

@@ -73,8 +73,9 @@ function onFocusChangeCore(focusPath: ElementNode[] = []) {
   prevFocusPath = focusPath.slice(0);
 
   const toAnnounceText: SpeechType[] = [];
-  const toAnnounce = focusDiff.reduce(
-    (acc: [string, string, SpeechType][], elm) => {
+  const toAnnounce = focusDiff
+    .reverse()
+    .reduce((acc: [string, string, SpeechType][], elm) => {
       if (elm.announce) {
         acc.push([getElmName(elm), 'Announce', elm.announce]);
         toAnnounceText.push(elm.announce);
@@ -85,9 +86,7 @@ function onFocusChangeCore(focusPath: ElementNode[] = []) {
         acc.push([getElmName(elm), 'No Announce', '']);
       }
       return acc;
-    },
-    [],
-  );
+    }, []);
 
   focusDiff.reverse().reduce((acc, elm) => {
     if (elm.announceContext) {
@@ -110,18 +109,25 @@ function onFocusChangeCore(focusPath: ElementNode[] = []) {
   }
 }
 
-function textToSpeech(toSpeak: SpeechType, lang: string) {
+function textToSpeech(
+  toSpeak: SpeechType,
+  aria: boolean,
+  lang: string,
+  voice?: string,
+) {
   if (voiceOutDisabled) {
     return;
   }
 
-  return (currentlySpeaking = SpeechEngine(toSpeak, lang));
+  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;
   speak: (
@@ -140,6 +146,7 @@ export const Announcer: Announcer = {
   debug: false,
   enabled: true,
   lang: 'en-US',
+  aria: false,
   cancel: function () {
     currentlySpeaking && currentlySpeaking.cancel();
   },
@@ -147,14 +154,13 @@ export const Announcer: Announcer = {
     prevFocusPath = prevFocusPath.slice(0, depth);
     resetFocusPathTimer();
   },
-  speak: function (text, { append = false, notification = false} = {}) {
+  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);
+        textToSpeech(text, Announcer.aria, Announcer.lang, Announcer.voice);
       }
 
       if (notification) {

package/src/primitives/announcer/index.ts

@@ -2,9 +2,19 @@ import { createEffect, on } from 'solid-js';
 import { Announcer } from './announcer.js';
 import { focusPath } from '../useFocusManager.js';
 
-export const useAnnouncer = () => {
-  Announcer.setupTimers();
+let doOnce = false;
+export const useAnnouncer = (options?: {
+  focusDebounce?: number;
+  focusChangeTimeout?: number;
+}) => {
+  if (doOnce) {
+    return Announcer;
+  }
+  doOnce = true;
+  Announcer.setupTimers(options);
   createEffect(on(focusPath, Announcer.onFocusChange!, { defer: true }));
 
   return Announcer;
 };
+
+export { Announcer };

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
  *
@@ -48,11 +133,23 @@ function speak(
   phrase: string,
   utterances: SpeechSynthesisUtterance[],
   lang = 'en-US',
+  voiceName?: string,
 ) {
   const synth = window.speechSynthesis;
+
   return new Promise<void>((resolve, reject) => {
+    let selectedVoice;
+    if (voiceName) {
+      const availableVoices = synth.getVoices();
+      selectedVoice =
+        availableVoices.find((v) => v.name === voiceName) || availableVoices[0];
+    }
+
     const utterance = new SpeechSynthesisUtterance(phrase);
     utterance.lang = lang;
+    if (selectedVoice) {
+      utterance.voice = selectedVoice;
+    }
     utterance.onend = () => {
       resolve();
     };
@@ -66,7 +163,9 @@ function speak(
 
 function speakSeries(
   series: SpeechType,
+  aria: boolean,
   lang: string,
+  voice?: string,
   root = true,
 ): SeriesResult {
   const synth = window.speechSynthesis;
@@ -74,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;
 
@@ -87,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
           }
-          await delay(pause);
-        } else if (typeof phrase === 'string' && phrase.length) {
-          // Speak it
+          // 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;
+              }
+            }
+          }
+        } 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);
-              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') {
@@ -128,20 +264,26 @@ function speakSeries(
             }
           }
         } else if (typeof phrase === 'function') {
-          const seriesResult = speakSeries(phrase(), lang, 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, 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() {
@@ -154,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;
     },
@@ -166,8 +322,13 @@ function speakSeries(
 }
 
 let currentSeries: SeriesResult | undefined;
-export default function (toSpeak: SpeechType, lang: string = 'en-US') {
+export default function (
+  toSpeak: SpeechType,
+  aria: boolean,
+  lang: string = 'en-US',
+  voice?: string,
+) {
   currentSeries && currentSeries.cancel();
-  currentSeries = speakSeries(toSpeak, lang);
+  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,31 @@
+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
+    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;
+}