diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 000000000..784451480
Binary files /dev/null and b/.DS_Store differ
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 000000000..ca4f9b39a
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,6 @@
+{
+  "name": "owncast",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}
diff --git a/web/components/chat/ChatContainer/ChatContainer.tsx b/web/components/chat/ChatContainer/ChatContainer.tsx
index cd8fab348..72d23dfa0 100644
--- a/web/components/chat/ChatContainer/ChatContainer.tsx
+++ b/web/components/chat/ChatContainer/ChatContainer.tsx
@@ -79,8 +79,8 @@ export const ChatContainer: FC<ChatContainerProps> = ({
   usernameToHighlight,
   chatUserId,
   isModerator,
-  showInput,
-  height,
+  showInput = true,
+  height = 'auto',
   chatAvailable: chatEnabled,
   desktop,
   focusInput = true,
@@ -377,8 +377,3 @@ export const ChatContainer: FC<ChatContainerProps> = ({
     </ErrorBoundary>
   );
 };
-
-ChatContainer.defaultProps = {
-  showInput: true,
-  height: 'auto',
-};
diff --git a/web/components/ui/CrossfadeImage/CrossfadeImage.tsx b/web/components/ui/CrossfadeImage/CrossfadeImage.tsx
index 4a30c6c06..7e3baddb8 100644
--- a/web/components/ui/CrossfadeImage/CrossfadeImage.tsx
+++ b/web/components/ui/CrossfadeImage/CrossfadeImage.tsx
@@ -21,8 +21,8 @@ export const CrossfadeImage: FC<CrossfadeImageProps> = ({
   src = '',
   width,
   height,
-  objectFit = 'fill',
-  duration = '1s',
+  objectFit = 'fill', // default value for objectFit
+  duration = '3s', // default value for duration
   className,
 }) => {
   const spanStyle: React.CSSProperties = useMemo(
@@ -70,8 +70,3 @@ export const CrossfadeImage: FC<CrossfadeImageProps> = ({
     </span>
   );
 };
-
-CrossfadeImage.defaultProps = {
-  objectFit: 'fill',
-  duration: '3s',
-};
diff --git a/web/components/ui/Modal/Modal.tsx b/web/components/ui/Modal/Modal.tsx
index 7f87cc77d..7a920acb8 100644
--- a/web/components/ui/Modal/Modal.tsx
+++ b/web/components/ui/Modal/Modal.tsx
@@ -18,14 +18,14 @@ export type ModalProps = {
 
 export const Modal: FC<ModalProps> = ({
   title,
-  url,
+  url = undefined,
   open,
-  handleOk,
-  handleCancel,
-  afterClose,
+  handleOk = undefined,
+  handleCancel = undefined,
+  afterClose = undefined,
   height,
   width,
-  children,
+  children = undefined,
 }) => {
   const [loading, setLoading] = useState(!!url);
 
diff --git a/web/components/ui/Statusbar/Statusbar.tsx b/web/components/ui/Statusbar/Statusbar.tsx
index 04cf32d7b..13555faae 100644
--- a/web/components/ui/Statusbar/Statusbar.tsx
+++ b/web/components/ui/Statusbar/Statusbar.tsx
@@ -5,7 +5,6 @@ import classNames from 'classnames';
 import styles from './Statusbar.module.scss';
 
 // Lazy loaded components
-
 const EyeFilled = dynamic(() => import('@ant-design/icons/EyeFilled'), {
   ssr: false,
 });
@@ -40,8 +39,8 @@ function makeDurationString(lastConnectTime: Date): string {
 
 export const Statusbar: FC<StatusbarProps> = ({
   online,
-  lastConnectTime,
-  lastDisconnectTime,
+  lastConnectTime = null,
+  lastDisconnectTime = null,
   viewerCount,
   className,
 }) => {
@@ -84,8 +83,3 @@ export const Statusbar: FC<StatusbarProps> = ({
     </div>
   );
 };
-
-Statusbar.defaultProps = {
-  lastConnectTime: null,
-  lastDisconnectTime: null,
-};