mirror of
https://github.com/the1812/Bilibili-Evolved.git
synced 2025-11-04 21:22:45 +08:00
Merge pull request #4587 from oxygenkun/preview-features
[组件-直播信息扩充]feat: use new live feeds api and add reorder post-process
This commit is contained in:
commit
89cae81577
@ -109,20 +109,65 @@ export default Vue.extend({
|
|||||||
try {
|
try {
|
||||||
this.items = []
|
this.items = []
|
||||||
this.loaded = false
|
this.loaded = false
|
||||||
const pageSize = 24
|
const [, promise] = responsiveGetPages<LiveInfo>({
|
||||||
const [promise] = responsiveGetPages<LiveInfo>({
|
|
||||||
api: page =>
|
api: page =>
|
||||||
getJsonWithCredentials(
|
getJsonWithCredentials(
|
||||||
`https://api.live.bilibili.com/relation/v1/feed/feed_list?page=${page}&pagesize=${pageSize}`,
|
`https://api.live.bilibili.com/xlive/web-ucenter/v1/xfetter/GetWebList?page=${page}`,
|
||||||
),
|
),
|
||||||
getList: json => lodash.get(json, 'data.list', []),
|
getList: json =>
|
||||||
getTotal: json => lodash.get(json, 'data.results', 0),
|
lodash.get(json, 'data.list', []).map(item => {
|
||||||
|
const { face, uname, title, room_id, cover_from_user, online, uid, link } = item
|
||||||
|
return {
|
||||||
|
cover: face,
|
||||||
|
face,
|
||||||
|
uname,
|
||||||
|
title,
|
||||||
|
roomid: room_id,
|
||||||
|
pic: cover_from_user,
|
||||||
|
online,
|
||||||
|
uid,
|
||||||
|
link,
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
getTotal: json => lodash.get(json, 'data.count', 0),
|
||||||
})
|
})
|
||||||
this.items = await promise
|
|
||||||
|
const [allItems, recommendItems] = await Promise.all([promise, this.fetchRecommendItems()])
|
||||||
|
this.items = this.sortByRecommend(allItems, recommendItems)
|
||||||
} finally {
|
} finally {
|
||||||
this.loaded = true
|
this.loaded = true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
async fetchRecommendItems(): Promise<LiveInfo[]> {
|
||||||
|
// 动态portal接口会获取推荐的top30直播。同时这个接口不会忽略悄悄关注的up的直播。
|
||||||
|
const portalList = await getJsonWithCredentials(
|
||||||
|
'https://api.bilibili.com/x/polymer/web-dynamic/v1/portal',
|
||||||
|
)
|
||||||
|
const recommendLiveItems = portalList.data.live_users.items.map(item => {
|
||||||
|
const { jump_url, room_id, face, title, uname, mid } = item
|
||||||
|
return {
|
||||||
|
cover: face,
|
||||||
|
face,
|
||||||
|
uname,
|
||||||
|
title,
|
||||||
|
roomid: room_id,
|
||||||
|
pic: '', // portal接口没有
|
||||||
|
online: 0, // portal接口没有
|
||||||
|
uid: mid,
|
||||||
|
link: jump_url,
|
||||||
|
}
|
||||||
|
})
|
||||||
|
return recommendLiveItems
|
||||||
|
},
|
||||||
|
|
||||||
|
sortByRecommend(feedItems: LiveInfo[], recommendItems: LiveInfo[]) {
|
||||||
|
// recommendItems里的pic和online为默认值,但是ui也没用到。
|
||||||
|
// 所以方便起见,直接拼接没出现在recommendItems里的item
|
||||||
|
const recommendRoomIds = recommendItems.map(item => item.roomid)
|
||||||
|
const feedConcatItems = feedItems.filter(item => !recommendRoomIds.includes(item.roomid))
|
||||||
|
return lodash.concat(recommendItems, feedConcatItems)
|
||||||
|
},
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
@ -136,96 +181,119 @@ export default Vue.extend({
|
|||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #000;
|
color: #000;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
|
|
||||||
body.dark & {
|
body.dark & {
|
||||||
background-color: #444;
|
background-color: #444;
|
||||||
color: #eee;
|
color: #eee;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-header {
|
&-header {
|
||||||
@include h-center();
|
@include h-center();
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-title {
|
&-title {
|
||||||
@include h-center(4px);
|
@include h-center(4px);
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-count {
|
&-count {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-actions {
|
&-actions {
|
||||||
@include h-center(4px);
|
@include h-center(4px);
|
||||||
}
|
}
|
||||||
|
|
||||||
&-refresh {
|
&-refresh {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
padding: 2px;
|
padding: 2px;
|
||||||
|
|
||||||
.be-icon {
|
.be-icon {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
transition: 0.35s ease-out;
|
transition: 0.35s ease-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover .be-icon {
|
&:hover .be-icon {
|
||||||
transform: rotate(360deg);
|
transform: rotate(360deg);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
color: var(--theme-color);
|
color: var(--theme-color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&-more {
|
&-more {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
padding: 2px;
|
padding: 2px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
@include h-center();
|
@include h-center();
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
color: var(--theme-color);
|
color: var(--theme-color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&-search {
|
&-search {
|
||||||
@include h-center(8px);
|
@include h-center(8px);
|
||||||
|
|
||||||
.be-icon {
|
.be-icon {
|
||||||
opacity: 0.6;
|
opacity: 0.6;
|
||||||
}
|
}
|
||||||
|
|
||||||
.be-textbox {
|
.be-textbox {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&-content {
|
&-content {
|
||||||
@include no-scrollbar();
|
@include no-scrollbar();
|
||||||
@include v-stretch(8px);
|
@include v-stretch(8px);
|
||||||
// 默认状态
|
// 默认状态
|
||||||
max-height: calc(100vh - 358px);
|
max-height: calc(100vh - 358px);
|
||||||
|
|
||||||
// 开启过滤器
|
// 开启过滤器
|
||||||
body.enable-feeds-filter & {
|
body.enable-feeds-filter & {
|
||||||
max-height: calc(100vh - 414px);
|
max-height: calc(100vh - 414px);
|
||||||
}
|
}
|
||||||
|
|
||||||
// 禁掉 profile 后
|
// 禁掉 profile 后
|
||||||
body.feeds-filter-side-block-profile & {
|
body.feeds-filter-side-block-profile & {
|
||||||
max-height: calc(100vh - 218px);
|
max-height: calc(100vh - 218px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&-item {
|
&-item {
|
||||||
@include h-center(8px);
|
@include h-center(8px);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
&-avatar {
|
&-avatar {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
display: flex;
|
display: flex;
|
||||||
border: 1px solid #8884;
|
border: 1px solid #8884;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-info {
|
&-info {
|
||||||
@include v-stretch(2px);
|
@include v-stretch(2px);
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
width: 0;
|
width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-title,
|
&-title,
|
||||||
&-user {
|
&-user {
|
||||||
@include single-line();
|
@include single-line();
|
||||||
}
|
}
|
||||||
|
|
||||||
&-title {
|
&-title {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
transition: 0.2s ease-out;
|
transition: 0.2s ease-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-user {
|
&-user {
|
||||||
opacity: 0.6;
|
opacity: 0.6;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover &-title {
|
&:hover &-title {
|
||||||
color: var(--theme-color);
|
color: var(--theme-color);
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user