Ubuntuなどにインストールして動画や画像を管理できる［Jellyfin］。ウェブブラウザーでマンガを読むように画像を閲覧できますが、マウスのホイールでページ送りができないのが残念な部分です。なので、Chrome拡張機能でマウスホイールが使えるようにしてみました。
マウスホイールでページ操作をしたい
ローカルに保存された動画や画像などのメディアを、ネトフリなどの配信サービスのような形で様々なデバイスに表示してくれる［Jellyfin］。
ライブラリを追加すると、指定したフォルダー内のメディアファイルを閲覧しやすい表示方法で配信してくれます。
大量の写真を登録しておけば、シーモアなどマンガ配信サイトのようにページをめくるような操作で閲覧が可能になります。
使ってみて気になったのが、Google Chromeなどウェブブラウザーで利用する場合にマウスのホイールでページ送りが出来ない部分。
色々調べてみましたが、公式で対応していないという情報でした。（要望が多いので将来的には対応するみたいです）
Chrome Extension（拡張機能）で対応
マウスのホイールでは操作できませんが、ウェブクライアント（ブラウザー）で閲覧する際に画像の左右にページを送る（または戻す）ためのボタンが用意されています。
だったら、Chromeの拡張機能（Extension）でホイール操作を取得して、ボタンを押せば操作できそうな感じだったので作ってみました。
[manifest.json]
{
"manifest_version": 3,
"name": "Jellyfin Wheel",
"version": "1.0.0",
"description": "Enable mouse wheel page navigation in Jellyfin Web slideshow.",
"content_scripts": [
{
"matches": ["*://*/*"],
"js": ["content.js"],
"run_at": "document_idle"
}
],
"permissions": []
}[content.js]
console.log("[Jellyfin Wheel] loaded");
let last = 0;
// --------------------
// Jellyfinページ判定
// --------------------
function isJellyfinPage() {
const swiperContainer = document.querySelector(".slideshowSwiperContainer");
const nextBtn = document.querySelector(".swiper-button-next");
const prevBtn = document.querySelector(".swiper-button-prev");
const zoomContainer = document.querySelector(".slider-zoom-container");
// いずれか存在しなければ非対象
if (!swiperContainer || !nextBtn || !prevBtn || !zoomContainer) {
return false;
}
return true;
}
// --------------------
// ページ端チェック
// --------------------
function canGoNext() {
const nextBtn = document.querySelector(".swiper-button-next");
return nextBtn && nextBtn.getAttribute("aria-disabled") !== "true";
}
function canGoPrev() {
const prevBtn = document.querySelector(".swiper-button-prev");
return prevBtn && prevBtn.getAttribute("aria-disabled") !== "true";
}
// --------------------
// ホイールイベント
// --------------------
window.addEventListener(
"wheel",
(e) => {
if (!isJellyfinPage()) return;
const now = Date.now();
if (now - last < 150) return; // 連打防止
last = now;
const nextBtn = document.querySelector(".swiper-button-next");
const prevBtn = document.querySelector(".swiper-button-prev");
if (!nextBtn || !prevBtn) return;
// ページ端で無効化
if (e.deltaY > 0 && !canGoNext()) return;
if (e.deltaY < 0 && !canGoPrev()) return;
e.preventDefault();
e.stopPropagation();
if (e.deltaY > 0) {
nextBtn.click();
console.log("[Jellyfin Wheel] next click");
} else {
prevBtn.click();
console.log("[Jellyfin Wheel] prev click");
}
},
{ passive: false }
);２つのファイルを保存して、Google Chromeにインストールします。既定値ではローカルのファイルは拡張機能には使えないので、Chrome側の変更が必要です。
詳しい手順は別記事をご覧ください。
やっていることは単純で、読み込んでいるHTMLからJellyfinが配信しているページを判定して、マウスのホイール操作があった際に、コントロール（左右のボタン）をクリックさせています。
GitHubにも公開しているので参考になれば幸いです。
https://github.com/maggothand/JellyfinWheelControl
実際に試していませんが、Chromeの他にMicrosoft Edgeでも使えるはずです。
まとめ
動画や画像を管理できる［Jellyfin］をウェブブラウザーで閲覧する際に、マウスのホイールでページが操作できるChrome拡張機能を作ってみました。
［Jellyfin］でブラウザーで画像を閲覧する際に、マウスホイールが使いたいなと思っている人の参考になれば幸いです。
スポンサーリンク
最後までご覧いただき、ありがとうございます。