在线视频外挂字幕

目前支持B站，爱奇艺，优酷，百度网盘（百度网盘由于chrome有closed shadow dom暂时只能在firefox里使用），按Q键+100ms，按W键-100ms，按E键显示/隐藏字幕，console可作为transcript使用

// ==UserScript==
// @name         在线视频外挂字幕
// @namespace    https://truework.top
// @version      0.44
// @description  目前支持B站，爱奇艺，优酷，百度网盘（百度网盘由于chrome有closed shadow dom暂时只能在firefox里使用），按Q键+100ms，按W键-100ms，按E键显示/隐藏字幕，console可作为transcript使用
// @author       cyj98
// @match        https://www.bilibili.com/bangumi/*
// @match        https://www.iqiyi.com/*
// @match        https://www.ixigua.com/cinema/album/*
// @match        https://v.youku.com/*
// @match        https://pan.baidu.com/play/*
// @require https://greasyfork.org/scripts/373379-subtitle-utils-module/code/subtitle%20utils%20module.js?version=637875
// ==/UserScript==

(function () {
    'use strict';
    let fileInput = document.createElement("input")
    fileInput.type = 'file'
    document.body.prepend(fileInput)

    // after first file, this variable always true
    let firstFile = false
    let newFile = false

    const hostname = window.location.hostname
    let curTimeElem, subtitlePosElem, subtitleElem, snackbarElem
    let observer, reader

    // keep settings after reload
    let isShowSubtitle = true
    let delayTime = 0

    fileInput.onchange = (e) => {
        const file = e.target.files[0];
        if (!file) {
            return;
        }

        if (firstFile === true) {
            newFile = true
            observer.disconnect()
            reader.abort()
        } else {
            const subtitlePosObj = { 'www.bilibili.com': 'subtitle-position', 'www.iqiyi.com': 'iqp-subtitle', 'www.ixigua.com': 'teleplay__playerContainer', 'v.youku.com': 'subtitle-container', 'pan.baidu.com': 'vjs-text-track-display' }
            const curTimeObj = { 'www.bilibili.com': 'bilibili-player-video-time-now', 'www.iqiyi.com': 'iqp-time-cur', 'www.ixigua.com': 'xgplayer-time', 'v.youku.com': 'control-time-current', 'pan.baidu.com': 'vjs-current-time' }

            subtitlePosElem = document.getElementsByClassName(subtitlePosObj[hostname])[0]
            curTimeElem = document.getElementsByClassName(curTimeObj[hostname])[0]

            subtitleElem = document.createElement('div')
            subtitleElem.id = 'custom-subtitle'
            subtitleElem.style.cssText = 'text-align:center;  font-size: 32px; font-weight: bold;  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;'
            snackbarElem = document.createElement('div')
            snackbarElem.id = 'snackbar'
            snackbarElem.style.cssText = 'font-size: 16px; position: absolute; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;'

            if (hostname === 'www.ixigua.com' || hostname === 'pan.baidu.com') {
                snackbarElem.style.cssText += "position: absolute; z-index: 1; color: white; bottom: 56px;"
                subtitleElem.style.cssText += "position: absolute; z-index: 1; color: white; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%);"
                document.addEventListener('fullscreenchange', () => {
                    subtitlePosElem.prepend(subtitleElem)
                    subtitlePosElem.prepend(snackbarElem)
                }, false)
            }

            // console.log(subtitlePosElem, curTimeElem)
            let isShowDelay = false
            const logKey = (e) => {
                const key = e.key.toUpperCase()
                if (key === 'Q' || key === 'W') {
                    if (key === 'Q') delayTime += 100
                    if (key === 'W') delayTime -= 100

                    snackbarElem.innerHTML = 'delaytime: ' + delayTime
                    if (isShowDelay) {
                        return
                    }
                    snackbarElem.style.visibility = 'visible'
                    isShowDelay = true
                    setTimeout(() => {
                        snackbarElem.style.visibility = 'hidden'
                        isShowDelay = false
                    }, 2000);
                } else if (key === 'E') {
                    isShowSubtitle = !isShowSubtitle
                    if (!isShowSubtitle) {
                        subtitleElem.style.visibility = 'hidden'
                        console.log("hide subtitle")
                    } else {
                        subtitleElem.style.visibility = 'visible'
                        console.log("show subtitle")
                    }
                }
            };
            document.addEventListener('keypress', logKey);
        }
        firstFile = true

        subtitlePosElem.prepend(subtitleElem)
        subtitlePosElem.prepend(snackbarElem)

        if (hostname === 'www.iqiyi.com') {
            subtitlePosElem.style.cssText += "display: block; height: 50px;"
        }

        reader = new FileReader();
        reader.readAsText(file)
        reader.onload = (e) => {
            let subtitles
            try {
                subtitles = window.Subtitle.parse(e.target.result)
            } catch (e) {
                alert("字幕解析出现问题");
            }

            let prevPos = -2
            const binarySearch = (target, arr) => {
                let start = 0;
                let end = arr.length - 1;
                while (start <= end) {
                    const mid = parseInt(start + (end - start) / 2);
                    if (target >= arr[mid].start && target <= arr[mid].end) {
                        return mid;
                    } else if (target > arr[mid].end) {
                        start = mid + 1;
                    } else {
                        end = mid - 1;
                    }
                }
                return -1;
            }
            const callback = (_, observer) => {
                if (newFile === true) {
                    newFile = false
                    subtitleElem.innerHTML = ''
                    observer.disconnect()
                    return
                }
                let strTime
                if (hostname === 'www.ixigua.com') {
                    strTime = curTimeElem.firstElementChild.firstElementChild.innerHTML;
                } else if (hostname === 'pan.baidu.com') {
                    strTime = curTimeElem.firstElementChild.innerHTML;
                    strTime = strTime.replace(/<span[^>]*>([^<]+)<\/span>/g, '$1');
                    strTime = strTime.replace("Current Time ", "")
                    // console.log(strTime)
                } else {
                    strTime = curTimeElem.innerHTML
                }
                console.log(strTime)
                if (strTime.length <= 5) {
                    strTime = "00:" + strTime + ",000"
                } else {
                    strTime = strTime + ",000"
                }
                const time = window.Subtitle.toMS(strTime);

                const pos = binarySearch(time + delayTime, subtitles)
                if (pos === -1) {
                    prevPos = -2
                    subtitleElem.style.visibility = 'hidden'
                    return;
                }
                if (pos === prevPos) {
                    prevPos = pos
                    return
                }
                console.log(subtitles[pos].text);
                if (isShowSubtitle) {
                    subtitleElem.style.visibility = 'visible'
                }
                subtitleElem.innerHTML = subtitles[pos].text
                window.subtitleCount += 1
                prevPos = pos
            };

            observer = new MutationObserver(callback);
            const config = {
                attributes: true,
                childList: true,
                subtree: true
            };
            observer.observe(curTimeElem, config);
        }
    }
})();