Hey monkey: I have made suggested changes still not getting any playable recordings I am missing something ! Can have a look on the pr requested a review !
2025-07-16 19726, 2025
monkey[m]
<mamanullah7[m]> "monkey: I cant find any document..." <- > <@m.amanullah7:matrix.org> monkey: I cant find any documentation regarding multi SVG path implementation i can only able to send single string and things are getting messy!... (full message at <https://matrix.chatbrainz.org/_matrix/media/v3/download/chatbrainz.org/PNCKeuCrJmOqihoEAHPvCusZ>)
2025-07-16 19742, 2025
monkey[m]
<rayyan_seliya123> "Hey monkey: I have made..." <- Is this on the BrainzPlayer side only? As in, do you you get a search response from the IA with the media, all of that working as expected?
2025-07-16 19704, 2025
mthax has quit
2025-07-16 19728, 2025
mthax joined the channel
2025-07-16 19725, 2025
rayyan_seliya123
<monkey[m]> "Is this on the BrainzPlayer side..." <- Yes monkey: the backend API is working as expected when I search for a track at the endpoint `/1/internet_archive/search` it returns a valid response including stream_urls and metadata
2025-07-16 19725, 2025
rayyan_seliya123
I think the issue is on the BrainzPlayer side also for a hardcoded one on my latest implementation the player works fine but for the API- fetched track playback does not occur
2025-07-16 19757, 2025
monkey[m]
OK, thanks for the details, will look.
2025-07-16 19725, 2025
rayyan_seliya123
monkey[m]: > <@monkey:chatbrainz.org> OK, thanks for the details, will look.
2025-07-16 19725, 2025
rayyan_seliya123
>
2025-07-16 19725, 2025
rayyan_seliya123
Sure !
2025-07-16 19744, 2025
monkey[m]
m.amanullah7: They don't really document making custom icon definitions because they rely on a "pro++" feature model which includes custom icons.
2025-07-16 19744, 2025
monkey[m]
But a little bit of retro-engineering goes a long way...
For reference, I took this svg (https://cdn.jsdelivr.net/gh/homarr-labs/dashboard…) and copied the value of each path's `d` attribute.... (full message at <https://matrix.chatbrainz.org/_matrix/media/v3/download/chatbrainz.org/FoNwGpGrJkSEJRZFfHTaSBel>)
2025-07-16 19725, 2025
monkey[m]
For my reference I looked into the fontawesome source code to see how they managed multiple paths (i know the spotify icon for example is multiple paths) https://github.com/FortAwesome/Font-Awesome/blob/…
You might need to play with the width and height values (the two numbers in the icon definition) to make it look the correct size compared to other icons. I leave that to you.
2025-07-16 19743, 2025
monkey[m]
rayyan_seliya123: So I'm looking at the IAPlayer component, and I think I see the issue. It seems like you are setting a `currentTrack` in the state, but then relying on componentDidUpdate to actually play the track. I think that looks incorrect at first glance. Why did you end up implementing it like that?
2025-07-16 19730, 2025
monkey[m]
Also, do you have an example handy of a media returned by the internet archive API, for testing?
2025-07-16 19718, 2025
monkey[m]
I mean by the /internet_archive/search endpoints, rather
2025-07-16 19703, 2025
rayyan_seliya123
<monkey[m]> "rayyan_seliya123: So I'm looking..." <- I moved the playback trigger to componentDidUpdate because React state updates are async calling play right after setState wasn’t reliable, as the audio element might not be ready yet. By triggering playback in componentDidUpdate when currentTrack changes, I ensure the DOM and refs are updated before playing. If there’s a preferred pattern, I’m happy to follow it! but
2025-07-16 19703, 2025
rayyan_seliya123
despite of following this pattern i was able to play a hardcoded track
2025-07-16 19738, 2025
rayyan_seliya123
monkey[m]: Sure let me start the server and provide you the results of the endpoint !
2025-07-16 19706, 2025
monkey[m]
I see. I'll try a couple of things, the first two being: 1. awaiting the this.audioRef.current.play() call; since it is async, it might be throwing an error silently and 2. setting this.audioRef.current.src programmatically instead of relying on the rendering order.
