react-media-visualizer v1.1.1

react-media-visualizer

global media player component for react

Installation

npm install --save react-media-visualizer

or

yarn add react-media-visualizer

Usage

import React, { Component } from 'react'
import ReactMediaVisualizer from 'react-media-visualizer'
export default class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      playlist: [],
      playlistIsPlaying: false,
      currentSongIndex: 0,
      theme: 'soundcloud'
    }
    this.receiveStateUpdates = this.receiveStateUpdates.bind(this)
  }

  render() {
    return (
      <React.Fragment>
        <div className="content">
          Wrap the content of your webpage in here
        </div>
        <ReactMediaVisualizer
          playlist={this.state.playlist}
          receiveStateUpdates={this.receiveStateUpdates}
          playlistIsPlaying={this.state.playlistIsPlaying}
          theme={this.state.theme}
          currentSongIndex={this.state.currentSongIndex} />
      </React.Fragment>
    )
  }

  receiveStateUpdates(payload) {
    if (payload.theme) {
      switch (payload.theme) {
        case 'spotify':
          root.style.setProperty('--content-height', '82px')
          break
        case 'youtube':
          root.style.setProperty('--content-height', '72px')
          break
        case 'soundcloud':
          root.style.setProperty('--content-height', '48px')
          break
        default:
          break
      }
    }
    this.setState(payload)
  }
}

Properties

RMV contains these props, it is important to configure the application similar to the example.

License

MIT © danstans