@ethora/chat-component-rn 26.10.4 → 26.10.5

package/src/helpers/updateMessagesTillLast.tsx

@@ -74,7 +74,8 @@ export const updateMessagesTillLast = async (
                 { coalesceRoom: true, source: 'background', selfApplied: true }
               );
 
-              if (!fetchedMessages.length) {break;}
+              // undefined when the stanza was dropped (e.g. reconnecting).
+              if (!fetchedMessages?.length) {break;}
 
               counter++;
 

package/src/i18n/strings.ts

@@ -116,6 +116,14 @@ const en: UiStringTable = {
   'call.action.startCamera': 'Turn camera on',
   'call.action.switchCamera': 'Switch camera',
   'call.action.swapVideo': 'Swap videos',
+  'call.action.fillVideo': 'Stretch video',
+  'call.action.fitVideo': 'Show whole video',
+  'call.notification.ongoing': 'Ongoing call',
+  'call.notification.ongoingVideo': 'Ongoing video call',
+  'call.notification.mute': 'Mute',
+  'call.notification.unmute': 'Unmute',
+  'call.notification.cameraOn': 'Camera on',
+  'call.notification.cameraOff': 'Camera off',
   'call.action.speakerOn': 'Turn speaker on',
   'call.action.speakerOff': 'Turn speaker off',
   'call.action.startAudioCall': 'Start audio call',
@@ -497,6 +505,14 @@ const fr: UiStringTable = {
   'call.action.startCamera': 'Activer la caméra',
   'call.action.switchCamera': 'Changer de caméra',
   'call.action.swapVideo': 'Inverser les vidéos',
+  'call.action.fillVideo': 'Étirer la vidéo',
+  'call.action.fitVideo': 'Afficher toute la vidéo',
+  'call.notification.ongoing': 'Appel en cours',
+  'call.notification.ongoingVideo': 'Appel vidéo en cours',
+  'call.notification.mute': 'Couper',
+  'call.notification.unmute': 'Réactiver',
+  'call.notification.cameraOn': 'Caméra on',
+  'call.notification.cameraOff': 'Caméra off',
   'call.action.speakerOn': 'Activer le haut-parleur',
   'call.action.speakerOff': 'Désactiver le haut-parleur',
   'call.action.startAudioCall': 'Démarrer un appel audio',
@@ -878,6 +894,14 @@ const es: UiStringTable = {
   'call.action.startCamera': 'Encender la cámara',
   'call.action.switchCamera': 'Cambiar de cámara',
   'call.action.swapVideo': 'Intercambiar vídeos',
+  'call.action.fillVideo': 'Ampliar vídeo',
+  'call.action.fitVideo': 'Ver vídeo completo',
+  'call.notification.ongoing': 'Llamada en curso',
+  'call.notification.ongoingVideo': 'Videollamada en curso',
+  'call.notification.mute': 'Silenciar',
+  'call.notification.unmute': 'Activar',
+  'call.notification.cameraOn': 'Cámara on',
+  'call.notification.cameraOff': 'Cámara off',
   'call.action.speakerOn': 'Activar el altavoz',
   'call.action.speakerOff': 'Desactivar el altavoz',
   'call.action.startAudioCall': 'Iniciar llamada de audio',
@@ -1259,6 +1283,14 @@ const pt: UiStringTable = {
   'call.action.startCamera': 'Ligar a câmara',
   'call.action.switchCamera': 'Mudar de câmara',
   'call.action.swapVideo': 'Trocar vídeos',
+  'call.action.fillVideo': 'Esticar vídeo',
+  'call.action.fitVideo': 'Mostrar vídeo inteiro',
+  'call.notification.ongoing': 'Chamada em andamento',
+  'call.notification.ongoingVideo': 'Videochamada em andamento',
+  'call.notification.mute': 'Silenciar',
+  'call.notification.unmute': 'Ativar som',
+  'call.notification.cameraOn': 'Ligar câmera',
+  'call.notification.cameraOff': 'Desligar câmera',
   'call.action.speakerOn': 'Ligar o altifalante',
   'call.action.speakerOff': 'Desligar o altifalante',
   'call.action.startAudioCall': 'Iniciar chamada de áudio',
@@ -1640,6 +1672,14 @@ const ht: UiStringTable = {
   'call.action.startCamera': 'Limen kamera a',
   'call.action.switchCamera': 'Chanje kamera',
   'call.action.swapVideo': 'Chanje videyo yo',
+  'call.action.fillVideo': 'Lonje videyo a',
+  'call.action.fitVideo': 'Montre tout videyo a',
+  'call.notification.ongoing': 'Apèl k ap fèt',
+  'call.notification.ongoingVideo': 'Apèl videyo k ap fèt',
+  'call.notification.mute': 'Fèmen mikwo',
+  'call.notification.unmute': 'Louvri mikwo',
+  'call.notification.cameraOn': 'Limen kamera',
+  'call.notification.cameraOff': 'Etenn kamera',
   'call.action.speakerOn': 'Limen opalè a',
   'call.action.speakerOff': 'Etenn opalè a',
   'call.action.startAudioCall': 'Kòmanse yon apèl odyo',
@@ -2021,6 +2061,14 @@ const zh: UiStringTable = {
   'call.action.startCamera': '打开摄像头',
   'call.action.switchCamera': '切换摄像头',
   'call.action.swapVideo': '切换画面',
+  'call.action.fillVideo': '铺满画面',
+  'call.action.fitVideo': '显示完整画面',
+  'call.notification.ongoing': '通话中',
+  'call.notification.ongoingVideo': '视频通话中',
+  'call.notification.mute': '静音',
+  'call.notification.unmute': '取消静音',
+  'call.notification.cameraOn': '开启摄像头',
+  'call.notification.cameraOff': '关闭摄像头',
   'call.action.speakerOn': '打开扬声器',
   'call.action.speakerOff': '关闭扬声器',
   'call.action.startAudioCall': '发起语音通话',

package/src/main.ts

@@ -91,6 +91,9 @@ export type {
   ChatTextStyle,
   VideoCallsConfig,
   VideoCallIcons,
+  OngoingCallNotification,
+  OngoingCallNotificationAction,
+  OngoingCallNotificationState,
 } from './types/types';
 export type { Iso639_1Codes } from './types/models/language.model';
 export type { TranslateMode } from './utils/translateModePolicy';

package/src/types/types.ts

@@ -1023,6 +1023,54 @@ export interface VideoCallsConfig {
   showScreenShare?: boolean;
   /** Custom icons for the call control bar / ring screen. */
   icons?: VideoCallIcons;
+  /**
+   * The system "call in progress" surface outside the app, typically an
+   * Android ongoing-call notification (a foreground service, which Android
+   * also needs to keep the microphone and camera alive in the background).
+   * Native code, so the host supplies it; the SDK drives it from the call
+   * state and handles its buttons. On iOS the same role is played by
+   * CallKit (`react-native-callkeep`), which the SDK uses on its own.
+   */
+  ongoingCallNotification?: OngoingCallNotification;
+}
+
+/** What the ongoing-call notification should show. Sent on every change. */
+export interface OngoingCallNotificationState {
+  callId: string;
+  /** The peer's display name. */
+  title: string;
+  /** Localized second line, e.g. "Ongoing video call" or "Connecting...". */
+  text: string;
+  kind: 'audio' | 'video';
+  /** Epoch ms the call connected, for a running timer; null before. */
+  connectedAt: number | null;
+  micOn: boolean;
+  cameraOn: boolean;
+  /** Localized button labels. */
+  labels: {
+    hangUp: string;
+    mute: string;
+    unmute: string;
+    cameraOn: string;
+    cameraOff: string;
+  };
+}
+
+export type OngoingCallNotificationAction =
+  | 'hangUp'
+  | 'toggleMic'
+  | 'toggleCamera'
+  /** The notification itself was tapped and brought the app forward. */
+  | 'open';
+
+export interface OngoingCallNotification {
+  /** Create the notification, or update it if it is already shown. */
+  show: (state: OngoingCallNotificationState) => void;
+  hide: () => void;
+  /** Returns the unsubscribe function. */
+  addActionListener: (
+    listener: (action: OngoingCallNotificationAction) => void
+  ) => () => void;
 }
 
 interface ConfigRoom {

package/src/version.ts

@@ -1,3 +1,3 @@
 // Generated by scripts/sync-version.mjs on `npm version`.
 // Edit package.json's version instead of this file.
-export const ETHORA_CHAT_COMPONENT_VERSION = '26.10.4';
+export const ETHORA_CHAT_COMPONENT_VERSION = '26.10.5';

package/lib/commonjs/components/VideoCalls/useDraggable.js

@@ -1,59 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useDraggable = void 0;
-var _react = require("react");
-var _reactNative = require("react-native");
-/**
- * Drag a floating element around (web's useDraggable, for the self-view
- * tile and the minimized call panel). The offset is kept between drags.
- *
- * The responder only claims the gesture once the finger actually moves a
- * few points, so taps still reach the buttons inside the dragged element.
- */
-const useDraggable = () => {
-  const position = (0, _react.useRef)(new _reactNative.Animated.ValueXY({
-    x: 0,
-    y: 0
-  })).current;
-  const offset = (0, _react.useRef)({
-    x: 0,
-    y: 0
-  });
-  const panHandlers = (0, _react.useMemo)(() => _reactNative.PanResponder.create({
-    onMoveShouldSetPanResponder: (_event, gesture) => Math.abs(gesture.dx) > 4 || Math.abs(gesture.dy) > 4,
-    onPanResponderGrant: () => {
-      position.setOffset(offset.current);
-      position.setValue({
-        x: 0,
-        y: 0
-      });
-    },
-    onPanResponderMove: _reactNative.Animated.event([null, {
-      dx: position.x,
-      dy: position.y
-    }], {
-      useNativeDriver: false
-    }),
-    onPanResponderRelease: (_event, gesture) => {
-      offset.current = {
-        x: offset.current.x + gesture.dx,
-        y: offset.current.y + gesture.dy
-      };
-      position.flattenOffset();
-    },
-    onPanResponderTerminate: () => {
-      position.flattenOffset();
-    }
-  }).panHandlers, [position]);
-  return {
-    panHandlers,
-    style: {
-      transform: position.getTranslateTransform()
-    }
-  };
-};
-exports.useDraggable = useDraggable;
-//# sourceMappingURL=useDraggable.js.map

package/lib/commonjs/components/VideoCalls/useDraggable.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_react","require","_reactNative","useDraggable","position","useRef","Animated","ValueXY","x","y","current","offset","panHandlers","useMemo","PanResponder","create","onMoveShouldSetPanResponder","_event","gesture","Math","abs","dx","dy","onPanResponderGrant","setOffset","setValue","onPanResponderMove","event","useNativeDriver","onPanResponderRelease","flattenOffset","onPanResponderTerminate","style","transform","getTranslateTransform","exports"],"sourceRoot":"../../../../src","sources":["components/VideoCalls/useDraggable.ts"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAME,YAAY,GAAGA,CAAA,KAAM;EAChC,MAAMC,QAAQ,GAAG,IAAAC,aAAM,EAAC,IAAIC,qBAAQ,CAACC,OAAO,CAAC;IAAEC,CAAC,EAAE,CAAC;IAAEC,CAAC,EAAE;EAAE,CAAC,CAAC,CAAC,CAACC,OAAO;EACrE,MAAMC,MAAM,GAAG,IAAAN,aAAM,EAAC;IAAEG,CAAC,EAAE,CAAC;IAAEC,CAAC,EAAE;EAAE,CAAC,CAAC;EAErC,MAAMG,WAAW,GAAG,IAAAC,cAAO,EACzB,MACEC,yBAAY,CAACC,MAAM,CAAC;IAClBC,2BAA2B,EAAEA,CAACC,MAAM,EAAEC,OAAO,KAC3CC,IAAI,CAACC,GAAG,CAACF,OAAO,CAACG,EAAE,CAAC,GAAG,CAAC,IAAIF,IAAI,CAACC,GAAG,CAACF,OAAO,CAACI,EAAE,CAAC,GAAG,CAAC;IACtDC,mBAAmB,EAAEA,CAAA,KAAM;MACzBnB,QAAQ,CAACoB,SAAS,CAACb,MAAM,CAACD,OAAO,CAAC;MAClCN,QAAQ,CAACqB,QAAQ,CAAC;QAAEjB,CAAC,EAAE,CAAC;QAAEC,CAAC,EAAE;MAAE,CAAC,CAAC;IACnC,CAAC;IACDiB,kBAAkB,EAAEpB,qBAAQ,CAACqB,KAAK,CAChC,CAAC,IAAI,EAAE;MAAEN,EAAE,EAAEjB,QAAQ,CAACI,CAAC;MAAEc,EAAE,EAAElB,QAAQ,CAACK;IAAE,CAAC,CAAC,EAC1C;MAAEmB,eAAe,EAAE;IAAM,CAC3B,CAAC;IACDC,qBAAqB,EAAEA,CAACZ,MAAM,EAAEC,OAAO,KAAK;MAC1CP,MAAM,CAACD,OAAO,GAAG;QACfF,CAAC,EAAEG,MAAM,CAACD,OAAO,CAACF,CAAC,GAAGU,OAAO,CAACG,EAAE;QAChCZ,CAAC,EAAEE,MAAM,CAACD,OAAO,CAACD,CAAC,GAAGS,OAAO,CAACI;MAChC,CAAC;MACDlB,QAAQ,CAAC0B,aAAa,CAAC,CAAC;IAC1B,CAAC;IACDC,uBAAuB,EAAEA,CAAA,KAAM;MAC7B3B,QAAQ,CAAC0B,aAAa,CAAC,CAAC;IAC1B;EACF,CAAC,CAAC,CAAClB,WAAW,EAChB,CAACR,QAAQ,CACX,CAAC;EAED,OAAO;IACLQ,WAAW;IACXoB,KAAK,EAAE;MAAEC,SAAS,EAAE7B,QAAQ,CAAC8B,qBAAqB,CAAC;IAAE;EACvD,CAAC;AACH,CAAC;AAACC,OAAA,CAAAhC,YAAA,GAAAA,YAAA","ignoreList":[]}

package/lib/module/components/VideoCalls/useDraggable.js

@@ -1,55 +0,0 @@
-"use strict";
-
-import { useMemo, useRef } from 'react';
-import { Animated, PanResponder } from 'react-native';
-
-/**
- * Drag a floating element around (web's useDraggable, for the self-view
- * tile and the minimized call panel). The offset is kept between drags.
- *
- * The responder only claims the gesture once the finger actually moves a
- * few points, so taps still reach the buttons inside the dragged element.
- */
-export const useDraggable = () => {
-  const position = useRef(new Animated.ValueXY({
-    x: 0,
-    y: 0
-  })).current;
-  const offset = useRef({
-    x: 0,
-    y: 0
-  });
-  const panHandlers = useMemo(() => PanResponder.create({
-    onMoveShouldSetPanResponder: (_event, gesture) => Math.abs(gesture.dx) > 4 || Math.abs(gesture.dy) > 4,
-    onPanResponderGrant: () => {
-      position.setOffset(offset.current);
-      position.setValue({
-        x: 0,
-        y: 0
-      });
-    },
-    onPanResponderMove: Animated.event([null, {
-      dx: position.x,
-      dy: position.y
-    }], {
-      useNativeDriver: false
-    }),
-    onPanResponderRelease: (_event, gesture) => {
-      offset.current = {
-        x: offset.current.x + gesture.dx,
-        y: offset.current.y + gesture.dy
-      };
-      position.flattenOffset();
-    },
-    onPanResponderTerminate: () => {
-      position.flattenOffset();
-    }
-  }).panHandlers, [position]);
-  return {
-    panHandlers,
-    style: {
-      transform: position.getTranslateTransform()
-    }
-  };
-};
-//# sourceMappingURL=useDraggable.js.map

package/lib/module/components/VideoCalls/useDraggable.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["useMemo","useRef","Animated","PanResponder","useDraggable","position","ValueXY","x","y","current","offset","panHandlers","create","onMoveShouldSetPanResponder","_event","gesture","Math","abs","dx","dy","onPanResponderGrant","setOffset","setValue","onPanResponderMove","event","useNativeDriver","onPanResponderRelease","flattenOffset","onPanResponderTerminate","style","transform","getTranslateTransform"],"sourceRoot":"../../../../src","sources":["components/VideoCalls/useDraggable.ts"],"mappings":";;AAAA,SAASA,OAAO,EAAEC,MAAM,QAAQ,OAAO;AACvC,SAASC,QAAQ,EAAEC,YAAY,QAAQ,cAAc;;AAErD;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,YAAY,GAAGA,CAAA,KAAM;EAChC,MAAMC,QAAQ,GAAGJ,MAAM,CAAC,IAAIC,QAAQ,CAACI,OAAO,CAAC;IAAEC,CAAC,EAAE,CAAC;IAAEC,CAAC,EAAE;EAAE,CAAC,CAAC,CAAC,CAACC,OAAO;EACrE,MAAMC,MAAM,GAAGT,MAAM,CAAC;IAAEM,CAAC,EAAE,CAAC;IAAEC,CAAC,EAAE;EAAE,CAAC,CAAC;EAErC,MAAMG,WAAW,GAAGX,OAAO,CACzB,MACEG,YAAY,CAACS,MAAM,CAAC;IAClBC,2BAA2B,EAAEA,CAACC,MAAM,EAAEC,OAAO,KAC3CC,IAAI,CAACC,GAAG,CAACF,OAAO,CAACG,EAAE,CAAC,GAAG,CAAC,IAAIF,IAAI,CAACC,GAAG,CAACF,OAAO,CAACI,EAAE,CAAC,GAAG,CAAC;IACtDC,mBAAmB,EAAEA,CAAA,KAAM;MACzBf,QAAQ,CAACgB,SAAS,CAACX,MAAM,CAACD,OAAO,CAAC;MAClCJ,QAAQ,CAACiB,QAAQ,CAAC;QAAEf,CAAC,EAAE,CAAC;QAAEC,CAAC,EAAE;MAAE,CAAC,CAAC;IACnC,CAAC;IACDe,kBAAkB,EAAErB,QAAQ,CAACsB,KAAK,CAChC,CAAC,IAAI,EAAE;MAAEN,EAAE,EAAEb,QAAQ,CAACE,CAAC;MAAEY,EAAE,EAAEd,QAAQ,CAACG;IAAE,CAAC,CAAC,EAC1C;MAAEiB,eAAe,EAAE;IAAM,CAC3B,CAAC;IACDC,qBAAqB,EAAEA,CAACZ,MAAM,EAAEC,OAAO,KAAK;MAC1CL,MAAM,CAACD,OAAO,GAAG;QACfF,CAAC,EAAEG,MAAM,CAACD,OAAO,CAACF,CAAC,GAAGQ,OAAO,CAACG,EAAE;QAChCV,CAAC,EAAEE,MAAM,CAACD,OAAO,CAACD,CAAC,GAAGO,OAAO,CAACI;MAChC,CAAC;MACDd,QAAQ,CAACsB,aAAa,CAAC,CAAC;IAC1B,CAAC;IACDC,uBAAuB,EAAEA,CAAA,KAAM;MAC7BvB,QAAQ,CAACsB,aAAa,CAAC,CAAC;IAC1B;EACF,CAAC,CAAC,CAAChB,WAAW,EAChB,CAACN,QAAQ,CACX,CAAC;EAED,OAAO;IACLM,WAAW;IACXkB,KAAK,EAAE;MAAEC,SAAS,EAAEzB,QAAQ,CAAC0B,qBAAqB,CAAC;IAAE;EACvD,CAAC;AACH,CAAC","ignoreList":[]}

package/lib/typescript/components/VideoCalls/useDraggable.d.ts

@@ -1,19 +0,0 @@
-import { Animated } from 'react-native';
-/**
- * Drag a floating element around (web's useDraggable, for the self-view
- * tile and the minimized call panel). The offset is kept between drags.
- *
- * The responder only claims the gesture once the finger actually moves a
- * few points, so taps still reach the buttons inside the dragged element.
- */
-export declare const useDraggable: () => {
-    panHandlers: import("react-native").GestureResponderHandlers;
-    style: {
-        transform: [{
-            translateX: Animated.AnimatedValue;
-        }, {
-            translateY: Animated.AnimatedValue;
-        }];
-    };
-};
-//# sourceMappingURL=useDraggable.d.ts.map

package/lib/typescript/components/VideoCalls/useDraggable.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useDraggable.d.ts","sourceRoot":"","sources":["../../../../src/components/VideoCalls/useDraggable.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAgB,MAAM,cAAc,CAAC;AAEtD;;;;;;GAMG;AACH,eAAO,MAAM,YAAY;;;;;;;;;CAmCxB,CAAC"}

package/src/components/VideoCalls/useDraggable.ts

@@ -1,46 +0,0 @@
-import { useMemo, useRef } from 'react';
-import { Animated, PanResponder } from 'react-native';
-
-/**
- * Drag a floating element around (web's useDraggable, for the self-view
- * tile and the minimized call panel). The offset is kept between drags.
- *
- * The responder only claims the gesture once the finger actually moves a
- * few points, so taps still reach the buttons inside the dragged element.
- */
-export const useDraggable = () => {
-  const position = useRef(new Animated.ValueXY({ x: 0, y: 0 })).current;
-  const offset = useRef({ x: 0, y: 0 });
-
-  const panHandlers = useMemo(
-    () =>
-      PanResponder.create({
-        onMoveShouldSetPanResponder: (_event, gesture) =>
-          Math.abs(gesture.dx) > 4 || Math.abs(gesture.dy) > 4,
-        onPanResponderGrant: () => {
-          position.setOffset(offset.current);
-          position.setValue({ x: 0, y: 0 });
-        },
-        onPanResponderMove: Animated.event(
-          [null, { dx: position.x, dy: position.y }],
-          { useNativeDriver: false }
-        ),
-        onPanResponderRelease: (_event, gesture) => {
-          offset.current = {
-            x: offset.current.x + gesture.dx,
-            y: offset.current.y + gesture.dy,
-          };
-          position.flattenOffset();
-        },
-        onPanResponderTerminate: () => {
-          position.flattenOffset();
-        },
-      }).panHandlers,
-    [position]
-  );
-
-  return {
-    panHandlers,
-    style: { transform: position.getTranslateTransform() },
-  };
-};