new: message skeleton

apps/meteor/client/views/room/MessageList/components/MessageContent.tsx

@@ -20,6 +20,7 @@ import MessageContentBody from './MessageContentBody';
 import ReactionsList from './MessageReactionsList';
 import ReadReceipt from './MessageReadReceipt';
 import PreviewList from './UrlPreview';
+import VideoConfMessages from './VideoConfMessage/VideoConfMessages';
 
 const MessageContent: FC<{ message: IMessage; sequential: boolean; subscription?: ISubscription; id: IMessage['_id'] }> = ({
 	message,
@@ -57,6 +58,7 @@ const MessageContent: FC<{ message: IMessage; sequential: boolean; subscription?
 			)}
 			{message.blocks && (
 				<MessageBlock fixedWidth>
+					{message?.blocks?.map((block, index) => block.appId === 'videoconf-core' && <VideoConfMessages key={index} />)}
 					<MessageBlockUiKit mid={message._id} blocks={message.blocks} appId rid={message.rid} />
 				</MessageBlock>
 			)}

apps/meteor/client/views/room/MessageList/components/VideoConfMessage/VideoConfMessages.tsx

@@ -0,0 +1,24 @@
+import { Button } from '@rocket.chat/fuselage';
+import { VideoConfMessage, VideoConfMessageIcon, VideoConfMessageRow, VideoConfMessageText } from '@rocket.chat/ui-video-conf';
+import React, { ReactElement } from 'react';
+
+const VideoConfMessages = (): ReactElement => {
+	console.log('videconfmessage');
+
+	return (
+		<VideoConfMessage>
+			<VideoConfMessageRow>
+				<VideoConfMessageIcon name='phone-off' backgroundColor='neutral-400' color='neutral-700' />
+				<VideoConfMessageText fontScale='c2'>Call ended</VideoConfMessageText>
+			</VideoConfMessageRow>
+			<VideoConfMessageRow backgroundColor='neutral-100'>
+				<Button small secondary>
+					Call back
+				</Button>
+				<VideoConfMessageText>Call was not answered</VideoConfMessageText>
+			</VideoConfMessageRow>
+		</VideoConfMessage>
+	);
+};
+
+export default VideoConfMessages;

packages/ui-video-conf/.storybook/main.js

@@ -0,0 +1,12 @@
+module.exports = {
+  "stories": [
+    "../src/**/*.stories.mdx",
+    "../src/**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions"
+  ],
+  "framework": "@storybook/react"
+}

packages/ui-video-conf/.storybook/preview.js

@@ -0,0 +1,25 @@
+import '../../../apps/meteor/app/theme/client/main.css';
+import 'highlight.js/styles/github.css';
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}
+
+export const decorators = [
+	(Story) => (
+		<div className="rc-old">
+			<style>{`
+				body {
+					background-color: white;
+				}
+			`}</style>
+			<Story />
+		</div>
+	)
+];

packages/ui-video-conf/src/VideoConfMessage/VideoConfMessage.stories.tsx

@@ -4,6 +4,7 @@ import type { ReactElement } from 'react';
 
 import '@rocket.chat/icons/dist/rocketchat.css';
 import { VideoConfMessage, VideoConfMessageIcon, VideoConfMessageRow, VideoConfMessageText } from '.';
+import VideoConfMessageSkeleton from './VideoConfMessageSkeleton';
 
 export default {
 	title: 'Components/VideoConfMessage',
@@ -116,3 +117,5 @@ export const CallEnded: ComponentStory<typeof VideoConfMessage> = () => (
 		</VideoConfMessageRow>
 	</VideoConfMessage>
 );
+
+export const Loading: ComponentStory<typeof VideoConfMessage> = () => <VideoConfMessageSkeleton />;

packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageSkeleton.tsx

@@ -0,0 +1,18 @@
+import { Skeleton } from '@rocket.chat/fuselage';
+import type { ReactElement } from 'react';
+
+import VideoConfMessage from './VideoConfMessage';
+import VideoConfMessageRow from './VideoConfMessageRow';
+
+const VideoConfMessageSkeleton = (): ReactElement => (
+	<VideoConfMessage>
+		<VideoConfMessageRow>
+			<Skeleton width='full' />
+		</VideoConfMessageRow>
+		<VideoConfMessageRow backgroundColor='neutral-100'>
+			<Skeleton width='full' />
+		</VideoConfMessageRow>
+	</VideoConfMessage>
+);
+
+export default VideoConfMessageSkeleton;