Enable strict lints

An attempt to fix https://github.com/vector-im/element-call/issues/1132
2023-06-30 16:43:28 +01:00
parent d86d3de95e
commit 0105162ffa
68 changed files with 970 additions and 724 deletions
--- a/src/room/GridLayoutMenu.tsx
+++ b/src/room/GridLayoutMenu.tsx
@@ -46,7 +46,12 @@ export function GridLayoutMenu({ layout, setLayout }: Props) {
        </Button>
      </TooltipTrigger>
      {(props: JSX.IntrinsicAttributes) => (
-        <Menu {...props} label={t("Grid layout menu")} onAction={setLayout}>
+        <Menu
+          {...props}
+          label={t("Grid layout menu")}
+          onAction={(key) => setLayout(key.toString() as Layout)}
+          onClose={() => {}}
+        >
          <Item key="freedom" textValue={t("Freedom")}>
            <FreedomIcon />
            <span>Freedom</span>
--- a/src/room/GroupCallInspector.tsx
+++ b/src/room/GroupCallInspector.tsx
@@ -1,3 +1,6 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+
 /*
 Copyright 2022 New Vector Ltd

@@ -70,7 +73,7 @@ const defaultCollapsedFields = [
 ];

 function shouldCollapse({ name }: CollapsedFieldProps) {
-  return defaultCollapsedFields.includes(name);
+  return name ? defaultCollapsedFields.includes(name) : false;
 }

 function getUserName(userId: string) {
@@ -196,7 +199,7 @@ export function SequenceDiagramViewer({
  onSelectUserId,
  events,
 }: SequenceDiagramViewerProps) {
-  const mermaidElRef = useRef<HTMLDivElement>();
+  const mermaidElRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    mermaid.initialize({
@@ -217,6 +220,7 @@ export function SequenceDiagramViewer({
    `;

    mermaid.mermaidAPI.render("mermaid", graphDefinition, (svgCode: string) => {
+      if (!mermaidElRef.current) return;
      mermaidElRef.current.innerHTML = svgCode;
    });
  }, [events, localUserId, selectedUserId]);
@@ -228,7 +232,7 @@ export function SequenceDiagramViewer({
          className={styles.selectInput}
          label="Remote User"
          selectedKey={selectedUserId}
-          onSelectionChange={onSelectUserId}
+          onSelectionChange={(key) => onSelectUserId(key.toString())}
        >
          {remoteUserIds.map((userId) => (
            <Item key={userId}>{userId}</Item>
@@ -498,7 +502,7 @@ export function GroupCallInspector({
  return (
    <Resizable
      enable={{ top: true }}
-      defaultSize={{ height: 200, width: undefined }}
+      defaultSize={{ height: 200, width: 0 }}
      className={styles.inspector}
    >
      <div className={styles.toolbar}>
@@ -507,15 +511,19 @@ export function GroupCallInspector({
        </button>
        <button onClick={() => setCurrentTab("inspector")}>Inspector</button>
      </div>
-      {currentTab === "sequence-diagrams" && (
-        <SequenceDiagramViewer
-          localUserId={state.localUserId}
-          selectedUserId={selectedUserId}
-          onSelectUserId={setSelectedUserId}
-          remoteUserIds={state.remoteUserIds}
-          events={state.eventsByUserId[selectedUserId]}
-        />
-      )}
+      {currentTab === "sequence-diagrams" &&
+        state.localUserId &&
+        selectedUserId &&
+        state.eventsByUserId &&
+        state.remoteUserIds && (
+          <SequenceDiagramViewer
+            localUserId={state.localUserId}
+            selectedUserId={selectedUserId}
+            onSelectUserId={setSelectedUserId}
+            remoteUserIds={state.remoteUserIds}
+            events={state.eventsByUserId[selectedUserId]}
+          />
+        )}
      {currentTab === "inspector" && (
        <ReactJson
          theme="monokai"
--- a/src/room/GroupCallLoader.tsx
+++ b/src/room/GroupCallLoader.tsx
@@ -60,5 +60,5 @@ export function GroupCallLoader({
    return <ErrorView error={error} />;
  }

-  return <>{children(groupCall)}</>;
+  return groupCall ? <>{children(groupCall)}</> : <></>;
 }
--- a/src/room/GroupCallView.tsx
+++ b/src/room/GroupCallView.tsx
@@ -85,8 +85,8 @@ export function GroupCallView({
  const { displayName, avatarUrl } = useProfile(client);

  const matrixInfo: MatrixInfo = {
-    displayName,
-    avatarUrl,
+    displayName: displayName!,
+    avatarUrl: avatarUrl!,
    roomName: groupCall.room.name,
    roomIdOrAlias,
  };
@@ -140,14 +140,14 @@ export function GroupCallView({
        PosthogAnalytics.instance.eventCallStarted.track(groupCall.groupCallId);

        await Promise.all([
-          widget.api.setAlwaysOnScreen(true),
-          widget.api.transport.reply(ev.detail, {}),
+          widget?.api.setAlwaysOnScreen(true),
+          widget?.api.transport.reply(ev.detail, {}),
        ]);
      };

      widget.lazyActions.on(ElementWidgetActions.JoinCall, onJoin);
      return () => {
-        widget.lazyActions.off(ElementWidgetActions.JoinCall, onJoin);
+        widget?.lazyActions.off(ElementWidgetActions.JoinCall, onJoin);
      };
    }
  }, [groupCall, preload, enter]);
@@ -206,12 +206,12 @@ export function GroupCallView({
    if (widget && state === GroupCallState.Entered) {
      const onHangup = async (ev: CustomEvent<IWidgetApiRequest>) => {
        leave();
-        await widget.api.transport.reply(ev.detail, {});
-        widget.api.setAlwaysOnScreen(false);
+        await widget?.api.transport.reply(ev.detail, {});
+        widget?.api.setAlwaysOnScreen(false);
      };
      widget.lazyActions.once(ElementWidgetActions.HangupCall, onHangup);
      return () => {
-        widget.lazyActions.off(ElementWidgetActions.HangupCall, onHangup);
+        widget?.lazyActions.off(ElementWidgetActions.HangupCall, onHangup);
      };
    }
  }, [groupCall, state, leave]);
@@ -222,7 +222,7 @@ export function GroupCallView({

  const livekitServiceURL =
    groupCall.foci[0]?.livekitServiceUrl ??
-    Config.get().livekit.livekit_service_url;
+    Config.get().livekit?.livekit_service_url;
  if (!livekitServiceURL) {
    return <ErrorView error={new Error("No livekit_service_url defined")} />;
  }
--- a/src/room/InCallView.tsx
+++ b/src/room/InCallView.tsx
@@ -71,14 +71,13 @@ import styles from "./InCallView.module.css";
 import { MatrixInfo } from "./VideoPreview";
 import { useJoinRule } from "./useJoinRule";
 import { ParticipantInfo } from "./useGroupCall";
-import { ItemData, TileContent } from "../video-grid/VideoTile";
+import { ItemData, TileContent, VideoTile } from "../video-grid/VideoTile";
 import { NewVideoGrid } from "../video-grid/NewVideoGrid";
 import { OTelGroupCallMembership } from "../otel/OTelGroupCallMembership";
 import { SettingsModal } from "../settings/SettingsModal";
 import { InviteModal } from "./InviteModal";
 import { useRageshakeRequestModal } from "../settings/submit-rageshake";
 import { RageshakeRequestModal } from "./RageshakeRequestModal";
-import { VideoTile } from "../video-grid/VideoTile";
 import { UserChoices, useLiveKit } from "../livekit/useLiveKit";
 import { useMediaDevicesSwitcher } from "../livekit/useMediaDevicesSwitcher";
 import { useFullscreen } from "./useFullscreen";
@@ -100,12 +99,14 @@ export function ActiveCall(props: ActiveCallProps) {
  const sfuConfig = useSFUConfig();
  const livekitRoom = useLiveKit(props.userChoices, sfuConfig);

+  if (!livekitRoom) {
+    return null;
+  }
+
  return (
-    livekitRoom && (
-      <RoomContext.Provider value={livekitRoom}>
-        <InCallView {...props} livekitRoom={livekitRoom} />
-      </RoomContext.Provider>
-    )
+    <RoomContext.Provider value={livekitRoom}>
+      <InCallView {...props} livekitRoom={livekitRoom} />
+    </RoomContext.Provider>
  );
 }

@@ -118,7 +119,7 @@ export interface InCallViewProps {
  unencryptedEventsFromUsers: Set<string>;
  hideHeader: boolean;
  matrixInfo: MatrixInfo;
-  otelGroupCallMembership: OTelGroupCallMembership;
+  otelGroupCallMembership?: OTelGroupCallMembership;
 }

 export function InCallView({
@@ -203,11 +204,11 @@ export function InCallView({
    if (widget) {
      const onTileLayout = async (ev: CustomEvent<IWidgetApiRequest>) => {
        setLayout("freedom");
-        await widget.api.transport.reply(ev.detail, {});
+        await widget?.api.transport.reply(ev.detail, {});
      };
      const onSpotlightLayout = async (ev: CustomEvent<IWidgetApiRequest>) => {
        setLayout("spotlight");
-        await widget.api.transport.reply(ev.detail, {});
+        await widget?.api.transport.reply(ev.detail, {});
      };

      widget.lazyActions.on(ElementWidgetActions.TileLayout, onTileLayout);
@@ -217,8 +218,8 @@ export function InCallView({
      );

      return () => {
-        widget.lazyActions.off(ElementWidgetActions.TileLayout, onTileLayout);
-        widget.lazyActions.off(
+        widget?.lazyActions.off(ElementWidgetActions.TileLayout, onTileLayout);
+        widget?.lazyActions.off(
          ElementWidgetActions.SpotlightLayout,
          onSpotlightLayout
        );
@@ -416,12 +417,14 @@ export function InCallView({
        {renderContent()}
        {footer}
      </div>
-      <GroupCallInspector
-        client={client}
-        groupCall={groupCall}
-        otelGroupCallMembership={otelGroupCallMembership}
-        show={showInspector}
-      />
+      {otelGroupCallMembership && (
+        <GroupCallInspector
+          client={client}
+          groupCall={groupCall}
+          otelGroupCallMembership={otelGroupCallMembership}
+          show={showInspector}
+        />
+      )}
      {rageshakeRequestModalState.isOpen && !noControls && (
        <RageshakeRequestModal
          {...rageshakeRequestModalProps}
--- a/src/room/LobbyView.tsx
+++ b/src/room/LobbyView.tsx
@@ -39,7 +39,7 @@ export function LobbyView(props: Props) {
  const { t } = useTranslation();
  useLocationNavigation();

-  const joinCallButtonRef = useRef<HTMLButtonElement>();
+  const joinCallButtonRef = useRef<HTMLButtonElement>(null);
  useEffect(() => {
    if (joinCallButtonRef.current) {
      joinCallButtonRef.current.focus();
--- a/src/room/RoomAuthView.tsx
+++ b/src/room/RoomAuthView.tsx
@@ -36,6 +36,8 @@ export function RoomAuthView() {
    useRegisterPasswordlessUser();

  const onSubmit = useCallback(
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
    (e) => {
      e.preventDefault();
      const data = new FormData(e.target);
--- a/src/room/RoomPage.tsx
+++ b/src/room/RoomPage.tsx
@@ -18,7 +18,7 @@ import { FC, useEffect, useState, useCallback } from "react";
 import { useTranslation } from "react-i18next";

 import type { GroupCall } from "matrix-js-sdk/src/webrtc/groupCall";
-import { useClient } from "../ClientContext";
+import { useClientLegacy } from "../ClientContext";
 import { ErrorView, LoadingView } from "../FullScreenView";
 import { RoomAuthView } from "./RoomAuthView";
 import { GroupCallLoader } from "./GroupCallLoader";
@@ -30,8 +30,6 @@ import { useOptInAnalytics } from "../settings/useSetting";

 export const RoomPage: FC = () => {
  const { t } = useTranslation();
-  const { loading, isAuthenticated, error, client, isPasswordlessUser } =
-    useClient();

  const {
    roomAlias,
@@ -52,39 +50,42 @@ export const RoomPage: FC = () => {

  useEffect(() => {
    // During the beta, opt into analytics by default
-    if (optInAnalytics === null) setOptInAnalytics(true);
+    if (optInAnalytics === null && setOptInAnalytics) setOptInAnalytics(true);
  }, [optInAnalytics, setOptInAnalytics]);

+  const { loading, authenticated, client, error, passwordlessUser } =
+    useClientLegacy();
+
  useEffect(() => {
    // If we've finished loading, are not already authed and we've been given a display name as
    // a URL param, automatically register a passwordless user
-    if (!loading && !isAuthenticated && displayName) {
+    if (!loading && !authenticated && displayName) {
      setIsRegistering(true);
      registerPasswordlessUser(displayName).finally(() => {
        setIsRegistering(false);
      });
    }
  }, [
-    isAuthenticated,
+    loading,
+    authenticated,
    displayName,
    setIsRegistering,
    registerPasswordlessUser,
-    loading,
  ]);

  const groupCallView = useCallback(
    (groupCall: GroupCall) => (
      <GroupCallView
-        client={client}
+        client={client!}
        roomIdOrAlias={roomIdOrAlias}
        groupCall={groupCall}
-        isPasswordlessUser={isPasswordlessUser}
+        isPasswordlessUser={passwordlessUser}
        isEmbedded={isEmbedded}
        preload={preload}
        hideHeader={hideHeader}
      />
    ),
-    [client, roomIdOrAlias, isPasswordlessUser, isEmbedded, preload, hideHeader]
+    [client, roomIdOrAlias, passwordlessUser, isEmbedded, preload, hideHeader]
  );

  if (loading || isRegistering) {
@@ -95,7 +96,7 @@ export const RoomPage: FC = () => {
    return <ErrorView error={error} />;
  }

-  if (!isAuthenticated) {
+  if (!client) {
    return <RoomAuthView />;
  }

--- a/src/room/VideoPreview.tsx
+++ b/src/room/VideoPreview.tsx
@@ -209,7 +209,7 @@ export function VideoPreview({ matrixInfo, onUserChoicesChanged }: Props) {
          <SettingsButton onPress={openSettings} />
        </div>
      </>
-      {settingsModalState.isOpen && (
+      {settingsModalState.isOpen && client && (
        <SettingsModal
          client={client}
          mediaDevicesSwitcher={mediaSwitcher}
--- a/src/room/useGroupCall.ts
+++ b/src/room/useGroupCall.ts
@@ -58,12 +58,12 @@ export interface ParticipantInfo {

 interface UseGroupCallReturnType {
  state: GroupCallState;
-  localCallFeed: CallFeed;
-  activeSpeaker: CallFeed | null;
+  localCallFeed?: CallFeed;
+  activeSpeaker?: CallFeed;
  userMediaFeeds: CallFeed[];
  microphoneMuted: boolean;
  localVideoMuted: boolean;
-  error: TranslatedError | null;
+  error?: TranslatedError;
  initLocalCallFeed: () => void;
  enter: () => Promise<void>;
  leave: () => void;
@@ -74,23 +74,21 @@ interface UseGroupCallReturnType {
  requestingScreenshare: boolean;
  isScreensharing: boolean;
  screenshareFeeds: CallFeed[];
-  localDesktopCapturerSourceId: string; // XXX: This looks unused?
  participants: Map<RoomMember, Map<string, ParticipantInfo>>;
  hasLocalParticipant: boolean;
  unencryptedEventsFromUsers: Set<string>;
-  otelGroupCallMembership: OTelGroupCallMembership;
+  otelGroupCallMembership?: OTelGroupCallMembership;
 }

 interface State {
  state: GroupCallState;
-  localCallFeed: CallFeed;
-  activeSpeaker: CallFeed | null;
+  localCallFeed?: CallFeed;
+  activeSpeaker?: CallFeed;
  userMediaFeeds: CallFeed[];
-  error: TranslatedError | null;
+  error?: TranslatedError;
  microphoneMuted: boolean;
  localVideoMuted: boolean;
  screenshareFeeds: CallFeed[];
-  localDesktopCapturerSourceId: string;
  isScreensharing: boolean;
  requestingScreenshare: boolean;
  participants: Map<RoomMember, Map<string, ParticipantInfo>>;
@@ -101,7 +99,7 @@ interface State {
 // level so that it doesn't pop in & out of existence as react mounts & unmounts
 // components. The right solution is probably for this to live in the js-sdk and have
 // the same lifetime as groupcalls themselves.
-let groupCallOTelMembership: OTelGroupCallMembership;
+let groupCallOTelMembership: OTelGroupCallMembership | undefined;
 let groupCallOTelMembershipGroupCallId: string;

 function getParticipants(
@@ -159,7 +157,6 @@ export function useGroupCall(
      localVideoMuted,
      isScreensharing,
      screenshareFeeds,
-      localDesktopCapturerSourceId,
      participants,
      hasLocalParticipant,
      requestingScreenshare,
@@ -167,15 +164,11 @@ export function useGroupCall(
    setState,
  ] = useState<State>({
    state: GroupCallState.LocalCallFeedUninitialized,
-    localCallFeed: null,
-    activeSpeaker: null,
    userMediaFeeds: [],
-    error: null,
    microphoneMuted: false,
    localVideoMuted: false,
    isScreensharing: false,
    screenshareFeeds: [],
-    localDesktopCapturerSourceId: null,
    requestingScreenshare: false,
    participants: new Map(),
    hasLocalParticipant: false,
@@ -248,12 +241,11 @@ export function useGroupCall(
      updateState({
        state: groupCall.state,
        localCallFeed: groupCall.localCallFeed,
-        activeSpeaker: groupCall.activeSpeaker ?? null,
+        activeSpeaker: groupCall.activeSpeaker,
        userMediaFeeds: [...groupCall.userMediaFeeds],
        microphoneMuted: groupCall.isMicrophoneMuted(),
        localVideoMuted: groupCall.isLocalVideoMuted(),
        isScreensharing: groupCall.isScreensharing(),
-        localDesktopCapturerSourceId: groupCall.localDesktopCapturerSourceId,
        screenshareFeeds: [...groupCall.screenshareFeeds],
      });
    }
@@ -303,7 +295,7 @@ export function useGroupCall(

    function onActiveSpeakerChanged(activeSpeaker: CallFeed | undefined): void {
      updateState({
-        activeSpeaker: activeSpeaker ?? null,
+        activeSpeaker: activeSpeaker,
      });
    }

@@ -319,12 +311,11 @@ export function useGroupCall(

    function onLocalScreenshareStateChanged(
      isScreensharing: boolean,
-      _localScreenshareFeed: CallFeed,
-      localDesktopCapturerSourceId: string
+      _localScreenshareFeed?: CallFeed,
+      localDesktopCapturerSourceId?: string
    ): void {
      updateState({
        isScreensharing,
-        localDesktopCapturerSourceId,
      });
    }

@@ -405,15 +396,14 @@ export function useGroupCall(
    );

    updateState({
-      error: null,
+      error: undefined,
      state: groupCall.state,
      localCallFeed: groupCall.localCallFeed,
-      activeSpeaker: groupCall.activeSpeaker ?? null,
+      activeSpeaker: groupCall.activeSpeaker,
      userMediaFeeds: [...groupCall.userMediaFeeds],
      microphoneMuted: groupCall.isMicrophoneMuted(),
      localVideoMuted: groupCall.isLocalVideoMuted(),
      isScreensharing: groupCall.isScreensharing(),
-      localDesktopCapturerSourceId: groupCall.localDesktopCapturerSourceId,
      screenshareFeeds: [...groupCall.screenshareFeeds],
      participants: getParticipants(groupCall),
      hasLocalParticipant: groupCall.hasLocalParticipant(),
@@ -516,7 +506,7 @@ export function useGroupCall(
  }, [groupCall]);

  const setMicrophoneMuted = useCallback(
-    (setMuted) => {
+    (setMuted: boolean) => {
      groupCall.setMicrophoneMuted(setMuted);
      groupCallOTelMembership?.onSetMicrophoneMuted(setMuted);
      PosthogAnalytics.instance.eventMuteMicrophone.track(
@@ -575,7 +565,7 @@ export function useGroupCall(
        desktopCapturerSourceId: data.desktopCapturerSourceId as string,
        audio: !data.desktopCapturerSourceId,
      });
-      await widget.api.transport.reply(ev.detail, {});
+      await widget?.api.transport.reply(ev.detail, {});
    },
    [groupCall, updateState]
  );
@@ -584,7 +574,7 @@ export function useGroupCall(
    async (ev: CustomEvent<IWidgetApiRequest>) => {
      updateState({ requestingScreenshare: false });
      await groupCall.setScreensharingEnabled(false);
-      await widget.api.transport.reply(ev.detail, {});
+      await widget?.api.transport.reply(ev.detail, {});
    },
    [groupCall, updateState]
  );
@@ -601,11 +591,11 @@ export function useGroupCall(
      );

      return () => {
-        widget.lazyActions.off(
+        widget?.lazyActions.off(
          ElementWidgetActions.ScreenshareStart,
          onScreenshareStart
        );
-        widget.lazyActions.off(
+        widget?.lazyActions.off(
          ElementWidgetActions.ScreenshareStop,
          onScreenshareStop
        );
@@ -644,7 +634,6 @@ export function useGroupCall(
    requestingScreenshare,
    isScreensharing,
    screenshareFeeds,
-    localDesktopCapturerSourceId,
    participants,
    hasLocalParticipant,
    unencryptedEventsFromUsers,
--- a/src/room/useLoadGroupCall.ts
+++ b/src/room/useLoadGroupCall.ts
@@ -74,8 +74,14 @@ export const useLoadGroupCall = (
      } catch (error) {
        if (
          isLocalRoomId(roomIdOrAlias, client) &&
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore
          (error.errcode === "M_NOT_FOUND" ||
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
            (error.message &&
+              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+              // @ts-ignore
              error.message.indexOf("Failed to fetch alias") !== -1))
        ) {
          // The room doesn't exist, but we can create it
@@ -86,7 +92,7 @@ export const useLoadGroupCall = (
          );
          // likewise, wait for the room
          await client.waitUntilRoomReadyForGroupCalls(roomId);
-          return client.getRoom(roomId);
+          return client.getRoom(roomId)!;
        } else {
          throw error;
        }
--- a/src/room/usePageUnload.ts
+++ b/src/room/usePageUnload.ts
@@ -55,14 +55,22 @@ export function usePageUnload(callback: () => void) {
    // iOS doesn't fire beforeunload event, so leave the call when you hide the page.
    if (isIOS()) {
      window.addEventListener("pagehide", onBeforeUnload);
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
      document.addEventListener("visibilitychange", onBeforeUnload);
    }

+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
    window.addEventListener("beforeunload", onBeforeUnload);

    return () => {
      window.removeEventListener("pagehide", onBeforeUnload);
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
      document.removeEventListener("visibilitychange", onBeforeUnload);
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
      window.removeEventListener("beforeunload", onBeforeUnload);
      clearTimeout(pageVisibilityTimeout);
    };