Initial round of typescripting

src/room/PTTButton.tsx

@@ -1,10 +1,22 @@
 import React from "react";
 import classNames from "classnames";
+
 import styles from "./PTTButton.module.css";
 import { ReactComponent as MicIcon } from "../icons/Mic.svg";
 import { Avatar } from "../Avatar";
 
-export function PTTButton({
+interface Props {
+  showTalkOverError: boolean;
+  activeSpeakerUserId: string;
+  activeSpeakerDisplayName: string;
+  activeSpeakerAvatarUrl: string;
+  activeSpeakerIsLocalUser: boolean;
+  size: number;
+  startTalking: () => void;
+  stopTalking: () => void;
+}
+
+export const PTTButton: React.FC<Props> = ({
   showTalkOverError,
   activeSpeakerUserId,
   activeSpeakerDisplayName,
@@ -13,7 +25,7 @@ export function PTTButton({
   size,
   startTalking,
   stopTalking,
-}) {
+}) => {
   return (
     <button
       className={classNames(styles.pttButton, {
@@ -45,4 +57,4 @@ export function PTTButton({
       )}
     </button>
   );
-}
+};

src/room/PTTCallView.tsx

@@ -1,4 +1,7 @@
 import React from "react";
+import useMeasure from "react-use-measure";
+import { ResizeObserver } from "@juggle/resize-observer";
+
 import { useModalTriggerState } from "../Modal";
 import { SettingsModal } from "../settings/SettingsModal";
 import { InviteModal } from "./InviteModal";
@@ -9,8 +12,6 @@ import { Facepile } from "../Facepile";
 import { PTTButton } from "./PTTButton";
 import { PTTFeed } from "./PTTFeed";
 import { useMediaHandler } from "../settings/useMediaHandler";
-import useMeasure from "react-use-measure";
-import { ResizeObserver } from "@juggle/resize-observer";
 import { usePTT } from "./usePTT";
 import { Timer } from "./Timer";
 import { Toggle } from "../input/Toggle";

src/room/usePTT.ts

@@ -1,6 +1,23 @@
 import { useCallback, useEffect, useState } from "react";
+import { MatrixClient } from "matrix-js-sdk/src/client";
+import { GroupCall } from "matrix-js-sdk/src/webrtc/groupCall";
+import { CallFeed } from "matrix-js-sdk/src/webrtc/callFeed";
 
-export function usePTT(client, groupCall, userMediaFeeds) {
+export interface PTTState {
+  pttButtonHeld: boolean;
+  isAdmin: boolean;
+  talkOverEnabled: boolean;
+  setTalkOverEnabled: (boolean) => void;
+  activeSpeakerUserId: string;
+  startTalking: () => void;
+  stopTalking: () => void;
+}
+
+export const usePTT = (
+  client: MatrixClient,
+  groupCall: GroupCall,
+  userMediaFeeds: CallFeed[]
+): PTTState => {
   const [
     { pttButtonHeld, isAdmin, talkOverEnabled, activeSpeakerUserId },
     setState,
@@ -18,7 +35,7 @@ export function usePTT(client, groupCall, userMediaFeeds) {
   });
 
   useEffect(() => {
-    function onMuteStateChanged(...args) {
+    function onMuteStateChanged(...args): void {
       const activeSpeakerFeed = userMediaFeeds.find((f) => !f.isAudioMuted());
 
       setState((prevState) => ({
@@ -66,7 +83,7 @@ export function usePTT(client, groupCall, userMediaFeeds) {
   }, []);
 
   useEffect(() => {
-    function onKeyDown(event) {
+    function onKeyDown(event: KeyboardEvent): void {
       if (event.code === "Space") {
         event.preventDefault();
 
@@ -74,7 +91,7 @@ export function usePTT(client, groupCall, userMediaFeeds) {
       }
     }
 
-    function onKeyUp(event) {
+    function onKeyUp(event: KeyboardEvent): void {
       if (event.code === "Space") {
         event.preventDefault();
 
@@ -82,7 +99,7 @@ export function usePTT(client, groupCall, userMediaFeeds) {
       }
     }
 
-    function onBlur() {
+    function onBlur(): void {
       // TODO: We will need to disable this for a global PTT hotkey to work
       if (!groupCall.isMicrophoneMuted()) {
         groupCall.setMicrophoneMuted(true);
@@ -118,4 +135,4 @@ export function usePTT(client, groupCall, userMediaFeeds) {
     startTalking,
     stopTalking,
   };
-}
+};