Fix trending videos not updating

This commit is contained in:
the1812 2020-06-06 10:36:33 +08:00
parent 76b403f7d2
commit d401d7eb9d
9 changed files with 98 additions and 33 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -221,7 +221,7 @@
"touch-player.min.css": "3D4B8D1EEA99277D5549D533503D0C1E4486382F507ED172B05E5350423EC0A2",
"touch-player.min.js": "0307516FD221386DA37F9C48223BA0E242BF52EF48F46D18A033042351968E94",
"trending-videos.min.js": "1ED73F10D5A7C409CCBF91A97FBB0DE2AA16426F2216DF75F904E8A6389A46E9",
"trending-videos.vue.min.js": "24E8616129DDEC7D014B1836DB6E54A5AF35578D1F4586EE827A962312EA7049",
"trending-videos.vue.min.js": "7E3D518B8644D1AB9D3D77A27A53FBBD3B37D5C70E89460EE14A6B617B37E40D",
"tweets.min.css": "9015C1F165C91B9205ABBE4E8A3B5FA83DB1EB4B5CF2442846AF61E44FF178A8",
"url-params-clean.min.js": "50D1D3D84CCCD475EF69F81955A529B1DD9F4BB2EF0E25ADD523EAFA59F0E643",
"v-checkbox.vue.min.js": "A23C35D5627009A29FD396A024442A19E37DEE70674BF3CE0FA377D781ED2231",

Binary file not shown.

View File

@ -1 +1 @@
(()=>{return(a,t)=>{const i=`<div class=trendings><div class=header><div class=title>热门</div><div class=tabs><div class=tab v-for="tab in tabs":key=tab.day @click=changeTab(tab) :class="{active: currentTab === tab}"><div class=tab-name>{{tab.name}}</div></div></div></div><div class=contents><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 .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}}.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");const n=[{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"}];return{export:Object.assign({template:i},{components:{VideoCard:()=>t.importAsync("video-card.vue")},data(){return{tabs:n,currentTab:n[0],trendingCards:[]}},watch:{currentTab(a){this.updateTrendingTab(a)}},methods:{async updateTrendingTab(a){const{getTrendingVideos:i}=await t.importAsync("trending-videos");this.trendingCards=await i(a.day)},changeTab(a){if(this.currentTab===a){open(a.url,"_blank")}else{this.currentTab=a}}},mounted(){this.updateTrendingTab(this.currentTab)}})}}})();
(()=>{return(e,t)=>{const n=`<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>`;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 .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}}.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(){return{trendingCards:unsafeWindow.__INITIAL_STATE__.recommendList.map(e=>{return{id:e.aid,aid:e.aid,bvid:e.bvid,timestamp:e.ctime*1e3,time:new Date(e.ctime*1e3),description:e.desc,duration:e.duration,durationText:formatDuration(e.duration),coverUrl:e.pic.replace("http:","https:"),title:e.title,coins:formatCount(e.stat.coin),danmakuCount:formatCount(e.stat.danmaku),like:formatCount(e.stat.like),playCount:formatCount(e.stat.view),upName:e.owner.name,upFaceUrl:e.owner.face.replace("http:","https:")}})}},watch:{currentTab(e){this.updateTrendingTab(e)}},methods:{async updateTrendingTab(e){const{getTrendingVideos:n}=await t.importAsync("trending-videos");this.trendingCards=await n(e.day)},changeTab(e){if(this.currentTab===e){open(e.url,"_blank")}else{this.currentTab=e}},scroll(e){const t=this.$refs.contents;const n=getComputedStyle(t);const a=parseFloat(n.getPropertyValue("--card-count"));const i=parseFloat(n.getPropertyValue("--card-width"));const r=16;const d=a*(i+r);t.scrollBy(e*d,0)}},mounted(){this.updateTrendingTab(this.currentTab)}})}}})();

View File

@ -2,7 +2,7 @@
<div class="trendings">
<div class="header">
<div class="title">热门</div>
<div class="tabs">
<!-- <div class="tabs">
<div
class="tab"
v-for="tab in tabs"
@ -12,9 +12,17 @@
>
<div class="tab-name">{{tab.name}}</div>
</div>
</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">
<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>
@ -23,43 +31,68 @@
</template>
<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'
}
]
// 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')
VideoCard: () => import('../video-card.vue'),
Icon: () => import('../../icon.vue'),
},
data() {
return {
tabs,
currentTab: tabs[0],
trendingCards: []
// tabs,
// currentTab: tabs[0],
trendingCards: unsafeWindow.__INITIAL_STATE__.recommendList.map(
(it: any) => {
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
},
),
}
},
watch: {
currentTab(tab: Tab) {
this.updateTrendingTab(tab)
}
},
},
methods: {
async updateTrendingTab(tab: Tab) {
@ -72,11 +105,20 @@ export default {
} else {
this.currentTab = tab
}
},
scroll(orientation: number) {
const contents = this.$refs.contents as HTMLElement
const style = getComputedStyle(contents)
const count = parseFloat(style.getPropertyValue('--card-count'))
const width = parseFloat(style.getPropertyValue('--card-width'))
const gap = 16
const distance = count * (width + gap)
contents.scrollBy(orientation * distance, 0)
}
},
mounted() {
this.updateTrendingTab(this.currentTab)
}
},
}
</script>
@ -86,6 +128,29 @@ export default {
flex-direction: column;
.header {
padding: 0 8px;
.page {
display: flex;
align-items: center;
> * {
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);
}
}
}
.contents {
--card-width: 200px;

View File