| 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 <script src="../../../../third_party/polymer/platform/platform.js"></script> |
| 22 <script src="../../../../third_party/polymer/polymer/polymer.js"></script> |
| 23 |
| 24 <!-- This section is used when the file manager is loaded with |
| 25 'filemgr-ext-path' command-line flag. --> |
| 26 <!-- Keep the list in sync with audio_player_scripts.js. --> |
| 27 <script src="../../../../ui/webui//resources/js/cr.js"></script> |
| 28 <script src="../../../../ui/webui/resources/js/cr/event_target.js"></script> |
| 29 <script src="../../../../ui/webui/resources/js/cr/ui/array_data_model.js"> |
| 30 </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 |
| 36 <script src="foreground/js/file_type.js"></script> |
| 37 <script src="foreground/js/volume_manager_wrapper.js"></script> |
| 38 <script src="foreground/js/metadata/metadata_cache.js"></script> |
| 39 |
| 40 <script src="audio_player/js/audio_player.js"></script> |
| 41 <script src="foreground/js/media/player_testapi.js"></script> |
| 42 |
| 43 </if> |
| 44 </head> |
| 45 <body> |
| 46 <!-- Definition of <track-list> tag. --> |
| 47 <polymer-element name="track-list" attributes="tracks expanded"> |
| 48 <template> |
| 49 <link rel="stylesheet" href="audio_player/elements/track_list.css"></link> |
| 50 <template id="tracks" repeat="{{tracks}}"> |
| 51 <div class="track" active="{{active}}" on-click="{{trackClicked}}"> |
| 52 <div class="data"> |
| 53 <div class="data-title">{{title}}</div> |
| 54 <div class="data-artist">{{artist}}</div> |
| 55 </div> |
| 56 </div> |
| 57 </template> |
| 58 </template> |
| 59 <script src="audio_player/elements/track_list.js"></script> |
| 60 </polymer-element> |
| 61 |
| 62 <!-- Definition of <control-panel> tag. --> |
| 63 <polymer-element name="control-panel" attributes="expanded"> |
| 64 <template> |
| 65 <link rel="stylesheet" |
| 66 href="audio_player/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 <div class="shuffle-mode media-button toggle" state="default"> |
| 90 <label> |
| 91 <input id="shuffleCheckbox" |
| 92 type="checkbox" |
| 93 checked="{{shuffle}}"></input> |
| 94 <div class="icon"></div> |
| 95 </label> |
| 96 </div> |
| 97 |
| 98 <!-- Repeat toggle button in the bottom line. --> |
| 99 <div class="repeat media-button toggle" state="default"> |
| 100 <label> |
| 101 <input id="repeatCheckbox" |
| 102 type="checkbox" |
| 103 checked="{{repeat}}"></input> |
| 104 <div class="icon"></div> |
| 105 </label> |
| 106 </div> |
| 107 |
| 108 <!-- Prev button in the bottom line. --> |
| 109 <div class="previous media-button" |
| 110 state="default" |
| 111 on-click="{{previousClick}}"> |
| 112 <div class="normal default"></div> |
| 113 <div class="disabled"></div> |
| 114 </div> |
| 115 |
| 116 <!-- Play button in the bottom line. --> |
| 117 <div 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 </div> |
| 124 |
| 125 <!-- Next button in the bottom line. --> |
| 126 <div class="next media-button" |
| 127 state="default" |
| 128 on-click="{{nextClick}}"> |
| 129 <div class="normal default"></div> |
| 130 <div class="disabled"></div> |
| 131 </div> |
| 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 on-changed="{{volumeSliderChanged}}"> |
| 139 </volume-controller> |
| 140 |
| 141 <polymer-anchor-point id="anchorHelper"></polymer-anchor-point> |
| 142 </div> |
| 143 |
| 144 <!-- Volume button in the bottom line. --> |
| 145 <div id="volumeButton" |
| 146 class="volume media-button toggle" |
| 147 state="default" |
| 148 on-click="{{volumeButtonClick}}" |
| 149 anchor-point="bottom center"> |
| 150 <label> |
| 151 <input type="checkbox" checked="{{volumeSliderShown}}"></input> |
| 152 <div class="icon"></div> |
| 153 </label> |
| 154 </div> |
| 155 |
| 156 <!-- Playlist button in the bottom line. --> |
| 157 <div id="playlistButton" |
| 158 class="playlist media-button toggle" |
| 159 state="default"> |
| 160 <label> |
| 161 <input type="checkbox" checked="{{playlistExpanded}}"></input> |
| 162 <div class="icon"></div> |
| 163 </label> |
| 164 </div> |
| 165 </div> |
| 166 </div> |
| 167 </template> |
| 168 <script src="audio_player/elements/control_panel.js"></script> |
| 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 <script src="audio_player/elements/volume_controller.js"></script> |
| 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 <script src="audio_player/elements/audio_player.js"></script> |
| 200 </polymer-element> |
| 201 |
| 202 <div class="audio-player"> |
| 203 <!-- Place the audio player. --> |
| 204 <audio-player></audio-player> |
| 205 </div> |
| 206 </body> |
| 207 </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