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 audio component #4778

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

Improvement over audio component #4778

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 🟨 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 audio component requires some changes.

Description

The three variants of the component documented in the Design Library need to allow hiding the image beneath a blur layer that has the bg-blur variable applied. There are no changes over current interactions.

Screenshots from the design file made for #4563

XL breakpoint XS breakpoint
Mockup of audio results on desktop. One track has the image cover blurred Mockup of audio results on mobile. One track has the image cover blurred

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
Copy link
Contributor

obulat commented Aug 19, 2024

Implementation

If shouldBlur is true, the VAudioThumbnail in VRowLayout component:

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

Line 11 in 975c543

<VAudioThumbnail :audio="audio" class="col-span-full row-span-full" />

should be replaced with a div with bg-blur class and a VIcon with eye-open as the name. Sample use of VIcon:

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

Line 56 in 975c543

<VIcon name="eye-open" />

@obulat obulat added good first issue New-contributor friendly help wanted Open to participation from the community 🟨 priority: medium Not blocking but should be addressed soon and removed 🚦 status: awaiting triage Has not been triaged & therefore, not ready for work good first issue New-contributor friendly help wanted Open to participation from the community 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 🟨 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