Full Example

<main>
  <header class="header">
    <h1>HTML OVERLAY SDK TEST</h1>
    <h3 class="display-when-ready" style="display: none;">
      Playlist Name: <b id="overlayPlaylistName"></b> | Current Page: <b id="overlayPageName"></b>
    </h3>
    <div class="buttons-wrapper">
      Playlist Playback:&nbsp;
      <button id="overlayPauseBtn">Pause</button>
      <button id="overlayPlayBtn">Play</button>
      <button id="overlayRestartBtn">Restart</button>
    </div>
  </header>

  <section class="right-sidebar display-when-ready" style="display: none;">
    <nav>
      <h3>Pages:</h3>
      <ol id="overlayPagesList"></ol>
    </nav>
    <div class="to-page-by-name">
      <label for="overlayToPageNameInput">Go to page by Page Name (Description)</label>
      <input type="text" id="overlayToPageNameInput" />
      <button id="overlayToPageNameBtn">Go</button>
    </div>
    <div class="buttons-wrapper">
      <button id="overlayPrevPageBtn">&laquo; Prev Page</button>
      <button id="overlayNextPageBtn">Next Page &raquo;</button>
    </div>
  </section>

  <footer class="footer display-when-ready" style="display: none;">
    <p>
      <label for="overlayProxyGetInput">Get resource by proxy</label>
      <input type="url" id="overlayProxyGetInput" />
      <button id="overlayProxyGetBtn">Proxy Get</button>      
    </p>
  </footer>  
</main>

<style>
html, body {
  margin: 0;
}
body {
  color: #222;
  font-family: sans-serif;
  font-size: 12px;
  position: relative;
}

main {
  position: fixed;
  z-index: 0;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-areas:
    "header right"
    "main right"
    "footer right";
  grid-template-columns: 4fr 1fr;
  grid-template-rows: 15% auto 10%;
}

h1 {
  font-size: 18px;
  margin: 0;
  padding: 0;
  line-height: 180%;
}

h3 {
  font-size: 16px;
  margin: 0;
  padding: 0;
  font-weight: normal;
  line-height: 150%;
}

.header,
.right-sidebar,
.footer {
  padding: 2vmin;
}

.header,
.footer {
  background: rgba(255, 255, 255, 0.35);
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: flex-start;
}

.header {
  grid-area: header;
}

.right-sidebar {
  grid-area: right;
  color: #fff;
  text-shadow: 0 0.15em 0.05em rgba(0, 0, 0, 0.5);
  background: rgba(0, 0, 0, 0.35);
  padding-bottom: 4vmin;

  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: stretch;
  overflow: hidden;
}

.footer {
  grid-area: footer;
  padding-bottom: 4vmin;
}

.header .buttons-wrapper {
  padding: 0.5em 0 0 0;
}

.right-sidebar nav {
  flex: 1 1 0.0001px;
  overflow-x: hidden;
  overflow-y: auto;
}

#overlayPagesList {
  margin: 0;
  padding: 0 0 0 1.2em;
}

#overlayPagesList li {
  padding: 0.3em 0;
}

.to-page-by-name,
.right-sidebar .buttons-wrapper {
  margin-top: 1vmin;
  padding-top: 1vmin;
  border-top: 1px solid rgba(0, 0, 0, 0.5);
}

.to-page-by-name label {
  display: block;
  padding-bottom: 0.3em;
}

.right-sidebar .buttons-wrapper {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
}
</style>


<script>
window.onloadTelemetryTV = function ttvSdkOnLoadFunc (ttvSDK) {
  console.warn('onloadTelemetryTV:', ttvSDK)

  console.log('SDK Loaded. Using Playlist:', ttvSDK.playlist.name)

  const overlayPauseBtn = document.getElementById('overlayPauseBtn')
  if (overlayPauseBtn) {
    overlayPauseBtn.addEventListener('click', function () {
      window.console.log('Clicked on pause button')
      if (ttvSDK.playlist && ttvSDK.playlist.pause) {
        ttvSDK.playlist.pause()
      }
    })
  }

  const overlayPlayBtn = document.getElementById('overlayPlayBtn')
  if (overlayPlayBtn) {
    overlayPlayBtn.addEventListener('click', function () {
      window.console.log('Clicked on play button')
      if (ttvSDK.playlist && ttvSDK.playlist.play) {
        ttvSDK.playlist.play()
      }
    })
  }

  const overlayRestartBtn = document.getElementById('overlayRestartBtn')
  if (overlayRestartBtn) {
    overlayRestartBtn.addEventListener('click', function () {
      window.console.log('Clicked on restart button')
      if (ttvSDK.player && ttvSDK.player.restart) {
        ttvSDK.player.restart()
      }
    })
  }

  const overlayNextPageBtn = document.getElementById('overlayNextPageBtn')
  if (overlayNextPageBtn) {
    overlayNextPageBtn.addEventListener('click', function () {
      window.console.log('Clicked on Next Page button')
      if (ttvSDK.playlist && ttvSDK.playlist.nextPage) {
        ttvSDK.playlist.nextPage()
      }
    })
  }

  const overlayPrevPageBtn = document.getElementById('overlayPrevPageBtn')
  if (overlayPrevPageBtn) {
    overlayPrevPageBtn.addEventListener('click', function () {
      window.console.log('Clicked on Prev Page button')
      if (ttvSDK.playlist && ttvSDK.playlist.previousPage) {
        ttvSDK.playlist.previousPage()
      }
    })
  }

  function updatePlaylistName (newPlaylist) {
    const overlayPlaylistName = document.getElementById('overlayPlaylistName')
    newPlaylist = newPlaylist || ttvSDK.playlist
    if (overlayPlaylistName && newPlaylist) {
      overlayPlaylistName.innerText = newPlaylist.name
    }
  }

  function updatePageName (newPage) {
    const overlayPageName = document.getElementById('overlayPageName')
    newPage = newPage || ttvSDK.page
    if (overlayPageName && newPage) {
      overlayPageName.innerText = newPage.name
    }
  }

  updatePlaylistName()
  updatePageName()

  const overlayPagesList = document.getElementById('overlayPagesList')
  overlayPagesList.innerHTML = ''

  const goToPageByID = function goToPageByID (evt) {
    window.console.log('click goToPageByID', evt)
    if (ttvSDK.playlist && ttvSDK.playlist.goToPageId) {
      const target = evt.target
      const pageID = target.getAttribute('data-pageid')
      const pageName = target.getAttribute('data-pagename')
      window.console.log(`Clicked on ${pageName} page (${pageID})`)
      ttvSDK.playlist.goToPageId(pageID)
    }
  }

  if (ttvSDK && ttvSDK.playlist && ttvSDK.playlist.pages && ttvSDK.playlist.pages.length) {
    ttvSDK.playlist.pages.forEach(pg => {
      const li = document.createElement('li')
      li.setAttribute('title', `Click to go to page (id: ${pg.id})`)
      li.setAttribute('data-pageid', pg.id)
      li.setAttribute('data-pagename', pg.description)
      li.innerText = pg.description
      li.style.cursor = 'pointer'
      li.addEventListener('click', goToPageByID)
      overlayPagesList.appendChild(li)
    })
  }

  const overlayToPageNameBtn = document.getElementById('overlayToPageNameBtn')
  if (overlayToPageNameBtn) {
    overlayToPageNameBtn.addEventListener('click', function () {
      const overlayToPageNameInput = document.getElementById('overlayToPageNameInput')
      if (!overlayToPageNameInput) { return }
      const targetName = overlayToPageNameInput.value
      if (!targetName || !targetName.trim().length) { return }
      console.log('Trying to go to page name', targetName)
      ttvSDK.playlist.goToPageName(targetName)
    })
  }

  const overlayProxyGetBtn = document.getElementById('overlayProxyGetBtn')
  if (overlayProxyGetBtn) {
    overlayProxyGetBtn.addEventListener('click', function () {
      window.console.log('Clicked on Proxy Get button')

      const overlayProxyGetInput = document.getElementById('overlayProxyGetInput')
      if (!overlayProxyGetInput) { return }
      const resourceURL = overlayProxyGetInput.value
      if (!resourceURL || !resourceURL.trim().length) { return }
      console.log('Trying to get resource by URL', resourceURL)
      ttvSDK.get(resourceURL, 60).then(res => {
        console.log(`get resource from "${resourceURL}" -----\n\n`, res)
      }).catch(err => {
        console.warn(`Error getting resource from "${resourceURL}"`, err)
      })
    })
  }

  const elmsToDisplay = document.querySelectorAll('.display-when-ready')
  Array.prototype.forEach.call(elmsToDisplay, (elm) => {
    elm.style.display = ''
  })

  const onApiChange = function onApiChange (status) {
    window.console.warn(`The API Status Changed! (${status})`)
  }
  ttvSDK.onApiStatusChange(onApiChange)

  const onPageChange = function onPageChange (newPage) {
    ttvSDK.log(`onPageChange - to ${newPage.name} (${newPage.id})`)
    updatePageName(newPage)
  }
  ttvSDK.onPageChange(onPageChange)

  const onPlaylistChange = function onPlaylistChange (newPlaylist) {
    ttvSDK.log(`onPlaylistChange - to ${newPlaylist.name} (${newPlaylist.id})`)
    updatePlaylistName(newPlaylist)
  }
  ttvSDK.onPlaylistChange(onPlaylistChange)

  const onGeoChange = function onGeoChange (newGeo) {
    ttvSDK.log(`onGeoChange - to ${JSON.stringify(newGeo || {})})`)
  }
  ttvSDK.onGeoChange(onGeoChange)
}
</script>