Add bangumi activity

This commit is contained in:
the1812 2019-08-09 11:49:18 +08:00
parent 639f89f720
commit 03c9136173
6 changed files with 119 additions and 60 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

@ -1156,8 +1156,8 @@ li.nav-item[report-id='playpage_dynamic'] .i-frame,
transform: translateY(-6px);
box-shadow: rgba(0,0,0,0.12) 0 4px 8px 0px;
cursor: pointer;
height: 36px;
border-radius: 18px;
height: 28px;
border-radius: 14px;
box-sizing: border-box;
}
.custom-navbar .activity-popup-content .view-more:hover {
@ -1177,7 +1177,7 @@ li.nav-item[report-id='playpage_dynamic'] .i-frame,
display: flex;
align-items: center;
}
.custom-navbar .activity-popup-content .mdi {
.custom-navbar .activity-popup-content .loading .mdi {
line-height: 1;
margin-right: 6px;
}
@ -1203,7 +1203,8 @@ li.nav-item[report-id='playpage_dynamic'] .i-frame,
break-inside: avoid;
}
.custom-navbar.dark .video-activity-card,
.custom-navbar.dark .activity-popup-content .view-more {
.custom-navbar.dark .activity-popup-content .view-more,
.custom-navbar.dark .bangumi-card {
box-shadow: rgba(0,0,0,0.3) 0 4px 8px 0px;
}
.custom-navbar .video-activity-card .cover {
@ -1272,13 +1273,46 @@ li.nav-item[report-id='playpage_dynamic'] .i-frame,
margin-right: 4px;
font-size: 16px;
}
.custom-navbar .bangumi-card {
--cover-width: 100px;
margin: 0 12px 12px 12px;
box-shadow: rgba(0,0,0,0.12) 0 4px 8px 0px;
display: grid;
grid-template-areas: "cover epTitle" "cover title";
grid-template-columns: var(--cover-width) 1fr;
grid-template-rows: 1fr 1fr;
}
.custom-navbar .bangumi-card .title {
grid-area: title;
padding: 4px 8px;
}
.custom-navbar .bangumi-card .ep-title {
grid-area: epTitle;
font-size: 12pt;
font-weight: bold;
padding: 4px 8px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.custom-navbar .bangumi-card:hover .ep-title {
color: var(--theme-color);
}
.custom-navbar .bangumi-card .ep-cover {
width: var(--cover-width);
grid-area: cover;
}
.round-corner .custom-navbar .video-activity-card {
.round-corner .custom-navbar .video-activity-card,
.round-corner .custom-navbar .bangumi-card {
border-radius: var(--large-corner-radius);
}
.round-corner .custom-navbar .video-activity-card .cover {
border-radius: var(--large-corner-radius) var(--large-corner-radius) 0 0;
}
.round-corner .custom-navbar .bangumi-activity .ep-cover {
border-radius: var(--large-corner-radius) 0 0 var(--large-corner-radius);
}
body.all-navbar-fill .link-navbar,
body.all-navbar-fill .nav-header-wrapper,

View File

@ -1001,68 +1001,91 @@ class Activities extends NavbarComponent {
loading: true,
}
},
mounted() {
(async () => {
try {
const json = await Ajax.getJsonWithCredentials(`https://api.vc.bilibili.com/dynamic_svr/v1/dynamic_svr/dynamic_new?uid=${userInfo.mid}&type_list=8`)
if (json.code !== 0) {
throw new Error(json.message)
}
const { getWatchlaterList } = await import('../../video/watchlater-api')
const watchlaterList = await getWatchlaterList()
const cards = json.data.cards.map(card => {
const cardJson = JSON.parse(card.card)
let topics
if (card.display && card.display.topic_info) {
topics = card.display.topic_info.topic_details.map(it => {
return it.topic_name
})
}
return {
coverUrl: cardJson.pic,
title: cardJson.title,
timeNumber: cardJson.duration,
time: formatDuration(cardJson.duration),
description: cardJson.desc,
aid: cardJson.aid,
videoUrl: `https://www.bilibili.com/av${cardJson.aid}`,
faceUrl: card.desc.user_profile.info.face,
upName: card.desc.user_profile.info.uname,
upUrl: `https://space.bilibili.com/${card.desc.user_profile.info.uid}`,
id: card.desc.dynamic_id_str,
topics,
watchlater: watchlaterList.includes(cardJson.aid),
}
})
this.leftCards = cards.filter((_, index) => index % 2 === 0)
this.rightCards = cards.filter((_, index) => index % 2 === 1)
if (this.leftCards.length !== this.rightCards.length) {
this.leftCards.pop()
}
} catch (error) {
logError(`加载视频动态失败, error = ${error}`)
} finally {
this.loading = false
async mounted() {
try {
const json = await Ajax.getJsonWithCredentials(`https://api.vc.bilibili.com/dynamic_svr/v1/dynamic_svr/dynamic_new?uid=${userInfo.mid}&type_list=8`)
if (json.code !== 0) {
throw new Error(json.message)
}
})()
const { getWatchlaterList } = await import('../../video/watchlater-api')
const watchlaterList = await getWatchlaterList()
const cards = json.data.cards.map(card => {
const cardJson = JSON.parse(card.card)
let topics
if (card.display && card.display.topic_info) {
topics = card.display.topic_info.topic_details.map(it => {
return it.topic_name
})
}
return {
coverUrl: cardJson.pic,
title: cardJson.title,
timeNumber: cardJson.duration,
time: formatDuration(cardJson.duration),
description: cardJson.desc,
aid: cardJson.aid,
videoUrl: `https://www.bilibili.com/av${cardJson.aid}`,
faceUrl: card.desc.user_profile.info.face,
upName: card.desc.user_profile.info.uname,
upUrl: `https://space.bilibili.com/${card.desc.user_profile.info.uid}`,
id: card.desc.dynamic_id_str,
topics,
watchlater: watchlaterList.includes(cardJson.aid),
}
})
this.leftCards = cards.filter((_, index) => index % 2 === 0)
this.rightCards = cards.filter((_, index) => index % 2 === 1)
if (this.leftCards.length !== this.rightCards.length) {
this.leftCards.pop()
}
} catch (error) {
logError(`加载视频动态失败, error = ${error}`)
} finally {
this.loading = false
}
},
},
'bangumi-activity': {
template: /*html*/`
<div class="bangumi-activity">
<div class="bangumi-activity" :class="{loading}">
<div v-if="loading" class="loading">
<i class="mdi mdi-18px mdi-loading mdi-spin"></i>...
</div>
<bangumi-card v-for="card of cards" :key="card.id" :card="card"></bangumi-card>
<a v-else class="bangumi-card" v-for="card of cards" :key="card.id" target="_blank" :href="card.url">
<img class="ep-cover" :src="card.epCoverUrl">
<h1 class="ep-title">{{card.epTitle}}</h1>
<div class="title">{{card.title}}</div>
</a>
</div>
`,
data() {
return {
cards: [],
loading: true,
}
},
mounted() {
async mounted() {
try {
const json = await Ajax.getJsonWithCredentials(`https://api.vc.bilibili.com/dynamic_svr/v1/dynamic_svr/dynamic_new?uid=${userInfo.mid}&type_list=512`)
if (json.code !== 0) {
throw new Error(json.message)
}
this.cards = json.data.cards.map(card => {
const cardJson = JSON.parse(card.card)
return {
title: cardJson.apiSeasonInfo.title,
coverUrl: cardJson.apiSeasonInfo.cover,
epCoverUrl: cardJson.cover,
epTitle: cardJson.new_desc,
url: cardJson.url,
id: card.desc.dynamic_id_str,
}
})
} catch (error) {
logError(`加载番剧动态失败, error = ${error}`)
} finally {
this.loading = false
}
},
},
// 'column-activity': {},
@ -1074,6 +1097,8 @@ class Activities extends NavbarComponent {
switch (this.selectedTab) {
case '视频':
return 'https://t.bilibili.com/?tab=8'
case '番剧':
return 'https://t.bilibili.com/?tab=512'
default: return null
}
},