Jellyfinのページ操作をマウスホイールで行うChrome拡張機能を作ってみた（その５）

Ubuntuなどにインストールして動画や画像を管理できる［Jellyfin］。先回追加した一定間隔で自動で送る機能の秒数をカウントダウンする表示を追加しました。

マウスホイールでページ操作をしたい

ローカルに保存された動画や画像などのメディアを、ネトフリなどの配信サービスのような形で様々なデバイスに表示してくれる［Jellyfin］。

ライブラリを追加すると、指定したフォルダー内のメディアファイルを閲覧しやすい表示方法で配信してくれます。

使ってみて気になったのが、Google Chromeなどウェブブラウザーで利用する場合にマウスのホイールでページ送りが出来ない部分。

先回、マウスホイールでページ送りを可能にするChromeブラウザーの拡張機能を作ってみました。

詳しい内容は別記事をご覧ください。

Jellyfinのページ操作をマウスホイールで行うChrome拡張機能を作ってみた

自動送り中のカウントダウン表示

次のページに切り替わるまでのインターバル時間を視覚的に表示してみます。

実際に一定間隔でページ送りを行う［content.js］を修正します。

// --------------------
// カウントダウン表示
// --------------------
let countdownOverlay = null;
let countdownTimer = null;
let countdownRemaining = 0;

// --------------------
// カウントダウンUI
// --------------------
function createCountdownOverlay() {

  if (countdownOverlay) return;

    countdownOverlay = document.createElement("div");
    countdownOverlay.id = "jellyfinAutoPagingCountdown";

    countdownOverlay.style.position = "fixed";
    countdownOverlay.style.bottom = "20px";
    countdownOverlay.style.right = "20px";
    countdownOverlay.style.zIndex = "10000";
    countdownOverlay.style.zIndex = "2147483647";

    countdownOverlay.style.background = "rgba(0,0,0,0.6)";
    countdownOverlay.style.color = "white";
    countdownOverlay.style.fontSize = "28px";
    countdownOverlay.style.padding = "8px 14px";
    countdownOverlay.style.borderRadius = "8px";
    countdownOverlay.style.fontFamily = "monospace";
    countdownOverlay.style.pointerEvents = "none";

    const container =
    document.querySelector(".slideshowSwiperContainer") || document.body;

    container.appendChild(countdownOverlay);
}

function updateCountdown() {
  if (!countdownOverlay) return;

  countdownOverlay.textContent = `[${countdownRemaining}]`;
}

function removeCountdown() {

  if (countdownOverlay) {
    countdownOverlay.remove();
    countdownOverlay = null;
  }

  if (countdownTimer) {
    clearInterval(countdownTimer);
    countdownTimer = null;
  }
}

function startAutoPaging() {
  if (autoPaging) return;

  const nextBtn = document.querySelector(".swiper-button-next");
  if (!nextBtn) return;

  autoPaging = true;

  createCountdownOverlay();

  countdownRemaining = AUTO_INTERVAL / 1000;
  updateCountdown();

  // 1秒カウントダウン
  countdownTimer = setInterval(() => {

    countdownRemaining--;
    updateCountdown();

    if (countdownRemaining <= 0) {
      countdownRemaining = AUTO_INTERVAL / 1000;
    }

  }, 1000);

  // ページ送り
  autoPagingTimer = setInterval(() => {

    if (!canGoNext()) {
      stopAutoPaging();

      chrome.runtime.sendMessage({ action: "autoPagingStopped" });
      return;
    }

    nextBtn.click();

    // カウントリセット
    countdownRemaining = AUTO_INTERVAL / 1000;
    updateCountdown();

    console.log("[Jellyfin Wheel] auto next");

  }, AUTO_INTERVAL);

  console.log("[Jellyfin Wheel] Auto paging started");
}

function stopAutoPaging() {
  if (!autoPaging) return;

  clearInterval(autoPagingTimer);
  autoPagingTimer = null;
  autoPaging = false;

  removeCountdown();

  console.log("[Jellyfin Wheel] Auto paging stopped");
}

修正すると［自動ぺージ送り］`処理中に画面右下にカウントダウン用の表示が追加されます。

拡張機能をインストールする詳しい手順は別記事をご覧ください。

VSCodeの自作の拡張機能をインストールする手順

実際に試していませんが、Chromeの他にMicrosoft Edgeでも使えるはずです。

まとめ

動画や画像を管理できる［Jellyfin］をウェブブラウザーで閲覧する際に、Chrome拡張機能で一定間隔で自動で送る処理中にカウントダウン表示を追加しました。

マンガなど閲覧する際に、次のページが自動で送られるまでのインターバルを視覚的に表示できます。

［Jellyfin］でブラウザーで画像を閲覧する際に、ページ送りを自動化したいなと思っている人の参考になれば幸いです。

スポンサーリンク

最後までご覧いただき、ありがとうございます。