Control Rocketseat video player speed with "<" and ">" keys

player-control.js

const speeds = [0.75, 1, 1.25, 1.5, 1.75, 2];
const select = document.querySelector('.bmpui-ui-playbackspeedselectbox');

document.addEventListener('keypress', e => {
  if (~['<','>'].indexOf(e.key)) {
    const speed = parseFloat(select.selectedOptions[0].value);
    const newSpeed = e.key === '<' ? speeds[speeds.indexOf(speed) - 1] || speeds[0] : speeds[speeds.indexOf(speed) + 1] || speeds[speeds.length - 1];
    const popup = document.createElement('div');
    const event = document.createEvent('HTMLEvents');
    select.selectedOptions[0].value = newSpeed;
    popup.textContent = select.selectedOptions[0].textContent = newSpeed + 'x';
    popup.style.cssText = "position: fixed; left: 50%; bottom: 20px; width: 100px; height: 60px; display: flex; align-items: center; justify-content: center; background-color: rgba(0,0,0,0.75); border-radius: 10px; font: bold 24px sans-serif; color: rgba(255,255,255,0.75);";
    event.initEvent('change', true, true);
    select.dispatchEvent(event);
    document.body.appendChild(popup);
    setTimeout(() => popup.remove(), 1000);
  }
});