fixme-lausanne / mpdwsgi-web Goto Github PK

Add a link to the repo, in order to make it easier to report issues or contribute.

The rotating "hacker" badge behaves unsmoothly when its rotation makes the mouse un-hover it (approach the mouse from the right and hover the badge by only a few pixels): instead of completing its rotation (which would be visually the right thing to do), it flickers back and forth, such that its vertical tangent passes by the mouse's location.

It has been observed on Firefox and Chromium on Linux (with the latter presenting a less ugly effect).

The reason is that the rotation effect on the badge actually changes the perceived (2d, projected) width of the badge, and disables the :hover selector. When that happens, the CSS transition is reverted, the badge rotates back to the point where the mouse hovers it again, which re-enables the :hover selector, and so on and so forth.

Although it can be fixed, there is no way to do it using pure CSS.
For reference: 1 2 3

Should we fix it using JS?

Hey,
You should create a README.md file so every member of fixme-lausanne can know what's the purpose of this repo.

• SideMenu
• Player
  • basic actions (play, pause, next, previous)
  • progress bar
  • random
  • volume
• Current playlist (/current)
• Playlists (/playlists)
• Albums (/albums)
• Details of an album (/albums/:albumName)
• Artists (/artists)
• Details of an artist (/artists/:artistName)
• Search
• Notifications (network errors, mpd errors, db update)
• File upload

Unsupported browsers should display something along the line of "your browser is not supported because feature X is not available" when the UI cannot load correctly, instead of keeping the "Welcome! Please, take a seat..." message.

E.g. the interface won't work in Internet Explorer 11 on Windows 8.1, because it does not handle generator functions and the parser throws (SCRIPT1005: '(' attendu).

For some ES6 features, the code can be transpiled as a graceful degradation, even using an ad-hoc JS transpiler loaded by the webpage itself, but other features cannot be backported.

Generators can be rewritten to a certain extent to function with pre-ES6 engines (pun intended) (see https://github.com/lpaimen/YieldifyJS), but I am not sure that it can be generalized to all cases.

If we choose to only support the latest, cutting-edge browsers (IE11 is probably not in that category, even if it can still be considered recent), at least don't let the UI give up everything on unsupported browsers and let the user know that it won't work.

Nothing is displayed when ID3 tags are missing. The file name or path could be displayed as fallback, as they usually contain the missing data.

The message "Welcome! Please, take a seat while we are loading everything." is displayed non-stop along with the loading animation and never disappears on https://mpd.fixme.ch.
If there are some requirements on the browser side it should be stated somewhere.

I tested with the following browsers on Archlinux:

• Firefox v. 39.0
• Chromium 43.0.2357.130 (Build de développement) (64 bits)

The README is not self-sufficient, as following its instructions won't allow to run a local instance of FFM out of the box.

Missings are:

• A basic procedure to setup an MPD client (or a mention that one is required)
• Explanations to configure config.js