Video Captions Presets & Customization

[swissspidy]

Summary

amp-story-captions has a new style-preset attribute that will be used to support different types of presets for captions:

• default
• appear
• karaoke (not yet implemented)
• popout (not yet implemented)
• rainbow (not yet implemented)

Presets like appear allow customizing font family and font size and other using CSS custom properties added via an inline style on the <amp-story-captions> element.

To implement this:

• Provide a preset selection in the editor on a per-element basis, also for page background audio, ideally with some previews
  • In V2, add additional inputs for customizing presets further (out of scope for V1)
• Update MediaCaptionsLayer in the editor to change appearance of captions depending on preset
  • Should be able to reuse existing styles from the AMP repo for this (see link below)
• Update the allowlist for amp-story-captions in KSES.php to include style-preset

While we wait for implementation of the remaining presets, we can already build something here behind a feature flag

References

Relevant links from the AMP repo:

• [Amp story captions] Implement default, overridable CSS ampproject/amphtml#37900
• [Amp story captions] Preset styles ampproject/amphtml#38093
• ✨ [amp story captions] style-preset attribute with styles ampproject/amphtml#37967

CSS file for all the presets:

https://github.com/processprocess/amphtml/blob/main/extensions/amp-story-captions/0.1/amp-story-captions-presets.css

Demo story

Alternatives Considered

Acceptance Criteria

Does this epic have any performance impact?

No

Does this epic have telemetry?

Not initially