Add placeholder components to be worked on

web/components/CustomPageContent.tsx

@@ -0,0 +1,8 @@
+interface Props {
+  content: string;
+}
+
+export default function CustomPageContent(props: Props) {
+  const { content } = props;
+  return <div>{content}</div>;
+}

web/components/ExternalActionButton.tsx

@@ -0,0 +1,9 @@
+import { ExternalAction } from '../interfaces/external-action.interface';
+
+interface Props {
+  action: ExternalAction;
+}
+
+export default function ExternalActionButton(props: Props) {
+  return <div>External action button component goes here</div>;
+}

web/components/PageLogo.tsx

@@ -0,0 +1,7 @@
+interface Props {
+  url: string;
+}
+
+export default function PageLogo(props: Props) {
+  return <div>Pimary logo component goes here</div>;
+}

web/components/SocialLinks.tsx

@@ -0,0 +1,9 @@
+import { SocialLink } from '../interfaces/social-link.model';
+
+interface Props {
+  links: SocialLink[];
+}
+
+export default function SocialLinks(props: Props) {
+  return <div>Social links component goes here</div>;
+}

web/components/UserDropdownMenu.tsx

@@ -0,0 +1,5 @@
+interface Props {}
+
+export default function UserDropdown(props: Props) {
+  return <div>User settings dropdown component goes here</div>;
+}

web/components/chat/ChatActionMessage.jsx

@@ -0,0 +1,9 @@
+import { ChatMessage } from '../../interfaces/chat-message.model';
+
+interface Props {
+  message: ChatMessage;
+}
+
+export default function ChatSystemMessage(props: Props) {
+  return <div>Component goes here</div>;
+}

web/components/chat/ChatContainer.tsx

@@ -0,0 +1,9 @@
+import { ChatMessage } from '../../interfaces/chat-message.model';
+
+interface Props {
+  messages: ChatMessage[];
+}
+
+export default function ChatContainer(props: Props) {
+  return <div>Component goes here</div>;
+}

web/components/chat/ChatModeratorNotification.tsx

@@ -0,0 +1,5 @@
+interface Props {}
+
+export default function ChatModerationNotification(props: Props) {
+  return <div>You are now a moderator notification component goes here</div>;
+}

web/components/chat/ChatSocialMessage.jsx

@@ -0,0 +1,9 @@
+import { ChatMessage } from '../../interfaces/chat-message.model';
+
+interface Props {
+  message: ChatMessage;
+}
+
+export default function ChatSocialMessage(props: Props) {
+  return <div>Component goes here</div>;
+}

web/components/chat/ChatSystemMessage.tsx

@@ -0,0 +1,9 @@
+import { ChatMessage } from '../../interfaces/chat-message.model';
+
+interface Props {
+  message: ChatMessage;
+}
+
+export default function ChatSystemMessage(props: Props) {
+  return <div>Component goes here</div>;
+}

web/components/chat/ChatTextField.tsx

@@ -0,0 +1,5 @@
+interface Props {}
+
+export default function ChatTextField(props: Props) {
+  return <div>Component goes here</div>;
+}

web/components/chat/ChatUserMessage.tsx

@@ -0,0 +1,9 @@
+import { ChatMessage } from '../../interfaces/chat-message.model';
+
+interface Props {
+  message: ChatMessage;
+}
+
+export default function ChatUserMessage(props: Props) {
+  return <div>Component goes here</div>;
+}

web/components/layouts/main.tsx

@@ -1,10 +1,10 @@
 import { useRecoilValue } from 'recoil';
 import { Layout, Row, Col } from 'antd';
 import { useState } from 'react';
-import { ServerStatus } from '../../models/ServerStatus';
+import { ServerStatus } from '../../interfaces/server-status.model';
 import { ServerStatusStore, serverStatusState } from '../stores/ServerStatusStore';
 import { ClientConfigStore, clientConfigState } from '../stores/ClientConfigStore';
-import { ClientConfig } from '../../models/ClientConfig';
+import { ClientConfig } from '../../interfaces/client-config.model';
 
 const { Header, Content, Footer, Sider } = Layout;
 

web/components/modals/AuthModal.tsx

@@ -0,0 +1,5 @@
+interface Props {}
+
+export default function AuthModal(props: Props) {
+  return <div>Component goes here</div>;
+}

web/components/modals/BrowserNotifyModal.tsx

@@ -0,0 +1,5 @@
+interface Props {}
+
+export default function BrowserNotifyModal(props: Props) {
+  return <div>Component goes here</div>;
+}

web/components/modals/FediAuthModal.tsx

@@ -0,0 +1,5 @@
+interface Props {}
+
+export default function FediAuthModal(props: Props) {
+  return <div>Component goes here</div>;
+}

web/components/modals/FollowModal.tsx

@@ -0,0 +1,5 @@
+interface Props {}
+
+export default function FollowModal(props: Props) {
+  return <div>Component goes here</div>;
+}

web/components/modals/IndieAuthModal.tsx

@@ -0,0 +1,5 @@
+interface Props {}
+
+export default function IndieAuthModal(props: Props) {
+  return <div>Component goes here</div>;
+}

web/components/stores/ClientConfigStore.tsx

@@ -1,14 +1,25 @@
 import { useEffect } from 'react';
 import { ReactElement } from 'react-markdown/lib/react-markdown';
 import { atom, useRecoilState } from 'recoil';
-import { makeEmptyClientConfig, ClientConfig } from '../../models/ClientConfig';
+import { makeEmptyClientConfig, ClientConfig } from '../../interfaces/client-config.model';
-import ClientConfigService from '../../services/ClientConfigService';
+import ClientConfigService from '../../services/client-config-service';
 
+// The config that comes from the API.
 export const clientConfigState = atom({
   key: 'clientConfigState',
   default: makeEmptyClientConfig(),
 });
 
+export const chatCurrentlyVisible = atom({
+  key: 'chatvisible',
+  default: false,
+});
+
+export const chatDislayName = atom({
+  key: 'chatDisplayName',
+  default: '',
+});
+
 export function ClientConfigStore(): ReactElement {
   const [, setClientConfig] = useRecoilState<ClientConfig>(clientConfigState);
 

web/components/stores/ServerStatusStore.tsx

@@ -1,8 +1,8 @@
 import { useEffect } from 'react';
 import { ReactElement } from 'react-markdown/lib/react-markdown';
 import { atom, useRecoilState } from 'recoil';
-import { ServerStatus, makeEmptyServerStatus } from '../../models/ServerStatus';
+import { ServerStatus, makeEmptyServerStatus } from '../../interfaces/server-status.model';
-import ServerStatusService from '../../services/StatusService';
+import ServerStatusService from '../../services/status-service';
 
 export const serverStatusState = atom({
   key: 'serverStatusState',

web/components/video/StatusBar.jsx

@@ -0,0 +1,9 @@
+interface Props {
+  online: boolean;
+  viewers: number;
+  timer: string;
+}
+
+export default function StatusBar(props: Props) {
+  return <div>Stream status bar goes here</div>;
+}

web/interfaces/chat-message.model.ts

@@ -0,0 +1 @@
+export interface ChatMessage {}

web/interfaces/external-action.tsx

@@ -0,0 +1,6 @@
+export interface ExternalAction {
+  title: string;
+  description?: string;
+  color?: string;
+  url: string;
+}

web/interfaces/social-link.model.ts

@@ -0,0 +1,5 @@
+export interface SocialLink {
+  platform: string;
+  icon: string;
+  url: string;
+}

web/services/client-config-service.ts

@@ -1,4 +1,4 @@
-import { ClientConfig } from '../models/ClientConfig';
+import { ClientConfig } from '../interfaces/client-config.model';
 const ENDPOINT = `http://localhost:8080/api/config`;
 
 class ClientConfigService {

web/services/status-service.ts

@@ -1,4 +1,4 @@
-import ServerStatus from '../models/ServerStatus';
+import ServerStatus from '../interfaces/server-status.model';
 
 const ENDPOINT = `http://localhost:8080/api/status`;
 

web/services/user-service.ts

@@ -15,7 +15,7 @@ class UserService {
       },
       body: JSON.stringify({ displayName: username }),
     };
-  
+
     try {
       const response = await fetch(URL_CHAT_REGISTRATION, options);
       const result = await response.json();
@@ -26,4 +26,4 @@ class UserService {
 
     return null;
   }
-}
+}

web/stories/AuthModal.stories.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import AuthModal from '../components/modals/AuthModal';
+
+const Example = () => (
+  <div>
+    <AuthModal />
+  </div>
+);
+
+export default {
+  title: 'owncast/Modals/Auth',
+  component: AuthModal,
+  parameters: {},
+} as ComponentMeta<typeof AuthModal>;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const Template: ComponentStory<typeof AuthModal> = args => <Example />;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const Basic = Template.bind({});

web/stories/BrowserNotifyModal.stories.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import BrowserNotifyModal from '../components/modals/BrowserNotifyModal';
+
+const Example = () => (
+  <div>
+    <AuthModal />
+  </div>
+);
+
+export default {
+  title: 'owncast/Modals/Browser Push Notifications',
+  component: BrowserNotifyModal,
+  parameters: {},
+} as ComponentMeta<typeof BrowserNotifyModal>;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const Template: ComponentStory<typeof BrowserNotifyModal> = args => <Example />;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const Basic = Template.bind({});

web/stories/ChatActionMessage.stories.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import ChatActionMessage from '../components/chat/ChatActionMessage';
+
+export default {
+  title: 'owncast/Chat/Messages/Chat action',
+  component: ChatActionMessage,
+  parameters: {},
+} as ComponentMeta<typeof ChatActionMessage>;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const Template: ComponentStory<typeof ChatActionMessage> = args => <ChatActionMessage />;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const Basic = Template.bind({});

web/stories/ChatContainer.stories.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import ChatContainer from '../components/chat/ChatContainer';
+
+const Example = () => (
+  <div>
+    <ChatContainer />
+  </div>
+);
+
+export default {
+  title: 'owncast/Chat/Chat messages container',
+  component: ChatContainer,
+  parameters: {},
+} as ComponentMeta<typeof ChatContainer>;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const Template: ComponentStory<typeof ChatContainer> = args => <Example />;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const Basic = Template.bind({});

web/stories/ChatModerationNotification.stories.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import ChatModeratorNotification from '../components/chat/ChatModeratorNotification';
+
+export default {
+  title: 'owncast/Chat/Messages/Moderator notification',
+  component: ChatModeratorNotification,
+  parameters: {},
+} as ComponentMeta<typeof ChatModeratorNotification>;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const Template: ComponentStory<typeof ChatModeratorNotification> = args => (
+  <ChatModeratorNotification />
+);
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const Basic = Template.bind({});

web/stories/ChatSocialMessage.stories.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import ChatSocialMessage from '../components/chat/ChatSocialMessage';
+
+export default {
+  title: 'owncast/Chat/Messages/Social-fediverse event',
+  component: ChatSocialMessage,
+  parameters: {},
+} as ComponentMeta<typeof ChatSocialMessage>;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const Template: ComponentStory<typeof ChatSocialMessage> = args => <ExamChatSocialMessageple />;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const Basic = Template.bind({});

web/stories/ChatSystemMessage.stories.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import ChatSystemMessage from '../components/chat/ChatSystemMessage';
+
+export default {
+  title: 'owncast/Chat/Messages/System',
+  component: ChatSystemMessage,
+  parameters: {},
+} as ComponentMeta<typeof ChatSystemMessage>;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const Template: ComponentStory<typeof ChatSystemMessage> = args => <ChatSystemMessage />;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const Basic = Template.bind({});

web/stories/ChatTextField.stories.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import ChatTextField from '../components/chat/ChatTextField';
+
+const Example = () => (
+  <div>
+    <ChatTextField />
+  </div>
+);
+
+export default {
+  title: 'owncast/Chat/Input text field',
+  component: ChatTextField,
+  parameters: {},
+} as ComponentMeta<typeof ChatTextField>;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const Template: ComponentStory<typeof ChatTextField> = args => <Example />;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const Basic = Template.bind({});

web/stories/ChatUserMessage.stories.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import UserChatMessage from '../components/chat/ChatUserMessage';
+
+export default {
+  title: 'owncast/Chat/Messages/Standard user',
+  component: UserChatMessage,
+  parameters: {},
+} as ComponentMeta<typeof UserChatMessage>;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const Template: ComponentStory<typeof UserChatMessage> = args => <UserChatMessage />;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const Basic = Template.bind({});

web/stories/ExternalActionButton.stories.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import ExternalActionButton from '../components/ExternalActionButton';
+
+export default {
+  title: 'owncast/External action button',
+  component: ExternalActionButton,
+  parameters: {},
+} as ComponentMeta<typeof ExternalActionButton>;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const Template: ComponentStory<typeof ExternalActionButton> = args => (
+  <ExternalActionButton {...args} />
+);
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const Example1 = Template.bind({});
+Example1.args = {
+  action: {
+    url: 'https://owncast.online/docs',
+    title: 'Documentation',
+    description: 'Owncast Documentation',
+    icon: 'https://owncast.online/images/logo.svg',
+    color: '#5232c8',
+    openExternally: false,
+  },
+};
+
+export const Example2 = Template.bind({});
+Example2.args = {
+  action: {
+    url: 'https://opencollective.com/embed/owncast/donate',
+    title: 'Support Owncast',
+    description: 'Contribute to Owncast',
+    icon: 'https://opencollective.com/static/images/opencollective-icon.svg',
+    color: '#2b4863',
+    openExternally: false,
+  },
+};

web/stories/FediAuthModal.stories.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import FediAuthModal from '../components/modals/FediAuthModal';
+
+const Example = () => (
+  <div>
+    <FediAuthModal />
+  </div>
+);
+
+export default {
+  title: 'owncast/Modals/FediAuth',
+  component: FediAuthModal,
+  parameters: {},
+} as ComponentMeta<typeof FediAuthModal>;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const Template: ComponentStory<typeof FediAuthModal> = args => <Example />;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const Basic = Template.bind({});

web/stories/FollowModal.stories.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import FollowModal from '../components/modals/FollowModal';
+
+const Example = () => (
+  <div>
+    <FollowModal />
+  </div>
+);
+
+export default {
+  title: 'owncast/Modals/Follow',
+  component: FollowModal,
+  parameters: {},
+} as ComponentMeta<typeof FollowModal>;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const Template: ComponentStory<typeof FollowModal> = args => <Example />;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const Basic = Template.bind({});

web/stories/Form.stories.tsx

@@ -99,7 +99,7 @@ const FormExample = () => {
 };
 
 export default {
-  title: 'owncast/Form',
+  title: 'example/Form',
   component: Form,
   // parameters: {},
 } as ComponentMeta<typeof Form>;

web/stories/IndieAuthModal.stories.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import IndieAuthModal from '../components/modals/IndieAuthModal';
+
+const Example = () => (
+  <div>
+    <IndieAuthModal />
+  </div>
+);
+
+export default {
+  title: 'owncast/Modals/IndieAuth',
+  component: IndieAuthModal,
+  parameters: {},
+} as ComponentMeta<typeof IndieAuthModal>;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const Template: ComponentStory<typeof IndieAuthModal> = args => <Example />;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const Basic = Template.bind({});

web/stories/Modal.stories.tsx

@@ -2,37 +2,16 @@ import React, { useState } from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { Modal, Button } from 'antd';
 
-const Usage = () => {
+const Usage = () => (
-  const [isModalVisible, setIsModalVisible] = useState(false);
+  <Modal title="Basic Modal" visible>
-
+    <p>Some contents...</p>
-  const showModal = () => {
+    <p>Some contents...</p>
-    setIsModalVisible(true);
+    <p>Some contents...</p>
-  };
+  </Modal>
-
+);
-  const handleOk = () => {
-    setIsModalVisible(false);
-  };
-
-  const handleCancel = () => {
-    setIsModalVisible(false);
-  };
-
-  return (
-    <>
-      <Button type="primary" onClick={showModal}>
-        Test Modal
-      </Button>
-      <Modal title="Basic Modal" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
-        <p>Some contents...</p>
-        <p>Some contents...</p>
-        <p>Some contents...</p>
-      </Modal>
-    </>
-  );
-};
 
 export default {
-  title: 'owncast/Modal',
+  title: 'owncast/Modal container',
   component: Modal,
   parameters: {},
 } as ComponentMeta<typeof Modal>;
@@ -40,8 +19,4 @@ export default {
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const Template: ComponentStory<typeof Modal> = args => <Usage />;
 
-export const Basic = Template.bind({});
+export const Example = Template.bind({});
-
-Usage.propTypes = {};
-
-Usage.defaultProps = {};

web/stories/PageLogo.stories.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import PageLogo from '../components/PageLogo';
+
+export default {
+  title: 'owncast/Page Logo',
+  component: PageLogo,
+  parameters: {},
+} as ComponentMeta<typeof PageLogo>;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const Template: ComponentStory<typeof PageLogo> = args => <PageLogo {...args} />;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const Logo = Template.bind({});
+Logo.args = {
+  url: '/logo',
+};
+
+export const DemoServer = Template.bind({});
+DemoServer.args = {
+  url: 'https://watch.owncast.online/logo',
+};

web/stories/SocialLinks.stories.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import SocialLinks from '../components/SocialLinks';
+
+export default {
+  title: 'owncast/Social links',
+  component: SocialLinks,
+  parameters: {},
+} as ComponentMeta<typeof SocialLinks>;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const Template: ComponentStory<typeof SocialLinks> = args => <SocialLinks {...args} />;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const Populated = Template.bind({});
+Populated.args = {
+  links: [
+    {
+      platform: 'github',
+      url: 'https://github.com/owncast/owncast',
+      icon: '/img/platformlogos/github.svg',
+    },
+    { platform: 'Documentation', url: 'https://owncast.online' },
+    {
+      platform: 'mastodon',
+      url: 'https://fosstodon.org/users/owncast',
+      icon: '/img/platformlogos/mastodon.svg',
+    },
+  ],
+};
+
+export const Empty = Template.bind({});
+Empty.args = {
+  links: [],
+};

web/stories/StatusBar.stories.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import StatusBar from '../components/video/StatusBar';
+
+export default {
+  title: 'owncast/Status bar',
+  component: StatusBar,
+  parameters: {},
+} as ComponentMeta<typeof StatusBar>;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const Template: ComponentStory<typeof StatusBar> = args => <StatusBar {...args} />;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const Online = Template.bind({});
+Online.args = {
+  online: true,
+  viewers: 42,
+  timer: '10:42',
+};
+
+export const Offline = Template.bind({});
+Offline.args = {
+  online: false,
+};

web/stories/UserDropdownMenu.stories.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import UserDropdownMenu from '../components/UserDropdownMenu';
+
+export default {
+  title: 'owncast/User settings dropdown menu',
+  component: UserDropdownMenu,
+  parameters: {},
+} as ComponentMeta<typeof UserDropdownMenu>;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const Template: ComponentStory<typeof UserDropdownMenu> = args => <UserDropdownMenu />;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const Example = Template.bind({});

web/stories/Video.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-import OwncastPlayer from '../components/video/owncastplayer';
+import OwncastPlayer from '../components/video/OwncastPlayer';
 
 const streams = {
   DemoServer: `https://watch.owncast.online`,

web/utils/constants.js

@@ -12,9 +12,9 @@ export const URL_BAN_USER = `/api/chat/users/setenabled`;
 
 // TODO: This directory is customizable in the config.  So we should expose this via the config API.
 export const URL_STREAM = `/hls/stream.m3u8`;
-export const URL_WEBSOCKET = `${
+export const URL_WEBSOCKET = `${location.protocol === 'https:' ? 'wss' : 'ws'}://${
-  location.protocol === 'https:' ? 'wss' : 'ws'
+  location.host
-}://${location.host}/ws`;
+}/ws`;
 export const URL_CHAT_REGISTRATION = `/api/chat/register`;
 export const URL_FOLLOWERS = `/api/followers`;
 export const URL_PLAYBACK_METRICS = `/api/metrics/playback`;
@@ -43,8 +43,7 @@ export const KEY_USERNAME = 'owncast_username';
 export const KEY_CUSTOM_USERNAME_SET = 'owncast_custom_username_set';
 export const KEY_CHAT_DISPLAYED = 'owncast_chat';
 export const KEY_CHAT_FIRST_MESSAGE_SENT = 'owncast_first_message_sent';
-export const CHAT_INITIAL_PLACEHOLDER_TEXT =
+export const CHAT_INITIAL_PLACEHOLDER_TEXT = 'Type here to chat, no account necessary.';
-  'Type here to chat, no account necessary.';
 export const CHAT_PLACEHOLDER_TEXT = 'Message';
 export const CHAT_PLACEHOLDER_OFFLINE = 'Chat is offline.';
 export const CHAT_MAX_MESSAGE_LENGTH = 500;
@@ -71,8 +70,7 @@ export const ORIENTATION_PORTRAIT = 'portrait';
 export const ORIENTATION_LANDSCAPE = 'landscape';
 
 // localstorage keys
-export const HAS_DISPLAYED_NOTIFICATION_MODAL_KEY =
+export const HAS_DISPLAYED_NOTIFICATION_MODAL_KEY = 'HAS_DISPLAYED_NOTIFICATION_MODAL';
-  'HAS_DISPLAYED_NOTIFICATION_MODAL';
 export const USER_VISIT_COUNT_KEY = 'USER_VISIT_COUNT';
 export const USER_DISMISSED_ANNOYING_NOTIFICATION_POPUP_KEY =
   'USER_DISMISSED_ANNOYING_NOTIFICATION_POPUP_KEY';

web/utils/helpers.js

@@ -40,7 +40,7 @@ export function jumpToBottom(element, behavior) {
       });
     },
     50,
-    element
+    element,
   );
 }