Add blur video control feature

This commit is contained in:
the1812 2018-09-11 17:51:28 +08:00
parent e31c550fcf
commit 530c2ddd2e
12 changed files with 90 additions and 15 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1,6 +1,6 @@
// ==UserScript==
// @name Bilibili Evolved (Preview)
// @version 1.3.10
// @version 1.3.11
// @description 增强哔哩哔哩Web端体验. (预览版分支)
// @author Grant Howard
// @match *://*.bilibili.com/*
@ -21,6 +21,7 @@
{
const $ = unsafeWindow.$ || self$;
const settings = {
blurVideoControl: false,
toast: false,
fullTweetsTitle: false,
removeVideoTopMask: true,
@ -47,7 +48,7 @@
notifyNewVersion: true,
fixFullscreen: false,
latestVersionLink: "https://github.com/the1812/Bilibili-Evolved/raw/preview/bilibili-evolved.preview.user.js",
currentVersion: "1.3.10"
currentVersion: "1.3.11"
};
function loadSettings()
{
@ -93,6 +94,7 @@
fullTweetsTitleStyle: new Resource("style/style-full-tweets-title.min.css", 7),
imageViewerStyle: new Resource("style/style-image-viewer.min.scss", 8),
toastStyle: new Resource("style/style-toast.min.scss", 9),
blurVideoControlStyle: new Resource("style/style-blur-video-control.min.css", 10),
guiSettingsDom: new Resource("utils/gui-settings.html"),
imageViewerDom: new Resource("utils/image-viewer.html"),
@ -113,7 +115,8 @@
viewCover: new Resource("video/view-cover.min.js"),
notifyNewVersion: new Resource("utils/notify-new-version.min.js"),
toast: new Resource("utils/toast.min.js"),
removeVideoTopMask: new Resource("video/remove-top-mask.min.js")
removeVideoTopMask: new Resource("video/remove-top-mask.min.js"),
blurVideoControl: new Resource("video/blur-video-control.min.js")
};
(function ()
{
@ -153,6 +156,9 @@
this.toast.dependencies = [
this.toastStyle
];
this.blurVideoControl.dependencies = [
this.blurVideoControlStyle
];
}).apply(Resource.all);
(function ()
{
@ -172,6 +178,7 @@
this.notifyNewVersion.displayName = "新版本提醒";
this.toast.displayName = "显示消息";
this.removeVideoTopMask.displayName = "删除视频标题层";
this.blurVideoControl.displayName = "模糊视频控制栏背景";
}).apply(Resource.all);
}
function downloadText(url, load, error)

View File

@ -1,6 +1,6 @@
// ==UserScript==
// @name Bilibili Evolved
// @version 1.3.10
// @version 1.3.11
// @description 增强哔哩哔哩Web端体验.
// @author Grant Howard
// @match *://*.bilibili.com/*
@ -21,6 +21,7 @@
{
const $ = unsafeWindow.$ || self$;
const settings = {
blurVideoControl: false,
toast: false,
fullTweetsTitle: false,
removeVideoTopMask: true,
@ -47,7 +48,7 @@
notifyNewVersion: true,
fixFullscreen: false,
latestVersionLink: "https://github.com/the1812/Bilibili-Evolved/raw/master/bilibili-evolved.user.js",
currentVersion: "1.3.10"
currentVersion: "1.3.11"
};
function loadSettings()
{
@ -93,6 +94,7 @@
fullTweetsTitleStyle: new Resource("style/style-full-tweets-title.min.css", 7),
imageViewerStyle: new Resource("style/style-image-viewer.min.scss", 8),
toastStyle: new Resource("style/style-toast.min.scss", 9),
blurVideoControlStyle: new Resource("style/style-blur-video-control.min.css", 10),
guiSettingsDom: new Resource("utils/gui-settings.html"),
imageViewerDom: new Resource("utils/image-viewer.html"),
@ -113,7 +115,8 @@
viewCover: new Resource("video/view-cover.min.js"),
notifyNewVersion: new Resource("utils/notify-new-version.min.js"),
toast: new Resource("utils/toast.min.js"),
removeVideoTopMask: new Resource("video/remove-top-mask.min.js")
removeVideoTopMask: new Resource("video/remove-top-mask.min.js"),
blurVideoControl: new Resource("video/blur-video-control.min.js")
};
(function ()
{
@ -153,6 +156,9 @@
this.toast.dependencies = [
this.toastStyle
];
this.blurVideoControl.dependencies = [
this.blurVideoControlStyle
];
}).apply(Resource.all);
(function ()
{
@ -172,6 +178,7 @@
this.notifyNewVersion.displayName = "新版本提醒";
this.toast.displayName = "显示消息";
this.removeVideoTopMask.displayName = "删除视频标题层";
this.blurVideoControl.displayName = "模糊视频控制栏背景";
}).apply(Resource.all);
}
function downloadText(url, load, error)

Binary file not shown.

After

Width:  |  Height:  |  Size: 94 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.8 MiB

After

Width:  |  Height:  |  Size: 587 KiB

View File

@ -0,0 +1,20 @@
@supports (backdrop-filter: blur(48px)) or (-webkit-backdrop-filter: blur(48px))
{
.video-control-blur-layer
{
width: 100%;
height: 100%;
position: absolute;
-webkit-backdrop-filter: blur(48px);
backdrop-filter: blur(48px);
z-index: -1;
}
.bui-slider .bui-track.bui-track-video-progress .bui-bar-wrap
{
background-color: transparent !important;
}
.bilibili-player-area .bilibili-player-video-control-wrap
{
transition: none !important;
}
}

View File

@ -0,0 +1 @@
@supports (backdrop-filter: blur(48px)) or (-webkit-backdrop-filter: blur(48px)){.video-control-blur-layer{width:100%;height:100%;position:absolute;-webkit-backdrop-filter:blur(48px);backdrop-filter:blur(48px);z-index:-1;}.bui-slider .bui-track.bui-track-video-progress .bui-bar-wrap{background-color:transparent!important;}.bilibili-player-area .bilibili-player-video-control-wrap{transition:none!important;}}

View File

@ -44,6 +44,7 @@
<checkbox indent="0" key="harunaScale" dependencies=""></checkbox>
<checkbox indent="0" key="removeLiveWatermark" dependencies=""></checkbox>
<checkbox indent="0" key="removeVideoTopMask" dependencies=""></checkbox>
<checkbox indent="0" key="blurVideoControl" dependencies=""></checkbox>
<category>触摸优化</category>
<checkbox indent="0" key="touchNavBar" dependencies=""></checkbox>
<checkbox indent="0" key="touchVideoPlayer" dependencies=""></checkbox>

View File

@ -1 +1 @@
1.3.10
1.3.11

View File

@ -0,0 +1,18 @@
(() =>
{
return (_, resources) =>
{
SpinQuery.count(
() => $(".bui-slider .bui-track.bui-track-video-progress,.bilibili-player-area .bilibili-player-video-control"),
2,
containers =>
{
containers.prepend(`<div class="video-control-blur-layer"></div>`);
resources.applyStyle("blurVideoControlStyle", "bilibili-blur-video-control");
});
return {
ajaxReload: false
};
};
})();

1
video/blur-video-control.min.js vendored Normal file
View File

@ -0,0 +1 @@
(()=>{return(i,l)=>{SpinQuery.count(()=>$(".bui-slider .bui-track.bui-track-video-progress,.bilibili-player-area .bilibili-player-video-control"),2,i=>{i.prepend(`<div class="video-control-blur-layer"></div>`);l.applyStyle("blurVideoControlStyle","bilibili-blur-video-control")});return{ajaxReload:false}}})();