First pass at the social/federated chat component. Closes #2172

web/components/chat/ChatSocialMessage/ChatSocialMessage.module.scss

@@ -0,0 +1,52 @@
+.follower {
+  border-color: rgba(0, 0, 0, 0.3);
+  border-width: 1px;
+  border-style: solid;
+  padding: 10px 10px;
+  border-radius: 15px;
+  height: 85px;
+  width: 300px;
+  overflow: hidden;
+
+  &:hover {
+    border-color: var(--theme-text-link);
+  }
+
+  .avatar {
+    height: 60px;
+    width: 60px;
+    border-color: rgba(0, 0, 0, 0.3);
+    border-width: 1px;
+    border-style: solid;
+  }
+
+  .body {
+    color: var(--theme-color-components-text-on-light);
+    text-overflow: ellipsis;
+  }
+
+  .account {
+    font-family: var(--theme-text-display-font-family);
+    font-weight: 600;
+    color: var(--theme-color-components-text-on-light);
+  }
+
+  .icon {
+    position: relative;
+    width: 25px;
+    height: 25px;
+    top: -20px;
+    left: 40px;
+    border-color: white;
+    border-width: 1px;
+    border-style: solid;
+    border-radius: 50%;
+    background-size: cover;
+    background-position: center;
+  }
+
+  .placeholder {
+    width: 100%;
+    height: 100%;
+  }
+}

web/components/chat/ChatSocialMessage/ChatSocialMessage.stories.tsx

@@ -8,8 +8,37 @@ export default {
   parameters: {},
 } as ComponentMeta<typeof ChatSocialMessage>;
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 const Template: ComponentStory<typeof ChatSocialMessage> = args => <ChatSocialMessage {...args} />;
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const Follow = Template.bind({});
-export const Basic = Template.bind({});
+Follow.args = {
+  message: {
+    type: 'follow',
+    body: 'james followed this live stream.',
+    title: 'james@mastodon.social',
+    image: 'https://mastodon.social/avatars/original/missing.png',
+    link: 'https://mastodon.social/@james',
+  },
+};
+
+export const Like = Template.bind({});
+Like.args = {
+  message: {
+    type: 'like',
+    body: 'james liked that this stream went live.',
+    title: 'james@mastodon.social',
+    image: 'https://mastodon.social/avatars/original/missing.png',
+    link: 'https://mastodon.social/@james',
+  },
+};
+
+export const Repost = Template.bind({});
+Repost.args = {
+  message: {
+    type: 'repost',
+    body: 'james shared this stream with their followers.',
+    title: 'james@mastodon.social',
+    image: 'https://mastodon.social/avatars/original/missing.png',
+    link: 'https://mastodon.social/@james',
+  },
+};

web/components/chat/ChatSocialMessage/ChatSocialMessage.tsx

@@ -1,11 +1,52 @@
-/* eslint-disable react/no-unused-prop-types */
+import { Avatar, Col, Row } from 'antd';
-/* eslint-disable @typescript-eslint/no-unused-vars */
+import dynamic from 'next/dynamic';
-// TODO remove unused props
+import React, { FC } from 'react';
-import { FC } from 'react';
+import { ChatSocialMessage as ChatMessage } from '../../../interfaces/chat-social-message.model';
-import { ChatMessage } from '../../../interfaces/chat-message.model';
+import styles from './ChatSocialMessage.module.scss';
+
+const FollowIcon = dynamic(() => import('./follow.svg'));
+const LikeIcon = dynamic(() => import('./like.svg'));
+const RepostIcon = dynamic(() => import('./repost.svg'));
 
 export interface ChatSocialMessageProps {
   message: ChatMessage;
 }
 
-export const ChatSocialMessage: FC<ChatSocialMessageProps> = () => <div>Component goes here</div>;
+export const ChatSocialMessage: FC<ChatSocialMessageProps> = ({ message }) => {
+  const { body, title, image, link, type } = message;
+
+  let Icon;
+
+  switch (type.toString()) {
+    case 'follow':
+      Icon = FollowIcon;
+      break;
+    case 'like':
+      Icon = LikeIcon;
+      break;
+    case 'repost':
+      Icon = RepostIcon;
+      break;
+    default:
+      break;
+  }
+
+  return (
+    <div className={styles.follower}>
+      <a href={link} target="_blank" rel="noreferrer">
+        <Row wrap={false}>
+          <Col span={6}>
+            <Avatar src={image} alt="Avatar" className={styles.avatar}>
+              <img src="/logo" alt="Logo" className={styles.placeholder} />
+            </Avatar>
+            <Icon className={styles.icon} />
+          </Col>
+          <Col>
+            <Row className={styles.account}>{title}</Row>
+            <Row className={styles.body}>{body}</Row>
+          </Col>
+        </Row>
+      </a>
+    </div>
+  );
+};

web/components/chat/ChatSocialMessage/follow.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="500" viewBox="0 0 132.292 132.292"><linearGradient id="a" x1="432.851" x2="464.644" y1="49.977" y2="49.977" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#2087e2"/><stop offset="1" stop-color="#b63fff"/></linearGradient><path width="31.792" height="31.792" x="432.851" y="34.081" fill="url(#a)" d="m438.6723 34.080635h20.15068a5.8208333 5.8208333 45 0 1 5.82083 5.820833v20.150671a5.8208333 5.8208333 135 0 1 -5.82083 5.820833h-20.15068a5.8208333 5.8208333 45 0 1 -5.82083-5.820833v-20.150671a5.8208333 5.8208333 135 0 1 5.82083-5.820833z" transform="matrix(4.161118 0 0 4.1611093 -1801.1461 -141.81325)"/><path fill="#8842da" d="m906.37607 136.92939-1.16908 21.51397-21.18682.9402 23.86651 33.56761h6.78711c12.63935-.00077 22.88508-10.24737 22.88476-22.88672v-17.37304z" opacity=".85" transform="matrix(1.0583333 0 0 1.0583314 -859.95885 -71.914618)"/><g stroke="#fff" stroke-linecap="round" stroke-linejoin="round"><circle cx="876.218" cy="118.03" r="21.554" fill="none" stroke-width="8.788" transform="matrix(.90817292 0 0 .91240816 -737.0168 -65.427926)"/><path fill="none" stroke-width="6.641" d="m845.10701 163.99555c0-16.54233 13.41021-29.95253 29.95254-29.95253 7.21351 0 14.1847 2.60326 19.63258 7.3314" transform="matrix(1.1474324 0 0 1.2648307 -944.18797 -103.00395)"/><g fill="#fff" stroke-width="7.559"><path d="m881.64121 159.87402 34.92069.27968" transform="matrix(1.0583333 0 0 1.0583314 -853.60885 -74.031283)"/><path d="m881.64121 159.87402 34.92069.27968" transform="matrix(0 1.0583314 -1.0583333 0 267.28831 -856.231)"/></g></g></svg>

web/components/chat/ChatSocialMessage/like.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="500" viewBox="0 0 132.292 132.292"><linearGradient id="a" x1="432.851" x2="464.644" y1="49.977" y2="49.977" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#2087e2"/><stop offset="1" stop-color="#b63fff"/></linearGradient><path width="31.792" height="31.792" x="432.851" y="34.081" fill="url(#a)" d="m438.6723 34.080635h20.15068a5.8208333 5.8208333 45 0 1 5.82083 5.820833v20.150671a5.8208333 5.8208333 135 0 1 -5.82083 5.820833h-20.15068a5.8208333 5.8208333 45 0 1 -5.82083-5.820833v-20.150671a5.8208333 5.8208333 135 0 1 5.82083-5.820833z" transform="matrix(4.1611053 0 0 4.1611038 -1801.1405 -141.81306)"/><path fill="#853dd0" d="m604.31641 64.029297 3.55078 7.783203 5.08203 22.791016-19.42383 28.058594-27.0957 19.52148-33.69531-23.11914 46.80664 46.15625h26.50195a22.886149 22.886142 0 0 0 22.88672-22.88672v-60.382808z" opacity=".75" transform="matrix(1.0583301 0 0 1.05833 -533.32357 -42.566358)"/><path fill="#8392ee" d="m552.91873 75.535789s-38.26097-7.735196-18.92593 27.162051c14.58324 26.32085 31.11511 24.28058 31.11511 24.28058s-16.14602-23.38507-12.18918-51.442631z" transform="matrix(.95099105 0 0 .95099098 -474.54607 -32.694089)"/><path fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="7.865" d="m674.2158 70.253529c-21.05563-22.862132-45.94323 2.215859-45.94323 2.215859s-24.88738-25.078069-45.94281-2.215937c-21.05544 22.862132 16.8893 64.132949 45.94281 78.022769 29.05377-13.88974 66.99886-55.160559 45.94323-78.022691z" transform="matrix(.95454696 0 0 .95454689 -533.57025 -33.626074)"/></svg>

web/components/chat/ChatSocialMessage/repost.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="500" viewBox="0 0 132.292 132.292"><linearGradient id="a" x1="432.851" x2="464.644" y1="49.977" y2="49.977" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#2087e2"/><stop offset="1" stop-color="#b63fff"/></linearGradient><path width="31.792" height="31.792" x="432.851" y="34.081" fill="url(#a)" d="m438.6723 34.080635h20.15068a5.8208333 5.8208333 45 0 1 5.82083 5.820833v20.150671a5.8208333 5.8208333 135 0 1 -5.82083 5.820833h-20.15068a5.8208333 5.8208333 45 0 1 -5.82083-5.820833v-20.150671a5.8208333 5.8208333 135 0 1 5.82083-5.820833z" transform="matrix(4.161118 0 0 4.1611093 -1801.146 -141.81325)"/><path fill="#7f40cf" d="m755.59375 115.26367-.75 38.77149-9.61914 12.17187-46.68854 3.28589 24.59284 23.45825h37.22851c12.64012.00032 22.88704-10.2466 22.88672-22.88672v-37.61133l-9.31641-11.63085z" opacity=".75" transform="matrix(1.0583333 0 0 1.0583314 -696.64204 -71.914618)"/><g fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="7.865"><path d="m741.45312 94.964844h-41.41796c-8.18705 0-14.77735 6.590276-14.77735 14.777346v41.41797m14.77735 14.77734h41.41796c8.18706 0 14.77735-6.59028 14.77735-14.77734v-41.41797" transform="matrix(1.0583333 0 0 1.0583314 -696.64204 -71.914618)"/><path d="m670.07576 143.37121 15.18204 13.78895 15.49978-13.59955" transform="matrix(1.0583333 0 0 1.0583314 -696.64204 -71.914618)"/><path d="m670.07576 143.37121 15.18204 13.78895 15.49978-13.59955" transform="matrix(-1.0583333 0 0 -1.0583314 828.93303 210.55653)"/></g></svg>

web/interfaces/chat-social-message.model.ts

@@ -0,0 +1,8 @@
+import { SocketEvent } from './socket-events';
+
+export interface ChatSocialMessage extends SocketEvent {
+  title: string;
+  body: string;
+  image: string;
+  link: string;
+}