212 lines
No EOL
10 KiB
Handlebars
212 lines
No EOL
10 KiB
Handlebars
<div class="row" id="step1">
|
|
<div id="player-area" class="col-sm-8 col-xs-12 {{if (eq "None" currentVisName) "display-icon"}}" {{action "playerAreaPlay"}}>
|
|
<canvas id="visualization"></canvas>
|
|
<div id="artwork"><img src={{largeArtworkPic}}></div>
|
|
<div id="play-notification" class="material-icons {{if playing "play-arrow" "pause"}}"></div>
|
|
|
|
<div id="player-controls">
|
|
{{#if usingLocalAudio}}
|
|
{{range-slider start=seekPosition min=0 max=100 connect=filledConnect id="seek-slider" on-slide="seekChanged"}}
|
|
|
|
{{#if playQueueNotEmpty}}
|
|
<span data-toggle="tooltip" data-placement="top" class="bootstrap-tooltip" id="prevTooltip"
|
|
data-title={{prevTooltipTxt}} {{action "previous"}}>{{paper-icon "skip-previous" class="player-control-icon"}}</span><!--
|
|
-->{{/if}}<!--
|
|
--><span data-toggle="tooltip" data-placement="top" id="playingTooltip" class="bootstrap-tooltip"
|
|
data-title={{playingTooltipTxt}} {{action "play"}}>{{paper-icon playingIcon class="player-control-icon"}}</span><!--
|
|
-->{{#if playQueueMultiple}}<!--
|
|
--><span data-toggle="tooltip" data-placement="top" class="bootstrap-tooltip"
|
|
data-title="Next" {{action "next" true}}>{{paper-icon "skip-next" action="" class="player-control-icon"}}</span><!--
|
|
-->{{/if}}<!--
|
|
--><span data-toggle="tooltip" data-placement="top" class="bootstrap-tooltip" id="volumeMutedTooltip"
|
|
data-title={{volumeMutedTooltipTxt}} {{action "volumeMutedChanged"}}>{{paper-icon icon=volumeIcon class=volumeMutedClass}}</span><!--
|
|
-->{{range-slider start=volume min=0 max=100 connect=filledConnect on-slide="volumeChanged" id="volume-bar" class="hidden-xs"}}
|
|
|
|
<div id="player-time-controls">{{timeElapsedTxt}} / {{timeTotalTxt}}</div>
|
|
{{/if}}
|
|
|
|
<span class="pull-right">
|
|
{{#if scUrl}}
|
|
<a href="#" data-toggle="tooltip" data-placement="top" class="sound-cloud-link bootstrap-tooltip" data-title="Listen on SoundCloud" {{action "gotoSCURL" scUrl}}>
|
|
<img src="assets/images/sc-white.png" class="hidden-xs" />
|
|
<img src="assets/images/sc-white-sm.png" class="visible-xs-inline" />
|
|
</a>
|
|
{{/if}}
|
|
<span class="dropup">
|
|
<span class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
|
|
<span data-toggle="tooltip" data-placement="top" class="bootstrap-tooltip" data-title="Visualizations" {{action "hideTooltip"}}>
|
|
{{paper-icon "remove-red-eye" class="player-control-icon"}}
|
|
</span>
|
|
</span>
|
|
|
|
<ul class="dropdown-menu visualizers-menu">
|
|
{{#each visNames as |name|}}
|
|
<li>
|
|
<a href="#" {{action "setVisName" name}}>{{name}}
|
|
{{#if (eq currentVisName name)}}
|
|
{{paper-icon "check" class=dimmerOnClass}}
|
|
{{/if}}
|
|
</a>
|
|
</li>
|
|
{{/each}}
|
|
</ul>
|
|
</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="playlist" class="col-sm-4 col-xs-12">
|
|
<input id="file-input" type="file" accept="audio/*" multiple="true"/>
|
|
|
|
<div id="play-list-controls">
|
|
{{#if usingLocalAudio}}
|
|
<button class="dropdown-toggle pull-right add-new-music" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
|
|
Add new music
|
|
<span class="caret"></span>
|
|
</button>
|
|
|
|
<ul id="add-music-choices" class="dropdown-menu">
|
|
<li><a href="#" {{action "addLocalAudio"}}>Local</a></li>
|
|
<li><a href="#" {{action "toggleIsShowingAddSoundCloudModal"}}>SoundCloud</a></li>
|
|
</ul>
|
|
{{/if}}
|
|
|
|
{{#if usingMicSupported}}
|
|
<span data-toggle="tooltip" data-placement="bottom auto" class="bootstrap-tooltip" id="using-mic-audio-tooltip" data-title={{usingMicAudioTooltipTxt}} {{action "useMicAudio"}}>{{paper-icon icon=micIcon class=usingMicAudioClass}}</span>
|
|
{{/if}}
|
|
|
|
{{#if usingLocalAudio}}
|
|
<span data-toggle="tooltip" data-placement="bottom auto" class="bootstrap-tooltip" id="shuffleTooltip" data-title={{shuffleTooltipTxt}} {{action "shuffleChanged"}}>{{paper-icon "shuffle" class=shuffleClass}}</span>
|
|
<span data-toggle="tooltip" data-placement="bottom auto" class="bootstrap-tooltip" id="repeatTooltip" data-title={{repeatTooltipTxt}} {{action "repeatChanged"}}>{{paper-icon repeatIcon class=repeatClass}}</span>
|
|
<span data-toggle="tooltip" data-placement="bottom auto" class="bootstrap-tooltip" data-title="Clear playlist" {{action "clearPlaylist"}}>{{paper-icon "clear-all" class="player-control-icon"}}</span>
|
|
{{/if}}
|
|
</div>
|
|
|
|
{{#if usingMicAudio}}
|
|
<div id="play-area-mic" class="{{if dimmerOn "dimmerOn"}}">
|
|
{{paper-icon "mic" class=dimmerOnClass}}
|
|
</div>
|
|
{{else}}
|
|
{{#if usingLocalAudio}}
|
|
<div id="play-list-area" class={{playListAreaClass}} {{action "addLocalAudio"}} {{action "playerListAreaDragOver" on="dragOver"}} {{action "playerListAreaDragLeave" 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 "library-music" class=dimmerOnClass}}
|
|
{{/if}}
|
|
|
|
{{#each playQueue as |item index|}}
|
|
<div class="playlist-item pointer track{{index}} {{if (eq index playQueuePointer) "active"}} {{if dragging "hidden"}}" {{action "goToSong" index true bubbles=false}}>
|
|
{{#if item.picture}}
|
|
<img class="album-art" src={{item.picture}}>
|
|
{{else}}
|
|
<img class="album-art" src="assets/images/missingArtwork.png">
|
|
{{/if}}
|
|
|
|
<div class="song-info">
|
|
{{#if item.title}}
|
|
<div class="song-title">{{item.title}}</div>
|
|
<div class="song-artist">
|
|
{{#if item.artistUrl}}
|
|
<a href="#" {{action "gotoURL" item.artistUrl bubbles=false}}>{{item.artist}}</a>
|
|
{{else}}
|
|
{{item.artist}}
|
|
{{/if}}
|
|
</div>
|
|
{{else}}
|
|
{{item.fileName}}
|
|
{{/if}}
|
|
</div>
|
|
|
|
<span data-toggle="tooltip" data-placement="bottom auto" data-title="Remove" data-container="body" class="audio-remove-button pointer bootstrap-tooltip" {{action "removeAudio" index bubbles=false}}>{{paper-icon "close"}}</span>
|
|
</div>
|
|
{{/each}}
|
|
</div>
|
|
{{/if}}
|
|
{{/if}}
|
|
</div>
|
|
</div>
|
|
|
|
<div id="slide-toggle" class="text-center pointer row" {{action "slideTogglePlayerBottom"}}>
|
|
<div class="col-xs-offset-5 col-xs-2">
|
|
{{paper-icon beatDetectionAreaArrowIcon id="beat-detection-area-arrow-icon"}}
|
|
</div>
|
|
</div>
|
|
|
|
<div id="player-bottom" class="row {{if dimmerOn "dimmerOn"}}">
|
|
<div id="beat-area" class="col-sm-7 col-xs-12">
|
|
{{#if usingBeatPreferences}}
|
|
<span data-toggle="tooltip" data-placement="bottom" data-title="Using the saved sensitivity preference from the last time you listened to this song" class="bootstrap-tooltip" id="save-beat-preferences-star">
|
|
{{paper-icon "star" class=dimmerOnClass}}
|
|
</span>
|
|
{{/if}}
|
|
|
|
<div class="row" id="beat-option-row">
|
|
<div class="beat-option col-xs-4">
|
|
<span data-toggle="tooltip" data-placement="bottom" data-title="The sensitivity of the beat detector ( more sensitivity results in more registered beats )" class="optionDescription bootstrap-tooltip">
|
|
Sensitivity
|
|
</span>
|
|
|
|
{{range-slider start=threshold orientation="vertical" step=beatOptions.threshold.step range=beatOptions.threshold.range on-slide="thresholdChanged" pips=beatOptions.threshold.pips}}
|
|
</div>
|
|
|
|
<div class="beat-option col-xs-4">
|
|
<span data-toggle="tooltip" data-placement="bottom" data-title="The range of hues ( colors ) that the lights may change to on beat." class="optionDescription bootstrap-tooltip">
|
|
Hue Range
|
|
</span>
|
|
|
|
{{range-slider start=hueRange orientation="vertical" step=beatOptions.hueRange.step range=beatOptions.hueRange.range connect=hueRangeConnect on-slide="hueRangeChanged" pips=beatOptions.hueRange.pips}}
|
|
</div>
|
|
|
|
{{#if usingMicAudio}}
|
|
<div class="beat-option col-xs-4">
|
|
<span data-toggle="tooltip" data-placement="bottom" data-title="The coefficient to boost the microphone signal by" class="optionDescription bootstrap-tooltip">
|
|
Mic Boost
|
|
</span>
|
|
|
|
{{range-slider start=micBoost orientation="vertical" step=beatOptions.micBoost.step range=beatOptions.micBoost.range on-slide="micBoostChanged" pips=beatOptions.micBoost.pips}}
|
|
</div>
|
|
{{/if}}
|
|
|
|
<div id="light-option" class="beat-option col-xs-4">
|
|
<span data-toggle="tooltip" data-placement="bottom auto" data-title="Quickly flash the lights on beat" class="bootstrap-tooltip" {{action "hideTooltip" on="mouseLeave"}}>
|
|
{{#paper-checkbox checked=flashingTransitions}}Flashing Transitions{{/paper-checkbox}}
|
|
</span>
|
|
|
|
<span data-toggle="tooltip" data-placement="bottom auto" data-title="Slowly cycle the lights through all the colors" class="bootstrap-tooltip" {{action "hideTooltip" on="mouseLeave"}}>
|
|
{{#paper-checkbox checked=colorloopMode}}Colorloop{{/paper-checkbox}}
|
|
</span>
|
|
|
|
{{!--<span data-toggle="tooltip" data-placement="bottom auto" data-title="Periodically turn the lights on and off to create a cool looking ambience" class="bootstrap-tooltip" {{action "hideTooltip" on="mouseLeave"}}>
|
|
{{#paper-checkbox checked=ambienceMode}}Ambience{{/paper-checkbox}}
|
|
</span>--}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="beat-container" class="col-sm-5 col-xs-12">
|
|
<div class="bezel">
|
|
<div class="rivet1"></div>
|
|
<div class="rivet2"></div>
|
|
<div class="rivet3"></div>
|
|
<div class="rivet4"></div>
|
|
<div class="rivet5"></div>
|
|
<div class="rivet6"></div>
|
|
<div class="rivet7"></div>
|
|
<div class="rivet8"></div>
|
|
|
|
<div id="beat-speaker-center-outer">
|
|
<div id="beat-speaker-center-inner" class="pointer" {{action "clickSpeaker"}}></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{ember-notify messageStyle='bootstrap' closeAfter=5000}}
|
|
|
|
{{music-tab/add-soundcloud-sound-modal action="handleNewSoundCloudURL" isShowingModal=isShowingAddSoundCloudModal}} |