softchatjs-react-native
Version:
React native UI SDK for softchatjs-core. Create a free account at: https://www.softchatjs.com
404 lines (392 loc) • 13.6 kB
JavaScript
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/components/Chat/ChatItem/Media/VoiceMessage.tsx
var VoiceMessage_exports = {};
__export(VoiceMessage_exports, {
AudioWaves: () => AudioWaves,
default: () => VoiceMessage
});
module.exports = __toCommonJS(VoiceMessage_exports);
var import_react_native3 = require("react-native");
var import_react5 = __toESM(require("react"));
// src/assets/icons.tsx
var import_react = __toESM(require("react"));
var import_react_native = require("react-native");
var import_react_native_svg = require("react-native-svg");
var PauseIcon = (props) => {
const { size = 25, color = "black" } = props;
return /* @__PURE__ */ import_react.default.createElement(import_react_native_svg.Svg, { width: size, height: size, viewBox: "0 0 24 24", fill: "none" }, /* @__PURE__ */ import_react.default.createElement(
import_react_native_svg.Path,
{
"fill-rule": "evenodd",
"clip-rule": "evenodd",
d: "M8 5C7.46957 5 6.96086 5.21071 6.58579 5.58579C6.21071 5.96086 6 6.46957 6 7V17C6 17.5304 6.21071 18.0391 6.58579 18.4142C6.96086 18.7893 7.46957 19 8 19H9C9.53043 19 10.0391 18.7893 10.4142 18.4142C10.7893 18.0391 11 17.5304 11 17V7C11 6.46957 10.7893 5.96086 10.4142 5.58579C10.0391 5.21071 9.53043 5 9 5H8ZM15 5C14.4696 5 13.9609 5.21071 13.5858 5.58579C13.2107 5.96086 13 6.46957 13 7V17C13 17.5304 13.2107 18.0391 13.5858 18.4142C13.9609 18.7893 14.4696 19 15 19H16C16.5304 19 17.0391 18.7893 17.4142 18.4142C17.7893 18.0391 18 17.5304 18 17V7C18 6.46957 17.7893 5.96086 17.4142 5.58579C17.0391 5.21071 16.5304 5 16 5H15Z",
fill: color
}
));
};
var PlayIcon = (props) => {
const { size = 25, color = "black" } = props;
return /* @__PURE__ */ import_react.default.createElement(import_react_native_svg.Svg, { width: size, height: size, viewBox: "0 0 256 256", fill: "none" }, /* @__PURE__ */ import_react.default.createElement(
import_react_native_svg.Path,
{
d: "M240 128C240.007 130.716 239.31 133.388 237.978 135.756C236.647 138.123 234.725 140.105 232.4 141.51L88.32 229.65C85.8909 231.138 83.1087 231.95 80.2608 232.002C77.4129 232.055 74.6025 231.347 72.12 229.95C69.6611 228.575 67.6128 226.57 66.1856 224.141C64.7585 221.712 64.0041 218.947 64 216.13V39.8701C64.0041 37.053 64.7585 34.2877 66.1856 31.8588C67.6128 29.4299 69.6611 27.4249 72.12 26.0501C74.6025 24.6536 77.4129 23.9451 80.2608 23.9979C83.1087 24.0506 85.8909 24.8626 88.32 26.3501L232.4 114.49C234.725 115.895 236.647 117.877 237.978 120.245C239.31 122.612 240.007 125.284 240 128Z",
fill: color
}
));
};
// src/utils/index.ts
var import_moment = __toESM(require("moment"));
var import_softchatjs_core = require("softchatjs-core");
function convertToMinutes(seconds) {
var _seconds = Number(seconds.toFixed(0));
const minutes = Math.floor(_seconds / 60);
const remainingSeconds = _seconds % 60;
const paddedMinutes = String(minutes).padStart(2, "0");
const paddedSeconds = String(remainingSeconds).padStart(2, "0");
return `${paddedMinutes}:${paddedSeconds}`;
}
// src/contexts/ChatProvider.tsx
var import_react4 = __toESM(require("react"));
// src/contexts/ModalProvider.tsx
var import_react2 = __toESM(require("react"));
var import_react_native2 = require("react-native");
var initial = {
displayModal: () => {
},
resetModal: () => {
},
modalProps: {
dismissable: true,
justifyContent: "center",
children: null,
animation: "slide",
containerWidth: "100%"
}
};
var ModalProviderContext = (0, import_react2.createContext)(initial);
// 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
var import_react3 = __toESM(require("react"));
var import_expo_av = require("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 = (0, import_react3.createContext)(
initialMessageStateContext
);
var useMessageState = () => (0, import_react3.useContext)(MessageStateContext);
// src/contexts/ChatProvider.tsx
var ConfigContext = (0, import_react4.createContext)({
theme: theme_default,
client: null,
fontFamily: void 0,
fontScale: 1
});
function useConfig() {
return (0, import_react4.useContext)(ConfigContext);
}
// src/components/Chat/ChatItem/Media/VoiceMessage.tsx
var AudioWaves = ({
type = "record",
audioTime,
audioWaves
}) => {
const { theme: theme2, fontFamily } = useConfig();
const waves = Object.values(audioWaves).flat();
return /* @__PURE__ */ import_react5.default.createElement(
import_react_native3.View,
{
style: {
flex: 1,
marginHorizontal: 5,
borderWidth: type === "record" ? 1 : 0,
overflow: "hidden",
borderColor: theme2?.divider,
borderRadius: 100,
paddingHorizontal: 10,
height: 35,
flexDirection: "row",
alignItems: "center"
}
},
/* @__PURE__ */ import_react5.default.createElement(
import_react_native3.Text,
{
style: {
color: type === "play" ? theme2?.text.primary : "white",
fontSize: 12,
fontFamily,
marginEnd: 5
}
},
convertToMinutes(Number(audioTime.toFixed(0)))
),
/* @__PURE__ */ import_react5.default.createElement(
import_react_native3.View,
{
style: {
flex: 1,
flexDirection: "row",
alignItems: "center",
height: "100%",
justifyContent: type === "play" ? "flex-start" : "flex-end",
overflow: "hidden",
paddingHorizontal: 0
}
},
waves.map((wave, i) => /* @__PURE__ */ import_react5.default.createElement(
import_react_native3.View,
{
key: i,
style: {
width: 2,
backgroundColor: theme2?.icon,
height: `${wave.height}%`,
marginEnd: 2,
borderRadius: 1
}
}
))
)
);
};
function VoiceMessage(props) {
const { media, textColor = theme_default.text.primary } = props;
const { fontFamily } = useConfig();
const {
audioState,
playVoiceMessage,
pauseVoiceMessage,
resumeVoiceMessage,
activeVoiceMessage,
avPlayBackStatus
} = useMessageState();
const renderVoiceMessageControls = (0, import_react5.useCallback)(() => {
var isActiveVoiceMessage = media.mediaId === activeVoiceMessage?.mediaId;
if (isActiveVoiceMessage && audioState === "loading") {
return /* @__PURE__ */ import_react5.default.createElement(import_react_native3.ActivityIndicator, { size: 25 });
} else if (isActiveVoiceMessage && audioState === null) {
return /* @__PURE__ */ import_react5.default.createElement(import_react_native3.TouchableOpacity, { onPress: () => playVoiceMessage(media) }, /* @__PURE__ */ import_react5.default.createElement(PlayIcon, { color: theme_default?.icon }));
} else if (isActiveVoiceMessage && audioState === "playing") {
return /* @__PURE__ */ import_react5.default.createElement(import_react_native3.TouchableOpacity, { onPress: pauseVoiceMessage }, /* @__PURE__ */ import_react5.default.createElement(PauseIcon, { color: theme_default?.icon }));
} else if (isActiveVoiceMessage && audioState === "paused") {
return /* @__PURE__ */ import_react5.default.createElement(import_react_native3.TouchableOpacity, { onPress: resumeVoiceMessage }, /* @__PURE__ */ import_react5.default.createElement(PlayIcon, { color: theme_default?.icon }));
} else {
return /* @__PURE__ */ import_react5.default.createElement(import_react_native3.TouchableOpacity, { onPress: () => playVoiceMessage(media) }, /* @__PURE__ */ import_react5.default.createElement(PlayIcon, { color: theme_default?.icon }));
}
}, [media, activeVoiceMessage, audioState]);
var progress = (0, import_react5.useMemo)(() => {
try {
var isActiveVoiceMessage = media.mediaId === activeVoiceMessage?.mediaId;
if (isActiveVoiceMessage) {
if (audioState === null || audioState === "loading") {
return {
percentage: 0,
timePlayed: media?.meta?.audioDurationSec ?? 0 / 1e3
};
}
var curr = avPlayBackStatus?.positionMillis / 1e3;
var duration = media?.meta?.audioDurationSec ?? 0 / 1e3;
var percentage = curr / duration * 100;
return { percentage, timePlayed: curr };
}
return { percentage: 0, timePlayed: media.meta?.audioDurationSec ?? 0 };
} catch (error) {
return { percentage: 0, timePlayed: media.meta?.audioDurationSec ?? 0 };
}
}, [media, avPlayBackStatus, audioState]);
return /* @__PURE__ */ import_react5.default.createElement(
import_react_native3.View,
{
style: {
flexDirection: "row",
alignItems: "center",
width: "100%",
minWidth: 50,
backgroundColor: theme_default.background.disabled,
padding: 10,
borderRadius: 25
// backgroundColor: 'red'
}
},
/* @__PURE__ */ import_react5.default.createElement(import_react5.default.Fragment, null, renderVoiceMessageControls()),
/* @__PURE__ */ import_react5.default.createElement(
import_react_native3.View,
{
style: {
flex: 1,
backgroundColor: theme_default?.divider,
marginHorizontal: 10
}
},
/* @__PURE__ */ import_react5.default.createElement(
import_react_native3.View,
{
style: {
width: `${progress.percentage}%`,
maxWidth: "100%",
height: 3,
backgroundColor: theme_default?.icon
}
}
)
),
/* @__PURE__ */ import_react5.default.createElement(import_react_native3.Text, { style: { marginStart: 5, color: textColor, fontFamily } }, convertToMinutes(progress.timePlayed))
);
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
AudioWaves
});
//# sourceMappingURL=VoiceMessage.js.map