Can not see the position and duration on iOS read device

[jimluo123]

Describe the Bug When I play songs on a real device, there is a widget there but I can not see the duration and position on it.

Steps To Reproduce How can someone else reproduce this bug? Play sound on background and see the widget in notification center.

Code To Reproduce Please provide a simple code example that allows others to replicate the bug.

Replicable on Example App?

Environment Info:

"expo": "~49.0.5",
"react": "18.2.0",
"react-native": "0.72.4",
"react-native-track-player": "^4.0.0-rc09",

iOS real device

How I can Help What can you do to help resolve this? I can provide screenshot about the problem Have you investigated the underlying JS or Swift/Android code causing this bug? No Can you create a Pull Request with a fix? I can not

[dcvz]

@jimluo123 did you try the example app and tried your track there? It seems some of the setup hasn't been done correctly.

[jimluo123]

@jimluo123 did you try the example app and tried your track there? It seems some of the setup hasn't been done correctly.

yeah, I have try to run example but crash at pod install. I actually set up with progress update interval and Event.PlaybackProgressUpdated but it still did not work on real device and simulator.

export const SetupService = async () => {
  await setupPlayer({ autoHandleInterruptions: true });
  await TrackPlayer.updateOptions({
    // Media controls capabilities

    android: {
      // This is the default behavior
      appKilledPlaybackBehavior:
        AppKilledPlaybackBehavior.StopPlaybackAndRemoveNotification,
    },
    alwaysPauseOnInterruption: true,
    capabilities: [
      Capability.Play,
      Capability.Pause,
      Capability.SkipToNext,
      Capability.SkipToPrevious,
      Capability.SeekTo,
      Capability.Stop,
    ],

    // Capabilities that will show up when the notification is in the compact form on Android
    compactCapabilities: [
      Capability.Play,
      Capability.Pause,
      Capability.JumpBackward,
      Capability.JumpForward,
      Capability.SkipToNext,
      Capability.SkipToPrevious,
    ],
    notificationCapabilities: [],
    progressUpdateEventInterval: 2,
    // Icons for the notification on Android (if you don't like the default ones)
  });
};

export async function PlaybackService() {
  TrackPlayer.addEventListener(Event.RemotePause, () => {
    console.log("Event.RemotePause");
    TrackPlayer.pause();
  });

  TrackPlayer.addEventListener(Event.RemotePlay, () => {
    console.log("Event.RemotePlay");
    TrackPlayer.play();
  });

  TrackPlayer.addEventListener(Event.RemoteNext, () => {
    console.log("Event.RemoteNext");
    TrackPlayer.skipToNext();
  });

  TrackPlayer.addEventListener(Event.RemotePrevious, () => {
    console.log("Event.RemotePrevious");
    TrackPlayer.skipToPrevious();
  });

  TrackPlayer.addEventListener(Event.RemoteJumpForward, async (event) => {
    console.log("Event.RemoteJumpForward", event);
    TrackPlayer.seekBy(event.interval);
  });

  TrackPlayer.addEventListener(Event.RemoteJumpBackward, async (event) => {
    console.log("Event.RemoteJumpBackward", event);
    TrackPlayer.seekBy(-event.interval);
  });

  TrackPlayer.addEventListener(Event.RemoteSeek, (event) => {
    console.log("Event.RemoteSeek", event);
    TrackPlayer.seekTo(event.position);
  });

  TrackPlayer.addEventListener(Event.RemoteDuck, async (event) => {
    console.log("Event.RemoteDuck", event);
  });

  TrackPlayer.addEventListener(Event.PlaybackQueueEnded, (event) => {
    console.log("Event.PlaybackQueueEnded", event);
  });

  TrackPlayer.addEventListener(Event.PlaybackActiveTrackChanged, (event) => {
    console.log("Event.PlaybackActiveTrackChanged", event);
  });

  TrackPlayer.addEventListener(Event.PlaybackPlayWhenReadyChanged, (event) => {
    console.log("Event.PlaybackPlayWhenReadyChanged", event);
  });

  TrackPlayer.addEventListener(Event.PlaybackState, (event) => {
    console.log("Event.PlaybackState", event);
  });

  TrackPlayer.addEventListener(Event.RemoteStop, () => {
    console.log("Event.RemoteStop");
  });

  TrackPlayer.addEventListener(Event.PlaybackProgressUpdated, (event) => {
    console.log("Event.PlaybackProgressUpdated", event);
  });

  TrackPlayer.addEventListener(
    Event.PlaybackMetadataReceived,
    async ({ title, artist }) => {
      const activeTrack = await TrackPlayer.getActiveTrack();
      TrackPlayer.updateNowPlayingMetadata({
        artist: [title, artist].filter(Boolean).join(" - "),
        title: activeTrack?.title,
        artwork: activeTrack?.artwork,
      });
    }
  );
}

[dcvz]

Please try to first run the example library, if it fails there feel free to reopen the issue with more information about the track being loaded and what you've tried so far.