Model-viewer: Built-in, optional UI for end-user control over animations

[cdata]

As of #421 , we will have added support for animations. @yuinchien has mocked up some excellent default UI for end-user control over what animation is currently playing. We should implement it, and ensure that it is easy for content authors to customize.

[yuinchien]

@cdata Thanks for filing a ticket for this!

[pushmatrix]

@cdata I'm curious to hear your thoughts on how customizable this viewer should be going forward. If you can change stuff like the play / pause button, should you be able to change loading progress bar (https://github.com/GoogleWebComponents/model-viewer/issues/335) & the little spinning interaction animation?

[cdata]

@pushmatrix our current philosophy regarding customization is that for any given built-in UI you should always have two options:

1. Customize built-in UI styles (to the extent that it makes sense) via CSS custom properties (and someday also CSS shadow parts)
2. Bring your own UI via Shadow DOM content projection

With Option 1, we want to make it easy to rebrand the built-in UI by customizing details like color, font face, icons and perhaps paddings, margins and font sizes in some cases.

You can see an example of Option 2 in the PR description of https://github.com/GoogleWebComponents/model-viewer/pull/322 where we added the interaction prompt you mentioned.

Option 2 is a more robust approach to customization. It allows the content author to provide complex, bespoke alternatives to the built-in UI.

We want to make sure that providing custom UI via Option 2 does not require the content author to sacrifice UI capabilities. So, we aim to expose public, imperative APIs on <model-viewer> to ensure that custom UI has at least as many capabilities as whatever our built-in UIs have. Our recent change implementing animations and corresponding public, imperative control APIs (https://github.com/GoogleWebComponents/model-viewer/pull/421) is an example of this philosophy expressing itself.

To answer your question more directly, this philosophy applies equally to the animation controls, the progress bar, and any other built-in UI in <model-viewer>.

[cdata]

Also, to be straight forward, our execution of this philosophy is currently quite sparse. It's a statement of what we want, not necessarily what we have. Please do file issues or give us feedback if you think we need to backfill work to live up to what I'm saying here :)

[pushmatrix]

Thanks @cdata , that was a fantastic response. Big 👏 👏 👏 to all of you for the quality of work and ambition going into this project.