Add live photo support base on files metadata

Signed-off-by: Louis Chemineau <[email protected]>

js/viewer-main.js.LICENSE.txt

@@ -310,3 +310,25 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
+
+/**
+ * @copyright Copyright (c) 2023 Louis Chmn <[email protected]>
+ *
+ * @author Louis Chmn <[email protected]>
+ *
+ * @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/>.
+ *
+ */

src/components/Images.vue

@@ -21,34 +21,77 @@
  -->
 
 <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" />
+
+		<img v-else-if="data !== null && !livePhoto"
+			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">
+
+		<video v-else-if="data !== null && livePhoto"
+			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"
+			class="live-photo_play_button"
+			:style="{left: `calc(50% - ${width/2}px)`}"
+			:disabled="!livePhotoCanBePlayed"
+			:aria-description="t('viewer', 'Play the live photo')"
+			@pointerenter="playLivePhoto"
+			@focus="playLivePhoto"
+			@pointerleave="stopLivePhoto"
+			@blur="stopLivePhoto">
+			<PlayCircleOutline v-if="livePhotoCanBePlayed" />
+			<NcLoadingIcon v-else />
+			{{ t('viewer', 'LIVE') }}
+		</button>
+	</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 +100,8 @@ export default {
 
 	components: {
 		ImageEditor,
+		PlayCircleOutline,
+		NcLoadingIcon,
 	},
 
 	props: {
@@ -76,6 +121,7 @@ export default {
 			shiftY: 0,
 			zoomRatio: 1,
 			fallback: false,
+			livePhotoCanBePlayed: false,
 		}
 	},
 
@@ -103,6 +149,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 +206,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 +221,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 +231,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 +243,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,24 +281,32 @@ export default {
 		/**
 		 * Dragging handlers
 		 *
-		 * @param {Event} event the event
+		 * @param {DragEvent} event the event
 		 */
 		dragStart(event) {
 			const { pageX, pageY } = event
 
 			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 +342,22 @@ export default {
 				this.fallback = true
 			}
 		},
+		doneLoadingLivePhoto() {
+			this.livePhotoCanBePlayed = true
+			this.doneLoading()
+		},
+		playLivePhoto() {
+			/** @type {HTMLVideoElement} */
+			const video = this.$refs.video
+			video.play()
+		},
+		stopLivePhoto() {
+			/** @type {HTMLVideoElement} */
+			const video = this.$refs.video
+			video.load()
+		},
+
+		t: translate,
 	},
 }
 </script>
@@ -277,7 +366,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 +408,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>

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,
-				}
+				},
 			}
 		},
 	},

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() {