Add overlay on live photo

lib/Sabre/PropFindPlugin.php

@@ -32,7 +32,7 @@
 use OCA\Photos\Sabre\Place\PlaceRoot;
 use OCP\Files\DavUtil;
 use OCP\Files\NotFoundException;
-use OCP\IConfig;
+use OCP\FilesMetadata\IFilesMetadataManager;
 use OCP\IPreview;
 use Sabre\DAV\INode;
 use Sabre\DAV\PropFind;
@@ -52,17 +52,15 @@ class PropFindPlugin extends ServerPlugin {
 	public const COLLABORATORS_PROPERTYNAME = '{http://nextcloud.org/ns}collaborators';
 	public const PERMISSIONS_PROPERTYNAME = '{http://owncloud.org/ns}permissions';
 
-	private IConfig $config;
 	private IPreview $previewManager;
 	private ?Tree $tree;
 	private AlbumMapper $albumMapper;
 
 	public function __construct(
-		IConfig $config,
 		IPreview $previewManager,
-		AlbumMapper $albumMapper
+		AlbumMapper $albumMapper,
+		private IFilesMetadataManager $filesMetadataManager,
 	) {
-		$this->config = $config;
 		$this->previewManager = $previewManager;
 		$this->albumMapper = $albumMapper;
 	}
@@ -119,6 +117,13 @@ public function propFind(PropFind $propFind, INode $node): void {
 			foreach ($node->getFileInfo()->getMetadata() as $metadataKey => $metadataValue) {
 				$propFind->handle(FilesPlugin::FILE_METADATA_PREFIX.$metadataKey, $metadataValue);
 			}
+
+
+			$propFind->handle(FilesPlugin::HIDDEN_PROPERTYNAME, function () use ($node) {
+				$metadata = $this->filesMetadataManager->getMetadata((int)$node->getFileInfo()->getId(), true);
+				return $metadata->hasKey('files-live-photo') && $node->getFileInfo()->getMimetype() === 'video/quicktime' ? 'true' : 'false';
+			});
+
 		}
 
 		if ($node instanceof AlbumRoot) {

src/components/File.vue

@@ -31,7 +31,8 @@
 
 			<!-- image and loading placeholder -->
 			<div class="file__images">
-				<VideoIcon v-if="file.mime.includes('video')" class="video-icon" :size="64" />
+				<VideoIcon v-if="file.mime.includes('video')" class="icon-overlay" :size="64" />
+				<PlayCircleIcon v-else-if="file.metadataFilesLivePhoto !== undefined" class="icon-overlay" :size="64" />
 
 				<!-- We have two img elements to load the small and large preview -->
 				<!-- Do not show the small preview if the larger one is loaded -->
@@ -84,6 +85,7 @@
 <script>
 import Star from 'vue-material-design-icons/Star.vue'
 import VideoIcon from 'vue-material-design-icons/Video.vue'
+import PlayCircleIcon from 'vue-material-design-icons/PlayCircle.vue'
 
 import { generateUrl } from '@nextcloud/router'
 import { NcCheckboxRadioSwitch } from '@nextcloud/vue'
@@ -96,6 +98,7 @@ export default {
 		NcCheckboxRadioSwitch,
 		Star,
 		VideoIcon,
+		PlayCircleIcon,
 	},
 	inheritAttrs: false,
 	props: {
@@ -253,7 +256,7 @@ export default {
 		&__images {
 			display: contents;
 
-			.video-icon {
+			.icon-overlay {
 				position: absolute;
 				top: 0px;
 				right: 0px;

src/services/DavRequest.js

@@ -29,8 +29,10 @@ const props = `
 	<nc:face-preview-image />
 	<nc:metadata-photos-size />
 	<nc:metadata-photos-original_date_time />
+	<nc:metadata-files-live-photo />
 	<nc:has-preview />
 	<nc:realpath />
+	<nc:hidden />
 	<oc:favorite />
 	<oc:fileid />
 	<oc:permissions />

src/services/collectionFetcher.js

@@ -86,7 +86,9 @@ function getCollectionFilesDavRequest(extraProps = []) {
 					<d:resourcetype />
 					<nc:metadata-photos-size />
 					<nc:metadata-photos-original_date_time />
+					<nc:metadata-files-live-photo />
 					<nc:has-preview />
+					<nc:hidden />
 					<oc:favorite />
 					<oc:fileid />
 					<oc:permissions />

src/services/fileFetcher.js

@@ -41,7 +41,9 @@ function getCollectionFilesDavRequest(extraProps = []) {
 					<d:resourcetype />
 					<nc:metadata-photos-size />
 					<nc:metadata-photos-original_date_time />
+					<nc:metadata-files-live-photo />
 					<nc:has-preview />
+					<nc:hidden />
 					<oc:favorite />
 					<oc:fileid />
 					<oc:permissions />

src/store/files.js

@@ -42,29 +42,31 @@ const mutations = {
 	 */
 	updateFiles(state, newFiles) {
 		const files = {}
-		newFiles.forEach(file => {
-			// Ignore the file if the path is excluded
-			if (state.nomediaPaths.some(nomediaPath => file.filename.startsWith(nomediaPath)
-				|| file.filename.startsWith(prefixPath + nomediaPath))) {
-				return
-			}
-
-			if (file.fileid >= 0) {
-				file.metadataPhotosSize ??= { width: 256, height: 256 }
-			}
-
-			// Make the fileId a string once and for all.
-			file.fileid = file.fileid.toString()
-
-			// Precalculate dates as it is expensive.
-			const date = moment((file.metadataPhotosOriginalDateTime * 1000) || file.lastmod)
-			file.timestamp = date.unix() // For sorting
-			file.month = date.format('YYYYMM') // For grouping by month
-			file.day = date.format('MMDD') // For On this day
-
-			// Schedule the file to add
-			files[file.fileid] = file
-		})
+		newFiles
+			.filter(file => !file.hidden)
+			.forEach(file => {
+				// Ignore the file if the path is excluded
+				if (state.nomediaPaths.some(nomediaPath => file.filename.startsWith(nomediaPath)
+					|| file.filename.startsWith(prefixPath + nomediaPath))) {
+					return
+				}
+
+				if (file.fileid >= 0) {
+					file.metadataPhotosSize ??= { width: 256, height: 256 }
+				}
+
+				// Make the fileId a string once and for all.
+				file.fileid = file.fileid.toString()
+
+				// Precalculate dates as it is expensive.
+				const date = moment((file.metadataPhotosOriginalDateTime * 1000) || file.lastmod)
+				file.timestamp = date.unix() // For sorting
+				file.month = date.format('YYYYMM') // For grouping by month
+				file.day = date.format('MMDD') // For On this day
+
+				// Schedule the file to add
+				files[file.fileid] = file
+			})
 
 		state.files = {
 			...state.files,