mirror of
https://github.com/the1812/Bilibili-Evolved.git
synced 2025-11-04 21:22:45 +08:00
Add <dpi-img>
This commit is contained in:
parent
d21456dc78
commit
e65ebdcef6
1
@types/global/index.d.ts
vendored
1
@types/global/index.d.ts
vendored
@ -328,5 +328,6 @@ declare global {
|
|||||||
const formatDuration: (time: number, fixed?: number) => string
|
const formatDuration: (time: number, fixed?: number) => string
|
||||||
const ascendingSort: <T>(itemProp: (item: T) => number) => (a: T, b: T) => number
|
const ascendingSort: <T>(itemProp: (item: T) => number) => (a: T, b: T) => number
|
||||||
const descendingSort: <T>(itemProp: (item: T) => number) => (a: T, b: T) => number
|
const descendingSort: <T>(itemProp: (item: T) => number) => (a: T, b: T) => number
|
||||||
|
const getDpiSourceSet: (src: string, baseSize: number | string | { width?: number | string, height?: number | string }, extension?: string) => string
|
||||||
}
|
}
|
||||||
export { };
|
export { };
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -130,6 +130,22 @@ const formatDuration = (time, fixed = 0) => {
|
|||||||
}
|
}
|
||||||
return `${hour}:${minute.padStart(2, '0')}:${second.padStart(2, '0')}`
|
return `${hour}:${minute.padStart(2, '0')}:${second.padStart(2, '0')}`
|
||||||
}
|
}
|
||||||
|
const getDpiSourceSet = (src, baseSize, extension = 'jpg') => {
|
||||||
|
const dpis = [1, 1.25, 1.5, 1.75, 2, 2.25, 2.5, 2.75, 3, 3.25, 3.5, 3.75, 4]
|
||||||
|
return dpis.map(dpi => {
|
||||||
|
if (typeof baseSize === 'object') {
|
||||||
|
if ('width' in baseSize && 'height' in baseSize) {
|
||||||
|
return `${src}@${Math.trunc(baseSize.width * dpi)}w_${Math.trunc(baseSize.height * dpi)}h.${extension} ${dpi}x`
|
||||||
|
} else if ('width' in baseSize) {
|
||||||
|
return `${src}@${Math.trunc(baseSize.width * dpi)}w.${extension} ${dpi}x`
|
||||||
|
} else if ('width' in baseSize) {
|
||||||
|
return `${src}@${Math.trunc(baseSize.height * dpi)}h.${extension} ${dpi}x`
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
return `${src}@${Math.trunc(baseSize * dpi)}w_${Math.trunc(baseSize * dpi)}h.${extension} ${dpi}x`
|
||||||
|
}
|
||||||
|
}).join(",")
|
||||||
|
}
|
||||||
|
|
||||||
const customNavbarDefaultOrders = {
|
const customNavbarDefaultOrders = {
|
||||||
blank1: 0,
|
blank1: 0,
|
||||||
|
|||||||
@ -130,6 +130,22 @@ const formatDuration = (time, fixed = 0) => {
|
|||||||
}
|
}
|
||||||
return `${hour}:${minute.padStart(2, '0')}:${second.padStart(2, '0')}`
|
return `${hour}:${minute.padStart(2, '0')}:${second.padStart(2, '0')}`
|
||||||
}
|
}
|
||||||
|
const getDpiSourceSet = (src, baseSize, extension = 'jpg') => {
|
||||||
|
const dpis = [1, 1.25, 1.5, 1.75, 2, 2.25, 2.5, 2.75, 3, 3.25, 3.5, 3.75, 4]
|
||||||
|
return dpis.map(dpi => {
|
||||||
|
if (typeof baseSize === 'object') {
|
||||||
|
if ('width' in baseSize && 'height' in baseSize) {
|
||||||
|
return `${src}@${Math.trunc(baseSize.width * dpi)}w_${Math.trunc(baseSize.height * dpi)}h.${extension} ${dpi}x`
|
||||||
|
} else if ('width' in baseSize) {
|
||||||
|
return `${src}@${Math.trunc(baseSize.width * dpi)}w.${extension} ${dpi}x`
|
||||||
|
} else if ('width' in baseSize) {
|
||||||
|
return `${src}@${Math.trunc(baseSize.height * dpi)}h.${extension} ${dpi}x`
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
return `${src}@${Math.trunc(baseSize * dpi)}w_${Math.trunc(baseSize * dpi)}h.${extension} ${dpi}x`
|
||||||
|
}
|
||||||
|
}).join(",")
|
||||||
|
}
|
||||||
|
|
||||||
const customNavbarDefaultOrders = {
|
const customNavbarDefaultOrders = {
|
||||||
blank1: 0,
|
blank1: 0,
|
||||||
|
|||||||
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
@ -105,3 +105,19 @@ export const formatDuration = (time, fixed = 0) => {
|
|||||||
}
|
}
|
||||||
return `${hour}:${minute.padStart(2, '0')}:${second.padStart(2, '0')}`
|
return `${hour}:${minute.padStart(2, '0')}:${second.padStart(2, '0')}`
|
||||||
}
|
}
|
||||||
|
export const getDpiSourceSet = (src, baseSize, extension = 'jpg') => {
|
||||||
|
const dpis = [1, 1.25, 1.5, 1.75, 2, 2.25, 2.5, 2.75, 3, 3.25, 3.5, 3.75, 4]
|
||||||
|
return dpis.map(dpi => {
|
||||||
|
if (typeof baseSize === 'object') {
|
||||||
|
if ('width' in baseSize && 'height' in baseSize) {
|
||||||
|
return `${src}@${Math.trunc(baseSize.width * dpi)}w_${Math.trunc(baseSize.height * dpi)}h.${extension} ${dpi}x`
|
||||||
|
} else if ('width' in baseSize) {
|
||||||
|
return `${src}@${Math.trunc(baseSize.width * dpi)}w.${extension} ${dpi}x`
|
||||||
|
} else if ('width' in baseSize) {
|
||||||
|
return `${src}@${Math.trunc(baseSize.height * dpi)}h.${extension} ${dpi}x`
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
return `${src}@${Math.trunc(baseSize * dpi)}w_${Math.trunc(baseSize * dpi)}h.${extension} ${dpi}x`
|
||||||
|
}
|
||||||
|
}).join(",")
|
||||||
|
}
|
||||||
|
|||||||
@ -914,6 +914,15 @@ class Activities extends NavbarComponent {
|
|||||||
|
|
||||||
}
|
}
|
||||||
async init () {
|
async init () {
|
||||||
|
Vue.component('dpi-img', {
|
||||||
|
template: /*html*/`<img :srcset="srcset">`,
|
||||||
|
props: ['size', 'src'],
|
||||||
|
computed: {
|
||||||
|
srcset() {
|
||||||
|
return getDpiSourceSet(this.src, this.size)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
})
|
||||||
this.popupVM = new Vue({
|
this.popupVM = new Vue({
|
||||||
el: await SpinQuery.select('.activity-popup'),
|
el: await SpinQuery.select('.activity-popup'),
|
||||||
data: {
|
data: {
|
||||||
@ -968,13 +977,13 @@ class Activities extends NavbarComponent {
|
|||||||
template: /*html*/`
|
template: /*html*/`
|
||||||
<a class="video-activity-card" target="_blank" :href="card.videoUrl">
|
<a class="video-activity-card" target="_blank" :href="card.videoUrl">
|
||||||
<div class="cover-container">
|
<div class="cover-container">
|
||||||
<img class="cover" :src="card.coverUrl">
|
<dpi-img class="cover" :size="{width: 172}" :src="card.coverUrl"></dpi-img>
|
||||||
<div class="time">{{card.time}}</div>
|
<div class="time">{{card.time}}</div>
|
||||||
<div @click.stop.prevent="toggleWatchlater()" class="watchlater"><i class="mdi" :class="{'mdi-clock-outline': !watchlater, 'mdi-check-circle': watchlater}"></i>{{watchlater ? '已添加' : '稍后再看'}}</div>
|
<div @click.stop.prevent="toggleWatchlater()" class="watchlater"><i class="mdi" :class="{'mdi-clock-outline': !watchlater, 'mdi-check-circle': watchlater}"></i>{{watchlater ? '已添加' : '稍后再看'}}</div>
|
||||||
</div>
|
</div>
|
||||||
<h1 class="title" :title="card.description">{{card.title}}</h1>
|
<h1 class="title" :title="card.description">{{card.title}}</h1>
|
||||||
<a class="up" target="_blank" :href="card.upUrl" :title="card.upName">
|
<a class="up" target="_blank" :href="card.upUrl" :title="card.upName">
|
||||||
<img class="face" :src="card.faceUrl">
|
<dpi-img class="face" :size="24" :src="card.faceUrl"></dpi-img>
|
||||||
<span class="name">{{card.upName}}</span>
|
<span class="name">{{card.upName}}</span>
|
||||||
</a>
|
</a>
|
||||||
</a>
|
</a>
|
||||||
@ -1052,7 +1061,7 @@ class Activities extends NavbarComponent {
|
|||||||
<i class="mdi mdi-18px mdi-loading mdi-spin"></i>加载中...
|
<i class="mdi mdi-18px mdi-loading mdi-spin"></i>加载中...
|
||||||
</div>
|
</div>
|
||||||
<a v-else class="bangumi-card" v-for="card of cards" :key="card.id" target="_blank" :href="card.url">
|
<a v-else class="bangumi-card" v-for="card of cards" :key="card.id" target="_blank" :href="card.url">
|
||||||
<img class="ep-cover" :src="card.epCoverUrl">
|
<dpi-img class="ep-cover" :size="{width: 100}" :src="card.epCoverUrl"></dpi-img>
|
||||||
<h1 class="ep-title">{{card.epTitle}}</h1>
|
<h1 class="ep-title">{{card.epTitle}}</h1>
|
||||||
<div class="title">{{card.title}}</div>
|
<div class="title">{{card.title}}</div>
|
||||||
</a>
|
</a>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user