// ==UserScript==
// @name            B站合集倒序播放
// @description     增强B站功能，支持视频合集倒序播放，还有一些其他小功能
// @version         0.0.3
// @author          Grant Howard, Coulomb-G
// @copyright       2024, Grant Howard
// @license         MIT
// @match           *://*.bilibili.com/video/*
// @exclude         *://api.bilibili.com/*
// @exclude         *://api.*.bilibili.com/*
// @exclude         *://*.bilibili.com/api/*
// @exclude         *://member.bilibili.com/studio/bs-editor/*
// @exclude         *://t.bilibili.com/h5/dynamic/specification
// @exclude         *://bbq.bilibili.com/*
// @exclude         *://message.bilibili.com/pages/nav/header_sync
// @exclude         *://s1.hdslb.com/bfs/seed/jinkela/short/cols/iframe.html
// @exclude         *://open-live.bilibili.com/*
// @run-at          document-start
// @grant           unsafeWindow
// @grant           GM_getValue
// @grant           GM_setValue
// @grant           GM_deleteValue
// @grant           GM_info
// @grant           GM_xmlhttpRequest
// @grant           GM_registerMenuCommand
// @grant           GM_unregisterMenuCommand
// @grant           GM_addStyle
// @connect         raw.githubusercontent.com
// @connect         github.com
// @connect         cdn.jsdelivr.net
// @connect         cn.bing.com
// @connect         www.bing.com
// @connect         translate.google.cn
// @connect         translate.google.com
// @connect         localhost
// @connect         *
// @icon            https://cdn.jsdelivr.net/gh/the1812/Bilibili-Evolved@preview/images/logo-small.png
// @icon64          https://cdn.jsdelivr.net/gh/the1812/Bilibili-Evolved@preview/images/logo.png
// @namespace https://greasyfork.org/users/734541
// @downloadURL none
// ==/UserScript==

(() => {

    GM_addStyle(`#zaizai-div .video-sections-head_second-line {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        margin: 12px 16px 0;
        color: var(--text3);
        color: var(--text3);
        padding-bottom: 12px;
        font-size: 14px;
        line-height: 16px;
        gap: 10px 20px;
    }

    #zaizai-div .border-bottom-line {
        height: 1px;
        background: var(--line_regular);
        margin: 0 15px;
    }

    #zaizai-div .switch-button {
        margin: 0;
        display: inline-block;
        position: relative;
        width: 30px;
        height: 20px;
        border: 1px solid #ccc;
        outline: none;
        border-radius: 10px;
        box-sizing: border-box;
        background: #ccc;
        cursor: pointer;
        transition: border-color .2s, background-color .2s;
        vertical-align: middle;
    }

    #zaizai-div .switch-button.on:after {
        left: 11px;
    }

    #zaizai-div .switch-button:after {
        content: "";
        position: absolute;
        top: 1px;
        left: 1px;
        border-radius: 100%;
        width: 16px;
        height: 16px;
        background-color: #fff;
        transition: all .2s;
    }

    #zaizai-div .switch-button.on {
        border: 1px solid var(--brand_blue);
        background-color: var(--brand_blue);
    }

    #zaizai-div .txt {
        margin-right: 4px;
        vertical-align: middle;
    }
    `)


    const console = (() => {
        const _console = window.console
        return {
            log: (...args) => {
                _console.log(`%c ZAIZAI `,
                    'padding: 2px 1px; border-radius: 3px; color: #fff; background: #42c02e; font-weight: bold;', ...args)
            }
        }
    })()



    // 全局变量
    const local = useReactiveLocalStorage({
        defaultreverseorder: false,
        // 开启倒序播放
        startreverseorder: false,
        addsectionslistheigth: false
    })

    let Video = null
    let videoSections = null

    function useReactiveLocalStorage(obj) {
        let data = {}
        let zaizaiStore = window.localStorage.getItem('zaizai-store')
        if (zaizaiStore) {
            zaizaiStore = JSON.parse(zaizaiStore)
            for (const key in obj) {
                data[key] = zaizaiStore[key] || obj[key]
            }
        } else {
            data = obj
        }

        let handler = {
            set(target, key, value) {
                let res = Reflect.set(target, key, value)
                try {
                    window.localStorage.setItem(`zaizai-store`, JSON.stringify(data))
                } catch (error) {
                    console.log('存储失败，请检查浏览器设置', error);
                }
                return res
            },
            get(target, key) {
                let ret = Reflect.get(target, key)
                return typeof ret === 'object' ? new Proxy(ret, handler) : ret
            }
        }
        data = new Proxy(data, handler)
        return data
    }

    function waitTime(callback, options = { time: 500, isSetup: false }) {
        let timeout = null
        return new Promise((resolve) => {
            if (options.isSetup) {
                let res = callback()
                if (res) resolve(res)
            }
            timeout = setInterval(() => {
                let res = callback()
                if (res) {
                    clearInterval(timeout)
                    resolve(res)
                }
            }, options.time)
        })
    }

    async function selectVideo() {
        await waitTime(() => {
            let video = document.querySelector('video')
            if (video) {
                Video = video
                return true
            }
        }, {
            isSetup: true
        })
    }

    async function switchAddsectionslistheigthOnClick(action) {
        if (typeof action !== 'string') {
            local.addsectionslistheigth = !local.addsectionslistheigth
        }
        const ListEl = await waitTime(() => {
            return document.querySelector('.video-sections-content-list')
        }, { isSetup: true })

        if (local.addsectionslistheigth) {
            typeof action !== 'string' && this.classList.add('on')
            ListEl.style.maxHeight = '40vh'
            ListEl.style.height = '40vh'
        } else {
            typeof action !== 'string' && this.classList.remove('on')
            ListEl.style.height = '150px'
            ListEl.style.maxHeight = '150px'
        }
    }

    async function VideoOnPlay() {
        if (local.startreverseorder && !document.querySelector('#zaizai-div')) {
            const div = document.createElement('div')
            div.id = 'zaizai-div'
            div.innerHTML = `
                <div class="video-sections-head">
        <div class="border-bottom-line"></div>
        <div class="video-sections-head_second-line">
            <div>
                <span class="txt">默认开启倒序播放</span>
                <span id="defaultreverseorder" class="switch-button ${local.defaultreverseorder ? 'on' : ''}"></span>
            </div>
            <div>
                <span class="txt">倒序播放</span>
                <span id="startreverseorder" class="switch-button ${local.startreverseorder ? 'on' : ''}"></span>
            </div>
            <div>
                <span class="txt">增高合集列表</span>
                <span id="addsectionslistheigth" class="switch-button ${local.addsectionslistheigth ? 'on' : ''}"></span>
            </div>
        </div>
    </div>
            `

            videoSections.appendChild(div)

            // 默认开启倒序播放
            let defaultreverseorder = document.querySelector('#defaultreverseorder')
            function defaultSwitchClick() {
                local.defaultreverseorder = !local.defaultreverseorder
                if (local.defaultreverseorder) {
                    this.classList.add('on')
                } else {
                    this.classList.remove('on')
                }
            }
            defaultreverseorder.addEventListener('click', defaultSwitchClick)

            // 倒序播放
            let startreverseorder = document.querySelector('#startreverseorder')
            function switchReverseoOnClick() {
                local.startreverseorder = !local.startreverseorder
                if (local.startreverseorder) {
                    this.classList.add('on')
                    Video.addEventListener('ended', VideoOnEnded)
                } else {
                    this.classList.remove('on')
                    Video.removeEventListener('ended', VideoOnEnded)
                }
            }
            startreverseorder.addEventListener('click', switchReverseoOnClick)

            const button = document.querySelector('.video-sections-head_second-line button').cloneNode()
            button.textContent = '滚动到当前播放'
            button.style.width = '100%'
            function scrollToCurrent() {
                let { currentEl } = getCurrentcard()
                const sectionsListEl = document.querySelector('.video-sections-content-list')
                // 42 = currentEl.clientHeight + margin     4 = 列表第一个有4px的margin-top   12是自定义
                let scrollToPosition = currentEl.offsetTop - sectionsListEl.clientHeight / 2 - 42 - 4 - 12
                sectionsListEl.scrollTo({
                    top: scrollToPosition
                })
            }
            button.addEventListener('click', scrollToCurrent)
            const newdiv = document.createElement('div')
            newdiv.style.width = '100%'
            newdiv.appendChild(button)
            div.querySelector('.video-sections-head_second-line').appendChild(newdiv)

            let addsectionslistheigth = document.querySelector('#addsectionslistheigth')
            addsectionslistheigth.addEventListener('click', switchAddsectionslistheigthOnClick)
        }
    }




    function getCurrentcard() {
        const episodecards = document.querySelectorAll('.video-episode-card')
        let i = 0
        for (const element of episodecards) {
            let curicon = element.querySelector('.cur-play-icon')
            if (curicon.style.display !== 'none') {
                break
            }
            i++
        }
        // 顺序上一个
        let previous = i - 1 <= 0 ? episodecards.length - 1 : i - 1
        // 顺序下一个
        let next = i + 1 >= episodecards.length - 1 ? episodecards.length - 1 : i + 1
        return {
            elements: episodecards,
            current: i,
            currentEl: episodecards[i],
            next,
            nextEl: episodecards[next],
            previous,
            previousEl: episodecards[previous]
        }
    }


    function VideoOnEnded() {
        /* let curpage = document.querySelector('.cur-page').textContent
        curpage = curpage.match(/\d+/g).at(-1)
        curpage = parseInt(curpage) */
        const { previousEl } = getCurrentcard()
        previousEl.click()
    }



    async function main() {
        console.log('mian start');

        await waitTime(() => {
            let progress = document.querySelector('.bpx-player-progress-schedule-current')
            if (progress) {
                let transform = progress.style.transform.replace('scaleX(', '').replace(')', '')
                if (transform > 0) {
                    videoSections = document.querySelector('.base-video-sections-v1')
                    if (!videoSections) {
                        videoSections = document.querySelector('.video-sections-v1')
                    }
                    return true
                }
            }
        })

        if (!videoSections) {
            console.log('mian stop 没有合集');
            return
        }

        await selectVideo()

        Video.addEventListener('play', VideoOnPlay)
        if (local.defaultreverseorder) {
            Video.addEventListener('ended', VideoOnEnded)
        }

        await switchAddsectionslistheigthOnClick('0')
        VideoOnPlay()


        console.log('mian stop 成功开启');
    }


    window.onload = () => {
        console.log('正式-v2');
        main()
    }
})()