Add support for client or PM side to play/pause ads

[mm-vasyl]

If gsdevtools are not enabled - would still be great to have a play/pause button. For PM, designers, even QA sometimes.

Press spacebar to play/pause.
Press r to reload all visible banners without need to reload a whole page.
Press → to skip to the end frame.
Press . to forward 250ms.
Also works with mouse clicks.

Also add a time tracker.

Update:
Add option to settings to turn off these controls (visual only, keybinds remain):

"controlsOff": false,

Here you can test the feature: https://richmedia-previews-s3bucket-tu6a9uv81tss.s3.amazonaws.com/test-bmw-template/index.html

[mm-paulie]

Fancy! I noticed when adding it to an old project which still had GSDevtools imported inside banner.js, that the animation couldn't be synced properly. But I think this can be ignored as we will not be using this combination anyway. Can also imagine that we would like to turn this functionality off for certain reasons (perhaps a dynamic timeline that is superlong or something). So maybe also create something to turn it off in our settings perhaps? For the rest it looks all smooth to me!

wonky_gsdevtools.mp4

[PabloCarreira]

Fancy! I noticed when adding it to an old project which still had GSDevtools imported inside banner.js, that the animation couldn't be synced properly. But I think this can be ignored as we will not be using this combination anyway. Can also imagine that we would like to turn this functionality off for certain reasons (perhaps a dynamic timeline that is superlong or something). So maybe also create something to turn it off in our settings perhaps? For the rest it looks all smooth to me!

wonky_gsdevtools.mp4

Good flag! I also see it working smooth. same suggestion, would be good to have some sort of hide or turn off those controls. just in case.

[PabloCarreira]

Good enough for me!
This is a great feature for QA and client.

Thanks Vasyl.

[xaviergdiez84]

Approved!