Add column activity

This commit is contained in:
the1812 2019-08-09 15:45:13 +08:00
parent 744f51df46
commit 9dc93de3f4
10 changed files with 203 additions and 26 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -138,7 +138,7 @@ const getDpiSourceSet = (src, baseSize, extension = 'jpg') => {
return `${src}@${Math.trunc(baseSize.width * dpi)}w_${Math.trunc(baseSize.height * dpi)}h.${extension} ${dpi}x`
} else if ('width' in baseSize) {
return `${src}@${Math.trunc(baseSize.width * dpi)}w.${extension} ${dpi}x`
} else if ('width' in baseSize) {
} else if ('height' in baseSize) {
return `${src}@${Math.trunc(baseSize.height * dpi)}h.${extension} ${dpi}x`
}
} else {
@ -2367,6 +2367,16 @@ try {
removeSettingsListener,
isEmbeddedPlayer,
isIframe,
getI18nKey,
dq,
dqa,
UserAgent,
EmptyImageUrl,
ascendingSort,
descendingSort,
formatFileSize,
formatDuration,
getDpiSourceSet,
resources,
theWorld: waitTime => {
if (waitTime > 0) {

View File

@ -138,7 +138,7 @@ const getDpiSourceSet = (src, baseSize, extension = 'jpg') => {
return `${src}@${Math.trunc(baseSize.width * dpi)}w_${Math.trunc(baseSize.height * dpi)}h.${extension} ${dpi}x`
} else if ('width' in baseSize) {
return `${src}@${Math.trunc(baseSize.width * dpi)}w.${extension} ${dpi}x`
} else if ('width' in baseSize) {
} else if ('height' in baseSize) {
return `${src}@${Math.trunc(baseSize.height * dpi)}h.${extension} ${dpi}x`
}
} else {
@ -2367,6 +2367,16 @@ try {
removeSettingsListener,
isEmbeddedPlayer,
isIframe,
getI18nKey,
dq,
dqa,
UserAgent,
EmptyImageUrl,
ascendingSort,
descendingSort,
formatFileSize,
formatDuration,
getDpiSourceSet,
resources,
theWorld: waitTime => {
if (waitTime > 0) {

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -107,6 +107,16 @@ try {
removeSettingsListener,
isEmbeddedPlayer,
isIframe,
getI18nKey,
dq,
dqa,
UserAgent,
EmptyImageUrl,
ascendingSort,
descendingSort,
formatFileSize,
formatDuration,
getDpiSourceSet,
resources,
theWorld: waitTime => {
if (waitTime > 0) {

View File

@ -113,7 +113,7 @@ export const getDpiSourceSet = (src, baseSize, extension = 'jpg') => {
return `${src}@${Math.trunc(baseSize.width * dpi)}w_${Math.trunc(baseSize.height * dpi)}h.${extension} ${dpi}x`
} else if ('width' in baseSize) {
return `${src}@${Math.trunc(baseSize.width * dpi)}w.${extension} ${dpi}x`
} else if ('width' in baseSize) {
} else if ('height' in baseSize) {
return `${src}@${Math.trunc(baseSize.height * dpi)}h.${extension} ${dpi}x`
}
} else {

View File

@ -1204,7 +1204,8 @@ li.nav-item[report-id='playpage_dynamic'] .i-frame,
}
.custom-navbar.dark .video-activity-card,
.custom-navbar.dark .activity-popup-content .view-more,
.custom-navbar.dark .bangumi-card {
.custom-navbar.dark .bangumi-card,
.custom-navbar.dark .column-card {
box-shadow: rgba(0,0,0,0.3) 0 4px 8px 0px;
}
.custom-navbar .video-activity-card .cover {
@ -1260,6 +1261,9 @@ li.nav-item[report-id='playpage_dynamic'] .i-frame,
box-sizing: border-box;
opacity: 0;
}
.custom-navbar .video-activity-card .watchlater {
padding: 0 8px 0 4px;
}
.custom-navbar .video-activity-card:hover .time,
.custom-navbar .video-activity-card:hover .watchlater {
opacity: 1;
@ -1319,9 +1323,76 @@ li.nav-item[report-id='playpage_dynamic'] .i-frame,
background-color: #8884;
grid-area: cover;
}
.custom-navbar .column-activity {
display: flex;
flex-direction: column;
align-items: stretch;
padding: 0 12px;
}
.custom-navbar .column-card {
display: flex;
flex-direction: column;
margin-bottom: 12px;
box-shadow: rgba(0,0,0,0.12) 0 4px 8px 0px;
}
.custom-navbar .column-card .up {
position: absolute;
left: 8px;
bottom: 6px;
padding: 2px;
display: flex;
align-items: center;
background-color: #000a;
border-radius: 14px;
height: 28px;
box-sizing: border-box;
}
.custom-navbar .column-card .face {
border-radius: 50%;
height: 24px;
}
.custom-navbar .column-card .up .name {
margin: 0 6px;
}
.custom-navbar .column-card .title {
padding: 8px 10px 0 10px;
font-size: 12pt;
font-weight: bold;
}
.custom-navbar .column-card:hover .title {
color: var(--theme-color);
}
.custom-navbar .column-card .description {
margin: 8px 10px;
max-height: 3em;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
line-height: 1.5;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
display: -webkit-box;
}
.custom-navbar .column-card .covers {
position: relative;
display: flex;
}
.custom-navbar .column-card .cover {
width: 0;
flex-grow: 1;
object-fit: cover;
}
.round-corner .custom-navbar .column-card .cover:first-child {
border-top-left-radius: var(--large-corner-radius);
}
.round-corner .custom-navbar .column-card .cover:nth-last-child(2) {
border-top-right-radius: var(--large-corner-radius);
}
.round-corner .custom-navbar .video-activity-card,
.round-corner .custom-navbar .bangumi-card {
.round-corner .custom-navbar .bangumi-card,
.round-corner .custom-navbar .column-card {
border-radius: var(--large-corner-radius);
}
.round-corner .custom-navbar .video-activity-card .cover {

View File

@ -919,6 +919,9 @@ class Activities extends NavbarComponent {
props: ['size', 'src'],
computed: {
srcset () {
if (!this.src || !this.size) {
return null
}
return getDpiSourceSet(this.src, this.size)
},
width () {
@ -935,6 +938,13 @@ class Activities extends NavbarComponent {
}
},
})
Vue.component('activity-loading', {
template: /*html*/`
<div v-if="loading" class="loading">
<i class="mdi mdi-18px mdi-loading mdi-spin"></i>...
</div>`,
props: ['loading'],
})
this.popupVM = new Vue({
el: await SpinQuery.select('.activity-popup'),
data: {
@ -942,7 +952,7 @@ class Activities extends NavbarComponent {
'视频',
'番剧',
'专栏',
'图片',
// '图片',
'直播',
],
selectedTab: '视频',
@ -1004,9 +1014,7 @@ class Activities extends NavbarComponent {
},
template: /*html*/`
<div class="video-activity" :class="{loading}">
<div v-if="loading" class="loading">
<i class="mdi mdi-18px mdi-loading mdi-spin"></i>...
</div>
<activity-loading :loading="loading"></activity-loading>
<div v-if="!loading" class="video-activity-column">
<video-card v-for="card of leftCards" :key="card.id" :card="card" :watchlaterInit="card.watchlater"></video-card>
</div>
@ -1069,13 +1077,11 @@ class Activities extends NavbarComponent {
'bangumi-activity': {
template: /*html*/`
<div class="bangumi-activity" :class="{loading}">
<div v-if="loading" class="loading">
<i class="mdi mdi-18px mdi-loading mdi-spin"></i>...
</div>
<a v-else class="bangumi-card" v-for="card of cards" :key="card.id" target="_blank" :href="card.url">
<activity-loading :loading="loading"></activity-loading>
<a v-if="!loading" class="bangumi-card" v-for="card of cards" :key="card.id" target="_blank" :href="card.url">
<dpi-img class="ep-cover" :size="{width: 100}" :src="card.epCoverUrl"></dpi-img>
<h1 class="ep-title">{{card.epTitle}}</h1>
<div class="title">{{card.title}}</div>
<h1 class="ep-title" :title="card.epTitle">{{card.epTitle}}</h1>
<div class="title" :title="card.title">{{card.title}}</div>
</a>
</div>
`,
@ -1109,7 +1115,55 @@ class Activities extends NavbarComponent {
}
},
},
// 'column-activity': {},
'column-activity': {
template: /*html*/`
<div class="column-activity" :class="{loading}">
<activity-loading :loading="loading"></activity-loading>
<a v-if="!loading" class="column-card" v-for="card of cards" :key="card.id" target="_blank" :href="card.url">
<div class="covers">
<dpi-img class="cover" v-for="cover of card.covers" :key="cover" :size="{height: 120}" :src="cover"></dpi-img>
<div class="up">
<dpi-img class="face" :size="24" :src="card.faceUrl"></dpi-img>
<div class="name">{{card.upName}}</div>
</div>
</div>
<h1 class="title" :title="card.title">{{card.title}}</h1>
<div class="description" :title="card.description">{{card.description}}</div>
</a>
</div>
`,
data () {
return {
cards: [],
loading: true,
}
},
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=64`)
if (json.code !== 0) {
throw new Error(json.message)
}
this.cards = json.data.cards.map(card => {
const cardJson = JSON.parse(card.card)
return {
covers: cardJson.image_urls,
originalCovers: cardJson.origin_image_urls,
upName: cardJson.author.name,
faceUrl: cardJson.author.face,
title: cardJson.title,
description: cardJson.summary,
url: `https://www.bilibili.com/read/cv${cardJson.id}`,
id: card.desc.dynamic_id_str,
}
})
} catch (error) {
logError(`加载专栏动态失败, error = ${error}`)
} finally {
this.loading = false
}
},
},
// 'photos-activity': {},
// 'live-activity': {},
},
@ -1120,6 +1174,8 @@ class Activities extends NavbarComponent {
return 'https://t.bilibili.com/?tab=8'
case '番剧':
return 'https://t.bilibili.com/?tab=512'
case '专栏':
return 'https://t.bilibili.com/?tab=64'
default: return null
}
},