fix(pkg): pixelated previews after searching

packages/web-pkg/src/components/Search/ResourcePreview.vue

@@ -1,5 +1,6 @@
 <template>
   <resource-list-item
+    ref="resourceListItem"
     :resource="resource"
     :path-prefix="pathPrefix"
     :is-path-displayed="true"
@@ -12,175 +13,155 @@
   />
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { ImageDimension } from '../../constants'
 import { VisibilityObserver } from '../../observer'
 import { debounce } from 'lodash-es'
-import { computed, defineComponent, PropType, ref, unref } from 'vue'
+import { computed, onBeforeUnmount, onMounted, ref, unref, useTemplateRef } from 'vue'
 import {
   useGetMatchingSpace,
   useFileActions,
   useFolderLink,
-  useConfigStore,
   useResourcesStore,
   useLoadPreview
 } from '../../composables'
 import { isSpaceResource, Resource } from '@opencloud-eu/web-client'
 import ResourceListItem from '../FilesList/ResourceListItem.vue'
 import { SearchResultValue } from './types'
-import { storeToRefs } from 'pinia'
 import { RouteLocationPathRaw } from 'vue-router'
 
 const visibilityObserver = new VisibilityObserver()
 
-export default defineComponent({
-  components: { ResourceListItem },
-  props: {
-    searchResult: {
-      type: Object as PropType<SearchResultValue>,
-      default: function () {
-        return {}
-      }
-    },
-    isClickable: {
-      type: Boolean,
-      default: true
-    },
-    term: {
-      type: String,
-      default: ''
-    }
-  },
-  setup(props) {
-    const { triggerDefaultAction } = useFileActions()
-    const { getMatchingSpace } = useGetMatchingSpace()
-    const { getDefaultAction } = useFileActions()
-    const { loadPreview } = useLoadPreview()
-
-    const {
-      getPathPrefix,
-      getParentFolderName,
-      getParentFolderLink,
-      getParentFolderLinkIconAdditionalAttributes,
-      getFolderLink
-    } = useFolderLink()
-    const configStore = useConfigStore()
-    const { options: configOptions } = storeToRefs(configStore)
-    const resourcesStore = useResourcesStore()
-
-    const previewData = ref<string>()
-
-    const areFileExtensionsShown = computed(() => resourcesStore.areFileExtensionsShown)
-
-    const resource = computed((): Resource => {
-      return {
-        ...(props.searchResult.data as Resource),
-        ...(unref(previewData) &&
-          ({
-            thumbnail: unref(previewData)
-          } as Resource))
-      }
-    })
+const {
+  searchResult = { data: {} },
+  isClickable = true,
+  term = ''
+} = defineProps<{
+  searchResult?: SearchResultValue
+  isClickable?: boolean
+  term?: string
+}>()
+
+const { triggerDefaultAction } = useFileActions()
+const { getMatchingSpace } = useGetMatchingSpace()
+const { getDefaultAction } = useFileActions()
+const { loadPreview } = useLoadPreview()
+
+const resourceListItem = useTemplateRef<typeof ResourceListItem>('resourceListItem')
+
+const {
+  getPathPrefix,
+  getParentFolderName,
+  getParentFolderLink,
+  getParentFolderLinkIconAdditionalAttributes,
+  getFolderLink
+} = useFolderLink()
+const resourcesStore = useResourcesStore()
+
+const previewData = ref<string>()
+
+const areFileExtensionsShown = computed(() => resourcesStore.areFileExtensionsShown)
+
+const resource = computed((): Resource => {
+  return {
+    ...(searchResult.data as Resource),
+    ...(unref(previewData) &&
+      ({
+        thumbnail: unref(previewData)
+      } as Resource))
+  }
+})
 
-    const space = computed(() => getMatchingSpace(unref(resource)))
+const space = computed(() => getMatchingSpace(unref(resource)))
 
-    const resourceDisabled = computed(() => {
-      const res = unref(resource)
-      return isSpaceResource(res) && res.disabled === true
-    })
+const resourceDisabled = computed(() => {
+  const res = unref(resource)
+  return isSpaceResource(res) && res.disabled === true
+})
+
+const resourceClicked = () => {
+  triggerDefaultAction({
+    space: unref(space),
+    resources: [unref(resource)]
+  })
+}
 
-    const resourceClicked = () => {
-      triggerDefaultAction({
-        space: unref(space),
-        resources: [unref(resource)]
-      })
+const additionalAttrs = computed(() => {
+  if (!isClickable) {
+    return {
+      isResourceClickable: false
     }
+  }
 
-    const additionalAttrs = computed(() => {
-      if (!props.isClickable) {
-        return {
-          isResourceClickable: false
-        }
-      }
-
-      return {
-        parentFolderLink: getParentFolderLink(unref(resource)),
-        onClick: resourceClicked
-      }
-    })
+  return {
+    parentFolderLink: getParentFolderLink(unref(resource)),
+    onClick: resourceClicked
+  }
+})
+
+const resourceLink = computed(() => {
+  if (unref(resource).isFolder) {
+    return getFolderLink(unref(resource))
+  }
 
-    const resourceLink = computed(() => {
-      if (unref(resource).isFolder) {
-        return getFolderLink(unref(resource))
-      }
+  const action = getDefaultAction({ resources: [unref(resource)], space: unref(space) })
 
-      const action = getDefaultAction({ resources: [unref(resource)], space: unref(space) })
+  if (!action?.route) {
+    return null
+  }
 
-      if (!action?.route) {
-        return null
-      }
+  const route = action.route({
+    space: unref(space),
+    resources: [unref(resource)]
+  }) as RouteLocationPathRaw
+
+  // add search term to query param
+  route.query = {
+    ...route.query,
+    contextRouteQuery: {
+      ...((route.query?.contextRouteQuery as any) || {}),
+      term: term
+    }
+  }
 
-      const route = action.route({
-        space: unref(space),
-        resources: [unref(resource)]
-      }) as RouteLocationPathRaw
+  return route
+})
 
-      // add search term to query param
-      route.query = {
-        ...route.query,
-        contextRouteQuery: {
-          ...((route.query?.contextRouteQuery as any) || {}),
-          term: props.term
-        }
-      }
+const pathPrefix = getPathPrefix(unref(resource))
+const parentFolderName = getParentFolderName(unref(resource))
+const parentFolderLinkIconAdditionalAttributes = getParentFolderLinkIconAdditionalAttributes(
+  unref(resource)
+)
 
-      return route
-    })
+onMounted(() => {
+  if (unref(resourceDisabled)) {
+    unref(resourceListItem).parentElement.classList.add('disabled')
+  }
 
-    return {
-      configOptions,
-      space,
-      previewData,
-      loadPreview,
-      resource,
-      resourceDisabled,
-      resourceClicked,
-      resourceLink,
-      parentFolderLink: getParentFolderLink(unref(resource)),
-      pathPrefix: getPathPrefix(unref(resource)),
-      parentFolderName: getParentFolderName(unref(resource)),
-      parentFolderLinkIconAdditionalAttributes: getParentFolderLinkIconAdditionalAttributes(
-        unref(resource)
-      ),
-      additionalAttrs,
-      areFileExtensionsShown
-    }
-  },
-  mounted() {
-    if (this.resourceDisabled) {
-      this.$el.parentElement.classList.add('disabled')
-    }
+  const loadPreviewCallback = async () => {
+    const preview = await loadPreview({
+      space: unref(space),
+      resource: unref(resource),
+      dimensions: ImageDimension.Thumbnail,
+      cancelRunning: true,
+      updateStore: false
+    })
 
-    const loadPreview = async () => {
-      const preview = await this.loadPreview({
-        space: this.space,
-        resource: this.resource,
-        dimensions: ImageDimension.Thumbnail,
-        cancelRunning: true
-      })
+    preview && (previewData.value = preview)
+  }
 
-      preview && (this.previewData = preview)
-    }
+  const debounced = debounce(({ unobserve }) => {
+    unobserve()
+    loadPreviewCallback()
+  }, 250)
 
-    const debounced = debounce(({ unobserve }) => {
-      unobserve()
-      loadPreview()
-    }, 250)
+  visibilityObserver.observe(unref(resourceListItem).$el, {
+    onEnter: debounced,
+    onExit: debounced.cancel
+  })
+})
 
-    visibilityObserver.observe(this.$el, { onEnter: debounced, onExit: debounced.cancel })
-  },
-  beforeUnmount() {
-    visibilityObserver.disconnect()
-  }
+onBeforeUnmount(() => {
+  visibilityObserver.disconnect()
 })
 </script>

packages/web-pkg/tests/unit/components/Search/ResourcePreview.spec.ts

@@ -10,6 +10,7 @@ import {
 } from '@opencloud-eu/web-test-helpers'
 import { useFileActions } from '../../../../src/composables/actions'
 import { CapabilityStore } from '../../../../src/composables/piniaStores'
+import ResourceListItem from '../../../../src/components/FilesList/ResourceListItem.vue'
 
 vi.mock('../../../../src/composables/spaces/useGetMatchingSpace', () => ({
   useGetMatchingSpace: vi.fn()
@@ -35,7 +36,7 @@ describe('Preview component', () => {
         getDriveAliasAndItem: () => driveAliasAndItem
       })
     })
-    wrapper.vm.previewData = 'blob:image'
+    ;(wrapper.vm as any).previewData = 'blob:image'
     await wrapper.vm.$nextTick()
     expect(wrapper.html()).toMatchSnapshot()
   })
@@ -50,7 +51,8 @@ describe('Preview component', () => {
       })
     })
     expect(
-      wrapper.findComponent<any>(selectors.resourceListItemStub).attributes().isextensiondisplayed
+      wrapper.findComponent<typeof ResourceListItem>(selectors.resourceListItemStub).attributes()
+        .isextensiondisplayed
     ).toBe('false')
   })
 })