☰

YouTube playback progress memory

memory and resume the playback progress

// ==UserScript==
// @name         YouTube playback progress memory
// @namespace    http://tampermonkey.net/
// @version      1.1
// @description  memory and resume the playback progress
// @author       hhst
// @match        https://www.youtube.com/watch?v=*
// @match        https://m.youtube.com/watch?v=*
// @match        https://www.youtube.com/
// @match        https://m.youtube.com/
// @run-at       document-start
// @icon         https://www.google.com/s2/favicons?sz=64&domain=youtube.com
// @grant        GM_getValue
// @grant        GM_setValue
// @license      MIT
// ==/UserScript==

(function() {
    'use strict';

    const get_page_class = (url) => {
    url = url.toLowerCase()
    if (url.startsWith('https://m.youtube.com') || url.startsWith('https://www.youtube.com')) {
        if (url.includes('shorts')) {
            return 'shorts'
        }
        if (url.includes('watch')) {
            return 'watch'
        }
        if (url.includes('library')) {
            return 'library'
        }
        if (url.includes('subscriptions')) {
            return 'subscriptions'
        }
        if (url.includes('@')) {
            return '@'
        }
        return 'home'
    }
        return 'unknown'
    }

    // return the youtube video id like 'A9oByH9Ci24'
    const get_video_id = (url) => {
        try {
            const match = url.match(/watch\?v=([^&#]+)/)
            return match ? match[1] : null
        } catch (error) {
            console.error('Error getting video ID:', error)
            return null
        }
    }

    const observer = new MutationObserver((mutationsList) => {
        for (const mutation of mutationsList) {
            if (mutation.type === 'childList') {
                mutation.addedNodes.forEach((node) => {
                    if (node.nodeType === 1 && node.classList.contains('video-stream')){
                        console.log("ready to record...")
                        // memory progress
                        node.addEventListener('timeupdate', () => {
                            if (node.currentTime !== 0){
                                GM_setValue('progress-' + get_video_id(location.href), node.currentTime.toString())
                            }
                        })
                    }

                    if (node.id === 'movie_player') {
                        window.last_player_state = -1
                        node.addEventListener('onStateChange', (data) => {
                            /* refers to https://developers.google.com/youtube/iframe_api_reference:
                            onStateChange
                            This event fires whenever the player's state changes. The data property of the event object that the API passes to your event listener function will specify an integer that corresponds to the new player state. Possible values are:
                            -1 (unstarted)
                            0 (ended)
                            1 (playing)
                            2 (paused)
                            3 (buffering)
                            5 (video cued).
                            */
                            console.log(get_video_id(location.href), data, window.last_player_state)
                            if([1, 3].includes(data) && window.last_player_state === -1 && get_page_class(location.href) === 'watch'){
                                console.log("ready to resume...")
                                // resume progress
                                // get the last progress time, default 0
                                const saved_time = GM_getValue('progress-' + get_video_id(location.href)) || '0'
                                console.log("resume to", saved_time)
                                node.seekTo(parseInt(saved_time))
                            }
                            window.last_player_state = data
                        })
                    }
                })
            }
        }
    })

    observer.observe(document.documentElement, {
        childList: true,
        subtree: true
    })

})();