diff --git a/web-service/client/src/Thumbnail.js b/web-service/client/src/Thumbnail.js index 373d112bec102721170f473ad6f525952febee9b..2e756d7fff3cfd0fd577e9967fa3958a3183e2c4 100644 --- a/web-service/client/src/Thumbnail.js +++ b/web-service/client/src/Thumbnail.js @@ -1,10 +1,29 @@ import React, {Component} from 'react'; -const Thumbnail = ({thumbnail}) => { - const renderThumbnails = async () => { +class Thumbnail extends Component { + constructor(props){ + super(props) + this.state = {imgSrc: ''} + } + + componentDidMount(){ + this.renderThumbnails() + } + + fetchThumbnails = async () => { + const jsonThumbnails = await fetch('http://localhost:8080/streams/') + const realThumbnails = await jsonThumbnails.json(); + console.log('REAL THUMBNAILS', realThumbnails) + return realThumbnails; + } + + renderThumbnails = async () => { let returnVal = "err"; - const encodedURI = encodeURIComponent(thumbnail) - console.log(encodedURI) + console.log(this.props) + const thumbs = await this.fetchThumbnails() + console.log(thumbs); + const encodedURI = encodeURIComponent(thumbs[0]) + console.log('ENCODED', encodedURI) try{ const someData = await fetch(`http://localhost:8080/stream/rgb?uri=${encodedURI}`) console.log(someData) @@ -15,18 +34,21 @@ const Thumbnail = ({thumbnail}) => { console.log('MYBLOB', myBlob) const objectURL = URL.createObjectURL(myBlob); console.log('URL ', objectURL); - return objectURL; + this.setState({imgSrc: objectURL}); } catch(err){ console.log('Kurwavaara:', err); } - console.log('RETURN VALUE', returnVal) - return returnVal; } - return ( - <div> - <img src={renderThumbnails()} alt="Hups"></img> - </div> - ) + render(){ + const val = this.state.imgSrc + return ( + <div> + {console.log('SRC', this.state.imgSrc)} + <img src={val} width='500px'></img> + <button onClick={() => this.renderThumbnails()}></button> + </div> + ) + } }