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