From 859efbf03ab92045d8132727406d276d5966f805 Mon Sep 17 00:00:00 2001
From: Louis Chemineau <louis@chmn.me>
Date: Thu, 4 Jan 2024 14:12:14 +0100
Subject: [PATCH] Add live photo support base on files metadata

Signed-off-by: Louis Chemineau <louis@chmn.me>
---
 .../images/images-custom-list-loadmore.cy.ts  |   6 +-
 cypress/e2e/images/images-custom-list.cy.ts   |   8 +-
 cypress/e2e/images/images.cy.ts               |  10 +-
 cypress/e2e/mixins/image.ts                   |   2 +-
 cypress/e2e/non-dav-files.cy.ts               |   2 +-
 src/components/Images.vue                     | 193 ++++++++++++++----
 src/components/Videos.vue                     |  24 +--
 src/mixins/Mime.js                            |   5 +
 src/mixins/PreviewUrl.js                      |  25 +--
 src/services/FileInfo.ts                      |  32 +--
 src/services/FileList.ts                      |  23 +--
 src/utils/fileUtils.ts                        |  11 +-
 src/utils/livePhotoUtils.ts                   |  48 +++++
 .../utils/models.ts                           |  17 +-
 src/utils/previewUtils.ts                     |  50 +++++
 15 files changed, 319 insertions(+), 137 deletions(-)
 create mode 100644 src/utils/livePhotoUtils.ts
 rename js/viewer-node_modules_nextcloud_dialogs_dist_chunks_index-2b379907_mjs.js.LICENSE.txt => src/utils/models.ts (50%)
 create mode 100644 src/utils/previewUtils.ts

diff --git a/cypress/e2e/images/images-custom-list-loadmore.cy.ts b/cypress/e2e/images/images-custom-list-loadmore.cy.ts
index be89b097b..080cfab14 100644
--- a/cypress/e2e/images/images-custom-list-loadmore.cy.ts
+++ b/cypress/e2e/images/images-custom-list-loadmore.cy.ts
@@ -157,7 +157,7 @@ describe('Open custom list of images in viewer with pagination', function() {
 	})
 
 	it('The image source is the preview url', function() {
-		cy.get('body > .viewer .modal-container img.viewer__file.viewer__file--active')
+		cy.get('body > .viewer .modal-container .viewer__file.viewer__file--active img')
 			.should('have.attr', 'src')
 			.and('contain', '/index.php/core/preview')
 	})
@@ -191,7 +191,7 @@ describe('Open custom list of images in viewer with pagination', function() {
 	})
 
 	it('The image source is the preview url', function() {
-		cy.get('body > .viewer .modal-container img.viewer__file.viewer__file--active')
+		cy.get('body > .viewer .modal-container .viewer__file.viewer__file--active img')
 			.should('have.attr', 'src')
 			.and('contain', '/index.php/core/preview')
 	})
@@ -211,7 +211,7 @@ describe('Open custom list of images in viewer with pagination', function() {
 	})
 
 	it('The image source is the preview url', function() {
-		cy.get('body > .viewer .modal-container img.viewer__file.viewer__file--active')
+		cy.get('body > .viewer .modal-container .viewer__file.viewer__file--active img')
 			.should('have.attr', 'src')
 			.and('contain', '/index.php/core/preview')
 	})
diff --git a/cypress/e2e/images/images-custom-list.cy.ts b/cypress/e2e/images/images-custom-list.cy.ts
index 72f576d4d..fc3ca87be 100644
--- a/cypress/e2e/images/images-custom-list.cy.ts
+++ b/cypress/e2e/images/images-custom-list.cy.ts
@@ -108,7 +108,7 @@ describe('Open custom images list in viewer', function() {
 	})
 
 	it('The image source is the preview url', function() {
-		cy.get('body > .viewer .modal-container img.viewer__file.viewer__file--active')
+		cy.get('body > .viewer .modal-container .viewer__file.viewer__file--active img')
 			.should('have.attr', 'src')
 			.and('contain', '/index.php/core/preview')
 	})
@@ -128,7 +128,7 @@ describe('Open custom images list in viewer', function() {
 	})
 
 	it('The image source is the preview url', function() {
-		cy.get('body > .viewer .modal-container img.viewer__file.viewer__file--active')
+		cy.get('body > .viewer .modal-container .viewer__file.viewer__file--active img')
 			.should('have.attr', 'src')
 			.and('contain', '/index.php/core/preview')
 	})
@@ -147,7 +147,7 @@ describe('Open custom images list in viewer', function() {
 	})
 
 	it('The image source is the preview url', function() {
-		cy.get('body > .viewer .modal-container img.viewer__file.viewer__file--active')
+		cy.get('body > .viewer .modal-container .viewer__file.viewer__file--active img')
 			.should('have.attr', 'src')
 			.and('contain', '/index.php/core/preview')
 	})
@@ -166,7 +166,7 @@ describe('Open custom images list in viewer', function() {
 	})
 
 	it('The image source is the preview url', function() {
-		cy.get('body > .viewer .modal-container img.viewer__file.viewer__file--active')
+		cy.get('body > .viewer .modal-container .viewer__file.viewer__file--active img')
 			.should('have.attr', 'src')
 			.and('contain', '/index.php/core/preview')
 	})
diff --git a/cypress/e2e/images/images.cy.ts b/cypress/e2e/images/images.cy.ts
index dae523186..3c390b071 100644
--- a/cypress/e2e/images/images.cy.ts
+++ b/cypress/e2e/images/images.cy.ts
@@ -63,7 +63,7 @@ describe('Open images in viewer', function() {
 	})
 
 	it('The image source is the preview url', function() {
-		cy.get('body > .viewer .modal-container img.viewer__file.viewer__file--active')
+		cy.get('body > .viewer .modal-container .viewer__file.viewer__file--active img')
 			.should('have.attr', 'src')
 			.and('contain', '/index.php/core/preview')
 	})
@@ -97,7 +97,7 @@ describe('Open images in viewer', function() {
 	})
 
 	it('The image source is the preview url', function() {
-		cy.get('body > .viewer .modal-container img.viewer__file.viewer__file--active')
+		cy.get('body > .viewer .modal-container .viewer__file.viewer__file--active img')
 			.should('have.attr', 'src')
 			.and('contain', '/index.php/core/preview')
 	})
@@ -117,7 +117,7 @@ describe('Open images in viewer', function() {
 	})
 
 	it('The image source is the preview url', function() {
-		cy.get('body > .viewer .modal-container img.viewer__file.viewer__file--active')
+		cy.get('body > .viewer .modal-container .viewer__file.viewer__file--active img')
 			.should('have.attr', 'src')
 			.and('contain', '/index.php/core/preview')
 	})
@@ -138,7 +138,7 @@ describe('Open images in viewer', function() {
 	})
 
 	it('The image source is the preview url', function() {
-		cy.get('body > .viewer .modal-container img.viewer__file.viewer__file--active')
+		cy.get('body > .viewer .modal-container .viewer__file.viewer__file--active img')
 			.should('have.attr', 'src')
 			.and('contain', '/index.php/core/preview')
 	})
@@ -158,7 +158,7 @@ describe('Open images in viewer', function() {
 	})
 
 	it('The image source is the preview url', function() {
-		cy.get('body > .viewer .modal-container img.viewer__file.viewer__file--active')
+		cy.get('body > .viewer .modal-container .viewer__file.viewer__file--active img')
 			.should('have.attr', 'src')
 			.and('contain', '/index.php/core/preview')
 	})
diff --git a/cypress/e2e/mixins/image.ts b/cypress/e2e/mixins/image.ts
index 6cccfee46..39095a348 100644
--- a/cypress/e2e/mixins/image.ts
+++ b/cypress/e2e/mixins/image.ts
@@ -81,7 +81,7 @@ export default function(fileName = 'image1.jpg', mimeType = 'image/jpeg', source
 	})
 
 	it(`The image source is the ${source ? 'remote' : 'preview'} url`, function() {
-		cy.get('body > .viewer .modal-container img.viewer__file.viewer__file--active')
+		cy.get('body > .viewer .modal-container .viewer__file.viewer__file--active img')
 			.should('have.attr', 'src')
 			.and('contain', source ?? '/index.php/core/preview')
 	})
diff --git a/cypress/e2e/non-dav-files.cy.ts b/cypress/e2e/non-dav-files.cy.ts
index efbda1aba..33ab16144 100644
--- a/cypress/e2e/non-dav-files.cy.ts
+++ b/cypress/e2e/non-dav-files.cy.ts
@@ -83,7 +83,7 @@ describe('Open non-dav files in viewer', function() {
 	})
 
 	it('The image source is the remote url', function() {
-		cy.get('body > .viewer .modal-container img.viewer__file.viewer__file--active')
+		cy.get('body > .viewer .modal-container .viewer__file.viewer__file--active img')
 			.should('have.attr', 'src')
 			.and('contain', source)
 	})
diff --git a/src/components/Images.vue b/src/components/Images.vue
index 2a80277fe..e1bf2612d 100644
--- a/src/components/Images.vue
+++ b/src/components/Images.vue
@@ -21,34 +21,82 @@
  -->
 
 <template>
-	<ImageEditor v-if="editing"
-		:mime="mime"
-		:src="src"
-		:fileid="fileid"
-		@close="onClose" />
-
-	<img v-else-if="data !== null"
-		:alt="alt"
-		:class="{
-			dragging,
-			loaded,
-			zoomed: zoomRatio !== 1
-		}"
-		:src="data"
-		:style="imgStyle"
-		@error.capture.prevent.stop.once="onFail"
-		@load="updateImgSize"
-		@wheel="updateZoom"
-		@dblclick.prevent="onDblclick"
-		@mousedown.prevent="dragStart">
+	<div class="image_container">
+		<ImageEditor v-if="editing"
+			:mime="mime"
+			:src="src"
+			:fileid="fileid"
+			@close="onClose" />
+
+		<template v-else-if="data !== null">
+			<img v-if="!livePhotoCanBePlayed"
+				ref="image"
+				:alt="alt"
+				:class="{
+					dragging,
+					loaded,
+					zoomed: zoomRatio !== 1
+				}"
+				:src="data"
+				:style="imgStyle"
+				@error.capture.prevent.stop.once="onFail"
+				@load="updateImgSize"
+				@wheel="updateZoom"
+				@dblclick.prevent="onDblclick"
+				@mousedown.prevent="dragStart">
+
+			<template v-if="livePhoto">
+				<video v-show="livePhotoCanBePlayed"
+					ref="video"
+					:class="{
+						dragging,
+						loaded,
+						zoomed: zoomRatio !== 1
+					}"
+					:style="imgStyle"
+					:playsinline="true"
+					:poster="data"
+					:src="livePhotoSrc"
+					preload="metadata"
+					@canplaythrough="doneLoadingLivePhoto"
+					@loadedmetadata="updateImgSize"
+					@wheel="updateZoom"
+					@error.capture.prevent.stop.once="onFail"
+					@dblclick.prevent="onDblclick"
+					@mousedown.prevent="dragStart"
+					@ended="stopLivePhoto" />
+				<button v-if="width !== 0"
+					class="live-photo_play_button"
+					:style="{left: `calc(50% - ${width/2}px)`}"
+					:disabled="!livePhotoCanBePlayed"
+					:aria-description="t('viewer', 'Play the live photo')"
+					@click="playLivePhoto"
+					@pointerenter="playLivePhoto"
+					@focus="playLivePhoto"
+					@pointerleave="stopLivePhoto"
+					@blur="stopLivePhoto">
+					<PlayCircleOutline v-if="livePhotoCanBePlayed" />
+					<NcLoadingIcon v-else />
+					{{ t('viewer', 'LIVE') }}
+				</button>
+			</template>
+		</template>
+	</div>
 </template>
 
 <script>
-import axios from '@nextcloud/axios'
 import Vue from 'vue'
 import AsyncComputed from 'vue-async-computed'
-import ImageEditor from './ImageEditor.vue'
+import PlayCircleOutline from 'vue-material-design-icons/PlayCircleOutline.vue'
+
+import axios from '@nextcloud/axios'
 import { basename } from '@nextcloud/paths'
+import { translate } from '@nextcloud/l10n'
+import { NcLoadingIcon } from '@nextcloud/vue'
+
+import ImageEditor from './ImageEditor.vue'
+import { findLivePhotoPeerFromFileId } from '../utils/livePhotoUtils'
+import { getDavPath } from '../utils/fileUtils'
 
 Vue.use(AsyncComputed)
 
@@ -57,6 +105,8 @@ export default {
 
 	components: {
 		ImageEditor,
+		PlayCircleOutline,
+		NcLoadingIcon,
 	},
 
 	props: {
@@ -76,6 +126,7 @@ export default {
 			shiftY: 0,
 			zoomRatio: 1,
 			fallback: false,
+			livePhotoCanBePlayed: false,
 		}
 	},
 
@@ -103,6 +154,21 @@ export default {
 				width: this.zoomWidth + 'px',
 			}
 		},
+		livePhoto() {
+			return findLivePhotoPeerFromFileId(this.metadataFilesLivePhoto, this.fileList)
+		},
+		livePhotoSrc() {
+			return this.livePhoto?.source ?? this.livePhotoDavPath
+		},
+		/** @return {string|null} */
+		livePhotoDavPath() {
+			return this.livePhoto
+				? getDavPath({
+					filename: this.livePhoto.filename,
+					basename: this.livePhoto.basename,
+				})
+				: null
+		},
 	},
 
 	asyncComputed: {
@@ -147,8 +213,13 @@ export default {
 	methods: {
 		// Updates the dimensions of the modal
 		updateImgSize() {
-			this.naturalHeight = this.$el.naturalHeight
-			this.naturalWidth = this.$el.naturalWidth
+			if (this.$refs.image) {
+				this.naturalHeight = this.$refs.image.naturalHeight
+				this.naturalWidth = this.$refs.image.naturalWidth
+			} else if (this.$refs.video) {
+				this.naturalHeight = this.$refs.video.videoHeight
+				this.naturalWidth = this.$refs.video.videoWidth
+			}
 
 			this.updateHeightWidth()
 			this.doneLoading()
@@ -157,7 +228,7 @@ export default {
 		/**
 		 * Manually retrieve the path and return its base64
 		 *
-		 * @return {string}
+		 * @return {Promise<string>}
 		 */
 		async getBase64FromImage() {
 			const file = await axios.get(this.src)
@@ -167,8 +238,8 @@ export default {
 		/**
 		 * Handle zooming
 		 *
-		 * @param {Event} event the scroll event
-		 * @return {null}
+		 * @param {WheelEvent} event the scroll event
+		 * @return {void}
 		 */
 		updateZoom(event) {
 			if (!this.canZoom) {
@@ -179,8 +250,9 @@ export default {
 			event.preventDefault()
 
 			// scrolling position relative to the image
-			const scrollX = event.clientX - this.$el.x - (this.width * this.zoomRatio / 2)
-			const scrollY = event.clientY - this.$el.y - (this.height * this.zoomRatio / 2)
+			const element = this.$refs.image ?? this.$refs.video
+			const scrollX = event.clientX - element.x - (this.width * this.zoomRatio / 2)
+			const scrollY = event.clientY - element.y - (this.height * this.zoomRatio / 2)
 			const scrollPercX = scrollX / (this.width * this.zoomRatio)
 			const scrollPercY = scrollY / (this.height * this.zoomRatio)
 			const isZoomIn = event.deltaY < 0
@@ -216,7 +288,7 @@ export default {
 		/**
 		 * Dragging handlers
 		 *
-		 * @param {Event} event the event
+		 * @param {DragEvent} event the event
 		 */
 		dragStart(event) {
 			const { pageX, pageY } = event
@@ -224,16 +296,26 @@ export default {
 			this.dragX = pageX
 			this.dragY = pageY
 			this.dragging = true
-			this.$el.onmouseup = this.dragEnd
-			this.$el.onmousemove = this.dragHandler
+			const element = this.$refs.image ?? this.$refs.video
+			element.onmouseup = this.dragEnd
+			element.onmousemove = this.dragHandler
 		},
+		/**
+		 * @param {DragEvent} event the event
+		 */
 		dragEnd(event) {
 			event.preventDefault()
 
 			this.dragging = false
-			this.$el.onmouseup = null
-			this.$el.onmousemove = null
+			const element = this.$refs.image ?? this.$refs.video
+			if (element) {
+				element.onmouseup = null
+				element.onmousemove = null
+			}
 		},
+		/**
+		 * @param {DragEvent} event the event
+		 */
 		dragHandler(event) {
 			event.preventDefault()
 			const { pageX, pageY } = event
@@ -269,6 +351,26 @@ export default {
 				this.fallback = true
 			}
 		},
+		doneLoadingLivePhoto() {
+			this.livePhotoCanBePlayed = true
+			this.doneLoading()
+		},
+		playLivePhoto() {
+			if (!this.livePhotoCanBePlayed) {
+				return
+			}
+
+			/** @type {HTMLVideoElement} */
+			const video = this.$refs.video
+			video.play()
+		},
+		stopLivePhoto() {
+			/** @type {HTMLVideoElement} */
+			const video = this.$refs.video
+			video.load()
+		},
+
+		t: translate,
 	},
 }
 </script>
@@ -277,7 +379,14 @@ export default {
 $checkered-size: 8px;
 $checkered-color: #efefef;
 
-img {
+.image_container {
+	display: flex;
+	align-items: center;
+	height: 100%;
+	justify-content: center;
+}
+
+img, video {
 	max-width: 100%;
 	max-height: 100%;
 	align-self: center;
@@ -312,4 +421,18 @@ img {
 		cursor: move;
 	}
 }
+
+.live-photo_play_button {
+	position: absolute;
+	top: 0;
+	// left: is set dynamically on the element itself
+	margin: 16px !important;
+	display: flex;
+	align-items: center;
+	border: none;
+	gap: 4px;
+	border-radius: var(--border-radius);
+	padding: 4px 8px;
+	background-color: var(--color-main-background-blur);
+}
 </style>
diff --git a/src/components/Videos.vue b/src/components/Videos.vue
index 0f0b85eac..bcfb7a41a 100644
--- a/src/components/Videos.vue
+++ b/src/components/Videos.vue
@@ -56,13 +56,13 @@
 <script>
 // eslint-disable-next-line n/no-missing-import
 import '@skjnldsv/vue-plyr/dist/vue-plyr.css'
-import logger from '../services/logger.js'
 import { imagePath } from '@nextcloud/router'
+import logger from '../services/logger.js'
+import { findLivePhotoPeerFromName } from '../utils/livePhotoUtils'
+import { getPreviewIfAny } from '../utils/previewUtils'
 
 const VuePlyr = () => import(/* webpackChunkName: 'plyr' */'@skjnldsv/vue-plyr')
 
-const liveExt = ['jpg', 'jpeg', 'png']
-const liveExtRegex = new RegExp(`\\.(${liveExt.join('|')})$`, 'i')
 const blankVideo = imagePath('viewer', 'blank.mp4')
 
 export default {
@@ -78,16 +78,14 @@ export default {
 	},
 
 	computed: {
-		livePhoto() {
-			return this.fileList.find(file => {
-				// if same filename and extension is allowed
-				return file.filename !== this.filename
-					&& file.basename.startsWith(this.name)
-					&& liveExtRegex.test(file.basename)
-			})
-		},
 		livePhotoPath() {
-			return this.livePhoto && this.getPreviewIfAny(this.livePhoto)
+			const peerFile = findLivePhotoPeerFromName(this, this.fileList)
+
+			if (peerFile === undefined) {
+				return undefined
+			}
+
+			return getPreviewIfAny(peerFile)
 		},
 		player() {
 			return this.$refs.plyr.player
@@ -101,7 +99,7 @@ export default {
 				loadSprite: false,
 				fullscreen: {
 					iosNative: true,
-				}
+				},
 			}
 		},
 	},
diff --git a/src/mixins/Mime.js b/src/mixins/Mime.js
index 762a4ede2..f95dde97d 100644
--- a/src/mixins/Mime.js
+++ b/src/mixins/Mime.js
@@ -93,6 +93,11 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		// The file id of the peer live photo file
+		metadataFilesLivePhoto: {
+			type: Number,
+			default: undefined,
+		},
 	},
 
 	data() {
diff --git a/src/mixins/PreviewUrl.js b/src/mixins/PreviewUrl.js
index f31f36e2d..447766c12 100644
--- a/src/mixins/PreviewUrl.js
+++ b/src/mixins/PreviewUrl.js
@@ -19,9 +19,7 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
-import { encodePath } from '@nextcloud/paths'
-import { generateUrl } from '@nextcloud/router'
-import { getToken, isPublic } from '../utils/davUtils.ts'
+import { getPreviewIfAny } from '../utils/previewUtils.ts'
 import { getDavPath } from '../utils/fileUtils.ts'
 
 export default {
@@ -68,25 +66,8 @@ export default {
 		 * @param {string|null} data.etag the etag of the file
 		 * @return {string} the absolute url
 		 */
-		getPreviewIfAny({ fileid, filename, previewUrl, hasPreview, davPath, etag }) {
-			if (previewUrl) {
-				return previewUrl
-			}
-
-			const searchParams = `fileId=${fileid}`
-				+ `&x=${Math.floor(screen.width * devicePixelRatio)}`
-				+ `&y=${Math.floor(screen.height * devicePixelRatio)}`
-				+ '&a=true'
-				+ (etag !== null ? `&etag=${etag.replace(/&quot;/g, '')}` : '')
-
-			if (hasPreview) {
-				// TODO: find a nicer standard way of doing this?
-				if (isPublic()) {
-					return generateUrl(`/apps/files_sharing/publicpreview/${getToken()}?file=${encodePath(filename)}&${searchParams}`)
-				}
-				return generateUrl(`/core/preview?${searchParams}`)
-			}
-			return davPath
+		getPreviewIfAny(data) {
+			return getPreviewIfAny(data)
 		},
 	},
 }
diff --git a/src/services/FileInfo.ts b/src/services/FileInfo.ts
index 5665fbb7d..fe06831fd 100644
--- a/src/services/FileInfo.ts
+++ b/src/services/FileInfo.ts
@@ -24,33 +24,15 @@ import { getClient } from './WebdavClient'
 import { genFileInfo, type FileInfo } from '../utils/fileUtils'
 import { createClient, type FileStat, type ResponseDataDetailed } from 'webdav'
 import { getRequestToken } from '@nextcloud/auth'
+import { getDavNameSpaces, getDavProperties } from '@nextcloud/files'
 
 const statData = `<?xml version="1.0"?>
-<d:propfind  xmlns:d="DAV:"
-	xmlns:oc="http://owncloud.org/ns"
-	xmlns:nc="http://nextcloud.org/ns"
-	xmlns:ocs="http://open-collaboration-services.org/ns">
-	<d:prop>
-		<d:getlastmodified />
-		<d:getcontenttype />
-		<d:resourcetype />
-		<d:getetag />
-		<oc:fileid />
-		<oc:permissions />
-		<oc:size />
-		<d:getcontentlength />
-		<nc:has-preview />
-		<nc:mount-type />
-		<nc:is-encrypted />
-		<ocs:share-permissions />
-		<oc:tags />
-		<oc:favorite />
-		<oc:comments-unread />
-		<oc:owner-id />
-		<oc:owner-display-name />
-		<oc:share-types />
-	</d:prop>
-</d:propfind>`
+	<d:propfind ${getDavNameSpaces()}>
+		<d:prop>
+			<oc:tags />
+			${getDavProperties()}
+		</d:prop>
+	</d:propfind>`
 
 /**
  * Retrieve the files list
diff --git a/src/services/FileList.ts b/src/services/FileList.ts
index 10017a659..c854083b1 100644
--- a/src/services/FileList.ts
+++ b/src/services/FileList.ts
@@ -20,6 +20,7 @@
  *
  */
 
+import { getDavNameSpaces, getDavProperties } from '@nextcloud/files'
 import { getClient } from './WebdavClient'
 import { genFileInfo, type FileInfo } from '../utils/fileUtils'
 import type { FileStat, ResponseDataDetailed } from 'webdav'
@@ -35,28 +36,10 @@ export default async function(path: string, options = {}): Promise<FileInfo[]> {
 
 	const response = await getClient().getDirectoryContents(fixedPath, Object.assign({
 		data: `<?xml version="1.0"?>
-			<d:propfind  xmlns:d="DAV:"
-				xmlns:oc="http://owncloud.org/ns"
-				xmlns:nc="http://nextcloud.org/ns"
-				xmlns:ocs="http://open-collaboration-services.org/ns">
+			<d:propfind ${getDavNameSpaces()}>
 				<d:prop>
-					<d:getlastmodified />
-					<d:getcontenttype />
-					<d:resourcetype />
-					<oc:fileid />
-					<oc:permissions />
-					<oc:size />
-					<d:getcontentlength />
-					<nc:has-preview />
-					<nc:mount-type />
-					<nc:is-encrypted />
-					<ocs:share-permissions />
 					<oc:tags />
-					<oc:favorite />
-					<oc:comments-unread />
-					<oc:owner-id />
-					<oc:owner-display-name />
-					<oc:share-types />
+					${getDavProperties()}
 				</d:prop>
 			</d:propfind>`,
 		details: true,
diff --git a/src/utils/fileUtils.ts b/src/utils/fileUtils.ts
index 6db7ad22a..e8f70386d 100644
--- a/src/utils/fileUtils.ts
+++ b/src/utils/fileUtils.ts
@@ -112,13 +112,12 @@ const genFileInfo = function(obj: FileStat): FileInfo {
 /**
  * Generate absolute dav remote path of the file
  *
- * @param {object} fileInfo The fileInfo
- * @param {string} fileInfo.filename the file full path
- * @param {string} fileInfo.basename the file name
- * @param {string} fileInfo.source the file source if any
- * @return {string}
+ * @param fileInfo The fileInfo
+ * @param fileInfo.filename the file full path
+ * @param fileInfo.basename the file name
+ * @param fileInfo.source the file source if any
  */
-const getDavPath = function({ filename, basename, source = '' }: {filename: string, basename: string, source: string}) {
+function getDavPath({ filename, basename, source = '' }: { filename: string, basename: string, source?: string }): string|null {
 	// TODO: allow proper dav access without the need of basic auth
 	// https://github.com/nextcloud/server/issues/19700
 	if (isPublic()) {
diff --git a/src/utils/livePhotoUtils.ts b/src/utils/livePhotoUtils.ts
new file mode 100644
index 000000000..4f9e85c29
--- /dev/null
+++ b/src/utils/livePhotoUtils.ts
@@ -0,0 +1,48 @@
+/**
+ * @copyright Copyright (c) 2023 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/>.
+ *
+ */
+
+import type { BasicFileInfo } from './models'
+
+const livePictureExt = ['jpg', 'jpeg', 'png']
+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
+ */
+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
+ */
+export function findLivePhotoPeerFromName(referenceFile: BasicFileInfo, fileList: BasicFileInfo[]): BasicFileInfo | undefined {
+	return fileList.find(comparedFile => {
+		// if same filename and extension is allowed
+		return comparedFile.filename !== referenceFile.filename
+				&& (comparedFile.basename.startsWith(referenceFile.name) && livePictureExtRegex.test(referenceFile.basename))
+	})
+}
diff --git a/js/viewer-node_modules_nextcloud_dialogs_dist_chunks_index-2b379907_mjs.js.LICENSE.txt b/src/utils/models.ts
similarity index 50%
rename from js/viewer-node_modules_nextcloud_dialogs_dist_chunks_index-2b379907_mjs.js.LICENSE.txt
rename to src/utils/models.ts
index a001048e8..d724a25c5 100644
--- a/js/viewer-node_modules_nextcloud_dialogs_dist_chunks_index-2b379907_mjs.js.LICENSE.txt
+++ b/src/utils/models.ts
@@ -1,7 +1,7 @@
 /**
- * @copyright Copyright (c) 2023 Ferdinand Thiessen <opensource@fthiessen.de>
+ * @copyright Copyright (c) 2023 Louis Chmn <louis@chmn.me>
  *
- * @author Ferdinand Thiessen <opensource@fthiessen.de>
+ * @author Louis Chmn <louis@chmn.me>
  *
  * @license AGPL-3.0-or-later
  *
@@ -19,3 +19,16 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
+
+export interface BasicFileInfo {
+	fileid: number // The file id
+	filename: string // The file name, ex: /a/b/c/file.txt
+	basename: string // The base name, ex: file.txt
+	name: string // The name, ex: file
+	source?: string // The source of the file, ex: https://example.org/remote.php/dav/files/userId/fileName.jpg
+	previewUrl?: string // Optional URL of the file preview
+	hasPreview: boolean // Does the file has an existing preview ?
+	davPath: string // The absolute dav path
+	etag: string|null // The etag of the file
+	metadataFilesLivePhoto?: number // The id of the peer live photo
+}
diff --git a/src/utils/previewUtils.ts b/src/utils/previewUtils.ts
new file mode 100644
index 000000000..04895326b
--- /dev/null
+++ b/src/utils/previewUtils.ts
@@ -0,0 +1,50 @@
+/**
+ * @copyright Copyright (c) 2023 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/>.
+ *
+ */
+
+import { generateUrl } from '@nextcloud/router'
+import { getToken, isPublic } from './davUtils'
+import type { BasicFileInfo } from './models'
+import { encodePath } from '@nextcloud/paths'
+
+/**
+ * @return the preview url if the file have an existing preview or the absolute dav remote path if none.
+ */
+export function getPreviewIfAny({ fileid, filename, previewUrl, hasPreview, davPath, etag }: BasicFileInfo): string {
+	if (previewUrl) {
+		return previewUrl
+	}
+
+	const searchParams = `fileId=${fileid}`
+		+ `&x=${Math.floor(screen.width * devicePixelRatio)}`
+		+ `&y=${Math.floor(screen.height * devicePixelRatio)}`
+		+ '&a=true'
+		+ (etag !== null ? `&etag=${etag.replace(/&quot;/g, '')}` : '')
+
+	if (hasPreview) {
+		// TODO: find a nicer standard way of doing this?
+		if (isPublic()) {
+			return generateUrl(`/apps/files_sharing/publicpreview/${getToken()}?file=${encodePath(filename)}&${searchParams}`)
+		}
+		return generateUrl(`/core/preview?${searchParams}`)
+	}
+	return davPath
+}