Custom Remote Support

In DIVA WebTv we added sendCustomKeypress to make DIVA act in response of a preset of events.

Possible DIVA actions

Keys parameter	value	description
ON_KEYUP	OnKeyUp	when any button is released, important
ARROW_UP	ArrowUp	up is pressed
ARROW_DOWN	ArrowDown	down is pressed
ARROW_LEFT	ArrowLeft	left is pressed
ARROW_RIGHT	ArrowRight	right is pressed
ENTER	Enter	enter is pressed
BACK	Back	back is pressed (from version 5.5.0)
MOUSE_MOVE	MouseMove	(LG magic) remote moved (from version 5.5.0)
WHEEL_UP	WheelUp	remote wheel scrolled up (from version 5.5.0)
WHEEL_DOWN	WheelDown	remote wheel scrolled down
PLAY	Play	play is pressed
PAUSE	Pause	pause is pressed
TOGGLE_PLAY_PAUSE	Play/Pause	a button that cycle between play and pause is pressed
FAST_FORWARD	FastForward	ff is pressed
FAST_REWIND	FastRewind	rewind is pressed
OPEN_SUBTITLE	OpenSubtitle	shortcut to open subtitles/cc
OPEN_TIMELINE_EVENT_LIST	OpenTimelineEventList	shortcut to timeline events list
OPEN_VIDEO_LIST_MODE	OpenVideoListMode	shortcut to videoList
OPEN_AUDIO_PANEL	OpenAudioPanel	shortcut to audio panels
TAB_NAV	TabNavigation	tab navigation
TAB_BACK_NAV	TabBackNav	inverse tab navigation
PLAY_FORCED	PlayForced	shortcut to force play
PAUSE_FORCED	PauseForced	shortcut to force pause
SKIP_FORWARD_FORCED	SkipForwardForced	shortcut to force skip forward
SKIP_BACKWARD_FORCED	SkipBackwardForced	shortcut to force skip backward
OPEN_SETTINGS_FORCED	OpenSettingsForced	shortcut to force open settings panel
OPEN_AUDIO_PANEL_FORCED	SkipBackwardForced	shortcut to force open audio panel
OPEN_SUBTITLE_FORCED	OpenSubtitleForced	shortcut to force open subtitles/cc panel
OPEN_VIDEO_LIST_MODE_FORCED	OpenVideoListMode	shortcut to force open videolist panel

Code example

Web TV React

** useCustomRemote.ts **

import { useCallback, useEffect, useRef } from "react";
import { DivaAPI, Key, Keys } from "@deltatre-vxp/diva-webtv-sdk/generic";

/**
 * In this example it is used a map keyCode to DIVA WebTv possible reactions
 */
const customRemoteKeysRef: Record<string, Key> = {
  "179": Keys.TOGGLE_PLAY_PAUSE,
  "228": Keys.FAST_FORWARD,
  "227": Keys.FAST_REWIND,

  "40": Keys.ARROW_DOWN,
  "38": Keys.ARROW_UP,
  "37": Keys.ARROW_LEFT,
  "39": Keys.ARROW_RIGHT,
  "13": Keys.ENTER,
  "27": Keys.BACK,
};

export const useCustomRemote = () => {
  const divaApiRef = useRef<DivaAPI | undefined>(undefined);

  useEffect(() => {
    const onKeyPress = (e: KeyboardEvent) => {
      const sckp = divaApiRef.current?.sendCustomKeypress;
      const resultingKey = customRemoteKeysRef[`${e.keyCode}`] as unknown as
        | Key
        | undefined;
      if (resultingKey) {
        e.preventDefault();
        e.stopPropagation();
        sckp?.(resultingKey, e);
      }
    };
    window.addEventListener("keydown", onKeyPress);
    const onKeyUp = (e: globalThis.KeyboardEvent) => {
      const sckp = divaApiRef.current?.sendCustomKeypress;
      e.preventDefault();
      e.stopPropagation();
      sckp?.(Keys.ON_KEYUP, e);
    };
    window.addEventListener("keyup", onKeyUp);
    return () => {
      window.removeEventListener("keydown", onKeyPress);
      window.addEventListener("keyup", onKeyUp);
    };
  }, [divaApiRef]);

  const setApi = useCallback(
    (api: DivaAPI) => {
      divaApiRef.current = api;
    },
    [divaApiRef]
  );

  return {
    divaApiRef,
    setApi,
  };
};

** App.tsx **

import { DivaWebTV } from "@deltatre-vxp/diva-webtv-sdk/generic";
import { useCustomRemote } from "./useCustomRemote";
// ...

const Player = () => {
  // ...

  const { setApi } = useCustomRemote();

  return (
    <DivaWebTV
      // ...
      setApi={setApi}
      keyboardActive={false}
      remoteActive={false}
      // ...
    />
  );
};

Web TV Vanilla

** app.ts **

import {
  createDivaWebTV,
  Key,
  Keys,
} from "@deltatre-vxp/diva-webtv-sdk/generic";

/**
 * In this example it is used a map keyCode to DIVA WebTv possible reactions
 */
const customRemoteKeysRef: Record<string, Key> = {
  "179": Keys.TOGGLE_PLAY_PAUSE,
  "228": Keys.FAST_FORWARD,
  "227": Keys.FAST_REWIND,

  "40": Keys.ARROW_DOWN,
  "38": Keys.ARROW_UP,
  "37": Keys.ARROW_LEFT,
  "39": Keys.ARROW_RIGHT,
  "13": Keys.ENTER,
  "27": Keys.BACK,
};

let divaApiRef: undefined | DivaAPI;

const onKeyPress = (e: KeyboardEvent) => {
  const sckp = divaApiRef?.sendCustomKeypress;
  const resultingKey = customRemoteKeysRef[`${e.keyCode}`] as unknown as
    | Key
    | undefined;
  if (resultingKey) {
    e.preventDefault();
    e.stopPropagation();
    sckp?.(resultingKey, e);
  }
};
window.addEventListener("keydown", onKeyPress);
const onKeyUp = (e: globalThis.KeyboardEvent) => {
  const sckp = divaApiRef?.sendCustomKeypress;
  e.preventDefault();
  e.stopPropagation();
  sckp?.(Keys.ON_KEYUP, e);
};
window.addEventListener("keyup", onKeyUp);

const setApi = (api: DivaAPI) => {
  divaApiRef = api;
};

const diva = new createDivaWebTV(el, {
  // ...
  setApi: setApi,
  keyboardActive: false,
  remoteActive: false,
  // ...
});

Note: it is suggested to disable standard remote navigation (remoteActive) and keyboard (keyboardActive) navigation to prevent that DIVA standard key configuration take the triggers for other tasks