It stopped working after altering 'user.js'

[luccooflinosiii]

Hello,

Everytime I try to add a user.js file, the app stops working entirely. I tried redownloading it, but it still doesn't show up on OBS or Chrome. It only started showing up when I re-installed Windows. Here's the log:

2024-11-10T13:41:38.323788Z  WARN current_song2::config: Couldn't find a single config
2024-11-10T13:41:38.323816Z  WARN current_song2::config: Didn't find any config at any location, creating default one at default location
2024-11-10T13:41:38.334513Z  INFO current_song2: Binding on 127.0.0.1:48457
2024-11-10T13:41:38.335653Z  INFO actix_server::builder: starting 12 workers
2024-11-10T13:41:38.335677Z  INFO actix_server::server: Actix runtime found; starting in Actix runtime
2024-11-10T13:44:26.538901Z  INFO current_song2: Binding on 127.0.0.1:48457
2024-11-10T13:44:26.540106Z  INFO actix_server::builder: starting 12 workers
2024-11-10T13:44:26.540114Z  INFO actix_server::server: Actix runtime found; starting in Actix runtime
2024-11-10T13:46:07.856439Z  INFO current_song2: Binding on 127.0.0.1:48457
2024-11-10T13:46:07.857607Z  INFO actix_server::builder: starting 12 workers
2024-11-10T13:46:07.857621Z  INFO actix_server::server: Actix runtime found; starting in Actix runtime
2024-11-10T14:10:31.380734Z  WARN HTTP request{http.method: GET, http.route: /api/img/{id}/{target_epoch}, http.flavor: 1.1, http.scheme: http, http.host: localhost:48457, http.client_ip: 127.0.0.1, http.user_agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.5060.134 OBS/30.2.3 Safari/537.36, http.target: /api/img/2/0, otel.name: GET /api/img/{id}/{target_epoch}, otel.kind: "server", request_id: cc6379af-d75a-44ce-9376-43a876c49d7c exception.message: Requested image doesn't exist exception.details: "Requested image doesn't exist" http.status_code: 404 otel.status_code: "OK"}: tracing_actix_web::middleware: Error encountered while processing the incoming HTTP request: "Requested image doesn't exist"
2024-11-10T14:10:37.501753Z  WARN HTTP request{http.method: GET, http.route: /api/img/{id}/{target_epoch}, http.flavor: 1.1, http.scheme: http, http.host: localhost:48457, http.client_ip: 127.0.0.1, http.user_agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.5060.134 OBS/30.2.3 Safari/537.36, http.target: /api/img/3/0, otel.name: GET /api/img/{id}/{target_epoch}, otel.kind: "server", request_id: c9febebb-c235-4bb8-bce8-bbc64ba86d71 exception.message: Requested image doesn't exist exception.details: "Requested image doesn't exist" http.status_code: 404 otel.status_code: "OK"}: tracing_actix_web::middleware: Error encountered while processing the incoming HTTP request: "Requested image doesn't exist"
2024-11-10T14:12:31.648369Z  INFO current_song2: Binding on 127.0.0.1:48457
2024-11-10T14:12:31.649397Z  INFO actix_server::builder: starting 12 workers
2024-11-10T14:12:31.649404Z  INFO actix_server::server: Actix runtime found; starting in Actix runtime

Do I need to delete the cache, or something?

And a bit unrelated, but how do I make CurrentSong2 display other info (like album name, etc.) in conjunction with what's already in there (currently only the title and artist name)? Thanks in advance!

[Nerixyz]

Do I need to delete the cache, or something?

Your browser might have that file cached. If you shift-click on the reload button, it should reload without a cache. You can also check the network panel in the dev-tools.

And a bit unrelated, but how do I make CurrentSong2 display other info (like album name, etc.) in conjunction with what's already in there (currently only the title and artist name)?

You can either use CSS variables or add new elements in a user-script and access the album info.

[luccooflinosiii]

Gotcha...! Thank you!

It's showing up again! And thanks for pointing me there, I just started learning CSS, and the structure is still pretty weird to me. I tried adding

#song-container.with-album * {
  content: var(--album)
}

But it still doesn't show up

[luccooflinosiii]

Also, what do you use to track progress? I'm using an open source music player, MusicBee, and I think it tracks it differently.

[Nerixyz]

Unfortunately, you can't change the content of existing HTML elements with children (e.g. <h1 id="title">foo</h1> can't be changed). But you can insert the pseudo-elements ::before and ::after. With these, you can extend the title for example:

#song-container.with-album #title::after {
  content: ' - ' var(--album);
} 

This will also scroll if the title is too long.

---

Alternatively, you can display the album below the artist:

/* Make the container a bit bigger as it contains three lines now */
#song-container.with-image.with-album {
  --max-height: 5.5em;
  --height: 5.5em;
}
#song-container.with-album #mq-subtitle::after {
  content: var(--album);
  font-size: 0.8em;
}

[luccooflinosiii]

Yeah, the last one! Tysm! Sorry for making you type it out for me...