client gets the list of available streams

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": [

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} />
     )
 }
 

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>
     )
 }

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);
 	}