mirror of
https://github.com/the1812/Bilibili-Evolved.git
synced 2025-11-04 21:22:45 +08:00
Simplify home for new design (#2209)
This commit is contained in:
parent
6a7ec0bd84
commit
9a5deb6b5b
2
min/bangumi-timeline.vue.min.js
vendored
2
min/bangumi-timeline.vue.min.js
vendored
File diff suppressed because one or more lines are too long
2
min/blackboard.min.js
vendored
2
min/blackboard.min.js
vendored
@ -1 +1 @@
|
||||
(()=>(e,t)=>{const r=async()=>{if(dq(".international-home")){const e=await SpinQuery.condition((()=>unsafeWindow["__INITIAL_STATE__"]),(e=>e!==undefined));return dqa(".first-screen .home-slide .item").slice(0,5).map(((t,r)=>{const i=t.querySelector("a").getAttribute("data-loc-id");return{url:e.locsData[i][r].url,title:t.querySelector(".title").textContent.trim(),isAd:Boolean(t.querySelector(".gg-icon,.bypb-icon")),imageUrl:t.querySelector("img").getAttribute("src").replace(/@.+$/,"")}}))}else{const e=dq(".chief-recommend-module .panel");const t=e.querySelector(".pic");const r=e.querySelectorAll(".title > a");return[...t.querySelectorAll("li")].map(((e,t)=>{const i=r[t];return{url:i.getAttribute("href"),title:i.innerText.trim(),isAd:Boolean(i.querySelector(".gg-pic")),imageUrl:e.querySelector("img").getAttribute("src").replace(/@.+$/,"")}}))}};return{export:{getBlackboards:r}}})();
|
||||
(()=>(s,t)=>{const o=async()=>{const s=4694;const t=`https://api.bilibili.com/x/web-show/res/locs?pf=0&ids=${s}`;const{code:o,message:a,data:e}=await Ajax.getJson(t);if(o!==0){throw new Error(`获取活动卡片失败: ${a}`)}const r=e[s];return r.map((s=>({url:s.url,title:s.name,isAd:s.is_ad_loc,imageUrl:s.pic})))};return{export:{getBlackboards:o}}})();
|
||||
2
min/blackboard.vue.min.js
vendored
2
min/blackboard.vue.min.js
vendored
@ -1 +1 @@
|
||||
(()=>(a,r)=>{const i=`<div class=blackboards><div class=header><div class=title>活动</div><a class=more href=https://www.bilibili.com/blackboard/x/act_list/ target=_blank><icon type=mdi icon=dots-horizontal></icon>更多</a></div><input class="hidden-input blackboard-radio"type=radio name=blackboard v-for="(b, i) of blackboards":checked="i === 0":id="'blackboard' + i":data-index=i :key=i><div class=blackboard-cards><a class=blackboard-card target=_blank v-for="(b, i) of blackboards":key=i :href=b.url :title=b.title><dpi-img :src=b.imageUrl :alt=b.title :size="{width: 500, height: 250}":root=cardsContainer></dpi-img><div class=title>{{b.title}}</div></a></div><div class=jump-dots><label v-for="(b, i) of blackboards":for="'blackboard' + i":key=i><div class=jump-dot></div></label></div></div>`;r.applyStyleFromText(`.simple-home .blackboards{position:relative;display:grid;grid-template-areas:"header header" "cards cards";grid-template-columns:8px 1fr;grid-template-rows:1fr 250px;row-gap:16px;column-gap:16px;align-self:start}.simple-home .blackboards .jump-dots{position:absolute;top:50%;left:8px;transform:translateY(-50%);grid-area:cards;align-self:center;justify-self:center}.simple-home .blackboards .jump-dots label{display:block}.simple-home .blackboards .jump-dots label:not(:last-child){margin-bottom:6px}.simple-home .blackboards .jump-dots .jump-dot{background-color:#8884;border:1px solid #8888;box-sizing:border-box;width:8px;height:20px;border-radius:8px;cursor:pointer}.simple-home .blackboards .blackboard-cards{grid-area:cards;--blackboard-width:568.5px;--blackboard-height:250px;width:var(--blackboard-width);height:var(--blackboard-height);border-radius:16px;overflow:hidden}.simple-home .blackboards .blackboard-cards .blackboard-card{width:100%;height:100%;position:relative;display:block;transition:.8s cubic-bezier(.44,.29,.13,1)}.simple-home .blackboards .blackboard-cards .blackboard-card img{width:100%;height:100%;object-fit:fill;display:block;border-radius:12px}.simple-home .blackboards .blackboard-cards .blackboard-card .title{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);padding:4px 16px;color:#fff;background-color:#000a;font-size:14px;font-weight:700;border-radius:14px;white-space:nowrap;opacity:0}.simple-home .blackboards .blackboard-cards .blackboard-card:hover .title{opacity:1}`,"blackboard-style");return{export:Object.assign({template:i},{components:{Icon:()=>r.importAsync("icon.vue"),"dpi-img":()=>r.importAsync("dpi-img.vue")},data(){return{blackboards:[],interval:0}},destroyed(){if(this.interval){clearInterval(this.interval)}},computed:{cardsContainer(){return this.$el.querySelector(".blackboard-cards")}},async mounted(){const{getBlackboards:a}=await r.importAsync("blackboard");this.blackboards=(await a()).filter((a=>!a.isAd));const i=dq(".blackboards");this.interval=setInterval((()=>{if(!document.hasFocus()||i.matches(".blackboards:hover")){return}const a=parseInt(dq(`.blackboard-radio:checked`).getAttribute("data-index"));let r;if(a===this.blackboards.length-1){r=0}else{r=a+1}dq(`.blackboard-radio[data-index='${r}']`).checked=true}),5e3)}})}})();
|
||||
(()=>(a,r)=>{const i=`<div class=blackboards><div class=header><div class=title>活动</div><a class=more href=https://www.bilibili.com/blackboard/x/act_list/ target=_blank><icon type=mdi icon=dots-horizontal></icon>更多</a></div><input class="hidden-input blackboard-radio"type=radio name=blackboard v-for="(b, i) of blackboards":checked="i === 0":id="'blackboard' + i":data-index=i :key=i><div class=blackboard-cards><a class=blackboard-card target=_blank v-for="(b, i) of blackboards":key=i :href=b.url :title=b.title><dpi-img :src=b.imageUrl :alt=b.title :size="{width: 500, height: 250}":root=cardsContainer></dpi-img><div class=title :title=b.title>{{b.title}}</div></a></div><div class=jump-dots><label v-for="(b, i) of blackboards":for="'blackboard' + i":key=i><div class=jump-dot></div></label></div></div>`;r.applyStyleFromText(`.simple-home .blackboards{position:relative;display:grid;grid-template-areas:"header header" "cards cards";grid-template-columns:8px 1fr;grid-template-rows:1fr 250px;row-gap:16px;column-gap:16px;align-self:start}.simple-home .blackboards .jump-dots{position:absolute;left:50%;bottom:0;transform:translateX(-50%);grid-area:cards;align-self:center;justify-self:center;display:flex;align-items:center}.simple-home .blackboards .jump-dots label{display:block;padding:8px 6px;cursor:pointer}.simple-home .blackboards .jump-dots .jump-dot{background-color:#8884;box-sizing:border-box;width:20px;height:8px;border-radius:8px}.simple-home .blackboards .blackboard-cards{display:flex;grid-area:cards;--blackboard-width:350px;--blackboard-height:250px;--image-height:197px;width:var(--blackboard-width);height:var(--blackboard-height);border-radius:16px;overflow:hidden;background-color:#fff;box-shadow:0 4px 8px 0 #0001}body.dark .simple-home .blackboards .blackboard-cards{background-color:#282828}.simple-home .blackboards .blackboard-cards .blackboard-card{flex:0 0 auto;width:100%;height:100%;position:relative;display:block;transition:.8s cubic-bezier(.44,.29,.13,1)}.simple-home .blackboards .blackboard-cards .blackboard-card img{width:100%;height:var(--image-height);object-fit:fill;display:block;border-radius:12px;transition-duration:inherit}.simple-home .blackboards .blackboard-cards .blackboard-card .title{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);padding:0 16px;font-size:14px;font-weight:700;border-radius:14px;max-width:var(--blackboard-width);box-sizing:border-box;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}`,"blackboard-style");return{export:Object.assign({template:i},{components:{Icon:()=>r.importAsync("icon.vue"),"dpi-img":()=>r.importAsync("dpi-img.vue")},data(){return{blackboards:[],interval:0}},destroyed(){if(this.interval){clearInterval(this.interval)}},computed:{cardsContainer(){return this.$el.querySelector(".blackboard-cards")}},async mounted(){const{getBlackboards:a}=await r.importAsync("blackboard");this.blackboards=(await a()).filter((a=>!a.isAd));const i=dq(".blackboards");this.interval=setInterval((()=>{if(!document.hasFocus()||i.matches(".blackboards:hover")){return}const a=parseInt(dq(`.blackboard-radio:checked`).getAttribute("data-index"));let r;if(a===this.blackboards.length-1){r=0}else{r=a+1}dq(`.blackboard-radio[data-index='${r}']`).checked=true}),5e3)}})}})();
|
||||
2
min/dpi-img.vue.min.js
vendored
2
min/dpi-img.vue.min.js
vendored
@ -1 +1 @@
|
||||
(()=>(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}this.srcset=getDpiSourceSet(e,this.size);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(" ")}}})}})();
|
||||
(()=>(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:EmptyImageUrl,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=EmptyImageUrl}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}this.srcset=getDpiSourceSet(e,this.size);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(" ")}}})}})();
|
||||
File diff suppressed because one or more lines are too long
2
min/online-info-row.vue.min.js
vendored
2
min/online-info-row.vue.min.js
vendored
File diff suppressed because one or more lines are too long
2
min/rank-list.vue.min.js
vendored
2
min/rank-list.vue.min.js
vendored
File diff suppressed because one or more lines are too long
2
min/simple-home-categories.vue.min.js
vendored
2
min/simple-home-categories.vue.min.js
vendored
File diff suppressed because one or more lines are too long
2
min/simple-home-feeds.vue.min.js
vendored
2
min/simple-home-feeds.vue.min.js
vendored
@ -1 +1 @@
|
||||
(()=>(e,t)=>{const a=`<div class=feeds><div class=header><div class=tabs><div class=title>动态</div><div class=tab v-for="tab in tabs":key=tab.type @click=changeTab(tab) :class="{active: currentTab === tab}"><div class=tab-name>{{tab.name}}</div></div></div><div class=grow></div><a class=online target=_blank href=https://www.bilibili.com/video/online.html>在线列表</a><div class=grow></div><div class=page><div class=prev-page @click=scroll(-1)><icon type=extended icon=left-arrow></icon></div><div class=next-page @click=scroll(1)><icon type=extended icon=right-arrow></icon></div></div><a class=more href=//t.bilibili.com/ target=_blank><icon type=home icon=activity></icon>全部动态</a></div><div class=contents ref=contents><div class=card-wrapper v-for="card in feedCards":key=card.id><video-card :data=card orientation=vertical></video-card></div><div class=empty v-if="feedCards.length === 0">没有动态哦(´・_・\`)</div></div></div>`;t.applyStyleFromText(`.simple-home.snap .feeds .contents{scroll-snap-type:x mandatory}.simple-home .feeds{justify-self:start;display:flex;flex-direction:column}.simple-home .feeds .header,.simple-home .feeds .sub-header{grid-area:unset;margin-bottom:16px;padding:0 8px}.simple-home .feeds .header .page,.simple-home .feeds .sub-header .page{margin-right:8px;display:flex;align-items:center}.simple-home .feeds .header .page>*,.simple-home .feeds .sub-header .page>*{display:flex;align-items:center;justify-content:center;padding:4px;background-color:#8882;border-radius:50%;margin-left:8px;cursor:pointer}.simple-home .feeds .header .page>:hover,.simple-home .feeds .sub-header .page>:hover{background-color:#8884}.simple-home .feeds .header .page .prev-page .be-icon,.simple-home .feeds .sub-header .page .prev-page .be-icon{transform:translateX(-1px)}.simple-home .feeds .header .page .next-page .be-icon,.simple-home .feeds .sub-header .page .next-page .be-icon{transform:translateX(1px)}.simple-home .feeds .header .tab:nth-child(2),.simple-home .feeds .sub-header .tab:nth-child(2){margin-left:32px}.simple-home .feeds .header .grow,.simple-home .feeds .sub-header .grow{flex-grow:1}.simple-home .feeds .header .online,.simple-home .feeds .sub-header .online{padding:8px 16px;height:32px;border-radius:16px;background-color:#8882;color:inherit;font-size:12px;display:flex;align-items:center;box-sizing:border-box}.simple-home .feeds .contents{display:flex;overflow:auto;--card-width:200px;--card-height:250px;--card-count:4;width:calc((var(--card-width) + 16px) * var(--card-count));padding-bottom:16px;scrollbar-width:none!important;min-height:calc(var(--card-height) + 16px)}@media screen and (max-width:900px){.simple-home .feeds .contents{--card-count:3}}@media screen and (min-width:1100px){.simple-home .feeds .contents{--card-count:3}}@media screen and (min-width:1300px){.simple-home .feeds .contents{--card-count:4}}@media screen and (min-width:1550px){.simple-home .feeds .contents{--card-count:5}}@media screen and (min-width:1850px){.simple-home .feeds .contents{--card-count:6}}.simple-home .feeds .contents::-webkit-scrollbar{width:0!important;height:0!important}.simple-home .feeds .contents .card-wrapper{padding:0 8px;scroll-snap-align:start;flex-shrink:0}.simple-home .feeds .contents .empty{display:flex;align-items:center;justify-content:center;width:100%;font-size:16px}`,"simple-home-feeds-style");const s=[{name:"视频",type:"video",url:"https://t.bilibili.com/?tab=8"},{name:"番剧",type:"bangumi",url:"https://t.bilibili.com/?tab=512"}];return{export:Object.assign({template:a},{components:{VideoCard:()=>t.importAsync("video-card.vue"),Icon:()=>t.importAsync("icon.vue")},data(){return{online:"--",tabs:s,currentTab:s[0],feedCards:[]}},watch:{currentTab(e){this.updateFeedCards(e)}},methods:{async updateFeedCards(e){const{getVideoFeeds:a}=await t.importAsync("feeds-apis");this.feedCards=await a(e.type)},changeTab(e){if(this.currentTab===e){open(e.url,"_blank")}else{this.currentTab=e}},scroll(e){const t=this.$refs.contents;const a=getComputedStyle(t);const s=parseFloat(a.getPropertyValue("--card-count"));const i=parseFloat(a.getPropertyValue("--card-width"));const d=16;const n=s*(i+d);t.scrollBy(e*n,0)}},async mounted(){this.updateFeedCards(this.currentTab);let e;addSettingsListener("simpleHomeWheelScroll",(async a=>{if(a){const a=this.$refs.contents;const{enableHorizontalScroll:s}=await t.importAsync("horizontal-scroll");e=s(a)}else{e&&e()}}),true)}})}})();
|
||||
(()=>(e,t)=>{const s=`<div class=feeds><div class=header><div class=tabs><div class=title>动态</div><div class=tab v-for="tab in tabs":key=tab.type @click=changeTab(tab) :class="{active: currentTab === tab}"><div class=tab-name>{{tab.name}}</div></div></div><div class=grow></div><a class=online target=_blank href=https://www.bilibili.com/video/online.html>在线列表</a><div class=grow></div><div class=page><div class=prev-page @click=scroll(-1)><icon type=extended icon=left-arrow></icon></div><div class=next-page @click=scroll(1)><icon type=extended icon=right-arrow></icon></div></div><a class=more href=//t.bilibili.com/ target=_blank><icon type=home icon=activity></icon>全部动态</a></div><div class="contents edge-gradient"ref=contents @scroll=checkScrollPosition :class="{ 'is-bottom': isBottom }"><div class=card-wrapper v-for="card in feedCards":key=card.id><video-card :data=card orientation=vertical></video-card></div><div class=empty v-if="feedCards.length === 0">没有动态哦(´・_・\`)</div></div></div>`;t.applyStyleFromText(`.simple-home.snap .feeds .contents{scroll-snap-type:x mandatory}.simple-home .feeds{justify-self:start;display:flex;flex-direction:column}.simple-home .feeds .header,.simple-home .feeds .sub-header{grid-area:unset;margin-bottom:16px;padding:0 8px}.simple-home .feeds .header .page,.simple-home .feeds .sub-header .page{margin-right:8px;display:flex;align-items:center}.simple-home .feeds .header .page>*,.simple-home .feeds .sub-header .page>*{display:flex;align-items:center;justify-content:center;padding:4px;background-color:#8882;border-radius:50%;margin-left:8px;cursor:pointer}.simple-home .feeds .header .page>:hover,.simple-home .feeds .sub-header .page>:hover{background-color:#8884}.simple-home .feeds .header .page .prev-page .be-icon,.simple-home .feeds .sub-header .page .prev-page .be-icon{transform:translateX(-1px)}.simple-home .feeds .header .page .next-page .be-icon,.simple-home .feeds .sub-header .page .next-page .be-icon{transform:translateX(1px)}.simple-home .feeds .header .tab:nth-child(2),.simple-home .feeds .sub-header .tab:nth-child(2){margin-left:32px}.simple-home .feeds .header .grow,.simple-home .feeds .sub-header .grow{flex-grow:1}.simple-home .feeds .header .online,.simple-home .feeds .sub-header .online{padding:8px 16px;height:32px;border-radius:16px;background-color:#8882;color:inherit;font-size:12px;display:flex;align-items:center;box-sizing:border-box}.simple-home .feeds .contents{display:flex;overflow:auto;--card-width:200px;--card-height:250px;--card-count:4;width:calc((var(--card-width) + 16px) * var(--card-count));scrollbar-width:none!important;min-height:calc(var(--card-height) + 16px)}@media screen and (max-width:900px){.simple-home .feeds .contents{--card-count:3}}@media screen and (min-width:1100px){.simple-home .feeds .contents{--card-count:3}}@media screen and (min-width:1300px){.simple-home .feeds .contents{--card-count:4}}@media screen and (min-width:1550px){.simple-home .feeds .contents{--card-count:5}}@media screen and (min-width:1850px){.simple-home .feeds .contents{--card-count:6}}.simple-home .feeds .contents::-webkit-scrollbar{width:0!important;height:0!important}.simple-home .feeds .contents .card-wrapper{padding:0 8px;scroll-snap-align:start;flex-shrink:0}.simple-home .feeds .contents .empty{display:flex;align-items:center;justify-content:center;width:100%;font-size:16px}`,"simple-home-feeds-style");const i=[{name:"视频",type:"video",url:"https://t.bilibili.com/?tab=8"},{name:"番剧",type:"bangumi",url:"https://t.bilibili.com/?tab=512"}];return{export:Object.assign({template:s},{components:{VideoCard:()=>t.importAsync("video-card.vue"),Icon:()=>t.importAsync("icon.vue")},data(){return{online:"--",isBottom:false,tabs:i,currentTab:i[0],feedCards:[]}},watch:{currentTab(e){this.updateFeedCards(e)}},methods:{async updateFeedCards(e){const{getVideoFeeds:s}=await t.importAsync("feeds-apis");this.feedCards=await s(e.type)},changeTab(e){if(this.currentTab===e){open(e.url,"_blank")}else{this.currentTab=e}},scroll(e){const t=this.$refs.contents;const s=getComputedStyle(t);const i=parseFloat(s.getPropertyValue("--card-count"));const a=parseFloat(s.getPropertyValue("--card-width"));const o=16;const d=i*(a+o);t.scrollBy(e*d,0)},checkScrollPosition:_.debounce((function e(t){const s=t.target;this.isBottom=s.scrollWidth-s.scrollLeft===s.clientWidth}),200)},async mounted(){this.updateFeedCards(this.currentTab);let e;addSettingsListener("simpleHomeWheelScroll",(async s=>{if(s){const s=this.$refs.contents;const{enableHorizontalScroll:i}=await t.importAsync("horizontal-scroll");e=i(s)}else{e&&e()}}),true)}})}})();
|
||||
2
min/simple-home.vue.min.js
vendored
2
min/simple-home.vue.min.js
vendored
File diff suppressed because one or more lines are too long
2
min/simplify-home.vue.min.js
vendored
2
min/simplify-home.vue.min.js
vendored
@ -1 +1 @@
|
||||
(()=>(e,o)=>{const m=`<div class=simplify-home><component class=simplify-home-component :is=activeComponent></component></div>`;o.applyStyleFromText(`.simplify-home{padding-top:32px;display:flex;align-items:flex-start;justify-content:center;min-height:100vh;background-color:#f4f4f4;font-size:12px}body.dark .simplify-home{background-color:#181818}.simplify-home .simplify-home-component{max-width:100%}html{scroll-behavior:smooth}`,"simplify-home-style");return{export:Object.assign({template:m},{components:{"minimal-home":()=>o.importAsync("minimal-home.vue"),"simple-home":()=>o.importAsync("simple-home.vue")},computed:{activeComponent(){return this.homeStyle==="清爽"?"simple-home":"minimal-home"}},props:{homeStyle:String}})}})();
|
||||
(()=>(m,e)=>{const o=`<div class=simplify-home><component class=simplify-home-component :is=activeComponent></component></div>`;e.applyStyleFromText(`.simplify-home{padding:32px 72px 0;display:flex;align-items:flex-start;justify-content:center;min-height:100vh;--simplify-home-background:#f4f4f4;background-color:var(--simplify-home-background);font-size:12px}body.dark .simplify-home{--simplify-home-background:#181818}.simplify-home .simplify-home-component{max-width:100%}html{scroll-behavior:smooth}`,"simplify-home-style");return{export:Object.assign({template:o},{components:{"minimal-home":()=>e.importAsync("minimal-home.vue"),"simple-home":()=>e.importAsync("simple-home.vue")},computed:{activeComponent(){return this.homeStyle==="清爽"?"simple-home":"minimal-home"}},props:{homeStyle:String}})}})();
|
||||
2
min/trending-videos.min.js
vendored
2
min/trending-videos.min.js
vendored
@ -1 +1 @@
|
||||
(()=>(t,e)=>{const a=async()=>{const{isVideoCardBlocked:t}=await e.importAsync("feeds-apis");if(!unsafeWindow.__INITIAL_STATE__){throw new Error("unsafeWindow.__INITIAL_STATE__ not available")}if(unsafeWindow.__INITIAL_STATE__.recommendData){return unsafeWindow.__INITIAL_STATE__.recommendData.item.map((t=>({id:t.id,aid:t.id,bvid:t.bvid,description:t.desc,duration:t.duration,durationText:formatDuration(t.duration),coverUrl:t.pic.replace("http:","https:"),title:t.title,playCount:formatCount(t.stat.view),upName:t.owner.name,upFaceUrl:t.owner.face.replace("http:","https:")}))).filter((e=>!t(e)))}return unsafeWindow.__INITIAL_STATE__.recommendList.map((t=>({id:t.aid,aid:t.aid,bvid:t.bvid,timestamp:t.ctime*1e3,time:new Date(t.ctime*1e3),description:t.desc,duration:t.duration,durationText:formatDuration(t.duration),coverUrl:t.pic.replace("http:","https:"),title:t.title,coins:formatCount(t.stat.coin),danmakuCount:formatCount(t.stat.danmaku),like:formatCount(t.stat.like),playCount:formatCount(t.stat.view),upName:t.owner.name,upFaceUrl:t.owner.face.replace("http:","https:")}))).filter((e=>!t(e)))};return{export:{getTrendingVideos:a}}})();
|
||||
(()=>(t,e)=>{const i=async()=>{const{isVideoCardBlocked:i}=await e.importAsync("feeds-apis");const o="https://api.bilibili.com/x/web-interface/index/top/rcmd?fresh_type=0&version=1";const a=getUID()&&t.simpleHomePersonalized;const r=a?"getJsonWithCredentials":"getJson";const{code:n,message:s,data:d}=await Ajax[r](o);if(n!==0){throw new Error(`获取${a?"推荐":"热门"}视频失败: ${s}`)}const p=d.item;return p.map((t=>{const e={id:t.id,aid:t.id,bvid:t.bvid,coverUrl:t.pic.replace("http:","https:"),title:t.title,description:"",duration:t.duration,durationText:formatDuration(t.duration),timestamp:t.pubdate*1e3,time:new Date(t.pubdate*1e3),upName:t.owner.name,upID:t.owner.mid,upFaceUrl:t.owner.face.replace("http:","https:"),like:formatCount(t.stat.like),playCount:formatCount(t.stat.view)};return e})).filter((t=>!i(t)))};return{export:{getTrendingVideos:i}}})();
|
||||
2
min/trending-videos.vue.min.js
vendored
2
min/trending-videos.vue.min.js
vendored
@ -1 +1 @@
|
||||
(()=>(e,n)=>{const t=`<div class=trendings><div class=header><div class=title>热门</div><div class=page><div class=prev-page @click=scroll(-1)><icon type=extended icon=left-arrow></icon></div><div class=next-page @click=scroll(1)><icon type=extended icon=right-arrow></icon></div></div></div><div class=contents ref=contents><div class=card-wrapper v-for="card in trendingCards":key=card.id><video-card :data=card orientation=vertical></video-card></div></div></div>`;n.applyStyleFromText(`.simple-home .trendings{display:flex;flex-direction:column}.simple-home .trendings .header{padding:0 8px}.simple-home .trendings .header .page{display:flex;align-items:center}.simple-home .trendings .header .page>*{display:flex;align-items:center;justify-content:center;padding:4px;background-color:#8882;border-radius:50%;margin-left:8px;cursor:pointer}.simple-home .trendings .header .page>:hover{background-color:#8884}.simple-home .trendings .header .page .prev-page .be-icon{transform:translateX(-1px)}.simple-home .trendings .header .page .next-page .be-icon{transform:translateX(1px)}.simple-home .trendings .contents{--card-width:200px;--card-height:250px;--card-count:3;margin-top:16px;display:flex;overflow:auto;height:calc(var(--card-height) + 16px);width:calc((var(--card-width) + 16px) * var(--card-count));scrollbar-width:none!important}@media screen and (max-width:1300px) and (min-width:900px){.simple-home .trendings .contents{--card-count:2}}@media screen and (max-width:1100px) and (min-width:900px){.simple-home .trendings .contents{--card-count:4}}@media screen and (min-width:1550px){.simple-home .trendings .contents{--card-count:4}}@media screen and (min-width:1850px){.simple-home .trendings .contents{--card-count:5}}.simple-home .trendings .contents::-webkit-scrollbar{width:0!important;height:0!important}.simple-home .trendings .contents .card-wrapper{padding:0 8px;scroll-snap-align:start;flex-shrink:0}`,"trending-videos-style");return{export:Object.assign({template:t},{components:{VideoCard:()=>n.importAsync("video-card.vue"),Icon:()=>n.importAsync("icon.vue")},data(){return{trendingCards:[]}},methods:{scroll(e){const n=this.$refs.contents;const t=getComputedStyle(n);const i=parseFloat(t.getPropertyValue("--card-count"));const r=parseFloat(t.getPropertyValue("--card-width"));const a=16;const s=i*(r+a);n.scrollBy(e*s,0)}},async created(){const{getTrendingVideos:e}=await n.importAsync("trending-videos");this.trendingCards=await e()},async mounted(){let e;addSettingsListener("simpleHomeWheelScroll",(async t=>{if(t){const t=this.$refs.contents;const{enableHorizontalScroll:i}=await n.importAsync("horizontal-scroll");e=i(t)}else{e&&e()}}),true);const t=this.$refs.contents;await SpinQuery.condition((()=>t),(()=>t.childElementCount>0));n.applyImportantStyleFromText(`\n .simple-home.snap .trendings .contents {\n scroll-snap-type: x mandatory;\n }\n`,"trending-videos-snap-fix")}})}})();
|
||||
(()=>(e,t)=>{const n=`<div class=trendings><div class=header><div class=title>{{ trendingTitle }}</div><div class=page><div v-if=personalized class=refresh @click=refreshCards><icon type=mdi icon=refresh></icon></div><div class=prev-page @click=scroll(-1)><icon type=extended icon=left-arrow></icon></div><div class=next-page @click=scroll(1)><icon type=extended icon=right-arrow></icon></div></div></div><div class="contents edge-gradient"ref=contents @scroll=checkScrollPosition :class="{ 'is-bottom': isBottom }"><div class=card-wrapper v-for="card in trendingCards":key=card.id><video-card :data=card orientation=vertical></video-card></div></div></div>`;t.applyStyleFromText(`.simple-home .trendings{display:flex;flex-direction:column}.simple-home .trendings .header{padding:0 8px}.simple-home .trendings .header .page{display:flex;align-items:center}.simple-home .trendings .header .page>*{display:flex;align-items:center;justify-content:center;padding:4px;background-color:#8882;border-radius:50%;margin-left:8px;cursor:pointer}.simple-home .trendings .header .page>:hover{background-color:#8884}.simple-home .trendings .header .page .prev-page .be-icon{transform:translateX(-1px)}.simple-home .trendings .header .page .next-page .be-icon{transform:translateX(1px)}.simple-home .trendings .header .page .refresh .be-icon{transition-duration:.5s;transform:scale(.9)}.simple-home .trendings .header .page .refresh:hover .be-icon{transform:scale(.9) rotate(360deg)}.simple-home .trendings .contents{--card-width:200px;--card-height:250px;--card-count:4;margin-top:16px;display:flex;overflow:auto;height:calc(var(--card-height) + 16px);width:calc((var(--card-width) + 16px) * var(--card-count));scrollbar-width:none!important}@media screen and (max-width:1300px) and (min-width:900px){.simple-home .trendings .contents{--card-count:3}}@media screen and (max-width:1100px) and (min-width:900px){.simple-home .trendings .contents{--card-count:5}}@media screen and (min-width:1550px){.simple-home .trendings .contents{--card-count:5}}@media screen and (min-width:1850px){.simple-home .trendings .contents{--card-count:6}}.simple-home .trendings .contents::-webkit-scrollbar{width:0!important;height:0!important}.simple-home .trendings .contents .card-wrapper{padding:0 8px;scroll-snap-align:start;flex-shrink:0}`,"trending-videos-style");return{export:Object.assign({template:n},{components:{VideoCard:()=>t.importAsync("video-card.vue"),Icon:()=>t.importAsync("icon.vue")},data(){const t=getUID()&&e.simpleHomePersonalized;return{personalized:t,isBottom:false,trendingTitle:t?"推荐":"热门",trendingCards:[]}},methods:{async refreshCards(){const{getTrendingVideos:e}=await t.importAsync("trending-videos");this.trendingCards=await e()},scroll(e){const t=this.$refs.contents;const n=getComputedStyle(t);const i=parseFloat(n.getPropertyValue("--card-count"));const r=parseFloat(n.getPropertyValue("--card-width"));const s=16;const o=i*(r+s);t.scrollBy(e*o,0)},checkScrollPosition:_.debounce((function e(t){const n=t.target;this.isBottom=n.scrollWidth-n.scrollLeft===n.clientWidth}),200)},async created(){await this.refreshCards()},async mounted(){let e;addSettingsListener("simpleHomeWheelScroll",(async n=>{if(n){const n=this.$refs.contents;const{enableHorizontalScroll:i}=await t.importAsync("horizontal-scroll");e=i(n)}else{e&&e()}}),true);const n=this.$refs.contents;await SpinQuery.condition((()=>n),(()=>n.childElementCount>0));t.applyImportantStyleFromText(`\n .simple-home.snap .trendings .contents {\n scroll-snap-type: x mandatory;\n }\n`,"trending-videos-snap-fix")}})}})();
|
||||
2
min/video-card.vue.min.js
vendored
2
min/video-card.vue.min.js
vendored
File diff suppressed because one or more lines are too long
@ -494,6 +494,7 @@ Resource.manifest = {
|
||||
simplifyHome: '简化首页',
|
||||
simplifyHomeStyle: '首页风格',
|
||||
simpleHomeWheelScroll: '允许横向滚动',
|
||||
simpleHomePersonalized: '个性化推荐',
|
||||
},
|
||||
dropdown: {
|
||||
key: 'simplifyHomeStyle',
|
||||
|
||||
@ -165,6 +165,11 @@ export const settings = {
|
||||
doubleClickFullscreenPreventSingleClick: false,
|
||||
simplifyHome: false,
|
||||
simplifyHomeStyle: '清爽',
|
||||
simpleHomeCategoryOrders: { ...simpleHomeCategoryDefaultOrders },
|
||||
simpleHomeBangumiLayout: '时间表',
|
||||
simpleHomeWheelScroll: true,
|
||||
simpleHomePersonalized: true,
|
||||
simpleHomeLayoutFill: true,
|
||||
minimalHomeSettings: {
|
||||
showSearch: true,
|
||||
backgroundImage: '',
|
||||
@ -193,9 +198,6 @@ export const settings = {
|
||||
defaultMedalID: 0,
|
||||
autoMatchMedal: false,
|
||||
customStyles: [],
|
||||
simpleHomeCategoryOrders: { ...simpleHomeCategoryDefaultOrders },
|
||||
simpleHomeBangumiLayout: '时间表',
|
||||
simpleHomeWheelScroll: true,
|
||||
keymapJumpSeconds: 85,
|
||||
urlParamsClean: true,
|
||||
collapseLiveSideBar: true,
|
||||
|
||||
8
src/global.d.ts
vendored
8
src/global.d.ts
vendored
@ -426,6 +426,11 @@ declare global {
|
||||
doubleClickFullscreenPreventSingleClick: boolean
|
||||
simplifyHome: boolean,
|
||||
simplifyHomeStyle: '清爽' | '极简',
|
||||
simpleHomeCategoryOrders: SimpleHomeCategoryOrders,
|
||||
simpleHomeBangumiLayout: '时间表' | '动态',
|
||||
simpleHomeWheelScroll: boolean,
|
||||
simpleHomePersonalized: boolean,
|
||||
simpleHomeLayoutFill: boolean,
|
||||
minimalHomeSettings: {
|
||||
showSearch: boolean,
|
||||
backgroundImage: string,
|
||||
@ -455,9 +460,6 @@ declare global {
|
||||
defaultMedalID: number,
|
||||
autoMatchMedal: boolean,
|
||||
customStyles: CustomStyle[],
|
||||
simpleHomeCategoryOrders: SimpleHomeCategoryOrders,
|
||||
simpleHomeBangumiLayout: '时间表' | '动态',
|
||||
simpleHomeWheelScroll: boolean,
|
||||
keymapJumpSeconds: number,
|
||||
urlParamsClean: boolean,
|
||||
collapseLiveSideBar: boolean,
|
||||
|
||||
@ -24,7 +24,7 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
srcset: null,
|
||||
actualSrc: null,
|
||||
actualSrc: EmptyImageUrl,
|
||||
isPlaceholderActive: false,
|
||||
}
|
||||
},
|
||||
@ -51,7 +51,7 @@ export default {
|
||||
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
|
||||
this.actualSrc = EmptyImageUrl
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
@ -272,10 +272,7 @@ export default {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
background-color: #f4f4f4;
|
||||
body.dark & {
|
||||
background-color: #181818;
|
||||
}
|
||||
background-color: var(--simplify-home-background);
|
||||
.icon {
|
||||
grid-area: icon;
|
||||
justify-self: center;
|
||||
|
||||
@ -5,33 +5,48 @@ export interface Blackboard {
|
||||
imageUrl: string
|
||||
}
|
||||
export const getBlackboards = async (): Promise<Blackboard[]> => {
|
||||
if (dq('.international-home')) {
|
||||
const initData = await SpinQuery.condition(() => unsafeWindow['__INITIAL_STATE__'], it => it !== undefined)
|
||||
return dqa('.first-screen .home-slide .item')
|
||||
.slice(0, 5)
|
||||
.map((it, index) => {
|
||||
const locID = it.querySelector('a')!.getAttribute('data-loc-id')!
|
||||
return {
|
||||
url: initData.locsData[locID][index].url,
|
||||
title: (it.querySelector('.title') as HTMLElement).textContent!.trim(),
|
||||
isAd: Boolean(it.querySelector('.gg-icon,.bypb-icon')),
|
||||
imageUrl: it.querySelector('img')!.getAttribute('src')!.replace(/@.+$/, ''),
|
||||
} as Blackboard
|
||||
})
|
||||
} else {
|
||||
const panel = dq('.chief-recommend-module .panel') as HTMLElement
|
||||
const images = panel.querySelector('.pic') as HTMLElement
|
||||
const titles = panel.querySelectorAll('.title > a')
|
||||
return [...images.querySelectorAll('li')].map((li, index) => {
|
||||
const title = titles[index] as HTMLElement
|
||||
return {
|
||||
url: title.getAttribute('href'),
|
||||
title: title.innerText!.trim(),
|
||||
isAd: Boolean(title.querySelector('.gg-pic')),
|
||||
imageUrl: li.querySelector('img')!.getAttribute('src')!.replace(/@.+$/, ''),
|
||||
} as Blackboard
|
||||
})
|
||||
const locId = 4694
|
||||
const api = `https://api.bilibili.com/x/web-show/res/locs?pf=0&ids=${locId}`
|
||||
const { code, message, data } = await Ajax.getJson(api)
|
||||
if (code !== 0) {
|
||||
throw new Error(`获取活动卡片失败: ${message}`)
|
||||
}
|
||||
const list: any[] = data[locId]
|
||||
return list.map(it => {
|
||||
return {
|
||||
url: it.url,
|
||||
title: it.name,
|
||||
isAd: it.is_ad_loc,
|
||||
imageUrl: it.pic,
|
||||
} as Blackboard
|
||||
})
|
||||
// if (dq('.international-home')) {
|
||||
// const initData = await SpinQuery.condition(() => unsafeWindow['__INITIAL_STATE__'], it => it !== undefined)
|
||||
// return dqa('.first-screen .home-slide .item')
|
||||
// .slice(0, 5)
|
||||
// .map((it, index) => {
|
||||
// const locID = it.querySelector('a')!.getAttribute('data-loc-id')!
|
||||
// return {
|
||||
// url: initData.locsData[locID][index].url,
|
||||
// title: (it.querySelector('.title') as HTMLElement).textContent!.trim(),
|
||||
// isAd: Boolean(it.querySelector('.gg-icon,.bypb-icon')),
|
||||
// imageUrl: it.querySelector('img')!.getAttribute('src')!.replace(/@.+$/, ''),
|
||||
// } as Blackboard
|
||||
// })
|
||||
// } else {
|
||||
// const panel = dq('.chief-recommend-module .panel') as HTMLElement
|
||||
// const images = panel.querySelector('.pic') as HTMLElement
|
||||
// const titles = panel.querySelectorAll('.title > a')
|
||||
// return [...images.querySelectorAll('li')].map((li, index) => {
|
||||
// const title = titles[index] as HTMLElement
|
||||
// return {
|
||||
// url: title.getAttribute('href'),
|
||||
// title: title.innerText!.trim(),
|
||||
// isAd: Boolean(title.querySelector('.gg-pic')),
|
||||
// imageUrl: li.querySelector('img')!.getAttribute('src')!.replace(/@.+$/, ''),
|
||||
// } as Blackboard
|
||||
// })
|
||||
// }
|
||||
}
|
||||
export default {
|
||||
export: {
|
||||
|
||||
@ -26,7 +26,7 @@
|
||||
:title="b.title"
|
||||
>
|
||||
<dpi-img :src="b.imageUrl" :alt="b.title" :size="{width: 500, height: 250}" :root="cardsContainer"></dpi-img>
|
||||
<div class="title">{{b.title}}</div>
|
||||
<div class="title" :title="b.title">{{b.title}}</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="jump-dots">
|
||||
@ -99,37 +99,45 @@ $first-row-height: 250px;
|
||||
|
||||
.jump-dots {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 8px;
|
||||
transform: translateY(-50%);
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
transform: translateX(-50%);
|
||||
grid-area: cards;
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
& label {
|
||||
display: block;
|
||||
}
|
||||
& label:not(:last-child) {
|
||||
margin-bottom: 6px;
|
||||
padding: 8px 6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.jump-dot {
|
||||
background-color: #8884;
|
||||
border: 1px solid #8888;
|
||||
box-sizing: border-box;
|
||||
width: 8px;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
height: 8px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.blackboard-cards {
|
||||
display: flex;
|
||||
grid-area: cards;
|
||||
--blackboard-width: 568.5px;
|
||||
--blackboard-width: 350px;
|
||||
--blackboard-height: 250px;
|
||||
--image-height: 197px;
|
||||
width: var(--blackboard-width);
|
||||
height: var(--blackboard-height);
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 4px 8px 0 #0001;
|
||||
body.dark & {
|
||||
background-color: #282828;
|
||||
}
|
||||
|
||||
.blackboard-card {
|
||||
flex: 0 0 auto;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
@ -137,27 +145,26 @@ $first-row-height: 250px;
|
||||
transition: 0.8s cubic-bezier(0.44, 0.29, 0.13, 1);
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
height: var(--image-height);
|
||||
object-fit: fill;
|
||||
display: block;
|
||||
border-radius: 12px;
|
||||
transition-duration: inherit;
|
||||
}
|
||||
.title {
|
||||
position: absolute;
|
||||
bottom: 8px;
|
||||
bottom: 24px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
padding: 4px 16px;
|
||||
color: white;
|
||||
background-color: #000a;
|
||||
padding: 0 16px;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
border-radius: 14px;
|
||||
max-width: var(--blackboard-width);
|
||||
box-sizing: border-box;
|
||||
white-space: nowrap;
|
||||
opacity: 0;
|
||||
}
|
||||
&:hover .title {
|
||||
opacity: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -219,6 +219,8 @@ export default {
|
||||
font-weight: bold;
|
||||
font-size: 11pt;
|
||||
padding-bottom: 12px;
|
||||
margin: 0;
|
||||
height: auto;
|
||||
&::before {
|
||||
content: '';
|
||||
display: inline-flex;
|
||||
|
||||
@ -128,19 +128,19 @@ export default {
|
||||
// display: grid;
|
||||
// grid-template: 'main main main' 1fr / 1fr 1fr 1fr;
|
||||
flex-grow: 1;
|
||||
margin: 16px 0;
|
||||
margin: 16px 0 10px 0;
|
||||
justify-self: stretch;
|
||||
// grid-gap: 12px;
|
||||
// gap: 12px;
|
||||
.entry-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 16px;
|
||||
margin-top: 10px;
|
||||
.entry {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 8px;
|
||||
border-radius: 18px;
|
||||
font-size: 14px;
|
||||
color: inherit;
|
||||
background-color: #fff;
|
||||
@ -182,7 +182,7 @@ export default {
|
||||
position: relative;
|
||||
width: 350px;
|
||||
height: 204px;
|
||||
border-radius: 8px;
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
.image {
|
||||
background-size: cover;
|
||||
|
||||
@ -113,13 +113,14 @@ export default {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1000;
|
||||
background-color: #f4f4f4;
|
||||
background-color: var(--simplify-home-background);
|
||||
color: black;
|
||||
margin: 0;
|
||||
height: auto;
|
||||
&:link {
|
||||
cursor: pointer;
|
||||
}
|
||||
body.dark & {
|
||||
background-color: #181818;
|
||||
color: #eee;
|
||||
}
|
||||
}
|
||||
|
||||
@ -32,7 +32,7 @@
|
||||
<icon type="home" icon="activity"></icon>全部动态
|
||||
</a>
|
||||
</div>
|
||||
<div class="contents" ref="contents">
|
||||
<div class="contents edge-gradient" ref="contents" @scroll="checkScrollPosition" :class="{ 'is-bottom': isBottom }">
|
||||
<div class="card-wrapper" v-for="card in feedCards" :key="card.id">
|
||||
<video-card :data="card" orientation="vertical"></video-card>
|
||||
</div>
|
||||
@ -82,6 +82,7 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
online: '--',
|
||||
isBottom: false,
|
||||
tabs,
|
||||
currentTab: tabs[0],
|
||||
feedCards: []
|
||||
@ -112,7 +113,11 @@ export default {
|
||||
const gap = 16
|
||||
const distance = count * (width + gap)
|
||||
contents.scrollBy(orientation * distance, 0)
|
||||
}
|
||||
},
|
||||
checkScrollPosition: _.debounce(function checkScrollPosition(e: Event) {
|
||||
const element = e.target as HTMLElement
|
||||
this.isBottom = element.scrollWidth - element.scrollLeft === element.clientWidth
|
||||
}, 200),
|
||||
},
|
||||
async mounted() {
|
||||
this.updateFeedCards(this.currentTab)
|
||||
@ -209,7 +214,7 @@ export default {
|
||||
--card-height: 250px;
|
||||
--card-count: 4;
|
||||
width: calc((var(--card-width) + 16px) * var(--card-count));
|
||||
padding-bottom: 16px;
|
||||
// padding-bottom: 16px;
|
||||
scrollbar-width: none !important;
|
||||
min-height: calc(var(--card-height) + 16px);
|
||||
@media screen and (max-width: 900px) {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="simple-home" :class="{ snap }">
|
||||
<div class="simple-home" :class="{ snap, 'layout-fill': layoutFill }">
|
||||
<blackboards></blackboards>
|
||||
<trending-videos></trending-videos>
|
||||
<info-row></info-row>
|
||||
@ -19,12 +19,16 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
snap: false,
|
||||
layoutFill: true,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
addSettingsListener('simpleHomeWheelScroll', (value: boolean) => {
|
||||
this.snap = !value
|
||||
}, true)
|
||||
addSettingsListener('simpleHomeLayoutFill', (value: boolean) => {
|
||||
this.layoutFill = value
|
||||
}, true)
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@ -57,14 +61,14 @@ export default {
|
||||
label:nth-child(#{$i})
|
||||
.jump-dot {
|
||||
background-color: var(--theme-color);
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
}
|
||||
&:checked:nth-of-type(#{$i}) ~ .blackboard-cards .blackboard-card {
|
||||
transform: translateY(calc(-1 * #{$i - 1} * var(--blackboard-height))) scale(0.95);
|
||||
transform: translateX(calc(-1 * #{$i - 1} * var(--blackboard-width))) scale(0.9);
|
||||
&:nth-of-type(#{$i}) {
|
||||
transform: translateY(calc(-1 * #{$i - 1} * var(--blackboard-height)));
|
||||
transform: translateX(calc(-1 * #{$i - 1} * var(--blackboard-width)));
|
||||
img {
|
||||
border-radius: 16px;
|
||||
border-radius: 16px 16px 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -187,6 +191,46 @@ export default {
|
||||
grid-area: categories;
|
||||
padding-bottom: 32px;
|
||||
}
|
||||
&.layout-fill {
|
||||
flex: 1;
|
||||
.trendings,
|
||||
.feeds {
|
||||
justify-self: stretch;
|
||||
}
|
||||
|
||||
&.layout-fill .edge-gradient {
|
||||
width: auto;
|
||||
&::before,
|
||||
&::after {
|
||||
content: "";
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
height: calc(var(--card-height) + 16px);
|
||||
width: 10%;
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
transition: .2s ease-out;
|
||||
}
|
||||
&::before {
|
||||
background-image: linear-gradient(to left, transparent, var(--simplify-home-background));
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
&::after {
|
||||
background-image: linear-gradient(to right, transparent, var(--simplify-home-background));
|
||||
right: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
&.is-bottom {
|
||||
&::before {
|
||||
opacity: 1;
|
||||
}
|
||||
&::after {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1100px) {
|
||||
& {
|
||||
grid-template-areas: 'blackboards' 'trendings' 'info' 'feeds' 'categories';
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="trendings">
|
||||
<div class="header">
|
||||
<div class="title">热门</div>
|
||||
<div class="title">{{ trendingTitle }}</div>
|
||||
<!-- <div class="tabs">
|
||||
<div
|
||||
class="tab"
|
||||
@ -14,6 +14,9 @@
|
||||
</div>
|
||||
</div>-->
|
||||
<div class="page">
|
||||
<div v-if="personalized" class="refresh" @click="refreshCards">
|
||||
<icon type="mdi" icon="refresh"></icon>
|
||||
</div>
|
||||
<div class="prev-page" @click="scroll(-1)">
|
||||
<icon type="extended" icon="left-arrow"></icon>
|
||||
</div>
|
||||
@ -22,7 +25,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contents" ref="contents">
|
||||
<div class="contents edge-gradient" ref="contents" @scroll="checkScrollPosition" :class="{ 'is-bottom': isBottom }">
|
||||
<div class="card-wrapper" v-for="card in trendingCards" :key="card.id">
|
||||
<video-card :data="card" orientation="vertical"></video-card>
|
||||
</div>
|
||||
@ -33,57 +36,25 @@
|
||||
<script lang="ts">
|
||||
import { VideoCardInfo } from '../video-card-info'
|
||||
|
||||
interface Tab {
|
||||
name: string
|
||||
day: number
|
||||
url: string
|
||||
}
|
||||
// const tabs: Tab[] = [
|
||||
// {
|
||||
// name: '今日',
|
||||
// day: 1,
|
||||
// url: 'https://www.bilibili.com/ranking/all/0/0/1'
|
||||
// },
|
||||
// {
|
||||
// name: '三日',
|
||||
// day: 3,
|
||||
// url: 'https://www.bilibili.com/ranking'
|
||||
// },
|
||||
// {
|
||||
// name: '一周',
|
||||
// day: 7,
|
||||
// url: 'https://www.bilibili.com/ranking/all/0/0/7'
|
||||
// }
|
||||
// ]
|
||||
export default {
|
||||
components: {
|
||||
VideoCard: () => import('../video-card.vue'),
|
||||
Icon: () => import('../../icon.vue'),
|
||||
},
|
||||
data() {
|
||||
const personalized = getUID() && settings.simpleHomePersonalized
|
||||
return {
|
||||
// tabs,
|
||||
// currentTab: tabs[0],
|
||||
trendingCards: [],
|
||||
personalized,
|
||||
isBottom: false,
|
||||
trendingTitle: personalized ? '推荐' : '热门',
|
||||
trendingCards: [] as VideoCardInfo[],
|
||||
}
|
||||
},
|
||||
// watch: {
|
||||
// currentTab(tab: Tab) {
|
||||
// this.updateTrendingTab(tab)
|
||||
// },
|
||||
// },
|
||||
methods: {
|
||||
// async updateTrendingTab(tab: Tab) {
|
||||
// const { getTrendingVideos } = await import('../trending-videos')
|
||||
// this.trendingCards = await getTrendingVideos(tab.day)
|
||||
// },
|
||||
// changeTab(tab: Tab) {
|
||||
// if (this.currentTab === tab) {
|
||||
// open(tab.url, '_blank')
|
||||
// } else {
|
||||
// this.currentTab = tab
|
||||
// }
|
||||
// },
|
||||
async refreshCards() {
|
||||
const { getTrendingVideos } = await import('../trending-videos')
|
||||
this.trendingCards = await getTrendingVideos()
|
||||
},
|
||||
scroll(orientation: number) {
|
||||
const contents = this.$refs.contents as HTMLElement
|
||||
const style = getComputedStyle(contents)
|
||||
@ -92,11 +63,14 @@ export default {
|
||||
const gap = 16
|
||||
const distance = count * (width + gap)
|
||||
contents.scrollBy(orientation * distance, 0)
|
||||
}
|
||||
},
|
||||
checkScrollPosition: _.debounce(function checkScrollPosition(e: Event) {
|
||||
const element = e.target as HTMLElement
|
||||
this.isBottom = element.scrollWidth - element.scrollLeft === element.clientWidth
|
||||
}, 200),
|
||||
},
|
||||
async created() {
|
||||
const { getTrendingVideos } = await import('../trending-videos')
|
||||
this.trendingCards = await getTrendingVideos()
|
||||
await this.refreshCards()
|
||||
},
|
||||
async mounted() {
|
||||
let cancelHorizontalScroll: () => void
|
||||
@ -123,74 +97,83 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.simple-home .trendings {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.header {
|
||||
padding: 0 8px;
|
||||
.page {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> * {
|
||||
.simple-home {
|
||||
.trendings {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.header {
|
||||
padding: 0 8px;
|
||||
.page {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 4px;
|
||||
background-color: #8882;
|
||||
border-radius: 50%;
|
||||
margin-left: 8px;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background-color: #8884;
|
||||
> * {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 4px;
|
||||
background-color: #8882;
|
||||
border-radius: 50%;
|
||||
margin-left: 8px;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background-color: #8884;
|
||||
}
|
||||
}
|
||||
.prev-page .be-icon {
|
||||
transform: translateX(-1px);
|
||||
}
|
||||
.next-page .be-icon {
|
||||
transform: translateX(1px);
|
||||
}
|
||||
.refresh .be-icon {
|
||||
transition-duration: .5s;
|
||||
transform: scale(0.9);
|
||||
}
|
||||
.refresh:hover .be-icon {
|
||||
transform: scale(0.9) rotate(360deg);
|
||||
}
|
||||
}
|
||||
.prev-page .be-icon {
|
||||
transform: translateX(-1px);
|
||||
}
|
||||
.next-page .be-icon {
|
||||
transform: translateX(1px);
|
||||
}
|
||||
}
|
||||
}
|
||||
.contents {
|
||||
--card-width: 200px;
|
||||
--card-height: 250px;
|
||||
--card-count: 3;
|
||||
margin-top: 16px;
|
||||
display: flex;
|
||||
overflow: auto;
|
||||
height: calc(var(--card-height) + 16px);
|
||||
width: calc((var(--card-width) + 16px) * var(--card-count));
|
||||
scrollbar-width: none !important;
|
||||
.contents {
|
||||
--card-width: 200px;
|
||||
--card-height: 250px;
|
||||
--card-count: 4;
|
||||
margin-top: 16px;
|
||||
display: flex;
|
||||
overflow: auto;
|
||||
height: calc(var(--card-height) + 16px);
|
||||
width: calc((var(--card-width) + 16px) * var(--card-count));
|
||||
scrollbar-width: none !important;
|
||||
|
||||
@media screen and (max-width: 1300px) and (min-width: 900px) {
|
||||
& {
|
||||
--card-count: 2;
|
||||
@media screen and (max-width: 1300px) and (min-width: 900px) {
|
||||
& {
|
||||
--card-count: 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1100px) and (min-width: 900px) {
|
||||
& {
|
||||
--card-count: 4;
|
||||
@media screen and (max-width: 1100px) and (min-width: 900px) {
|
||||
& {
|
||||
--card-count: 5;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 1550px) {
|
||||
& {
|
||||
--card-count: 4;
|
||||
@media screen and (min-width: 1550px) {
|
||||
& {
|
||||
--card-count: 5;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 1850px) {
|
||||
& {
|
||||
--card-count: 5;
|
||||
@media screen and (min-width: 1850px) {
|
||||
& {
|
||||
--card-count: 6;
|
||||
}
|
||||
}
|
||||
&::-webkit-scrollbar {
|
||||
width: 0 !important;
|
||||
height: 0 !important;
|
||||
}
|
||||
.card-wrapper {
|
||||
padding: 0 8px;
|
||||
scroll-snap-align: start;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
&::-webkit-scrollbar {
|
||||
width: 0 !important;
|
||||
height: 0 !important;
|
||||
}
|
||||
.card-wrapper {
|
||||
padding: 0 8px;
|
||||
scroll-snap-align: start;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -21,16 +21,17 @@ export default {
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.simplify-home {
|
||||
padding-top: 32px;
|
||||
padding: 32px 72px 0;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
min-height: 100vh;
|
||||
background-color: #f4f4f4;
|
||||
--simplify-home-background: #f4f4f4;
|
||||
background-color: var(--simplify-home-background);
|
||||
font-size: 12px;
|
||||
|
||||
body.dark & {
|
||||
background-color: #181818;
|
||||
--simplify-home-background: #181818;
|
||||
}
|
||||
.simplify-home-component {
|
||||
max-width: 100%;
|
||||
|
||||
@ -2,86 +2,34 @@ import { VideoCardInfo } from './video-card-info'
|
||||
|
||||
export const getTrendingVideos = async () => {
|
||||
const { isVideoCardBlocked } = await import('../../activity/feeds-apis')
|
||||
// const json = await Ajax.getJsonWithCredentials(
|
||||
// `https://api.bilibili.com/x/web-interface/ranking/index?day=${days}`
|
||||
// )
|
||||
// if (getUID() && watchlaterList === undefined) {
|
||||
// const { getWatchlaterList } = await import(
|
||||
// '../../video/watchlater-api'
|
||||
// )
|
||||
// watchlaterList = await getWatchlaterList()
|
||||
// }
|
||||
// if (json.code !== 0) {
|
||||
// throw new Error(json.message)
|
||||
// }
|
||||
// return json.data.map(
|
||||
// (card: any) => ({
|
||||
// id: card.aid + '-' + days,
|
||||
// aid: parseInt(card.aid),
|
||||
// title: card.title,
|
||||
// upID: card.mid,
|
||||
// upName: card.author,
|
||||
// coverUrl: card.pic.replace('http://', 'https://'),
|
||||
// description: card.description,
|
||||
// durationText: card.duration,
|
||||
// playCount: formatCount(card.play),
|
||||
// coins: formatCount(card.coins),
|
||||
// favorites: formatCount(card.favorites),
|
||||
// watchlater: true,
|
||||
// // watchlater: watchlaterList ? watchlaterList.includes(parseInt(card.aid)) : null
|
||||
// })
|
||||
// )
|
||||
if (!unsafeWindow.__INITIAL_STATE__) {
|
||||
throw new Error('unsafeWindow.__INITIAL_STATE__ not available')
|
||||
const api = 'https://api.bilibili.com/x/web-interface/index/top/rcmd?fresh_type=0&version=1'
|
||||
const personalized = getUID() && settings.simpleHomePersonalized
|
||||
const requestMethod: keyof typeof Ajax = personalized ? 'getJsonWithCredentials' : 'getJson'
|
||||
const { code, message, data } = await Ajax[requestMethod](api)
|
||||
if (code !== 0) {
|
||||
throw new Error(`获取${personalized ? '推荐' : '热门'}视频失败: ${message}`)
|
||||
}
|
||||
if (unsafeWindow.__INITIAL_STATE__.recommendData) {
|
||||
return (unsafeWindow.__INITIAL_STATE__.recommendData.item as any[]).map(
|
||||
it => {
|
||||
return {
|
||||
id: it.id,
|
||||
aid: it.id,
|
||||
bvid: it.bvid,
|
||||
// timestamp: it.ctime * 1000,
|
||||
// time: new Date(it.ctime * 1000),
|
||||
description: it.desc,
|
||||
duration: it.duration,
|
||||
durationText: formatDuration(it.duration),
|
||||
coverUrl: it.pic.replace('http:', 'https:'),
|
||||
title: it.title,
|
||||
// coins: formatCount(it.stat.coin),
|
||||
// danmakuCount: formatCount(it.stat.danmaku),
|
||||
// favorites: formatCount(it.stat.favorite),
|
||||
// like: formatCount(it.stat.like),
|
||||
playCount: formatCount(it.stat.view),
|
||||
upName: it.owner.name,
|
||||
upFaceUrl: it.owner.face.replace('http:', 'https:'),
|
||||
} as VideoCardInfo
|
||||
},
|
||||
).filter(it => !isVideoCardBlocked(it))
|
||||
}
|
||||
return (unsafeWindow.__INITIAL_STATE__.recommendList as any[]).map(
|
||||
it => {
|
||||
return {
|
||||
id: it.aid,
|
||||
aid: it.aid,
|
||||
bvid: it.bvid,
|
||||
timestamp: it.ctime * 1000,
|
||||
time: new Date(it.ctime * 1000),
|
||||
description: it.desc,
|
||||
duration: it.duration,
|
||||
durationText: formatDuration(it.duration),
|
||||
coverUrl: it.pic.replace('http:', 'https:'),
|
||||
title: it.title,
|
||||
coins: formatCount(it.stat.coin),
|
||||
danmakuCount: formatCount(it.stat.danmaku),
|
||||
// favorites: formatCount(it.stat.favorite),
|
||||
like: formatCount(it.stat.like),
|
||||
playCount: formatCount(it.stat.view),
|
||||
upName: it.owner.name,
|
||||
upFaceUrl: it.owner.face.replace('http:', 'https:'),
|
||||
} as VideoCardInfo
|
||||
},
|
||||
).filter(it => !isVideoCardBlocked(it))
|
||||
const list: any[] = data.item
|
||||
return list.map(it => {
|
||||
const card: VideoCardInfo = {
|
||||
id: it.id,
|
||||
aid: it.id,
|
||||
bvid: it.bvid,
|
||||
coverUrl: it.pic.replace('http:', 'https:'),
|
||||
title: it.title,
|
||||
description: '',
|
||||
duration: it.duration,
|
||||
durationText: formatDuration(it.duration),
|
||||
timestamp: it.pubdate * 1000,
|
||||
time: new Date(it.pubdate * 1000),
|
||||
upName: it.owner.name,
|
||||
upID: it.owner.mid,
|
||||
upFaceUrl: it.owner.face.replace('http:', 'https:'),
|
||||
like: formatCount(it.stat.like),
|
||||
playCount: formatCount(it.stat.view),
|
||||
}
|
||||
return card
|
||||
}).filter(card => !isVideoCardBlocked(card))
|
||||
}
|
||||
export default {
|
||||
export: {
|
||||
|
||||
@ -39,11 +39,17 @@
|
||||
<div class="name" :title="upName">{{upName}}</div>
|
||||
</a>
|
||||
<div class="stats">
|
||||
<template v-if="like && !vertical">
|
||||
<Icon type="extended" icon="play"></Icon>
|
||||
{{playCount}}
|
||||
<template v-if="danmakuCount">
|
||||
<Icon type="extended" icon="danmaku"></Icon>
|
||||
{{danmakuCount}}
|
||||
</template>
|
||||
<template v-if="like">
|
||||
<Icon type="extended" icon="like-outline"></Icon>
|
||||
{{like}}
|
||||
</template>
|
||||
<template v-if="coins && !vertical">
|
||||
<template v-if="coins">
|
||||
<Icon type="home" icon="coin-outline"></Icon>
|
||||
{{coins}}
|
||||
</template>
|
||||
@ -51,12 +57,6 @@
|
||||
<Icon type="home" icon="favorites-outline"></Icon>
|
||||
{{favorites}}
|
||||
</template>
|
||||
<Icon type="extended" icon="play"></Icon>
|
||||
{{playCount}}
|
||||
<template v-if="danmakuCount">
|
||||
<Icon type="extended" icon="danmaku"></Icon>
|
||||
{{danmakuCount}}
|
||||
</template>
|
||||
</div>
|
||||
</a>
|
||||
</template>
|
||||
@ -176,6 +176,9 @@ export default {
|
||||
justify-self: start;
|
||||
margin-bottom: 8px;
|
||||
margin-right: 0;
|
||||
> :nth-child(n+3) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
& > * {
|
||||
|
||||
@ -110,6 +110,7 @@
|
||||
<checkbox indent="0" key="simplifyHome" dependencies=""></checkbox>
|
||||
<dropdown indent="1" key="simplifyHomeStyle" dependencies="simplifyHome"></dropdown>
|
||||
<checkbox indent="1" key="simpleHomeWheelScroll" dependencies="simplifyHome"></checkbox>
|
||||
<checkbox indent="1" key="simpleHomePersonalized" dependencies="simplifyHome"></checkbox>
|
||||
<checkbox indent="0" key="hideBanner" dependencies=""></checkbox>
|
||||
<checkbox indent="0" key="playerShadow" dependencies=""></checkbox>
|
||||
<checkbox indent="0" key="narrowDanmaku" dependencies=""></checkbox>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user