twitter media chain

Twitterのスレッド、メディア欄を左右キーで連続して閲覧するやつ
Ask a question, post a review, or report the script.
Wrap lines
// ==UserScript==
// @name         twitter media chain
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Twitterのスレッド、メディア欄を左右キーで連続して閲覧するやつ
// @author       y_kahou
// @match        https://twitter.com/*
// @exclude      https://twitter.com/i/tweetdeck
// @require      http://code.jquery.com/jquery-3.5.1.min.js
// @require      https://greatest.deepsurf.us/scripts/419806-touchactionex/code/touchActionEx.js?version=888836
// @grant        GM_addStyle
// @license      MIT
// @noframes
// ==/UserScript==

var $ = window.jQuery;

(function() {
    'use strict';
    
    GM_addStyle(`
    [id^=verticalGridItem] svg {
        background: black;
        border-radius: 4px;
    }
    `)
    
    const wait = (ms) => new Promise(res => setTimeout(res, ms))
    
    // メディアページ用に目印をつける
    $(document).on('click', '[id^="verticalGridItem"] a', () => {
        document.querySelector('[aria-labelledby="modal-header"]').dataset.chain = 'medialist'
    })
    
    
    let chain = async function(left, right) {
        const LEFT = left
        const RIGHT = right
        
        if (!LEFT && !RIGHT)
            return
            
        if (location.pathname.indexOf('status') == -1)
            return
        
        // ボタンが存在するときそちらのキーを押しても何もしない
        if (document.querySelector('div[aria-label="前のスライド"]') && LEFT) return
        if (document.querySelector('div[aria-label="次のスライド"]') && RIGHT) return
        
        // 現在のツイートID
        let id = location.pathname.match(/(?<=status\/)\d+/)[0]
        
        // タイムライン、スレッドの中からツイートIDでツイートを探す
        let timelines = document.querySelectorAll('div[aria-label^="タイムライン:"]:not([aria-label^="タイムライン: トレンド"])')
        let timeline = timelines[timelines.length-1]
        let datetime = timeline.querySelector(`a[href*="${id}"]`)
        
        let dist, imgs, img
        
        // メディアページ判定
        if (document.querySelector('[aria-labelledby="modal-header"]').dataset.chain == 'medialist') {
            let num = Number(datetime.closest('[role="listitem"]').id.match(/verticalGridItem-(\d+)/)[1])
            
            num += LEFT ? -1 : 1;
            
            dist = img = document.querySelector(`[id^="verticalGridItem-${num}"] a`)
            
        } else {
            
            // 次に見るツイート
            dist = datetime.closest('article').closest('div:not([class])')
            
            // 次のツイート(の画像)を探す
            // スレッドだと謎の1要素あるので5個くらい余裕を持って探す
            const N_MAX = 5
            for (let i = 0; i <= N_MAX; i++) {
                if (i == N_MAX) {
                    console.log('次/前の画像なし');
                    return
                }
                
                dist = LEFT ? dist.previousElementSibling : dist.nextElementSibling
                
                // 次のツイートDOMがツイートではない(余白とか)なら次へ
                let distDatetime = dist.querySelector('time')
                if (!distDatetime)
                    continue
                
                // IDチェックで引用ツイートを除外
                let distId = distDatetime.parentNode.getAttribute('href').match(/(?<=status\/)\d+/)[0]
                imgs = dist.querySelectorAll(`a[href*="${distId}"] [data-testid="tweetPhoto"]`)
                
                // 画像ツイートだったら探索終了
                if (imgs.length) {
                    let pn = RIGHT ? 0 : imgs.length - 1
                    img = imgs[pn]
                    break
                }
            }
        }
        
        // モーダル閉じる
        document.querySelector('[aria-labelledby="modal-header"] [role="listitem"] > div').click()
        await wait(200)
        
        // 対象のツイートまでスクロール
        dist.scrollIntoView();
        await wait(200)
        
        // 次の画像クリック
        img.click()
    }
    
    
    
    document.addEventListener('keydown', e => {
        let left = (e.keyCode == 37)
        let right = (e.keyCode == 39)
        chain(left, right)
    })
    
    addSwipeWay(document.body)
    let callback = e => {
        let left = (e.type == 'swiperight')
        let right = (e.type == 'swipeleft')
        chain(left, right)
    }
    document.body.addEventListener('swipeleft', callback)
    document.body.addEventListener('swiperight', callback)
})();