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

package/lib/components/VideoNoteOverlay.js

@@ -1,151 +1,738 @@
-import React, { useMemo } from 'react';
+import { c as _c } from "react/compiler-runtime";
+import React, { useEffect, useId, useMemo } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
-import { CloseIcon } from './MediaControls';
-// Optional SVG, used to draw the circular progress ring. When absent the note
-// still plays, just without the ring - the same optional-require pattern the
-// recorder uses.
-let Svg = null;
-let SvgCircle = null;
-try {
-    const svg = require('react-native-svg');
-    Svg = svg.Svg ?? svg.default;
-    SvgCircle = svg.Circle;
-}
-catch {
-    Svg = null;
-    SvgCircle = null;
-}
-const formatTime = (seconds) => {
-    if (!Number.isFinite(seconds) || seconds < 0)
-        seconds = 0;
-    const mins = Math.floor(seconds / 60);
-    const secs = Math.floor(seconds % 60);
-    return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
+import Animated, { useAnimatedProps, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
+import { useTheme } from '../hooks/useTheme';
+import { getSvg } from '../optional';
+import { PlayIcon } from './MediaControls';
+import { PlayingBars, UnreadDot } from './NoteIndicators';
+import { KNOB_DRAG_GAIN, KNOB_PAUSED_GAIN, KNOB_RADIUS, RING_OPACITY, RING_PAUSED_STROKE_GAIN, RING_STROKE, TRACK_OPACITY, pausedAmount, ringRadius } from './roundNoteChrome';
+import { ViewOnceBadge } from './ViewOnceBadge';
+
+/** The play <-> none transition on a media button. */
+const BADGE_MS = 220;
+
+/** A badge that scales and fades in or out instead of popping. */
+const FadingBadge = t0 => {
+  const $ = _c(10);
+  const {
+    isVisible,
+    style,
+    children
+  } = t0;
+  const visibility = useSharedValue(isVisible ? 1 : 0);
+  let t1;
+  let t2;
+  if ($[0] !== isVisible || $[1] !== visibility) {
+    t1 = () => {
+      visibility.value = withTiming(isVisible ? 1 : 0, {
+        duration: BADGE_MS
+      });
+    };
+    t2 = [isVisible, visibility];
+    $[0] = isVisible;
+    $[1] = visibility;
+    $[2] = t1;
+    $[3] = t2;
+  } else {
+    t1 = $[2];
+    t2 = $[3];
+  }
+  useEffect(t1, t2);
+  const animatedStyle = useAnimatedStyle(() => ({
+    opacity: visibility.value,
+    transform: [{
+      scale: visibility.value
+    }]
+  }));
+  let t3;
+  if ($[4] !== animatedStyle || $[5] !== style) {
+    t3 = [style, animatedStyle];
+    $[4] = animatedStyle;
+    $[5] = style;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  let t4;
+  if ($[7] !== children || $[8] !== t3) {
+    t4 = <Animated.View style={t3}>{children}</Animated.View>;
+    $[7] = children;
+    $[8] = t3;
+    $[9] = t4;
+  } else {
+    t4 = $[9];
+  }
+  return t4;
 };
+
+// Optional SVG, used to draw the ring, the paused knob and its vignette. When
+// absent the note still plays, just without them - the same optional-require
+// pattern the recorder uses.
+const svg = getSvg();
+const Svg = svg ? svg.Svg ?? svg.default : null;
+const SvgCircle = svg?.Circle ?? null;
+const SvgDefs = svg?.Defs ?? null;
+const SvgRadialGradient = svg?.RadialGradient ?? null;
+const SvgStop = svg?.Stop ?? null;
+const AnimatedCircle = SvgCircle ? Animated.createAnimatedComponent(SvgCircle) : null;
+const formatTime = seconds => {
+  if (!Number.isFinite(seconds) || seconds < 0) seconds = 0;
+  const mins = Math.floor(seconds / 60);
+  const secs = Math.floor(seconds % 60);
+  return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
+};
+
 /** A speaker glyph, crossed through when muted. */
-const SpeakerIcon = ({ size = 14, isMuted }) => {
-    const styles = useMemo(() => createSpeakerStyles(size), [size]);
-    return (<View style={styles.wrapper}>
-      <View style={styles.body}/>
-      <View style={styles.cone}/>
-      {isMuted && <View style={styles.slash}/>}
-    </View>);
+export const SpeakerIcon = t0 => {
+  const $ = _c(14);
+  const {
+    size: t1,
+    isMuted
+  } = t0;
+  const size = t1 === undefined ? 14 : t1;
+  let t2;
+  if ($[0] !== size) {
+    t2 = createSpeakerStyles(size);
+    $[0] = size;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  const styles = t2;
+  let t3;
+  if ($[2] !== styles.body) {
+    t3 = <View style={styles.body} />;
+    $[2] = styles.body;
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  let t4;
+  if ($[4] !== styles.cone) {
+    t4 = <View style={styles.cone} />;
+    $[4] = styles.cone;
+    $[5] = t4;
+  } else {
+    t4 = $[5];
+  }
+  let t5;
+  if ($[6] !== isMuted || $[7] !== styles.slash) {
+    t5 = isMuted && <View style={styles.slash} />;
+    $[6] = isMuted;
+    $[7] = styles.slash;
+    $[8] = t5;
+  } else {
+    t5 = $[8];
+  }
+  let t6;
+  if ($[9] !== styles.wrapper || $[10] !== t3 || $[11] !== t4 || $[12] !== t5) {
+    t6 = <View style={styles.wrapper}>{t3}{t4}{t5}</View>;
+    $[9] = styles.wrapper;
+    $[10] = t3;
+    $[11] = t4;
+    $[12] = t5;
+    $[13] = t6;
+  } else {
+    t6 = $[13];
+  }
+  return t6;
 };
+/** `drawRadialProgress` puts the period badge 18dp right and down of the play button's centre. */
+const ROUND_VIEW_ONCE_OFFSET = 18;
+/** The play button's own dim, which the badge disc shares. */
+const BADGE_BACKGROUND = 'rgba(0, 0, 0, 0.45)';
+
+/** The vignette: clear to 70% of the radius, then black at 40/255. */
+const VIGNETTE_OPACITY = 40 / 255;
+
 /**
- * Chrome drawn *on* a round video note: the progress ring sweeping its edge, a
- * mute badge while it is silent, and a stop target once it is playing.
+ * The darkened rim behind a paused note's knob, so the white ring reads over
+ * a bright frame. It fades in with the pause.
  *
- * The duration is deliberately not here - Telegram renders it under the circle
+ * Drawn once at the grown size and scaled with the note: a static SVG is not
+ * redrawn when its view resizes, so a percentage-sized one kept the note's
+ * resting size and sat in the top-left corner of a grown note.
+ */
+const Vignette = t0 => {
+  const $ = _c(27);
+  const {
+    size,
+    maxSize,
+    chrome
+  } = t0;
+  const t1 = useId();
+  let t2;
+  if ($[0] !== t1) {
+    let t3;
+    if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+      t3 = /[^a-zA-Z0-9_-]/g;
+      $[2] = t3;
+    } else {
+      t3 = $[2];
+    }
+    t2 = t1.replace(t3, "");
+    $[0] = t1;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  const id = `note-vignette-${t2}`;
+  const style = useAnimatedStyle(() => ({
+    opacity: chrome.pause.value,
+    transform: [{
+      scale: maxSize > 0 ? size.value / maxSize : 1
+    }]
+  }));
+  const t3 = -maxSize / 2;
+  const t4 = -maxSize / 2;
+  let t5;
+  if ($[3] !== maxSize || $[4] !== t3 || $[5] !== t4) {
+    t5 = {
+      width: maxSize,
+      height: maxSize,
+      marginLeft: t3,
+      marginTop: t4
+    };
+    $[3] = maxSize;
+    $[4] = t3;
+    $[5] = t4;
+    $[6] = t5;
+  } else {
+    t5 = $[6];
+  }
+  let t6;
+  if ($[7] !== style || $[8] !== t5) {
+    t6 = [styles.vignette, t5, style];
+    $[7] = style;
+    $[8] = t5;
+    $[9] = t6;
+  } else {
+    t6 = $[9];
+  }
+  let t7;
+  let t8;
+  let t9;
+  if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+    t7 = <SvgStop offset="0" stopColor="#000000" stopOpacity={0} />;
+    t8 = <SvgStop offset="0.7" stopColor="#000000" stopOpacity={0} />;
+    t9 = <SvgStop offset="1" stopColor="#000000" stopOpacity={VIGNETTE_OPACITY} />;
+    $[10] = t7;
+    $[11] = t8;
+    $[12] = t9;
+  } else {
+    t7 = $[10];
+    t8 = $[11];
+    t9 = $[12];
+  }
+  let t10;
+  if ($[13] !== id) {
+    t10 = <SvgDefs><SvgRadialGradient id={id} cx="50%" cy="50%" r="50%">{t7}{t8}{t9}</SvgRadialGradient></SvgDefs>;
+    $[13] = id;
+    $[14] = t10;
+  } else {
+    t10 = $[14];
+  }
+  const t11 = maxSize / 2;
+  const t12 = maxSize / 2;
+  const t13 = maxSize / 2;
+  const t14 = `url(#${id})`;
+  let t15;
+  if ($[15] !== t11 || $[16] !== t12 || $[17] !== t13 || $[18] !== t14) {
+    t15 = <SvgCircle cx={t11} cy={t12} r={t13} fill={t14} />;
+    $[15] = t11;
+    $[16] = t12;
+    $[17] = t13;
+    $[18] = t14;
+    $[19] = t15;
+  } else {
+    t15 = $[19];
+  }
+  let t16;
+  if ($[20] !== maxSize || $[21] !== t10 || $[22] !== t15) {
+    t16 = <Svg width={maxSize} height={maxSize}>{t10}{t15}</Svg>;
+    $[20] = maxSize;
+    $[21] = t10;
+    $[22] = t15;
+    $[23] = t16;
+  } else {
+    t16 = $[23];
+  }
+  let t17;
+  if ($[24] !== t16 || $[25] !== t6) {
+    t17 = <Animated.View style={t6}>{t16}</Animated.View>;
+    $[24] = t16;
+    $[25] = t6;
+    $[26] = t17;
+  } else {
+    t17 = $[26];
+  }
+  return t17;
+};
+
+/**
+ * The round progress: the elapsed arc, and once paused a full
+ * track, a knob at the playhead, and the arc a wrap past 12 o'clock leaves
+ * behind. All of it is driven on the UI thread from `chrome`.
+ *
+ * The SVG is turned a quarter back so its circles start at 12 o'clock, which
+ * is why the knob below is placed with cos / sin swapped from the note's own
+ * coordinates (`knobPoint`).
+ */
+const Ring = t0 => {
+  const $ = _c(19);
+  const {
+    size,
+    maxSize,
+    chrome
+  } = t0;
+  const dash = Math.PI * maxSize;
+  let t1;
+  if ($[0] !== dash) {
+    t1 = [dash, dash];
+    $[0] = dash;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const dashArray = t1;
+  const trackProps = useAnimatedProps(() => {
+    const pause = pausedAmount(chrome.pause.value, chrome.isPaused.value);
+    return {
+      r: Math.max(0, ringRadius(size.value, chrome.grow.value, pause)),
+      strokeWidth: RING_STROKE * (1 + RING_PAUSED_STROKE_GAIN * chrome.pause.value),
+      strokeOpacity: RING_OPACITY * TRACK_OPACITY * chrome.pause.value * chrome.ringAlpha.value
+    };
+  });
+  const arcProps = (progress, alpha) => {
+    "worklet";
+
+    const pause_0 = pausedAmount(chrome.pause.value, chrome.isPaused.value);
+    const radius = Math.max(0, ringRadius(size.value, chrome.grow.value, pause_0));
+    return {
+      r: radius,
+      strokeWidth: RING_STROKE * (1 + RING_PAUSED_STROKE_GAIN * chrome.pause.value),
+      strokeDashoffset: dash - 2 * Math.PI * radius * Math.max(0, Math.min(1, progress)),
+      strokeOpacity: RING_OPACITY * chrome.ringAlpha.value * alpha
+    };
+  };
+  const progressProps = useAnimatedProps(() => arcProps(chrome.progress.value, 1 - chrome.wrapAlpha.value));
+  const wrapProps = useAnimatedProps(() => arcProps(chrome.wrapProgress.value, chrome.wrapAlpha.value));
+  const knobStyle = useAnimatedStyle(() => {
+    const pause_1 = pausedAmount(chrome.pause.value, chrome.isPaused.value);
+    const radius_0 = ringRadius(size.value, chrome.grow.value, pause_1);
+    const angle = 2 * Math.PI * chrome.progress.value;
+    const knob = Math.max(0, KNOB_RADIUS + KNOB_PAUSED_GAIN * pause_1 + KNOB_DRAG_GAIN * chrome.drag.value);
+    return {
+      width: knob * 2,
+      height: knob * 2,
+      borderRadius: knob,
+      marginLeft: -knob,
+      marginTop: -knob,
+      opacity: Math.min(1, Math.max(0, pause_1)) * chrome.ringAlpha.value,
+      transform: [{
+        translateX: radius_0 * Math.sin(angle)
+      }, {
+        translateY: -radius_0 * Math.cos(angle)
+      }]
+    };
+  });
+  let t2;
+  if ($[2] !== trackProps) {
+    t2 = <AnimatedCircle animatedProps={trackProps} cx="50%" cy="50%" stroke="#FFFFFF" fill="none" />;
+    $[2] = trackProps;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  let t3;
+  if ($[4] !== dashArray || $[5] !== wrapProps) {
+    t3 = <AnimatedCircle animatedProps={wrapProps} cx="50%" cy="50%" stroke="#FFFFFF" fill="none" strokeLinecap="round" strokeDasharray={dashArray} />;
+    $[4] = dashArray;
+    $[5] = wrapProps;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  let t4;
+  if ($[7] !== dashArray || $[8] !== progressProps) {
+    t4 = <AnimatedCircle animatedProps={progressProps} cx="50%" cy="50%" stroke="#FFFFFF" fill="none" strokeLinecap="round" strokeDasharray={dashArray} />;
+    $[7] = dashArray;
+    $[8] = progressProps;
+    $[9] = t4;
+  } else {
+    t4 = $[9];
+  }
+  let t5;
+  if ($[10] !== t2 || $[11] !== t3 || $[12] !== t4) {
+    t5 = <Svg width="100%" height="100%" style={styles.ringRotation}>{t2}{t3}{t4}</Svg>;
+    $[10] = t2;
+    $[11] = t3;
+    $[12] = t4;
+    $[13] = t5;
+  } else {
+    t5 = $[13];
+  }
+  let t6;
+  if ($[14] !== knobStyle) {
+    t6 = <Animated.View style={[styles.knob, knobStyle]} />;
+    $[14] = knobStyle;
+    $[15] = t6;
+  } else {
+    t6 = $[15];
+  }
+  let t7;
+  if ($[16] !== t5 || $[17] !== t6) {
+    t7 = <View style={StyleSheet.absoluteFill}>{t5}{t6}</View>;
+    $[16] = t5;
+    $[17] = t6;
+    $[18] = t7;
+  } else {
+    t7 = $[18];
+  }
+  return t7;
+};
+
+/**
+ * Chrome drawn *on* a round video note: the progress ring sweeping its edge,
+ * the paused scrubber, a mute badge while it loops silently, and a play
+ * button while it rests. Nothing sits in the middle of a current note,
+ * playing or paused - a paused one shows its knob
+ * instead.
+ *
+ * The duration is deliberately not here - it belongs under the circle
  * on the chat background, so it lives in `MessageVideo` beside the note.
  *
  * Non-interactive: the note's own press target handles taps.
  */
-export function VideoNoteOverlay({ size, progress, isMuted, isPlaying, }) {
-    const stroke = 3;
-    const radius = size / 2 - stroke / 2;
-    const circumference = 2 * Math.PI * radius;
-    const clamped = Math.max(0, Math.min(1, progress));
-    return (<View style={StyleSheet.absoluteFill} pointerEvents='none'>
-      {SvgCircle && clamped > 0 && (<Svg width={size} height={size} style={StyleSheet.absoluteFill}>
-          {/* Only the elapsed arc, no track - matching Telegram. */}
-          <SvgCircle cx={size / 2} cy={size / 2} r={radius} stroke='#FFFFFF' strokeWidth={stroke} fill='none' strokeLinecap='round' strokeDasharray={circumference} strokeDashoffset={circumference * (1 - clamped)} transform={`rotate(-90 ${size / 2} ${size / 2})`}/>
-        </Svg>)}
-
-      {isPlaying
-            ? (
-            // Playing: a stop target in the middle, as Telegram shows.
-            <View style={styles.centerBadge}>
-            <CloseIcon color='#fff' size={18}/>
-          </View>)
-            : isMuted && (<View style={styles.muteBadge}>
-            <SpeakerIcon isMuted size={14}/>
-          </View>)}
-    </View>);
+export function VideoNoteOverlay(t0) {
+  const $ = _c(27);
+  const {
+    size,
+    maxSize,
+    chrome,
+    isCurrent,
+    isMuted,
+    isViewOnce: t1,
+    hasViewOnceStarted: t2,
+    isDisabled: t3,
+    isPlayHidden: t4
+  } = t0;
+  const isViewOnce = t1 === undefined ? false : t1;
+  const hasViewOnceStarted = t2 === undefined ? false : t2;
+  const isDisabled = t3 === undefined ? false : t3;
+  const isPlayHidden = t4 === undefined ? false : t4;
+  let t5;
+  if ($[0] !== chrome || $[1] !== maxSize || $[2] !== size) {
+    t5 = Svg && SvgRadialGradient && SvgStop && SvgDefs && <Vignette size={size} maxSize={maxSize} chrome={chrome} />;
+    $[0] = chrome;
+    $[1] = maxSize;
+    $[2] = size;
+    $[3] = t5;
+  } else {
+    t5 = $[3];
+  }
+  let t6;
+  if ($[4] !== chrome || $[5] !== maxSize || $[6] !== size) {
+    t6 = Svg && AnimatedCircle && <Ring size={size} maxSize={maxSize} chrome={chrome} />;
+    $[4] = chrome;
+    $[5] = maxSize;
+    $[6] = size;
+    $[7] = t6;
+  } else {
+    t6 = $[7];
+  }
+  const t7 = !isCurrent && isMuted;
+  let t8;
+  if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+    t8 = <SpeakerIcon isMuted={true} size={14} />;
+    $[8] = t8;
+  } else {
+    t8 = $[8];
+  }
+  let t9;
+  if ($[9] !== t7) {
+    t9 = <FadingBadge isVisible={t7} style={styles.muteBadge}>{t8}</FadingBadge>;
+    $[9] = t7;
+    $[10] = t9;
+  } else {
+    t9 = $[10];
+  }
+  const t10 = !isCurrent && !isMuted && !isPlayHidden;
+  const t11 = isDisabled && styles.disabled;
+  let t12;
+  if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+    t12 = <PlayIcon color="#fff" size={18} />;
+    $[11] = t12;
+  } else {
+    t12 = $[11];
+  }
+  let t13;
+  if ($[12] !== t11) {
+    t13 = <View style={t11}>{t12}</View>;
+    $[12] = t11;
+    $[13] = t13;
+  } else {
+    t13 = $[13];
+  }
+  let t14;
+  if ($[14] !== t10 || $[15] !== t13) {
+    t14 = <FadingBadge isVisible={t10} style={styles.centerBadge}>{t13}</FadingBadge>;
+    $[14] = t10;
+    $[15] = t13;
+    $[16] = t14;
+  } else {
+    t14 = $[16];
+  }
+  let t15;
+  if ($[17] !== hasViewOnceStarted || $[18] !== isCurrent || $[19] !== isViewOnce) {
+    t15 = isViewOnce && <View style={styles.viewOnceAnchor}><ViewOnceBadge isVisible={!isCurrent && !hasViewOnceStarted} color={BADGE_BACKGROUND} glyphColor="#fff" cutColor="transparent" offset={ROUND_VIEW_ONCE_OFFSET} /></View>;
+    $[17] = hasViewOnceStarted;
+    $[18] = isCurrent;
+    $[19] = isViewOnce;
+    $[20] = t15;
+  } else {
+    t15 = $[20];
+  }
+  let t16;
+  if ($[21] !== t14 || $[22] !== t15 || $[23] !== t5 || $[24] !== t6 || $[25] !== t9) {
+    t16 = <View style={StyleSheet.absoluteFill} pointerEvents="none">{t5}{t6}{t9}{t14}{t15}</View>;
+    $[21] = t14;
+    $[22] = t15;
+    $[23] = t5;
+    $[24] = t6;
+    $[25] = t9;
+    $[26] = t16;
+  } else {
+    t16 = $[26];
+  }
+  return t16;
 }
-/** Duration and unwatched dot, rendered under the note on the chat background. */
-export function VideoNoteMeta({ duration, isWatched, }) {
-    if (duration == null)
-        return null;
-    return (<View style={styles.metaRow}>
-      <Text style={styles.metaText}>{formatTime(duration)}</Text>
-      {!isWatched && <View style={styles.unwatchedDot}/>}
-    </View>);
+
+/** The duration pill: 17dp tall, 6dp corners, 8dp in from the note. */
+const META_HEIGHT = 17;
+const META_LEFT = 8;
+/** An outgoing note's pill rides right by a fifth of the grow (`offsetSize`). */
+const META_OUTGOING_SHIFT = 0.2;
+/** The pill paints the service colour at half its own opacity. */
+const META_BACKGROUND_OPACITY = 0.5;
+
+/**
+ * The length in a small pill at the note's bottom-left.
+ * Beside it the unread dot, which shrinks into playing bars once the note is
+ * heard; the bars move while it plays and hold still while it is paused.
+ */
+export function VideoNoteMeta(t0) {
+  const $ = _c(20);
+  const {
+    duration,
+    isWatched,
+    isPlaying,
+    grow,
+    growDistance: t1,
+    isOutgoing: t2
+  } = t0;
+  const growDistance = t1 === undefined ? 0 : t1;
+  const isOutgoing = t2 === undefined ? false : t2;
+  const theme = useTheme();
+  const shift = isOutgoing ? growDistance * META_OUTGOING_SHIFT : 0;
+  const shiftStyle = useAnimatedStyle(() => ({
+    transform: [{
+      translateX: shift * (grow?.value ?? 0)
+    }]
+  }));
+  if (duration == null) {
+    return null;
+  }
+  const color = theme.colors.dayPillText;
+  let t3;
+  if ($[0] !== shiftStyle) {
+    t3 = [styles.metaPill, shiftStyle];
+    $[0] = shiftStyle;
+    $[1] = t3;
+  } else {
+    t3 = $[1];
+  }
+  let t4;
+  if ($[2] !== theme.colors.dayPillBackground) {
+    t4 = <View style={[styles.metaBackground, {
+      backgroundColor: theme.colors.dayPillBackground
+    }]} />;
+    $[2] = theme.colors.dayPillBackground;
+    $[3] = t4;
+  } else {
+    t4 = $[3];
+  }
+  let t5;
+  if ($[4] !== color) {
+    t5 = [styles.metaText, {
+      color
+    }];
+    $[4] = color;
+    $[5] = t5;
+  } else {
+    t5 = $[5];
+  }
+  let t6;
+  if ($[6] !== duration) {
+    t6 = formatTime(duration);
+    $[6] = duration;
+    $[7] = t6;
+  } else {
+    t6 = $[7];
+  }
+  let t7;
+  if ($[8] !== t5 || $[9] !== t6) {
+    t7 = <Text style={t5}>{t6}</Text>;
+    $[8] = t5;
+    $[9] = t6;
+    $[10] = t7;
+  } else {
+    t7 = $[10];
+  }
+  let t8;
+  if ($[11] !== color || $[12] !== isPlaying || $[13] !== isWatched) {
+    t8 = <View style={styles.metaIndicator}>{isWatched || isPlaying ? <PlayingBars isAnimating={isPlaying} color={color} /> : <UnreadDot isVisible={true} color={color} />}</View>;
+    $[11] = color;
+    $[12] = isPlaying;
+    $[13] = isWatched;
+    $[14] = t8;
+  } else {
+    t8 = $[14];
+  }
+  let t9;
+  if ($[15] !== t3 || $[16] !== t4 || $[17] !== t7 || $[18] !== t8) {
+    t9 = <Animated.View style={t3} pointerEvents="none">{t4}{t7}{t8}</Animated.View>;
+    $[15] = t3;
+    $[16] = t4;
+    $[17] = t7;
+    $[18] = t8;
+    $[19] = t9;
+  } else {
+    t9 = $[19];
+  }
+  return t9;
 }
 const styles = StyleSheet.create({
-    centerBadge: {
-        position: 'absolute',
-        alignSelf: 'center',
-        top: '50%',
-        marginTop: -22,
-        width: 44,
-        height: 44,
-        borderRadius: 22,
-        backgroundColor: 'rgba(0, 0, 0, 0.45)',
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    muteBadge: {
-        position: 'absolute',
-        bottom: 16,
-        alignSelf: 'center',
-        width: 28,
-        height: 28,
-        borderRadius: 14,
-        backgroundColor: 'rgba(0, 0, 0, 0.45)',
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    metaRow: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 6,
-        marginTop: 6,
-        alignSelf: 'center',
-    },
-    metaText: {
-        fontSize: 13,
-        color: 'rgba(0, 0, 0, 0.45)',
-        fontVariant: ['tabular-nums'],
-    },
-    // Telegram marks a note you have not played yet with a small accent dot.
-    unwatchedDot: {
-        width: 6,
-        height: 6,
-        borderRadius: 3,
-        backgroundColor: '#3390EC',
-    },
+  centerBadge: {
+    position: 'absolute',
+    alignSelf: 'center',
+    top: '50%',
+    marginTop: -22,
+    width: 44,
+    height: 44,
+    borderRadius: 22,
+    backgroundColor: 'rgba(0, 0, 0, 0.45)',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  // The play button's box, without its fill, so the badge places like it does on a voice note.
+  viewOnceAnchor: {
+    position: 'absolute',
+    alignSelf: 'center',
+    top: '50%',
+    marginTop: -22,
+    width: 44,
+    height: 44
+  },
+  disabled: {
+    opacity: 0.5
+  },
+  muteBadge: {
+    position: 'absolute',
+    bottom: 16,
+    alignSelf: 'center',
+    width: 28,
+    height: 28,
+    borderRadius: 14,
+    backgroundColor: 'rgba(0, 0, 0, 0.45)',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  // In the empty corner of the circle's square, clear of the video. Width is
+  // The text + 22dp: 4 before the text, then a 12dp indicator slot
+  // starting 2 after it, then 4.
+  metaPill: {
+    position: 'absolute',
+    left: META_LEFT,
+    bottom: 0,
+    height: META_HEIGHT,
+    paddingLeft: 4,
+    paddingRight: 4,
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  metaBackground: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    borderRadius: 6,
+    opacity: META_BACKGROUND_OPACITY
+  },
+  metaIndicator: {
+    width: 12,
+    marginLeft: 2,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  ringRotation: {
+    transform: [{
+      rotate: '-90deg'
+    }]
+  },
+  vignette: {
+    position: 'absolute',
+    left: '50%',
+    top: '50%'
+  },
+  knob: {
+    position: 'absolute',
+    left: '50%',
+    top: '50%',
+    backgroundColor: '#FFFFFF'
+  },
+  metaText: {
+    fontSize: 12,
+    fontVariant: ['tabular-nums']
+  }
 });
-const createSpeakerStyles = (size) => StyleSheet.create({
-    wrapper: {
-        width: size,
-        height: size,
-        alignItems: 'center',
-        justifyContent: 'center',
-        flexDirection: 'row',
-    },
-    body: {
-        width: size * 0.3,
-        height: size * 0.42,
-        backgroundColor: '#FFFFFF',
-    },
-    cone: {
-        width: 0,
-        height: 0,
-        borderTopWidth: size * 0.42,
-        borderBottomWidth: size * 0.42,
-        borderRightWidth: size * 0.34,
-        borderTopColor: 'transparent',
-        borderBottomColor: 'transparent',
-        borderRightColor: '#FFFFFF',
-        transform: [{ rotate: '180deg' }],
-    },
-    slash: {
-        position: 'absolute',
-        width: size * 1.1,
-        height: 1.5,
-        borderRadius: 1,
-        backgroundColor: '#FFFFFF',
-        transform: [{ rotate: '-45deg' }],
-    },
+const createSpeakerStyles = size => StyleSheet.create({
+  wrapper: {
+    width: size,
+    height: size,
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'row'
+  },
+  body: {
+    width: size * 0.3,
+    height: size * 0.42,
+    backgroundColor: '#FFFFFF'
+  },
+  cone: {
+    width: 0,
+    height: 0,
+    borderTopWidth: size * 0.42,
+    borderBottomWidth: size * 0.42,
+    borderRightWidth: size * 0.34,
+    borderTopColor: 'transparent',
+    borderBottomColor: 'transparent',
+    borderRightColor: '#FFFFFF',
+    transform: [{
+      rotate: '180deg'
+    }]
+  },
+  slash: {
+    position: 'absolute',
+    width: size * 1.1,
+    height: 1.5,
+    borderRadius: 1,
+    backgroundColor: '#FFFFFF',
+    transform: [{
+      rotate: '-45deg'
+    }]
+  }
 });
 //# sourceMappingURL=VideoNoteOverlay.js.map