mirror of
https://github.com/the1812/Bilibili-Evolved.git
synced 2025-11-04 21:22:45 +08:00
Improve styles
This commit is contained in:
parent
87e22bd8cd
commit
5397fb42f7
2
@types/global/index.d.ts
vendored
2
@types/global/index.d.ts
vendored
@ -325,7 +325,7 @@ declare global {
|
||||
const dq: (selector: string) => Element | null;
|
||||
const dqa: (selector: string) => Element[];
|
||||
const formatFileSize: (bytes: number, fixed?: number) => string
|
||||
const formatDuration: (time: number) => string
|
||||
const formatDuration: (time: number, fixed?: number) => string
|
||||
const ascendingSort: <T>(itemProp: (item: T) => number) => (a: T, b: T) => number
|
||||
const descendingSort: <T>(itemProp: (item: T) => number) => (a: T, b: T) => number
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -121,14 +121,14 @@ const formatFileSize = (bytes, fixed = 1) => {
|
||||
}
|
||||
return `${Math.round(number * (10 ** fixed)) / (10 ** fixed)}${units[unitIndex]}`
|
||||
}
|
||||
const formatDuration = (time) => {
|
||||
const formatDuration = (time, fixed = 0) => {
|
||||
const hour = Math.trunc(time / 3600).toString()
|
||||
const minute = Math.trunc(time / 60).toString()
|
||||
const second = (time % 60).toFixed(2)
|
||||
const second = (time % 60).toFixed(fixed)
|
||||
if (hour === '0') {
|
||||
return `${minute.padStart(2, '0')}:${second.padStart(5, '0')}`
|
||||
return `${minute.padStart(2, '0')}:${second.padStart(2, '0')}`
|
||||
}
|
||||
return `${hour}:${minute.padStart(2, '0')}:${second.padStart(5, '0')}`
|
||||
return `${hour}:${minute.padStart(2, '0')}:${second.padStart(2, '0')}`
|
||||
}
|
||||
|
||||
const customNavbarDefaultOrders = {
|
||||
@ -1872,6 +1872,12 @@ Resource.manifest = {
|
||||
magicGrid: 'Magic Grid',
|
||||
},
|
||||
},
|
||||
watchlaterApi: {
|
||||
path: 'watchlater-api.min.js',
|
||||
displayNames: {
|
||||
toggleWatchlater: '稍后再看API',
|
||||
},
|
||||
},
|
||||
}
|
||||
const resourceManifest = Resource.manifest
|
||||
|
||||
|
||||
@ -121,14 +121,14 @@ const formatFileSize = (bytes, fixed = 1) => {
|
||||
}
|
||||
return `${Math.round(number * (10 ** fixed)) / (10 ** fixed)}${units[unitIndex]}`
|
||||
}
|
||||
const formatDuration = (time) => {
|
||||
const formatDuration = (time, fixed = 0) => {
|
||||
const hour = Math.trunc(time / 3600).toString()
|
||||
const minute = Math.trunc(time / 60).toString()
|
||||
const second = (time % 60).toFixed(2)
|
||||
const second = (time % 60).toFixed(fixed)
|
||||
if (hour === '0') {
|
||||
return `${minute.padStart(2, '0')}:${second.padStart(5, '0')}`
|
||||
return `${minute.padStart(2, '0')}:${second.padStart(2, '0')}`
|
||||
}
|
||||
return `${hour}:${minute.padStart(2, '0')}:${second.padStart(5, '0')}`
|
||||
return `${hour}:${minute.padStart(2, '0')}:${second.padStart(2, '0')}`
|
||||
}
|
||||
|
||||
const customNavbarDefaultOrders = {
|
||||
@ -1872,6 +1872,12 @@ Resource.manifest = {
|
||||
magicGrid: 'Magic Grid',
|
||||
},
|
||||
},
|
||||
watchlaterApi: {
|
||||
path: 'watchlater-api.min.js',
|
||||
displayNames: {
|
||||
toggleWatchlater: '稍后再看API',
|
||||
},
|
||||
},
|
||||
}
|
||||
const resourceManifest = Resource.manifest
|
||||
|
||||
|
||||
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
1
min/watchlater-api.min.js
vendored
Normal file
1
min/watchlater-api.min.js
vendored
Normal file
@ -0,0 +1 @@
|
||||
(()=>{return(t,i)=>{const e=async(t,i)=>{const e=i?"https://api.bilibili.com/x/v2/history/toview/add":"https://api.bilibili.com/x/v2/history/toview/del";const s=document.cookie.replace(/(?:(?:^|.*\s*)bili_jct\s*\=\s*([^]*).*$)|^.*$/,"$1");const a=await Ajax.postTextWithCredentials(e,`aid=${t}&csrf=${s}`);const o=JSON.parse(a);if(o.code!==0){throw new Error(`稍后再看操作失败: ${o.message}`)}};const s=async(t=false)=>{const i=`https://api.bilibili.com/x/v2/history/toview/web`;const e=await Ajax.getJsonWithCredentials(i);if(e.code!==0){throw new Error(`获取稍后再看列表失败: ${e.message}`)}if(t===true){return e.data}return e.data.list.map(t=>t.aid)};return{export:{toggleWatchlater:e,getWatchlaterList:s}}}})();
|
||||
@ -664,5 +664,11 @@ Resource.manifest = {
|
||||
magicGrid: 'Magic Grid',
|
||||
},
|
||||
},
|
||||
watchlaterApi: {
|
||||
path: 'watchlater-api.min.js',
|
||||
displayNames: {
|
||||
toggleWatchlater: '稍后再看API',
|
||||
},
|
||||
},
|
||||
}
|
||||
export const resourceManifest = Resource.manifest
|
||||
|
||||
@ -96,12 +96,12 @@ export const formatFileSize = (bytes, fixed = 1) => {
|
||||
}
|
||||
return `${Math.round(number * (10 ** fixed)) / (10 ** fixed)}${units[unitIndex]}`
|
||||
}
|
||||
export const formatDuration = (time) => {
|
||||
export const formatDuration = (time, fixed = 0) => {
|
||||
const hour = Math.trunc(time / 3600).toString()
|
||||
const minute = Math.trunc(time / 60).toString()
|
||||
const second = (time % 60).toFixed(2)
|
||||
const second = (time % 60).toFixed(fixed)
|
||||
if (hour === '0') {
|
||||
return `${minute.padStart(2, '0')}:${second.padStart(5, '0')}`
|
||||
return `${minute.padStart(2, '0')}:${second.padStart(2, '0')}`
|
||||
}
|
||||
return `${hour}:${minute.padStart(2, '0')}:${second.padStart(5, '0')}`
|
||||
return `${hour}:${minute.padStart(2, '0')}:${second.padStart(2, '0')}`
|
||||
}
|
||||
|
||||
@ -1095,9 +1095,16 @@ li.nav-item[report-id='playpage_dynamic'] .i-frame,
|
||||
}
|
||||
.custom-navbar .activity-tabs {
|
||||
display: flex;
|
||||
padding: 16px 0;
|
||||
padding: 16px 12px 16px 18px;
|
||||
justify-content: space-evenly;
|
||||
align-items: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
.custom-navbar .activity-tabs .view-all {
|
||||
background-color: #8882;
|
||||
padding: 4px 10px;
|
||||
height: 28px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 14px;
|
||||
}
|
||||
.custom-navbar .activity-tab {
|
||||
opacity: 0.5;
|
||||
@ -1111,19 +1118,17 @@ li.nav-item[report-id='playpage_dynamic'] .i-frame,
|
||||
}
|
||||
.custom-navbar .activity-tab::after {
|
||||
content: "";
|
||||
width: calc(100% + 12px);
|
||||
width: calc(80%);
|
||||
height: 2px;
|
||||
border-radius: 1px;
|
||||
position: absolute;
|
||||
background-color: var(--theme-color);
|
||||
left: -6px;
|
||||
bottom: -6px;
|
||||
max-height: 0;
|
||||
max-width: 0;
|
||||
left: 10%;
|
||||
bottom: -4px;
|
||||
transform: scaleX(0);
|
||||
}
|
||||
.custom-navbar .activity-tab.selected::after {
|
||||
max-height: unset;
|
||||
max-width: unset;
|
||||
transform: scaleX(1);
|
||||
}
|
||||
.custom-navbar .activity-popup-content {
|
||||
overflow: auto;
|
||||
@ -1143,23 +1148,21 @@ li.nav-item[report-id='playpage_dynamic'] .i-frame,
|
||||
justify-content: center;
|
||||
padding: 8px 16px;
|
||||
background-color: #fffe;
|
||||
margin-top: 8px;
|
||||
transform: translateY(-6px);
|
||||
box-shadow: rgba(0,0,0,0.12) 0 4px 8px 0px;
|
||||
cursor: pointer;
|
||||
height: 36px;
|
||||
border-radius: 18px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.custom-navbar .activity-popup-content .view-more:hover {
|
||||
background-color: #fff;
|
||||
transform: translateY(-6px) scale(1.1);
|
||||
}
|
||||
.custom-navbar.dark .activity-popup-content .view-more {
|
||||
background-color: #000e;
|
||||
background-color: #333e;
|
||||
}
|
||||
.custom-navbar.dark .activity-popup-content .view-more:hover {
|
||||
background-color: #000;
|
||||
transform: translateY(-6px) scale(1.1);
|
||||
background-color: #333;
|
||||
}
|
||||
.custom-navbar .activity-popup-content .view-more .mdi {
|
||||
line-height: 1;
|
||||
@ -1191,8 +1194,10 @@ li.nav-item[report-id='playpage_dynamic'] .i-frame,
|
||||
font-size: 10pt;
|
||||
font-weight: bold;
|
||||
margin: 8px;
|
||||
color: inherit;
|
||||
}
|
||||
.custom-navbar .video-activity-card:hover .title {
|
||||
.custom-navbar .video-activity-card .title:hover,
|
||||
.custom-navbar .video-activity-card .up:hover .name {
|
||||
color: var(--theme-color);
|
||||
}
|
||||
.custom-navbar .video-activity-card .up {
|
||||
@ -1200,11 +1205,49 @@ li.nav-item[report-id='playpage_dynamic'] .i-frame,
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 8px;
|
||||
border-radius: 13px;
|
||||
padding: 2px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
.custom-navbar .video-activity-card .up:hover {
|
||||
background-color: #8882;
|
||||
}
|
||||
.custom-navbar .video-activity-card .up .face {
|
||||
width: 24px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.custom-navbar .video-activity-card .cover-container {
|
||||
position: relative;
|
||||
}
|
||||
.custom-navbar .video-activity-card .time,
|
||||
.custom-navbar .video-activity-card .watchlater {
|
||||
position: absolute;
|
||||
bottom: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #000a;
|
||||
color: #fff;
|
||||
padding: 0 8px;
|
||||
height: 20px;
|
||||
border-radius: 10px;
|
||||
box-sizing: border-box;
|
||||
opacity: 0;
|
||||
}
|
||||
.custom-navbar .video-activity-card:hover .time,
|
||||
.custom-navbar .video-activity-card:hover .watchlater {
|
||||
opacity: 1;
|
||||
}
|
||||
.custom-navbar .video-activity-card .time {
|
||||
left: 4px;
|
||||
}
|
||||
.custom-navbar .video-activity-card .watchlater {
|
||||
right: 4px;
|
||||
}
|
||||
.custom-navbar .video-activity-card .watchlater .mdi {
|
||||
line-height: 1;
|
||||
margin-right: 4px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.round-corner .custom-navbar .video-activity-card {
|
||||
border-radius: var(--large-corner-radius);
|
||||
|
||||
@ -900,7 +900,7 @@ class Activities extends NavbarComponent {
|
||||
<column-activity v-if="selectedTab === '专栏'"></column-activity>
|
||||
<photos-activity v-if="selectedTab === '图片'"></photos-activity>
|
||||
<live-activity v-if="selectedTab === '直播'"></live-activity>
|
||||
<div class="view-more">查看更多<i class="mdi mdi-18px mdi-more"></i></div>
|
||||
<a class="view-more" target="_blank" :href="viewMoreUrl">查看更多<i class="mdi mdi-18px mdi-more"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@ -932,6 +932,7 @@ class Activities extends NavbarComponent {
|
||||
template: /*html*/`
|
||||
<ul class="activity-tabs">
|
||||
<li v-for="item of items" class="activity-tab" :class="{selected: item === tab}" @click="changeTab(item)">{{item}}</li>
|
||||
<a class="view-all" target="_blank" href="https://t.bilibili.com/">全部动态</a>
|
||||
</ul>
|
||||
`,
|
||||
methods: {
|
||||
@ -943,11 +944,36 @@ class Activities extends NavbarComponent {
|
||||
'video-activity': {
|
||||
components: {
|
||||
'video-card': {
|
||||
props: ['card'],
|
||||
props: ['card', 'watchlaterInit'],
|
||||
data() {
|
||||
return {
|
||||
watchlater: this.watchlaterInit,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async toggleWatchlater() {
|
||||
try {
|
||||
const { toggleWatchlater } = await import('../../video/watchlater-api')
|
||||
if (this.watchlater === false) {
|
||||
await toggleWatchlater(this.card.aid, true)
|
||||
} else {
|
||||
await toggleWatchlater(this.card.aid, false)
|
||||
}
|
||||
this.watchlater = !this.watchlater
|
||||
} catch (error) {
|
||||
logError(`稍后再看操作失败: ${error}`)
|
||||
}
|
||||
},
|
||||
},
|
||||
template: /*html*/`
|
||||
<a class="video-activity-card" target="_blank" :href="card.videoUrl">
|
||||
<div class="cover-container">
|
||||
<img class="cover" :src="card.coverUrl">
|
||||
<h1 class="title">{{card.title}}</h1>
|
||||
<div class="time">{{card.time}}</div>
|
||||
<div v-if="!watchlater" @click.stop.prevent="toggleWatchlater()" class="watchlater"><i class="mdi mdi-clock-outline"></i>稍后再看</div>
|
||||
<div v-else @click.stop.prevent="toggleWatchlater()" class="watchlater"><i class="mdi mdi-clock"></i>已添加</div>
|
||||
</div>
|
||||
<h1 class="title" :title="card.description">{{card.title}}</h1>
|
||||
<a class="up" target="_blank" :href="card.upUrl">
|
||||
<img class="face" :src="card.faceUrl">
|
||||
<span class="name">{{card.upName}}</span>
|
||||
@ -960,10 +986,10 @@ class Activities extends NavbarComponent {
|
||||
<div class="video-activity">
|
||||
<div v-if="loading" class="loading">加载中...</div>
|
||||
<div v-if="!loading" class="video-activity-column">
|
||||
<video-card v-for="card of leftCards" :key="card.id" :card="card"></video-card>
|
||||
<video-card v-for="card of leftCards" :key="card.id" :card="card" :watchlaterInit="card.watchlater"></video-card>
|
||||
</div>
|
||||
<div v-if="!loading" class="video-activity-column">
|
||||
<video-card v-for="card of rightCards" :key="card.id" :card="card"></video-card>
|
||||
<video-card v-for="card of rightCards" :key="card.id" :card="card" :watchlaterInit="card.watchlater"></video-card>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
@ -981,6 +1007,8 @@ class Activities extends NavbarComponent {
|
||||
if (json.code !== 0) {
|
||||
throw new Error(json.message)
|
||||
}
|
||||
const { getWatchlaterList } = await import('../../video/watchlater-api')
|
||||
const watchlaterList = await getWatchlaterList()
|
||||
const cards = json.data.cards.map(card => {
|
||||
const cardJson = JSON.parse(card.card)
|
||||
let topics
|
||||
@ -995,12 +1023,14 @@ class Activities extends NavbarComponent {
|
||||
timeNumber: cardJson.duration,
|
||||
time: formatDuration(cardJson.duration),
|
||||
description: cardJson.desc,
|
||||
aid: cardJson.aid,
|
||||
videoUrl: `https://www.bilibili.com/av${cardJson.aid}`,
|
||||
faceUrl: card.desc.user_profile.info.face,
|
||||
upName: card.desc.user_profile.info.uname,
|
||||
upUrl: `https://space.bilibili.com/${card.desc.user_profile.info.uid}`,
|
||||
id: card.desc.dynamic_id_str,
|
||||
topics
|
||||
topics,
|
||||
watchlater: watchlaterList.includes(cardJson.aid),
|
||||
}
|
||||
})
|
||||
this.leftCards = cards.filter((_, index) => index % 2 === 0)
|
||||
@ -1021,7 +1051,15 @@ class Activities extends NavbarComponent {
|
||||
// 'photos-activity': {},
|
||||
// 'live-activity': {},
|
||||
},
|
||||
|
||||
computed: {
|
||||
viewMoreUrl() {
|
||||
switch (this.selectedTab) {
|
||||
case '视频':
|
||||
return 'https://t.bilibili.com/?tab=8'
|
||||
default: return null
|
||||
}
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
get name () {
|
||||
|
||||
29
src/video/watchlater-api.ts
Normal file
29
src/video/watchlater-api.ts
Normal file
@ -0,0 +1,29 @@
|
||||
export const toggleWatchlater = async (aid: string, add: boolean) => {
|
||||
const api = add ? 'https://api.bilibili.com/x/v2/history/toview/add' : 'https://api.bilibili.com/x/v2/history/toview/del'
|
||||
const csrf = document.cookie.replace(/(?:(?:^|.*\s*)bili_jct\s*\=\s*([^]*).*$)|^.*$/, '$1')
|
||||
const responseText = await Ajax.postTextWithCredentials(api, `aid=${aid}&csrf=${csrf}`)
|
||||
const response = JSON.parse(responseText) as {
|
||||
code: number
|
||||
message: string
|
||||
}
|
||||
if (response.code !== 0) {
|
||||
throw new Error(`稍后再看操作失败: ${response.message}`)
|
||||
}
|
||||
}
|
||||
export const getWatchlaterList = async (raw = false) => {
|
||||
const api = `https://api.bilibili.com/x/v2/history/toview/web`
|
||||
const response = await Ajax.getJsonWithCredentials(api)
|
||||
if (response.code !== 0) {
|
||||
throw new Error(`获取稍后再看列表失败: ${response.message}`)
|
||||
}
|
||||
if (raw === true) {
|
||||
return response.data
|
||||
}
|
||||
return response.data.list.map((item: any) => item.aid)
|
||||
}
|
||||
export default {
|
||||
export: {
|
||||
toggleWatchlater,
|
||||
getWatchlaterList,
|
||||
},
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user