diff --git a/src/bilibili/config.json b/src/bilibili/config.json index c28d1e6d..847ec02f 100644 --- a/src/bilibili/config.json +++ b/src/bilibili/config.json @@ -73,9 +73,16 @@ ] } }, - "container_padding": { - "title": "宽屏宽度(其它宽度未测试,不建议修改)", - "default": "60" + "widescreen-width-times": { + "title": "宽屏倍数", + "type": "number", + "defaultValue": 1.24, + "required": true, + "hidden": "{{ formData.widescreen === 'off' }}", + "props": { + "addonAfter": "倍" + }, + "description": "推荐范围1.00~1.30倍" }, ".line_mb": { "widget": "line", diff --git a/src/bilibili/src/widescreen.js b/src/bilibili/src/widescreen.js new file mode 100644 index 00000000..dac57c06 --- /dev/null +++ b/src/bilibili/src/widescreen.js @@ -0,0 +1,149 @@ +视频页宽屏, ["www.bilibili.com/video"], { + '已开启$on': () => { + function setSize() { + if (window.__INITIAL_STATE__) { + var i = window.__INITIAL_STATE__.pageVersion, + e = window.__INITIAL_STATE__.isPrVideo; + "new_video" === i ? part1SetSize() : e && window.__INITIAL_STATE__.premiereInfo ? part1SetSize() : originSetSize() + } else originSetSize(), + part1SetSize() + } + function constructStyleString(i, e) { + for (var t = i + " {", + n = Object.keys(e), o = 0; o < n.length; o++) t += n[o] + ": " + e[n[o]] + ";"; + return t + "}\n" + } + function part1SetSize() { + // 是否宽屏 + var isWide = window.isWide; + + // 浏览器窗口高度 + var innerHeight = window.innerHeight; + + // 浏览器窗口宽度 + var innerWidth = Math.max(document.body && document.body.clientWidth || window.innerWidth, 1100); + + // 右侧栏宽度 + var rightWidth = innerWidth > 1680 ? 411 : 350; + + // 计算主区域宽度 + var maxWidth = parseInt(16 * (innerHeight - (innerWidth > 1690 ? 318 : 308)) / 9); + var mainWidth = innerWidth - 112 - rightWidth; + var width = mainWidth < maxWidth ? mainWidth : maxWidth; + + width = Math.round(width * $get('bilibili_widescreen-width-times', 1.22)) + + // 设置最小和最大宽度 + if (width < 668) { + width = 668; + } + if (width > 1694) { + width = 1694; + } + + // 总宽度 + var totalWidth = width + rightWidth; + + // 计算高度 + var height; + if (isWide) { + totalWidth -= 125; + width -= 100; + } + if (window.hasBlackSide && !isWide) { + height = Math.round((width - 14 + (isWide ? rightWidth : 0)) * (9 / 16) + (innerWidth > 1680 ? 56 : 46)) + 96; + } else { + height = Math.round((width + (isWide ? rightWidth : 0)) * (9 / 16)) + (innerWidth > 1680 ? 56 : 46); + } + + // 主区域宽度 + var mainBoxWidth = totalWidth - rightWidth; + + // 生成设置样式的CSS + var css = constructStyleString('.video-container-v1', { + width: 'auto', + padding: '0 10px' + }) + constructStyleString('.left-container', { + width: mainBoxWidth + 'px' + }) + constructStyleString('#bilibili-player', { + width: totalWidth - (isWide ? -30 : rightWidth) + 'px', + height: height + 'px', + position: isWide ? 'relative' : 'static' + }) + constructStyleString('#oldfanfollowEntry', { + position: 'relative', + top: isWide ? height + 28 - 18 + 'px' : '0' + }) + constructStyleString('#danmukuBox', { + 'margin-top': isWide ? height + 28 + 'px' : '0' + }) + constructStyleString('#playerWrap', { + height: height + 'px' + }) + constructStyleString('.video-discover', { + 'margin-left': (totalWidth - rightWidth) / 2 + 'px' + }); + setSizeStyle.innerHTML = css + } + function originSetSize() { + var i = window.isWide, + e = 350, + t = window.innerHeight; + w = window.innerWidth, + w1 = parseInt(16 * (.743 * t - 108.7) / 9), + w2 = w - 152 - e, + min = w1 > w2 ? w2 : w1, + min < 638 && (min = 638), + 1630 < min && (min = 1630); + var n, o = min + e; + n = window.hasBlackSide && !window.isWide ? Math.round((min - 14 + (i ? e : 0)) * (9 / 16) + 46) + 96 : Math.round((min + (i ? e : 0)) * (9 / 16)) + 46; + var r = constructStyleString(".v-wrap", { + width: o + "px", + padding: "0 68px" + }) + constructStyleString(".l-con", { + width: o - e + "px" + }) + constructStyleString("#bilibili-player", { + width: o - (i ? 0 : e) + "px", + height: n + "px", + position: i ? "relative" : "static" + }) + constructStyleString("#oldfanfollowEntry", { + position: "relative", + top: i ? n + 28 - 18 + "px" : "0" + }) + constructStyleString("#danmukuBox", { + "margin-top": i ? n + 28 + "px" : "0" + }) + constructStyleString("#playerWrap", { + height: i ? n - 0 + "px" : "auto" + }); + setSizeStyle.innerHTML = r + } + + + const set = () => { + if (!unsafeWindow.setSizeStyle) { setTimeout(() => set(), 120); return } + + unsafeWindow.setSize = setSize; + + setSize(); + unsafeWindow.addEventListener("resize", + function () { + setSize() + }); + unsafeWindow.PlayerAgent = { + changed: true, + player_widewin: function () { + "new_video" === window.__INITIAL_STATE__.pageVersion && window.scrollTo(0, 60), + window.isWide = !0, + setSize() + }, + player_fullwin: function (i) { + window.scrollTo(0, 0), + window.isWide = !1, + setSize() + }, + toggleBlackSide: function (i) { + window.hasBlackSide = i, + setSize() + } + } + } + set(); + + }, + '已关闭$off': null, +} diff --git a/src/bilibili/src/widescreen_beta.js b/src/bilibili/src/widescreen_beta.js deleted file mode 100644 index 0368c012..00000000 --- a/src/bilibili/src/widescreen_beta.js +++ /dev/null @@ -1,74 +0,0 @@ -视频页宽屏(有bug已删除), ["www.bilibili.com/video"], { - - '已开启$on': () => { - // style(`#app{--container_padding:${$get('bilibili-container-padding',60)}}`) - // timeoutOnLoad(() => { - // const player = document.getElementById("bilibili-player"); - // const playerWarp = document.getElementById("playerWrap"); - // const video = player.querySelector("video"); - // const updateText = document.getElementsByClassName("pubdate-text")[0]; - // let miniPlayerWarp = document.getElementsByClassName("bpx-player-mini-warp")[0]; - - // let old_height = playerWarp.getBoundingClientRect().height - - // let old_isFullScreen = (Boolean)(document.fullscreenElement) - // let old_text = updateText.innerHTML - // let old_position = "old"; - // let old_miniPlayerWarpDisplay = "none"; - // if (miniPlayerWarp != null) old_miniPlayerWarpDisplay = miniPlayerWarp.style.display - // delay(() => { - // let position = window.getComputedStyle(player).position - // let miniPlayerWarpDisplay = "none"; - // miniPlayerWarp = document.getElementsByClassName("bpx-player-mini-warp")[0]; - // if (miniPlayerWarp != null) miniPlayerWarpDisplay = miniPlayerWarp.style.display - - // if (old_position == position && old_text == updateText.innerHTML && old_miniPlayerWarpDisplay == miniPlayerWarpDisplay && old_isFullScreen == (Boolean)(document.fullscreenElement)) return; - // if (old_text != updateText.innerHTML) { - // playerWarp.style.height = 'auto'; - // playerWarp.style.width = 'auto'; - // } - // if (miniPlayerWarpDisplay != 'none') { - // // 小窗 - // playerWarp.style.height = old_height + "px"; - // video.style.maxHeight = ''; - // } else { - // if (document.fullscreenElement) { - // // 全屏 - // playerWarp.style.width = "auto" - // playerWarp.style.marginLeft = "0" - // player.style.width = "100%" - // video.style.maxHeight = '100%'; - // } else if (player.classList.contains('mode-webscreen')) { - // // 网页全屏 - // playerWarp.style.width = "auto" - // playerWarp.style.marginLeft = "0" - // player.style.width = "100%" - // video.style.maxHeight = '100%'; - // } else if (position == "relative") { - // // 剧场模式 - // playerWarp.style.height = "auto" - // playerWarp.style.width = "120%" - // playerWarp.style.marginLeft = "7.2%" - // player.style.width = "auto" - // video.style.maxHeight = '80vh'; - // } else { - // // 默认 - // playerWarp.style.height = old_height + "px"; - // playerWarp.style.width = "auto" - // playerWarp.style.marginLeft = "0" - // player.style.width = "100%" - // video.style.maxHeight = '80vh'; - // } - - // old_position = position - // old_isFullScreen = (Boolean)(document.fullscreenElement) - // old_text = updateText.innerHTML - // old_miniPlayerWarpDisplay = miniPlayerWarpDisplay - // old_height = playerWarp.getBoundingClientRect().height - - // } - // }, 200, true) - // }, 500) - // return $SASS(widescreen.sass) - }, '已关闭$off': null, -} diff --git a/src/bilibili/style/widescreen.sass b/src/bilibili/style/widescreen.sass deleted file mode 100644 index a91d114d..00000000 --- a/src/bilibili/style/widescreen.sass +++ /dev/null @@ -1,22 +0,0 @@ -#app .video-container-v1 - padding: 0px var(--container_padding).5px - #viewbox_report - height: auto - padding-bottom: 22px - h1 - text-wrap: wrap - .left-container - width: auto !important - max-width: 60vw - #playerWrap - height: auto - - #bilibili-player - width: 100% - height: 100% - .bpx-player-sending-area - margin-top: -1px - - .mode-webscreen - height: 100% !important -