props was dynamic.theme and view props added.

Author: abdurrahmanekr

README.md

@@ -436,6 +436,8 @@ import { LocationMessage } from 'react-chat-elements'
 import { SpotifyMessage } from 'react-chat-elements'
 
 <SpotifyMessage
+    theme='white'
+    view='coverart'
     uri={'spotify:user:spotify:playlist:3rgsDhGHZxZ9sB9DQWQfuf'}/>
 ```
 
@@ -444,6 +446,8 @@ import { SpotifyMessage } from 'react-chat-elements'
 | prop | default | type | description |
 | ---- | ---- | ---- | ---- |
 | 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 |
 | width | 300 | int | spotify embed width |
 | height | 380 | int | spotify embed height |

example/App.js

@@ -90,6 +90,8 @@ export class App extends Component {
 					position: (this.token() >= 1 ? 'right' : 'left'),
 					forwarded: true,
 					type: type,
+					theme: 'white',
+					view: 'list',
 					title: loremIpsum({ count: 2, units: 'words' }),
 					titleColor: this.getRandomColor(),
 					text: type === 'spotify' ? 'spotify:user:spotify:playlist:3rgsDhGHZxZ9sB9DQWQfuf' : loremIpsum({ count: 1, units: 'sentences' }),

src/MessageBox/MessageBox.js

@@ -93,6 +93,8 @@ export class MessageBox extends Component {
 								<SpotifyMessage
 									width={this.props.width}
 									height={this.props.height}
+									theme={this.props.theme}
+									view={this.props.view}
 									data={this.props.data}
 									uri={this.props.uri || this.props.text} />
 							}

src/SpotifyMessage/SpotifyMessage.js

@@ -4,13 +4,29 @@ import './SpotifyMessage.css';
 const classNames = require('classnames');
 
 export class SpotifyMessage extends Component {
+	toUrl() {
+		var formBody = [];
+		var data = {
+			uri: this.props.uri,
+			theme: this.props.theme,
+			view: this.props.view,
+		};
+		for (var property in data) {
+			var encodedKey = encodeURIComponent(property);
+			var encodedValue = encodeURIComponent(data[property]);
+			formBody.push(encodedKey + "=" + encodedValue);
+		}
+		formBody = formBody.join("&");
+		return formBody;
+	}
+
 	render() {
 		if (!this.props.uri)
 			return null;
 		return (
 			<div className="rce-mbox-spotify">
 				<iframe
-					src={"https://open.spotify.com/embed?uri=" + this.props.uri}
+					src={"https://open.spotify.com/embed?" + this.toUrl()}
 					width={this.props.width}
 					height={this.props.height}
 					frameBorder="0"
@@ -21,6 +37,9 @@ export class SpotifyMessage extends Component {
 }
 
 SpotifyMessage.defaultProps = {
+	uri: '',
+	theme: 'black',
+	view: 'list',
 	width: 300,
 	height: 380,
 }