@bugsession/react-native 0.1.0-beta.3 → 0.1.0-beta.4

package/src/trigger.tsx

@@ -0,0 +1,364 @@
+import React from 'react';
+import { ActivityIndicator, Animated, Easing, PanResponder, Platform, Pressable, StyleSheet, Text, View, useWindowDimensions, type StyleProp, type ViewStyle } from 'react-native';
+
+export type IndicatorPhase =
+  | { kind: 'idle' }
+  | { kind: 'starting' }
+  | { kind: 'recording'; startedAt: number }
+  | { kind: 'uploading' }
+  | { kind: 'sent' }
+  | { kind: 'failed'; message: string };
+
+export type Annotation = { x: number; y: number; width: number; height: number; screenWidth: number; screenHeight: number; points: number };
+
+/** What the trigger needs from the SDK; injected to avoid a circular import. */
+export type TriggerController = {
+  getPhase(): IndicatorPhase;
+  subscribe(listener: () => void): () => void;
+  toggle(): Promise<void>;
+  fail(error: unknown): void;
+  annotate(annotation: Annotation): void;
+  onAudioLevel(listener: (level: number) => void): (() => void) | null;
+  safeAreaInsets(): Promise<{ top: number; bottom: number } | null>;
+};
+
+export type BugSessionTriggerProps = {
+  /** Initial screen edge (left/right) and half (top/bottom) of the side tab. */
+  position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+  /** Initial distance in points between the tab and the top or bottom safe area. */
+  offset?: number;
+  /** Drag the tab along either edge; it snaps to the nearer side. */
+  draggable?: boolean;
+  style?: StyleProp<ViewStyle>;
+  accessibilityLabel?: string;
+  /** Replaces the idle tab's record mark. */
+  children?: React.ReactNode;
+  onError?: (error: unknown) => void;
+  /** Stops automatically so the upload stays under the recorder's limit. Defaults to 150. */
+  maxDurationSeconds?: number;
+};
+
+// Native modals (e.g. Expo Router `presentation: 'modal'`) are presented above the app's
+// root view, which would hide the trigger. react-native-screens' FullWindowOverlay renders
+// in a window above them and passes touches through empty areas. Optional dependency.
+let FullWindowOverlay: React.ComponentType<{ children: React.ReactNode; unstable_accessibilityContainerViewIsModal?: boolean }> | null = null;
+if (Platform.OS === 'ios') {
+  try { FullWindowOverlay = require('react-native-screens').FullWindowOverlay ?? null; } catch { FullWindowOverlay = null; }
+}
+
+const tab = { width: 34, height: 76 };
+const panelWidth = 212;
+const autoHideMs = 4000;
+const barShape = [0.55, 0.8, 1, 0.8, 0.55];
+const compactBarShape = [0.8, 1, 0.8];
+const ink = '#FF3B30';
+const strokeWidth = 5;
+// Survives remounts (e.g. the trigger rendered by an error boundary) while the app is open.
+let tabPlacement: { side: 'left' | 'right'; top: number } | null = null;
+
+type Point = { x: number; y: number };
+type Side = 'left' | 'right';
+
+function elapsed(ms: number) {
+  const total = Math.max(0, Math.floor(ms / 1000));
+  return `${Math.floor(total / 60)}:${String(total % 60).padStart(2, '0')}`;
+}
+
+export function createTrigger(controller: TriggerController) {
+  function usePhase() {
+    return React.useSyncExternalStore(controller.subscribe, controller.getPhase, controller.getPhase);
+  }
+  function useInsets() {
+    const [insets, setInsets] = React.useState<{ top: number; bottom: number } | null>(null);
+    React.useEffect(() => { void controller.safeAreaInsets().then(setInsets).catch(() => setInsets(null)); }, []);
+    // Without native insets (older native builds, Android), assume a notch and home indicator on iOS.
+    return insets ?? { top: Platform.OS === 'ios' ? 54 : 24, bottom: Platform.OS === 'ios' ? 34 : 16 };
+  }
+  function useElapsed(phase: IndicatorPhase, maxDurationSeconds: number) {
+    const [now, setNow] = React.useState(Date.now());
+    React.useEffect(() => {
+      if (phase.kind !== 'recording') return;
+      const timer = setInterval(() => setNow(Date.now()), 500);
+      return () => clearInterval(timer);
+    }, [phase]);
+    const ms = phase.kind === 'recording' ? Math.max(0, now - phase.startedAt) : 0;
+    return { ms, nearLimit: ms > (maxDurationSeconds - 30) * 1000 };
+  }
+
+  function Waveform({ compact }: { compact?: boolean }) {
+    const shape = compact ? compactBarShape : barShape;
+    const bars = React.useRef(shape.map(() => new Animated.Value(0.25))).current;
+    const [live, setLive] = React.useState(false);
+    React.useEffect(() => {
+      const unsubscribe = controller.onAudioLevel(level => {
+        setLive(true);
+        Animated.parallel(bars.map((bar, i) => Animated.timing(bar, {
+          toValue: Math.max(0.18, Math.min(1, level * shape[i] * (0.85 + Math.random() * 0.3))),
+          duration: 90, easing: Easing.out(Easing.quad), useNativeDriver: true,
+        }))).start();
+      });
+      return () => unsubscribe?.();
+    }, [bars, shape]);
+    return <View style={[styles.wave, compact && styles.waveCompact]} accessibilityElementsHidden importantForAccessibility="no-hide-descendants">
+      {bars.map((bar, i) => <Animated.View key={i} style={[styles.waveBar, compact && styles.waveBarCompact, !live && styles.waveBarIdle, { transform: [{ scaleY: bar }] }]} />)}
+    </View>;
+  }
+
+  function RecordingDot({ size = 9 }: { size?: number }) {
+    const pulse = React.useRef(new Animated.Value(1)).current;
+    React.useEffect(() => {
+      const loop = Animated.loop(Animated.sequence([
+        Animated.timing(pulse, { toValue: 0.35, duration: 700, useNativeDriver: true }),
+        Animated.timing(pulse, { toValue: 1, duration: 700, useNativeDriver: true }),
+      ]));
+      loop.start();
+      return () => loop.stop();
+    }, [pulse]);
+    return <Animated.View style={{ width: size, height: size, borderRadius: size / 2, backgroundColor: ink, opacity: pulse }} />;
+  }
+
+  /** One rotated, rounded rectangle per segment: smooth strokes without an SVG dependency. */
+  function Stroke({ points }: { points: Point[] }) {
+    if (points.length === 1) {
+      const p = points[0];
+      return <View style={[styles.segment, { left: p.x - strokeWidth / 2, top: p.y - strokeWidth / 2, width: strokeWidth }]} />;
+    }
+    return <>{points.slice(1).map((b, i) => {
+      const a = points[i];
+      const length = Math.hypot(b.x - a.x, b.y - a.y) + strokeWidth;
+      return <View key={i} style={[styles.segment, {
+        left: (a.x + b.x) / 2 - length / 2, top: (a.y + b.y) / 2 - strokeWidth / 2, width: length,
+        transform: [{ rotate: `${Math.atan2(b.y - a.y, b.x - a.x)}rad` }],
+      }]} />;
+    })}</>;
+  }
+
+  /** Full-screen pen layer, active only while the tester is drawing. Strokes are part of the screen recording. */
+  function DrawingCanvas({ strokes, setStrokes }: { strokes: Point[][]; setStrokes: React.Dispatch<React.SetStateAction<Point[][]>> }) {
+    const { width, height } = useWindowDimensions();
+    const current = React.useRef<Point[] | null>(null);
+    const responder = React.useMemo(() => PanResponder.create({
+      onStartShouldSetPanResponder: () => true,
+      onMoveShouldSetPanResponder: () => true,
+      onPanResponderGrant: event => {
+        current.current = [{ x: event.nativeEvent.pageX, y: event.nativeEvent.pageY }];
+        setStrokes(all => [...all, current.current!]);
+      },
+      onPanResponderMove: event => {
+        const stroke = current.current;
+        if (!stroke) return;
+        const point = { x: event.nativeEvent.pageX, y: event.nativeEvent.pageY };
+        const last = stroke[stroke.length - 1];
+        if (Math.hypot(point.x - last.x, point.y - last.y) < 3 || stroke.length >= 400) return;
+        const next = [...stroke, point];
+        current.current = next;
+        setStrokes(all => [...all.slice(0, -1), next]);
+      },
+      onPanResponderRelease: () => {
+        const stroke = current.current;
+        current.current = null;
+        if (!stroke) return;
+        const xs = stroke.map(p => p.x), ys = stroke.map(p => p.y);
+        const x = Math.min(...xs), y = Math.min(...ys);
+        controller.annotate({
+          x: Math.round(x), y: Math.round(y),
+          width: Math.round(Math.max(...xs) - x), height: Math.round(Math.max(...ys) - y),
+          screenWidth: Math.round(width), screenHeight: Math.round(height), points: stroke.length,
+        });
+      },
+    }), [width, height, setStrokes]);
+    return <View {...responder.panHandlers} style={styles.canvas} accessibilityLabel="Drawing area. Draw to highlight a problem.">
+      {strokes.map((points, i) => <Stroke key={i} points={points} />)}
+    </View>;
+  }
+
+  function PanelButton({ label, onPress, disabled, tone, accessibilityLabel }: { label: string; onPress(): void; disabled?: boolean; tone?: 'primary' | 'danger'; accessibilityLabel?: string }) {
+    return <Pressable accessibilityRole="button" accessibilityLabel={accessibilityLabel ?? label} accessibilityState={{ disabled: !!disabled }}
+      disabled={disabled} onPress={onPress} hitSlop={4}
+      style={[styles.panelButton, tone === 'primary' && styles.panelButtonPrimary, tone === 'danger' && styles.panelButtonDanger, disabled && styles.panelButtonDisabled]}>
+      <Text style={[styles.panelButtonText, tone === 'primary' && styles.panelButtonTextPrimary]}>{label}</Text>
+    </Pressable>;
+  }
+
+  /** After stopping, a short toast at the top; the recording has already ended, so it is not captured. */
+  function StatusToast({ phase }: { phase: IndicatorPhase }) {
+    const insets = useInsets();
+    const appear = React.useRef(new Animated.Value(0)).current;
+    const visible = phase.kind === 'uploading' || phase.kind === 'sent' || phase.kind === 'failed';
+    const [shown, setShown] = React.useState<IndicatorPhase>(phase);
+    React.useEffect(() => { if (visible) setShown(phase); }, [phase, visible]);
+    React.useEffect(() => {
+      Animated.spring(appear, { toValue: visible ? 1 : 0, useNativeDriver: true, bounciness: 5, speed: 14 }).start();
+    }, [visible, appear]);
+    let content: React.ReactNode = null;
+    if (shown.kind === 'uploading') content = <><ActivityIndicator size="small" color="#FFFFFF" /><Text style={styles.toastText}>Sending report…</Text></>;
+    else if (shown.kind === 'sent') content = <><View style={[styles.badge, styles.badgeSuccess]}><Text style={styles.badgeText}>✓</Text></View><Text style={styles.toastText}>Report sent</Text></>;
+    else if (shown.kind === 'failed') content = <><View style={[styles.badge, styles.badgeError]}><Text style={styles.badgeText}>!</Text></View><Text style={styles.toastText} numberOfLines={2}>Not sent: {shown.message}</Text></>;
+    return <Animated.View pointerEvents="none" accessibilityLiveRegion="polite" style={[styles.toastLayer, {
+      top: insets.top + 8, opacity: appear,
+      transform: [{ translateY: appear.interpolate({ inputRange: [0, 1], outputRange: [-16, 0] }) }],
+    }]}>
+      {content && <View style={styles.toast}>{content}</View>}
+    </Animated.View>;
+  }
+
+  return function Trigger({ position = 'bottom-right', offset = 96, draggable = true, style, accessibilityLabel, children, onError, maxDurationSeconds = 150 }: BugSessionTriggerProps) {
+    const phase = usePhase();
+    const insets = useInsets();
+    const { width, height } = useWindowDimensions();
+    const { ms, nearLimit } = useElapsed(phase, maxDurationSeconds);
+    const [expanded, setExpanded] = React.useState(false);
+    const [drawing, setDrawing] = React.useState(false);
+    const [strokes, setStrokes] = React.useState<Point[][]>([]);
+    const minTop = insets.top + 8;
+    const maxTop = Math.max(minTop, height - insets.bottom - tab.height - 8);
+    const clampTop = React.useCallback((top: number) => Math.max(minTop, Math.min(top, maxTop)), [minTop, maxTop]);
+    const [placement, setPlacement] = React.useState<{ side: Side; top: number }>(() => tabPlacement ?? {
+      side: position.includes('left') ? 'left' : 'right',
+      top: position.includes('top') ? minTop + offset : height - insets.bottom - tab.height - offset,
+    });
+    const top = clampTop(placement.top);
+    const drag = React.useRef(new Animated.ValueXY()).current;
+    const dragStart = React.useRef({ side: placement.side, top });
+    dragStart.current = { side: placement.side, top };
+    const recording = phase.kind === 'recording';
+    const starting = phase.kind === 'starting';
+
+    // Auto-stop at the limit, and reset the controls when a recording ends.
+    React.useEffect(() => {
+      if (recording && ms >= maxDurationSeconds * 1000) void controller.toggle();
+    }, [recording, ms, maxDurationSeconds]);
+    React.useEffect(() => {
+      if (!recording) { setExpanded(false); setDrawing(false); setStrokes([]); }
+    }, [recording]);
+    // The options panel hides itself so it stays out of the video as much as possible.
+    React.useEffect(() => {
+      if (!expanded || drawing) return;
+      const timer = setTimeout(() => setExpanded(false), autoHideMs);
+      return () => clearTimeout(timer);
+    }, [expanded, drawing]);
+
+    const responder = React.useMemo(() => PanResponder.create({
+      onStartShouldSetPanResponder: () => false,
+      onMoveShouldSetPanResponder: (_, gesture) => draggable && Math.hypot(gesture.dx, gesture.dy) > 7,
+      onPanResponderMove: (_, gesture) => drag.setValue({ x: gesture.dx, y: clampTop(dragStart.current.top + gesture.dy) - dragStart.current.top }),
+      onPanResponderRelease: (_, gesture) => {
+        const startX = dragStart.current.side === 'right' ? width - tab.width : 0;
+        const next = { side: (startX + gesture.dx + tab.width / 2 > width / 2 ? 'right' : 'left') as Side, top: clampTop(dragStart.current.top + gesture.dy) };
+        tabPlacement = next;
+        setPlacement(next);
+        drag.setValue({ x: 0, y: 0 });
+      },
+      onPanResponderTerminate: () => drag.setValue({ x: 0, y: 0 }),
+    }), [draggable, drag, width, clampTop]);
+
+    const onTab = async () => {
+      if (recording) { setExpanded(open => !open || drawing); return; }
+      try { await controller.toggle(); }
+      catch (error) { controller.fail(error); onError?.(error); }
+    };
+    const stop = () => { setExpanded(false); setDrawing(false); setStrokes([]); void controller.toggle(); };
+
+    const side = placement.side;
+    const showTab = phase.kind === 'idle' || starting || recording;
+    const panelTop = Math.max(minTop, Math.min(top - 12, height - insets.bottom - 8 - (drawing ? 150 : 170)));
+    const panelEdge = { [side]: tab.width + 6 } as { left?: number; right?: number };
+
+    let tabContent: React.ReactNode;
+    if (starting) tabContent = <ActivityIndicator size="small" color="#FFFFFF" />;
+    else if (recording) tabContent = <>
+      <RecordingDot size={8} />
+      <Text style={[styles.tabTime, nearLimit && styles.warning]}>{elapsed(ms)}</Text>
+      <Waveform compact />
+    </>;
+    else tabContent = children ?? <View style={styles.recordRing}><View style={styles.recordDot} /></View>;
+
+    const layer = <View pointerEvents="box-none" style={styles.layer}>
+      {drawing && recording && <DrawingCanvas strokes={strokes} setStrokes={setStrokes} />}
+      {showTab && <Animated.View {...(draggable ? responder.panHandlers : {})} style={[styles.tabPosition, {
+        top, [side]: 0, transform: drag.getTranslateTransform(),
+      }]}>
+        <Pressable
+          accessibilityRole="button"
+          accessibilityLabel={accessibilityLabel ?? (recording ? `Recording, ${Math.floor(ms / 1000)} seconds. Show recording options.` : 'Record a bug report')}
+          accessibilityHint={recording ? undefined : 'Records the screen and your voice.'}
+          accessibilityState={{ busy: starting, expanded: recording ? expanded : undefined }}
+          disabled={starting}
+          onPress={() => { void onTab(); }}
+          style={[styles.tab, side === 'right' ? styles.tabRight : styles.tabLeft, recording && styles.tabRecording, style]}
+        >{tabContent}</Pressable>
+      </Animated.View>}
+      {recording && expanded && <View style={[styles.panel, panelEdge, { top: panelTop }]}>
+        <View style={styles.panelHeader}>
+          <RecordingDot />
+          <Text style={[styles.panelTime, nearLimit && styles.warning]}>{elapsed(ms)}</Text>
+          <Waveform />
+        </View>
+        {drawing ? <>
+          <Text style={styles.panelHint}>Draw on the screen to highlight the problem.</Text>
+          <View style={styles.panelRow}>
+            <PanelButton label="Undo" disabled={!strokes.length} onPress={() => setStrokes(all => all.slice(0, -1))} />
+            <PanelButton label="Clear" disabled={!strokes.length} onPress={() => setStrokes([])} />
+          </View>
+          <PanelButton label="Done" tone="primary" onPress={() => { setDrawing(false); setStrokes([]); setExpanded(false); }} />
+        </> : <>
+          <PanelButton label="✎ Draw on screen" onPress={() => setDrawing(true)} />
+          <PanelButton label="■ Stop & send" tone="danger" accessibilityLabel="Stop recording and send the report" onPress={stop} />
+        </>}
+      </View>}
+      <StatusToast phase={phase} />
+    </View>;
+    return FullWindowOverlay
+      ? <FullWindowOverlay unstable_accessibilityContainerViewIsModal={false}>{layer}</FullWindowOverlay>
+      : layer;
+  };
+}
+
+const styles = StyleSheet.create({
+  layer: { ...StyleSheet.absoluteFill, zIndex: 9999, elevation: 9999 },
+  tabPosition: { position: 'absolute' },
+  tab: {
+    width: tab.width, height: tab.height, alignItems: 'center', justifyContent: 'center', gap: 5,
+    backgroundColor: 'rgba(16,17,20,0.92)', borderWidth: StyleSheet.hairlineWidth, borderColor: 'rgba(255,255,255,0.16)',
+    shadowColor: '#000', shadowOpacity: 0.25, shadowRadius: 8, shadowOffset: { width: 0, height: 3 }, elevation: 10,
+  },
+  tabRight: { borderTopLeftRadius: 14, borderBottomLeftRadius: 14, borderRightWidth: 0 },
+  tabLeft: { borderTopRightRadius: 14, borderBottomRightRadius: 14, borderLeftWidth: 0 },
+  tabRecording: { borderColor: 'rgba(255,59,48,0.5)' },
+  tabTime: { color: '#FFFFFF', fontSize: 10, fontWeight: '700', fontVariant: ['tabular-nums'] },
+  recordRing: { width: 22, height: 22, borderRadius: 11, borderWidth: 2, borderColor: 'rgba(255,255,255,0.9)', alignItems: 'center', justifyContent: 'center' },
+  recordDot: { width: 11, height: 11, borderRadius: 5.5, backgroundColor: ink },
+  warning: { color: '#FFB340' },
+  panel: {
+    position: 'absolute', width: panelWidth, gap: 8, padding: 12, borderRadius: 18,
+    backgroundColor: 'rgba(16,17,20,0.96)', borderWidth: StyleSheet.hairlineWidth, borderColor: 'rgba(255,255,255,0.14)',
+    shadowColor: '#000', shadowOpacity: 0.3, shadowRadius: 14, shadowOffset: { width: 0, height: 6 }, elevation: 14,
+  },
+  panelHeader: { flexDirection: 'row', alignItems: 'center', gap: 8, marginBottom: 2 },
+  panelTime: { color: '#FFFFFF', fontSize: 16, fontWeight: '700', fontVariant: ['tabular-nums'], flex: 1 },
+  panelHint: { color: 'rgba(255,255,255,0.7)', fontSize: 12, lineHeight: 16 },
+  panelRow: { flexDirection: 'row', gap: 8 },
+  panelButton: { flex: 1, alignItems: 'center', paddingVertical: 10, paddingHorizontal: 12, borderRadius: 12, backgroundColor: 'rgba(255,255,255,0.12)' },
+  panelButtonPrimary: { backgroundColor: '#FFFFFF' },
+  panelButtonDanger: { backgroundColor: ink },
+  panelButtonDisabled: { opacity: 0.4 },
+  panelButtonText: { color: '#FFFFFF', fontSize: 14, fontWeight: '700' },
+  panelButtonTextPrimary: { color: '#000000' },
+  canvas: { ...StyleSheet.absoluteFill, borderWidth: 3, borderColor: 'rgba(255,59,48,0.55)' },
+  segment: { position: 'absolute', height: strokeWidth, borderRadius: strokeWidth / 2, backgroundColor: ink },
+  toastLayer: { position: 'absolute', left: 0, right: 0, alignItems: 'center' },
+  toast: {
+    flexDirection: 'row', alignItems: 'center', gap: 10, maxWidth: 340, paddingHorizontal: 16, paddingVertical: 10, borderRadius: 22,
+    backgroundColor: 'rgba(16,17,20,0.96)', shadowColor: '#000', shadowOpacity: 0.3, shadowRadius: 12, shadowOffset: { width: 0, height: 5 }, elevation: 14,
+  },
+  toastText: { color: '#FFFFFF', fontSize: 15, fontWeight: '600', flexShrink: 1 },
+  wave: { flexDirection: 'row', alignItems: 'center', gap: 3, height: 18 },
+  waveCompact: { gap: 2, height: 12 },
+  waveBar: { width: 3, height: 18, borderRadius: 1.5, backgroundColor: '#FF6B61' },
+  waveBarCompact: { width: 2, height: 12, borderRadius: 1 },
+  waveBarIdle: { backgroundColor: 'rgba(255,255,255,0.45)' },
+  badge: { width: 22, height: 22, borderRadius: 11, alignItems: 'center', justifyContent: 'center' },
+  badgeSuccess: { backgroundColor: '#30D158' },
+  badgeError: { backgroundColor: '#FF453A' },
+  badgeText: { color: '#000000', fontSize: 13, fontWeight: '800' },
+});