ch.js

const video = () => document.querySelector('video');
document.querySelector('progress').style.opacity = 0.35;

const codes = {
  space: 32,
  j: 74,
  k: 75,
  l: 76,
};

document.addEventListener('keydown', e => {
  if (e.keyCode == codes.k) {
    toggle();
  }
  if (e.keyCode == codes.l) forward();
  if (e.keyCode == codes.j) backword();
});

function forward() {
  video().currentTime = video().currentTime + 10;
}

function backword() {
  video().currentTime = video().currentTime - 10;
}

function toggle() {
  video().paused ? video().play() : video().pause();
}

//

const title = document.querySelector('.standard-title');

function run() {
  const video = document.querySelector('video');

  if (!video || video.paused) return;

  const src = video.src;

  const activeLi = document.querySelector(`[href='${src}']`).parentElement;

  activeLi.style.backgroundColor = 'black';

  const titleToBe =
    activeLi.querySelector('.lessons-name') &&
    activeLi.querySelector('.lessons-name').textContent;

  const items = src.split('/');
  // const titleToBe = items[items.length - 1];

  if (titleToBe === title.textContent) return;
  title.textContent = titleToBe || items[items.length - 1];
}

run();
setInterval(run, 20000);