Preview fixes

changelog/unreleased/bugfix-preview-app-filename-hovers-over-image

@@ -6,4 +6,5 @@ Therefore we have introduced a new top bar, where the filename will be shown
 and the download and the close button will be displayed.
 
 https://github.com/owncloud/web/pull/7216
+https://github.com/owncloud/web/pull/7359
 https://github.com/owncloud/web/issues/6300

changelog/unreleased/bugfix-preview-infinite-loading-spinner

@@ -0,0 +1,5 @@
+Bugfix: Fix infinite loading spinner on invalid preview links
+
+The `preview` app now shows an error, when a file does not exist (for example when opening a bookmark to a file that does not exist anymore). Before it showed a loading spinner infinitely.
+
+https://github.com/owncloud/web/pull/7359

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

@@ -7,6 +7,21 @@
     @keydown.right="next"
     @keydown.esc="closeApp"
   >
+    <h1 class="oc-invisible-sr" v-text="pageTitle" />
+    <app-top-bar :resource="activeFilteredFile" @close="closeApp">
+      <template #right>
+        <oc-button
+          v-if="!isFileContentError"
+          class="preview-download"
+          size="small"
+          :aria-label="$gettext('Download currently viewed file')"
+          @click="triggerActiveFileDownload"
+        >
+          <oc-icon size="small" name="file-download" />
+        </oc-button>
+      </template>
+    </app-top-bar>
+
     <div v-if="isFolderLoading || isFileContentLoading" class="oc-position-center">
       <oc-spinner :aria-label="$gettext('Loading media file')" size="xlarge" />
     </div>
@@ -19,19 +34,6 @@
       :accessible-label="$gettext('Failed to load media file')"
     />
     <template v-else>
-      <h1 class="oc-invisible-sr" v-text="pageTitle" />
-      <app-top-bar :resource="activeFilteredFile" @close="closeApp">
-        <template #right>
-          <oc-button
-            class="preview-download"
-            size="small"
-            :aria-label="$gettext('Download currently viewed file')"
-            @click="triggerActiveFileDownload"
-          >
-            <oc-icon size="small" name="file-download" />
-          </oc-button>
-        </template>
-      </app-top-bar>
       <div
         v-show="activeMediaFileCached"
         class="
@@ -259,9 +261,12 @@ export default defineComponent({
       for (let i = 0; i < this.filteredFiles.length; i++) {
         if (this.filteredFiles[i].webDavPath === filePath) {
           this.activeIndex = i
-          break
+          return
         }
       }
+
+      this.isFileContentLoading = false
+      this.isFileContentError = true
     },
 
     // react to PopStateEvent ()

packages/web-pkg/src/components/AppTopBar.vue

@@ -1,6 +1,13 @@
 <template>
   <div class="oc-flex oc-p-s app-top-bar">
-    <oc-resource id="app-top-bar-resource" :is-thumbnail-displayed="false" :resource="resource" />
+    <oc-resource
+      v-if="resource"
+      id="app-top-bar-resource"
+      :is-thumbnail-displayed="false"
+      :resource="resource"
+    />
+    <div v-else />
+
     <div>
       <slot name="right"></slot>
       <oc-button
@@ -22,8 +29,7 @@ export default defineComponent({
   name: 'AppTopBar',
   props: {
     resource: {
-      type: Object,
-      required: true
+      type: Object
     }
   }
 })