diff --git a/web-service/client/package.json b/web-service/client/package.json index e8f24e8198e46fee047812a536ab89dd4edc7bbb..13437031de83a85b785773b41a83edb42a1ab94c 100644 --- a/web-service/client/package.json +++ b/web-service/client/package.json @@ -12,7 +12,8 @@ "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --env=jsdom", - "eject": "react-scripts eject" + "eject": "react-scripts eject", + "buildFull": "react-scripts build && cp -r build ~/work/ftl/web-service/server" }, "browserslist": { "production": [ diff --git a/web-service/client/src/App.js b/web-service/client/src/App.js index ab02b2fecb02c8a29ad4d25bd3fbf73cfbf1299e..39eaaf6c949a5eff8033f1c49ab09df9eb375b5e 100644 --- a/web-service/client/src/App.js +++ b/web-service/client/src/App.js @@ -36,13 +36,14 @@ const App = () => { window.location.reload(); } - if(window.localStorage.getItem('token')){ - return ( - <Streams clearCookies={clearCookies}/> - ) - } + // if(window.localStorage.getItem('token')){ + // return ( + // + // ) + // } return ( - <Login handleLogin={handleLogin} /> + <Streams clearCookies={clearCookies}/> + // <Login handleLogin={handleLogin} /> ) } diff --git a/web-service/client/src/Streams.js b/web-service/client/src/Streams.js index 7c0f7ec878c65f7a80be3c6c9173a80356880ff3..e93fedd08e65cdc145740a547193817f3fca09e8 100644 --- a/web-service/client/src/Streams.js +++ b/web-service/client/src/Streams.js @@ -11,24 +11,40 @@ The user will be redirected to Stream.js file const Streams = ({clearCookies}) => { const [thumbnails, setThumbnails] = useState([]); - - useEffect(() => { - setThumbnails(testData.thumbnail); - console.log('streams') - }, []) - const renderThumbnails = () => { - const photos = thumbnails.map(i => <div style={{'paddingTop': '25px'}}><img alt='robots' src={i.video} width='150px'/><p style={{'margin': 'none'}}>viewers: {i.viewers}</p></div>) - return photos; + useEffect( async () => { + const jsonThumbnails = await fetch('/streams/'); + const realThumbnails = await jsonThumbnails.json(); + setThumbnails(realThumbnails); + console.log('THUMBNAILS', thumbnails) + }, []) + /** + * Fetch the thumbnails + * setInterval() fetch every 1 second + */ + + const fetchThumbnails = async () => { + const jsonThumbnails = await fetch('/streams/'); + const realThumbnails = await jsonThumbnails.json(); + return realThumbnails; } + const renderThumbnails = async () => { + const thumbs = await fetchThumbnails() + console.log('before', thumbnails) + setThumbnails((thumbs)); + console.log('after', thumbnails) + return thumbnails + } + + return( <div style={{'margin': 'auto', 'textAlign': 'center'}}> <h1>Streams component works!!</h1> <h2>Namibia here we come!</h2> <button onClick={clearCookies}>Logout</button> <br /> - {renderThumbnails()} + <button onClick={() => renderThumbnails()}></button> </div> ) } diff --git a/web-service/server/src/index.js b/web-service/server/src/index.js index 6dd821d19282cbe97dba5eaf131d39bf4226ccaa..47e78cfa85d86465bb81fd2471587bf2715f7a41 100644 --- a/web-service/server/src/index.js +++ b/web-service/server/src/index.js @@ -114,8 +114,10 @@ RGBDStream.prototype.subscribe = function() { } RGBDStream.prototype.pushFrames = function(latency, spacket, packet) { - if (spacket[1] & 0x1) this.depth = packet[4]; - else this.rgb = packet[4]; + if (packet[0] === 0){ + if (spacket[1] & 0x1) this.depth = packet[4]; + else this.rgb = packet[4]; + } console.log("Frame = ", packet[0], packet[1]); @@ -149,6 +151,7 @@ app.get('/streams', (req, res) => { app.get('/stream/rgb', (req, res) => { let uri = req.query.uri; if (uri_data.hasOwnProperty(uri)) { + uri_data[uri].peer.send("get_stream", uri, 10, 9, [Peer.uuid], uri); res.writeHead(200, {'Content-Type': 'image/jpeg'}); res.end(uri_data[uri].rgb); }