Merge branch 'webv2' of https://github.com/owncast/owncast into webv2

web/components/ui/Statusbar/Statusbar.tsx

@@ -1,6 +1,7 @@
 import formatDistanceToNow from 'date-fns/formatDistanceToNow';
 import intervalToDuration from 'date-fns/intervalToDuration';
 import { useEffect, useState } from 'react';
+import { EyeOutlined } from '@ant-design/icons';
 import s from './Statusbar.module.scss';
 
 interface Props {
@@ -35,13 +36,15 @@ export default function Statusbar(props: Props) {
   const { online, lastConnectTime, lastDisconnectTime, viewerCount } = props;
 
   let onlineMessage = '';
-  let rightSideMessage = '';
+  let rightSideMessage: any;
   if (online && lastConnectTime) {
     const duration = makeDurationString(new Date(lastConnectTime));
     onlineMessage = online ? `Live for  ${duration}` : 'Offline';
-    rightSideMessage = `${viewerCount > 0 ? `${viewerCount}` : 'No'} ${
-      viewerCount === 1 ? 'viewer' : 'viewers'
-    }`;
+    rightSideMessage = (
+      <span>
+        <EyeOutlined /> {viewerCount}
+      </span>
+    );
   } else {
     onlineMessage = 'Offline';
     if (lastDisconnectTime) {

web/pages/embed/chat/readonly.tsx

@@ -0,0 +1,3 @@
+export default function ReadOnlyChatEmbed() {
+  return <div className="chat-embed">chat container goes here</div>;
+}

web/pages/embed/chat/readwrite.tsx

@@ -0,0 +1,3 @@
+export default function ReadWriteChatEmbed() {
+  return <div className="standalone-chat-embed">fully featured chat embed goes here</div>;
+}

web/pages/embed/video/index.tsx

@@ -0,0 +1,10 @@
+import OwncastPlayer from '../../../components/video/OwncastPlayer';
+
+export default function VideoEmbed() {
+  const online = false;
+  return (
+    <div className="video-embed">
+      <OwncastPlayer source="/hls/stream.m3u8" online={online} />
+    </div>
+  );
+}

web/stories/Chat.stories.mdx

@@ -0,0 +1,76 @@
+import { Meta } from '@storybook/addon-docs';
+import { Typography } from 'antd';
+import UserChatMessage from '../components/chat/ChatUserMessage';
+import { ChatMessage } from '../interfaces/chat-message.model';
+
+<Meta title="Owncast/Documentation/Chat" />
+
+<Typography.Title style={{color: 'var(--primary-color)'}}>Owncast Chat</Typography.Title>
+
+The Owncast chat is a websocket service that is authenticated with an access token.
+
+The chat user interface has a handful of different states.
+
+# App states
+
+## Offline (stream is not live)
+
+- The entire chat UI is hidden.
+
+## Online (stream is live)
+
+- The chat interface is visible.
+
+### Online + chat is disconnected
+
+- Show a loading state within the chat component.
+- Disable the text input box.
+
+## Banned from chat
+
+- The entire chat UI is hidden.
+
+
+## Stream ended
+
+- Chat is visible for the next 5 minutes to allow viewers to say goodbye.
+- Also allows for chat to stay active in case the streamer wants to quickly
+restart their stream or there's a network blip.
+
+## Chat Disconnected
+
+If chat server is not available (websocket disconnects/not available for some reason)
+then the chat input box should become disabled and placeholder should say chat is not availble.
+
+# Message types
+
+## User chat message
+
+The message that is displayed when a chat user sends a message.
+
+## System message
+
+A message sent from the server. Is commonly used for
+
+- Welcome message.
+- An external script or integration sending a message on behalf of the server.
+
+## Action message
+
+A message saying an action has taken place. Is commonly used for
+
+- User joined.
+- User was banned.
+- User changed name.
+- Stream is starting.
+- Stream is ending.
+- An external script or integration sending an action.
+
+## Federated action message
+
+A message stating that somebody on the Fediverse performed an action.
+It is used for:
+
+- User "liked" that the steam went live.
+- User followed the instance.
+- User shared the instance to their followers.