Rewrite Message action links

app/action-links/client/index.js

@@ -1,6 +1,4 @@
 import { actionLinks } from './lib/actionLinks';
-import './init';
-import './stylesheets/actionLinks.css';
 
 export {
 	actionLinks,

app/ui-message/client/message.html

@@ -149,22 +149,7 @@
 				</div>
 			{{/unless}}
 			{{#unless hideActionLinks}}
-			<ul class="actionLinks">
-				{{#each actionLink in actionLinks}}
-					<li class="color-primary-action-color">
-						<span class="rc-button rc-button--primary rc-button--small" style="display: inline-block; line-height: 1.75rem" data-actionlink="{{actionLink.id}}">
-							{{#if actionLink.icon}}
-								<i class="{{actionLink.icon}}"></i>
-							{{/if}}
-							{{#if actionLink.i18nLabel}}
-								{{_ actionLink.i18nLabel}}
-							{{else}}
-								{{actionLink.label}}
-							{{/if}}
-						</span>
-					</li>
-				{{/each}}
-			</ul>
+				{{> MessageActions mid=msg._id actions=actionLinks runAction=(actions.runAction msg)}}
 			{{/unless}}
 			{{#unless hideReactions}}
 			<ul class="reactions">

app/ui-utils/client/lib/messageContext.js

@@ -5,16 +5,19 @@ import { FlowRouter } from 'meteor/kadira:flow-router';
 import { Subscriptions, Rooms, Users } from '../../../models/client';
 import { hasPermission } from '../../../authorization/client';
 import { settings } from '../../../settings/client';
-import { getUserPreference, roomTypes } from '../../../utils/client';
+import { getUserPreference, roomTypes, handleError } from '../../../utils/client';
 import { AutoTranslate } from '../../../autotranslate/client';
+import { Layout } from './Layout';
+import { fireGlobalEvent } from './fireGlobalEvent';
+import { actionLinks } from '../../../action-links/client';
 
 
 const fields = { name: 1, username: 1, 'settings.preferences.showMessageInMainThread': 1, 'settings.preferences.autoImageLoad': 1, 'settings.preferences.saveMobileBandwidth': 1, 'settings.preferences.collapseMediaByDefault': 1, 'settings.preferences.hideRoles': 1 };
 
 export function messageContext({ rid } = Template.instance()) {
 	const uid = Meteor.userId();
 	const user = Users.findOne({ _id: uid }, { fields }) || {};
-
+	const instace = Template.instance();
 	const openThread = (e) => {
 		const { rid, mid, tmid } = e.currentTarget.dataset;
 		const room = Rooms.findOne({ _id: rid });
@@ -28,6 +31,22 @@ export function messageContext({ rid } = Template.instance()) {
 		});
 	};
 
+	const runAction = Layout.isEmbedded() ? (msg, e) => {
+		const { actionlink } = e.currentTarget.dataset;
+		return fireGlobalEvent('click-action-link', {
+			actionlink,
+			value: msg._id,
+			message: msg,
+		});
+	} : (msg, e) => {
+		const { actionlink } = e.currentTarget.dataset;
+		actionLinks.run(actionlink, msg._id, instace, (err) => {
+			if (err) {
+				handleError(err);
+			}
+		});
+	};
+
 	const openDiscussion = (e) => {
 		e.preventDefault();
 		const { drid } = e.currentTarget.dataset;
@@ -62,6 +81,9 @@ export function messageContext({ rid } = Template.instance()) {
 			openThread() {
 				return openThread;
 			},
+			runAction(msg) {
+				return () => (e) => runAction(msg, e);
+			},
 			openDiscussion() {
 				return openDiscussion;
 			},

app/videobridge/client/views/videoFlexTab.js

@@ -155,13 +155,22 @@ Template.videoFlexTab.onRendered(function() {
 				});
 			}
 
+			await new Promise((resolve) => {
+				if (typeof JitsiMeetExternalAPI === 'undefined') {
+					const prefix = __meteor_runtime_config__.ROOT_URL_PATH_PREFIX || '';
+					return $.getScript(`${ prefix }/packages/rocketchat_videobridge/client/public/external_api.js`, resolve);
+				}
+				resolve();
+			});
+
 			if (typeof JitsiMeetExternalAPI !== 'undefined') {
 				// Keep it from showing duplicates when re-evaluated on variable change.
 				const name = Users.findOne(Meteor.userId(), { fields: { name: 1 } });
 				if (!$('[id^=jitsiConference]').length) {
 					Tracker.nonreactive(async () => {
 						await start();
 
+
 						this.api = new JitsiMeetExternalAPI(domain, jitsiRoom, width, height, this.$('.video-container').get(0), configOverwrite, interfaceConfigOverwrite, noSsl, accessToken);
 
 						/*

client/adapters.js

@@ -1,5 +1,6 @@
 import { createTemplateForComponent } from './reactAdapters';
 
+createTemplateForComponent('MessageActions', () => import('./components/Message/Actions'));
 createTemplateForComponent('reactAttachments', () => import('./components/Message/Attachments'));
 createTemplateForComponent('ThreadMetric', () => import('./components/Message/Metrics/Thread'));
 createTemplateForComponent('DiscussionMetric', () => import('./components/Message/Metrics/Discussion'));

client/components/Message/Actions/index.tsx

@@ -0,0 +1,26 @@
+import React, { FC } from 'react';
+import { IconProps, Icon, Button, ButtonGroup } from '@rocket.chat/fuselage';
+
+import { useTranslation } from '../../../contexts/TranslationContext';
+import { Content } from '..';
+
+type RunAction = () => void;
+
+type ActionOptions = {
+	mid: string;
+	id: string;
+	icon: IconProps['name'];
+	i18nLabel?: string;
+	label?: string;
+	runAction?: RunAction;
+};
+
+export const Action: FC<ActionOptions> = ({ id, icon, i18nLabel, label, mid, runAction }) => {
+	const t = useTranslation();
+
+	return <Button id={id} data-mid={mid} data-actionlink={id} onClick={runAction} primary small>{icon && <Icon name={icon.replace('icon-', '')}/>}{i18nLabel ? t(i18nLabel) : label }</Button>;
+};
+
+const Actions: FC<{ actions: Array<ActionOptions>; runAction: RunAction; mid: string }> = ({ actions, runAction }) => <Content width='full' justifyContent='center'><ButtonGroup align='center'>{actions.map((action) => <Action runAction={runAction} key={action.id} {...action}/>)}</ButtonGroup></Content>;
+
+export default Actions;