Use single component

This commit is contained in:
the1812 2020-02-03 15:03:16 +08:00
parent 44eb77c5e7
commit e02a1b0541
20 changed files with 435 additions and 120 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

@ -30,18 +30,16 @@
"compact-layout.min.js": "B20609A7CBBDB1845FA0156FB5BE6B1E1A1B8B069EA85F65D16241DD2C12D738",
"custom-control-background.min.css": "1981FD2BF3B17ECF33F98D5DEDAF0D32ACBE9532A51FDB70822286991AB98EF3",
"custom-control-background.min.js": "2A439B045A51D24F5115DD25995ED37E3D0371A074199FE6C727F2235F39C4D9",
"custom-navbar.min.css": "B59EAD6B917EF426E2C1D1DF0F1E64FFF9EF93E84C0D309A100003FE729817FB",
"custom-navbar.min.css": "3626ADB03B3FC2FC514AEDDC8FD53751075B3520C56659FA5417BCF25BB37001",
"custom-navbar.min.html": "17FD1B1727E8D62E7997F10002FE7BF23472F390042D44DE3376A7A5A5FF2FDF",
"custom-navbar.min.js": "A93BB5ABDED07764B3BF39A085BFF75CC0427A214B900127717583230B066836",
"custom-navbar.min.js": "D5A7AE55BC92E1B4C883E9A568EE7BC61C9998ED63D50016383F20D872CD75D3",
"custom-navbar-activities.min.js": "7CCA4AF4555CF9E9D338FE7285879C9F1396112F1FCD7293AD92EEE965E656C3",
"custom-navbar-article-history.vue.min.js": "E19AF7EEFCAAA3F4C89931E60A172D7FCE3118199230E3E846A646FB05DA1007",
"custom-navbar-blank.min.js": "DC2B75D5760EECD3A257785FDFBB7E5DEBF61CD9083C68DD5BCE468B093F54F3",
"custom-navbar-category.min.js": "4CF38ACE1D0501217266D1E35DFCBF9D5C1D9A3838C54D53C614878BB8CF55E2",
"custom-navbar-component.min.js": "D1B98EDF5C32D19E4A009D2303F69207B35ED35DD06E0F161E7D0BBB313F3C37",
"custom-navbar-favorites-list.min.js": "6321DC8C5EB93E2FEEC0D424EE9B0F4282066018D44DFE66FEAD079F29F7F040",
"custom-navbar-history-list.min.js": "5188143C7628452F99F3A8F3659A9889A9E9892045A518DBFBB2D3F7DD5D237D",
"custom-navbar-history-list.min.js": "66F85DBCE415E88A9EEAA54110CF7C62E6F4AD7F4090E33667D191CAA890C2EC",
"custom-navbar-iframe.min.js": "C4EE469EC09655F9FF535ACBBD2A5F7C332DA2081936F8F485F5FB015EBD794B",
"custom-navbar-live-history.vue.min.js": "6C6E331D83D0E5DEBC88BF2FE466DFEA9BB6E36208219AA6FDF67E06EE9C2AE1",
"custom-navbar-logo.min.js": "236CCC887A3917A6D4840889B7380B648197765B8CDA27CB233F3F1E3215F7BB",
"custom-navbar-messages.min.js": "D7B315A4D8FD9E2EF9C1E40C1F3CA7EC18C5A87AC7A9410049061A0D851868DE",
"custom-navbar-search-box.min.js": "F91CB1678AE6E353148134A16184BDC67C8310099000986451F3668E7F505345",
@ -50,7 +48,6 @@
"custom-navbar-subscriptions.min.js": "40F7ACEB501462A72D6BC15D1814DFD8A75B9FA6867748F362593CB00260C51E",
"custom-navbar-upload.min.js": "0CDEEA46DCF0D6187C86BB12DE8CD36737116EF171AA1F63AB20C5DC7549C976",
"custom-navbar-user-info.min.js": "F0C8D9FC280BA0A69746EC36079FA97AD9F0B69EB7D8FB56C6ED815C46791321",
"custom-navbar-video-history.vue.min.js": "5D1A1A65F2927D0608CCF4218CA20EA50C85DD8A0E98F9DE557E6FACAAAEDB56",
"custom-navbar-video-list.min.js": "08D6713144E910C1303CB610A5890A5663B92BE82630BDA3C8E6299FB4A429E2",
"custom-navbar-watchlater-list.min.js": "2742EAFAA8C716A9E937F70DE1D222DAA97A83EA6323B56DA001F609757240DE",
"danmaku-converter.min.js": "FDAB4DB2E3C79730A39CDA7C5FD193693621FED206C6549E9B8F13778080CC12",
@ -74,7 +71,7 @@
"download-video.min.html": "B7EC01DF01DBA78A7B009BDA78865891A974F84A1D72964B7393A07E50D5E5F5",
"download-video.min.js": "6A43BC28D28CCB2B047E3E7AAF75314F0DB5B2004F75D1414D282FC3A0129888",
"download-video-package.min.js": "B10FF11DE7DFBACEC38F195B8E836511E527215B5E177CB1D223D14F30EB1435",
"dpi-img.vue.min.js": "3615C42E816CD638EE320BB6FE37713921604E78F380E438D18DE99F0CDD27CB",
"dpi-img.vue.min.js": "11DF7577B754D8C01E8331E4FDAC9494E72523099845A0D6B0D897849CD841D6",
"expand-danmaku.min.js": "B21658C40085AEA8DC49652AE62EB8610BB2EBEAF7A9C9AF69EF3B11E08EEC8D",
"expand-description.min.css": "58C7710A50521B80F7D872BDC4C652610D84C4FABC6874BA66DA37B4F8759224",
"expand-description.min.js": "A56857AD6B1C9F431B233D188E857D30DD5A2EB644986DE32A21280B1B7BC7A7",

Binary file not shown.

View File

@ -1 +0,0 @@
(()=>{return(t,e)=>{const r=`<div class=article-history>article</div>`;return{export:Object.assign({template:r},{})}}})();

File diff suppressed because one or more lines are too long

View File

@ -1 +0,0 @@
(()=>{return(e,t)=>{const i=`<div class=live-history>live</div>`;return{export:Object.assign({template:i},{})}}})();

View File

@ -1 +0,0 @@
(()=>{return(e,t)=>{const i=`<div class=video-history>video</div>`;return{export:Object.assign({template:i},{})}}})();

File diff suppressed because one or more lines are too long

View File

@ -1 +1 @@
(()=>{return(t,i)=>{const a=["//www.bilibili.com","//t.bilibili.com","//search.bilibili.com","//space.bilibili.com","//account.bilibili.com","//pay.bilibili.com","//member.bilibili.com","//big.bilibili.com","//message.bilibili.com","//app.bilibili.com","//passport.bilibili.com","//game.bilibili.com","//live.bilibili.com/blackboard/"];const s=["//t.bilibili.com/vote/h5/index/#/result","//t.bilibili.com/lottery/h5/index/#/result","//member.bilibili.com/video/upload","//space.bilibili.com/ajax/","//www.bilibili.com/h5/comment/","//www.bilibili.com/blackboard/"];const o=()=>{document.body.style.setProperty("--navbar-bounds-padding",`0 ${t.customNavbarBoundsPadding}%`);document.body.style.setProperty("--navbar-blur-opacity",(t.customNavbarBlurOpacity||.7).toString());addSettingsListener("customNavbarBlurOpacity",t=>{document.body.style.setProperty("--navbar-blur-opacity",t)})};const n=(t,i,a)=>{a.classList.toggle(t,i)};const e=t=>{dq(".custom-navbar").classList.toggle("dark",t);dq(".custom-navbar-settings").classList.toggle("dark",t)};return(()=>{if(isIframe()){return}o();const c=!(!a.some(t=>document.URL.includes(t))||s.some(t=>document.URL.includes(t)))||document.URL.includes("//www.bilibili.com/blackboard/bnj2020.html");if(c){document.body.classList.add("custom-navbar-loading");(async()=>{const a=await i.importAsync((()=>"customNavbarHtml")());document.body.insertAdjacentHTML("beforeend",a);addSettingsListener("useDarkStyle",e,true);const s=()=>dq(".custom-navbar");["Fill","Shadow","Compact","Blur"].forEach(t=>{const i="customNavbar"+t;addSettingsListener(i,i=>n(t.toLowerCase(),i,s()),true)});SpinQuery.condition(()=>dq("#banner_link,.international-header .bili-banner"),t=>t===null?false:Boolean(t.style.backgroundImage),i=>{Observer.attributes(i,()=>{const a=dqa(".custom-navbar .blur-layer");a.forEach(t=>{t.style.backgroundImage=i.style.backgroundImage;t.setAttribute("data-image",i.style.backgroundImage)});addSettingsListener("customNavbarTransparent",i=>{if(!t.hideBanner){s().classList.toggle("transparent",i)}},true);addSettingsListener("hideBanner",i=>{if(t.customNavbarTransparent){s().classList.toggle("transparent",!i)}})})});const{Blank:o}=await i.importAsync("custom-navbar-blank");const{Logo:c}=await i.importAsync("custom-navbar-logo");const{Category:r}=await i.importAsync("custom-navbar-category");const{SimpleLink:l}=await i.importAsync("custom-navbar-simple-link");const{UserInfo:m}=await i.importAsync("custom-navbar-user-info");const{SearchBox:b}=await i.importAsync("custom-navbar-search-box");const{Iframe:u}=await i.importAsync("custom-navbar-iframe");const d=[new o(1),new c,new r,new l("排行","https://www.bilibili.com/ranking","ranking"),new l("相簿","https://h.bilibili.com","drawing"),new l("音频","https://www.bilibili.com/audio/home/","music"),new u("游戏中心","https://game.bilibili.com/",{src:`https://www.bilibili.com/page-proxy/game-nav.html`,width:`680px`,height:`260px`,lazy:true,iframeName:"games"}),new u("直播","https://live.bilibili.com",{src:`https://live.bilibili.com/blackboard/dropdown-menu.html`,width:`528px`,height:`266px`,lazy:true,iframeName:"lives"}),new l("会员购","https://show.bilibili.com","shop"),new l("漫画","https://manga.bilibili.com","manga"),new o(2),new b,new m];if(getUID()){const{WatchlaterList:t}=await i.importAsync("custom-navbar-watchlater-list");const{Messages:a}=await i.importAsync("custom-navbar-messages");const{Activities:s}=await i.importAsync("custom-navbar-activities");const{Subscriptions:o}=await i.importAsync("custom-navbar-subscriptions");const{FavoritesList:n}=await i.importAsync("custom-navbar-favorites-list");const{HistoryList:e}=await i.importAsync("custom-navbar-history-list");d.push(new a,new o,new s,new t,new n,new e)}const{Upload:p}=await i.importAsync("custom-navbar-upload");d.push(new p,new o(3));new Vue({el:".custom-navbar",data:{components:d},methods:{requestPopup(t){if(!t.requestedPopup&&!t.disabled&&!t.active){this.$set(t,`requestedPopup`,true);t.initialPopup&&t.initialPopup()}t.onPopup&&t.onPopup()}},mounted(){document.body.classList.remove("custom-navbar-loading")}})})()}return{widget:{content:`\n<div class="gui-settings-flat-button" id="custom-navbar-settings">\n<i class="mdi mdi-24px mdi-auto-fix"></i>\n<span>顶栏布局</span>\n</div>`,condition:()=>c,success:async()=>{const{initSettingsPanel:t}=await i.importAsync("custom-navbar-settings");await t()}},unload:()=>{const t=dqa(".custom-navbar,.custom-navbar-settings");t.forEach(t=>t.style.display="none");i.removeStyle("customNavbarStyle")},reload:()=>{const t=dqa(".custom-navbar,.custom-navbar-settings");t.forEach(t=>t.style.display="flex");i.applyImportantStyle("customNavbarStyle")}}})()}})();
(()=>{return(t,i)=>{const a=["//www.bilibili.com","//t.bilibili.com","//search.bilibili.com","//space.bilibili.com","//account.bilibili.com","//pay.bilibili.com","//member.bilibili.com","//big.bilibili.com","//message.bilibili.com","//app.bilibili.com","//passport.bilibili.com","//game.bilibili.com","//live.bilibili.com/blackboard/"];const s=["//t.bilibili.com/vote/h5/index/#/result","//t.bilibili.com/lottery/h5/index/#/result","//member.bilibili.com/video/upload","//space.bilibili.com/ajax/","//www.bilibili.com/h5/comment/","//www.bilibili.com/blackboard/"];const o=()=>{document.body.style.setProperty("--navbar-bounds-padding",`0 ${t.customNavbarBoundsPadding}%`);document.body.style.setProperty("--navbar-blur-opacity",(t.customNavbarBlurOpacity||.7).toString());addSettingsListener("customNavbarBlurOpacity",t=>{document.body.style.setProperty("--navbar-blur-opacity",t)})};const n=(t,i,a)=>{a.classList.toggle(t,i)};const e=t=>{dq(".custom-navbar").classList.toggle("dark",t);dq(".custom-navbar-settings").classList.toggle("dark",t)};return(()=>{if(isIframe()){return}o();const c=!(!a.some(t=>document.URL.includes(t))||s.some(t=>document.URL.includes(t)))||document.URL.includes("//www.bilibili.com/blackboard/bnj2020.html");if(c){document.body.classList.add("custom-navbar-loading");(async()=>{const a=await i.importAsync("customNavbarHtml");document.body.insertAdjacentHTML("beforeend",a);addSettingsListener("useDarkStyle",e,true);const s=()=>dq(".custom-navbar");["Fill","Shadow","Compact","Blur"].forEach(t=>{const i="customNavbar"+t;addSettingsListener(i,i=>n(t.toLowerCase(),i,s()),true)});SpinQuery.condition(()=>dq("#banner_link,.international-header .bili-banner"),t=>t===null?false:Boolean(t.style.backgroundImage),i=>{Observer.attributes(i,()=>{const a=dqa(".custom-navbar .blur-layer");a.forEach(t=>{t.style.backgroundImage=i.style.backgroundImage;t.setAttribute("data-image",i.style.backgroundImage)});addSettingsListener("customNavbarTransparent",i=>{if(!t.hideBanner){s().classList.toggle("transparent",i)}},true);addSettingsListener("hideBanner",i=>{if(t.customNavbarTransparent){s().classList.toggle("transparent",!i)}})})});const{Blank:o}=await i.importAsync("custom-navbar-blank");const{Logo:c}=await i.importAsync("custom-navbar-logo");const{Category:r}=await i.importAsync("custom-navbar-category");const{SimpleLink:l}=await i.importAsync("custom-navbar-simple-link");const{UserInfo:m}=await i.importAsync("custom-navbar-user-info");const{SearchBox:b}=await i.importAsync("custom-navbar-search-box");const{Iframe:u}=await i.importAsync("custom-navbar-iframe");const d=[new o(1),new c,new r,new l("排行","https://www.bilibili.com/ranking","ranking"),new l("相簿","https://h.bilibili.com","drawing"),new l("音频","https://www.bilibili.com/audio/home/","music"),new u("游戏中心","https://game.bilibili.com/",{src:`https://www.bilibili.com/page-proxy/game-nav.html`,width:`680px`,height:`260px`,lazy:true,iframeName:"games"}),new u("直播","https://live.bilibili.com",{src:`https://live.bilibili.com/blackboard/dropdown-menu.html`,width:`528px`,height:`266px`,lazy:true,iframeName:"lives"}),new l("会员购","https://show.bilibili.com","shop"),new l("漫画","https://manga.bilibili.com","manga"),new o(2),new b,new m];if(getUID()){const{WatchlaterList:t}=await i.importAsync("custom-navbar-watchlater-list");const{Messages:a}=await i.importAsync("custom-navbar-messages");const{Activities:s}=await i.importAsync("custom-navbar-activities");const{Subscriptions:o}=await i.importAsync("custom-navbar-subscriptions");const{FavoritesList:n}=await i.importAsync("custom-navbar-favorites-list");const{HistoryList:e}=await i.importAsync("custom-navbar-history-list");d.push(new a,new o,new s,new t,new n,new e)}const{Upload:p}=await i.importAsync("custom-navbar-upload");d.push(new p,new o(3));new Vue({el:".custom-navbar",data:{components:d},methods:{requestPopup(t){if(!t.requestedPopup&&!t.disabled&&!t.active){this.$set(t,`requestedPopup`,true);t.initialPopup&&t.initialPopup()}t.onPopup&&t.onPopup()}},mounted(){document.body.classList.remove("custom-navbar-loading")}})})()}return{widget:{content:`\n<div class="gui-settings-flat-button" id="custom-navbar-settings">\n<i class="mdi mdi-24px mdi-auto-fix"></i>\n<span>顶栏布局</span>\n</div>`,condition:()=>c,success:async()=>{const{initSettingsPanel:t}=await i.importAsync("custom-navbar-settings");await t()}},unload:()=>{const t=dqa(".custom-navbar,.custom-navbar-settings");t.forEach(t=>t.style.display="none");i.removeStyle("customNavbarStyle")},reload:()=>{const t=dqa(".custom-navbar,.custom-navbar-settings");t.forEach(t=>t.style.display="flex");i.applyImportantStyle("customNavbarStyle")}}})()}})();

View File

@ -1 +1 @@
(()=>{return(t,s)=>{const r=`<img :width=width :height=height :srcset=srcset :src=actualSrc :style="{filter: blur ? 'blur(' + blur + 'px)' : undefined}">`;return{export:Object.assign({template:r},{props:["size","src","blur","root","rootMargin","threshold"],data(){return{srcset:null,actualSrc:null}},watch:{size(){this.sourceChange()},src(){this.sourceChange()}},methods:{sourceChange(){if(this.actualSrc===null||this.srcset===null){return}this.calcSrc()},calcSrc(){if(!this.src||!this.size){return}if(this.src.startsWith("http:")){this.src=this.src.replace("http:","https:")}if(this.src.includes("//static.hdslb.com/images/member/noface.gif")){this.srcset=this.src;this.actualSrc=this.src;return}const t=this.src.substring(this.src.lastIndexOf(".")+1);this.srcset=getDpiSourceSet(this.src,this.size,t);this.actualSrc=this.src}},mounted(){const t={root:this.root,rootMargin:this.rootMargin||"200px",threshold:this.threshold};const s=new IntersectionObserver(t=>{t.forEach(t=>{if(t.isIntersecting){this.calcSrc();s.disconnect()}})},t);s.observe(this.$el)},computed:{width(){if(typeof this.size==="object"&&"width"in this.size){return this.size.width}return null},height(){if(typeof this.size==="object"&&"height"in this.size){return this.size.height}return null}}})}}})();
(()=>{return(t,e)=>{const s=`<img :width=width :height=height :srcset=srcset :src=actualSrc :class="{placeholder: isPlaceholderActive}":style={filter}>`;return{export:Object.assign({template:s},{props:{size:[Object,Number],src:String,blur:Number,root:HTMLElement,rootMargin:String,threshold:Number,placeholderImage:Boolean},data(){return{srcset:null,actualSrc:null,isPlaceholderActive:false}},watch:{size(){this.sourceChange()},src(){this.sourceChange()}},methods:{sourceChange(){if(this.actualSrc===null||this.srcset===null){return}this.calcSrc()},calcSrc(){const t=!this.src||!this.size;this.isPlaceholderActive=t&&this.placeholderImage;if(t){this.srcset=null;if(this.placeholderImage){this.actualSrc=`https://s1.hdslb.com/bfs/static/blive/live-web-center/static/img/no-cover.1ebe4d5.jpg`}else{this.actualSrc=null}return}let e=this.src;if(e.startsWith("http:")){e=e.replace("http:","https:")}if(e.includes("//static.hdslb.com/images/member/noface.gif")){this.srcset=e;this.actualSrc=e;return}const s=e.substring(e.lastIndexOf(".")+1);this.srcset=getDpiSourceSet(e,this.size,s);this.actualSrc=e}},mounted(){const t={root:this.root,rootMargin:this.rootMargin||"200px",threshold:this.threshold};const e=new IntersectionObserver(t=>{t.forEach(t=>{if(t.isIntersecting){this.calcSrc();e.disconnect()}})},t);e.observe(this.$el)},computed:{width(){if(typeof this.size==="object"&&"width"in this.size){return this.size.width}return null},height(){if(typeof this.size==="object"&&"height"in this.size){return this.size.height}return null},filter(){const t=[];if(this.blur){t.push(`blur(${this.blur}px)`)}return t.join(" ")}}})}}})();

View File

@ -28,3 +28,13 @@
width: 0 !important;
}
}
@mixin max-line($line, $line-height: 1.5) {
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
-webkit-line-clamp: $line;
-webkit-box-orient: vertical;
line-height: $line-height;
max-height: #{$line * $line-height}em;
}

View File

@ -1,6 +1,28 @@
@import "../../common";
@mixin tabs-animation {
&-enter-active,
&-leave-active {
transition: 0.2s ease-out;
}
&-enter,
&-leave-to {
opacity: 0;
transform: translateY(12px);
}
}
@mixin items-animation {
&-enter,
&-leave-to {
opacity: 0;
transform: translateY(-16px) scale(0.9);
}
&-leave-active {
transition: 0.24s cubic-bezier(0.22, 0.61, 0.36, 1);
position: absolute;
}
}
.custom-navbar .history-list {
width: 300px;
width: 350px;
height: 600px;
font-size: 12px;
@include v-stretch();
@ -31,14 +53,6 @@
justify-content: space-between;
flex-grow: 1;
overflow: auto;
.floating {
@include round-bar(20);
@include h-center();
background-color: #000c;
color: white;
justify-content: center;
cursor: pointer;
}
.header {
@include h-center();
justify-content: space-between;
@ -48,11 +62,14 @@
margin-right: 48px;
padding: 0 6px;
@include h-center();
justify-content: space-between;
justify-content: flex-start;
.tab {
cursor: pointer;
position: relative;
white-space: nowrap;
&:not(:last-child) {
margin-right: 24px;
}
&::after {
content: "";
width: calc(80%);
@ -86,7 +103,15 @@
@include round-bar(26);
padding: 4px 6px 4px 10px;
background-color: #8882;
&:hover {
border: none;
cursor: pointer;
color: inherit;
font-size: inherit;
&:disabled {
opacity: 0.3;
cursor: not-allowed;
}
&:hover:not(:disabled) {
background-color: #8884;
}
.mdi {
@ -95,15 +120,7 @@
}
}
.history-content {
&-enter-active,
&-leave-active {
transition: 0.2s ease-out;
}
&-enter,
&-leave-to {
opacity: 0;
transform: translateY(12px);
}
@include items-animation();
flex: 1;
overflow: auto;
overscroll-behavior: contain;
@ -112,6 +129,129 @@
@include no-scrollbar();
padding: 0 12px;
padding-bottom: 12px;
.time-group {
padding-bottom: 16px;
@include items-animation();
&-name {
padding-bottom: 4px;
margin-bottom: 4px;
}
&-items {
.floating {
@include round-bar(20);
@include h-center();
background-color: #000c;
color: white;
justify-content: center;
position: absolute;
opacity: 0;
font-size: 11px;
}
.time-group-item {
display: grid;
grid-template:
"cover title title" 3fr
"cover up time" 2fr / 80px 1fr auto;
border-radius: 4px;
color: black;
background-color: #fff;
box-shadow: 0 4px 8px 0 #0001;
body.dark & {
background-color: #282828;
color: #eee;
}
&:not(:last-child) {
margin-bottom: 8px;
}
&:hover {
.cover {
transform: scale(1.05);
}
.floating {
opacity: 1;
}
}
.cover-container {
$height: 55px;
$padding: 4px;
grid-area: cover;
position: relative;
height: $height;
overflow: hidden;
border-radius: 4px 0 0 4px;
.cover {
object-fit: cover;
width: 80px;
height: $height;
body.dark &.placeholder {
filter: invert(0.9);
}
}
.duration {
left: $padding;
bottom: $padding;
padding: 0 6px;
}
.progress-number {
left: $padding;
top: $padding;
padding: 0 6px;
}
.progress {
position: absolute;
bottom: 0;
left: 0;
height: 2px;
border-radius: 1px;
background-color: var(--theme-color);
}
}
.title {
grid-area: title;
font-weight: bold;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
align-self: center;
padding-left: 8px;
padding-right: 6px;
font-size: 13px;
&:hover {
color: var(--theme-color) !important;
}
}
.up,
.time {
font-size: 11px;
opacity: 0.75;
align-self: start;
}
.up {
grid-area: up;
@include h-center();
padding-left: 8px;
&:hover {
opacity: 1;
}
.be-icon {
margin-right: 4px;
font-size: 14px;
}
&-name {
white-space: nowrap;
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
}
}
.time {
font-size: 11px;
grid-area: time;
padding-right: 6px;
}
}
}
}
}
}
}

View File

@ -1,9 +0,0 @@
<template>
<div class="article-history">article</div>
</template>
<script lang="ts">
export default {
}
</script>

View File

@ -1,27 +1,150 @@
import { NavbarComponent } from '../custom-navbar-component'
interface HistoryItem {
id: number
title: string
coverUrl: string
upName: string
upID: number
href: string
}
interface TimeData {
timestamp: number
time: Date
timeText: string
}
interface ProgressHistoryItem extends HistoryItem {
progress: number
progressText: string
duration: number
durationText: string
isBangumi: boolean
}
interface TimelineItem {
name: string
items: HistoryItem[]
}
type Timeline = TimelineItem[]
interface HistoryTab {
name: string
componentName: string
type: string
api: string
moreLink: string
getTimeline: (json: any) => Timeline
}
const tabs = [
const simpleTimeGrouper = (historyItems: (HistoryItem & TimeData)[]) => {
const now = new Date()
const today = Number(new Date(now.getFullYear(), now.getMonth(), now.getDate()))
const oneDay = 24 * 3600000
const yesterday = today - oneDay
const lastWeek = today - 7 * oneDay
const groups = _.groupBy(historyItems, h => {
if (h.timestamp >= today) {
return '今天'
}
if (h.timestamp >= yesterday) {
return '昨天'
}
if (h.timestamp >= lastWeek) {
return '本周'
}
return '更早'
})
return Object.entries(groups).map(([key, value]) => {
return {
name: key,
items: value,
}
})
}
const formatTime = (date: Date) => {
return `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`
}
const tabs: HistoryTab[] = [
{
name: '视频',
componentName: 'VideoHistory',
type: 'video',
api: 'https://api.bilibili.com/x/web-interface/history/cursor?type=archive&ps=30',
moreLink: 'https://www.bilibili.com/account/history',
getTimeline: json => {
const list: any[] = json.data.list
const historyItems = list.map(item => {
const timestamp = item.view_at * 1000
const isBangumi = Boolean(item.uri)
const progressParam = item.progress > 0 ? `t=${item.progress}` : 't=0'
const progress = item.progress === -1 ? 1 : item.progress / item.duration
const historyItem = {
isBangumi,
id: item.kid,
title: item.title,
coverUrl: item.cover,
upName: item.author_name || item.show_title,
upID: item.author_mid || item.kid,
href: isBangumi ? item.uri + `?${progressParam}` : `https://www.bilibili.com/video/av${item.kid}?p=${item.history.page}&${progressParam}`,
duration: item.duration,
durationText: formatDuration(item.duration),
progress,
progressText: fixed(progress * 100, 1) + '%',
timestamp: timestamp,
time: new Date(timestamp),
} as ProgressHistoryItem & TimeData
historyItem.timeText = formatTime(historyItem.time)
return historyItem
})
return simpleTimeGrouper(historyItems)
},
},
{
name: '专栏',
componentName: 'ArticleHistory',
type: 'article',
api: 'https://api.bilibili.com/x/web-interface/history/cursor?type=article&ps=30',
moreLink: '',
getTimeline: json => {
const list: any[] = json.data.list
const historyItems = list.map(item => {
const timestamp = item.view_at * 1000
const historyItem = {
id: item.kid,
title: item.title,
coverUrl: item.covers[0],
upName: item.author_name,
upID: item.author_mid,
href: `https://www.bilibili.com/read/cv${item.kid}`,
timestamp: timestamp,
time: new Date(timestamp),
} as HistoryItem & TimeData
historyItem.timeText = formatTime(historyItem.time)
return historyItem
})
return simpleTimeGrouper(historyItems)
},
},
{
name: '直播',
componentName: 'LiveHistory',
moreLink: 'https://link.bilibili.com/p/center/index#/user-center/view-history/live'
type: 'live',
api: 'https://api.live.bilibili.com/xlive/web-ucenter/v1/history/get_history_by_uid',
moreLink: 'https://link.bilibili.com/p/center/index#/user-center/view-history/live',
getTimeline: json => {
const list: any[] = json.data.list
const historyItems = list.map(item => {
return {
id: item.roomid,
href: `https://live.bilibili.com/${item.roomid}`,
upID: item.uid,
upName: item.uname,
coverUrl: item.user_cover,
title: item.title,
} as HistoryItem
})
return [
{
name: '最近观看',
items: historyItems
}
]
}
},
] as HistoryTab[]
]
export class HistoryList extends NavbarComponent {
constructor() {
super()
@ -41,14 +164,42 @@ export class HistoryList extends NavbarComponent {
<div class="tab-name">{{tab.name}}</div>
</div>
</div>
<a class="more-info" :href="selectedTab.moreLink || null" title="查看更多" target="_blank">
<button class="more-info" :disabled="!selectedTab.moreLink || null" @click="viewMore()" title="查看更多">
<i class="mdi mdi-dots-horizontal"></i>
</a>
</button>
</div>
<transition name="history-content" mode="out-in">
<component class="history-content" :is="selectedTab.componentName"></component>
</transition>
<transition-group name="history-content" tag="div" class="history-content">
<div class="empty-tip" v-if="!timelineLoading && timeline.length === 0" key="empty-tip">
=ω=
</div>
<div class="loading-tip" v-if="timelineLoading" key="loading-tip">
...
</div>
<div class="time-group" v-for="t of timeline" :key="t.name">
<div class="time-group-name">{{t.name}}</div>
<transition-group name="time-group" tag="div" class="time-group-items">
<div class="time-group-item" v-for="h of t.items" :key="h.id">
<a class="cover-container" target="_blank" :href="h.href">
<dpi-img class="cover" :src="h.coverUrl" :size="{width: 160, height: 110}" placeholder-image></dpi-img>
<div v-if="h.progress" class="progress" :style="{width: h.progress * 100 + '%'}"></div>
<div v-if="h.progressText" class="floating progress-number">{{h.progress >= 1 ? '已看完' : h.progressText}}</div>
<div v-if="h.durationText" class="floating duration">{{h.durationText}}</div>
</a>
<a class="title" target="_blank" :href="h.href">
{{h.title}}
</a>
<a class="up" target="_blank" :href="h.isBangumi ? h.href : 'https://space.bilibili.com/' + h.upID">
<!--<icon type="extended" icon="up"></icon>-->
<div class="up-name">{{h.upName}}</div>
</a>
<div v-if="h.timeText" class="time">
{{h.timeText}}
</div>
</div>
</transition-group>
</div>
</transition-group>
</div>
</div>
`
@ -63,17 +214,47 @@ export class HistoryList extends NavbarComponent {
store,
components: {
DpiImg: () => import('../../dpi-img.vue'),
VideoHistory: () => import('./custom-navbar-video-history.vue'),
ArticleHistory: () => import('./custom-navbar-article-history.vue'),
LiveHistory: () => import('./custom-navbar-live-history.vue'),
Icon: () => import('../../icon.vue'),
},
data: {
tabs,
selectedTab: tabs[0],
timeline: [],
timelineLoading: true,
},
methods: {
async updateTimeline() {
try {
this.timelineLoading = true
this.timeline = []
const tab = this.selectedTab as HistoryTab
const json = await Ajax.getJsonWithCredentials(tab.api)
if (json.code !== 0) {
throw new Error(`加载历史记录失败: ${json.message}`)
}
this.timeline = tab.getTimeline(json)
console.log(_.cloneDeep(this.timeline))
} catch (error) {
logError(error)
} finally {
this.timelineLoading = false
}
},
viewMore() {
const tab = this.selectedTab as HistoryTab
if (tab.moreLink) {
open(tab.moreLink, '_blank')
}
}
},
watch: {
selectedTab() {
this.updateTimeline()
}
},
async mounted() {
this.$el.classList.remove('loading')
this.updateTimeline()
},
})
}

View File

@ -1,9 +0,0 @@
<template>
<div class="live-history">live</div>
</template>
<script lang="ts">
export default {
}
</script>

View File

@ -1,10 +0,0 @@
<template>
<div class="video-history">video</div>
</template>
<script lang="ts">
// https://api.bilibili.com/x/web-interface/history/cursor?type=article&ps=30
export default {
}
</script>

View File

@ -4,17 +4,28 @@
:height="height"
:srcset="srcset"
:src="actualSrc"
:style="{filter: blur ? 'blur(' + blur + 'px)' : undefined}"
:class="{placeholder: isPlaceholderActive}"
:style="{filter}"
/>
</template>
<script>
export default {
props: ['size', 'src', 'blur', 'root', 'rootMargin', 'threshold'],
// props: ['size', 'src', 'blur', 'root', 'rootMargin', 'threshold', 'placeholderImage'],
props: {
size: [Object, Number],
src: String,
blur: Number,
root: HTMLElement,
rootMargin: String,
threshold: Number,
placeholderImage: Boolean,
},
data() {
return {
srcset: null,
actualSrc: null
actualSrc: null,
isPlaceholderActive: false,
}
},
watch: {
@ -33,21 +44,30 @@ export default {
this.calcSrc()
},
calcSrc() {
if (!this.src || !this.size) {
const isSourceInvalid = !this.src || !this.size
this.isPlaceholderActive = isSourceInvalid && this.placeholderImage
if (isSourceInvalid) {
this.srcset = null
if (this.placeholderImage) {
this.actualSrc = `https://s1.hdslb.com/bfs/static/blive/live-web-center/static/img/no-cover.1ebe4d5.jpg`
} else {
this.actualSrc = null
}
return
}
if (this.src.startsWith('http:')) {
this.src = this.src.replace('http:', 'https:')
let src = this.src
if (src.startsWith('http:')) {
src = src.replace('http:', 'https:')
}
if (this.src.includes('//static.hdslb.com/images/member/noface.gif')) {
if (src.includes('//static.hdslb.com/images/member/noface.gif')) {
//
this.srcset = this.src
this.actualSrc = this.src
this.srcset = src
this.actualSrc = src
return
}
const extension = this.src.substring(this.src.lastIndexOf('.') + 1)
this.srcset = getDpiSourceSet(this.src, this.size, extension)
this.actualSrc = this.src
const extension = src.substring(src.lastIndexOf('.') + 1)
this.srcset = getDpiSourceSet(src, this.size, extension)
this.actualSrc = src
}
},
mounted() {
@ -78,6 +98,16 @@ export default {
return this.size.height
}
return null
},
filter() {
const filter = []
if (this.blur) {
filter.push(`blur(${this.blur}px)`)
}
// if (this.isPlaceholderActive) {
// filter.push(`invert(.9)`)
// }
return filter.join(' ')
}
}
}