feat: auto-repeat live photos

Fixes pulsejet#1267

Signed-off-by: Jo Van Bulck <jo.vanbulck@cs.kuleuven.be>

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>

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');