diff --git a/registry/lib/components/feeds/extend-live/LiveList.vue b/registry/lib/components/feeds/extend-live/LiveList.vue index 3895f3342..f73827ca2 100644 --- a/registry/lib/components/feeds/extend-live/LiveList.vue +++ b/registry/lib/components/feeds/extend-live/LiveList.vue @@ -109,20 +109,65 @@ export default Vue.extend({ try { this.items = [] this.loaded = false - const pageSize = 24 - const [promise] = responsiveGetPages({ + const [, promise] = responsiveGetPages({ api: page => 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', []), - getTotal: json => lodash.get(json, 'data.results', 0), + getList: json => + 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 { this.loaded = true } }, + + async fetchRecommendItems(): Promise { + // 动态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) + }, }, }) @@ -136,96 +181,119 @@ export default Vue.extend({ font-size: 12px; color: #000; background-color: #fff; + body.dark & { background-color: #444; color: #eee; } + &-header { @include h-center(); justify-content: space-between; } + &-title { @include h-center(4px); font-size: 14px; } + &-count { opacity: 0.5; font-size: 12px; } + &-actions { @include h-center(4px); } + &-refresh { cursor: pointer; padding: 2px; + .be-icon { opacity: 0.5; transition: 0.35s ease-out; } + &:hover .be-icon { transform: rotate(360deg); opacity: 1; color: var(--theme-color); } } + &-more { opacity: 0.5; padding: 2px; cursor: pointer; @include h-center(); + &:hover { opacity: 1; color: var(--theme-color); } } + &-search { @include h-center(8px); + .be-icon { opacity: 0.6; } + .be-textbox { flex-grow: 1; } } + &-content { @include no-scrollbar(); @include v-stretch(8px); // 默认状态 max-height: calc(100vh - 358px); + // 开启过滤器 body.enable-feeds-filter & { max-height: calc(100vh - 414px); } + // 禁掉 profile 后 body.feeds-filter-side-block-profile & { max-height: calc(100vh - 218px); } } + &-item { @include h-center(8px); cursor: pointer; + &-avatar { overflow: hidden; border-radius: 50%; display: flex; border: 1px solid #8884; } + &-info { @include v-stretch(2px); flex-grow: 1; width: 0; } + &-title, &-user { @include single-line(); } + &-title { font-size: 14px; transition: 0.2s ease-out; } + &-user { opacity: 0.6; } + &:hover &-title { color: var(--theme-color); }