Chromium Code Reviews Chromium Code Reviews
Issue 144883002:
[Files.app] Initial implementation of new audio player (Closed)
Base URL: svn://svn.chromium.org/chrome/trunk/src| OLD | NEW |
|---|---|
| (Empty) | |
| 1 <!-- | |
| 2 -- Copyright (c) 2013 The Chromium Authors. All rights reserved. | |
|
mtomasz
2014/01/23 08:05:09
nit: Without (c).
yoshiki
2014/01/24 15:34:19
Done.
| |
| 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="icon" type="image/png" | |
| 15 href="foreground/images/media/audio_player.png"> | |
|
mtomasz
2014/01/23 08:05:09
Setting an icon this way doesn't work for packaged
yoshiki
2014/01/24 15:34:19
Done.
mtomasz
2014/01/27 01:09:24
typo: plauer -> player. I think we can remove it.
| |
| 16 <link rel="stylesheet" type="text/css" href="audio_player/css/audio_player.css "> | |
| 17 | |
| 18 <!-- Don't load mediaplayer_scripts.js when flattening is disabled --> | |
| 19 <if expr="0"><!-- </if> | |
| 20 <script src="audio_player/js/audio_player_scripts.js"></script> | |
| 21 <if expr="0"> --></if> | |
| 22 <if expr="0"> | |
| 23 <script src="../../../../third_party/polymer/platform/platform.js"></script> | |
| 24 <script src="../../../../third_party/polymer/polymer/polymer.js"></script> | |
| 25 | |
| 26 <!-- This section is used when the file manager is loaded with | |
| 27 'filemgr-ext-path' command-line flag. --> | |
| 28 <!-- Keep the list in sync with audio_player_scripts.js. --> | |
| 29 <script src="../../../../ui/webui//resources/js/cr.js"></script> | |
| 30 <script src="../../../../ui/webui/resources/js/cr/event_target.js"></script> | |
| 31 <script src="../../../../ui/webui/resources/js/cr/ui/array_data_model.js"> | |
| 32 </script> | |
| 33 | |
| 34 <script src="common/js/async_util.js"></script> | |
| 35 <script src="common/js/util.js"></script> | |
| 36 <script src="common/js/path_util.js"></script> | |
| 37 | |
| 38 <script src="foreground/js/file_type.js"></script> | |
| 39 <script src="foreground/js/volume_manager_wrapper.js"></script> | |
| 40 <script src="foreground/js/metadata/metadata_cache.js"></script> | |
| 41 | |
| 42 <script src="audio_player/js/audio_player.js"></script> | |
| 43 <script src="foreground/js/media/player_testapi.js"></script> | |
| 44 | |
| 45 </if> | |
| 46 </head> | |
| 47 <body> | |
| 48 <!-- Definition of <track-list> tag --> | |
| 49 <polymer-element name="track-list" attributes="tracks expanded"> | |
| 50 <template> | |
| 51 <link rel="stylesheet" href="audio_player/elements/track_list.css"></link> | |
| 52 <template id="tracks" repeat="{{tracks}}"> | |
| 53 <div class="track" active="{{active}}" on-click="{{trackClicked}}"> | |
| 54 <div class="data"> | |
| 55 <div class="data-title">{{title}}</div> | |
| 56 <div class="data-artist">{{artist}}</div> | |
| 57 </div> | |
| 58 </div> | |
| 59 </template> | |
| 60 </template> | |
| 61 <script src="audio_player/elements/track_list.js"></script> | |
| 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 botton 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 botton 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 botton 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 botton 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 botton 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 botton in the bottom line --> | |
|
mtomasz
2014/01/23 08:05:09
nit: period (.) at the end of sentences in comment
yoshiki
2014/01/24 15:34:19
Done.
| |
| 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 botton in the bottom line --> | |
|
mtomasz
2014/01/23 08:05:09
typo: buttons
yoshiki
2014/01/24 15:34:19
Done. And here 'button' should be singular.
| |
| 159 <div id="playlistButton" | |
| 160 class="playlist media-button toggle" | |
| 161 state="default" | |
| 162 on-click="{{laylistButtonClick}}"> | |
|
mtomasz
2014/01/23 08:05:09
nit: laylist -> playlist. However, somehow it work
yoshiki
2014/01/24 15:34:19
This handler is not necessary. Removed.
| |
| 163 <label> | |
| 164 <input type="checkbox" checked="{{playlistExpanded}}"></input> | |
| 165 <div class="icon"></div> | |
| 166 </label> | |
| 167 </div> | |
| 168 </div> | |
| 169 </div> | |
| 170 </template> | |
| 171 <script src="audio_player/elements/control_panel.js"></script> | |
| 172 </polymer-element> | |
| 173 | |
| 174 <!-- Definition of <volume-controller> tag --> | |
| 175 <polymer-element name="volume-controller" attributes="width height value"> | |
| 176 <template> | |
| 177 <link rel="stylesheet" | |
| 178 href="audio_player/elements/volume_controller.css"></link> | |
| 179 | |
| 180 <div id="background"></div> | |
| 181 <input name="rawValueInput" id="rawValueInput" | |
| 182 type="range" min="0" max="100" value="{{rawValue}}"> | |
| 183 <div id="bar"> | |
| 184 <div class="filled" style="height: {{rawValue}}%;"></div> | |
| 185 <div class="cap left"></div> | |
| 186 <div class="cap right"></div> | |
| 187 </div> | |
| 188 </template> | |
| 189 <script src="audio_player/elements/volume_controller.js"></script> | |
| 190 </polymer-element> | |
| 191 | |
| 192 <!-- Definition of <audio-player> tag --> | |
| 193 <polymer-element name="audio-player" attributes="tracks"> | |
| 194 <template> | |
| 195 <track-list id="trackList" expanded="true"></track-list> | |
| 196 <control-panel id="audioController" | |
| 197 on-next-clicked="{{onControllerNextClicked}}" | |
| 198 on-previous-clicked="{{onControllerPreviousClicked}}"> | |
| 199 </control-panel> | |
| 200 <audio id="audio"></audio> | |
| 201 </template> | |
| 202 <script src="audio_player/elements/audio_player.js"></script> | |
| 203 </polymer-element> | |
| 204 | |
| 205 <div class="audio-player"> | |
| 206 <!-- Place the audio player --> | |
| 207 <audio-player></audio-player> | |
| 208 </div> | |
| 209 </body> | |
| 210 </html> | |
| OLD | NEW |
