From 469a00b6d6d1b56c17a60914ae1fe8e5a6cf9e22 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ren=C3=A9e=20Kooi?= <renee@kooi.me>
Date: Sun, 29 Sep 2024 10:40:12 +0200
Subject: [PATCH 1/4] Port PreviewMediaDialog to TypeScript

---
 .../Dialogs/PreviewMediaDialog/index.jsx      | 63 -------------------
 .../Dialogs/PreviewMediaDialog/index.tsx      | 51 +++++++++++++++
 src/components/Video/Player.tsx               |  4 +-
 3 files changed, 52 insertions(+), 66 deletions(-)
 delete mode 100644 src/components/Dialogs/PreviewMediaDialog/index.jsx
 create mode 100644 src/components/Dialogs/PreviewMediaDialog/index.tsx

diff --git a/src/components/Dialogs/PreviewMediaDialog/index.jsx b/src/components/Dialogs/PreviewMediaDialog/index.jsx
deleted file mode 100644
index 6ac1846db..000000000
--- a/src/components/Dialogs/PreviewMediaDialog/index.jsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Dialog from '@mui/material/Dialog';
-import DialogContent from '@mui/material/DialogContent';
-import DialogCloseAnimation from '../../DialogCloseAnimation';
-import PreviewPlayer from '../../Video/Player';
-
-function getTitle(media) {
-  return `${media.artist} – ${media.title}`;
-}
-
-function PreviewDialogWrapper(props) {
-  return (
-    <Dialog
-      {...props}
-      disableEnforceFocus
-      maxWidth={false}
-      classes={{
-        root: 'AppColumn AppColumn--left',
-        paper: 'Dialog PreviewMediaDialog',
-      }}
-      BackdropProps={{
-        className: 'AppColumn AppColumn--left',
-      }}
-    />
-  );
-}
-
-const PreviewMediaDialog = ({
-  open,
-  media,
-  volume,
-  onCloseDialog,
-}) => (
-  <DialogCloseAnimation delay={450}>
-    {open ? (
-      <PreviewDialogWrapper
-        onClose={onCloseDialog}
-        aria-label={getTitle(media)}
-        open
-      >
-        <DialogContent className="Dialog-body PreviewMediaDialog-content">
-          {open && (
-            <PreviewPlayer
-              mode="preview"
-              media={media}
-              volume={volume}
-            />
-          )}
-        </DialogContent>
-      </PreviewDialogWrapper>
-    ) : null}
-  </DialogCloseAnimation>
-);
-
-PreviewMediaDialog.propTypes = {
-  open: PropTypes.bool,
-  media: PropTypes.object,
-  volume: PropTypes.number,
-  onCloseDialog: PropTypes.func.isRequired,
-};
-
-export default PreviewMediaDialog;
diff --git a/src/components/Dialogs/PreviewMediaDialog/index.tsx b/src/components/Dialogs/PreviewMediaDialog/index.tsx
new file mode 100644
index 000000000..379ce7b1f
--- /dev/null
+++ b/src/components/Dialogs/PreviewMediaDialog/index.tsx
@@ -0,0 +1,51 @@
+import Dialog from '@mui/material/Dialog';
+import DialogContent from '@mui/material/DialogContent';
+import DialogCloseAnimation from '../../DialogCloseAnimation';
+import PreviewPlayer from '../../Video/Player';
+import type { Media } from '../../../reducers/booth';
+
+function getTitle(media: Media) {
+  return `${media.artist} – ${media.title}`;
+}
+
+type PreviewMediaDialogProps = {
+  open: boolean,
+  media?: Media | null,
+  volume: number,
+  onCloseDialog: () => void,
+};
+function PreviewMediaDialog({
+  open,
+  media,
+  volume,
+  onCloseDialog,
+}: PreviewMediaDialogProps) {
+  const dialog = open && media != null ? (
+    <Dialog
+      onClose={onCloseDialog}
+      aria-label={getTitle(media)}
+      open
+      disableEnforceFocus
+      maxWidth={false}
+      classes={{
+        root: 'AppColumn AppColumn--left',
+        paper: 'Dialog PreviewMediaDialog',
+      }}
+      BackdropProps={{
+        className: 'AppColumn AppColumn--left',
+      }}
+    >
+      <DialogContent className="Dialog-body PreviewMediaDialog-content">
+        <PreviewPlayer media={media} volume={volume} />
+      </DialogContent>
+    </Dialog>
+  ) : null;
+
+  return (
+    <DialogCloseAnimation delay={450}>
+      {dialog}
+    </DialogCloseAnimation>
+  );
+}
+
+export default PreviewMediaDialog;
diff --git a/src/components/Video/Player.tsx b/src/components/Video/Player.tsx
index c8a0be542..f61b16046 100644
--- a/src/components/Video/Player.tsx
+++ b/src/components/Video/Player.tsx
@@ -5,13 +5,11 @@ type PreviewPlayerProps = {
   media: Media,
   seek?: number,
   volume: number,
-  isMuted: boolean,
 };
 function PreviewPlayer({
   media,
   seek = 0,
   volume,
-  isMuted,
 }: PreviewPlayerProps) {
   const { getMediaSource } = useMediaSources();
   const source = getMediaSource(media.sourceType);
@@ -27,7 +25,7 @@ function PreviewPlayer({
       active
       seek={seek}
       media={media}
-      volume={isMuted ? 0 : volume}
+      volume={volume}
       mode="preview"
     />
   );

From 970f890940a89af230846a3eae5084ffb76fbb1c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ren=C3=A9e=20Kooi?= <renee@kooi.me>
Date: Sun, 29 Sep 2024 11:18:54 +0200
Subject: [PATCH 2/4] Port mobile components to TypeScript

---
 src/components/Player/index.tsx               |  2 +-
 .../App/{Overlays.jsx => Overlays.tsx}        | 15 ++---
 .../components/App/{index.jsx => index.tsx}   | 18 +++---
 ...edMessage.jsx => VideoDisabledMessage.tsx} | 11 ++--
 .../MainView/{index.jsx => index.tsx}         | 32 +++++------
 src/mobile/components/MediaList/Row.css       |  4 ++
 src/mobile/components/MediaList/Row.jsx       | 32 -----------
 src/mobile/components/MediaList/Row.tsx       | 33 +++++++++++
 .../MediaList/{index.jsx => index.tsx}        |  8 ++-
 .../{HistoryList.jsx => HistoryList.tsx}      |  0
 src/mobile/components/RoomHistory/Row.jsx     | 34 -----------
 src/mobile/components/RoomHistory/Row.tsx     | 35 ++++++++++++
 .../RoomHistory/{Votes.jsx => Votes.tsx}      | 14 ++---
 .../RoomHistory/{index.jsx => index.tsx}      | 19 ++-----
 .../{UserList.jsx => UserList.tsx}            | 30 +++++-----
 src/mobile/components/UsersDrawer/UserRow.jsx | 32 -----------
 src/mobile/components/UsersDrawer/UserRow.tsx | 30 ++++++++++
 .../UsersDrawer/WaitlistPosition.jsx          | 14 -----
 .../UsersDrawer/WaitlistPosition.tsx          | 13 +++++
 src/mobile/components/UsersDrawer/index.jsx   | 54 ------------------
 src/mobile/components/UsersDrawer/index.tsx   | 51 +++++++++++++++++
 .../{VoteButtons.jsx => VoteButtons.tsx}      | 26 ++++-----
 .../components/Video/{index.jsx => index.tsx} | 43 +++++++-------
 .../containers/{About.jsx => About.tsx}       | 21 +++----
 src/mobile/containers/{Chat.jsx => Chat.tsx}  |  0
 .../{DrawerMenu.jsx => DrawerMenu.tsx}        |  8 +--
 .../{LoginButtons.jsx => LoginButtons.tsx}    |  4 +-
 .../containers/{MainView.jsx => MainView.tsx} | 13 +----
 src/mobile/containers/PlaylistManager.tsx     | 14 ++---
 src/mobile/containers/PlaylistPanel.js        | 56 -------------------
 src/mobile/containers/PlaylistPanel.tsx       | 14 +++++
 .../{RoomHistory.jsx => RoomHistory.tsx}      | 10 +++-
 .../{ServerList.jsx => ServerList.tsx}        | 11 ++--
 src/mobile/containers/UsersDrawer.js          | 33 -----------
 src/mobile/containers/UsersDrawer.tsx         | 47 ++++++++++++++++
 .../containers/{Video.jsx => Video.tsx}       | 26 ++++++---
 36 files changed, 370 insertions(+), 437 deletions(-)
 rename src/mobile/components/App/{Overlays.jsx => Overlays.tsx} (79%)
 rename src/mobile/components/App/{index.jsx => index.tsx} (86%)
 rename src/mobile/components/MainView/{VideoDisabledMessage.jsx => VideoDisabledMessage.tsx} (68%)
 rename src/mobile/components/MainView/{index.jsx => index.tsx} (81%)
 delete mode 100644 src/mobile/components/MediaList/Row.jsx
 create mode 100644 src/mobile/components/MediaList/Row.tsx
 rename src/mobile/components/MediaList/{index.jsx => index.tsx} (60%)
 rename src/mobile/components/RoomHistory/{HistoryList.jsx => HistoryList.tsx} (100%)
 delete mode 100644 src/mobile/components/RoomHistory/Row.jsx
 create mode 100644 src/mobile/components/RoomHistory/Row.tsx
 rename src/mobile/components/RoomHistory/{Votes.jsx => Votes.tsx} (84%)
 rename src/mobile/components/RoomHistory/{index.jsx => index.tsx} (70%)
 rename src/mobile/components/UsersDrawer/{UserList.jsx => UserList.tsx} (75%)
 delete mode 100644 src/mobile/components/UsersDrawer/UserRow.jsx
 create mode 100644 src/mobile/components/UsersDrawer/UserRow.tsx
 delete mode 100644 src/mobile/components/UsersDrawer/WaitlistPosition.jsx
 create mode 100644 src/mobile/components/UsersDrawer/WaitlistPosition.tsx
 delete mode 100644 src/mobile/components/UsersDrawer/index.jsx
 create mode 100644 src/mobile/components/UsersDrawer/index.tsx
 rename src/mobile/components/Video/{VoteButtons.jsx => VoteButtons.tsx} (60%)
 rename src/mobile/components/Video/{index.jsx => index.tsx} (76%)
 rename src/mobile/containers/{About.jsx => About.tsx} (64%)
 rename src/mobile/containers/{Chat.jsx => Chat.tsx} (100%)
 rename src/mobile/containers/{DrawerMenu.jsx => DrawerMenu.tsx} (92%)
 rename src/mobile/containers/{LoginButtons.jsx => LoginButtons.tsx} (92%)
 rename src/mobile/containers/{MainView.jsx => MainView.tsx} (80%)
 delete mode 100644 src/mobile/containers/PlaylistPanel.js
 create mode 100644 src/mobile/containers/PlaylistPanel.tsx
 rename src/mobile/containers/{RoomHistory.jsx => RoomHistory.tsx} (56%)
 rename src/mobile/containers/{ServerList.jsx => ServerList.tsx} (74%)
 delete mode 100644 src/mobile/containers/UsersDrawer.js
 create mode 100644 src/mobile/containers/UsersDrawer.tsx
 rename src/mobile/containers/{Video.jsx => Video.tsx} (66%)

diff --git a/src/components/Player/index.tsx b/src/components/Player/index.tsx
index 91f9a0d93..cd856a088 100644
--- a/src/components/Player/index.tsx
+++ b/src/components/Player/index.tsx
@@ -8,7 +8,7 @@ type PlayerProps = {
   mode?: 'preview' | undefined,
   volume: number,
   isMuted: boolean,
-  media: Media,
+  media: Media | null,
   seek: number,
   onPlay?: () => void,
 };
diff --git a/src/mobile/components/App/Overlays.jsx b/src/mobile/components/App/Overlays.tsx
similarity index 79%
rename from src/mobile/components/App/Overlays.jsx
rename to src/mobile/components/App/Overlays.tsx
index 48aaa16d3..4b8e9ed0b 100644
--- a/src/mobile/components/App/Overlays.jsx
+++ b/src/mobile/components/App/Overlays.tsx
@@ -1,8 +1,10 @@
-import React from 'react';
-import PropTypes from 'prop-types';
 import { CSSTransition, TransitionGroup } from 'react-transition-group';
 
-const Overlays = ({ children, active }) => {
+type OverlaysProps = {
+  children: React.ReactElement | React.ReactElement[],
+  active?: string | null,
+};
+function Overlays({ children, active }: OverlaysProps) {
   let view;
   if (Array.isArray(children)) {
     view = children.find((child) => child.key === active);
@@ -31,11 +33,6 @@ const Overlays = ({ children, active }) => {
       {view}
     </TransitionGroup>
   );
-};
-
-Overlays.propTypes = {
-  children: PropTypes.node,
-  active: PropTypes.string,
-};
+}
 
 export default Overlays;
diff --git a/src/mobile/components/App/index.jsx b/src/mobile/components/App/index.tsx
similarity index 86%
rename from src/mobile/components/App/index.jsx
rename to src/mobile/components/App/index.tsx
index 042e22b68..c577c3b0c 100644
--- a/src/mobile/components/App/index.jsx
+++ b/src/mobile/components/App/index.tsx
@@ -1,6 +1,5 @@
 import cx from 'clsx';
-import React from 'react';
-import PropTypes from 'prop-types';
+import { useState } from 'react';
 import Snackbar from '@mui/material/Snackbar';
 import { useSelector } from '../../../hooks/useRedux';
 import ErrorArea from '../../../containers/ErrorArea';
@@ -15,12 +14,14 @@ import ServerList from '../../containers/ServerList';
 import { videoEnabledSelector } from '../../../reducers/settings';
 import Overlays from './Overlays';
 
-const { useState } = React;
-
+type MobileAppProps = {
+  activeOverlay?: string | null,
+  onCloseOverlay: () => void,
+};
 function MobileApp({
   activeOverlay,
   onCloseOverlay,
-}) {
+}: MobileAppProps) {
   const [dismissedWarning, dismissWarning] = useState(false);
   const videoEnabled = useSelector(videoEnabledSelector);
 
@@ -36,7 +37,7 @@ function MobileApp({
 
       <ErrorArea />
 
-      <Overlays transitionName="Overlay" active={activeOverlay}>
+      <Overlays active={activeOverlay}>
         <About key="about" onCloseOverlay={onCloseOverlay} />
         <ServerList key="serverList" onCloseOverlay={onCloseOverlay} />
         <PlaylistManager key="playlistManager" onCloseOverlay={onCloseOverlay} />
@@ -51,9 +52,4 @@ function MobileApp({
   );
 }
 
-MobileApp.propTypes = {
-  activeOverlay: PropTypes.string,
-  onCloseOverlay: PropTypes.func.isRequired,
-};
-
 export default MobileApp;
diff --git a/src/mobile/components/MainView/VideoDisabledMessage.jsx b/src/mobile/components/MainView/VideoDisabledMessage.tsx
similarity index 68%
rename from src/mobile/components/MainView/VideoDisabledMessage.jsx
rename to src/mobile/components/MainView/VideoDisabledMessage.tsx
index 8e08ae714..4d41514de 100644
--- a/src/mobile/components/MainView/VideoDisabledMessage.jsx
+++ b/src/mobile/components/MainView/VideoDisabledMessage.tsx
@@ -1,9 +1,10 @@
-import React from 'react';
-import PropTypes from 'prop-types';
 import { useTranslator } from '@u-wave/react-translate';
 import Button from '@mui/material/Button';
 
-function VideoDisabledMessage({ onEnableVideo }) {
+type VideoDisabledMessageProps = {
+  onEnableVideo: () => void,
+};
+function VideoDisabledMessage({ onEnableVideo }: VideoDisabledMessageProps) {
   const { t } = useTranslator();
 
   return (
@@ -16,8 +17,4 @@ function VideoDisabledMessage({ onEnableVideo }) {
   );
 }
 
-VideoDisabledMessage.propTypes = {
-  onEnableVideo: PropTypes.func.isRequired,
-};
-
 export default VideoDisabledMessage;
diff --git a/src/mobile/components/MainView/index.jsx b/src/mobile/components/MainView/index.tsx
similarity index 81%
rename from src/mobile/components/MainView/index.jsx
rename to src/mobile/components/MainView/index.tsx
index cd62e00d5..4cd1d7277 100644
--- a/src/mobile/components/MainView/index.jsx
+++ b/src/mobile/components/MainView/index.tsx
@@ -1,5 +1,3 @@
-import React from 'react';
-import PropTypes from 'prop-types';
 import { useTranslator } from '@u-wave/react-translate';
 import AppBar from '@mui/material/AppBar';
 import Toolbar from '@mui/material/Toolbar';
@@ -13,13 +11,14 @@ import Chat from '../../containers/Chat';
 import DrawerMenu from '../../containers/DrawerMenu';
 import UsersDrawer from '../../containers/UsersDrawer';
 import VideoDisabledMessage from './VideoDisabledMessage';
+import type { Media } from '../../../reducers/booth';
 
-const waitlistIconStyle = {
+const waitlistIconStyle: React.CSSProperties = {
   fontSize: '125%',
   textAlign: 'center',
 };
 
-const getWaitlistLabel = (size, position) => {
+function getWaitlistLabel(size: number, position: number) {
   if (size > 0) {
     const posText = position !== -1
       ? `${position + 1}/${size}`
@@ -28,8 +27,18 @@ const getWaitlistLabel = (size, position) => {
     return posText;
   }
   return '0';
-};
+}
 
+type MainViewProps = {
+  media: Media | null,
+  videoEnabled: boolean,
+  waitlistPosition: number,
+  waitlistSize: number,
+  onOpenRoomHistory: () => void,
+  onOpenDrawer: () => void,
+  onOpenWaitlist: () => void,
+  onEnableVideo: () => void,
+};
 function MainView({
   media,
   videoEnabled,
@@ -39,7 +48,7 @@ function MainView({
   onOpenDrawer,
   onOpenWaitlist,
   onEnableVideo,
-}) {
+}: MainViewProps) {
   const { t } = useTranslator();
 
   let title = t('booth.empty');
@@ -87,15 +96,4 @@ function MainView({
   );
 }
 
-MainView.propTypes = {
-  media: PropTypes.object,
-  videoEnabled: PropTypes.bool.isRequired,
-  waitlistPosition: PropTypes.number.isRequired,
-  waitlistSize: PropTypes.number.isRequired,
-  onOpenRoomHistory: PropTypes.func.isRequired,
-  onOpenWaitlist: PropTypes.func.isRequired,
-  onOpenDrawer: PropTypes.func.isRequired,
-  onEnableVideo: PropTypes.func.isRequired,
-};
-
 export default MainView;
diff --git a/src/mobile/components/MediaList/Row.css b/src/mobile/components/MediaList/Row.css
index ceb12c77b..7ff905410 100644
--- a/src/mobile/components/MediaList/Row.css
+++ b/src/mobile/components/MediaList/Row.css
@@ -1,3 +1,7 @@
+.MobileMediaRow {
+  position: absolute;
+}
+
 .MobileMediaRow-artist,
 .MobileMediaRow-title {
   max-width: 100%;
diff --git a/src/mobile/components/MediaList/Row.jsx b/src/mobile/components/MediaList/Row.jsx
deleted file mode 100644
index bc46db167..000000000
--- a/src/mobile/components/MediaList/Row.jsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Avatar from '@mui/material/Avatar';
-import ListItem from '@mui/material/ListItem';
-import ListItemAvatar from '@mui/material/ListItemAvatar';
-import ListItemText from '@mui/material/ListItemText';
-
-const noWrap = { noWrap: true };
-
-const MediaRow = ({ media, style }) => (
-  <ListItem className="MobileMediaRow" style={style}>
-    <ListItemAvatar>
-      <Avatar
-        src={media.thumbnail}
-        variant="square"
-      />
-    </ListItemAvatar>
-    <ListItemText
-      primaryTypographyProps={noWrap}
-      secondaryTypographyProps={noWrap}
-      primary={media.title}
-      secondary={media.artist}
-    />
-  </ListItem>
-);
-
-MediaRow.propTypes = {
-  style: PropTypes.object, // from virtual list positioning
-  media: PropTypes.object,
-};
-
-export default MediaRow;
diff --git a/src/mobile/components/MediaList/Row.tsx b/src/mobile/components/MediaList/Row.tsx
new file mode 100644
index 000000000..57dd158e3
--- /dev/null
+++ b/src/mobile/components/MediaList/Row.tsx
@@ -0,0 +1,33 @@
+import Avatar from '@mui/material/Avatar';
+import ListItem from '@mui/material/ListItem';
+import ListItemAvatar from '@mui/material/ListItemAvatar';
+import ListItemText from '@mui/material/ListItemText';
+import type { Media } from '../../../reducers/booth';
+
+const noWrap = { noWrap: true };
+
+type MediaRowProps = {
+  media: Media,
+  /** For virtual list positioning. */
+  style: React.CSSProperties,
+};
+function MediaRow({ media, style }: MediaRowProps) {
+  return (
+    <ListItem className="MobileMediaRow" style={style}>
+      <ListItemAvatar>
+        <Avatar
+          src={media.thumbnail}
+          variant="square"
+        />
+      </ListItemAvatar>
+      <ListItemText
+        primaryTypographyProps={noWrap}
+        secondaryTypographyProps={noWrap}
+        primary={media.title}
+        secondary={media.artist}
+      />
+    </ListItem>
+  );
+}
+
+export default MediaRow;
diff --git a/src/mobile/components/MediaList/index.jsx b/src/mobile/components/MediaList/index.tsx
similarity index 60%
rename from src/mobile/components/MediaList/index.jsx
rename to src/mobile/components/MediaList/index.tsx
index fd2c96cd5..dfc28dfbb 100644
--- a/src/mobile/components/MediaList/index.jsx
+++ b/src/mobile/components/MediaList/index.tsx
@@ -1,9 +1,13 @@
-import React from 'react';
 import List from '@mui/material/List';
 import Base from '../../../components/MediaList/BaseMediaList';
 import MediaRow from './Row';
+import type { Media } from '../../../reducers/booth';
 
-function MediaList(props) {
+type MediaListProps = {
+  className?: string,
+  media: (Media | null)[],
+};
+function MediaList(props: MediaListProps) {
   return (
     <Base
       listComponent={List}
diff --git a/src/mobile/components/RoomHistory/HistoryList.jsx b/src/mobile/components/RoomHistory/HistoryList.tsx
similarity index 100%
rename from src/mobile/components/RoomHistory/HistoryList.jsx
rename to src/mobile/components/RoomHistory/HistoryList.tsx
diff --git a/src/mobile/components/RoomHistory/Row.jsx b/src/mobile/components/RoomHistory/Row.jsx
deleted file mode 100644
index bed05a40a..000000000
--- a/src/mobile/components/RoomHistory/Row.jsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Avatar from '@mui/material/Avatar';
-import ListItem from '@mui/material/ListItem';
-import ListItemAvatar from '@mui/material/ListItemAvatar';
-import ListItemText from '@mui/material/ListItemText';
-import Votes from './Votes';
-
-const noWrap = { noWrap: true };
-
-const HistoryRow = ({ media, style }) => (
-  <ListItem className="MobileMediaRow" style={style}>
-    <ListItemAvatar>
-      <Avatar
-        src={media.media.thumbnail}
-        variant="square"
-      />
-    </ListItemAvatar>
-    <ListItemText
-      primaryTypographyProps={noWrap}
-      secondaryTypographyProps={noWrap}
-      primary={media.media.title}
-      secondary={media.media.artist}
-    />
-    <Votes {...media.stats} />
-  </ListItem>
-);
-
-HistoryRow.propTypes = {
-  style: PropTypes.object, // from virtual list positioning
-  media: PropTypes.object,
-};
-
-export default HistoryRow;
diff --git a/src/mobile/components/RoomHistory/Row.tsx b/src/mobile/components/RoomHistory/Row.tsx
new file mode 100644
index 000000000..84a2bb455
--- /dev/null
+++ b/src/mobile/components/RoomHistory/Row.tsx
@@ -0,0 +1,35 @@
+import Avatar from '@mui/material/Avatar';
+import ListItem from '@mui/material/ListItem';
+import ListItemAvatar from '@mui/material/ListItemAvatar';
+import ListItemText from '@mui/material/ListItemText';
+import Votes from './Votes';
+import type { HistoryEntry } from '../../../hooks/useRoomHistory';
+
+const noWrap = { noWrap: true };
+
+type HistoryRowProps = {
+  media: HistoryEntry,
+  /** For virtual list positioning. */
+  style: React.CSSProperties,
+};
+function HistoryRow({ media, style }: HistoryRowProps) {
+  return (
+    <ListItem className="MobileMediaRow" style={style}>
+      <ListItemAvatar>
+        <Avatar
+          src={media.media.thumbnail}
+          variant="square"
+        />
+      </ListItemAvatar>
+      <ListItemText
+        primaryTypographyProps={noWrap}
+        secondaryTypographyProps={noWrap}
+        primary={media.media.title}
+        secondary={media.media.artist}
+      />
+      <Votes {...media.stats} />
+    </ListItem>
+  );
+}
+
+export default HistoryRow;
diff --git a/src/mobile/components/RoomHistory/Votes.jsx b/src/mobile/components/RoomHistory/Votes.tsx
similarity index 84%
rename from src/mobile/components/RoomHistory/Votes.jsx
rename to src/mobile/components/RoomHistory/Votes.tsx
index c15d3eed2..a68a4c457 100644
--- a/src/mobile/components/RoomHistory/Votes.jsx
+++ b/src/mobile/components/RoomHistory/Votes.tsx
@@ -1,12 +1,16 @@
 import cx from 'clsx';
-import PropTypes from 'prop-types';
 import {
   mdiHeart, mdiHeartOutline, mdiThumbDown, mdiThumbUp,
 } from '@mdi/js';
 import SvgIcon from '../../../components/SvgIcon';
 import useCurrentUser from '../../../hooks/useCurrentUser';
 
-function Votes({ upvotes, downvotes, favorites }) {
+type VotesProps = {
+  upvotes: string[],
+  downvotes: string[],
+  favorites: string[],
+};
+function Votes({ upvotes, downvotes, favorites }: VotesProps) {
   const user = useCurrentUser();
   const isUpvote = user ? upvotes.includes(user._id) : false;
   const isDownvote = user ? downvotes.includes(user._id) : false;
@@ -30,10 +34,4 @@ function Votes({ upvotes, downvotes, favorites }) {
   );
 }
 
-Votes.propTypes = {
-  upvotes: PropTypes.array.isRequired,
-  favorites: PropTypes.array.isRequired,
-  downvotes: PropTypes.array.isRequired,
-};
-
 export default Votes;
diff --git a/src/mobile/components/RoomHistory/index.jsx b/src/mobile/components/RoomHistory/index.tsx
similarity index 70%
rename from src/mobile/components/RoomHistory/index.jsx
rename to src/mobile/components/RoomHistory/index.tsx
index 4b94f65c6..437090350 100644
--- a/src/mobile/components/RoomHistory/index.jsx
+++ b/src/mobile/components/RoomHistory/index.tsx
@@ -1,16 +1,14 @@
 import cx from 'clsx';
-import React from 'react';
-import PropTypes from 'prop-types';
 import { useTranslator } from '@u-wave/react-translate';
 import OverlayHeader from '../../../components/Overlay/Header';
 import OverlayContent from '../../../components/Overlay/Content';
 import HistoryList from './HistoryList';
 
-function RoomHistory({
-  className,
-  onCloseOverlay,
-  ...props
-}) {
+type RoomHistoryProps = {
+  className?: string,
+  onCloseOverlay: () => void,
+};
+function RoomHistory({ className, onCloseOverlay }: RoomHistoryProps) {
   const { t } = useTranslator();
 
   return (
@@ -22,15 +20,10 @@ function RoomHistory({
         onCloseOverlay={onCloseOverlay}
       />
       <OverlayContent className="RoomHistory-body">
-        <HistoryList {...props} />
+        <HistoryList />
       </OverlayContent>
     </div>
   );
 }
 
-RoomHistory.propTypes = {
-  className: PropTypes.string,
-  onCloseOverlay: PropTypes.func.isRequired,
-};
-
 export default RoomHistory;
diff --git a/src/mobile/components/UsersDrawer/UserList.jsx b/src/mobile/components/UsersDrawer/UserList.tsx
similarity index 75%
rename from src/mobile/components/UsersDrawer/UserList.jsx
rename to src/mobile/components/UsersDrawer/UserList.tsx
index 88546ca45..3133d376c 100644
--- a/src/mobile/components/UsersDrawer/UserList.jsx
+++ b/src/mobile/components/UsersDrawer/UserList.tsx
@@ -1,16 +1,15 @@
-import React from 'react';
-import PropTypes from 'prop-types';
 import { useTranslator } from '@u-wave/react-translate';
 import List from '@mui/material/List';
 import ListSubheader from '@mui/material/ListSubheader';
 import Divider from '@mui/material/Divider';
-import Button from '@mui/material/Button';
+import Button, { type ButtonProps } from '@mui/material/Button';
 import { mdiPlay } from '@mdi/js';
 import SvgIcon from '../../../components/SvgIcon';
 import UserRow from './UserRow';
 import WaitlistPosition from './WaitlistPosition';
+import type { User } from '../../../reducers/users';
 
-function JoinWaitlistButton(props) {
+function JoinWaitlistButton(props: ButtonProps) {
   return (
     <Button
       variant="contained"
@@ -20,6 +19,15 @@ function JoinWaitlistButton(props) {
   );
 }
 
+type UserListProps = {
+  currentDJ: User | null,
+  users: User[],
+  waitlist: (User | undefined)[],
+  isLockedWaitlist: boolean,
+  userIsLoggedIn: boolean,
+  userInWaitlist: boolean,
+  onJoinWaitlist: () => void,
+};
 function UserList({
   currentDJ,
   users,
@@ -28,7 +36,7 @@ function UserList({
   userIsLoggedIn,
   userInWaitlist,
   onJoinWaitlist,
-}) {
+}: UserListProps) {
   const { t } = useTranslator();
 
   return (
@@ -44,7 +52,7 @@ function UserList({
             icon={<SvgIcon path={mdiPlay} style={{ margin: 5 }} />}
           />
         )}
-        {waitlist.map((user, position) => (
+        {waitlist.map((user, position) => user && (
           <UserRow
             key={user._id}
             user={user}
@@ -74,14 +82,4 @@ function UserList({
   );
 }
 
-UserList.propTypes = {
-  currentDJ: PropTypes.object,
-  users: PropTypes.arrayOf(PropTypes.object).isRequired,
-  waitlist: PropTypes.arrayOf(PropTypes.object).isRequired,
-  userIsLoggedIn: PropTypes.bool.isRequired,
-  userInWaitlist: PropTypes.bool,
-  isLockedWaitlist: PropTypes.bool,
-  onJoinWaitlist: PropTypes.func.isRequired,
-};
-
 export default UserList;
diff --git a/src/mobile/components/UsersDrawer/UserRow.jsx b/src/mobile/components/UsersDrawer/UserRow.jsx
deleted file mode 100644
index 277ad2ca3..000000000
--- a/src/mobile/components/UsersDrawer/UserRow.jsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Avatar from '@mui/material/Avatar';
-import ListItem from '@mui/material/ListItem';
-import ListItemAvatar from '@mui/material/ListItemAvatar';
-import ListItemText from '@mui/material/ListItemText';
-import ListItemIcon from '@mui/material/ListItemIcon';
-import Username from '../../../components/Username';
-
-const UserRow = ({
-  user,
-  icon,
-}) => (
-  <ListItem>
-    <ListItemAvatar>
-      <Avatar className="Avatar" src={user.avatar ?? `https://sigil.u-wave.net/${user._id}`} />
-    </ListItemAvatar>
-    <ListItemText>
-      <Username user={user} />
-    </ListItemText>
-    {icon && (
-      <ListItemIcon>{icon}</ListItemIcon>
-    )}
-  </ListItem>
-);
-
-UserRow.propTypes = {
-  user: PropTypes.object.isRequired,
-  icon: PropTypes.node,
-};
-
-export default UserRow;
diff --git a/src/mobile/components/UsersDrawer/UserRow.tsx b/src/mobile/components/UsersDrawer/UserRow.tsx
new file mode 100644
index 000000000..1a940ef97
--- /dev/null
+++ b/src/mobile/components/UsersDrawer/UserRow.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import Avatar from '@mui/material/Avatar';
+import ListItem from '@mui/material/ListItem';
+import ListItemAvatar from '@mui/material/ListItemAvatar';
+import ListItemText from '@mui/material/ListItemText';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import Username from '../../../components/Username';
+import type { User } from '../../../reducers/users';
+
+type UserRowProps = {
+  user: User,
+  icon?: React.ReactNode,
+};
+function UserRow({ user, icon }: UserRowProps) {
+  return (
+    <ListItem>
+      <ListItemAvatar>
+        <Avatar className="Avatar" src={user.avatar ?? `https://sigil.u-wave.net/${user._id}`} />
+      </ListItemAvatar>
+      <ListItemText>
+        <Username user={user} />
+      </ListItemText>
+      {icon && (
+        <ListItemIcon>{icon}</ListItemIcon>
+      )}
+    </ListItem>
+  );
+}
+
+export default UserRow;
diff --git a/src/mobile/components/UsersDrawer/WaitlistPosition.jsx b/src/mobile/components/UsersDrawer/WaitlistPosition.jsx
deleted file mode 100644
index 9ba1eec2d..000000000
--- a/src/mobile/components/UsersDrawer/WaitlistPosition.jsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-const WaitlistPosition = ({ position }) => (
-  <span className="UsersDrawer-position">
-    {position}
-  </span>
-);
-
-WaitlistPosition.propTypes = {
-  position: PropTypes.number.isRequired,
-};
-
-export default WaitlistPosition;
diff --git a/src/mobile/components/UsersDrawer/WaitlistPosition.tsx b/src/mobile/components/UsersDrawer/WaitlistPosition.tsx
new file mode 100644
index 000000000..6cf7a0c06
--- /dev/null
+++ b/src/mobile/components/UsersDrawer/WaitlistPosition.tsx
@@ -0,0 +1,13 @@
+type WaitlistPositionProps = {
+  position: number,
+};
+
+function WaitlistPosition({ position }: WaitlistPositionProps) {
+  return (
+    <span className="UsersDrawer-position">
+      {position}
+    </span>
+  );
+}
+
+export default WaitlistPosition;
diff --git a/src/mobile/components/UsersDrawer/index.jsx b/src/mobile/components/UsersDrawer/index.jsx
deleted file mode 100644
index ff7cc1ba2..000000000
--- a/src/mobile/components/UsersDrawer/index.jsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Drawer from '@mui/material/Drawer';
-import UserList from './UserList';
-
-const classes = {
-  paper: 'UsersDrawer',
-};
-
-const UsersDrawer = ({
-  currentDJ,
-  users,
-  waitlist,
-  isLockedWaitlist,
-  userInWaitlist,
-  userIsLoggedIn,
-  open,
-  onDrawerClose,
-  onJoinWaitlist,
-  onLeaveWaitlist,
-}) => (
-  <Drawer
-    anchor="right"
-    open={open}
-    onClose={onDrawerClose}
-    classes={classes}
-  >
-    <UserList
-      currentDJ={currentDJ}
-      users={users}
-      waitlist={waitlist}
-      isLockedWaitlist={isLockedWaitlist}
-      userIsLoggedIn={userIsLoggedIn}
-      userInWaitlist={userInWaitlist}
-      onJoinWaitlist={onJoinWaitlist}
-      onLeaveWaitlist={onLeaveWaitlist}
-    />
-  </Drawer>
-);
-
-UsersDrawer.propTypes = {
-  currentDJ: PropTypes.object,
-  users: PropTypes.arrayOf(PropTypes.object).isRequired,
-  waitlist: PropTypes.arrayOf(PropTypes.object).isRequired,
-  userIsLoggedIn: PropTypes.bool.isRequired,
-  userInWaitlist: PropTypes.bool,
-  isLockedWaitlist: PropTypes.bool,
-  open: PropTypes.bool.isRequired,
-  onDrawerClose: PropTypes.func.isRequired,
-  onJoinWaitlist: PropTypes.func.isRequired,
-  onLeaveWaitlist: PropTypes.func.isRequired,
-};
-
-export default UsersDrawer;
diff --git a/src/mobile/components/UsersDrawer/index.tsx b/src/mobile/components/UsersDrawer/index.tsx
new file mode 100644
index 000000000..710413f85
--- /dev/null
+++ b/src/mobile/components/UsersDrawer/index.tsx
@@ -0,0 +1,51 @@
+import Drawer from '@mui/material/Drawer';
+import UserList from './UserList';
+import type { User } from '../../../reducers/users';
+
+const classes = {
+  paper: 'UsersDrawer',
+};
+
+type UsersDrawerProps = {
+  currentDJ: User | null,
+  users: User[],
+  waitlist: (User | undefined)[],
+  userIsLoggedIn: boolean,
+  userInWaitlist: boolean,
+  isLockedWaitlist: boolean,
+  open: boolean,
+  onDrawerClose: () => void,
+  onJoinWaitlist: () => void,
+};
+function UsersDrawer({
+  currentDJ,
+  users,
+  waitlist,
+  isLockedWaitlist,
+  userInWaitlist,
+  userIsLoggedIn,
+  open,
+  onDrawerClose,
+  onJoinWaitlist,
+}: UsersDrawerProps) {
+  return (
+    <Drawer
+      anchor="right"
+      open={open}
+      onClose={onDrawerClose}
+      classes={classes}
+    >
+      <UserList
+        currentDJ={currentDJ}
+        users={users}
+        waitlist={waitlist}
+        isLockedWaitlist={isLockedWaitlist}
+        userIsLoggedIn={userIsLoggedIn}
+        userInWaitlist={userInWaitlist}
+        onJoinWaitlist={onJoinWaitlist}
+      />
+    </Drawer>
+  );
+}
+
+export default UsersDrawer;
diff --git a/src/mobile/components/Video/VoteButtons.jsx b/src/mobile/components/Video/VoteButtons.tsx
similarity index 60%
rename from src/mobile/components/Video/VoteButtons.jsx
rename to src/mobile/components/Video/VoteButtons.tsx
index 439b4b9e4..e0a64f8ea 100644
--- a/src/mobile/components/Video/VoteButtons.jsx
+++ b/src/mobile/components/Video/VoteButtons.tsx
@@ -1,21 +1,26 @@
-import cx from 'clsx';
-import React from 'react';
-import PropTypes from 'prop-types';
 import IconButton from '@mui/material/IconButton';
 import {
   mdiHeart, mdiHeartOutline, mdiThumbDown, mdiThumbUp,
 } from '@mdi/js';
 import SvgIcon from '../../../components/SvgIcon';
 
+type VoteButtonsProps = {
+  isUpvote: boolean,
+  onUpvote: () => void,
+  isDownvote: boolean,
+  onDownvote: () => void,
+  isFavorite: boolean,
+  onFavorite: () => void,
+};
 function VoteButtons({
   isUpvote, onUpvote,
   isDownvote, onDownvote,
   isFavorite, onFavorite,
-}) {
+}: VoteButtonsProps) {
   return (
     <div className="VoteButtons">
       <IconButton onClick={onUpvote} className="VoteButtons-button">
-        <SvgIcon path={mdiThumbUp} className={cx(isUpvote && 'ResponseButton-icon--upvoted')} />
+        <SvgIcon path={mdiThumbUp} className={isUpvote ? 'ResponseButton-icon--upvoted' : undefined} />
       </IconButton>
       <IconButton onClick={onFavorite} className="VoteButtons-button">
         {isFavorite ? (
@@ -25,19 +30,10 @@ function VoteButtons({
         )}
       </IconButton>
       <IconButton onClick={onDownvote} className="VoteButtons-button">
-        <SvgIcon path={mdiThumbDown} className={cx(isDownvote && 'ResponseButton-icon--downvoted')} />
+        <SvgIcon path={mdiThumbDown} className={isDownvote ? 'ResponseButton-icon--downvoted' : undefined} />
       </IconButton>
     </div>
   );
 }
 
-VoteButtons.propTypes = {
-  isUpvote: PropTypes.bool,
-  isFavorite: PropTypes.bool,
-  isDownvote: PropTypes.bool,
-  onUpvote: PropTypes.func.isRequired,
-  onDownvote: PropTypes.func.isRequired,
-  onFavorite: PropTypes.func.isRequired,
-};
-
 export default VoteButtons;
diff --git a/src/mobile/components/Video/index.jsx b/src/mobile/components/Video/index.tsx
similarity index 76%
rename from src/mobile/components/Video/index.jsx
rename to src/mobile/components/Video/index.tsx
index a9651169a..0bb11a32f 100644
--- a/src/mobile/components/Video/index.jsx
+++ b/src/mobile/components/Video/index.tsx
@@ -1,14 +1,25 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import { useEffect, useState } from 'react';
 import Player from '../../../components/Player';
 import VideoBackdrop from '../../../components/Video/VideoBackdrop';
 import VoteButtons from './VoteButtons';
+import type { Media } from '../../../reducers/booth';
 
-const {
-  useEffect,
-  useState,
-} = React;
-
+type VideoProps = {
+  media: Media | null,
+  size: string,
+  enabled: boolean,
+  volume: number,
+  isMuted: boolean,
+  seek: number,
+  voteStats: {
+    isUpvote: boolean,
+    isDownvote: boolean,
+    isFavorite: boolean,
+  },
+  onUpvote: () => void,
+  onDownvote: () => void,
+  onFavorite: () => void,
+};
 function Video({
   media,
   voteStats,
@@ -16,7 +27,7 @@ function Video({
   onDownvote,
   onFavorite,
   ...props
-}) {
+}: VideoProps) {
   const [enableOverlay, setEnableOverlay] = useState(false);
   const [showVoteButtons, setShowVoteButtons] = useState(false);
 
@@ -68,20 +79,4 @@ function Video({
   );
 }
 
-Video.propTypes = {
-  media: PropTypes.shape({
-    sourceType: PropTypes.string.isRequired,
-    thumbnail: PropTypes.string.isRequired,
-  }),
-  voteStats: PropTypes.shape({
-    isUpvote: PropTypes.bool,
-    isFavorite: PropTypes.bool,
-    isDownvote: PropTypes.bool,
-  }),
-
-  onUpvote: PropTypes.func.isRequired,
-  onDownvote: PropTypes.func.isRequired,
-  onFavorite: PropTypes.func.isRequired,
-};
-
 export default Video;
diff --git a/src/mobile/containers/About.jsx b/src/mobile/containers/About.tsx
similarity index 64%
rename from src/mobile/containers/About.jsx
rename to src/mobile/containers/About.tsx
index 08da64fa7..f87e1a4bc 100644
--- a/src/mobile/containers/About.jsx
+++ b/src/mobile/containers/About.tsx
@@ -1,19 +1,16 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import { useContext } from 'react';
 import { useTranslator } from '@u-wave/react-translate';
 import UwaveContext from '../../context/UwaveContext';
 import Overlay from '../../components/Overlay';
 import OverlayHeader from '../../components/Overlay/Header';
 import OverlayContent from '../../components/Overlay/Content';
 
-const { useContext } = React;
-
-function AboutOverlay({
-  onCloseOverlay,
-  ...props
-}) {
+type AboutOverlayProps = {
+  onCloseOverlay: () => void,
+};
+function AboutOverlay({ onCloseOverlay }: AboutOverlayProps) {
   const { t } = useTranslator();
-  const AboutPage = useContext(UwaveContext).getAboutPageComponent();
+  const AboutPage = useContext(UwaveContext)?.getAboutPageComponent();
 
   if (!AboutPage) {
     return null;
@@ -23,14 +20,10 @@ function AboutOverlay({
     <Overlay>
       <OverlayHeader title={t('about.about')} onCloseOverlay={onCloseOverlay} />
       <OverlayContent className="AboutPanel">
-        <AboutPage {...props} />
+        <AboutPage />
       </OverlayContent>
     </Overlay>
   );
 }
 
-AboutOverlay.propTypes = {
-  onCloseOverlay: PropTypes.func.isRequired,
-};
-
 export default AboutOverlay;
diff --git a/src/mobile/containers/Chat.jsx b/src/mobile/containers/Chat.tsx
similarity index 100%
rename from src/mobile/containers/Chat.jsx
rename to src/mobile/containers/Chat.tsx
diff --git a/src/mobile/containers/DrawerMenu.jsx b/src/mobile/containers/DrawerMenu.tsx
similarity index 92%
rename from src/mobile/containers/DrawerMenu.jsx
rename to src/mobile/containers/DrawerMenu.tsx
index a52b1793b..a5a4f88af 100644
--- a/src/mobile/containers/DrawerMenu.jsx
+++ b/src/mobile/containers/DrawerMenu.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import { useCallback } from 'react';
 import { useSelector, useDispatch } from '../../hooks/useRedux';
 import { toggleOverlay } from '../../reducers/activeOverlay';
 import { drawerIsOpenSelector } from '../selectors/drawerSelectors';
@@ -7,10 +7,6 @@ import { toggleServerList, openPlaylist } from '../actions/OverlayActionCreators
 import DrawerMenu from '../components/DrawerMenu';
 import { useUwave } from '../../context/UwaveContext';
 
-const {
-  useCallback,
-} = React;
-
 function DrawerMenuContainer() {
   const uwave = useUwave();
   const hasAboutPage = !!(uwave && uwave.getAboutPageComponent());
@@ -20,7 +16,7 @@ function DrawerMenuContainer() {
   const onShowServerList = useCallback(() => dispatch(toggleServerList()), [dispatch]);
   const onShowSettings = useCallback(() => dispatch(toggleOverlay('settings')), [dispatch]);
   const onShowPlaylist = useCallback(
-    (playlistID) => dispatch(openPlaylist(playlistID)),
+    (playlistID: string) => dispatch(openPlaylist(playlistID)),
     [dispatch],
   );
   const onDrawerClose = useCallback(() => dispatch(setDrawer(false)), [dispatch]);
diff --git a/src/mobile/containers/LoginButtons.jsx b/src/mobile/containers/LoginButtons.tsx
similarity index 92%
rename from src/mobile/containers/LoginButtons.jsx
rename to src/mobile/containers/LoginButtons.tsx
index bf3f4aca5..be82af08c 100644
--- a/src/mobile/containers/LoginButtons.jsx
+++ b/src/mobile/containers/LoginButtons.tsx
@@ -3,13 +3,13 @@ import Button from '@mui/material/Button';
 import { useDispatch } from '../../hooks/useRedux';
 import { openLoginDialog } from '../../reducers/dialogs';
 
-const wrapperStyle = {
+const wrapperStyle: React.CSSProperties = {
   display: 'flex',
   justifyContent: 'stretch',
   height: '100%',
 };
 
-const buttonStyle = {
+const buttonStyle: React.CSSProperties = {
   height: '100%',
   fontSize: '11pt',
   textTransform: 'uppercase',
diff --git a/src/mobile/containers/MainView.jsx b/src/mobile/containers/MainView.tsx
similarity index 80%
rename from src/mobile/containers/MainView.jsx
rename to src/mobile/containers/MainView.tsx
index 589a6eff3..d27d05de8 100644
--- a/src/mobile/containers/MainView.jsx
+++ b/src/mobile/containers/MainView.tsx
@@ -1,9 +1,8 @@
-import React from 'react';
+import { useCallback } from 'react';
 import { useSelector, useDispatch } from '../../hooks/useRedux';
 import { toggleOverlay } from '../../reducers/activeOverlay';
 import { setVideoEnabled, videoEnabledSelector } from '../../reducers/settings';
-import { playlistsSelector } from '../../reducers/playlists';
-import { mediaSelector, startTimeSelector } from '../../reducers/booth';
+import { mediaSelector } from '../../reducers/booth';
 import {
   sizeSelector as waitlistSizeSelector,
   positionSelector as waitlistPositionSelector,
@@ -11,17 +10,11 @@ import {
 import { openDrawer, openUsersDrawer } from '../actions/DrawerActionCreators';
 import MainView from '../components/MainView';
 
-const {
-  useCallback,
-} = React;
-
 function MainViewContainer() {
   const videoEnabled = useSelector(videoEnabledSelector);
   const media = useSelector(mediaSelector);
-  const startTime = useSelector(startTimeSelector);
   const waitlistPosition = useSelector(waitlistPositionSelector);
   const waitlistSize = useSelector(waitlistSizeSelector);
-  const playlists = useSelector(playlistsSelector);
   const dispatch = useDispatch();
   const onOpenRoomHistory = useCallback(() => dispatch(toggleOverlay('roomHistory')), [dispatch]);
   const onOpenDrawer = useCallback(() => dispatch(openDrawer()), [dispatch]);
@@ -32,10 +25,8 @@ function MainViewContainer() {
     <MainView
       videoEnabled={videoEnabled}
       media={media}
-      startTime={startTime}
       waitlistPosition={waitlistPosition}
       waitlistSize={waitlistSize}
-      playlists={playlists}
       onOpenRoomHistory={onOpenRoomHistory}
       onOpenDrawer={onOpenDrawer}
       onOpenWaitlist={onOpenWaitlist}
diff --git a/src/mobile/containers/PlaylistManager.tsx b/src/mobile/containers/PlaylistManager.tsx
index 94e39c32b..9011bf075 100644
--- a/src/mobile/containers/PlaylistManager.tsx
+++ b/src/mobile/containers/PlaylistManager.tsx
@@ -1,26 +1,22 @@
 import React from 'react';
-import { useDispatch, useSelector } from '../../hooks/useRedux';
+import { useSelector } from '../../hooks/useRedux';
 import createLazyOverlay from '../../components/LazyOverlay';
-import { closeOverlay } from '../../reducers/activeOverlay';
 import {
   selectedPlaylistSelector,
   filteredSelectedPlaylistItemsSelector,
 } from '../../reducers/playlists';
 
-const {
-  useCallback,
-} = React;
-
 const PlaylistManager = createLazyOverlay({
   Component: React.lazy(() => import('../components/PlaylistManager')),
   title: (t) => t('playlists.title'),
 });
 
-function PlaylistManagerContainer() {
+type PlaylistManagerContainerProps = {
+  onCloseOverlay: () => void,
+};
+function PlaylistManagerContainer({ onCloseOverlay }: PlaylistManagerContainerProps) {
   const selectedPlaylist = useSelector(selectedPlaylistSelector);
   const selectedItems = useSelector(filteredSelectedPlaylistItemsSelector);
-  const dispatch = useDispatch();
-  const onCloseOverlay = useCallback(() => dispatch(closeOverlay()), [dispatch]);
 
   // This should not happen as you can only open the playlist manager
   // by selecting a playlist on mobile.
diff --git a/src/mobile/containers/PlaylistPanel.js b/src/mobile/containers/PlaylistPanel.js
deleted file mode 100644
index 417317f94..000000000
--- a/src/mobile/containers/PlaylistPanel.js
+++ /dev/null
@@ -1,56 +0,0 @@
-import { bindActionCreators } from 'redux';
-import { createStructuredSelector } from 'reselect';
-import { connect } from 'react-redux';
-import PlaylistPanel from '../components/PlaylistManager/PlaylistPanel';
-import {
-  loadPlaylist,
-  deletePlaylist,
-  shufflePlaylist,
-  renamePlaylist,
-  activatePlaylist,
-  movePlaylistItems,
-  setPlaylistFilter,
-  selectedPlaylistSelector,
-  filteredSelectedPlaylistItemsSelector,
-  playlistItemFilterSelector,
-} from '../../reducers/playlists';
-
-const mapStateToProps = createStructuredSelector({
-  playlist: selectedPlaylistSelector,
-  media: filteredSelectedPlaylistItemsSelector,
-  filter: playlistItemFilterSelector,
-});
-
-const onMoveMedia = (playlistID) => (media, opts) => (
-  movePlaylistItems({ playlistID, medias: media, target: opts })
-);
-const onLoadPlaylistPage = ({ filter, playlist }) => (
-  (page) => loadPlaylist({ playlistID: playlist._id, page, filter })
-);
-
-// Most of the playlist-related action creators need to know which playlist to
-// use, i.e. need to have a reference to the selected playlist. The selected
-// playlist is picked out in `mapStateToProps`, but we can't access its result
-// in `mapDispatchToProps` yet. Instead, `mapDispatchToProps` passes the
-// `dispatch` function to the `mergeProps` function below, and then that
-// configures the action creators.
-// TODO Maybe it's better to have versions of these action creators that work on
-// the selected playlist by default? using redux-thunk.
-const mapDispatchToProps = (dispatch) => ({ dispatch });
-
-const mergeProps = (state, { dispatch }, props) => ({
-  ...props,
-  ...state,
-  ...bindActionCreators({
-    onShufflePlaylist: shufflePlaylist.bind(null, state.playlist._id),
-    onActivatePlaylist: activatePlaylist.bind(null, state.playlist._id),
-    onRenamePlaylist: (name) => renamePlaylist({ playlistID: state.playlist._id, name }),
-    onDeletePlaylist: deletePlaylist.bind(null, state.playlist._id),
-    onMoveMedia: onMoveMedia(state.playlist._id),
-    onLoadPlaylistPage: onLoadPlaylistPage(state),
-    onFilterPlaylistItems:
-      (filter) => setPlaylistFilter({ playlistID: state.playlist._id, filter }),
-  }, dispatch),
-});
-
-export default connect(mapStateToProps, mapDispatchToProps, mergeProps)(PlaylistPanel);
diff --git a/src/mobile/containers/PlaylistPanel.tsx b/src/mobile/containers/PlaylistPanel.tsx
new file mode 100644
index 000000000..a08bd846a
--- /dev/null
+++ b/src/mobile/containers/PlaylistPanel.tsx
@@ -0,0 +1,14 @@
+import PlaylistPanel from '../components/PlaylistManager/PlaylistPanel';
+import { filteredSelectedPlaylistItemsSelector } from '../../reducers/playlists';
+import { useSelector } from '../../hooks/useRedux';
+
+function PlaylistPanelContainer() {
+  const media = useSelector(filteredSelectedPlaylistItemsSelector);
+
+  const items = media!;
+  return (
+    <PlaylistPanel items={items} />
+  );
+}
+
+export default PlaylistPanelContainer;
diff --git a/src/mobile/containers/RoomHistory.jsx b/src/mobile/containers/RoomHistory.tsx
similarity index 56%
rename from src/mobile/containers/RoomHistory.jsx
rename to src/mobile/containers/RoomHistory.tsx
index b12e7e116..e0e64a59f 100644
--- a/src/mobile/containers/RoomHistory.jsx
+++ b/src/mobile/containers/RoomHistory.tsx
@@ -1,14 +1,18 @@
-import React from 'react';
+import { lazy } from 'react';
 import Overlay from '../../components/Overlay';
 import createLazyOverlay from '../../components/LazyOverlay';
 
-function RoomHistoryOverlay(props) {
+type RoomHistoryOverlayProps = {
+  className?: string,
+  children: React.ReactNode,
+};
+function RoomHistoryOverlay(props: RoomHistoryOverlayProps) {
   return <Overlay {...props} direction="top" />;
 }
 
 const RoomHistory = createLazyOverlay({
-  loader: React.lazy(() => import('../components/RoomHistory')),
   title: (t) => t('history.title'),
+  Component: lazy(() => import('../components/RoomHistory')),
   OverlayComponent: RoomHistoryOverlay,
 });
 
diff --git a/src/mobile/containers/ServerList.jsx b/src/mobile/containers/ServerList.tsx
similarity index 74%
rename from src/mobile/containers/ServerList.jsx
rename to src/mobile/containers/ServerList.tsx
index 05b983aad..3bf00243e 100644
--- a/src/mobile/containers/ServerList.jsx
+++ b/src/mobile/containers/ServerList.tsx
@@ -1,12 +1,13 @@
-import React from 'react';
-import PropTypes from 'prop-types';
 import { useTranslator } from '@u-wave/react-translate';
 import Overlay from '../../components/Overlay';
 import OverlayContent from '../../components/Overlay/Content';
 import OverlayHeader from '../../components/Overlay/Header';
 import ServerList from '../../components/ServerList';
 
-function ServerListContainer({ onCloseOverlay }) {
+type ServerListContainerProps = {
+  onCloseOverlay: () => void,
+};
+function ServerListContainer({ onCloseOverlay }: ServerListContainerProps) {
   const { t } = useTranslator();
 
   return (
@@ -19,8 +20,4 @@ function ServerListContainer({ onCloseOverlay }) {
   );
 }
 
-ServerListContainer.propTypes = {
-  onCloseOverlay: PropTypes.func.isRequired,
-};
-
 export default ServerListContainer;
diff --git a/src/mobile/containers/UsersDrawer.js b/src/mobile/containers/UsersDrawer.js
deleted file mode 100644
index d671de7bf..000000000
--- a/src/mobile/containers/UsersDrawer.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import { createStructuredSelector } from 'reselect';
-import { connect } from 'react-redux';
-import {
-  joinWaitlist,
-  leaveWaitlist,
-  waitlistUsersSelector,
-  userInWaitlistSelector,
-  waitlistIsLockedSelector,
-} from '../../reducers/waitlist';
-import { isLoggedInSelector } from '../../reducers/auth';
-import { djSelector } from '../../reducers/booth';
-import { listenersSelector } from '../selectors/userSelectors';
-import { usersDrawerIsOpenSelector } from '../selectors/drawerSelectors';
-import { setUsersDrawer } from '../actions/DrawerActionCreators';
-import UsersDrawer from '../components/UsersDrawer';
-
-const mapStateToProps = createStructuredSelector({
-  currentDJ: djSelector,
-  users: listenersSelector,
-  waitlist: waitlistUsersSelector,
-  open: usersDrawerIsOpenSelector,
-  userIsLoggedIn: isLoggedInSelector,
-  userInWaitlist: userInWaitlistSelector,
-  isLockedWaitlist: waitlistIsLockedSelector,
-});
-
-const mapDispatchToProps = {
-  onDrawerClose: () => setUsersDrawer(false),
-  onJoinWaitlist: joinWaitlist,
-  onLeaveWaitlist: leaveWaitlist,
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(UsersDrawer);
diff --git a/src/mobile/containers/UsersDrawer.tsx b/src/mobile/containers/UsersDrawer.tsx
new file mode 100644
index 000000000..50c1fd550
--- /dev/null
+++ b/src/mobile/containers/UsersDrawer.tsx
@@ -0,0 +1,47 @@
+import { useCallback } from 'react';
+import {
+  joinWaitlist,
+  waitlistUsersSelector,
+  userInWaitlistSelector,
+  waitlistIsLockedSelector,
+} from '../../reducers/waitlist';
+import { isLoggedInSelector } from '../../reducers/auth';
+import { djSelector } from '../../reducers/booth';
+import { listenersSelector } from '../selectors/userSelectors';
+import { usersDrawerIsOpenSelector } from '../selectors/drawerSelectors';
+import { setUsersDrawer } from '../actions/DrawerActionCreators';
+import UsersDrawer from '../components/UsersDrawer';
+import { useDispatch, useSelector } from '../../hooks/useRedux';
+
+function UsersDrawerContainer() {
+  const currentDJ = useSelector(djSelector);
+  const users = useSelector(listenersSelector);
+  const waitlist = useSelector(waitlistUsersSelector);
+  const open = useSelector(usersDrawerIsOpenSelector);
+  const userIsLoggedIn = useSelector(isLoggedInSelector);
+  const userInWaitlist = useSelector(userInWaitlistSelector);
+  const isLockedWaitlist = useSelector(waitlistIsLockedSelector);
+  const dispatch = useDispatch();
+  const handleDrawerClose = useCallback(() => {
+    dispatch(setUsersDrawer(false));
+  }, [dispatch]);
+  const handleJoinWaitlist = useCallback(() => {
+    return dispatch(joinWaitlist());
+  }, [dispatch]);
+
+  return (
+    <UsersDrawer
+      currentDJ={currentDJ}
+      users={users}
+      waitlist={waitlist}
+      open={open}
+      userIsLoggedIn={userIsLoggedIn}
+      userInWaitlist={userInWaitlist}
+      isLockedWaitlist={isLockedWaitlist}
+      onDrawerClose={handleDrawerClose}
+      onJoinWaitlist={handleJoinWaitlist}
+    />
+  );
+}
+
+export default UsersDrawerContainer;
diff --git a/src/mobile/containers/Video.jsx b/src/mobile/containers/Video.tsx
similarity index 66%
rename from src/mobile/containers/Video.jsx
rename to src/mobile/containers/Video.tsx
index e6773e8fe..bcde13d3a 100644
--- a/src/mobile/containers/Video.jsx
+++ b/src/mobile/containers/Video.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { useSelector, useDispatch } from '../../hooks/useRedux';
 import useClock from '../../hooks/useClock';
 import { openFavoriteMenu } from '../../reducers/addToPlaylistMenu';
-import { mobilePlaybackVolumeSelector } from '../../reducers/settings';
+import { isMutedSelector, mobilePlaybackVolumeSelector } from '../../reducers/settings';
 import {
   upvote,
   downvote,
@@ -17,7 +17,11 @@ const {
   useCallback,
 } = React;
 
-function VideoContainer(props) {
+type VideoContainerProps = {
+  enabled: boolean,
+  size: string,
+};
+function VideoContainer(props: VideoContainerProps) {
   // Update `seek` every tick.
   useClock();
 
@@ -25,25 +29,33 @@ function VideoContainer(props) {
   const media = useSelector(mediaSelector);
   const seek = useSelector((s) => timeElapsedSelector(s));
   const volume = useSelector(mobilePlaybackVolumeSelector);
+  const isMuted = useSelector(isMutedSelector);
   const voteStats = useSelector(currentVoteStatsSelector);
   const dispatch = useDispatch();
   const onUpvote = useCallback(() => {
-    dispatch(upvote({ historyID }));
+    if (historyID != null) {
+      dispatch(upvote({ historyID }));
+    }
   }, [dispatch, historyID]);
   const onDownvote = useCallback(() => {
-    dispatch(downvote({ historyID }));
+    if (historyID != null) {
+      dispatch(downvote({ historyID }));
+    }
   }, [dispatch, historyID]);
-  const onFavorite = useCallback((position) => {
-    dispatch(openFavoriteMenu(historyID, position));
+  const onFavorite = useCallback(() => {
+    if (historyID != null) {
+      // TODO: position is wrong
+      dispatch(openFavoriteMenu(historyID, { x: 0, y: 0 }));
+    }
   }, [historyID, dispatch]);
 
   return (
     <Video
       {...props}
-      historyID={historyID}
       media={media}
       seek={seek}
       volume={volume}
+      isMuted={isMuted}
       voteStats={voteStats}
       onUpvote={onUpvote}
       onDownvote={onDownvote}

From e0a662614bd0d4b0658799a2f1dc058fdebaf032 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ren=C3=A9e=20Kooi?= <renee@kooi.me>
Date: Sun, 29 Sep 2024 11:20:39 +0200
Subject: [PATCH 3/4] Port VideoProgressBar to TypeScript

---
 src/components/Video/VideoProgressBar.jsx | 26 -----------------------
 src/components/Video/VideoProgressBar.tsx | 20 +++++++++++++++++
 2 files changed, 20 insertions(+), 26 deletions(-)
 delete mode 100644 src/components/Video/VideoProgressBar.jsx
 create mode 100644 src/components/Video/VideoProgressBar.tsx

diff --git a/src/components/Video/VideoProgressBar.jsx b/src/components/Video/VideoProgressBar.jsx
deleted file mode 100644
index 3ee9410c8..000000000
--- a/src/components/Video/VideoProgressBar.jsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import LinearProgress from '@mui/material/LinearProgress';
-
-const VideoProgressBar = ({
-  media,
-  seek,
-}) => (
-  <div className="Video-overlay Video-progress">
-    <LinearProgress
-      variant="determinate"
-      color="primary"
-      value={((seek - media.start) / (media.end - media.start)) * 100}
-    />
-  </div>
-);
-
-VideoProgressBar.propTypes = {
-  media: PropTypes.shape({
-    start: PropTypes.number.isRequired,
-    end: PropTypes.number.isRequired,
-  }).isRequired,
-  seek: PropTypes.number.isRequired,
-};
-
-export default VideoProgressBar;
diff --git a/src/components/Video/VideoProgressBar.tsx b/src/components/Video/VideoProgressBar.tsx
new file mode 100644
index 000000000..7de6e5096
--- /dev/null
+++ b/src/components/Video/VideoProgressBar.tsx
@@ -0,0 +1,20 @@
+import LinearProgress from '@mui/material/LinearProgress';
+import type { Media } from '../../reducers/booth';
+
+type VideoProgressBarProps = {
+  media: Media,
+  seek: number,
+};
+function VideoProgressBar({ media, seek }: VideoProgressBarProps) {
+  return (
+    <div className="Video-overlay Video-progress">
+      <LinearProgress
+        variant="determinate"
+        color="primary"
+        value={((seek - media.start) / (media.end - media.start)) * 100}
+      />
+    </div>
+  );
+}
+
+export default VideoProgressBar;

From 6592812a2b491c08bee9723cdc4d91858861ae3a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ren=C3=A9e=20Kooi?= <renee@kooi.me>
Date: Sun, 29 Sep 2024 11:50:15 +0200
Subject: [PATCH 4/4] Port EditMediaDialog to TypeScript

---
 .../{Chapters.jsx => Chapters.tsx}            | 41 ++++-----
 .../EditMediaDialog/{index.jsx => index.tsx}  | 87 +++++++++++--------
 src/hooks/useRoomHistory.ts                   |  4 +-
 src/reducers/auth.ts                          |  2 +-
 src/reducers/booth.ts                         |  2 +-
 src/reducers/playlists.ts                     |  3 +-
 src/redux/socket.ts                           |  3 +-
 src/sources/soundcloud/Player.tsx             |  2 +-
 8 files changed, 81 insertions(+), 63 deletions(-)
 rename src/components/Dialogs/EditMediaDialog/{Chapters.jsx => Chapters.tsx} (69%)
 rename src/components/Dialogs/EditMediaDialog/{index.jsx => index.tsx} (78%)

diff --git a/src/components/Dialogs/EditMediaDialog/Chapters.jsx b/src/components/Dialogs/EditMediaDialog/Chapters.tsx
similarity index 69%
rename from src/components/Dialogs/EditMediaDialog/Chapters.jsx
rename to src/components/Dialogs/EditMediaDialog/Chapters.tsx
index 0b6605ec7..aa1cfbf51 100644
--- a/src/components/Dialogs/EditMediaDialog/Chapters.jsx
+++ b/src/components/Dialogs/EditMediaDialog/Chapters.tsx
@@ -1,23 +1,36 @@
 import clsx from 'clsx';
-import React from 'react';
-import PropTypes from 'prop-types';
 import formatDuration from 'format-duration';
 import { useTranslator } from '@u-wave/react-translate';
 import MenuItem from '@mui/material/MenuItem';
 import Select from '../../Form/Select';
 
+type Chapter = {
+  start: number,
+  end: number,
+  title: string,
+};
+type ChaptersProps = {
+  className?: string,
+  available: Chapter[],
+  start: number,
+  end: number,
+  tabIndex: number,
+  onChange: (value: Chapter) => void,
+};
 function Chapters({
   className,
   available,
   start,
   end,
+  tabIndex,
   onChange,
-  ...props
-}) {
+}: ChaptersProps) {
   const { t } = useTranslator();
-  const handleChange = (event) => {
-    const newIndex = event.target.value;
-    onChange(available[newIndex]);
+  const handleChange = (event: React.FormEvent<{ value: number }>) => {
+    const newIndex = event.currentTarget.value;
+    if (available[newIndex] != null) {
+      onChange(available[newIndex]);
+    }
   };
 
   const selectedIndex = available.findIndex(
@@ -32,7 +45,7 @@ function Chapters({
       }}
       onChange={handleChange}
       value={selectedIndex}
-      {...props}
+      tabIndex={tabIndex}
     >
       <MenuItem disabled value={-1}>
         <span className="Chapters-placeholder">
@@ -53,16 +66,4 @@ function Chapters({
   );
 }
 
-Chapters.propTypes = {
-  className: PropTypes.string,
-  available: PropTypes.arrayOf(PropTypes.shape({
-    start: PropTypes.number.isRequired,
-    end: PropTypes.number.isRequired,
-    title: PropTypes.string.isRequired,
-  })).isRequired,
-  start: PropTypes.number.isRequired,
-  end: PropTypes.number.isRequired,
-  onChange: PropTypes.func.isRequired,
-};
-
 export default Chapters;
diff --git a/src/components/Dialogs/EditMediaDialog/index.jsx b/src/components/Dialogs/EditMediaDialog/index.tsx
similarity index 78%
rename from src/components/Dialogs/EditMediaDialog/index.jsx
rename to src/components/Dialogs/EditMediaDialog/index.tsx
index d1ae7816e..172097b1d 100644
--- a/src/components/Dialogs/EditMediaDialog/index.jsx
+++ b/src/components/Dialogs/EditMediaDialog/index.tsx
@@ -1,6 +1,5 @@
 import cx from 'clsx';
-import React from 'react';
-import PropTypes from 'prop-types';
+import { useCallback, useId, useState } from 'react';
 import { useTranslator } from '@u-wave/react-translate';
 import formatDuration from 'format-duration';
 import Dialog from '@mui/material/Dialog';
@@ -22,20 +21,49 @@ import FormGroup from '../../Form/Group';
 import Button from '../../Form/Button';
 import TextField from '../../Form/TextField';
 import Chapters from './Chapters';
-
-const {
-  useCallback,
-  useId,
-  useState,
-} = React;
+import type { Media } from '../../../reducers/booth';
 
 // naive HH:mm:ss → seconds
-const parseDuration = (str) => str.split(':')
-  .map((part) => parseInt(part.trim(), 10))
-  .reduce((duration, part) => (duration * 60) + part, 0);
+function parseDuration(str: string) {
+  return str.split(':')
+    .map((part) => parseInt(part.trim(), 10))
+    .reduce((duration, part) => (duration * 60) + part, 0);
+}
 
 const BASE_TAB_INDEX = 1000;
 
+type Chapter = {
+  start: number,
+  end: number,
+  title: string,
+};
+
+function hasChapters(
+  sourceData: Record<string, unknown> | null,
+): sourceData is { chapters: Chapter[] } {
+  return sourceData != null
+    && Array.isArray(sourceData.chapters)
+    && sourceData.chapters.every((chapter) => (
+      typeof chapter === 'object'
+        && chapter != null
+        && 'start' in chapter
+        && typeof chapter.start === 'number'
+        && 'end' in chapter
+        && typeof chapter.end === 'number'
+        && 'title' in chapter
+        && typeof chapter.title === 'string'
+    ));
+}
+
+type EditMediaDialogProps = {
+  media: Media,
+  open: boolean,
+  bodyClassName?: string,
+  contentClassName?: string,
+  titleClassName?: string,
+  onEditedMedia: (update: { artist: string, title: string, start: number, end: number }) => void,
+  onCloseDialog: () => void,
+};
 function EditMediaDialog({
   media,
   open,
@@ -44,20 +72,20 @@ function EditMediaDialog({
   titleClassName,
   onEditedMedia,
   onCloseDialog,
-}) {
+}: EditMediaDialogProps) {
   const { t } = useTranslator();
   const id = useId();
   const ariaTitle = `${id}-title`;
   const startFieldId = `${id}-start`;
   const endFieldId = `${id}-end`;
 
-  const [errors, setErrors] = useState(null);
+  const [errors, setErrors] = useState<string[] | null>(null);
   const [artist, setArtist] = useState(media.artist);
   const [title, setTitle] = useState(media.title);
   const [start, setStart] = useState(formatDuration(media.start * 1000));
   const [end, setEnd] = useState(formatDuration(media.end * 1000));
 
-  const handleSubmit = (e) => {
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
     const startSeconds = parseDuration(start);
@@ -89,23 +117,23 @@ function EditMediaDialog({
     onCloseDialog();
   };
 
-  const handleChangeArtist = useCallback((event) => {
-    setArtist(event.target.value);
+  const handleChangeArtist = useCallback((event: React.FormEvent<HTMLInputElement>) => {
+    setArtist(event.currentTarget.value);
   }, []);
 
-  const handleChangeTitle = useCallback((event) => {
-    setTitle(event.target.value);
+  const handleChangeTitle = useCallback((event: React.FormEvent<HTMLInputElement>) => {
+    setTitle(event.currentTarget.value);
   }, []);
 
-  const handleChangeStart = useCallback((event) => {
-    setStart(event.target.value);
+  const handleChangeStart = useCallback((event: React.FormEvent<HTMLInputElement>) => {
+    setStart(event.currentTarget.value);
   }, []);
 
-  const handleChangeEnd = useCallback((event) => {
-    setEnd(event.target.value);
+  const handleChangeEnd = useCallback((event: React.FormEvent<HTMLInputElement>) => {
+    setEnd(event.currentTarget.value);
   }, []);
 
-  const handleChangeChapter = useCallback((chapter) => {
+  const handleChangeChapter = useCallback((chapter: Chapter) => {
     setStart(formatDuration(chapter.start * 1000));
     setEnd(formatDuration(chapter.end * 1000));
   }, []);
@@ -181,8 +209,7 @@ function EditMediaDialog({
     />
   );
 
-  const chapterCount = media.sourceData?.chapters?.length ?? 0;
-  const chapters = chapterCount > 0 ? (
+  const chapters = hasChapters(media.sourceData) && media.sourceData.chapters.length > 0 ? (
     <FormGroup className="FormGroup--noSpacing EditMediaDialog-chapters">
       <p className="EditMediaDialog-chaptersLabel">
         {t('dialogs.editMedia.chapterLabel')}
@@ -270,14 +297,4 @@ function EditMediaDialog({
   );
 }
 
-EditMediaDialog.propTypes = {
-  open: PropTypes.bool,
-  media: PropTypes.object,
-  bodyClassName: PropTypes.string,
-  contentClassName: PropTypes.string,
-  titleClassName: PropTypes.string,
-  onEditedMedia: PropTypes.func.isRequired,
-  onCloseDialog: PropTypes.func.isRequired,
-};
-
 export default EditMediaDialog;
diff --git a/src/hooks/useRoomHistory.ts b/src/hooks/useRoomHistory.ts
index a99ff38f9..a8d6c1a97 100644
--- a/src/hooks/useRoomHistory.ts
+++ b/src/hooks/useRoomHistory.ts
@@ -10,7 +10,7 @@ interface ApiMedia {
   _id: string
   sourceID: string
   sourceType: string
-  sourceData: object
+  sourceData: Record<string, unknown> | null
   artist: string
   title: string
   duration: number
@@ -30,7 +30,7 @@ interface ApiHistoryEntry {
     title: string,
     start: number,
     end: number,
-    sourceData: object,
+    sourceData: Record<string, unknown> | null,
   },
   playedAt: string,
   upvotes: string[],
diff --git a/src/reducers/auth.ts b/src/reducers/auth.ts
index 7a2de7661..49302230d 100644
--- a/src/reducers/auth.ts
+++ b/src/reducers/auth.ts
@@ -13,7 +13,7 @@ interface Media {
     _id: string,
     sourceType: string,
     sourceID: string,
-    sourceData: object,
+    sourceData: Record<string, unknown> | null,
     artist: string,
     title: string,
     duration: number,
diff --git a/src/reducers/booth.ts b/src/reducers/booth.ts
index 680431757..b5a7c0685 100644
--- a/src/reducers/booth.ts
+++ b/src/reducers/booth.ts
@@ -23,7 +23,7 @@ export interface Media {
   _id: string,
   sourceType: string,
   sourceID: string,
-  sourceData: object,
+  sourceData: Record<string, unknown> | null,
   artist: string,
   title: string,
   thumbnail: string,
diff --git a/src/reducers/playlists.ts b/src/reducers/playlists.ts
index 8be935fa2..8482d5bea 100644
--- a/src/reducers/playlists.ts
+++ b/src/reducers/playlists.ts
@@ -2,6 +2,7 @@ import { type PayloadAction, createSelector, createSlice } from '@reduxjs/toolki
 import escapeStringRegExp from 'escape-string-regexp';
 import indexBy from 'just-index';
 import naturalCmp from 'natural-compare';
+import type { JsonObject } from 'type-fest';
 import { createAsyncThunk } from '../redux/api';
 import uwFetch, { type ListResponse } from '../utils/fetch';
 import mergeIncludedModels from '../utils/mergeIncludedModels';
@@ -26,7 +27,7 @@ interface ApiMedia {
   _id: string;
   sourceID: string;
   sourceType: string;
-  sourceData: object;
+  sourceData: JsonObject | null;
   artist: string;
   title: string;
   thumbnail: string;
diff --git a/src/redux/socket.ts b/src/redux/socket.ts
index b9b8d18af..f01ef29fa 100644
--- a/src/redux/socket.ts
+++ b/src/redux/socket.ts
@@ -1,6 +1,5 @@
 import type { AnyAction, Middleware } from 'redux';
 import { createAction } from '@reduxjs/toolkit';
-import type { JsonObject } from 'type-fest';
 import type { AppDispatch } from './configureStore';
 import {
   SOCKET_CONNECT,
@@ -54,7 +53,7 @@ export type SocketMessageParams = {
         title: string,
         thumbnail: string,
         duration: number,
-        sourceData: JsonObject,
+        sourceData: Record<string, unknown> | null,
       },
     },
     playedAt: number,
diff --git a/src/sources/soundcloud/Player.tsx b/src/sources/soundcloud/Player.tsx
index b0141e29a..c7113c2c5 100644
--- a/src/sources/soundcloud/Player.tsx
+++ b/src/sources/soundcloud/Player.tsx
@@ -58,7 +58,7 @@ function SoundCloudPlayer({
   const needsTap = error?.name === 'NotAllowedError';
 
   const audioUrl = useMemo(() => {
-    if ('streamUrl' in media.sourceData && typeof media.sourceData.streamUrl === 'string'
+    if (media.sourceData != null && typeof media.sourceData.streamUrl === 'string'
         && enabled && active) {
       const { streamUrl } = media.sourceData;
       return `${streamUrl}?client_id=${CLIENT_ID}`;