From e744c8304088cb135f6fa12c59b071a36d6c2454 Mon Sep 17 00:00:00 2001
From: Jo Van Bulck <jovanbulck@users.noreply.github.com>
Date: Fri, 8 Nov 2024 11:47:29 -0800
Subject: [PATCH] feat: auto-repeat live photos

Fixes #1267

Signed-off-by: Jo Van Bulck <jo.vanbulck@cs.kuleuven.be>
---
 src/components/frame/Photo.vue       | 15 ++++++++++++++-
 src/components/viewer/PsLivePhoto.ts |  6 ++++++
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/src/components/frame/Photo.vue b/src/components/frame/Photo.vue
index 23d9ef170..0e5a7c4fb 100644
--- a/src/components/frame/Photo.vue
+++ b/src/components/frame/Photo.vue
@@ -24,7 +24,13 @@
           <span class="time" v-if="data.video_duration">{{ videoDuration }}</span>
           <VideoIcon :size="22" />
         </div>
-        <div class="livephoto" v-if="data.liveid" @mouseenter.passive="playVideo" @mouseleave.passive="stopVideo">
+        <div
+          class="livephoto"
+          v-if="data.liveid"
+          @mouseenter.passive="playVideo"
+          @mouseleave.passive="stopVideo"
+          @touchstart.passive="touchVideo"
+        >
           <LivePhotoIcon :size="22" :spin="liveState.waiting" :playing="liveState.playing" />
         </div>
       </div>
@@ -292,6 +298,7 @@ export default defineComponent({
           try {
             this.liveState.requested = true;
             video.currentTime = 0;
+            video.loop = true;
             await video.play();
           } catch (e) {
             // ignore, pause was probably called too soon
@@ -310,6 +317,12 @@ export default defineComponent({
       this.liveState.playTimer = 0;
       this.liveState.waiting = false;
     },
+
+    /** Start/stop preview video for touchscreens */
+    touchVideo() {
+      if (this.liveState.playing) this.stopVideo();
+      else this.playVideo();
+    },
   },
 });
 </script>
diff --git a/src/components/viewer/PsLivePhoto.ts b/src/components/viewer/PsLivePhoto.ts
index 6ead403ae..8e42e8e8f 100644
--- a/src/components/viewer/PsLivePhoto.ts
+++ b/src/components/viewer/PsLivePhoto.ts
@@ -32,6 +32,11 @@ class LivePhotoContentSetup {
     const video = content.element?.querySelector('video');
     if (!video) return;
 
+    if (this.liveState.playing) {
+      video.pause();
+      return;
+    }
+
     try {
       this.liveState.waiting = true;
       video.currentTime = 0;
@@ -57,6 +62,7 @@ class LivePhotoContentSetup {
     video.playsInline = true;
     video.disableRemotePlayback = true;
     video.autoplay = false;
+    video.loop = true;
     video.src = utils.getLivePhotoVideoUrl(photo, true);
 
     const div = document.createElement('div');