@ion299/sdk-react-native 0.1.0-beta.4 → 0.1.0-beta.6

package/src/audio/audioController.ts

@@ -0,0 +1,144 @@
+import AudioModule, {
+  onAudioState,
+  type AudioStateEvent,
+} from '../native/NativeChatSdkAudioPlayer'
+
+export interface AudioPlaybackState {
+  state: 'idle' | 'loading' | 'playing' | 'paused' | 'error'
+  positionMillis: number
+  durationMillis: number
+}
+
+type Listener = (state: AudioPlaybackState) => void
+
+const IDLE: AudioPlaybackState = { state: 'idle', positionMillis: 0, durationMillis: 0 }
+
+class AudioController {
+  private listeners = new Map<string, Set<Listener>>()
+  private states = new Map<string, AudioPlaybackState>()
+  private activeKey: string | null = null
+  private subscribed = false
+
+  get isAvailable(): boolean {
+    return !!AudioModule
+  }
+
+  private ensureSubscribed() {
+    if (this.subscribed || !AudioModule) return
+    this.subscribed = true
+    onAudioState((event) => this.handleEvent(event))
+  }
+
+  private handleEvent(event: AudioStateEvent) {
+    const prev = this.getState(event.key)
+    let next: AudioPlaybackState
+
+    switch (event.state) {
+      case 'loading':
+        next = { state: 'loading', positionMillis: 0, durationMillis: event.durationMillis }
+        break
+      case 'playing':
+        next = {
+          state: 'playing',
+          positionMillis: event.positionMillis,
+          durationMillis: event.durationMillis || prev.durationMillis,
+        }
+        break
+      case 'paused':
+        next = {
+          state: 'paused',
+          positionMillis: event.positionMillis,
+          durationMillis: event.durationMillis || prev.durationMillis,
+        }
+        break
+      case 'ended':
+      case 'stopped':
+        next = { state: 'idle', positionMillis: 0, durationMillis: event.durationMillis || prev.durationMillis }
+        if (this.activeKey === event.key) this.activeKey = null
+        break
+      case 'error':
+      default:
+        next = { state: 'error', positionMillis: 0, durationMillis: 0 }
+        if (this.activeKey === event.key) this.activeKey = null
+        break
+    }
+
+    this.setState(event.key, next)
+  }
+
+  private setState(key: string, state: AudioPlaybackState) {
+    this.states.set(key, state)
+    this.listeners.get(key)?.forEach((listener) => listener(state))
+  }
+
+  getState(key: string): AudioPlaybackState {
+    return this.states.get(key) ?? IDLE
+  }
+
+  subscribe(key: string, listener: Listener): () => void {
+    this.ensureSubscribed()
+    let set = this.listeners.get(key)
+    if (!set) {
+      set = new Set()
+      this.listeners.set(key, set)
+    }
+    set.add(listener)
+    listener(this.getState(key))
+    return () => {
+      set!.delete(listener)
+      if (set!.size === 0) this.listeners.delete(key)
+    }
+  }
+
+  async play(key: string, url: string, headers: Record<string, string> = {}): Promise<void> {
+    if (!AudioModule) return
+    this.ensureSubscribed()
+
+    if (this.activeKey && this.activeKey !== key) {
+      const prevKey = this.activeKey
+      const prev = this.getState(prevKey)
+      this.setState(prevKey, { state: 'idle', positionMillis: 0, durationMillis: prev.durationMillis })
+    }
+    this.activeKey = key
+
+    const current = this.getState(key)
+    if (current.state === 'idle' || current.state === 'error') {
+      this.setState(key, { ...current, state: 'loading', positionMillis: 0 })
+    }
+
+    try {
+      await AudioModule.play(key, url, headers)
+    } catch {
+      this.setState(key, { state: 'error', positionMillis: 0, durationMillis: 0 })
+    }
+  }
+
+  async pause(key: string): Promise<void> {
+    if (!AudioModule) return
+    try {
+      await AudioModule.pause(key)
+    } catch {
+    
+    }
+  }
+
+  async seek(key: string, positionMillis: number): Promise<void> {
+    if (!AudioModule) return
+    try {
+      await AudioModule.seek(key, positionMillis)
+    } catch {
+        
+    }
+  }
+
+  async stop(key: string): Promise<void> {
+    if (!AudioModule) return
+    try {
+      await AudioModule.stop(key)
+    } catch {
+
+    }
+  }
+}
+
+export const audioController = new AudioController()

package/src/components/AudioMessage.tsx

@@ -0,0 +1,198 @@
+import React, { useEffect, useState } from 'react'
+import {
+  ActivityIndicator,
+  GestureResponderEvent,
+  LayoutChangeEvent,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native'
+import { audioController, type AudioPlaybackState } from '../audio/audioController'
+import type { ChatAttachment } from '../types'
+import type { ChatTheme } from '../theme'
+
+interface Props {
+  attachment: ChatAttachment
+  isOutbound: boolean
+  theme: ChatTheme
+}
+
+function attachmentKey(attachment: ChatAttachment): string {
+  return attachment.id > 0 ? `a${attachment.id}` : `t${attachment.url}`
+}
+
+function formatTime(millis: number): string {
+  if (!Number.isFinite(millis) || millis <= 0) return '0:00'
+  const totalSeconds = Math.floor(millis / 1000)
+  const minutes = Math.floor(totalSeconds / 60)
+  const seconds = totalSeconds % 60
+  return `${minutes}:${seconds.toString().padStart(2, '0')}`
+}
+
+export function AudioMessage({ attachment, isOutbound, theme }: Props) {
+  const key = attachmentKey(attachment)
+  const [pb, setPb] = useState<AudioPlaybackState>(() => audioController.getState(key))
+  const [trackWidth, setTrackWidth] = useState(0)
+
+  useEffect(() => audioController.subscribe(key, setPb), [key])
+
+  const isPlaying = pb.state === 'playing'
+  const isLoading = pb.state === 'loading'
+  const isError = pb.state === 'error'
+  const duration = pb.durationMillis
+  const position = pb.positionMillis
+  const progress = duration > 0 ? Math.min(1, position / duration) : 0
+
+  const accent = isOutbound ? '#ffffff' : theme.primaryColor
+  const trackBg = isOutbound ? 'rgba(255,255,255,0.30)' : 'rgba(0,0,0,0.12)'
+  const timeColor = isOutbound ? 'rgba(255,255,255,0.75)' : theme.systemText
+  const iconColor = isOutbound ? theme.primaryColor : '#ffffff'
+
+  const onToggle = () => {
+    if (isPlaying) {
+      void audioController.pause(key)
+    } else {
+      void audioController.play(key, attachment.url)
+    }
+  }
+
+  const onSeek = (e: GestureResponderEvent) => {
+    if (duration <= 0 || trackWidth <= 0) return
+    const ratio = Math.max(0, Math.min(1, e.nativeEvent.locationX / trackWidth))
+    void audioController.seek(key, ratio * duration)
+  }
+
+  const onTrackLayout = (e: LayoutChangeEvent) => {
+    setTrackWidth(e.nativeEvent.layout.width)
+  }
+
+  const timeLabel = duration > 0
+    ? `${formatTime(position)} / ${formatTime(duration)}`
+    : isError
+      ? 'Не удалось воспроизвести'
+      : formatTime(position)
+
+  return (
+    <View style={styles.root}>
+      <TouchableOpacity
+        style={[styles.button, { backgroundColor: accent }]}
+        onPress={onToggle}
+        activeOpacity={0.8}
+        disabled={isLoading}
+      >
+        {isLoading ? (
+          <ActivityIndicator size="small" color={iconColor} />
+        ) : isPlaying ? (
+          <PauseIcon color={iconColor} />
+        ) : (
+          <PlayIcon color={iconColor} />
+        )}
+      </TouchableOpacity>
+
+      <View style={styles.body}>
+        <TouchableOpacity
+          activeOpacity={1}
+          onPress={onSeek}
+          onLayout={onTrackLayout}
+          style={styles.trackWrap}
+        >
+          <View style={[styles.track, { backgroundColor: trackBg }]}>
+            <View
+              style={[styles.trackFill, { backgroundColor: accent, width: `${progress * 100}%` }]}
+            />
+            <View
+              style={[
+                styles.thumb,
+                { backgroundColor: accent, left: `${progress * 100}%` },
+              ]}
+            />
+          </View>
+        </TouchableOpacity>
+        <Text style={[styles.time, { color: timeColor }]}>{timeLabel}</Text>
+      </View>
+    </View>
+  )
+}
+
+function PlayIcon({ color }: { color: string }) {
+  return <View style={[styles.playTriangle, { borderLeftColor: color }]} />
+}
+
+function PauseIcon({ color }: { color: string }) {
+  return (
+    <View style={styles.pauseWrap}>
+      <View style={[styles.pauseBar, { backgroundColor: color }]} />
+      <View style={[styles.pauseBar, { backgroundColor: color }]} />
+    </View>
+  )
+}
+
+const BUTTON_SIZE = 40
+
+const styles = StyleSheet.create({
+  root: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 10,
+    minWidth: 200,
+    paddingVertical: 2,
+  },
+  button: {
+    width: BUTTON_SIZE,
+    height: BUTTON_SIZE,
+    borderRadius: BUTTON_SIZE / 2,
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: 0,
+  },
+  body: {
+    flex: 1,
+    gap: 4,
+  },
+  trackWrap: {
+    paddingVertical: 8,
+    justifyContent: 'center',
+  },
+  track: {
+    height: 4,
+    borderRadius: 2,
+  },
+  trackFill: {
+    height: 4,
+    borderRadius: 2,
+  },
+  thumb: {
+    position: 'absolute',
+    top: -3,
+    width: 10,
+    height: 10,
+    borderRadius: 5,
+    marginLeft: -5,
+  },
+  time: {
+    fontSize: 11,
+    lineHeight: 14,
+  },
+  playTriangle: {
+    width: 0,
+    height: 0,
+    backgroundColor: 'transparent',
+    borderStyle: 'solid',
+    borderTopWidth: 7,
+    borderBottomWidth: 7,
+    borderLeftWidth: 12,
+    borderTopColor: 'transparent',
+    borderBottomColor: 'transparent',
+    marginLeft: 3,
+  },
+  pauseWrap: {
+    flexDirection: 'row',
+    gap: 4,
+  },
+  pauseBar: {
+    width: 4,
+    height: 14,
+    borderRadius: 1,
+  },
+})

package/src/components/MessageBubble.tsx

@@ -1,6 +1,8 @@
 import React from 'react'
 import { Dimensions, Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
 import { attachmentDisplayName } from '../attachmentUtils'
+import { audioController } from '../audio/audioController'
+import { AudioMessage } from './AudioMessage'
 import type { ChatAttachment, ChatButton, ChatMessage } from '../types'
 import type { ChatTheme } from '../theme'
 
@@ -123,6 +125,10 @@ function AttachmentView({
     )
   }
 
+  if (attachment.type === 'audio' && audioController.isAvailable) {
+    return <AudioMessage attachment={attachment} isOutbound={isOutbound} theme={theme} />
+  }
+
   const nameColor = isOutbound ? theme.outboundText : theme.inboundText
   const sizeColor = isOutbound ? 'rgba(255,255,255,0.65)' : theme.systemText
   const displayName = attachmentDisplayName(attachment)

package/src/components/MessageInput.tsx

@@ -11,7 +11,6 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native'
-import Svg, { Path } from 'react-native-svg'
 import { INPUT_BOTTOM_PADDING } from '../safeArea'
 import { pickFiles as defaultPickFiles } from '../filePicker'
 import type { ChatTheme } from '../theme'
@@ -122,18 +121,7 @@ export function MessageInput({ theme, isSending, onSend, onPickFiles, strings }:
           {picking ? (
             <ActivityIndicator color={theme.systemText} size="small" />
           ) : (
-            <Svg
-              width={20}
-              height={20}
-              viewBox="0 0 32 32"
-              fill="none"
-              stroke={theme.primaryColor}
-              strokeWidth={2}
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            >
-              <Path d="M10 9 L10 24 C10 28 13 30 16 30 19 30 22 28 22 24 L22 6 C22 3 20 2 18 2 16 2 14 3 14 6 L14 23 C14 24 15 25 16 25 17 25 18 24 18 23 L18 9" />
-            </Svg>
+            <Text style={[styles.attachIcon, { color: theme.primaryColor }]}>+</Text>
           )}
         </TouchableOpacity>
 
@@ -257,6 +245,10 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     flexShrink:   0,
   },
+  attachIcon: {
+    fontSize:   26,
+    lineHeight: 28,
+  },
   inputWrap: {
     flex:             1,
     borderWidth:      1,

package/src/native/NativeChatSdkAudioPlayer.ts

@@ -0,0 +1,54 @@
+import { NativeEventEmitter, NativeModules, TurboModuleRegistry } from 'react-native'
+import type { EventSubscription, TurboModule } from 'react-native'
+
+export type NativeAudioState =
+  | 'loading'
+  | 'playing'
+  | 'paused'
+  | 'ended'
+  | 'stopped'
+  | 'error'
+
+export interface AudioStateEvent {
+  key: string
+  positionMillis: number
+  durationMillis: number
+  state: NativeAudioState
+}
+
+export interface Spec extends TurboModule {
+  play(key: string, url: string, headers: Record<string, string>): Promise<void>
+  pause(key: string): Promise<void>
+  seek(key: string, positionMillis: number): Promise<void>
+  stop(key: string): Promise<void>
+  addListener(eventName: string): void
+  removeListeners(count: number): void
+}
+
+const MODULE_NAME = 'ChatSdkAudioPlayer'
+
+function loadModule(): Spec | null {
+  try {
+    return TurboModuleRegistry.get<Spec>(MODULE_NAME)
+  } catch {
+    return (NativeModules[MODULE_NAME] as Spec | undefined) ?? null
+  }
+}
+
+const moduleRef = loadModule()
+
+export default moduleRef
+
+let emitter: NativeEventEmitter | null = null
+
+function getEmitter(): NativeEventEmitter | null {
+  if (!moduleRef) return null
+  if (!emitter) emitter = new NativeEventEmitter(moduleRef as unknown as never)
+  return emitter
+}
+
+export function onAudioState(
+  handler: (event: AudioStateEvent) => void,
+): EventSubscription | null {
+  return getEmitter()?.addListener('ChatSdkAudioState', handler) ?? null
+}