diff --git a/README.md b/README.md index d9d73a23b..7879930a7 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,8 @@ 增强哔哩哔哩Web端体验的油猴脚本. **注: 作为[原脚本](bilibili-touch.user.js)的工程化形式,目前尚未完成,在完成之前可以先使用[原脚本](bilibili-touch.user.js).([安装原脚本](https://github.com/the1812/Bilibili-Evolved/raw/master/bilibili-touch.user.js))** - +# 2018年7月20日后的变化 +新版播放页面的播放器重新设计,因此网页全屏外置功能将在以后的版本中废弃,新样式对其的适配还需改进. # 功能概览 ## 新样式 改变顶栏的样式,并有一些界面微调,适用于主站和新版播放器.暂不支持直播,相簿. @@ -61,7 +62,6 @@ 已知问题: 滑动调整的音量不会保存,下次打开视频将恢复原音量. #### 外置网页全屏 因为触屏设备很难做出"鼠标悬停",`网页全屏`将从`全屏`的鼠标悬停菜单中移动到外部. -**2018年7月20日后新版播放器网页全屏默认就在外部,这个功能将会废弃.** #### 放大按钮 放大控制栏的按钮及间距,使触摸操作更准确. ##### 启用前 diff --git a/bilibili-evolved.preview.user.js b/bilibili-evolved.preview.user.js index ad9dc13f6..d98dbb88d 100644 --- a/bilibili-evolved.preview.user.js +++ b/bilibili-evolved.preview.user.js @@ -256,7 +256,7 @@ ok: "M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" }; waitForQuery()( - () => $("body"), + () => $(".gr__bilibili_com>body"), it => it.length > 0, it => { diff --git a/style/new-styles.js b/style/new-styles.js index 373acf957..847a77654 100644 --- a/style/new-styles.js +++ b/style/new-styles.js @@ -4,7 +4,7 @@ { waitForQuery()( () => $(".nav-search-keyword"), - it => it.length > 0, + it => it.length > 0 && it.attr("placeholder").length > 0, textBox => textBox.attr("placeholder", "搜索") ); waitForQuery()( diff --git a/style/style-gui-settings.scss b/style/style-gui-settings.scss index eefc543c5..4574f6e2d 100644 --- a/style/style-gui-settings.scss +++ b/style/style-gui-settings.scss @@ -4,17 +4,19 @@ display: flex; justify-content: center; align-items: center; + position: absolute; + top: 0; + left: 0; + width: 24px; } .gui-settings { - position: absolute; - top: 0; - left: -12px; display: flex; justify-content: center; align-items: center; cursor: pointer; -webkit-tap-highlight-color: transparent; + transform: translateX(-12px); } .gui-settings, .gui-settings-header .gui-settings-close path, @@ -29,7 +31,7 @@ } .gui-settings:hover { - left: 0; + transform: translateX(0px); } .gui-settings:hover svg path { diff --git a/style/style-touch-player.scss b/style/style-touch-player.scss index 5d21bc42e..ce5691ae5 100644 --- a/style/style-touch-player.scss +++ b/style/style-touch-player.scss @@ -141,3 +141,58 @@ div.bilibili-player-video-control { left: unset !important; } +.bilibili-player-video-control-wrap +{ + padding: 0 !important; + background: #222d !important; +} +.bilibili-player-video-control-bottom +{ + align-items: center !important; +} +.bilibili-player-video-control-bottom-left +{ + display: flex; + align-items: center; +} +.bilibili-player-video-btn-danmaku +{ + flex-grow: 0 !important; + display: flex !important; + align-items: center !important; + height: 100% !important; + margin: 0 !important; + padding: 0 !important; +} +.bilibili-player.mode-webfullscreen .bilibili-player-video-control-wrap .bilibili-player-video-control-bottom-right +{ + flex-grow: 1 !important; +} +@media screen and (min-width: 750px) +{ + .bilibili-player.mode-fullscreen .bilibili-player-video-control-wrap .bilibili-player-video-control-bottom-center .bilibili-player-video-sendbar .bilibili-player-video-inputbar, + .bilibili-player.mode-webfullscreen .bilibili-player-video-control-wrap .bilibili-player-video-control-bottom-center .bilibili-player-video-sendbar .bilibili-player-video-inputbar + { + background: #fff1 !important; + } + .bilibili-player.mode-fullscreen .bilibili-player-video-control-wrap, .bilibili-player.mode-fullscreen .bilibili-player-video-control-wrap .bilibili-player-video-control, + .bilibili-player.mode-webfullscreen .bilibili-player-video-control-wrap, .bilibili-player.mode-webfullscreen .bilibili-player-video-control-wrap .bilibili-player-video-control + { + height: 100% !important; + margin: 0 !important; + } + .bilibili-player.mode-fullscreen .bilibili-player-video-control-wrap .bilibili-player-video-control-bottom-left, + .bilibili-player.mode-webfullscreen .bilibili-player-video-control-wrap .bilibili-player-video-control-bottom-left + { + height: 100% !important; + } + .bilibili-player-video-btn.bilibili-player-video-btn-start.video-state-pause + { + flex-grow: 0.5 !important; + } + .bilibili-player.mode-fullscreen .bilibili-player-video-control-wrap .bilibili-player-video-control .bilibili-player-video-btn, + .bilibili-player.mode-webfullscreen .bilibili-player-video-control-wrap .bilibili-player-video-control .bilibili-player-video-btn + { + width: unset !important; + } +} diff --git a/utils/gui-settings.js b/utils/gui-settings.js index c6b95ae24..8dfd4975f 100644 --- a/utils/gui-settings.js +++ b/utils/gui-settings.js @@ -1,14 +1,24 @@ -(() => { +(() => +{ return (settings, resources) => { + const svgData = { + settings: "M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z", + close: "M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z", + ok: "M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" + }; waitForQuery()( - () => $(".member-bottom"), + () => $("body"), it => it.length > 0, it => { if ($(".gui-settings").length === 0) { - it.append(`设置`); + it.append(`
`); $(".gui-settings").on("click", () => { $(".gui-settings-panel").css("display", "flex"); @@ -20,11 +30,65 @@ if (settingsBox) { $("body").append(settingsBox); - $(".gui-settings-close path").prop("d", "M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"); - $(".gui-settings-ok path").prop("d", "M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"); + $(".gui-settings-header .gui-settings-close").on("click", () => + { + $(".gui-settings-panel").css("display", "none"); + }); + $("button.save").on("click", () => + { + $("input[type='checkbox'][key]").each((_, element) => + { + settings[$(element).attr("key")] = $(element).prop("checked"); + }); + saveSettings(); + const svg = $(".gui-settings-footer svg.gui-settings-ok"); + if (parseInt(svg.css("width")) === 0) + { + svg.css({ + width: "30px", + marginLeft: "3rem" + }); + setTimeout(() => + { + svg.css({ + width: "0", + marginLeft: "0" + }); + }, 3000); + } + }); + + $(".gui-settings-close path").attr("d", svgData.close); + $(".gui-settings-ok path").attr("d", svgData.ok); + $(".gui-settings svg path").attr("d", svgData.settings); + + const dependencies = {}; for (const key in settings) { - $(`input[type='checkbox'][data='${key}']`).prop("checked", settings[key]); + $(`input[type='checkbox'][key='${key}']`).prop("checked", settings[key]); + $(`input[dependencies]`).each((_, element) => + { + dependencies[$(element).attr("key")] = $(element).attr("dependencies"); + }); + $(`input[type='checkbox']`).on("change", e => + { + const self = $(e.srcElement); + const checked = self.prop("checked"); + for (const key in dependencies) + { + const dependency = dependencies[key].split(" "); + if (dependency.indexOf(self.attr("key")) !== -1) + { + let value = true; + if (checked && dependency.every(k => $(`input[key='${k}']`).prop("checked"))) + { + value = false; + } + $(`input[key='${key}']`).prop("disabled", value); + } + + } + }); } } } diff --git a/utils/gui-settings.min.js b/utils/gui-settings.min.js new file mode 100644 index 000000000..c43a7a323 --- /dev/null +++ b/utils/gui-settings.min.js @@ -0,0 +1 @@ +(()=>(t,e)=>{const s="M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z",i="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z",n="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z";waitForQuery()(()=>$("body"),t=>t.length>0,c=>{0===$(".gui-settings").length&&(c.append(""),$(".gui-settings").on("click",()=>{$(".gui-settings-panel").css("display","flex")}));const g=e.getStyle("guiSettingsStyle","gui-settings-style");$("body").after(g);const o=e.data.guiSettingsDom;if(o){$("body").append(o),$(".gui-settings-header .gui-settings-close").on("click",()=>{$(".gui-settings-panel").css("display","none")}),$("button.save").on("click",()=>{$("input[type='checkbox'][key]").each((e,s)=>{t[$(s).attr("key")]=$(s).prop("checked")}),saveSettings();const e=$(".gui-settings-footer svg.gui-settings-ok");0===parseInt(e.css("width"))&&(e.css({width:"30px",marginLeft:"3rem"}),setTimeout(()=>{e.css({width:"0",marginLeft:"0"})},3e3))}),$(".gui-settings-close path").attr("d",i),$(".gui-settings-ok path").attr("d",n),$(".gui-settings svg path").attr("d",s);const e={};for(const s in t)$(`input[type='checkbox'][key='${s}']`).prop("checked",t[s]),$("input[dependencies]").each((t,s)=>{e[$(s).attr("key")]=$(s).attr("dependencies")}),$("input[type='checkbox']").on("change",t=>{const s=$(t.srcElement),i=s.prop("checked");for(const t in e){const n=e[t].split(" ");if(-1!==n.indexOf(s.attr("key"))){let e=!0;i&&n.every(t=>$(`input[key='${t}']`).prop("checked"))&&(e=!1),$(`input[key='${t}']`).prop("disabled",e)}}})}})})(); \ No newline at end of file