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">
      {{range-slider start=seekPosition min=0 max=100 connect=filledConnect id="seek-slider" on-change="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>

      {{#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">
      {{#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}}

      <span {{action "shuffleChanged"}}>{{paper-icon "shuffle" class=shuffleClass}}</span>
      <span {{action "repeatChanged"}}>{{paper-icon repeatIcon class=repeatClass}}</span>
    </div>

    <div id="play-list-area" class="{{playListAreaClass}} ps-container ps-theme-default ps-active-y" {{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>

  </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-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-change="hueRangeChanged" pips=beatOptions.hueRange.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 on-change="brightnessRangeChanged" pips=beatOptions.brightnessRange.pips}}
      </div>

      <div id="sensitivity-settings" 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-change="thresholdChanged" pips=beatOptions.threshold.pips}}
      </div>
    </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>

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