Youtube playlist duration

youtube-playlist-duration.js

// Just copy this into console while on a playlist page (https://www.youtube.com/playlist?list=.....)

alert(((document) => {
  let seconds = Array.from(document.querySelectorAll('.pl-video-time .timestamp span'))
  .map((span) => {
    let time = span.textContent.split(':');
    return (Number(time[0]) * 60) + Number(time[1]);
  })
  .reduce((a,b) => {
    return a + b;
  });
  let total = {
    hours: Math.floor(seconds/(3600)),
    minutes: Math.floor((seconds%3600)/60),
    seconds: (seconds%60)
  };
  return 'Playlist duration: ' + total.hours + ' hours, ' + total.minutes + ' minutes, ' + total.seconds + ' seconds';
})(document));

Add &disable_polymer=1 to switch back to old YT design where this works

Fix for videos longer than one hour:

  .map((span) => {
    let time = span.textContent.split(':');
    return time.reduce((a, b) => a*60 + Number(b));
  })

To sort all videos by length:

document.querySelector('#pl-video-list tbody').innerHTML =
Array.from(document.querySelectorAll('.pl-video'))
.map((plv) => {
	let span = plv.querySelector('.pl-video-time .timestamp span');
	let time = span.textContent.split(':');
    let secs = 0;
    while (time.length) secs = secs * 60 + Number(time.shift());
	return {html: plv.outerHTML, len: secs};
})
.sort((xv, yv) => xv.len - yv.len)
.map(v => v.html)
.join('')

Add &disable_polymer=1 to switch back to old YT design where this works

YT's query parameter disable_polymer is now deprecated, hence the new CSS selector is span.ytd-thumbnail-overlay-time-status-renderer.