[stable27] feat(Viewer) - allow to list shared media

src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue

@@ -85,6 +85,7 @@ import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
 import AudioPlayer from './AudioPlayer.vue'
 
 import { useViewer } from '../../../../../composables/useViewer.js'
+import { SHARED_ITEM } from '../../../../../constants.js'
 
 const PREVIEW_TYPE = {
 	TEMPORARY: 0,
@@ -233,13 +234,22 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+
+		sharedItemsType: {
+			type: String,
+			default: '',
+		},
 	},
 
 	emits: ['remove-file'],
 
 	setup() {
-		const { openViewer } = useViewer()
-		return { openViewer }
+		const { openViewer, generateViewerObject } = useViewer()
+
+		return {
+			openViewer,
+			generateViewerObject,
+		}
 	},
 
 	data() {
@@ -411,11 +421,7 @@ export default {
 		},
 
 		internalAbsolutePath() {
-			if (this.path.startsWith('/')) {
-				return this.path
-			}
-
-			return '/' + this.path
+			return this.path.startsWith('/') ? this.path : '/' + this.path
 		},
 
 		isTemporaryUpload() {
@@ -472,44 +478,33 @@ export default {
 			event.stopPropagation()
 			event.preventDefault()
 
-			let permissions = ''
-			if (this.permissions) {
-				if (this.permissions & OC.PERMISSION_CREATE) {
-					permissions += 'CK'
-				}
-				if (this.permissions & OC.PERMISSION_READ) {
-					permissions += 'G'
-				}
-				if (this.permissions & OC.PERMISSION_UPDATE) {
-					permissions += 'W'
-				}
-				if (this.permissions & OC.PERMISSION_DELETE) {
-					permissions += 'D'
-				}
-				if (this.permissions & OC.PERMISSION_SHARE) {
-					permissions += 'R'
+			const fileInfo = this.generateViewerObject(this)
+
+			if (this.isSharedItemsTab && this.sharedItemsType === SHARED_ITEM.TYPES.MEDIA) {
+				const token = this.$store.getters.getToken()
+				const getRevertedList = (items) => Object.values(items).reverse()
+					.map(item => this.generateViewerObject(item.messageParameters.file))
+
+				// Get available media files from store and put them to the list to navigate through slides
+				const mediaFiles = this.$store.getters.sharedItems(token).media
+				const list = getRevertedList(mediaFiles)
+				const loadMore = async () => {
+					const { messages } = await this.$store.dispatch('getSharedItems',
+						{ token, type: SHARED_ITEM.TYPES.MEDIA })
+					return getRevertedList(messages)
 				}
-			}
 
-			this.openViewer(this.internalAbsolutePath, [
-				{
-					fileid: parseInt(this.id, 10),
-					filename: this.internalAbsolutePath,
-					basename: this.name,
-					mime: this.mimetype,
-					hasPreview: this.previewAvailable === 'yes',
-					etag: this.etag,
-					permissions,
-				},
-			])
+				this.openViewer(this.internalAbsolutePath, list, fileInfo, loadMore)
+			} else {
+				this.openViewer(this.internalAbsolutePath, [fileInfo], fileInfo)
+
+			}
 		},
 	},
 }
 </script>
 
 <style lang="scss" scoped>
-@import '../../../../../assets/variables';
-
 .file-preview {
 	position: relative;
 	min-width: 0;

src/components/NewMessage/NewMessage.vue

@@ -176,7 +176,6 @@ import NewMessagePollEditor from './NewMessagePollEditor.vue'
 import NewMessageTypingIndicator from './NewMessageTypingIndicator.vue'
 import NewMessageUploadEditor from './NewMessageUploadEditor.vue'
 
-import { useViewer } from '../../composables/useViewer.js'
 import { CONVERSATION, PARTICIPANT, PRIVACY } from '../../constants.js'
 import { EventBus } from '../../services/EventBus.js'
 import { shareFile } from '../../services/filesSharingServices.js'
@@ -259,11 +258,9 @@ export default {
 	expose: ['focusInput'],
 
 	setup() {
-		const { openViewer } = useViewer()
 		const settingsStore = useSettingsStore()
 
 		return {
-			openViewer,
 			settingsStore,
 			supportTypingStatus,
 		}

src/components/NewMessage/NewMessageNewFileDialog.vue

@@ -231,7 +231,7 @@ export default {
 
 			await shareFile(filePath, this.token, '', '')
 
-			this.openViewer(filePath, [fileData])
+			this.openViewer(filePath, [fileData], fileData)
 
 			this.closeModal()
 		},

src/components/RightSidebar/SharedItems/SharedItems.vue

@@ -61,6 +61,7 @@
 				:key="item.id"
 				:small-preview="isList"
 				:row-layout="isList"
+				:shared-items-type="type"
 				:is-shared-items-tab="true"
 				v-bind="item.messageParameters.file" />
 		</template>

src/components/RightSidebar/SharedItems/SharedItemsBrowser/SharedItemsBrowser.vue

@@ -120,9 +120,9 @@ export default {
 			}
 		},
 
-		fetchItems(type) {
+		async fetchItems(type) {
 			this.isRequestingMoreItems[this.activeTab] = true
-			const hasMoreItems = this.$store.dispatch('getSharedItems', {
+			const { hasMoreItems } = await this.$store.dispatch('getSharedItems', {
 				token: this.token,
 				type,
 			})

src/composables/useViewer.js

@@ -28,9 +28,47 @@ import { useStore } from './useStore.js'
  * @description Open files in the OCA.Viewer taking into account Talk's fullscreen mode and call view
  * @see https://github.com/nextcloud/viewer
  * @param {string} path - The path to the file to be open
- * @param {object} list - The list of the files to be opened
+ * @param {Array<object>} list - The list of the files to be opened
+ * @param {object} [fileInfo] - The known file info
+ * @param {Function} [loadMore] - The callback to load additional content
  */
 
+/**
+ *
+ * @param {string} path path to file
+ * @return {string}
+ */
+function generateAbsolutePath(path) {
+	return path.startsWith('/') ? path : '/' + path
+}
+
+/**
+ *
+ * @param {number} filePermissions file permissions in a bit notation
+ * @return {string}
+ */
+function generatePermissions(filePermissions) {
+	let permissions = ''
+
+	if (filePermissions & OC.PERMISSION_CREATE) {
+		permissions += 'CK'
+	}
+	if (filePermissions & OC.PERMISSION_READ) {
+		permissions += 'G'
+	}
+	if (filePermissions & OC.PERMISSION_UPDATE) {
+		permissions += 'W'
+	}
+	if (filePermissions & OC.PERMISSION_DELETE) {
+		permissions += 'D'
+	}
+	if (filePermissions & OC.PERMISSION_SHARE) {
+		permissions += 'R'
+	}
+
+	return permissions
+}
+
 /**
  * FIXME Remove this hack once it is possible to set the parent
  * element of the viewer.
@@ -80,10 +118,20 @@ export function useViewer() {
 		}
 	})
 
+	const generateViewerObject = (file) => ({
+		fileid: parseInt(file.id, 10),
+		filename: generateAbsolutePath(file.path),
+		basename: file.name,
+		mime: file.mimetype,
+		hasPreview: file.previewAvailable === 'yes' || file['preview-available'] === 'yes',
+		etag: file.etag,
+		permissions: generatePermissions(file.permissions),
+	})
+
 	/**
 	 * @type {OpenViewer}
 	 */
-	const openViewer = async (path, list) => {
+	const openViewer = async (path, list, fileInfo, loadMore) => {
 		if (!OCA.Viewer) {
 			return false
 		}
@@ -100,10 +148,13 @@ export function useViewer() {
 		OCA.Viewer.open({
 			path,
 			list,
+			fileInfo,
 			onClose: () => {
 				isViewerOpen.value = false
 				store.dispatch('setCallViewMode', { isViewerOverlay: false })
 			},
+			loadMore,
+			canLoop: false,
 		})
 
 		// Wait Viewer to be mounted
@@ -119,5 +170,6 @@ export function useViewer() {
 	return {
 		isViewerOpen,
 		openViewer,
+		generateViewerObject,
 	}
 }

src/store/sharedItemsStore.js

@@ -125,15 +125,15 @@ const actions = {
 		if (!state.sharedItemsByConversationAndType[token]
 			|| !state.sharedItemsByConversationAndType[token][type]) {
 			console.error('Missing overview for shared items in ', token)
-			return false
+			return { hasMoreItems: false, messages: [] }
 		}
 
 		const limit = 20
 		const lastKnownMessageId = Math.min.apply(Math, Object.keys(state.sharedItemsByConversationAndType[token][type]))
 		try {
 			const response = await getSharedItems(token, type, lastKnownMessageId, limit)
 			const messages = response.data.ocs.data
-			const hasMore = messages.length >= limit
+			const hasMoreItems = messages.length >= limit
 			// loop over the response elements and add them to the store
 			for (const message in messages) {
 
@@ -143,10 +143,10 @@ const actions = {
 					message: messages[message],
 				})
 			}
-			return hasMore
+			return { hasMoreItems, messages }
 		} catch (error) {
 			console.error(error)
-			return false
+			return { hasMoreItems: false, messages: [] }
 		}
 	},