Merge pull request #41308 from nextcloud/artonge/feat/live_photos

Customize rendering for live photos

apps/dav/lib/Connector/Sabre/FilesPlugin.php

@@ -87,6 +87,7 @@ class FilesPlugin extends ServerPlugin {
 	public const SUBFOLDER_COUNT_PROPERTYNAME = '{http://nextcloud.org/ns}contained-folder-count';
 	public const SUBFILE_COUNT_PROPERTYNAME = '{http://nextcloud.org/ns}contained-file-count';
 	public const FILE_METADATA_PREFIX = '{http://nextcloud.org/ns}metadata-';
+	public const HIDDEN_PROPERTYNAME = '{http://nextcloud.org/ns}hidden';
 
 	/** Reference to main server object */
 	private ?Server $server = null;
@@ -386,6 +387,12 @@ public function handleGetProperties(PropFind $propFind, \Sabre\DAV\INode $node)
 				$propFind->handle(self::FILE_METADATA_PREFIX . $metadataKey, $metadataValue);
 			}
 
+			$propFind->handle(self::HIDDEN_PROPERTYNAME, function () use ($node) {
+				$filesMetadataManager = \OCP\Server::get(IFilesMetadataManager::class);
+				$metadata = $filesMetadataManager->getMetadata((int)$node->getFileId(), true);
+				return $metadata->hasKey('files-live-photo') && $node->getFileInfo()->getMimetype() === 'video/quicktime' ? 'true' : 'false';
+			});
+
 			/**
 			 * Return file/folder name as displayname. The primary reason to
 			 * implement it this way is to avoid costly fallback to

apps/files/src/components/FileEntry/FileEntryPreview.vue

@@ -50,6 +50,10 @@
 			:aria-label="t('files', 'Favorite')">
 			<FavoriteIcon v-once />
 		</span>
+
+		<OverlayIcon :is="fileOverlay"
+			v-if="fileOverlay"
+			class="files-list__row-icon-overlay" />
 	</span>
 </template>
 
@@ -71,9 +75,11 @@ import KeyIcon from 'vue-material-design-icons/Key.vue'
 import LinkIcon from 'vue-material-design-icons/Link.vue'
 import NetworkIcon from 'vue-material-design-icons/Network.vue'
 import TagIcon from 'vue-material-design-icons/Tag.vue'
+import PlayCircleIcon from 'vue-material-design-icons/PlayCircle.vue'
 
 import { useUserConfigStore } from '../../store/userconfig.ts'
 import FavoriteIcon from './FavoriteIcon.vue'
+import { isLivePhoto } from '../../services/LivePhotos'
 
 export default Vue.extend({
 	name: 'FileEntryPreview',
@@ -163,6 +169,14 @@ export default Vue.extend({
 			}
 		},
 
+		fileOverlay() {
+			if (isLivePhoto(this.source)) {
+				return PlayCircleIcon
+			}
+
+			return null
+		},
+
 		folderOverlay() {
 			if (this.source.type !== FileType.Folder) {
 				return null

apps/files/src/components/FilesListVirtual.vue

@@ -510,14 +510,26 @@ export default Vue.extend({
 				right: -10px;
 			}
 
-			// Folder overlay
+			// File and folder overlay
 			&-overlay {
 				position: absolute;
 				max-height: calc(var(--icon-preview-size) * 0.5);
 				max-width: calc(var(--icon-preview-size) * 0.5);
-				color: var(--color-main-background);
+				color: var(--color-main-text);
 				// better alignment with the folder icon
 				margin-top: 2px;
+
+				svg {
+					border-radius: 100%;
+
+					// Sow a border around the icon for better contrast
+					path {
+						stroke: var(--color-main-background);
+						stroke-width: 8px;
+						stroke-linejoin: round;
+						paint-order: stroke;
+					}
+				}
 			}
 		}
 

apps/files/src/init.ts

@@ -20,7 +20,7 @@
  *
  */
 import MenuIcon from '@mdi/svg/svg/sun-compass.svg?raw'
-import { FileAction, addNewFileMenuEntry, registerFileAction } from '@nextcloud/files'
+import { FileAction, addNewFileMenuEntry, registerDavProperty, registerFileAction } from '@nextcloud/files'
 
 import { action as deleteAction } from './actions/deleteAction'
 import { action as downloadAction } from './actions/downloadAction'
@@ -41,6 +41,8 @@ import registerPreviewServiceWorker from './services/ServiceWorker.js'
 
 import './init-templates'
 
+import { initLivePhotos } from './services/LivePhotos'
+
 // Register file actions
 registerFileAction(deleteAction)
 registerFileAction(downloadAction)
@@ -63,3 +65,7 @@ registerRecentView()
 
 // Register preview service worker
 registerPreviewServiceWorker()
+
+registerDavProperty('nc:hidden', { nc: 'http://nextcloud.org/ns' })
+
+initLivePhotos()

apps/files/src/services/LivePhotos.ts

@@ -0,0 +1,33 @@
+/**
+ * @copyright Copyright (c) 2023 Louis Chmn <louis@chmn.me>
+ *
+ * @author Louis Chmn <louis@chmn.me>
+ *
+ * @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/>.
+ *
+ */
+import { Node, registerDavProperty } from '@nextcloud/files'
+
+export function initLivePhotos(): void {
+	registerDavProperty('nc:metadata-files-live-photo', { nc: 'http://nextcloud.org/ns' })
+}
+
+/**
+ * @param {Node} node - The node
+ */
+export function isLivePhoto(node: Node): boolean {
+	return node.attributes['metadata-files-live-photo'] !== undefined
+}

apps/files/src/views/FilesList.vue

@@ -256,7 +256,10 @@ export default Vue.extend({
 		},
 
 		dirContents(): Node[] {
-			return (this.currentFolder?._children || []).map(this.getNode).filter(file => file)
+			return (this.currentFolder?._children || [])
+				.map(this.getNode)
+				.filter(file => file)
+				.filter(file => file?.attributes?.hidden !== true)
 		},
 
 		/**