From 5645f0070f51960a0e619244aff1cfd1bc94f6f6 Mon Sep 17 00:00:00 2001
From: Gabe Kangas <gabek@real-ity.com>
Date: Mon, 16 May 2022 22:18:07 -0700
Subject: [PATCH 1/3] Add start of chat documentation

---
 web/stories/Chat.stories.mdx | 76 ++++++++++++++++++++++++++++++++++++
 1 file changed, 76 insertions(+)
 create mode 100644 web/stories/Chat.stories.mdx

diff --git a/web/stories/Chat.stories.mdx b/web/stories/Chat.stories.mdx
new file mode 100644
index 000000000..89e213d31
--- /dev/null
+++ b/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.
\ No newline at end of file

From 8d7a5d6d6ecafda81c66ed36d8c08f775cd19a31 Mon Sep 17 00:00:00 2001
From: Gabe Kangas <gabek@real-ity.com>
Date: Mon, 16 May 2022 22:55:22 -0700
Subject: [PATCH 2/3] Add placeholder embed pages

---
 web/pages/embed/chat/readonly.tsx  |  3 +++
 web/pages/embed/chat/readwrite.tsx |  3 +++
 web/pages/embed/video/index.tsx    | 10 ++++++++++
 3 files changed, 16 insertions(+)
 create mode 100644 web/pages/embed/chat/readonly.tsx
 create mode 100644 web/pages/embed/chat/readwrite.tsx
 create mode 100644 web/pages/embed/video/index.tsx

diff --git a/web/pages/embed/chat/readonly.tsx b/web/pages/embed/chat/readonly.tsx
new file mode 100644
index 000000000..2ccce952d
--- /dev/null
+++ b/web/pages/embed/chat/readonly.tsx
@@ -0,0 +1,3 @@
+export default function ReadOnlyChatEmbed() {
+  return <div className="chat-embed">chat container goes here</div>;
+}
diff --git a/web/pages/embed/chat/readwrite.tsx b/web/pages/embed/chat/readwrite.tsx
new file mode 100644
index 000000000..f08122709
--- /dev/null
+++ b/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>;
+}
diff --git a/web/pages/embed/video/index.tsx b/web/pages/embed/video/index.tsx
new file mode 100644
index 000000000..caf295789
--- /dev/null
+++ b/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>
+  );
+}

From f6eeee24638d3c8fce90453ce19c54f002f3c580 Mon Sep 17 00:00:00 2001
From: Gabe Kangas <gabek@real-ity.com>
Date: Mon, 16 May 2022 23:20:56 -0700
Subject: [PATCH 3/3] Use icon instead of the word viewers

---
 web/components/ui/Statusbar/Statusbar.tsx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/web/components/ui/Statusbar/Statusbar.tsx b/web/components/ui/Statusbar/Statusbar.tsx
index 1b5b2bf21..41f093545 100644
--- a/web/components/ui/Statusbar/Statusbar.tsx
+++ b/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) {