diff --git a/src/components/Images.vue b/src/components/Images.vue
index 2a80277fe..8e8e270d1 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="livePhoto && 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/dist/Components/NcLoadingIcon.js'
+
+import ImageEditor from './ImageEditor.vue'
+import { livePhoto } 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,19 @@ export default {
 				width: this.zoomWidth + 'px',
 			}
 		},
+		livePhoto() {
+			return livePhoto(this, this.fileList)
+		},
+		livePhotoSrc() {
+			return this.livePhoto.source ?? this.livePhotoDavPath
+		},
+		/** @return {string|null} */
+		livePhotoDavPath() {
+			return getDavPath({
+				filename: this.livePhoto.filename,
+				basename: this.livePhoto.basename,
+			})
+		},
 	},
 
 	asyncComputed: {
@@ -147,8 +211,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.getBoundingClientRect().height
+				this.naturalWidth = this.$refs.video.getBoundingClientRect().width
+			}
 
 			this.updateHeightWidth()
 			this.doneLoading()
@@ -157,7 +226,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 +236,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 +248,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 +286,7 @@ export default {
 		/**
 		 * Dragging handlers
 		 *
-		 * @param {Event} event the event
+		 * @param {DragEvent} event the event
 		 */
 		dragStart(event) {
 			const { pageX, pageY } = event
@@ -224,16 +294,24 @@ 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
+			element.onmouseup = null
+			element.onmousemove = null
 		},
+		/**
+		 * @param {DragEvent} event the event
+		 */
 		dragHandler(event) {
 			event.preventDefault()
 			const { pageX, pageY } = event
@@ -269,6 +347,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 +375,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 +417,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..0d63f9b59 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 { livePhoto } 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 = livePhoto(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/livePhotoUtils.ts b/src/utils/livePhotoUtils.ts
new file mode 100644
index 000000000..7e50112a9
--- /dev/null
+++ b/src/utils/livePhotoUtils.ts
@@ -0,0 +1,47 @@
+/**
+ * @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.
+ * The peer file is easier found:
+ * 1. From the file name if the original file is the video
+ * 2. From the metadata value if the original file is the picture
+ * This way we support live photo marked a such in the metadata
+ * while preserving the old behavior that was based on the filename.
+ * @param referenceFile
+ * @param fileList
+ */
+export function livePhoto(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))
+				|| referenceFile.metadataFilesLivePhoto === comparedFile.fileid
+			)
+	})
+}
diff --git a/src/utils/models.ts b/src/utils/models.ts
new file mode 100644
index 000000000..2db1dd7fd
--- /dev/null
+++ b/src/utils/models.ts
@@ -0,0 +1,33 @@
+/**
+ * @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/>.
+ *
+ */
+
+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
+	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
+}