| OLD | NEW |
|---|
| 1 <!-- | 1 <!-- |
| 2 -- Copyright 2014 The Chromium Authors. All rights reserved. | 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 | 3 -- Use of this source code is governed by a BSD-style license that can be |
| 4 -- found in the LICENSE file. | 4 -- found in the LICENSE file. |
| 5 --> | 5 --> |
| 6 <!DOCTYPE HTML> | 6 <!DOCTYPE HTML> |
| 7 <html> | 7 <html> |
| 8 <head> | 8 <head> |
| 9 <!-- We have to set some default title, or chrome will use the page name. | 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 | 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. | 11 -- string. Until then, use an invisible non-whitespace character. |
| 12 --> | 12 --> |
| 13 <title></title> | 13 <title></title> |
| 14 <link rel="stylesheet" href="chrome://resources/css/text_defaults.css"> | 14 <link rel="stylesheet" href="chrome://resources/css/text_defaults.css"> |
| 15 <link rel="stylesheet" type="text/css" href="css/audio_player.css"> | 15 <link rel="stylesheet" type="text/css" href="css/audio_player.css"> |
| 16 <link rel="import" href="elements/audio_player.html"> |
| 17 </head> |
| 18 <body> |
| 19 <div class="audio-player"> |
| 20 <!-- Place the audio player. --> |
| 21 <audio-player></audio-player> |
| 22 </div> |
| 16 | 23 |
| 17 <!-- Don't load mediaplayer_scripts.js when flattening is disabled --> | 24 <!-- Don't load mediaplayer_scripts.js when flattening is disabled --> |
| 18 <if expr="False"><!-- </if> | 25 <if expr="False"><!-- </if> |
| 19 <script src="js/audio_player_scripts.js"></script> | 26 <script src="js/audio_player_scripts.js"></script> |
| 20 <if expr="False"> --></if> | 27 <if expr="False"> --></if> |
| 21 <if expr="False"> | 28 <if expr="False"> |
| 22 <!-- This section is used when the file manager is loaded with | 29 <!-- This section is used when the file manager is loaded with |
| 23 'filemgr-ext-path' command-line flag. --> | 30 'filemgr-ext-path' command-line flag. --> |
| 24 <!-- Keep the list in sync with audio_player_scripts.js. --> | 31 <!-- Keep the list in sync with audio_player_scripts.js. --> |
| 25 <script src="../../webui//resources/js/cr.js"></script> | 32 <script src="../../webui//resources/js/cr.js"></script> |
| (...skipping 16 matching lines...) Expand all Loading... |
| 42 <script src="../file_manager/foreground/js/metadata/external_metadata_provid
er.js"></script> | 49 <script src="../file_manager/foreground/js/metadata/external_metadata_provid
er.js"></script> |
| 43 <script src="../file_manager/foreground/js/metadata/file_system_metadata_pro
vider.js"></script> | 50 <script src="../file_manager/foreground/js/metadata/file_system_metadata_pro
vider.js"></script> |
| 44 <script src="../file_manager/foreground/js/metadata/metadata_cache_item.js">
</script> | 51 <script src="../file_manager/foreground/js/metadata/metadata_cache_item.js">
</script> |
| 45 <script src="../file_manager/foreground/js/metadata/metadata_item.js"></scri
pt> | 52 <script src="../file_manager/foreground/js/metadata/metadata_item.js"></scri
pt> |
| 46 <script src="../file_manager/foreground/js/metadata/metadata_model.js"></scr
ipt> | 53 <script src="../file_manager/foreground/js/metadata/metadata_model.js"></scr
ipt> |
| 47 <script src="../file_manager/foreground/js/metadata/multi_metadata_provider.
js"></script> | 54 <script src="../file_manager/foreground/js/metadata/multi_metadata_provider.
js"></script> |
| 48 <script src="../file_manager/foreground/js/metadata/thumbnail_model.js"></sc
ript> | 55 <script src="../file_manager/foreground/js/metadata/thumbnail_model.js"></sc
ript> |
| 49 | 56 |
| 50 <script src="js/audio_player.js"></script> | 57 <script src="js/audio_player.js"></script> |
| 51 <script src="js/audio_player_model.js"></script> | 58 <script src="js/audio_player_model.js"></script> |
| 52 | 59 </if> |
| 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> | 60 </body> |
| 217 </html> | 61 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1164983003:
AudioPlayer.app: Use HTML Imports to define custom elements. (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master