☰

Youtube Save/Resume Progress

Have you ever closed a YouTube video by accident, or have you gone to another one and when you come back the video starts from 0? With this extension it won't happen anymore

// ==UserScript==
// @license MIT
// @name         Youtube Save/Resume Progress
// @namespace    http://tampermonkey.net/
// @version      1.5
// @description  Have you ever closed a YouTube video by accident, or have you gone to another one and when you come back the video starts from 0? With this extension it won't happen anymore
// @author       Costin Alexandru Sandu
// @match        https://www.youtube.com/watch*
// @icon         https://tse4.mm.bing.net/th/id/OIG3.UOFNuEtdysdoeX0tMsVU?pid=ImgGn
// @grant        none
// ==/UserScript==

(function () {
  'strict'
  var configData = {
    savedProgressAlreadySet: false,
    savingInterval: 1500,
    currentVideoId: null,
    lastSaveTime: 0,
    dependenciesURLs: {
      floatingUiCore: 'https://cdn.jsdelivr.net/npm/@floating-ui/core@1.6.0',
      floatingUiDom: 'https://cdn.jsdelivr.net/npm/@floating-ui/dom@1.6.3',
      fontAwesomeIcons: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css'
    }
  }

  var FontAwesomeIcons = {
    trash: ['fa-solid', 'fa-trash-can']
  }

  function createIcon(iconName, color) {
    const icon = document.createElement('i')
    const cssClasses = FontAwesomeIcons[iconName]
    icon.classList.add(...cssClasses)
    icon.style.color = color
    
    return icon
  }
  // ref: https://stackoverflow.com/questions/3733227/javascript-seconds-to-minutes-and-seconds
  function fancyTimeFormat(duration) {
    // Hours, minutes and seconds
    const hrs = ~~(duration / 3600);
    const mins = ~~((duration % 3600) / 60);
    const secs = ~~duration % 60;

    // Output like "1:01" or "4:03:59" or "123:03:59"
    let ret = "";

    if (hrs > 0) {
      ret += "" + hrs + ":" + (mins < 10 ? "0" : "");
    }

    ret += "" + mins + ":" + (secs < 10 ? "0" : "");
    ret += "" + secs;

    return ret;
  }

  function executeFnInPageContext(fn) {
    const fnStringified = fn.toString()
    return window.eval('(' + fnStringified + ')' + '()')
  }

  function getVideoCurrentTime() {
    const currentTime = executeFnInPageContext(() => {
      const player = document.querySelector('#movie_player')
      return player.getCurrentTime()
    })
    return currentTime
  }

  function getVideoName() {
    const videoName = executeFnInPageContext(() => {
      const player = document.querySelector('#movie_player')
      return player.getVideoData().title
    })
    return videoName
  }

  function getVideoId() {
    if (configData.currentVideoId) {
      return configData.currentVideoId
    }
    const id = executeFnInPageContext(() => {
      const player = document.querySelector('#movie_player')
      return player.getVideoData().video_id
    })
    return id
  }

  function playerExists() {
    const exists = executeFnInPageContext(() => {
      const player = document.querySelector('#movie_player')
      return Boolean(player)
    })
    return exists
  }

  function setVideoProgress(progress) {
    window.eval('var progress =' + progress)
    executeFnInPageContext(() => {
      const player = document.querySelector('#movie_player')
      player.seekTo(window.progress)
    })
    window.eval('delete progress')
  }

  function updateLastSaved(videoProgress) {
    const lastSaveEl = document.querySelector('.last-save-info-text')
    if (lastSaveEl) {
      lastSaveEl.innerHTML = "Last save at " + fancyTimeFormat(videoProgress)
    }
  }

  function saveVideoProgress() {
    const videoProgress = getVideoCurrentTime()
    const videoId = getVideoId()

    configData.currentVideoId = videoId
    configData.lastSaveTime = Date.now()
    updateLastSaved(videoProgress)
    const idToStore = 'Youtube_SaveResume_Progress-' + videoId
    const progressData = {
      videoProgress,
      saveDate: Date.now(),
      videoName: getVideoName()
    }
    
    window.localStorage.setItem(idToStore, JSON.stringify(progressData))
  }
  function getSavedVideoList() {
    const savedVideoList = Object.entries(window.localStorage).filter(([key, value]) => key.includes('Youtube_SaveResume_Progress-'))
    return savedVideoList
  }

  function getSavedVideoProgress() {
    const videoId = getVideoId()
    const idToStore = 'Youtube_SaveResume_Progress-' + videoId
    const savedVideoData = window.localStorage.getItem(idToStore)
    const { videoProgress } = JSON.parse(savedVideoData) || {}

    return videoProgress
  }

  function videoHasChapters() {
    const chaptersSection = document.querySelector('.ytp-chapter-container[style=""]')
    const chaptersSectionDisplay = getComputedStyle(chaptersSection).display 
    return chaptersSectionDisplay !== 'none'
  }

  function setSavedProgress() {
    const savedProgress = getSavedVideoProgress();
    setVideoProgress(savedProgress)
    configData.savedProgressAlreadySet = true
  }

  // code ref: https://stackoverflow.com/questions/5525071/how-to-wait-until-an-element-exists
  function waitForElm(selector) {
    return new Promise(resolve => {
      if (document.querySelector(selector)) {
        return resolve(document.querySelector(selector));
      }

      const observer = new MutationObserver(mutations => {
        if (document.querySelector(selector)) {
          observer.disconnect();
          resolve(document.querySelector(selector));
        }
      });

      // If you get "parameter 1 is not of type 'Node'" error, see https://stackoverflow.com/a/77855838/492336
      observer.observe(document.body, {
        childList: true,
        subtree: true
      });
    });
  }

  async function onPlayerElementExist(callback) {
    await waitForElm('#movie_player')
    callback()
  }

  function isReadyToSetSavedProgress() {
    return !configData.savedProgressAlreadySet && playerExists() && getSavedVideoProgress()
  }
  function insertInfoElement(element) {
    const leftControls = document.querySelector('.ytp-left-controls')
    leftControls.appendChild(element)
  }
  function insertInfoElementInChaptersContainer(element) {
    const chaptersContainer = document.querySelector('.ytp-chapter-container[style=""]')
    chaptersContainer.style.display = 'flex'
    chaptersContainer.appendChild(element)
  }
  function updateFloatingSettingsUi() {
    const settingsButton = document.querySelector('.ysrp-settings-button')
    const settingsContainer = document.querySelector('.settings-container')
    const { flip, computePosition } = window.FloatingUIDOM
    computePosition(settingsButton, settingsContainer, { 
      placement: 'top',
      middleware: [flip()]
    }).then(({x, y}) => {
      Object.assign(settingsContainer.style, {
        left: `${x}px`,
        top: `${y}px`,
      });
    });

  }


  function setFloatingSettingsUi() {
    const settingsButton = document.querySelector('.ysrp-settings-button')
    const settingsContainer = document.querySelector('.settings-container')

    executeFnInPageContext(updateFloatingSettingsUi)

    settingsButton.addEventListener('click', () => {
      settingsContainer.style.display = settingsContainer.style.display === 'none' ? 'flex' : 'none'
      if (settingsContainer.style.display === 'flex') {
        executeFnInPageContext(updateFloatingSettingsUi)
      }
    })
  }
  
  function createSettingsUI() {
    const videos = getSavedVideoList()
    const videosCount = videos.length
    const infoElContainer = document.querySelector('.last-save-info-container')
    const infoElContainerPosition = infoElContainer.getBoundingClientRect()
    const settingsContainer = document.createElement('div')
    settingsContainer.classList.add('settings-container')

    const settingsContainerHeader = document.createElement('div')
    const settingsContainerHeaderTitle = document.createElement('h3')
    settingsContainerHeaderTitle.textContent = 'Saved Videos - (' + videosCount + ')'
    settingsContainerHeader.style.display = 'flex'
    settingsContainerHeader.style.justifyContent = 'space-between'

    const settingsContainerBody = document.createElement('div')
    settingsContainerBody.classList.add('settings-container-body')
    const settingsContainerBodyStyle = {
      display: 'flex',
      flex: '1',
      minHeight: '0',
      overflow: 'scroll'
    }
    Object.assign(settingsContainerBody.style, settingsContainerBodyStyle)

    const videosList = document.createElement('ul')
    videosList.style.display = 'flex'
    videosList.style.flexDirection = 'column'
    videosList.style.rowGap = '1rem'
    videosList.style.listStyle = 'none'
    videosList.style.marginTop = '1rem'

    videos.forEach(video => {
      const [key, value] = video
      const { videoName } = JSON.parse(value)
      const videoEl = document.createElement('li')
      const videoElText = document.createElement('span')
      videoEl.style.display = 'flex'
      videoEl.style.alignItems = 'center'

      videoElText.textContent = videoName
      videoElText.style.flex = '1'

      const deleteButton = document.createElement('button')
      const trashIcon = createIcon('trash', '#e74c3c')
      deleteButton.style.background = 'white'
      deleteButton.style.border = 'rgba(0, 0, 0, 0.3) 1px solid'
      deleteButton.style.borderRadius = '.5rem'
      deleteButton.style.marginLeft = '1rem'
      deleteButton.style.cursor = 'pointer'
      
      deleteButton.addEventListener('click', () => {
        window.localStorage.removeItem(key)
        videosList.removeChild(videoEl)
        settingsContainerHeaderTitle.textContent = 'Saved Videos - (' + (videosList.children.length) + ')'
      })

      deleteButton.appendChild(trashIcon)
      videoEl.appendChild(videoElText)
      videoEl.appendChild(deleteButton)
      videosList.appendChild(videoEl)
    })

    const settingsContainerCloseButton = document.createElement('button')
    settingsContainerCloseButton.textContent = 'x'
    settingsContainerCloseButton.addEventListener('click', () => {
      settingsContainer.style.display = 'none'
    })

    const settingsContainerStyles = {
      all: 'initial',
      position: 'absolute',
      fontFamily: 'inherit',
      flexDirection: 'column',
      top: '0',
      display: 'none',
      boxShadow: 'rgba(0, 0, 0, 0.24) 0px 3px 8px',
      border: '1px solid #d5d5d5',
      top: infoElContainerPosition.bottom + 'px',
      left: infoElContainerPosition.left + 'px',
      padding: '1rem',
      width: "50rem",
      height: '25rem',
      borderRadius: '.5rem',
      background: 'white',
      zIndex: '3000'
    }

    Object.assign(settingsContainer.style, settingsContainerStyles)
    settingsContainerBody.appendChild(videosList)
    settingsContainerHeader.appendChild(settingsContainerHeaderTitle)
    settingsContainerHeader.appendChild(settingsContainerCloseButton)
    settingsContainer.appendChild(settingsContainerHeader)
    settingsContainer.appendChild(settingsContainerBody)
    document.body.appendChild(settingsContainer)

    const savedVideos = getSavedVideoList()
    const savedVideosList = document.createElement('ul')
    

  }

  function createInfoUI() {

    const infoElContainer = document.createElement('div')
    infoElContainer.classList.add('last-save-info-container')
    const infoElText = document.createElement('span')
    const settingsButton = document.createElement('button')
    settingsButton.classList.add('ysrp-settings-button')

    settingsButton.style.background = 'white'
    settingsButton.style.border = 'rgba(0, 0, 0, 0.3) 1px solid'
    settingsButton.style.borderRadius = '.5rem'
    settingsButton.style.marginLeft = '1rem'

    const infoEl = document.createElement('div')
    infoEl.classList.add('last-save-info')
    infoElText.textContent = "Last save at :"
    infoElText.classList.add('last-save-info-text')
    infoEl.appendChild(infoElText)
    infoEl.appendChild(settingsButton)



    infoElContainer.style.all = 'initial'
    infoElContainer.style.fontFamily = 'inherit'
    infoElContainer.style.fontSize = '1.3rem'
    infoElContainer.style.marginLeft = '0.5rem'
    infoElContainer.style.display = 'flex'
    infoElContainer.style.alignItems = 'center'

    infoEl.style.textShadow = 'none'
    infoEl.style.background = 'white'
    infoEl.style.color = 'black'
    infoEl.style.padding = '.5rem'
    infoEl.style.borderRadius = '.5rem'
    
    infoElContainer.appendChild(infoEl)
    
    return infoElContainer
  }
  
  async function onChaptersReadyToMount(callback) {
    await waitForElm('.ytp-chapter-container[style=""]')
    callback()
  }

  function addFontawesomeIcons() {
    const head = document.getElementsByTagName('HEAD')[0];
    const iconsUi = document.createElement('link');
    Object.assign(iconsUi, {
      rel: 'stylesheet',
      type: 'text/css',
      href: configData.dependenciesURLs.fontAwesomeIcons
    })

    head.appendChild(iconsUi);
    iconsUi.addEventListener('load', () => {
      const icon = document.createElement('span')
      
      const settingsButton = document.querySelector('.ysrp-settings-button')
      settingsButton.appendChild(icon)
      icon.classList.add('fa-solid')
      icon.classList.add('fa-gear')
    })
  }
  function addFloatingUIDependency() {
    const floatingUiCore = document.createElement('script')
    const floatingUiDom = document.createElement('script')
    floatingUiCore.src = configData.dependenciesURLs.floatingUiCore
    floatingUiDom.src = configData.dependenciesURLs.floatingUiDom
    document.body.appendChild(floatingUiCore)
    document.body.appendChild(floatingUiDom)
    let floatingUiCoreLoaded = false
    let floatingUiDomLoaded = false
    
    floatingUiCore.addEventListener('load', () => {
      floatingUiCoreLoaded = true
      if (floatingUiCoreLoaded && floatingUiDomLoaded) {
        setFloatingSettingsUi()
      }
    })
    floatingUiDom.addEventListener('load', () => {
      floatingUiDomLoaded = true
      if (floatingUiCoreLoaded && floatingUiDomLoaded) {
        setFloatingSettingsUi()
      }
    })
  }

  function initializeDependencies() {
    addFontawesomeIcons()
    addFloatingUIDependency()
  }
  
  function initializeUI() {
    const infoEl = createInfoUI()
    insertInfoElement(infoEl)
    createSettingsUI()

    initializeDependencies()

    onChaptersReadyToMount(() => {
      insertInfoElementInChaptersContainer(infoEl)
      createSettingsUI()
    })
  }

  

  function initialize() {
    onPlayerElementExist(() => {
      initializeUI()
      if (isReadyToSetSavedProgress()) {
        setSavedProgress()
      }
    })

    setInterval(saveVideoProgress, configData.savingInterval)
  }

  initialize()
})();