feature: Voice Message

.eslintignore

@@ -4,6 +4,7 @@ __test__/*/**.jsx
 *.spec.js
 *.mock.js
 src/ui/MessageInput/index.jsx
+src/_externals/**/*
 
 __snapshots__/**/*
 *.spec.js.snap

README.md

@@ -121,3 +121,11 @@ To read more: https://webpack.js.org/configuration/resolve/#resolvefallback
   `export NewComponent from './src/location/of/NewComponent';`
 3. Add the following line to './exports.js'
   `NewComponent: 'src/location/of/NewComponent',`
+
+## Acknowledgments
+### LameJS
+
+We use lamejs for converting audio formats
+It is a fast mp3 encoder written in JavaScript. The original repo is:
+* https://lame.sourceforge.net or
+* https://github.com/zhuker/lamejs

exports.js

@@ -2,6 +2,10 @@ export default {
   // legacy
   index: 'src/index.js',
 
+  // lame-js
+  // remove when they remove 1.2.2
+  'lame.all': 'src/_externals/lamejs/js/index.js',
+
   // Easy to use app
   App: 'src/smart-components/App/index.jsx',
 
@@ -11,6 +15,12 @@ export default {
   useSendbirdStateContext: 'src/hooks/useSendbirdStateContext.tsx',
   withSendbird: 'src/lib/SendbirdSdkContext.jsx',
 
+  // Voice message
+  'VoiceRecorder/context': 'src/hooks/VoiceRecorder/index.tsx',
+  'VoiceRecorder/useVoiceRecorder': 'src/hooks/VoiceRecorder/useVoiceRecorder.tsx',
+  'VoicePlayer/context': 'src/hooks/VoicePlayer/index.tsx',
+  'VoicePlayer/useVoicePlayer': 'src/hooks/VoicePlayer/useVoicePlayer.tsx',
+
   // handlers - experimental
   'handlers/ConnectionHandler': 'src/lib/handlers/ConnectionHandler.ts',
   'handlers/GroupChannelHandler': 'src/lib/handlers/GroupChannelHandler.ts',
@@ -20,6 +30,7 @@ export default {
 
   // utils
   'utils/message/getOutgoingMessageState': 'src/utils/exports/getOutgoingMessageState.ts',
+  'utils/message/isVoiceMessage': 'src/utils/isVoiceMessage.ts',
 
   // ChannelList
   ChannelList: 'src/smart-components/ChannelList/index.tsx',
@@ -159,6 +170,8 @@ export default {
   'ui/OpenchannelThumbnailMessage': 'src/ui/OpenchannelThumbnailMessage/index.tsx',
   'ui/OpenchannelUserMessage': 'src/ui/OpenchannelUserMessage/index.tsx',
   'ui/PlaceHolder': 'src/ui/PlaceHolder/index.tsx',
+  'ui/PlaybackTime': 'src/ui/PlaybackTime/index.tsx',
+  'ui/ProgressBar': 'src/ui/ProgressBar/index.tsx',
   'ui/QuoteMessage': 'src/ui/QuoteMessage/index.tsx',
   'ui/QuoteMessageInput': 'src/ui/QuoteMessageInput/index.tsx',
   'ui/ReactionBadge': 'src/ui/ReactionBadge/index.tsx',
@@ -173,5 +186,7 @@ export default {
   'ui/UnknownMessageItemBody': 'src/ui/UnknownMessageItemBody/index.tsx',
   'ui/UserListItem': 'src/ui/UserListItem/index.tsx',
   'ui/UserProfile': 'src/ui/UserProfile/index.tsx',
+  'ui/VoiceMessgeInput': 'src/ui/VoiceMessageInput/index.tsx',
+  'ui/VoiceMessageItemBody': 'src/ui/VoiceMessageItemBody/index.tsx',
   'ui/Word': 'src/ui/Word/index.tsx',
 };

package.json

@@ -9,7 +9,6 @@
   "files": [
     "release/**/*",
     "dist/**/*",
-    "package-lock.json",
     "LICENSE",
     "CHANGELOG.md"
   ],
@@ -52,6 +51,7 @@
     "@sendbird/chat": "^4.2.3",
     "css-vars-ponyfill": "^2.3.2",
     "date-fns": "^2.16.1",
+    "lamejs": "^1.2.1",
     "prop-types": "^15.7.2"
   },
   "bugs": {

scripts/index_d_ts

@@ -518,6 +518,9 @@ declare module "SendbirdUIKitGlobal" {
     renderMessageInput?: () => React.ReactNode | React.ReactElement;
     renderTypingIndicator?: () => React.ReactNode | React.ReactElement;
     renderCustomSeparator?: (props: RenderCustomSeparatorProps) => React.ReactNode | React.ReactElement;
+    renderFileUploadIcon?: () =>  React.ReactElement;
+    renderVoiceMessageIcon?: () =>  React.ReactElement;
+    renderSendMessageIcon?: () =>  React.ReactElement;
   }
 
   export type CoreMessageType = AdminMessage | UserMessage | FileMessage;
@@ -576,6 +579,9 @@ declare module "SendbirdUIKitGlobal" {
     // value is removed when channelURL changes
     value?: string;
     ref?: React.MutableRefObject<any>;
+    renderFileUploadIcon?: () =>  React.ReactElement;
+    renderVoiceMessageIcon?: () =>  React.ReactElement;
+    renderSendMessageIcon?: () =>  React.ReactElement;
   };
 
   export type MessageListProps = {
@@ -984,6 +990,9 @@ declare module "SendbirdUIKitGlobal" {
     renderCustomSeparator?: () => React.ReactElement;
     renderParentMessageInfoPlaceholder?: (type: ParentMessageStateTypes) => React.ReactElement;
     renderThreadListPlaceHolder?: (type: ThreadListStateTypes) => React.ReactElement;
+    renderFileUploadIcon?: () =>  React.ReactElement;
+    renderVoiceMessageIcon?: () =>  React.ReactElement;
+    renderSendMessageIcon?: () =>  React.ReactElement;
   }
 
   type EventType = React.MouseEvent<HTMLDivElement | HTMLButtonElement> | React.KeyboardEvent<HTMLDivElement>;
@@ -1030,6 +1039,9 @@ declare module "SendbirdUIKitGlobal" {
 
   export interface ThreadMessageInputProps {
     className?: string;
+    renderFileUploadIcon?: () =>  React.ReactElement;
+    renderVoiceMessageIcon?: () =>  React.ReactElement;
+    renderSendMessageIcon?: () =>  React.ReactElement;
   }
 
   /**
@@ -2009,6 +2021,9 @@ declare module '@sendbird/uikit-react/ui/MessageInput' {
     onMentionedUserIdsUpdated?: (userIds: Array<string>) => void,
     onKeyUp?: (e: React.KeyboardEvent<HTMLDivElement>) => void,
     onKeyDown?: (e: React.KeyboardEvent<HTMLDivElement>) => void,
+    renderFileUploadIcon?: () =>  React.ReactElement;
+    renderVoiceMessageIcon?: () =>  React.ReactElement;
+    renderSendMessageIcon?: () =>  React.ReactElement;
   }
   const MessageInput: React.FC<MessageInputProps>;
   export default MessageInput;

src/_externals/lamejs/LICENSE

@@ -0,0 +1,12 @@
+Can I use LAME in my commercial program?
+
+Yes, you can, under the restrictions of the LGPL.  The easiest
+way to do this is to:
+
+1. Link to LAME as separate jar (lame.min.js or lame.all.js)
+
+2. Fully acknowledge that you are using LAME, and give a link
+   to our web site, lame.sourceforge.net
+
+3. If you make modifications to LAME, you *must* release these
+   these modifications back to the LAME project, under the LGPL.

src/_externals/lamejs/README.md

@@ -0,0 +1,126 @@
+# !important
+
+lamejs added somefixes(https://github.com/zhuker/lamejs/pull/87) after release of 1.2.1. So, we need to use the master branch of lamejs.
+Todo: Remove this note when lamejs release a new version.
+
+# lamejs
+Fast mp3 encoder written in JavaScript.
+On my machine it works 20x faster than realtime (it will encode 132 second long sample in 6.5 seconds) both on node and chrome.
+lamejs is a rewrite of jump3r-code which is a rewrite of libmp3lame.
+
+## Installation
+
+To install via Bower or npm, simply do the following:
+
+```bash
+$ bower install lamejs --save
+```
+
+```bash
+$ npm install lamejs
+```
+
+# Quick Start
+
+```javascript
+<script src='lame.all.js'></script>
+<script>
+var mp3Data = [];
+
+var mp3encoder = new lamejs.Mp3Encoder(1, 44100, 128); //mono 44.1khz encode to 128kbps
+var samples = new Int16Array(44100); //one second of silence replace that with your own samples
+var mp3Tmp = mp3encoder.encodeBuffer(samples); //encode mp3
+
+//Push encode buffer to mp3Data variable
+mp3Data.push(mp3Tmp);
+
+// Get end part of mp3
+mp3Tmp = mp3encoder.flush();
+
+// Write last data to the output data, too
+// mp3Data contains now the complete mp3Data
+mp3Data.push(mp3Tmp);
+
+console.debug(mp3Data);
+</script>
+```
+
+To use lamejs in Node.js build, you can install it from `npm`:
+
+```
+npm install lamejs
+```
+
+Then use it:
+
+```
+var lamejs = require("lamejs");
+```
+
+# Real Example
+
+Either see [example.html](https://github.com/zhuker/lamejs/blob/master/example.html) for full example of wav file encoding in browser or use this:
+
+```javascript
+<script src='lame.all.js'></script>
+<script>
+channels = 1; //1 for mono or 2 for stereo
+sampleRate = 44100; //44.1khz (normal mp3 samplerate)
+kbps = 128; //encode 128kbps mp3
+mp3encoder = new lamejs.Mp3Encoder(channels, sampleRate, kbps);
+var mp3Data = [];
+
+samples = new Int16Array(44100); //one second of silence (get your data from the source you have)
+sampleBlockSize = 1152; //can be anything but make it a multiple of 576 to make encoders life easier
+
+var mp3Data = [];
+for (var i = 0; i < samples.length; i += sampleBlockSize) {
+  sampleChunk = samples.subarray(i, i + sampleBlockSize);
+  var mp3buf = mp3encoder.encodeBuffer(sampleChunk);
+  if (mp3buf.length > 0) {
+      mp3Data.push(mp3buf);
+  }
+}
+var mp3buf = mp3encoder.flush();   //finish writing mp3
+
+if (mp3buf.length > 0) {
+    mp3Data.push(new Int8Array(mp3buf));
+}
+
+var blob = new Blob(mp3Data, {type: 'audio/mp3'});
+var url = window.URL.createObjectURL(blob);
+console.log('MP3 URl: ', url);
+</script>
+```
+
+# Stereo
+
+If you want to encode stereo mp3 use separate sample buffers for left and right channel
+
+```javascript
+<script src='lame.all.js'></script>
+<script>
+mp3encoder = new lamejs.Mp3Encoder(2, 44100, 128);
+var mp3Data = [];
+
+left = new Int16Array(44100); //one second of silence (get your data from the source you have)
+right = new Int16Array(44100); //one second of silence (get your data from the source you have)
+sampleBlockSize = 1152; //can be anything but make it a multiple of 576 to make encoders life easier
+
+for (var i = 0; i < samples.length; i += sampleBlockSize) {
+  leftChunk = left.subarray(i, i + sampleBlockSize);
+  rightChunk = right.subarray(i, i + sampleBlockSize);
+  var mp3buf = mp3encoder.encodeBuffer(leftChunk, rightChunk);
+  if (mp3buf.length > 0) {
+    mp3Data.push(mp3buf);
+  }
+}
+var mp3buf = mp3encoder.flush();   //finish writing mp3
+
+if (mp3buf.length > 0) {
+    mp3Data.push(mp3buf);
+}
+
+console.log(mp3Data);
+</script>
+```