How to use the react-native-track-player.STATE_PLAYING function in react-native-track-player

To help you get started, we’ve selected a few react-native-track-player examples, based on popular ways it is used in public projects.

github AbelTesfaye / dingo / src / BL / Services / event-handler-service.js View on Github external
//use this to save listened tracks into files
	console.log('data.type: ' + data.type);

	if (data.type == 'playback-error' && data.code == 'playback-source') {
		globals.isFetchingURL = true;
		_fetchURLs(true, 0, 0, () => TrackPlayer.play(), () => (globals.isFetchingURL = false));
	}

	if (data.type == 'playback-state') {
		// Update the UI with the new state
		console.log(JSON.stringify(data));

		if (data.state == TrackPlayer.STATE_NONE) {
			console.log('STATE_NONE');
		}
		if (data.state == TrackPlayer.STATE_PLAYING) {
			console.log('STATE_PLAYING');
			TrackPlayer.getCurrentTrack().then(currentTrackId => {
				TrackPlayer.getTrack(currentTrackId).then(track => {
					if (
						previousPlayingTrack.title !== track.title ||
						previousPlayingTrack.artist !== track.artist ||
						previousPlayingTrack.artwork !== track.artwork
					) {
						this.writeRecentTrack(
							new Date().getTime(),
							track.title,
							track.artist,
							track.artwork,
							track.videoId
						);
					}
github react-native-kit / react-native-track-player / example / react / screens / PlaylistScreen.js View on Github external
function getStateName(state) {
  switch (state) {
    case TrackPlayer.STATE_NONE:
      return "None";
    case TrackPlayer.STATE_PLAYING:
      return "Playing";
    case TrackPlayer.STATE_PAUSED:
      return "Paused";
    case TrackPlayer.STATE_STOPPED:
      return "Stopped";
    case TrackPlayer.STATE_BUFFERING:
      return "Buffering";
  }
}
github m-inan / react-native-music-app / src / scenes / Player / Record.js View on Github external
useEffect(() => {
		switch (state) {
			case TrackPlayer.STATE_PLAYING:
				Animated.loop(
					Animated.sequence([
						Animated.timing(spinValue, {
							toValue: 1,
							duration: 10000,
							easing: Easing.linear
						})
					])
				).start()
				break

			case TrackPlayer.STATE_PAUSED:
				spinValue.stopAnimation()
				spinValue.extractOffset()
				break
github Musicoin / app / components / Player.js View on Github external
<Icon.Ionicons
                          name={Platform.OS === 'ios' ? `ios-repeat` : 'md-repeat'}
                          size={Layout.isSmallDevice ? 20 : 40}
                          color={this.props.settings.repeat ? Colors.tintColor : Colors.fontColor}
                          style={styles.bigPlayerButton}
                      />
                    </TouchableOpacity>
                    <TouchableOpacity disabled={!this.state.previousAllowed} style={{marginHorizontal: 5}} onPress={() => this.playPreviousTrack()}>
                      <Icon.MaterialIcons
                          name="skip-previous"
                          size={Layout.isSmallDevice ? 40 : 80}
                          color={this.state.previousAllowed ? Colors.fontColor : Colors.disabled}
                          style={styles.bigPlayerButton}
                      />
                    </TouchableOpacity>
                    {this.state.playerState === TrackPlayer.STATE_PLAYING ?
                        <TouchableOpacity style={{marginHorizontal: 5}} onPress={() => this.pauseTrack()}>
                          <Icon.Ionicons
                              name={Platform.OS === 'ios' ? `ios-pause` : 'md-pause'}
                              size={Layout.isSmallDevice ? 60 : 120}
                              color={Colors.fontColor}
                              style={styles.bigPlayerButtonn}
                          />
                        </TouchableOpacity> :
                        <TouchableOpacity disabled={this.state.playerState === TrackPlayer.STATE_BUFFERING} style={{marginHorizontal: 5}} onPress={() => this.resumeTrack()}>
                          <Icon.Ionicons
                              name={Platform.OS === 'ios' ? `ios-play` : 'md-play'}
                              size={Layout.isSmallDevice ? 60 : 120}
                              color={this.state.playerState !== TrackPlayer.STATE_BUFFERING ? Colors.fontColor : Colors.disabled}
                              style={styles.bigPlayerButton}
                          />
                        </TouchableOpacity>}
github m-inan / react-native-music-app / src / scenes / Player / Slider.js View on Github external
useEffect(() => {
		clearInterval(interval)

		switch (state) {
			case STATE_READY:
				setPercent(0)
				setTime(0)
				break
			case TrackPlayer.STATE_PLAYING:
				interval = setInterval(async () => {
					if (!moveSlider) {
						const current = Math.floor(await TrackPlayer.getPosition())

						if (duration && current) {
							setTime(current)
							setPercent((current * 100) / Math.floor(duration))
						}
					}
				}, 100)
				break
		}
	}, [state, moveSlider])
github ThalKod / react-native-music-player / src / components / Controller.js View on Github external
return (
      <View style={styles.container}>
        <TouchableOpacity>
          <Image style={styles.controller} source={repeat}/>
        </TouchableOpacity>
        <TouchableOpacity onPress={skipToPrevious}>
          <Image style={styles.controller} source={previous}/>
        </TouchableOpacity>
        <TouchableOpacity onPress={togglePlayback} style={styles.button}>
          <LinearGradient
              start={{x: 0, y: 0.75}}
              end={{x: 1, y: 0.25}}
              colors={["#1CBE9E", "#53E3C7"]}
              style={ styles.gradient }
          >
            {playbackState === TrackPlayer.STATE_PLAYING ||
            playbackState === TrackPlayer.STATE_BUFFERING ? <AntDesign name="pause" size={moderateScale(50)} color={color.white} /> : <MaterialIcons name="play-arrow" size={moderateScale(50)} color={color.white} /> }
          </LinearGradient>
        </TouchableOpacity>
        <TouchableOpacity onPress={skipToNext}>
          <Image style={styles.controller} source={next}/>
        </TouchableOpacity>
        <TouchableOpacity>
          <Image style={styles.controller} source={random}/>
        </TouchableOpacity>
      </View>
  )
};
github react-native-kit / react-native-track-player / example / react / components / Player.js View on Github external
const [trackArtist, setTrackArtist] = useState("");
  useTrackPlayerEvents(["playback-track-changed"], async event => {
    if (event.type === TrackPlayer.TrackPlayerEvents.PLAYBACK_TRACK_CHANGED) {
      const track = await TrackPlayer.getTrack(event.nextTrack);
      setTrackTitle(track.title);
      setTrackArtist(track.artist);
      setTrackArtwork(track.artwork);
    }
  });

  const { style, onNext, onPrevious, onTogglePlayback } = props;

  var middleButtonText = "Play";

  if (
    playbackState === TrackPlayer.STATE_PLAYING ||
    playbackState === TrackPlayer.STATE_BUFFERING
  ) {
    middleButtonText = "Pause";
  }

  return (
    <View style={[styles.card, style]}>
      <Image style={styles.cover} source={{ uri: trackArtwork }} />
      <ProgressBar />
      <Text style={styles.title}>{trackTitle}</Text>
      <Text style={styles.artist}>{trackArtist}</Text>
      <View style={styles.controls}>
        <ControlButton title={"<<"} onPress={onPrevious} />
        <ControlButton title={middleButtonText} onPress={onTogglePlayback} />
        <ControlButton title={">>"} onPress={onNext} />
      </View>
github m-inan / react-native-music-app / src / components / Icons / Music.js View on Github external
useEffect(() => {
		switch (state) {
			case TrackPlayer.STATE_PLAYING:
				Animated.loop(
					Animated.sequence([
						Animated.timing(slide, {
							toValue: 5,
							duration: 1000
						}),
						Animated.timing(slide, {
							toValue: 0,
							duration: 1000
						})
					])
				).start()
				break

			case TrackPlayer.STATE_STOPPED:
			case TrackPlayer.STATE_PAUSED:
github PierreBresson / Thinkerview / app / context / index.js View on Github external
async playPause() {
      let state = await player.getState();
      switch (state) {
        case TrackPlayer.STATE_PAUSED:
          player.play()
          break;
        case TrackPlayer.STATE_PLAYING:
          player.pause()
          break;
        default:
          break;
      }
    }