@ethora/chat-component-rn 26.10.3 → 26.10.5

package/src/components/VideoCalls/useOngoingCallNotification.ts

@@ -0,0 +1,113 @@
+import { useEffect, useRef } from 'react';
+import { useSelector } from 'react-redux';
+import { RootState } from '../../roomStore';
+import { useT } from '../../i18n/useT';
+import type {
+  OngoingCallNotification,
+  OngoingCallNotificationAction,
+} from '../../types/types';
+import { terminateActiveCall } from './callActions';
+import { toggleCallCamera, toggleCallMic, useCallSession } from './callSessionController';
+import { setCallMinimized } from './callUiStore';
+
+/**
+ * Drives the host's ongoing-call notification (`videoCalls.
+ * ongoingCallNotification`, an Android foreground-service notification in
+ * the Ethora app): shown while a call is connecting or connected, updated
+ * when the mic, camera or timer anchor change, and its buttons act on the
+ * call like the in-app ones.
+ */
+export const useOngoingCallNotification = (
+  adapter: OngoingCallNotification | undefined
+): void => {
+  const t = useT();
+  const call = useSelector((state: RootState) => state.call);
+  const session = useCallSession();
+  const shownRef = useRef(false);
+
+  const live =
+    !!call.token && (call.phase === 'connecting' || call.phase === 'in-call');
+
+  useEffect(() => {
+    if (!adapter) {return;}
+    return adapter.addActionListener((action: OngoingCallNotificationAction) => {
+      switch (action) {
+        case 'hangUp':
+          terminateActiveCall('ended');
+          break;
+        case 'toggleMic':
+          void toggleCallMic();
+          break;
+        case 'toggleCamera':
+          void toggleCallCamera();
+          break;
+        case 'open':
+          // Back from the notification: show the call, not the strip.
+          setCallMinimized(false);
+          break;
+      }
+    });
+  }, [adapter]);
+
+  const isVideo = call.kind === 'video';
+  const connectedAt = session.anchorAt;
+  const text =
+    connectedAt !== null
+      ? isVideo
+        ? t('call.notification.ongoingVideo')
+        : t('call.notification.ongoing')
+      : !session.connected
+        ? t('call.status.connecting')
+        : t('call.status.waitingForPeer');
+
+  useEffect(() => {
+    if (!adapter) {return;}
+    if (!live) {
+      if (shownRef.current) {
+        shownRef.current = false;
+        adapter.hide();
+      }
+      return;
+    }
+    shownRef.current = true;
+    adapter.show({
+      callId: call.callId || call.roomJid || 'call',
+      title: call.roomName || t('call.unknownCaller'),
+      text,
+      kind: call.kind,
+      connectedAt,
+      micOn: session.micOn,
+      cameraOn: isVideo && session.cameraOn,
+      labels: {
+        hangUp: t('call.action.hangUp'),
+        mute: t('call.notification.mute'),
+        unmute: t('call.notification.unmute'),
+        cameraOn: t('call.notification.cameraOn'),
+        cameraOff: t('call.notification.cameraOff'),
+      },
+    });
+  }, [
+    adapter,
+    live,
+    t,
+    text,
+    connectedAt,
+    isVideo,
+    call.callId,
+    call.roomJid,
+    call.roomName,
+    call.kind,
+    session.micOn,
+    session.cameraOn,
+  ]);
+
+  useEffect(
+    () => () => {
+      if (adapter && shownRef.current) {
+        shownRef.current = false;
+        adapter.hide();
+      }
+    },
+    [adapter]
+  );
+};

package/src/components/VideoCalls/usePipTile.ts

@@ -0,0 +1,214 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Animated, LayoutChangeEvent, PanResponder } from 'react-native';
+
+/**
+ * The small video tile of a call, Telegram-style: drag it anywhere and it
+ * snaps to the nearest corner when released (a flick carries it towards
+ * the flick), pinch it to switch between a small and a large size.
+ *
+ * Positions are kept per corner rather than per pixel, so the tile stays
+ * glued to its corner when the stage changes size (rotation, iPad split
+ * view) or the tile itself changes size.
+ */
+
+export type PipTileSize = 'small' | 'large';
+
+export const PIP_TILE_SIZES: Record<PipTileSize, { width: number; height: number }> = {
+  small: { width: 104, height: 148 },
+  large: { width: 156, height: 222 },
+};
+
+const MARGIN = 12;
+// How far a flick carries the tile before picking a corner, in ms of velocity.
+const FLICK_PROJECTION_MS = 160;
+// Pinch past these ratios to change size; in between keeps the current one.
+const GROW_RATIO = 1.12;
+const SHRINK_RATIO = 0.9;
+
+interface Corner {
+  right: boolean;
+  bottom: boolean;
+}
+
+interface Stage {
+  width: number;
+  height: number;
+}
+
+const SPRING = { useNativeDriver: false, damping: 20, stiffness: 220, mass: 0.8 };
+
+const touchDistance = (touches: ReadonlyArray<{ pageX: number; pageY: number }>) => {
+  const [a, b] = touches;
+  return Math.hypot(a.pageX - b.pageX, a.pageY - b.pageY);
+};
+
+export const usePipTile = ({ topInset = 0 }: { topInset?: number } = {}) => {
+  const [stage, setStage] = useState<Stage | null>(null);
+  const [size, setSize] = useState<PipTileSize>('small');
+  const stageRef = useRef<Stage | null>(null);
+  const sizeRef = useRef<PipTileSize>('small');
+  const cornerRef = useRef<Corner>({ right: true, bottom: false });
+  const topInsetRef = useRef(topInset);
+  topInsetRef.current = topInset;
+
+  const position = useRef(new Animated.ValueXY({ x: 0, y: 0 })).current;
+  const width = useRef(new Animated.Value(PIP_TILE_SIZES.small.width)).current;
+  const height = useRef(new Animated.Value(PIP_TILE_SIZES.small.height)).current;
+  const pinchScale = useRef(new Animated.Value(1)).current;
+  // Where the tile rests, i.e. where a drag starts from.
+  const restRef = useRef({ x: 0, y: 0 });
+  const gestureRef = useRef({ pinching: false, startDistance: 0, scale: 1 });
+
+  const cornerPoint = useCallback((corner: Corner, tileSize: PipTileSize) => {
+    const area = stageRef.current;
+    if (!area) {return { x: 0, y: 0 };}
+    const tile = PIP_TILE_SIZES[tileSize];
+    const top = MARGIN + topInsetRef.current;
+    return {
+      x: corner.right ? Math.max(MARGIN, area.width - tile.width - MARGIN) : MARGIN,
+      y: corner.bottom ? Math.max(top, area.height - tile.height - MARGIN) : top,
+    };
+  }, []);
+
+  const settle = useCallback(
+    (animated: boolean) => {
+      const tileSize = sizeRef.current;
+      const target = cornerPoint(cornerRef.current, tileSize);
+      const tile = PIP_TILE_SIZES[tileSize];
+      restRef.current = target;
+      if (!animated) {
+        position.setValue(target);
+        width.setValue(tile.width);
+        height.setValue(tile.height);
+        pinchScale.setValue(1);
+        return;
+      }
+      Animated.parallel([
+        Animated.spring(position, { ...SPRING, toValue: target }),
+        Animated.spring(width, { ...SPRING, toValue: tile.width }),
+        Animated.spring(height, { ...SPRING, toValue: tile.height }),
+        Animated.spring(pinchScale, { ...SPRING, toValue: 1 }),
+      ]).start();
+    },
+    [cornerPoint, position, width, height, pinchScale]
+  );
+
+  const onStageLayout = useCallback(
+    (event: LayoutChangeEvent) => {
+      const { width: w, height: h } = event.nativeEvent.layout;
+      const prev = stageRef.current;
+      if (prev && prev.width === w && prev.height === h) {return;}
+      stageRef.current = { width: w, height: h };
+      setStage(stageRef.current);
+      settle(false);
+    },
+    [settle]
+  );
+
+  // The safe-area inset arrives after the first layout on some devices.
+  useEffect(() => {
+    if (stageRef.current) {settle(false);}
+  }, [topInset, settle]);
+
+  const panHandlers = useMemo(
+    () =>
+      PanResponder.create({
+        // Two fingers are always ours (pinch); one finger only once it
+        // moves, so a tap still reaches the tile's onPress (swap videos).
+        onStartShouldSetPanResponderCapture: (event) =>
+          event.nativeEvent.touches.length >= 2,
+        // Own the touch from the start when the tile has no tap target
+        // (nothing to swap): an ancestor outside the call Modal would take
+        // it otherwise, and the move-capture below would never be asked.
+        onStartShouldSetPanResponder: () => true,
+        onMoveShouldSetPanResponderCapture: (event, gesture) =>
+          event.nativeEvent.touches.length >= 2 ||
+          Math.abs(gesture.dx) > 4 ||
+          Math.abs(gesture.dy) > 4,
+        // Never hand the tile over to the swipe-to-minimize of the screen.
+        onPanResponderTerminationRequest: () => false,
+        onPanResponderGrant: () => {
+          position.stopAnimation();
+          width.stopAnimation();
+          height.stopAnimation();
+          pinchScale.stopAnimation();
+          gestureRef.current = { pinching: false, startDistance: 0, scale: 1 };
+        },
+        onPanResponderMove: (event, gesture) => {
+          const touches = event.nativeEvent.touches;
+          const state = gestureRef.current;
+          if (touches.length >= 2) {
+            const distance = touchDistance(touches);
+            if (!state.pinching || state.startDistance <= 0) {
+              state.pinching = true;
+              state.startDistance = distance;
+            } else {
+              state.scale = Math.min(1.8, Math.max(0.6, distance / state.startDistance));
+              pinchScale.setValue(state.scale);
+            }
+          }
+          position.setValue({
+            x: restRef.current.x + gesture.dx,
+            y: restRef.current.y + gesture.dy,
+          });
+        },
+        onPanResponderRelease: (_event, gesture) => {
+          const area = stageRef.current;
+          const state = gestureRef.current;
+          if (state.pinching) {
+            const next: PipTileSize =
+              state.scale >= GROW_RATIO
+                ? 'large'
+                : state.scale <= SHRINK_RATIO
+                  ? 'small'
+                  : sizeRef.current;
+            if (next !== sizeRef.current) {
+              // Keep the size the finger left it at, then let the spring
+              // carry it to the new one, so the tile doesn't jump.
+              const from = PIP_TILE_SIZES[sizeRef.current];
+              width.setValue(from.width * state.scale);
+              height.setValue(from.height * state.scale);
+              pinchScale.setValue(1);
+              sizeRef.current = next;
+              setSize(next);
+            }
+          }
+          if (area) {
+            const tile = PIP_TILE_SIZES[sizeRef.current];
+            const centerX =
+              restRef.current.x + gesture.dx + gesture.vx * FLICK_PROJECTION_MS + tile.width / 2;
+            const centerY =
+              restRef.current.y + gesture.dy + gesture.vy * FLICK_PROJECTION_MS + tile.height / 2;
+            cornerRef.current = {
+              right: centerX > area.width / 2,
+              bottom: centerY > area.height / 2,
+            };
+          }
+          settle(true);
+        },
+        onPanResponderTerminate: () => settle(true),
+      }).panHandlers,
+    [position, width, height, pinchScale, settle]
+  );
+
+  return {
+    /** Put on the area the tile moves within. */
+    onStageLayout,
+    panHandlers,
+    size,
+    /** Hidden until the stage is measured, so it never flashes at 0,0. */
+    style: {
+      position: 'absolute' as const,
+      left: 0,
+      top: 0,
+      width,
+      height,
+      opacity: stage ? 1 : 0,
+      transform: [
+        { translateX: position.x },
+        { translateY: position.y },
+        { scale: pinchScale },
+      ],
+    },
+  };
+};

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

@@ -115,6 +115,15 @@ const en: UiStringTable = {
   'call.action.stopCamera': 'Turn camera off',
   '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',
@@ -495,6 +504,15 @@ const fr: UiStringTable = {
   'call.action.stopCamera': 'Désactiver la caméra',
   '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',
@@ -875,6 +893,15 @@ const es: UiStringTable = {
   'call.action.stopCamera': 'Apagar la cámara',
   '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',
@@ -1255,6 +1282,15 @@ const pt: UiStringTable = {
   'call.action.stopCamera': 'Desligar a câmara',
   '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',
@@ -1635,6 +1671,15 @@ const ht: UiStringTable = {
   'call.action.stopCamera': 'Etenn kamera a',
   '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',
@@ -2015,6 +2060,15 @@ const zh: UiStringTable = {
   'call.action.stopCamera': '关闭摄像头',
   '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.3';
+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"}