diff --git a/web-service/client/src/Streams.js b/web-service/client/src/Streams.js index 3d3e3bb86d2eda6baa42b394d66e4d72d8f21ca6..4156eb3a28edb22e0c034e0be24563cfc958a14c 100644 --- a/web-service/client/src/Streams.js +++ b/web-service/client/src/Streams.js @@ -13,17 +13,13 @@ const Streams = ({clearCookies}) => { const [thumbnails, setThumbnails] = useState([]); useEffect(() => { - const url = testData.thumbnail.map(i => i.video) - setThumbnails(url); + setThumbnails(testData.thumbnail); console.log('streams') }, []) const renderThumbnails = () => { - console.log("Piippiip") - thumbnails.map(index => { - console.log(index) - return <img height='150px' src={index} alt='piip'/> - }) + const photos = thumbnails.map(i => <div style={{'padding-top': '25px'}}><img alt='robots' src={i.video} width='150px'/><p style={{'margin': 'none'}}>viewers: {i.viewers}</p></div>) + return photos; } return( @@ -31,8 +27,8 @@ const Streams = ({clearCookies}) => { <h1>Streams component works!!</h1> <h2>Namibia here we come!</h2> <button onClick={clearCookies}>Logout</button> - <button onClick={renderThumbnails}>Show streams</button> - {/* <img height='150px' src={thumbnails[0]} alt='piip'/> */} + <br /> + {renderThumbnails()} </div> ) } diff --git a/web-service/client/src/seeds.js b/web-service/client/src/seeds.js index bfffe2c7aeb3a206dfb7b53f38157ba76e52ed61..587755ab9240d82d7689310c5fc97e536bdcc593 100644 --- a/web-service/client/src/seeds.js +++ b/web-service/client/src/seeds.js @@ -2,16 +2,19 @@ const testData = { thumbnail: [ { name: 'source1', - video: 'https://images.unsplash.com/photo-1558981285-6f0c94958bb6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80' + video: 'https://images.unsplash.com/photo-1558981285-6f0c94958bb6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80', + viewers: 9 }, { name: 'source2', - video: 'https://images.unsplash.com/photo-1558981420-c532902e58b4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1477&q=80' - }, + video: 'https://images.unsplash.com/photo-1558981420-c532902e58b4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1477&q=80', + viewers: 9 + }, { name: 'source3', - video: 'https://images.unsplash.com/photo-1558981285-6f0c94958bb6?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80' - } + video: 'https://images.unsplash.com/photo-1558981285-6f0c94958bb6?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80', + viewers: 9 + } ] }