diff --git a/src/components/views/voip/CallPreview.tsx b/src/components/views/voip/CallPreview.tsx
index 565e4657b9..0607215e0c 100644
--- a/src/components/views/voip/CallPreview.tsx
+++ b/src/components/views/voip/CallPreview.tsx
@@ -144,8 +144,8 @@ export default class CallPreview extends React.Component<IProps, IState> {
 
     private onAction = (payload: ActionPayload) => {
         switch (payload.action) {
-            // listen for call state changes to prod the render method, which
-            // may hide the global CallView if the call it is tracking is dead
+        // listen for call state changes to prod the render method, which
+        // may hide the global CallView if the call it is tracking is dead
             case 'call_state': {
                 this.updateCalls();
                 break;
diff --git a/src/components/views/voip/CallView.tsx b/src/components/views/voip/CallView.tsx
index 084efa66d1..c7297afb95 100644
--- a/src/components/views/voip/CallView.tsx
+++ b/src/components/views/voip/CallView.tsx
@@ -40,23 +40,23 @@ import CallViewSidebar from './CallViewSidebar';
 import { CallViewHeader } from './CallView/CallViewHeader';
 
 interface IProps {
-        // The call for us to display
-        call: MatrixCall;
+    // The call for us to display
+    call: MatrixCall;
 
-        // Another ongoing call to display information about
-        secondaryCall?: MatrixCall;
+    // Another ongoing call to display information about
+    secondaryCall?: MatrixCall;
 
-        // a callback which is called when the content in the CallView changes
-        // in a way that is likely to cause a resize.
-        onResize?: any;
+    // a callback which is called when the content in the CallView changes
+    // in a way that is likely to cause a resize.
+    onResize?: any;
 
-        // Whether this call view is for picture-in-picture mode
-        // otherwise, it's the larger call view when viewing the room the call is in.
-        // This is sort of a proxy for a number of things but we currently have no
-        // need to control those things separately, so this is simpler.
-        pipMode?: boolean;
+    // Whether this call view is for picture-in-picture mode
+    // otherwise, it's the larger call view when viewing the room the call is in.
+    // This is sort of a proxy for a number of things but we currently have no
+    // need to control those things separately, so this is simpler.
+    pipMode?: boolean;
 
-        // Used for dragging the PiP CallView
+    // Used for dragging the PiP CallView
     onMouseDownOnHeader?: (event: React.MouseEvent<Element, MouseEvent>) => void;
 }
 
diff --git a/src/components/views/voip/CallView/CallViewHeader.tsx b/src/components/views/voip/CallView/CallViewHeader.tsx
index e5ee6bff96..4650e65853 100644
--- a/src/components/views/voip/CallView/CallViewHeader.tsx
+++ b/src/components/views/voip/CallView/CallViewHeader.tsx
@@ -26,37 +26,37 @@ import { IApp } from '../../../../stores/WidgetStore';
 import WidgetUtils from '../../../../utils/WidgetUtils';
 
 const callTypeTranslationByType: Record<CallType | 'widget', (app?: IApp) => string> = {
-  [CallType.Video]: () => _t("Video Call"),
-  [CallType.Voice]: () => _t("Voice Call"),
-  'widget': (app: IApp) => WidgetUtils.getWidgetName(app),
+    [CallType.Video]: () => _t("Video Call"),
+    [CallType.Voice]: () => _t("Voice Call"),
+    'widget': (app: IApp) => WidgetUtils.getWidgetName(app),
 };
 
 interface CallViewHeaderProps {
-  pipMode: boolean;
-  type: CallType | 'widget';
-  callRooms?: Room[];
-  app?: IApp;
-  onPipMouseDown: (event: React.MouseEvent<Element, MouseEvent>) => void;
+    pipMode: boolean;
+    type: CallType | 'widget';
+    callRooms?: Room[];
+    app?: IApp;
+    onPipMouseDown: (event: React.MouseEvent<Element, MouseEvent>) => void;
 }
 
 const onRoomAvatarClick = (roomId: string) => {
     dis.dispatch({
-    action: 'view_room',
-    room_id: roomId,
+        action: 'view_room',
+        room_id: roomId,
     });
 };
 
 const onFullscreenClick = () => {
     dis.dispatch({
-    action: 'video_fullscreen',
-    fullscreen: true,
+        action: 'video_fullscreen',
+        fullscreen: true,
     });
 };
 
 const onExpandClick = (roomId: string) => {
     dis.dispatch({
-    action: 'view_room',
-    room_id: roomId,
+        action: 'view_room',
+        room_id: roomId,
     });
 };
 
@@ -97,12 +97,12 @@ function getAvatarBasedOnRoomType(roomOrWidget: Room | IApp) {
 }
 
 export const CallViewHeader: React.FC<CallViewHeaderProps> = ({
-  type,
-  pipMode = false,
-  callRooms = [],
-  app,
-  onPipMouseDown,
-}) {
+    type,
+    pipMode = false,
+    callRooms = [],
+    app,
+    onPipMouseDown,
+}) => {
     const [callRoom, onHoldCallRoom] = callRooms;
     const callTypeText = callTypeTranslationByType[type](app);
     const avatar = getAvatarBasedOnRoomType(callRoom ?? app);
@@ -132,4 +132,4 @@ export const CallViewHeader: React.FC<CallViewHeaderProps> = ({
         <CallControls roomId={roomId} pipMode={pipMode} type={type} />
     </div>
     );
-}
+};
diff --git a/src/components/views/voip/PictureInPictureDragger.tsx b/src/components/views/voip/PictureInPictureDragger.tsx
index 9445ee68b6..1ef7867992 100644
--- a/src/components/views/voip/PictureInPictureDragger.tsx
+++ b/src/components/views/voip/PictureInPictureDragger.tsx
@@ -27,23 +27,23 @@ const MOVING_AMT = 0.2;
 const SNAPPING_AMT = 0.05;
 
 const PADDING = {
-  top: 58,
-  bottom: 58,
-  left: 76,
-  right: 8,
+    top: 58,
+    bottom: 58,
+    left: 76,
+    right: 8,
 };
 
 interface IProps {
-  className?: string;
+    className?: string;
     children: (startMovingEventHandler: (event: React.MouseEvent<Element, MouseEvent>) => void) => React.ReactNode;
-  draggable: boolean;
-  app?: IApp;
+    draggable: boolean;
+    app?: IApp;
 }
 
 interface IState {
-  // Position of the PictureInPictureDragger
-  translationX: number;
-  translationY: number;
+    // Position of the PictureInPictureDragger
+    translationX: number;
+    translationY: number;
 }
 
 /**
@@ -52,157 +52,157 @@ interface IState {
  */
 @replaceableComponent("views.voip.PictureInPictureDragger")
 export class PictureInPictureDragger extends React.Component<IProps, IState> {
-  private callViewWrapper = createRef<HTMLDivElement>();
-  private initX = 0;
-  private initY = 0;
-  private desiredTranslationX = UIStore.instance.windowWidth - PADDING.right - PIP_VIEW_WIDTH;
-  private desiredTranslationY = UIStore.instance.windowHeight - PADDING.bottom - PIP_VIEW_WIDTH;
-  private moving = false;
-  private scheduledUpdate = new MarkedExecution(
-      () => this.animationCallback(),
-      () => requestAnimationFrame(() => this.scheduledUpdate.trigger()),
-  );
+    private callViewWrapper = createRef<HTMLDivElement>();
+    private initX = 0;
+    private initY = 0;
+    private desiredTranslationX = UIStore.instance.windowWidth - PADDING.right - PIP_VIEW_WIDTH;
+    private desiredTranslationY = UIStore.instance.windowHeight - PADDING.bottom - PIP_VIEW_WIDTH;
+    private moving = false;
+    private scheduledUpdate = new MarkedExecution(
+        () => this.animationCallback(),
+        () => requestAnimationFrame(() => this.scheduledUpdate.trigger()),
+    );
 
-  constructor(props: IProps) {
-      super(props);
+    constructor(props: IProps) {
+        super(props);
 
-      this.state = {
-        translationX: UIStore.instance.windowWidth - PADDING.right - PIP_VIEW_WIDTH,
-        translationY: UIStore.instance.windowHeight - PADDING.bottom - PIP_VIEW_WIDTH,
-      };
-  }
+        this.state = {
+          translationX: UIStore.instance.windowWidth - PADDING.right - PIP_VIEW_WIDTH,
+          translationY: UIStore.instance.windowHeight - PADDING.bottom - PIP_VIEW_WIDTH,
+        };
+    }
 
-  public componentDidMount() {
-      document.addEventListener("mousemove", this.onMoving);
-      document.addEventListener("mouseup", this.onEndMoving);
-      window.addEventListener("resize", this.snap);
-  }
+    public componentDidMount() {
+        document.addEventListener("mousemove", this.onMoving);
+        document.addEventListener("mouseup", this.onEndMoving);
+        window.addEventListener("resize", this.snap);
+    }
 
-  public componentWillUnmount() {
-      document.removeEventListener("mousemove", this.onMoving);
-      document.removeEventListener("mouseup", this.onEndMoving);
-      window.removeEventListener("resize", this.snap);
-  }
+    public componentWillUnmount() {
+        document.removeEventListener("mousemove", this.onMoving);
+        document.removeEventListener("mouseup", this.onEndMoving);
+        window.removeEventListener("resize", this.snap);
+    }
 
-  private animationCallback = () => {
-      // If the PiP isn't being dragged and there is only a tiny difference in
-      // the desiredTranslation and translation, quit the animationCallback
-      // loop. If that is the case, it means the PiP has snapped into its
-      // position and there is nothing to do. Not doing this would cause an
-      // infinite loop
-      if (
-          !this.moving &&
+    private animationCallback = () => {
+        // If the PiP isn't being dragged and there is only a tiny difference in
+        // the desiredTranslation and translation, quit the animationCallback
+        // loop. If that is the case, it means the PiP has snapped into its
+        // position and there is nothing to do. Not doing this would cause an
+        // infinite loop
+        if (
+            !this.moving &&
       Math.abs(this.state.translationX - this.desiredTranslationX) <= 1 &&
       Math.abs(this.state.translationY - this.desiredTranslationY) <= 1
-      ) return;
+        ) return;
 
-      const amt = this.moving ? MOVING_AMT : SNAPPING_AMT;
-      this.setState({
-      translationX: lerp(this.state.translationX, this.desiredTranslationX, amt),
-      translationY: lerp(this.state.translationY, this.desiredTranslationY, amt),
-      });
-      this.scheduledUpdate.mark();
-  };
+        const amt = this.moving ? MOVING_AMT : SNAPPING_AMT;
+        this.setState({
+          translationX: lerp(this.state.translationX, this.desiredTranslationX, amt),
+          translationY: lerp(this.state.translationY, this.desiredTranslationY, amt),
+        });
+        this.scheduledUpdate.mark();
+    };
 
-  private setTranslation(inTranslationX: number, inTranslationY: number) {
-      const width = this.callViewWrapper.current?.clientWidth || PIP_VIEW_WIDTH;
-      const height = this.callViewWrapper.current?.clientHeight || PIP_VIEW_HEIGHT;
+    private setTranslation(inTranslationX: number, inTranslationY: number) {
+        const width = this.callViewWrapper.current?.clientWidth || PIP_VIEW_WIDTH;
+        const height = this.callViewWrapper.current?.clientHeight || PIP_VIEW_HEIGHT;
 
-      // Avoid overflow on the x axis
-      if (inTranslationX + width >= UIStore.instance.windowWidth) {
-          this.desiredTranslationX = UIStore.instance.windowWidth - width;
-      } else if (inTranslationX <= 0) {
-          this.desiredTranslationX = 0;
-      } else {
-          this.desiredTranslationX = inTranslationX;
-      }
+        // Avoid overflow on the x axis
+        if (inTranslationX + width >= UIStore.instance.windowWidth) {
+            this.desiredTranslationX = UIStore.instance.windowWidth - width;
+        } else if (inTranslationX <= 0) {
+            this.desiredTranslationX = 0;
+        } else {
+            this.desiredTranslationX = inTranslationX;
+        }
 
-      // Avoid overflow on the y axis
-      if (inTranslationY + height >= UIStore.instance.windowHeight) {
-          this.desiredTranslationY = UIStore.instance.windowHeight - height;
-      } else if (inTranslationY <= 0) {
-          this.desiredTranslationY = 0;
-      } else {
-          this.desiredTranslationY = inTranslationY;
-      }
-  }
+        // Avoid overflow on the y axis
+        if (inTranslationY + height >= UIStore.instance.windowHeight) {
+            this.desiredTranslationY = UIStore.instance.windowHeight - height;
+        } else if (inTranslationY <= 0) {
+            this.desiredTranslationY = 0;
+        } else {
+            this.desiredTranslationY = inTranslationY;
+        }
+    }
 
-  private snap = () => {
-      const translationX = this.desiredTranslationX;
-      const translationY = this.desiredTranslationY;
-      // We subtract the PiP size from the window size in order to calculate
-      // the position to snap to from the PiP center and not its top-left
-      // corner
-      const windowWidth = (
-          UIStore.instance.windowWidth -
+    private snap = () => {
+        const translationX = this.desiredTranslationX;
+        const translationY = this.desiredTranslationY;
+        // We subtract the PiP size from the window size in order to calculate
+        // the position to snap to from the PiP center and not its top-left
+        // corner
+        const windowWidth = (
+            UIStore.instance.windowWidth -
       (this.callViewWrapper.current?.clientWidth || PIP_VIEW_WIDTH)
-      );
-      const windowHeight = (
-          UIStore.instance.windowHeight -
+        );
+        const windowHeight = (
+            UIStore.instance.windowHeight -
       (this.callViewWrapper.current?.clientHeight || PIP_VIEW_HEIGHT)
-      );
+        );
 
-      if (translationX >= windowWidth / 2 && translationY >= windowHeight / 2) {
-          this.desiredTranslationX = windowWidth - PADDING.right;
-          this.desiredTranslationY = windowHeight - PADDING.bottom;
-      } else if (translationX >= windowWidth / 2 && translationY <= windowHeight / 2) {
-          this.desiredTranslationX = windowWidth - PADDING.right;
-          this.desiredTranslationY = PADDING.top;
-      } else if (translationX <= windowWidth / 2 && translationY >= windowHeight / 2) {
-          this.desiredTranslationX = PADDING.left;
-          this.desiredTranslationY = windowHeight - PADDING.bottom;
-      } else {
-          this.desiredTranslationX = PADDING.left;
-          this.desiredTranslationY = PADDING.top;
-      }
+        if (translationX >= windowWidth / 2 && translationY >= windowHeight / 2) {
+            this.desiredTranslationX = windowWidth - PADDING.right;
+            this.desiredTranslationY = windowHeight - PADDING.bottom;
+        } else if (translationX >= windowWidth / 2 && translationY <= windowHeight / 2) {
+            this.desiredTranslationX = windowWidth - PADDING.right;
+            this.desiredTranslationY = PADDING.top;
+        } else if (translationX <= windowWidth / 2 && translationY >= windowHeight / 2) {
+            this.desiredTranslationX = PADDING.left;
+            this.desiredTranslationY = windowHeight - PADDING.bottom;
+        } else {
+            this.desiredTranslationX = PADDING.left;
+            this.desiredTranslationY = PADDING.top;
+        }
 
-      // We start animating here because we want the PiP to move when we're
-      // resizing the window
-      this.scheduledUpdate.mark();
-  };
+        // We start animating here because we want the PiP to move when we're
+        // resizing the window
+        this.scheduledUpdate.mark();
+    };
 
-  private onStartMoving = (event: React.MouseEvent | MouseEvent) => {
-      event.preventDefault();
-      event.stopPropagation();
+    private onStartMoving = (event: React.MouseEvent | MouseEvent) => {
+        event.preventDefault();
+        event.stopPropagation();
 
-      this.moving = true;
-      this.initX = event.pageX - this.desiredTranslationX;
-      this.initY = event.pageY - this.desiredTranslationY;
-      this.scheduledUpdate.mark();
-  };
+        this.moving = true;
+        this.initX = event.pageX - this.desiredTranslationX;
+        this.initY = event.pageY - this.desiredTranslationY;
+        this.scheduledUpdate.mark();
+    };
 
-  private onMoving = (event: React.MouseEvent | MouseEvent) => {
-      if (!this.moving) return;
+    private onMoving = (event: React.MouseEvent | MouseEvent) => {
+        if (!this.moving) return;
 
-      event.preventDefault();
-      event.stopPropagation();
+        event.preventDefault();
+        event.stopPropagation();
 
-      this.setTranslation(event.pageX - this.initX, event.pageY - this.initY);
-  };
+        this.setTranslation(event.pageX - this.initX, event.pageY - this.initY);
+    };
 
-  private onEndMoving = () => {
-      this.moving = false;
-      this.snap();
-  };
+    private onEndMoving = () => {
+        this.moving = false;
+        this.snap();
+    };
 
-  public render() {
-      const translatePixelsX = this.state.translationX + "px";
-      const translatePixelsY = this.state.translationY + "px";
-      const style = {
-        transform: `translateX(${translatePixelsX})
+    public render() {
+        const translatePixelsX = this.state.translationX + "px";
+        const translatePixelsY = this.state.translationY + "px";
+        const style = {
+          transform: `translateX(${translatePixelsX})
                             translateY(${translatePixelsY})`,
-      };
-      return (
-          <div
-              className={this.props.className}
-              style={this.props.draggable ? style : undefined}
-              ref={this.callViewWrapper}
-          >
-              <>
-                  { this.props.children(this.onStartMoving) }
-              </>
-          </div>
-      );
-  }
+        };
+        return (
+            <div
+                className={this.props.className}
+                style={this.props.draggable ? style : undefined}
+                ref={this.callViewWrapper}
+            >
+                <>
+                    { this.props.children(this.onStartMoving) }
+                </>
+            </div>
+        );
+    }
 }