feat: add semantic selectors for now-playing media (#1138)

* feat: add semantic selectors for now-playing media

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.

---------

Co-authored-by: google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com>

src/shared/constants/playback-selectors.ts

@@ -0,0 +1,14 @@
+// Defines the selectors used to identify playback-related elements in the UI.
+// Can be used by browser extensions for accessing meta data around currently playing media.
+
+export const PlaybackSelectors = {
+    elapsedTime: 'elapsed-time',
+    mediaPlayer: 'media-player',
+    playerCoverArt: 'player-cover-art',
+    playerStatePaused: 'player-state-paused',
+    playerStatePlaying: 'player-state-playing',
+    songAlbum: 'song-album',
+    songArtist: 'song-artist',
+    songTitle: 'song-title',
+    totalDuration: 'total-duration',
+} as const;