Netflix Enhanced Progress Bar

Netflixの動画にプログレスバーを追加します。

// ==UserScript==
// @name                Netflix Enhanced Progress Bar
// @name:en             Netflix Enhanced Progress Bar
// @name:ja             Netflix Enhanced Progress Bar
// @name:zh-CN          Netflix Enhanced Progress Bar
// @name:ko             Netflix Enhanced Progress Bar
// @name:ru             Netflix Enhanced Progress Bar
// @name:de             Netflix Enhanced Progress Bar
// @description         Netflixの動画にプログレスバーを追加します。
// @description:en      Adds a progress bar to Netflix videos.
// @description:ja      Netflixの動画にプログレスバーを追加します。
// @description:zh-CN   为 Netflix 视频添加进度条。
// @description:ko      Netflix 동영상에 진행 막대를 추가합니다.
// @description:ru      Добавляет индикатор прогресса к видео на Netflix.
// @description:de      Fügt einen Fortschrittsbalken zu Netflix-Videos hinzu.
// @version             1.0.0
// @author              Yos_sy
// @match               *://*.netflix.com/*
// @namespace           http://tampermonkey.net/
// @icon                https://www.google.com/s2/favicons?sz=64&domain=netflix.com
// @license             MIT
// @grant               none
// ==/UserScript==

(function () {
  "use strict";

  // 定数定義
  const PROGRESS_UPDATE_INTERVAL = 1000; // プログレスバー更新間隔（ミリ秒）
  const VIDEO_CHECK_INTERVAL = 1000; // ビデオ要素チェック間隔（ミリ秒）

  class NetflixProgressBar {
    constructor() {
      this.progressBar = null; // カスタムプログレスバーの要素
      this.progress = null; // プログレスバーの進行状況を示す要素
      this.videoElement = null; // 現在のビデオ要素
      this.updateInterval = null; // プログレスバー更新のためのインターバルID
      this.videoCheckInterval = null; // ビデオ要素チェックのためのインターバルID
    }

    // 初期化メソッド
    init() {
      this.addStyles(); // カスタムスタイルをページに追加
      this.startVideoCheck(); // ビデオ要素の存在を定期的にチェック
      this.observeDOMChanges(); // DOMの変化を監視
      this.observeURLChanges(); // URLの変更を監視（SPA対応）
    }

    // スタイルを追加
    addStyles() {
      const style = document.createElement("style");
      style.textContent = `
        .netflixEnhancedProgressBar {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 5px;
          background-color: rgba(128, 128, 128, 0.7);
          z-index: 9999;
        }
        .netflixEnhancedProgress {
          width: 0%;
          height: 100%;
          background-color: #e50914;
          transition: width 0.25s linear;
        }
      `;
      document.head.appendChild(style); // スタイルをheadに追加
    }

    // プログレスバー要素を作成
    createProgressBar() {
      this.progressBar = document.createElement("div");
      this.progressBar.className = "netflixEnhancedProgressBar"; // カスタムプログレスバーのクラス名を設定
      this.progress = document.createElement("div");
      this.progress.className = "netflixEnhancedProgress"; // プログレスバーの進行状況を示すクラス名を設定
      this.progressBar.appendChild(this.progress); // プログレスバーに進行状況を示す要素を追加
      return this.progressBar;
    }

    // プログレスバーの進行状況を更新
    updateProgress() {
      if (!this.videoElement || !this.progress) return; // ビデオ要素またはプログレスバーが存在しない場合は終了
      const percentage =
        (this.videoElement.currentTime / this.videoElement.duration) * 100; // 現在の再生時間を全体の再生時間で割り、パーセンテージを計算
      this.progress.style.width = `${percentage}%`; // プログレスバーの幅を更新
    }

    // プログレスバーの定期更新を開始
    startProgressUpdate() {
      this.stopProgressUpdate(); // 既存の更新を停止
      this.updateInterval = setInterval(
        () => this.updateProgress(),
        PROGRESS_UPDATE_INTERVAL
      ); // プログレスバーの更新を定期的に実行
    }

    // プログレスバーの更新を停止
    stopProgressUpdate() {
      if (this.updateInterval) {
        clearInterval(this.updateInterval); // インターバルをクリア
        this.updateInterval = null;
      }
    }

    // ビデオ要素の変更を処理
    handleVideoChange() {
      try {
        const newVideoElement = document.querySelector("video"); // 現在のページに存在するビデオ要素を取得
        if (newVideoElement !== this.videoElement) {
          this.cleanUp(); // 古いリソースをクリーンアップ
          this.videoElement = newVideoElement; // 新しいビデオ要素を設定
          if (this.videoElement) {
            this.createAndAttachProgressBar(); // プログレスバーを作成し、ビデオ要素に付加
            this.startProgressUpdate(); // プログレスバーの定期更新を開始
          }
        }
      } catch (error) {
        console.error("Error in handleVideoChange:", error); // エラーをコンソールに出力
      }
    }

    // プログレスバーを作成し、ビデオ要素に付加
    createAndAttachProgressBar() {
      if (!this.progressBar) {
        this.progressBar = this.createProgressBar(); // プログレスバーが存在しない場合、新規作成
      }
      this.videoElement.parentNode.appendChild(this.progressBar); // プログレスバーをビデオ要素の親要素に追加
    }

    // リソースのクリーンアップ
    cleanUp() {
      this.stopProgressUpdate(); // プログレスバーの定期更新を停止
      if (this.progressBar && this.progressBar.parentNode) {
        this.progressBar.parentNode.removeChild(this.progressBar); // プログレスバーをDOMから削除
      }
      this.progressBar = null; // プログレスバーの参照をクリア
      this.progress = null; // プログレスバーの進行状況要素の参照をクリア
    }

    // ビデオ要素の存在を定期的にチェック
    startVideoCheck() {
      this.videoCheckInterval = setInterval(
        () => this.handleVideoChange(),
        VIDEO_CHECK_INTERVAL
      ); // 定期的にビデオ要素の変更をチェック
    }

    // DOMの変化を監視
    observeDOMChanges() {
      const observer = new MutationObserver(() => this.handleVideoChange()); // DOM変化の監視を設定
      observer.observe(document.body, { childList: true, subtree: true }); // body要素以下の全ての変更を監視
    }

    // URLの変更を監視（SPA対応）
    observeURLChanges() {
      let lastUrl = location.href; // 最後に確認したURLを保存
      new MutationObserver(() => {
        const url = location.href;
        if (url !== lastUrl) {
          // URLが変更された場合
          lastUrl = url; // 新しいURLを保存
          this.handleVideoChange(); // ビデオ要素の変更を処理
        }
      }).observe(document, { subtree: true, childList: true }); // ドキュメント全体の変更を監視
    }
  }

  // プログレスバーのインスタンスを作成し、初期化
  const progressBar = new NetflixProgressBar();
  progressBar.init();
})();