Skip to content
This repository was archived by the owner on Dec 20, 2023. It is now read-only.

Commit 8f1eb7e

Browse files
stafyniaksachastafyniaksacha
committed
fix: use config in snippets
1 parent e2ac732 commit 8f1eb7e

File tree

8 files changed

+165
-118
lines changed

8 files changed

+165
-118
lines changed

‎client/components/MediaPreview.vue

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script setup lang="ts">
2-
import { computed, reactive, provide, watchEffect, watch } from 'vue'
2+
import { computed, reactive, inject, provide, watchEffect, watch } from 'vue'
33
// @ts-ignore
44
import { useRuntimeConfig, useRoute } from '#app'
55
@@ -13,6 +13,7 @@ import { vFocus } from '~~/utils/directives'
1313
const route = useRoute()
1414
const selectedAssetKey = computed(() => route.hash ? route.hash.substring(1) : '')
1515
const mvBaseURL = useRuntimeConfig().public.mvBaseURL
16+
const config = inject<any>('mediaViewerConfig')
1617
1718
// provide state to childs
1819
const previewState = reactive({
@@ -50,8 +51,8 @@ watchEffect(async () => {
5051
})
5152
5253
// refresh snippet
53-
watch(previewState, () => {
54-
previewState.snippet = generateSnippet(previewState)
54+
watch([previewState, config], () => {
55+
previewState.snippet = generateSnippet(previewState, config.value)
5556
}, { deep: true, immediate: true })
5657
5758
// prevent gallery scrolling when preview modal is open

‎client/components/MediaPreviewImage.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ watch(mode, () => {
7373
{{ previewState?.stats?.mimetype }}
7474
</div>
7575
</div>
76-
<span
76+
<div
7777
v-else-if="mode === 'real'"
7878
ref="imageRef"
7979
class="prevent-drag block absolute max-w-none origin-top-left hover:cursor-grab active:cursor-grabbing"

‎client/components/MediaPreviewStats.vue

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { inject, computed } from 'vue'
33
import prettyBytes from 'pretty-bytes'
44
import { parseISO, formatDistanceToNow } from 'date-fns'
55
6+
const config = inject<any>('mediaViewerConfig')
67
const previewState = inject<any>('previewState')
78
const hasUpdatedSize = computed(() => previewState.targetWidth !== previewState.stats.dimensions.width || previewState.targetHeight !== previewState.stats.dimensions.height)
89
@@ -34,7 +35,7 @@ function onUpdateHeight (value?: number | string) {
3435
:text="previewState?.stats?.name"
3536
:description="previewState?.stats?.mimetype"
3637
collapse
37-
open
38+
:open="false"
3839
>
3940
<div class="flex flex-col gap-6">
4041
<NCard class="p-4">

‎client/components/NSectionBlock.vue

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,7 @@ withDefaults(
1010
padding?: boolean | string
1111
}>(), {
1212
containerClass: '',
13-
open: true,
1413
padding: true,
15-
collapse: true,
1614
icon: '',
1715
description: ''
1816
}

‎client/composables/keys.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import type { MaybeComputedRef } from '@vueuse/core'
2-
import { reactive, computed, isRef, type ComputedRef } from 'vue'
2+
import { computed, isRef, type ComputedRef } from 'vue'
33
import { useRuntimeConfig } from '#app'
44
import { joinURL, withTrailingSlash } from 'ufo'
5+
import { MediaPreviewConfig } from '~~/utils/options'
56
// replace an unstorage key 'root:public:xxx' to a path '/xxx
6-
type Options = { hasIpx?: boolean, ipxMiddlewarePrefix?: string }
77

88
const mvBaseURL = useRuntimeConfig().public.mvBaseURL
99

@@ -18,7 +18,7 @@ export function keyPath (key?: string): string {
1818
)
1919
}
2020

21-
export function useKeyPath (key: MaybeComputedRef<string>, config?: MaybeComputedRef<Options | undefined | null>): ComputedRef<string> {
21+
export function useKeyPath (key: MaybeComputedRef<string>, config?: MaybeComputedRef<MediaPreviewConfig | undefined | null>): ComputedRef<string> {
2222
const keyRef = computed(() => {
2323
return typeof key === 'function' ? key() : isRef(key) ? key.value : key
2424
})
@@ -28,7 +28,7 @@ export function useKeyPath (key: MaybeComputedRef<string>, config?: MaybeCompute
2828
})
2929

3030
return computed(() => {
31-
const prefix = withTrailingSlash(joinURL(mvBaseURL, (configRef.value?.hasIpx ? configRef.value?.ipxMiddlewarePrefix : '')))
31+
const prefix = withTrailingSlash(joinURL(mvBaseURL, (configRef.value?.hasIpx && configRef.value?.ipxMiddlewarePrefix ? configRef.value.ipxMiddlewarePrefix : '')))
3232
return keyPath(keyRef.value).replace(/^\//, prefix)
3333
})
3434
}

‎client/utils/snippets/html.ts

Lines changed: 74 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { type PreviewState } from '../../../types/preview'
2+
import { type MediaPreviewConfig } from '../options'
23

34
function generateHtmlVectorSnippet (previewState: PreviewState) {
45
if (!previewState?.stats?.dimensions) {
@@ -10,15 +11,17 @@ function generateHtmlVectorSnippet (previewState: PreviewState) {
1011

1112
const targetWidth = Math.min(previewState.stats.dimensions.width, previewState.targetWidth)
1213
const targetHeight = Math.min(previewState.stats.dimensions.height, previewState.targetHeight)
13-
return `<img
14-
src="${hostname}${previewState.stats.path}"
15-
width="${targetWidth}"
16-
height="${targetHeight}"
17-
loading="lazy"
18-
${previewState.alt ? `alt="${previewState.alt}"` : 'aria-hidden="true"\n alt=""'}
19-
/>`
14+
return [
15+
'<img',
16+
` src="${hostname}${previewState.stats.path}"`,
17+
` width="${targetWidth}"`,
18+
` height="${targetHeight}"`,
19+
' loading="lazy"',
20+
` ${previewState.alt ? `alt="${previewState.alt}"` : 'aria-hidden="true"\n alt=""'}`,
21+
'/>'
22+
].join('\n')
2023
}
21-
function generateHtmlRasterSnippet (previewState: PreviewState) {
24+
function generateHtmlRasterSnippet (previewState: PreviewState, config: MediaPreviewConfig) {
2225
if (!previewState?.stats?.dimensions) {
2326
return ''
2427
}
@@ -30,53 +33,66 @@ function generateHtmlRasterSnippet (previewState: PreviewState) {
3033
const targetHeight = Math.min(previewState.stats.dimensions.height, previewState.targetHeight)
3134

3235
let baseModifier = ''
36+
let src = ''
3337

34-
if (targetWidth !== previewState.stats.dimensions.width || targetHeight !== previewState.stats.dimensions.height) {
35-
baseModifier = `width=${targetWidth}&height=${targetHeight}`
36-
}
37-
38+
const sources: string[] = []
3839
const urls = {
39-
avif: [
40-
`${hostname}/_ipx${previewState.stats.path}${baseModifier ? `?${baseModifier}&` : '?'}format=avif`
41-
],
42-
webp: [
43-
`${hostname}/_ipx${previewState.stats.path}${baseModifier ? `?${baseModifier}&` : '?'}format=webp`
44-
],
45-
src: [
46-
`${hostname}${baseModifier ? '/_ipx' : ''}${previewState.stats.path}${baseModifier ? `?${baseModifier}` : ''}`
47-
]
40+
avif: [] as string[],
41+
webp: [] as string[],
42+
src: [] as string[]
4843
}
4944

50-
if (targetWidth <= previewState.stats.dimensions.width / 2) {
51-
urls.avif.push(`${hostname}/_ipx${previewState.stats.path}?width=${targetWidth * 2}&height=${targetHeight * 2}&format=avif 2x`)
52-
urls.webp.push(`${hostname}/_ipx${previewState.stats.path}?width=${targetWidth * 2}&height=${targetHeight * 2}&format=webp 2x`)
53-
urls.src.push(`${hostname}/_ipx${previewState.stats.path}?width=${targetWidth * 2}&height=${targetHeight * 2}`)
54-
}
45+
if (!config.hasIpx) {
46+
src = `${hostname}${previewState.stats.path}`
47+
} else {
48+
if (targetWidth !== previewState.stats.dimensions.width || targetHeight !== previewState.stats.dimensions.height) {
49+
baseModifier = `width=${targetWidth}&height=${targetHeight}`
50+
}
51+
52+
src = `${hostname}${baseModifier ? config.ipxMiddlewarePrefix : ''}${previewState.stats.path}${baseModifier ? `?${baseModifier}` : ''}`
53+
54+
urls.avif.push(`${hostname}${config.ipxMiddlewarePrefix}${previewState.stats.path}${baseModifier ? `?${baseModifier}&` : '?'}format=avif`)
55+
urls.webp.push(`${hostname}${config.ipxMiddlewarePrefix}${previewState.stats.path}${baseModifier ? `?${baseModifier}&` : '?'}format=webp`)
56+
urls.src.push(`${hostname}${baseModifier ? config.ipxMiddlewarePrefix : ''}${previewState.stats.path}${baseModifier ? `?${baseModifier}` : ''}`)
57+
58+
if (targetWidth <= previewState.stats.dimensions.width / 2) {
59+
urls.avif.push(`${hostname}${config.ipxMiddlewarePrefix}${previewState.stats.path}?width=${targetWidth * 2}&height=${targetHeight * 2}&format=avif 2x`)
60+
urls.webp.push(`${hostname}${config.ipxMiddlewarePrefix}${previewState.stats.path}?width=${targetWidth * 2}&height=${targetHeight * 2}&format=webp 2x`)
61+
urls.src.push(`${hostname}${config.ipxMiddlewarePrefix}${previewState.stats.path}?width=${targetWidth * 2}&height=${targetHeight * 2}`)
62+
}
63+
64+
if (targetWidth <= previewState.stats.dimensions.width / 3) {
65+
urls.avif.push(`${hostname}${config.ipxMiddlewarePrefix}${previewState.stats.path}?width=${targetWidth * 3}&height=${targetHeight * 3}&format=avif 3x`)
66+
urls.webp.push(`${hostname}${config.ipxMiddlewarePrefix}${previewState.stats.path}?width=${targetWidth * 3}&height=${targetHeight * 3}&format=webp 3x`)
67+
urls.src.push(`${hostname}${config.ipxMiddlewarePrefix}${previewState.stats.path}?width=${targetWidth * 3}&height=${targetHeight * 3}`)
68+
}
5569

56-
if (targetWidth <= previewState.stats.dimensions.width / 3) {
57-
urls.avif.push(`${hostname}/_ipx${previewState.stats.path}?width=${targetWidth * 3}&height=${targetHeight * 3}&format=avif 3x`)
58-
urls.webp.push(`${hostname}/_ipx${previewState.stats.path}?width=${targetWidth * 3}&height=${targetHeight * 3}&format=webp 3x`)
59-
urls.src.push(`${hostname}/_ipx${previewState.stats.path}?width=${targetWidth * 3}&height=${targetHeight * 3}`)
70+
sources.push(...[
71+
' <source',
72+
' type="image/avif"',
73+
` srcset="${urls.avif.join(', ')}"`,
74+
' />',
75+
' <source',
76+
' type="image/webp"',
77+
` srcset="${urls.webp.join(', ')}"`,
78+
' />'
79+
])
6080
}
6181

62-
return `<picture>
63-
<source
64-
type="image/avif"
65-
srcset="${urls.avif.join(', ')}"
66-
/>
67-
<source
68-
type="image/webp"
69-
srcset="${urls.webp.join(', ')}"
70-
/>
71-
<img
72-
src="${hostname}${baseModifier ? '/_ipx' : ''}${previewState.stats.path}${baseModifier ? `?${baseModifier}` : ''}"${urls.src.length > 1 ? `\n srcset="${urls.src.join(', ')}"` : ''}
73-
width="${targetWidth}"
74-
height="${targetHeight}"
75-
loading="lazy"
76-
decoding="async"
77-
${previewState.alt ? `alt="${previewState.alt}"` : 'aria-hidden="true"\n alt=""'}
78-
/>
79-
</picture>`
82+
return [
83+
'<picture>',
84+
...sources,
85+
' <img',
86+
` src="${src}"`,
87+
...(urls.src.length > 1 ? [` srcset="${urls.src.join(', ')}"`] : []),
88+
` width="${targetWidth}"`,
89+
` height="${targetHeight}"`,
90+
' loading="lazy"',
91+
' decoding="async"',
92+
`${previewState.alt ? ` alt="${previewState.alt}"` : ' aria-hidden="true"\n alt=""'}`,
93+
' />',
94+
'</picture>'
95+
].join('\n')
8096
}
8197
function generateHtmlDownloadSnippet (previewState: PreviewState) {
8298
if (!previewState?.stats) {
@@ -86,15 +102,17 @@ function generateHtmlDownloadSnippet (previewState: PreviewState) {
86102
// @todo: use nuxt runtime config
87103
const hostname = `${document.location.protocol}//${document.location.host}`
88104

89-
return `<a
90-
href="${hostname}${previewState.stats.path}"
91-
download
92-
>
93-
Download ${previewState.stats.name}
94-
</a>`
105+
return [
106+
'<a',
107+
` href="${hostname}${previewState.stats.path}"`,
108+
' download,',
109+
'>',
110+
` Download ${previewState.stats.name}`,
111+
'</a>'
112+
].join('\n')
95113
}
96114

97-
export function generateHtmlSnippet (previewState: PreviewState) {
115+
export function generateHtmlSnippet (previewState: PreviewState, config: MediaPreviewConfig) {
98116
if (!previewState?.stats) {
99117
return ''
100118
}
@@ -104,7 +122,7 @@ export function generateHtmlSnippet (previewState: PreviewState) {
104122
return generateHtmlVectorSnippet(previewState)
105123
case 'image/png':
106124
case 'image/jpeg':
107-
return generateHtmlRasterSnippet(previewState)
125+
return generateHtmlRasterSnippet(previewState, config)
108126
default:
109127
return generateHtmlDownloadSnippet(previewState)
110128
}

‎client/utils/snippets/index.ts

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,22 @@
11
import type { PreviewState } from '../../../types/preview'
2+
import type { MediaPreviewConfig } from '../options'
23
import { generateHtmlSnippet } from './html'
34
import { generateInlineSvgSnippet } from './inline'
45
import { generateNuxtImageSnippet } from './nuxt-image'
56

6-
export function generateSnippet (previewState: PreviewState) {
7+
export function generateSnippet (previewState: PreviewState, config: MediaPreviewConfig) {
78
// @ts-ignore
8-
if (!previewState.stats || process.server) {
9+
if (!previewState.stats) {
910
return ''
1011
}
1112

1213
switch (previewState.snippetType) {
1314
case 'inline':
1415
return generateInlineSvgSnippet(previewState)
1516
case '@nuxt/image':
16-
return generateNuxtImageSnippet(previewState)
17+
return generateNuxtImageSnippet(previewState, config)
1718
case 'html':
1819
default:
19-
return generateHtmlSnippet(previewState)
20+
return generateHtmlSnippet(previewState, config)
2021
}
2122
}

0 commit comments

Comments
 (0)