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

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

Issue 7067020: Moving mediaplayer to the chrome filebrowser. Observable behaviour should not change. (Closed) Base URL: svn://svn.chromium.org/chrome/trunk/src
Patch Set: Fixed style errors and localized strings. Created 9 years, 7 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
1 <!DOCTYPE HTML> 1 <!DOCTYPE HTML>
2 <html i18n-values="dir:textdirection;"> 2 <html i18n-values="dir:textdirection;">
3 <head> 3 <head>
4 <meta charset="utf-8"> 4 <meta charset="utf-8">
5 <title>Media Player</title> 5 <title>Media Player</title>
6 <style type="text/css"> 6 <style type="text/css">
7 7
8 body { 8 body {
9 overflow: hidden; 9 overflow: hidden;
10 background: black; 10 background: black;
(...skipping 104 matching lines...) Expand 10 before | Expand all | Expand 10 after
115 115
116 .soundbutton { 116 .soundbutton {
117 position: absolute; 117 position: absolute;
118 right: 30px; 118 right: 30px;
119 bottom: 0; 119 bottom: 0;
120 border-left: 1px solid #424242; 120 border-left: 1px solid #424242;
121 border-right: 1px solid black; 121 border-right: 1px solid black;
122 } 122 }
123 123
124 .soundiconhigh { 124 .soundiconhigh {
125 background: url('shared/images/mediaplayer_vol_high.png'); 125 background: url('images/mediaplayer_vol_high.png');
126 } 126 }
127 127
128 .soundiconmuted { 128 .soundiconmuted {
129 background: url('shared/images/mediaplayer_vol_mute.png'); 129 background: url('images/mediaplayer_vol_mute.png');
130 } 130 }
131 131
132 .soundiconhigh, 132 .soundiconhigh,
133 .soundiconmuted { 133 .soundiconmuted {
134 background-repeat: no-repeat; 134 background-repeat: no-repeat;
135 background-position: 6px 8px; 135 background-position: 6px 8px;
136 } 136 }
137 137
138 .volume { 138 .volume {
139 position: absolute; 139 position: absolute;
140 bottom: 30px; 140 bottom: 30px;
141 height: 80px; 141 height: 80px;
142 width: 30px; 142 width: 30px;
143 right: 30px; 143 right: 30px;
144 z-index: 99999; 144 z-index: 99999;
145 background: black; 145 background: black;
146 background: -webkit-linear-gradient(#323232, #070707); 146 background: -webkit-linear-gradient(#323232, #070707);
147 } 147 }
148 148
149 .fullscreen { 149 .fullscreen {
150 position: absolute; 150 position: absolute;
151 right: 60px; 151 right: 60px;
152 bottom: 0; 152 bottom: 0;
153 border-left: 1px solid #424242; 153 border-left: 1px solid #424242;
154 border-right: 1px solid black; 154 border-right: 1px solid black;
155 } 155 }
156 156
157 .fullscreenicon { 157 .fullscreenicon {
158 background: url('shared/images/mediaplayer_full_screen.png'); 158 background: url('images/mediaplayer_full_screen.png');
159 background-repeat: no-repeat; 159 background-repeat: no-repeat;
160 background-position: 6px 8px; 160 background-position: 6px 8px;
161 } 161 }
162 162
163 .fullscreenexiticon { 163 .fullscreenexiticon {
164 background: url('shared/images/mediaplayer_full_screen_exit.png'); 164 background: url('images/mediaplayer_full_screen_exit.png');
165 background-repeat: no-repeat; 165 background-repeat: no-repeat;
166 background-position: 6px 8px; 166 background-position: 6px 8px;
167 } 167 }
168 168
169 .volumeslider { 169 .volumeslider {
170 -webkit-appearance: slider-vertical; 170 -webkit-appearance: slider-vertical;
171 position: absolute; 171 position: absolute;
172 left: 0; 172 left: 0;
173 right: 0; 173 right: 0;
174 bottom: 0; 174 bottom: 0;
175 top: 0; 175 top: 0;
176 } 176 }
177 177
178 .playbutton { 178 .playbutton {
179 position: absolute; 179 position: absolute;
180 left: 30px; 180 left: 30px;
181 bottom: 0; 181 bottom: 0;
182 border-left: 1px solid #424242; 182 border-left: 1px solid #424242;
183 border-right: 1px solid black; 183 border-right: 1px solid black;
184 } 184 }
185 185
186 .playicon { 186 .playicon {
187 background: url('shared/images/mediaplayer_play.png'); 187 background: url('images/mediaplayer_play.png');
188 background-repeat: no-repeat; 188 background-repeat: no-repeat;
189 background-position: 9px 8px; 189 background-position: 9px 8px;
190 } 190 }
191 191
192 .pausebutton { 192 .pausebutton {
193 position: absolute; 193 position: absolute;
194 left: 30px; 194 left: 30px;
195 bottom: 0; 195 bottom: 0;
196 border-left: 1px solid #424242; 196 border-left: 1px solid #424242;
197 border-right: 1px solid black; 197 border-right: 1px solid black;
198 } 198 }
199 199
200 .pauseicon { 200 .pauseicon {
201 background: url('shared/images/mediaplayer_pause.png'); 201 background: url('images/mediaplayer_pause.png');
202 background-repeat: no-repeat; 202 background-repeat: no-repeat;
203 background-position: 9px 8px; 203 background-position: 9px 8px;
204 } 204 }
205 205
206 .prevbutton { 206 .prevbutton {
207 position: absolute; 207 position: absolute;
208 left: 0; 208 left: 0;
209 bottom: 0; 209 bottom: 0;
210 border-right: 1px solid black; 210 border-right: 1px solid black;
211 } 211 }
212 212
213 .previcon { 213 .previcon {
214 background: url('shared/images/mediaplayer_prev.png'); 214 background: url('images/mediaplayer_prev.png');
215 background-repeat: no-repeat; 215 background-repeat: no-repeat;
216 background-position: 6px 8px; 216 background-position: 6px 8px;
217 } 217 }
218 218
219 .playbackvideoelement { 219 .playbackvideoelement {
220 width: 100%; 220 width: 100%;
221 height: 100%; 221 height: 100%;
222 position: absolute; 222 position: absolute;
223 left: 0; 223 left: 0;
224 top: 0; 224 top: 0;
(...skipping 18 matching lines...) Expand all
243 243
244 .nextbutton { 244 .nextbutton {
245 position: absolute; 245 position: absolute;
246 left: 60px; 246 left: 60px;
247 bottom: 0; 247 bottom: 0;
248 border-left: 1px solid #424242; 248 border-left: 1px solid #424242;
249 border-right: 1px solid black; 249 border-right: 1px solid black;
250 } 250 }
251 251
252 .nexticon { 252 .nexticon {
253 background: url('shared/images/mediaplayer_next.png'); 253 background: url('images/mediaplayer_next.png');
254 background-repeat: no-repeat; 254 background-repeat: no-repeat;
255 background-position: 6px 8px; 255 background-position: 6px 8px;
256 } 256 }
257 257
258 .playlistbutton { 258 .playlistbutton {
259 position: absolute; 259 position: absolute;
260 right: 0; 260 right: 0;
261 bottom: 0; 261 bottom: 0;
262 border-left: 1px solid #424242; 262 border-left: 1px solid #424242;
263 border-right: 1px solid black; 263 border-right: 1px solid black;
264 } 264 }
265 265
266 .playlisticon { 266 .playlisticon {
267 background: url('shared/images/mediaplayer_playlist.png'); 267 background: url('images/mediaplayer_playlist.png');
268 background-repeat: no-repeat; 268 background-repeat: no-repeat;
269 background-position: 6px 8px; 269 background-position: 6px 8px;
270 } 270 }
271 271
272 .controlbutton { 272 .controlbutton {
273 z-index: 9999; 273 z-index: 9999;
274 cursor: pointer; 274 cursor: pointer;
275 width: 28px; 275 width: 28px;
276 height: 30px; 276 height: 30px;
277 } 277 }
278 278
279 .controlbutton:hover { 279 .controlbutton:hover {
280 background: -webkit-linear-gradient(#6a7eac, #000); 280 background: -webkit-linear-gradient(#6a7eac, #000);
281 } 281 }
282 282
283 .icon { 283 .icon {
284 width: 100%; 284 width: 100%;
285 height: 100%; 285 height: 100%;
286 z-index: 9999; 286 z-index: 9999;
287 } 287 }
288 288
289 </style> 289 </style>
290 <script src="shared/js/local_strings.js"></script> 290 <script src="chrome://resources/js/local_strings.js"></script>
291 <script src="shared/js/media_common.js"></script> 291 <script src="chrome://resources/js/media_common.js"></script>
292 <script> 292 <script>
293 293
294 function $(o) { 294 function $(o) {
295 return document.getElementById(o); 295 return document.getElementById(o);
296 } 296 }
297 297
298 var videoPlaybackElement = null; 298 var videoPlaybackElement = null;
299 var audioPlaybackElement = null; 299 var audioPlaybackElement = null;
300 var currentPlaylist = null; 300 var currentPlaylist = null;
301 var currentItem = -1; 301 var currentItem = -1;
302 var savedVolumeValue = 0; 302 var savedVolumeValue = 0;
303 var hideVolumeTimerId = 0; 303 var hideVolumeTimerId = 0;
304 var localStrings; 304 var localStrings;
305 var fullScreen = false; 305 var fullScreen = false;
306 306
307 /////////////////////////////////////////////////////////////////////////////// 307 ///////////////////////////////////////////////////////////////////////////////
308 // Document Functions: 308 // Document Functions:
309 /** 309 /**
310 * Window onload handler, sets up the page. 310 * Window onload handler, sets up the page.
311 */ 311 */
312 function load() { 312 function load() {
313 chrome.fileBrowserPrivate.getStrings(function(strings) {
314 localStrings = new LocalStrings(strings);
315
316 init();
317 });
318 }
319
320 function init() {
313 document.body.addEventListener('dragover', function(e) { 321 document.body.addEventListener('dragover', function(e) {
314 if (e.preventDefault) e.preventDefault(); 322 if (e.preventDefault) e.preventDefault();
315 }); 323 });
316 document.body.addEventListener('drop', function(e) { 324 document.body.addEventListener('drop', function(e) {
317 if (e.preventDefault) e.preventDefault(); 325 if (e.preventDefault) e.preventDefault();
318 }); 326 });
319 document.body.addEventListener('keydown', onkeydown); 327 document.body.addEventListener('keydown', onkeydown);
320 328
321 localStrings = new LocalStrings(); 329 chrome.mediaPlayerPrivate.getPlaylist(getPlaylistCallback);
322 chrome.send('getCurrentPlaylist', []); 330
331 chrome.mediaPlayerPrivate.onPlaylistChanged.addListener(function() {
332 chrome.mediaPlayerPrivate.getPlaylist(getPlaylistCallback);
333 });
323 } 334 }
324 335
325 function onMediaProgress() { 336 function onMediaProgress() {
326 var element = getMediaElement(); 337 var element = getMediaElement();
327 var current = element.currentTime; 338 var current = element.currentTime;
328 var duration = element.duration; 339 var duration = element.duration;
329 var progress = $('progress'); 340 var progress = $('progress');
330 progress.value = (current*100)/duration; 341 progress.value = (current*100)/duration;
331 var played = $('sliderplayed'); 342 var played = $('sliderplayed');
332 played.style.width = '' + progress.value + '%'; 343 played.style.width = '' + progress.value + '%';
333 if (progress.value == 100) { 344 if (progress.value == 100) {
334 onMediaComplete(); 345 onMediaComplete();
335 } 346 }
336 } 347 }
337 348
338 function onLoadedProgress(e) { 349 function onLoadedProgress(e) {
339 var element = $('sliderloaded'); 350 var element = $('sliderloaded');
340 if (e.lengthComputable) { 351 if (e.lengthComputable) {
341 element.style.display = 'block'; 352 element.style.display = 'block';
342 var percent = (e.loaded * 100) / e.total; 353 var percent = (e.loaded * 100) / e.total;
343 element.style.width = '' + percent + '%'; 354 element.style.width = '' + percent + '%';
344 } else { 355 } else {
345 element.style.display = 'none'; 356 element.style.display = 'none';
346 } 357 }
347 } 358 }
348 359
349 function onMediaError(e) { 360 function onMediaError(e) {
350 console.log('Got new error'); 361 console.log('Got new error');
351 console.log(e); 362 console.log(e);
352 chrome.send('playbackError', ['Error playing back', 363 chrome.mediaPlayerPrivate.playbackError(currentPlaylist[currentItem].path);
353 currentPlaylist[currentItem].path]);
354 if (currentPlaylist.length == 1) { 364 if (currentPlaylist.length == 1) {
355 $('error').textContent = localStrings.getString('errorstring'); 365 $('error').textContent = localStrings.getString('PLAYBACK_ERROR');
356 } else { 366 } else {
357 chrome.send("showPlaylist", []); 367 chrome.mediaPlayerPrivate.togglePlaylistPanel();
358 } 368 }
359 onMediaComplete(); 369 onMediaComplete();
360 } 370 }
361 371
362 function onMediaComplete() { 372 function onMediaComplete() {
363 currentItem ++; 373 currentItem ++;
364 if (currentItem >= currentPlaylist.length) { 374 if (currentItem >= currentPlaylist.length) {
365 currentItem -= 1; 375 currentItem -= 1;
366 var element = getMediaElement(); 376 var element = getMediaElement();
367 if (!getMediaElement().error) { 377 if (!getMediaElement().error) {
368 element.currentTime = 0; 378 element.currentTime = 0;
369 element.pause(); 379 element.pause();
370 onMediaProgress(); 380 onMediaProgress();
371 } 381 }
372 onMediaPause(); 382 onMediaPause();
373 return; 383 return;
374 } 384 }
375 var mediaElement = getMediaElement(); 385 var mediaElement = getMediaElement();
376 mediaElement.removeEventListener("progress", onLoadedProgress, true); 386 mediaElement.removeEventListener("progress", onLoadedProgress, true);
377 mediaElement.removeEventListener("timeupdate", onMediaProgress, true); 387 mediaElement.removeEventListener("timeupdate", onMediaProgress, true);
378 mediaElement.removeEventListener("durationchange", onMetadataAvail, true); 388 mediaElement.removeEventListener("durationchange", onMetadataAvail, true);
379 // MediaElement.removeEventListener("ended", onMediaComplete, true); 389 // MediaElement.removeEventListener("ended", onMediaComplete, true);
380 mediaElement.removeEventListener("play", onMediaPlay, true); 390 mediaElement.removeEventListener("play", onMediaPlay, true);
381 mediaElement.removeEventListener("pause", onMediaPause, true); 391 mediaElement.removeEventListener("pause", onMediaPause, true);
382 mediaElement.onerror = undefined; 392 mediaElement.onerror = undefined;
383 chrome.send('currentOffsetChanged', ['' + currentItem]); 393 chrome.mediaPlayerPrivate.setPlaylistPositionAndPlay(currentItem);
384 playMediaFile(currentPlaylist[currentItem].path);
385 } 394 }
386 395
387 function onMediaPlay() { 396 function onMediaPlay() {
388 var pausebutton = $('pausebutton'); 397 var pausebutton = $('pausebutton');
389 var playbutton = $('playbutton'); 398 var playbutton = $('playbutton');
390 pausebutton.style.display = 'block'; 399 pausebutton.style.display = 'block';
391 playbutton.style.display = 'none'; 400 playbutton.style.display = 'none';
392 } 401 }
393 402
394 function onMediaPause() { 403 function onMediaPause() {
(...skipping 39 matching lines...) Expand 10 before | Expand all | Expand 10 after
434 var element = getMediaElement(); 443 var element = getMediaElement();
435 if (element.currentTime > 6) { 444 if (element.currentTime > 6) {
436 element.currentTime = 0; 445 element.currentTime = 0;
437 return; 446 return;
438 } 447 }
439 currentItem --; 448 currentItem --;
440 if (currentItem < 0) { 449 if (currentItem < 0) {
441 currentItem = -1; 450 currentItem = -1;
442 return; 451 return;
443 } 452 }
444 chrome.send('currentOffsetChanged', ['' + currentItem]); 453 chrome.mediaPlayerPrivate.setPlaylistPosition(currentItem);
445 playMediaFile(currentPlaylist[currentItem].path); 454 playMediaFile(currentPlaylist[currentItem].path);
446 } 455 }
447 456
448 function nextButtonClick() { 457 function nextButtonClick() {
449 currentItem ++; 458 currentItem ++;
450 if (currentItem >= currentPlaylist.length) { 459 if (currentItem >= currentPlaylist.length) {
451 currentItem = -1; 460 currentItem = -1;
452 return; 461 return;
453 } 462 }
454 chrome.send('currentOffsetChanged', ['' + currentItem]); 463 chrome.mediaPlayerPrivate.setPlaylistPosition(currentItem);
455 playMediaFile(currentPlaylist[currentItem].path); 464 playMediaFile(currentPlaylist[currentItem].path);
456 } 465 }
457 466
458 function userChangedProgress() { 467 function userChangedProgress() {
459 var val = $('progress').value; 468 var val = $('progress').value;
460 var element = getMediaElement(); 469 var element = getMediaElement();
461 if (element.seekable && element.duration) { 470 if (element.seekable && element.duration) {
462 var current = (progress.value * element.duration)/100; 471 var current = (progress.value * element.duration)/100;
463 element.currentTime = current; 472 element.currentTime = current;
464 } 473 }
(...skipping 304 matching lines...) Expand 10 before | Expand all | Expand 10 after
769 fullScreen = !fullScreen; 778 fullScreen = !fullScreen;
770 var fullscreenicon = $('fullscreenicon'); 779 var fullscreenicon = $('fullscreenicon');
771 if (fullScreen) { 780 if (fullScreen) {
772 fullscreenicon.classList.remove('fullscreenicon'); 781 fullscreenicon.classList.remove('fullscreenicon');
773 fullscreenicon.classList.add('fullscreenexiticon'); 782 fullscreenicon.classList.add('fullscreenexiticon');
774 } 783 }
775 else { 784 else {
776 fullscreenicon.classList.remove('fullscreenexiticon'); 785 fullscreenicon.classList.remove('fullscreenexiticon');
777 fullscreenicon.classList.add('fullscreenicon'); 786 fullscreenicon.classList.add('fullscreenicon');
778 } 787 }
779 chrome.send('toggleFullscreen', ['']); 788 chrome.mediaPlayerPrivate.toggleFullscreen();
780 } 789 }
781 790
782 function onMetadataAvail() { 791 function onMetadataAvail() {
783 var element = getMediaElement(); 792 var element = getMediaElement();
784 var duration = element.duration; 793 var duration = element.duration;
785 if (duration) { 794 if (duration) {
786 var durString = '' + Math.floor((duration / 60)) + ':' + (Math.floor(duratio n) % 60); 795 var durString = '' + Math.floor((duration / 60)) + ':' + (Math.floor(duratio n) % 60);
787 var durDiv = $('duration'); 796 var durDiv = $('duration');
788 durDiv.textContent = durString; 797 durDiv.textContent = durString;
789 } 798 }
(...skipping 28 matching lines...) Expand all
818 } 827 }
819 } 828 }
820 829
821 function stopAllPlayback() { 830 function stopAllPlayback() {
822 var element = getMediaElement(); 831 var element = getMediaElement();
823 if (element != null) { 832 if (element != null) {
824 element.pause(); 833 element.pause();
825 } 834 }
826 } 835 }
827 836
828 function playlistChanged(info, playlist) { 837 function getPlaylistCallback(playlist) {
829 if (info.force) { 838 currentPlaylist = playlist.items;
830 currentPlaylist = playlist; 839 currentItem = playlist.position;
831 stopAllPlayback(); 840
832 if (playlist.length >= 1) { 841 if (playlist.pending_playback_request) {
833 if (info.currentOffset) { 842 playMediaFile(currentPlaylist[currentItem].path);
834 currentItem = info.currentOffset;
835 } else {
836 currentItem = 0;
837 }
838 var item = playlist[currentItem];
839 chrome.send('currentOffsetChanged', ['' + currentItem]);
840 playMediaFile(item.path);
841 }
842 } else {
843 var media = getMediaElement();
844 currentPlaylist = playlist;
845 // Only need to handle the case where we are not playing
846 // since if it is currently playing, it will just move
847 // to the next file when the current is complete.
848 if (media == null) {
849 for (var x = 0; x < playlist.length; x++) {
850 if (playlist[x].path == info.path) {
851 // found the newly added item.
852 currentItem = x;
853 chrome.send('currentOffsetChanged', ['' + currentItem]);
854 playMediaFile(playlist[x].path);
855 return;
856 }
857 }
858 if (playlist.length > 0) {
859 currentItem = 0;
860 chrome.send('currentOffsetChanged', ['' + currentItem]);
861 playMediaFile(playlist[0].path);
862 }
863 }
864 } 843 }
865 } 844 }
866 845
867 function togglePlaylist() { 846 function togglePlaylist() {
868 chrome.send("togglePlaylist", []); 847 chrome.mediaPlayerPrivate.togglePlaylistPanel();
869 } 848 }
870 849
871 function playMediaFile(url) { 850 function playMediaFile(url) {
872 $('error').textContent = ''; 851 $('error').textContent = '';
873 console.log('playfile '+url);
874 $('title').textContent = ''; 852 $('title').textContent = '';
875 if (pathIsVideoFile(url) ) { 853 if (pathIsVideoFile(url) ) {
876 playVideoFile(url); 854 playVideoFile(url);
877 } else if(pathIsAudioFile(url)) { 855 } else if(pathIsAudioFile(url)) {
878 playAudioFile(url); 856 playAudioFile(url);
879 } else { 857 } else {
880 alert('file unknown:' + url); 858 alert('file unknown:' + url);
881 } 859 }
882 } 860 }
883 861
884 </script> 862 </script>
885 <body onload='load();' onselectstart='return false'> 863 <body onload='load();' onselectstart='return false'>
886 <div id='error' class='error'></div> 864 <div id='error' class='error'></div>
887 <div id='title' class='audiotitle'></div> 865 <div id='title' class='audiotitle'></div>
888 <div id='glow' class='glow'></div> 866 <div id='glow' class='glow'></div>
889 <div class='playercontrolsbox'> 867 <div class='playercontrolsbox'>
890 <div id='playercontrols'> 868 <div id='playercontrols'>
891 </div> 869 </div>
892 </div> 870 </div>
893 </body> 871 </body>
894 </html> 872 </html>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698