Ubuntuなどにインストールして動画や画像を管理できる［Jellyfin］。今回は［続きを読む］や［新しく追加］で横スクロールのカルーセル部分をマウスのホイールで操作する機能を追加しました。
マウスホイールでページ操作をしたい
ローカルに保存された動画や画像などのメディアを、ネトフリなどの配信サービスのような形で様々なデバイスに表示してくれる［Jellyfin］。
ライブラリを追加すると、指定したフォルダー内のメディアファイルを閲覧しやすい表示方法で配信してくれます。
使ってみて気になったのが、Google Chromeなどウェブブラウザーで利用する場合にマウスのホイールでページ送りが出来ない部分。
先回、マウスホイールでページ送りを可能にするChromeブラウザーの拡張機能を作ってみました。
詳しい内容は別記事をご覧ください。
横スクロールのカルーセル操作
Jellyfinの［Book］ライブラリページには［続きを読む］や［新しく追加された］などのコンテンツが横スクロールのカルーセル表示になっています。
画面全体はマウスのホイールで縦にスクロール操作ができますが、このカルーセル部分は右上に配置されたシェブロン（”<” や “>”）をクリックしてスクロールになります。
この部分だけにマウスポインターがホバー状態の時にマウスのホイール操作で横にスクロールする機能を追加しています。
まずは、ChromeのDevToolなどで操作するクラスを取得。
スクロールしている部分は［.emby-scroller］で、クラス内の［button］がシェブロンでクリックするとスクロール操作が発火します。
クラスを使って、マウスポインターのホバー状態を取得します。
let hoveredScroller = null;
document.addEventListener("mouseover", (e) => {
// scroller取得
const scroller = e.target.closest(".emby-scroller");
if (!scroller) {
hoveredScroller = null;
return;
}
if (scroller) {
hoveredScroller = scroller;
console.log("[Jellyfin Wheel] hovered card");
}
});
document.addEventListener("mouseout", (e) => {
const scroller = e.target.closest(".emby-scroller");
if (!scroller) return;
if (scroller && hoveredScroller === scroller) {
hoveredScroller = null;
}
});
取得したホバー状態の時に、マウスのスクロールイベントを受信したら、ホイールの方向に対応したシェブロンで表示されているボタンのクリックイベントを発生させます。
window.addEventListener("wheel", (e) => {
// slideshow中は除外
if (isJellyfinPage()) return;
if (!hoveredScroller) return;
const container =
hoveredScroller.closest(".emby-scroller-container");
if (!container) return;
const buttons =
container.querySelectorAll(".emby-scrollbuttons button");
if (buttons.length < 2) return;
const prevBtn = buttons[0];
const nextBtn = buttons[1];
// 横ジェスチャーは無視
if (Math.abs(e.deltaX) > Math.abs(e.deltaY)) {
return;
}
e.preventDefault();
e.stopPropagation();
if (e.deltaY > 0) {
nextBtn.click();
} else {
prevBtn.click();
}
}, { passive: false });
実行すると、横イメージのカルーセルで表示されている部分にマウスポインターを重ねた状態でマウスのホイールを操作するとコンテンツが横にスクロールするようになります。
トリガークラスの変更
このままでも使えますが、マウスのホバー状態の取得に使った “.emby-scroller” クラスは、画像やタイトルの他にも包含する部分が多いので、Jerryfinのホーム画面のほとんどで検出されてしまいます。
これだと、少し使い辛いので、少し横スクロールする部分を絞って動作させます。
またまたChromeのDevToolを使って具合が良さそうなクラスを検索。
見つけたのは［.cardScalable］と［.cardText］クラス。横スクロールのカルーセル内で画像とタイトル部分を表示しているクラスです。
マウスポインターのホバー状態を取得する部分を少し修正しました。
document.addEventListener("mouseover", (e) => {
//ホバーを取得する対象
const trigger = e.target.closest(".cardScalable, .cardText");
if (!trigger) {
hoveredScroller = null;
return;
}
// scroller取得
const scroller = e.target.closest(".emby-scroller");
if (scroller) {
hoveredScroller = scroller;
console.log("[Jellyfin Wheel] hovered card");
}
});
document.addEventListener("mouseout", (e) => {
const trigger = e.target.closest(".cardScalable, .cardText");
if (!trigger) return;
const scroller = e.target.closest(".emby-scroller");
if (scroller && hoveredScroller === scroller) {
hoveredScroller = null;
}
});拡張機能をインストールする詳しい手順は別記事をご覧ください。
実行すると、ホーム画面の［続きを読む］などのカルーセル表示で、画像とタイトル部分にマウスポインターを重ねた状態でホイール操作をするとスクロールが開始されます。
まとめ
動画や画像を管理できる［Jellyfin］をウェブブラウザーで閲覧する際に、Chrome拡張機能で［続きを読む］や［新しく追加］で横スクロールのカルーセル部分をマウスのホイールで操作する機能を追加しました。
マンガなど閲覧する際に、横スクロールで表示されているコンテンツのスクロール操作が効率的になります。
［Jellyfin］でブラウザーで画像を閲覧する際に、横スクロールのカルーセル表示が使い辛いなと思っている人の参考になれば幸いです。
スポンサーリンク
最後までご覧いただき、ありがとうございます。