Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(1487)

Side by Side Diff: chrome/browser/resources/file_manager/audio_player.html

Issue 144883002: [Files.app] Initial implementation of new audio player (Closed) Base URL: svn://svn.chromium.org/chrome/trunk/src
Patch Set: Addressed comments Created 6 years, 11 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch | Annotate | Revision Log
OLDNEW
(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>&#xFEFF;</title>
14 <link rel="icon" type="image/png"
15 href="audio_plauer/icons/audio-player-64.png">
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 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 -->
mtomasz 2014/01/27 01:09:24 nit: period missing at the end of some comments, w
yoshiki 2014/01/27 07:12:08 Done.
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 <script src="audio_player/elements/control_panel.js"></script>
171 </polymer-element>
172
173 <!-- Definition of <volume-controller> tag -->
174 <polymer-element name="volume-controller" attributes="width height value">
175 <template>
176 <link rel="stylesheet"
177 href="audio_player/elements/volume_controller.css"></link>
178
179 <div id="background"></div>
180 <input name="rawValueInput" id="rawValueInput"
181 type="range" min="0" max="100" value="{{rawValue}}">
182 <div id="bar">
183 <div class="filled" style="height: {{rawValue}}%;"></div>
184 <div class="cap left"></div>
185 <div class="cap right"></div>
186 </div>
187 </template>
188 <script src="audio_player/elements/volume_controller.js"></script>
189 </polymer-element>
190
191 <!-- Definition of <audio-player> tag -->
192 <polymer-element name="audio-player" attributes="tracks">
193 <template>
194 <track-list id="trackList" expanded="true"></track-list>
195 <control-panel id="audioController"
196 on-next-clicked="{{onControllerNextClicked}}"
197 on-previous-clicked="{{onControllerPreviousClicked}}">
198 </control-panel>
199 <audio id="audio"></audio>
200 </template>
201 <script src="audio_player/elements/audio_player.js"></script>
202 </polymer-element>
203
204 <div class="audio-player">
205 <!-- Place the audio player -->
206 <audio-player></audio-player>
207 </div>
208 </body>
209 </html>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698