betajs/betajs-media-components

<div class="{{css}}-dashboard">
    <div class="{{css}}-backbar"></div>
    <div data-selector="recorder-settings" class="{{css}}-settings" ba-show="{{settingsvisible && settingsopen}}">
        <div class="{{css}}-settings-backbar"></div>
        <div data-selector="settings-list-front" class="{{css}}-settings-front">
            <ul data-selector="microphone-settings" ba-repeat="{{microphone :: microphones}}">
                <li tabindex="0"
                    ba-hotkey:space^enter="{{selectMicrophone(microphone.id)}}" onmouseout="this.blur()"
                    onclick="{{selectMicrophone(microphone.id)}}"
                >
                    <input type='radio' name='microphone' value="{{selectedmicrophone == microphone.id}}" />
                    <span></span>
                    <label>
                        {{microphone.label}}
                    </label>
                 </li>
            </ul>
        </div>
    </div>
    <div data-selector="controlbar" class="{{css}}-controlbar">

        <div class="{{css}}-leftbutton-container" ba-show="{{settingsvisible}}">
            <div tabindex="0"
                 ba-hotkey:space^enter="{{settingsopen=!settingsopen}}" onmouseout="this.blur()"
                 data-selector="record-button-icon-cog" class="{{css}}-button-inner {{css}}-button-{{settingsopen ? 'selected' : 'unselected'}}"
                 onclick="{{settingsopen=!settingsopen}}"
                 onmouseenter="{{hover(string('settings'))}}"
                 onmouseleave="{{unhover()}}"
            >
                <i class="{{csscommon}}-icon-cog"></i>
            </div>
        </div>

        <div class="{{css}}-lefticon-container" ba-show="{{settingsvisible}}">
            <div data-selector="record-button-icon-mic" class="{{csscommon}}-icon-inner"
                 onmouseenter="{{hover(string(microphonehealthy ? 'microphonehealthy' : 'microphoneunhealthy'))}}"
                 onmouseleave="{{unhover()}}"
            >
                <i class="{{csscommon}}-icon-mic {{csscommon}}-icon-state-{{microphonehealthy ? 'good' : 'bad' }}"></i>
            </div>
        </div>

        <div class="{{css}}-lefticon-container" ba-show="{{stopvisible && recordingindication}}">
            <div data-selector="recording-indicator" class="{{css}}-recording-indication">
            </div>
        </div>

        <div class="{{css}}-label-container" ba-show="{{controlbarlabel}}">
            <div data-selector="record-label-block" class="{{css}}-label-label">
                {{controlbarlabel}}
            </div>
        </div>

        <div class="{{css}}-rightbutton-container" ba-show="{{recordvisible}}">
            <div tabindex="0"
                 ba-hotkey:space^enter="{{record()}}" onmouseout="this.blur()"
                 data-selector="record-primary-button" class="{{css}}-button-primary"
                 onclick="{{record()}}"
                 onmouseenter="{{hover(string('record-tooltip'))}}"
                 onmouseleave="{{unhover()}}"
            >
                {{string('record')}}
            </div>
        </div>

        <div class="{{css}}-rightbutton-container" ba-show="{{rerecordvisible}}">
            <div tabindex="0"
                 ba-hotkey:space^enter="{{rerecord()}}" onmouseout="this.blur()"
                 data-selector="rerecord-primary-button" class="{{css}}-button-primary"
                 onclick="{{rerecord()}}"
                 onmouseenter="{{hover(string('rerecord-tooltip'))}}"
                 onmouseleave="{{unhover()}}"
            >
                {{string('rerecord')}}
            </div>
        </div>

        <div class="{{css}}-rightbutton-container" ba-show="{{cancelvisible}}">
            <div tabindex="0"
                 ba-hotkey:space^enter="{{cancel()}}" onmouseout="this.blur()"
                 data-selector="cancel-primary-button" class="{{css}}-button-primary"
                 onclick="{{cancel()}}"
                 onmouseenter="{{hover(string('cancel-tooltip'))}}"
                 onmouseleave="{{unhover()}}"
            >
                {{string('cancel')}}
            </div>
        </div>

        <div class="{{css}}-rightbutton-container" ba-show="{{stopvisible}}">
            <div tabindex="0"
                 ba-hotkey:space^enter="{{stop()}}" onmouseout="this.blur()"
                 data-selector="stop-primary-button" class="{{css}}-button-primary {{mintimeindicator ? css + '-disabled': ''}}"
                 title="{{mintimeindicator ? string('stop-available-after').replace('%d', timeminlimit) : string('stop-tooltip')}}"
                 onclick="{{stop()}}"
                 onmouseenter="{{hover( mintimeindicator ? string('stop-available-after').replace('%d', timeminlimit) : string('stop-tooltip'))}}"
                 onmouseleave="{{unhover()}}"
            >
                {{string('stop')}}
            </div>
        </div>

        <div class="{{css}}-rightbutton-container" ba-show="{{pausable && !resumevisible && stopvisible}}">
            <div tabindex="0"
                 ba-hotkey:space^enter="{{pause()}}" onmouseout="this.blur()"
                 data-selector="pause-primary-button" class="{{css}}-button-primary"
                 title="{{string('pause-recorder')}}"
                 onclick="{{pause()}}"
                 onmouseenter="{{hover(string('pause-recorder'))}}"
                 onmouseleave="{{unhover()}}"
            >
                <i class="{{csscommon}}-icon-pause"></i>
            </div>
        </div>

        <div class="{{css}}-rightbutton-container" ba-show="{{pausable && resumevisible}}">
            <div tabindex="0"
                 ba-hotkey:space^enter="{{resume()}}" onmouseout="this.blur()"
                 data-selector="resume-primary-button" class="{{css}}-button-primary"
                 title="{{string('resume-recorder')}}"
                 onclick="{{resume()}}"
                 onmouseenter="{{hover(string('resume-recorder'))}}"
                 onmouseleave="{{unhover()}}"
            >
                <i class="{{csscommon}}-icon-ccw"></i>
            </div>
        </div>


    </div>
</div>