@lightningtv/solid 2.12.0 → 2.12.2

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/useMouse.ts

@@ -1,20 +1,35 @@
 import type { ElementText, TextNode } from '@lightningtv/core';
 import {
+  Config,
   ElementNode,
   activeElement,
   isElementNode,
+  isFunc,
   isTextNode,
   rootNode,
-  Config,
-  isFunc,
 } from '@lightningtv/solid';
 import { makeEventListener } from '@solid-primitives/event-listener';
 import { useMousePosition } from '@solid-primitives/mouse';
 import { createScheduled, throttle } from '@solid-primitives/scheduled';
-import { createEffect } from 'solid-js';
+import { createEffect, getOwner, runWithOwner } from 'solid-js';
+
+type CustomState = `$${string}`;
+
+type RenderableNode = ElementNode | ElementText | TextNode;
+
+interface MouseStateOptions {
+  hoverState: CustomState;
+  pressedState: CustomState;
+  pressedStateDuration?: number;
+}
+
+type UseMouseOptions =
+  | { customStates: MouseStateOptions }
+  | { customStates: undefined };
 
 declare module '@lightningtv/core' {
   interface ElementNode {
+    onEnter?: () => void;
     /** function to be called on mouse click */
     onMouseClick?: (
       this: ElementNode,
@@ -24,6 +39,29 @@ declare module '@lightningtv/core' {
   }
 }
 
+const DEFAULT_PRESSED_STATE_DURATION = 150;
+
+export function addCustomStateToElement(
+  element: RenderableNode,
+  state: CustomState,
+): void {
+  element.states?.add(state);
+}
+
+export function removeCustomStateFromElement(
+  element: RenderableNode,
+  state: CustomState,
+): void {
+  element?.states?.remove(state);
+}
+
+export function hasCustomState(
+  element: RenderableNode,
+  state: CustomState,
+): boolean {
+  return element.states?.has(state);
+}
+
 function createKeyboardEvent(
   key: string,
   keyCode: number,
@@ -41,7 +79,7 @@ function createKeyboardEvent(
   });
 }
 
-let scrollTimeout: number;
+let scrollTimeout: ReturnType<typeof setTimeout>;
 const handleScroll = throttle((e: WheelEvent): void => {
   const deltaY = e.deltaY;
   if (deltaY < 0) {
@@ -59,9 +97,38 @@ const handleScroll = throttle((e: WheelEvent): void => {
   }, 250);
 }, 250);
 
-const handleClick = (e: MouseEvent): void => {
+function findElementWithCustomState<TApp extends ElementNode>(
+  myApp: TApp,
+  x: number,
+  y: number,
+  customState: CustomState,
+): ElementNode | undefined {
+  const result = getChildrenByPosition(myApp, x, y).filter((el) =>
+    hasCustomState(el, customState),
+  );
+
+  if (result.length === 0) {
+    return undefined;
+  }
+
+  let element: ElementNode | undefined = result[result.length - 1];
+
+  while (element) {
+    const elmParent = element.parent;
+    if (elmParent?.forwardStates && hasCustomState(elmParent, customState)) {
+      element = elmParent;
+    } else {
+      break;
+    }
+  }
+
+  return element;
+}
+
+function findElementByActiveElement(e: MouseEvent): ElementNode | null {
   const active = activeElement();
   const precision = Config.rendererOptions?.deviceLogicalPixelRatio || 1;
+
   if (
     active instanceof ElementNode &&
     testCollision(
@@ -73,38 +140,95 @@ const handleClick = (e: MouseEvent): void => {
       (active.height || 0) * precision,
     )
   ) {
-    if (isFunc(active.onMouseClick)) {
-      active.onMouseClick.call(active, e, active);
-      return;
+    return active;
+  }
+
+  let parent = active?.parent;
+  while (parent) {
+    if (
+      isFunc(parent.onMouseClick) &&
+      active &&
+      testCollision(
+        e.clientX,
+        e.clientY,
+        ((parent.lng.absX as number) || 0) * precision,
+        ((parent.lng.absY as number) || 0) * precision,
+        (parent.width || 0) * precision,
+        (parent.height || 0) * precision,
+      )
+    ) {
+      return parent;
     }
+    parent = parent.parent;
+  }
+
+  return null;
+}
+
+function applyPressedState(
+  element: ElementNode,
+  pressedState: CustomState,
+  pressedStateDuration: number = DEFAULT_PRESSED_STATE_DURATION,
+): void {
+  addCustomStateToElement(element, pressedState);
+  setTimeout(() => {
+    removeCustomStateFromElement(element, pressedState);
+  }, pressedStateDuration);
+}
+
+function handleElementClick(
+  clickedElement: ElementNode,
+  e: MouseEvent,
+  customStates?: MouseStateOptions,
+): void {
+  if (customStates?.pressedState) {
+    applyPressedState(
+      clickedElement,
+      customStates.pressedState,
+      customStates.pressedStateDuration,
+    );
+  }
+
+  if (isFunc(clickedElement.onMouseClick)) {
+    clickedElement.onMouseClick(e, clickedElement);
+    return;
+  } else if (isFunc(clickedElement.onEnter)) {
+    clickedElement.onEnter();
+    return;
+  }
 
+  clickedElement.setFocus();
+  setTimeout(() => {
     document.dispatchEvent(createKeyboardEvent('Enter', 13));
     setTimeout(
       () =>
         document.body.dispatchEvent(createKeyboardEvent('Enter', 13, 'keyup')),
       1,
     );
-  } else {
-    let parent = active?.parent;
-    while (parent) {
-      if (
-        isFunc(parent.onMouseClick) &&
-        testCollision(
+  }, 1);
+}
+
+function createHandleClick<TApp extends ElementNode>(
+  myApp: TApp,
+  customStates?: MouseStateOptions,
+) {
+  return (e: MouseEvent): void => {
+    const clickedElement = customStates
+      ? findElementWithCustomState(
+          myApp,
           e.clientX,
           e.clientY,
-          ((parent.lng.absX as number) || 0) * precision,
-          ((parent.lng.absY as number) || 0) * precision,
-          (parent.width || 0) * precision,
-          (parent.height || 0) * precision,
+          customStates.hoverState,
         )
-      ) {
-        parent.onMouseClick.call(parent, e, active!);
-        return;
-      }
-      parent = parent.parent;
+      : findElementByActiveElement(e);
+
+    if (!clickedElement) {
+      return;
     }
-  }
-};
+
+    handleElementClick(clickedElement, e, customStates);
+  };
+}
 
 function testCollision(
   px: number,
@@ -117,106 +241,155 @@ function testCollision(
   return px >= cx && px <= cx + cw && py >= cy && py <= cy + ch;
 }
 
-function getChildrenByPosition(
-  node: ElementNode,
+function isNodeAtPosition(
+  node: ElementNode | ElementText | TextNode,
   x: number,
   y: number,
-): ElementNode[] {
-  const result: ElementNode[] = [];
-  const precision = Config.rendererOptions?.deviceLogicalPixelRatio || 1;
+  precision: number,
+): node is ElementNode {
+  if (!isElementNode(node)) {
+    return false;
+  }
+
+  return (
+    node.alpha !== 0 &&
+    !node.skipFocus &&
+    testCollision(
+      x,
+      y,
+      ((node.lng.absX as number) || 0) * precision,
+      ((node.lng.absY as number) || 0) * precision,
+      (node.width || 0) * precision,
+      (node.height || 0) * precision,
+    )
+  );
+}
+
+function findHighestZIndexNode(nodes: ElementNode[]): ElementNode | undefined {
+  if (nodes.length === 0) {
+    return undefined;
+  }
+
+  if (nodes.length === 1) {
+    return nodes[0];
+  }
+
+  let maxZIndex = -1;
+  let highestNode: ElementNode | undefined = undefined;
+
+  for (const node of nodes) {
+    const zIndex = node.zIndex ?? -1;
+    if (zIndex >= maxZIndex) {
+      maxZIndex = zIndex;
+      highestNode = node;
+    }
+  }
 
+  return highestNode;
+}
+
+function getChildrenByPosition<TElement extends ElementNode = ElementNode>(
+  node: TElement,
+  x: number,
+  y: number,
+): TElement[] {
+  const result: TElement[] = [];
+  const precision = Config.rendererOptions?.deviceLogicalPixelRatio || 1;
   // Queue for BFS
+
   let queue: (ElementNode | ElementText | TextNode)[] = [node];
 
   while (queue.length > 0) {
     // Process nodes at the current level
-    const currentLevelNodes: ElementNode[] = [];
-
-    for (const currentNode of queue) {
-      if (
-        isElementNode(currentNode) &&
-        currentNode.alpha !== 0 &&
-        !currentNode.skipFocus &&
-        testCollision(
-          x,
-          y,
-          ((currentNode.lng.absX as number) || 0) * precision,
-          ((currentNode.lng.absY as number) || 0) * precision,
-          (currentNode.width || 0) * precision,
-          (currentNode.height || 0) * precision,
-        )
-      ) {
-        currentLevelNodes.push(currentNode);
-      }
-    }
+    const currentLevelNodes = queue.filter((currentNode) =>
+      isNodeAtPosition(currentNode, x, y, precision),
+    );
 
-    const size = currentLevelNodes.length;
-    if (size === 0) {
+    if (currentLevelNodes.length === 0) {
       break;
     }
 
-    let highestZIndexNode = null;
-    if (size === 1) {
-      highestZIndexNode = currentLevelNodes[0];
-    } else {
-      let maxZIndex = -1;
-
-      for (const node of currentLevelNodes) {
-        const zIndex = node.zIndex ?? -1;
-        if (zIndex > maxZIndex) {
-          maxZIndex = zIndex;
-          highestZIndexNode = node;
-        } else if (zIndex === maxZIndex) {
-          highestZIndexNode = node;
-        }
-      }
-    }
+    const highestZIndexNode = findHighestZIndexNode(currentLevelNodes);
 
-    if (highestZIndexNode && !isTextNode(highestZIndexNode)) {
-      result.push(highestZIndexNode);
-      queue = highestZIndexNode.children;
-    } else {
-      queue = [];
+    if (!highestZIndexNode || isTextNode(highestZIndexNode)) {
+      break;
     }
+
+    result.push(highestZIndexNode as TElement);
+    queue = highestZIndexNode.children;
   }
 
   return result;
 }
 
-export function useMouse(
-  myApp: ElementNode = rootNode,
+export function useMouse<TApp extends ElementNode = ElementNode>(
+  myApp: TApp = rootNode as TApp,
   throttleBy: number = 100,
+  options?: UseMouseOptions,
 ): void {
   const pos = useMousePosition();
   const scheduled = createScheduled((fn) => throttle(fn, throttleBy));
+  let previousElement: ElementNode | null = null;
+  const customStates = options?.customStates;
+  const hoverState = customStates?.hoverState;
+  const handleClick = createHandleClick(myApp, customStates);
+  const owner = getOwner();
+  const handleClickContext = (e: MouseEvent) => {
+    runWithOwner(owner, () => handleClick(e));
+  };
+
   makeEventListener(window, 'wheel', handleScroll);
-  makeEventListener(window, 'click', handleClick);
+  makeEventListener(window, 'click', handleClickContext);
   createEffect(() => {
     if (scheduled()) {
       const result = getChildrenByPosition(myApp, pos.x, pos.y).filter(
-        (el) => el.focus || el.onFocus || el.onEnter,
+        (el) =>
+          !!(
+            el.onEnter ||
+            el.onMouseClick ||
+            el.onFocus ||
+            el[Config.focusStateKey] ||
+            (hoverState ? el[hoverState] : false)
+          ),
       );
 
       if (result.length) {
-        let activeElm = result[result.length - 1];
+        let activeElm: ElementNode | undefined = result[result.length - 1];
 
         while (activeElm) {
           const elmParent = activeElm.parent;
           if (elmParent?.forwardStates) {
-            activeElm = activeElm.parent;
+            activeElm = elmParent;
           } else {
             break;
           }
         }
 
+        if (!activeElm) {
+          return;
+        }
+
         // Update Row & Column Selected property
-        const activeElmParent = activeElm?.parent;
-        if (activeElm && activeElmParent?.selected !== undefined) {
+        const activeElmParent = activeElm.parent;
+        if (activeElmParent?.selected !== undefined) {
           activeElmParent.selected =
             activeElmParent.children.indexOf(activeElm);
         }
 
-        activeElm?.setFocus();
+        if (previousElement && previousElement !== activeElm && hoverState) {
+          removeCustomStateFromElement(previousElement, hoverState);
+        }
+
+        if (hoverState) {
+          addCustomStateToElement(activeElm, hoverState);
+        } else {
+          activeElm.setFocus();
+        }
+
+        previousElement = activeElm;
+      } else if (previousElement && hoverState) {
+        removeCustomStateFromElement(previousElement, hoverState);
+        previousElement = null;
       }
     }
   });