media_player_wrapper/app/Streaming.js

A React Native wrapper for live audio streaming.

import React, { Component } from "react";
import {
  Text,
  View,
  StyleSheet,
  TouchableHighlight,
  Slider,
  Dimensions,
  Platform
} from "react-native";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import nowPlayingReducer from "./reducers";
import RNMediaPlayer from "./medialibrary";
import { setIsPlaying, setPlaybackState, setVolume } from "./actions";

// Update the live streaming URL from below
const filePath = "http://listen.radionomy.com/abc-jazz";

// Initial nowPlaying Image
const artUrl =
  "https://s-media-cache-ak0.pinimg.com/736x/21/f5/d5/21f5d58ecffe88dc01323b6a7462eebf--cellphone-wallpaper-wallpaper-for-iphone.jpg";

let width = Dimensions.get("window").width;

// Streaming Component
class Streaming extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    // Getting values from props
    let {
      setIsPlaying,
      setPlaybackState,
      setVolume,
      nowPlayingReducer
    } = this.props;

    //Displaying the play, pause, forward and backwards buttons
    return (
      <View style={styles.container}>
        <TouchableHighlight onPress={this.play.bind(this)}>
          <Text style={styles.welcome}>Play</Text>
        </TouchableHighlight>
        <TouchableHighlight onPress={this.pause.bind(this)}>
          <Text style={styles.welcome}>Pause</Text>
        </TouchableHighlight>
        <TouchableHighlight onPress={this.rewind.bind(this)}>
          <Text style={styles.welcome}>Rewind</Text>
        </TouchableHighlight>
        <TouchableHighlight onPress={this.fastForward.bind(this)}>
          <Text style={styles.welcome}>Forward</Text>
        </TouchableHighlight>
        <Slider
          onSlidingComplete={value => {
            if (value !== nowPlayingReducer.volume) {
              RNMediaPlayer.setVolume(value);
            }
          }}
          value={nowPlayingReducer.volume}
          style={styles.slider}
        />

        <Text style={styles.welcome}>
          Status: {nowPlayingReducer.playbackState}
        </Text>
      </View>
    );
  }

  componentDidMount() {
    this.initalize();
  }

  initalize() {
    let { setPlaybackState, setVolume, nowPlayingReducer } = this.props;

    // Getting the current volume value from the reducer
    let volume = nowPlayingReducer.volume;

    RNMediaPlayer.startOverWithURL(filePath);
    RNMediaPlayer.subscribeOnConnect(() => {
      if (Platform.OS === "android") {
        if (global.firstRun) {
          // alert("hena")
          this.play();
          global.firstRun = false;
        }
      } else {
        this.play();
      }
    });

    // Getting the volume
    RNMediaPlayer.getVolume(value => {
      console.log("RNMediaPlayer.getVolume", value);
      // this.setState({ volume });
      setVolume(value);

      if (this.props.onVolumeChanged !== undefined)
        this.props.onVolumeChanged(value);
    });

    // Getting the playback state
    RNMediaPlayer.getPlaybackState(state => {
      console.log("getPlaybackState");
      this.onPlaybackStateChanged(state);
    });

    // Subscribe to trigger a method when the play/pause state changes
    RNMediaPlayer.subscribeOnPlaybackStateChanged(this.onPlaybackStateChanged);

    // Subscribe to trigger a method when the volume changes
    RNMediaPlayer.subscribeOnVolumeChanged(value => {
      if (value !== volume) {
        if (this.props.onVolumeChanged !== undefined)
          this.props.onVolumeChanged(value);
        setVolume(value);
      }
    });
  }

  // player methods
  play() {
    RNMediaPlayer.play(filePath, null, "Radio", "Radio", artUrl);
    let { setIsPlaying, setPlaybackState } = this.props;

    setPlaybackState("Playing");
    setIsPlaying(true);
  }

  pause() {
    RNMediaPlayer.pause();

    let { setIsPlaying, setPlaybackState } = this.props;
    setPlaybackState("Paused");
    setIsPlaying(false);
  }

  rewind() {
    RNMediaPlayer.rewind();
  }

  fastForward() {
    RNMediaPlayer.forward();
  }

  togglePlayPause() {
    if (this.props.isPlaying) {
      this.pause();
    } else {
      this.play();
    }
  }

  setVolume = value => {
    console.log("setVolume", value);
    this.props.setVolume(value);
    RNMediaPlayer.setVolume(value);
  };

  onPlaybackStateChanged = state => {
    // console.log("onPlaybackStateChanged " + state);

    let { setIsPlaying, setPlaybackState } = this.props;
    if (state === 1) {
      setPlaybackState("Playing");
      setIsPlaying(true);
    } else {
      setPlaybackState("Paused");
      setIsPlaying(false);
    }
  };
}

// Redux methods
function mapStateToProps(state) {
  return {
    nowPlayingReducer: state.nowPlayingReducer
  };
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators(
    {
      setIsPlaying,
      setPlaybackState,
      setVolume
    },
    dispatch
  );
}

// Applying styles to layout the component
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F5FCFF"
  },
  welcome: {
    fontSize: 20,
    textAlign: "center",
    margin: 10
  },
  slider: {
    marginTop: 20,
    marginLeft: 20,
    marginRight: 20,
    width: width - 20
  }
});

// Export the Streaming Compoent
export default connect(mapStateToProps, mapDispatchToProps)(Streaming);