Merge branch 'master' of github.com:KevinMidboe/seasonedShows

client/.babelrc

@@ -0,0 +1,8 @@
+/*
+	./.babelrc
+*/
+{
+	"presets":[
+		"es2015", "env", "react"
+	]
+}

client/app/components/App.jsx

@@ -0,0 +1,26 @@
+/*
+	./app/components/App.jsx
+	
+	<FetchData url={"https://apollo.kevinmidboe.com/api/v1/plex/playing"} />
+*/
+import React from 'react';
+import FetchData from './FetchData.js';
+import ListStrays from './ListStrays.jsx'
+import SearchRequest from './SearchRequest.jsx';
+
+export default class App extends React.Component {
+	render() {
+		return (
+			<div>
+				<div style={{textAlign: 'center'}}>
+					<h1>Welcome to Seasoned</h1>
+				</div>
+					<ListStrays />
+
+					<FetchData />
+
+					<SearchRequest />
+			</div>
+		);
+	}
+}

client/app/components/FetchData.js

@@ -0,0 +1,63 @@
+import React from 'react';
+
+class FetchData extends React.Component {
+	constructor(props){
+		super(props)
+		this.state = {
+			playing: [],
+      		hei: '1',
+      		intervalId: null,
+      		url: ''
+		}
+	}
+
+	componentDidMount(){
+		var that = this;
+		fetch("https://apollo.kevinmidboe.com/api/v1/plex/playing").then(
+			function(response){
+				response.json().then(function(data){
+					that.setState({
+						playing: that.state.playing.concat(data.video)
+					})
+				})
+			}
+		)
+	}
+
+	componentWillUnmount() {
+	   // use intervalId from the state to clear the interval
+	   clearInterval(this.state.intervalId);
+	}
+
+	getPlaying() {
+		if (this.state.playing.length != 0) {
+			return this.state.playing.map((playingObj) => {
+				if (playingObj.type === 'episode') {
+					console.log('episode')
+					return ([
+						<span>{playingObj.title}</span>,
+						<span>{playingObj.season}</span>,
+						<span>{playingObj.episode}</span>
+					])
+				} else if (playingObj.type === 'movie') {
+					console.log('movie')
+					return ([
+						<span>{playingObj.title}</span>
+					])
+				}
+			})
+		} else {
+			return (<span>Nothing playing</span>)
+		}
+	}
+
+	render(){
+			return(
+			<div className="FetchData">{this.getPlaying()}</div>
+		);
+	}
+
+	
+}
+
+export default FetchData;

client/app/components/ListStrays.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+
+class ListStrays extends React.Component {
+	constructor(props){
+		super(props)
+		this.state = {
+			strays: [],
+      		hei: '1'
+		}
+	}
+
+	componentDidMount(){
+		var that = this;
+		fetch('https://apollo.kevinmidboe.com/api/v1/seasoned/all').then(
+			function(response){
+				response.json().then(function(data){
+					// console.log(data);
+					that.setState({
+						strays: that.state.strays.concat(data)
+					})
+				})
+			}
+		)
+	}
+
+	render(){
+		return(
+			<div className="ListStrays">
+				{this.state.strays.map((strayObj) => {
+					if (strayObj.verified == 0) {
+						var url = "https://kevinmidboe.com/seasoned/verified.html?id=" + strayObj.id;
+						return ([
+							<span key={strayObj.id}>{strayObj.name}</span>,
+							<a href={url}>{strayObj.id}</a>
+						])
+					}
+				})}
+
+			</div>
+		)
+	}
+}
+
+export default ListStrays;

client/app/components/MovieObject.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+
+class MovieObject {
+	constructor(object) {
+		this.id = object.id;
+		this.title = object.title;
+		this.year = object.year;
+		// Check if object.poster != undefined
+		this.poster = object.poster;
+		this.matchedInPlex = object.matchedInPlex
+	}
+
+	requestExisting(id) {
+		console.log('Exists', id)
+	}
+
+	requestMovie(id) {
+		console.log(id);
+	}
+
+	getElement() {
+		var returnList = []
+
+		returnList.push(<p>{this.title} ({this.year})</p>)
+		
+		var posterPath, buttonState;
+		if (this.poster != undefined) {
+			posterPath = 'https://image.tmdb.org/t/p/w150' + this.poster;
+		}
+		returnList.push(<img src={posterPath}></img>);
+
+		if (this.matchedInPlex) {
+			returnList.push(<button onClick={() => this.requestExisting(this.id)}>Request anyway</button>)
+		} else {
+			returnList.push(<button onClick={() => this.requestMovie(this.id)}>Request</button>)
+		}
+
+		returnList.push(<br></br>);
+		return returnList;
+	}
+}
+
+export default MovieObject;

client/app/components/SearchRequest.jsx

@@ -0,0 +1,78 @@
+import React from 'react';
+
+import MovieObject from './MovieObject.jsx';
+
+class SearchRequest extends React.Component {
+	constructor(props){
+    super(props)
+    this.state = {
+      searchQuery: '',
+      items: []
+    }
+  }
+
+  componentDidMount(){
+  	var that = this;
+		fetch("https://apollo.kevinmidboe.com/api/v1/plex/request?query=interstellar")
+    .then(response => response.json())
+    .then(data => this.setState({
+        items: data
+      })
+    ).catch(err => console.error('Error load: ', err.toString()));
+  }
+
+  _handleKeyPress(e) {
+    if (e.key === 'Enter') {
+      this.fetchQuery();
+    }
+  }
+
+  fetchQuery() {
+    var query = 'https://apollo.kevinmidboe.com/api/v1/plex/request?query=' + this.state.searchQuery;
+
+      fetch(query)
+      .then(response => response.json())
+      .then(data => this.setState({
+          items: data
+        })
+      ).catch(err => console.error('Error submit: ', err.toString()));
+  }
+
+  printMovies(item) {
+    if (item != undefined) {
+      let a = new MovieObject(item);
+      return a.getElement();
+    }
+  }
+
+
+  handleChange(event){
+    this.setState({
+      searchQuery: event.target.value
+    });
+  }
+
+  render(){
+    return(
+      <div>
+        <input
+          type="text"
+          onKeyPress={(event) => this._handleKeyPress(event)}
+          onChange={event => this.handleChange(event)}
+          value={this.state.searchQuery}
+          />
+          <button onClick={() => this.fetchQuery()}>Search</button>
+          <br></br>
+
+          {this.state.searchQuery}
+          <br></br>
+            
+          {this.state.items.map((item) => this.printMovies(item))}
+      </div>
+    )
+  }
+
+	
+}
+
+export default SearchRequest;

client/app/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>seasoned Shows</title>
+  </head>
+  <body>
+    <div id="root">
+
+    </div>
+  </body>
+</html>

client/app/index.js

@@ -0,0 +1,15 @@
+/*
+* @Author: KevinMidboe
+* @Date:   2017-06-01 21:08:55
+* @Last Modified by:   KevinMidboe
+* @Last Modified time: 2017-06-01 21:34:32
+
+    ./client/index.js
+    which is the webpack entry file
+*/
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './components/App.jsx';
+
+ReactDOM.render(<App />, document.getElementById('root'));

client/package.json

@@ -5,9 +5,22 @@
   "repository": "https://github.com/KevinMidboe/seasonedShows",
   "author": "Kevin Midboe",
   "license": "MIT",
+  "scripts": {
+    "start": "webpack-dev-server"
+  },
   "dependencies": {
+    "html-webpack-plugin": "^2.28.0",
     "path": "^0.12.7",
+    "react": "^15.5.4",
+    "react-dom": "^15.5.4",
     "webpack": "^2.6.1",
     "webpack-dev-server": "^2.4.5"
+  },
+  "devDependencies": {
+    "babel-core": "^6.24.1",
+    "babel-loader": "^7.0.0",
+    "babel-preset-env": "^1.5.1",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-react": "^6.24.1"
   }
 }

client/webpack.config.js

@@ -0,0 +1,33 @@
+/*
+* @Author: KevinMidboe
+* @Date:   2017-06-01 19:09:16
+* @Last Modified by:   KevinMidboe
+* @Last Modified time: 2017-06-02 19:38:45
+*/
+
+const path = require('path');
+
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
+	template: './app/index.html',
+	filename: 'index.html',
+	inject: 'body'
+})
+
+module.exports = {
+	entry: './app/index.js',
+	output: {
+		path: path.resolve('dist'),
+		filename: 'index_bundle.js'
+	},
+	devServer: {
+		headers: {'Access-Control-Allow-Origin': '*'}
+	},
+	module: {
+		loaders: [
+				{ test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
+				{ test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/ }
+    	]
+  	},
+  	plugins: [HtmlWebpackPluginConfig]
+}

src/plex/convertStreamToMediaInfo.js

@@ -6,7 +6,9 @@ function convertStreamToMediaInfo(plexStream) {
 	mediaInfo.duration = plexStream.duration;
 	mediaInfo.height = plexStream.height;
 	mediaInfo.width = plexStream.width;
+	if (plexStream.bitrate) {
 		mediaInfo.bitrate = plexStream.bitrate;
+	}
 	mediaInfo.resolution = plexStream.videoResolution;
 	mediaInfo.framerate = plexStream.videoFrameRate;
 	mediaInfo.protocol = plexStream.protocol;

src/webserver/app.js

@@ -3,20 +3,23 @@ var express    = require('express');        // call express
 var app        = express();                 // define our app using express
 var bodyParser = require('body-parser'); 
 
-
 // this will let us get the data from a POST
 // configure app to use bodyParser()
 app.use(bodyParser.json());
 app.use(bodyParser.urlencoded({ extended: true }));
 
-var port = 31459;        // set our port
 
+var port = 31459;        // set our port
 var router = express.Router();
+var allowedOrigins = ['https://kevinmidboe.com', 'http://localhost:8080']
+
 
 router.use(function(req, res, next) {
-    // do logging
     console.log('Something is happening.');
-	res.setHeader('Access-Control-Allow-Origin', 'https://kevinmidboe.com');
+    var origin = req.headers.origin;
+    if (allowedOrigins.indexOf(origin) > -1) {
+		res.setHeader('Access-Control-Allow-Origin', origin);
+	}
     next();
 });