Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[4.1.1] updateMetadataForTrack accidentally clears artwork on Android #2287

Open
DennisdeWitNL opened this issue Apr 3, 2024 · 13 comments
Open
Labels

Comments

@DennisdeWitNL
Copy link

Describe the Bug
Since RC07, updateMetadataForTrack correctly keeps the title and artist, but it clears the artwork on Android. The artwork is an empty square. I do not have this problem with RC06, so it seems the bug was introduced with RC07. I had an issue about this one already: #2103, but I can not reopen the issue and now this issue is off your radar, which is a bad thing.

We are developing for web already, while the artwork in Android isn't even working as intended. It should be fixed, not be stale for a year.

Steps To Reproduce
Use the updateMetadataForTrack function. Even if you use a constant as artwork URL, it still clears the artwork on Android. It retains the title and artist correctly. On iOS, everything works as expected.

Code To Reproduce
I used the following code:

  const updateMetadata = async () => {

    const artwork = 'https://domain.tld/redacted.jpg';
    let songDataFunction = await fetchNowPlaying();
    console.log("Updating metadata")
    let currentTrack = await TrackPlayer.getActiveTrackIndex();
    if (currentTrack == null) {
      return;
    } else {
      TrackPlayer.updateMetadataForTrack(currentTrack, {
        artist: songDataFunction.song_artist,
        title: songDataFunction.song_title,
        artwork: artwork
      });
    }
  }

This code keeps the artist and title, but it doesn't show the artwork, even though it is an constant. It just renders empty. I do not have this issue with RC06 or lower.

Replicable on Example App?
Yes.

Environment Info:
Paste the results of npx react-native info

info Fetching system and libraries information...
System:
  OS: macOS 14.4
  CPU: (14) arm64 Apple M3 Max
  Memory: 200.06 MB / 36.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 21.6.2
    path: /opt/homebrew/bin/node
  Yarn: Not Found
  npm:
    version: 10.2.4
    path: /opt/homebrew/bin/npm
  Watchman:
    version: 2024.01.22.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.15.2
    path: /usr/local/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.4
      - iOS 17.4
      - macOS 14.4
      - tvOS 17.4
      - visionOS 1.1
      - watchOS 10.4
  Android SDK: Not Found
IDEs:
  Android Studio: 2023.2 AI-232.10227.8.2321.11479570
  Xcode:
    version: 15.3/15E204a
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 11.0.22
    path: /usr/bin/javac
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.0.0
    wanted: 18.0.0
  react-native:
    installed: 0.72.12
    wanted: ^0.72.4
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: false

(node:31204) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)

Paste the exact react-native-track-player version you are using

    "react-native-track-player": "^4.1.1"

Real device? Or simulator?
On a real device and emulator. Tested on Samsung S22.

What OS are you running?
Android 13 / Android 14

@lovegaoshi
Copy link
Contributor

i can see this in example by just commenting out title and duration in onUpdateCurrentTrackMetadata(). it only messes up when replacing currentIndex Tracks.
though I dont see the same behavior for onUpdateNotificationMetadata() though, so my suggestion is check TP.currentIndex and use updateNowPlayingMetadata if === current index. otherwise I can do this in the js TP module, unless someone wants to try figuring this out in KA
i see one uses
notificationManager.overrideAudioItem = overrideAudioItem
the other uses
player.notificationManager.overrideMetadata(track.toAudioItem())
which should be the same thing

@DennisdeWitNL
Copy link
Author

Thanks, @lovegaoshi , I will try that tomorrow. Although I am not sure how to get the TP.currentIndex? What is the function I should use for that? :)

@lovegaoshi
Copy link
Contributor

lovegaoshi commented Apr 3, 2024 via email

@DennisdeWitNL
Copy link
Author

@lovegaoshi Unfortunately, both functions render the same issue.

This is the code I have used

      TrackPlayer.updateNowPlayingMetadata({
        artist: streamValues.song_artist,
        title: streamValues.song_title,
        artwork: streamValues.song_artwork,
      });

@lovegaoshi
Copy link
Contributor

well, i actually dont see any problem on my end if artist and title are also set. so you're probably looking at a different issue than what i observed, unless you have a repo from the example i'm at a dead end.
my repo for the bug i described:
https://github.com/lovegaoshi/react-native-track-player/tree/bug-notif-artwork

@DennisdeWitNL
Copy link
Author

Hi @lovegaoshi, yes. We tried this before. You can change the title to ‘foo’, and the artist to ‘foo’, too.

If these fields stay the same, the artwork blanks out. When title and artist are regenerated, there’s no problem. What comes to my mind for now is making a workaround that checks if the new info is the same as the old info, before invoking the updateMetadata command.

@lovegaoshi
Copy link
Contributor

hmm. still cant reproduce. see if that repo above bugs on your end.

@DennisdeWitNL
Copy link
Author

DennisdeWitNL commented Apr 4, 2024

So, for now I have worked my way around this issue, by reading the previous issue once again.

Still needs to be solved, but at least I can work around it now.

@lovegaoshi
Copy link
Contributor

lovegaoshi commented Apr 4, 2024 via email

@DennisdeWitNL
Copy link
Author

are you sure you are running tje example app following tje instructions in that folder?

On Thu, Apr 4, 2024, 12:38 AM DennisdeWitNL @.> wrote: So, for now I have worked my way around with this code: const updateMetadata = async (streamValues) => { const activeTrack = await TrackPlayer.getActiveTrack(); if (activeTrack?.artist != streamValues.artist && activeTrack?.title != streamValues.title) { console.log("Updating metadata") const currentTrack = await TrackPlayer.getActiveTrackIndex(); if (currentTrack == null) { // getStreamInfoAndTriggerInitTrackPlayer(); } else { TrackPlayer.updateMetadataForTrack(currentTrack, { artist: streamValues.artist, title: streamValues.title, artwork: streamValues.artwork, }); } } else { console.log("doing nothing") } } It seems it clears out the artwork when the title and artist are still the same. So I will only update the metadata when all new info is available. That works fine. :) Still needs to be solved, but at least I can work around it now. — Reply to this email directly, view it on GitHub <#2287 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AZMOVVUASIQ55SYJTE5ZHP3Y3T7OTAVCNFSM6AAAAABFVUZR4WVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDAMZWGQYTENJSGI . You are receiving this because you were mentioned.Message ID: @. com>

Will check tomorrow. I have had a busy evening, sorry. For my info: did you change something ‘under the hood’ of RNTP that might be on influence of the bug?

@Vashiru
Copy link

Vashiru commented Apr 20, 2024

Having the same issue as Dennis using a local file:

const fetchMetadata = async () => {
  await fetch('https://fr2.ah.fm/stats?sid=1&json=1')
    .then(data => data.json())
    .then(async obj => {
      if (obj.songtitle && typeof obj.songtitle === 'string') {
        const currentTrack = await TrackPlayer.getActiveTrackIndex();
        if (currentTrack !== undefined) {
          TrackPlayer.updateMetadataForTrack(currentTrack, {
            title: obj.songtitle,
            artwork: require('./assets/afterhours-fm.jpg'),
          });
        }
      }
    })
    .catch(function (error) {
      console.log(error);
    });
};

This is being ran every 5 seconds through:

  useEffect(() => {
    const intervalId = setInterval(() => fetchMetadata(), 5000);

    return () => clearInterval(intervalId);
  }, []);

Initially the artwork will load, but as soon as updateMetadataForTrack gets called again, the image disappears.

@DennisdeWitNL
Copy link
Author

DennisdeWitNL commented Apr 20, 2024

@Vashiru Because you are firing the command every few seconds and the artist and title did not change yet.

You could first check if the artist and title ar not the same as the values the activeTrack already have. If they are the same, do nothing. If they are not the same, then update the values.

   const activeTrack = await TrackPlayer.getActiveTrack();

    if (activeTrack?.title != obj?.songtitle) {

          TrackPlayer.updateMetadataForTrack(currentTrack, {
            title: obj.songtitle,
            artwork: require('./assets/afterhours-fm.jpg'),
          });

     } else {
      console.log("Not updating metadata yet");

   }
  }

Something like that. That's how I worked around this problem.

@Vashiru
Copy link

Vashiru commented Apr 20, 2024

I think I've found a workaround just now:

If I call both updateMetadataForTrack and updateNowPlayingMetadata, my artwork will actually stay:

TrackPlayer.updateMetadataForTrack(currentTrack, {
  title: obj.songtitle,
  artwork: require('./assets/afterhours-fm.jpg'),
});
TrackPlayer.updateNowPlayingMetadata({
  title: obj.songtitle,
  artwork: require('./assets/afterhours-fm.jpg'),
});

Edit: but adding your code in as an optimization is probably a good idea.

Edit2: The issue is specifically in updateMetadataForTrack, if I don't set artwork there, but always call it in updateNowPlayingMetadata, it doesn't disappear either.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants