Fix web project build errors

web/components/ui/Content/Content.module.scss

@@ -1,26 +1,26 @@
 .root {
-    display: grid;
-    grid-template-columns: 1fr;
+  display: grid;
+  grid-template-columns: 1fr;
 }
 
 .mobileChat {
-    display: block;
-    position: absolute;
-    background-color: white;
-    top: 0px;
-    width: 100%;
-    height: calc(50vh - var(--header-h));
+  display: block;
+  position: absolute;
+  background-color: white;
+  top: 0px;
+  width: 100%;
+  height: calc(50vh - var(--header-h));
 }
 
 .leftCol {
-    display: grid;
-    // -64px, which is the header
-    grid-template-rows: 50vh calc(50vh - var(--header-h));
+  display: grid;
+  // -64px, which is the header
+  grid-template-rows: 50vh calc(50vh - var(--header-h));
 }
 .lowerRow {
-    position: relative;
-    display: grid;
-    grid-template-rows: 1fr var(--header-h);
+  position: relative;
+  display: grid;
+  grid-template-rows: 1fr var(--header-h);
 }
 
 .pageContentSection {
@@ -32,10 +32,10 @@
 }
 
 @media (min-width: 768px) {
-    .mobileChat {
-        display: none;
-    }
-    .root[data-columns='2'] {
-        grid-template-columns: 1fr var(--chat-w);
-    }
+  .mobileChat {
+    display: none;
+  }
+  .root[data-columns='2'] {
+    grid-template-columns: 1fr var(--chat-w);
+  }
 }

web/components/ui/Content/Content.tsx

@@ -1,6 +1,5 @@
 import { useRecoilValue } from 'recoil';
-import { Layout, Button, Col, Tabs } from 'antd';
-import Grid from 'antd/lib/card/Grid';
+import { Layout, Button, Tabs } from 'antd';
 import {
   chatVisibilityAtom,
   clientConfigStateAtom,
@@ -23,6 +22,7 @@ import ActionButtonRow from '../../action-buttons/ActionButtonRow';
 import ActionButton from '../../action-buttons/ActionButton';
 import Statusbar from '../Statusbar/Statusbar';
 import { ServerStatus } from '../../../interfaces/server-status.model';
+import { Follower } from '../../../interfaces/follower';
 
 const { TabPane } = Tabs;
 const { Content } = Layout;
@@ -34,8 +34,8 @@ export default function ContentComponent() {
   const messages = useRecoilValue<ChatMessage[]>(chatMessagesAtom);
   const chatState = useRecoilValue<ChatState>(chatStateAtom);
 
-  const { extraPageContent } = clientConfig;
-  const { online, viewerCount, lastConnectTime, lastDisconnectTime, streamTitle } = status;
+  const { extraPageContent, version } = clientConfig;
+  const { online, viewerCount, lastConnectTime, lastDisconnectTime } = status;
 
   const followers: Follower[] = [];
 
@@ -88,7 +88,7 @@ export default function ContentComponent() {
               <ChatTextField />
             </div>
           )}
-          <Footer />
+          <Footer version={version} />
         </div>
       </div>
       {chatOpen && <Sidebar />}

web/components/ui/Content/index.ts

@@ -1 +1 @@
-export { default } from "./Content"
+export { default } from './Content';

web/components/ui/CrossfadeImage/CrossfadeImage.tsx

@@ -54,11 +54,11 @@ export default function CrossfadeImage({
   return (
     <span style={spanStyle}>
       {[...srcs, nextSrc].map(
-        (src, index) =>
-          src !== '' && (
+        (singleSrc, index) =>
+          singleSrc !== '' && (
             <img
-              key={(key + index) % 3}
-              src={src}
+              key={singleSrc}
+              src={singleSrc}
               alt=""
               style={imgStyles[index]}
               onLoad={index === 2 ? onLoadImg : undefined}

web/components/ui/Footer/Footer.tsx

@@ -2,7 +2,11 @@ import { Layout } from 'antd';
 
 const { Footer } = Layout;
 
-export default function FooterComponent(props) {
+interface Props {
+  version: string;
+}
+
+export default function FooterComponent(props: Props) {
   const { version } = props;
 
   return <Footer style={{ textAlign: 'center', height: '64px' }}>Footer: Owncast {version}</Footer>;

web/components/ui/Header/Header.module.scss

@@ -3,7 +3,7 @@
   align-items: center;
   justify-content: space-between;
   z-index: 1;
-  padding: .5rem 1rem;
+  padding: 0.5rem 1rem;
   .logo {
     display: flex;
     align-items: center;

web/components/ui/Header/Header.tsx

@@ -1,4 +1,5 @@
 import { Layout } from 'antd';
+import { ChatState } from '../../../interfaces/application-state';
 import { OwncastLogo, UserDropdown } from '../../common';
 import s from './Header.module.scss';
 
@@ -12,10 +13,10 @@ export default function HeaderComponent({ name = 'Your stream title' }: Props) {
   return (
     <Header className={`${s.header}`}>
       <div className={`${s.logo}`}>
-        <OwncastLogo variant='contrast'/>
+        <OwncastLogo variant="contrast" />
         <span>{name}</span>
       </div>
-      <UserDropdown />
+      <UserDropdown username="fillmein" chatState={ChatState.Available} />
     </Header>
   );
 }

web/components/ui/Modal/Modal.module.scss

@@ -8,4 +8,4 @@
   display: block;
   height: 100%;
   padding: 2vw;
-}
+}

web/components/ui/Modal/Modal.tsx

@@ -29,7 +29,6 @@ export default function Modal(props: Props) {
       width="100%"
       height="100%"
       sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
-      allowpaymentrequest="true"
       frameBorder="0"
       allowFullScreen
       onLoad={() => setLoading(false)}

web/components/ui/Sidebar/Sidebar.module.scss

@@ -8,5 +8,3 @@
     display: flex;
   }
 }
-
-

web/components/ui/Statusbar/Statusbar.module.scss

@@ -7,4 +7,4 @@
   height: 30px;
   width: 100%;
   background-color: black;
-}
+}

web/components/ui/Statusbar/Statusbar.tsx

@@ -40,7 +40,7 @@ export default function Statusbar(props: Props) {
     const duration = makeDurationString(new Date(lastConnectTime));
     onlineMessage = online ? `Live for  ${duration}` : 'Offline';
     rightSideMessage = `${viewerCount > 0 ? `${viewerCount}` : 'No'} ${
-      viewerCount == 1 ? 'viewer' : 'viewers'
+      viewerCount === 1 ? 'viewer' : 'viewers'
     }`;
   } else {
     onlineMessage = 'Offline';

web/components/ui/index.tsx

@@ -1,4 +1,4 @@
-export { default as Header } from './Header/index'
-export { default as Sidebar } from './Sidebar/index'
-export { default as Footer } from './Footer/index'
-export { default as Content } from './Content/index'
+export { default as Header } from './Header/index';
+export { default as Sidebar } from './Sidebar/index';
+export { default as Footer } from './Footer/index';
+export { default as Content } from './Content/index';