Add <dpi-img>

This commit is contained in:
the1812 2019-08-09 12:47:23 +08:00
parent d21456dc78
commit e65ebdcef6
8 changed files with 98 additions and 8 deletions

View File

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

View File

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

View File

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

File diff suppressed because one or more lines are too long

View File

@ -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(",")
}

View File

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