Add item shares from chat messages directly to the store

src/components/RightSidebar/SharedItems/SharedItems.vue

@@ -23,7 +23,7 @@
 	<div class="shared-items">
 		<AppNavigationCaption :title="title" />
 		<div class="files" :class="{'files__list' : isList}">
-			<template v-for="file in filesToDisplay">
+			<template v-for="file in itemsToDisplay">
 				<FilePreview :key="file.id"
 					:small-preview="isList"
 					:row-layout="isList"
@@ -52,6 +52,7 @@ import FilePreview from '../../MessagesList/MessagesGroup/Message/MessagePart/Fi
 import DotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue'
 import AppNavigationCaption from '@nextcloud/vue/dist/Components/AppNavigationCaption'
 import { showMessage } from '@nextcloud/dialogs'
+import { SHARED_ITEM } from '../../../constants'
 
 export default {
 	name: 'SharedItems',
@@ -76,57 +77,55 @@ export default {
 	},
 
 	computed: {
-		filesToDisplay() {
+		itemsToDisplay() {
 			return Object.values(this.items).reverse().slice(0, 6)
 		},
 
 		title() {
 			switch (this.type) {
-			case 'media':
+			case SHARED_ITEM.TYPES.MEDIA:
 				return t('spreed', 'Media')
-			case 'file':
+			case SHARED_ITEM.TYPES.FILE:
 				return t('spreed', 'Files')
-			case 'deck-card':
+			case SHARED_ITEM.TYPES.DECK_CARD:
 				return t('spreed', 'Deck cards')
-			case 'voice':
+			case SHARED_ITEM.TYPES.VOICE:
 				return t('spreed', 'Voice messages')
-			case 'location':
+			case SHARED_ITEM.TYPES.LOCATION:
 				return t('spreed', 'Locations')
-			case 'audio':
+			case SHARED_ITEM.TYPES.AUDIO:
 				return t('spreed', 'Audio')
-			case 'other':
-				return t('spreed', 'Other')
+			case SHARED_ITEM.TYPES.OTHER:
 			default:
-				return ''
+				return t('spreed', 'Other')
 			}
 		},
 
 		buttonTitle() {
 			switch (this.type) {
-			case 'media':
+			case SHARED_ITEM.TYPES.MEDIA:
 				return t('spreed', 'Show all media')
-			case 'file':
+			case SHARED_ITEM.TYPES.FILE:
 				return t('spreed', 'Show all files')
-			case 'deck-card':
+			case SHARED_ITEM.TYPES.DECK_CARD:
 				return t('spreed', 'Show all deck cards')
-			case 'voice':
+			case SHARED_ITEM.TYPES.VOICE:
 				return t('spreed', 'Show all voice messages')
-			case 'location':
+			case SHARED_ITEM.TYPES.LOCATION:
 				return t('spreed', 'Show all locations')
-			case 'audio':
+			case SHARED_ITEM.TYPES.AUDIO:
 				return t('spreed', 'Show all audio')
-			case 'other':
-				return t('spreed', 'Show all other')
+			case SHARED_ITEM.TYPES.OTHER:
 			default:
-				return ''
+				return t('spreed', 'Show all other')
 			}
 		},
 
 		isList() {
 			switch (this.type) {
-			case 'media':
+			case SHARED_ITEM.TYPES.MEDIA:
 				return false
-			case 'locations':
+			case SHARED_ITEM.TYPES.LOCATION:
 				return false
 			default:
 				return true

src/components/RightSidebar/SharedItems/SharedItemsTab.vue

@@ -38,6 +38,7 @@
 <script>
 import { CollectionList } from 'nextcloud-vue-collections'
 import SharedItems from './SharedItems'
+import { SHARED_ITEM } from '../../../constants'
 import AppNavigationCaption from '@nextcloud/vue/dist/Components/AppNavigationCaption'
 
 export default {
@@ -81,8 +82,8 @@ export default {
 
 		// Defines the order of the sections
 		sharedItemsOrder() {
-			// FIXME restore when non files work return ['media', 'file', 'voice', 'audio', 'location', 'deckcard', 'other']
-			return ['media', 'file', 'voice', 'audio']
+			// FIXME restore when non files work return [SHARED_ITEM.TYPES.MEDIA, SHARED_ITEM.TYPES.FILE, SHARED_ITEM.TYPES.VOICE, SHARED_ITEM.TYPES.AUDIO, SHARED_ITEM.TYPES.LOCATION, SHARED_ITEM.TYPES.DECK_CARD, SHARED_ITEM.TYPES.OTHER]
+			return [SHARED_ITEM.TYPES.MEDIA, SHARED_ITEM.TYPES.FILE, SHARED_ITEM.TYPES.VOICE, SHARED_ITEM.TYPES.AUDIO]
 		},
 	},
 

src/constants.js

@@ -104,6 +104,17 @@ export const PARTICIPANT = {
 		MAX_CUSTOM: 127,
 	},
 }
+export const SHARED_ITEM = {
+	TYPES: {
+		AUDIO: 'audio',
+		DECK_CARD: 'deckcard',
+		FILE: 'file',
+		LOCATION: 'location',
+		MEDIA: 'media',
+		OTHER: 'other',
+		VOICE: 'voice',
+	},
+}
 export const WEBINAR = {
 	LOBBY: {
 		NONE: 0,

src/store/conversationSharedItemsStore.js

@@ -22,8 +22,34 @@
 
 import Vue from 'vue'
 import { getSharedItemsOverview, getSharedItems } from '../services/conversationSharedItemsService'
+import { SHARED_ITEM } from '../constants'
 
-// Store structure
+const getItemTypeFromMessage = function(message) {
+	if (message.message === '{object}') {
+		if (message.messageParameters.object.type === 'geo-location') {
+			return SHARED_ITEM.TYPES.LOCATION
+		} else if (message.messageParameters.object.type === 'deck-card') {
+			return SHARED_ITEM.TYPES.DECK_CARD
+		} else {
+			return SHARED_ITEM.TYPES.OTHER
+		}
+	} else {
+		const messageType = message.messageType || ''
+		const mimetype = message.messageParameters.file?.mimetype || ''
+
+		if (messageType === 'voice-message') {
+			return SHARED_ITEM.TYPES.VOICE
+		} else if (mimetype.startsWith('audio/')) {
+			return SHARED_ITEM.TYPES.AUDIO
+		} else if (mimetype.startsWith('image/') || mimetype.startsWith('video/')) {
+			return SHARED_ITEM.TYPES.MEDIA
+		} else {
+			return SHARED_ITEM.TYPES.FILE
+		}
+	}
+}
+
+// sharedItemsByConversationAndType structure
 // token: {
 //    media: {},
 //    file: {},
@@ -32,20 +58,22 @@ import { getSharedItemsOverview, getSharedItems } from '../services/conversation
 //    location: {}
 //    deckcard: {},
 //    other: {},
+// },
 
-const state = () => ({
-	state: {},
-})
+const state = {
+	sharedItemsByConversationAndType: {},
+	overviewLoaded: {},
+}
 
 const getters = {
 	sharedItems: state => token => {
 		const sharedItems = {}
-		if (!state[token]) {
+		if (!state.sharedItemsByConversationAndType[token]) {
 			return {}
 		}
-		for (const type of Object.keys(state[token])) {
-			if (Object.keys(state[token][type]).length !== 0) {
-				sharedItems[type] = state[token][type]
+		for (const type of Object.keys(state.sharedItemsByConversationAndType[token])) {
+			if (Object.keys(state.sharedItemsByConversationAndType[token][type]).length !== 0) {
+				sharedItems[type] = state.sharedItemsByConversationAndType[token][type]
 			}
 		}
 		return sharedItems
@@ -54,20 +82,34 @@ const getters = {
 
 export const mutations = {
 	addSharedItemsOverview: (state, { token, data }) => {
-		if (!state[token]) {
-			Vue.set(state, token, {})
+		Vue.set(state.overviewLoaded, token, true)
+
+		if (!state.sharedItemsByConversationAndType[token]) {
+			Vue.set(state.sharedItemsByConversationAndType, token, {})
 		}
+
 		for (const type of Object.keys(data)) {
-			if (!state[token][type]) {
-				Vue.set(state[token], type, {})
-				for (const message of data[type]) {
-					if (!state[token][type]?.[message.id]) {
-						Vue.set(state[token][type], message.id, message)
-					}
-				}
+			if (!state.sharedItemsByConversationAndType[token][type]) {
+				Vue.set(state.sharedItemsByConversationAndType[token], type, {})
+			}
+
+			for (const message of data[type]) {
+				Vue.set(state.sharedItemsByConversationAndType[token][type], message.id, message)
 			}
 		}
 	},
+
+	addSharedItemMessage: (state, { token, type, message }) => {
+		if (!state.sharedItemsByConversationAndType[token]) {
+			Vue.set(state.sharedItemsByConversationAndType, token, {})
+		}
+		if (!state.sharedItemsByConversationAndType[token][type]) {
+			Vue.set(state.sharedItemsByConversationAndType[token], type, {})
+		}
+		if (!state.sharedItemsByConversationAndType[token][type]?.[message.id]) {
+			Vue.set(state.sharedItemsByConversationAndType[token][type], message.id, message)
+		}
+	},
 }
 
 const actions = {
@@ -84,7 +126,11 @@ const actions = {
 		}
 	},
 
-	async getSharedItemsOverview({ commit }, { token }) {
+	async getSharedItemsOverview({ commit, state }, { token }) {
+		if (state.overviewLoaded[token]) {
+			return
+		}
+
 		try {
 			const response = await getSharedItemsOverview(token, 10)
 			commit('addSharedItemsOverview', {
@@ -95,6 +141,14 @@ const actions = {
 			console.debug(error)
 		}
 	},
+
+	async addSharedItemMessage({ commit }, { message }) {
+		commit('addSharedItemMessage', {
+			token: message.token,
+			type: getItemTypeFromMessage(message),
+			message,
+		})
+	},
 }
 
 export default { state, mutations, getters, actions }

src/store/messagesStore.js

@@ -412,6 +412,13 @@ const actions = {
 		}
 
 		context.commit('addMessage', message)
+
+		 if ((message.messageType === 'comment' && message.message === '{file}' && message.messageParameters?.file)
+			|| (message.messageType === 'comment' && message.message === '{object}' && message.messageParameters?.object)) {
+			context.dispatch('addSharedItemMessage', {
+				message,
+			})
+		 }
 	},
 
 	/**