diff --git a/README.md b/README.md index 507846d4..814b02ce 100644 --- 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 new file mode 100644 index 00000000..86783f61 --- /dev/null +++ b/android/.project @@ -0,0 +1,17 @@ + + + example + Project android_ created by Buildship. + + + + + org.eclipse.buildship.core.gradleprojectbuilder + + + + + + org.eclipse.buildship.core.gradleprojectnature + + diff --git a/android/.settings/org.eclipse.buildship.core.prefs b/android/.settings/org.eclipse.buildship.core.prefs new file mode 100644 index 00000000..164b8b39 --- /dev/null +++ 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 new file mode 100644 index 00000000..689651e3 --- /dev/null +++ b/android/app/.classpath @@ -0,0 +1,6 @@ + + + + + + diff --git a/android/app/.project b/android/app/.project new file mode 100644 index 00000000..d1eb8cbc --- /dev/null +++ b/android/app/.project @@ -0,0 +1,23 @@ + + + app + Project app created by Buildship. + + + + + org.eclipse.jdt.core.javabuilder + + + + + org.eclipse.buildship.core.gradleprojectbuilder + + + + + + org.eclipse.jdt.core.javanature + org.eclipse.buildship.core.gradleprojectnature + + diff --git a/android/app/.settings/org.eclipse.buildship.core.prefs b/android/app/.settings/org.eclipse.buildship.core.prefs new file mode 100644 index 00000000..a7b84d92 --- /dev/null +++ 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 index cc4d1598..7e94db87 100644 --- 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 index 764de559..884029e8 100644 --- 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 ", "main": "dist/main.js", diff --git a/src/AudioMessage/AudioMessage.css b/src/AudioMessage/AudioMessage.css new file mode 100644 index 00000000..05f94fef --- /dev/null +++ b/src/AudioMessage/AudioMessage.css @@ -0,0 +1,8 @@ +.rce-mbox-audio { + padding-bottom: 10px; + max-width: 300px; +} + +audio:focus { + outline: none; +} \ No newline at end of file diff --git a/src/AudioMessage/AudioMessage.js b/src/AudioMessage/AudioMessage.js new file mode 100644 index 00000000..9c57456e --- /dev/null +++ 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 ( +
+ + + { + this.props.text && +
+ {this.props.text} +
+ } +
+ ); + } +} + +AudioMessage.defaultProps = { + data: {}, +}; diff --git a/src/AudioMessage/__tests__/AudioMessage.js b/src/AudioMessage/__tests__/AudioMessage.js new file mode 100644 index 00000000..071d9928 --- /dev/null +++ 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(); + expect(component.length).toBe(1); + expect(toJson(component)).toMatchSnapshot(); + }); +}); \ No newline at end of file diff --git a/src/AudioMessage/__tests__/__snapshots__/AudioMessage.js.snap b/src/AudioMessage/__tests__/__snapshots__/AudioMessage.js.snap new file mode 100644 index 00000000..fb8e2421 --- /dev/null +++ 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`] = ` +
+ +
+`; diff --git a/src/MessageBox/MessageBox.js b/src/MessageBox/MessageBox.js index 76d830bf..29742cad 100644 --- 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' && + + }