-
Notifications
You must be signed in to change notification settings - Fork 1
/
Bilibili-Search-Beautification.user.js
255 lines (243 loc) · 11.9 KB
/
Bilibili-Search-Beautification.user.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
// ==UserScript==
// @name B站搜索页美化
// @namespace http://tampermonkey.net/
// @homepage https://github.com/Trrrrw/UserScript
// @version 0.1.5
// @description 美化search.bilibili.com页面
// @author Trrrrw
// @match https://search.bilibili.com/*
// @require https://cdn.staticfile.org/sweetalert2/11.7.20/sweetalert2.min.js
// @grant GM_addStyle
// @grant GM_addElement
// @grant GM_registerMenuCommand
// @grant GM_setValue
// @grant GM_getValue
// @grant window.onload
// @grant window.onurlchange
// @icon https://www.bilibili.com/favicon.ico?v=1
// @downloadURL https://greasyfork.org/scripts/458903-b%E7%AB%99%E6%90%9C%E7%B4%A2%E9%A1%B5%E7%BE%8E%E5%8C%96/code/B%E7%AB%99%E6%90%9C%E7%B4%A2%E9%A1%B5%E7%BE%8E%E5%8C%96.user.js
// @updateURL https://greasyfork.org/scripts/458903-b%E7%AB%99%E6%90%9C%E7%B4%A2%E9%A1%B5%E7%BE%8E%E5%8C%96/code/B%E7%AB%99%E6%90%9C%E7%B4%A2%E9%A1%B5%E7%BE%8E%E5%8C%96.user.js
// @license GPL-3.0
// ==/UserScript==
(function () {
'use strict';
GM_addElement('link',{
rel:'stylesheet',
href:'https://cdn.staticfile.org/sweetalert2/11.7.20/sweetalert2.min.css'
})
//设置初始化
let value = [{
name: 'imgUrl',
value: 'https://i0.hdslb.com/bfs/new_dyn/2e762660113a84fe20affb3ec16eba386823116.jpg'
},{
name: 'imgFile',
value: ''
},{
name: 'videoUrl',
value: ''
},{
name: 'videoFile',
value: ''
}, {
name: 'upBtnSwitch',
value: true
}, {
name: 'bgType',
value: 1
}];
value.forEach((v) => {
GM_getValue(v.name) === undefined && GM_setValue(v.name, v.value);
});
GM_registerMenuCommand("⚙️设置",() => {
Swal.fire({
title:'⚙️设置',
html:`<label for="bgType">设置背景类型：</label>`+
`<select id="bgType" name="bgTypeSettings">
<option value="1" ${GM_getValue('bgType')=='1' ? 'selected' : ''}>网络图片</option>
<option value="2" ${GM_getValue('bgType')=='2' ? 'selected' : ''}>本地图片</option>
<option value="3" ${GM_getValue('bgType')=='3' ? 'selected' : ''}>网络视频</option>
<!--<option value="4" ${GM_getValue('bgType')=='4' ? 'selected' : ''}>本地视频</option>-->
</select><br/>`+
`<input id="up-button-checkbox" type="checkbox" ${GM_getValue('upBtnSwitch') ? 'checked' : ''}>是否显示投稿按钮</input><br/>`+
`<div id = "setting1" style="display:${GM_getValue('bgType')!='1' ? 'none' : ''}">
<label class="swal2-input-label">🖼️输入图片链接</label><input id="bgimg-url" class="swal2-input" type="url" placeholder="输入图片链接" value="${GM_getValue('imgUrl')}">
</div>`+
`<div id = "setting2" style="display:${GM_getValue('bgType')!='2' ? 'none' : ''}">
<label class="swal2-input-label">🖼️选择图片文件</label><input id="bgimg-file" class="swal2-file" type="file" accept="image/*" aria-label="Upload your profile picture">
</div>`+
`<div id = "setting3" style="display:${GM_getValue('bgType')!='3' ? 'none' : ''}">
<label class="swal2-input-label">🎬输入视频链接</label><input id="bgvideo-url" class="swal2-input" type="url" placeholder="输入视频链接" value="${GM_getValue('videoUrl')}">
</div>`+
`<div id = "setting4" style="display:${GM_getValue('bgType')!='4' ? 'none' : ''}">
<label class="swal2-input-label">🎬选择视频文件</label><input id="bgvideo-file" class="swal2-file" type="file" accept="video/*" aria-label="Upload your profile picture">
</div>`
}).then((res)=>{
if (res.isConfirmed) {
history.go(0)
}
})
document.getElementById('up-button-checkbox').addEventListener('change', (e) => {
GM_setValue('upBtnSwitch', e.currentTarget.checked);
})
document.getElementById('bgimg-url').addEventListener('change', (e) => {
if(e.currentTarget.value){
GM_setValue('imgUrl', e.currentTarget.value);
}
})
document.getElementById('bgimg-file').addEventListener('change', (e) => {
if(e.isTrusted){
const selectedFile = event.target.files[0];
const reader = new FileReader();
reader.onload = (f) => {
GM_setValue('imgFile',f.target.result)
};
reader.readAsDataURL(selectedFile);
}
})
document.getElementById('bgvideo-url').addEventListener('change', (e) => {
if(e.currentTarget.value){
GM_setValue('videoUrl', e.currentTarget.value);
}
})
document.getElementById('bgvideo-file').addEventListener('change', (e) => {
if(e.isTrusted){
const selectedFile = e.target.files[0];
var url = URL.createObjectURL(selectedFile);
GM_setValue('videoFile',url);
}
})
document.getElementById('bgType').addEventListener('change', (e) => {
GM_addStyle(`#setting${e.target.value}{display: unset !important}`);
GM_addStyle(`#setting${GM_getValue('bgType')}{display: none !important}`);
GM_setValue('bgType',e.target.value);
})
});
//删除元素
let del_dom=[
'#biliMainFooter',//footer
'.side-buttons',//右下客服按钮
'.right-entry-text',//右上按钮文字
'.vip-wrap',//右上大会员
'.center-title-text',//搜索栏上方文字“搜索”
'.left-entry > .v-popover-wrap:nth-of-type(n+2)',//左上元素
'.mini-header__title',//左上bilibili图标右侧“首页”
'.search-panel:last-child',
'html::-webkit-scrollbar'//滚动条
];
if (!GM_getValue('upBtnSwitch')) {
del_dom.push('.right-entry-item--upload')//投稿按钮
} else {
GM_addStyle('.bili-header .header-upload-entry{background: #00aeec !important;border-radius: 30px;}')//投稿按钮颜色圆角
}
del_dom.forEach((dom) => {
GM_addStyle(`${dom}{display:none !important}`)
});
//更改样式
//添加背景
switch(GM_getValue('bgType')){
case '1':
GM_addStyle(`body{background: url( ${GM_getValue('imgUrl')} );}`)
break;
case '2':
GM_addStyle(`body{background: url( ${GM_getValue('imgFile')} );}`)
break;
case '3':{
const sourceTag = document.createElement("source");
sourceTag.src = GM_getValue('videoUrl');
sourceTag.type="video/mp4";
const videoTag = document.createElement("video");
videoTag.id="bg-video";
videoTag.muted=true;
videoTag.autoplay=true;
videoTag.loop=true;
videoTag.style.cssText=`position: absolute;object-fit: cover;height: 100%;width: 100%;top: 0;left: 0;`;
videoTag.appendChild(sourceTag);
document.body.appendChild(videoTag);
break;
}
case '4':{
const sourceTag = document.createElement("source");
sourceTag.src = GM_getValue('videoFile');
sourceTag.type="video/mp4";
const videoTag = document.createElement("video");
videoTag.id="bg-video";
videoTag.muted=true;
videoTag.autoplay=true;
videoTag.loop=true;
videoTag.style.cssText=`position: absolute;object-fit: cover;height: 100%;width: 100%;top: 0;left: 0;`;
videoTag.appendChild(sourceTag);
document.body.appendChild(videoTag);
break;
}
default:
GM_setValue('bgType','1');
}
// if(GM_getValue('isUrl')){
// GM_addStyle(`body{background: url( ${GM_getValue('imgUrl')} );}`)
// }else{
// GM_addStyle(`body{background: url( ${GM_getValue('imgFile')} );}`)
// }
GM_addStyle('#i_cecream{background: transparent;}')
GM_addStyle('body{background-attachment: fixed;background-size: cover;}')
//header模糊效果
GM_addStyle('#bili-header-container{background: transparent !important}')
GM_addStyle('.bili-header{background: transparent !important;}')
GM_addStyle('.bili-header__bar{background: transparent !important;backdrop-filter: blur(10px) !important;}')
//header样式
GM_addStyle('.left-entry{display: none !important}')
GM_addStyle('.bili-header .bili-header__bar{width: auto;right: 60px;top: 20px;border-radius: 30px;}')
GM_addStyle('.bili-header .right-entry{margin-left: 5px !important}')
GM_addStyle('.mini-header{box-shadow: 0px 3px 5px 1px #00000038 !important;}')
//搜索框模糊效果
GM_addStyle('.search-input-wrap{background: transparent !important;backdrop-filter:blur(10px) !important;}')
//搜索框圆角、阴影
GM_addStyle('.search-input-wrap{border-radius: 30px !important;box-shadow: 0px 3px 5px 1px #00000038 !important;}')
GM_addStyle('.vui_button{border-radius: 30px !important}')
//动态等下拉框位置
GM_addStyle('.v-popover{padding-top: 25px !important;}')
//右上图标颜色
GM_addStyle('.right-entry-icon{color: #00aeec !important;}')
function searchResult(){
const newUrl = event.state ? event.state.url : window.location.href;
if (newUrl.includes('keyword')) {
GM_addStyle('.left-entry{display:block !important}')
GM_addStyle('#i_cecream{background: #ffffff !important;}')//移除背景模糊
document.getElementsByClassName('left-entry__title')[0].href = 'https://search.bilibili.com/all'//设置顶栏图标返回链接
GM_addStyle('#bg-video{display:none !important}')//移除背景视频
GM_addStyle('#bili-header-container{background: var(--bg1) !important;}')//恢复顶栏颜色
GM_addStyle('html::-webkit-scrollbar{display:unset !important;}')
} else {
//背景模糊
GM_addStyle('#i_cecream{background: transparent !important;}')
GM_addStyle('#bg-video{display:unset !important}')//恢复背景视频
GM_addStyle('#bili-header-container{background: transparent !important;}')//移除顶栏颜色
}
}
window.onload = function () {
searchResult();
//搜索框预览文字
document.getElementsByClassName('search-input-el')[0].placeholder = ''
//搜索结果
window.addEventListener('urlchange', function (event) {
searchResult();
});
//搜索栏选中模糊
document.onmouseup = function (e) {
if (e.button == 0) {
if (e.srcElement.className == 'search-input-el' && document.body.style.backdropFilter == '') {
document.body.style.backdropFilter = 'blur(10px)';
if(GM_getValue('bgType')=='3'||GM_getValue('bgType')=='4'){GM_addStyle('#bg-video{filter: blur(5px);}')}
} else if (e.srcElement.className != 'search-input-el' && document.body.style.backdropFilter == 'blur(10px)') {
document.body.style.backdropFilter = '';
if(GM_getValue('bgType')=='3'||GM_getValue('bgType')=='4'){GM_addStyle('#bg-video{filter: unset;}')}
}
}
};
//修复收藏按钮
GM_addStyle('a.right-entry__outside.header-favorite-container__down{display: none !important}')
let headerFavorite = document.querySelector("a.right-entry__outside.header-favorite-container__up").outerHTML
headerFavorite = headerFavorite.replace("header-favorite-container__up","")
const favWrap = document.querySelector("#bili-header-container > div > div > ul.right-entry > li:nth-child(5)")
favWrap.innerHTML = headerFavorite
}
})();