Merge pull request #136 from Detaysoft/audio-message

abdurrahmanekr · web-flow · commit 6b73d964afef · 2021-02-15T10:18:20.000+03:00
Audio message feature added. Thanks @emregudur
diff --git a/README.md b/README.md
@@ -101,9 +101,9 @@ import { ChatItem } from 'react-chat-elements'
 
 ## MessageBox Component
 
-| file | photo | text | location | video |
-| ---- | ---- | ---- | ---- | ---- |
-| ![file-message](https://user-images.githubusercontent.com/15075759/29243524-786baf8c-7fa9-11e7-92b2-3960cc34fcf4.png) | ![photo-message](https://user-images.githubusercontent.com/15075759/29243556-1368c4e8-7faa-11e7-9fdd-57b67542c381.png) | ![text-message](https://user-images.githubusercontent.com/15075759/29243573-a809456e-7faa-11e7-97b4-d258bc6a7728.png) | ![location-message](https://user-images.githubusercontent.com/15075759/30582943-2b3338aa-9d2e-11e7-93d5-8614563b9217.png) | ![](https://user-images.githubusercontent.com/15075759/98530021-74ca1300-228f-11eb-88ab-5ae5ae33616d.png)
+| file | photo | text | location | video | audio |
+| ---- | ---- | ---- | ---- | ---- | ---- |
+| ![file-message](https://user-images.githubusercontent.com/15075759/29243524-786baf8c-7fa9-11e7-92b2-3960cc34fcf4.png) | ![photo-message](https://user-images.githubusercontent.com/15075759/29243556-1368c4e8-7faa-11e7-9fdd-57b67542c381.png) | ![text-message](https://user-images.githubusercontent.com/15075759/29243573-a809456e-7faa-11e7-97b4-d258bc6a7728.png) | ![location-message](https://user-images.githubusercontent.com/15075759/30582943-2b3338aa-9d2e-11e7-93d5-8614563b9217.png) | ![](https://user-images.githubusercontent.com/15075759/98530021-74ca1300-228f-11eb-88ab-5ae5ae33616d.png) | ![](https://user-images.githubusercontent.com/41473129/105960654-98327c00-608e-11eb-9ac4-5b014974b87c.png)
 
 
 ```javascript
@@ -128,7 +128,7 @@ import { MessageBox } from 'react-chat-elements'
 | ---- | ---- | ---- | ---- |
 | id | i (index) | string | message box id |
 | position | left | string | message box position |
-| type | text | string | message type (text, photo, file, location, spotify, video) |
+| type | text | string | message type (text, photo, file, location, spotify, video, audio) |
 | text | none | string | message text |
 | title | none | string | message title |
 | titleColor | none | string(color) | message title color |
diff --git a/android/.project b/android/.project
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<projectDescription>
+	<name>example</name>
+	<comment>Project android_ created by Buildship.</comment>
+	<projects>
+	</projects>
+	<buildSpec>
+		<buildCommand>
+			<name>org.eclipse.buildship.core.gradleprojectbuilder</name>
+			<arguments>
+			</arguments>
+		</buildCommand>
+	</buildSpec>
+	<natures>
+		<nature>org.eclipse.buildship.core.gradleprojectnature</nature>
+	</natures>
+</projectDescription>
diff --git a/android/.settings/org.eclipse.buildship.core.prefs b/android/.settings/org.eclipse.buildship.core.prefs
@@ -0,0 +1,13 @@
+arguments=
+auto.sync=false
+build.scans.enabled=false
+connection.gradle.distribution=GRADLE_DISTRIBUTION(WRAPPER)
+connection.project.dir=
+eclipse.preferences.version=1
+gradle.user.home=
+java.home=C\:/Program Files (x86)/Java/jdk1.8.0_251
+jvm.arguments=
+offline.mode=false
+override.workspace.settings=true
+show.console.view=true
+show.executions.view=true
diff --git a/android/app/.classpath b/android/app/.classpath
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<classpath>
+	<classpathentry kind="con" path="org.eclipse.jdt.launching.JRE_CONTAINER/org.eclipse.jdt.internal.debug.ui.launcher.StandardVMType/JavaSE-1.8"/>
+	<classpathentry kind="con" path="org.eclipse.buildship.core.gradleclasspathcontainer"/>
+	<classpathentry kind="output" path="bin"/>
+</classpath>
diff --git a/android/app/.project b/android/app/.project
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<projectDescription>
+	<name>app</name>
+	<comment>Project app created by Buildship.</comment>
+	<projects>
+	</projects>
+	<buildSpec>
+		<buildCommand>
+			<name>org.eclipse.jdt.core.javabuilder</name>
+			<arguments>
+			</arguments>
+		</buildCommand>
+		<buildCommand>
+			<name>org.eclipse.buildship.core.gradleprojectbuilder</name>
+			<arguments>
+			</arguments>
+		</buildCommand>
+	</buildSpec>
+	<natures>
+		<nature>org.eclipse.jdt.core.javanature</nature>
+		<nature>org.eclipse.buildship.core.gradleprojectnature</nature>
+	</natures>
+</projectDescription>
diff --git a/android/app/.settings/org.eclipse.buildship.core.prefs b/android/app/.settings/org.eclipse.buildship.core.prefs
@@ -0,0 +1,2 @@
+connection.project.dir=..
+eclipse.preferences.version=1
diff --git a/example/App.js b/example/App.js
@@ -43,7 +43,7 @@ export class App extends Component {
     }
 
     UNSAFE_componentWillMount() {
-        this.addMessage(6)
+        this.addMessage(7)
     }
 
     getRandomColor() {
@@ -56,7 +56,7 @@ export class App extends Component {
     }
 
     token() {
-        return (parseInt(Math.random() * 10 % 7));
+        return (parseInt(Math.random() * 10 % 8));
     }
 
     photo(size) {
@@ -97,6 +97,9 @@ export class App extends Component {
                         mtype = 'video';
                         status = 'sent';
                         break;
+                    case 7:
+                        mtype = 'audio';
+                        break;
                     default:
                         mtype = 'text';
                         status = 'read';
@@ -119,7 +122,7 @@ export class App extends Component {
                         date: +new Date(),
                         collapseTitle: loremIpsum({ count: 2, units: 'words' }),
                         participants: Array(this.token() + 6).fill(1).map(x => ({
-                            id: parseInt(Math.random() * 10 % 6),
+                            id: parseInt(Math.random() * 10 % 7),
                             title: loremIpsum({ count: 1, units: 'words' }),
                         })),
                         dataSource: Array(this.token() + 5).fill(1).map(x => ({
@@ -153,6 +156,7 @@ export class App extends Component {
                     text: mtype === 'spotify' ? 'spotify:track:0QjjaCaXE45mvhCnV3C0TA' : loremIpsum({ count: 1, units: 'sentences' }),
                     data: {
                         videoURL: this.token() >= 1 ? 'https://www.w3schools.com/html/mov_bbb.mp4' : 'http://www.exit109.com/~dnn/clips/RW20seconds_1.mp4',
+                        audioURL: 'https://www.w3schools.com/html/horse.mp3',
                         uri: `data:image/png;base64,${this.photo(150)}`,
                         status: {
                             click: true,
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-chat-elements",
-  "version": "10.13.0",
+  "version": "10.14.0",
   "description": "Reactjs chat components",
   "author": "Avare Kodcu <abdurrahmaneker58@gmail.com>",
   "main": "dist/main.js",
diff --git a/src/AudioMessage/AudioMessage.css b/src/AudioMessage/AudioMessage.css
@@ -0,0 +1,8 @@
+.rce-mbox-audio {
+    padding-bottom: 10px;
+    max-width: 300px;
+}
+
+audio:focus {
+    outline: none;
+}
diff --git a/src/AudioMessage/AudioMessage.js b/src/AudioMessage/AudioMessage.js
@@ -0,0 +1,30 @@
+import React from 'react';
+
+import './AudioMessage.css';
+
+export default class AudioMessage extends React.PureComponent {
+    render() {
+        const audioURL = this.props.data.audioURL;
+        const controlsList = this.props.data.controlsList;
+
+        return (
+            <div className={'rce-mbox-audio'}>
+                <audio controls controlsList={controlsList ? controlsList : "nodownload"}>
+                    <source src={audioURL} type="audio/mp3"/>
+                    Your browser does not support the audio element.
+                </audio>
+
+                {
+                    this.props.text &&
+                    <div className='rce-mbox-text'>
+                        {this.props.text}
+                    </div>
+                }
+            </div>
+        );
+    }
+}
+
+AudioMessage.defaultProps = {
+    data: {},
+};
diff --git a/src/AudioMessage/__tests__/AudioMessage.js b/src/AudioMessage/__tests__/AudioMessage.js
@@ -0,0 +1,12 @@
+import React, { Component } from 'react';
+import { shallow } from 'enzyme';
+import toJson from 'enzyme-to-json';
+import AudioMessage from '../AudioMessage';
+
+describe('AudioMessage component', () => {
+  it('should render without issues', () => {
+    const component = shallow(<AudioMessage />);
+    expect(component.length).toBe(1);
+    expect(toJson(component)).toMatchSnapshot();
+  });
+});
diff --git a/src/AudioMessage/__tests__/__snapshots__/AudioMessage.js.snap b/src/AudioMessage/__tests__/__snapshots__/AudioMessage.js.snap
@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AudioMessage component should render without issues 1`] = `
+<div
+  className="rce-mbox-audio"
+>
+  <audio
+    controls={true}
+    controlsList="nodownload"
+  >
+    <source
+      type="audio/mp3"
+    />
+    Your browser does not support the audio element.
+  </audio>
+</div>
+`;
diff --git a/src/MessageBox/MessageBox.js b/src/MessageBox/MessageBox.js
@@ -9,6 +9,7 @@ import SpotifyMessage from '../SpotifyMessage/SpotifyMessage';
 import ReplyMessage from '../ReplyMessage/ReplyMessage';
 import MeetingMessage from '../MeetingMessage/MeetingMessage';
 import VideoMessage from '../VideoMessage/VideoMessage';
+import AudioMessage from '../AudioMessage/AudioMessage';
 
 import Avatar from '../Avatar/Avatar';
 
@@ -41,7 +42,7 @@ export class MessageBox extends React.PureComponent {
 
     render() {
         var positionCls = classNames('rce-mbox', { 'rce-mbox-right': this.props.position === 'right' });
-        var thatAbsoluteTime = !/(text|video|file|meeting)/g.test(this.props.type) && !(this.props.type === 'location' && this.props.text);
+        var thatAbsoluteTime = !/(text|video|file|meeting|audio)/g.test(this.props.type) && !(this.props.type === 'location' && this.props.text);
 
         const dateText = this.props.date && !isNaN(this.props.date) && (
             this.props.dateString ||
@@ -217,6 +218,15 @@ export class MessageBox extends React.PureComponent {
                                         onMeetingVideoLinkClick={this.props.onMeetingVideoLinkClick}
                                         onMeetingTitleClick={this.props.onMeetingTitleClick} />
                                 }
+                                {
+                                    this.props.type === 'audio' &&
+                                    <AudioMessage
+                                        onOpen={this.props.onOpen}
+                                        onDownload={this.props.onDownload}
+                                        onLoad={this.props.onLoad}
+                                        data={this.props.data}
+                                        text={this.props.text} />
+                                }
 
                                 <div
                                     className={classNames(
diff --git a/src/index.js b/src/index.js
@@ -14,7 +14,7 @@ import ReplyMessage from './ReplyMessage/ReplyMessage';
 import MeetingItem from './MeetingItem/MeetingItem';
 import MeetingList from './MeetingList/MeetingList';
 import MeetingMessage from './MeetingMessage/MeetingMessage';
-
+import AudioMessage from './AudioMessage/AudioMessage';
 
 export {
     MessageBox,
@@ -33,4 +33,5 @@ export {
     MeetingItem,
     MeetingList,
     MeetingMessage,
+    AudioMessage,
 };

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+connection.project.dir=..`
	`2`	`+eclipse.preferences.version=1`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "react-chat-elements",`
`3`		`- "version": "10.13.0",`
	`3`	`+ "version": "10.14.0",`
`4`	`4`	`"description": "Reactjs chat components",`
`5`	`5`	`"author": "Avare Kodcu <abdurrahmaneker58@gmail.com>",`
`6`	`6`	`"main": "dist/main.js",`