@lightningtv/solid 2.4.4 → 2.4.6

package/src/primitives/types.ts

@@ -0,0 +1,79 @@
+import type { ElementNode, NodeProps, NodeStyles } from '@lightningtv/solid';
+import type { KeyHandler } from '@lightningtv/core/focusManager';
+export type OnSelectedChanged = (
+  this: NavigableElement,
+  selectedIndex: number,
+  elm: NavigableElement,
+  active: ElementNode,
+  lastSelectedIndex?: number,
+) => void;
+export interface NavigableProps extends NodeProps {
+  /** function to be called when the selected of the component changes */
+  onSelectedChanged?: OnSelectedChanged;
+
+  /** Determines when to scroll(shift items along the axis):
+   * auto - scroll items immediately
+   * edge - scroll items when focus reaches the last item on screen
+   * always - focus remains at index 0, scroll until the final item is at index 0
+   * center - selected element will be centered to the screen
+   * none - disable scrolling behavior, focus shifts as expected
+   * in both `auto` and `edge` items will only scroll until the last item is on screen */
+  scroll?: 'always' | 'none' | 'edge' | 'auto' | 'center';
+
+  /** When auto scrolling, item index at which scrolling begins */
+  scrollIndex?: number;
+
+  /** The initial index */
+  selected?: number;
+
+  /**
+   * Adjust the x position of the row. Initial value is Y
+   */
+  offset?: number;
+
+  /**
+   * Plinko - sets the selected item of the next row to match the previous row
+   */
+  plinko?: boolean;
+
+  /**
+   * Wrap the row so active goes back to the beginning of the row
+   */
+  wrap?: boolean;
+}
+
+// @ts-expect-error animationSettings is not identical - weird
+export interface NavigableElement extends ElementNode, NavigableProps {
+  selected: number;
+}
+
+export interface NavigableStyleProperties {
+  /**
+   * the index of which we want scrolling to start
+   */
+  scrollIndex?: number;
+  /**
+   * space between each keys
+   */
+  itemSpacing?: NodeStyles['gap'];
+  /**
+   * animation transition
+   */
+  itemTransition?: NodeStyles['transition'];
+}
+
+export interface ColumnProps extends NavigableProps, NavigableStyleProperties {
+  /** function to be called on down click */
+  onDown?: KeyHandler;
+
+  /** function to be called on up click */
+  onUp?: KeyHandler;
+}
+
+export interface RowProps extends NavigableProps, NavigableStyleProperties {
+  /** function to be called on down click */
+  onLeft?: KeyHandler;
+
+  /** function to be called on up click */
+  onRight?: KeyHandler;
+}

package/src/primitives/utils/chainFunctions.ts

@@ -0,0 +1,29 @@
+type ChainableFunction = (...args: unknown[]) => unknown;
+
+export function chainFunctions(...args: ChainableFunction[]): ChainableFunction;
+export function chainFunctions<T>(...args: (ChainableFunction | T)[]): T;
+
+// take an array of functions and if you return true from a function, it will stop the chain
+export function chainFunctions<T extends ChainableFunction>(
+  ...args: (ChainableFunction | T)[]
+) {
+  const onlyFunctions = args.filter((func) => typeof func === 'function');
+  if (onlyFunctions.length === 0) {
+    return undefined;
+  }
+
+  if (onlyFunctions.length === 1) {
+    return onlyFunctions[0];
+  }
+
+  return function (this: unknown | T, ...innerArgs: unknown[]) {
+    let result;
+    for (const func of onlyFunctions) {
+      result = func.apply(this, innerArgs);
+      if (result === true) {
+        return result;
+      }
+    }
+    return result;
+  };
+}

package/src/primitives/utils/createSpriteMap.ts

@@ -0,0 +1,32 @@
+import { renderer, type TextureMap } from '@lightningtv/core';
+
+export interface SpriteDef {
+  name: string;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+export function createSpriteMap(
+  src: string,
+  subTextures: SpriteDef[],
+): Record<string, InstanceType<TextureMap['SubTexture']>> {
+  const spriteMapTexture = renderer.createTexture('ImageTexture', {
+    src,
+  });
+
+  return subTextures.reduce<
+    Record<string, InstanceType<TextureMap['SubTexture']>>
+  >((acc, t) => {
+    const { x, y, width, height } = t;
+    acc[t.name] = renderer.createTexture('SubTexture', {
+      texture: spriteMapTexture,
+      x,
+      y,
+      width,
+      height,
+    });
+    return acc;
+  }, {});
+}

package/src/primitives/utils/handleNavigation.ts

@@ -0,0 +1,100 @@
+import { ElementNode, assertTruthy } from '@lightningtv/core';
+import { type KeyHandler } from '@lightningtv/core/focusManager';
+import type { NavigableElement, OnSelectedChanged } from '../types.js';
+
+export function onGridFocus(this: ElementNode) {
+  if (!this || this.children.length === 0) return false;
+
+  this.selected = this.selected || 0;
+  let child = this.selected ? this.children[this.selected] : this.selectedNode;
+
+  while (child?.skipFocus) {
+    this.selected++;
+    child = this.children[this.selected];
+  }
+  if (!(child instanceof ElementNode)) return false;
+  child.setFocus();
+  return true;
+}
+
+// Converts params from onFocus to onSelectedChanged
+export function handleOnSelect(onSelectedChanged: OnSelectedChanged) {
+  return function (this: NavigableElement) {
+    return onSelectedChanged.call(
+      this,
+      this.selected,
+      this,
+      this.children[this.selected] as ElementNode,
+    );
+  };
+}
+
+export function handleNavigation(
+  direction: 'up' | 'right' | 'down' | 'left',
+): KeyHandler {
+  return function () {
+    const numChildren = this.children.length;
+    const wrap = this.wrap;
+    const lastSelected = this.selected || 0;
+
+    if (numChildren === 0) {
+      return false;
+    }
+
+    if (direction === 'right' || direction === 'down') {
+      do {
+        this.selected = ((this.selected || 0) % numChildren) + 1;
+        if (this.selected >= numChildren) {
+          if (!wrap) {
+            this.selected = -1;
+            break;
+          }
+          this.selected = 0;
+        }
+      } while (this.children[this.selected]?.skipFocus);
+    } else if (direction === 'left' || direction === 'up') {
+      do {
+        this.selected = ((this.selected || 0) % numChildren) - 1;
+        if (this.selected < 0) {
+          if (!wrap) {
+            this.selected = -1;
+            break;
+          }
+          this.selected = numChildren - 1;
+        }
+      } while (this.children[this.selected]?.skipFocus);
+    }
+
+    if (this.selected === -1) {
+      this.selected = lastSelected;
+      if (this.children[this.selected]?.states!.has('focus')) {
+        // This child is already focused, so bubble up to next handler
+        return false;
+      }
+    }
+    const active = this.children[this.selected || 0];
+    assertTruthy(active instanceof ElementNode);
+    const navigableThis = this as NavigableElement;
+
+    navigableThis.onSelectedChanged &&
+      navigableThis.onSelectedChanged.call(
+        navigableThis,
+        navigableThis.selected,
+        navigableThis,
+        active,
+        lastSelected,
+      );
+
+    if (this.plinko) {
+      // Set the next item to have the same selected index
+      // so we move up / down directly
+      const lastSelectedChild = this.children[lastSelected];
+      assertTruthy(lastSelectedChild instanceof ElementNode);
+      const num = lastSelectedChild.selected || 0;
+      active.selected =
+        num < active.children.length ? num : active.children.length - 1;
+    }
+    active.setFocus();
+    return true;
+  };
+}

package/src/primitives/utils/withScrolling.ts

@@ -0,0 +1,136 @@
+import type {
+  ElementNode,
+  ElementText,
+  INode,
+  Styles,
+} from '@lightningtv/core';
+
+// Adds properties expected by withScrolling
+export interface ScrollableElement extends ElementNode {
+  scrollIndex?: number;
+  selected: number;
+  offset?: number;
+  _targetPosition?: number;
+  _screenOffset?: number;
+}
+
+// From the renderer, not exported
+const InViewPort = 8;
+const isNotShown = (node: ElementNode | ElementText) => {
+  return node.lng.renderState !== InViewPort;
+};
+/*
+  Auto Scrolling starts scrolling right away until the last item is shown. Keeping a full view of the list.
+  Edge starts scrolling when it reaches the edge of the viewport.
+  Always scroll moves the list every time
+*/
+
+export function withScrolling(isRow: boolean) {
+  const dimension = isRow ? 'width' : 'height';
+  const axis = isRow ? 'x' : 'y';
+
+  return (
+    selected: number | ElementNode,
+    component?: ElementNode,
+    selectedElement?: ElementNode | ElementText,
+    lastSelected?: number,
+  ) => {
+    let componentRef = component as ScrollableElement;
+    if (typeof selected !== 'number') {
+      componentRef = selected as ScrollableElement;
+      selected = componentRef.selected || 0;
+    }
+    if (!componentRef || !componentRef.children.length) return;
+
+    const lng = componentRef.lng as INode;
+    const screenSize = isRow ? lng.stage.root.width : lng.stage.root.height;
+    // Determine if movement is incremental or decremental
+    const isIncrementing =
+      lastSelected === undefined || lastSelected - 1 !== selected;
+
+    if (componentRef._screenOffset === undefined) {
+      componentRef._screenOffset =
+        componentRef.offset ??
+        (isRow ? lng.absX : lng.absY) - componentRef[axis];
+    }
+
+    const screenOffset = componentRef._screenOffset;
+    const gap = componentRef.gap || 0;
+    const scroll = componentRef.scroll || 'auto';
+
+    // Allows manual position control
+    const targetPosition = componentRef._targetPosition ?? componentRef[axis];
+    const rootPosition = isIncrementing
+      ? Math.min(targetPosition, componentRef[axis])
+      : Math.max(targetPosition, componentRef[axis]);
+    componentRef.offset = componentRef.offset ?? rootPosition;
+    const offset = componentRef.offset;
+    selectedElement =
+      selectedElement || (componentRef.children[selected] as ElementNode);
+    const selectedPosition = selectedElement[axis] ?? 0;
+    const selectedSize = selectedElement[dimension] ?? 0;
+    const selectedScale =
+      selectedElement.scale ??
+      (selectedElement.style?.focus as Styles)?.scale ??
+      1;
+    const selectedSizeScaled = selectedSize * selectedScale;
+    const containerSize = componentRef[dimension] ?? 0;
+    const maxOffset = Math.min(
+      screenSize - containerSize - screenOffset - 2 * gap,
+      0,
+    );
+
+    // Determine the next element based on whether incrementing or decrementing
+    const nextIndex = isIncrementing ? selected + 1 : selected - 1;
+    const nextElement = componentRef.children[nextIndex] || null;
+
+    // Default nextPosition to align with the selected position and offset
+    let nextPosition = rootPosition;
+
+    // Update nextPosition based on scroll type and specific conditions
+    if (selectedElement.centerScroll) {
+      nextPosition = -selectedPosition + (screenSize - selectedSizeScaled) / 2;
+    } else if (scroll === 'always') {
+      nextPosition = -selectedPosition + offset;
+    } else if (scroll === 'center') {
+      nextPosition =
+        -selectedPosition +
+        (screenSize - selectedSizeScaled) / 2 -
+        screenOffset;
+    } else if (!nextElement) {
+      // If at the last element, align to end
+      nextPosition = isIncrementing ? maxOffset : offset;
+    } else if (scroll === 'auto') {
+      if (
+        isIncrementing &&
+        componentRef.scrollIndex &&
+        componentRef.scrollIndex > 0 &&
+        componentRef.selected >= componentRef.scrollIndex
+      ) {
+        nextPosition = rootPosition - selectedSize - gap;
+      } else if (isIncrementing) {
+        nextPosition = -selectedPosition + offset;
+      } else {
+        nextPosition = rootPosition + selectedSize + gap;
+      }
+    } // Handle Edge scrolling
+    else if (isIncrementing && isNotShown(nextElement)) {
+      nextPosition = rootPosition - selectedSize - gap;
+    } else if (isNotShown(nextElement)) {
+      nextPosition = -selectedPosition + offset;
+    }
+
+    // Prevent container from moving beyond bounds
+    nextPosition =
+      isIncrementing && scroll !== 'always'
+        ? Math.max(nextPosition, maxOffset)
+        : Math.min(nextPosition, offset);
+
+    // Update position if it has changed
+    if (componentRef[axis] !== nextPosition) {
+      componentRef[axis] = nextPosition;
+      // Store the new position to keep track during animations
+      componentRef._targetPosition = nextPosition;
+    }
+  };
+}