@lightningtv/solid 3.0.0-9 → 3.0.1

package/src/primitives/VirtualGrid.tsx

@@ -0,0 +1,220 @@
+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 itemCount = () => items().length;
+  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);
+      if (lng.hasFocus(viewRef)) {
+        // force focus as scrollToIndex is manually called
+        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);
+          if (lng.hasFocus(viewRef)) {
+            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, (gridItems, _prevGridItems, prevSize) => {
+      if (!viewRef) return;
+
+      if (cachedSelected !== undefined) {
+        // This occurs when VG is reloaded and user wants to select a paginated item
+        updateSelected([cachedSelected]);
+        return gridItems.length;
+      }
+
+      if (gridItems.length === 0) {
+        setCursor(0);
+        cachedSelected = undefined;
+        setSlice([]);
+      } else if (cursor() >= itemCount()) {
+        updateSelected([Math.max(0, itemCount() - 1)]);
+      } else if (prevSize === 0) {
+        updateSelected([0]);
+      } else {
+        setSlice(items().slice(start(), end()));
+      }
+
+      return gridItems.length;
+    }, { 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

@@ -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();
   },
@@ -153,7 +160,7 @@ export const Announcer: Announcer = {
         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

@@ -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/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,8 @@ export * from './createInfiniteItems.js';
 export * from './useMouse.js';
 export * from './portal.jsx';
 export * from './Lazy.jsx';
+export * from './LazyImport.js';
+export * from './Image.jsx';
 export * from './Visible.jsx';
 export * from './router.js';
 export * from './Column.jsx';
@@ -11,17 +13,24 @@ export * from './Row.jsx';
 export * from './Grid.jsx';
 export * from './FPSCounter.jsx';
 export * from './FadeInOut.jsx';
-export * from './createFocusStack.jsx';
+export * from './Preserve.jsx';
+export * from './Suspense.jsx';
 export * from './Marquee.jsx';
+export * from './createFocusStack.jsx';
 export * from './useHold.js';
-export { withScrolling } from './utils/withScrolling.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,5 @@
-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,
@@ -54,6 +54,7 @@ export interface NavigableProps extends NodeProps {
 // @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[]>([]);