Improve styles

This commit is contained in:
the1812 2019-08-08 20:33:40 +08:00
parent 87e22bd8cd
commit 5397fb42f7
13 changed files with 195 additions and 52 deletions

View File

@ -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

View File

@ -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

View File

@ -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

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

1
min/watchlater-api.min.js vendored Normal file
View 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}}}})();

View File

@ -664,5 +664,11 @@ Resource.manifest = {
magicGrid: 'Magic Grid',
},
},
watchlaterApi: {
path: 'watchlater-api.min.js',
displayNames: {
toggleWatchlater: '稍后再看API',
},
},
}
export const resourceManifest = Resource.manifest

View File

@ -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')}`
}

View File

@ -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);

View File

@ -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 () {

View 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,
},
}