KevinMidboe/seasonedShows
1
0
Fork 0
Code Issues 20 Pull Requests 2 Packages Projects Releases 8 Wiki Activity

Merge pull request #3 from KevinMidboe/react_setup

Browse Source 
React setup
This commit is contained in:
Kevin
2017-06-02 12:08:07 +02:00
committed by GitHub
parent b16d2ab60d d9721555dd
commit b9851aee3f
11 changed files with 1281 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
client/.babelrc Normal file
View File

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

23
client/app/components/App.jsx Normal file
View File

@@ -0,0 +1,23 @@
/*
./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'
export default class App extends React.Component {
render() {
return (
<div>
<div style={{textAlign: 'center'}}>
<h1>Welcome to Seasoned</h1>
</div>
<ListStrays />
<FetchData />
</div>
);
}
}

58
client/app/components/FetchData.js Normal file
View File

@@ -0,0 +1,58 @@
import React from 'react';
class FetchData extends React.Component {
constructor(props){
super(props)
this.state = {
imgUrls: [],
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){
console.log(data.size);
that.setState({
imgUrls: that.state.imgUrls.concat(data.video)
})
console.log(data.video.title);
})
}
)
}
componentWillUnmount() {
// use intervalId from the state to clear the interval
clearInterval(this.state.intervalId);
}
getPlaying() {
console.log('Should not reach')
// Need callback to work
// Should try to clear out old requests to limit mem use
}
render(){
return(
<div className="FetchData">
{this.state.imgUrls.map((imgObj) => {
return ([
<span>{imgObj.title}</span>,
<span>{imgObj.season}</span>,
<span>{imgObj.episode}</span>,
]);
})}
</div>
);
}
}
export default FetchData;

45
client/app/components/ListStrays.jsx Normal file
View File

@@ -0,0 +1,45 @@
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;
console.log(url);
return ([
<span key={strayObj.id}>{strayObj.name}</span>,
<a href={url}>{strayObj.id}</a>
])
}
})}
</div>
)
}
}
export default ListStrays;

12
client/app/index.html Normal file
View File

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

15
client/app/index.js Normal file
View File

@@ -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'));

13
client/package.json
View File

@@ -5,9 +5,22 @@
"repository": "https://github.com/KevinMidboe/seasonedShows", "repository": "https://github.com/KevinMidboe/seasonedShows",
"author": "Kevin Midboe", "author": "Kevin Midboe",
"license": "MIT", "license": "MIT",
"scripts": {
"start": "webpack-dev-server"
},
"dependencies": { "dependencies": {
"html-webpack-plugin": "^2.28.0",
"path": "^0.12.7", "path": "^0.12.7",
"react": "^15.5.4",
"react-dom": "^15.5.4",
"webpack": "^2.6.1", "webpack": "^2.6.1",
"webpack-dev-server": "^2.4.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-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1"
} }
} }

33
client/webpack.config.js Normal file
View File

@@ -0,0 +1,33 @@
/*
* @Author: KevinMidboe
* @Date: 2017-06-01 19:09:16
* @Last Modified by: KevinMidboe
* @Last Modified time: 2017-06-01 22:11:51
*/
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]
}

1072
client/yarn.lock
View File

File diff suppressed because it is too large Load Diff

4
src/plex/convertStreamToMediaInfo.js
View File

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

9
src/webserver/app.js
View File

@@ -2,7 +2,9 @@
var express = require('express'); // call express var express = require('express'); // call express
var app = express(); // define our app using express var app = express(); // define our app using express
var bodyParser = require('body-parser'); var bodyParser = require('body-parser');
var fs = require('fs')
var morgan = require('morgan')
var path = require('path')
// this will let us get the data from a POST // this will let us get the data from a POST
// configure app to use bodyParser() // configure app to use bodyParser()
@@ -10,6 +12,8 @@ app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true })); app.use(bodyParser.urlencoded({ extended: true }));
var port = 31459; // set our port var port = 31459; // set our port
var accessLogStream = fs.createWriteStream(path.join(__dirname, 'access.log'), {flags: 'a'})
var logger = morgan('combined', {stream: accessLogStream});
var router = express.Router(); var router = express.Router();
@@ -17,6 +21,9 @@ router.use(function(req, res, next) {
// do logging // do logging
console.log('Something is happening.'); console.log('Something is happening.');
res.setHeader('Access-Control-Allow-Origin', 'https://kevinmidboe.com'); res.setHeader('Access-Control-Allow-Origin', 'https://kevinmidboe.com');
logger(req, res, function (err) {
if (err) return done(err)
});
next(); next();
}); });