Simplify home for new design (#2209)

This commit is contained in:
the1812 2021-09-11 16:03:19 +08:00
parent 6a7ec0bd84
commit 9a5deb6b5b
31 changed files with 293 additions and 281 deletions

File diff suppressed because one or more lines are too long

View File

@ -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}}})();

View File

@ -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)}})}})();

View File

@ -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

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

@ -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)}})}})();

File diff suppressed because one or more lines are too long

View File

@ -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}})}})();

View File

@ -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}}})();

View File

@ -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")}})}})();

File diff suppressed because one or more lines are too long

View File

@ -494,6 +494,7 @@ Resource.manifest = {
simplifyHome: '简化首页',
simplifyHomeStyle: '首页风格',
simpleHomeWheelScroll: '允许横向滚动',
simpleHomePersonalized: '个性化推荐',
},
dropdown: {
key: 'simplifyHomeStyle',

View File

@ -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
View File

@ -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,

View File

@ -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
}

View File

@ -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;

View File

@ -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: {

View File

@ -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;
}
}
}

View File

@ -219,6 +219,8 @@ export default {
font-weight: bold;
font-size: 11pt;
padding-bottom: 12px;
margin: 0;
height: auto;
&::before {
content: '';
display: inline-flex;

View File

@ -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;

View File

@ -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;
}
}

View File

@ -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) {

View File

@ -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';

View File

@ -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;
}
}
}

View File

@ -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%;

View File

@ -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: {

View File

@ -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;
}
}
}
& > * {

View File

@ -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>