fix(preview): show an error for a deep link to a file that can't be previewed

packages/web-app-preview/src/App.vue

@@ -4,6 +4,10 @@
       <oc-spinner :aria-label="$gettext('Loading media file')" size="xlarge" />
     </div>
   </div>
+  <div v-else-if="isFileNotFound" class="size-full flex flex-col items-center justify-center">
+    <oc-icon name="file-damage" size-class="size-12" color="var(--oc-role-error)" />
+    <p>{{ $gettext('Failed to load "%{filename}"', { filename: requestedFileName }) }}</p>
+  </div>
   <div
     v-else
     ref="preview"
@@ -182,6 +186,7 @@ const { isFullScreenModeActivated, toggleFullScreenMode } = useFullScreenMode()
 const activeIndex = ref<number>()
 const mediaFiles = ref<MediaFile[]>([])
 const folderLoaded = ref(false)
+const isFileNotFound = ref(false)
 const isAutoPlayEnabled = ref(true)
 const isAutoAdvancing = ref(false)
 const photoRollEnabled = ref(true)
@@ -224,6 +229,7 @@ const sortDir = computed<SortDir>(() => {
 
 const fileIdQuery = useRouteQuery('fileId')
 const fileId = computed(() => queryItemAsString(unref(fileIdQuery)))
+const requestedFileName = computed(() => unref(currentFileContext?.fileName))
 
 const buildMediaFiles = () => {
   if (!activeFiles) {
@@ -394,18 +400,28 @@ const updateLocalHistory = () => {
 }
 
 const setActiveFile = () => {
-  for (let i = 0; i < unref(mediaFiles).length; i++) {
-    const filterAttr = isLocationSharesActive(router, 'files-shares-with-me')
-      ? 'remoteItemId'
-      : 'fileId'
-
-    // match the given file id with the filtered files to get the current index
-    if (unref(mediaFiles)[i].resource[filterAttr] === unref(fileId)) {
-      activeIndex.value = i
-      return
-    }
+  const filterAttr = isLocationSharesActive(router, 'files-shares-with-me')
+    ? 'remoteItemId'
+    : 'fileId'
 
-    activeIndex.value = 0
+  // match the given file id with the filtered files to get the current index
+  const index = unref(mediaFiles).findIndex(
+    ({ resource }) => resource[filterAttr] === unref(fileId)
+  )
+  if (index !== -1 || !unref(fileId)) {
+    isFileNotFound.value = false
+    activeIndex.value = Math.max(index, 0)
+    return
+  }
+
+  // the requested file is no media file (or gone), don't show another file instead
+  activeIndex.value = undefined
+  isFileNotFound.value = true
+
+  // still show the top bar with the file name and a close button
+  const requestedFile = activeFiles?.find((file) => file[filterAttr] === unref(fileId))
+  if (requestedFile) {
+    emit('update:resource', requestedFile)
   }
 }
 

packages/web-app-preview/tests/unit/app.spec.ts

@@ -315,6 +315,44 @@ describe('Preview app', () => {
     })
   })
 
+  describe('Deep link to a file that is no media file', () => {
+    it('shows an error instead of another file', async () => {
+      vi.mocked(queryItemAsString).mockReturnValue('plain-text-file')
+      const { wrapper, mocks } = createShallowMountWrapper({
+        currentFileContext: { fileName: 'plain.txt' },
+        isFolderLoading: false
+      })
+      await flushPromises()
+
+      expect(wrapper.text()).toContain('Failed to load "plain.txt"')
+      expect(wrapper.find('.stage').exists()).toBe(false)
+      expect(requestedNames(mocks)).toEqual([])
+      expect(wrapper.emitted('update:resource')).toBeUndefined()
+    })
+
+    it('passes the requested file on so the top bar can show it with a close button', async () => {
+      vi.mocked(queryItemAsString).mockReturnValue('plain-text-file')
+      const textFile = {
+        id: 'plain-text-file',
+        fileId: 'plain-text-file',
+        name: 'plain.txt',
+        mimeType: 'text/plain',
+        path: 'personal/admin/plain.txt',
+        hidden: false,
+        canDownload: () => true
+      }
+      const { wrapper } = createShallowMountWrapper({
+        currentFileContext: { fileName: 'plain.txt' },
+        files: [...activeFiles, textFile],
+        isFolderLoading: false
+      })
+      await flushPromises()
+
+      expect(wrapper.text()).toContain('Failed to load "plain.txt"')
+      expect(wrapper.emitted('update:resource')).toEqual([[textFile]])
+    })
+  })
+
   describe('Generated "mediaFiles"', () => {
     it('flags the still of a live photo as a motion or live photo', () => {
       const file = (name: string, extra: Partial<Resource> = {}) =>
@@ -360,11 +398,13 @@ const requestedNames = (mocks: ReturnType<typeof defaultComponentMocks>) =>
 function createShallowMountWrapper({
   currentFileContext,
   stubs = {},
-  files = activeFiles
+  files = activeFiles,
+  isFolderLoading = true
 }: {
   currentFileContext?: Partial<FileContext>
   stubs?: Record<string, unknown>
   files?: unknown[]
+  isFolderLoading?: boolean
 } = {}) {
   const mocks = defaultComponentMocks()
   // blob urls mirror what the preview service returns for private spaces and keep the
@@ -383,7 +423,7 @@ function createShallowMountWrapper({
         ...currentFileContext
       }),
       activeFiles: files as Resource[],
-      isFolderLoading: true,
+      isFolderLoading,
       revokeUrl,
       getUrlForResource,
       loadFolderForFileContext: vi.fn()