LB-1309: Implement stats art generator #2518
Conversation
|
Hi @KasukabeDefenceForce let me know when you think this PR is ready for review, or if you need any help integrating into ListenBrainz proper. |
|
@MonkeyDo I need help on these issues: |
👍 OK, leave it with me I will work on the CSS styling as I see a fair amount that can be refactored and I know this website's CSS like the back of my hand ;) There will be a lot of functionality from those settings that will be missing for this first implementation (we don't have the features in the back-end yet), so I will make sure they can look good for the future but will comment them out for the time being. |
|
@MonkeyDo Okay. I would love to help you further on this PR if possible. Otherwise, can you please suggest me some new tickets to work on? |
Refactor less file, ensure we only modify the required scope of the stats creator page, and a lot of tweaking to use existing classes and Bootstrap styles
These components don't need to each have their own folder
don't update the preview url on each keystroke, debounce that part instead
This is what we use across the website
Using input groups to label the inputs inline
in the beta section for now
No need to call APIs to get a thumbnails of these images, we can serve a rasterized example from the server.
Instead of having an enum of only the string names, we can use some typescript voodoo to create readonly object definitions that will contain all the required info: name, display name, image source, customization options etc.
This component just wraps a select and doesn't seem to bring anything extra, while making it harder to use by expecting an array of string tuples [string, string], which ends up being cumbersome.
just to be safe, for when/if we decide to use it in the future
Not sure when we will have these features available, but it's going to be some time. In the meantime we are using memory uselessly
We have this component ready with all the required functionality, that we can just plunk in directly. Had to add a couple of simple modifications to allow it so be used for single-user search as well as for selecting multiple users.
Nested SVGs allow us to apply a layer of custom dynamic CSS on top of the SVG image we load from the API
We have options for different layouts, adding an input to allow their use. However I think this will need to be simplified by showing small previews of the layout style, like we do for the color presets, rather than a number input
Temporary second API request to catch errors, until shubhamjain/svg-loader#42 is merged and allows catching errors directly
They can be hidden under the stats art at certain sizes, making it unclear that the image can be saved and shared
Number input is not the way ! Use a select instead with the text "Option 1" etc.
+ tweak gallery preview CSS
Reset text image colors, only cache SVGs for 6 hours, use better icon for link copy button
|
I think this is ready for beta version. I'll merge the PR and deploy it, then we can get some feedback from our users and go from there. |
|
Thanks a lot for your work @KasukabeDefenceForce ! |
Problem
Solution
Action