huegasm/mobile/app/pods/components/music-tab/template.hbs

<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 {{action "previous"}}>{{paper-icon "skip-previous" class="player-control-icon"}}</span><!--
          -->{{/if}}<!--
                    --><span {{action "play"}}>{{paper-icon playingIcon class="player-control-icon"}}</span><!--
                  -->{{#if playQueueMultiple}}<!--
                --><span {{action "next" true}}>{{paper-icon "skip-next" action="" class="player-control-icon"}}</span><!--
                  -->{{/if}}<!--
          --><span {{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="#" class="sound-cloud-link"{{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>
              {{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" classNames=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 {{action "useMicAudio"}}>{{paper-icon icon=micIcon class=usingMicAudioClass}}</span>
  {{/if}}

  {{#if usingLocalAudio}}
    <span {{action "shuffleChanged"}}>{{paper-icon "shuffle" class=shuffleClass}}</span>
    <span {{action "repeatChanged"}}>{{paper-icon repeatIcon class=repeatClass}}</span>
    <span {{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"}}>
      {{#if playQueueEmpty}}
        <div id="dragHere">
            Add your music files here
        </div>
        {{paper-icon "library-music" class=dimmerOnClass}}
      {{/if}}

      {{#each playQueue as |item index|}}
        <div class="playlist-item 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 class="audio-remove-button" {{action "removeAudio" index bubbles=false}}>{{paper-icon "close" classNames="close"}}</span>
        </div>
      {{/each}}
    </div>
  {{/if}}
{{/if}}
</div>
</div>

<div id="slide-toggle" class="text-center 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 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 class="option-description">
          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 class="option-description">
          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 class="option-description">
              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>
          {{paper-checkbox value=flashingTransitions onChange=(action (mut flashingTransitions)) label="Flashing Transitions"}}
        </span>

        <span>
          {{paper-checkbox value=colorloopMode onChange=(action (mut colorloopMode)) label="Colorloop"}}
        </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" {{action "clickSpeaker"}}></div>
      </div>
    </div>
  </div>
</div>

{{ember-notify messageStyle='bootstrap' closeAfter=5000}}

{{music-tab/add-soundcloud-sound-modal action="handleNewSoundCloudURL" isShowingModal=isShowingAddSoundCloudModal}}