Automattic / blockpatterns

Repo of block patterns to work with
7 stars 2 forks source link

Audio player #78

Open alaczek opened 4 years ago

alaczek commented 4 years ago

I'm not entirely sure if we want block pattern like this, so let me know. Also not sure what audio file should we use - @ianstewart suggested some jazz sample but so far I was not able to find one licensed CC0.

image

<!-- wp:cover {"customOverlayColor":"#54426b","minHeight":250,"align":"full"} -->
<div class="wp-block-cover alignfull has-background-dim" style="background-color:#54426b;min-height:250px"><div class="wp-block-cover__inner-container"><!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column {"width":68.3} -->
<div class="wp-block-column" style="flex-basis:68.3%"><!-- wp:heading {"level":6,"style":{"color":{"text":"#ffffff"}}} -->
<h6 class="has-text-color" style="color:#ffffff">First time here? Let me tell you why this show rocks!</h6>
<!-- /wp:heading -->

<!-- wp:audio {"id":89} -->
<figure class="wp-block-audio"><audio controls src="https://podcast514691813.files.wordpress.com/2020/05/distributed-podcast-trailer-v1.mp3"></audio></figure>
<!-- /wp:audio --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div></div>
<!-- /wp:cover -->
iamtakashi commented 4 years ago

The width of the player jumps out to me. I imagine it'd look better if the player was full width. Why do you have the empty column on the right?

Also not sure what audio file should we use - @ianstewart suggested some jazz sample but so far I was not able to find one licensed CC0.

How about searching some Jazz sample in https://archive.org/? You should be able to find some public domain samples there.

alaczek commented 4 years ago

This is taken out of a left-aligned layout where I was using columns to align things properly. Anyway, you're right that it looks awkward and is unnecessarily complicated - I'm removing the columns.

image

<!-- wp:cover {"customOverlayColor":"#54426b","minHeight":250,"align":"full"} -->
<div class="wp-block-cover alignfull has-background-dim" style="background-color:#54426b;min-height:250px"><div class="wp-block-cover__inner-container"><!-- wp:heading {"align":"center","level":5,"style":{"color":{"text":"#ffffff"}}} -->
<h5 class="has-text-align-center has-text-color" style="color:#ffffff"><strong>First time here? Let me tell you why this show rocks!</strong></h5>
<!-- /wp:heading -->

<!-- wp:audio {"id":275} -->
<figure class="wp-block-audio"><audio controls src="https://podcast514691813.files.wordpress.com/2020/05/brds25.wav"></audio></figure>
<!-- /wp:audio --></div></div>
<!-- /wp:cover -->
iamtakashi commented 4 years ago

Not too sure about the sound of birds :) but in terms of the design, WFM.

ianstewart commented 4 years ago

Some of these may be cc-0 https://freemusicarchive.org/genre/Jazz

alaczek commented 4 years ago

I finally found something I like on CC0 license: https://freemusicarchive.org/music/Monplaisir/Heat_of_the_Summer/Monplaisir_-_Monplaisir_-_Heat_of_the_Summer_-_04_Stage_1_Level_24

Adding to dotcompatterns.