Add feature: show cover before play

Close #508
This commit is contained in:
the1812 2020-06-22 14:17:44 +08:00
parent dba5b3db93
commit 11a48e7d00
17 changed files with 135 additions and 27 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -58,7 +58,7 @@
"danmaku-send-bar.min.css": "52149D46CF3A15CF6EB186CB49F298DE18B0723E52D8693228F66099847EDCCB", "danmaku-send-bar.min.css": "52149D46CF3A15CF6EB186CB49F298DE18B0723E52D8693228F66099847EDCCB",
"danmaku-send-bar.min.js": "7108E72F00C169F26E20409F4AA79F05553310375BABC392EB7E2166224B800A", "danmaku-send-bar.min.js": "7108E72F00C169F26E20409F4AA79F05553310375BABC392EB7E2166224B800A",
"dark.min.css": "BECBE09A656C23E04117E162D9A93DC8DA522FA87CEDF9FCDAF22B7C3D2F3890", "dark.min.css": "BECBE09A656C23E04117E162D9A93DC8DA522FA87CEDF9FCDAF22B7C3D2F3890",
"dark.user.css": "467AAE8BC65E56CACC28E1B3039E7E659884B362C52256528589CB50F0581824", "dark.user.css": "F132965E5333C827AE1248EC86F398248F732120A982687D2A2B9B74917055DA",
"dark-color-scheme.min.js": "6D353AC738180317ACF9D2E046BFFBA0ACC0FA7A8D22B8E16C51127CDE4FE96B", "dark-color-scheme.min.js": "6D353AC738180317ACF9D2E046BFFBA0ACC0FA7A8D22B8E16C51127CDE4FE96B",
"dark-important.min.css": "5369385A2C16188FB11E71C4C5B91275646F22F0F09E518E37813CC4FA23A072", "dark-important.min.css": "5369385A2C16188FB11E71C4C5B91275646F22F0F09E518E37813CC4FA23A072",
"dark-navbar.min.css": "7FAD547E326B768904B3739C978DF86FFDDD5E5064FB8F490710D197CCC3018B", "dark-navbar.min.css": "7FAD547E326B768904B3739C978DF86FFDDD5E5064FB8F490710D197CCC3018B",
@ -114,7 +114,7 @@
"gbk.min.js": "872D7A4562F13A539C4A9AF1825DE89E610C775F1AD026EA6986A80DD74E4B53", "gbk.min.js": "872D7A4562F13A539C4A9AF1825DE89E610C775F1AD026EA6986A80DD74E4B53",
"get-number.min.js": "7B81A45D0F7D7F68CC6EDE25E02FCD76F8A05B2CF29274F94A99980BB23D8B76", "get-number.min.js": "7B81A45D0F7D7F68CC6EDE25E02FCD76F8A05B2CF29274F94A99980BB23D8B76",
"gui-settings.min.css": "5D5299F5F92467A27166FB013E257323D2886420560183086BA08D487D1F71AC", "gui-settings.min.css": "5D5299F5F92467A27166FB013E257323D2886420560183086BA08D487D1F71AC",
"gui-settings.min.html": "DCD18550BFDEDFC2FD6235E5AD09B696BD6EC8C68D906F20F4748172494E6FA8", "gui-settings.min.html": "70114FA2269B89F65CD61B69178917BD68CF08B8CA9E8FCD304FB075D6E7DAA2",
"gui-settings.min.js": "CB6035E301389BE5C4BAD9385135663B0E54ACD0A0B39FFE52C266980E0424FC", "gui-settings.min.js": "CB6035E301389BE5C4BAD9385135663B0E54ACD0A0B39FFE52C266980E0424FC",
"haruna-scale.min.js": "FD079C86741F614FD63E733CF9B7B896A7D20110754815A540F3341D4DC252B2", "haruna-scale.min.js": "FD079C86741F614FD63E733CF9B7B896A7D20110754815A540F3341D4DC252B2",
"hide-bangumi-reviews.min.js": "7265C0CE994FDA926355A9A4F9B207E7E68E749D47332F3C537EF93E97927A23", "hide-bangumi-reviews.min.js": "7265C0CE994FDA926355A9A4F9B207E7E68E749D47332F3C537EF93E97927A23",
@ -197,6 +197,8 @@
"settings-tooltip.min.css": "0C138D5CF16B9068E73D173D229B2B458C15F50272DA73D6A580921C5A848845", "settings-tooltip.min.css": "0C138D5CF16B9068E73D173D229B2B458C15F50272DA73D6A580921C5A848845",
"settings-tooltip.min.js": "E9ABA72B3C29CA850342109E57B055B193F3356DD59876B202E8E908AE6247C9", "settings-tooltip.min.js": "E9ABA72B3C29CA850342109E57B055B193F3356DD59876B202E8E908AE6247C9",
"settings-tooltip.zh-CN.min.js": "D8F2266F38A91E454F611CFB070C2E15713AF8673F49C5EBD0520DC5F8C6BBFE", "settings-tooltip.zh-CN.min.js": "D8F2266F38A91E454F611CFB070C2E15713AF8673F49C5EBD0520DC5F8C6BBFE",
"show-cover-before-play.min.css": "E963B5E47F0FF5F283CE2C2621DF7AD13A97C619386F2807021E57544233B08F",
"show-cover-before-play.min.js": "C3671F3F2C9DA14EB63F63A8CE05E8A94631FD9D3ADC8981C67F407EB5C49FCC",
"show-dead-video-title.min.js": "8D591930421EBA43A1BDF50DC8B645C1BD1A17E109FB1CFBCD6B78E6C74E1D68", "show-dead-video-title.min.js": "8D591930421EBA43A1BDF50DC8B645C1BD1A17E109FB1CFBCD6B78E6C74E1D68",
"simple-home.vue.min.js": "1F5CF46DEE65549A30C5F0790578EED0C6B3AD6C5F20D9B88CD745C4B7664ABB", "simple-home.vue.min.js": "1F5CF46DEE65549A30C5F0790578EED0C6B3AD6C5F20D9B88CD745C4B7664ABB",
"simple-home-bangumi-category.vue.min.js": "87DCA2C8295CAD66C9FA01D65437EC2F9DD5E7F4A565B4384ABAB1746A6787EE", "simple-home-bangumi-category.vue.min.js": "87DCA2C8295CAD66C9FA01D65437EC2F9DD5E7F4A565B4384ABAB1746A6787EE",
@ -235,7 +237,7 @@
"video-card-info.min.js": "13B755C0EE0CA018AE65251E168BAF3395FEA2EB4FAD6949AADD752F61B8819B", "video-card-info.min.js": "13B755C0EE0CA018AE65251E168BAF3395FEA2EB4FAD6949AADD752F61B8819B",
"video-dash.min.js": "F0496F0EBC6002171ECF4F8E049791596029AB622A58FE167959C32430043DE6", "video-dash.min.js": "F0496F0EBC6002171ECF4F8E049791596029AB622A58FE167959C32430043DE6",
"video-downloader-fragment.min.js": "13B755C0EE0CA018AE65251E168BAF3395FEA2EB4FAD6949AADD752F61B8819B", "video-downloader-fragment.min.js": "13B755C0EE0CA018AE65251E168BAF3395FEA2EB4FAD6949AADD752F61B8819B",
"video-info.min.js": "EDF4176D830A516FBE476576B1944E09997309A543233DDF298FF23213B08CFC", "video-info.min.js": "99E06DD08BE4B3BA649B8E5C4F81078F83F852E1F43A16199CE67F65BC769AEE",
"video-list.vue.min.js": "90C4CCAB3C9C3FB0CFE39C9A9482C3A964EE7FAC17F7FBF682CCC2FEFB6632F2", "video-list.vue.min.js": "90C4CCAB3C9C3FB0CFE39C9A9482C3A964EE7FAC17F7FBF682CCC2FEFB6632F2",
"video-story.min.js": "F9D4D2D80997DF5F11BF0CFA4D389B77BDBF1566EA6002E47174B68B440F3C0D", "video-story.min.js": "F9D4D2D80997DF5F11BF0CFA4D389B77BDBF1566EA6002E47174B68B440F3C0D",
"view-cover.min.js": "895AA8A393D5EBA787ABCAE12EAF4D47E5A68E6B998E4FE839F81FB491F92ED5", "view-cover.min.js": "895AA8A393D5EBA787ABCAE12EAF4D47E5A68E6B998E4FE839F81FB491F92ED5",

Binary file not shown.

View File

@ -3,7 +3,7 @@
@namespace Bilibili-Evolved @namespace Bilibili-Evolved
@homepageURL https://github.com/the1812/Bilibili-Evolved @homepageURL https://github.com/the1812/Bilibili-Evolved
@updateURL https://cdn.jsdelivr.net/gh/the1812/Bilibili-Evolved@preview/min/dark.user.css @updateURL https://cdn.jsdelivr.net/gh/the1812/Bilibili-Evolved@preview/min/dark.user.css
@version 705.79.0 @version 706.88.0
@license MIT @license MIT
@author Grant Howard (https://github.com/the1812), Coulomb-G (https://github.com/Coulomb-G) @author Grant Howard (https://github.com/the1812), Coulomb-G (https://github.com/Coulomb-G)
==/UserStyle== */ ==/UserStyle== */

File diff suppressed because one or more lines are too long

1
min/show-cover-before-play.min.css vendored Normal file
View File

@ -0,0 +1 @@
.bilibili-player-video::after{position:absolute;content:"";top:0;left:0;width:100%;height:100%;display:block;background:#000 var(--cover-url) center no-repeat;background-size:contain;pointer-events:none;z-index:10}

1
min/show-cover-before-play.min.js vendored Normal file
View File

@ -0,0 +1 @@
(()=>{return(e,o)=>{const n={include:["//www.bilibili.com/video/","//www.bilibili.com/bangumi/"]};const r="showCoverBeforePlayStyle";const t=()=>{Observer.videoChange(async()=>{if(n.include.every(e=>!document.URL.includes(e))){return}o.applyStyle(r);const e=await SpinQuery.select(()=>unsafeWindow.aid);if(!e){console.warn("[播放前显示封面] 未找到av号");return}const t=await SpinQuery.select("video");if(!t){console.warn("[播放前显示封面] 未找到视频");return}const{VideoInfo:i}=await o.importAsync("video-info");const l=new i(e);await l.fetchInfo();document.body.style.setProperty("--cover-url",`url('${l.coverUrl}')`);t.addEventListener("play",()=>{document.body.style.removeProperty("--cover-url")},{once:true})})};t();return{reload:()=>o.applyStyle(r),unload:()=>o.removeStyle(r)}}})();

View File

@ -1 +1 @@
(()=>{return(t,i)=>{class e{constructor(t){this.aid=t}async fetchInfo(){let t;if(this.cid){t=`https://api.bilibili.com/x/web-interface/view?aid=${this.aid}&cid=${this.cid}`}else{t=`https://api.bilibili.com/x/web-interface/view?aid=${this.aid}`}const i=JSON.parse(await Ajax.getText(t));if(i.code!==0){throw new Error(i.message)}const e=i.data;this.cid=e.cid;this.pageCount=e.videos;this.coverUrl=e.pic;this.tagId=e.tid;this.tagName=e.tname;this.title=e.title;this.description=e.desc;this.up={uid:e.owner.mid,name:e.owner.name,faceUrl:e.owner.face};this.pages=e.pages.map(t=>{return{cid:t.cid,title:t.part,pageNumber:t.page}});this.subtitles=e.subtitle.list.map(t=>{return{id:t.id,languageCode:t.lan,language:t.lan_doc,url:t.subtitle_url.replace("http:","https:")}});return this}async fetchDanmaku(){this.danmaku=new s(this.cid.toString());return this.danmaku.fetchInfo()}}class a{constructor(t,i){this.text=t;this.p=i}}class s{constructor(t){this.cid=t}async fetchInfo(){const t=await Ajax.getText(`https://api.bilibili.com/x/v1/dm/list.so?oid=${this.cid}`);this.rawXML=t}}class n{constructor(t){this.ep=t;this.videos=[]}async fetchInfo(){const t=await Ajax.getText(`https://www.bilibili.com/bangumi/play/ep${this.ep}/`);const i=JSON.parse(t.match(/window\.__INITIAL_STATE__=(.*);\(function\(\){/)[1]);this.title=i.mediaInfo.title;this.cover=i.mediaInfo.cover;this.squareCover=i.mediaInfo.square_cover;this.aid=i.epInfo.aid;this.cid=i.epInfo.cid;this.videos=i.epList.map(async t=>{return{title:t.index_title,aid:t.aid,cid:t.cid,info:await new e(t.aid).fetchInfo()}});return this}}return{export:{VideoInfo:e,BangumiInfo:n,Danmaku:a,DanmakuInfo:s}}}})(); (()=>{return(t,i)=>{class e{constructor(t){this.aid=t}async fetchInfo(){let t;if(this.cid){t=`https://api.bilibili.com/x/web-interface/view?aid=${this.aid}&cid=${this.cid}`}else{t=`https://api.bilibili.com/x/web-interface/view?aid=${this.aid}`}const i=JSON.parse(await Ajax.getText(t));if(i.code!==0){throw new Error(i.message)}const e=i.data;this.cid=e.cid;this.pageCount=e.videos;this.coverUrl=e.pic.replace("http:","https:");this.tagId=e.tid;this.tagName=e.tname;this.title=e.title;this.description=e.desc;this.up={uid:e.owner.mid,name:e.owner.name,faceUrl:e.owner.face.replace("http:","https:")};this.pages=e.pages.map(t=>{return{cid:t.cid,title:t.part,pageNumber:t.page}});this.subtitles=e.subtitle.list.map(t=>{return{id:t.id,languageCode:t.lan,language:t.lan_doc,url:t.subtitle_url.replace("http:","https:")}});return this}async fetchDanmaku(){this.danmaku=new s(this.cid.toString());return this.danmaku.fetchInfo()}}class a{constructor(t,i){this.text=t;this.p=i}}class s{constructor(t){this.cid=t}async fetchInfo(){const t=await Ajax.getText(`https://api.bilibili.com/x/v1/dm/list.so?oid=${this.cid}`);this.rawXML=t}}class n{constructor(t){this.ep=t;this.videos=[]}async fetchInfo(){const t=await Ajax.getText(`https://www.bilibili.com/bangumi/play/ep${this.ep}/`);const i=JSON.parse(t.match(/window\.__INITIAL_STATE__=(.*);\(function\(\){/)[1]);this.title=i.mediaInfo.title;this.cover=i.mediaInfo.cover;this.squareCover=i.mediaInfo.square_cover;this.aid=i.epInfo.aid;this.cid=i.epInfo.cid;this.videos=i.epList.map(async t=>{return{title:t.index_title,aid:t.aid,cid:t.cid,info:await new e(t.aid).fetchInfo()}});return this}}return{export:{VideoInfo:e,BangumiInfo:n,Danmaku:a,DanmakuInfo:s}}}})();

View File

@ -912,6 +912,14 @@ Resource.manifest = {
displayNames: { displayNames: {
danmakuSendBar: '直播全屏弹幕栏', danmakuSendBar: '直播全屏弹幕栏',
} }
} },
showCoverBeforePlay: {
path: 'show-cover-before-play.min.js',
reloadable: true,
style: true,
displayNames: {
showCoverBeforePlay: '播放前显示封面',
},
},
} }
export const resourceManifest = Resource.manifest export const resourceManifest = Resource.manifest

View File

@ -238,6 +238,7 @@ export const settings = {
danmakuSendBar: false, danmakuSendBar: false,
watchLaterRedirectNavbar: true, watchLaterRedirectNavbar: true,
watchLaterRedirectPage: true, watchLaterRedirectPage: true,
showCoverBeforePlay: false,
cache: {}, cache: {},
} }
const fixedSettings = { const fixedSettings = {

View File

@ -56,6 +56,7 @@
<checkbox indent="0" key="quickFavorite" dependencies=""></checkbox> <checkbox indent="0" key="quickFavorite" dependencies=""></checkbox>
<checkbox indent="0" key="keymap" dependencies=""></checkbox> <checkbox indent="0" key="keymap" dependencies=""></checkbox>
<checkbox indent="0" key="doubleClickFullscreen" dependencies=""></checkbox> <checkbox indent="0" key="doubleClickFullscreen" dependencies=""></checkbox>
<checkbox indent="0" key="showCoverBeforePlay" dependencies=""></checkbox>
<category icon="style">样式</category> <category icon="style">样式</category>
<li class="indent-0 folded"> <li class="indent-0 folded">
<label class="gui-settings-textbox-container"> <label class="gui-settings-textbox-container">

View File

@ -0,0 +1,13 @@
.bilibili-player-video::after {
position: absolute;
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
background: black var(--cover-url) center no-repeat;
background-size: contain;
pointer-events: none;
z-index: 10;
}

View File

@ -0,0 +1,37 @@
const url = {
include: [
'//www.bilibili.com/video/',
'//www.bilibili.com/bangumi/',
]
}
const styleID = 'showCoverBeforePlayStyle'
const entry = () => {
Observer.videoChange(async () => {
if (url.include.every(it => !document.URL.includes(it))) {
return
}
resources.applyStyle(styleID)
const aid = await SpinQuery.select(() => unsafeWindow.aid)
if (!aid) {
console.warn('[播放前显示封面] 未找到av号')
return
}
const video = await SpinQuery.select('video') as HTMLVideoElement
if (!video) {
console.warn('[播放前显示封面] 未找到视频')
return
}
const { VideoInfo } = await import('../video-info')
const info = new VideoInfo(aid)
await info.fetchInfo()
document.body.style.setProperty('--cover-url', `url('${info.coverUrl}')`)
video.addEventListener('play', () => {
document.body.style.removeProperty('--cover-url')
}, { once: true })
})
}
entry()
export default {
reload: () => resources.applyStyle(styleID),
unload: () => resources.removeStyle(styleID),
}

View File

@ -42,7 +42,7 @@ export class VideoInfo {
const data = json.data const data = json.data
this.cid = data.cid this.cid = data.cid
this.pageCount = data.videos this.pageCount = data.videos
this.coverUrl = data.pic this.coverUrl = data.pic.replace('http:', 'https:')
this.tagId = data.tid this.tagId = data.tid
this.tagName = data.tname this.tagName = data.tname
this.title = data.title this.title = data.title
@ -50,7 +50,7 @@ export class VideoInfo {
this.up = { this.up = {
uid: data.owner.mid, uid: data.owner.mid,
name: data.owner.name, name: data.owner.name,
faceUrl: data.owner.face faceUrl: data.owner.face.replace('http:', 'https:')
} }
this.pages = data.pages.map((it: any) => { this.pages = data.pages.map((it: any) => {
return { return {