Eurosport Player Keyboard navigation

me-vs-europsport.js

(() => {
  const select = (selector) => () => document.querySelector(selector);

  const overlay = select('[class*="overlay-overlay"]');
  const controls = select('[class*="styles-centerControls"]');
  const pause = select('[class*="playpause"]');
  const forward = select('[class*="styles-forward"]');
  const rewind = select('[class*="styles-rewind"]');
  const live = select('[class*="tyles-liveView"]');
  const fullScreen = select(
    '[class*="styles-subControlsRight"] > div > div:last-child'
  );
  const mute = select(
    '[class^="styles-controlWrapper"] [class^="styles-wrapper"] div div'
  );


  const keymap = {
    Space: () => pause()?.click(),
    ArrowRight: () => forward()?.click(),
    ArrowLeft: () => rewind()?.click(),
    KeyL: () => live && live()?.click(),
    KeyF: () => fullScreen()?.click(),
    KeyM: () => mute()?.click(),
  };

  if (controls) {
    controls().style.transform = 'translateY(20vh) scale(0.3)';
    overlay().style.display = 'none';

    document.addEventListener('keydown', (ev) => {
      const action = keymap[ev.code];
      action && action();
    });
  }
})();