diff --git a/src/components/structures/CallEventGrouper.ts b/src/components/structures/CallEventGrouper.ts
index 5184ddc1bb..c654c08636 100644
--- a/src/components/structures/CallEventGrouper.ts
+++ b/src/components/structures/CallEventGrouper.ts
@@ -25,6 +25,13 @@ export enum CallEventGrouperEvent {
     StateChanged = "state_changed",
 }
 
+const SUPPORTED_STATES = [
+    CallState.Connected,
+    CallState.Connecting,
+    CallState.Ended,
+    CallState.Ringing,
+];
+
 export default class CallEventGrouper extends EventEmitter {
     invite: MatrixEvent;
     call: MatrixCall;
@@ -66,12 +73,15 @@ export default class CallEventGrouper extends EventEmitter {
     }
 
     private setCallState = () => {
-        this.state = this.call.state
-        this.emit(CallEventGrouperEvent.StateChanged, this.state);
+        if (SUPPORTED_STATES.includes(this.call.state)) {
+            this.state = this.call.state;
+            this.emit(CallEventGrouperEvent.StateChanged, this.state);
+        }
     }
 
     public add(event: MatrixEvent) {
         if (event.getType() === EventType.CallInvite) this.invite = event;
+        if (event.getType() === EventType.CallHangup) this.state = CallState.Ended;
 
         if (this.call) return;
         const callId = event.getContent().call_id;
diff --git a/src/components/views/messages/CallEvent.tsx b/src/components/views/messages/CallEvent.tsx
index c4126639a7..d5f26389c2 100644
--- a/src/components/views/messages/CallEvent.tsx
+++ b/src/components/views/messages/CallEvent.tsx
@@ -32,6 +32,12 @@ interface IState {
     callState: CallState;
 }
 
+const TEXTUAL_STATES = new Map([
+    [CallState.Connected, _t("Connected")],
+    [CallState.Connecting, _t("Connecting")],
+    [CallState.Ended, _t("This call has ended")],
+]);
+
 export default class CallEvent extends React.Component<IProps, IState> {
     constructor(props: IProps) {
         super(props);
@@ -49,7 +55,7 @@ export default class CallEvent extends React.Component<IProps, IState> {
         this.props.callEventGrouper.removeListener(CallEventGrouperEvent.StateChanged, this.onStateChanged);
     }
 
-    private onStateChanged = (newState: CallEventGrouperState) => {
+    private onStateChanged = (newState: CallState) => {
         this.setState({callState: newState});
     }
 
@@ -57,8 +63,9 @@ export default class CallEvent extends React.Component<IProps, IState> {
         const event = this.props.mxEvent;
         const sender = event.sender ? event.sender.name : event.getSender();
 
+        const state = this.state.callState;
         let content;
-        if (this.state.callState === CallState.Ringing) {
+        if (state === CallState.Ringing) {
             content = (
                 <div className="mx_CallEvent_content">
                     <FormButton
@@ -76,6 +83,18 @@ export default class CallEvent extends React.Component<IProps, IState> {
                     />
                 </div>
             );
+        } else if (Array.from(TEXTUAL_STATES.keys()).includes(state)) {
+            content = (
+                <div className="mx_CallEvent_content">
+                    { TEXTUAL_STATES.get(state) }
+                </div>
+            );
+        } else {
+            content = (
+                <div className="mx_CallEvent_content">
+                    { _t("The call is in an unknown state!") }
+                </div>
+            );
         }
 
         return (