haldarmahesh

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

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

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

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

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, { 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

class ContraMusicPlayer extends React.Component
constructor(props) {
  super(props);
  this.state = {
    volume: 70,
    status: 'pause'
  }
}

haldarmahesh

static getDerivedStateFromProps(props, state) {
  if (state.value !== props.value) {
      return {
        derivedValue: deriveValueFromProps(props),
        mirroredProp: props.value
      }
     }
  // when null is returned no update is made to the state
  return null;
}

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