fix(files): preview loading

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

apps/files/appinfo/info.xml

@@ -5,8 +5,9 @@
 	<name>Files</name>
 	<summary>File Management</summary>
 	<description>File Management</description>
-	<version>1.23.0</version>
+	<version>2.0.0</version>
 	<licence>agpl</licence>
+	<author>John Molakvoæ</author>
 	<author>Robin Appelman</author>
 	<author>Vincent Petry</author>
 	<types>

apps/files/src/components/FileEntry.vue

@@ -60,11 +60,14 @@
 				</template>
 
 				<!-- Decorative image, should not be aria documented -->
-				<img v-else-if="previewUrl && !backgroundFailed"
+				<img v-else-if="previewUrl && backgroundFailed !== true"
 					ref="previewImg"
+					alt=""
 					class="files-list__row-icon-preview"
+					:class="{'files-list__row-icon-preview--loaded': backgroundFailed === false}"
 					:src="previewUrl"
-					@error="backgroundFailed = true">
+					@error="backgroundFailed = true"
+					@load="backgroundFailed = false">
 
 				<FileIcon v-else />
 
@@ -77,7 +80,7 @@
 			</span>
 
 			<!-- Rename input -->
-			<form v-show="isRenaming"
+			<form v-if="isRenaming"
 				v-on-click-outside="stopRenaming"
 				:aria-hidden="!isRenaming"
 				:aria-label="t('files', 'Rename file')"
@@ -94,7 +97,7 @@
 					@keyup.esc="stopRenaming" />
 			</form>
 
-			<a v-show="!isRenaming"
+			<a v-else
 				ref="basename"
 				:aria-hidden="isRenaming"
 				class="files-list__row-name-link"
@@ -309,8 +312,7 @@ export default Vue.extend({
 
 	data() {
 		return {
-			dummyPreviewUrl: 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"/>',
-			backgroundFailed: false,
+			backgroundFailed: undefined,
 			loading: '',
 			dragover: false,
 
@@ -651,7 +653,7 @@ export default Vue.extend({
 			this.loading = ''
 
 			// Reset background state
-			this.backgroundFailed = false
+			this.backgroundFailed = undefined
 			if (this.$refs.previewImg) {
 				this.$refs.previewImg.src = ''
 			}
@@ -1030,7 +1032,7 @@ tr {
 }
 
 /* Preview not loaded animation effect */
-.files-list__row-icon-preview:not([style*='background']) {
+.files-list__row-icon-preview:not(.files-list__row-icon-preview--loaded) {
     background: var(--color-loading-dark);
 	// animation: preview-gradient-fade 1.2s ease-in-out infinite;
 }

dist/5941-5941.js.LICENSE.txt

@@ -26,28 +26,6 @@
 
 /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */
 
-/**
- * @copyright 2022 Louis Chmn <louis@chmn.me>
- *
- * @author Louis Chmn <louis@chmn.me>
- *
- * @license AGPL-3.0-or-later
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, either version 3 of the
- * License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program. If not, see <http://www.gnu.org/licenses/>.
- *
- */
-
 /**
  * @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>
  *

dist/core-maintenance.js

@@ -1,2 +1,2 @@
-!function(){"use strict";var n,e={49e3:function(n,e,t){var o=t(48033),r=t(79753),i=t(25108),u=(0,r.getRootUrl)()+"/status.php";!function n(){i.info("checking the Nextcloud maintenance status"),o.Z.get(u).then((function(n){return n.data})).then((function(e){if(!1===e.maintenance)return i.info("Nextcloud is not in maintenance mode anymore -> reloading"),void window.location.reload();i.info("Nextcloud is still in maintenance mode"),setTimeout(n,2e4)})).catch(i.error.bind(void 0))}()}},t={};function o(n){var r=t[n];if(void 0!==r)return r.exports;var i=t[n]={id:n,loaded:!1,exports:{}};return e[n].call(i.exports,i,i.exports,o),i.loaded=!0,i.exports}o.m=e,n=[],o.O=function(e,t,r,i){if(!t){var u=1/0;for(l=0;l<n.length;l++){t=n[l][0],r=n[l][1],i=n[l][2];for(var c=!0,a=0;a<t.length;a++)(!1&i||u>=i)&&Object.keys(o.O).every((function(n){return o.O[n](t[a])}))?t.splice(a--,1):(c=!1,i<u&&(u=i));if(c){n.splice(l--,1);var f=r();void 0!==f&&(e=f)}}return e}i=i||0;for(var l=n.length;l>0&&n[l-1][2]>i;l--)n[l]=n[l-1];n[l]=[t,r,i]},o.n=function(n){var e=n&&n.__esModule?function(){return n.default}:function(){return n};return o.d(e,{a:e}),e},o.d=function(n,e){for(var t in e)o.o(e,t)&&!o.o(n,t)&&Object.defineProperty(n,t,{enumerable:!0,get:e[t]})},o.e=function(){return Promise.resolve()},o.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(n){if("object"==typeof window)return window}}(),o.o=function(n,e){return Object.prototype.hasOwnProperty.call(n,e)},o.r=function(n){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(n,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(n,"__esModule",{value:!0})},o.nmd=function(n){return n.paths=[],n.children||(n.children=[]),n},o.j=1802,function(){o.b=document.baseURI||self.location.href;var n={1802:0};o.O.j=function(e){return 0===n[e]};var e=function(e,t){var r,i,u=t[0],c=t[1],a=t[2],f=0;if(u.some((function(e){return 0!==n[e]}))){for(r in c)o.o(c,r)&&(o.m[r]=c[r]);if(a)var l=a(o)}for(e&&e(t);f<u.length;f++)i=u[f],o.o(n,i)&&n[i]&&n[i][0](),n[i]=0;return o.O(l)},t=self.webpackChunknextcloud=self.webpackChunknextcloud||[];t.forEach(e.bind(null,0)),t.push=e.bind(null,t.push.bind(t))}(),o.nc=void 0;var r=o.O(void 0,[7874],(function(){return o(49e3)}));r=o.O(r)}();
-//# sourceMappingURL=core-maintenance.js.map?v=b86da2eed72a6f76d114
+!function(){"use strict";var n,e={49e3:function(n,e,t){var o=t(93664),r=t(79753),i=t(25108),u=(0,r.getRootUrl)()+"/status.php";!function n(){i.info("checking the Nextcloud maintenance status"),o.Z.get(u).then((function(n){return n.data})).then((function(e){if(!1===e.maintenance)return i.info("Nextcloud is not in maintenance mode anymore -> reloading"),void window.location.reload();i.info("Nextcloud is still in maintenance mode"),setTimeout(n,2e4)})).catch(i.error.bind(void 0))}()}},t={};function o(n){var r=t[n];if(void 0!==r)return r.exports;var i=t[n]={id:n,loaded:!1,exports:{}};return e[n].call(i.exports,i,i.exports,o),i.loaded=!0,i.exports}o.m=e,n=[],o.O=function(e,t,r,i){if(!t){var u=1/0;for(l=0;l<n.length;l++){t=n[l][0],r=n[l][1],i=n[l][2];for(var c=!0,a=0;a<t.length;a++)(!1&i||u>=i)&&Object.keys(o.O).every((function(n){return o.O[n](t[a])}))?t.splice(a--,1):(c=!1,i<u&&(u=i));if(c){n.splice(l--,1);var f=r();void 0!==f&&(e=f)}}return e}i=i||0;for(var l=n.length;l>0&&n[l-1][2]>i;l--)n[l]=n[l-1];n[l]=[t,r,i]},o.n=function(n){var e=n&&n.__esModule?function(){return n.default}:function(){return n};return o.d(e,{a:e}),e},o.d=function(n,e){for(var t in e)o.o(e,t)&&!o.o(n,t)&&Object.defineProperty(n,t,{enumerable:!0,get:e[t]})},o.e=function(){return Promise.resolve()},o.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(n){if("object"==typeof window)return window}}(),o.o=function(n,e){return Object.prototype.hasOwnProperty.call(n,e)},o.r=function(n){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(n,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(n,"__esModule",{value:!0})},o.nmd=function(n){return n.paths=[],n.children||(n.children=[]),n},o.j=1802,function(){o.b=document.baseURI||self.location.href;var n={1802:0};o.O.j=function(e){return 0===n[e]};var e=function(e,t){var r,i,u=t[0],c=t[1],a=t[2],f=0;if(u.some((function(e){return 0!==n[e]}))){for(r in c)o.o(c,r)&&(o.m[r]=c[r]);if(a)var l=a(o)}for(e&&e(t);f<u.length;f++)i=u[f],o.o(n,i)&&n[i]&&n[i][0](),n[i]=0;return o.O(l)},t=self.webpackChunknextcloud=self.webpackChunknextcloud||[];t.forEach(e.bind(null,0)),t.push=e.bind(null,t.push.bind(t))}(),o.nc=void 0;var r=o.O(void 0,[7874],(function(){return o(49e3)}));r=o.O(r)}();
+//# sourceMappingURL=core-maintenance.js.map?v=8a93fc0e3bf1faadb384

dist/settings-apps.js

@@ -1,2 +1,2 @@
-!function(){"use strict";var n,e={49983:function(n,e,t){var r=t(48033),o=t(79753),i=t(69183);window.OC.Settings=window.OC.Settings||{},window.OC.Settings.Apps=window.OC.Settings.Apps||{rebuildNavigation:function(){return r.Z.get((0,o.generateOcsUrl)("core/navigation",2)+"/apps?format=json").then((function(n){var e=n.data;200===e.ocs.meta.statuscode&&((0,i.j8)("nextcloud:app-menu.refresh",{apps:e.ocs.data}),window.dispatchEvent(new Event("resize")))}))}}}},t={};function r(n){var o=t[n];if(void 0!==o)return o.exports;var i=t[n]={id:n,loaded:!1,exports:{}};return e[n].call(i.exports,i,i.exports,r),i.loaded=!0,i.exports}r.m=e,n=[],r.O=function(e,t,o,i){if(!t){var u=1/0;for(s=0;s<n.length;s++){t=n[s][0],o=n[s][1],i=n[s][2];for(var a=!0,c=0;c<t.length;c++)(!1&i||u>=i)&&Object.keys(r.O).every((function(n){return r.O[n](t[c])}))?t.splice(c--,1):(a=!1,i<u&&(u=i));if(a){n.splice(s--,1);var f=o();void 0!==f&&(e=f)}}return e}i=i||0;for(var s=n.length;s>0&&n[s-1][2]>i;s--)n[s]=n[s-1];n[s]=[t,o,i]},r.n=function(n){var e=n&&n.__esModule?function(){return n.default}:function(){return n};return r.d(e,{a:e}),e},r.d=function(n,e){for(var t in e)r.o(e,t)&&!r.o(n,t)&&Object.defineProperty(n,t,{enumerable:!0,get:e[t]})},r.e=function(){return Promise.resolve()},r.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(n){if("object"==typeof window)return window}}(),r.o=function(n,e){return Object.prototype.hasOwnProperty.call(n,e)},r.r=function(n){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(n,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(n,"__esModule",{value:!0})},r.nmd=function(n){return n.paths=[],n.children||(n.children=[]),n},r.j=1647,function(){r.b=document.baseURI||self.location.href;var n={1647:0};r.O.j=function(e){return 0===n[e]};var e=function(e,t){var o,i,u=t[0],a=t[1],c=t[2],f=0;if(u.some((function(e){return 0!==n[e]}))){for(o in a)r.o(a,o)&&(r.m[o]=a[o]);if(c)var s=c(r)}for(e&&e(t);f<u.length;f++)i=u[f],r.o(n,i)&&n[i]&&n[i][0](),n[i]=0;return r.O(s)},t=self.webpackChunknextcloud=self.webpackChunknextcloud||[];t.forEach(e.bind(null,0)),t.push=e.bind(null,t.push.bind(t))}(),r.nc=void 0;var o=r.O(void 0,[7874],(function(){return r(49983)}));o=r.O(o)}();
-//# sourceMappingURL=settings-apps.js.map?v=2aa3a3d9e4f3e5c8cb84
+!function(){"use strict";var n,e={49983:function(n,e,t){var r=t(93664),o=t(79753),i=t(69183);window.OC.Settings=window.OC.Settings||{},window.OC.Settings.Apps=window.OC.Settings.Apps||{rebuildNavigation:function(){return r.Z.get((0,o.generateOcsUrl)("core/navigation",2)+"/apps?format=json").then((function(n){var e=n.data;200===e.ocs.meta.statuscode&&((0,i.j8)("nextcloud:app-menu.refresh",{apps:e.ocs.data}),window.dispatchEvent(new Event("resize")))}))}}}},t={};function r(n){var o=t[n];if(void 0!==o)return o.exports;var i=t[n]={id:n,loaded:!1,exports:{}};return e[n].call(i.exports,i,i.exports,r),i.loaded=!0,i.exports}r.m=e,n=[],r.O=function(e,t,o,i){if(!t){var u=1/0;for(s=0;s<n.length;s++){t=n[s][0],o=n[s][1],i=n[s][2];for(var a=!0,c=0;c<t.length;c++)(!1&i||u>=i)&&Object.keys(r.O).every((function(n){return r.O[n](t[c])}))?t.splice(c--,1):(a=!1,i<u&&(u=i));if(a){n.splice(s--,1);var f=o();void 0!==f&&(e=f)}}return e}i=i||0;for(var s=n.length;s>0&&n[s-1][2]>i;s--)n[s]=n[s-1];n[s]=[t,o,i]},r.n=function(n){var e=n&&n.__esModule?function(){return n.default}:function(){return n};return r.d(e,{a:e}),e},r.d=function(n,e){for(var t in e)r.o(e,t)&&!r.o(n,t)&&Object.defineProperty(n,t,{enumerable:!0,get:e[t]})},r.e=function(){return Promise.resolve()},r.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(n){if("object"==typeof window)return window}}(),r.o=function(n,e){return Object.prototype.hasOwnProperty.call(n,e)},r.r=function(n){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(n,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(n,"__esModule",{value:!0})},r.nmd=function(n){return n.paths=[],n.children||(n.children=[]),n},r.j=1647,function(){r.b=document.baseURI||self.location.href;var n={1647:0};r.O.j=function(e){return 0===n[e]};var e=function(e,t){var o,i,u=t[0],a=t[1],c=t[2],f=0;if(u.some((function(e){return 0!==n[e]}))){for(o in a)r.o(a,o)&&(r.m[o]=a[o]);if(c)var s=c(r)}for(e&&e(t);f<u.length;f++)i=u[f],r.o(n,i)&&n[i]&&n[i][0](),n[i]=0;return r.O(s)},t=self.webpackChunknextcloud=self.webpackChunknextcloud||[];t.forEach(e.bind(null,0)),t.push=e.bind(null,t.push.bind(t))}(),r.nc=void 0;var o=r.O(void 0,[7874],(function(){return r(49983)}));o=r.O(o)}();
+//# sourceMappingURL=settings-apps.js.map?v=19f79cf48705090f8898