VideoPress Block: Add UI for Customizing Player Seekbar Colors

[roundhill]

Adds a new panel to the VideoPress block to set custom colors for the seekbar:

Props to @pgk for building the majority of this PR :)

Note that the iframe will reload everytime you choose a color... this isn't ideal and we are looking into improving the oembed to work via JS instead of an iframe for scenarios like this.

Fixes #

Changes proposed in this Pull Request:

Adds a new panel to set the seek bar colors for main, loading, and played colors. Every time you change a color, the player iframe gets reloaded so that the new color changes will show.

Jetpack product discussion

pxWta-Tk-p2

Does this pull request change what data or activity we track or use?

No

Testing instructions:

• Add or edit a video block, don't choose any custom seekbar colors yet. They should have the usual grey/black combo.
• Now choose some seekbar colors, click Save colors, and the player should refresh with the new colors.
• Publish the post and view it on the front-end, the custom colors should also show.

Proposed changelog entry for your changes:

• VideoPress Block: Added support for custom video player seekbar colors.

[matticbot]

Caution: This PR has changes that must be merged to WordPress.com
Hello roundhill! These changes need to be synced to WordPress.com - If you 're an a11n, please commandeer and confirm D54546-code works as expected before merging this PR. Once this PR is merged, please commit the changes to WP.com. Thank you!
This revision will be updated with each commit to this PR

[jetpackbot]

Scheduled Jetpack release: March 2, 2021.
Scheduled code freeze: February 22, 2021

Thank you for the great PR description!

When this PR is ready for review, please apply the [Status] Needs Review label. If you are an a11n, please have someone from your team review the code if possible. The Jetpack team will also review this PR and merge it to be included in the next Jetpack release.

Generated by 🚫 dangerJS against 44978a5

[pgk]

Works well and makes sense! 🚢

[jeherve]

This may be a stupid question, but is "seekbar" the official name of that progress bar? I must admit I was not familiar with the term, so when I first saw the toolbar I wasn't really sure what it was used for.

[sdixon194]

Did a bit of testing and didn't see anything really broken!

Just noting that with the iframe reload, it was fairly tricky to pick a custom color, since it reloads as soon as a color is selected:

Choosing a different color using the slider at the bottom was also difficult. Eventually it started working, but I couldn't reliable reproduce a way to get it to do so:

Is it possible to delay the reload until the color is chosen and the user clicks away?

I also tested on wp 5.5 and 5.5.3, and noticed that experience seemed smoother because it didn't collapse the entire color panel once a color was chosen. On 5.6, every time I chose a color the entire panel would reload, reproducible in Chrome and Firefox:

5.5/5.5.3:

5.6

[roundhill]

This may be a stupid question, but is "seekbar" the official name of that progress bar? I must admit I was not familiar with the term, so when I first saw the toolbar I wasn't really sure what it was used for.

No stupid questions! Should we just call it a Progress Bar?

[roundhill]

Is it possible to delay the reload until the color is chosen and the user clicks away?

Nice catch @sdixon194! I'll see if that's possible...

[jeherve]

Should we just call it a Progress Bar?

I would personally understand it better, yeah, but maybe that's just me :)

[roundhill]

Is it possible to delay the reload until the color is chosen and the user clicks away?

Nice catch @sdixon194! I'll see if that's possible...

I've updated the block to now keep some local state for the color changes, which will get applied when the Save colors button is clicked:

This fixes the issue with the 'live' reloading, but will require the user to click the button to see their changes. OK trade-off?

[roundhill]

I would personally understand it better, yeah, but maybe that's just me :)

I changed it to Progress Colors, Progress Bar Colors was too wide, causing the selected colors to overlap with the text:

[roundhill]

I think #18006 isn't merged to wp.com quite yet, which is why the phab diff build isn't happy at the moment...

[roundhill]

This is all rebased up and ready to go!

I'm still not sure if the deprecation is necessary as it seems to load fine for me for older versions of the block, but I may just not be understanding why we need to do it 😄 @jeherve

[jeherve]

It seems to work well, this should be ready to merge!

[roundhill]

r221218-wpcom