Do not load preview if version tab is not active

Signed-off-by: Louis Chemineau <louis@chmn.me>

diff --git a/apps/files/src/models/Tab.js b/apps/files/src/models/Tab.js
index 63d1ad97ff65cfcb77f886572b6e569fc838c559..f688fe9e007a83d659737f2131581043021179c5 100644 (file)
--- a/apps/files/src/models/Tab.js
+++ b/apps/files/src/models/Tab.js
@@ -28,6 +28,7 @@ export default class Tab {
        _icon
        _iconSvgSanitized
        _mount
+       _setIsActive
        _update
        _destroy
        _enabled
@@ -42,12 +43,13 @@ export default class Tab {
         * @param {?string} options.icon the icon css class
         * @param {?string} options.iconSvg the icon in svg format
         * @param {Function} options.mount function to mount the tab
+        * @param {Function} [options.setIsActive] function to forward the active state of the tab
         * @param {Function} options.update function to update the tab
         * @param {Function} options.destroy function to destroy the tab
         * @param {Function} [options.enabled] define conditions whether this tab is active. Must returns a boolean
         * @param {Function} [options.scrollBottomReached] executed when the tab is scrolled to the bottom
         */
-       constructor({ id, name, icon, iconSvg, mount, update, destroy, enabled, scrollBottomReached } = {}) {
+       constructor({ id, name, icon, iconSvg, mount, setIsActive, update, destroy, enabled, scrollBottomReached } = {}) {
                if (enabled === undefined) {
                        enabled = () => true
                }
@@ -68,6 +70,9 @@ export default class Tab {
                if (typeof mount !== 'function') {
                        throw new Error('The mount argument should be a function')
                }
+               if (setIsActive !== undefined && typeof setIsActive !== 'function') {
+                       throw new Error('The setIsActive argument should be a function')
+               }
                if (typeof update !== 'function') {
                        throw new Error('The update argument should be a function')
                }
@@ -85,6 +90,7 @@ export default class Tab {
                this._name = name
                this._icon = icon
                this._mount = mount
+               this._setIsActive = setIsActive
                this._update = update
                this._destroy = destroy
                this._enabled = enabled
@@ -119,6 +125,10 @@ export default class Tab {
                return this._mount
        }
 
+       get setIsActive() {
+               return this._setIsActive || (() => undefined)
+       }
+
        get update() {
                return this._update
        }

diff --git a/apps/files/src/views/Sidebar.vue b/apps/files/src/views/Sidebar.vue
index 915c8765b6c64f30389849a2ae2dcb8aa457a4ad..ff6e1a52b43ea9b6597c8fca9e9d736b397f9702 100644 (file)
--- a/apps/files/src/views/Sidebar.vue
+++ b/apps/files/src/views/Sidebar.vue
@@ -366,6 +366,7 @@ export default {
                 */
                setActiveTab(id) {
                        OCA.Files.Sidebar.setActiveTab(id)
+                       this.tabs.forEach(tab => tab.setIsActive(id === tab.id))
                },
 
                /**
@@ -453,6 +454,7 @@ export default {
                                                if (this.$refs.tabs) {
                                                        this.$refs.tabs.updateTabs()
                                                }
+                                               this.setActiveTab(this.Sidebar.activeTab || this.tabs[0].id)
                                        })
                                } catch (error) {
                                        this.error = t('files', 'Error while loading the file data')

diff --git a/apps/files_versions/src/components/Version.vue b/apps/files_versions/src/components/Version.vue
index 096c31990f077e1996d4b7cb13d8c6f370df6eba..ec03a1c2b31eefd2cad8a546117714163cd25064 100644 (file)
--- a/apps/files_versions/src/components/Version.vue
+++ b/apps/files_versions/src/components/Version.vue
@@ -23,14 +23,15 @@
                        :force-display-actions="true"
                        data-files-versions-version>
                        <template #icon>
-                               <img v-if="(isCurrent || version.hasPreview) && !previewError"
+                               <div v-if="!(loadPreview || previewLoaded)" class="version__image" />
+                               <img v-else-if="isCurrent || version.hasPreview"
                                        :src="previewURL"
                                        alt=""
                                        decoding="async"
                                        fetchpriority="low"
                                        loading="lazy"
                                        class="version__image"
-                                       @error="previewError = true">
+                                       @load="previewLoaded = true">
                                <div v-else
                                        class="version__image">
                                        <ImageOffOutline :size="20" />
@@ -185,13 +186,17 @@ export default {
                        type: Boolean,
                        default: false,
                },
+               loadPreview: {
+                       type: Boolean,
+                       default: false,
+               },
        },
        data() {
                return {
+                       previewLoaded: false,
                        showVersionLabelForm: false,
                        formVersionLabelValue: this.version.label,
                        capabilities: loadState('core', 'capabilities', { files: { version_labeling: false, version_deletion: false } }),
-                       previewError: false,
                }
        },
        computed: {

diff --git a/apps/files_versions/src/files_versions_tab.js b/apps/files_versions/src/files_versions_tab.js
index 225add572527ab6b15cabbabfe6dafd7ea812363..8b81674640159b43a50ced3f9ab62b9cb0778655 100644 (file)
--- a/apps/files_versions/src/files_versions_tab.js
+++ b/apps/files_versions/src/files_versions_tab.js
@@ -59,6 +59,9 @@ window.addEventListener('DOMContentLoaded', function() {
                update(fileInfo) {
                        TabInstance.update(fileInfo)
                },
+               setIsActive(isActive) {
+                       TabInstance.setIsActive(isActive)
+               },
                destroy() {
                        TabInstance.$destroy()
                        TabInstance = null

diff --git a/apps/files_versions/src/views/VersionTab.vue b/apps/files_versions/src/views/VersionTab.vue
index 04b6ecf1addb6b68b254a2d19864b87e37fbc5bf..6d3b07c2f88bb3391d60f0630bf1b39b4258736a 100644 (file)
--- a/apps/files_versions/src/views/VersionTab.vue
+++ b/apps/files_versions/src/views/VersionTab.vue
@@ -19,6 +19,7 @@
        <ul data-files-versions-versions-list>
                <Version v-for="version in orderedVersions"
                        :key="version.mtime"
+                       :load-preview="isActive"
                        :version="version"
                        :file-info="fileInfo"
                        :is-current="version.mtime === fileInfo.mtime"
@@ -42,6 +43,7 @@ export default {
        data() {
                return {
                        fileInfo: null,
+                       isActive: false,
                        /** @type {import('../utils/versions.js').Version[]} */
                        versions: [],
                        loading: false,
@@ -89,6 +91,13 @@ export default {
                        this.fetchVersions()
                },
 
+               /**
+                * @param {boolean} isActive whether the tab is active
+                */
+               async setIsActive(isActive) {
+                       this.isActive = isActive
+               },
+
                /**
                 * Get the existing versions infos
                 */