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

<div class="row" id="step1">
  <div id="player-area" class="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">
      {{#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}}

        <div id="player-time-controls">{{timeElapsedTxt}} / {{timeTotalTxt}}</div>
      {{/if}}

      {{#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" class="hidden-xs" />
            <img src="assets/images/sc-white-sm.png" class="visible-xs-inline" />
        </a>
      {{/if}}
  </div>
</div>

<div id="playlist" class="col-xs-12">
<input id="file-input" type="file" accept="audio/*" multiple="true"/>

<div id="play-list-controls">
  {{#if usingLocalAudio}}
    {{#paper-menu as |menu|}}
      {{#menu.trigger}}
        {{#paper-button iconButton=false}}
          {{paper-icon "playlist add" class="player-control-icon"}} Add new music
        {{/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}}
  {{/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>
  {{/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-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-6">
        <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>

        <div class="beat-option col-xs-6">
        <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>

      {{#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>
  </div>

  <div class="beat-option col-xs-6">
    {{paper-checkbox value=flashingTransitions onChange=(action (mut flashingTransitions)) label="Flashing Transitions"}}
  </div>

  <div class="beat-option col-xs-6">
    {{paper-checkbox value=colorloopMode onChange=(action (mut colorloopMode)) label="Colorloop"}}
  </div>

  <div id="beat-container" class="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}}