Mirrativにキーボードショートカットを追加するUserScript

mirrativ_keyboard_shortcut.user.js

// ==UserScript==
// @name         Mirrativ keyboard shortcut
// @description  Mirrativにキーボードショートカットを追加するUserScript
// @namespace    https://gist.github.com/abcang/ceb4c4be3ee7ec49d6d782b88e803e50/raw/mirrativ_keyboard_shortcut.user.js
// @version      0.1
// @author       abcang
// @match        https://www.mirrativ.com/*
// @grant        none
// @downloadURL  https://gist.github.com/abcang/ceb4c4be3ee7ec49d6d782b88e803e50/raw/mirrativ_keyboard_shortcut.user.js
// @updateURL    https://gist.github.com/abcang/ceb4c4be3ee7ec49d6d782b88e803e50/raw/mirrativ_keyboard_shortcut.user.js

// ==/UserScript==

// NOTE: SPAなので、mirrativのURLすべてをmatch対象にしている

(function() {
    'use strict';

    document.body.addEventListener('keydown', (e) => {
        // space, left, rightを対象
        if (![32, 37, 39].includes(e.keyCode)) {
            return;
        }

        // videoがない場合(トップページや読み込み完了前)は無効
        const video = document.querySelector('video');
        if (!video) {
            return;
        }

        // inputタグなどにフォーカス中のときは無効
        if (['input', 'textarea'].includes(document.activeElement.tagName.toLocaleLowerCase())) {
            return;
        }

        e.preventDefault();
        switch (e.keyCode) {
            case 32: // space
                video.click();
                break;
            case 37: // left
                video.currentTime -= 10;
                break;
            case 39: { // right
                // tsファイルのダウンロード間隔が約2秒
                const durationWithMargin = video.duration - 2;
                const nextTime = video.currentTime + 10;

                // 生配信の場合、currentTimeがdurationを超えるとリロードしてしまうので超えないようにする
                video.currentTime = durationWithMargin > nextTime ? nextTime : durationWithMargin;
                break;
            }
        }
    });
})();