Skip to content

Conversation

@inverse
Copy link
Contributor

@inverse inverse commented Sep 19, 2025

This change adds unique class names to the elements that display the currently playing media information. This makes it easier for extension developers to parse the DOM and understand what media is playing.

It'll allow us to do things like web-scrobbler/web-scrobbler#5612 easier since elements will be semantically available.

The following classes have been added:

  • media-player: The main player container.
  • player-cover-art: The cover art of the playing track.
  • song-title: The title of the playing track.
  • song-artist: The artist of the playing track.
  • song-album: The album of the playing track.
  • player-state-playing/player-state-paused: The state of the player.
  • elapsed-time: The elapsed time of the playing track.
  • total-duration: The total duration of the playing track.

I did test the changes locally against the extension using the tags and it did work. However not sure if what was changed is inline with how it should be structured.

This change adds unique class names to the elements that display the currently playing media information. This makes it easier for extension developers to parse the DOM and understand what media is playing.

The following classes have been added:
- `media-player`: The main player container.
- `player-cover-art`: The cover art of the playing track.
- `song-title`: The title of the playing track.
- `song-artist`: The artist of the playing track.
- `song-album`: The album of the playing track.
- `player-state-playing`/`player-state-paused`: The state of the player.
- `elapsed-time`: The elapsed time of the playing track.
- `total-duration`: The total duration of the playing track.
@vercel
Copy link

vercel bot commented Sep 19, 2025

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Preview Comments Updated (UTC)
feishin Ready Ready Preview Comment Sep 23, 2025 7:03pm

@jeffvli
Copy link
Owner

jeffvli commented Sep 20, 2025

I'm not opposed to this, but adding plain classes is a bit prone to breakage if these components ever get refactored.

At the very least I would say add them to an enum with comments on how they're being used, and then reference them in the components.

@inverse
Copy link
Contributor Author

inverse commented Sep 20, 2025

Thanks for the feedback . I moved the selectors to consts and added a node. Would there be anything else I should change?

@jeffvli jeffvli merged commit 8a3edb7 into jeffvli:development Sep 23, 2025
5 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants