[stable31] fix: Adapt sidebar tab to new fileinfo structure

cypress/e2e/sidebar.cy.ts

@@ -0,0 +1,62 @@
+/**
+ * SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+import { User } from '@nextcloud/cypress'
+import { mkdir, uploadTestMedia } from './photosUtils'
+import { randHash } from '../utils/index.js'
+
+const resizeObserverLoopErrRe = /^[^(ResizeObserver loop limit exceeded)]/
+Cypress.on('uncaught:exception', (err) => {
+	/* returning false here prevents Cypress from failing the test */
+	if (resizeObserverLoopErrRe.test(err.message)) {
+		return false
+	}
+})
+
+const alice = new User(`alice_${randHash()}`)
+
+describe('Sidebar tab', () => {
+	before(() => {
+		cy.createUser(alice).then(() => {
+			mkdir(alice, '/Photos')
+			uploadTestMedia(alice)
+
+			cy.runOccCommand('files:scan --all --generate-metadata')
+		})
+		cy.login(alice)
+	})
+
+	beforeEach(() => {
+		cy.visit('/apps/photos')
+	})
+
+	it('Should display EXIF data in the sidebar', () => {
+		cy.get('[data-test="media"]').eq(3).click()
+		cy.get('.viewer .modal-header .action-item__menutoggle').click()
+		cy.contains('Open sidebar').click()
+		cy.get('#tab-button-photos').click()
+
+		cy.get('.photo-detail__file').contains('Taken on Oct 27, 2019 at') // Ignoring exact time as it it timeszone dependent.
+		cy.get('.photo-detail__file').contains('242 KB ⸱ 16 MP ⸱ 4608 x 3456')
+		cy.get('.photo-detail__gps__title').contains('Annot')
+		cy.get('.photo-detail__camera').contains('OnePlus ONEPLUS A5000')
+		cy.get('.photo-detail__camera').contains('ƒ/1.7 ⸱ 1/2461 ⸱ 4.103mm ⸱ ISO160')
+	})
+
+	it('Should update EXIF data when changing photos', () => {
+		cy.get('[data-test="media"]').eq(3).click()
+		cy.get('.viewer .modal-header .action-item__menutoggle').click()
+		cy.contains('Open sidebar').click()
+		cy.get('#tab-button-photos').click()
+		cy.get('[aria-label="Next"]').click()
+
+		cy.get('.photo-detail__file').contains('Taken on Oct 24, 2019 at') // Ignoring exact time as it it timeszone dependent.
+		cy.get('.photo-detail__file').contains('178 KB ⸱ 16 MP ⸱ 4608 x 3456')
+		cy.get('.photo-detail__gps__title').contains('Lauris')
+		cy.get('.photo-detail__camera').contains('OnePlus ONEPLUS A5000')
+		cy.get('.photo-detail__camera').contains('ƒ/1.7 ⸱ 1/269 ⸱ 4.103mm ⸱ ISO250')
+	})
+})
+
+

lib/Listener/OriginalDateTimeMetadataProvider.php

@@ -27,10 +27,8 @@ public function __construct(
 	}
 
 	public array $regexpToDateFormatMap = [
-		'/^IMG_([0-9]{8}_[0-9]{6})/' => 'Ymd_Gis',
-		'/^PANO_([0-9]{8}_[0-9]{6})/' => 'Ymd_Gis',
-		'/^PXL_([0-9]{8}_[0-9]{6})/' => 'Ymd_Gis',
-		'/^([0-9]{4}-[0-9]{2}-[0-9]{2}-[0-9]{2}-[0-9]{2}-[0-9]{2}-[0-9]{4})/' => 'Y-m-d-G-i-s',
+		'/^[A-Z]{3,4}_([0-9]{8}_[0-9]{6})/' => 'Ymd_Gis', // Covers prefixes like "IMG_", "PANO_", "PXL_" and others
+		'/^([0-9]{4}-[0-9]{2}-[0-9]{2}-[0-9]{2}-[0-9]{2}-[0-9]{2}).+/' => 'Y-m-d-G-i-s',
 	];
 
 	private function dateToTimestamp(string $format, string $date, File $node): int|false {

src/sidebar.js

@@ -65,22 +65,4 @@ window.addEventListener('DOMContentLoaded', async function() {
 		const { default: PhotosTab } = await import(/* webpackPreload: true */ './views/PhotosTab.vue')
 		PhotosTabView = PhotosTabView ?? Vue.extend(PhotosTab)
 	}
-
-	/**
-	 *
-	 * @param metadataArray
-	 */
-	function parseMetadataArray(metadataArray) {
-		return metadataArray?.reduce((parsedArray, metadata) => ({ ...parsedArray, [metadata.nodeName]: metadata.textContent }), {})
-	}
-
-	OC.Files.getClient().addFileInfoParser(function(response) {
-		return {
-			'metadata-photos-original_date_time': response.propStat[0].properties[`{${OC.Files.Client.NS_NEXTCLOUD}}metadata-photos-original_date_time`],
-			'metadata-photos-exif': parseMetadataArray(response.propStat[0].properties[`{${OC.Files.Client.NS_NEXTCLOUD}}metadata-photos-exif`]),
-			'metadata-photos-ifd0': parseMetadataArray(response.propStat[0].properties[`{${OC.Files.Client.NS_NEXTCLOUD}}metadata-photos-ifd0`]),
-			'metadata-photos-gps': parseMetadataArray(response.propStat[0].properties[`{${OC.Files.Client.NS_NEXTCLOUD}}metadata-photos-gps`]),
-			'metadata-photos-place': response.propStat[0].properties[`{${OC.Files.Client.NS_NEXTCLOUD}}metadata-photos-place`],
-		}
-	})
 })

src/views/PhotosTab.vue

@@ -69,40 +69,40 @@ export default {
 		 * @return {object}
 		 */
 		exif() {
-			return this.fileInfo['metadata-photos-exif']
+			return this.fileInfo?.attributes['metadata-photos-exif']
 		},
 		/**
 		 * @return {object}
 		 */
 		ifd0() {
-			return this.fileInfo['metadata-photos-ifd0']
+			return this.fileInfo?.attributes['metadata-photos-ifd0']
 		},
 		/**
 		 * @return {object}
 		 */
 		place() {
-			return this.fileInfo['metadata-photos-place']
+			return this.fileInfo?.attributes['metadata-photos-place']
 		},
 		/**
 		 * @return {object}
 		 */
 		gps() {
-			const gps = this.fileInfo['metadata-photos-gps']
+			const gps = this.fileInfo?.attributes['metadata-photos-gps']
 			if (!gps) {
 				return undefined
 			}
 
 			return {
-				latitude: Number.parseFloat(gps.latitude || 0),
-				longitude: Number.parseFloat(gps.longitude || 0),
-				altitude: Number.parseFloat(gps.altitude || 0),
+				latitude: Number.parseFloat(gps.latitude || '0'),
+				longitude: Number.parseFloat(gps.longitude || '0'),
+				altitude: Number.parseFloat(gps.altitude || '0'),
 			}
 		},
 		/**
 		 * @return {object}
 		 */
 		originalDateTime() {
-			return this.fileInfo['metadata-photos-original_date_time'] * 1000
+			return (this.fileInfo?.attributes['metadata-photos-original_date_time'] ?? 0) * 1000
 		},
 		/**
 		 * @return {string}
@@ -180,6 +180,10 @@ export default {
 		 * @return {string}
 		 */
 		pixelCount() {
+			if (this.ifd0 === undefined) {
+				return undefined
+			}
+
 			let count = this.ifd0.ImageWidth * this.ifd0.ImageLength
 			let round = 0