teutat3s/elk
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

fix(ui): use small images + srcsets (#254)

Browse source
This commit is contained in:
Daniel Roe 2022-11-30 17:19:35 +00:00 committed by GitHub
parent 4ed1816806
commit e76127651a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 12 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
components/status/StatusAttachment.vue
View file

@ -7,7 +7,11 @@ const { attachment } = defineProps<{
attachments?: Attachment[]
}>()
const src = $computed(() => attachment.remoteUrl || attachment.url || attachment.previewUrl!)
const src = $computed(() => attachment.previewUrl || attachment.url || attachment.remoteUrl!)
const srcset = $computed(() => [
[src, attachment.meta?.original?.width],
[attachment.previewUrl, attachment.meta?.small?.width],
].filter(([url]) => url).map(([url, size]) => `${url} ${size}w`).join(', '))
const rawAspectRatio = computed(() => {
if (attachment.meta?.original?.aspect)
@ -31,6 +35,8 @@ const aspectRatio = computed(() => {
controls
border="~ base"
object-cover
:width="attachment.meta?.original?.width"
:height="attachment.meta?.original?.height"
:style="{
aspectRatio,
}"
@ -45,6 +51,8 @@ const aspectRatio = computed(() => {
autoplay
border="~ base"
object-cover
:width="attachment.meta?.original?.width"
:height="attachment.meta?.original?.height"
:style="{
aspectRatio,
}"
@ -69,6 +77,9 @@ const aspectRatio = computed(() => {
:blurhash="attachment.blurhash"
class="status-attachment-image"
:src="src"
:srcset="srcset"
:width="attachment.meta?.original?.width"
:height="attachment.meta?.original?.height"
:alt="attachment.description!"
:style="{
aspectRatio,