React App

import React, {Component} from 'react';
import * as localForage from 'localforage';
import './App.css'

const urlAny = "http://demo0046512.mockable.io/stream/anycontent"
//const urlAny = "http://192.168.43.88:5000/screen"

// for display purposes a constant (stateless component) is enough, when some functionality is needed it's better to create a class
const DisplayImage = (props) => (
    <div>
        <img src={props.urlForImage} className='fullscreenVideo'>
        </img>
    </div>
)

const DisplayVideo = (props) => (
    <div>
        {props.urlForVideo
            ?
            <video className='fullscreenVideo' preload="auto" loop autoplay='true' controls>
                <source src={props.urlForVideo} type="video/mp4"/>
            </video>
            : null}
    </div>
)

class DisplayText extends Component {
    constructor(props) {
        super(props);
        this.state = {
            dataText: ''
        }
    }

    componentDidMount() {
        fetch(this.props.urlForText)
            .then(responseText => responseText.text())
            .then(responseText => {
                this.setState({
                    dataText: responseText
                })
            })
    }

    render() {
        return (
            <div>
                <div dangerouslySetInnerHTML={{__html: this.state.dataText}}></div>
            </div>
        )
    }
}

/* ----------------------Fetch & Display-----------------*/
class JsonFetcher extends Component {
    constructor(props) {
        super(props);

        this.state = {
            data: [],
        }
    }

    componentDidMount() {
        fetch(this.props.mainUrl)
            .then((responseJsonAnyUrl) => responseJsonAnyUrl.json())
            .then((responseJsonAnyUrl) => {
                this.setState({
                    jsonObject: responseJsonAnyUrl
                })
            })
    }

    interpretJson() {
        if (this.state.jsonObject !== undefined) {
            return this.state.jsonObject.zones.map((mainzoneObj, index) => (
                //console.log(this.state.jsonObject.zone),
                Object.values(mainzoneObj).map((zone, index2) => (
                    zone.map((zoneObj, index3) => {
                    //console.log(zoneObj)
                        switch (zoneObj.type) {
                            case 'text':
                                return(
                                    <DisplayText urlForText={zoneObj.url} key={index3}/>
                                    //sleep here during zoneObj.duration miliseconds
                                )
                              break;
                            case 'image':
                                return (
                                    <DisplayImage urlForImage={zoneObj.url} key={index3}/>
                                    //sleep here during zoneObj.duration miliseconds
                                )
                              break;
                            case 'video':
                                return(
                                    <DisplayVideo urlForVideo={zoneObj.url} key={index3}/>
                                    //sleep here during zoneObj.duration miliseconds
                                )
                              break;
                            default:
                                return <p>nothing found</p>
                        }
                    })
                ))
            ))
        }
    }
    render() {
        return (

            <div>
                <div>
                    {
                        this.interpretJson()
                    }
                </div>
                <div>
                    <PersistData fetchedObject={this.state.jsonObject}/>
                </div>

            </div>
        )
    }
}



/*----------------------- Store & Get persisted data-----------*/
class PersistData extends Component{
    constructor(props){
        super(props);
        this.state = {
            data: [],
        }
    }


/*[WIP]
    storeData(jsonObj){
        localForage.setItem('key', storableJsonObject )
    }

    getStoredData(){
        localForage.getItem('key')
            .then((promisedResult) => {
               this.setState({
                storedData: promisedResult
               })
                //console.log(this.state.storedData)
            })
    }
*/

    render(){
        return(
            <div>
                {console.log(this.props.fetchedObject)}
            </div>
        )
    }
}

/*----------------------- Main Component ------------------*/
class App extends Component {
    constructor() {
        super();
        this.state = {
            data: [],
        }
    }

    componentDidMount() {

    }

    render() {
        return (
            <div>
                <JsonFetcher mainUrl={urlAny}/>
            </div>
        )
    }
}
export default App;