Ensure media is always visible and segments are followed dynamically.

[markpbaggett]

What Does This Do

This is a minor change that makes the player a little more user friendly.

First, the audio canvas is always sticky so it never is not visible no matter where the media is currently.

Second, it keeps segments and the media player always in sync so that as the current timestamp is updated the segment is always visible in the middle of the player.

Why am I adding this?

We've started to use this at my current shop to help in our process of reviewing vtt and transcript files. This adds functionality so I don't need to fork this or write my own thing from scratch.

If this is unwanted, no problem.

[edsu]

Thanks for this @markpbaggett -- and my sincere apologies for not seeing your PR sooner.

I was wondering, did you try overriding the CSS rules in your own application that is using whisper-transcript?

[edsu]

We followed up in Slack and it looks like LitElement's use of the Shadow DOM makes it difficult to override CSS. I'm going to look into how people deal with this, perhaps having options for the CSS is the way to go? For example:

<whisper-transcript audio="media.mp3" url="media.json" height=400 sticky></whisper-transcript>

[edsu]

I merged these changes, with the exception of not hard coding the max-height and allowing it to be set like so:

<whisper-transcript maxHeight="400px" audio="media.mp3" url="media.json"></whisper-transcript>

I figure people will want to control that based on where the component is being used. It has been released to NPM as v0.1.1.