search

carbon-design-system / gatsby-theme-carbon

A Carbon inspired Gatsby theme
https://gatsby.carbondesignsystem.com/
Apache License 2.0
356 stars 273 forks source link

GifPlayer enhancements #937

Open vpicone opened 4 years ago

vpicone commented 4 years ago

The GifPlayer has turned out to be an incredibly valuable tool, sites are using it to swap out/"pause" all kinds of content: Videos, Lottie animations etc. We should update the docs and this component accordingly

  1. Update the documentation to show these alternative uses
  2. Deprecate the GifPlayer name in favor of something else. Perhapse MediaPlayer? We'll still export a GifPlayer to not break things, we'll just console.warn and point the export directly to the MediaPlayer.
  3. Add a $carbon--gray-50 option for Videos that alternate between very light and very dark content such as here (already added a gray-50 option for IDL to test)

aspirational: what if we didn't need the user to provide a poster? We take a snapshot of the component in canvas and render that instead of of whatever poster they passed in?

vpicone commented 4 years ago

I added some extra functionality around videos in the GifPlayer for IDL. It automatically applies a poster based on the fallback image and hides our play/pause when a video is suspended by the browser (low battery mode).

IDL also has 4 css rules for videos in GifPlayer that were added here. It looks like those rules are meant to ensure the videos take up the full width and adds a gray option for the play/pause.