nobswebdev
0d8d682990
Legacy /i and /h two-segment routes remain supported in the router and viewer.
78 lines
2.2 KiB
Vue
78 lines
2.2 KiB
Vue
<template>
|
|
<main
|
|
class="mx-auto flex w-full max-w-lg flex-1 flex-col items-center justify-center gap-3 px-4 py-6 text-center sm:px-6 sm:py-8"
|
|
>
|
|
<p v-if="state === 'invalidLink'" class="text-sm text-muted-foreground">
|
|
This viewing link is incomplete. Use the hotlink URL from your upload results.
|
|
</p>
|
|
|
|
<p v-else-if="state === 'notFound'" class="text-sm text-muted-foreground">This image was not found.</p>
|
|
|
|
<template v-else>
|
|
<p v-if="state === 'loading'" class="text-sm text-muted-foreground sm:text-base">Loading image...</p>
|
|
|
|
<img
|
|
v-if="imageSrc"
|
|
:src="imageSrc"
|
|
class="max-h-[min(80vh,100dvh)] w-full object-contain"
|
|
:class="{ hidden: state === 'loading' }"
|
|
@load="onImageLoad"
|
|
@error="onImageError"
|
|
/>
|
|
</template>
|
|
</main>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { onBeforeMount, ref } from 'vue';
|
|
import { useRoute } from 'vue-router';
|
|
import { config } from '@/config';
|
|
import type { HotlinkViewerViewState } from '@/types/view/HotlinkViewerViewState';
|
|
import {
|
|
buildHotlinkImagePath,
|
|
buildLegacyHotlinkImagePath
|
|
} from '@/utils/share/buildHotlinkImagePath';
|
|
|
|
const { baseUrlRoot } = config.api;
|
|
|
|
const route = useRoute();
|
|
|
|
const state = ref<HotlinkViewerViewState>('loading');
|
|
const imageSrc = ref<string | null>(null);
|
|
|
|
onBeforeMount(() => {
|
|
const accessToken = route.params.accessToken;
|
|
const uploadId = route.params.id;
|
|
const secret = route.params.secret;
|
|
|
|
let path: string | null = null;
|
|
|
|
if (typeof accessToken === 'string' && accessToken) {
|
|
path = buildHotlinkImagePath(accessToken);
|
|
} else if (
|
|
typeof uploadId === 'string' &&
|
|
typeof secret === 'string' &&
|
|
uploadId &&
|
|
secret
|
|
) {
|
|
path = buildLegacyHotlinkImagePath(uploadId, secret);
|
|
}
|
|
|
|
if (!path) {
|
|
state.value = 'invalidLink';
|
|
|
|
return;
|
|
}
|
|
|
|
imageSrc.value = `${baseUrlRoot}${path}`;
|
|
});
|
|
|
|
const onImageLoad = (): void => {
|
|
state.value = 'image';
|
|
};
|
|
|
|
const onImageError = (): void => {
|
|
state.value = 'notFound';
|
|
};
|
|
</script>
|