viewer: allow disabling live photo autoplay (fix #591)

Signed-off-by: Varun Patil <radialapps@gmail.com>

CHANGELOG.md

@@ -8,6 +8,7 @@ All notable changes to this project will be documented in this file.
 - **Feature**: Show albums of photo in metadata ([#752](https://github.com/pulsejet/memories/pull/752))
 - **Feature**: Show faces in photo in sidebar metadata
 - **Feature**: Allow creation of new tags when editing metadata ([#487](https://github.com/pulsejet/memories/issues/487))
+- **Feature**: Allow disabling autoplay of live photo ([#591](https://github.com/pulsejet/memories/issues/591))
 - **Feature**: Improved layout for albums list view
 - **Feature**: Improvements in admin interface
 - **Bugfix**: You can now configure the transpose strategy of the transcoder (required for QSV)

lib/Controller/OtherController.php

@@ -95,6 +95,7 @@ class OtherController extends GenericApiController
                 'sort_folder_month' => 'true' === $getAppConfig('sortFolderMonth', false),
                 'sort_album_month' => 'true' === $getAppConfig('sortAlbumMonth', 'true'),
                 'enable_top_memories' => 'true' === $getAppConfig('enableTopMemories', 'true'),
+                'livephoto_autoplay' => 'true' === $getAppConfig('livephotoAutoplay', 'true'),
             ], Http::STATUS_OK);
         });
     }

src/components/Settings.vue

@@ -45,6 +45,14 @@
           {{ t('memories', 'Show past photos on top of timeline') }}
         </NcCheckboxRadioSwitch>
 
+        <NcCheckboxRadioSwitch
+          :checked.sync="config.livephoto_autoplay"
+          @update:checked="updateLivephotoAutoplay"
+          type="switch"
+        >
+          {{ t('memories', 'Autoplay Live Photos') }}
+        </NcCheckboxRadioSwitch>
+
         <NcCheckboxRadioSwitch
           :checked.sync="config.full_res_on_zoom"
           @update:checked="updateFullResOnZoom"
@@ -231,6 +239,10 @@ export default defineComponent({
       await this.updateSetting('enable_top_memories', 'enableTopMemories');
     },
 
+    async updateLivephotoAutoplay() {
+      await this.updateSetting('livephoto_autoplay', 'livephotoAutoplay');
+    },
+
     async updateShowHidden() {
       await this.updateSetting('show_hidden_folders', 'showHidden');
     },

src/components/viewer/PsLivePhoto.ts

@@ -1,7 +1,8 @@
 import PhotoSwipe from 'photoswipe';
 import PsImage from './PsImage';
 import * as utils from '../../services/Utils';
-import { PsContent, PsEvent } from './types';
+import staticConfig from '../../services/static-config';
+import type { PsContent, PsEvent } from './types';
 
 export function isLiveContent(content: PsContent): boolean {
   // Do not play Live Photo if the slideshow is
@@ -21,6 +22,14 @@ class LivePhotoContentSetup {
     lightbox.on('contentDestroy', this.onContentDestroy.bind(this));
   }
 
+  play(content: PsContent) {
+    const video = content.element?.querySelector('video');
+    if (video) {
+      video.currentTime = 0;
+      video.play();
+    }
+  }
+
   onContentLoad(e) {
     const content: PsContent = e.content;
     if (!isLiveContent(content)) return;
@@ -52,12 +61,10 @@ class LivePhotoContentSetup {
   }
 
   onContentActivate({ content }: { content: PsContent }) {
-    if (isLiveContent(content)) {
+    if (!isLiveContent(content)) return;
-      const video = content.element?.querySelector('video');
+
-      if (video) {
+    if (staticConfig.getSync('livephoto_autoplay')) {
-        video.currentTime = 0;
+      this.play(content);
-        video.play();
-      }
     }
   }
 

src/components/viewer/Viewer.vue

@@ -174,7 +174,7 @@
 import { defineComponent } from 'vue';
 
 import { IDay, IImageInfo, IPhoto, IRow, IRowType } from '../../types';
-import { PsSlide } from './types';
+import type { PsContent } from './types';
 
 import UserConfig from '../../mixins/UserConfig';
 import NcActions from '@nextcloud/vue/dist/Components/NcActions';
@@ -985,7 +985,7 @@ export default defineComponent({
 
     /** Play the current live photo */
     playLivePhoto() {
-      this.psLivePhoto?.onContentActivate(this.photoswipe!.currSlide as PsSlide);
+      this.psLivePhoto?.play(this.photoswipe!.currSlide!.content as PsContent);
     },
 
     /** Is the current photo a favorite */

src/services/static-config.ts

@@ -115,6 +115,7 @@ class StaticConfig {
       sort_folder_month: false,
       sort_album_month: true,
       enable_top_memories: true,
+      livephoto_autoplay: true,
 
       square_thumbs: false,
       full_res_on_zoom: true,

src/types.ts

@@ -254,6 +254,7 @@ export type IConfig = {
   sort_folder_month: boolean;
   sort_album_month: boolean;
   enable_top_memories: boolean;
+  livephoto_autoplay: boolean;
 
   square_thumbs: boolean;
   full_res_on_zoom: boolean;