Still a bit messy, but removed unsued sections and redid the naming schema for css items.
This commit is contained in:
@@ -3,154 +3,135 @@ import React from 'react';
|
|||||||
import Notifications, {notify} from 'react-notify-toast';
|
import Notifications, {notify} from 'react-notify-toast';
|
||||||
|
|
||||||
// StyleComponents
|
// StyleComponents
|
||||||
import movieStyle from './styles/movieObjectStyle.jsx';
|
import searchResultCSS from './styles/searchResult.jsx';
|
||||||
|
import buttonsCSS from './styles/buttons.jsx';
|
||||||
|
|
||||||
var MediaQuery = require('react-responsive');
|
var MediaQuery = require('react-responsive');
|
||||||
|
|
||||||
import RequestButton from './buttons/request_button.jsx';
|
|
||||||
|
|
||||||
import { fetchJSON } from './http.jsx';
|
import { fetchJSON } from './http.jsx';
|
||||||
|
|
||||||
import Interactive from 'react-interactive';
|
import Interactive from 'react-interactive';
|
||||||
|
|
||||||
|
|
||||||
class MovieObject {
|
class MovieObject {
|
||||||
constructor(object) {
|
constructor(object) {
|
||||||
this.id = object.id;
|
this.id = object.id;
|
||||||
this.title = object.title;
|
this.title = object.title;
|
||||||
this.year = object.year;
|
this.year = object.year;
|
||||||
this.type = object.type;
|
this.type = object.type;
|
||||||
// Check if object.poster != undefined
|
this.rating = object.rating;
|
||||||
this.rating = object.rating;
|
this.poster = object.poster;
|
||||||
this.poster = object.poster;
|
this.background = object.background;
|
||||||
this.background = object.background;
|
this.matchedInPlex = object.matchedInPlex;
|
||||||
this.matchedInPlex = object.matchedInPlex;
|
this.summary = object.summary;
|
||||||
this.summary = object.summary;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
requestExisting(movie) {
|
requestExisting(movie) {
|
||||||
console.log('Exists', movie);
|
console.log('Exists', movie);
|
||||||
}
|
}
|
||||||
|
|
||||||
requestMovie() {
|
requestMovie() {
|
||||||
// fetch('http://localhost:31459/api/v1/plex/request/' + this.id + '?type='+this.type, {
|
fetchJSON('https://apollo.kevinmidboe.com/api/v1/plex/request/' + this.id + '?type='+this.type, 'POST')
|
||||||
// fetch('https://apollo.kevinmidboe.com/api/v1/plex/request/' + this.id + '?type='+this.type, {
|
.then((response) => {
|
||||||
// method: 'POST'
|
console.log(response);
|
||||||
// });
|
notify.show(this.title + ' requested!', 'success', 3000);
|
||||||
fetchJSON('https://apollo.kevinmidboe.com/api/v1/plex/request/' + this.id + '?type='+this.type, 'POST')
|
})
|
||||||
.then((response) => {
|
.catch((e) => {
|
||||||
console.log(response);
|
console.error('Request movie fetch went wrong: '+ e);
|
||||||
})
|
})
|
||||||
|
|
||||||
notify.show(this.title + ' requested!', 'success', 3000);
|
}
|
||||||
}
|
|
||||||
|
|
||||||
invertButtonColors(event) {
|
getElement(index) {
|
||||||
const event_type = event.type;
|
const element_key = index + this.id;
|
||||||
if (event_type)
|
|
||||||
console.log('test')
|
|
||||||
console.log(event.type)
|
|
||||||
}
|
|
||||||
|
|
||||||
getElement(index) {
|
if (this.poster == null || this.poster == undefined) {
|
||||||
const element_key = index + this.id;
|
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/w300' + this.poster;
|
||||||
|
}
|
||||||
|
var backgroundPath = 'https://image.tmdb.org/t/p/w640_and_h360_bestv2/' + this.background;
|
||||||
|
|
||||||
// TODO set the poster image async by updating the dom after this is returned
|
var foundInPlex;
|
||||||
if (this.poster == null || this.poster == undefined) {
|
if (this.matchedInPlex) {
|
||||||
var posterPath = 'https://openclipart.org/image/2400px/svg_to_png/211479/Simple-Image-Not-Found-Icon.png'
|
foundInPlex = <Interactive
|
||||||
} else {
|
as='button'
|
||||||
var posterPath = 'https://image.tmdb.org/t/p/w300' + this.poster;
|
onClick={() => {this.requestExisting(this)}}
|
||||||
}
|
style={buttonsCSS.submit}
|
||||||
var backgroundPath = 'https://image.tmdb.org/t/p/w640_and_h360_bestv2/' + this.background;
|
focus={buttonsCSS.submit_hover}
|
||||||
|
hover={buttonsCSS.submit_hover}>
|
||||||
|
|
||||||
var foundInPlex;
|
<span>Request Anyway</span>
|
||||||
if (this.matchedInPlex) {
|
</Interactive>;
|
||||||
foundInPlex = <Interactive
|
} else {
|
||||||
as='button'
|
foundInPlex = <Interactive
|
||||||
hover={movieStyle.requestButton_hover}
|
as='button'
|
||||||
focus={movieStyle.requestButton_hover}
|
onClick={() => {this.requestMovie()}}
|
||||||
onClick={() => {this.requestExisting(this)}}
|
style={buttonsCSS.submit}
|
||||||
style={movieStyle.requestButton}>
|
focus={buttonsCSS.submit_hover}
|
||||||
|
hover={buttonsCSS.submit_hover}>
|
||||||
|
|
||||||
<span>Request Anyway</span>
|
<span>+ Request</span>
|
||||||
</Interactive>;
|
</Interactive>;
|
||||||
} else {
|
}
|
||||||
foundInPlex = <Interactive
|
|
||||||
as='button'
|
|
||||||
hover={movieStyle.requestButton_hover}
|
|
||||||
focus={movieStyle.requestButton_hover}
|
|
||||||
onClick={() => {this.requestMovie()}}
|
|
||||||
onMouseOver={() => {this.invertButtonColors(event)}}
|
|
||||||
style={movieStyle.requestButton}>
|
|
||||||
|
|
||||||
<span>+ Request</span>
|
if (this.type === 'movie')
|
||||||
</Interactive>;
|
var themoviedbLink = 'https://www.themoviedb.org/movie/' + this.id
|
||||||
}
|
else if (this.type === 'show')
|
||||||
|
var themoviedbLink = 'https://www.themoviedb.org/tv/' + this.id
|
||||||
|
|
||||||
if (this.type === 'movie')
|
// TODO go away from using mediaQuery, and create custom resizer
|
||||||
var themoviedbLink = 'https://www.themoviedb.org/movie/' + this.id
|
return (
|
||||||
else if (this.type === 'show')
|
<div key={element_key}>
|
||||||
var themoviedbLink = 'https://www.themoviedb.org/tv/' + this.id
|
<Notifications />
|
||||||
|
|
||||||
|
<div style={searchResultCSS.container} key={this.id}>
|
||||||
|
<MediaQuery minWidth={600}>
|
||||||
|
<div style={searchResultCSS.posterContainer}>
|
||||||
|
<img style={searchResultCSS.posterImage} id='poster' src={posterPath}></img>
|
||||||
|
</div>
|
||||||
|
<span style={searchResultCSS.title_large}>{this.title}</span>
|
||||||
|
<br></br>
|
||||||
|
<span style={searchResultCSS.stats_large}>Released: { this.year } | Rating: {this.rating}</span>
|
||||||
|
<br></br>
|
||||||
|
<span style={searchResultCSS.summary}>{this.summary}</span>
|
||||||
|
<br></br>
|
||||||
|
</MediaQuery>
|
||||||
|
|
||||||
|
<MediaQuery maxWidth={600}>
|
||||||
|
<img src={ backgroundPath } style={searchResultCSS.backgroundImage}></img>
|
||||||
|
<span style={searchResultCSS.title_small}>{this.title}</span>
|
||||||
|
<br></br>
|
||||||
|
<span style={searchResultCSS.stats_small}>Released: {this.year} | Rating: {this.rating}</span>
|
||||||
|
</MediaQuery>
|
||||||
|
|
||||||
// TODO add request button class
|
<div style={searchResultCSS.buttons}>
|
||||||
return (
|
{foundInPlex}
|
||||||
<div key={element_key}>
|
|
||||||
<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>
|
|
||||||
<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>
|
|
||||||
|
|
||||||
|
<a href={themoviedbLink}>
|
||||||
|
<Interactive
|
||||||
|
as='button'
|
||||||
|
hover={buttonsCSS.info_hover}
|
||||||
|
focus={buttonsCSS.info_hover}
|
||||||
|
style={buttonsCSS.info}>
|
||||||
|
|
||||||
<MediaQuery maxWidth={600}>
|
<span>Info</span>
|
||||||
<img src={ backgroundPath } style={movieStyle.background}></img>
|
</Interactive>
|
||||||
<span style={movieStyle.resultTitleSmall}>{this.title}</span>
|
</a>
|
||||||
<br></br>
|
</div>
|
||||||
<span style={movieStyle.yearRatingSmall}>Released: {this.year} | Rating: {this.rating}</span>
|
</div>
|
||||||
</MediaQuery>
|
|
||||||
|
|
||||||
|
<MediaQuery maxWidth={600}>
|
||||||
|
<br />
|
||||||
|
</MediaQuery>
|
||||||
|
|
||||||
<span className='imdbLogo'>
|
<div style={searchResultCSS.dividerRow}>
|
||||||
|
<div style={searchResultCSS.itemDivider}></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
|
||||||
</span>
|
}
|
||||||
|
|
||||||
<div style={movieStyle.buttons}>
|
|
||||||
{foundInPlex}
|
|
||||||
<a href={themoviedbLink}>
|
|
||||||
<Interactive
|
|
||||||
as='button'
|
|
||||||
hover={movieStyle.tmdbButton_hover}
|
|
||||||
focus={movieStyle.tmdbButton_hover}
|
|
||||||
style={movieStyle.tmdbButton}>
|
|
||||||
|
|
||||||
<span>Info</span>
|
|
||||||
</Interactive>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<MediaQuery maxWidth={600}>
|
|
||||||
<br></br>
|
|
||||||
</MediaQuery>
|
|
||||||
<div style={movieStyle.row}>
|
|
||||||
<div style={movieStyle.itemDivider}></div>
|
|
||||||
</div>
|
|
||||||
</div>)
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export default MovieObject;
|
export default MovieObject;
|
||||||
Reference in New Issue
Block a user