betajs/betajs-media-components

<div class="{{css}}-dashboard">
    <div tabindex="2" data-selector="progress-bar-inner" class="{{css}}-progressbar {{disableseeking ? cssplayer + '-disabled' : ''}}"
         ba-hotkey:right="{{seek(position + skipseconds)}}"
         ba-hotkey:left="{{seek(position - skipseconds)}}"
         ba-hotkey:alt+right="{{seek(position + skipseconds * 3)}}"
         ba-hotkey:alt+left="{{seek(position - skipseconds * 3)}}"
         onmouseout="this.blur()"
         ontouchstart="{{startUpdatePosition(domEvent)}}"
         onmousedown="{{startUpdatePosition(domEvent)}}"
    >
        <div class="{{css}}-progressbar-cache" ba-styles="{{{width: Math.round(duration ? cached / duration * 100 : 0) + '%'}}}"></div>
        <div class="{{css}}-progressbar-position"
             ba-styles="{{{width: Math.round(duration ? position / duration * 100 : 0) + '%'}}}"
             title="{{string('audio-progress')}}"
        >
            <div class="{{css}}-progressbar-button"></div>
        </div>
    </div>

    <div class="{{css}}-backbar"></div>

    <div class="{{css}}-controlbar">

        <div tabindex="0" data-selector="submit-audio-button"
             ba-hotkey:space^enter="{{submit()}}" onmouseout="this.blur()"
             class="{{css}}-leftbutton-container"
             ba-if="{{submittable}}" ba-click="{{submit()}}">
            <div class="{{css}}-button-inner">
                {{string('submit-audio')}}
            </div>
        </div>

        <div tabindex="0" data-selector="button-icon-ccw"
             ba-hotkey:space^enter="{{rerecord()}}" onmouseout="this.blur()"
             class="{{css}}-leftbutton-container" ba-if="{{rerecordable}}"
             ba-click="{{rerecord()}}" title="{{string('rerecord-audio')}}"
        >
            <div class="{{css}}-button-inner">
                <i class="{{csscommon}}-icon-ccw"></i>
            </div>
        </div>

        <div tabindex="0" data-selector="button-icon-play"
             onmouseout="this.blur()"
             class="{{css}}-leftbutton-container" title="{{string('play-audio')}}"
             onkeydown="{{tab_index_move(domEvent, null, 'button-icon-pause')}}" ba-if="{{!playing}}" ba-click="{{play()}}"
        >
            <div class="{{css}}-button-inner">
                <i class="{{csscommon}}-icon-play"></i>
            </div>
        </div>

        <div tabindex="0" data-selector="button-icon-pause"
             onmouseout="this.blur()"
             class="{{css}}-leftbutton-container {{disablepause ? cssplayer + '-disabled' : ''}}"
             onkeydown="{{tab_index_move(domEvent, null, 'button-icon-play')}}" ba-if="{{playing}}" ba-click="{{pause()}}"
             title="{{disablepause ? string('pause-audio-disabled') : string('pause-audio')}}"
        >
            <div class="{{css}}-button-inner">
                <i class="{{csscommon}}-icon-pause"></i>
            </div>
        </div>

        <div class="{{css}}-time-container">
            <div class="{{css}}-time-value" title="{{string('elapsed-time')}}">{{formatTime(position)}}</div>
            <div class="{{css}}-time-sep">/</div>
            <div class="{{css}}-time-value" title="{{string('total-time')}}">{{formatTime(duration || position)}}</div>
        </div>

        <div data-selector="audio-title-block" class="{{css}}-title-container" ba-if="{{title}}">
            <p class="{{css}}-title">
                {{title}}
            </p>
        </div>

        <div class="{{css}}-volumebar">
            <div tabindex="5" data-selector="button-volume-bar"
                 ba-hotkey:right="{{set_volume(volume + 0.1)}}" ba-hotkey:left="{{set_volume(volume - 0.1)}}"
                 ba-hotkey:up="{{set_volume(1)}}" ba-hotkey:down="{{set_volume(0)}}"
                 onmouseout="this.blur()"
                 class="{{css}}-volumebar-inner"
                 ontouchstart="{{startUpdateVolume(domEvent)}}"
                 ontouchmove="{{progressUpdateVolume(domEvent)}}"
                 ontouchend="{{stopUpdateVolume(domEvent); this.blur()}};"
                 onmousedown="{{startUpdateVolume(domEvent)}}"
                 onmouseup="{{stopUpdateVolume(domEvent)}}"
                 onmouseleave="{{stopUpdateVolume(domEvent)}}"
                 onmousemove="{{progressUpdateVolume(domEvent)}}"
            >
                <div class="{{css}}-volumebar-position" ba-styles="{{{width: Math.min(100, Math.round(volume * 100)) + '%'}}}">
                    <div class="{{css}}-volumebar-button" title="{{string('volume-button')}}"></div>
                </div>
            </div>
        </div>

        <div tabindex="4" data-selector="button-icon-volume"
             ba-hotkey:space^enter="{{toggle_volume()}}" onmouseout="this.blur()"
             class="{{css}}-rightbutton-container"
             ba-click="{{toggle_volume()}}" title="{{string(volume > 0 ? 'volume-mute' : 'volume-unmute')}}">
            <div class="{{css}}-button-inner">
                <i class="{{csscommon + '-icon-volume-' + (volume >= 0.5 ? 'up' : (volume > 0 ? 'down' : 'off')) }}"></i>
            </div>
        </div>

    </div>
</div>