src/chrome/browser/resources/file_manager/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="audio_player/css/audio_player.css">
  15
  16   <!-- Don't load mediaplayer_scripts.js when flattening is disabled -->
  17   <if expr="False"><!-- </if>
  18     <script src="audio_player/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="../../../../ui/webui//resources/js/cr.js"></script>
  25     <script src="../../../../ui/webui/resources/js/cr/event_target.js"></script>
  26     <script src="../../../../ui/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="common/js/async_util.js"></script>
  33     <script src="common/js/util.js"></script>
  34     <script src="common/js/path_util.js"></script>
  35     <script src="foreground/js/file_type.js"></script>
  36     <script src="foreground/js/volume_manager_wrapper.js"></script>
  37     <script src="foreground/js/metadata/metadata_cache.js"></script>
  38
  39     <script src="audio_player/js/audio_player.js"></script>
  40     <script src="foreground/js/media/player_testapi.js"></script>
  41
  42     <script src="audio_player/elements/track_list.js"></script>
  43     <script src="audio_player/elements/control_panel.js"></script>
  44     <script src="audio_player/elements/volume_controller.js"></script>
  45     <script src="audio_player/elements/audio_player.js"></script>
  46    </if>
  47  </head>
  48 <body>
  49   <!-- Definition of <track-list> tag. -->
  50   <polymer-element name="track-list" attributes="tracks">
  51     <template>
  52       <link rel="stylesheet" href="audio_player/elements/track_list.css"></link>
  53       <template id="tracks" repeat="{{track, index in tracks}}">
  54         <div class="track" active?="{{track.active}}" index="{{index}}" on-click="{{trackClicked}}">
  55           <div class="data">
  56             <div class="data-title">{{track.title}}</div>
  57             <div class="data-artist">{{track.artist}}</div>
  58           </div>
  59         </div>
  60       </template>
  61     </template>
  62   </polymer-element>
  63
  64   <!-- Definition of <control-panel> tag. -->
  65   <polymer-element name="control-panel">
  66     <template>
  67       <link rel="stylesheet"
  68             href="audio_player/elements/control_panel.css"></link>
  69
  70       <div class="controls">
  71         <div class="upper-controls time-controls">
  72           <div class="time media-control">
  73             <div class="current">{{timeString_}}</div>
  74           </div>
  75           <div class="progress media-control custom-slider">
  76             <input name="timeInput"
  77                    type="range"
  78                    min="0" max="{{duration}}" value="{{time}}">
  79             <div class="bar">
  80               <div class="filled" style="width: {{time/duration*100}}%;"></div>
  81               <div class="cap left"></div>
  82               <div class="cap right"></div>
  83             </div>
  84           </div>
  85           <div class="time media-control">
  86             <div class="duration">{{durationString_}}</div>
  87           </div>
  88         </div>
  89         <div class="lower-controls audio-controls">
  90           <!-- Shuffle toggle button in the bottom line. -->
  91           <button class="shuffle-mode media-button toggle" state="default">
  92             <label>
  93               <input id="shuffleCheckbox"
  94                      type="checkbox"
  95                      checked="{{model.shuffle}}"></input>
  96               <span class="icon"></span>
  97             </label>
  98           </button>
  99
 100           <!-- Repeat toggle button in the bottom line. -->
 101           <button class="repeat media-button toggle" state="default">
 102             <label>
 103               <input id="repeatCheckbox"
 104                      type="checkbox"
 105                      checked="{{model.repeat}}"></input>
 106               <span class="icon"></span>
 107             </label>
 108           </button>
 109
 110           <!-- Prev button in the bottom line. -->
 111           <button class="previous media-button"
 112                  state="default"
 113                  on-click="{{previousClick}}">
 114             <div class="normal default"></div>
 115             <div class="disabled"></div>
 116           </button>
 117
 118           <!-- Play button in the bottom line. -->
 119           <button class="play media-control media-button"
 120                   state='{{playing ? "playing" : "ended"}}'
 121                   on-click="{{playClick}}">
 122             <div class="normal playing"></div>
 123             <div class="normal ended"></div>
 124             <div class="disabled"></div>
 125           </button>
 126
 127           <!-- Next button in the bottom line. -->
 128           <button class="next media-button"
 129                   state="default"
 130                   on-click="{{nextClick}}">
 131             <div class="normal default"></div>
 132             <div class="disabled"></div>
 133           </button>
 134
 135           <div id="volumeContainer"
 136                class="default-hidden"
 137                anchor-point="bottom center">
 138             <volume-controller id="volumeSlider"
 139                                width="32" height="85" value="50">
 140             </volume-controller>
 141
 142             <polymer-anchor-point id="anchorHelper"></polymer-anchor-point>
 143           </div>
 144
 145           <!-- Volume button in the bottom line. -->
 146           <button id="volumeButton"
 147                   class="volume media-button toggle"
 148                   state="default"
 149                   on-click="{{volumeButtonClick}}"
 150                   anchor-point="bottom center">
 151             <label>
 152               <input type="checkbox" checked="{{volumeSliderShown}}"></input>
 153               <span class="icon"></span>
 154             </label>
 155           </button>
 156
 157           <!-- Playlist button in the bottom line. -->
 158           <button id="playlistButton"
 159                   class="playlist media-button toggle"
 160                   state="default">
 161             <label>
 162               <input type="checkbox" checked="{{model.expanded}}"></input>
 163               <span class="icon"></span>
 164             </label>
 165           </button>
 166         </div>
 167       </div>
 168     </template>
 169   </polymer-element>
 170
 171   <!-- Definition of <volume-controller> tag. -->
 172   <polymer-element name="volume-controller" attributes="width height value">
 173     <template>
 174       <link rel="stylesheet"
 175             href="audio_player/elements/volume_controller.css"></link>
 176
 177       <div id="background"></div>
 178       <input name="rawValueInput" id="rawValueInput"
 179              type="range" min="0" max="100" value="{{rawValue}}">
 180       <div id="bar">
 181         <div class="filled" style="height: {{rawValue}}%;"></div>
 182         <div class="cap left"></div>
 183         <div class="cap right"></div>
 184       </div>
 185     </template>
 186   </polymer-element>
 187
 188   <!-- Definition of <audio-player> tag. -->
 189   <polymer-element name="audio-player"
 190                    attributes="tracks playing currenttrackurl">
 191     <template>
 192       <track-list id="trackList" expanded?="{{model.expanded}}"></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>