☰

YouTubeのコメントのタイムラインを使うやつ

YouTubeのメドレーとかのコメント欄にある曲順のやつを使ってチャプターみたいにできる

// ==UserScript==
// @name         YouTubeのコメントのタイムラインを使うやつ
// @namespace    http://tampermonkey.net/
// @version      0.9.1
// @description  YouTubeのメドレーとかのコメント欄にある曲順のやつを使ってチャプターみたいにできる
// @author       Midra(@mdr_anm)
// @match        https://www.youtube.com/*
// @icon         https://www.google.com/s2/favicons?domain=youtube.com
// @noframes
// @grant        none

// ==/UserScript==

{
  'use strict';

  window.MIDEXT = window.MIDEXT || {};

  const MIDYT = window.MIDEXT.YouTube = {
    INTERVAL_MAX: 20,
    INTERVAL_TIME: 100,
    INTERVAL_TIME_PLAYING: 1000,
    INTERVAL_TIME_PAUSE: 2000,

    TEXT: {
      USE_TIMESTAMP: 'タイムスタンプを使用',
    },

    SELECTORS: {
      INFO: '#info-contents > ytd-video-primary-info-renderer',
      VIDEO: '#player video.video-stream',
      PLAYER: '#movie_player',
      COMMENTS: '#comments',
    },

    Elements: {
      info: null,
      infoExt: null,
      infoTime: null,
      infoTitle: null,
      playPauseBtn: null,
      player: null,
      video: null,
      comments: null,
      popup: null,
      popupItemPlaying: null,
    },

    SVG: {
      PLAY: '<svg version="1.1" viewBox="0 0 36 36"><path d="M 12,26 18.5,22 18.5,14 12,10 z M 18.5,22 25,18 25,18 18.5,14 z"></path></svg>',
      PAUSE: '<svg version="1.1" viewBox="0 0 36 36"><path d="M 12,26 16,26 16,10 12,10 z M 21,26 25,26 25,10 21,10 z"></path></svg>',
      PREV: '<svg version="1.1" viewBox="0 0 36 36"><path d="m 12,12 h 2 v 12 h -2 z m 3.5,6 8.5,6 V 12 z"></path></svg>',
      NEXT: '<svg version="1.1" viewBox="0 0 36 36"><path d="M 12,24 20.5,18 12,12 V 24 z M 22,12 v 12 h 2 V 12 h -2 z"></path></svg>',
      PLAYLIST: '<svg version="1.1" viewBox="0 0 24 24" style="height:75%"><path d="M22,7H2v1h20V7z M13,12H2v-1h11V12z M13,16H2v-1h11V16z M15,19v-8l7,4L15,19z"></path></svg>',
    },

    Templates: {
      useTimestampBtn: null,
      popup: null,
    },

    Info: {
      title: '',
      author: '',
      isPlaying: true,
      isVideo: location.href.match(/^(https:\/\/www\.youtube\.com\/watch).+/) !== null,
      isLive: false,
      currentTime: 0,
      currentTimeFormatted: '00:00',
    },

    log: (data) => console.log('【MIDEXT.YouTube】', data),
    errorLog: (data) => console.error('【MIDEXT.YouTube】', data),

    // セレクタを指定して要素を取得
    getElement: (selector) => new Promise((resolve, reject) => {
      let cnt = 0;
      const interval = setInterval(() => {
        // 繰り返しが指定回数超えたらエラー
        if (++cnt > MIDYT.INTERVAL_MAX) {
          reject(`getElement()\n要素の取得に失敗しました\n[${selector}]`);
          clearInterval(interval);
        }
        // 要素を探す
        const info = document.querySelector(selector);
        if (info) {
          resolve(info);
          clearInterval(interval);
        }
      }, MIDYT.INTERVAL_TIME);
    }),

    // 要素を生成
    generateElement: (tag = 'div', id, classList, child) => {
      const elem = document.createElement(tag);
      if (id) elem.id = id;
      if (classList) elem.classList.add(...classList);
      if (child) elem.appendChild(child);
      return elem;
    },

    // 要素を生成（HTMLテキストから）
    generateElementByHTML: (html) => {
      const elem = document.createElement('div');
      elem.insertAdjacentHTML('beforeend', html);
      return elem.firstElementChild;
    },

    Timestamp: {
      data: [],
      idx: -1,

      // タイムスタンプを更新
      update: () => {
        // 現在再生中のとこ
        if (MIDYT.Info.currentTime < MIDYT.Timestamp.data[0].time) {
          MIDYT.Timestamp.idx = -1;
        } else {
          const len = MIDYT.Timestamp.data.length;
          for (let i = 0; i < len; i++) {
            if (MIDYT.Timestamp.data[i].time <= MIDYT.Info.currentTime) {
              MIDYT.Timestamp.idx = i;
            } else break;
          }
        }
        MIDYT.Elements.infoTitle.textContent = MIDYT.Timestamp.data[MIDYT.Timestamp.idx]?.text;

        // ポップアップ表示されてたら表示を更新
        const item_playing = MIDYT.Elements.popup?.children[MIDYT.Timestamp.idx];
        if (MIDYT.Elements.popupItemPlaying !== item_playing) {
          MIDYT.Elements.popupItemPlaying?.classList.remove('midyt-playing');
          MIDYT.Elements.popupItemPlaying = item_playing;
          MIDYT.Elements.popupItemPlaying?.classList.add('midyt-playing');
        }
      },

      // 指定したタイムスタンプの再生位置に移動
      changeIdx: (idx) => {
        if (idx < 0 || MIDYT.Timestamp.data.length <= idx) {
          MIDYT.errorLog('指定したインデックスは範囲外です');
          return;
        };
        const timestamp = MIDYT.Timestamp.data[idx];
        MIDYT.Timestamp.idx = idx;
        MIDYT.Elements.player?.seekTo(timestamp.time);
        MIDYT.Timestamp.update();
      },

      // 前へ
      prev: () => {
        if (MIDYT.Timestamp.data[MIDYT.Timestamp.idx]?.time + 5 < MIDYT.Info.currentTime) {
          MIDYT.Timestamp.changeIdx(MIDYT.Timestamp.idx);
        } else {
          const prevIdx = MIDYT.Timestamp.idx - 1;
          if (0 <= prevIdx) {
            MIDYT.Timestamp.changeIdx(prevIdx);
          }
        }
      },

      // 次へ
      next: () => {
        const nextIdx = MIDYT.Timestamp.idx + 1;
        if (nextIdx < MIDYT.Timestamp.data.length) {
          MIDYT.Timestamp.changeIdx(nextIdx);
        }
      },

      // 初期化
      initialize: () => {
        MIDYT.Timestamp.data = [];
        MIDYT.Timestamp.idx = -1;
      },
    },

    // 現在の再生時間を更新
    updateCurrentTime: () => {
      MIDYT.Info.currentTime = MIDYT.Elements.player?.getCurrentTime();
      MIDYT.Elements.infoTime.textContent = MIDYT.Info.currentTimeFormatted = MIDYT.formatTimeBySec(MIDYT.Info.currentTime);
    },

    // 動画の情報を更新
    updateCurrentInfo: () => {
      const data = MIDYT.Elements.player?.getVideoData();
      MIDYT.Info.title = data?.title;
      MIDYT.Info.author = data?.author;
      MIDYT.Info.isLive = data?.isLive;
      MIDYT.Info.isPlaying = MIDYT.Elements.player?.getPlayerState() === 1;
      MIDYT.Elements.playPauseBtn.dataset.midytPlay = MIDYT.Info.isPlaying ? '1' : '0';
    },

    // 00:00:00形式に変換
    formatTimeBySec: (sec) => {
      const second = ('00' + Math.floor(sec % 60)).slice(-2);
      const minute = ('00' + Math.floor(sec / 60 % 60)).slice(-2);
      const hour = Math.floor(sec / 3600);
      return `${hour ? `${hour}:` : ''}${minute}:${second}`;
    },

    // インデックスを桁数に合わせる
    formatIdx: (idx, len) => {
      const max = String(len).length;
      return ('0'.repeat(max) + idx).slice(max * -1);
    },

    // URLから秒数を抽出
    getTimeByUrl: (url) => Number((url.match(/t=(\d+)s/) || [])[1] || -1),

    // 1行ごとに要素をまとめる
    getElementsOfLine: (elements = []) => {
      const elementsOfLine = {};
      let lineCnt = 0;
      for (const elem of elements) {
        elementsOfLine[lineCnt] = elementsOfLine[lineCnt] || [];
        if (!elem.textContent.match(/\n/)) {
          elementsOfLine[lineCnt].push(elem);
        } else {
          lineCnt++;
        }
      }
      return elementsOfLine;
    },

    // 繰り返し(実質メイン)
    interval: () => {
      if (MIDYT.Timestamp.data.length > 1) {
        // 現在の情報を更新
        MIDYT.updateCurrentInfo();
        // 再生画面以外、もしくはライブだったら繰り返し終了
        if (!MIDYT.Info.isVideo || MIDYT.Info.isLive) return;

        // 更新処理
        MIDYT.updateCurrentTime();
        MIDYT.Timestamp.update();

        MIDYT.Task.clearInterval(MIDYT.Task.interval);
        MIDYT.Task.interval = setTimeout(
          MIDYT.interval,
          MIDYT.Info.isPlaying && MIDYT.Info.isVideo && !MIDYT.Info.isLive
            ? MIDYT.INTERVAL_TIME_PLAYING
            : MIDYT.INTERVAL_TIME_PAUSE
        );
      }
    },

    // ポップアップを開く
    openPopup: (target, child, left, top, width, height) => {
      MIDYT.closePopup();
      MIDYT.Elements.popup = MIDYT.Templates.popup.cloneNode(true);
      if (child) MIDYT.Elements.popup.appendChild(child);
      if (left) MIDYT.Elements.popup.style.setProperty('left', left);
      if (top) MIDYT.Elements.popup.style.setProperty('top', top);
      if (width) MIDYT.Elements.popup.style.setProperty('width', width);
      if (height) MIDYT.Elements.popup.style.setProperty('max-height', height);
      target?.appendChild(MIDYT.Elements.popup);
    },

    // ポップアップを閉じる
    closePopup: () => {
      MIDYT.Elements.popup?.remove();
      MIDYT.Elements.popup = null;
    },

    // 「タイムスタンプを使用」をクリック
    clickUseTimestamp: (e) => {
      MIDYT.Timestamp.initialize();

      const parent = e.target.closest('#main');
      const content = parent?.querySelector('#content > #content-text');
      const elementsOfLine = MIDYT.getElementsOfLine(content?.children);

      // 行ごとに時間とテキストを判別して配列に入れる（ソートなし）
      for (const line in elementsOfLine) {
        const pushData = { time: null, text: '' };
        for (const elem of elementsOfLine[line]) {
          if (elem.matches('a.yt-simple-endpoint[href^="/watch"]') && !pushData.time) {
            pushData.time = MIDYT.getTimeByUrl(elem.href);
          } else {
            pushData.text += elem.textContent.trim();
          }
        }
        if (pushData.time !== null && pushData.text) MIDYT.Timestamp.data.push(pushData);
      }

      // 昇順にソート
      MIDYT.Timestamp.data.sort((a, b) => a.time - b.time);

      if (MIDYT.Timestamp.data.length > 1) {
        document.documentElement.scrollTop = 0;
        MIDYT.Elements.infoExt.classList.remove('midyt-isHidden');
        MIDYT.interval();
      } else {
        MIDYT.Elements.infoExt.classList.add('midyt-isHidden');
      }
    },

    // プレイリストボタンをクリック
    clickPlaylistBtn: (e) => {
      if (MIDYT.Elements.popup) {
        MIDYT.closePopup();
      } else {
        const fragment = document.createDocumentFragment();
        const len = MIDYT.Timestamp.data.length;
        for (let i = 0; i < len; i++) {
          const data = MIDYT.Timestamp.data[i];
          const item = MIDYT.generateElementByHTML(
`
<a class="midyt-playlist-item ytd-button-renderer">
  <tp-yt-paper-button class="ytd-button-renderer">
    <span class="midyt-playlist-idx">${MIDYT.formatIdx(i + 1, len)}</span>
    <span class="midyt-playlist-time midyt-vrL">${MIDYT.formatTimeBySec(data.time)}</span>
    <span class="midyt-playlist-title midyt-vrL">${data.text}</span>
  </tp-yt-paper-button>
</a>
`
          );
          item.addEventListener('click', (e) => MIDYT.Timestamp.changeIdx(i));
          fragment.appendChild(item);
        }
        MIDYT.openPopup(MIDYT.Elements.infoExt, fragment, null, null, '400px', '300px');
      }
    },

    // infoExtがクリック
    clickInfoExt: (e) => {
      const btn = e.target.closest('.midyt-btn');
      const action = btn?.dataset.midytAction;
      switch (action) {
        case 'list': MIDYT.clickPlaylistBtn(e); break;
        case 'prev': MIDYT.Timestamp.prev(); break;
        case 'next': MIDYT.Timestamp.next(); break;
        case 'play': MIDYT.Elements.player?.playVideo(); break;
        case 'pause': MIDYT.Elements.player?.pauseVideo(); break;
      }
    },

    Task: {
      interval: null,

      clearInterval: (task) => { if (task) clearTimeout(task) },
    },

    Observers: {
      comments: {
        CONFIG: {
          childList: true,
          subtree: true,
        },
        observer: null,
      },
    },
  };

  // メイン
  (async function () {
    try {
      // 拡張機能用のスタイルを追加
      document.head.insertAdjacentHTML('beforeend',
`
<style>
.midyt-isHidden {
  display: none !important;
}
.midyt-vrL {
  padding-left: 6px;
  margin-left: 6px;
  border-left: 1px solid var(--yt-spec-10-percent-layer);
}
.midyt-vrR {
  padding-right: 6px;
  margin-right: 6px;
  border-right: 1px solid var(--yt-spec-10-percent-layer);
}
#midyt-info {
  height: 20px;
  margin-top: -10px;
  margin-bottom: 5px;
  font-size: 14px;
  color: var(--yt-spec-text-secondary);
}
#midyt-info * {
  box-sizing: border-box;
}
#midyt-info tp-yt-paper-button {
  min-width: unset;
  padding: 0;
  text-align: unset;
}
#midyt-info-main {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  height: inherit;
}
#midyt-info-control {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  height: inherit;
  min-width: 120px;
  overflow: hidden;
}
#midyt-info-control .midyt-btn {
  display: block;
  flex: 1;
  width: 30px;
  height: 30px;
  margin-top: -5px;
}
#midyt-info-control .midyt-btn > tp-yt-paper-button {
  width: inherit;
  height: inherit;
}
#midyt-info-control .midyt-btn > tp-yt-paper-button > svg {
  width: inherit;
  height: inherit;
  fill: var(--yt-spec-text-secondary);
}
#midyt-info-play_pause[data-midyt-play="0"] > .midyt-btn[data-midyt-action="pause"],
#midyt-info-play_pause[data-midyt-play="1"] > .midyt-btn[data-midyt-action="play"] {
  display: none;
}
#midyt-info-now {
  line-height: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#midyt-popup {
  position: relative;
  top: 5px;
  z-index: 999;
  background-color: var(--paper-listbox-background-color, var(--primary-background-color));
  box-shadow: var(--shadow-elevation-2dp_-_box-shadow);
  border-radius: 4px;
  max-width: 100vw;
  max-height: 250px;
  padding: 8px 0;
  overflow-y: scroll;
}
#midyt-popup > .midyt-playlist-item.midyt-playing {
  color: var(--yt-spec-text-primary);
  font-weight: bold;
}
#midyt-popup::-webkit-scrollbar {
  background-color: transparent;
}
#midyt-popup::-webkit-scrollbar-thumb {
  border-radius: 8px;
  border: 4px solid transparent;
  background-clip: content-box;
  background-color: var(--yt-spec-text-secondary);
}
.midyt-playlist-item > tp-yt-paper-button {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: unset;
  line-height: 20px;
  padding: 0 10px !important;
}
</style>
`
      );

      // 動画の情報を入れるとこを取得
      MIDYT.Elements.info = await MIDYT.getElement(MIDYT.SELECTORS.INFO);

      // 拡張機能用の要素を追加
      MIDYT.Elements.infoExt = MIDYT.generateElementByHTML(
`
<div id="midyt-info" class="midyt-isHidden">
  <div id="midyt-info-main">
    <div id="midyt-info-control">
      <a class="midyt-btn ytd-button-renderer" data-midyt-action="list">
        <tp-yt-paper-button class="ytd-button-renderer">${MIDYT.SVG.PLAYLIST}</tp-yt-paper-button>
      </a>
      <a class="midyt-btn ytd-button-renderer" data-midyt-action="prev">
        <tp-yt-paper-button class="ytd-button-renderer">${MIDYT.SVG.PREV}</tp-yt-paper-button>
      </a>
      <div id="midyt-info-play_pause" data-midyt-play="0">
        <a class="midyt-btn ytd-button-renderer" data-midyt-action="play">
          <tp-yt-paper-button class="ytd-button-renderer">${MIDYT.SVG.PLAY}</tp-yt-paper-button>
        </a>
        <a class="midyt-btn ytd-button-renderer" data-midyt-action="pause">
          <tp-yt-paper-button class="ytd-button-renderer">${MIDYT.SVG.PAUSE}</tp-yt-paper-button>
        </a>
      </div>
      <a class="midyt-btn ytd-button-renderer" data-midyt-action="next">
        <tp-yt-paper-button class="ytd-button-renderer">${MIDYT.SVG.NEXT}</tp-yt-paper-button>
      </a>
    </div>
    <div id="midyt-info-now">
      <span id="midyt-info-time" class="midyt-vrL"></span>
      <span id="midyt-info-title" class="midyt-vrL"></span>
    </div>
  </div>
</div>
`
      );
      MIDYT.Elements.infoExt.addEventListener('click', MIDYT.clickInfoExt);
      MIDYT.Elements.info.insertAdjacentElement('afterbegin', MIDYT.Elements.infoExt);

      MIDYT.Elements.infoTime = document.getElementById('midyt-info-time');
      MIDYT.Elements.infoTitle = document.getElementById('midyt-info-title');
      MIDYT.Elements.playPauseBtn = document.getElementById('midyt-info-play_pause');

      // テンプレート生成
      MIDYT.Templates.useTimestampBtn = MIDYT.generateElementByHTML(
`
<div class="midyt-comment-button ytd-comment-action-buttons-renderer">
  <a class="ytd-button-renderer">
    <tp-yt-paper-button class="ytd-button-renderer" style="font-size:1.3rem">${MIDYT.TEXT.USE_TIMESTAMP}</tp-yt-paper-button>
  </a>
</div>
`
      );
      MIDYT.Templates.popup = MIDYT.generateElementByHTML(`<div id="midyt-popup"></div>`);

      // プレイヤーを取得
      MIDYT.Elements.player = await MIDYT.getElement(MIDYT.SELECTORS.PLAYER);

      // コメントの親要素を取得
      MIDYT.Elements.comments = await MIDYT.getElement(MIDYT.SELECTORS.COMMENTS);

      // コメント一覧を監視
      MIDYT.Observers.comments.observer = new MutationObserver((event) => {
        MIDYT.Observers.comments.observer.disconnect();
        for (const evt of event) {
          const {addedNodes} = evt;
          if (!addedNodes?.length) continue;
          for (const added of addedNodes) {
            if (added.id !== 'toolbar') continue;
            const useTimestampBtn = MIDYT.Templates.useTimestampBtn.cloneNode(true);
            useTimestampBtn.addEventListener('click', MIDYT.clickUseTimestamp);
            added.appendChild(useTimestampBtn);
          }
        }
        MIDYT.Observers.comments.observer.observe(MIDYT.Elements.comments, MIDYT.Observers.comments.CONFIG);
      });
      if (MIDYT.Info.isVideo) {
        MIDYT.Observers.comments.observer.observe(MIDYT.Elements.comments, MIDYT.Observers.comments.CONFIG);
      }

      // なんかのデータ読み込まれたときのイベントっぽい
      window.addEventListener('yt-page-data-updated', async (e) => {
        MIDYT.Observers.comments?.observer.disconnect();
        MIDYT.Elements.infoExt.classList.add('midyt-isHidden');
        MIDYT.Timestamp.initialize();
        MIDYT.closePopup();

        if (MIDYT.Info.isVideo = e.detail.pageType === 'watch') {
          MIDYT.Observers.comments?.observer.observe(MIDYT.Elements.comments, MIDYT.Observers.comments?.CONFIG);
        }
      });

      MIDYT.Elements.video = await MIDYT.getElement(MIDYT.SELECTORS.VIDEO);
      MIDYT.Elements.video?.addEventListener('play', () => MIDYT.Elements.playPauseBtn.dataset.midytPlay = '1');
      MIDYT.Elements.video?.addEventListener('pause', () => MIDYT.Elements.playPauseBtn.dataset.midytPlay = '0');
    } catch (e) { MIDYT.errorLog(e) }
  })();
}