vsecoder/dchain
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(client): Twitter-style social feed UI (Phase C of v2.0.0)

Browse Source 
Ships the client side of the v2.0.0 feed feature. Folds client-app/
into the monorepo (was previously .gitignored as "tracked separately"
but no separate repo ever existed — for v2.0.0 the client is
first-class).

Feed screens

  app/(app)/feed.tsx — Feed tab
    - Three-way tab strip: Подписки / Для вас / В тренде backed by
      /feed/timeline, /feed/foryou, /feed/trending respectively
    - Default landing tab is "Для вас" — surfaces discovery without
      requiring the user to follow anyone first
    - FlatList with pull-to-refresh + viewability-driven view counter
      bump (posts visible ≥ 60% for ≥ 1s trigger POST /feed/post/…/view)
    - Floating blue compose button → /compose
    - Per-post liked_by_me fetched in batches of 6 after list load

  app/(app)/compose.tsx — post composer modal
    - Fullscreen, Twitter-like header (✕ left, Опубликовать right)
    - Auto-focused multiline TextInput, 4000 char cap
    - Hashtag preview chips that auto-update as you type
    - expo-image-picker + expo-image-manipulator pipeline: resize to
      1080px max-dim, JPEG Q=50 (client-side first-pass compression
      before the mandatory server-side scrub)
    - Live fee estimate + balance guard with a confirmation modal
      ("Опубликовать пост? Цена: 0.00X T · Размер: N KB")
    - Exif: false passed to ImagePicker as an extra privacy layer

  app/(app)/feed/[id].tsx — post detail
    - Full PostCard rendering + detailed info panel (views, likes,
      size, fee, hosting relay, hashtags as tappable chips)
    - Triggers bumpView on mount
    - 410 (on-chain soft-delete) routes back to the feed

  app/(app)/feed/tag/[tag].tsx — hashtag feed

  app/(app)/profile/[address].tsx — rebuilt
    - Twitter-ish profile: avatar, name, address short-form, post count
    - Posts | Инфо tab strip
    - Follow / Unfollow button for non-self profiles (optimistic UI)
    - Edit button on self profile → settings
    - Secondary actions (chat, copy address) when viewing a known contact

Supporting library

  lib/feed.ts — HTTP wrappers + tx builders for every /feed/* endpoint:
    - publishPost (POST /feed/publish, signed)
    - publishAndCommit (publish → on-chain CREATE_POST)
    - fetchPost / fetchStats / bumpView
    - fetchAuthorPosts / fetchTimeline / fetchForYou / fetchTrending /
      fetchHashtag
    - buildCreatePostTx / buildDeletePostTx
    - buildFollowTx / buildUnfollowTx
    - buildLikePostTx / buildUnlikePostTx
    - likePost / unlikePost / followUser / unfollowUser / deletePost
      (high-level helpers that bundle build + submitTx)
    - formatFee, formatRelativeTime, formatCount — Twitter-like display
      helpers

  components/feed/PostCard.tsx — core card component
    - Memoised for performance (N-row re-render on every like elsewhere
      would cost a lot otherwise)
    - Optimistic like toggle with heart-bounce spring animation
    - Hashtag highlighting in body text (tappable → hashtag feed)
    - Long-press context menu (Delete, owner-only)
    - Views / likes / share-link / reply icons in footer row

Navigation cleanup

  - NavBar: removed the SOON pill on the Feed tab (it's shipped now)
  - (app)/_layout: hide NavBar on /compose and /feed/* sub-routes
  - AnimatedSlot: treat /feed/<id>, /feed/tag/<t>, /compose as
    sub-routes so back-swipe-right closes them

Channel removal (client side)

  - lib/types.ts: ContactKind stripped to 'direct' | 'group'; legacy
    'channel' flag removed. `kind` field kept for backward compat with
    existing AsyncStorage records.
  - lib/devSeed.ts: dropped the 5 channel seed contacts.
  - components/ChatTile.tsx: removed channel kindIcon branch.

Dependencies

  - expo-image-manipulator added for client-side image compression.
  - expo-file-system/legacy used for readAsStringAsync (SDK 54 moved
    that API to the legacy sub-path; the new streaming API isn't yet
    stable).

Type check

  - npx tsc --noEmit — clean, 0 errors.

Next (not in this commit)

  - Direct attachment-bytes endpoint on the server so post-detail can
    actually render the image (currently shows placeholder with URL)
  - Cross-relay body fetch via /api/relays + hosting_relay pubkey
  - Mentions (@username) with notifications
  - Full-text search

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
vsecoder
2026-04-18 19:43:55 +03:00
parent 9e86c93fda
commit 5b64ef2560
68 changed files with 23487 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

188
client-app/components/chat/AttachmentMenu.tsx Normal file
View File

@@ -0,0 +1,188 @@
/**
* AttachmentMenu — bottom-sheet с вариантами прикрепления.
*
* Выводится при нажатии на `+` в composer'е. Опции:
* - 📷 Photo / video из галереи (expo-image-picker)
* - 📸 Take photo (камера)
* - 📎 File (expo-document-picker)
* - 🎙️ Voice message — stub (запись через expo-av потребует
* permissions runtime + recording UI; сейчас добавляет мок-
* голосовое с duration 4s)
*
* Всё визуально — тёмный overlay + sheet снизу. Закрытие по tap'у на
* overlay или на Cancel.
*/
import React from 'react';
import { View, Text, Pressable, Alert, Modal } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import * as ImagePicker from 'expo-image-picker';
import * as DocumentPicker from 'expo-document-picker';
import type { Attachment } from '@/lib/types';
export interface AttachmentMenuProps {
visible: boolean;
onClose: () => void;
/** Вызывается когда attachment готов для отправки. */
onPick: (att: Attachment) => void;
}
export function AttachmentMenu({ visible, onClose, onPick }: AttachmentMenuProps) {
const insets = useSafeAreaInsets();
const pickImageOrVideo = async () => {
try {
const perm = await ImagePicker.requestMediaLibraryPermissionsAsync();
if (!perm.granted) {
Alert.alert('Permission needed', 'Grant photos access to attach media.');
return;
}
const result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.All,
quality: 0.85,
allowsEditing: false,
});
if (result.canceled) return;
const asset = result.assets[0];
onPick({
kind: asset.type === 'video' ? 'video' : 'image',
uri: asset.uri,
mime: asset.mimeType,
width: asset.width,
height: asset.height,
duration: asset.duration ? Math.round(asset.duration / 1000) : undefined,
});
onClose();
} catch (e: any) {
Alert.alert('Pick failed', e?.message ?? 'Unknown error');
}
};
const takePhoto = async () => {
try {
const perm = await ImagePicker.requestCameraPermissionsAsync();
if (!perm.granted) {
Alert.alert('Permission needed', 'Grant camera access to take a photo.');
return;
}
const result = await ImagePicker.launchCameraAsync({ quality: 0.85 });
if (result.canceled) return;
const asset = result.assets[0];
onPick({
kind: asset.type === 'video' ? 'video' : 'image',
uri: asset.uri,
mime: asset.mimeType,
width: asset.width,
height: asset.height,
});
onClose();
} catch (e: any) {
Alert.alert('Camera failed', e?.message ?? 'Unknown error');
}
};
const pickFile = async () => {
try {
const res = await DocumentPicker.getDocumentAsync({
type: '*/*',
copyToCacheDirectory: true,
});
if (res.canceled) return;
const asset = res.assets[0];
onPick({
kind: 'file',
uri: asset.uri,
name: asset.name,
mime: asset.mimeType ?? undefined,
size: asset.size,
});
onClose();
} catch (e: any) {
Alert.alert('File pick failed', e?.message ?? 'Unknown error');
}
};
// Voice recorder больше не stub — см. inline-кнопку 🎤 в composer'е,
// которая разворачивает VoiceRecorder (expo-av Audio.Recording). Опция
// Voice в этом меню убрана, т.к. дублировала бы UX.
return (
<Modal visible={visible} transparent animationType="slide" onRequestClose={onClose}>
<Pressable
onPress={onClose}
style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.55)' }}
>
<View style={{ flex: 1 }} />
<Pressable
onPress={() => {}}
style={{
backgroundColor: '#111111',
borderTopLeftRadius: 20,
borderTopRightRadius: 20,
paddingTop: 8,
paddingBottom: Math.max(insets.bottom, 12) + 10,
paddingHorizontal: 10,
borderTopWidth: 1, borderColor: '#1f1f1f',
}}
>
{/* Drag handle */}
<View
style={{
alignSelf: 'center',
width: 40, height: 4, borderRadius: 2,
backgroundColor: '#2a2a2a',
marginBottom: 12,
}}
/>
<Text
style={{
color: '#ffffff', fontSize: 16, fontWeight: '700',
marginLeft: 8, marginBottom: 12,
}}
>
Attach
</Text>
<Row icon="images-outline" label="Photo / video" onPress={pickImageOrVideo} />
<Row icon="camera-outline" label="Take photo" onPress={takePhoto} />
<Row icon="document-outline" label="File" onPress={pickFile} />
</Pressable>
</Pressable>
</Modal>
);
}
function Row({
icon, label, onPress,
}: {
icon: React.ComponentProps<typeof Ionicons>['name'];
label: string;
onPress: () => void;
}) {
return (
<Pressable
onPress={onPress}
style={({ pressed }) => ({
flexDirection: 'row',
alignItems: 'center',
gap: 14,
paddingHorizontal: 14,
paddingVertical: 14,
borderRadius: 14,
backgroundColor: pressed ? '#1a1a1a' : 'transparent',
})}
>
<View
style={{
width: 40, height: 40, borderRadius: 10,
backgroundColor: '#1a1a1a',
alignItems: 'center', justifyContent: 'center',
}}
>
<Ionicons name={icon} size={20} color="#ffffff" />
</View>
<Text style={{ color: '#ffffff', fontSize: 15, fontWeight: '600' }}>{label}</Text>
</Pressable>
);
}

178
client-app/components/chat/AttachmentPreview.tsx Normal file
View File

@@ -0,0 +1,178 @@
/**
* AttachmentPreview — рендер `Message.attachment` внутри bubble'а.
*
* Четыре формы:
* - image → Image с object-fit cover, aspect-ratio из width/height
* - video → то же + play-overlay в центре, duration внизу-справа
* - voice → row [play-icon] [waveform stub] [duration]
* - file → row [file-icon] [name + size]
*
* Вложения размещаются ВНУТРИ того же bubble'а что и текст, чуть ниже
* footer'а нет и ширина bubble'а снимает maxWidth-ограничение ради
* изображений (отдельный media-first-bubble case).
*/
import React from 'react';
import { View, Text, Image } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import type { Attachment } from '@/lib/types';
import { VoicePlayer } from '@/components/chat/VoicePlayer';
import { VideoCirclePlayer } from '@/components/chat/VideoCirclePlayer';
export interface AttachmentPreviewProps {
attachment: Attachment;
/** Используется для тонирования footer-элементов. */
own?: boolean;
}
function formatSize(bytes: number): string {
if (bytes < 1024) return `${bytes} B`;
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(0)} KB`;
if (bytes < 1024 * 1024 * 1024) return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
return `${(bytes / 1024 / 1024 / 1024).toFixed(2)} GB`;
}
function formatDuration(seconds: number): string {
const m = Math.floor(seconds / 60);
const s = Math.floor(seconds % 60);
return `${m}:${String(s).padStart(2, '0')}`;
}
export function AttachmentPreview({ attachment, own }: AttachmentPreviewProps) {
switch (attachment.kind) {
case 'image':
return <ImageAttachment att={attachment} />;
case 'video':
// circle=true — круглое видео-сообщение (Telegram-стиль).
return attachment.circle
? <VideoCirclePlayer uri={attachment.uri} duration={attachment.duration} />
: <VideoAttachment att={attachment} />;
case 'voice':
return <VoicePlayer uri={attachment.uri} duration={attachment.duration} own={own} />;
case 'file':
return <FileAttachment att={attachment} own={own} />;
}
}
// ─── Image ──────────────────────────────────────────────────────────
function ImageAttachment({ att }: { att: Attachment }) {
// Aspect-ratio из реальных width/height; fallback 4:3.
const aspect = att.width && att.height ? att.width / att.height : 4 / 3;
return (
<Image
source={{ uri: att.uri }}
style={{
width: '100%',
aspectRatio: aspect,
borderRadius: 12,
marginBottom: 4,
backgroundColor: '#0a0a0a',
}}
resizeMode="cover"
/>
);
}
// ─── Video ──────────────────────────────────────────────────────────
function VideoAttachment({ att }: { att: Attachment }) {
const aspect = att.width && att.height ? att.width / att.height : 16 / 9;
return (
<View style={{ position: 'relative', marginBottom: 4 }}>
<Image
source={{ uri: att.uri }}
style={{
width: '100%',
aspectRatio: aspect,
borderRadius: 12,
backgroundColor: '#0a0a0a',
}}
resizeMode="cover"
/>
{/* Play overlay по центру */}
<View
style={{
position: 'absolute',
top: '50%', left: '50%',
transform: [{ translateX: -22 }, { translateY: -22 }],
width: 44, height: 44, borderRadius: 22,
backgroundColor: 'rgba(0,0,0,0.55)',
alignItems: 'center', justifyContent: 'center',
}}
>
<Ionicons name="play" size={22} color="#ffffff" style={{ marginLeft: 2 }} />
</View>
{att.duration !== undefined && (
<View
style={{
position: 'absolute',
right: 8, bottom: 8,
backgroundColor: 'rgba(0,0,0,0.6)',
paddingHorizontal: 6, paddingVertical: 2,
borderRadius: 4,
}}
>
<Text style={{ color: '#ffffff', fontSize: 11, fontWeight: '600' }}>
{formatDuration(att.duration)}
</Text>
</View>
)}
</View>
);
}
// ─── Voice ──────────────────────────────────────────────────────────
// Реальный плеер — см. components/chat/VoicePlayer.tsx (expo-av Sound).
// ─── File ───────────────────────────────────────────────────────────
function FileAttachment({ att, own }: { att: Attachment; own?: boolean }) {
return (
<View
style={{
flexDirection: 'row',
alignItems: 'center',
marginBottom: 4,
gap: 10,
paddingVertical: 4,
}}
>
<View
style={{
width: 36, height: 36, borderRadius: 10,
backgroundColor: own ? 'rgba(255,255,255,0.18)' : '#1a1a1a',
alignItems: 'center', justifyContent: 'center',
}}
>
<Ionicons
name="document-text"
size={18}
color={own ? '#ffffff' : '#ffffff'}
/>
</View>
<View style={{ flex: 1, minWidth: 0 }}>
<Text
numberOfLines={1}
style={{
color: '#ffffff',
fontSize: 14,
fontWeight: '600',
}}
>
{att.name ?? 'file'}
</Text>
<Text
style={{
color: own ? 'rgba(255,255,255,0.75)' : '#8b8b8b',
fontSize: 11,
}}
>
{att.size !== undefined ? formatSize(att.size) : ''}
{att.size !== undefined && att.mime ? ' · ' : ''}
{att.mime ?? ''}
</Text>
</View>
</View>
);
}

36
client-app/components/chat/DaySeparator.tsx Normal file
View File

@@ -0,0 +1,36 @@
/**
* DaySeparator — центральный лейбл "Сегодня" / "Вчера" / "17 июня 2025"
* между группами сообщений.
*
* Стиль: тонкий шрифт серого цвета, маленький размер. В референсе этот
* лейбл не должен перетягивать на себя внимание — он визуальный якорь,
* не заголовок.
*/
import React from 'react';
import { View, Text, Platform } from 'react-native';
export interface DaySeparatorProps {
label: string;
}
export function DaySeparator({ label }: DaySeparatorProps) {
return (
<View style={{ alignItems: 'center', marginTop: 14, marginBottom: 6 }}>
<Text
style={{
color: '#6b6b6b',
fontSize: 12,
// Тонкий шрифт — на iOS "200" рисует ultra-light, на Android —
// sans-serif-thin. В Expo font-weight 300 почти идентичен на
// обеих платформах и доступен без дополнительных шрифтов.
fontWeight: '300',
// Android font-weight 100-300 требует явной семьи, иначе
// округляется до 400. Для thin визуала передаём serif-thin.
...(Platform.OS === 'android' ? { fontFamily: 'sans-serif-thin' } : null),
}}
>
{label}
</Text>
</View>
);
}

374
client-app/components/chat/MessageBubble.tsx Normal file
View File

@@ -0,0 +1,374 @@
/**
* MessageBubble — рендер одного сообщения с gesture interactions.
*
* Гестуры — разведены по двум примитивам во избежание конфликта со
* скроллом FlatList'а:
*
* 1. Swipe-left (reply): PanResponder на Animated.View обёртке
* bubble'а. `onMoveShouldSetPanResponder` клеймит responder ТОЛЬКО
* когда пользователь сдвинул палец > 6px влево и горизонталь
* преобладает над вертикалью. Для вертикального скролла
* `onMoveShouldSet` возвращает false — FlatList получает gesture.
* Touchdown ничего не клеймит (onStartShouldSetPanResponder
* отсутствует).
*
* 2. Long-press / tap: через View.onTouchStart/End. Primitive touch
* events bubble'ятся независимо от responder'а. Long-press запускаем
* timer'ом на 550ms, cancel при `onTouchMove` с достаточной
* амплитудой. Tap — короткое касание без move в selection mode.
*
* 3. `selectionMode=true` — PanResponder disabled (в selection режиме
* свайпы не работают).
*
* 4. ReplyQuote — отдельный Pressable над bubble-текстом; tap прыгает
* к оригиналу через onJumpToReply.
*
* 5. highlight prop — bubble-row мерцает accent-blue фоном, использует
* Animated.Value; управляется из ChatScreen после scrollToIndex.
*/
import React, { useRef, useEffect } from 'react';
import {
View, Text, Pressable, ViewStyle, Animated, PanResponder,
} from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import type { Message } from '@/lib/types';
import { relTime } from '@/lib/dates';
import { Avatar } from '@/components/Avatar';
import { AttachmentPreview } from '@/components/chat/AttachmentPreview';
import { ReplyQuote } from '@/components/chat/ReplyQuote';
export const PEER_AVATAR_SLOT = 34;
const SWIPE_THRESHOLD = 60;
const LONG_PRESS_MS = 550;
const TAP_MAX_MOVEMENT = 8;
const TAP_MAX_ELAPSED = 300;
export interface MessageBubbleProps {
msg: Message;
peerName: string;
peerAddress?: string;
withSenderMeta?: boolean;
showName: boolean;
showAvatar: boolean;
onReply?: (m: Message) => void;
onLongPress?: (m: Message) => void;
onTap?: (m: Message) => void;
onOpenProfile?: () => void;
onJumpToReply?: (originalId: string) => void;
selectionMode?: boolean;
selected?: boolean;
/** Mgnt-управляемый highlight: row мерцает accent-фоном ~1-2 секунды. */
highlighted?: boolean;
}
// ─── Bubble styles ──────────────────────────────────────────────────
const bubbleBase: ViewStyle = {
borderRadius: 18,
paddingHorizontal: 14,
paddingTop: 8,
paddingBottom: 6,
};
const peerBubble: ViewStyle = {
...bubbleBase,
backgroundColor: '#1a1a1a',
borderBottomLeftRadius: 6,
};
const ownBubble: ViewStyle = {
...bubbleBase,
backgroundColor: '#1d9bf0',
borderBottomRightRadius: 6,
};
const bubbleText = { color: '#ffffff', fontSize: 15, lineHeight: 20 } as const;
// ─── Main ───────────────────────────────────────────────────────────
export function MessageBubble(props: MessageBubbleProps) {
if (props.msg.mine) return <RowShell {...props} variant="own" />;
if (!props.withSenderMeta) return <RowShell {...props} variant="peer-compact" />;
return <RowShell {...props} variant="group-peer" />;
}
type Variant = 'own' | 'peer-compact' | 'group-peer';
function RowShell({
msg, peerName, peerAddress, showName, showAvatar,
onReply, onLongPress, onTap, onOpenProfile, onJumpToReply,
selectionMode, selected, highlighted, variant,
}: MessageBubbleProps & { variant: Variant }) {
const translateX = useRef(new Animated.Value(0)).current;
const startTs = useRef(0);
const moved = useRef(false);
const lpTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
const clearLp = () => {
if (lpTimer.current) { clearTimeout(lpTimer.current); lpTimer.current = null; }
};
// Touch start — запускаем long-press timer (НЕ клеймим responder).
const onTouchStart = () => {
startTs.current = Date.now();
moved.current = false;
clearLp();
if (onLongPress) {
lpTimer.current = setTimeout(() => {
if (!moved.current) onLongPress(msg);
lpTimer.current = null;
}, LONG_PRESS_MS);
}
};
const onTouchMove = (e: { nativeEvent: { pageX: number; pageY: number } }) => {
// Если пользователь двигает палец — отменяем long-press timer.
// Малые движения (< TAP_MAX_MOVEMENT) игнорируем — устраняют
// fale-cancel от дрожания пальца.
// Здесь нет точного dx/dy от gesture-системы, используем primitive
// touch coords отсчитываемые по абсолютным координатам. Проще —
// всегда отменяем на first move (PanResponder ниже отнимет
// responder если leftward).
moved.current = true;
clearLp();
};
const onTouchEnd = () => {
const elapsed = Date.now() - startTs.current;
clearLp();
// Короткий tap без движения → в selection mode toggle.
if (!moved.current && elapsed < TAP_MAX_ELAPSED && selectionMode) {
onTap?.(msg);
}
};
// Swipe-to-reply: PanResponder клеймит ТОЛЬКО leftward-dominant move.
// Для vertical scroll / rightward swipe / start-touch возвращает false,
// FlatList / AnimatedSlot получают gesture.
const panResponder = useRef(
PanResponder.create({
onMoveShouldSetPanResponder: (_e, g) => {
if (selectionMode) return false;
// Leftward > 6px и горизонталь преобладает.
return g.dx < -6 && Math.abs(g.dx) > Math.abs(g.dy) * 1.5;
},
onPanResponderGrant: () => {
// Как только мы заклеймили gesture, отменяем long-press
// (пользователь явно свайпает, не удерживает).
clearLp();
moved.current = true;
},
onPanResponderMove: (_e, g) => {
translateX.setValue(Math.min(0, g.dx));
},
onPanResponderRelease: (_e, g) => {
if (g.dx <= -SWIPE_THRESHOLD) onReply?.(msg);
Animated.spring(translateX, {
toValue: 0, friction: 6, tension: 80, useNativeDriver: true,
}).start();
},
onPanResponderTerminate: () => {
Animated.spring(translateX, {
toValue: 0, friction: 6, tension: 80, useNativeDriver: true,
}).start();
},
}),
).current;
// Highlight fade: при переключении highlighted=true крутим короткую
// анимацию "flash + fade out" через Animated.Value (0→1→0 за ~1.8s).
const highlightAnim = useRef(new Animated.Value(0)).current;
useEffect(() => {
if (!highlighted) return;
highlightAnim.setValue(0);
Animated.sequence([
Animated.timing(highlightAnim, { toValue: 1, duration: 150, useNativeDriver: false }),
Animated.delay(1400),
Animated.timing(highlightAnim, { toValue: 0, duration: 450, useNativeDriver: false }),
]).start();
}, [highlighted, highlightAnim]);
const highlightBg = highlightAnim.interpolate({
inputRange: [0, 1],
outputRange: ['rgba(29,155,240,0)', 'rgba(29,155,240,0.22)'],
});
const isMine = variant === 'own';
const hasAttachment = !!msg.attachment;
const hasReply = !!msg.replyTo;
const attachmentOnly = hasAttachment && !msg.text.trim();
const bubbleStyle = attachmentOnly
? { ...(isMine ? ownBubble : peerBubble), padding: 4 }
: (isMine ? ownBubble : peerBubble);
const bubbleNode = (
<Animated.View
{...panResponder.panHandlers}
style={{
transform: [{ translateX }],
maxWidth: hasAttachment ? '80%' : '85%',
minWidth: hasAttachment || hasReply ? 220 : undefined,
}}
>
<View style={bubbleStyle}>
{msg.replyTo && (
<ReplyQuote
author={msg.replyTo.author}
preview={msg.replyTo.text}
own={isMine}
onJump={() => onJumpToReply?.(msg.replyTo!.id)}
/>
)}
{msg.attachment && (
<AttachmentPreview attachment={msg.attachment} own={isMine} />
)}
{msg.text.trim() ? (
<Text style={bubbleText}>{msg.text}</Text>
) : null}
<BubbleFooter
edited={!!msg.edited}
time={relTime(msg.timestamp)}
own={isMine}
read={!!msg.read}
/>
</View>
</Animated.View>
);
const contentRow =
variant === 'own' ? (
<View style={{ flexDirection: 'row', justifyContent: 'flex-end' }}>
{bubbleNode}
</View>
) : variant === 'peer-compact' ? (
<View style={{ flexDirection: 'row', alignItems: 'flex-start' }}>
{bubbleNode}
</View>
) : (
<View>
{showName && (
<Pressable
onPress={onOpenProfile}
hitSlop={4}
style={{ marginLeft: PEER_AVATAR_SLOT, marginBottom: 3 }}
>
<Text style={{ color: '#8b8b8b', fontSize: 12 }} numberOfLines={1}>
{peerName}
</Text>
</Pressable>
)}
<View style={{ flexDirection: 'row', alignItems: 'flex-end' }}>
<View style={{ width: PEER_AVATAR_SLOT, alignItems: 'flex-start' }}>
{showAvatar ? (
<Pressable onPress={onOpenProfile} hitSlop={4}>
<Avatar name={peerName} address={peerAddress} size={26} />
</Pressable>
) : null}
</View>
{bubbleNode}
</View>
</View>
);
return (
<Animated.View
onTouchStart={onTouchStart}
onTouchMove={onTouchMove}
onTouchEnd={onTouchEnd}
onTouchCancel={() => { clearLp(); moved.current = true; }}
style={{
paddingHorizontal: 8,
marginBottom: 6,
// Selection & highlight накладываются: highlight flash побеждает
// когда анимация > 0, иначе статичный selection-tint.
backgroundColor: selected ? 'rgba(29,155,240,0.12)' : highlightBg,
position: 'relative',
}}
>
{contentRow}
{selectionMode && (
<CheckDot
selected={!!selected}
onPress={() => onTap?.(msg)}
/>
)}
</Animated.View>
);
}
// ─── Clickable check-dot ────────────────────────────────────────────
function CheckDot({ selected, onPress }: { selected: boolean; onPress: () => void }) {
return (
<Pressable
onPress={onPress}
hitSlop={12}
style={{
position: 'absolute',
right: 4,
top: 0, bottom: 0,
alignItems: 'center',
justifyContent: 'center',
}}
>
<View
style={{
width: 20,
height: 20,
borderRadius: 10,
backgroundColor: selected ? '#1d9bf0' : 'rgba(0,0,0,0.55)',
borderWidth: 2,
borderColor: selected ? '#1d9bf0' : '#6b6b6b',
alignItems: 'center',
justifyContent: 'center',
}}
>
{selected && <Ionicons name="checkmark" size={12} color="#ffffff" />}
</View>
</Pressable>
);
}
// ─── Footer ─────────────────────────────────────────────────────────
interface FooterProps {
edited: boolean;
time: string;
own?: boolean;
read?: boolean;
}
function BubbleFooter({ edited, time, own, read }: FooterProps) {
const textColor = own ? 'rgba(255,255,255,0.78)' : '#8b8b8b';
const dotColor = own ? 'rgba(255,255,255,0.55)' : '#5a5a5a';
return (
<View
style={{
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'flex-end',
marginTop: 2,
gap: 4,
}}
>
{edited && (
<>
<Text style={{ color: textColor, fontSize: 11 }}>Edited</Text>
<Text style={{ color: dotColor, fontSize: 11 }}>·</Text>
</>
)}
<Text style={{ color: textColor, fontSize: 11 }}>{time}</Text>
{own && (
<Ionicons
name={read ? 'checkmark-circle' : 'checkmark-circle-outline'}
size={13}
color={read ? '#ffffff' : 'rgba(255,255,255,0.78)'}
style={{ marginLeft: 2 }}
/>
)}
</View>
);
}

70
client-app/components/chat/ReplyQuote.tsx Normal file
View File

@@ -0,0 +1,70 @@
/**
* ReplyQuote — блок "цитаты" внутри bubble'а сообщения-ответа.
*
* Визуал: slim-row с синим бордером слева (accent-bar), author в синем,
* preview text — серым, в одну строку.
*
* Tap на quoted-блок → onJump → ChatScreen скроллит к оригиналу и
* подсвечивает его на пару секунд. Если оригинал не найден в текущем
* списке (удалён / ушёл за пределы пагинации) — onJump может просто
* no-op'нуть.
*
* Цвета зависят от того в чьём bubble'е мы находимся:
* - own (синий bubble) → quote border = белый, текст белый/85%
* - peer (серый bubble) → quote border = accent blue, текст white
*/
import React from 'react';
import { View, Text, Pressable } from 'react-native';
export interface ReplyQuoteProps {
author: string;
preview: string;
own?: boolean;
onJump?: () => void;
}
export function ReplyQuote({ author, preview, own, onJump }: ReplyQuoteProps) {
const barColor = own ? 'rgba(255,255,255,0.85)' : '#1d9bf0';
const authorColor = own ? '#ffffff' : '#1d9bf0';
const previewColor = own ? 'rgba(255,255,255,0.85)' : '#c0c0c0';
return (
<Pressable
onPress={onJump}
style={({ pressed }) => ({
flexDirection: 'row',
backgroundColor: own ? 'rgba(255,255,255,0.10)' : 'rgba(29,155,240,0.10)',
borderRadius: 10,
overflow: 'hidden',
marginBottom: 5,
opacity: pressed ? 0.7 : 1,
})}
>
{/* Accent bar слева */}
<View
style={{
width: 3,
backgroundColor: barColor,
}}
/>
<View style={{ flex: 1, paddingHorizontal: 8, paddingVertical: 6 }}>
<Text
style={{
color: authorColor,
fontSize: 12,
fontWeight: '700',
}}
numberOfLines={1}
>
{author}
</Text>
<Text
style={{ color: previewColor, fontSize: 13 }}
numberOfLines={1}
>
{preview || 'attachment'}
</Text>
</View>
</Pressable>
);
}

158
client-app/components/chat/VideoCirclePlayer.tsx Normal file
View File

@@ -0,0 +1,158 @@
/**
* VideoCirclePlayer — telegram-style круглое видео-сообщение.
*
* Мигрировано с expo-av `<Video>` на expo-video `<VideoView>` +
* useVideoPlayer hook (expo-av deprecated в SDK 54).
*
* UI:
* - Круглая thumbnail-рамка (Image превью первого кадра) с play-overlay
* - Tap → полноэкранный Modal с VideoView в круглой рамке, auto-play + loop
* - Duration badge снизу
*/
import React, { useState } from 'react';
import { View, Text, Pressable, Modal, Image } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { useVideoPlayer, VideoView } from 'expo-video';
export interface VideoCirclePlayerProps {
uri: string;
duration?: number;
size?: number;
}
function formatClock(sec: number): string {
const m = Math.floor(sec / 60);
const s = Math.floor(sec % 60);
return `${m}:${String(s).padStart(2, '0')}`;
}
export function VideoCirclePlayer({ uri, duration, size = 220 }: VideoCirclePlayerProps) {
const [open, setOpen] = useState(false);
return (
<>
<Pressable
onPress={() => setOpen(true)}
style={{
width: size, height: size, borderRadius: size / 2,
overflow: 'hidden',
backgroundColor: '#0a0a0a',
marginBottom: 4,
alignItems: 'center', justifyContent: 'center',
}}
>
{/* Статический thumbnail через Image (первый кадр если платформа
поддерживает, иначе чёрный фон). Реальное видео играет только
в Modal ради производительности FlatList'а. */}
<Image
source={{ uri }}
style={{ width: '100%', height: '100%' }}
resizeMode="cover"
/>
<View
style={{
position: 'absolute',
width: 52, height: 52, borderRadius: 26,
backgroundColor: 'rgba(0,0,0,0.55)',
alignItems: 'center', justifyContent: 'center',
}}
>
<Ionicons name="play" size={22} color="#ffffff" style={{ marginLeft: 2 }} />
</View>
{duration !== undefined && (
<View
style={{
position: 'absolute',
right: size / 2 - 26, bottom: 16,
paddingHorizontal: 6, paddingVertical: 2,
borderRadius: 6,
backgroundColor: 'rgba(0,0,0,0.6)',
}}
>
<Text style={{ color: '#ffffff', fontSize: 11, fontWeight: '600' }}>
{formatClock(duration)}
</Text>
</View>
)}
</Pressable>
{open && (
<VideoModal uri={uri} onClose={() => setOpen(false)} />
)}
</>
);
}
// Modal рендерится только когда open=true — это значит useVideoPlayer
// не создаёт лишних плееров пока пользователь не открыл overlay.
function VideoModal({ uri, onClose }: { uri: string; onClose: () => void }) {
// useVideoPlayer может throw'нуть на некоторых платформах при
// невалидных source'ах. try/catch вокруг render'а защищает парента
// от полного crash'а.
let player: ReturnType<typeof useVideoPlayer> | null = null;
try {
// eslint-disable-next-line react-hooks/rules-of-hooks
player = useVideoPlayer({ uri }, (p) => {
p.loop = true;
p.muted = false;
p.play();
});
} catch {
player = null;
}
return (
<Modal visible transparent animationType="fade" onRequestClose={onClose}>
<Pressable
onPress={onClose}
style={{
flex: 1,
backgroundColor: 'rgba(0,0,0,0.92)',
alignItems: 'center',
justifyContent: 'center',
padding: 20,
}}
>
<View
style={{
width: '90%',
aspectRatio: 1,
maxWidth: 420, maxHeight: 420,
borderRadius: 9999,
overflow: 'hidden',
backgroundColor: '#000',
}}
>
{player ? (
<VideoView
player={player}
style={{ width: '100%', height: '100%' }}
contentFit="cover"
nativeControls={false}
/>
) : (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Ionicons name="alert-circle-outline" size={36} color="#8b8b8b" />
<Text style={{ color: '#8b8b8b', fontSize: 12, marginTop: 8 }}>
Playback not available
</Text>
</View>
)}
</View>
<Pressable
onPress={onClose}
style={{
position: 'absolute',
top: 48, right: 16,
width: 40, height: 40, borderRadius: 20,
backgroundColor: 'rgba(255,255,255,0.14)',
alignItems: 'center', justifyContent: 'center',
}}
>
<Ionicons name="close" size={22} color="#ffffff" />
</Pressable>
</Pressable>
</Modal>
);
}

217
client-app/components/chat/VideoCircleRecorder.tsx Normal file
View File

@@ -0,0 +1,217 @@
/**
* VideoCircleRecorder — full-screen Modal для записи круглого видео-
* сообщения (Telegram-style).
*
* UX:
* 1. Открывается Modal с CameraView (по умолчанию front-camera).
* 2. Превью — круглое (аналогично VideoCirclePlayer).
* 3. Большая красная кнопка внизу: tap-to-start, tap-to-stop.
* 4. Максимум 15 секунд — авто-стоп.
* 5. По stop'у возвращаем attachment { kind:'video', circle:true, uri, duration }.
* 6. Свайп вниз / close-icon → cancel (без отправки).
*/
import React, { useEffect, useRef, useState } from 'react';
import { View, Text, Pressable, Modal, Alert } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { CameraView, useCameraPermissions, useMicrophonePermissions } from 'expo-camera';
import type { Attachment } from '@/lib/types';
export interface VideoCircleRecorderProps {
visible: boolean;
onClose: () => void;
onFinish: (att: Attachment) => void;
}
const MAX_DURATION_SEC = 15;
function formatClock(sec: number): string {
const m = Math.floor(sec / 60);
const s = Math.floor(sec % 60);
return `${m}:${String(s).padStart(2, '0')}`;
}
export function VideoCircleRecorder({ visible, onClose, onFinish }: VideoCircleRecorderProps) {
const insets = useSafeAreaInsets();
const camRef = useRef<CameraView>(null);
const [camPerm, requestCam] = useCameraPermissions();
const [micPerm, requestMic] = useMicrophonePermissions();
const [recording, setRecording] = useState(false);
const [elapsed, setElapsed] = useState(0);
const startedAt = useRef(0);
const facing: 'front' | 'back' = 'front';
// Timer + auto-stop at MAX_DURATION_SEC
useEffect(() => {
if (!recording) return;
const t = setInterval(() => {
const s = Math.floor((Date.now() - startedAt.current) / 1000);
setElapsed(s);
if (s >= MAX_DURATION_SEC) stopAndSend();
}, 250);
return () => clearInterval(t);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [recording]);
// Permissions on mount of visible
useEffect(() => {
if (!visible) {
setRecording(false);
setElapsed(0);
return;
}
(async () => {
if (!camPerm?.granted) await requestCam();
if (!micPerm?.granted) await requestMic();
})();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [visible]);
const start = async () => {
if (!camRef.current || recording) return;
try {
startedAt.current = Date.now();
setElapsed(0);
setRecording(true);
// recordAsync блокируется до stopRecording или maxDuration
const result = await camRef.current.recordAsync({ maxDuration: MAX_DURATION_SEC });
setRecording(false);
if (!result?.uri) return;
const seconds = Math.max(1, Math.floor((Date.now() - startedAt.current) / 1000));
onFinish({
kind: 'video',
circle: true,
uri: result.uri,
duration: seconds,
mime: 'video/mp4',
});
onClose();
} catch (e: any) {
setRecording(false);
Alert.alert('Recording failed', e?.message ?? 'Unknown error');
}
};
const stopAndSend = () => {
if (!recording) return;
camRef.current?.stopRecording();
// recordAsync promise выше resolve'нется с uri → onFinish
};
const cancel = () => {
if (recording) {
camRef.current?.stopRecording();
}
onClose();
};
const permOK = camPerm?.granted && micPerm?.granted;
return (
<Modal visible={visible} transparent animationType="slide" onRequestClose={cancel}>
<View
style={{
flex: 1,
backgroundColor: '#000000',
paddingTop: insets.top,
paddingBottom: Math.max(insets.bottom, 12),
}}
>
{/* Header */}
<View style={{ flexDirection: 'row', alignItems: 'center', padding: 12 }}>
<Pressable
onPress={cancel}
hitSlop={10}
style={{
width: 36, height: 36, borderRadius: 18,
backgroundColor: 'rgba(255,255,255,0.08)',
alignItems: 'center', justifyContent: 'center',
}}
>
<Ionicons name="close" size={20} color="#ffffff" />
</Pressable>
<Text style={{ color: '#ffffff', fontSize: 16, fontWeight: '700', flex: 1, textAlign: 'center' }}>
Video message
</Text>
<View style={{ width: 36 }} />
</View>
{/* Camera */}
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', padding: 20 }}>
{permOK ? (
<View
style={{
width: '85%',
aspectRatio: 1,
maxWidth: 360, maxHeight: 360,
borderRadius: 9999,
overflow: 'hidden',
backgroundColor: '#0a0a0a',
borderWidth: recording ? 3 : 0,
borderColor: '#f4212e',
}}
>
<CameraView
ref={camRef}
style={{ flex: 1 }}
facing={facing}
mode="video"
/>
</View>
) : (
<View style={{ alignItems: 'center', paddingHorizontal: 24 }}>
<Ionicons name="videocam-off-outline" size={42} color="#8b8b8b" />
<Text style={{ color: '#ffffff', fontSize: 16, fontWeight: '700', marginTop: 12 }}>
Permissions needed
</Text>
<Text style={{ color: '#8b8b8b', fontSize: 13, marginTop: 4, textAlign: 'center' }}>
Camera + microphone access are required to record a video message.
</Text>
</View>
)}
{/* Timer */}
{recording && (
<Text
style={{
color: '#f4212e',
fontSize: 14, fontWeight: '700',
marginTop: 14,
}}
>
● {formatClock(elapsed)} / {formatClock(MAX_DURATION_SEC)}
</Text>
)}
</View>
{/* Record / Stop button */}
<View style={{ alignItems: 'center', paddingBottom: 16 }}>
<Pressable
onPress={recording ? stopAndSend : start}
disabled={!permOK}
style={({ pressed }) => ({
width: 72, height: 72, borderRadius: 36,
backgroundColor: !permOK ? '#1a1a1a' : recording ? '#f4212e' : '#1d9bf0',
alignItems: 'center', justifyContent: 'center',
opacity: pressed ? 0.85 : 1,
borderWidth: 4,
borderColor: 'rgba(255,255,255,0.2)',
})}
>
<Ionicons
name={recording ? 'stop' : 'videocam'}
size={30}
color="#ffffff"
/>
</Pressable>
<Text style={{ color: '#8b8b8b', fontSize: 12, marginTop: 10 }}>
{recording ? 'Tap to stop & send' : permOK ? 'Tap to record' : 'Grant permissions'}
</Text>
</View>
</View>
</Modal>
);
}

166
client-app/components/chat/VoicePlayer.tsx Normal file
View File

@@ -0,0 +1,166 @@
/**
* VoicePlayer — play/pause voice message через expo-audio.
*
* Раздел на две подкомпоненты:
* - RealVoicePlayer: useAudioPlayer с настоящим URI
* - StubVoicePlayer: отрисовка waveform без player'а (seed-URI)
*
* Разделение важно: useAudioPlayer не должен получать null/stub-строки —
* при падении внутри expo-audio это крашит render всего bubble'а и
* (в FlatList) визуально "пропадает" интерфейс чата.
*
* UI:
* [▶/⏸] ▮▮▮▮▮▮▮▮▮▯▯▯▯▯▯▯▯ 0:03 / 0:17
*/
import React, { useMemo } from 'react';
import { View, Text, Pressable } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { useAudioPlayer, useAudioPlayerStatus } from 'expo-audio';
export interface VoicePlayerProps {
uri: string;
duration?: number;
own?: boolean;
}
const BAR_COUNT = 22;
function formatClock(sec: number): string {
const m = Math.floor(sec / 60);
const s = Math.floor(sec % 60);
return `${m}:${String(s).padStart(2, '0')}`;
}
function isStubUri(u: string): boolean {
return u.startsWith('voice-stub://') || u.startsWith('voice-demo://');
}
function useBars(uri: string) {
return useMemo(() => {
const seed = uri.length;
return Array.from({ length: BAR_COUNT }, (_, i) => {
const h = ((seed * (i + 1) * 7919) % 11) + 4;
return h;
});
}, [uri]);
}
// ─── Top-level router ──────────────────────────────────────────────
export function VoicePlayer(props: VoicePlayerProps) {
// Stub-URI (seed) не передаётся в useAudioPlayer — hook может крашить
// на невалидных source'ах. Рендерим статический waveform.
if (isStubUri(props.uri)) return <StubVoicePlayer {...props} />;
return <RealVoicePlayer {...props} />;
}
// ─── Stub (seed / preview) ─────────────────────────────────────────
function StubVoicePlayer({ uri, duration, own }: VoicePlayerProps) {
const bars = useBars(uri);
const accent = own ? 'rgba(255,255,255,0.92)' : '#1d9bf0';
const subtle = own ? 'rgba(255,255,255,0.35)' : '#3a3a3a';
const textColor = own ? 'rgba(255,255,255,0.85)' : '#8b8b8b';
return (
<View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 4, gap: 8 }}>
<View
style={{
width: 32, height: 32, borderRadius: 16,
backgroundColor: own ? 'rgba(255,255,255,0.18)' : '#1a1a1a',
alignItems: 'center', justifyContent: 'center',
}}
>
<Ionicons name="play" size={14} color="#ffffff" style={{ marginLeft: 1 }} />
</View>
<View style={{ flexDirection: 'row', alignItems: 'center', gap: 2, flex: 1 }}>
{bars.map((h, i) => (
<View
key={i}
style={{
width: 2, height: h, borderRadius: 1,
backgroundColor: i < 6 ? accent : subtle,
}}
/>
))}
</View>
<Text style={{ color: textColor, fontSize: 12 }}>
{formatClock(duration ?? 0)}
</Text>
</View>
);
}
// ─── Real expo-audio player ────────────────────────────────────────
function RealVoicePlayer({ uri, duration, own }: VoicePlayerProps) {
const player = useAudioPlayer({ uri });
const status = useAudioPlayerStatus(player);
const bars = useBars(uri);
const accent = own ? 'rgba(255,255,255,0.92)' : '#1d9bf0';
const subtle = own ? 'rgba(255,255,255,0.35)' : '#3a3a3a';
const textColor = own ? 'rgba(255,255,255,0.85)' : '#8b8b8b';
const playing = !!status.playing;
const loading = !!status.isBuffering && !status.isLoaded;
const curSec = status.currentTime ?? 0;
const totalSec = (status.duration && status.duration > 0) ? status.duration : (duration ?? 0);
const playedRatio = totalSec > 0 ? Math.min(1, curSec / totalSec) : 0;
const playedBars = Math.round(playedRatio * BAR_COUNT);
const toggle = () => {
try {
if (status.playing) {
player.pause();
} else {
if (status.duration && curSec >= status.duration - 0.05) {
player.seekTo(0);
}
player.play();
}
} catch {
/* dbl-tap during load */
}
};
return (
<View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 4, gap: 8 }}>
<Pressable
onPress={toggle}
hitSlop={8}
style={{
width: 32, height: 32, borderRadius: 16,
backgroundColor: own ? 'rgba(255,255,255,0.18)' : '#1a1a1a',
alignItems: 'center', justifyContent: 'center',
}}
>
<Ionicons
name={playing ? 'pause' : (loading ? 'hourglass-outline' : 'play')}
size={14}
color="#ffffff"
style={{ marginLeft: playing || loading ? 0 : 1 }}
/>
</Pressable>
<View style={{ flexDirection: 'row', alignItems: 'center', gap: 2, flex: 1 }}>
{bars.map((h, i) => (
<View
key={i}
style={{
width: 2, height: h, borderRadius: 1,
backgroundColor: i < playedBars ? accent : subtle,
}}
/>
))}
</View>
<Text style={{ color: textColor, fontSize: 12 }}>
{playing || curSec > 0
? `${formatClock(Math.floor(curSec))} / ${formatClock(Math.floor(totalSec))}`
: formatClock(Math.floor(totalSec))}
</Text>
</View>
);
}

183
client-app/components/chat/VoiceRecorder.tsx Normal file
View File

@@ -0,0 +1,183 @@
/**
* VoiceRecorder — inline UI для записи голосового сообщения через
* expo-audio (заменил deprecated expo-av).
*
* UX:
* - При монтировании проверяет permission + запускает запись
* - [🗑] ● timer Recording… [↑]
* - 🗑 = cancel (discard), ↑ = stop + send
*
* Состояние recorder'а живёт в useAudioRecorder hook'е. Prepare + start
* вызывается из useEffect. Stop — при release, finalized URI через
* `recorder.uri`.
*/
import React, { useEffect, useRef, useState } from 'react';
import { View, Text, Pressable, Alert, Animated } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import {
useAudioRecorder, AudioModule, RecordingPresets, setAudioModeAsync,
} from 'expo-audio';
import type { Attachment } from '@/lib/types';
export interface VoiceRecorderProps {
onFinish: (att: Attachment) => void;
onCancel: () => void;
}
export function VoiceRecorder({ onFinish, onCancel }: VoiceRecorderProps) {
const recorder = useAudioRecorder(RecordingPresets.HIGH_QUALITY);
const startedAt = useRef(0);
const [elapsed, setElapsed] = useState(0);
const [error, setError] = useState<string | null>(null);
const [ready, setReady] = useState(false);
// Pulsing red dot
const pulse = useRef(new Animated.Value(1)).current;
useEffect(() => {
const loop = Animated.loop(
Animated.sequence([
Animated.timing(pulse, { toValue: 0.4, duration: 500, useNativeDriver: true }),
Animated.timing(pulse, { toValue: 1, duration: 500, useNativeDriver: true }),
]),
);
loop.start();
return () => loop.stop();
}, [pulse]);
// Start recording at mount
useEffect(() => {
let cancelled = false;
(async () => {
try {
const perm = await AudioModule.requestRecordingPermissionsAsync();
if (!perm.granted) {
setError('Microphone permission denied');
return;
}
await setAudioModeAsync({
allowsRecording: true,
playsInSilentMode: true,
});
await recorder.prepareToRecordAsync();
if (cancelled) return;
recorder.record();
startedAt.current = Date.now();
setReady(true);
} catch (e: any) {
setError(e?.message ?? 'Failed to start recording');
}
})();
return () => { cancelled = true; };
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
// Timer tick
useEffect(() => {
if (!ready) return;
const t = setInterval(() => {
setElapsed(Math.floor((Date.now() - startedAt.current) / 1000));
}, 250);
return () => clearInterval(t);
}, [ready]);
const stop = async (send: boolean) => {
try {
if (recorder.isRecording) {
await recorder.stop();
}
const uri = recorder.uri;
const seconds = Math.max(1, Math.floor((Date.now() - startedAt.current) / 1000));
if (!send || !uri || seconds < 1) {
onCancel();
return;
}
onFinish({
kind: 'voice',
uri,
duration: seconds,
mime: 'audio/m4a',
});
} catch (e: any) {
Alert.alert('Recording failed', e?.message ?? 'Unknown error');
onCancel();
}
};
const mm = Math.floor(elapsed / 60);
const ss = elapsed % 60;
if (error) {
return (
<View
style={{
flexDirection: 'row',
alignItems: 'center',
backgroundColor: '#111111',
borderRadius: 22,
borderWidth: 1, borderColor: '#1f1f1f',
paddingHorizontal: 14, paddingVertical: 8,
gap: 10,
}}
>
<Ionicons name="alert-circle" size={18} color="#f4212e" />
<Text style={{ color: '#f4212e', fontSize: 13, flex: 1 }}>{error}</Text>
<Pressable onPress={onCancel} hitSlop={8}>
<Ionicons name="close" size={20} color="#8b8b8b" />
</Pressable>
</View>
);
}
return (
<View
style={{
flexDirection: 'row',
alignItems: 'center',
backgroundColor: '#111111',
borderRadius: 22,
borderWidth: 1, borderColor: '#1f1f1f',
paddingHorizontal: 10, paddingVertical: 6,
gap: 10,
}}
>
<Pressable
onPress={() => stop(false)}
hitSlop={8}
style={{
width: 32, height: 32, borderRadius: 16,
alignItems: 'center', justifyContent: 'center',
}}
>
<Ionicons name="trash-outline" size={20} color="#f4212e" />
</Pressable>
<View style={{ flexDirection: 'row', alignItems: 'center', gap: 10, flex: 1 }}>
<Animated.View
style={{
width: 10, height: 10, borderRadius: 5,
backgroundColor: '#f4212e',
opacity: pulse,
}}
/>
<Text style={{ color: '#ffffff', fontSize: 15, fontWeight: '600' }}>
{mm}:{String(ss).padStart(2, '0')}
</Text>
<Text style={{ color: '#8b8b8b', fontSize: 12 }}>
Recording…
</Text>
</View>
<Pressable
onPress={() => stop(true)}
style={({ pressed }) => ({
width: 32, height: 32, borderRadius: 16,
backgroundColor: pressed ? '#1a8cd8' : '#1d9bf0',
alignItems: 'center', justifyContent: 'center',
})}
>
<Ionicons name="arrow-up" size={18} color="#ffffff" />
</Pressable>
</View>
);
}

79
client-app/components/chat/rows.ts Normal file
View File

@@ -0,0 +1,79 @@
/**
* Группировка сообщений в rows для FlatList чат-экрана.
*
* Чистая функция — никаких React-зависимостей, легко тестируется unit'ом.
*
* Правила:
* 1. Между разными календарными днями вставляется {kind:'sep', label}.
* 2. Внутри одного дня peer-сообщения группируются в "лесенку" с учётом:
* - смены отправителя
* - перерыва > 1 часа между соседними сообщениями
* В пределах одной группы:
* showName = true только у первого
* showAvatar = true только у последнего
* 3. mine-сообщения всегда idle: showName=false, showAvatar=false
* (в референсе X-style никогда не рисуется имя/аватар над своим bubble).
*
* showName/showAvatar всё равно вычисляются — даже если потом render-слой
* их проигнорирует (DM / channel — без sender-meta). Логика кнопки renders
* сама решает показывать ли их, см. MessageBubble → withSenderMeta.
*/
import type { Message } from '@/lib/types';
import { dateBucket } from '@/lib/dates';
export type Row =
| { kind: 'sep'; id: string; label: string }
| {
kind: 'msg';
msg: Message;
showName: boolean;
showAvatar: boolean;
};
// Максимальная пауза внутри "лесенки" — после неё новый run.
const RUN_GAP_SECONDS = 60 * 60; // 1 час
export function buildRows(msgs: Message[]): Row[] {
const out: Row[] = [];
let lastBucket = '';
for (let i = 0; i < msgs.length; i++) {
const m = msgs[i];
const b = dateBucket(m.timestamp);
if (b !== lastBucket) {
out.push({ kind: 'sep', id: `sep_${b}_${m.id}`, label: b });
lastBucket = b;
}
const prev = msgs[i - 1];
const next = msgs[i + 1];
// "Прервать run" флаги:
// - разный день
// - разный отправитель
// - своё vs чужое
// - пауза > 1 часа
const breakBefore =
!prev ||
dateBucket(prev.timestamp) !== b ||
prev.from !== m.from ||
prev.mine !== m.mine ||
(m.timestamp - prev.timestamp) > RUN_GAP_SECONDS;
const breakAfter =
!next ||
dateBucket(next.timestamp) !== b ||
next.from !== m.from ||
next.mine !== m.mine ||
(next.timestamp - m.timestamp) > RUN_GAP_SECONDS;
// Для mine — никогда не показываем имя/аватар.
const showName = m.mine ? false : breakBefore;
const showAvatar = m.mine ? false : breakAfter;
out.push({ kind: 'msg', msg: m, showName, showAvatar });
}
return out;
}