Bilibili BigCover

查看B站封面大图

// ==UserScript==
// @name         Bilibili BigCover
// @namespace    https://greasyfork.org/zh-CN/users/196399-xyabc120
// @icon         http://static.hdslb.com/images/favicon.ico
// @version      1.2.0
// @description  查看B站封面大图
// @author       Mr.ZHAO
// @include      *://www.bilibili.com/video/*
// @include      *://bangumi.bilibili.com/anime/*
// @include      *://www.bilibili.com/bangumi/*
// @require      https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js
// @require      https://lib.baomitu.com/fancybox/3.5.7/jquery.fancybox.min.js
// @resource     fancyboxCss  https://lib.baomitu.com/fancybox/3.5.7/jquery.fancybox.min.css
// @grant        GM_getResourceText
// @grant        GM_xmlhttpRequest
// @grant        GM_notification
// @grant        GM_addStyle
// @note         2018.08.08-v1.0.0 1.变更查看大图显示方式：不再弹出新标签页显示（部分浏览器会要求信任站点弹窗，所以摒弃掉），由当前页面弹层放大显示、2.新增下载及关闭按钮、3.按钮样式优化、
// @note         2018.08.11-v1.1.0 1.解决点击右侧推荐视频后，查看封面依然是首次加载页面的封面图问题、2.优化触发事件的显示方式
// @note         2018.08.25-v1.1.1 1.添加旧版番剧在全屏播放时设置进度条透明样式、2.全屏弹幕输入条不再遮挡字幕、3.添加插件 icon 图标
// @note         2019.03.31-v1.1.2 移除进度条样式控制
// @note         2020.04.18-v1.1.3 添加对B站新版样式兼容；优化弹窗体验
// @note         2021.07.23-v1.2.0 适配新版样式；优化弹窗体验
// ==/UserScript==

(function () {
    'use strict';

    // 1.添加弹窗样式表
    var fancyboxCss = GM_getResourceText("fancyboxCss");
    var cssNode = document.createElement("style");
    cssNode.setAttribute("type", "text/css");
    cssNode.setAttribute("name", "fancyboxCss");
    try{
        var buttonStyle = `a[data-fancybox]{margin: auto 20px;line-height: 18px;cursor: pointer;}.count-wrapper>a[data-fancybox]{color:inherit;}.count-wrapper>a[data-fancybox]:hover{color: #00a1d6;}.fancybox-content{border-radius: 8px;background-color: transparent!important;}`;
        cssNode.textContent = buttonStyle + fancyboxCss;
        document.querySelector("head").appendChild(cssNode);
    } catch (e){console.log(e.message);}

    // 2.检测 jQuery 是否可用
    if (!window.jQuery) {
        // 若还未加载jQuery, 则监听
        (function waitForJquery(){
            if (!window.jQuery){
                setTimeout(waitForJquery, 100);
            } else appendCoverBtn();
        })();
    } else {
        appendCoverBtn();
    }

    // 3.添加大图按钮
    function appendCoverBtn() {

        var coverBtn = $(`<span><a id="bilibiliBigCoverLink" data-fancybox><i class="van-icon-info_playnumber"></i>&nbsp;查看封面大图</a></span>`).on('click',function(e){
            var imageurl;
            if ($('meta[itemprop="image"]').length !== 0){
                imageurl = $('meta[itemprop="image"]').attr("content");
            }else if($('meta[property="og:image"]').length !== 0){
                imageurl = $('meta[property="og:image"]').attr("content");
            }
            imageurl = imageurl.replace(/http[s]?\:/,'');
            $.fancybox.open({src: imageurl, buttons : ['zoom', 'download','close'], animationEffect: "zoom", hideScrollbar: false });
            return false;
        });

        var appended = false;
        // 容器下每个子元素被修改时，都会触发此动作。采用监听`DOMSubtreeModified`方法是为了避免被官方异步加载的视频数据清空，DOM更新导致已被添加的按钮“重置”而无法挂载。故在DOM变更完成之后添加
        $(".count-wrapper,.video-info-m>.number,.video-data,#arc_toolbar_report>.ops").bind('DOMSubtreeModified', function(e) {
           if(!appended){
               appended = true;
               $(this).append(coverBtn);
           }
        });

        // 兼容新版内容
        $(".media-count").each((index, ele) => {
            new MutationObserver(function(mutations, observe) {
                mutations.forEach(function(item, i){
                    if(item.target.innerText.indexOf(coverBtn.text()) === -1){
                        setTimeout(() => $(item.target).append(coverBtn), 1200)
                    }
                });
            }).observe(ele, { childList: true, subtree: true });
        });
    }

})();