Store video.currentTime locally
// ==UserScript==
// @name Youtube - Resumer
// @namespace http://tampermonkey.net/
// @version 1.2
// @description Store video.currentTime locally
// @author You
// @match https://www.youtube.com/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=youtube.com
// @grant GM.setValue
// @grant GM.getValue
// @grant GM_addStyle
// @license MIT
// ==/UserScript==
function l(...args){
console.log('[Resumer]', ...args)
}
function videoId(url=document.URL){
return new URL(url).searchParams.get('v')
}
let lastTimeInSeconds
function save(video, id){
const seconds = Math.floor(video.currentTime)
if(lastTimeInSeconds != seconds){ // save less often
let completion = video.currentTime / video.duration
GM.setValue(id, video.currentTime)
GM.setValue(id + '-completion', completion)
}
lastTimeInSeconds = seconds
}
function findVideo(onVideoFound){
const observer = new MutationObserver((mutations, observer) => {
// Keep trying to find video
let video = document.querySelector('video.video-stream')
if(video){
onVideoFound(video)
observer.disconnect()
}
})
observer.observe(document, {childList:true, subtree:true})
}
let id = videoId() //if you use the miniplayer the url no longer includes the video id
function listen(video){
let lastSrc
function handleTimeUpdate(){
//Video source is '' and duration is NaN when going back to the home page
//When loading a new video, the event is fired with currentTime 0 and duration NaN
if(video.src && !isNaN(video.duration)){
l('timeupdate', id, lastId, video.src, lastSrc)
if(id){
save(video, id)
lastSrc = video.src
}else if(video.src === lastSrc){ //in case you click another video while using the miniplayer
save(video, lastId) //save even if in miniplayer
}
}
}
video.addEventListener('timeupdate', handleTimeUpdate)
return () => {
video.removeEventListener('timeupdate', handleTimeUpdate)
}
}
async function resume(video){
id = videoId() // set id here because in firefox the url changes before navigate-finish completes
let lastTime = await GM.getValue(id)
if(lastTime){
if(lastTime < video.duration - 1){
l('resuming', id, video.currentTime, lastTime)
video.currentTime = lastTime
}else{
l('nearly complete, skipping resume for', id);
}
}else{
l('new video', video.currentTime)
}
}
function cleanUrl(){
//Remove t paramater when opening a video that had a progress bar
let url = new URL(document.URL)
url.searchParams.delete('t')
window.history.replaceState(null, null, url)
}
let lastId // don't resume if going back to same page from miniplayer
// Event for each page change
document.addEventListener("yt-navigate-finish", () => {
l('navigate-finish', lastId, videoId())
// video page
if(videoId() && lastId !== videoId()) {
lastId = videoId()
cleanUrl()
let removeListeners
findVideo(video => {
resume(video)
// clean previous listeners
if(removeListeners) removeListeners()
removeListeners = listen(video)
})
}
})
/////////////////////
function addProgressBar(thumbnail, completion){
let overlays = thumbnail.querySelector('#overlays')
let existingProgressBar = thumbnail.querySelector('ytd-thumbnail-overlay-resume-playback-renderer')
if(!existingProgressBar) {
let parent = document.createElement('div')
parent.innerHTML = `
<ytd-thumbnail-overlay-resume-playback-renderer class="style-scope ytd-thumbnail">
<div id="progress" class="style-scope ytd-thumbnail-overlay-resume-playback-renderer" style="width: 100%"></div>
</ytd-thumbnail-overlay-resume-playback-renderer>
`
overlays.appendChild(parent.children[0])
}
// style
let progress = overlays.querySelector('#progress')
let width = parseInt(completion * 100)
progress.style.width = `${width}%`
progress.style.backgroundColor = 'blue'
}
function progressBars(){
// Add progress bars in the related section
const observer = new MutationObserver(async (mutations, observer) => {
for(let mutation of mutations){
if(mutation.addedNodes.length > 0) {
let thumbnails = mutation.target.querySelectorAll('a.ytd-thumbnail')
for(let thumbnail of thumbnails){
let href = thumbnail.href
if(href) {
let id = videoId(href)
let completion = await GM.getValue(id + '-completion')
if(completion) {
addProgressBar(thumbnail, completion)
}
}
}
}
}
})
observer.observe(document, {childList:true, subtree:true})
}
progressBars() // TODO doesn't always work