From dfc91f3ef575cbeb8780f1dc7f407e27f06ab64e Mon Sep 17 00:00:00 2001
From: Sami Spets <savasp@utu.fi>
Date: Fri, 27 Sep 2019 12:41:22 +0300
Subject: [PATCH] Thumbnails working
---
web-service/client/src/Streams.js | 14 +++++---------
web-service/client/src/seeds.js | 13 ++++++++-----
2 files changed, 13 insertions(+), 14 deletions(-)
diff --git a/web-service/client/src/Streams.js b/web-service/client/src/Streams.js
index 3d3e3bb86..4156eb3a2 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 bfffe2c7a..587755ab9 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
+ }
]
}
--
GitLab