fix: connect media preview on public retrieval page

Wire the existing media-preview actions and modal, with a regression test for the missing connections. Verified image, audio and video previews against a local backend.

Refs vastsa/FileCodeBox#472

Author: vastsa

src/views/RetrievewFileView.vue

@@ -53,6 +53,7 @@
       :record="selectedRecord"
       @close="closeDetails"
       @preview-content="showContentPreview"
+      @preview-file="showFilePreview"
     />
 
     <ContentPreviewModal
@@ -61,6 +62,12 @@
       @close="closeContentPreview"
       @copy-content="copyContent"
     />
+
+    <MediaPreviewModal
+      :visible="showMediaPreview"
+      :record="previewMediaRecord"
+      @close="closeFilePreview"
+    />
   </div>
 </template>
 
@@ -75,6 +82,7 @@ import SideDrawer from '@/components/common/SideDrawer.vue'
 import FileDetailModal from '@/components/common/FileDetailModal.vue'
 import FileRecordList from '@/components/common/FileRecordList.vue'
 import ContentPreviewModal from '@/components/common/ContentPreviewModal.vue'
+import MediaPreviewModal from '@/components/common/MediaPreviewModal.vue'
 import { useRetrieveFlow } from '@/composables'
 import { useInjectedDarkMode } from '@/composables'
 
@@ -88,16 +96,20 @@ const {
   error,
   records,
   selectedRecord,
+  previewMediaRecord,
   showDrawer,
   showPreview,
+  showMediaPreview,
   renderedContent,
   closeContentPreview,
+  closeFilePreview,
   closeDetails,
   copyContent,
   deleteRecord,
   downloadRecord,
   handleSubmit,
   showContentPreview,
+  showFilePreview,
   toggleDrawer,
   viewDetails
 } = useRetrieveFlow()

tests/retrieve-media-preview.test.mjs

@@ -0,0 +1,31 @@
+import assert from 'node:assert/strict'
+import { readFileSync } from 'node:fs'
+import { test } from 'node:test'
+import { URL } from 'node:url'
+import { compileScript, parse } from 'vue/compiler-sfc'
+
+test('issue #472: retrieval view connects media preview events, state and close action', () => {
+  const source = readFileSync(
+    new URL('../src/views/RetrievewFileView.vue', import.meta.url),
+    'utf8'
+  )
+  const { descriptor, errors } = parse(source)
+  assert.deepEqual(errors, [])
+  const { bindings } = compileScript(descriptor, { id: 'retrieve-view' })
+  for (const name of [
+    'MediaPreviewModal',
+    'previewMediaRecord',
+    'showMediaPreview',
+    'showFilePreview',
+    'closeFilePreview'
+  ]) {
+    assert.ok(bindings[name], `${name} must be available to the template`)
+  }
+  const template = descriptor.template.content
+  assert.match(template, /<FileDetailModal\b[^>]*@preview-file="showFilePreview"/)
+  const modal = template.match(/<MediaPreviewModal\b[^>]*\/>/)?.[0]
+  assert.ok(modal, 'the public retrieval page must render the media preview modal')
+  assert.match(modal, /:visible="showMediaPreview"/)
+  assert.match(modal, /:record="previewMediaRecord"/)
+  assert.match(modal, /@close="closeFilePreview"/)
+})