Ubuntuなどにインストールして動画や画像を管理できる［Jellyfin］。先回自作した、Chrome拡張機能にページの送り方向の既定値を左から右に変更する対応を追加ました。
マウスホイールでページ操作をしたい
ローカルに保存された動画や画像などのメディアを、ネトフリなどの配信サービスのような形で様々なデバイスに表示してくれる［Jellyfin］。
ライブラリを追加すると、指定したフォルダー内のメディアファイルを閲覧しやすい表示方法で配信してくれます。
使ってみて気になったのが、Google Chromeなどウェブブラウザーで利用する場合にマウスのホイールでページ送りが出来ない部分。
先回、マウスホイールでページ送りを可能にするChromeブラウザーの拡張機能を作ってみました。
詳しい内容は別記事をご覧ください。
ページ送り方向の既定値変更
マウスのホイールでページ送り（戻り）が可能になるので、かなり便利になりました。
実際に使っていて、ページを送る方向に違和感があったので既定値を変更するためのコードを追加してみました。
Jellyfinのブックライブラリの閲覧画面は、こんな感じになっていて右上のアイコンでページの送り方向を変更できます。
既定値は右から左にページが流れる設定ですが、マンガなど右綴じの場合には違和感があります。
自作の機能拡張を入れてあるので、ページの閲覧画面が表示された場合に既定値を左から右にページが流れる設定に変更するコードを追加してみました。
修正方法は簡単。単純に矢印のアイコン（ボタン）を探して１回クリックするだけです。（修正した部分は太字にしてあります）
[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;
// 横スワイプ（ブラウザ戻る/進む）は無視
if (Math.abs(e.deltaX) > Math.abs(e.deltaY)) {
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 }
);
// --------------------
// ページの送り方向 変更
// --------------------
let langDirFixed = false;
function autoFixReadingDirection() {
if (langDirFixed) return;
const btn = document.querySelector(".btnToggleLangDir");
if (!btn) return;
if (btn.getAttribute("title") === "Right To Left") {
console.log("[Jellyfin Wheel] Auto toggle reading direction");
btn.click();
}
langDirFixed = true;
}
// DOM変化を監視（SPA対策）
const observer = new MutationObserver(() => {
if (!isJellyfinPage()) return;
autoFixReadingDirection();
});
observer.observe(document.body, {
childList: true,
subtree: true
});修正すると、閲覧画面を表示した際に１度だけ［矢印］ボタンをクリックするイベントが走ります。
拡張機能をインストールする詳しい手順は別記事をご覧ください。
実際に試していませんが、Chromeの他にMicrosoft Edgeでも使えるはずです。
まとめ
動画や画像を管理できる［Jellyfin］をウェブブラウザーで閲覧する際に、ページの送り方向の既定値を左から右に変更する対応を追加ました。
マンガなど右綴じのページ送りに慣れている場合にJellyfinのブックライブラリの既定値は右から左にページが送られるので少し違和感があります。
［Jellyfin］でブラウザーで画像を閲覧する際に、ページ送りの方向が使い辛いなと思っている人の参考になれば幸いです。
スポンサーリンク
最後までご覧いただき、ありがとうございます。