@kesha-antonov/react-native-chat 5.0.1 → 6.0.0

package/lib/components/RecordCircle.js

@@ -0,0 +1,629 @@
+import { c as _c } from "react/compiler-runtime";
+import React, { memo, useMemo } from 'react';
+import { StyleSheet, View } from 'react-native';
+import Animated, { Easing, useAnimatedProps, useAnimatedStyle, useFrameCallback, useSharedValue } from 'react-native-reanimated';
+import { useTheme } from '../hooks/useTheme';
+import { getSvg } from '../optional';
+import { Icon } from './Icon';
+import { CameraIcon, MicIcon } from './MediaControls';
+import { PlayPauseIcon } from './PlayPauseIcon';
+import { VOICE_FLIGHT_BLOB_SHARE, easeDefault, easeOutQuint } from './sendFlight';
+import { SendIcon } from './SendIcon';
+
+// Optional SVG for the morphing blobs behind the circle. Without it the circle
+// still grows with the voice, just without the blobs - the same optional-require
+// pattern `VideoNoteOverlay` uses.
+const svg = getSvg();
+const Svg = svg ? svg.Svg ?? svg.default : null;
+const AnimatedPath = svg?.Path ? Animated.createAnimatedComponent(svg.Path) : null;
+
+/** `RecordCircle.circleRadius` / `circleRadiusAmplitude`: 41dp, plus up to 30 with loudness. */
+export const CIRCLE_RADIUS = 41;
+const CIRCLE_RADIUS_AMPLITUDE = 30;
+/** Exit and pause-to-preview both swell the circle by 16dp before it collapses. */
+const EXIT_GROW = 16;
+/** The pause-to-preview morph shrinks the circle to an 8dp dot (`toRadius`). */
+const SEEKBAR_RADIUS = 8;
+/** Icon size inside the circle (`sendRect`, 24dp). */
+const ICON_SIZE = 24;
+/** The voice bubble's play glyph, as `WaveformPlayer` draws it. */
+const FLIGHT_ICON_SIZE = 18;
+/** Room for the largest blob: 57dp scaled by up to 2.3. */
+const BLOB_BOX = 280;
+
+/** How a take's circle leaves. */
+export const EXIT_NONE = 0;
+/** Sent, or released past the cancel point: swell by 16, then collapse (`exitTransition`). */
+export const EXIT_RELEASE = 1;
+/** Slid all the way: spring back into the button (`canceledByGesture`). */
+export const EXIT_GESTURE = 2;
+/** Paused into the preview (`transformToSeekbar`). */
+export const EXIT_PREVIEW = 3;
+
+/** Ease-in-out and ease-out cubic beziers. */
+const easeBoth = Easing.bezierFn(0.42, 0, 0.58, 1);
+const easeOut = Easing.bezierFn(0, 0, 0.58, 1);
+const clamp01 = value => {
+  'worklet';
+
+  return value < 0 ? 0 : value > 1 ? 1 : value;
+};
+
+/**
+ * The circle's entry curve: overshoots to full size halfway through the
+ * 300ms scale, dips to 0.9, then settles (`RecordCircle.onDraw`, `sc`).
+ */
+export const entryCurve = scale => {
+  'worklet';
+
+  if (scale <= 0.5) return scale / 0.5;
+  if (scale <= 0.75) return 1 - (scale - 0.5) / 0.25 * 0.1;
+  return 0.9 + (scale - 0.75) / 0.25 * 0.1;
+};
+/** Radius, alpha and blob scale for one frame, following `RecordCircle.onDraw`. */
+const circleFrame = (scale, amplitude, slide, exit, exitKind) => {
+  'worklet';
+
+  const sc = entryCurve(scale);
+  const isGesture = exitKind === EXIT_GESTURE;
+  const slideScale = isGesture ? 0.7 * easeOut(1 - slide) : 0.7 + 0.3 * slide;
+  let radius = (CIRCLE_RADIUS + CIRCLE_RADIUS_AMPLITUDE * amplitude) * sc * slideScale;
+  let alpha = 1;
+  let step1 = 0;
+  let step2 = 0;
+  let exit2 = 0;
+  if (exitKind === EXIT_PREVIEW) {
+    step1 = easeBoth(clamp01(exit / 0.38));
+    step2 = easeBoth(clamp01((exit - 0.38) / 0.25));
+    const step3 = easeBoth(clamp01((exit - 0.63) / 0.37));
+    radius += EXIT_GROW * step1;
+    radius = SEEKBAR_RADIUS + (radius - SEEKBAR_RADIUS) * (1 - step2);
+    // There is no seekbar under the circle to stretch the dot into, so it
+    // fades into the preview instead.
+    alpha = 1 - step3;
+  } else if (exitKind === EXIT_RELEASE) {
+    step1 = easeBoth(clamp01(exit / 0.6));
+    exit2 = easeBoth(clamp01((exit - 0.6) / 0.4));
+    radius += EXIT_GROW * step1;
+    radius *= 1 - exit2;
+    if (exit > 0.6) alpha = Math.max(0, 1 - (exit - 0.6) / 0.4);
+  }
+  if (isGesture) {
+    if (slide < 1) radius = Math.max(radius, 19);
+    if (slide > 0.7) alpha *= 1 - (slide - 0.7) / 0.3;
+  }
+  const slide1 = slide > 0.7 ? 1 : slide / 0.7;
+  const hasBlobs = !isGesture && step2 < 1 && exit2 < 0.4 && slide1 > 0;
+  return {
+    radius,
+    alpha,
+    blobScale: hasBlobs ? scale * (1 - step1) * slide1 : 0
+  };
+};
+
+/** One blob shape: N points easing towards random targets. */
+
+/** `random.nextInt() % 100 / 100`: -1..1. */
+const signedRandom = () => {
+  'worklet';
+
+  return Math.random() * 2 - 1;
+};
+const generatePoint = (blob, i, isNext) => {
+  'worklet';
+
+  const angleDif = 360 / blob.n * 0.05;
+  const radius = blob.minRadius + Math.random() * (blob.maxRadius - blob.minRadius);
+  const angle = 360 / blob.n * i + signedRandom() * angleDif;
+  if (isNext) {
+    blob.radiusNext[i] = radius;
+    blob.angleNext[i] = angle;
+  } else {
+    blob.radius[i] = radius;
+    blob.angle[i] = angle;
+  }
+  blob.speed[i] = 0.017 + 0.003 * Math.random();
+};
+const createBlob = (n, minRadius, maxRadius) => {
+  'worklet';
+
+  const blob = {
+    n,
+    minRadius,
+    maxRadius,
+    radius: [],
+    angle: [],
+    radiusNext: [],
+    angleNext: [],
+    progress: [],
+    speed: [],
+    amplitude: 0,
+    target: 0,
+    step: 0
+  };
+  for (let i = 0; i < n; i++) {
+    generatePoint(blob, i, false);
+    generatePoint(blob, i, true);
+    blob.progress[i] = 0;
+  }
+  return blob;
+};
+
+/**
+ * Every point eases towards its next target, faster
+ * when louder. The blob steps once per 60fps frame; `frames` scales that to
+ * the real frame time so 120Hz screens do not morph twice as fast.
+ */
+const updateBlob = (blob, speedScale, frames) => {
+  'worklet';
+
+  for (let i = 0; i < blob.n; i++) {
+    blob.progress[i] += (blob.speed[i] * 0.8 + blob.amplitude * blob.speed[i] * 8.2 * speedScale) * frames;
+    if (blob.progress[i] >= 1) {
+      blob.progress[i] = 0;
+      blob.radius[i] = blob.radiusNext[i];
+      blob.angle[i] = blob.angleNext[i];
+      generatePoint(blob, i, true);
+    }
+  }
+};
+
+/**
+ * A new target sets a fixed
+ * per-ms step that is walked until reached. `up` and `down` are the times
+ * a full swing takes in each direction.
+ */
+const stepAmplitude = (blob, target, up, down, dt) => {
+  'worklet';
+
+  if (target !== blob.target) {
+    blob.target = target;
+    blob.step = (target - blob.amplitude) / (target > blob.amplitude ? up : down);
+  }
+  if (blob.amplitude === blob.target) return;
+  blob.amplitude += blob.step * dt;
+  if (blob.step > 0 && blob.amplitude > blob.target || blob.step < 0 && blob.amplitude < blob.target) blob.amplitude = blob.target;
+};
+
+/**
+ * A closed smooth path through the blob's points: one cubic per pair, with
+ * the circle-approximating tangent length 4/3 * tan(pi / 2N).
+ */
+const blobPath = (blob, cx, cy, scale) => {
+  'worklet';
+
+  if (scale <= 0.001) return '';
+  const tangent = 4 / 3 * Math.tan(Math.PI / (2 * blob.n));
+  let d = '';
+  for (let i = 0; i < blob.n; i++) {
+    const j = i + 1 < blob.n ? i + 1 : 0;
+    const p1 = blob.progress[i];
+    const p2 = blob.progress[j];
+    const r1 = blob.radius[i] * (1 - p1) + blob.radiusNext[i] * p1;
+    const r2 = blob.radius[j] * (1 - p2) + blob.radiusNext[j] * p2;
+    const a1 = (blob.angle[i] * (1 - p1) + blob.angleNext[i] * p1) * Math.PI / 180;
+    const a2 = (blob.angle[j] * (1 - p2) + blob.angleNext[j] * p2) * Math.PI / 180;
+    const l = tangent * (r1 + r2) / 2;
+    const cos1 = Math.cos(a1);
+    const sin1 = Math.sin(a1);
+    const cos2 = Math.cos(a2);
+    const sin2 = Math.sin(a2);
+    // Points straight above the centre, rotated clockwise by the point's angle.
+    const sx = cx + r1 * sin1 * scale;
+    const sy = cy + -r1 * cos1 * scale;
+    const c1x = cx + (l * cos1 + r1 * sin1) * scale;
+    const c1y = cy + (l * sin1 - r1 * cos1) * scale;
+    const c2x = cx + (-l * cos2 + r2 * sin2) * scale;
+    const c2y = cy + (-l * sin2 - r2 * cos2) * scale;
+    const ex = cx + r2 * sin2 * scale;
+    const ey = cy + -r2 * cos2 * scale;
+    if (i === 0) d += `M${sx.toFixed(1)} ${sy.toFixed(1)}`;
+    d += `C${c1x.toFixed(1)} ${c1y.toFixed(1)} ${c2x.toFixed(1)} ${c2y.toFixed(1)} ${ex.toFixed(1)} ${ey.toFixed(1)}`;
+  }
+  return d + 'Z';
+};
+/** The shared values behind one `RecordCircle`, owned by the record button. */
+export function useRecordCircleValues() {
+  const $ = _c(13);
+  const enter = useSharedValue(0);
+  const slide = useSharedValue(1);
+  const exit = useSharedValue(0);
+  const exitKind = useSharedValue(EXIT_NONE);
+  const amplitude = useSharedValue(0);
+  const sendMorph = useSharedValue(0);
+  const showWaves = useSharedValue(1);
+  const state = useSharedValue(null);
+  const flight = useSharedValue(0);
+  const flightDX = useSharedValue(0);
+  const flightDY = useSharedValue(0);
+  const flightRadius = useSharedValue(CIRCLE_RADIUS);
+  let t0;
+  if ($[0] !== amplitude || $[1] !== enter || $[2] !== exit || $[3] !== exitKind || $[4] !== flight || $[5] !== flightDX || $[6] !== flightDY || $[7] !== flightRadius || $[8] !== sendMorph || $[9] !== showWaves || $[10] !== slide || $[11] !== state) {
+    t0 = {
+      enter,
+      slide,
+      exit,
+      exitKind,
+      amplitude,
+      sendMorph,
+      showWaves,
+      state,
+      flight,
+      flightDX,
+      flightDY,
+      flightRadius
+    };
+    $[0] = amplitude;
+    $[1] = enter;
+    $[2] = exit;
+    $[3] = exitKind;
+    $[4] = flight;
+    $[5] = flightDX;
+    $[6] = flightDY;
+    $[7] = flightRadius;
+    $[8] = sendMorph;
+    $[9] = showWaves;
+    $[10] = slide;
+    $[11] = state;
+    $[12] = t0;
+  } else {
+    t0 = $[12];
+  }
+  return t0;
+}
+
+/** The raw RMS is divided by 1800. */
+const MAX_AMPLITUDE = 1800;
+const METERING_FLOOR_DB = -60;
+
+/**
+ * Our level is metering mapped linearly from -60..0 dB; the circle's amplitude
+ * is the sample RMS over 1800, which is full scale from about -25 dBFS. Back
+ * to dB, then to that scale, so the circle swells by the intended amount.
+ */
+export const levelToAmplitude = level => {
+  if (!Number.isFinite(level) || level <= 0) return 0;
+  const db = METERING_FLOOR_DB + Math.min(1, level) * -METERING_FLOOR_DB;
+  return Math.min(1, Math.pow(10, db / 20) * 32768 / MAX_AMPLITUDE);
+};
+const BLOB_CENTER = BLOB_BOX / 2;
+
+/** The icon keeps its size and only shrinks, and fades, with the circle. */
+const iconFrame = (scale, amplitude, slide, exit, exitKind) => {
+  'worklet';
+
+  const {
+    radius,
+    alpha
+  } = circleFrame(scale, amplitude, slide, exit, exitKind);
+  return {
+    scale: Math.min(1, radius / CIRCLE_RADIUS),
+    alpha
+  };
+};
+
+/**
+ * The record circle: the big accent circle over the composer while a
+ * take records, swelling with the voice, with two morphing blobs behind it.
+ * Purely visual - the touch stays on the record button underneath.
+ */
+export const RecordCircle = memo(function RecordCircle(t0) {
+  const $ = _c(37);
+  const {
+    mode,
+    values,
+    slideDistance,
+    cancelSign,
+    flightColor,
+    flightIconColor
+  } = t0;
+  const {
+    colors
+  } = useTheme();
+  const {
+    enter,
+    slide,
+    exit,
+    exitKind,
+    amplitude,
+    sendMorph,
+    showWaves,
+    state,
+    flight,
+    flightDX,
+    flightDY,
+    flightRadius
+  } = values;
+  const circleAmplitude = useSharedValue(0);
+  const bigPath = useSharedValue("");
+  const tinyPath = useSharedValue("");
+  const hasBlobs = !!AnimatedPath;
+  useFrameCallback(info => {
+    "worklet";
+
+    const dt = Math.min(64, info.timeSincePreviousFrame ?? 16);
+    const frames = dt / 16.666666666666668;
+    let current = state.get();
+    if (!current) {
+      current = {
+        circle: createBlob(0, 0, 0),
+        big: createBlob(12, 50, 57.2),
+        tiny: createBlob(11, 47, 56),
+        waves: 0
+      };
+      state.set(current);
+    }
+    const target = amplitude.value;
+    stepAmplitude(current.circle, target, 375, 375, dt);
+    circleAmplitude.set(current.circle.amplitude);
+    if (!hasBlobs) {
+      return;
+    }
+    stepAmplitude(current.big, target, 205, 275, dt);
+    stepAmplitude(current.tiny, target, 320, 375, dt);
+    updateBlob(current.big, 1.01, frames);
+    updateBlob(current.tiny, 1.02, frames);
+    if (showWaves.value > 0 && current.waves < 1) {
+      current.waves = Math.min(1, current.waves + 0.04 * frames);
+    }
+    const {
+      blobScale
+    } = circleFrame(enter.value, current.circle.amplitude, slide.value, exit.value, exitKind.value);
+    const flightWaves = 1 - clamp01(flight.value / VOICE_FLIGHT_BLOB_SHARE);
+    const waves = easeOut(current.waves) * blobScale * flightWaves;
+    bigPath.set(blobPath(current.big, BLOB_CENTER, BLOB_CENTER, waves * (0.878 + 1.4 * current.big.amplitude)));
+    tinyPath.set(blobPath(current.tiny, BLOB_CENTER, BLOB_CENTER, waves * (0.926 + 1.4 * current.tiny.amplitude)));
+  });
+  const moveStyle = useAnimatedStyle(() => ({
+    transform: [{
+      translateX: cancelSign * slideDistance * (1 - slide.value) + flightDX.value * easeOutQuint(flight.value)
+    }, {
+      translateY: flightDY.value * easeDefault(flight.value)
+    }]
+  }));
+  const flightFrame = () => {
+    "worklet";
+
+    const {
+      radius,
+      alpha
+    } = circleFrame(enter.value, circleAmplitude.value, slide.value, exit.value, exitKind.value);
+    const p = easeDefault(flight.value);
+    return {
+      radius: radius + (flightRadius.value - radius) * p,
+      alpha,
+      p
+    };
+  };
+  const circleStyle = useAnimatedStyle(() => {
+    const {
+      radius: radius_0,
+      alpha: alpha_0
+    } = flightFrame();
+    return {
+      opacity: alpha_0,
+      transform: [{
+        scale: radius_0 / CIRCLE_RADIUS
+      }]
+    };
+  });
+  const flightDiscStyle = useAnimatedStyle(() => {
+    const {
+      radius: radius_1,
+      p: p_0
+    } = flightFrame();
+    return {
+      opacity: flight.value > 0 ? p_0 : 0,
+      transform: [{
+        scale: radius_1 / CIRCLE_RADIUS
+      }]
+    };
+  });
+  const flightIconStyle = useAnimatedStyle(() => {
+    const {
+      radius: radius_2,
+      p: p_1
+    } = flightFrame();
+    return {
+      opacity: flight.value > 0 ? p_1 : 0,
+      transform: [{
+        scale: radius_2 / Math.max(1, flightRadius.value)
+      }]
+    };
+  });
+  const recordIconStyle = useAnimatedStyle(() => {
+    const {
+      scale,
+      alpha: alpha_1
+    } = iconFrame(enter.value, circleAmplitude.value, slide.value, exit.value, exitKind.value);
+    const morph = sendMorph.value;
+    return {
+      opacity: alpha_1 * (1 - morph) * (1 - flight.value),
+      transform: [{
+        scale: scale * (1 - morph)
+      }]
+    };
+  });
+  const sendIconStyle = useAnimatedStyle(() => {
+    const {
+      scale: scale_0,
+      alpha: alpha_2
+    } = iconFrame(enter.value, circleAmplitude.value, slide.value, exit.value, exitKind.value);
+    const morph_0 = sendMorph.value;
+    return {
+      opacity: alpha_2 * morph_0 * (1 - flight.value),
+      transform: [{
+        scale: scale_0 * morph_0
+      }]
+    };
+  });
+  const bigProps = useAnimatedProps(() => ({
+    d: bigPath.value
+  }));
+  const tinyProps = useAnimatedProps(() => ({
+    d: tinyPath.value
+  }));
+  let t1;
+  if ($[0] !== moveStyle) {
+    t1 = [styles.anchor, moveStyle];
+    $[0] = moveStyle;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let t2;
+  if ($[2] !== bigProps || $[3] !== colors.accent || $[4] !== tinyProps) {
+    t2 = hasBlobs && <Svg width={BLOB_BOX} height={BLOB_BOX} style={styles.blobs}><AnimatedPath animatedProps={bigProps} fill={colors.accent} fillOpacity={0.3} /><AnimatedPath animatedProps={tinyProps} fill={colors.accent} fillOpacity={0.15} /></Svg>;
+    $[2] = bigProps;
+    $[3] = colors.accent;
+    $[4] = tinyProps;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  let t3;
+  if ($[6] !== colors.accent) {
+    t3 = {
+      backgroundColor: colors.accent
+    };
+    $[6] = colors.accent;
+    $[7] = t3;
+  } else {
+    t3 = $[7];
+  }
+  let t4;
+  if ($[8] !== circleStyle || $[9] !== t3) {
+    t4 = <Animated.View style={[styles.circle, t3, circleStyle]} />;
+    $[8] = circleStyle;
+    $[9] = t3;
+    $[10] = t4;
+  } else {
+    t4 = $[10];
+  }
+  let t5;
+  if ($[11] !== flightColor || $[12] !== flightDiscStyle) {
+    t5 = !!flightColor && <Animated.View style={[styles.circle, {
+      backgroundColor: flightColor
+    }, flightDiscStyle]} />;
+    $[11] = flightColor;
+    $[12] = flightDiscStyle;
+    $[13] = t5;
+  } else {
+    t5 = $[13];
+  }
+  let t6;
+  if ($[14] !== recordIconStyle) {
+    t6 = [styles.icon, recordIconStyle];
+    $[14] = recordIconStyle;
+    $[15] = t6;
+  } else {
+    t6 = $[15];
+  }
+  let t7;
+  if ($[16] !== mode) {
+    t7 = mode === "video" ? <Icon name="camera" color="#fff" size={ICON_SIZE} fallback={<CameraIcon color="#fff" size={ICON_SIZE} />} /> : <Icon name="mic" color="#fff" size={ICON_SIZE} fallback={<MicIcon color="#fff" size={ICON_SIZE} />} />;
+    $[16] = mode;
+    $[17] = t7;
+  } else {
+    t7 = $[17];
+  }
+  let t8;
+  if ($[18] !== t6 || $[19] !== t7) {
+    t8 = <Animated.View style={t6}>{t7}</Animated.View>;
+    $[18] = t6;
+    $[19] = t7;
+    $[20] = t8;
+  } else {
+    t8 = $[20];
+  }
+  let t9;
+  if ($[21] !== sendIconStyle) {
+    t9 = [styles.icon, sendIconStyle];
+    $[21] = sendIconStyle;
+    $[22] = t9;
+  } else {
+    t9 = $[22];
+  }
+  let t10;
+  if ($[23] === Symbol.for("react.memo_cache_sentinel")) {
+    t10 = <Icon name="send" color="#fff" size={ICON_SIZE} fallback={<SendIcon color="#fff" size={ICON_SIZE} />} />;
+    $[23] = t10;
+  } else {
+    t10 = $[23];
+  }
+  let t11;
+  if ($[24] !== t9) {
+    t11 = <Animated.View style={t9}>{t10}</Animated.View>;
+    $[24] = t9;
+    $[25] = t11;
+  } else {
+    t11 = $[25];
+  }
+  let t12;
+  if ($[26] !== flightIconColor || $[27] !== flightIconStyle) {
+    t12 = !!flightIconColor && <Animated.View style={[styles.flightIcon, flightIconStyle]}><PlayPauseIcon isPlaying={false} color={flightIconColor} size={FLIGHT_ICON_SIZE} /></Animated.View>;
+    $[26] = flightIconColor;
+    $[27] = flightIconStyle;
+    $[28] = t12;
+  } else {
+    t12 = $[28];
+  }
+  let t13;
+  if ($[29] !== t1 || $[30] !== t11 || $[31] !== t12 || $[32] !== t2 || $[33] !== t4 || $[34] !== t5 || $[35] !== t8) {
+    t13 = <View style={styles.anchor} pointerEvents="none"><Animated.View style={t1}>{t2}{t4}{t5}{t8}{t11}{t12}</Animated.View></View>;
+    $[29] = t1;
+    $[30] = t11;
+    $[31] = t12;
+    $[32] = t2;
+    $[33] = t4;
+    $[34] = t5;
+    $[35] = t8;
+    $[36] = t13;
+  } else {
+    t13 = $[36];
+  }
+  return t13;
+});
+const styles = StyleSheet.create({
+  // A zero-size point on the record button's centre; everything hangs off it.
+  anchor: {
+    position: 'absolute',
+    left: '50%',
+    top: '50%',
+    width: 0,
+    height: 0,
+    zIndex: 3
+  },
+  blobs: {
+    position: 'absolute',
+    left: -BLOB_CENTER,
+    top: -BLOB_CENTER
+  },
+  circle: {
+    position: 'absolute',
+    left: -CIRCLE_RADIUS,
+    top: -CIRCLE_RADIUS,
+    width: CIRCLE_RADIUS * 2,
+    height: CIRCLE_RADIUS * 2,
+    borderRadius: CIRCLE_RADIUS
+  },
+  flightIcon: {
+    position: 'absolute',
+    left: -FLIGHT_ICON_SIZE / 2,
+    top: -FLIGHT_ICON_SIZE / 2,
+    width: FLIGHT_ICON_SIZE,
+    height: FLIGHT_ICON_SIZE,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  icon: {
+    position: 'absolute',
+    left: -ICON_SIZE / 2,
+    top: -ICON_SIZE / 2,
+    width: ICON_SIZE,
+    height: ICON_SIZE,
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+});
+//# sourceMappingURL=RecordCircle.js.map