116 lines
No EOL
6.1 KiB
Handlebars
116 lines
No EOL
6.1 KiB
Handlebars
<div class="row">
|
|
<div id="playerArea" class="col-sm-8 col-xs-12" {{action "playerAreaPlay"}}>
|
|
|
|
<div id="playNotification" class="material-icons {{if fadeOutNotification "fadeOut"}} {{if playing "play-arrow" "pause"}}"></div>
|
|
<div id="playerControls">
|
|
{{range-slider start=seekPosition min=0 max=100 id="seekSlider" slide="seekChanged"}}
|
|
|
|
{{#if playQueueMultiple}}
|
|
<span data-toggle="tooltip" data-placement="top" class="bootstrapTooltip" id="prevTooltip" data-title={{prevTooltipTxt}} {{action "previous"}}>{{paper-icon icon="skip-previous" class="playerControllIcon"}}</span><!--
|
|
-->{{/if}}<!--
|
|
--><span data-toggle="tooltip" data-placement="top" id="playingTooltip" class="bootstrapTooltip" data-title={{playingTooltipTxt}} {{action "play"}}>{{paper-icon icon=playingIcon class="playerControllIcon"}}</span><!--
|
|
-->{{#if playQueueMultiple}}<!--
|
|
--><span data-toggle="tooltip" data-placement="top" class="bootstrapTooltip" data-title="Next" {{action "next"}}>{{paper-icon icon="skip-next" action="" class="playerControllIcon"}}</span><!--
|
|
-->{{/if}}<!--
|
|
--><span data-toggle="tooltip" data-placement="top" class="bootstrapTooltip" id="volumeMutedTooltip" data-title={{volumeMutedTooltipTxt}} {{action "volumeMutedChanged"}}>{{paper-icon icon=volumeClass class="playerControllIcon volumeButton"}}</span><!--
|
|
-->{{range-slider start=volume min=0 max=100 slide="volumeChanged" id="volumeBar"}}
|
|
|
|
<div id="playerTimeControls">{{timeElapsedTxt}} / {{timeTotalTxt}}</div>
|
|
|
|
<span class="pull-right">
|
|
<span data-toggle="tooltip" data-placement="top" class="bootstrapTooltip"
|
|
data-title="Visualizations" {{action "toggleVisualizations"}}>{{paper-icon icon="remove-red-eye" class="playerControllIcon"}}
|
|
</span>
|
|
<span data-toggle="tooltip" data-placement="top" class="bootstrapTooltip"
|
|
data-title="Full screen" {{action "fullscreen"}}>{{paper-icon icon="fullscreen" class="playerControllIcon"}}
|
|
</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="playlist" class="col-sm-4 col-xs-12">
|
|
<input id="fileInput" type="file" accept="audio/*" multiple="true" />
|
|
|
|
<div id="playListControls">
|
|
<span data-toggle="tooltip" data-placement="bottom auto" class="bootstrapTooltip" id="shuffleTooltip"
|
|
data-title={{shuffleTooltipTxt}} {{action "shuffleChanged"}}>{{paper-icon icon="shuffle" class=shuffleClass}}</span>
|
|
|
|
<span data-toggle="tooltip" data-placement="bottom auto" class="bootstrapTooltip" id="repeatTooltip"
|
|
data-title={{repeatTooltipTxt}} {{action "repeatChanged"}}>{{paper-icon icon=repeatIcon class=repeatClass}}</span>
|
|
|
|
<span data-toggle="tooltip" data-placement="bottom" data-title="Add new music"
|
|
class="pull-right bootstrapTooltip" {{action "addAudio"}}>{{paper-icon icon="add" class="playerControllIcon" }}</span>
|
|
</div>
|
|
|
|
<div id="playListArea" class={{playListAreaClass}} {{action "playListAreaAddAudio"}} {{action "playListAreaDragOver" on="dragOver"}} {{action "playListAreaDragLeave" on="dragLeave"}} {{action "dropFiles" on="drop"}}>
|
|
{{#if (or playQueueEmpty dragging)}}
|
|
<div id="dragHere">
|
|
{{#if dragging}}
|
|
Drag your music files here
|
|
{{else}}
|
|
Add your music files here
|
|
{{/if}}
|
|
</div>
|
|
{{paper-icon icon="library-music"}}
|
|
{{/if}}
|
|
|
|
{{#each playQueue as |item index|}}
|
|
<div class="playlistItem cursorPointer {{if (eq index playQueuePointer) "active"}} {{if dragging "hidden"}}" {{action "goToSong" index bubbles=false}}>
|
|
{{#if item.title}}
|
|
{{item.title}}
|
|
<div class="songArtist">{{item.artist}}</div>
|
|
{{else}}
|
|
{{item.filename}}
|
|
{{/if}}
|
|
<div data-toggle="tooltip" data-placement="bottom auto" data-title="Remove from playlist" class="audioRemoveButton cursorPointer bootstrapTooltip" {{action "removeAudio" index bubbles=false}}>{{paper-icon icon="close"}}</div></div>
|
|
{{/each}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="playerBottom" class="row">
|
|
<div id="beatArea" class="col-sm-8 col-xs-12">
|
|
<div id="vertDivider" class="hidden-xs"></div>
|
|
{{light-group lightsData=lightsData activeLights=activeLights action='clickLight' apiURL=apiURL noHover=true}}
|
|
|
|
<div id="beatOptionGroup">
|
|
<span class="beatOption">
|
|
{{range-slider start=threshold orientation="vertical" range=beatOptions.threshold.range slide="thresholdChanged" pips=beatOptions.threshold.pips}}
|
|
Max. Intensity
|
|
</span>
|
|
|
|
<span class="beatOption">
|
|
{{range-slider start=decay orientation="vertical" step=beatOptions.decay.step range=beatOptions.decay.range slide="decayChanged" pips=beatOptions.decay.pips}}
|
|
Decay Rate
|
|
</span>
|
|
|
|
<span class="beatOption">
|
|
{{range-slider start=frequency orientation="vertical" step=beatOptions.frequency.step range=beatOptions.frequency.range connect=true slide="frequencyChanged" pips=beatOptions.frequency.pips}}
|
|
Frequency Range
|
|
</span>
|
|
</div>
|
|
|
|
<div id="playerButtonGroup">
|
|
{{#paper-button raised=true warn=true action="defaultControls"}}Default{{/paper-button}}
|
|
</div>
|
|
</div>
|
|
|
|
<div id="beatContainer" class="col-sm-4 col-xs-12">
|
|
{{#liquid-if speakerViewed}}
|
|
<div id="beatSpeaker">
|
|
<img src="assets/images/speaker-outer.png" />
|
|
<div id="beatSpeakerCenter">
|
|
<img src="assets/images/speaker-inner.png" class="cursorPointer" {{action "clickSpeaker"}} />
|
|
</div>
|
|
</div>
|
|
{{else}}
|
|
<div id ="beatHistory">
|
|
{{#each beatHistory as |item|}}
|
|
<p>{{{item}}}</p>
|
|
{{/each}}
|
|
</div>
|
|
{{/liquid-if}}
|
|
|
|
{{#paper-switch checked=speakerViewed}} {{speakerLabel}} {{/paper-switch}}
|
|
</div>
|
|
</div> |