ui/file_manager/audio_player/elements/control_panel.html

<!--
  -- Copyright 2015 The Chromium Authors. All rights reserved.
  -- Use of this source code is governed by a BSD-style license that can be
  -- found in the LICENSE file.
  -->

<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://resources/polymer/v1_0/font-roboto/roboto.html">
<link rel="import" href="chrome://resources/cr_elements/cr_slider/cr_slider.html">
<link rel="import" href="chrome-extension://hhaomjibdihmijegdhdafkllkbggdgoj/foreground/elements/files_icon_button.html">
<link rel="import" href="repeat_button.html">

<dom-module id="control-panel">
  <link rel="import" type="css" href="control_panel.css">
  <template>
    <div class="controls">
      <div class="upper-controls audio-controls">
        <!-- Shuffle toggle button in the bottom line. -->
        <files-icon-button toggles
            id="shuffle"
            class="shuffle-mode media-button toggle"
            active="{{shuffle}}">
        </files-icon-button>

        <!-- RepeatMode toggle button in the bottom line. -->
        <repeat-button
            id="repeat"
            class="repeat-mode media-button"
            repeat-mode="{{repeatMode}}">
        </repeat-button>

        <!-- Prev button in the bottom line. -->
        <files-icon-button
            id="previous"
            class="previous media-button"
            on-click="previousClick">
        </files-icon-button>

        <!-- Play button in the bottom line. -->
        <files-icon-button
            id="play"
            class="play media-button"
            on-click="playClick">
        </files-icon-button>

        <!-- Next button in the bottom line. -->
        <files-icon-button
            id="next"
            class="next media-button"
            on-click="nextClick">
        </files-icon-button>

        <!-- Playlist button in the bottom line. -->
        <files-icon-button toggles
            id="playList"
            class="playlist media-button toggle"
            active="{{playlistExpanded}}">
        </files-icon-button>
      </div>
      <div class="lower-controls time-volume-controls">
        <!-- Play/pause button and seek slider in the bottom line. -->
        <div class="time-container">
          <div class="time-spacer">[[computeTimeString_(duration, duration)]]</div>
          <div class="time">[[computeTimeString_(time, duration)]]</div>
        </div>
        <cr-slider id="timeSlider" max="[[duration]]" value="[[time]]"
            on-dragging-changed="onSeekingChanged_" no-keybindings></cr-slider>
        <!-- Volume button and slider in the bottom line. -->
        <files-icon-button
            id="volumeButton"
            class="volume media-button"
            on-click="volumeClick">
        </files-icon-button>
        <cr-slider id="volumeSlider"></cr-slider>
      </div>
    </div>
  </template>
</dom-module>

<script src="control_panel.js"></script>