Merge pull request #10152 from owncloud/fix-preview-app-sidebar

fix: preview app while sidebar being opened

changelog/unreleased/enhancement-extensions-sidebar-panels

@@ -5,3 +5,4 @@ The benefit of this is that any app can register additional panels to be shown i
 available panels were hardcoded.
 
 https://github.com/owncloud/web/pull/10111
+https://github.com/owncloud/web/pull/10152

changelog/unreleased/enhancement-file-sidebar

@@ -4,3 +4,4 @@ Viewer and editor apps now have the same right sidebar available like the `files
 This makes in place viewing file details, tagging, sharing, and much more possible.
 
 https://github.com/owncloud/web/pull/10111
+https://github.com/owncloud/web/pull/10152

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

@@ -6,7 +6,7 @@
     :title="iFrameTitle"
     allowfullscreen
   />
-  <div v-if="appUrl && method === 'POST' && formParameters" class="oc-height-1-1">
+  <div v-if="appUrl && method === 'POST' && formParameters" class="oc-height-1-1 oc-width-1-1">
     <form :action="appUrl" target="app-iframe" method="post">
       <input ref="subm" type="submit" :value="formParameters" class="oc-hidden" />
       <div v-for="(item, key, index) in formParameters" :key="index">

packages/web-app-external/tests/unit/__snapshots__/app.spec.ts.snap

@@ -9,7 +9,7 @@ exports[`The app provider extension should be able to load an iFrame via get 1`]
 exports[`The app provider extension should be able to load an iFrame via post 1`] = `
 <!--v-if-->
 
-<div class="oc-height-1-1">
+<div class="oc-height-1-1 oc-width-1-1">
   <form action="https://example.test/d12ab86/loe009157-MzBw" method="post" target="app-iframe">
     <input class="oc-hidden" type="submit" value="[object Object]">
     <div>

packages/web-app-files/src/components/FilesList/ResourceDetails.vue

@@ -14,8 +14,7 @@ import { Resource, SpaceResource } from '@ownclouders/web-client/src/helpers'
 
 import FileActions from '../SideBar/Actions/FileActions.vue'
 import FileDetails from '../SideBar/Details/FileDetails.vue'
-import FileInfo from '../SideBar/FileInfo.vue'
-import { useFileActions } from '@ownclouders/web-pkg'
+import { useFileActions, FileInfo } from '@ownclouders/web-pkg'
 import { useRouteQuery } from '@ownclouders/web-pkg'
 
 export default defineComponent({

packages/web-app-files/tests/unit/components/FilesList/__snapshots__/ResourceDetails.spec.ts.snap

@@ -20,7 +20,6 @@ exports[`ResourceDetails component renders resource details correctly 1`] = `
           </h3>
         </div>
       </div>
-      <!--v-if-->
     </div>
     <div class="oc-mb" id="oc-file-details-sidebar">
       <div>

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

@@ -17,52 +17,65 @@
       @close="closeApp"
     />
 
-    <div v-if="isFolderLoading || isFileContentLoading" class="oc-position-center">
-      <oc-spinner :aria-label="$gettext('Loading media file')" size="xlarge" />
-    </div>
-    <oc-icon
-      v-else-if="isFileContentError"
-      name="file-damage"
-      variation="danger"
-      size="xlarge"
-      class="oc-position-center"
-      :accessible-label="$gettext('Failed to load media file')"
-    />
-    <div v-else class="oc-flex oc-width-1-1 oc-height-1-1">
-      <div class="stage" :class="{ lightbox: isFullScreenModeActivated }">
-        <div v-show="activeMediaFileCached" class="stage_media">
-          <media-image
-            v-if="activeMediaFileCached.isImage"
-            :file="activeMediaFileCached"
+    <div class="oc-flex oc-width-1-1 oc-height-1-1">
+      <div
+        v-if="isFolderLoading || isFileContentLoading"
+        class="oc-width-1-1"
+        :class="{ 'preview-sidebar-open': isSideBarOpen }"
+      >
+        <div class="oc-position-center">
+          <oc-spinner :aria-label="$gettext('Loading media file')" size="xlarge" />
+        </div>
+      </div>
+      <oc-icon
+        v-else-if="isFileContentError"
+        name="file-damage"
+        variation="danger"
+        size="xlarge"
+        class="oc-position-center"
+        :class="{ 'preview-sidebar-open': isSideBarOpen }"
+        :accessible-label="$gettext('Failed to load media file')"
+      />
+      <div
+        v-else
+        class="oc-flex oc-width-1-1 oc-height-1-1"
+        :class="{ 'preview-sidebar-open': isSideBarOpen }"
+      >
+        <div class="stage" :class="{ lightbox: isFullScreenModeActivated }">
+          <div v-show="activeMediaFileCached" class="stage_media">
+            <media-image
+              v-if="activeMediaFileCached.isImage"
+              :file="activeMediaFileCached"
+              :current-image-rotation="currentImageRotation"
+              :current-image-zoom="currentImageZoom"
+            />
+            <media-video
+              v-else-if="activeMediaFileCached.isVideo"
+              :file="activeMediaFileCached"
+              :is-auto-play-enabled="isAutoPlayEnabled"
+            />
+            <media-audio
+              v-else-if="activeMediaFileCached.isAudio"
+              :file="activeMediaFileCached"
+              :is-auto-play-enabled="isAutoPlayEnabled"
+            />
+          </div>
+          <media-controls
+            class="stage_controls"
+            :files="filteredFiles"
+            :active-index="activeIndex"
+            :is-full-screen-mode-activated="isFullScreenModeActivated"
+            :is-folder-loading="isFolderLoading"
+            :is-image="activeMediaFileCached?.isImage"
             :current-image-rotation="currentImageRotation"
             :current-image-zoom="currentImageZoom"
-          />
-          <media-video
-            v-else-if="activeMediaFileCached.isVideo"
-            :file="activeMediaFileCached"
-            :is-auto-play-enabled="isAutoPlayEnabled"
-          />
-          <media-audio
-            v-else-if="activeMediaFileCached.isAudio"
-            :file="activeMediaFileCached"
-            :is-auto-play-enabled="isAutoPlayEnabled"
+            @set-rotation="currentImageRotation = $event"
+            @set-zoom="currentImageZoom = $event"
+            @toggle-full-screen="toggleFullscreenMode"
+            @toggle-previous="prev"
+            @toggle-next="next"
           />
         </div>
-        <media-controls
-          class="stage_controls"
-          :files="filteredFiles"
-          :active-index="activeIndex"
-          :is-full-screen-mode-activated="isFullScreenModeActivated"
-          :is-folder-loading="isFolderLoading"
-          :is-image="activeMediaFileCached?.isImage"
-          :current-image-rotation="currentImageRotation"
-          :current-image-zoom="currentImageZoom"
-          @set-rotation="currentImageRotation = $event"
-          @set-zoom="currentImageZoom = $event"
-          @toggle-full-screen="toggleFullscreenMode"
-          @toggle-previous="prev"
-          @toggle-next="next"
-        />
       </div>
       <file-side-bar :is-open="isSideBarOpen" :active-panel="sideBarActivePanel" :space="space" />
     </div>
@@ -138,6 +151,7 @@ export default defineComponent({
 
     const activeIndex = ref()
     const cachedFiles = ref<CachedFile[]>([])
+    const folderLoaded = ref(false)
 
     const sortBy = computed(() => {
       if (!unref(contextRouteQuery)) {
@@ -234,7 +248,12 @@ export default defineComponent({
         if (!unref(currentFileContext) || unref(closed)) {
           return
         }
-        await appDefaults.loadFolderForFileContext(unref(currentFileContext))
+
+        if (!unref(folderLoaded)) {
+          await appDefaults.loadFolderForFileContext(unref(currentFileContext))
+          folderLoaded.value = true
+        }
+
         instance.proxy.setActiveFile(unref(unref(currentFileContext).driveAliasAndItem))
       },
       { immediate: true }
@@ -367,23 +386,15 @@ export default defineComponent({
       }
     },
     loadMedium() {
-      this.isFileContentLoading = true
-
-      // Don't bother loading if file is already loaded and cached
       if (this.activeMediaFileCached) {
-        setTimeout(
-          () => {
-            this.isFileContentLoading = false
-          },
-          // Delay to animate
-          50
-        )
         return
       }
 
       this.loadActiveFileIntoCache()
     },
     async loadActiveFileIntoCache() {
+      this.isFileContentLoading = true
+
       try {
         const loadRawFile = !this.isActiveFileTypeImage
         let mediaUrl
@@ -533,4 +544,9 @@ export default defineComponent({
     margin: 10px auto;
   }
 }
+@media (max-width: $oc-breakpoint-medium-default) {
+  .preview-sidebar-open {
+    display: none;
+  }
+}
 </style>

packages/web-app-preview/src/components/Sources/MediaImage.vue

@@ -9,8 +9,8 @@
   />
 </template>
 <script lang="ts">
-import { defineComponent, PropType, onMounted, ref, watch } from 'vue'
 import { CachedFile } from '../../helpers/types'
+import { defineComponent, PropType, onMounted, ref, VNodeRef, watch, unref, nextTick } from 'vue'
 import type { PanzoomObject } from '@panzoom/panzoom'
 import Panzoom from '@panzoom/panzoom'
 
@@ -31,11 +31,18 @@ export default defineComponent({
     }
   },
   setup(props) {
-    const img = ref()
-    let panzoom: PanzoomObject
+    const img = ref<VNodeRef>()
+    const panzoom = ref<PanzoomObject>()
 
-    onMounted(() => {
-      panzoom = Panzoom(img.value, {
+    const initPanzoom = async () => {
+      if (unref(panzoom)) {
+        unref(panzoom)?.destroy()
+      }
+
+      // wait for next tick until image is rendered
+      await nextTick()
+
+      panzoom.value = Panzoom(unref(img) as any, {
         animate: true,
         duration: 300,
         overflow: 'auto',
@@ -65,16 +72,19 @@ export default defineComponent({
               v = y
           }
 
-          panzoom.setStyle(
+          unref(panzoom).setStyle(
             'transform',
             `rotate(${props.currentImageRotation}deg) scale(${scale}) translate(${h}px, ${v}px)`
           )
         }
       })
-    })
+    }
+
+    watch(img, initPanzoom)
+    onMounted(initPanzoom)
 
     watch([() => props.currentImageZoom, () => props.currentImageRotation], () => {
-      panzoom.zoom(props.currentImageZoom)
+      unref(panzoom).zoom(props.currentImageZoom)
     })
 
     return {