feat: add call duration in the call state

packages/client/src/store/CallState.ts

@@ -117,6 +117,7 @@ export class CallState {
   private callStatsReportSubject = new BehaviorSubject<
     CallStatsReport | undefined
   >(undefined);
+  private durationSubject = new BehaviorSubject<number>(0);
 
   // These are tracks that were delivered to the Subscriber's onTrack event
   // that we couldn't associate with a participant yet.
@@ -285,6 +286,11 @@ export class CallState {
    */
   thumbnails$: Observable<ThumbnailResponse | undefined>;
 
+  /**
+   * Will provide the count of seconds since the call started.
+   */
+  duration$: Observable<number>;
+
   readonly logger = getLogger(['CallState']);
 
   /**
@@ -390,6 +396,10 @@ export class CallState {
     this.participantCount$ = duc(this.participantCountSubject);
     this.recording$ = duc(this.recordingSubject);
     this.transcribing$ = duc(this.transcribingSubject);
+    this.duration$ = duc(this.durationSubject);
+    setInterval(() => {
+      this.setDuration((d) => d + 1);
+    }, 1000);
 
     this.eventHandlers = {
       // these events are not updating the call state:
@@ -515,6 +525,23 @@ export class CallState {
     return this.setCurrentValue(this.participantCountSubject, count);
   };
 
+  /**
+   * The number of seconds since the start of the call.
+   */
+  get duration() {
+    return this.getCurrentValue(this.duration$);
+  }
+
+  /**
+   * Sets the number of seconds since the start of the call.
+   *
+   * @internal
+   * @param duration the duration of the call in seconds.
+   */
+  setDuration = (duration: Patch<number>) => {
+    return this.setCurrentValue(this.durationSubject, duration);
+  };
+
   /**
    * The time the call session actually started.
    * Useful for displaying the call duration.

packages/react-bindings/src/hooks/callStateHooks.ts

@@ -306,6 +306,16 @@ export const useParticipantCount = () => {
   return useObservableValue(participantCount$);
 };
 
+/**
+ * Returns the duration of the call in seconds.
+ *
+ * @category Call State
+ */
+export const useCallDuration = () => {
+  const { duration$ } = useCallState();
+  return useObservableValue(duration$);
+};
+
 /**
  * Returns the approximate anonymous participant count of the active call.
  * The regular participants are not included in this count. It is computed on the server.