B站视频页 - 视频合集样式

修改新版视频页的视频合集样式

// ==UserScript==
// @name         B站视频页 - 视频合集样式
// @namespace    mscststs
// @version      1.4
// @license      ISC
// @description  修改新版视频页的视频合集样式
// @author       mscststs
// @match        https://www.bilibili.com/video/*
// @icon         https://www.bilibili.com/favicon.ico
// @require      https://greasyfork.org/scripts/38220-mscststs-tools/code/MSCSTSTS-TOOLS.js?version=713767
// @run-at       document-body
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    StartVideoCollection();
    async function StartVideoCollection(){
        await mscststs.wait(".video-pod .video-pod__header .header-top .left .title");
        var article = document.querySelector("body");
        var boolean = 0;

        function setVideoCollection() {
            var leftTitle = document.querySelector(".video-pod .video-pod__header .header-top .left .title");
            var videoPod = document.querySelector(".video-pod .video-pod__body");
            //alert(document.querySelectorAll(".simple-base-item.normal .title .title-txt")[0].innerHTML);

            var collectionMaxHeight = "205px";
            var videoMaxHeight = "348px";

            if(leftTitle.innerHTML != "视频选集" && videoPod.style.maxHeight != collectionMaxHeight){
                videoPod.style.cssText += "max-height:"+collectionMaxHeight+"!important;";
                //alert(0);
                VideoCollection();

                var slideItems = document.querySelectorAll(".pod-slide .slide-inner .slide-item");
                if(slideItems) {
                    for(let i = 0; i < slideItems.length; i++) {
                        slideItems[i].addEventListener('click', function() {
                            setTimeout(function() {
                                VideoCollection();
                            });
                        });
                    }
                }
                setTimeout(async function() {
                    await mscststs.wait(".pod-slide-more-popover .pod-slide-more-dropdown .slide-item");
                    var dropdownSlideItems = document.querySelectorAll(".pod-slide-more-popover .pod-slide-more-dropdown .slide-item");
                    for(let i = 0; i < dropdownSlideItems.length; i++) {
                        dropdownSlideItems[i].addEventListener('click', function() {
                            setTimeout(function() {
                                VideoCollection();
                            });
                        });
                    }
                });

            } else if(leftTitle.innerHTML == "视频选集" && document.querySelectorAll(".simple-base-item.normal .title .title-txt")[0].innerHTML.search(/^P\d&nbsp;+/) == -1) {
                videoPod.style.cssText += "max-height:"+videoMaxHeight+"!important;";
                //alert(document.querySelectorAll(".simple-base-item.normal .title .title-num")[0]);
                VideoOperation();

                var leftVideoMode = document.querySelector(".video-pod .video-pod__header .header-top .left .view-mode");
                if(leftVideoMode) {
                    leftVideoMode.addEventListener('click', function() {
                        if(boolean == 1) {
                            boolean = 2;
                        } else if(boolean == 2) {
                            VideoOperation();
                        }
                    });
                }
            }

        }

        async function VideoCollection() {
            await mscststs.wait(".simple-base-item.normal");
            let normals = document.querySelectorAll(".simple-base-item.normal");
            //let fontCSS = "font-size:14px; font-family:PingFang SC,HarmonyOS_Regular,Helvetica Neue,Microsoft YaHei,sans-serif;";
            let fontCSS = "font-size:14px; line-height:30px;";
            for(let i = 0; i < normals.length; i++) {
                normals[i].style.margin = "5px 0";
                normals[i].querySelector(".title").style.cssText += "height: 30px;";
                normals[i].querySelector(".title .title-txt").style.cssText += fontCSS;
                normals[i].querySelector(".stats").style.cssText += fontCSS;
            }
        }

        async function VideoOperation() {
            await mscststs.wait(".simple-base-item.normal");
            if(document.querySelectorAll(".simple-base-item.normal .title .title-txt")[0].innerHTML.search(/^P\d&nbsp;+/) == -1) {
                let normals = document.querySelectorAll(".simple-base-item.normal");
                let fontCSS = "font-size:13.5px; line-height:30px;";
                for(let i = 0; i < normals.length; i++) {
                    normals[i].style.margin = "5px 0";
                    normals[i].querySelector(".title").style.cssText += "height: 30px;";
                    normals[i].querySelector(".title .title-txt").style.cssText += fontCSS;
                    normals[i].querySelector(".stats").style.cssText += fontCSS;

                    //normals[i].querySelector(".title .title-txt").insertAdjacentHTML("beforebegin", "<div class='title-num' style='"+fontCSS+" margin-right:10px;'>P"+(i+1)+"</div>");
                    normals[i].querySelector(".title .title-txt").innerHTML = "P"+(i+1)+"&nbsp;&nbsp;&nbsp;"+normals[i].querySelector(".title .title-txt").innerHTML;
                }
                boolean = 1;
            }
        }

        var options = { 'childList': true, 'attributes':true };
        const callback = function(mutationsList, observer) {
            setVideoCollection();
        };
        const observer = new MutationObserver(callback);
        observer.observe(article, options);
        setVideoCollection();
        /*var time = 500;
        for(var i = 0; i < 20; i++) {
            setTimeout(function() {
                setVideoCollection();
                //alert(123);
            }, time);
            time += 500;
        }*/

    }
})();