Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Improvement over global player component #4779

Closed
fcoveram opened this issue Aug 19, 2024 · 1 comment · Fixed by #4780
Closed

Improvement over global player component #4779

fcoveram opened this issue Aug 19, 2024 · 1 comment · Fixed by #4780
Assignees
@obulat
Labels
🕹 aspect: interface Concerns end-users' experience with the software ✨ goal: improvement Improvement to an existing user-facing feature good first issue New-contributor friendly help wanted Open to participation from the community 🟨 priority: medium Not blocking but should be addressed soon 🧱 stack: frontend Related to the Nuxt frontend

Comments

@fcoveram
Copy link
Contributor

As per the design introduced in #4563 for an enhanced version of browsing results with sensitive images, the global player comoponent requires one change.

Description

Audio cover image needs to allow be hidden beneath a blurred layer that has the bg-blur variable applied. There are no changes over current interactions.

Mockup of audio results on mobile. Global player is active with a blurred image cover

Additional context

The tokens applied are according to #3592 project
@fcoveram fcoveram added 🚦 status: awaiting triage Has not been triaged & therefore, not ready for work ✨ goal: improvement Improvement to an existing user-facing feature 🕹 aspect: interface Concerns end-users' experience with the software 🧱 stack: frontend Related to the Nuxt frontend labels Aug 19, 2024
@openverse-bot openverse-bot moved this to 📋 Backlog in Openverse Backlog Aug 19, 2024
@fcoveram fcoveram mentioned this issue Aug 19, 2024
Closed
@obulat obulat removed 🧱 stack: frontend Related to the Nuxt frontend 🚦 status: awaiting triage Has not been triaged & therefore, not ready for work labels Aug 19, 2024
@obulat
Copy link
Contributor

obulat commented Aug 19, 2024

Implementation

openverse/frontend/src/components/VAudioTrack/layouts/VGlobalLayout.vue

Line 6 in 975c543

<VAudioThumbnail class="rounded-ss" :audio="audio" />

Here, if shouldBlur is true, the VAudioThumbnail should be replaced with a simple div with bg-blur and VIcon named "eye-open", as here:

openverse/frontend/src/components/VSafetyWall/VSafetyWall.vue

Line 56 in 975c543

<VIcon name="eye-open" />

The snapshots for visual regression tests will need to be updated, here are the instructions for updating the snapshots using the GitHub CI

@obulat obulat added 🧱 stack: frontend Related to the Nuxt frontend good first issue New-contributor friendly help wanted Open to participation from the community 🟨 priority: medium Not blocking but should be addressed soon labels Aug 19, 2024
@obulat obulat mentioned this issue Aug 19, 2024
Merged
8 tasks
@openverse-bot openverse-bot moved this from 📋 Backlog to 🏗 In Progress in Openverse Backlog Aug 19, 2024
@openverse-bot openverse-bot moved this from 🏗 In Progress to ✅ Done in Openverse Backlog Aug 20, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@obulat obulat

Labels
🕹 aspect: interface Concerns end-users' experience with the software ✨ goal: improvement Improvement to an existing user-facing feature good first issue New-contributor friendly help wanted Open to participation from the community 🟨 priority: medium Not blocking but should be addressed soon 🧱 stack: frontend Related to the Nuxt frontend
Projects
Openverse Backlog
Archived in project
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Update the display of sensitive audio display WordPress/openverse
2 participants
@fcoveram @obulat