haldarmahesh

import React, { Component } from 'react'
import ThemeContext from './context/ThemeContext';

export default class Body extends Component {
  render() {
    return (
      <ThemeContext.Consumer>
        {
          (theme) => (
            <div className="body" style={{color: theme.fontColor, background: theme.bodybg}}>

haldarmahesh

import React, { Component } from 'react';
import Header from './Header.component';
import Body from './Body.component';
import ThemeContext from './context/ThemeContext';
import {themeConfig} from './context/ThemeContext';

class App extends Component {

  constructor() {
    super();

haldarmahesh

import React from 'react';
import lightLogo from './../assets/medium_light.png';
import darkLogo from './../assets/medium_dark.png';
export const themeConfig = {
    light: {
        headerBg: '#F7B30C',
        fontColor: 'black',
        bodybg: 'white',
        logo: lightLogo
    },

haldarmahesh

render() {
  <div>
     <PlayHeader>
       <Status/>
       <VolumeBar/>
       <SeekBar/>
    </PlayHeader>
   </div>
}

haldarmahesh

componentDidMount() {
 if (this.props.modules) {
            this.props.modules.forEach(function (module) {
                module(Highcharts);
            });
        }
        // Set container which the chart should render to.
        this.chart = new Highcharts[this.props.type || "Chart"](
            this.props.container, 
            this.props.options

haldarmahesh

componentWillUnmount() {
  this.chart.destroy();
  this.resetLocalStorage();
  this.clearSession();
}

haldarmahesh

componentWillReceiveProps(nextProps) {
  if (this.props.status !== nextProps.status) {
    this.setState({
      status: nextProps.status
    });
  }
}

haldarmahesh

componentDidUpdate(prevProps, prevState) {

}

haldarmahesh

componentWillUpdate(nextProps, nextState) {
}

haldarmahesh

shouldComponentUpdate(nextProps, nextState) {
  let shouldUpdate = this.props.status !== nextProps.status;
  return shouldUpdate;
}