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.23k stars 999 forks source link

v2 [@next, rc-18 published] #662

Closed dcvz closed 3 years ago

dcvz commented 5 years ago

v2.0.0

Changes

To update run yarn add react-native-track-player@next. Breaking changes are outlined below:

Migrating to RN 0.60

We've migrated to AndroidX, please follow migration instructions provided by the ReactNative team.

Exports Updated

PR: https://github.com/react-native-kit/react-native-track-player/pull/654 has changed the default export to only include methods on the player. State, Capability, PitchAlgorithm, TrackType and Event are now exported as enums.

import TrackPlayer, { State, Capability, TrackType } from '...'

Progress Hook Renamed

The hook useTrackPlayerProgress() has been fixed and renamed: useProgress(). The return has also been modified: bufferedPosition is now buffered.

@returns { position, duration, ~buffered~ }
curiousdustin commented 4 years ago

I think this has been resolved on the v2 branch, but has not been included in a v2 release yet.

fernandopascoalbr commented 4 years ago

I set only Capability.Play and Capability.Pause into updateOptions but on ios is enabled prev and next buttons and any not work on IOS. Android works beautiful.

To solve this i modify node_modules/react-native-track-player/ios/RNTrackPlayer/Vendor/AudioPlayer/SwiftAudio/Classes/AudioPlayer.swift:

        if(item is RemoteCommandable){
            enableRemoteCommands(forItem: item)
        }

but not works, i need publish app at end of the month

VictorKolb commented 4 years ago

but not works, i need publish app at end of the month

Oh bro, I very understand you. Big problem in is this package one of best. No one alternatives.

curiousdustin commented 4 years ago

v2 is still a work in progress. The iOS lock screen controls issues should be resolved in v1.2.3. Can you try that?

danilocanalle commented 4 years ago

I was using 1.2.3, I Just updated here to v2, needed some modifications (goods ones) and all appears to be working well ...

Someone working here on v2? Are the docs going to be updated?

VictorKolb commented 4 years ago

v2 is still a work in progress. The iOS lock screen controls issues should be resolved in v1.2.3. Can you try that?

Thanks, v1.2.3 works like a charm!

mustafakemalelma commented 4 years ago

To update run yarn add react-native-trackplayer@next. Breaking changes are outlined below:

I believe there is a typo here. It should be yarn add react-native-track-player@next. There is one missing - between track and player.

deepgosalia1 commented 4 years ago

I was using 1.2.3, I Just updated here to v2, needed some modifications (goods ones) and all appears to be working well ...

Someone working here on v2? Are the docs going to be updated?

To answer your qustion, yes. I switched from v1.2 to v2 yesterday. Some issues that I was previously facing in v1 got solved significantly easy. The changes in the api are pretty good and resposive. Love this library! especially with Hooks!

@curiousdustin @cwilby The only issue I am facing with v2 right now is the even after enabling capabilities in my musicplayer.js file, the notification controls still dont perform any actions when pressed. stop, pause, next etc, nothing is working from notifications. I have added the all the required Event listeners in the service.js file. Am i missing something? here is the code.

Edit: I downgraded to v2.0.0-rc12 and the notification buttons seems to work sometimes. I believe they will stop working if you reload the app without pausing the music first.

To be clear, the songs streams and plays perfectly fine when i use the controls in the player.js file. Its only the notifications buttons. They wont even give any response. the buttons just arent getting pressed.

This is my service.js file.

import {Platform} from 'react-native';
import React from 'react';
module.exports = async function() {
  TrackPlayer.addEventListener(
    Event.RemotePlay,
    async () => await TrackPlayer.play(),
  );

  TrackPlayer.addEventListener(
    Event.RemotePause,
    async () => await TrackPlayer.pause(),
  );

  TrackPlayer.addEventListener(
    Event.RemoteStop,
    async () => await TrackPlayer.pause().then(() => TrackPlayer.destroy()),
  );

  TrackPlayer.addEventListener(
    Event.RemoteNext,
    async () => await TrackPlayer.skipToNext(),
  );

  TrackPlayer.addEventListener(Event.RemoteJumpForward, async ({position}) => {
    console.log('remote-jump-forward');
    if (position + 10 < (await TrackPlayer.getDuration())) {
      await TrackPlayer.seekTo(position + 10);
    } else {
      await TrackPlayer.seekTo(0);
    }
  });

  TrackPlayer.addEventListener(Event.RemoteJumpBackward, async ({position}) => {
    console.log('remote-jump-backward');
    if (position > 10) {
      await TrackPlayer.seekTo(position - 10);
    } else {
      await TrackPlayer.seekTo(0);
    }
  });

  TrackPlayer.addEventListener(Event.RemotePrevious, async () => {
    const time = await TrackPlayer.getPosition();

    if (time <= 3) {
      await TrackPlayer.skipToPrevious();
    } else {
      await TrackPlayer.seekTo(0);
    }
  });

  TrackPlayer.addEventListener(Event.RemoteSeek, async ({position}) =>
    await TrackPlayer.seekTo(position),
  );

  if (Platform.OS !== 'ios') {
    // this event type is not supported on iOS
    TrackPlayer.addEventListener(Event.RemoteDuck,async ({ducking}) => {
      await TrackPlayer.setVolume(ducking ? 0.5 : 1);
    });
  }
};

this is a snippet of my player.js file.

useEffect(() => {
    setup();
  }, []);

  const setup = async () => {
    TrackPlayer.setupPlayer()
      .then(async () => {
        await TrackPlayer.add({
          // url: 'https://sampleswap.org/mp3/artist/5101/Peppy--The-Firing-Squad_YMXB-160.mp3',
          url: (await storage()
            .ref('Songs/01 - Luck Aazma - www.downloadming.com.mp3')
            .getDownloadURL()).toString(),
          artwork:
            'https://cdn6.f-cdn.com/contestentries/1341746/29180739/5b14c65f43c08_thumb900.jpg',
        });
      })
      .then(console.log('track added.'));
      await TrackPlayer.updateOptions({
        stopWithApp:false,
        jumpInterval:10,
        capabilities: [
          Capability.Stop,
          Capability.Pause,
          Capability.Play,
          Capability.SeekTo,
          Capability.SkipToNext,
          Capability.SkipToPrevious
        ],
        compactCapabilities: [
          Capability.Stop,
          Capability.Pause,
          Capability.Play,
        ]
      });
  };

... more player UI and control stuff here...
mariamaneva commented 4 years ago

I'm trying this version, only one issue so far: TrackPlayer.remove(); was causing a crash before and it was fixed in the official release, however it is still causing a crash in v2.0

PaulExina commented 4 years ago

Hi, I am using "react-native-track-player": "^2.0.0-rc13" and I have the following error when using the useProgress hook : image

I didn't have this problem a week ago. Can you bring some light on this ?

rdgoutiyama commented 4 years ago

Hi, I am using "react-native-track-player": "^2.0.0-rc13" and I have the following error when using the useProgress hook : image

I didn't have this problem a week ago. Can you bring some light on this ?

same here

DavideValdo commented 4 years ago

Is it still needed to install react-native-swift and link it with deprecated react-native link? Does this mean that I cannot use this module if I have other modules requiring Swift 5.0?

EDIT: Tried with manually adding dummy.swift and project is working on emulator

fernandopascoalbr commented 3 years ago

The App crash when try to play that hls stream: https://23742406-channel-hls.ums.ustream.tv/playlist/directhls/channel/23742406/playlist.m3u8?sgn=0bb40779753db5b2e005ce78c261ba67cb554368

sometimes works only development mode

ShumGG commented 3 years ago

how i update from v1.2.3 to v.2.0.0? im using npm add react-native-trackplayer@next but doesnt work

atulmy commented 3 years ago

People facing issues try fixing to exact version in package.json:

"react-native-track-player": "2.0.0-rc13",

Following issues got fixed:

  1. Android crashing issue with v1.x of this library
  2. Android autolink now works with v2x
  3. iOS notification icons are now responsive

Wish this library had better momentum, seems very powerful. Hope the authors/maintainers will release new stable version of v2 soon.

ithustle commented 3 years ago

Any news about v2 release?

benjipott commented 3 years ago

@curiousdustin , the v2 seems to be more stable vs 1.2.7 on android, I think publish a new release of V2 and continue to contribute on this one is a good idea

dcvz commented 3 years ago

A new pre-release of v2 has been shipped! This release merged in #634 which landed a breaking change to this library.

All queue methods have been updating to work on indexes instead of id's. We want this library to support all kinds of apps -- and moving to be index based will allow us to better support applications who have long/endless queues and in the future to allow us to build a performant API around queue management.

Please try this out if you're able to and let us know of any issues you run into. You can tag any issues with the v2 label!

======

This library will be moving to a new organisation where we'll try to get this repository back into a healthy state. The first objective for now will be to get v2 to be stable and released. Past that we'll be working our way through issues, PR's and adding more functionality. See you online!

afkcodes commented 3 years ago

@dcvz Thanks man

benjipott commented 3 years ago

Really great news @dcvz, i will try it asap. I will try to contribute on it. Good job !

dcvz commented 3 years ago

A new pre-release of v2 has been shipped! The previous pre-release had some breaking changes for the queue.

This release removes the jumpInterval option and replaces it with separate ones for forwards and backwards to better support podcasting applications. You can now specify forwardJumpInterval and backwardJumpInterval (#1177).

We also finally added way to repeat the current track or queue. You can now use the setRepeatMode() method. Feel free to take a look at the example to see how to use it.

We also added a playback-metadata-received event to be notified of metadata changes on streams (#1175) thanks @puckey !

ithustle commented 3 years ago

@dcvz, I don't know if just me or not, but the app simply close on PlaybackTrackChanged event.

When I put the song a song playing, its fine but when I change the song, it crash.

My code:

useTrackPlayerEvents([Event.PlaybackTrackChanged], async event => {
        console.log('TrackChanged', event)
        try {
            if (event.type === Event.PlaybackTrackChanged && event.nextTrack != null) {
                console.log('Next: ', event.nextTrack) // It return 0
                const song_playing = await TrackPlayer.getTrack(event.nextTrack);
                setState({ ...state, song_playing });

                context.playing = song_playing.id;
                props.playingTrackSinalize(song_playing.id);
                setPlayingStatus(true);
                props.refreshAnAction();
            }

        } catch (error) { }
    })

It happened on iOS. On Android its fine.

dcvz commented 3 years ago

@dcvz, I don't know if just me or not, but the app simply close on PlaybackTrackChanged event.

When I put the song a song playing, its fine but when I change the song, it crash.

My code:

useTrackPlayerEvents([Event.PlaybackTrackChanged], async event => {
        console.log('TrackChanged', event)
        try {
            if (event.type === Event.PlaybackTrackChanged && event.nextTrack != null) {
                console.log('Next: ', event.nextTrack) // It return 0
                const song_playing = await TrackPlayer.getTrack(event.nextTrack);
                setState({ ...state, song_playing });

                context.playing = song_playing.id;
                props.playingTrackSinalize(song_playing.id);
                setPlayingStatus(true);
                props.refreshAnAction();
            }

        } catch (error) { }
    })

It happened on iOS. On Android its fine.

@ithustle can you share your project with me? which skip method are you using?

ithustle commented 3 years ago

@dcvz, sure. But before that, I'm using await TrackPlayer.skip(position) to change songs on the same queue. But if I choose a song that isn't in the same queue, I use 

await TrackPlayer.reset();
await TrackPlayer.add(track);

After that, tell me if necessary to share my project with you yet.

dcvz commented 3 years ago

@ithustle i still don't really understand where the crash happens. A test project would be useful here.

Does the example and the skipping work fine for you?

ithustle commented 3 years ago

@dcvz, I made a video to understand when (maybe) where the crash happens. The project has a quite of complexity and I thing to run it in you machine maybe a real fight.

https://user-images.githubusercontent.com/5114680/120372022-90ba0280-c30e-11eb-9d8f-c3a15a9e36d9.mp4

ithustle commented 3 years ago

On 1.2.7 version I used to use id of track as a string something like this: 72773936068, and in this version rc-15 is causing an issue.

ithustle commented 3 years ago

@dcvz, I made a video to understand when (maybe) where the crash happens. The project has a quite of complexity and I thing to run it in you machine maybe a real fight.

Simulator.Screen.Recording.-.iPhone.SE.2nd.generation.-.2021-06-01.at.19.20.35.mp4

I think this is caused because event.nextTrack on useTrackPlayerEvents is returning null when I selected a track outside of queue

ithustle commented 3 years ago

@dcvz, I found another issue... I think it is from module. On android, when I generated a signed apk for release and try to reproduce song, the app crash. Please, find the image below. On dev mode works fine... WhatsApp Image 2021-06-03 at 10 42 24

ithustle commented 3 years ago

@dcvz, @Guichaguri , @curiousdustin a little help will be really really appreciated

ithustle commented 3 years ago

PitchAlgorithm.Music return undefined ...

dcvz commented 3 years ago

@ithustle PitchAlgorithm.Music what platform is this? Is this what was causing your error on a release build?

ithustle commented 3 years ago

@ithustle PitchAlgorithm.Music what platform is this? Is this what was causing your error on a release build?

No, its not. This is another thing.

import { PitchAlgorithm } from 'react-native-track-player';
...
PitchAlgorithm.Music

It is in documentation https://react-native-track-player.js.org/documentation/#pitch-algorithm

I still unable to change tracks on diferents queue on iOS

guytepper commented 3 years ago

There's a mistake in the first post in this discussion, the npm module name is incorrect:

 yarn add react-native-trackplayer@next

It should be

yarn add react-native-track-player@next
dcvz commented 3 years ago

That's correct @guytepper! Thanks for reporting it, I've fixed it now.

ithustle commented 3 years ago

@dcvz, I made a video to understand when (maybe) where the crash happens. The project has a quite of complexity and I thing to run it in you machine maybe a real fight.

Simulator.Screen.Recording.-.iPhone.SE.2nd.generation.-.2021-06-01.at.19.20.35.mp4

@dcvz this issue is caused by TrackPlayer.reset() on iOS.

albert-kaygorodov commented 3 years ago

@dcvz can you pls bring playWhenReady: false back to .add method is ios/RNTrackPlayer/RNTrackPlayer.swift because the autoplay issue seems back after changing to indices from ids

dcvz commented 3 years ago

Thanks @ithustle and @albert-kaygorodov for bringing up these concerns. I’ll look into the issue and also check if we had a regression concerning playWhenReady.

ciaoben commented 3 years ago

I installed the next version but when trying to build it for the simulator I get:

Undefined symbols for architecture x86_64:
  "protocol descriptor for react_native_track_player.QueueManagerDelegate", referenced from:
      protocol conformance descriptor for react_native_track_player.RNTrackPlayerAudioPlayer : react_native_track_player.QueueManagerDelegate in react_native_track_player in libreact-native-track-player.a(RNTrackPlayerAudioPlayer.o)
  "react_native_track_player.Capability.mapToPlayerCommand(forwardJumpInterval: __C.NSNumber?, backwardJumpInterval: __C.NSNumber?, likeOptions: [Swift.String : Any]?, dislikeOptions: [Swift.String : Any]?, bookmarkOptions: [Swift.String : Any]?) -> react_native_track_player.RemoteCommand", referenced from:
      closure #2 (react_native_track_player.Capability) -> react_native_track_player.RemoteCommand in react_native_track_player.RNTrackPlayer.update(options: [Swift.String : Any], resolve: (Any?) -> (), reject: (Swift.String?, Swift.String?, Swift.Error?) -> ()) -> () in libreact-native-track-player.a(RNTrackPlayer.o)
ld: symbol(s) not found for architecture x86_64
clang: error: linker command failed with exit code 1 (use -v to see invocation)

Any hint?

dcvz commented 3 years ago

@ciaoben are you able to share the example project where this happens?

ciaoben commented 3 years ago

@dcvz sure!

Here is the repo: https://github.com/ciaoben/podcastory

Is very minimal (all in the App.js), you can start it with npm run ios

Let me know if I can help somehow.

ithustle commented 3 years ago

@dcvz, do you have any tips or workarround to temporary prevent or fix the issue that causing app crash (iOS) when .reset() or .stop() are fired?

dcvz commented 3 years ago

@ithustle PitchAlgorithm.Music what platform is this? Is this what was causing your error on a release build?

No, its not. This is another thing.

import { PitchAlgorithm } from 'react-native-track-player';
...
PitchAlgorithm.Music

It is in documentation https://react-native-track-player.js.org/documentation/#pitch-algorithm

I still unable to change tracks on diferents queue on iOS

PitchAlgorithm is only available in iOS. I've verified that it works for iOS.

======

Also I'm not sure what you mean by, can you give an example?

I still unable to change tracks on diferents queue on iOS

======

@dcvz, do you have any tips or workarround to temporary prevent or fix the issue that causing app crash (iOS) when .reset() or .stop() are fired?

This has been fixed now! I will release a rc-16 in an hour or so. Thanks for reporting that issue!

dcvz commented 3 years ago

@dcvz sure!

Here is the repo: https://github.com/ciaoben/podcastory

Is very minimal (all in the App.js), you can start it with npm run ios

Let me know if I can help somehow.

@ciaoben does the example project in the repo work for you?

dcvz commented 3 years ago

I've published a new pre-release rc16. Here's a what's new:

We'll keep an eye on this thread for more issues and try to fix them up. We appreciate any testing and reporting! If no issues arise, we'll prepare to release the official v2.0.0 soon 🚀

simonwhitaker commented 3 years ago

We'll keep an eye on this thread for more issues and try to fix them up. We appreciate any testing and reporting! If no issues arise, we'll prepare to release the official v2.0.0 soon 🚀

Thanks @dcvz!

I stumbled across one other issue and meant to generate a simple repro case, but it's still on my todo list. The issue was a warning that I was trying to interact with an unmounted component, and I think the issue was that in this useEffect block we're not returning a callback to set savedHandler.current back to undefined.

Sorry this is a bit vague - I'll have a crack at a simple repro case this evening.

andordavoti commented 3 years ago

@dcvz can you pls bring playWhenReady: false back to .add method is ios/RNTrackPlayer/RNTrackPlayer.swift because the autoplay issue seems back after changing to indices from ids

I'm also experiencing that on iOS it auto-plays when the app starts. Is there a way to disable this in v2?

On Android it gave me this error message once: Screenshot_1624738356

After that it crashes the app every time I open it. I will try to look more into it in the next few days, but I don't have anything more concrete for now.

t-tornado commented 3 years ago

The seekTo method still does not work on android. Is there any fix?

ithustle commented 3 years ago

The seekTo method still does not work on android. Is there any fix?

@t-tornado how did you use? Which version do you use? For me is working fine...

ithustle commented 3 years ago

@dcvz and @Guichaguri I think that buffer is not working on Android when streaming type is hls... Could you, please, confirm that?