Move calling duration timer into redux state

ts/components/CallScreen.stories.tsx

@@ -12,6 +12,7 @@ import enMessages from '../../_locales/en/messages.json';
 const i18n = setupI18n('en', enMessages);
 
 const callDetails = {
+  acceptedTime: Date.now(),
   callId: 0,
   isIncoming: true,
   isVideoCall: true,

ts/components/CallScreen.tsx

@@ -30,7 +30,6 @@ export type PropsType = {
 };
 
 type StateType = {
-  acceptedTime: number | null;
   acceptedDuration: number | null;
   showControls: boolean;
 };
@@ -48,7 +47,6 @@ export class CallScreen extends React.Component<PropsType, StateType> {
     super(props);
 
     this.state = {
-      acceptedTime: null,
       acceptedDuration: null,
       showControls: true,
     };
@@ -89,21 +87,15 @@ export class CallScreen extends React.Component<PropsType, StateType> {
   }
 
   updateAcceptedTimer = (): void => {
-    const { acceptedTime } = this.state;
+    const { callDetails } = this.props;
-    const { callState } = this.props;
 
-    if (acceptedTime) {
+    if (!callDetails) {
+      return;
+    }
+
+    if (callDetails.acceptedTime) {
       this.setState({
-        acceptedTime,
+        acceptedDuration: Date.now() - callDetails.acceptedTime,
-        acceptedDuration: Date.now() - acceptedTime,
-      });
-    } else if (
-      callState === CallState.Accepted ||
-      callState === CallState.Reconnecting
-    ) {
-      this.setState({
-        acceptedTime: Date.now(),
-        acceptedDuration: 1,
       });
     }
   };

ts/services/calling.ts

@@ -206,7 +206,7 @@ export class CallingClass {
     this.attachToCall(conversation, call);
 
     this.uxActions.outgoingCall({
-      callDetails: this.getUxCallDetails(conversation, call),
+      callDetails: this.getAcceptedCallDetails(conversation, call),
     });
   }
 
@@ -702,7 +702,7 @@ export class CallingClass {
       this.attachToCall(conversation, call);
 
       this.uxActions.incomingCall({
-        callDetails: this.getUxCallDetails(conversation, call),
+        callDetails: this.getAcceptedCallDetails(conversation, call),
       });
 
       window.log.info('CallingClass.handleIncomingCall(): Proceeding');
@@ -745,7 +745,7 @@ export class CallingClass {
       }
       uxActions.callStateChange({
         callState: call.state,
-        callDetails: this.getUxCallDetails(conversation, call),
+        callDetails: this.getAcceptedCallDetails(conversation, call),
         callEndedReason: call.endedReason,
       });
     };
@@ -825,17 +825,18 @@ export class CallingClass {
     };
   }
 
-  private getUxCallDetails(
+  private getAcceptedCallDetails(
     conversation: ConversationModel,
     call: Call
   ): CallDetailsType {
     const conversationProps = conversation.cachedProps;
     if (!conversationProps) {
-      throw new Error('getUxCallDetails: No conversation props?');
+      throw new Error('getAcceptedCallDetails: No conversation props?');
     }
 
     return {
       ...conversationProps,
+      acceptedTime: Date.now(),
       callId: call.callId,
       isIncoming: call.isIncoming,
       isVideoCall: call.isVideoCall,

ts/state/ducks/calling.ts

@@ -21,6 +21,7 @@ import {
 export type CallId = unknown;
 
 export type CallDetailsType = {
+  acceptedTime?: number;
   callId: CallId;
   isIncoming: boolean;
   isVideoCall: boolean;

ts/util/lint/exceptions.json

@@ -12847,7 +12847,7 @@
     "rule": "React-createRef",
     "path": "ts/components/CallScreen.js",
     "line": "        this.localVideoRef = react_1.default.createRef();",
-    "lineNumber": 94,
+    "lineNumber": 87,
     "reasonCategory": "usageTrusted",
     "updated": "2020-09-14T23:03:44.863Z"
   },
@@ -12855,7 +12855,7 @@
     "rule": "React-createRef",
     "path": "ts/components/CallScreen.js",
     "line": "        this.remoteVideoRef = react_1.default.createRef();",
-    "lineNumber": 95,
+    "lineNumber": 88,
     "reasonCategory": "usageTrusted",
     "updated": "2020-09-14T23:03:44.863Z"
   },
@@ -12863,7 +12863,7 @@
     "rule": "React-createRef",
     "path": "ts/components/CallScreen.tsx",
     "line": "    this.localVideoRef = React.createRef();",
-    "lineNumber": 58,
+    "lineNumber": 56,
     "reasonCategory": "usageTrusted",
     "updated": "2020-06-02T21:51:34.813Z",
     "reasonDetail": "Used to render local preview video"
@@ -12872,7 +12872,7 @@
     "rule": "React-createRef",
     "path": "ts/components/CallScreen.tsx",
     "line": "    this.remoteVideoRef = React.createRef();",
-    "lineNumber": 59,
+    "lineNumber": 57,
     "reasonCategory": "usageTrusted",
     "updated": "2020-09-14T23:03:44.863Z"
   },