[stable24] Use preview for unsupported images

cypress/integration/image-apng.cy.js

@@ -0,0 +1,70 @@
+/**
+ * @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>
+ *
+ * @author John Molakvoæ <skjnldsv@protonmail.com>
+ *
+ * @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/>.
+ *
+ */
+
+import { randHash } from '../utils/'
+const randUser = randHash()
+
+describe('Open image-apng.png in viewer', function() {
+	before(function() {
+		// Init user
+		cy.nextcloudCreateUser(randUser, 'password')
+		cy.login(randUser, 'password')
+
+		// Upload test files
+		cy.uploadFile('image-apng.png', 'image/png')
+		cy.visit('/apps/files')
+
+		// wait a bit for things to be settled
+		cy.wait(1000)
+	})
+	after(function() {
+		cy.logout()
+	})
+
+	it('See image-apng.png in the list', function() {
+		cy.get('#fileList tr[data-file="image-apng.png"]', { timeout: 10000 })
+			.should('contain', 'image-apng.png')
+	})
+
+	it('Open the viewer on file click', function() {
+		cy.openFile('image-apng.png')
+		cy.get('body > .viewer').should('be.visible')
+	})
+
+	it('Does not see a loading animation', function() {
+		cy.get('body > .viewer', { timeout: 10000 })
+			.should('be.visible')
+			.and('have.class', 'modal-mask')
+			.and('not.have.class', 'icon-loading')
+	})
+
+	it('See the menu icon and title on the viewer header', function() {
+		cy.get('body > .viewer .modal-title').should('contain', 'image-apng.png')
+		cy.get('body > .viewer .modal-header button.action-item__menutoggle').should('be.visible')
+		cy.get('body > .viewer .modal-header button.header-close').should('be.visible')
+	})
+
+	it('Does not see navigation arrows', function() {
+		cy.get('body > .viewer a.prev').should('not.be.visible')
+		cy.get('body > .viewer a.next').should('not.be.visible')
+	})
+})

cypress/integration/image.ico.cy.js

@@ -0,0 +1,70 @@
+/**
+ * @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>
+ *
+ * @author John Molakvoæ <skjnldsv@protonmail.com>
+ *
+ * @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/>.
+ *
+ */
+
+import { randHash } from '../utils/'
+const randUser = randHash()
+
+describe('Open image.ico in viewer', function() {
+	before(function() {
+		// Init user
+		cy.nextcloudCreateUser(randUser, 'password')
+		cy.login(randUser, 'password')
+
+		// Upload test files
+		cy.uploadFile('image.ico', 'image/x-icon')
+		cy.visit('/apps/files')
+
+		// wait a bit for things to be settled
+		cy.wait(1000)
+	})
+	after(function() {
+		cy.logout()
+	})
+
+	it('See image.ico in the list', function() {
+		cy.get('.files-fileList tr[data-file="image.ico"]', { timeout: 10000 })
+			.should('contain', 'image.ico')
+	})
+
+	it('Open the viewer on file click', function() {
+		cy.openFile('image.ico')
+		cy.get('body > .viewer').should('be.visible')
+	})
+
+	it('Does not see a loading animation', function() {
+		cy.get('body > .viewer', { timeout: 10000 })
+			.should('be.visible')
+			.and('have.class', 'modal-mask')
+			.and('not.have.class', 'icon-loading')
+	})
+
+	it('See the menu icon and title on the viewer header', function() {
+		cy.get('body > .viewer .modal-title').should('contain', 'image.ico')
+		cy.get('body > .viewer .modal-header button.action-item__menutoggle').should('be.visible')
+		cy.get('body > .viewer .modal-header button.header-close').should('be.visible')
+	})
+
+	it('Does not see navigation arrows', function() {
+		cy.get('body > .viewer button.prev').should('not.be.visible')
+		cy.get('body > .viewer button.next').should('not.be.visible')
+	})
+})

src/components/Images.vue

@@ -75,14 +75,17 @@ export default {
 
 	asyncComputed: {
 		data() {
-			switch (this.mime) {
-			case 'image/svg+xml':
+			// Avoid svg xss attack vector
+			if (this.mime === 'image/svg+xml') {
 				return this.getBase64FromImage()
-			case 'image/gif':
+			}
+
+			// Load the raw gif instead of the static preview
+			if (this.mime === 'image/gif') {
 				return this.davPath
-			default:
-				return this.previewpath
 			}
+
+			return this.previewPath
 		},
 	},
 	watch: {

src/models/images.js

@@ -26,21 +26,37 @@ import Images from '../components/Images.vue'
 
 const enabledPreviewProviders = loadState(appName, 'enabled_preview_providers', [])
 
-const mimes = [
-	'image/bmp',
+/**
+ * Those mimes needs a proper preview to be displayed
+ * if they are not enabled on the server, let's not activate them.
+ */
+const previewSupportedMimes = [
 	'image/heic',
 	'image/heif',
+	'image/tiff',
+	'image/x-xbitmap',
+]
+
+/**
+ * Those mimes are always supported by the browser
+ * Since we fallback to the source image if there is no
+ * preview, we can always include them.
+ */
+const browserSupportedMimes = [
+	'image/apng',
+	'image/bmp',
+	'image/gif',
 	'image/jpeg',
 	'image/png',
-	'image/tiff',
+	'image/svg+xml',
 	'image/webp',
-	'image/x-xbitmap',
+	'image/x-icon',
 ]
 
 // Filter out supported mimes that are _not_
 // enabled in the preview API
 const filterEnabledMimes = () => {
-	return mimes.filter(filter => {
+	return previewSupportedMimes.filter(filter => {
 		return enabledPreviewProviders.findIndex(mimeRegex => {
 			// Remove leading and trailing slash from string regex
 			const regex = new RegExp(mimeRegex.replace(/^\/|\/$/g, ''), 'i')
@@ -50,7 +66,7 @@ const filterEnabledMimes = () => {
 }
 
 const enabledMimes = filterEnabledMimes()
-const ignoredMimes = mimes.filter(x => !enabledMimes.includes(x))
+const ignoredMimes = previewSupportedMimes.filter(x => !enabledMimes.includes(x))
 if (ignoredMimes.length > 0) {
 	logger.warn('Some mimes were ignored because they are not enabled in the server previews config', { ignoredMimes })
 }
@@ -59,9 +75,7 @@ export default {
 	id: 'images',
 	group: 'media',
 	mimes: [
-		// Gif and svg images does not rely on previews
-		'image/gif',
-		'image/svg+xml',
+		...browserSupportedMimes,
 		...enabledMimes,
 	],
 	component: Images,