gatsby-theme-carbon icon indicating copy to clipboard operation
gatsby-theme-carbon copied to clipboard

GifPlayer enhancements

Open vpicone opened this issue 3 years ago • 1 comments

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 avatar Jul 22 '20 21:07 vpicone

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.

vpicone avatar Jul 28 '20 23:07 vpicone