// ==UserScript==
// @license       MIT
// @name          简单的青柠起始页优化
// @namespace     https://bbs.tampermonkey.net.cn/
// @version       0.4.0
// @description   默认去掉青柠起始页的页脚，使用 alt + t 控制搜索框的显示隐藏 使用alt + g切换时钟显示隐藏，变量全局存储，不需要每次打开都关闭或者显示了 alt+b 显示隐藏 B站热搜 
// @author        Hei
// @match         *://limestart.cn/*
// @grant         GM_setClipboard
// @grant         unsafeWindow
// @grant         GM_xmlhttpRequest
// @grant         GM_addStyle
// @grant         GM_getResourceText
// @grant         GM_getResourceURL
// @connect       api.bilibili.com
// @connect       at.alicdn.com
// @connect       i0.hdslb.com
// @connect       *
// @require       https://lib.baomitu.com/jquery/1.12.4/jquery.min.js
// @resource css https://at.alicdn.com/t/c/font_4423350_7t2u8i9k77r.css
// ==/UserScript==
(function () {
    'use strict';

    const indexDBREQ = window.indexedDB.open("limestart", 1)  // 数据库名称，版本号
    const storeName = 'wallpaper' // 表名
    let local_db = null;

    indexDBREQ.onupgradeneeded = (event) => {
        local_db = event.target.result // 数据库对象
        if (local_db.objectStoreNames.includes(storeName)) {
            local_db.deleteObjectStore(storeName)
            local_db.createObjectStore(storeName)
        }
        console.log('upgrad-连接到本地limestart数据库')
    }

    indexDBREQ.onsuccess = (event) => { // 监听数据库创建成功事件
        local_db = event.target.result // 数据库对象
        console.log('连接到本地limestart数据库')
    }


    const indexedAction = {
        get(storeName, key) {
            return new Promise((res) => {
                const transaction = local_db.transaction([storeName], "readwrite");
                const store = transaction.objectStore(storeName);
                const r = store.get(key)
                r.onsuccess = (e) => {
                    res(e.target.result)
                }
                r.onerror = (e) => {
                    res(null)
                }
            })
        },

        put(val, key) {
            return new Promise((res) => {
                const transaction = local_db.transaction([storeName], "readwrite");
                const store = transaction.objectStore(storeName);
                const r = store.put(val, key)
                r.onsuccess = (e) => {
                    res(true)
                }
                r.onerror = (e) => {
                    res(false)
                }
            })
        },

        delete(key) {
            return new Promise((res) => {
                const transaction = local_db.transaction([storeName], "readwrite");
                const store = transaction.objectStore(storeName);
                const r = store.delete(key)
                r.onsuccess = (e) => {
                    res(true)
                }
                r.onerror = (e) => {
                    res(false)
                }
            })
        }
    }

    // 基础依赖
    const _mainKey = 'easy_limestart'
    const ls = {
        set(key, val) {
            let easy_limestart_obj = window.localStorage.getItem(_mainKey);
            if (!easy_limestart_obj) {
                easy_limestart_obj = {}
            } else {
                easy_limestart_obj = JSON.parse(easy_limestart_obj)
            }
            easy_limestart_obj[key] = val;
            window.localStorage.setItem(_mainKey, JSON.stringify(easy_limestart_obj))
        },
        get(key, defaultVal = null) {
            let easy_limestart_obj = window.localStorage.getItem(_mainKey);
            if (!easy_limestart_obj) {
                easy_limestart_obj = {}
                return defaultVal
            } else {
                easy_limestart_obj = JSON.parse(easy_limestart_obj)
            }
            const val = easy_limestart_obj[key];
            if (val !== undefined) {
                try {
                    return JSON.parse(val)
                } catch (err) {
                    return defaultVal || val
                }
            }
            return defaultVal
        }
    }
    //消息弹窗
    const Message = {
        info(msg) {
            const delay = 2000; //多少毫秒后隐藏
            const greetingContainer = document.createElement("div")
            greetingContainer.id = "greetingContainer"
            const greetingBox = document.createElement("div")
            greetingBox.id = "greetingBox"
            greetingBox.textContent = msg
            greetingContainer.append(greetingBox)
            document.body.append(greetingContainer)
            greetingContainer.offsetLeft; // reflow
            greetingBox.style.opacity = 1
            greetingBox.style.transform = `translateY(0)`
            setTimeout(() => {
                greetingBox.style.opacity = 0;
                greetingBox.style.transform = `translateY(-100%)`;
                greetingBox.addEventListener("transitionend", () => {
                    greetingContainer.remove();
                })
                greetingBox.addEventListener("webkitTransitionEnd", () => {
                    greetingContainer.remove();
                })
            }, delay)
        }
    }

    // 加载B站热搜


    // 去除脚标
    const timer = setInterval(() => {
        const footer = document.querySelector("footer");
        if (footer) {
            footer.style.display = 'none'
            clearInterval(timer)
        }
    }, 500);

    /**
     * 显示/隐藏搜索框
     */
    function showSearchCb() {
        const searchSuggestionContainer = document.getElementById("searchSuggestionContainer");
        const menuSearchEng = document.getElementById("menuSearchEng");
        const searchEl = document.getElementById("searchBar");
        if (searchEl) {
            searchEl.style.display = showSearch ? 'block' : 'none';
        }
        if (searchSuggestionContainer) {
            searchSuggestionContainer.style.display = showSearch ? 'block' : 'none';
        }

        if (menuSearchEng) {
            menuSearchEng.style.display = showSearch ? 'block' : 'none';
        }

    }

    let showSearch = ls.get("showSearch");
    showSearchCb();
    // 如果隐藏输入框，那就失去焦点 + 不要cover
    if (!showSearch) {
        document.getElementById("inputSearch").blur()
        document.getElementById("cover").click()
    }



    // 显示/隐藏时间框
    let showTimer = ls.get("showTimer", true)
    function showTimerCb() {
        const timeContainer = document.getElementById("timeContainer");
        if (timeContainer) {
            timeContainer.style.display = showTimer ? 'block' : 'none';
        }
    }
    showTimerCb()

    let showBilibili = false;
    let isBliLoading = false;
    //B站热搜请求
    function requestBiApi() {
        const getRow = async (show_name, keyword, icon) => {
            const src = await (new Promise((res) => {
                if (icon) {
                    GM_xmlhttpRequest({
                        url: icon,
                        method: 'get',
                        responseType: 'blob',
                        onload: (data) => {
                            var blob = new Blob([data.response], { type: 'image/png' });
                            const fileReader = new FileReader()
                            fileReader.onload = (e) => {
                                res(e.target.result)
                            }
                            // readAsDataURL
                            fileReader.readAsDataURL(blob)
                        }
                    })
                } else {
                    res(null)
                }
            }))
            const img_html = src ? `<img class="bilibili-trending-img" src="${src}" />` : ''
            return `<div class="setOptBox">
                    <span class="setOptCaption" style="margin-left: -6px;">
                        <a href="https://search.bilibili.com/all?keyword=${keyword}" class="link" target="_blank"><i class="icon iconfont icon-bilibili" style="padding-right: 5px;"></i>${show_name}${img_html}</a>
                    </span>
                </div>`
        }
        if (isBliLoading) return;
        isBliLoading = true;
        $(".cover2.easy-limestart .pContent").html(`<div class="setGroup">
                        <div class="setOptBox">
                            <span class="setOptCaption" style="margin-left: -6px;">
                                <a href="javascript:void(0)" class="link" target="_blank">加载中...</a>
                            </span>
                        </div>
                    </div>`)
        GM_xmlhttpRequest({
            url: "https://api.bilibili.com/x/web-interface/wbi/search/square?limit=15&platform=web",
            method: "get",
            onload: async (data) => {
                const { data: { trending: { list, title, top_list } }, code, message } = JSON.parse(data.response);
                // console.log(code, message)
                if (code != 0) {
                    Message.info(message)
                } else {
                    $(".cover2.easy-limestart .pCaptionBar").html(`<span class="btnRectangle3" style="left: 5px; right: auto; top: 6px;" id="btnRefreshBli" role="button" tabindex="0">刷新</span>${title}`)
                    // console.log(list, title, top_list)
                    $("#btnRefreshBli").click(() => {
                        requestBiApi()
                    })
                    const rowList = []
                    for (const idx in list) {
                        const { show_name, keyword, icon } = list[idx];
                        const row = await getRow(show_name, keyword, icon)
                        rowList.push(row)
                    }
                    $(".cover2.easy-limestart .pContent .setGroup").html(rowList.join(""))
                    isBliLoading = false;
                }
            },
            onabort: () => {
                isBliLoading = false;
            },
            onerror: () => {
                isBliLoading = false;
            }
        })
        $(".cover2.easy-limestart").css({
            display: "block",
            opacity: 1
        })
        $(".cover2.easy-limestart .popUp").css({
            display: "block",
            opacity: 0,
            transform: 'rotate3d(1, 1, 0, 50deg)'
        }).offset();
        $(".cover2.easy-limestart .popUp").css({
            display: "block",
            opacity: 1,
            transform: 'none'
        })
    }
    //B站热搜显示
    function showBlibiliTrending(init = false) {
        // style="display: block; opacity: 1;"
        // style="display: block; opacity: 1; transform: none;"
        const dialog = `<div class="cover2 easy-limestart">
            <div class="popUp" id="bilibiliTrending" style="display: block; opacity: 1; transform: none;">
                <span class="btnClose" role="button" tabindex="0" title="关闭"><span class="btnCloseInner"></span></span>
                <div class="pCaptionBar scrolled"></div>
                <div class="pContent" id="contentGSet">
                    <div class="setGroup">
                        <div class="setOptBox">
                            <span class="setOptCaption" style="margin-left: -6px;">
                                <a href="javascript:void(0)" class="link" target="_blank">加载中...</a>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>`
        if (init) {
            GM_addStyle(`.cover2 {
                z-index: 100;
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(0,0,0,.35);
                display: none;
                opacity: 0;
                transition: .25s;
                perspective: 1000px;
            } .icon-bilibili {
                color: #00AFE0; 
            } .bilibili-trending-img {
                height: 16px;
                margin-left: 5px;
                vertical-align: -2px;
            }
            #btnRefreshBli:hover {
                color: #fff;
                background-color: var(--err-color);
            }`)
            GM_addStyle(GM_getResourceText("css"))
            $(document.body).append(dialog);
            $(".cover2.easy-limestart .btnClose").hover(() => {
                $(".cover2.easy-limestart .popUp").css({
                    display: "block",
                    opacity: 1,
                    transform: 'rotate3d(1, 1, 0, 5deg)'
                })
            }, () => {
                $(".cover2.easy-limestart .popUp").css({
                    display: "block",
                    opacity: 1,
                    transform: 'none'
                })
            })
            $(".cover2.easy-limestart .btnClose").click(() => {
                showBilibili = false;
                $(".cover2.easy-limestart").fadeOut(100)
            })
        } else {
            showBilibili = !showBilibili;
            if (showBilibili) {
                requestBiApi()
            } else {
                $(".cover2.easy-limestart").fadeOut(100)
            }
        }
    }
    showBlibiliTrending(true);


    // 增加键盘事件
    document.body.addEventListener("keydown", (e) => {
        if (e.altKey && e.key.toLowerCase() === 't') {
            showSearch = !showSearch;
            showSearchCb()
            Message.info(showSearch ? "显示搜索框" : '隐藏搜索框')
            ls.set("showSearch", showSearch)
        }
        if (e.altKey && e.key.toLowerCase() === 'g') {
            showTimer = !showTimer;
            showTimerCb()
            Message.info(showTimer ? "显示时间" : '隐藏时间')
            ls.set("showTimer", showTimer)
        }

        if (e.altKey && e.key.toLowerCase() === 'b') {
            showBlibiliTrending()
        }
    });

    //自定义外部链接背景图
    GM_addStyle(`.easy_input {
        width: calc(100% - 55px);
        color: var(--b-alpha-60);
        background-color: transparent;
        border: none;
        transition: .25s;
    } button#btnBrowse:disabled {
        background-color: gray!important;
    }`)

    const readUrlImg = (url) => {
        return new Promise((res) => {
            GM_xmlhttpRequest({
                url,
                method: "get",
                responseType: 'blob',
                onload: async (data) => {
                    var blob = new Blob([data.response], { type: 'image/png' });
                    const fileReader = new FileReader()
                    fileReader.onload = (e) => {
                        const img_url = URL.createObjectURL(blob)
                        res([null, img_url, [data.response]])
                    }
                    // readAsDataURL
                    fileReader.readAsDataURL(blob)
                },
                onerror: (err) => {
                    if (err === 'permission not allowed') {
                        Message.info('授权被拒绝')
                    } else {
                        Message.info(err)
                    }
                    res([err, null, null])
                }
            })
        })
    }

    $("#contentBg .bgGroup").eq(0).after(`
        <div style="position: relative; height:26px; align-items:end;" class='bgGroup'>
            <input id="outsideImgUrlInput" placeholder="请输入外部图片链接" class="easy_input" /> 
            <label class="switch">
                <input type="checkbox" id="chkOutsideImgUrlBar">
                <div class="slider" id="chkOutsideImgUrlBarInner"></div>
            </label>
        </div>
    `);

    $("#outsideImgUrlInput").on("input", async () => {
        const isChecked = $("#chkOutsideImgUrlBar").prop("checked")
        console.log(isChecked)
        if(!isChecked) return
        const key = `custom`
        const oldKey = 'oldCustom'
        const videoPosterKey = "customVideoPoster"
        $("#chkOutsideImgUrlBar").prop("checked", false);
        const pageFile = await indexedAction.get(storeName, oldKey); //老的视频或者图片
        await indexedAction.put(pageFile, key)
        await indexedAction.delete(oldKey)
        if (!pageFile) {
            await indexedAction.delete(key)
            $("#bgPreBoxInnerCustom").addClass("unset").removeAttr("style");
            // const gs = JSON.parse(localStorage.getItem("generalSettings") || {});
            // gs['bgPreference'] = 'Default1'
            // localStorage.setItem("generalSettings", JSON.stringify(gs))
            $("#bgPreBoxInnerDefault1").click();
            ls.set("easy_custom_out_url_checked", false)
            return
        }
        const img_url = URL.createObjectURL(pageFile)
        if (pageFile.type.startsWith("video/")) {
            let videoPosterImg = await indexedAction.get(storeName, videoPosterKey); //是否能获取到视频封面
            $("#liveBgBox").css({
                display: 'block',
                opacity: 1,
                transform: "scale(1.1)"
            }).attr("src", img_url)
            $("#bgBox").css({ opacity: 0 });
            if (videoPosterImg) {
                $("#bgPreBoxInnerCustom").css({ "background-image": `url(${videoPosterImg})` })

            }
        } else {
            $("#liveBgBox").css({
                display: 'none',
                opacity: 1,
                transform: 'scale(1.1)'
            })
            $("#bgBox").css({
                opacity: 1,
                transform: "scale(1.1)",
                display: "block"
            });
            $("#bgPreBoxInnerCustom").css({ "background-image": `url(${img_url})` })
            $("#bgBox").attr("src", img_url)
        }

        $("#bgPreBoxInnerCustom, #bgPreviewBoxCustom").off("click")
        $("#bgPreBoxInnerCustom, #bgPreviewBoxCustom").click(async () => {
            const pageFile = await indexedAction.get(storeName, key)
            const img_url = URL.createObjectURL(pageFile)
            if (pageFile.type.startsWith("video/")) {
                $("#liveBgBox").attr("src", img_url)
            } else {
                $("#bgBox").attr("src", img_url)
            }
        })
        ls.set("easy_custom_out_url_checked", false)
        $("#btnBrowse").attr("disabled", false)
    })

    // https://img0.baidu.com/it/u=68017732,1315184908&fm=253&fmt=auto&app=138&f=JPEG?w=642&h=243
    $("#chkOutsideImgUrlBar").change(async (e) => {
        const { checked } = e.target
        const url = $("#outsideImgUrlInput").val()
        const key = `custom`
        const oldKey = 'oldCustom'
        const videoPosterKey = "customVideoPoster"
        if (checked && local_db && url) {
            const [error, img_url, bolb] = await readUrlImg($("#outsideImgUrlInput").val());
            const file = new File(bolb, 'outside_url_img.png', { type: "image/png" }); //外部链接生成的图片
            const oldFile = await indexedAction.get(storeName, key) //拿到当前正在使用的图片或者video
            await indexedAction.put(oldFile, oldKey) //拿到当前正在使用的图片或者video
            await indexedAction.put(file, key) //外部链接生成的图片 入住 custom
            //当前只支持图片，只要存储完成，如果以前用的是视频文件，那就需要隐藏，这里默认隐藏一次
            $("#liveBgBox").css({
                display: "none",
                opacity: 1,
                transform: 'scale(1.1)'
            })
            $("#btnBrowse").attr("disabled", true)
            ls.set("easy_custom_out_url", url)
            $("#bgPreBoxInnerCustom").removeClass("unset").css({ "background-image": `url(${img_url})` }).click()
            $("#bgBox").attr("src", img_url)
            $("#bgPreBoxInnerCustom, #bgPreviewBoxCustom").off("click")
            $("#bgPreBoxInnerCustom, #bgPreviewBoxCustom").click(async () => {
                $("#bgBox").attr("src", img_url)
            })
        } else {
            $("#btnBrowse").attr("disabled", false)
            if (!checked) {
                const pageFile = await indexedAction.get(storeName, oldKey); //老的视频或者图片
                await indexedAction.put(pageFile, key)
                await indexedAction.delete(oldKey)
                if (!pageFile) {
                    await indexedAction.delete(key)
                    $("#bgPreBoxInnerCustom").addClass("unset").removeAttr("style");
                    // const gs = JSON.parse(localStorage.getItem("generalSettings") || {});
                    // gs['bgPreference'] = 'Default1'
                    // localStorage.setItem("generalSettings", JSON.stringify(gs))
                    $("#bgPreBoxInnerDefault1").click();
                    ls.set("easy_custom_out_url_checked", false)
                    return
                }
                const img_url = URL.createObjectURL(pageFile)
                if (pageFile.type.startsWith("video/")) {
                    let videoPosterImg = await indexedAction.get(storeName, videoPosterKey); //是否能获取到视频封面
                    $("#liveBgBox").css({
                        display: 'block',
                        opacity: 1,
                        transform: "scale(1.1)"
                    }).attr("src", img_url)
                    $("#bgBox").css({ opacity: 0 });
                    if (videoPosterImg) {
                        $("#bgPreBoxInnerCustom").css({ "background-image": `url(${videoPosterImg})` })

                    }
                } else {
                    $("#liveBgBox").css({
                        display: 'none',
                        opacity: 1,
                        transform: 'scale(1.1)'
                    })
                    $("#bgBox").css({
                        opacity: 1,
                        transform: "scale(1.1)",
                        display: "block"
                    });
                    $("#bgPreBoxInnerCustom").css({ "background-image": `url(${img_url})` })
                    $("#bgBox").attr("src", img_url)
                }

                $("#bgPreBoxInnerCustom, #bgPreviewBoxCustom").off("click")
                $("#bgPreBoxInnerCustom, #bgPreviewBoxCustom").click(async () => {
                    const pageFile = await indexedAction.get(storeName, key)
                    const img_url = URL.createObjectURL(pageFile)
                    if (pageFile.type.startsWith("video/")) {
                        $("#liveBgBox").attr("src", img_url)
                    } else {
                        $("#bgBox").attr("src", img_url)
                    }
                })
            } else {
                if (!local_db) {
                    Message.info('本地数据库查询失败')
                }
                if (!url) {
                    Message.info('无效的链接')
                }
            }
            e.target.checked = false;
        }
        ls.set("easy_custom_out_url_checked", e.target.checked)
    })

    function initCustomOutSideUrl() {
        const checked = ls.get("easy_custom_out_url_checked")
        const url = ls.get("easy_custom_out_url")
        if (checked) {
            $("#outsideImgUrlInput").val(url)
            $("#chkOutsideImgUrlBar").prop("checked", checked)
        }
        $("#btnBrowse").attr("disabled", checked)
    }
    initCustomOutSideUrl()

    console.log('start')
})();