[stable35] fix(videos): use live photo metadata for poster

.npmrc

@@ -0,0 +1,3 @@
+# SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+# SPDX-License-Identifier: AGPL-3.0-or-later
+engine-strict=false

css/viewer-init.css

@@ -1,5 +1,5 @@
 /* extracted by css-entry-points-plugin */
-@import './init-frNsZ-Bk.chunk.css';
+@import './init-C2ui847A.chunk.css';
 @import './previewUtils-CU5qdRbf.chunk.css';
 @import './NcIconSvgWrapper-Bui9PhAS-3xIBDiQU.chunk.css';
 @import './NcActionButton-BggjwMU5.chunk.css';

src/components/Videos.vue

@@ -47,7 +47,7 @@ import '@skjnldsv/vue-plyr/dist/vue-plyr.css'
 import { imagePath } from '@nextcloud/router'
 
 import logger from '../services/logger.js'
-import { findLivePhotoPeerFromName } from '../utils/livePhotoUtils'
+import { findLivePhotoImageForVideo } from '../utils/livePhotoUtils'
 import { getPreviewIfAny } from '../utils/previewUtils'
 import { preloadMedia } from '../services/mediaPreloader.js'
 import { localizeSpeedLabels, plyrTranslations } from '../utils/plyrTranslations'
@@ -74,7 +74,7 @@ export default {
 
 	computed: {
 		livePhotoPath() {
-			const peerFile = findLivePhotoPeerFromName(this, this.fileList)
+			const peerFile = findLivePhotoImageForVideo(this, this.fileList)
 
 			if (peerFile === undefined) {
 				return undefined

src/utils/livePhotoUtils.ts

@@ -10,17 +10,17 @@ const livePictureExtRegex = new RegExp(`\\.(${livePictureExt.join('|')})$`, 'i')
 
 /**
  * Return the peer live photo from a list of files based on its fileId
- * @param peerFileId
- * @param fileList
+ * @param peerFileId - The fileId of the peer file
+ * @param fileList - The list of files to search within
  */
 export function findLivePhotoPeerFromFileId(peerFileId: number, fileList: BasicFileInfo[]): BasicFileInfo | undefined {
 	return fileList.find(file => file.fileid === peerFileId)
 }
 
 /**
  * Return the peer live photo from a list of files based on the original file name.
- * @param referenceFile
- * @param fileList
+ * @param referenceFile - The file whose peer should be found by name
+ * @param fileList - The list of files to search within
  */
 export function findLivePhotoPeerFromName(referenceFile: BasicFileInfo, fileList: BasicFileInfo[]): BasicFileInfo | undefined {
 	return fileList.find(comparedFile => {
@@ -29,3 +29,23 @@ export function findLivePhotoPeerFromName(referenceFile: BasicFileInfo, fileList
 				&& (comparedFile.basename.startsWith(referenceFile.name) && livePictureExtRegex.test(comparedFile.basename))
 	})
 }
+
+/**
+ * Return the image associated with a live photo video using its DAV peer file ID.
+ * @param referenceFile - The video file whose poster should be found
+ * @param fileList - The list of files to search within
+ */
+export function findLivePhotoImageForVideo(referenceFile: BasicFileInfo, fileList: BasicFileInfo[]): BasicFileInfo | undefined {
+	// Try metadata-based matching first
+	const byMetadata = fileList.find(comparedFile => comparedFile.metadataFilesLivePhoto !== undefined
+		&& Number(comparedFile.metadataFilesLivePhoto) === Number(referenceFile.fileid)
+		&& livePictureExtRegex.test(comparedFile.basename))
+	if (byMetadata) {
+		return byMetadata
+	}
+	// Fallback to name-based matching for compatibility
+	return fileList.find(comparedFile => {
+		return comparedFile.filename !== referenceFile.filename
+			&& (comparedFile.basename.startsWith(referenceFile.name) && livePictureExtRegex.test(comparedFile.basename))
+	})
+}