feat: option to only show controls when hovering the player

[huubl]

Hi,

I want the player controls to be hidden and only show them when hovering the player. It would be great if this can be set by an option.

[huubl]

For now I managed to do this by:

window.addEventListener('load', function() {
  const lottiePlayers = document.querySelectorAll('lottie-player');

  lottiePlayers.forEach(player => {
    const sheet = new CSSStyleSheet();
    sheet.insertRule("#animation-container { position: relative; }");
    sheet.insertRule("#animation-container .toolbar { position: absolute; bottom: -50px; opacity: 0; transition: opacity .35s ease-out;}");
    sheet.insertRule("#animation-container:hover .toolbar { opacity: 1; }");
    sheet.insertRule("#animation-container:focus-within .toolbar { opacity: 1; }");

    const elemStyleSheets = player.shadowRoot.adoptedStyleSheets;
    player.shadowRoot.adoptedStyleSheets = [...elemStyleSheets, sheet];
  });
}, false);

[samuelOsborne]

Hey @huubl I'll look in to this and ping you on updates.

[samuelOsborne]

@huubl As this is a very niche request, and you've got a solution that works for you, i'm going to close this issue as after looking in to it it won't be as a simple feat as first thought it would be.

Cheers!