@nativetalkcommunications/react-native-call-sdk 0.1.0

package/lib/commonjs/ui/IncomingCallView.js

@@ -0,0 +1,128 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IncomingCallView = void 0;
+/**
+ * Drop-in screen rendered when an incoming call is ringing.
+ *
+ * Wire-up:
+ *
+ * ```tsx
+ * <CallProvider
+ *   onIncomingCall={() => navigation.navigate('IncomingCall')}
+ *   config={cfg}
+ * >
+ *   …
+ * </CallProvider>
+ *
+ * // your IncomingCall screen:
+ * <IncomingCallView onAnswered={() => navigation.replace('InCall')} />
+ * ```
+ */
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const CallProvider_1 = require("../CallProvider");
+const helpers_1 = require("../helpers");
+const Avatar_1 = require("./Avatar");
+const theme_1 = require("./theme");
+function IncomingCallView({ onAnswered, onDeclined, onDismissed, location, title = 'Incoming call', theme, header, style, }) {
+    const { incoming, incomingInfo, answer, decline } = (0, CallProvider_1.useCall)();
+    const t = (0, theme_1.mergeTheme)(theme);
+    // Auto-dismiss if the call ends while this screen is mounted.
+    (0, react_1.useEffect)(() => {
+        if (!incoming)
+            onDismissed?.();
+    }, [incoming, onDismissed]);
+    const pretty = (s = '') => s.includes('@') ? (0, helpers_1.parseSipUser)(s) : s;
+    const name = incomingInfo?.name ?? 'Unknown';
+    const phone = incomingInfo?.phone ?? '';
+    const initials = incomingInfo?.initials ?? '??';
+    const onAnswer = async () => {
+        await answer();
+        onAnswered?.();
+    };
+    const onDecline = async () => {
+        await decline('busy');
+        onDeclined?.();
+    };
+    return (<react_native_1.View style={[styles.container, { backgroundColor: t.background }, style]}>
+      {header}
+      <react_native_1.Text style={[styles.status, { color: t.text }]}>{title}</react_native_1.Text>
+
+      <react_native_1.View style={styles.avatarWrap}>
+        <Avatar_1.Avatar initials={initials} size={80} color={t.primary} background="#EEF2FF"/>
+      </react_native_1.View>
+
+      <react_native_1.Text style={[styles.name, { color: t.text }]}>{pretty(name)}</react_native_1.Text>
+      <react_native_1.Text style={[styles.phone, { color: t.text }]}>{pretty(phone)}</react_native_1.Text>
+      {!!location && (<react_native_1.Text style={[styles.location, { color: t.subtext }]}>{location}</react_native_1.Text>)}
+
+      <react_native_1.View style={styles.bottomRow}>
+        <react_native_1.TouchableOpacity onPress={onDecline} activeOpacity={0.85} style={[styles.circleBtn, { backgroundColor: t.decline }]}>
+          <react_native_1.Text style={styles.circleIcon}>✕</react_native_1.Text>
+        </react_native_1.TouchableOpacity>
+
+        <react_native_1.TouchableOpacity onPress={onAnswer} activeOpacity={0.85} style={[styles.circleBtn, { backgroundColor: t.answer }]}>
+          <react_native_1.Text style={styles.circleIcon}>📞</react_native_1.Text>
+        </react_native_1.TouchableOpacity>
+      </react_native_1.View>
+    </react_native_1.View>);
+}
+exports.IncomingCallView = IncomingCallView;
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'flex-start',
+        paddingVertical: 60,
+    },
+    status: { fontSize: 18, marginBottom: 16, marginTop: 8 },
+    avatarWrap: { marginBottom: 22, marginTop: 6 },
+    name: { fontSize: 28, fontWeight: '800', textAlign: 'center' },
+    phone: { fontSize: 18, marginTop: 8 },
+    location: { fontSize: 16, marginTop: 8 },
+    bottomRow: {
+        position: 'absolute',
+        bottom: 60,
+        left: 0,
+        right: 0,
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        paddingHorizontal: 40,
+    },
+    circleBtn: {
+        width: 80,
+        height: 80,
+        borderRadius: 40,
+        alignItems: 'center',
+        justifyContent: 'center',
+        shadowColor: '#000',
+        shadowOpacity: 0.15,
+        shadowOffset: { width: 0, height: 4 },
+        shadowRadius: 8,
+        elevation: 4,
+    },
+    circleIcon: { fontSize: 32, color: '#fff' },
+});

package/lib/commonjs/ui/OutgoingCallView.js

@@ -0,0 +1,117 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OutgoingCallView = void 0;
+/**
+ * In-call screen used for both outgoing calls and after answering an incoming
+ * call. Shows the caller, status, timer, and mute/speaker/end controls.
+ *
+ * Pure presentation — all state comes from `useCall()`.
+ */
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const CallProvider_1 = require("../CallProvider");
+const helpers_1 = require("../helpers");
+const Avatar_1 = require("./Avatar");
+const theme_1 = require("./theme");
+function OutgoingCallView({ name, phone, location, initials, onEnded, theme, header, style, }) {
+    const { callStatus, hangup, toggleMute, toggleSpeaker, formattedDuration, isMuted, isSpeaker, } = (0, CallProvider_1.useCall)();
+    const t = (0, theme_1.mergeTheme)(theme);
+    const status = (0, helpers_1.callStatusLabel)(callStatus);
+    const showTimer = ['In progress', 'On hold', 'Call ended'].includes(status);
+    const ended = status === 'Call ended';
+    const pretty = (s = '') => (s.includes('@') ? (0, helpers_1.parseSipUser)(s) : s);
+    const handleEnd = async () => {
+        if (!ended)
+            await hangup();
+        onEnded?.();
+    };
+    return (<react_native_1.View style={[styles.container, { backgroundColor: t.background }, style]}>
+      {header}
+      <react_native_1.Text style={[styles.status, ended && { color: t.decline }, !ended && { color: t.text }]}>
+        {status}
+      </react_native_1.Text>
+      {showTimer && (<react_native_1.Text style={[styles.duration, { color: t.text }]}>{formattedDuration}</react_native_1.Text>)}
+
+      <react_native_1.View style={styles.avatarWrap}>
+        <Avatar_1.Avatar initials={initials ?? (name || '??').slice(0, 2)} size={80} color={t.primary} background="#EEF2FF"/>
+      </react_native_1.View>
+
+      {!!name && <react_native_1.Text style={[styles.name, { color: t.text }]}>{pretty(name)}</react_native_1.Text>}
+      {!!phone && <react_native_1.Text style={[styles.phone, { color: t.text }]}>{pretty(phone)}</react_native_1.Text>}
+      {!!location && (<react_native_1.Text style={[styles.location, { color: t.subtext }]}>{location}</react_native_1.Text>)}
+
+      <react_native_1.View style={styles.controlsGrid}>
+        <CallControl label={isMuted ? 'Unmute' : 'Mute'} icon="🎙" active={isMuted} disabled={ended} onPress={toggleMute} theme={t}/>
+        <CallControl label={isSpeaker ? 'Earpiece' : 'Speaker'} icon="🔊" active={isSpeaker} disabled={ended} onPress={toggleSpeaker} theme={t}/>
+        <react_native_1.View style={styles.controlPlaceholder}/>
+      </react_native_1.View>
+
+      <react_native_1.TouchableOpacity style={[styles.endBtn, { backgroundColor: t.decline }]} onPress={handleEnd}>
+        <react_native_1.Text style={{ color: '#fff', fontSize: 28 }}>✕</react_native_1.Text>
+      </react_native_1.TouchableOpacity>
+    </react_native_1.View>);
+}
+exports.OutgoingCallView = OutgoingCallView;
+function CallControl({ label, icon, active, disabled, onPress, theme }) {
+    const bg = active ? theme.controlOnBg : theme.controlOffBg;
+    const iconColor = active
+        ? theme.controlIconOn
+        : disabled
+            ? '#ccc'
+            : theme.controlIconOff;
+    return (<react_native_1.TouchableOpacity style={[styles.control, disabled && styles.controlDisabled]} onPress={onPress} disabled={disabled} activeOpacity={0.7}>
+      <react_native_1.View style={[styles.controlCircle, { backgroundColor: bg }]}>
+        <react_native_1.Text style={{ fontSize: 24, color: iconColor }}>{icon}</react_native_1.Text>
+      </react_native_1.View>
+      <react_native_1.Text style={[styles.controlLabel, disabled && { color: '#aaa' }]}>
+        {label}
+      </react_native_1.Text>
+    </react_native_1.TouchableOpacity>);
+}
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'flex-start',
+        paddingVertical: 60,
+    },
+    status: { fontSize: 15, marginBottom: 6, marginTop: 10 },
+    duration: { fontSize: 16, fontWeight: '600', marginBottom: 10 },
+    avatarWrap: { marginBottom: 10, marginTop: 15 },
+    name: { fontSize: 22, fontWeight: '700', textAlign: 'center' },
+    phone: { fontSize: 18, marginTop: 6, marginBottom: 6 },
+    location: { fontSize: 15, marginBottom: 16 },
+    controlsGrid: {
+        width: '88%',
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        justifyContent: 'space-between',
+        alignSelf: 'center',
+        marginTop: 30,
+        marginBottom: 18,
+    },
+    control: { width: '30%', alignItems: 'center', marginVertical: 16 },
+    controlPlaceholder: { width: '30%' },
+    controlDisabled: { opacity: 0.48 },
+    controlCircle: {
+        width: 65,
+        height: 65,
+        borderRadius: 50,
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginBottom: 7,
+    },
+    controlLabel: { fontSize: 15, color: '#222', textAlign: 'center' },
+    endBtn: {
+        position: 'absolute',
+        bottom: 60,
+        width: 70,
+        height: 70,
+        borderRadius: 35,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+});

package/lib/commonjs/ui/index.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mergeTheme = exports.defaultTheme = exports.Avatar = exports.OutgoingCallView = exports.IncomingCallView = exports.Dialer = void 0;
+/**
+ * Optional UI components for the Nativetalk Call SDK.
+ *
+ * These are entirely opt-in — the core hook (`useCall()`) gives you everything
+ * you need to roll your own UI. The components here are kept deliberately
+ * minimal (no external icon packs, no navigation library) so they work in
+ * any RN project.
+ */
+var Dialer_1 = require("./Dialer");
+Object.defineProperty(exports, "Dialer", { enumerable: true, get: function () { return Dialer_1.Dialer; } });
+var IncomingCallView_1 = require("./IncomingCallView");
+Object.defineProperty(exports, "IncomingCallView", { enumerable: true, get: function () { return IncomingCallView_1.IncomingCallView; } });
+var OutgoingCallView_1 = require("./OutgoingCallView");
+Object.defineProperty(exports, "OutgoingCallView", { enumerable: true, get: function () { return OutgoingCallView_1.OutgoingCallView; } });
+var Avatar_1 = require("./Avatar");
+Object.defineProperty(exports, "Avatar", { enumerable: true, get: function () { return Avatar_1.Avatar; } });
+var theme_1 = require("./theme");
+Object.defineProperty(exports, "defaultTheme", { enumerable: true, get: function () { return theme_1.defaultTheme; } });
+Object.defineProperty(exports, "mergeTheme", { enumerable: true, get: function () { return theme_1.mergeTheme; } });

package/lib/commonjs/ui/theme.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mergeTheme = exports.defaultTheme = void 0;
+exports.defaultTheme = {
+    primary: '#2D6BFF',
+    background: '#fafafa',
+    text: '#111',
+    subtext: '#555',
+    answer: '#33c124',
+    decline: '#ff2d2d',
+    controlOnBg: '#111',
+    controlOffBg: '#fff',
+    controlIconOn: '#fff',
+    controlIconOff: '#111',
+};
+function mergeTheme(override) {
+    if (!override)
+        return exports.defaultTheme;
+    return { ...exports.defaultTheme, ...override };
+}
+exports.mergeTheme = mergeTheme;