Add bangumi-subscriptions

This commit is contained in:
the1812 2019-08-24 20:25:03 +08:00
parent 8d9dcb0007
commit 0996cd58a0
10 changed files with 243 additions and 55 deletions

View File

@ -83,7 +83,7 @@ declare global {
userInfo: number;
messages: number;
activities: number;
bangumiLink: number;
bangumi: number;
watchlaterList: number;
favoritesList: number;
historyList: number;

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -163,7 +163,7 @@ const customNavbarDefaultOrders = {
userInfo: 12,
messages: 13,
activities: 14,
bangumiLink: 15,
bangumi: 15,
watchlaterList: 16,
favoritesList: 17,
historyList: 18,
@ -255,7 +255,7 @@ const settings = {
customNavbarBlur: true,
customNavbarBlurOpacity: 0.7,
customNavbarOrder: { ...customNavbarDefaultOrders },
customNavbarHidden: ['bangumiLink'],
customNavbarHidden: ['bangumi'],
customNavbarBoundsPadding: 5,
playerShadow: false,
narrowDanmaku: true,

View File

@ -163,7 +163,7 @@ const customNavbarDefaultOrders = {
userInfo: 12,
messages: 13,
activities: 14,
bangumiLink: 15,
bangumi: 15,
watchlaterList: 16,
favoritesList: 17,
historyList: 18,
@ -255,7 +255,7 @@ const settings = {
customNavbarBlur: true,
customNavbarBlurOpacity: 0.7,
customNavbarOrder: { ...customNavbarDefaultOrders },
customNavbarHidden: ['bangumiLink'],
customNavbarHidden: ['bangumi'],
customNavbarBoundsPadding: 5,
playerShadow: false,
narrowDanmaku: true,

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -14,7 +14,7 @@ export const customNavbarDefaultOrders = {
userInfo: 12,
messages: 13,
activities: 14,
bangumiLink: 15,
bangumi: 15,
watchlaterList: 16,
favoritesList: 17,
historyList: 18,
@ -106,7 +106,7 @@ export const settings = {
customNavbarBlur: true,
customNavbarBlurOpacity: 0.7,
customNavbarOrder: { ...customNavbarDefaultOrders },
customNavbarHidden: ['bangumiLink'],
customNavbarHidden: ['bangumi'],
customNavbarBoundsPadding: 5,
playerShadow: false,
narrowDanmaku: true,

View File

@ -1207,9 +1207,10 @@ li.nav-item[report-id='playpage_dynamic'] .i-frame,
justify-content: space-between;
align-items: center;
}
.custom-navbar .activity-tabs .view-all {
.custom-navbar .activity-tabs .view-all,
.custom-navbar .subscriptions-tabs .view-all {
background-color: #8882;
padding: 4px 10px;
padding: 4px 6px 4px 10px;
height: 28px;
box-sizing: border-box;
border-radius: 14px;
@ -1218,9 +1219,14 @@ li.nav-item[report-id='playpage_dynamic'] .i-frame,
}
.custom-navbar .activity-tabs .view-all i {
font-size: 14pt;
margin-right: 4px;
margin-left: 4px;
}
.custom-navbar .activity-tabs .view-all:hover {
.custom-navbar .subscriptions-tabs .view-all i {
font-size: 12pt;
margin-left: 4px;
}
.custom-navbar .activity-tabs .view-all:hover,
.custom-navbar .subscriptions-tabs .view-all:hover {
background-color: #8884;
}
.custom-navbar .activity-tab {
@ -1253,7 +1259,8 @@ li.nav-item[report-id='playpage_dynamic'] .i-frame,
border-radius: 10px;
white-space: nowrap;
}
.custom-navbar .activity-tab::after {
.custom-navbar .activity-tab::after,
.custom-navbar .subscriptions .tab::after {
content: "";
width: calc(80%);
height: 2px;
@ -1265,7 +1272,8 @@ li.nav-item[report-id='playpage_dynamic'] .i-frame,
transform: scaleX(0);
transition: all .2s ease-out;
}
.custom-navbar .activity-tab.selected::after {
.custom-navbar .activity-tab.selected::after,
.custom-navbar .subscriptions .tab.selected::after {
transform: scaleX(1);
}
.custom-navbar .activity-popup-content {
@ -1629,7 +1637,7 @@ li.nav-item[report-id='playpage_dynamic'] .i-frame,
top: 4px;
left: 4px;
background-color: var(--theme-color);
color: var(--forground-color);
color: var(--foreground-color);
padding: 0 6px;
height: 18px;
border-radius: 9px;
@ -1648,6 +1656,84 @@ li.nav-item[report-id='playpage_dynamic'] .i-frame,
font-size: 12px;
padding: 0 8px;
}
.custom-navbar .subscriptions {
width: 380px;
font-size: 9pt;
}
.custom-navbar .subscriptions-tabs {
margin: 8px 16px;
display: flex;
align-items: center;
}
.custom-navbar .subscriptions .tab-placeholder {
flex-grow: 1;
}
.custom-navbar .subscriptions .tab {
opacity: 0.5;
margin-right: 24px;
position: relative;
line-height: 1.4;
cursor: pointer;
}
.custom-navbar .subscriptions .tab.selected {
opacity: 1;
font-weight: bold;
transform: scale(1.2);
}
.custom-navbar .bangumi-subscriptions {
display: flex;
flex-direction: column;
}
.custom-navbar .bangumi-subscriptions-card {
position: relative;
display: flex;
margin-bottom: 12px;
}
.round-corner .custom-navbar .bangumi-subscriptions-card {
border-radius: var(--large-corner-radius);
box-shadow: rgba(0,0,0,0.12) 0 2px 8px 0px;
}
.round-corner .custom-navbar .bangumi-subscriptions-card .cover {
border-radius: var(--large-corner-radius) 0 0 var(--large-corner-radius);
}
.custom-navbar .bangumi-subscriptions-card .card-info {
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 0 12px;
}
.custom-navbar .bangumi-subscriptions-card .info {
padding: 2px;
background-color: #8882;
font-size: 12pt;
border-radius: 14px;
line-height: 1;
}
.custom-navbar .bangumi-subscriptions-card .info:hover {
background-color: #8884;
}
.custom-navbar .bangumi-subscriptions-card .progress-row {
flex-grow: 1;
display: flex;
justify-content: space-between;
align-self: stretch;
align-items: center;
}
.custom-navbar .bangumi-subscriptions-card .title {
font-size: 11pt;
font-weight: bold;
padding-top: 8px;
color: inherit;
}
.custom-navbar .bangumi-subscriptions-card:hover .title {
color: var(--theme-color);
}
.custom-navbar .subscriptions .content {
padding: 8px 12px;
height: 500px;
overflow: auto;
}
.round-corner .custom-navbar .column-card .cover:first-child {
border-top-left-radius: var(--large-corner-radius);

View File

@ -45,7 +45,7 @@ const attributes = {
userInfo: "用户信息",
messages: "消息",
activities: "动态",
bangumiLink: '订阅',
bangumi: '订阅',
watchlaterList: "稍后再看",
favoritesList: "收藏",
historyList: "历史",
@ -152,7 +152,7 @@ const attributes = {
computed: {
orderList () {
const orders = Object.entries(settings.customNavbarOrder);
return orders.sort((a, b) => a[1] - b[1]).map(it => {
return orders.filter(it => it[0] in displayNames).sort((a, b) => a[1] - b[1]).map(it => {
return {
displayName: displayNames[it[0]],
name: it[0],
@ -913,7 +913,7 @@ class Activities extends NavbarComponent {
<transition name="activity-content" mode="out-in">
<component :is="content"></component>
</transition>
<a class="view-more" target="_blank" :href="viewMoreUrl">查看更多<i class="mdi mdi-more"></i></a>
<a class="view-more" target="_blank" :href="viewMoreUrl">查看更多<i class="mdi mdi-dots-horizontal-circle-outline"></i></a>
</div>
</div>
`;
@ -972,30 +972,6 @@ class Activities extends NavbarComponent {
this.setNotifyCount(json.data.update_num)
}
async init () {
Vue.component('dpi-img', {
template: /*html*/`<img :width="width" :height="height" :srcset="srcset" :src="src">`,
props: ['size', 'src'],
computed: {
srcset () {
if (!this.src || !this.size) {
return null
}
return getDpiSourceSet(this.src, this.size)
},
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
}
},
})
Vue.component('activity-loading', {
template: /*html*/`
<div v-if="loading" class="loading">
@ -1056,8 +1032,8 @@ class Activities extends NavbarComponent {
<div class="tab-name">{{item.name}}</div>
</li>
<a class="view-all" target="_blank" href="https://t.bilibili.com/">
<i class="custom-navbar-iconfont-new-home custom-navbar-icon-activity"></i>
全部动态
<i class="custom-navbar-iconfont-new-home custom-navbar-icon-activity"></i>
</a>
</ul>
`,
@ -1449,12 +1425,137 @@ class HistoryList extends VideoList {
this.active = document.URL.replace(/\?.*$/, "") === "https://www.bilibili.com/account/history";
}
}
class Subscriptions extends NavbarComponent {
constructor () {
super()
this.noPadding = true
this.href = `https://space.bilibili.com/${userInfo.mid}/bangumi`
this.html = '订阅'
this.popupHtml = /*html*/`
<div class="subscriptions">
<ul class="subscriptions-tabs">
<li class="tab" :class="{selected: bangumi}" @click="bangumi = true">追番</li>
<li class="tab" :class="{selected: !bangumi}" @click="bangumi = false">追剧</li>
<div class="tab-placeholder"></div>
<a class="view-all" :href="'https://space.bilibili.com/${userInfo.mid}/' + (bangumi ? 'bangumi' : 'cinema')">
查看更多
<i class="mdi mdi-dots-horizontal-circle-outline"></i>
</a>
</ul>
<div class="content">
<transition name="subscriptions-content" mode="out-in">
<bangumi-subscriptions v-if="bangumi"></bangumi-subscriptions>
<cinema-subscriptions v-else></cinema-subscriptions>
</transition>
</div>
</div>`
this.initialPopup = () => { this.init() }
}
async init () {
new Vue({
el: await SpinQuery.select('.custom-navbar .subscriptions'),
data: {
bangumi: true,
},
components: {
'bangumi-subscriptions': {
template: /*html*/`
<div class="bangumi-subscriptions">
<div v-if="loading" class="loading">
<i class="mdi mdi-18px mdi-loading mdi-spin"></i>
加载中...
</div>
<a v-else v-for="card of cards" :href="card.playUrl" target="_blank" class="bangumi-subscriptions-card">
<dpi-img class="cover" :src="card.coverUrl" :size="{height: 64}"></dpi-img>
<div class="card-info">
<h1 class="title">{{card.title}}</h1>
<div class="progress-row">
<div class="progress">{{card.progress}} | {{card.latest}}</div>
<a class="info" :href="card.mediaUrl" target="_blank" title="详细信息">
<i class="mdi mdi-information-outline"></i>
</a>
</div>
</div>
</a>
</div>
`,
data () {
return {
loading: true,
cards: [],
}
},
async mounted () {
try {
const json = await Ajax.getJsonWithCredentials(`https://api.bilibili.com/x/space/bangumi/follow/list?type=1&pn=1&ps=16&vmid=${userInfo.mid}`)
if (json.code !== 0) {
logError(`加载追番信息失败: ${json.message}`)
return
}
this.cards = json.data.list.map(item => {
console.log(item)
return {
title: item.title,
coverUrl: item.square_cover.replace('http:', 'https:'),
latest: item.new_ep.index_show,
progress: item.progress,
playUrl: `https://www.bilibili.com/bangumi/play/ss${item.season_id}`,
mediaUrl: `https://www.bilibili.com/bangumi/media/md${item.media_id}`,
}
})
} finally {
this.loading = false
}
},
},
'cinema-subscriptions': {
template: /*html*/``,
data () {
return {
cards: []
}
},
async mounted () {
},
},
},
})
}
get name () {
return 'bangumi';
}
}
(async () => {
const html = await import("customNavbarHtml");
const json = await Ajax.getJsonWithCredentials("https://api.bilibili.com/x/web-interface/nav");
userInfo = json.data;
latestID = Activities.getLatestID()
Vue.component('dpi-img', {
template: /*html*/`<img :width="width" :height="height" :srcset="srcset" :src="src" :style="{filter: blur ? 'blur(' + blur + 'px)' : undefined}">`,
props: ['size', 'src', 'blur'],
computed: {
srcset () {
if (!this.src || !this.size) {
return null
}
return getDpiSourceSet(this.src, this.size)
},
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
}
},
})
document.body.insertAdjacentHTML("beforeend", html);
addSettingsListener("useDarkStyle", darkHandler);
darkHandler(settings.useDarkStyle);
@ -1504,7 +1605,8 @@ class HistoryList extends VideoList {
if (userInfo.isLogin) {
components.push(
new Messages,
new SimpleLink('订阅', `https://space.bilibili.com/${userInfo.mid}/bangumi`, 'bangumi'),
// new SimpleLink('订阅', `https://space.bilibili.com/${userInfo.mid}/bangumi`, 'bangumi'),
new Subscriptions,
new Activities,
new WatchlaterList,
new FavoritesList,