@robono/messaging-react-native 0.0.0-stage → 0.2.0

package/dist/media-controller.d.ts

@@ -0,0 +1,116 @@
+import { type MessageKind, type MessageMedia, type MessagingMessage, type MessagingSettings } from '@robono/messaging';
+export type MediaKind = Exclude<MessageKind, 'text' | 'poll'>;
+export interface LocalMessagingMedia extends Omit<MessageMedia, 'assetId'> {
+    uri: string;
+    /** Ephemeral authorized remote playback source. Never persist it in chat history. */
+    stream?: {
+        headers?: Record<string, string>;
+    };
+    resumeAtMs?: number;
+    autoPlay?: boolean;
+}
+export interface MediaTransferOptions {
+    signal: AbortSignal;
+    onProgress: (fraction: number) => void;
+}
+export interface MessagingMediaStorage {
+    /** Keep uploadId stable on retry. Verify bytes/type/duration on the backend before returning. */
+    upload(file: LocalMessagingMedia, context: MediaTransferOptions & {
+        uploadId: string;
+        conversationId: string;
+        kind: MediaKind;
+    }): Promise<MessageMedia>;
+    thumbnail?(message: MessagingMessage, context: MediaTransferOptions): Promise<LocalMessagingMedia | null>;
+    download(message: MessagingMessage, context: MediaTransferOptions): Promise<LocalMessagingMedia>;
+    /** Optional native streaming for voice/video. Return null to use a verified download. */
+    stream?(message: MessagingMessage, context: MediaTransferOptions): Promise<LocalMessagingMedia | null>;
+    /** Revoke/delete an unfinished upload. Must be idempotent and safe after an interrupted response. */
+    discard(uploadId: string): Promise<void>;
+}
+export interface MessagingMediaDevice {
+    pick(kind: Exclude<MediaKind, 'voice'>, settings: MessagingSettings, signal: AbortSignal, source?: "camera" | "call-video"): Promise<LocalMessagingMedia | null>;
+    startRecording(maxDurationMs: number, signal: AbortSignal): Promise<void>;
+    recordingStatus(): {
+        durationMs: number;
+        recording: boolean;
+        limitReached?: boolean;
+        level?: number;
+    };
+    stopRecording(): Promise<LocalMessagingMedia | null>;
+    /** Delete only cache copies owned by this adapter, never originals in the user's library. */
+    remove(file: LocalMessagingMedia): Promise<void>;
+}
+export interface MessagingMediaState {
+    phase: 'idle' | 'choosing' | 'preparing' | 'recording' | 'review' | 'uploading' | 'opening' | 'viewing' | 'failed';
+    kind: MediaKind;
+    file: LocalMessagingMedia | null;
+    elapsedMs: number;
+    maxDurationMs: number;
+    progress: number;
+    error: string | null;
+    retryUpload: boolean;
+    waveform?: number[];
+}
+/** Single attachment lifecycle shared by iOS and Android. Cancellation invalidates every late result. */
+export declare class MessagingMediaController {
+    private options;
+    private state;
+    private listeners;
+    private abort;
+    private intent;
+    private generation;
+    private resolve;
+    private timer;
+    private stopping;
+    private settings;
+    private conversationId;
+    private uploadId;
+    private disposed;
+    private closing;
+    private stageRecording;
+    private openedMessage;
+    private prepared;
+    private preparedUploads;
+    private preparedAborts;
+    getPrepared: (assetId: string) => LocalMessagingMedia | undefined;
+    restorePrepared(assetId: string, file: LocalMessagingMedia, kind: MediaKind): void;
+    releasePrepared(assetId: string): Promise<void>;
+    /** Browser drafts stay local until Send; the original ID survives upload retries. */
+    uploadPrepared(assetId: string, kind: MediaKind): Promise<MessageMedia>;
+    private forwardUploads;
+    /** Download through source authorization and upload a new destination-owned asset. */
+    prepareForward(message: MessagingMessage, target: {
+        conversationId: string;
+        settings: MessagingSettings;
+        uploadId: string;
+    }): Promise<MessageMedia>;
+    constructor(options: {
+        device: MessagingMediaDevice;
+        storage: MessagingMediaStorage;
+        createId: () => string;
+        getSettings: () => MessagingSettings;
+        getConversationId: () => string;
+        stageLocal?: boolean;
+    });
+    getSnapshot: () => MessagingMediaState;
+    subscribe: (f: () => void) => () => void;
+    private update;
+    private isCurrent;
+    pick(kind: MediaKind, source?: "camera" | "call-video", selectionIntent?: "preview" | "send" | "attach"): Promise<MessageMedia | null>;
+    private check;
+    finishRecording(interrupted?: boolean): Promise<void>;
+    send(): Promise<void>;
+    /** View an owned cache copy of a draft. Closing never removes the original draft. */
+    previewLocal(file: LocalMessagingMedia, kind: MediaKind): Promise<void>;
+    open(message: MessagingMessage): Promise<void>;
+    /** Save/share a local copy of a playing stream without replacing its playback source. */
+    exportFile<T>(save: (file: LocalMessagingMedia) => Promise<T>): Promise<T>;
+    /** Recover a failed/expired native stream once through fresh authorized download. */
+    fallbackStream(uri: string, positionMs: number, autoPlay: boolean): Promise<void>;
+    private openMedia;
+    cancel(): Promise<void>;
+    private closeCurrent;
+    interrupt(): Promise<void>;
+    dispose(): Promise<void>;
+    private error;
+}

package/dist/media-controller.js

@@ -0,0 +1,372 @@
+import { validateMessageMedia } from '@robono/messaging';
+/** Single attachment lifecycle shared by iOS and Android. Cancellation invalidates every late result. */
+export class MessagingMediaController {
+    options;
+    state = { phase: 'idle', kind: 'voice', file: null, elapsedMs: 0, maxDurationMs: 60000, progress: 0, error: null, retryUpload: false };
+    listeners = new Set();
+    abort = null;
+    intent = 0;
+    generation = 0;
+    resolve = null;
+    timer;
+    stopping = null;
+    settings = null;
+    conversationId = '';
+    uploadId = '';
+    disposed = false;
+    closing = null;
+    stageRecording = false;
+    openedMessage = null;
+    prepared = new Map();
+    preparedUploads = new Map();
+    preparedAborts = new Map();
+    getPrepared = (assetId) => this.prepared.get(assetId);
+    restorePrepared(assetId, file, kind) {
+        if (this.disposed)
+            throw Error('Messaging media is closed.');
+        validateMessageMedia(kind, { ...file, assetId }, this.options.getSettings());
+        this.prepared.set(assetId, file);
+    }
+    async releasePrepared(assetId) { const file = this.prepared.get(assetId); this.prepared.delete(assetId); this.preparedUploads.delete(assetId); this.preparedAborts.get(assetId)?.abort(); this.preparedAborts.delete(assetId); if (file)
+        await this.options.device.remove(file).catch(() => { }); }
+    /** Browser drafts stay local until Send; the original ID survives upload retries. */
+    async uploadPrepared(assetId, kind) {
+        const saved = this.preparedUploads.get(assetId);
+        if (saved)
+            return saved;
+        const file = this.prepared.get(assetId);
+        if (!file || this.disposed)
+            throw Error('Choose the attachment again.');
+        const conversationId = this.options.getConversationId(), abort = new AbortController();
+        this.preparedAborts.set(assetId, abort);
+        try {
+            validateMessageMedia(kind, { ...file, assetId }, this.options.getSettings());
+            const media = await this.options.storage.upload(file, { uploadId: assetId, conversationId, kind, signal: abort.signal, onProgress: () => { } });
+            if (abort.signal.aborted || this.disposed || conversationId !== this.options.getConversationId())
+                throw Error('The conversation changed.');
+            validateMessageMedia(kind, media, this.options.getSettings());
+            this.preparedUploads.set(assetId, media);
+            return media;
+        }
+        finally {
+            if (this.preparedAborts.get(assetId) === abort)
+                this.preparedAborts.delete(assetId);
+        }
+    }
+    forwardUploads = new Map();
+    /** Download through source authorization and upload a new destination-owned asset. */
+    async prepareForward(message, target) {
+        if (!message.media || message.kind === 'text' || message.kind === 'poll' || this.disposed)
+            throw Error('This attachment cannot be forwarded.');
+        validateMessageMedia(message.kind, message.media, target.settings);
+        const key = target.conversationId + ':' + target.uploadId, saved = this.forwardUploads.get(key);
+        if (saved)
+            return saved;
+        const source = this.options.getConversationId(), abort = new AbortController();
+        this.preparedAborts.set(key, abort);
+        let file;
+        try {
+            file = await this.options.storage.download(message, { signal: abort.signal, onProgress: () => { } });
+            if (abort.signal.aborted || this.disposed || source !== this.options.getConversationId())
+                throw Error('The conversation changed.');
+            const media = await this.options.storage.upload(file, { ...target, kind: message.kind, signal: abort.signal, onProgress: () => { } });
+            validateMessageMedia(message.kind, media, target.settings);
+            this.forwardUploads.set(key, media);
+            if (this.forwardUploads.size > 100)
+                this.forwardUploads.delete(this.forwardUploads.keys().next().value);
+            return media;
+        }
+        finally {
+            this.preparedAborts.delete(key);
+            if (file)
+                await this.options.device.remove(file).catch(() => { });
+        }
+    }
+    constructor(options) {
+        this.options = options;
+    }
+    getSnapshot = () => this.state;
+    subscribe = (f) => { this.listeners.add(f); return () => { this.listeners.delete(f); }; };
+    update(p) { this.state = { ...this.state, ...p }; this.listeners.forEach(f => f()); }
+    isCurrent(g) { return !this.disposed && this.generation === g && !this.abort?.signal.aborted; }
+    async pick(kind, source, selectionIntent = "preview") {
+        const intent = ++this.intent;
+        await this.closeCurrent();
+        if (intent !== this.intent)
+            return null;
+        if (this.disposed)
+            throw Error('Messaging media is closed.');
+        const settings = this.options.getSettings();
+        if (!settings.enabled || !settings.features[kind])
+            throw Error('This attachment type is unavailable.');
+        if (source === 'camera' && (!['image', 'video'].includes(kind) || !settings.appearance.showCamera))
+            throw Error('Camera capture is unavailable.');
+        if (source === 'call-video' && (kind !== 'video' || !settings.enabled || !settings.features.video || settings.unansweredCalls?.video !== 'video'))
+            throw Error('Video messages after a call are unavailable.');
+        this.stageRecording = kind === 'voice' && selectionIntent === 'attach';
+        this.settings = settings;
+        this.conversationId = this.options.getConversationId();
+        this.uploadId = this.options.createId();
+        const g = ++this.generation;
+        const abort = this.abort = new AbortController();
+        const result = new Promise(resolve => { this.resolve = resolve; });
+        const maximum = (settings.voice?.maxDurationSeconds ?? 60) * 1000;
+        this.update({ phase: kind === 'voice' ? 'preparing' : 'choosing', kind, file: null, error: null, progress: 0, retryUpload: false, elapsedMs: 0, waveform: [], maxDurationMs: maximum });
+        void (async () => {
+            try {
+                if (kind === 'voice') {
+                    await this.options.device.startRecording(maximum, abort.signal);
+                    if (!this.isCurrent(g))
+                        return;
+                    this.update({ phase: 'recording' });
+                    this.timer = setInterval(() => {
+                        if (!this.isCurrent(g) || this.state.phase !== 'recording')
+                            return;
+                        try {
+                            const status = this.options.device.recordingStatus();
+                            this.update({ elapsedMs: status.durationMs, ...(typeof status.level === 'number' && Number.isFinite(status.level) ? { waveform: [...(this.state.waveform ?? []), Math.max(0, Math.min(1, status.level))].slice(-56) } : {}) });
+                            if (status.durationMs >= maximum || !status.recording)
+                                void this.finishRecording(!status.recording && status.durationMs < maximum && !status.limitReached);
+                        }
+                        catch {
+                            void this.finishRecording(true);
+                        }
+                    }, 100);
+                }
+                else {
+                    const file = await this.options.device.pick(kind, settings, abort.signal, source);
+                    if (!this.isCurrent(g)) {
+                        if (file)
+                            await this.options.device.remove(file);
+                        return;
+                    }
+                    if (!file) {
+                        await this.cancel();
+                        return;
+                    }
+                    this.update({ file, ...(source === 'camera' ? { kind: file.mimeType.startsWith('video/') ? 'video' : 'image' } : {}) });
+                    this.check(file);
+                    this.update({ phase: 'review' });
+                    if (this.options.stageLocal && selectionIntent === 'attach') {
+                        const media = { assetId: this.uploadId, mimeType: file.mimeType, fileName: file.fileName, byteSize: file.byteSize, ...(file.durationMs ? { durationMs: file.durationMs } : {}) };
+                        this.prepared.set(media.assetId, file);
+                        const resolve = this.resolve;
+                        this.resolve = null;
+                        this.uploadId = '';
+                        this.abort = null;
+                        this.update({ phase: 'idle', file: null, error: null });
+                        resolve?.(media);
+                    }
+                    else if (selectionIntent === 'send' && !source)
+                        await this.send();
+                }
+            }
+            catch (e) {
+                if (this.isCurrent(g))
+                    this.update({ phase: 'failed', error: this.error(e) });
+            }
+        })();
+        return result;
+    }
+    check(file) {
+        validateMessageMedia(this.state.kind, { ...file, assetId: 'pending-upload' }, this.options.getSettings());
+        if (this.options.getConversationId() !== this.conversationId)
+            throw Error('The conversation changed. Choose the attachment again.');
+    }
+    async finishRecording(interrupted = false) {
+        if (this.stopping)
+            return this.stopping;
+        if (this.state.phase !== 'recording')
+            return;
+        clearInterval(this.timer);
+        this.timer = undefined;
+        const g = this.generation;
+        this.update({ phase: 'preparing' });
+        const work = (async () => {
+            try {
+                const file = await this.options.device.stopRecording();
+                if (!this.isCurrent(g)) {
+                    if (file)
+                        await this.options.device.remove(file);
+                    return;
+                }
+                if (!file)
+                    throw Error('No recording was captured. Cancel and record again.');
+                this.update({ file, elapsedMs: file.durationMs ?? 0 });
+                this.check(file);
+                this.update({ phase: 'review', error: interrupted ? 'Recording stopped. Listen before sending.' : null });
+                if (this.stageRecording)
+                    await this.send();
+            }
+            catch (e) {
+                if (this.isCurrent(g))
+                    this.update({ phase: 'failed', error: this.error(e) });
+            }
+        })();
+        this.stopping = work;
+        try {
+            await work;
+        }
+        finally {
+            if (this.stopping === work)
+                this.stopping = null;
+        }
+    }
+    async send() {
+        if (!['review', 'failed'].includes(this.state.phase) || !this.state.file || !this.resolve)
+            return;
+        const file = this.state.file, g = this.generation, abort = this.abort, uploadId = this.uploadId;
+        let retryUpload = false;
+        try {
+            this.check(file);
+            if (this.stageRecording && this.options.stageLocal) {
+                const media = { assetId: uploadId, mimeType: file.mimeType, fileName: file.fileName, byteSize: file.byteSize, durationMs: file.durationMs, waveform: [...(this.state.waveform ?? [])] };
+                this.prepared.set(uploadId, file);
+                const resolve = this.resolve;
+                this.resolve = null;
+                this.uploadId = '';
+                this.abort = null;
+                this.update({ phase: 'idle', file: null, error: null });
+                resolve?.(media);
+                return;
+            }
+            this.update({ phase: 'uploading', progress: 0, error: null, retryUpload: false });
+            retryUpload = true;
+            const media = await this.options.storage.upload(file, { uploadId, conversationId: this.conversationId, kind: this.state.kind, signal: abort.signal, onProgress: f => { if (this.isCurrent(g))
+                    this.update({ progress: Math.max(0, Math.min(1, f)) }); } });
+            retryUpload = false;
+            if (!this.isCurrent(g)) {
+                await this.options.storage.discard(uploadId);
+                return;
+            }
+            validateMessageMedia(this.state.kind, media, this.options.getSettings());
+            if (this.options.getConversationId() !== this.conversationId)
+                throw Error('The conversation changed. Choose the attachment again.');
+            const resolve = this.resolve;
+            this.resolve = null;
+            this.uploadId = '';
+            this.abort = null;
+            if (this.stageRecording)
+                this.prepared.set(media.assetId, file);
+            this.update({ phase: 'idle', file: null, error: null });
+            resolve?.(media);
+            if (!this.stageRecording)
+                await this.options.device.remove(file).catch(() => { });
+        }
+        catch (e) {
+            if (this.isCurrent(g))
+                this.update({ phase: 'failed', error: this.error(e), retryUpload });
+        }
+    }
+    /** View an owned cache copy of a draft. Closing never removes the original draft. */
+    async previewLocal(file, kind) {
+        const intent = ++this.intent;
+        await this.closeCurrent();
+        if (intent !== this.intent || this.disposed) {
+            await this.options.device.remove(file);
+            return;
+        }
+        this.conversationId = this.options.getConversationId();
+        this.update({ phase: 'viewing', kind, file, error: null, progress: 0 });
+    }
+    open(message) { return this.openMedia(message); }
+    /** Save/share a local copy of a playing stream without replacing its playback source. */
+    async exportFile(save) {
+        const file = this.state.file, generation = this.generation, message = this.openedMessage;
+        if (this.disposed || !file || this.state.phase !== 'viewing')
+            throw Error('The media viewer is closed.');
+        if (!file.stream)
+            return save(file);
+        if (!message || !this.abort)
+            throw Error('The attachment is unavailable.');
+        const copy = await this.options.storage.download(message, { signal: this.abort.signal, onProgress: () => { } });
+        try {
+            if (!this.isCurrent(generation) || this.options.getConversationId() !== message.conversationId)
+                throw Error('The media viewer is closed.');
+            if (copy.stream)
+                throw Error('A local file is required to save this attachment.');
+            return await save(copy);
+        }
+        finally {
+            await this.options.device.remove(copy).catch(() => { });
+        }
+    }
+    /** Recover a failed/expired native stream once through fresh authorized download. */
+    fallbackStream(uri, positionMs, autoPlay) {
+        if (!this.state.file?.stream || this.state.file.uri !== uri || !this.openedMessage)
+            return Promise.resolve();
+        return this.openMedia(this.openedMessage, { download: true, positionMs, autoPlay });
+    }
+    async openMedia(message, recovery) {
+        const intent = ++this.intent;
+        await this.closeCurrent();
+        if (intent !== this.intent)
+            return;
+        if (this.disposed)
+            throw Error('Messaging media is closed.');
+        if (!message.media || message.kind === 'text' || message.kind === 'poll')
+            return;
+        const g = ++this.generation, abort = this.abort = new AbortController();
+        this.conversationId = message.conversationId;
+        this.openedMessage = message;
+        this.update({ phase: 'opening', kind: message.kind, file: null, error: null, progress: 0 });
+        try {
+            const context = { signal: abort.signal, onProgress: f => { if (this.isCurrent(g))
+                    this.update({ progress: Math.max(0, Math.min(1, f)) }); } };
+            const remote = !recovery?.download && ['voice', 'video'].includes(message.kind) ? await this.options.storage.stream?.(message, context) : null;
+            if (!this.isCurrent(g))
+                return;
+            const file = remote ?? await this.options.storage.download(message, context);
+            if (!this.isCurrent(g) || this.options.getConversationId() !== message.conversationId) {
+                await this.options.device.remove(file);
+                return;
+            }
+            this.update({ phase: 'viewing', file: recovery ? { ...file, resumeAtMs: Number.isFinite(recovery.positionMs) ? Math.max(0, Math.min(recovery.positionMs, file.durationMs ?? recovery.positionMs)) : 0, autoPlay: recovery.autoPlay } : file });
+        }
+        catch (e) {
+            if (this.isCurrent(g))
+                this.update({ phase: 'failed', error: this.error(e) });
+        }
+    }
+    cancel() { ++this.intent; return this.closeCurrent(); }
+    closeCurrent() {
+        if (this.closing)
+            return this.closing;
+        const wasRecording = ['recording', 'preparing'].includes(this.state.phase) && this.state.kind === 'voice';
+        const file = this.state.file, id = this.uploadId, resolve = this.resolve, stopping = this.stopping;
+        this.openedMessage = null;
+        ++this.generation;
+        this.abort?.abort();
+        this.abort = null;
+        this.resolve = null;
+        this.uploadId = '';
+        clearInterval(this.timer);
+        this.timer = undefined;
+        this.update({ phase: 'idle', file: null, error: null });
+        resolve?.(null);
+        const work = (async () => {
+            if (stopping)
+                await stopping;
+            else if (wasRecording) {
+                const recorded = await this.options.device.stopRecording().catch(() => null);
+                if (recorded)
+                    await this.options.device.remove(recorded).catch(() => { });
+            }
+            if (file)
+                await this.options.device.remove(file).catch(() => { });
+            if (id)
+                await this.options.storage.discard(id).catch(() => { });
+        })();
+        this.closing = work;
+        void work.finally(() => { if (this.closing === work)
+            this.closing = null; });
+        return work;
+    }
+    async interrupt() { if (this.state.phase === 'recording')
+        await this.finishRecording(true);
+    else if (this.state.phase === 'preparing')
+        await this.cancel(); }
+    async dispose() { this.disposed = true; for (const abort of this.preparedAborts.values())
+        abort.abort(); this.forwardUploads.clear(); await this.cancel(); await Promise.all([...this.prepared.keys()].map(id => this.releasePrepared(id))); this.listeners.clear(); }
+    error(e) { return e instanceof Error ? e.message : 'The attachment could not be opened. Try again.'; }
+}

package/dist/media-readiness.d.ts

@@ -0,0 +1,4 @@
+export type MediaReadyStage = 'image-loaded' | 'video-frame' | 'audio-playing' | 'video-playing' | 'file-opened';
+export declare const MediaReadiness: import("react").Context<(stage: MediaReadyStage, uri: string) => void>;
+/** Internal recovery channel; URLs are matched in memory, never logged. */
+export declare const StreamRecovery: import("react").Context<(uri: string, positionMs: number, autoPlay: boolean) => void>;

package/dist/media-readiness.js

@@ -0,0 +1,4 @@
+import { createContext } from 'react';
+export const MediaReadiness = createContext(() => { });
+/** Internal recovery channel; URLs are matched in memory, never logged. */
+export const StreamRecovery = createContext(() => { });

package/dist/media-ui.d.ts

@@ -0,0 +1,62 @@
+import React, { type ReactNode } from 'react';
+import type { MessagingMessage } from '@robono/messaging';
+export interface VoiceBubbleProps {
+    message: MessagingMessage;
+    ink: string;
+    accent: string;
+    waveform?: number[];
+    showWaveform?: boolean;
+    footer?: ReactNode;
+    onOpen: () => void;
+    onLongPress?: () => void;
+}
+export interface PlaybackProps {
+    playing?: boolean;
+    loading?: boolean;
+    positionMs?: number;
+    durationMs?: number;
+    rate?: number;
+    error?: string;
+    onToggle: () => void;
+    onSeek?: (ms: number) => void;
+    onRate?: () => void;
+}
+/** Same chat controls on web, iOS and Android. Audio engines supply state, not a different UI. */
+export declare function VoicePlayback({ ink, accent, waveform, showWaveform, footer, onLongPress, playing, loading, positionMs, durationMs, error, onToggle, onSeek }: PlaybackProps & {
+    ink: string;
+    accent: string;
+    waveform?: number[];
+    showWaveform?: boolean;
+    footer?: ReactNode;
+    onLongPress?: () => void;
+}): React.JSX.Element;
+export declare function MediaPlaybackControls({ playing, loading, positionMs, durationMs, error, onToggle, onSeek, onFullscreen, fullscreen }: PlaybackProps & {
+    onFullscreen?: () => void;
+    fullscreen?: boolean;
+}): React.JSX.Element;
+/** A full-size photo surface. The same tap-to-hide-controls, pinch and pan handling runs in the preview and native app. */
+export declare function ZoomablePhoto({ uri, label, onTap }: {
+    uri: string;
+    label?: string;
+    onTap?: () => void;
+}): React.JSX.Element;
+export declare function MediaViewer({ title, subtitle, kind, uri, fileName, byteSize, children, loading, error, onClose, onFileAction, reviewAction, onReview, onDownload, onShare, onForward, onDelete, downloading }: {
+    onForward?: () => void;
+    onDelete?: () => void;
+    downloading?: boolean;
+    onDownload?: () => void;
+    onShare?: () => void;
+    title: string;
+    subtitle?: string;
+    kind: 'image' | 'video' | 'document' | 'voice';
+    uri?: string;
+    fileName?: string;
+    byteSize?: number;
+    children?: ReactNode;
+    loading?: boolean;
+    error?: string;
+    onClose: () => void;
+    onFileAction?: () => void;
+    reviewAction?: string;
+    onReview?: () => void;
+}): React.JSX.Element;

package/dist/media-ui.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useContext, useState, useEffect } from 'react';
+import { ActivityIndicator, Image, PanResponder, Platform, Pressable, Text, View } from 'react-native';
+import { MediaReadiness } from './media-readiness.js';
+import { MessageIcon, duration, fileSize } from './icons.js';
+/** Same chat controls on web, iOS and Android. Audio engines supply state, not a different UI. */
+export function VoicePlayback({ ink, accent, waveform, showWaveform = true, footer, onLongPress, playing = false, loading = false, positionMs = 0, durationMs = 0, error, onToggle, onSeek }) {
+    const width = useRef(1), progress = durationMs ? Math.max(0, Math.min(1, positionMs / durationMs)) : 0;
+    return _jsxs(View, { style: { width: 252, maxWidth: '100%' }, children: [_jsxs(View, { style: { flexDirection: 'row', alignItems: 'center', gap: 9 }, children: [_jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: playing ? 'Pause voice message' : 'Play voice message', accessibilityState: { busy: loading }, disabled: loading, onPress: onToggle, onLongPress: onLongPress, style: { width: 44, height: 44, borderRadius: 22, alignItems: 'center', justifyContent: 'center' }, children: loading ? _jsx(ActivityIndicator, { size: "small", color: ink }) : _jsx(MessageIcon, { name: playing ? 'pause' : 'play', color: ink + 'aa', size: 24 }) }), _jsxs(View, { style: { flex: 1, minWidth: 0 }, children: [_jsx(Pressable, { accessibilityRole: "adjustable", accessibilityLabel: showWaveform ? "Voice waveform" : "Voice position", accessibilityValue: { min: 0, max: Math.ceil(durationMs / 1000), now: Math.floor(positionMs / 1000) }, accessibilityActions: [{ name: 'increment', label: 'Forward five seconds' }, { name: 'decrement', label: 'Back five seconds' }], onAccessibilityAction: e => onSeek?.(Math.max(0, Math.min(durationMs, positionMs + (e.nativeEvent.actionName === 'increment' ? 5000 : -5000)))), onLayout: e => { width.current = e.nativeEvent.layout.width; }, onPress: e => { const bounds = Platform.OS === "web" ? e.currentTarget.getBoundingClientRect() : null; const x = bounds ? e.nativeEvent.clientX - bounds.left : e.nativeEvent.locationX; const total = bounds?.width ?? width.current; if (total > 0 && Number.isFinite(x))
+                                    onSeek?.(Math.max(0, Math.min(1, x / total)) * durationMs); }, style: { minHeight: 36, flexDirection: 'row', alignItems: 'center', gap: 2 }, children: showWaveform ? Array.from({ length: 36 }, (_, i) => { const sample = waveform?.[Math.floor(i * (waveform.length || 36) / 36)]; return _jsx(View, { pointerEvents: "none", style: { flex: 1, borderRadius: 2, backgroundColor: i / 36 < progress ? accent : ink, opacity: i / 36 < progress ? 1 : 0.34, height: 4 + (typeof sample === 'number' && Number.isFinite(sample) ? Math.min(1, Math.max(0, sample)) * 23 : 0) } }, i); }) : _jsx(View, { pointerEvents: "none", style: { flex: 1, height: 3, borderRadius: 2, backgroundColor: ink + '44' }, children: _jsx(View, { style: { height: 3, borderRadius: 2, backgroundColor: accent, width: `${progress * 100}%` } }) }) }), _jsxs(View, { style: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', gap: 6 }, children: [_jsx(Text, { style: { color: ink, fontSize: 11, opacity: 0.7, fontVariant: ['tabular-nums'] }, children: duration(playing || positionMs > 0 ? Math.max(0, durationMs - positionMs) : durationMs) }), footer] })] })] }), !!error && _jsx(Text, { accessibilityRole: "alert", style: { color: ink, fontSize: 12, marginTop: 6 }, children: error })] });
+}
+export function MediaPlaybackControls({ playing = false, loading = false, positionMs = 0, durationMs = 0, error, onToggle, onSeek, onFullscreen, fullscreen = false }) {
+    const width = useRef(1);
+    return _jsxs(View, { style: { paddingHorizontal: 18, paddingVertical: 10, gap: 6, backgroundColor: '#111316' }, children: [_jsxs(View, { style: { flexDirection: 'row', alignItems: 'center', gap: 12 }, children: [_jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: playing ? 'Pause video' : 'Play video', disabled: loading, onPress: onToggle, style: { width: 44, height: 44, alignItems: 'center', justifyContent: 'center' }, children: loading ? _jsx(ActivityIndicator, { color: "#fff" }) : _jsx(MessageIcon, { name: playing ? 'pause' : 'play', color: "#fff" }) }), _jsx(Text, { style: { color: '#ddd', fontSize: 12, fontVariant: ['tabular-nums'] }, children: duration(positionMs) }), _jsx(Pressable, { accessibilityRole: "adjustable", accessibilityLabel: "Video position", accessibilityValue: { min: 0, max: Math.ceil(durationMs / 1000), now: Math.floor(positionMs / 1000) }, accessibilityActions: [{ name: 'increment' }, { name: 'decrement' }], onAccessibilityAction: e => onSeek?.(Math.max(0, Math.min(durationMs, positionMs + (e.nativeEvent.actionName === 'increment' ? 5000 : -5000)))), onLayout: e => { width.current = e.nativeEvent.layout.width; }, onPress: e => { const bounds = Platform.OS === "web" ? e.currentTarget.getBoundingClientRect() : null; const x = bounds ? e.nativeEvent.clientX - bounds.left : e.nativeEvent.locationX, total = bounds?.width ?? width.current; if (total > 0 && Number.isFinite(x))
+                            onSeek?.(Math.max(0, Math.min(1, x / total)) * durationMs); }, style: { flex: 1, height: 44, justifyContent: 'center' }, children: _jsx(View, { style: { height: 3, borderRadius: 2, backgroundColor: '#ffffff44' }, children: _jsx(View, { style: { height: 3, borderRadius: 2, backgroundColor: '#fff', width: `${durationMs ? Math.min(100, positionMs / durationMs * 100) : 0}%` } }) }) }), _jsx(Text, { style: { color: '#bbb', fontSize: 12, fontVariant: ['tabular-nums'] }, children: duration(durationMs) }), onFullscreen && _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: fullscreen ? "Exit full screen" : "Full screen video", disabled: loading, onPress: onFullscreen, style: { width: 44, height: 44, alignItems: "center", justifyContent: "center" }, children: _jsx(MessageIcon, { name: fullscreen ? "close" : "open-in-new", color: "#fff", size: 22 }) })] }), !!error && _jsx(Text, { accessibilityRole: "alert", style: { color: '#fff', fontSize: 13 }, children: error })] });
+}
+/** A full-size photo surface. The same tap-to-hide-controls, pinch and pan handling runs in the preview and native app. */
+export function ZoomablePhoto({ uri, label = 'Photo', onTap }) {
+    const mediaReady = useContext(MediaReadiness);
+    const [zoom, setZoom] = useState(1), [offset, setOffset] = useState({ x: 0, y: 0 }), [error, setError] = useState(false);
+    const latest = useRef({ zoom, offset, width: 1, height: 1 });
+    latest.current = { ...latest.current, zoom, offset };
+    const start = useRef({ distance: 0, zoom: 1, x: 0, y: 0 });
+    const pan = useRef(PanResponder.create({
+        onStartShouldSetPanResponder: e => e.nativeEvent.touches.length > 1,
+        onMoveShouldSetPanResponder: (e, g) => e.nativeEvent.touches.length > 1 || (latest.current.zoom > 1 && (Math.abs(g.dx) > 5 || Math.abs(g.dy) > 5)),
+        onPanResponderGrant: e => { const t = e.nativeEvent.touches; start.current = { distance: t.length > 1 ? Math.hypot(t[0].pageX - t[1].pageX, t[0].pageY - t[1].pageY) : 0, zoom: latest.current.zoom, x: latest.current.offset.x, y: latest.current.offset.y }; },
+        onPanResponderMove: (e, g) => { const t = e.nativeEvent.touches, s = latest.current; if (t.length > 1 && start.current.distance) {
+            setZoom(Math.max(1, Math.min(4, start.current.zoom * Math.hypot(t[0].pageX - t[1].pageX, t[0].pageY - t[1].pageY) / start.current.distance)));
+        }
+        else {
+            const x = s.width * (s.zoom - 1) / 2, y = s.height * (s.zoom - 1) / 2;
+            setOffset({ x: Math.max(-x, Math.min(x, start.current.x + g.dx)), y: Math.max(-y, Math.min(y, start.current.y + g.dy)) });
+        } },
+        onPanResponderRelease: () => { if (latest.current.zoom <= 1)
+            setOffset({ x: 0, y: 0 }); },
+    })).current;
+    useEffect(() => { setZoom(1); setOffset({ x: 0, y: 0 }); setError(false); }, [uri]);
+    const toggle = () => { setZoom(zoom === 1 ? 2 : 1); setOffset({ x: 0, y: 0 }); };
+    return _jsxs(View, { style: { flex: 1, minHeight: 0, overflow: 'hidden' }, onLayout: e => { latest.current = { ...latest.current, width: e.nativeEvent.layout.width, height: e.nativeEvent.layout.height }; }, children: [_jsx(Pressable, { ...pan.panHandlers, accessibilityRole: "button", accessibilityLabel: "Toggle photo controls", onPress: onTap, style: { flex: 1, overflow: 'hidden' }, children: _jsx(Image, { accessibilityLabel: label, source: { uri }, resizeMode: "contain", onLoad: () => mediaReady('image-loaded', uri), onError: () => setError(true), style: { width: '100%', height: '100%', transform: [{ translateX: offset.x }, { translateY: offset.y }, { scale: zoom }] } }) }), _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: zoom === 1 ? 'Zoom in' : 'Zoom out', onPress: toggle, style: { position: 'absolute', right: 16, bottom: 16, width: 44, height: 44, borderRadius: 22, backgroundColor: '#222a', alignItems: 'center', justifyContent: 'center' }, children: _jsx(MessageIcon, { name: "zoom", color: "#fff" }) }), error && _jsx(Text, { accessibilityRole: "alert", style: { position: 'absolute', top: '50%', alignSelf: 'center', color: '#fff' }, children: "This photo could not be opened." })] });
+}
+export function MediaViewer({ title, subtitle, kind, uri, fileName, byteSize, children, loading, error, onClose, onFileAction, reviewAction, onReview, onDownload, onShare, onForward, onDelete, downloading = false }) {
+    const [controls, setControls] = useState(true);
+    useEffect(() => setControls(true), [uri]);
+    return _jsxs(View, { accessibilityViewIsModal: true, style: { flex: 1, minHeight: 0, backgroundColor: '#0c0e10' }, children: [controls && _jsxs(View, { testID: "media-action-toolbar", style: { position: 'absolute', top: 8, left: 12, right: 12, zIndex: 3, minHeight: 52, borderRadius: 26, borderWidth: 1, borderColor: '#ffffff1f', backgroundColor: '#121212eb', flexDirection: 'row', alignItems: 'center', paddingLeft: 8, paddingRight: 4, gap: 2 }, children: [[[onDownload, 'Download', 'download', downloading, false], [onDelete, 'Delete', 'trash', false, true], [onForward, 'Forward', 'forward', false, false], [onShare, 'Share', 'share', false, false]].filter(([action]) => !!action).map(([action, label, icon, busy, destructive]) => _jsxs(Pressable, { accessibilityRole: "button", accessibilityLabel: `${label} media`, accessibilityState: { busy }, disabled: busy, onPress: action, style: { flex: 1, minWidth: 44, minHeight: 44, borderRadius: 22, alignItems: 'center', justifyContent: 'center', gap: 1, paddingHorizontal: 2 }, children: [busy ? _jsx(ActivityIndicator, { size: "small", color: "#e8843a" }) : _jsx(MessageIcon, { name: icon, size: 20, color: destructive ? '#f28b82' : '#fff' }), _jsx(Text, { numberOfLines: 1, style: { color: destructive ? '#f28b82' : '#fff', fontSize: 10, fontWeight: '800' }, children: label })] }, label)), _jsx(View, { style: { flex: !onDownload && !onDelete && !onForward && !onShare ? 1 : 0, minWidth: 0 }, children: !onDownload && !onDelete && !onForward && !onShare && _jsx(Text, { numberOfLines: 1, style: { color: '#fff', fontSize: 14, paddingLeft: 8 }, children: title }) }), _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Close media", onPress: onClose, style: { width: 44, height: 44, borderRadius: 22, backgroundColor: '#ffffff14', alignItems: 'center', justifyContent: 'center' }, children: _jsx(MessageIcon, { name: "close", size: 24, color: "#fff" }) })] }), loading ? _jsxs(View, { style: { flex: 1, alignItems: 'center', justifyContent: 'center', gap: 16 }, children: [_jsx(ActivityIndicator, { color: "#fff" }), _jsx(Text, { style: { color: '#c1c7ce' }, children: "Opening\u2026" })] }) : kind === 'image' && uri ? _jsx(ZoomablePhoto, { uri: uri, label: fileName, onTap: () => setControls(value => !value) }) : kind === 'document' ? _jsxs(View, { style: { flex: 1, alignItems: 'center', justifyContent: 'center', padding: 32, gap: 20 }, children: [_jsx(View, { style: { width: 88, height: 106, borderRadius: 16, backgroundColor: '#ffffff12', alignItems: 'center', justifyContent: 'center' }, children: _jsx(MessageIcon, { name: "document", color: "#fff", size: 40 }) }), _jsx(Text, { style: { color: '#fff', fontSize: 19, fontWeight: '600', textAlign: 'center' }, children: fileName }), _jsxs(Text, { style: { color: '#9ba3ad', fontSize: 13 }, children: [fileName?.split('.').pop()?.toUpperCase(), " \u00B7 ", fileSize(byteSize)] }), onFileAction && _jsx(Pressable, { accessibilityRole: "button", onPress: onFileAction, style: { borderRadius: 24, paddingHorizontal: 28, paddingVertical: 14, backgroundColor: '#fff' }, children: _jsx(Text, { style: { color: '#15191e', fontWeight: '600' }, children: "Open file" }) })] }) : children, !!error && _jsx(Text, { accessibilityRole: "alert", style: { color: '#fff', padding: 16 }, children: error }), reviewAction && onReview && _jsx(View, { style: { padding: 16, borderTopWidth: 1, borderTopColor: '#ffffff15' }, children: _jsx(Pressable, { accessibilityRole: "button", onPress: onReview, style: { minHeight: 48, borderRadius: 24, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center' }, children: _jsx(Text, { style: { fontWeight: '600', color: '#121619' }, children: reviewAction }) }) })] });
+}

package/dist/message-links.d.ts

@@ -0,0 +1,5 @@
+/** Only explicit web links become actions. Never interpret arbitrary URI schemes. */
+export declare function messageLinks(text: string): Array<{
+    text: string;
+    url?: string;
+}>;