ui/file_manager/audio_player/audio_player.html

   1 <!--
   2   -- Copyright 2014 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 <!DOCTYPE HTML>
   7 <html>
   8 <head>
   9   <!-- We have to set some default title, or chrome will use the page name.
  10     -- As soon as the i18n'd strings are loaded we replace it with the correct
  11     -- string. Until then, use an invisible non-whitespace character.
  12     -->
  13   <title>&#xFEFF;</title>
  14   <link rel="stylesheet" type="text/css" href="css/audio_player.css">
  15
  16   <!-- Don't load mediaplayer_scripts.js when flattening is disabled -->
  17   <if expr="False"><!-- </if>
  18     <script src="js/audio_player_scripts.js"></script>
  19   <if expr="False"> --></if>
  20   <if expr="False">
  21     <!-- This section is used when the file manager is loaded with
  22          'filemgr-ext-path' command-line flag. -->
  23     <!-- Keep the list in sync with audio_player_scripts.js. -->
  24     <script src="../../webui//resources/js/cr.js"></script>
  25     <script src="../../webui/resources/js/cr/event_target.js"></script>
  26     <script src="../../webui/resources/js/cr/ui/array_data_model.js">
  27     </script>
  28
  29     <script src="../../../third_party/polymer/platform/platform.js"></script>
  30     <script src="../../../third_party/polymer/polymer/polymer.js"></script>
  31
  32     <script src="../file_manager/common/js/async_util.js"></script>
  33     <script src="../file_manager/common/js/file_type.js"></script>
  34     <script src="../file_manager/common/js/util.js"></script>
  35     <script src="../file_manager/common/js/volume_manager_common.js"></script>
  36     <script src="../file_manager/foreground/js/volume_manager_wrapper.js"></script>
  37     <script src="../file_manager/foreground/js/metadata/metadata_cache.js"></script>
  38
  39     <script src="js/audio_player.js"></script>
  40
  41     <script src="elements/track_list.js"></script>
  42     <script src="elements/control_panel.js"></script>
  43     <script src="elements/volume_controller.js"></script>
  44     <script src="elements/audio_player.js"></script>
  45    </if>
  46  </head>
  47 <body>
  48   <!-- Definition of <track-list> tag. -->
  49   <polymer-element name="track-list" attributes="tracks">
  50     <template>
  51       <link rel="stylesheet" href="elements/track_list.css"></link>
  52       <template id="tracks" repeat="{{track, index in tracks}}">
  53         <div class="track" active?="{{track.active}}" index="{{index}}" on-click="{{trackClicked}}">
  54           <div class="data">
  55             <div class="data-title">{{track.title}}</div>
  56             <div class="data-artist">{{track.artist}}</div>
  57           </div>
  58         </div>
  59       </template>
  60     </template>
  61   </polymer-element>
  62
  63   <!-- Definition of <control-panel> tag. -->
  64   <polymer-element name="control-panel">
  65     <template>
  66       <link rel="stylesheet" href="elements/control_panel.css"></link>
  67
  68       <div class="controls">
  69         <div class="upper-controls time-controls">
  70           <div class="time media-control">
  71             <div class="current">{{timeString_}}</div>
  72           </div>
  73           <div class="progress media-control custom-slider">
  74             <input name="timeInput"
  75                    type="range"
  76                    min="0" max="{{duration}}" value="{{time}}">
  77             <div class="bar">
  78               <div class="filled" style="width: {{time/duration*100}}%;"></div>
  79               <div class="cap left"></div>
  80               <div class="cap right"></div>
  81             </div>
  82           </div>
  83           <div class="time media-control">
  84             <div class="duration">{{durationString_}}</div>
  85           </div>
  86         </div>
  87         <div class="lower-controls audio-controls">
  88           <!-- Shuffle toggle button in the bottom line. -->
  89           <button class="shuffle-mode media-button toggle" state="default">
  90             <label>
  91               <input id="shuffleCheckbox"
  92                      type="checkbox"
  93                      checked="{{model.shuffle}}"></input>
  94               <span class="icon"></span>
  95             </label>
  96           </button>
  97
  98           <!-- Repeat toggle button in the bottom line. -->
  99           <button class="repeat media-button toggle" state="default">
 100             <label>
 101               <input id="repeatCheckbox"
 102                      type="checkbox"
 103                      checked="{{model.repeat}}"></input>
 104               <span class="icon"></span>
 105             </label>
 106           </button>
 107
 108           <!-- Prev button in the bottom line. -->
 109           <button class="previous media-button"
 110                  state="default"
 111                  on-click="{{previousClick}}">
 112             <div class="normal default"></div>
 113             <div class="disabled"></div>
 114           </button>
 115
 116           <!-- Play button in the bottom line. -->
 117           <button class="play media-control media-button"
 118                   state='{{playing ? "playing" : "ended"}}'
 119                   on-click="{{playClick}}">
 120             <div class="normal playing"></div>
 121             <div class="normal ended"></div>
 122             <div class="disabled"></div>
 123           </button>
 124
 125           <!-- Next button in the bottom line. -->
 126           <button class="next media-button"
 127                   state="default"
 128                   on-click="{{nextClick}}">
 129             <div class="normal default"></div>
 130             <div class="disabled"></div>
 131           </button>
 132
 133           <div id="volumeContainer"
 134                class="default-hidden"
 135                anchor-point="bottom center">
 136             <volume-controller id="volumeSlider"
 137                                width="32" height="85" value="50">
 138             </volume-controller>
 139
 140             <polymer-anchor-point id="anchorHelper"></polymer-anchor-point>
 141           </div>
 142
 143           <!-- Volume button in the bottom line. -->
 144           <button id="volumeButton"
 145                   class="volume media-button toggle"
 146                   state="default"
 147                   on-click="{{volumeButtonClick}}"
 148                   anchor-point="bottom center">
 149             <label>
 150               <input type="checkbox" checked="{{volumeSliderShown}}"></input>
 151               <span class="icon"></span>
 152             </label>
 153           </button>
 154
 155           <!-- Playlist button in the bottom line. -->
 156           <button id="playlistButton"
 157                   class="playlist media-button toggle"
 158                   state="default">
 159             <label>
 160               <input type="checkbox" checked="{{model.expanded}}"></input>
 161               <span class="icon"></span>
 162             </label>
 163           </button>
 164         </div>
 165       </div>
 166     </template>
 167   </polymer-element>
 168
 169   <!-- Definition of <volume-controller> tag. -->
 170   <polymer-element name="volume-controller" attributes="width height value">
 171     <template>
 172       <link rel="stylesheet" href="elements/volume_controller.css"></link>
 173
 174       <div id="background"></div>
 175       <input name="rawValueInput" id="rawValueInput"
 176              type="range" min="0" max="100" value="{{rawValue}}">
 177       <div id="bar">
 178         <div class="filled" style="height: {{rawValue}}%;"></div>
 179         <div class="cap left"></div>
 180         <div class="cap right"></div>
 181       </div>
 182     </template>
 183   </polymer-element>
 184
 185   <!-- Definition of <audio-player> tag. -->
 186   <polymer-element name="audio-player"
 187                    attributes="playing currenttrackurl playcount">
 188     <template>
 189       <link rel="stylesheet" href="elements/audio_player.css"></link>
 190
 191       <track-list id="trackList" expanded?="{{model.expanded}}"
 192                   on-replay="{{onReplayCurrentTrack}}"></track-list>
 193       <control-panel id="audioController"
 194                      on-next-clicked="{{onControllerNextClicked}}"
 195                      on-previous-clicked="{{onControllerPreviousClicked}}">
 196       </control-panel>
 197       <audio id="audio"></audio>
 198     </template>
 199   </polymer-element>
 200
 201   <div class="audio-player">
 202     <!-- Place the audio player. -->
 203     <audio-player></audio-player>
 204   </div>
 205 </body>
 206 </html>