softchatjs-react-native
Version:
React native UI SDK for softchatjs-core. Create a free account at: https://www.softchatjs.com
341 lines (334 loc) • 8.33 kB
JavaScript
// src/contexts/ChatProvider.tsx
import React3, { createContext as createContext3, useContext as useContext3 } from "react";
// src/contexts/ModalProvider.tsx
import React, { createContext, useContext, useState } from "react";
import {
Modal,
View
} from "react-native";
var initial = {
displayModal: () => {
},
resetModal: () => {
},
modalProps: {
dismissable: true,
justifyContent: "center",
children: null,
animation: "slide",
containerWidth: "100%"
}
};
var ModalProviderContext = createContext(initial);
function ModalProvider(props) {
const { children } = props;
const [modal, showModal] = useState(false);
const [modalProps, setModalProps] = useState(initial.modalProps);
const displayModal = (props2) => {
showModal(true);
setModalProps({ ...initial.modalProps, ...props2 });
};
const dismiss = () => {
if (modalProps?.dismissable) {
showModal(false);
}
};
const resetModal = (cb) => {
showModal(false);
cb?.();
};
return /* @__PURE__ */ React.createElement(
ModalProviderContext.Provider,
{
value: {
displayModal,
resetModal
}
},
children,
/* @__PURE__ */ React.createElement(
Modal,
{
animationType: modalProps?.animation,
style: { height: "100%", width: "100%" },
visible: modal,
transparent: true
},
/* @__PURE__ */ React.createElement(
View,
{
style: {
flex: 1,
height: "100%",
width: "100%",
alignItems: "center",
justifyContent: modalProps?.justifyContent,
backgroundColor: "rgba(0,0,0,.3)"
}
},
/* @__PURE__ */ React.createElement(View, { style: { flex: 1, width: "100%", height: "100%" } }, modalProps?.children)
)
)
);
}
// src/theme/colors.ts
var teal = {
50: "#DCF2F0",
100: "#A9DFD8",
200: "#73CABE",
300: "#3AB4A4",
400: "#00A391",
500: "#00927E",
600: "#008572",
700: "#007662",
800: "#006654",
900: "#004A38"
};
var green = {
50: "#E6F5E4",
100: "#C2E6BD",
200: "#9AD693",
300: "#6FC666",
400: "#4ABA42",
500: "#17AE13",
600: "#029F04",
700: "#008D00",
800: "#007C00",
900: "#005E00"
};
var grey = {
50: "#F6F6FF",
100: "#F2F1FF",
200: "#EBEBF9",
300: "#CAC9D7",
400: "#ACACB9",
500: "#82818F",
600: "#6D6D7A",
700: "#4D4D59",
800: "#2B2B36",
900: "#21222D",
A100: "#1D1E26"
};
var stone = {
50: "#F8F8F8",
100: "#EFEFEF",
200: "#E8E8E8",
300: "#D9D9D9",
400: "#D2D2D2",
500: "#A0A0A0",
600: "#87888C",
700: "#2C2D33",
800: "#1D1E26",
900: "#171821"
};
// src/theme/index.ts
var theme = {
background: {
primary: stone[900],
secondary: grey[900],
disabled: grey[800]
},
text: {
primary: "black",
secondary: stone[200],
disabled: stone[500]
},
action: {
primary: teal[50],
secondary: stone[300]
},
chatBubble: {
left: {
bgColor: grey[900],
messageColor: stone[200],
messageTimeColor: "grey",
replyBorderColor: stone[200]
},
right: {
bgColor: "#474952",
messageColor: "white",
messageTimeColor: "grey",
replyBorderColor: green[900]
}
},
icon: "white",
divider: stone[700]
};
var theme_default = theme;
// src/contexts/MessageStateContext.tsx
import React2, {
createContext as createContext2,
useState as useState2,
useContext as useContext2
} from "react";
import { Audio } from "expo-av";
// src/constants/defaultUser.ts
var defaultUser_default = {
id: "",
uid: "",
username: "",
firstname: "",
lastname: "",
profileUrl: "",
color: "",
custom: {}
};
// src/contexts/MessageStateContext.tsx
var initialMessageStateContext = {
globalTextMessage: "",
setGlobalTextMessage: () => {
},
stickers: [],
setStickers: () => {
},
pendingMessages: [],
addNewPendingMessages: (message) => {
},
removePendingMessage: (messageId) => {
},
updatePendingMessage: (messageId, message) => {
},
playVoiceMessage: (media) => {
},
pauseVoiceMessage: () => {
},
resumeVoiceMessage: () => {
},
audioState: null,
unload: () => {
},
sound: null,
activeVoiceMessage: null,
avPlayBackStatus: null,
userMeta: defaultUser_default,
setUserMeta: () => {
},
conversationList: [],
setConversationList: () => {
}
};
var MessageStateContext = createContext2(
initialMessageStateContext
);
var MessageStateProvider = ({ children }) => {
const [conversationList, setConversationList] = useState2([]);
const [globalTextMessage, setGlobalTextMessage] = useState2("");
const [stickers, setStickers] = useState2([]);
const [pendingMessages, setPendingMessages] = useState2([]);
const [sound, setSound] = useState2(null);
const [audioState, setAudioState] = useState2(null);
const [activeVoiceMessage, setActiveVoiceMessage] = useState2(null);
const [avPlayBackStatus, setAvPlayBackStatus] = useState2(null);
const [userMeta, setUserMeta] = useState2(defaultUser_default);
const addNewPendingMessages = (message) => {
setPendingMessages((prev) => {
return [...prev, message];
});
};
const removePendingMessage = (messageId) => {
setPendingMessages((prev) => {
const filtered = prev.filter((m) => m.messageId !== messageId);
return filtered;
});
};
const updatePendingMessage = (messageId, updatedMessage) => {
const clonedMessage = JSON.parse(JSON.stringify(updatedMessage));
setPendingMessages(
(prev) => prev.map(
(message) => message.messageId === messageId ? { ...message, ...clonedMessage } : message
)
);
};
const onPlaybackStatusUpdate = (data) => {
console.log(data);
setAvPlayBackStatus(data);
if (data?.didJustFinish) {
setAudioState(null);
unload();
}
};
const playVoiceMessage = async (media) => {
if (activeVoiceMessage !== null && media.mediaId !== activeVoiceMessage?.mediaId) {
return unload();
}
setActiveVoiceMessage(media);
setAudioState("loading");
try {
console.log("Loading Sound");
console.log(media.mediaUrl);
const { sound: avSound } = await Audio.Sound.createAsync({ uri: media.mediaUrl }, {}, onPlaybackStatusUpdate);
setSound(avSound);
console.log("Playing Sound");
setAudioState("playing");
await avSound.playAsync();
} catch (error) {
console.error("Error loading audio: ", error);
setAudioState(null);
}
};
const pauseVoiceMessage = async () => {
await sound?.pauseAsync();
setAudioState("paused");
};
const resumeVoiceMessage = async () => {
if (audioState === "paused") {
await sound?.playAsync();
setAudioState("playing");
}
};
const unload = () => {
console.log("Unloading Sound");
sound?.stopAsync();
sound?.unloadAsync();
setSound(null);
setActiveVoiceMessage(null);
setAudioState(null);
};
return /* @__PURE__ */ React2.createElement(
MessageStateContext.Provider,
{
value: {
globalTextMessage,
setGlobalTextMessage,
stickers,
setStickers,
pendingMessages,
addNewPendingMessages,
removePendingMessage,
updatePendingMessage,
playVoiceMessage,
pauseVoiceMessage,
resumeVoiceMessage,
audioState,
unload,
sound,
activeVoiceMessage,
avPlayBackStatus,
userMeta,
setUserMeta,
conversationList,
setConversationList
}
},
children
);
};
// src/contexts/ChatProvider.tsx
var ConfigContext = createContext3({
theme: theme_default,
client: null,
fontFamily: void 0,
fontScale: 1
});
function useConfig() {
return useContext3(ConfigContext);
}
function ChatProvider(props) {
const { children, client, theme: theme2 = theme_default, fontFamily, fontScale } = props;
return /* @__PURE__ */ React3.createElement(ConfigContext.Provider, { value: { theme: theme2, client, fontFamily, fontScale } }, /* @__PURE__ */ React3.createElement(MessageStateProvider, null, /* @__PURE__ */ React3.createElement(ModalProvider, null, children)));
}
export {
ChatProvider as default,
useConfig
};
//# sourceMappingURL=ChatProvider.mjs.map