[PROBLEM] Queue Screen is Indented

[Tim Curtis]

@doobster


I suggest you clean your library and use consistent tagging; one for all, an unknown artist / album needs not to be specifically named so... it will suffice to leave it empty, moOde will figure it out itself, and will not break your UI user experience.
Also, try to avoid angle-brackets and quotes anywhere in the metadata, as it's unpredictable how they will (they could, hence they would, hence they will, Murphy docet) corrupt the UI.

Cheers, Al.

Nutul,
That may be a tall order for some libraries and it may not resolve the issue in all instances.  I found two possible solutions to fix the issue.  One is to add a non-breaking space to the end of the Artist.  That way the browser renders it as "something" and will properly break the next li tag.  The other, better, solution is to add "min-height: 2.4em;" to "playqueue-entry" class, since the icon's and artwork's size is set to 2.4em.  That'll ensure that the next list item doesn't start indented if the text portion of the previous entry didn't take 2.4em in height.

Doobster.

Adding or modifying code to workaround the rare case where some tags have HTML is not a good idea.

It's much better to fix the data with a good tagging utility.

[Nutul]

@doobster


I suggest you clean your library and use consistent tagging; one for all, an unknown artist / album needs not to be specifically named so... it will suffice to leave it empty, moOde will figure it out itself, and will not break your UI user experience.
Also, try to avoid angle-brackets and quotes anywhere in the metadata, as it's unpredictable how they will (they could, hence they would, hence they will, Murphy docet) corrupt the UI.

Cheers, Al.

Nutul,
That may be a tall order for some libraries and it may not resolve the issue in all instances.  I found two possible solutions to fix the issue.  One is to add a non-breaking space to the end of the Artist.  That way the browser renders it as "something" and will properly break the next li tag.  The other, better, solution is to add "min-height: 2.4em;" to "playqueue-entry" class, since the icon's and artwork's size is set to 2.4em.  That'll ensure that the next list item doesn't start indented if the text portion of the previous entry didn't take 2.4em in height.

Doobster.

Hi,

actually, regardless of the size of your library, a script will do it in a matter of seconds; and yes, it will resolve the issue in ALL instances, provided all the tags are stripped-down of all the "<" and ">" that alter the behavior of the library by injecting unwanted nested html elements.

But anyway...
the solution you suggest (although a graphical solution, not a technical one, and thus prone to render itself not working at some point in the future, due to UI changes / different screen/font sizes etc.) may be enough for the playing queue, but for sure it is not for neither the folder view, nor the tag view (and possibly the album view, I cannot remember).

And this is just for the Artist tag in the file; Comment, Genre, Composer (among others) are also vulnerable.
I do agree that moOde should not break in case of html-injection (be it intentional or not, doesn't matter), but if the problem can be circumvented with some grade of care... The technical fix may result a bit heavy, in terms of CPU power, and depending on how large your library is, could also affect the performance of some commands that require backend attention; I am still investigating for a clean and light solution, but at the moment I'm not fully satisfied with the results. Extensive testing to ensure it will not break something else in the long term, also are a stopper (for me at least).

P.S.
just try to put this as the Artist in one of your files, which is just legal html:
<h1 style='color: red; font-size: 64px; font-weight: 900;'>Unknown</h1>


Cheers, Al.