Added rating and background to the class constructor. Added type variable to url when requesting a movie/show and added a notification agent. Now this page is also updated to support mobile formatting, when tilted it shows the background image instead of poster image.

client/app/components/MovieObject.jsx

@@ -1,8 +1,12 @@
 import React from 'react';
 
+import Notifications, {notify} from 'react-notify-toast';
+
 // StyleComponents
 import movieStyle from './styles/movieObjectStyle.jsx';
 
+var MediaQuery = require('react-responsive');
+
 class MovieObject {
 	constructor(object) {
 		this.id = object.id;
@@ -10,7 +14,9 @@ class MovieObject {
 		this.year = object.year;
 		this.type = object.type;
 		// Check if object.poster != undefined
+		this.rating = object.rating;
 		this.poster = object.poster;
+		this.background = object.background;
 		this.matchedInPlex = object.matchedInPlex;
 		this.summary = object.summary;
 	}
@@ -20,10 +26,12 @@ class MovieObject {
 	}
 
 	requestMovie() {
-		// fetch('https://apollo.kevinmidboe.com/api/v1/plex/request/' + id, {
-		fetch('http://localhost:31459/api/v1/plex/request/' + this.id + '?type='+this.type, {
+		// fetch('http://localhost:31459/api/v1/plex/request/' + this.id + '?type='+this.type, {
+		fetch('https://apollo.kevinmidboe.com/api/v1/plex/request/' + this.id + '?type='+this.type, {
 		  method: 'POST'
 		});
+
+		notify.show(this.title + ' requested!', 'success', 3000);
 	}
 
 	getElement() {
@@ -31,8 +39,10 @@ class MovieObject {
 		if (this.poster == null || this.poster == undefined) {
 			var posterPath = 'https://openclipart.org/image/2400px/svg_to_png/211479/Simple-Image-Not-Found-Icon.png'
 		} else {
-			var posterPath = 'https://image.tmdb.org/t/p/w154' + this.poster;
+			var posterPath = 'https://image.tmdb.org/t/p/w300' + this.poster;
 		}
+		var backgroundPath = 'https://image.tmdb.org/t/p/w640_and_h360_bestv2/' + this.background;
+
 		var foundInPlex;
 		if (this.matchedInPlex) {
 			foundInPlex = <button onClick={() => {this.requestExisting(this)}} 
@@ -47,15 +57,31 @@ class MovieObject {
 
 		return (
 		<div>
+		 	<Notifications />
 			<div style={movieStyle.resultItem} key={this.id}>
+				<MediaQuery minWidth={600}>
 				<div style={movieStyle.resultPoster}>
 					<img style={movieStyle.resultPosterImg} id='poster' src={posterPath}></img>
 				</div>
+				</MediaQuery>
 				<div>
-					<span style={movieStyle.resultTitle}>{this.title} ({this.year})</span>
-					<br></br>
-						<span>{this.summary}</span>
-					<br></br>
+					<MediaQuery minWidth={600}>
+						<span style={movieStyle.resultTitleLarge}>{this.title}</span>
+						<br></br>
+						<span style={movieStyle.yearRatingLarge}>Released: { this.year } | Rating: {this.rating}</span>
+						<br></br>
+						<span style={movieStyle.summary}>{this.summary}</span>
+						<br></br>
+					</MediaQuery>
+
+
+					<MediaQuery maxWidth={600}>
+						<img src={ backgroundPath } style={movieStyle.background}></img>
+						<span style={movieStyle.resultTitleSmall}>{this.title}</span>
+						<br></br>
+						<span style={movieStyle.yearRatingSmall}>Released: {this.year} | Rating: {this.rating}</span>
+					</MediaQuery>
+
 
 					<span className='imdbLogo'>
 					</span>
@@ -68,6 +94,9 @@ class MovieObject {
 					</div>
 				</div>
 			</div>
+			<MediaQuery maxWidth={600}>
+				<br></br>
+			</MediaQuery>
 			<div style={movieStyle.row}>
 				<div style={movieStyle.itemDivider}></div>
 			</div>