[stable30] feat(Albums): Allow deleting an album photo from the viewer

lib/Sabre/PropFindPlugin.php

@@ -16,9 +16,11 @@
 use OCA\Photos\Sabre\Place\PlacePhoto;
 use OCA\Photos\Sabre\Place\PlaceRoot;
 use OCP\Files\DavUtil;
+use OCP\Files\IRootFolder;
 use OCP\Files\NotFoundException;
 use OCP\FilesMetadata\IFilesMetadataManager;
 use OCP\IPreview;
+use OCP\IUserSession;
 use Sabre\DAV\INode;
 use Sabre\DAV\PropFind;
 use Sabre\DAV\PropPatch;
@@ -37,6 +39,7 @@ class PropFindPlugin extends ServerPlugin {
 	public const NBITEMS_PROPERTYNAME = '{http://nextcloud.org/ns}nbItems';
 	public const COLLABORATORS_PROPERTYNAME = '{http://nextcloud.org/ns}collaborators';
 	public const PERMISSIONS_PROPERTYNAME = '{http://owncloud.org/ns}permissions';
+	public const PHOTOS_COLLECTION_FILE_ORIGINAL_FILENAME_PROPERTYNAME = '{http://nextcloud.org/ns}photos-collection-file-original-filename';
 
 	private IPreview $previewManager;
 	private ?Tree $tree;
@@ -46,6 +49,8 @@ public function __construct(
 		IPreview $previewManager,
 		AlbumMapper $albumMapper,
 		private IFilesMetadataManager $filesMetadataManager,
+		private readonly IUserSession $userSession,
+		private readonly IRootFolder $rootFolder,
 	) {
 		$this->previewManager = $previewManager;
 		$this->albumMapper = $albumMapper;
@@ -110,6 +115,18 @@ public function propFind(PropFind $propFind, INode $node): void {
 				return $metadata->hasKey('files-live-photo') && $node->getFileInfo()->getMimetype() === 'video/quicktime' ? 'true' : 'false';
 			});
 
+			$propFind->handle(self::PHOTOS_COLLECTION_FILE_ORIGINAL_FILENAME_PROPERTYNAME, function () use ($node) {
+				if (!($node instanceof AlbumPhoto)) {
+					return;
+				}
+
+				$currentUser = $this->userSession->getUser();
+				$fileOwner = $node->getFileInfo()->getOwner();
+				if ($currentUser !== null && $currentUser === $fileOwner) {
+					$userFolder = $this->rootFolder->getUserFolder($currentUser->getUID());
+					return $userFolder->getRelativePath($node->getFileInfo()->getPath());
+				}
+			});
 		}
 
 		if ($node instanceof AlbumRoot) {

src/components/Collection/CollectionContent.vue

@@ -45,12 +45,14 @@
 import AlertCircle from 'vue-material-design-icons/AlertCircle.vue'
 import FolderMultipleImage from 'vue-material-design-icons/FolderMultipleImage.vue'
 
+import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { NcEmptyContent, isMobile } from '@nextcloud/vue'
 import { translate } from '@nextcloud/l10n'
 
 import FilesSelectionMixin from '../../mixins/FilesSelectionMixin.js'
 import FilesListViewer from '.././FilesListViewer.vue'
 import File from '.././File.vue'
+import { toViewerFileInfo } from '../../utils/fileUtils.js'
 
 export default {
 	name: 'CollectionContent',
@@ -114,17 +116,29 @@ export default {
 		},
 	},
 
+	mounted() {
+		subscribe('files:node:deleted', this.handleFileDeleted)
+	},
+
+	destroyed() {
+		unsubscribe('files:node:deleted', this.handleFileDeleted)
+	},
+
 	methods: {
 		openViewer(fileId) {
 			const file = this.files[fileId]
 			OCA.Viewer.open({
-				fileInfo: file,
-				list: this.sortedCollectionFileIds.map(fileId => this.files[fileId]).filter(file => !file.sectionHeader),
+				fileInfo: toViewerFileInfo(file),
+				list: this.sortedCollectionFileIds.map(fileId => toViewerFileInfo(this.files[fileId])).filter(file => !file.sectionHeader),
 				loadMore: file.loadMore ? async () => await file.loadMore(true) : () => [],
 				canLoop: file.canLoop,
 			})
 		},
 
+		handleFileDeleted({ fileid }) {
+			this.$store.commit('removeFilesFromCollection', { collectionFileName: this.collection.filename, fileIdsToRemove: [fileid?.toString()] })
+		},
+
 		t: translate,
 	},
 }

src/components/FileLegacy.vue

@@ -41,6 +41,7 @@
 
 <script>
 import { generateUrl } from '@nextcloud/router'
+import { toViewerFileInfo } from '../utils/fileUtils.js'
 
 export default {
 	name: 'FileLegacy',
@@ -88,8 +89,8 @@ export default {
 	methods: {
 		openViewer() {
 			OCA.Viewer.open({
-				fileInfo: this.item.injected,
-				list: this.item.injected.list,
+				fileInfo: toViewerFileInfo(this.item.injected),
+				list: this.item.injected.list.map(file => toViewerFileInfo(file)),
 				loadMore: this.item.injected.loadMore ? async () => await this.item.injected.loadMore(true) : () => [],
 				canLoop: this.item.injected.canLoop,
 			})

src/components/FilesListViewer.vue

@@ -213,10 +213,12 @@ export default {
 
 	mounted() {
 		subscribe('files:node:updated', this.handleFileUpdated)
+		subscribe('files:node:deleted', this.handleFileDeleted)
 	},
 
 	destroyed() {
 		unsubscribe('files:node:updated', this.handleFileUpdated)
+		unsubscribe('files:node:deleted', this.handleFileDeleted)
 	},
 
 	methods: {
@@ -251,6 +253,10 @@ export default {
 			const fetchedFile = await fetchFile(this.files[fileid].filename)
 			this.appendFiles([fetchedFile])
 		},
+
+		handleFileDeleted({ fileid }) {
+			this.$store.commit('deleteFile', fileid)
+		},
 	},
 }
 </script>

src/components/PhotosPicker.vue

@@ -227,6 +227,7 @@ export default defineComponent({
 
 		emitPickedEvent() {
 			this.$emit('files-picked', this.selectedFileIds)
+			this.resetSelection()
 		},
 		/**
 		 * @param {string} date - In the following format: YYYYMM

src/mixins/FetchCollectionContentMixin.js

@@ -10,6 +10,7 @@ import { showError } from '@nextcloud/dialogs'
 import AbortControllerMixin from './AbortControllerMixin.js'
 import { fetchCollection, fetchCollectionFiles } from '../services/collectionFetcher.js'
 import logger from '../services/logger.js'
+import { collectionFilesExtraProps } from '../store/collections.js'
 import SemaphoreWithPriority from '../utils/semaphoreWithPriority.js'
 
 export default {
@@ -76,11 +77,13 @@ export default {
 		 * @param {((value: import('../services/collectionFetcher.js').CollectionFile, index: number, array: import('../services/collectionFetcher.js').CollectionFile[]) => any)[]} [mappers] - Callback that can transform files before they are appended.
 		 * @return {Promise<import('../services/collectionFetcher.js').CollectionFile[]>}
 		 */
-		async fetchCollectionFiles(collectionFileName, extraProps, client, mappers = []) {
+		async fetchCollectionFiles(collectionFileName, extraProps = [], client, mappers = []) {
 			if (this.loadingCollectionFiles) {
 				return []
 			}
 
+			extraProps = [...extraProps, ...collectionFilesExtraProps]
+
 			const fetchSemaphoreSymbol = await this.fetchSemaphore.acquire()
 
 			try {

src/services/collectionFetcher.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-tabs */
 /**
  * SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
@@ -75,7 +76,7 @@ export function getCollectionFilesDavRequest(extraProps = []) {
 					<oc:favorite />
 					<oc:fileid />
 					<oc:permissions />
-					${extraProps.join('')}
+					${extraProps.join('\n					')}
 				</d:prop>
 			</d:propfind>`
 }

src/store/collections.js

@@ -10,6 +10,8 @@ import client from '../services/DavClient.js'
 import logger from '../services/logger.js'
 import Semaphore from '../utils/semaphoreWithPriority.js'
 
+export const collectionFilesExtraProps = ['<nc:photos-collection-file-original-filename />']
+
 /**
  * Collections are indexed by their `filename`.
  */
@@ -319,7 +321,7 @@ const actions = {
 								</d:prop>
 							</d:set>
 							</d:propertyupdate>`,
-				}
+				},
 			)
 
 			return updatedCollection

src/utils/fileUtils.js

@@ -6,6 +6,7 @@ import { generateRemoteUrl } from '@nextcloud/router'
 import camelcase from 'camelcase'
 import { rootPath } from '../services/DavClient.js'
 import { isNumber } from './numberUtils.js'
+import { getRemoteURL, getRootPath } from '@nextcloud/files/dav'
 
 /**
  * Get an url encoded path
@@ -43,7 +44,7 @@ const extractFilePaths = function(path) {
  * @param {object} fileInfo1 file 1 fileinfo
  * @param {object} fileInfo2 file 2 fileinfo
  * @param {string} key key to sort with
- * @param {boolean} [asc=true] sort ascending?
+ * @param {boolean} [asc] sort ascending?
  * @return {number}
  */
 const sortCompare = function(fileInfo1, fileInfo2, key, asc = true) {
@@ -127,4 +128,25 @@ function flattenAndFormatObject(obj, callback) {
 	}, {})
 }
 
-export { encodeFilePath, extractFilePaths, sortCompare, genFileInfo, extractTagInfo }
+/**
+ *
+ * @param file
+ */
+function toViewerFileInfo(file) {
+	let filename = file.filename
+	let source = file.source
+	// Override the filename and source to allow deleting a file from the viewer.
+	// This is needed when the filename and source are related to the albums.
+	if (file.photosCollectionFileOriginalFilename !== undefined) {
+		filename = file.photosCollectionFileOriginalFilename
+		source = getRemoteURL() + getRootPath() + filename
+	}
+
+	return {
+		...file,
+		filename,
+		source,
+	}
+}
+
+export { encodeFilePath, extractFilePaths, sortCompare, genFileInfo, extractTagInfo, toViewerFileInfo }

src/views/FaceContent.vue

@@ -187,6 +187,7 @@ import logger from '../services/logger.js'
 import FetchFacesMixin from '../mixins/FetchFacesMixin.js'
 import Vue from 'vue'
 import FaceMergeForm from '../components/Faces/FaceMergeForm.vue'
+import { toViewerFileInfo } from '../utils/fileUtils.js'
 
 export default {
 	name: 'FaceContent',
@@ -295,7 +296,7 @@ export default {
 			const file = this.files[fileId]
 			OCA.Viewer.open({
 				path: '/' + file.filename.split('/').slice(3).join('/'),
-				list: this.faceFileIds.map(fileId => ({ ...this.files[fileId], filename: '/' + this.files[fileId].filename.split('/').slice(3).join('/') })),
+				list: this.faceFileIds.map(fileId => toViewerFileInfo({ ...this.files[fileId], filename: '/' + this.files[fileId].filename.split('/').slice(3).join('/') })),
 				loadMore: file.loadMore ? async () => await file.loadMore(true) : () => [],
 				canLoop: file.canLoop,
 			})

src/views/TagContent.vue

@@ -56,6 +56,7 @@ import FilesListViewer from '../components/FilesListViewer.vue'
 
 import FilesSelectionMixin from '../mixins/FilesSelectionMixin.js'
 import AbortControllerMixin from '../mixins/AbortControllerMixin.js'
+import { toViewerFileInfo } from '../utils/fileUtils.js'
 
 export default {
 	name: 'TagContent',
@@ -156,7 +157,7 @@ export default {
 			const file = this.files[fileId]
 			OCA.Viewer.open({
 				path: file.filename,
-				list: this.fileIds.map(fileId => this.files[fileId]),
+				list: this.fileIds.map(fileId => toViewerFileInfo(this.files[fileId])),
 				loadMore: file.loadMore ? async () => await file.loadMore(true) : () => [],
 				canLoop: file.canLoop,
 			})

src/views/Timeline.vue

@@ -158,6 +158,7 @@ import ActionDownload from '../components/Actions/ActionDownload.vue'
 import HeaderNavigation from '../components/HeaderNavigation.vue'
 import PhotosSourceLocationsSettings from '../components/Settings/PhotosSourceLocationsSettings.vue'
 import { configChangedEvent } from '../store/userConfig.js'
+import { toViewerFileInfo } from '../utils/fileUtils.js'
 
 export default {
 	name: 'Timeline',
@@ -271,7 +272,7 @@ export default {
 			const file = this.files[fileId]
 			OCA.Viewer.open({
 				fileInfo: file,
-				list: Object.values(this.fileIdsByMonth).flat().map(fileId => this.files[fileId]),
+				list: Object.values(this.fileIdsByMonth).flat().map(fileId => toViewerFileInfo(this.files[fileId])),
 				loadMore: file.loadMore ? async () => await file.loadMore(true) : () => [],
 				canLoop: file.canLoop,
 			})

src/views/UnassignedFaces.vue

@@ -105,6 +105,7 @@ import logger from '../services/logger.js'
 import FetchFacesMixin from '../mixins/FetchFacesMixin.js'
 import Vue from 'vue'
 import FaceMergeForm from '../components/Faces/FaceMergeForm.vue'
+import { toViewerFileInfo } from '../utils/fileUtils.js'
 
 export default {
 	name: 'UnassignedFaces',
@@ -183,7 +184,7 @@ export default {
 			const file = this.files[fileId]
 			OCA.Viewer.open({
 				path: '/' + file.filename.split('/').slice(3).join('/'),
-				list: this.faceFileIds.map(fileId => ({ ...this.files[fileId], filename: '/' + this.files[fileId].filename.split('/').slice(3).join('/') })),
+				list: this.faceFileIds.map(fileId => toViewerFileInfo({ ...this.files[fileId], filename: '/' + this.files[fileId].filename.split('/').slice(3).join('/') })),
 				loadMore: file.loadMore ? async () => await file.loadMore(true) : () => [],
 				canLoop: file.canLoop,
 			})