@lightningtv/solid 0.0.2 → 0.0.4

package/src/primitives/announcer/speech.ts

@@ -0,0 +1,174 @@
+type CoreSpeechType = string | (() => SpeechType) | SpeechType[];
+export type SpeechType = CoreSpeechType | Promise<CoreSpeechType>;
+
+export interface SeriesResult {
+  series: Promise<void>;
+  readonly active: boolean;
+  append: (toSpeak: SpeechType) => void;
+  cancel: () => void;
+}
+
+/* global SpeechSynthesisErrorEvent */
+function flattenStrings(series: SpeechType[] = []): SpeechType[] {
+  const flattenedSeries = [];
+
+  let i;
+  for (i = 0; i < series.length; i++) {
+    const s = series[i];
+    if (typeof s === 'string' && !s.includes('PAUSE-')) {
+      flattenedSeries.push(series[i]);
+    } else {
+      break;
+    }
+  }
+  // add a "word boundary" to ensure the Announcer doesn't automatically try to
+  // interpret strings that look like dates but are not actually dates
+  // for example, if "Rising Sun" and "1993" are meant to be two separate lines,
+  // when read together, "Sun 1993" is interpretted as "Sunday 1993"
+  return ([flattenedSeries.join(',\b ')] as SpeechType[]).concat(
+    series.slice(i),
+  );
+}
+
+function delay(pause: number) {
+  return new Promise((resolve) => {
+    setTimeout(resolve, pause);
+  });
+}
+
+/**
+ * Speak a string
+ *
+ * @param phrase Phrase to speak
+ * @param utterances An array which the new SpeechSynthesisUtterance instance representing this utterance will be appended
+ * @param lang Language to speak in
+ * @return {Promise<void>} Promise resolved when the utterance has finished speaking, and rejected if there's an error
+ */
+function speak(
+  phrase: string,
+  utterances: SpeechSynthesisUtterance[],
+  lang = 'en-US',
+) {
+  const synth = window.speechSynthesis;
+  return new Promise<void>((resolve, reject) => {
+    const utterance = new SpeechSynthesisUtterance(phrase);
+    utterance.lang = lang;
+    utterance.onend = () => {
+      resolve();
+    };
+    utterance.onerror = (e) => {
+      reject(e);
+    };
+    utterances.push(utterance);
+    synth.speak(utterance);
+  });
+}
+
+function speakSeries(
+  series: SpeechType,
+  lang: string,
+  root = true,
+): SeriesResult {
+  const synth = window.speechSynthesis;
+  const remainingPhrases = flattenStrings(
+    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;
+
+  const seriesChain = (async () => {
+    try {
+      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;
+          }
+          await delay(pause);
+        } else if (typeof phrase === 'string' && phrase.length) {
+          // Speak it
+          const totalRetries = 3;
+          let retriesLeft = totalRetries;
+          while (active && retriesLeft > 0) {
+            try {
+              await speak(phrase, utterances, lang);
+              retriesLeft = 0;
+            } catch (e) {
+              // eslint-disable-next-line no-undef
+              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 (typeof phrase === 'function') {
+          const seriesResult = speakSeries(phrase(), lang, false);
+          nestedSeriesResults.push(seriesResult);
+          await seriesResult.series;
+        } else if (Array.isArray(phrase)) {
+          // Speak it (recursively)
+          const seriesResult = speakSeries(phrase, lang, false);
+          nestedSeriesResults.push(seriesResult);
+          await seriesResult.series;
+        }
+      }
+    } finally {
+      active = false;
+    }
+  })();
+  return {
+    series: seriesChain,
+    get active() {
+      return active;
+    },
+    append: (toSpeak: SpeechType) => {
+      remainingPhrases.push(toSpeak);
+    },
+    cancel: () => {
+      if (!active) {
+        return;
+      }
+      if (root) {
+        synth.cancel();
+      }
+      nestedSeriesResults.forEach((nestedSeriesResults) => {
+        nestedSeriesResults.cancel();
+      });
+      active = false;
+    },
+  };
+}
+
+let currentSeries: SeriesResult | undefined;
+export default function (toSpeak: SpeechType, lang: string = 'en-US') {
+  currentSeries && currentSeries.cancel();
+  currentSeries = speakSeries(toSpeak, lang);
+  return currentSeries;
+}

package/src/primitives/createInfiniteItems.ts

@@ -0,0 +1,66 @@
+import {
+  type Accessor,
+  batch,
+  type Setter,
+  createComputed,
+  createResource,
+  createSignal,
+} from 'solid-js';
+
+// Adopted from https://github.com/solidjs-community/solid-primitives/blob/main/packages/pagination/src/index.ts
+// As we don't have intersection observer in Lightning, we can't use the original implementation
+
+/**
+ * Provides an easy way to implement infinite items.
+ *
+ * ```ts
+ * const [items, loader, { item, setItem, setItems, end, setEnd }] = createInfiniteScroll(fetcher);
+ * ```
+ * @param fetcher `(item: number) => Promise<T[]>`
+ * @return `items()` is an accessor contains array of contents
+ * @property `items.loading` is a boolean indicator for the loading state
+ * @property `items.error` contains any error encountered
+ * @method `page` is an accessor that contains page number
+ * @method `setPage` allows to manually change the page number
+ * @method `setItems` allows to manually change the contents of the item
+ * @method `end` is a boolean indicator for end of the item
+ * @method `setEnd` allows to manually change the end
+ */
+export function createInfiniteItems<T>(
+  fetcher: (item: number) => Promise<T[]>,
+): [
+  items: Accessor<T[]>,
+  options: {
+    page: Accessor<number>;
+    setPage: Setter<number>;
+    setItems: Setter<T[]>;
+    end: Accessor<boolean>;
+    setEnd: Setter<boolean>;
+  },
+] {
+  const [items, setItems] = createSignal<T[]>([]);
+  const [page, setPage] = createSignal(0);
+  const [end, setEnd] = createSignal(false);
+
+  const [contents] = createResource(page, fetcher);
+
+  createComputed(() => {
+    const content = contents();
+    if (!content) return;
+    batch(() => {
+      if (content.length === 0) setEnd(true);
+      setItems((p) => [...p, ...content]);
+    });
+  });
+
+  return [
+    items,
+    {
+      page,
+      setPage,
+      setItems,
+      end,
+      setEnd,
+    },
+  ];
+}

package/src/primitives/createSpriteMap.ts

@@ -0,0 +1,31 @@
+import { renderer } from '@lightningtv/solid';
+import type { SpecificTextureRef } from '@lightningjs/renderer';
+
+export interface SpriteDef {
+  name: string;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+export function createSpriteMap(src: string, subTextures: SpriteDef[]) {
+  const spriteMapTexture = renderer.createTexture('ImageTexture', {
+    src,
+  });
+
+  return subTextures.reduce<Record<string, SpecificTextureRef<'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/index.ts

@@ -0,0 +1,5 @@
+export * from './useFocusManager.js';
+export * from './withPadding.js';
+export * from './announcer/index.js';
+export * from './createInfiniteItems.js';
+export * from './createSpriteMap.js';

package/src/primitives/jsx-runtime.d.ts

@@ -0,0 +1,11 @@
+import 'solid-js';
+import type { withPaddingInput } from './withPadding.ts';
+
+declare module 'solid-js' {
+  namespace JSX {
+    interface Directives {
+      model: [() => any, (v: any) => any];
+      withPadding: withPaddingInput;
+    }
+  }
+}

package/src/primitives/useFocusManager.ts

@@ -0,0 +1,194 @@
+import { createEffect, on, createSignal, untrack } from 'solid-js';
+import { useKeyDownEvent } from '@solid-primitives/keyboard';
+import {
+  activeElement,
+  ElementNode,
+  isFunc,
+  isArray,
+} from '@lightningtv/solid';
+
+export interface DefaultKeyMap {
+  Left: string | number | (string | number)[];
+  Right: string | number | (string | number)[];
+  Up: string | number | (string | number)[];
+  Down: string | number | (string | number)[];
+  Enter: string | number | (string | number)[];
+  Last: string | number | (string | number)[];
+}
+
+export interface KeyMap extends DefaultKeyMap {}
+
+export type KeyHandlerReturn = boolean | void;
+
+export type KeyHandler = (
+  this: ElementNode,
+  e: KeyboardEvent,
+  target: ElementNode,
+  handlerElm: ElementNode,
+) => KeyHandlerReturn;
+
+/**
+ * Generates a map of event handlers for each key in the KeyMap
+ */
+type KeyMapEventHandlers = {
+  [K in keyof KeyMap as `on${Capitalize<K>}`]?: KeyHandler;
+};
+
+declare module '@lightningtv/solid' {
+  /**
+   * Augment the existing IntrinsicCommonProps interface with our own
+   * FocusManager-specific properties.
+   */
+  interface IntrinsicCommonProps extends KeyMapEventHandlers {
+    onFocus?: (
+      currentFocusedElm: ElementNode | undefined,
+      prevFocusedElm: ElementNode | undefined,
+    ) => void;
+    onBlur?: (
+      currentFocusedElm: ElementNode | undefined,
+      prevFocusedElm: ElementNode | undefined,
+    ) => void;
+    onKeyPress?: (
+      this: ElementNode,
+      e: KeyboardEvent,
+      mappedKeyEvent: string | undefined,
+      handlerElm: ElementNode,
+      currentFocusedElm: ElementNode,
+    ) => KeyHandlerReturn;
+    onSelectedChanged?: (
+      container: ElementNode,
+      activeElm: ElementNode,
+      selectedIndex: number | undefined,
+      lastSelectedIndex: number | undefined,
+    ) => void;
+    skipFocus?: boolean;
+    wrap?: boolean;
+    plinko?: boolean;
+  }
+
+  interface IntrinsicNodeStyleProps {
+    // TODO: Refactor states to use a $ prefix
+    focus?: IntrinsicNodeStyleProps;
+  }
+
+  interface IntrinsicTextNodeStyleProps {
+    // TODO: Refactor states to use a $ prefix
+    focus?: IntrinsicTextNodeStyleProps;
+  }
+
+  interface TextNode {
+    skipFocus?: undefined;
+  }
+}
+
+const keyMapEntries: Record<string | number, string> = {
+  ArrowLeft: 'Left',
+  ArrowRight: 'Right',
+  ArrowUp: 'Up',
+  ArrowDown: 'Down',
+  Enter: 'Enter',
+  l: 'Last',
+  ' ': 'Space',
+  Backspace: 'Back',
+  Escape: 'Escape',
+};
+
+const [focusPath, setFocusPath] = createSignal<ElementNode[]>([]);
+export { focusPath };
+export const useFocusManager = (userKeyMap?: Partial<KeyMap>) => {
+  const keypressEvent = useKeyDownEvent();
+  if (userKeyMap) {
+    // Flatten the userKeyMap to a hash
+    for (const [key, value] of Object.entries(userKeyMap)) {
+      if (isArray(value)) {
+        value.forEach((v) => {
+          keyMapEntries[v] = key;
+        });
+      } else {
+        keyMapEntries[value] = key;
+      }
+    }
+  }
+  createEffect(
+    on(
+      activeElement,
+      (
+        currentFocusedElm: ElementNode,
+        prevFocusedElm: ElementNode | undefined,
+        prevFocusPath: ElementNode[] = [],
+      ) => {
+        const newFocusedElms = [];
+        let current = currentFocusedElm;
+
+        const fp: ElementNode[] = [];
+        while (current) {
+          if (!current.states.has('focus')) {
+            current.states.add('focus');
+            isFunc(current.onFocus) &&
+              current.onFocus.call(current, currentFocusedElm, prevFocusedElm);
+
+            newFocusedElms.push(current);
+          }
+          fp.push(current);
+          current = current.parent!;
+        }
+
+        prevFocusPath.forEach((elm) => {
+          if (!fp.includes(elm)) {
+            elm.states.remove('focus');
+            isFunc(elm.onBlur) &&
+              elm.onBlur.call(elm, currentFocusedElm, prevFocusedElm);
+          }
+        });
+
+        setFocusPath(fp);
+        return fp;
+      },
+      { defer: true },
+    ),
+  );
+
+  createEffect(() => {
+    const e = keypressEvent();
+
+    if (e) {
+      // Search keyMap for the value of the pressed key or keyCode if value undefined
+      const mappedKeyEvent = keyMapEntries[e.key] || keyMapEntries[e.keyCode];
+      untrack(() => {
+        const fp = focusPath();
+        let finalFocusElm: ElementNode | undefined = undefined;
+        for (const elm of fp) {
+          finalFocusElm = finalFocusElm || elm;
+          if (mappedKeyEvent) {
+            const onKeyHandler =
+              elm[`on${mappedKeyEvent}` as keyof KeyMapEventHandlers];
+            if (isFunc(onKeyHandler)) {
+              if (onKeyHandler.call(elm, e, elm, finalFocusElm) === true) {
+                break;
+              }
+            }
+          } else {
+            console.log(`Unhandled key event: ${e.key || e.keyCode}`);
+          }
+
+          if (isFunc(elm.onKeyPress)) {
+            if (
+              elm.onKeyPress.call(
+                elm,
+                e,
+                mappedKeyEvent,
+                elm,
+                finalFocusElm,
+              ) === true
+            ) {
+              break;
+            }
+          }
+        }
+        return false;
+      });
+    }
+  });
+
+  return focusPath;
+};

package/src/primitives/withPadding.ts

@@ -0,0 +1,56 @@
+import type { ElementNode } from '@lightningtv/core';
+
+export type withPaddingInput =
+  | number
+  | [number, number]
+  | [number, number, number]
+  | [number, number, number, number];
+
+// To use with TS import withPadding and then put withPadding; on the next line to prevent tree shaking
+export function withPadding(el: ElementNode, padding: () => withPaddingInput) {
+  const pad = padding();
+  let top: number, left: number, right: number, bottom: number;
+
+  if (Array.isArray(pad)) {
+    // top right bottom left
+    if (pad.length === 2) {
+      top = bottom = pad[0]!;
+      left = right = pad[1]!;
+    } else if (pad.length === 3) {
+      top = pad[0]!;
+      left = right = pad[1]!;
+      bottom = pad[2]!;
+    } else {
+      [top, right, bottom, left] = pad;
+    }
+  } else {
+    top = right = bottom = left = pad;
+  }
+
+  el.onBeforeLayout = (node, size) => {
+    if (size) {
+      el.width =
+        el.children.reduce((acc, c) => {
+          return acc + (c.width || 0);
+        }, 0) +
+        left +
+        right;
+      const firstChild = el.children[0];
+      if (firstChild) {
+        // set padding or marginLeft for flex
+        firstChild.x = left;
+        firstChild.marginLeft = left;
+      }
+
+      let maxHeight = 0;
+      el.children.forEach((c) => {
+        c.y = top;
+        c.marginTop = top;
+        maxHeight = Math.max(maxHeight, c.height || 0);
+      });
+      el.height = maxHeight + top + bottom;
+      // let flex know we need to re-layout
+      return true;
+    }
+  };
+}

package/src/solidOpts.ts

@@ -1,6 +1,6 @@
 import { assertTruthy } from '@lightningjs/renderer/utils';
 import type { SolidNode, TextNode } from '@lightningtv/core';
-import { ElementNode, NodeTypes, log } from '@lightningtv/core';
+import { ElementNode, NodeType, log } from '@lightningtv/core';
 import type { createRenderer } from 'solid-js/universal';
 
 export type SolidRendererOptions = Parameters<
@@ -13,7 +13,7 @@ export default {
   },
   createTextNode(text: string): TextNode {
     // A text node is just a string - not the <text> node
-    return { type: NodeTypes.Text, text, parent: undefined };
+    return { type: NodeType.Text, text, parent: undefined };
   },
   replaceText(node: TextNode, value: string): void {
     log('Replace Text: ', node, value);