Next Chapter Button for YouTube

Next Chapter Button for YouTube.

Versione datata 31/12/2021. Vedi la nuova versione l'ultima versione.

Dovrai installare un'estensione come Tampermonkey, Greasemonkey o Violentmonkey per installare questo script.

Dovrai installare un'estensione come Tampermonkey o Violentmonkey per installare questo script.

Dovrai installare un'estensione come Tampermonkey o Violentmonkey per installare questo script.

Dovrai installare un'estensione come Tampermonkey o Userscripts per installare questo script.

Dovrai installare un'estensione come ad esempio Tampermonkey per installare questo script.

Dovrai installare un gestore di script utente per installare questo script.

(Ho già un gestore di script utente, lasciamelo installare!)

Dovrai installare un'estensione come ad esempio Stylus per installare questo stile.

Dovrai installare un'estensione come ad esempio Stylus per installare questo stile.

Dovrai installare un'estensione come ad esempio Stylus per installare questo stile.

Dovrai installare un'estensione per la gestione degli stili utente per installare questo stile.

Dovrai installare un'estensione per la gestione degli stili utente per installare questo stile.

Dovrai installare un'estensione per la gestione degli stili utente per installare questo stile.

(Ho già un gestore di stile utente, lasciamelo installare!)

// ==UserScript==
// @name        Next Chapter Button for YouTube
// @description	Next Chapter Button for YouTube.
// @version     1.0.1
// @author      look997
// @include     https://www.youtube.com/*
// @homepageURL https://greasyfork.org/pl/users/4353-look997
// @namespace	  https://greasyfork.org/pl/users/4353-look997
// @grant       none
// @run-at      document-end
// @resource    metadata https://greasyfork.org/scripts/437859-next-chapter-button-for-youtube/code/Next%20Chapter%20Button%20for%20YouTube.user.js
// @icon        https://www.google.com/s2/favicons?domain=youtube.com
// @icon64      https://www.google.com/s2/favicons?domain=youtube.com
// ==/UserScript==

(function() {
  'use strict';
  
  
  function getSec (href) {
    return Number(new URLSearchParams(href).get("t").replace("s",""))
  }

  function getOb () {
    const allDescriltionLinksEls = document.querySelectorAll("#description .yt-simple-endpoint");

    //console.log("NCB YT allDescriltionLinksEls", allDescriltionLinksEls);

    const timeDescriptionLinksEls = Array.from(allDescriltionLinksEls)
                                      .filter(el=>/^(([0-9]+:)*([0-5]*[0-9]):[0-5][0-9])$/.test(el.textContent.trim()));

    const chaptersSecs = timeDescriptionLinksEls.map( el=>getSec(el.href) );

    const timeLines = document.querySelector("#description .content").textContent.split("\n")
                      .filter(line=>/(([0-9]+:)*([0-5]*[0-9]):[0-5][0-9])/.test(line))
                      .map(line=>line.replace(/(([0-9]+:)*([0-5]*[0-9]):[0-5][0-9])/,"").replace(/^[\s-(){}\.]+/,"").replace(/[\s-(){}\.]+$/,""));
    //console.log("NCB YT timeDescriptionLinksEls", timeDescriptionLinksEls);

    const currentPlayTime = document.querySelector("#movie_player video").currentTime;
    //console.log("NCB YT currentPlayTime",currentPlayTime);

    const reverseCurrentChapterSec = chaptersSecs.map(el=>el).reverse().find(sec=>currentPlayTime>=sec);


    const sum = timeDescriptionLinksEls.length;

    const currentChapterIndex = chaptersSecs.indexOf(reverseCurrentChapterSec);
    const nextChapterIndex = timeDescriptionLinksEls[currentChapterIndex+1]?currentChapterIndex+1:0;
    const prevChapterIndex = timeDescriptionLinksEls[currentChapterIndex-1]?currentChapterIndex-1:sum-1;

    return {timeDescriptionLinksEls, timeLines, currentChapterIndex, currentPlayTime, sum, nextChapterIndex, prevChapterIndex};
  }

  function jumpToNextChapter () {

    const {timeDescriptionLinksEls, nextChapterIndex} = getOb();

    document.querySelector("#movie_player video").currentTime = getSec(timeDescriptionLinksEls[nextChapterIndex].href);
  }

  function jumpToPrevChapter () {

    const {timeDescriptionLinksEls, prevChapterIndex} = getOb();

    document.querySelector("#movie_player video").currentTime = getSec(timeDescriptionLinksEls[prevChapterIndex].href);
  }

  function repeatChapter () {

    const {timeDescriptionLinksEls, currentChapterIndex} = getOb();

    document.querySelector("#movie_player video").currentTime = getSec(timeDescriptionLinksEls[currentChapterIndex].href);
  }


  function getTitle (buttonText, index) {
    const {timeDescriptionLinksEls, timeLines, sum} = getOb();

    const chapterTitle = timeLines[index].trim();
    const chapterTime = timeDescriptionLinksEls[index].textContent.trim();

    const chapter = window.document.documentElement.lang==="pl-PL"?"rozdział":"chapter";

    const title = `${buttonText}\n\n${chapterTitle}\n${chapterTime} ${index+1}/${sum} ${chapter}`;
    return title;
  }

  function setChapterElTitle () {
    const {timeDescriptionLinksEls, nextChapterIndex} = getOb();
    if (timeDescriptionLinksEls.length===0) { return true; }

    const title = getTitle(window.document.documentElement.lang==="pl-PL"?"Odtwórz następny rozdział":"Jump to next chapter", nextChapterIndex);

    nextChapterButtonEl.title = title;
  }

  function setChapterPrevElTitle () {
    const {timeDescriptionLinksEls, prevChapterIndex} = getOb();
    if (timeDescriptionLinksEls.length===0) { return true; }

    const title = getTitle(window.document.documentElement.lang==="pl-PL"?"Odtwórz poprzedni rozdział":"Jump to prev chapter", prevChapterIndex);

    prevChapterButtonEl.title = title;
  }

  function setChapterCurrentElTitle () {
    const {timeDescriptionLinksEls, currentChapterIndex} = getOb();
    if (timeDescriptionLinksEls.length===0) { return true; }

    const title = getTitle(window.document.documentElement.lang==="pl-PL"?"Powtórz aktualny rozdział":"Repeat current chapter", currentChapterIndex);

    repeatChapterButtonEl.title = title;
    currentChapterTitleEl.title = title;
  }

  let nextChapterButtonEl;
  let currentChapterTitleEl;

  let prevChapterButtonEl;
  let repeatChapterButtonEl;

  function start () {
    
    
    currentChapterTitleEl = document.querySelector("#movie_player .ytp-chapter-title-content");
    if (currentChapterTitleEl.dataset.ncbfyt=="true") { return false; }
    currentChapterTitleEl.dataset.ncbfyt = "true";

    prevChapterButtonEl = document.createElement("span");
    prevChapterButtonEl.textContent = " |< ";
    prevChapterButtonEl.style.cursor = "pointer";
    prevChapterButtonEl.style.marginRight = "10px";
    currentChapterTitleEl.before(prevChapterButtonEl);

    //prevChapterButtonEl.addEventListener("mousemove", setChapterPrevElTitle);

    prevChapterButtonEl.addEventListener("click", jumpToPrevChapter);


    nextChapterButtonEl = document.createElement("span");
    nextChapterButtonEl.textContent = " >| • ";
    nextChapterButtonEl.style.cursor = "pointer";
    nextChapterButtonEl.style.marginRight = "5px";
    currentChapterTitleEl.before(nextChapterButtonEl);

    //nextChapterButtonEl.addEventListener("mousemove", setChapterElTitle);

    nextChapterButtonEl.addEventListener("click", jumpToNextChapter);


    repeatChapterButtonEl = document.createElement("span");
    repeatChapterButtonEl.textContent = " 🔁 ";
    repeatChapterButtonEl.title = "Repeat current chapter";
    repeatChapterButtonEl.style.cursor = "pointer";
    //repeatChapterButtonEl.style.marginLeft = "5px";
    repeatChapterButtonEl.style.marginRight = "5px";
    //currentChapterTitleEl.before(repeatChapterButtonEl);

    //repeatChapterButtonEl.addEventListener("mousemove", setChapterCurrentElTitle);

    //repeatChapterButtonEl.addEventListener("click", repeatChapter);

    currentChapterTitleEl.style.cursor = "pointer";
    //currentChapterTitleEl.addEventListener("mousemove", setChapterCurrentElTitle);
    currentChapterTitleEl.addEventListener("click", repeatChapter);


    const observer = new MutationObserver(()=>{
      setChapterPrevElTitle();
      setChapterElTitle();
      setChapterCurrentElTitle();
    });
    observer.observe(currentChapterTitleEl, { childList: true, subtree: true });
  }

  
  class NavigateFinish {
    constructor (callback) {
      if (typeof callback  !== "function") { throw "Give me callback function in `new WatchPageLoader(callbackFunction);`"; }
      this.cb = callback;
      
      this.init();
    }
    // main UserScript Function after watch page is load
    scriptMainFunction (...args) {
      this.cb(...args);
    }
    
    mainLoad () {
      function getVideoId() {
        const urlParams = new URLSearchParams(window.location.search);
        const videoId = urlParams.get("v");

        return videoId;
      }

      function isVideoLoaded() {
        const videoId = getVideoId();

        return (
          document.querySelector(`ytd-watch-flexy[video-id='${videoId}']`) !== null
        );
      }

      const setEventListeners = (evt)=> {
        const checkForJS_Finish = ()=> {
          if (isVideoLoaded()) {
            clearInterval(jsInitChecktimer);
            this.scriptMainFunction();
          }
        }

        if (window.location.href.indexOf("watch?") >= 0) {
          var jsInitChecktimer = setInterval(checkForJS_Finish, 111);
        }
      }

      (function () {
        "use strict";
        window.addEventListener("yt-navigate-finish", setEventListeners, true);
        setEventListeners();
      })();
    }
  
    init () {
      this.mainLoad();
    }
  }
  
  new NavigateFinish(start);
})();