Media cards: Show waveform on podcast cards #13082
Open
Conversation
This file contains 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
|
Hello 👋! When you're ready to run Chromatic, please apply the You will need to reapply the label each time you want to run Chromatic. |
|
Size Change: +782 B (+0.09%) Total Size: 892 kB
ℹ️ View Unchanged
|
paperboyo
reviewed
Jan 6, 2025
| d="M0 34.5198h2.3009v5.4792H0v-5.4792ZM3.4508 19.287h2.2999v20.712H3.4508V19.287ZM6.9016.7672h2.2999V39.999H6.9016V.7671Zm3.4498.658h2.3009V39.999h-2.3009V1.4251Zm3.4508.7661h2.2999V39.999h-2.2999V2.1913Zm3.4498 1.6444h2.3009V40H17.252V3.8357Zm3.4508 1.8628h2.2999V39.999h-2.2999V5.6985Zm3.4508 1.972h2.2999V39.999h-2.2999V7.6705Zm3.4498.9865h2.3009v31.342h-2.3009V8.657Zm3.4508-2.629h2.2999V40h-2.2999V6.028Zm3.4498 1.0957h2.3009V40H34.504V7.1237Zm3.4508.1091h2.2999V39.999h-2.2999V7.2328Zm3.4519 1.7537h2.2998V39.999h-2.2998V8.9865Zm3.4498 1.7536h2.3008V40h-2.3008V10.7401Zm3.4508-4.1652h2.2998V39.999h-2.2998V6.5749Zm3.4498 1.316h2.3008V39.999h-2.3008V7.8908Zm3.4508-1.8629h2.2998V40h-2.2998V6.028Zm3.4508 1.4242h2.2998V40h-2.2998V7.4522Zm3.4498 1.4241h2.3008V39.999h-2.3008V8.8763Zm3.4508 1.4242h2.2998V39.999h-2.2998V10.3005Zm3.4498 1.7536h2.3008V39.999h-2.3008V12.0541Zm3.4508 1.5343h2.2998V39.999h-2.2998V13.5884Zm3.4508 2.4106h2.2998v24h-2.2998v-24Zm3.4498-.2193h2.3008V39.999h-2.3008V15.7797Zm3.4508-4.8213h2.2998V39.999h-2.2998V10.9584Zm3.4498 1.2049h2.3008V39.999h-2.3008V12.1633Zm3.4508 1.2067h2.2998v26.629h-2.2998V13.37Zm3.4508.5469h2.2998V39.999h-2.2998V13.9169Zm3.4498.2193h2.3009V39.999h-2.3009V14.1362Zm3.4505 1.2058h2.3v24.657h-2.3V15.342Zm3.452 1.2058h2.3V40h-2.3V16.5478Zm3.45 1.315h2.301V39.999h-2.301V17.8628Zm3.451.1092h2.3v22.027h-2.3V17.972Zm3.45-.4387h2.3V39.999h-2.3V17.5333Zm3.45 1.2058h2.3V40h-2.3V18.7391Zm3.451 1.315h2.3V39.999h-2.3V20.0541Zm3.45.8773h2.301V40h-2.301V20.9314Zm3.451-12.055h2.3V39.999h-2.3V8.8763Zm3.45 1.9729h2.3V39.999h-2.3V10.8493Zm3.45.5468h2.3V39.999h-2.3V11.3961Zm3.451-.9855h2.3V39.999h-2.3V10.4106Zm3.45-3.397h2.301V39.999h-2.301V7.0135ZM144.92 8h2.3v31.999h-2.3V8Zm3.45 1.0956h2.3V39.999h-2.3V9.0956Zm3.45 1.315h2.3V39.999h-2.3V10.4106Zm3.451 1.4251h2.3V40h-2.3V11.8357Zm3.45.5479h2.301V39.999h-2.301V12.3836Zm3.451-7.8908h2.3V39.999h-2.3V4.4927Zm3.451.8773h2.3V39.999h-2.3V5.37Zm3.45-.658h2.3V39.999h-2.3V4.712Zm3.451 1.7536h2.3V39.999h-2.3V6.4657Zm3.45 1.2048h2.301V39.999h-2.301V7.6705Zm3.451 1.974h2.3V40h-2.3V9.6444ZM182.875 8h2.3v31.999h-2.3V8Zm3.45-3.5072h2.3V39.999h-2.3V4.4927Zm3.451-.657h2.3V40h-2.3V3.8357Zm3.45 1.2048h2.301V39.999h-2.301V5.0406Zm3.451-1.973h2.3V39.999h-2.3V3.0676Zm3.45 1.2068h2.3V39.999h-2.3V4.2744Zm3.45-.4386h2.3V40h-2.3V3.8357Zm3.451 1.5343h2.3V39.999h-2.3V5.37Zm3.45 1.2048h2.301V39.999h-2.301V6.5749Zm3.451 1.973h2.3V40h-2.3V8.5478Zm3.451 1.3149h2.299V39.999h-2.299V9.8628Zm3.449 2.8493h2.301V39.999h-2.301V12.7121Zm3.451 1.8628h2.3V39.999h-2.3V14.5749Zm3.451-1.6435h2.301V40h-2.301V12.9314Zm3.451-7.1237h2.3V39.999h-2.3V5.8077ZM234.633 8h2.3v31.999h-2.3V8Zm3.449 1.7536h2.301V39.999h-2.301V9.7536Zm3.451 1.0957h2.3V39.999h-2.3V10.8493Zm3.45.6579h2.301V39.999h-2.301V11.5072Zm3.451.4377h2.3V39.999h-2.3V11.9449Zm3.451 1.4251h2.3v26.629h-2.3V13.37Zm3.449-8.4386h2.301V40h-2.301V4.9314Zm3.451.3285h2.3V39.999h-2.3V5.2599Zm3.45 1.315h2.301V39.999h-2.301V6.5749ZM265.686 8h2.3v31.999h-2.3V8Zm3.451 1.5333h2.3V39.999h-2.3V9.5333Zm3.449-.5468h2.301V39.999h-2.301V8.9865Zm3.451 1.4241h2.3V39.999h-2.3V10.4106Zm3.45-.4386h2.301v30.027h-2.301V9.972Zm3.451 1.0956h2.3V39.999h-2.3V11.0676Zm3.451.9865h2.3V39.999h-2.3V12.0541Zm3.45 1.3159h2.301v26.629h-2.301V13.37Zm3.451.7662h2.3V39.999h-2.3V14.1362Zm3.45 1.0967h2.301V39.999h-2.301V15.2329Zm3.451-.5489h2.3v25.315h-2.3V14.684Zm3.451-.8763h2.3V39.999h-2.3V13.8077Zm3.449 1.2049h2.301V39.999h-2.301V15.0126Zm3.451 1.2067h2.3V40h-2.3V16.2193Zm3.45 1.5333h2.301V39.999h-2.301V17.7526Zm3.451 1.6435h2.301V39.999h-2.301V19.3961Zm3.451-7.2328h2.3V39.999h-2.3V12.1633Zm3.449 1.2067h2.301v26.629h-2.301V13.37Zm3.451-.6579h2.3V39.999h-2.3V12.7121Zm3.451 1.2048h2.3V39.999h-2.3V13.9169Zm3.45 1.2068h2.301V40h-2.301V15.1237Zm3.451.9855h2.3V39.999h-2.3V16.1092Zm3.45-12.3836h2.3V39.999h-2.3V3.7256Zm3.45 2.9585h2.3V39.999h-2.3V6.684Zm3.451-.5469h2.3V39.999h-2.3V6.1372Zm3.451 1.4242h2.301V39.999h-2.301V7.5613Zm3.451 1.315h2.3V39.999h-2.3V8.8763Zm3.45-3.7257h2.3V39.999h-2.3V5.1507Zm3.45 2.1913h2.3v32.657h-2.3V7.342Zm3.451 2.5208h2.3V39.999h-2.3V9.8628Zm3.45 1.4242h2.301v28.712H369.2V11.287Zm3.451 1.4251h2.3V39.999h-2.3V12.7121Zm3.45 1.2048h2.3V39.999h-2.3V13.9169Zm3.45-.1092h2.3V39.999h-2.3V13.8077Zm3.451 1.6445h2.3V40h-2.3V15.4522Zm3.45-.3285h2.301V40h-2.301V15.1237Zm3.451-8.5488h2.3V39.999h-2.3V6.5749Zm3.45.7671h2.3v32.657h-2.3V7.342Zm3.45 1.0957h2.3V39.999h-2.3V8.4377Zm3.451.658h2.3V39.999h-2.3V9.0956Zm3.45 1.6444h2.301V40h-2.301V10.7401Zm3.451.4377h2.3V39.999h-2.3V11.1778Zm3.451.8763h2.301V39.999h-2.301V12.0541Zm3.45 1.4251h2.3V39.999h-2.3V13.4792Zm3.451-.9864h2.3V39.999h-2.3V12.4928Zm3.45 1.3149h2.301V39.999h-2.301V13.8077Zm3.451-3.1778h2.3V39.999h-2.3V10.6299Zm3.45 1.4242h2.3V39.999h-2.3V12.0541Zm3.45 1.2058h2.3V40h-2.3V13.2599Zm3.451-2.63h2.3V39.999h-2.3V10.6299Zm3.45 1.315h2.301V39.999h-2.301V11.9449Zm3.451.7672h2.3V39.999h-2.3V12.7121Zm3.45-3.288h2.301V39.999h-2.301V9.4241Zm3.45 1.7537h2.3V39.999h-2.3V11.1778Zm3.451-4.1643h2.3V39.999h-2.3V7.0135Zm3.45-.3294h2.301V39.999h-2.301V6.684Zm3.451 1.2067h2.3V39.999h-2.3V7.8908Zm3.45 1.2048h2.301V39.999h-2.301V9.0956Zm3.45.1092h2.3V39.999h-2.3V9.2048Zm3.451-4.054h2.3V39.999h-2.3V5.1507Zm3.451-3.946h2.301V39.999h-2.301V1.2048Zm3.451 3.3981h2.3V39.999h-2.3V4.6029Zm3.45 1.314h2.301V39.999h-2.301V5.9169Zm3.45.9874h2.3V39.999h-2.3V6.9043Zm3.451 1.972h2.3V39.999h-2.3V8.8763Zm3.45-7.6715h2.301V39.999h-2.301V1.2048Zm3.451 1.0957h2.3V39.999h-2.3V2.3005Zm3.45 3.398h2.301V39.999h-2.301V5.6985Zm3.451 2.4107h2.299V39.999h-2.299V8.1092Zm3.45-1.6435h2.3V39.999h-2.3V6.4657Zm3.45 1.6435h2.301V39.999h-2.301V8.1092Zm3.451.658h2.3V39.999h-2.3V8.7671Zm3.45 1.4241h2.301V39.999h-2.301V10.1913Zm3.45 1.0957h2.3v28.712h-2.3V11.287Zm3.451 1.3159h2.3V39.999h-2.3V12.6029Zm3.45 1.7536h2.301V40h-2.301V14.3565Zm3.451-.8773h2.3V39.999h-2.3V13.4792Zm3.45-.3295h2.301V39.999h-2.301V13.1497Zm3.451.8774h2.3V40h-2.3V14.0271Zm3.451.2193h2.3V39.999h-2.3V14.2464Zm3.45-10.5208h2.301V39.999h-2.301V3.7256Zm3.451 1.0957h2.3V39.999h-2.3V4.8212Zm3.45 1.9729h2.301V39.999h-2.301V6.7942Zm3.451.9855h2.299V39.999h-2.299V7.7797Zm3.45 1.0966h2.3V39.999h-2.3V8.8763Zm3.45-.3285h2.301V40h-2.301V8.5478Zm3.451-6.9034h2.3V40h-2.3V1.6444Zm3.45 1.4232h2.301V39.999h-2.301V3.0676Zm3.451 1.2068h2.299V39.999h-2.299V4.2744Zm3.45 2.63h2.3V39.999h-2.3V6.9043ZM576.227 0h2.301v39.999h-2.301V0Zm3.451 2.4116h2.3V40h-2.3V2.4116Zm3.451.9855h2.3V39.999h-2.3V3.3971Zm3.45 1.0957h2.3V39.999h-2.3V4.4927Zm3.45.5478h2.3V39.999h-2.3V5.0406Zm3.451-1.7527h2.301V39.999h-2.301V3.288Zm3.451 1.315h2.3V39.999h-2.3V4.6029Zm3.451 1.0957h2.3V39.999h-2.3V5.6985Zm3.45 2.5207h2.303V40h-2.303V8.2193Zm3.452-.4396h2.3V39.999h-2.3V7.7797Zm3.45 1.2068h2.301V39.999h-2.301V8.9865Zm3.451 2.3005h2.3v28.712h-2.3V11.287Zm3.451 1.2058h2.3V39.999h-2.3V12.4928Zm3.45-3.288h2.3V39.999h-2.3V9.2048Zm3.45 1.4251h2.3V39.999h-2.3V10.6299Zm3.451.4377h2.301V39.999h-2.301V11.0676Zm3.451.9865h2.3V39.999h-2.3V12.0541Zm3.451 1.2058h2.3V40h-2.3V13.2599Zm3.45.8763h2.301V39.999h-2.301V14.1362Zm3.451.2203h2.299V40h-2.299V14.3565Zm3.449 1.2049h2.301V39.999h-2.301V15.5614Zm3.451 1.4251h2.3V39.999h-2.3V16.9865Zm3.451 1.0956h2.3V39.999h-2.3V18.0821Zm3.45 1.314h2.301V39.999h-2.301V19.3961Zm3.45-5.9169h2.3V39.999h-2.3V13.4792Zm3.451-7.7807h2.3V39.999h-2.3V5.6985Zm3.45 1.4252h2.301V40h-2.301V7.1237Zm3.451.3285h2.3V40h-2.3V7.4522Zm3.45 1.972h2.301V39.999h-2.301V9.4241Zm3.451 1.7536h2.299V39.999h-2.299V11.1778Zm3.45 2.1922h2.3v26.629h-2.3V13.37Zm3.45 1.4242h2.301V39.999h-2.301V14.7942Zm3.451-.4377h2.3V40h-2.3V14.3565Zm3.451.5469h2.301V39.999h-2.301V14.9034Zm3.451-.2194h2.299v25.315h-2.299V14.684Zm3.45 1.6445h2.3V39.999h-2.3V16.3285Zm3.45-4.0551h2.301V39.999h-2.301V12.2734Zm3.451-2.5198h2.3V39.999h-2.3V9.7536Zm3.45.9865h2.301V40h-2.301V10.7401Zm3.451.8763h2.299V39.999h-2.299V11.6164Zm3.45 1.315h2.3V40h-2.3V12.9314Zm3.45 2.1923H720V40h-2.301V15.1237Z" | ||
| /> | ||
| </svg> | ||
| ); |
There was a problem hiding this comment.
Only Max would know how to do it properly… I don’t. It may be that whomever supplied this will need to snap those paths to pixels. They are not only off, but also not even aligned to any other grid or to each other:
It will allow also to optimise it to ~50% as this precision is insane…
Unless what is attached is any better (this is the best I can do, sadly).
wave_x10_svgo_illustrator_random_play.svg.zip
There was a problem hiding this comment.
Yes, I immediately thought of Max when I had a look at this! I tried snapping the path to the pixel grid in Figma, but it didn't seem to do anything, perhaps as it's a single path so only aligned the edges? I'll go back to design and see if they're able to optimise it. That would also help with using a section of this as a repeating pattern rather than having to have a super wide SVG. (The sub pixel values make the join obvious where the pattern repeats due to the spacing being slightly off.)
There was a problem hiding this comment.
You’ll definitely need to round things up for them to look crisp!
If you favour readability I would use line or rect elements which are very explicit in how they are drawn. It’s a bit hard to parse one massive path with rectangles in it…
If you favour making the SVG as small as possible I would use a pattern and a mask or clipPath for cropping the height of individual lines.
If you favour making them look a bit random I’d offset each wavelength by a deterministic value between 0 and the width of the repeating pattern.
You could even use CSS if you know the maximum width of a card.
There was a problem hiding this comment.
Thanks Max 🙏 With a bit of manual tweaking I've rounded things up which has also made the SVG quite a bit smaller. Without any subpixel values to worry about I think using a pattern might be the way to go. I like the idea of offsetting the wave too as it allows the use of a single static SVG whilst adding some visual difference. (The podcast carousel, for example, will have multiple adjacent cards with the waveform so it would be nice if they don't all look identical!)
There was a problem hiding this comment.
If you want to shrink it a tad more, you can use strokes instead of fills:
<path
stroke-width="2" stroke="#eee"
d="M1,34V40M4,19V40M7,1V40M10,1V40M13,2V40M16,4V40M19,6V40M22,8V40M25,9V40
M28,6V40M31,7V40M34,7V40M37,9V40M40,11V40M43,7V40M46,8V40M49,6V40M52,7V40
M55,9V40M58,10V40M61,12V40M64,14V40M67,16V40M70,16V40M73,11V40M76,12V40
M79,13V40M82,14V40M85,14V40M88,15V40M91,16V40M94,18V40M97,18V40M100,17V40
M103,19V40M106,20V40M109,21V40M112,9V40M115,11V40M118,11V40M121,10V40M124,7V40
M127,8V40M130,9V40M133,10V40M136,12V40M139,12V40M142,4V40M145,5V40M148,5V40
M151,6V40M154,8V40M157,10V40M160,8V40M163,4V40M166,4V40M169,5V40M172,3V40
M175,4V40M178,4V40M181,5V40M184,7V40M187,8V40M190,10V40M193,13V40M196,15V40
M199,13V40M202,6V40M205,8V40M208,10V40M211,11V40M214,11V40M217,12V40M220,13V40
M223,5V40M226,5V40M229,7V40M232,8V40M235,9V40M238,9V40M241,10V40M244,10V40
M247,11V40M250,12V40M253,13V40M256,14V40M259,15V40M262,15V40M265,14V40
M268,15V40M271,16V40M274,18V40M277,19V40M280,12V40M283,13V40M286,13V40
M289,14V40M292,15V40M295,16V40M298,4V40"
/>This brings the d character count from 4,297 to 920.
There was a problem hiding this comment.
Oh and remember that if you define a pattern once it can be reused across different inline SVGs – if you want to keep your HTML compliant no two elements can share the same id!
Otherwise make sure to useId… like I should have done previously.
There was a problem hiding this comment.
Otherwise make sure to
useId
That's exactly what I would have forgot to do! 🤦 Using simple lines and stroke rather than drawing filled rectangles is also a great idea. (And makes the path easier to read.)
Thanks so much for all of the pointers and advice 🙏 Using the simplified path as a repeating pattern has resulted in a much more compact SVG, but one that also works at any width. I haven't added an offset yet, but will look at that in a follow up PR before enabling this for existing containers.
jamesmockett
force-pushed
the
jm/media-card-pills
branch
from
840c450 to
d89746d
Compare
abeddow91
reviewed
Jan 7, 2025
jamesmockett
force-pushed
the
jm/podcast-waveform
branch
from
a2d983b to
77c82fc
Compare
jamesmockett
force-pushed
the
jm/media-card-pills
branch
4 times, most recently
from
7f20356 to
b8fe14b
Compare
jamesmockett
force-pushed
the
jm/podcast-waveform
branch
from
77c82fc to
e815d10
Compare
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 does this change?
Displays a waveform at the bottom of podcast cards, behind all other content.
NB. The waveform is static and not based on the podcast's audio. The waveform SVG is 720px wide to accommodate different cards widths — it's possible this could be optimised and a repeating pattern used, although experiments with this resulted in gaps where the repetition occurred due to subpixel values in the source SVGs path.
Why?
To clearly distinguish audio content from video content in media cards.
Screenshots