mirror of
https://github.com/owncast/owncast.git
synced 2024-11-21 12:18:02 +03:00
First pass at the social/federated chat component. Closes #2172
This commit is contained in:
Gabe Kangas
parent
11ceebd84f
commit
19e4e99127
7 changed files with 142 additions and 9 deletions
|
|
@ -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%;
|
||||
}
|
||||
}
|
||||
|
|
@ -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 Basic = Template.bind({});
|
||||
export const Follow = 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',
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,11 +1,52 @@
|
|||
/* eslint-disable react/no-unused-prop-types */
|
||||
/* eslint-disable @typescript-eslint/no-unused-vars */
|
||||
// TODO remove unused props
|
||||
import { FC } from 'react';
|
||||
import { ChatMessage } from '../../../interfaces/chat-message.model';
|
||||
import { Avatar, Col, Row } from 'antd';
|
||||
import dynamic from 'next/dynamic';
|
||||
import React, { FC } from 'react';
|
||||
import { ChatSocialMessage as ChatMessage } from '../../../interfaces/chat-social-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>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
1
web/components/chat/ChatSocialMessage/follow.svg
Normal file
1
web/components/chat/ChatSocialMessage/follow.svg
Normal file
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
1
web/components/chat/ChatSocialMessage/like.svg
Normal file
1
web/components/chat/ChatSocialMessage/like.svg
Normal file
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
1
web/components/chat/ChatSocialMessage/repost.svg
Normal file
1
web/components/chat/ChatSocialMessage/repost.svg
Normal file
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
8
web/interfaces/chat-social-message.model.ts
Normal file
8
web/interfaces/chat-social-message.model.ts
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
import { SocketEvent } from './socket-events';
|
||||
|
||||
export interface ChatSocialMessage extends SocketEvent {
|
||||
title: string;
|
||||
body: string;
|
||||
image: string;
|
||||
link: string;
|
||||
}
|
||||
Loading…
Reference in a new issue