search

doublesymmetry / react-native-track-player

A fully fledged audio module created for music apps. Provides audio playback, external media controls, background mode and more!
https://rntp.dev/
Apache License 2.0
3.25k stars 1.01k forks source link

SeekTo() Function Causes Continuous Playback Loop Issue on real device with usePlaybackState #2144

Closed Ritikchhipa5 closed 1 year ago

Ritikchhipa5 commented 1 year ago

Describe the Bug I am working on a music application that includes a feature for sliding through a song from start to end or selecting a specific time position within the song. For this purpose, I am using the seekTo() function. It works fine in the iOS simulator, but when I install the application on my iPhone 12, I encounter issues when the continuous playback loop starts as part of the usePlaybackState functionality. when i see console its look like

pausing playing pausing playing pausing playing pausing playing pausing playing pausing playing pausing playing

when i run in ios simulator its work fine.

Steps To Reproduce How can someone else reproduce this bug?


**Code To Reproduce**
/* eslint-disable react/react-in-jsx-scope */
import {useState} from 'react';
import {TouchableOpacity, View} from 'react-native';
import AudioRecorderPlayer, {
  PlayBackType,
} from 'react-native-audio-recorder-player';
import TrackPlayer, {Event} from 'react-native-track-player';
import {SliderContainer} from './SliderContainer';
import {Slider} from '@miblanchard/react-native-slider';
import {ICONS_SVG} from '../../assets/svg/icons/Icon';

const audioRecorderPlayer: AudioRecorderPlayer = new AudioRecorderPlayer();
export const IndividualComp = ({
  data,
  selectSong,
  originalSong = false,
  updateSliderValue,
  sliderValues,
}: any) => {
  const [isPlaying, setIsPlaying] = useState(false);

  // audioRecorderPlayer.setSubscriptionDuration(0.09);
  const onStartPlay = async () => {
    try {
      console.log(sliderValues);

      if (!originalSong) {
        const msg = await audioRecorderPlayer.startPlayer(
          originalSong ? data[0]?.url : data[0]?.uri,
        );
        await audioRecorderPlayer.seekToPlayer(sliderValues.rec0 * 1000);
        const volume = await audioRecorderPlayer.setVolume(1.0);
        audioRecorderPlayer.addPlayBackListener(async (e: PlayBackType) => {
          if (e.currentPosition >= sliderValues.rec1 * 1000) {
            setIsPlaying(false);
            await audioRecorderPlayer.stopPlayer();
            audioRecorderPlayer.removePlayBackListener();
          } else {
            setIsPlaying(!(e.currentPosition === e.duration));
          }
          return;
        });
      } else {
        // Check the current state of the track player

        await TrackPlayer.play();
        TrackPlayer.addEventListener(
          Event.PlaybackProgressUpdated,
          async (e: any) => {
            console.log(e);
            if (e.position >= sliderValues?.original1) {
              // await TrackPlayer.pause();
            }
          },
        );

        await TrackPlayer.seekTo(sliderValues?.original0);
        // // Seek to the specified original0 position
      }

      setIsPlaying(true);
    } catch (err) {
      console.log('startPlayer error', err);
    }
  };
  const onPausePlay = async (): Promise<void> => {

https://github.com/doublesymmetry/react-native-track-player/assets/33317390/9233e81c-a74c-42be-99ff-0179edeed825

    await audioRecorderPlayer.pausePlayer();
    setIsPlaying(false);
  };
  const onStopPlay = async (): Promise<void> => {
    if (!originalSong) {
      await audioRecorderPlayer.stopPlayer();
      audioRecorderPlayer.removePlayBackListener();
      setIsPlaying(false);
    } else {
      // await TrackPlayer.reset();
      TrackPlayer.pause();
      setIsPlaying(false);
    }
  };
  return (
    <View>
      {data.map((res: any, index: number) => {
        return (
          <View
            key={index}
            style={{
              backgroundColor: '#27132b',
              alignItems: 'center',
              justifyContent: 'center',
              flexDirection: 'row',
              borderRadius: 8,
              paddingVertical: 4,
            }}>
            {/* <View
              className={`flex gap-x-3 p-3 
              flex-row
              my-4
              items-center justify-between bg-[#E174E41A] rounded-xl flex-1 ${
                value === res.key
                  ? 'border-2 border-[#F780FB]'
                  : 'border-2 border-transparent'
              } `}> */}
            <View
              style={{
                width: '80%',
                height: 60,
                justifyContent: 'center',
                alignItems: 'flex-end',
                // backgroundColor: '#ff0000',
              }}>
              <SliderContainer sliderValue={[0, 10]}>
                <Slider
                  animateTransitions
                  containerStyle={{
                    width: 264 + 16,
                    height: 24,
                  }}
                  onSlidingComplete={value => {
                    updateSliderValue(
                      originalSong
                        ? {
                            original0: value[0],
                            original1: value[1],
                          }
                        : {rec0: value[0], rec1: value[1]},
                    );
                  }}
                  maximumValue={res.duration ?? 100}
                  thumbTintColor={'#6af0f3'}
                  //minimumTrackTintColor={'#ff0000'}
                  minimumTrackTintColor="#ffffff88"
                  minimumValue={1}
                  //thumbImage={Images.PLAY}
                  //thumbImage={Images.PLAY}

                  step={1}
                  thumbStyle={{
                    width: 12,
                    height: 52,
                    borderRadius: 8,
                    alignItems: 'center',
                  }}
                  //thumbImage={Images.PLAY}
                  thumbTouchSize={{
                    width: 12,
                    height: 48,
                  }}
                  //thumbTintColor="#1a9274"
                  trackStyle={{
                    backgroundColor: '#00000011',
                    borderRadius: 1,
                    height: 52,
                  }}
                />
              </SliderContainer>
            </View>
            <View
              style={{
                width: '20%',
                alignItems: 'center',
              }}>
              <TouchableOpacity
                onPress={() => {
                  if (isPlaying) {
                    onStopPlay();
                  } else {
                    selectSong(originalSong ? res?.url : res?.uri);
                    onStartPlay();
                    // setIsPlaying(true);
                  }
                }}>
                {isPlaying ? <ICONS_SVG.PAUSE /> : <ICONS_SVG.PLAY />}
              </TouchableOpacity>
            </View>
          </View>
        );
      })}
    </View>
  );
};

Replicable on Example App?

Can you replicate this bug in the [React Native Track Player Example App](https://github.com/doublesymmetry/react-native-track-player/tree/main/example)?

Environment Info: info Fetching system and libraries information... System: OS: macOS 13.5.2 CPU: (8) arm64 Apple M2 Memory: 100.03 MB / 16.00 GB Shell: version: "5.9" path: /bin/zsh Binaries: Node: version: 20.7.0 path: ~/.nvm/versions/node/v20.7.0/bin/node Yarn: version: 1.22.19 path: /opt/homebrew/bin/yarn npm: version: 9.8.1 path: ~/Desktop/project/LUKAS/zigZag/node_modules/.bin/npm Watchman: version: 2023.09.18.00 path: /opt/homebrew/bin/watchman Managers: CocoaPods: version: 1.13.0 path: /opt/homebrew/bin/pod SDKs: iOS SDK: Platforms:

puckey commented 1 year ago

Seemingly a duplicate of #2141