From 02384f468f76b407fc9fd6fec090bcbc5b2bde63 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Tue, 19 Sep 2023 19:52:13 +0200
Subject: [PATCH 1/3] add generateViewerObject util

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 .../Message/MessagePart/FilePreview.vue       | 48 ++++-------------
 src/components/NewMessage/NewMessage.vue      |  3 --
 .../NewMessage/NewMessageNewFileDialog.vue    |  2 +-
 src/composables/useViewer.js                  | 53 ++++++++++++++++++-
 4 files changed, 61 insertions(+), 45 deletions(-)

diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
index 135b131796..b166c49ce3 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
@@ -238,8 +238,12 @@ export default {
 	emits: ['remove-file'],
 
 	setup() {
-		const { openViewer } = useViewer()
-		return { openViewer }
+		const { openViewer, generateViewerObject } = useViewer()
+
+		return {
+			openViewer,
+			generateViewerObject,
+		}
 	},
 
 	data() {
@@ -411,11 +415,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 +472,14 @@ 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'
-				}
-			}
-
-			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,
-				},
-			])
+			const fileInfo = this.generateViewerObject(this)
+			this.openViewer(this.internalAbsolutePath, [fileInfo], fileInfo)
 		},
 	},
 }
 </script>
 
 <style lang="scss" scoped>
-@import '../../../../../assets/variables';
-
 .file-preview {
 	position: relative;
 	min-width: 0;
diff --git a/src/components/NewMessage/NewMessage.vue b/src/components/NewMessage/NewMessage.vue
index ab09aa0a0e..b60021d07c 100644
--- a/src/components/NewMessage/NewMessage.vue
+++ b/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,
 		}
diff --git a/src/components/NewMessage/NewMessageNewFileDialog.vue b/src/components/NewMessage/NewMessageNewFileDialog.vue
index 8eb2e5a3e8..34e9c8da15 100644
--- a/src/components/NewMessage/NewMessageNewFileDialog.vue
+++ b/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()
 		},
diff --git a/src/composables/useViewer.js b/src/composables/useViewer.js
index 156c41e6f3..c13096c2c3 100644
--- a/src/composables/useViewer.js
+++ b/src/composables/useViewer.js
@@ -28,9 +28,46 @@ 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 {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 +117,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) => {
 		if (!OCA.Viewer) {
 			return false
 		}
@@ -100,6 +147,7 @@ export function useViewer() {
 		OCA.Viewer.open({
 			path,
 			list,
+			fileInfo,
 			onClose: () => {
 				isViewerOpen.value = false
 				store.dispatch('setCallViewMode', { isViewerOverlay: false })
@@ -119,5 +167,6 @@ export function useViewer() {
 	return {
 		isViewerOpen,
 		openViewer,
+		generateViewerObject,
 	}
 }

From be6e724fb01f90c2b108462243bace1fe20ff9fe Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Tue, 19 Sep 2023 20:01:10 +0200
Subject: [PATCH 2/3] navigate through shared media with Viewer pagination

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 .../Message/MessagePart/FilePreview.vue       | 19 ++++++++++++++++++-
 .../RightSidebar/SharedItems/SharedItems.vue  |  1 +
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
index b166c49ce3..9abf4fa235 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
+++ b/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,6 +234,11 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+
+		sharedItemsType: {
+			type: String,
+			default: '',
+		},
 	},
 
 	emits: ['remove-file'],
@@ -473,7 +479,18 @@ export default {
 			event.preventDefault()
 
 			const fileInfo = this.generateViewerObject(this)
-			this.openViewer(this.internalAbsolutePath, [fileInfo], fileInfo)
+
+			if (this.isSharedItemsTab && this.sharedItemsType === SHARED_ITEM.TYPES.MEDIA) {
+				// Get available media files from store and put them to the list to navigate through slides
+				const mediaFiles = this.$store.getters.sharedItems(this.$store.getters.getToken())?.media
+				const list = Object.values(mediaFiles).reverse()
+					.map(item => this.generateViewerObject(item.messageParameters.file))
+
+				this.openViewer(this.internalAbsolutePath, list, fileInfo)
+			} else {
+				this.openViewer(this.internalAbsolutePath, [fileInfo], fileInfo)
+
+			}
 		},
 	},
 }
diff --git a/src/components/RightSidebar/SharedItems/SharedItems.vue b/src/components/RightSidebar/SharedItems/SharedItems.vue
index 473fc02e87..23e752a722 100644
--- a/src/components/RightSidebar/SharedItems/SharedItems.vue
+++ b/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>

From ae9ab33dc95725c4d85bcf537751bd993672a0a9 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Wed, 20 Sep 2023 22:04:40 +0200
Subject: [PATCH 3/3] add paginated request when reach end of list

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 .../Message/MessagePart/FilePreview.vue          | 16 ++++++++++++----
 .../SharedItemsBrowser/SharedItemsBrowser.vue    |  4 ++--
 src/composables/useViewer.js                     |  5 ++++-
 src/store/sharedItemsStore.js                    |  8 ++++----
 4 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
index 9abf4fa235..ef709de728 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
@@ -481,12 +481,20 @@ export default {
 			const fileInfo = this.generateViewerObject(this)
 
 			if (this.isSharedItemsTab && this.sharedItemsType === SHARED_ITEM.TYPES.MEDIA) {
-				// Get available media files from store and put them to the list to navigate through slides
-				const mediaFiles = this.$store.getters.sharedItems(this.$store.getters.getToken())?.media
-				const list = Object.values(mediaFiles).reverse()
+				const token = this.$store.getters.getToken()
+				const getRevertedList = (items) => Object.values(items).reverse()
 					.map(item => this.generateViewerObject(item.messageParameters.file))
 
-				this.openViewer(this.internalAbsolutePath, list, fileInfo)
+				// 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, list, fileInfo, loadMore)
 			} else {
 				this.openViewer(this.internalAbsolutePath, [fileInfo], fileInfo)
 
diff --git a/src/components/RightSidebar/SharedItems/SharedItemsBrowser/SharedItemsBrowser.vue b/src/components/RightSidebar/SharedItems/SharedItemsBrowser/SharedItemsBrowser.vue
index 5d1e4468fa..bbdaa7faad 100644
--- a/src/components/RightSidebar/SharedItems/SharedItemsBrowser/SharedItemsBrowser.vue
+++ b/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,
 			})
diff --git a/src/composables/useViewer.js b/src/composables/useViewer.js
index c13096c2c3..c0eda37951 100644
--- a/src/composables/useViewer.js
+++ b/src/composables/useViewer.js
@@ -30,6 +30,7 @@ import { useStore } from './useStore.js'
  * @param {string} path - The path to the file to be open
  * @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
  */
 
 /**
@@ -130,7 +131,7 @@ export function useViewer() {
 	/**
 	 * @type {OpenViewer}
 	 */
-	const openViewer = async (path, list, fileInfo) => {
+	const openViewer = async (path, list, fileInfo, loadMore) => {
 		if (!OCA.Viewer) {
 			return false
 		}
@@ -152,6 +153,8 @@ export function useViewer() {
 				isViewerOpen.value = false
 				store.dispatch('setCallViewMode', { isViewerOverlay: false })
 			},
+			loadMore,
+			canLoop: false,
 		})
 
 		// Wait Viewer to be mounted
diff --git a/src/store/sharedItemsStore.js b/src/store/sharedItemsStore.js
index b0959cd350..dc99e0bcff 100644
--- a/src/store/sharedItemsStore.js
+++ b/src/store/sharedItemsStore.js
@@ -125,7 +125,7 @@ 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
@@ -133,7 +133,7 @@ const actions = {
 		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: [] }
 		}
 	},