Feature: Responsive media component

peterschewe commented 2 years ago

This PR merges all media components (c-image, c-video, c-media) into a new component c-responsive-media.

Todos

[x] Remove c-image and add as recipe instead
[x] Remove c-video and add as recipe instead (new name: c-video-player)
[x] core-utils/video: Load the video lazy as default and remove image preloading
[x] core-utils/image: Set width and height at <source> instead of at <img>. This change is important if different ratios are defined via sources. The img itself must not have a default size.
[ ] Add new component c-responsive-media
- [x] Template
- [x] Migration
- [ ] Test and finalise cropping with ratio and focus area
- [ ] Caption handling (see TBD)
[x] Allow include of local img/video assets in Storybook from separate static dir and add demo files
[ ] Add Storybook examples
[ ] Generate poster images with cssg
[x] Add transparent data image as poster attribute

TBD

Image quality: Do we need type specific (JPEG, PNG, AVIF, WebP) quality settings? The Default for all is 80 I think. Here (https://www.industrialempathy.com/posts/avif-webp-quality-settings/) we find good presets for AVIF and WebP.
Core Utils: Are the adjustments to the core utils (see above) breaking changes?
Caption: Where do we like to use a caption? c-responsive-media vs. m-media
Video:
- Do we need a poster attribute at the video element? I'm currently using a transparent data image.
- We don't set a playsinline attribute in the video util yet. I'm not sure if it would cause problems on iOS.
- We already use ffmpeg in cssg. The step to automatically generate smaller videos and in other formats (e.g. webm) would be obvious. However, it would slow down the build time. But maybe it could run as a separate task – e.g. when creating new assets, trigger a webhook directly, which provides the new files via Netlify function and sends them back to Contentful.

New component: Responsive media

The component simplifies the handling of images and short loop videos, which can be used in the hero or media module, for example.

The name (c-responsive-media instead of c-media) is also a clearer distinction from the module m-media.

Features

Can display different media for each breakpoint, e.g. an image on mobile and a video on desktop.
Ratios and focus areas can be defined in Contentful. Images are cropped accordingly via Contentful's Image API. Video files remain in the original and are then masked in the frontend.
(wip) Video posters are generated automatically via cssg, incl. different sizes and types.

Contentful

Markup (simplified)

<!-- Example 1: Mobile image; desktop video; different ratios; image without lazy loading (for use above the fold) -->
<figure>
  <picture>
    <source srcset="poster-desktop.jpg" media="(min-width: 768px)" width="1920" height="1080">
    <source srcset="image-mobile.jpg" media="(max-width: 767px)" width="768" height="768">
    <img src="image-mobile.jpg" alt="Lorem ipsum" decoding="auto" fetchpriority="high">
  </picture>
  <video class="-md:u-hidden" poster="transparent data/base64 image">
    <source data-src="video-desktop.mp4" type="video/mp4">
  </video>
</figure> 

<!-- Example 2: Mobile video; desktop video; different sizes; image with lazy loading -->
<figure>
  <picture>
    <source srcset="poster-desktop.jpg" media="(min-width: 768px)" width="1920" height="1080">
    <source srcset="poster-mobile.jpg" media="(max-width: 767px)" width="768" height="432">
    <img src="poster-mobile.jpg" alt="Lorem ipsum" decoding="auto" loading="lazy">
  </picture>
  <video class="-md:u-hidden" poster="transparent data/base64 image">
    <source data-src="video-desktop.mp4" type="video/mp4">
  </video>
  <video class="md:u-hidden" poster="transparent data/base64 image">
    <source data-src="video-mobile.mp4" type="video/mp4">
  </video>
</figure> 

<!-- Example 3: Mobile image; desktop image; different ratios; image with lazy loading -->
<figure>
  <picture>
    <source srcset="image-desktop.jpg" media="(min-width: 768px)" width="1920" height="1080">
    <source srcset="image-mobile.jpg" media="(max-width: 767px)" width="768" height="768">
    <img src="image-mobile.jpg" alt="Lorem ipsum" decoding="auto" loading="lazy">
  </picture>
</figure>

dlemm commented 2 years ago

For the TBD

Caption: Where do we like to use a caption? c-responsive-media vs. m-media

In my opinion it should be placed inside the c-responsive-media since the caption barely changes. So if you use the component somewhere else, would there be another caption?

And another suggestion is that we might need a desktop and a mobile caption since it is possible to maintain two different things now.

peterschewe commented 2 years ago

For the TBD

Caption: Where do we like to use a caption? c-responsive-media vs. m-media

In my opinion it should be placed inside the c-responsive-media since the caption barely changes. So if you use the component somewhere else, would there be another caption?

Yes, that is a good point. I can only see a disadvantage if the caption is not directly aligned with the media. For example, the media could be fullscreen and the caption could remain in the content grid. This is also possible in the component. But maybe it's more difficult if it's already in a grid (of the module). The case can probably be ignored...

And another suggestion is that we might need a desktop and a mobile caption since it is possible to maintain two different things now.

I would consider the responsive media as a unit. It is meant to be displayed differently, but the purpose of the content is the same. We also use only one alt text for both media.