feat: Image gallery with swiper (#30623)

apps/meteor/.meteor/packages

@@ -72,6 +72,5 @@ [email protected]
 
 # photoswipe
 
-jquery
 zodern:types
 zodern:standard-minifier-js

apps/meteor/.meteor/versions

@@ -43,7 +43,6 @@ [email protected]
 [email protected]
 [email protected]
 [email protected]
-[email protected]
 kadira:[email protected]
 [email protected]
 [email protected]

apps/meteor/app/api/server/v1/channels.ts

@@ -1,5 +1,5 @@
 import { Team, Room } from '@rocket.chat/core-services';
-import type { IRoom, ISubscription, IUser, RoomType } from '@rocket.chat/core-typings';
+import type { IRoom, ISubscription, IUser, RoomType, IUpload } from '@rocket.chat/core-typings';
 import { Integrations, Messages, Rooms, Subscriptions, Uploads, Users } from '@rocket.chat/models';
 import {
 	isChannelsAddAllProps,
@@ -18,6 +18,7 @@ import {
 	isChannelsConvertToTeamProps,
 	isChannelsSetReadOnlyProps,
 	isChannelsDeleteProps,
+	isChannelsImagesProps,
 } from '@rocket.chat/rest-typings';
 import { Meteor } from 'meteor/meteor';
 
@@ -803,6 +804,48 @@ API.v1.addRoute(
 	},
 );
 
+API.v1.addRoute(
+	'channels.images',
+	{ authRequired: true, validateParams: isChannelsImagesProps },
+	{
+		async get() {
+			const room = await Rooms.findOneById<Pick<IRoom, '_id' | 't' | 'teamId' | 'prid'>>(this.queryParams.roomId, {
+				projection: { t: 1, teamId: 1, prid: 1 },
+			});
+
+			if (!room || !(await canAccessRoomAsync(room, { _id: this.userId }))) {
+				return API.v1.unauthorized();
+			}
+
+			let initialImage: IUpload | null = null;
+			if (this.queryParams.startingFromId) {
+				initialImage = await Uploads.findOneById(this.queryParams.startingFromId);
+			}
+
+			const { offset, count } = await getPaginationItems(this.queryParams);
+
+			const { cursor, totalCount } = Uploads.findImagesByRoomId(room._id, initialImage?.uploadedAt, {
+				skip: offset,
+				limit: count,
+			});
+
+			const [files, total] = await Promise.all([cursor.toArray(), totalCount]);
+
+			// If the initial image was not returned in the query, insert it as the first element of the list
+			if (initialImage && !files.find(({ _id }) => _id === (initialImage as IUpload)._id)) {
+				files.splice(0, 0, initialImage);
+			}
+
+			return API.v1.success({
+				files,
+				count,
+				offset,
+				total,
+			});
+		},
+	},
+);
+
 API.v1.addRoute(
 	'channels.getIntegrations',
 	{ authRequired: true },

apps/meteor/app/emoji-custom/client/lib/emojiCustom.js

@@ -1,11 +1,9 @@
 import { escapeRegExp } from '@rocket.chat/string-helpers';
-import $ from 'jquery';
 import { Meteor } from 'meteor/meteor';
 import { Session } from 'meteor/session';
 
 import { emoji, updateRecent } from '../../../emoji/client';
 import { CachedCollectionManager } from '../../../ui-cached-collection/client';
-import { LegacyRoomManager } from '../../../ui-utils/client';
 import { getURL } from '../../../utils/client';
 import { sdk } from '../../../utils/client/lib/SDKClient';
 import { isSetNotNull } from './function-isSet';
@@ -45,9 +43,6 @@ export const deleteEmojiCustom = function (emojiData) {
 };
 
 export const updateEmojiCustom = function (emojiData) {
-	let key = `emoji_random_${emojiData.name}`;
-	Session.set(key, Math.round(Math.random() * 1000));
-
 	const previousExists = isSetNotNull(() => emojiData.previousName);
 	const currentAliases = isSetNotNull(() => emojiData.aliases);
 
@@ -88,47 +83,6 @@ export const updateEmojiCustom = function (emojiData) {
 		}
 	}
 
-	const url = getEmojiUrlFromName(emojiData.name, emojiData.extension);
-
-	// update in admin interface
-	if (previousExists && emojiData.name !== emojiData.previousName) {
-		$(document)
-			.find(`.emojiAdminPreview-image[data-emoji='${emojiData.previousName}']`)
-			.css('background-image', `url('${url})'`)
-			.attr('data-emoji', `${emojiData.name}`);
-	} else {
-		$(document).find(`.emojiAdminPreview-image[data-emoji='${emojiData.name}']`).css('background-image', `url('${url}')`);
-	}
-
-	// update in picker
-	if (previousExists && emojiData.name !== emojiData.previousName) {
-		$(document)
-			.find(`li[data-emoji='${emojiData.previousName}'] span`)
-			.css('background-image', `url('${url}')`)
-			.attr('data-emoji', `${emojiData.name}`);
-		$(document)
-			.find(`li[data-emoji='${emojiData.previousName}']`)
-			.attr('data-emoji', `${emojiData.name}`)
-			.attr('class', `emoji-${emojiData.name}`);
-	} else {
-		$(document).find(`li[data-emoji='${emojiData.name}'] span`).css('background-image', `url('${url}')`);
-	}
-
-	// update in picker and opened rooms
-	for (key in LegacyRoomManager.openedRooms) {
-		if (LegacyRoomManager.openedRooms.hasOwnProperty(key)) {
-			const room = LegacyRoomManager.openedRooms[key];
-			if (previousExists && emojiData.name !== emojiData.previousName) {
-				$(room.dom)
-					.find(`span[data-emoji='${emojiData.previousName}']`)
-					.css('background-image', `url('${url}')`)
-					.attr('data-emoji', `${emojiData.name}`);
-			} else {
-				$(room.dom).find(`span[data-emoji='${emojiData.name}']`).css('background-image', `url('${url}')`);
-			}
-		}
-	}
-
 	updateRecent('rocket');
 };
 

apps/meteor/app/theme/client/main.css

@@ -21,7 +21,6 @@
 
 /* Legacy theming */
 @import 'imports/general/theme_old.css';
-@import './vendor/photoswipe.css';
 @import './vendor/fontello/css/fontello.css';
 @import './rocketchat.font.css';
 @import './mentionLink.css';