I have created simple bookmarklet to view total duration of YouTube playlist since Google has removed this information.
javascript:(function(selection) {
/**
* Converts text label to seconds, eg. "1:23:45" -> 5025
*
* @param label
* @returns seconds
*/
function label2seconds(label) {
return label.trim()
.split(':')
.reverse()
.map((time, idx) => parseInt(time) * [1, 60, 60 * 60][idx])
.reduce((sum, time) => sum + time, 0);
}
// find all duration labels in thumbnails
const labels = document.querySelectorAll('span.ytd-thumbnail-overlay-time-status-renderer');
// convert to seconds and sum
const totalSeconds = Array.prototype.slice.call(labels)
.map(el => label2seconds(el.innerHTML))
.reduce((sum, time) => sum + time, 0);
// format total seconds as HH:MM:SS
const hms = [3600, 60].reduceRight((p, b) => r => [Math.floor(r / b)].concat(p(r % b)), r => [r])(
totalSeconds)
.map(a => a.toString().padStart(2, '0')).join(':');
// show to user
alert(hms);
})()You have to URL encode this code (using eg. https://www.urlencoder.org) and replace javascript%3A with javascript: (the colon should not be escaped):
javascript:%28function%28selection%29%20%7B%0A%0A%20%20%2F%2A%2A%0A%20%20%20%2A%20Converts%20text%20label%20to%20seconds%2C%20eg.%20%221%3A23%3A45%22%20-%3E%205025%0A%20%20%20%2A%0A%20%20%20%2A%20%40param%20label%0A%20%20%20%2A%20%40returns%20seconds%0A%20%20%20%2A%2F%0A%20%20function%20label2seconds%28label%29%20%7B%0A%20%20%20%20return%20label.trim%28%29%0A%20%20%20%20%20%20.split%28%27%3A%27%29%0A%20%20%20%20%20%20.reverse%28%29%0A%20%20%20%20%20%20.map%28%28time%2C%20idx%29%20%3D%3E%20parseInt%28time%29%20%2A%20%5B1%2C%2060%2C%2060%20%2A%2060%5D%5Bidx%5D%29%0A%20%20%20%20%20%20.reduce%28%28sum%2C%20time%29%20%3D%3E%20sum%20%2B%20time%2C%200%29%3B%0A%20%20%7D%0A%0A%20%20%2F%2F%20find%20all%20duration%20labels%20in%20thumbnails%0A%20%20const%20labels%20%3D%20document.querySelectorAll%28%27span.ytd-thumbnail-overlay-time-status-renderer%27%29%3B%0A%0A%20%20%2F%2F%20convert%20to%20seconds%20and%20sum%0A%20%20const%20totalSeconds%20%3D%20Array.prototype.slice.call%28labels%29%0A%20%20%20%20.map%28el%20%3D%3E%20label2seconds%28el.innerHTML%29%29%0A%20%20%20%20.reduce%28%28sum%2C%20time%29%20%3D%3E%20sum%20%2B%20time%2C%200%29%3B%0A%0A%20%20%2F%2F%20format%20total%20seconds%20as%20HH%3AMM%3ASS%0A%20%20const%20hms%20%3D%20%5B3600%2C%2060%5D.reduceRight%28%28p%2C%20b%29%20%3D%3E%20r%20%3D%3E%20%5BMath.floor%28r%20%2F%20b%29%5D.concat%28p%28r%20%25%20b%29%29%2C%20r%20%3D%3E%20%5Br%5D%29%28%0A%20%20%20%20totalSeconds%29%0A%20%20%20%20.map%28a%20%3D%3E%20a.toString%28%29.padStart%282%2C%20%270%27%29%29.join%28%27%3A%27%29%3B%0A%0A%20%20%2F%2F%20show%20to%20user%0A%20%20alert%28hms%29%3B%0A%7D%29%28%29
Add the bookmarklet above to your bookmarks, navigate to YouTube playlist page (https://www.youtube.com/playlist?list=xxx) and click on the bookmark. The dialog with total duration should appear.