Shows the duration of lessons in FrontendMasters in minutes and seconds and the total duration of a section. Can be used as a Chrome snippet.

frontendmasters-lesson-durations.js

const BASE_DATE = new Date();

function setLessonsDuration() {
  let currentGroupTitle;
  let totalTime = 0;

  Array.from(document.querySelectorAll('nav .FMPlayerScrolling li')).forEach(
    (item) => {
      if (item.matches('.lesson-group')) {
        currentGroupTitle = item;
        totalTime = 0;
      } else {
        const timestamp = item.querySelector('.timestamp');
        const diffMilliseconds = getMillisecondsDiff(timestamp.textContent);

        totalTime += diffMilliseconds;
        currentGroupTitle.dataset.totalTime = totalTime;

        timestamp.innerHTML = millisecondsToMinutesAndSeconds(diffMilliseconds);
      }
    }
  );
}

function setGroupsDuration() {
  Array.from(document.querySelectorAll('[data-total-time]')).forEach((item) => {
    const duration = Object.assign(document.createElement('span'), {
      style: 'position: absolute; width: 95%; text-align: right; left: 0',
      textContent: millisecondsToMinutesAndSeconds(
        parseInt(item.dataset.totalTime)
      ),
    });

    item.append(duration);
  });
}

function millisecondsToMinutesAndSeconds(milliseconds) {
  const minutes = Math.floor(milliseconds / 60000);
  const seconds = ((milliseconds % 60000) / 1000).toFixed(0);

  return minutes + ':' + (seconds < 10 ? '0' : '') + seconds;
}

function getMillisecondsDiff(value) {
  const [start, end] = value.split('-');

  return parseTime(end) - parseTime(start);
}

function parseTime(time = '') {
  const [hours, mins, secs] = time.split(':');

  BASE_DATE.setHours(parseInt(hours));
  BASE_DATE.setMinutes(parseInt(mins));
  BASE_DATE.setSeconds(parseInt(secs));

  return BASE_DATE.getTime();
}

setLessonsDuration();
setGroupsDuration();