Step-by-Step Guide to Creating a Video Player for Smart TV Apps

				
					/**
 * Getter for focused html element
 * @returns {html element} focused element
 */
function getFocus() {
  return document.getElementsByClassName("focus")[0].id;
}

/**
 * Setter for focus
 * @param {string} id 
 */
function setFocus(id) {
  if(id === null) return;
  const currentFocus = document.getElementById(getFocus());
  currentFocus.classList.remove("focus");
  document.getElementById(id).classList.add("focus");
}

/**
 * The key press functions
 */
function keyPressUp(focusedId) {
  console.log("You pressed the up key", focusedId);
}

function keyPressDown(focusedId) {
  console.log("You pressed the down key", focusedId);
}

function keyPressLeft(focusedId) {
  console.log("You pressed the left key", focusedId);
  const previous = getPreviousElementId(focusedId);
  if(previous === null) return;
  setFocus(previous);
}

function keyPressRight(focusedId) {
  console.log("You pressed the right key", focusedId);
  const next = getNextElementId(focusedId);
  if(next === null) return;
  setFocus(next);
}

/**
 * Selects item when enter is pressed
 * @param {string} focusedId 
 */
function selectItem(focusedId) {
  console.log("You pressed the enter key", focusedId);
  for(let i = 0; i < carouselItems.length; i++) {
    if(focusedId === carouselItems[i].id) {
      playVideo(carouselItems[i].url);
      break;
    }
  }
}

/**
 * Getter for the next html element
 * @param {string} id 
 * @returns {html element}
 */
function getNextElementId(id) {
  const next = document.getElementById(id).nextElementSibling;
  return next!== null && next.id !== undefined ? next.id : null;
}

/**
 * Getter for the previous html element
 * @param {string} id 
 * @returns 
 */
function getPreviousElementId(id) {
  const previous = document.getElementById(id).previousElementSibling;
  return previous !== null && previous.id !== undefined ? previous.id : null;
}