213 lines
No EOL
10 KiB
Handlebars
213 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>
|
|
|
|
{{paper-icon playerAreaClickIcon id="play-notification"}}
|
|
|
|
<div id="player-controls">
|
|
{{range-slider start=seekPosition min=0 max=100 connect=filledConnect id="seek-slider" on-change=(action "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 hidden-xs" 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-change=(action "volumeChanged") id="volume-bar" class="hidden-xs"}}
|
|
|
|
<div id="player-time-controls">{{timeElapsedTxt}} / {{timeTotalTxt}}</div>
|
|
|
|
{{#paper-menu as |menu|}}
|
|
{{#menu.trigger}}
|
|
{{#paper-button iconButton=true}}
|
|
{{paper-icon "remove-red-eye" class="player-control-icon"}}
|
|
{{/paper-button}}
|
|
{{/menu.trigger}}
|
|
{{#menu.content width=2 as |content|}}
|
|
{{#each visNames as |name|}}
|
|
{{#content.menu-item onClick=(action "setVisName" name)}}
|
|
{{name}}
|
|
|
|
{{#if (eq currentVisName name)}}
|
|
{{paper-icon "check" classNames=dimmerOnClass}}
|
|
{{/if}}
|
|
{{/content.menu-item}}
|
|
{{/each}}
|
|
{{/menu.content}}
|
|
{{/paper-menu}}
|
|
|
|
{{#if scUrl}}
|
|
<a href= {{scUrl}} class="sound-cloud-link" {{action "gotoSCURL" scUrl}}>
|
|
<img src="assets/images/sc-white.png" id="soundcloud-logo" />
|
|
<img src="assets/images/sc-white-sm.png" id="soundcloud-logo-small" />
|
|
</a>
|
|
{{/if}}
|
|
</div>
|
|
</div>
|
|
|
|
<div id="playlist" class="col-sm-4 col-xs-12">
|
|
<input id="file-input" type="file" accept="audio/*, video/*" multiple="true" />
|
|
|
|
<div id="play-list-controls">
|
|
{{#paper-menu as |menu|}}
|
|
{{#menu.trigger}}
|
|
{{#paper-button iconButton=false}}
|
|
{{paper-icon "playlist add" class="player-control-icon"}} <span id="add-new-music-label">Add new music</span>
|
|
{{/paper-button}}
|
|
{{/menu.trigger}}
|
|
{{#menu.content width=3 as |content|}}
|
|
{{#content.menu-item onClick="addLocalAudio" }}
|
|
{{paper-icon "attachment" class=shuffleClass}} Local File
|
|
{{/content.menu-item}}
|
|
{{#content.menu-item onClick="toggleIsShowingAddSoundCloudModal" }}
|
|
{{paper-icon "cloud" class=shuffleClass}} SoundCloud
|
|
{{/content.menu-item}}
|
|
{{/menu.content}}
|
|
{{/paper-menu}}
|
|
|
|
<span data-toggle="tooltip" data-placement="top auto" class="bootstrap-tooltip" id="shuffleTooltip" data-title= {{shuffleTooltipTxt}}
|
|
{{action "shuffleChanged"}}>{{paper-icon "shuffle" class=shuffleClass}}</span>
|
|
<span data-toggle="tooltip" data-placement="top auto" class="bootstrap-tooltip" id="repeatTooltip" data-title= {{repeatTooltipTxt}}
|
|
{{action "repeatChanged"}}>{{paper-icon repeatIcon class=repeatClass}}</span>
|
|
<span data-toggle="tooltip" data-placement="top auto" class="bootstrap-tooltip hidden-xs" data-title="Clear playlist" {{action "clearPlaylist"}}>{{paper-icon "clear-all" class="player-control-icon"}}</span>
|
|
</div>
|
|
|
|
<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}}
|
|
|
|
{{#ember-collection
|
|
items=playQueue
|
|
cell-layout=(percentage-columns-layout playQueue.length playlistColumns 62) 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">
|
|
{{item.artist}}
|
|
</div>
|
|
{{else}}
|
|
{{item.fileName}}
|
|
{{/if}}
|
|
</div>
|
|
|
|
<span data-toggle="tooltip" data-placement="top auto" data-title="Remove" data-container="body" class="audio-remove-button pointer bootstrap-tooltip"
|
|
{{action "removeAudio" index bubbles=false}}>{{paper-icon "close" classNames="close"}}</span>
|
|
</div>
|
|
{{/ember-collection}}
|
|
</div>
|
|
</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"}} {{if playerBottomDisplayed "display-flex"}}">
|
|
<div id="beat-area" class="col-sm-7 col-xs-12">
|
|
{{#if usingBeatPreferences}}
|
|
<span data-toggle="tooltip" data-placement="top" 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="top" data-title="The range of hues (colors) that the lights may change to on beat."
|
|
class="option-description bootstrap-tooltip">
|
|
Color Range
|
|
</span>
|
|
|
|
{{range-slider start=hueRange orientation="vertical" step=beatOptions.hueRange.step range=beatOptions.hueRange.range connect=hueRangeConnect
|
|
on-change=(action "hueRangeChanged") pips=beatOptions.hueRange.pips}}
|
|
</div>
|
|
|
|
<div id="sensitivity-settings" class="beat-option col-xs-4">
|
|
<span data-toggle="tooltip" data-placement="top" data-title="The sensitivity of the beat detector (more sensitivity results in more registered beats)"
|
|
class="option-description bootstrap-tooltip">
|
|
Sensitivity
|
|
</span>
|
|
|
|
{{range-slider start=threshold orientation="vertical" step=beatOptions.threshold.step range=beatOptions.threshold.range on-change=(action "thresholdChanged") pips=beatOptions.threshold.pips}}
|
|
</div>
|
|
|
|
<div class="beat-option col-xs-4">
|
|
<span data-toggle="tooltip" data-placement="top" data-title="The minimum (off-beat) and maximum (on-beat) brightness of the lights"
|
|
class="option-description bootstrap-tooltip">
|
|
Brightness Range
|
|
</span>
|
|
|
|
{{range-slider start=brightnessRange orientation="vertical" step=beatOptions.brightnessRange.step range=beatOptions.brightnessRange.range connect=hueRangeConnect on-change=(action "brightnessRangeChanged") pips=beatOptions.brightnessRange.pips}}
|
|
</div>
|
|
|
|
<div class="col-xs-12 light-option extra-margin-top">
|
|
<div>
|
|
<div data-toggle="tooltip" data-placement="top auto" data-title="Quickly flash the lights on beat" class="bootstrap-tooltip" {{action "hideTooltip" on="mouseLeave"}}>
|
|
{{paper-checkbox label="Flashing Transitions" value=flashingTransitions onChange=(action (mut flashingTransitions))}}
|
|
</div>
|
|
|
|
<div data-toggle="tooltip" data-placement="top auto" data-title="Slowly cycle the lights through all the colors" class="bootstrap-tooltip" {{action "hideTooltip" on="mouseLeave"}}>
|
|
{{paper-checkbox label="Colorloop" value=colorLoopOn onChange=(action (mut colorLoopOn))}}
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div data-toggle="tooltip" data-placement="top auto" data-title="With ambience turned on your lights will sporadically change color." class="bootstrap-tooltip" {{action "hideTooltip" on="mouseLeave"}}>
|
|
{{paper-checkbox label="Ambience" value=ambienceMode onChange=(action (mut ambienceMode))}}
|
|
</div>
|
|
|
|
<div data-toggle="tooltip" data-placement="top auto" data-title="With blackout turned on your lights will turn off after flashing on a detected beat." class="bootstrap-tooltip" {{action "hideTooltip" on="mouseLeave"}}>
|
|
{{paper-checkbox label="Blackout" value=blackoutMode onChange=(action (mut blackoutMode))}}
|
|
</div>
|
|
</div>
|
|
</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>
|
|
|
|
{{music-tab/add-soundcloud-sound-modal action="handleNewSoundCloudURL" isShowingModal=isShowingAddSoundCloudModal}} |