Add hotlink viewer page at /h/:id/:secret.

This commit is contained in:
2026-10-26 23:06:28 +01:00
parent bf36b1d2aa
commit dfc52749b2
3 changed files with 34 additions and 3 deletions
+1
View File
@@ -1,5 +1,6 @@
export const ROUTE_NAMES = {
Upload: 'Upload',
Viewer: 'Viewer',
HotlinkViewer: 'HotlinkViewer',
Delete: 'Delete'
} as const;
+9 -3
View File
@@ -8,19 +8,25 @@ const router = createRouter({
path: '/',
name: ROUTE_NAMES.Upload,
component: () => import('@/views/UploadView.vue'),
meta: { title: 'Private Image — Upload' }
meta: { title: 'Private Image - Upload' }
},
{
path: '/v/:id',
name: ROUTE_NAMES.Viewer,
component: () => import('@/views/ViewerView.vue'),
meta: { title: 'Private Image — Viewer' }
meta: { title: 'Private Image - Viewer' }
},
{
path: '/h/:id/:secret',
name: ROUTE_NAMES.HotlinkViewer,
component: () => import('@/views/HotlinkViewerView.vue'),
meta: { title: 'Private Image - Viewer' }
},
{
path: '/d/:id',
name: ROUTE_NAMES.Delete,
component: () => import('@/views/DeleteView.vue'),
meta: { title: 'Private Image — Delete' }
meta: { title: 'Private Image - Delete' }
}
]
});
+24
View File
@@ -0,0 +1,24 @@
<template>
<main class="flex min-h-screen items-center justify-center p-4">
<img v-if="imageSrc" :src="imageSrc" class="max-h-[80vh] max-w-full object-contain" />
</main>
</template>
<script setup lang="ts">
import { computed } from 'vue';
import { useRoute } from 'vue-router';
import { buildHotlinkImagePath } from '@/utils/share/buildHotlinkImagePath';
const route = useRoute();
const imageSrc = computed((): string | null => {
const uploadId = route.params.id;
const secret = route.params.secret;
if (typeof uploadId !== 'string' || typeof secret !== 'string' || !uploadId || !secret) {
return null;
}
return buildHotlinkImagePath(uploadId, secret);
});
</script>