| OLD | NEW |
|---|
| (Empty) | |
| 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></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="0"><!-- </if> |
| 18 <script src="audio_player/js/audio_player_scripts.js"></script> |
| 19 <if expr="0"> --></if> |
| 20 <if expr="0"> |
| 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 expanded"> |
| 51 <template> |
| 52 <link rel="stylesheet" href="audio_player/elements/track_list.css"></link> |
| 53 <template id="tracks" repeat="{{tracks}}"> |
| 54 <div class="track" active="{{active}}" on-click="{{trackClicked}}"> |
| 55 <div class="data"> |
| 56 <div class="data-title">{{title}}</div> |
| 57 <div class="data-artist">{{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" attributes="expanded"> |
| 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 <div class="shuffle-mode media-button toggle" state="default"> |
| 92 <label> |
| 93 <input id="shuffleCheckbox" |
| 94 type="checkbox" |
| 95 checked="{{shuffle}}"></input> |
| 96 <div class="icon"></div> |
| 97 </label> |
| 98 </div> |
| 99 |
| 100 <!-- Repeat toggle button in the bottom line. --> |
| 101 <div class="repeat media-button toggle" state="default"> |
| 102 <label> |
| 103 <input id="repeatCheckbox" |
| 104 type="checkbox" |
| 105 checked="{{repeat}}"></input> |
| 106 <div class="icon"></div> |
| 107 </label> |
| 108 </div> |
| 109 |
| 110 <!-- Prev button in the bottom line. --> |
| 111 <div class="previous media-button" |
| 112 state="default" |
| 113 on-click="{{previousClick}}"> |
| 114 <div class="normal default"></div> |
| 115 <div class="disabled"></div> |
| 116 </div> |
| 117 |
| 118 <!-- Play button in the bottom line. --> |
| 119 <div 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 </div> |
| 126 |
| 127 <!-- Next button in the bottom line. --> |
| 128 <div class="next media-button" |
| 129 state="default" |
| 130 on-click="{{nextClick}}"> |
| 131 <div class="normal default"></div> |
| 132 <div class="disabled"></div> |
| 133 </div> |
| 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 on-changed="{{volumeSliderChanged}}"> |
| 141 </volume-controller> |
| 142 |
| 143 <polymer-anchor-point id="anchorHelper"></polymer-anchor-point> |
| 144 </div> |
| 145 |
| 146 <!-- Volume button in the bottom line. --> |
| 147 <div id="volumeButton" |
| 148 class="volume media-button toggle" |
| 149 state="default" |
| 150 on-click="{{volumeButtonClick}}" |
| 151 anchor-point="bottom center"> |
| 152 <label> |
| 153 <input type="checkbox" checked="{{volumeSliderShown}}"></input> |
| 154 <div class="icon"></div> |
| 155 </label> |
| 156 </div> |
| 157 |
| 158 <!-- Playlist button in the bottom line. --> |
| 159 <div id="playlistButton" |
| 160 class="playlist media-button toggle" |
| 161 state="default"> |
| 162 <label> |
| 163 <input type="checkbox" checked="{{playlistExpanded}}"></input> |
| 164 <div class="icon"></div> |
| 165 </label> |
| 166 </div> |
| 167 </div> |
| 168 </div> |
| 169 </template> |
| 170 </polymer-element> |
| 171 |
| 172 <!-- Definition of <volume-controller> tag. --> |
| 173 <polymer-element name="volume-controller" attributes="width height value"> |
| 174 <template> |
| 175 <link rel="stylesheet" |
| 176 href="audio_player/elements/volume_controller.css"></link> |
| 177 |
| 178 <div id="background"></div> |
| 179 <input name="rawValueInput" id="rawValueInput" |
| 180 type="range" min="0" max="100" value="{{rawValue}}"> |
| 181 <div id="bar"> |
| 182 <div class="filled" style="height: {{rawValue}}%;"></div> |
| 183 <div class="cap left"></div> |
| 184 <div class="cap right"></div> |
| 185 </div> |
| 186 </template> |
| 187 </polymer-element> |
| 188 |
| 189 <!-- Definition of <audio-player> tag. --> |
| 190 <polymer-element name="audio-player" attributes="tracks"> |
| 191 <template> |
| 192 <track-list id="trackList" expanded="true"></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> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 144883002:
[Files.app] Initial implementation of new audio player (Closed)
Base URL: svn://svn.chromium.org/chrome/trunk/src