Feat: Replace static Library footer PNG with dynamic album art gradient #159
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Removed import and display of static gradient SVG - Added comments documenting the positioning for future dynamic gradient implementation - Preserved original layering structure with z-index details
Updating with latest changes from main
- Restructured gradient component using React fragments to avoid nesting constraints - Positioned the gradient blob at fixed bottom with full viewport width - Removed border radius to prevent rounded corners at edges - Fine-tuned blur amount (70px) and opacity (0.75) for optimal visual effect - Maintained z-index priority to ensure gradient stays visible - Made sure gradient stays fixed at viewport bottom regardless of scrolling
tennitech
added
enhancement
Updating 122 so that I can branch off of it to work on the curved sliders in Library.js
EvWhymark
requested changes
Apr 5, 2025
Collaborator
EvWhymark
left a comment
EvWhymark
left a comment
There was a problem hiding this comment.
Looking a lot better. I know I said I wouldn't go too deep into detail but I couldn't stop myself. Nothing here that is critical that needs to be changed but this just needs cleanup. Read through the code suggestions and if you need any clarification let me know. After all these reviews are resolved I will approve.
This was
linked to
issues
Apr 8, 2025
Co-authored-by: Evan Whymark <whymarkevan@gmail.com>
Co-authored-by: Evan Whymark <whymarkevan@gmail.com>
Co-authored-by: Evan Whymark <whymarkevan@gmail.com>
tennitech
commented
Apr 8, 2025
Owner
Author
tennitech
left a comment
tennitech
left a comment
There was a problem hiding this comment.
Give it a check and lmk if you see any issues.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What's this about?
Swapped out the old static PNG footer in the Library view. It felt out of place and couldn't react to the music.
What's changed?
Brought in the dynamic AnimatedBlob gradient, just like we have on the Home screen.
It now uses useColorThief to pull colors from the current track's album art, making it sync up nicely with the music.
Made sure it stretches perfectly edge-to-edge across the bottom of the viewport, no more weird gaps! (Fixed this by rendering it separately using a React Fragment).
Result:
A much cooler, dynamic footer glow in the Library that matches the vibe of the current track and looks consistent with other parts of the app.
Testing:
Closes issue #122.