betajs/betajs-media-components

<div tabindex="0" data-selector="play-button"
     ba-hotkey:space^enter="{{play()}}" onmouseout="this.blur()"
     onkeydown="{{tab_index_move(domEvent, null, 'player-toggle-overlay')}}"
     class="{{css}}-playbutton-container" ba-click="{{play()}}" title="{{string('tooltip')}}"
>
    <div class="{{css}}-playbutton-button" data-testid="{{testid}}-overlay-play-button"></div>
</div>
<div ba-show="{{showduration && (duration != 0 && duration != undefined)}}" class="{{css}}-playbutton-duration">
    {{formatTime(duration)}}
</div>
<div class="{{css}}-rerecord-bar" ba-if="{{rerecordable || submittable}}">
    <div class="{{css}}-rerecord-backbar"></div>
    <div class="{{css}}-rerecord-frontbar">
        <div class="{{css}}-rerecord-button-container" ba-if="{{submittable && !trimmingmode}}">
            <div tabindex="0" data-selector="player-submit-button"
                 ba-hotkey:space^enter="{{submit()}}" onmouseout="this.blur()"
                 class="{{css}}-rerecord-button" onclick="{{submit()}}">
                {{string('submit-video')}}
            </div>
        </div>
        <div class="{{css}}-rerecord-button-container" ba-if="{{rerecordable && !trimmingmode}}">
            <div tabindex="0" data-selector="player-rerecord-button"
                 ba-hotkey:space^enter="{{rerecord()}}" onmouseout="this.blur()"
                 class="{{css}}-rerecord-button" onclick="{{rerecord()}}">
                {{string('rerecord')}}
            </div>
        </div>
        <div class="{{css}}-rerecord-button-container" ba-if="{{trimmingmode}}">
            <div tabindex="0" data-selector="player-trim-button"
                 ba-hotkey:space^enter="{{play()}}" onmouseout="this.blur()"
                 class="{{css}}-rerecord-button" onclick="{{play()}}">
                {{string('trim')}}
            </div>
        </div>
        <div class="{{css}}-rerecord-button-container" ba-if="{{trimmingmode}}">
            <div tabindex="0" data-selector="player-skip-button"
                 ba-hotkey:space^enter="{{skip()}}" onmouseout="this.blur()"
                 class="{{css}}-rerecord-button" onclick="{{skip()}}">
                {{string('skip')}}
            </div>
        </div>
    </div>
</div>