fix: preview app on shared with me page

changelog/unreleased/bugfix-preview-app-shared-with-me-page

@@ -0,0 +1,6 @@
+Bugfix: Preview app Shared with me page
+
+We fixed navigation issues with the preview app on the Shared with me page.
+
+https://github.com/owncloud/web/issues/11883
+https://github.com/owncloud/web/pull/11947

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

@@ -81,7 +81,7 @@ import {
   Ref
 } from 'vue'
 import { RouteLocationRaw } from 'vue-router'
-import { Resource } from '@ownclouders/web-client'
+import { isShareSpaceResource, Resource } from '@ownclouders/web-client'
 import {
   AppFileHandlingResult,
   AppFolderHandlingResult,
@@ -141,6 +141,7 @@ export default defineComponent({
     const contextRouteQuery = useRouteQuery('contextRouteQuery') as unknown as Ref<
       Record<string, string>
     >
+
     const { isFileTypeAudio, isFileTypeImage, isFileTypeVideo } = useFileTypes()
     const previewService = usePreviewService()
     const { dimensions } = usePreviewDimensions()
@@ -164,13 +165,16 @@ export default defineComponent({
       return (unref(contextRouteQuery)['sort-dir'] as SortDir) ?? SortDir.Asc
     })
 
+    const fileIdQuery = useRouteQuery('fileId')
+    const fileId = computed(() => queryItemAsString(unref(fileIdQuery)))
+
     const filteredFiles = computed(() => {
       if (!props.activeFiles) {
         return []
       }
 
       const files = props.activeFiles.filter((file) => {
-        return mimeTypes.includes(file.mimeType?.toLowerCase())
+        return mimeTypes.includes(file.mimeType?.toLowerCase()) && file.canDownload()
       })
 
       return sortHelper(files, [{ name: unref(sortBy) }], unref(sortBy), unref(sortDir))
@@ -288,6 +292,7 @@ export default defineComponent({
     return {
       ...useImageControls(),
       ...useFullScreenMode(),
+      fileId,
       activeFilteredFile,
       activeIndex,
       activeMediaFileCached,
@@ -333,6 +338,17 @@ export default defineComponent({
   methods: {
     setActiveFile(driveAliasAndItem: string) {
       for (let i = 0; i < this.filteredFiles.length; i++) {
+        if (isShareSpaceResource(unref(this.currentFileContext.space))) {
+          // with share space resources, we don't have an underlying space, so match the file id
+          if (this.filteredFiles[i].remoteItemId === this.fileId) {
+            this.activeIndex = i
+            return
+          }
+
+          this.activeIndex = 0
+          continue
+        }
+
         if (
           unref(this.currentFileContext.space)?.getDriveAliasAndItem(this.filteredFiles[i]) ===
           driveAliasAndItem

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

@@ -9,55 +9,64 @@ const activeFiles = [
     id: '1',
     name: 'bear.png',
     mimeType: 'image/png',
-    path: 'personal/admin/bear.png'
+    path: 'personal/admin/bear.png',
+    canDownload: () => true
   },
   {
     id: '2',
     name: 'elephant.png',
     mimeType: 'image/png',
-    path: 'personal/admin/elephant.png'
+    path: 'personal/admin/elephant.png',
+    canDownload: () => true
   },
   {
     id: '3',
     name: 'wale_sounds.flac',
     mimeType: 'audio/flac',
-    path: 'personal/admin/wale_sounds.flac'
+    path: 'personal/admin/wale_sounds.flac',
+    canDownload: () => true
   },
   {
     id: '4',
     name: 'lonely_sloth_very_sad.gif',
     mimeType: 'image/gif',
-    path: 'personal/admin/lonely_sloth_very_sad.gif'
+    path: 'personal/admin/lonely_sloth_very_sad.gif',
+    canDownload: () => true
   },
   {
     id: '5',
     name: 'tiger_eats_plants.mp4',
     mimeType: 'video/mp4',
-    path: 'personal/admin/tiger_eats_plants.mp4'
+    path: 'personal/admin/tiger_eats_plants.mp4',
+    canDownload: () => true
   },
   {
     id: '6',
     name: 'happy_hippo.gif',
     mimeType: 'image/gif',
-    path: 'personal/admin/happy_hippo.gif'
+    path: 'personal/admin/happy_hippo.gif',
+    canDownload: () => true
   },
   {
     id: '7',
     name: 'sleeping_dog.gif',
     mimeType: 'image/gif',
-    path: 'personal/admin/sleeping_dog.gif'
+    path: 'personal/admin/sleeping_dog.gif',
+    canDownload: () => true
   },
   {
     id: '8',
     name: 'cat_murr_murr.gif',
     mimeType: 'image/gif',
-    path: 'personal/admin/cat_murr_murr.gif'
+    path: 'personal/admin/cat_murr_murr.gif',
+    canDownload: () => true
   },
   {
     id: '9',
     name: 'labrador.gif',
     mimeType: 'image/gif',
-    path: 'personal/admin/labrador.gif'
+    path: 'personal/admin/labrador.gif',
+    canDownload: () => true
   }
 ]
 

packages/web-pkg/src/composables/actions/files/useFileActions.ts

@@ -206,7 +206,7 @@ export const useFileActions = () => {
     return {
       name: routeName,
       params: {
-        driveAliasAndItem: space.getDriveAliasAndItem(resource),
+        driveAliasAndItem: space?.getDriveAliasAndItem(resource),
         filePath: resource.path,
         fileId: resource.fileId,
         mode