From ee019f5674a8d37ae449318fc8fc7c16941be095 Mon Sep 17 00:00:00 2001 From: KevinMidboe Date: Thu, 31 Aug 2017 13:13:50 +0200 Subject: [PATCH 1/8] Now with new styling, still need to do cleanup, but added a big bulk of the grutt. --- client/app/components/MovieObject.jsx | 124 +++++++++++++++++++++----- 1 file changed, 100 insertions(+), 24 deletions(-) diff --git a/client/app/components/MovieObject.jsx b/client/app/components/MovieObject.jsx index 8f44073..acf4f5f 100644 --- a/client/app/components/MovieObject.jsx +++ b/client/app/components/MovieObject.jsx @@ -18,48 +18,124 @@ class MovieObject { } requestMovie(id) { - fetch('http://localhost:31459/api/v1/plex/request/' + id, { + fetch('https://apollo.kevinmidboe.com/api/v1/plex/request/' + id, { method: 'POST' }); } getElement() { - var movie_wrapper = { - display: 'flex', - alignContent: 'center', - width: '30%', - backgroundColor: '#ffffff', - height: '231px', - margin: '20px', - boxShadow: '0px 0px 5px 1px rgba(0,0,0,0.15)' + // TODO move this to separate files. + var resultItem = { + maxWidth: '95%', + margin: '0 auto', + minHeight: '230px' } var movie_content = { marginLeft: '15px' } - var movie_header = { - fontSize: '1.6' + 'em' + var resultTitle = { + color: 'black', + fontSize: '2em', } + var resultPoster = { + float: 'left', + zIndex: '3', + position: 'relative', + marginRight: '30px' + } - var posterPath = 'https://image.tmdb.org/t/p/w154' + this.poster; - var buttonState; - if (this.matchedInPlex) { - buttonState = ; + var resultPosterImg = { + border: '2px none', + borderRadius: '2px', + width: '150px' + } + + var buttons = { + paddingTop: '20px' + } + + var requestButton = { + color: '#e9a131', + marginRight: '10px', + background: 'white', + border: '#e9a131 2px solid', + borderRadius: '4px', + textAlign: 'center', + padding: '10px', + width: '100px', + float: 'left', + fontSize: '13px', + fontWeight: '800', + cursor: 'pointer' + } + + var tmdbButton = { + color: '#00d17c', + marginRight: '10px', + background: 'white', + border: '#00d17c 2px solid', + borderRadius: '4px', + textAlign: 'center', + padding: '10px', + width: '100px', + float: 'left', + fontSize: '13px', + fontWeight: '800', + cursor: 'pointer' + } + + var row = { + width: '100%' + } + + var itemDivider = { + width: '90%', + borderBottom: '1px solid grey', + margin: '2rem auto' + } + + // TODO set the poster image async by updating the dom after this is returned + 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 { - buttonState = ; + var posterPath = 'https://image.tmdb.org/t/p/w154' + this.poster; + } + var foundInPlex; + if (this.matchedInPlex) { + foundInPlex = ; + } else { + foundInPlex = ; } return ( -
- -
- {this.title} ({this.year}) -

- {buttonState} -

- {this.overview} +
+
+
+ +
+
+ {this.title} ({this.year}) +

+ {this.overview} +

+ + + + +
+ {foundInPlex} + +
+
+
+
+
) + } } From 5706c02a5df1268421f49e7d86690c45d0756141 Mon Sep 17 00:00:00 2001 From: KevinMidboe Date: Thu, 31 Aug 2017 13:14:57 +0200 Subject: [PATCH 2/8] Updated much of the surrounding styling for the request page, still need to ble cleaned. --- client/app/components/SearchRequest.jsx | 146 +++++++++++++++++++++--- 1 file changed, 129 insertions(+), 17 deletions(-) diff --git a/client/app/components/SearchRequest.jsx b/client/app/components/SearchRequest.jsx index 31cec28..809b917 100644 --- a/client/app/components/SearchRequest.jsx +++ b/client/app/components/SearchRequest.jsx @@ -10,7 +10,9 @@ class SearchRequest extends React.Component { // Constructor with states holding the search query and the element of reponse. this.state = { searchQuery: '', - responseMovieList: null + responseMovieList: null, + movieFilter: true, + tvshowFilter: false } this.URLs = { @@ -34,6 +36,9 @@ class SearchRequest extends React.Component { fetchQuery() { let url = this.URLs.request + this.state.searchQuery + if (this.state.tvshowFilter) { + url = url + '&type=tv' + } fetch(url) // Check if the response is ok @@ -80,34 +85,141 @@ class SearchRequest extends React.Component { return movie.getElement(); } + toggleFilter(filterType) { + if (filterType == 'movies') { + this.setState({ + movieFilter: !this.state.movieFilter + }) + console.log(this.state.movieFilter); + } + else if (filterType == 'tvshows') { + this.setState({ + tvshowFilter: !this.state.tvshowFilter + }) + console.log(this.state.tvshowFilter); + } + } + render(){ var body = { - fontFamily: "'Roboto', 'Open Sans', sans-serif", - display: 'inline-block' - + fontFamily: "'Open Sans', sans-serif", + backgroundColor: '#f7f7f7', + margin: 0, + padding: 0, + minHeight: '100%', + position: 'relative' } - var requestMovieList = { + + var backgroundHeader = { + width: '100%', + minHeight: '400px', + backgroundColor: '#011c23', + zIndex: 1, + position: 'absolute' + } + + + var requestWrapper = { + top: '300px', + width: '90%', + maxWidth: '1200px', + margin: 'auto', + paddingTop: '20px', + backgroundColor: 'white', + position: 'relative', + zIndex: '10', + boxShadow: '0 2px 10px black' + } + + var pageTitle = { display: 'flex', - flexWrap: 'wrap', + alignItems: 'center', justifyContent: 'center' } + var pageTitleSpan = { + color: 'white', + fontSize: '3em', + marginTop: '4vh', + marginBottom: '6vh' + } + + var box = { + width: '90%', + height: '50px', + maxWidth: '1200px', + margin: '0 auto' + } + + var container = { + verticalAlign: 'middle', + whiteSpace: 'nowrap', + position: 'relative', + display: 'flex', + justifyContent: 'center' + } + + var searchIcon = { + position: 'absolute', + marginLeft: '17px', + marginTop: '17px', + zIndex: '1', + color: '#4f5b66' + } + + var searchBar = { + width: '60%', + minWidth: '120px', + height: '50px', + background: '#ffffff', + border: 'none', + fontSize: '10pt', + float: 'left', + color: '#63717f', + paddingLeft: '45px', + borderRadius: '5px', + marginRight: '15px' + } + + var searchFilter = { + color: 'white', + fontSize: '1em', + paddingTop: '12px', + marginBottom: '12px', + marginLeft: '10px', + cursor: 'pointer' + } + return(
- this._handleQueryKeyPress(event)} - onChange={event => this.updateQueryState(event)} - value={this.state.searchQuery} - /> - -

+
+
+ Request new content +
-

-
- {this.state.responseMovieList} +
+
+ + this._handleQueryKeyPress(event)} + onChange={event => this.updateQueryState(event)} + value={this.state.searchQuery}/> + {this.toggleFilter('movies')}} + id="category_active">Movies + {this.toggleFilter('tvshows')}} + id="category_inactive">TV Shows +
+
+
+ +
+ {this.state.responseMovieList}
) From bd3d8f385b2c9d0c954a84aab3d45924e659ad13 Mon Sep 17 00:00:00 2001 From: KevinMidboe Date: Thu, 31 Aug 2017 13:16:06 +0200 Subject: [PATCH 3/8] Added link to font-awesome and google font api. Also set the margin: 0 for body. --- client/app/index.html | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/client/app/index.html b/client/app/index.html index 221152a..91f8c81 100644 --- a/client/app/index.html +++ b/client/app/index.html @@ -2,9 +2,11 @@ + + seasoned Shows - +
From e33840f1db8722225c6ee97250c6824556027c50 Mon Sep 17 00:00:00 2001 From: KevinMidboe Date: Sat, 2 Sep 2017 16:03:43 +0200 Subject: [PATCH 4/8] Commented out unused elements. --- client/app/components/App.jsx | 25 ++--- seasoned_api/src/plex/requestRepository.js | 123 --------------------- 2 files changed, 7 insertions(+), 141 deletions(-) delete mode 100644 seasoned_api/src/plex/requestRepository.js diff --git a/client/app/components/App.jsx b/client/app/components/App.jsx index c3f0826..edc567c 100644 --- a/client/app/components/App.jsx +++ b/client/app/components/App.jsx @@ -8,28 +8,17 @@ import FetchData from './FetchData.js'; import ListStrays from './ListStrays.jsx' import SearchRequest from './SearchRequest.jsx'; -import WebFont from 'webfontloader'; - -WebFont.load({ - google: { - families: ['Titillium Web:300,400,700', 'sans-serif'] - } -}); - var background = { - backgroundColor: '#fafafa' - } - export default class App extends React.Component { + //
+ //

Welcome to Seasoned

+ //
+ // + + // render() { return ( -
-
-

Welcome to Seasoned

-
- - - +
diff --git a/seasoned_api/src/plex/requestRepository.js b/seasoned_api/src/plex/requestRepository.js deleted file mode 100644 index a15a8d5..0000000 --- a/seasoned_api/src/plex/requestRepository.js +++ /dev/null @@ -1,123 +0,0 @@ -const assert = require('assert'); -const PlexRepository = require('src/plex/plexRepository'); -const plexRepository = new PlexRepository(); -const convertPlexToMovie = require('src/plex/convertPlexToMovie'); -const configuration = require('src/config/configuration').getInstance(); -const TMDB = require('src/tmdb/tmdb'); -const tmdb = new TMDB(configuration.get('tmdb', 'apiKey')); -var Promise = require('bluebird'); -var rp = require('request-promise'); - -const MailTemplate = require('src/plex/mailTemplate') - -var pythonShell = require('python-shell'); -const nodemailer = require('nodemailer'); - - -class RequestRepository { - - searchRequest(query, page, type) { - return Promise.resolve() - .then(() => tmdb.search(query, page, type)) - .then((tmdbMovies) => { - return Promise.resolve() - .then(() => plexRepository.searchMedia(query)) - .then((plexMedia) => { - return Promise.each(tmdbMovies, function(tmdbMovie) { - return Promise.each(plexMedia, function(plexMovie) { - if (tmdbMovie.title == plexMovie.title && tmdbMovie.year == plexMovie.year) { - tmdbMovie.matchedInPlex = true; - console.log(tmdbMovie.title + ' : ' + tmdbMovie.year); - } - return tmdbMovie; - }) - }) - }) - }) - .catch((error) => { - return error; - }); - } - - lookup(identifier, type = 'movie') { - if (type === 'movie') { type = 'movieInfo'} - else if (type === 'tv') { type = 'tvInfo'} - return Promise.resolve() - .then(() => tmdb.lookup(identifier, type)) - .then((tmdbMovie) => { - return Promise.resolve(plexRepository.searchMedia(tmdbMovie.title)) - .then((plexMovies) => { - for (var i = 0; i < plexMovies.length; i++) { - if (tmdbMovie.title === plexMovies[i].title && tmdbMovie.year === plexMovies[i].year) { - tmdbMovie.matchedInPlex = true; - return tmdbMovie; - } - } - }) - .catch((error) => { - return error; - }); - return tmdbMovie; - }); - } - - sendRequest(identifier) { - // TODO try a cache hit on the movie item - - tmdb.lookup(identifier).then(movie => { - console.log(movie.title) - - - // create reusable transporter object using the default SMTP transport - let transporter = nodemailer.createTransport({ - host: configuration.get('mail', 'host'), - port: 26, - ignoreTLS: true, - tls :{rejectUnauthorized: false}, - secure: false, // secure:true for port 465, secure:false for port 587 - auth: { - user: configuration.get('mail', 'user'), - pass: configuration.get('mail', 'password') - } - }); - - const mailTemplate = new MailTemplate(movie) - - // setup email data with unicode symbols - let mailOptions = { - // TODO get the mail adr from global location (easy to add) - from: 'MovieRequester ', // sender address - to: 'kevin.midboe@gmail.com', // list of receivers - subject: 'Download request', // Subject line - text: mailTemplate.toText(), - html: mailTemplate.toHTML() - }; - - // send mail with defined transport object - transporter.sendMail(mailOptions, (error, info) => { - if (error) { - return console.log(error); - } - console.log('Message %s sent: %s', info.messageId, info.response); - }); - - // var options = { - // args: [movie.title, movie.year, movie.poster] - // } - - // pythonShell.run('sendRequest.py', options, function (err, results) { - // if (err) throw err; - // // TODO Add error handling!! RequestRepository.ERROR - // // results is an array consisting of messages collected during execution - - // console.log('results: %j', results) - // }) - }) - - return Promise.resolve(); - - } - -} - -module.exports = RequestRepository; \ No newline at end of file From d77a4c6d9e5197c49daded3719f459765c9e030a Mon Sep 17 00:00:00 2001 From: KevinMidboe Date: Sat, 2 Sep 2017 16:30:02 +0200 Subject: [PATCH 5/8] Now it is a little messy with lots of css inline, but will clean and comment. Has now a working UI, needs more 404 handling of items. --- client/app/components/MovieObject.jsx | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/client/app/components/MovieObject.jsx b/client/app/components/MovieObject.jsx index acf4f5f..e2c87aa 100644 --- a/client/app/components/MovieObject.jsx +++ b/client/app/components/MovieObject.jsx @@ -1,6 +1,8 @@ import React from 'react'; +import glamorous from 'glamorous'; -require('../app.scss'); +// StyleComponents +import mediaResultItem from './styledComponents/mediaResultItem.jsx'; class MovieObject { constructor(object) { @@ -63,7 +65,7 @@ class MovieObject { borderRadius: '4px', textAlign: 'center', padding: '10px', - width: '100px', + minWidth: '100px', float: 'left', fontSize: '13px', fontWeight: '800', @@ -78,7 +80,7 @@ class MovieObject { borderRadius: '4px', textAlign: 'center', padding: '10px', - width: '100px', + minWidth: '100px', float: 'left', fontSize: '13px', fontWeight: '800', @@ -110,9 +112,12 @@ class MovieObject { style={requestButton}>+ Request; } + var themoviedbLink = 'https://www.themoviedb.org/movie/' + this.id + + return (
-
+
@@ -127,7 +132,7 @@ class MovieObject {
{foundInPlex} - +
From 72c4a43d2e45bcafc19c29c45d4fd622c87ec1f4 Mon Sep 17 00:00:00 2001 From: KevinMidboe Date: Sat, 2 Sep 2017 16:30:42 +0200 Subject: [PATCH 6/8] Also has a lot of inline css, but not the search type buttons have function, but not feedback. --- client/app/components/SearchRequest.jsx | 57 ++++++++++++++++++++++--- 1 file changed, 52 insertions(+), 5 deletions(-) diff --git a/client/app/components/SearchRequest.jsx b/client/app/components/SearchRequest.jsx index 809b917..32c3be9 100644 --- a/client/app/components/SearchRequest.jsx +++ b/client/app/components/SearchRequest.jsx @@ -21,6 +21,7 @@ class SearchRequest extends React.Component { } } + componentDidMount(){ var that = this; this.setState({responseMovieList: null}) @@ -130,7 +131,7 @@ class SearchRequest extends React.Component { backgroundColor: 'white', position: 'relative', zIndex: '10', - boxShadow: '0 2px 10px black' + boxShadow: '0 2px 10px grey' } var pageTitle = { @@ -192,26 +193,72 @@ class SearchRequest extends React.Component { cursor: 'pointer' } + var hvrUnderlineFromCenter = { + color: 'white', + fontSize: '1em', + paddingTop: '12px', + marginBottom: '12px', + marginLeft: '10px', + cursor: 'pointer', + display: 'inline-block', + verticalAlign: 'middle', + WebkitTransform: 'perspective(1px) translateZ(0)', + transform: 'perspective(1px) translateZ(0)', + boxShadow: '0 0 1px transparent', + position: 'relative', + overflow: 'hidden', + ':before': { + content: "", + position: 'absolute', + zIndex: '-1', + left: '50%', + right: '50%', + bottom: '0', + background: '#00d17c', + height: '2px', + WebkitTransitionProperty: 'left, right', + transitionProperty: 'left, right', + WebkitTransitionDuration: '0.3s', + transitionDuration: '0.3s', + WebkitTransitionTimingFunction: 'ease-out', + transitionTimingFunction: 'ease-out' + }, + ':hover:before': { + left: 0, + right: 0 + }, + 'focus:before': { + left: 0, + right: 0 + }, + 'active:before': { + left: 0, + right: 0 + } + } + return(
- Request new content + Request new movies or tv shows
+ this._handleQueryKeyPress(event)} onChange={event => this.updateQueryState(event)} value={this.state.searchQuery}/> - {this.toggleFilter('movies')}} id="category_active">Movies {this.toggleFilter('tvshows')}} id="category_inactive">TV Shows
From d4fdf6bdcffc8a38317d27defa89ed864c15f27b Mon Sep 17 00:00:00 2001 From: KevinMidboe Date: Sat, 2 Sep 2017 16:32:35 +0200 Subject: [PATCH 7/8] Updated babel node packages --- client/package.json | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/client/package.json b/client/package.json index 2a61ff8..de0ddca 100644 --- a/client/package.json +++ b/client/package.json @@ -12,16 +12,16 @@ "css-loader": "^0.28.4", "html-webpack-plugin": "^2.28.0", "path": "^0.12.7", - "react": "^15.5.4", + "react": "^15.6.1", "react-dom": "^15.5.4", "webfontloader": "^1.6.28", - "webpack": "^3.3.0", + "webpack": "^3.5.5", "webpack-dev-server": "^2.4.5" }, "devDependencies": { - "babel-core": "^6.24.1", - "babel-loader": "^7.0.0", - "babel-preset-env": "^1.5.1", + "babel-core": "^6.26.0", + "babel-loader": "^7.1.2", + "babel-preset-env": "^1.6.0", "babel-preset-es2015": "^6.24.1", "babel-preset-react": "^6.24.1" } From ebe09390d25c0b56f3ae154433c6821670273a39 Mon Sep 17 00:00:00 2001 From: KevinMidboe Date: Sat, 2 Sep 2017 16:32:57 +0200 Subject: [PATCH 8/8] Removed unused css loaders --- client/webpack.config.js | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/client/webpack.config.js b/client/webpack.config.js index 9d667c2..e6c383e 100644 --- a/client/webpack.config.js +++ b/client/webpack.config.js @@ -2,7 +2,7 @@ * @Author: KevinMidboe * @Date: 2017-06-01 19:09:16 * @Last Modified by: KevinMidboe -* @Last Modified time: 2017-06-02 19:38:45 +* @Last Modified time: 2017-09-02 15:51:52 */ const path = require('path'); @@ -27,14 +27,6 @@ module.exports = { loaders: [ { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }, { test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/ }, - { test: /\.scss$/, loader: 'css-loader', exclude: /node_modules/ }, - { test: /\.css$/, loader: 'style-loader!css!scss', exclude: /node_modules/ } - // { test: /\.css$/, loader: 'style-loader!css-loader!', exclude: /node_modules/ }, - // query: { - // presets: ['es2015'] - // } - - // { test: /\.css-loader$/, loader: 'style-loader!css-loader', exclude: /node_modules/ } ] }, plugins: [HtmlWebpackPluginConfig]