SpotiftMessage feature added.

Author: abdurrahmanekr

example/App.js

@@ -46,7 +46,7 @@ export class App extends Component {
 	}
 
 	token() {
-		return (parseInt(Math.random() * 10 % 5));
+		return (parseInt(Math.random() * 10 % 6));
 	}
 
 	photo(size) {
@@ -77,6 +77,9 @@ export class App extends Component {
 					case 3:
 						type = 'location';
 						break;
+					case 4:
+						type = 'spotify';
+						break;
 					default:
 						type = 'text';
 						statu = 'read';
@@ -89,7 +92,7 @@ export class App extends Component {
 					type: type,
 					title: loremIpsum({ count: 2, units: 'words' }),
 					titleColor: this.getRandomColor(),
-					text: loremIpsum({ count: 1, units: 'sentences' }),
+					text: type === 'spotify' ? 'spotify:user:spotify:playlist:3rgsDhGHZxZ9sB9DQWQfuf' : loremIpsum({ count: 1, units: 'sentences' }),
 					data: {
 						uri: `data:image/png;base64,${this.photo(150)}`,
 						status: {

src/MessageBox/MessageBox.js

@@ -5,6 +5,7 @@ import PhotoMessage from '../PhotoMessage/PhotoMessage';
 import FileMessage from '../FileMessage/FileMessage';
 import SystemMessage from '../SystemMessage/SystemMessage';
 import LocationMessage from '../LocationMessage/LocationMessage';
+import SpotifyMessage from '../SpotifyMessage/SpotifyMessage';
 
 import FaForward from 'react-icons/lib/fa/mail-forward';
 import FaReply from 'react-icons/lib/fa/mail-reply';
@@ -77,6 +78,7 @@ export class MessageBox extends Component {
 									height={this.props.height}
 									text={this.props.text} />
 							}
+
 							{
 								this.props.type === 'file' &&
 								<FileMessage
@@ -86,6 +88,15 @@ export class MessageBox extends Component {
 									text={this.props.text} />
 							}
 
+							{
+								this.props.type === 'spotify' &&
+								<SpotifyMessage
+									width={this.props.width}
+									height={this.props.height}
+									data={this.props.data}
+									uri={this.props.uri || this.props.text} />
+							}
+
 							<div className="rce-mbox-time">
 								{
 									this.props.date &&

src/SpotifyMessage/SpotifyMessage.css

@@ -0,0 +1,8 @@
+.rce-mbox-spotify {
+	margin-top: -2px;
+    overflow: hidden;
+    margin-right: -5px;
+    margin-left: -5px;
+    display: flex;
+    border-radius: 5px;
+}

src/SpotifyMessage/SpotifyMessage.js

@@ -0,0 +1,28 @@
+import React, { Component } from 'react';
+import './SpotifyMessage.css';
+
+const classNames = require('classnames');
+
+export class SpotifyMessage extends Component {
+	render() {
+		if (!this.props.uri)
+			return null;
+		return (
+			<div className="rce-mbox-spotify">
+				<iframe
+					src={"https://open.spotify.com/embed?uri=" + this.props.uri}
+					width={this.props.width}
+					height={this.props.height}
+					frameBorder="0"
+					allowTransparency="true"></iframe>
+			</div>
+		);
+	}
+}
+
+SpotifyMessage.defaultProps = {
+	width: 300,
+	height: 380,
+}
+
+export default SpotifyMessage;

src/SpotifyMessage/__tests__/SpotifyMessage.js

@@ -0,0 +1,12 @@
+import React, { Component } from 'react';
+import { shallow } from 'enzyme';
+import toJson from 'enzyme-to-json';
+import SpotifyMessage from '../SpotifyMessage';
+
+describe('SpotifyMessage component', () => {
+  it('should render without issues', () => {
+    const component = shallow(<SpotifyMessage />);
+    expect(component.length).toBe(1);
+    expect(toJson(component)).toMatchSnapshot();
+  });
+});

src/SpotifyMessage/__tests__/__snapshots__/SpotifyMessage.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SpotifyMessage component should render without issues 1`] = `null`;