ui/file_manager/audio_player/elements/control_panel.html

   1 <!--
   2   -- Copyright 2015 The Chromium Authors. All rights reserved.
   3   -- Use of this source code is governed by a BSD-style license that can be
   4   -- found in the LICENSE file.
   5   -->
   6
   7 <link rel="import" href="chrome://resources/polymer/v1_0/polymer/polymer.html">
   8 <link rel="import" href="volume_controller.html">
   9
  10 <dom-module id="control-panel">
  11   <link rel="import" type="css" href="control_panel.css">
  12   <template>
  13     <div class="controls">
  14       <div class="upper-controls time-controls">
  15         <div class="time media-control">
  16           <div class="current">[[time2string_(time)]]</div>
  17         </div>
  18         <div class="progress media-control custom-slider">
  19           <input id="timeInput" name="timeInput" type="range" touch-action="manipulation"
  20                  min="0" max="[[duration]]" value="{{time::input}}">
  21           <div class="bar">
  22             <div class="filled" style$="[[computeProgressBarStyle_(time, duration)]]"></div>
  23             <div class="cap left"></div>
  24             <div class="cap right"></div>
  25           </div>
  26         </div>
  27         <div class="time media-control">
  28           <div class="duration">[[time2string_(duration)]]</div>
  29         </div>
  30       </div>
  31       <div class="lower-controls audio-controls">
  32         <!-- Shuffle toggle button in the bottom line. -->
  33         <button class="shuffle-mode media-button toggle" state="default">
  34           <label>
  35             <input id="shuffleCheckbox"
  36                    type="checkbox"
  37                    checked="{{shuffle::change}}">
  38             <span class="icon"></span>
  39           </label>
  40         </button>
  41
  42         <!-- Repeat toggle button in the bottom line. -->
  43         <button class="repeat media-button toggle" state="default">
  44           <label>
  45             <input id="repeatCheckbox"
  46                    type="checkbox"
  47                    checked="{{repeat::change}}">
  48             <span class="icon"></span>
  49           </label>
  50         </button>
  51
  52         <!-- Prev button in the bottom line. -->
  53         <button class="previous media-button"
  54                state="default"
  55                on-click="previousClick">
  56           <div class="normal default"></div>
  57           <div class="disabled"></div>
  58         </button>
  59
  60         <!-- Play button in the bottom line. -->
  61         <button class="play media-control media-button"
  62                 state$="[[computePlayState_(playing)]]"
  63                 on-click="playClick">
  64           <div class="normal playing"></div>
  65           <div class="normal ended"></div>
  66           <div class="disabled"></div>
  67         </button>
  68
  69         <!-- Next button in the bottom line. -->
  70         <button class="next media-button"
  71                 state="default"
  72                 on-click="nextClick">
  73           <div class="normal default"></div>
  74           <div class="disabled"></div>
  75         </button>
  76
  77         <div id="volumeContainer"
  78              class="default-hidden"
  79              anchor-point="bottom center">
  80           <volume-controller id="volumeSlider" value="{{volume}}"
  81                              width="32" height="85" value="50">
  82           </volume-controller>
  83
  84           <polymer-anchor-point id="anchorHelper"></polymer-anchor-point>
  85         </div>
  86
  87         <!-- Volume button in the bottom line. -->
  88         <button id="volumeButton"
  89                 class="volume media-button toggle"
  90                 state="default"
  91                 anchor-point="bottom center">
  92           <label>
  93             <input type="checkbox" checked="{{volumeSliderShown::change}}">
  94             <span class="icon"></span>
  95           </label>
  96         </button>
  97
  98         <!-- Playlist button in the bottom line. -->
  99         <button id="playlistButton"
 100                 class="playlist media-button toggle"
 101                 state="default">
 102           <label>
 103             <input type="checkbox" checked="{{expanded::change}}">
 104             <span class="icon"></span>
 105           </label>
 106         </button>
 107       </div>
 108     </div>
 109   </template>
 110 </dom-module>
 111
 112 <script src="control_panel.js"></script>