mirror of
https://github.com/the1812/Bilibili-Evolved.git
synced 2025-11-04 21:22:45 +08:00
Add column activity
This commit is contained in:
parent
744f51df46
commit
9dc93de3f4
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -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) {
|
||||
|
||||
@ -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) {
|
||||
|
||||
2
min/custom-navbar.min.css
vendored
2
min/custom-navbar.min.css
vendored
File diff suppressed because one or more lines are too long
2
min/custom-navbar.min.js
vendored
2
min/custom-navbar.min.js
vendored
File diff suppressed because one or more lines are too long
@ -107,6 +107,16 @@ try {
|
||||
removeSettingsListener,
|
||||
isEmbeddedPlayer,
|
||||
isIframe,
|
||||
getI18nKey,
|
||||
dq,
|
||||
dqa,
|
||||
UserAgent,
|
||||
EmptyImageUrl,
|
||||
ascendingSort,
|
||||
descendingSort,
|
||||
formatFileSize,
|
||||
formatDuration,
|
||||
getDpiSourceSet,
|
||||
resources,
|
||||
theWorld: waitTime => {
|
||||
if (waitTime > 0) {
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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
|
||||
}
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user