Merge pull request #134 from Detaysoft/video-message

(feature) Video Message Added

Author: abdurrahmanekr

README.md

@@ -101,9 +101,9 @@ import { ChatItem } from 'react-chat-elements'
 
 ## MessageBox Component
 
-| file | photo | text | location |
-| ---- | ---- | ---- | ---- |
-| ![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)
+| 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)
 
 
 ```javascript
@@ -126,13 +126,13 @@ import { MessageBox } from 'react-chat-elements'
 
 | prop | default | type | description |
 | ---- | ---- | ---- | ---- |
-| id | i (index) | string | message box id |
-| position | left | string | message box position |
-| type | text | string | message type (text, photo, file, location, spotify) |
-| text | none | string | message text |
-| title | none | string | message title |
-| titleColor | none | string(color) | message title color |
-| data | {} | object | message data |
+| id | i (index) | string | message box id |
+| position | left | string | message box position |
+| type | text | string | message type (text, photo, file, location, spotify, video) |
+| text | none | string | message text |
+| title | none | string | message title |
+| titleColor | none | string(color) | message title color |
+| data | {} | object | message data |
 | date | new Date() | Date | message date |
 | dateString | none | string | message represents dateString or timeagojs(now, date) |
 | onClick | none | function | message on click (message(object) is returned) |
@@ -256,7 +256,7 @@ import { SystemMessage } from 'react-chat-elements'
 
 | prop | default | type | description |
 | ---- | ---- | ---- | ---- |
-| text| none | string | message text |
+| text| none | string | message text |
 
 
 ## MessageList Component
@@ -594,7 +594,7 @@ import { LocationMessage } from 'react-chat-elements'
 | apiKey | none | string | google staticmap api key |
 | zoom | 14 | int | google staticmap zoom level |
 | markerColor | red | string | google staticmap marker color |
-| data | {} | object | message data |
+| data | {} | object | message data |
 | target | _blank | string | image a tag target prop |
 | onOpen | none | function | image on open |
 
@@ -620,7 +620,7 @@ import { SpotifyMessage } from 'react-chat-elements'
 | uri | none | uri | spotify uri |
 | theme | black | string | spotify theme color (black or white) |
 | view | list | string | spotify view type (list or coverart) |
-| data | {} | object | message data |
+| data | {} | object | message data |
 | width | 300 | int | spotify embed width |
 | height | 380 | int | spotify embed height |
 

example/App.js

@@ -38,10 +38,12 @@ export class App extends Component {
             list: 'chat',
             messageList: [],
         };
+
+        this.addMessage = this.addMessage.bind(this);
     }
 
     UNSAFE_componentWillMount() {
-        // setInterval(this.addMessage.bind(this), 3000);
+        this.addMessage(6)
     }
 
     getRandomColor() {
@@ -54,7 +56,7 @@ export class App extends Component {
     }
 
     token() {
-        return (parseInt(Math.random() * 10 % 6));
+        return (parseInt(Math.random() * 10 % 7));
     }
 
     photo(size) {
@@ -64,35 +66,39 @@ export class App extends Component {
         }).toString()
     }
 
-    random(type) {
+    random(type, mtype) {
         switch (type) {
             case 'message':
-                var type = this.token();
+                mtype = mtype || this.token();
                 var status = 'waiting';
-                switch (type) {
+                switch (mtype) {
                     case 0:
-                        type = 'photo';
+                        mtype = 'photo';
                         status = 'sent';
                         break;
                     case 1:
-                        type = 'file';
+                        mtype = 'file';
                         status = 'sent';
                         break;
                     case 2:
-                        type = 'system';
+                        mtype = 'system';
                         status = 'received';
                         break;
                     case 3:
-                        type = 'location';
+                        mtype = 'location';
                         break;
                     case 4:
-                        type = 'spotify';
+                        mtype = 'spotify';
                         break;
                     case 5:
-                        type = 'meeting';
+                        mtype = 'meeting';
+                        break;
+                    case 6:
+                        mtype = 'video';
+                        status = 'sent';
                         break;
                     default:
-                        type = 'text';
+                        mtype = 'text';
                         status = 'read';
                         break;
                 }
@@ -139,17 +145,19 @@ export class App extends Component {
                             },
                         })),
                     }) : null,
-                    type: type,
+                    type: mtype,
                     theme: 'white',
                     view: 'list',
                     title: loremIpsum({ count: 2, units: 'words' }),
                     titleColor: this.getRandomColor(),
-                    text: type === 'spotify' ? 'spotify:track:7wGoVu4Dady5GV0Sv4UIsx' : loremIpsum({ count: 1, units: 'sentences' }),
+                    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',
                         uri: `data:image/png;base64,${this.photo(150)}`,
                         status: {
                             click: true,
-                            loading: .5,
+                            loading: 0.5,
+                            download: mtype === 'video',
                         },
                         size: "100MB",
                         width: 300,
@@ -238,9 +246,9 @@ export class App extends Component {
         }
     }
 
-    addMessage() {
+    addMessage(mtype) {
         var list = this.state.messageList;
-        list.push(this.random('message'));
+        list.push(this.random('message', mtype));
         this.setState({
             messageList: list,
         });
@@ -355,7 +363,7 @@ export class App extends Component {
                         rightButtons={
                             <Button
                                 text='Gönder'
-                                onClick={this.addMessage.bind(this)} />
+                                onClick={() => this.addMessage()} />
                         } />
                 </div>
             </div>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-chat-elements",
-  "version": "10.11.3",
+  "version": "10.12.0",
   "description": "Reactjs chat components",
   "author": "Avare Kodcu <[email protected]>",
   "main": "dist/main.js",

src/MeetingMessage/__tests__/__snapshots__/MeetingMessage.js.snap

@@ -33,11 +33,6 @@ exports[`MeetingMessage component should render without issues 1`] = `
           </span>
         </div>
       </div>
-      <div
-        className="rce-mtmg-right-icon"
-      >
-        <MdMoreHoriz />
-      </div>
     </div>
     <div
       className="rce-mtmg-body-bottom"

src/MessageBox/MessageBox.js

@@ -8,6 +8,7 @@ import LocationMessage from '../LocationMessage/LocationMessage';
 import SpotifyMessage from '../SpotifyMessage/SpotifyMessage';
 import ReplyMessage from '../ReplyMessage/ReplyMessage';
 import MeetingMessage from '../MeetingMessage/MeetingMessage';
+import VideoMessage from '../VideoMessage/VideoMessage';
 
 import Avatar from '../Avatar/Avatar';
 
@@ -40,7 +41,7 @@ export class MessageBox extends Component {
 
     render() {
         var positionCls = classNames('rce-mbox', { 'rce-mbox-right': this.props.position === 'right' });
-        var thatAbsoluteTime = !/(text|file|meeting)/g.test(this.props.type) && !(this.props.type === 'location' && this.props.text);
+        var thatAbsoluteTime = !/(text|video|file|meeting)/g.test(this.props.type) && !(this.props.type === 'location' && this.props.text);
 
         const dateText = this.props.date && !isNaN(this.props.date) && (
             this.props.dateString ||
@@ -166,6 +167,19 @@ export class MessageBox extends Component {
                                         text={this.props.text} />
                                 }
 
+                                {
+                                    this.props.type === 'video' &&
+                                    <VideoMessage
+                                        onOpen={this.props.onOpen}
+                                        onDownload={this.props.onDownload}
+                                        onLoad={this.props.onLoad}
+                                        onPhotoError={this.props.onPhotoError}
+                                        data={this.props.data}
+                                        width={this.props.width}
+                                        height={this.props.height}
+                                        text={this.props.text} />
+                                }
+
                                 {
                                     this.props.type === 'file' &&
                                     <FileMessage

src/VideoMessage/VideoMessage.css

@@ -0,0 +1,85 @@
+.rce-mbox-video {
+    margin-top: -3px;
+    margin-right: -6px;
+    margin-left: -6px;
+}
+
+.rce-mbox-video.padding-time {
+    padding-bottom: 12px;
+}
+
+.rce-mbox-video .rce-mbox-text {
+    padding: 5px 0px;
+    max-width: 300px;
+    margin: auto;
+}
+
+.rce-mbox-video--video {
+    position: relative;
+    display: flex;
+    overflow: hidden;
+    justify-content: center;
+    border-radius: 5px;
+    max-height: 500px;
+}
+
+.rce-mbox-video--video__block {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    background-color: rgba(0,0,0,0.5);
+    border-radius: 5px;
+    display: flex;
+}
+
+.rce-mbox-video--video img {
+    height: 100%;
+    min-height: 100px;
+    user-select: none;
+}
+
+.rce-mbox-video--video video {
+    width: 100%;
+    /*min-height: 100px;*/
+    user-select: none;
+}
+
+.rce-mbox-video--video__block-item {
+    margin: auto;
+    cursor: pointer;
+    width: 100px;
+    height: 100px;
+}
+
+.rce-mbox-video--download {
+    color: #efe;
+    display: flex;
+    justify-content: center;
+    background: none;
+    border: none;
+    font-size: 3.2em;
+    outline: none;
+    border: 1px solid #eee;
+    border-radius: 100%;
+    height: 100px;
+    width: 100px;
+}
+
+.rce-mbox-video--download:hover {
+    opacity: .7;
+}
+
+.rce-mbox-video--download:active {
+    opacity: .3;
+}
+
+.rce-mbox-video--error {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: none;
+    font-size: 70px;
+    color: #eaeaea;
+}