| OLD | NEW |
|---|
| 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; |
| 11 } | 11 } |
| 12 | 12 |
| 13 .glow { | 13 .glow { |
| 14 left: 0; | 14 left: 0; |
| 15 right: 0; | 15 right: 0; |
| 16 bottom: 30px; | 16 bottom: 30px; |
| 17 height: 8px; | 17 height: 8px; |
| 18 opacity: .4; | 18 opacity: .4; |
| 19 position: absolute; | 19 position: absolute; |
| 20 background: -webkit-gradient(linear, | 20 background: -webkit-gradient(linear, |
| 21 left bottom, | 21 left bottom, |
| 22 left top, | 22 left top, |
| 23 from(white), | 23 from(white), |
| 24 to(transparent)); | 24 to(transparent)); |
| 25 } | 25 } |
| 26 |
| 26 .progress { | 27 .progress { |
| 27 -webkit-appearance: sliderthumb-horizontal; | 28 -webkit-appearance: sliderthumb-horizontal; |
| 28 position: absolute; | 29 position: absolute; |
| 29 background: transparent; | 30 background: transparent; |
| 30 left: 93px; | 31 left: 93px; |
| 31 right: 120px; | 32 right: 120px; |
| 32 bottom: -2px; | 33 bottom: -2px; |
| 33 height: 30px; | 34 height: 30px; |
| 34 z-index: 99999; | 35 z-index: 99999; |
| 35 border-left: 1px solid #424242; | 36 border-left: 1px solid #424242; |
| (...skipping 66 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 102 background: -webkit-gradient(linear, | 103 background: -webkit-gradient(linear, |
| 103 left top, | 104 left top, |
| 104 left bottom, | 105 left bottom, |
| 105 from(#323232), | 106 from(#323232), |
| 106 to(#070707)); | 107 to(#070707)); |
| 107 } | 108 } |
| 108 | 109 |
| 109 .soundbutton { | 110 .soundbutton { |
| 110 position: absolute; | 111 position: absolute; |
| 111 right: 30px; | 112 right: 30px; |
| 112 cursor: pointer; | |
| 113 bottom: 0; | 113 bottom: 0; |
| 114 z-index: 9999; | |
| 115 width: 28px; | |
| 116 background: url('../../app/theme/mediaplayer_vol_high.png'); | |
| 117 background-repeat: no-repeat; | |
| 118 background-position: 6px 8px; | |
| 119 height: 30px; | |
| 120 border-left: 1px solid #424242; | 114 border-left: 1px solid #424242; |
| 121 border-right: 1px solid black; | 115 border-right: 1px solid black; |
| 122 } | 116 } |
| 123 | 117 |
| 118 .soundicon { |
| 119 background: url('../../app/theme/mediaplayer_vol_high.png'); |
| 120 background-repeat: no-repeat; |
| 121 background-position: 6px 8px; |
| 122 } |
| 123 |
| 124 .volume { | 124 .volume { |
| 125 position: absolute; | 125 position: absolute; |
| 126 bottom: 30px; | 126 bottom: 30px; |
| 127 height: 80px; | 127 height: 80px; |
| 128 width: 30px; | 128 width: 30px; |
| 129 right: 30px; | 129 right: 30px; |
| 130 z-index: 99999; | 130 z-index: 99999; |
| 131 background: black; | 131 background: black; |
| 132 background: -webkit-gradient(linear, | 132 background: -webkit-gradient(linear, |
| 133 left top, | 133 left top, |
| 134 left bottom, | 134 left bottom, |
| 135 from(#323232), | 135 from(#323232), |
| 136 to(#070707)); | 136 to(#070707)); |
| 137 } | 137 } |
| 138 | 138 |
| 139 .fullscreen { | 139 .fullscreen { |
| 140 position: absolute; | 140 position: absolute; |
| 141 right: 60px; | 141 right: 60px; |
| 142 cursor: pointer; | |
| 143 bottom: 0; | 142 bottom: 0; |
| 144 z-index: 9999; | 143 border-left: 1px solid #424242; |
| 145 width: 28px; | 144 border-right: 1px solid black; |
| 145 } |
| 146 |
| 147 .fullscreenicon { |
| 146 background: url('../../app/theme/mediaplayer_full_screen.png'); | 148 background: url('../../app/theme/mediaplayer_full_screen.png'); |
| 147 background-repeat: no-repeat; | 149 background-repeat: no-repeat; |
| 148 background-position: 8px 8px; | 150 background-position: 6px 8px; |
| 149 height: 30px; | |
| 150 border-left: 1px solid #424242; | |
| 151 border-right: 1px solid black; | |
| 152 } | 151 } |
| 153 | 152 |
| 154 .volumeslider { | 153 .volumeslider { |
| 155 -webkit-appearance: slider-vertical; | 154 -webkit-appearance: slider-vertical; |
| 156 position: absolute; | 155 position: absolute; |
| 157 left: 0; | 156 left: 0; |
| 158 right: 0; | 157 right: 0; |
| 159 bottom: 0; | 158 bottom: 0; |
| 160 top: 0; | 159 top: 0; |
| 161 } | 160 } |
| 162 | 161 |
| 163 .playbutton { | 162 .playbutton { |
| 164 position: absolute; | 163 position: absolute; |
| 165 left: 30px; | 164 left: 30px; |
| 166 bottom: 0; | 165 bottom: 0; |
| 167 cursor: pointer; | 166 border-left: 1px solid #424242; |
| 168 z-index: 9999; | 167 border-right: 1px solid black; |
| 169 width: 28px; | 168 } |
| 169 |
| 170 .playicon { |
| 170 background: url('../../app/theme/mediaplayer_play.png'); | 171 background: url('../../app/theme/mediaplayer_play.png'); |
| 171 background-repeat: no-repeat; | 172 background-repeat: no-repeat; |
| 172 background-position: 9px 8px; | 173 background-position: 9px 8px; |
| 173 height: 30px; | |
| 174 border-left: 1px solid #424242; | |
| 175 border-right: 1px solid black; | |
| 176 } | 174 } |
| 177 | 175 |
| 178 .pausebutton { | 176 .pausebutton { |
| 179 position: absolute; | 177 position: absolute; |
| 180 left: 30px; | 178 left: 30px; |
| 181 bottom: 0; | 179 bottom: 0; |
| 182 cursor: pointer; | 180 border-left: 1px solid #424242; |
| 183 z-index: 9999; | 181 border-right: 1px solid black; |
| 184 width: 28px; | 182 } |
| 185 height: 30px; | 183 |
| 184 .pauseicon { |
| 186 background: url('../../app/theme/mediaplayer_pause.png'); | 185 background: url('../../app/theme/mediaplayer_pause.png'); |
| 187 background-repeat: no-repeat; | 186 background-repeat: no-repeat; |
| 188 background-position: 11px 8px; | 187 background-position: 9px 8px; |
| 189 border-left: 1px solid #424242; | |
| 190 border-right: 1px solid black; | |
| 191 } | 188 } |
| 192 | 189 |
| 193 .prevbutton { | 190 .prevbutton { |
| 194 position: absolute; | 191 position: absolute; |
| 195 left: 0; | 192 left: 0; |
| 196 cursor: pointer; | |
| 197 bottom: 0; | 193 bottom: 0; |
| 198 width: 29px; | 194 border-right: 1px solid black; |
| 199 height: 30px; | 195 } |
| 196 |
| 197 .previcon { |
| 200 background: url('../../app/theme/mediaplayer_prev.png'); | 198 background: url('../../app/theme/mediaplayer_prev.png'); |
| 201 background-repeat: no-repeat; | 199 background-repeat: no-repeat; |
| 202 background-position: 6px 8px; | 200 background-position: 6px 8px; |
| 203 border-right: 1px solid black; | |
| 204 } | 201 } |
| 205 | 202 |
| 206 .playbackvideoelement { | 203 .playbackvideoelement { |
| 207 width: 100%; | 204 width: 100%; |
| 208 height: 100%; | 205 height: 100%; |
| 209 position: absolute; | 206 position: absolute; |
| 210 left: 0; | 207 left: 0; |
| 211 top: 0; | 208 top: 0; |
| 212 } | 209 } |
| 213 | 210 |
| (...skipping 10 matching lines...) Expand all Loading... |
| 224 width: 100%; | 221 width: 100%; |
| 225 height: 100%; | 222 height: 100%; |
| 226 position: absolute; | 223 position: absolute; |
| 227 left: 0; | 224 left: 0; |
| 228 top: 0; | 225 top: 0; |
| 229 } | 226 } |
| 230 | 227 |
| 231 .nextbutton { | 228 .nextbutton { |
| 232 position: absolute; | 229 position: absolute; |
| 233 left: 60px; | 230 left: 60px; |
| 234 cursor: pointer; | |
| 235 bottom: 0; | 231 bottom: 0; |
| 236 z-index: 9999; | 232 border-left: 1px solid #424242; |
| 237 width: 28px; | 233 border-right: 1px solid black; |
| 238 height: 30px; | 234 } |
| 235 |
| 236 .nexticon { |
| 239 background: url('../../app/theme/mediaplayer_next.png'); | 237 background: url('../../app/theme/mediaplayer_next.png'); |
| 240 background-repeat: no-repeat; | 238 background-repeat: no-repeat; |
| 241 background-position: 6px 8px; | 239 background-position: 6px 8px; |
| 242 border-left: 1px solid #424242; | |
| 243 border-right: 1px solid black; | |
| 244 } | 240 } |
| 245 | 241 |
| 246 .playlistbutton { | 242 .playlistbutton { |
| 247 position: absolute; | 243 position: absolute; |
| 248 right: 0; | 244 right: 0; |
| 245 bottom: 0; |
| 246 border-left: 1px solid #424242; |
| 247 border-right: 1px solid black; |
| 248 } |
| 249 |
| 250 .playlisticon { |
| 251 background: url('../../app/theme/mediaplayer_playlist.png'); |
| 252 background-repeat: no-repeat; |
| 253 background-position: 6px 8px; |
| 254 } |
| 255 |
| 256 .controlbutton { |
| 257 z-index: 9999; |
| 249 cursor: pointer; | 258 cursor: pointer; |
| 250 z-index: 9999; | |
| 251 bottom: 0; | |
| 252 width: 28px; | 259 width: 28px; |
| 253 height: 30px; | 260 height: 30px; |
| 254 background: url('../../app/theme/mediaplayer_playlist.png'); | 261 } |
| 255 background-repeat: no-repeat; | 262 |
| 256 background-position: 6px 8px; | 263 .controlbutton:hover { |
| 257 border-left: 1px solid #424242; | 264 background: -webkit-gradient(linear, |
| 258 border-right: 1px solid black; | 265 left top, |
| 266 left bottom, |
| 267 from(#6a7eac), |
| 268 to(#000000)); |
| 269 } |
| 270 |
| 271 .icon { |
| 272 width: 100%; |
| 273 height: 100%; |
| 274 z-index: 9999; |
| 259 } | 275 } |
| 260 | 276 |
| 261 </style> | 277 </style> |
| 262 <script src='local_strings.js'></script> | 278 <script src='local_strings.js'></script> |
| 263 <script> | 279 <script> |
| 264 | 280 |
| 265 function $(o) { | 281 function $(o) { |
| 266 return document.getElementById(o); | 282 return document.getElementById(o); |
| 267 } | 283 } |
| 268 | 284 |
| (...skipping 42 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 311 element.style.display = 'none'; | 327 element.style.display = 'none'; |
| 312 } | 328 } |
| 313 }; | 329 }; |
| 314 | 330 |
| 315 function onMediaError(e) { | 331 function onMediaError(e) { |
| 316 chrome.send('playbackError', ['Error playing back']); | 332 chrome.send('playbackError', ['Error playing back']); |
| 317 onMediaComplete(); | 333 onMediaComplete(); |
| 318 }; | 334 }; |
| 319 | 335 |
| 320 function onMediaComplete() { | 336 function onMediaComplete() { |
| 337 currentItem ++; |
| 338 if (currentItem >= currentPlaylist.length) { |
| 339 currentItem -= 1; |
| 340 var element = getMediaElement(); |
| 341 element.currentTime = 0; |
| 342 element.pause(); |
| 343 onMediaPause(); |
| 344 onMediaProgress(); |
| 345 return; |
| 346 } |
| 321 var mediaElement = getMediaElement(); | 347 var mediaElement = getMediaElement(); |
| 322 mediaElement.removeEventListener("progress", onLoadedProgress, true); | 348 mediaElement.removeEventListener("progress", onLoadedProgress, true); |
| 323 mediaElement.removeEventListener("timeupdate", onMediaProgress, true); | 349 mediaElement.removeEventListener("timeupdate", onMediaProgress, true); |
| 324 mediaElement.removeEventListener("durationchange", onMetadataAvail, true); | 350 mediaElement.removeEventListener("durationchange", onMetadataAvail, true); |
| 325 // MediaElement.removeEventListener("ended", onMediaComplete, true); | 351 // MediaElement.removeEventListener("ended", onMediaComplete, true); |
| 326 mediaElement.removeEventListener("play", onMediaPlay, true); | 352 mediaElement.removeEventListener("play", onMediaPlay, true); |
| 327 mediaElement.removeEventListener("pause", onMediaPause, true); | 353 mediaElement.removeEventListener("pause", onMediaPause, true); |
| 328 currentItem ++; | |
| 329 | 354 |
| 330 if (currentItem >= currentPlaylist.length) { | |
| 331 currentItem = -1; | |
| 332 return; | |
| 333 } | |
| 334 chrome.send('currentOffsetChanged', ['' + currentItem]); | 355 chrome.send('currentOffsetChanged', ['' + currentItem]); |
| 335 playMediaFile(currentPlaylist[currentItem].path); | 356 playMediaFile(currentPlaylist[currentItem].path); |
| 336 }; | 357 }; |
| 337 | 358 |
| 338 function onMediaPlay() { | 359 function onMediaPlay() { |
| 339 var pausebutton = $('pausebutton'); | 360 var pausebutton = $('pausebutton'); |
| 340 var playbutton = $('playbutton'); | 361 var playbutton = $('playbutton'); |
| 341 pausebutton.style.display = 'block'; | 362 pausebutton.style.display = 'block'; |
| 342 playbutton.style.display = 'none'; | 363 playbutton.style.display = 'none'; |
| 343 }; | 364 }; |
| (...skipping 90 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 434 if (videoPlaybackElement != null) { | 455 if (videoPlaybackElement != null) { |
| 435 controlsclass = 'video'; | 456 controlsclass = 'video'; |
| 436 element.className = 'videocontrols'; | 457 element.className = 'videocontrols'; |
| 437 } else if (audioPlaybackElement != null) { | 458 } else if (audioPlaybackElement != null) { |
| 438 controlsclass = 'audio'; | 459 controlsclass = 'audio'; |
| 439 element.className = 'audiocontrols'; | 460 element.className = 'audiocontrols'; |
| 440 } | 461 } |
| 441 | 462 |
| 442 var playbutton = document.createElement('div'); | 463 var playbutton = document.createElement('div'); |
| 443 playbutton.id = 'playbutton'; | 464 playbutton.id = 'playbutton'; |
| 444 playbutton.className = controlsclass + ' playbutton'; | 465 playbutton.className = controlsclass + ' controlbutton playbutton'; |
| 445 playbutton.onclick = playPauseButtonClick; | 466 playbutton.onclick = playPauseButtonClick; |
| 467 var playicon = document.createElement('div'); |
| 468 playicon.className = 'icon playicon'; |
| 469 playbutton.appendChild(playicon); |
| 446 element.appendChild(playbutton); | 470 element.appendChild(playbutton); |
| 447 | 471 |
| 448 | 472 |
| 449 var pausebutton = document.createElement('div'); | 473 var pausebutton = document.createElement('div'); |
| 450 pausebutton.id = 'pausebutton'; | 474 pausebutton.id = 'pausebutton'; |
| 451 pausebutton.className = controlsclass + ' pausebutton'; | 475 pausebutton.className = controlsclass + ' controlbutton pausebutton'; |
| 452 pausebutton.onclick = playPauseButtonClick; | 476 pausebutton.onclick = playPauseButtonClick; |
| 477 var pauseicon = document.createElement('div'); |
| 478 pauseicon.className = 'icon pauseicon'; |
| 479 pausebutton.appendChild(pauseicon); |
| 453 element.appendChild(pausebutton); | 480 element.appendChild(pausebutton); |
| 454 | 481 |
| 455 var nextbutton = document.createElement('div'); | 482 var nextbutton = document.createElement('div'); |
| 456 nextbutton.id = 'nextbutton'; | 483 nextbutton.id = 'nextbutton'; |
| 457 nextbutton.className = controlsclass + ' nextbutton'; | 484 nextbutton.className = controlsclass + ' controlbutton nextbutton'; |
| 458 nextbutton.onclick = nextButtonClick; | 485 nextbutton.onclick = nextButtonClick; |
| 486 var nexticon = document.createElement('div'); |
| 487 nexticon.className = 'icon nexticon'; |
| 488 nextbutton.appendChild(nexticon); |
| 459 element.appendChild(nextbutton); | 489 element.appendChild(nextbutton); |
| 460 | 490 |
| 461 var prevbutton = document.createElement('div'); | 491 var prevbutton = document.createElement('div'); |
| 462 prevbutton.id = 'prevbutton'; | 492 prevbutton.id = 'prevbutton'; |
| 463 prevbutton.className = controlsclass + ' prevbutton'; | 493 prevbutton.className = controlsclass + ' controlbutton prevbutton'; |
| 464 prevbutton.onclick = prevButtonClick; | 494 prevbutton.onclick = prevButtonClick; |
| 495 var previcon = document.createElement('div'); |
| 496 previcon.className = 'icon previcon'; |
| 497 prevbutton.appendChild(previcon); |
| 465 element.appendChild(prevbutton); | 498 element.appendChild(prevbutton); |
| 466 | 499 |
| 467 var playlistbutton = document.createElement('div'); | 500 var playlistbutton = document.createElement('div'); |
| 468 playlistbutton.id = 'playlistbutton'; | 501 playlistbutton.id = 'playlistbutton'; |
| 469 playlistbutton.className = 'playlistbutton'; | 502 playlistbutton.className = ' controlbutton playlistbutton'; |
| 470 playlistbutton.onclick = togglePlaylist; | 503 playlistbutton.onclick = togglePlaylist; |
| 504 var playlisticon = document.createElement('div'); |
| 505 playlisticon.className = 'icon playlisticon'; |
| 506 playlistbutton.appendChild(playlisticon); |
| 471 element.appendChild(playlistbutton); | 507 element.appendChild(playlistbutton); |
| 472 | 508 |
| 473 var slider = document.createElement('input'); | 509 var slider = document.createElement('input'); |
| 474 slider.type = 'range'; | 510 slider.type = 'range'; |
| 475 slider.id = 'progress'; | 511 slider.id = 'progress'; |
| 476 slider.className = controlsclass + ' progress'; | 512 slider.className = controlsclass + ' progress'; |
| 477 slider.onchange = userChangedProgress; | 513 slider.onchange = userChangedProgress; |
| 478 element.appendChild(slider); | 514 element.appendChild(slider); |
| 479 | 515 |
| 480 var sliderback = document.createElement('div'); | 516 var sliderback = document.createElement('div'); |
| 481 sliderback.className = 'sliderback'; | 517 sliderback.className = 'sliderback'; |
| 482 element.appendChild(sliderback); | 518 element.appendChild(sliderback); |
| 483 | 519 |
| 484 var loaded = document.createElement('div'); | 520 var loaded = document.createElement('div'); |
| 485 loaded.id = 'sliderloaded'; | 521 loaded.id = 'sliderloaded'; |
| 486 loaded.className = 'sliderloaded'; | 522 loaded.className = 'sliderloaded'; |
| 487 sliderback.appendChild(loaded); | 523 sliderback.appendChild(loaded); |
| 488 | 524 |
| 489 var played = document.createElement('div'); | 525 var played = document.createElement('div'); |
| 490 played.id = 'sliderplayed'; | 526 played.id = 'sliderplayed'; |
| 491 played.className = 'sliderplayed'; | 527 played.className = 'sliderplayed'; |
| 492 sliderback.appendChild(played); | 528 sliderback.appendChild(played); |
| 493 | 529 |
| 494 var soundbutton = document.createElement('div'); | 530 var soundbutton = document.createElement('div'); |
| 495 soundbutton.id = 'soundbutton'; | 531 soundbutton.id = 'soundbutton'; |
| 496 soundbutton.className = controlsclass + ' soundbutton'; | 532 soundbutton.className = controlsclass + ' controlbutton soundbutton'; |
| 497 soundbutton.onclick = toggleVolumeVisible; | 533 soundbutton.onclick = toggleVolumeVisible; |
| 534 var soundicon = document.createElement('div'); |
| 535 soundicon.className = 'icon soundicon'; |
| 536 soundbutton.appendChild(soundicon); |
| 498 element.appendChild(soundbutton); | 537 element.appendChild(soundbutton); |
| 499 | 538 |
| 500 var fullscreen = document.createElement('div'); | 539 var fullscreen = document.createElement('div'); |
| 501 fullscreen.id = 'fullscreen'; | 540 fullscreen.id = 'fullscreen'; |
| 502 fullscreen.className = controlsclass + ' fullscreen'; | 541 fullscreen.className = controlsclass + ' controlbutton fullscreen'; |
| 503 fullscreen.onclick = toggleFullscreen; | 542 fullscreen.onclick = toggleFullscreen; |
| 543 var fullscreenicon = document.createElement('div'); |
| 544 fullscreenicon.className = 'icon fullscreenicon'; |
| 545 fullscreen.appendChild(fullscreenicon); |
| 504 element.appendChild(fullscreen); | 546 element.appendChild(fullscreen); |
| 505 | 547 |
| 506 var volume = document.createElement('div'); | 548 var volume = document.createElement('div'); |
| 507 volume.id = 'volume'; | 549 volume.id = 'volume'; |
| 508 volume.className = controlsclass + ' volume'; | 550 volume.className = controlsclass + ' controlbutton volume'; |
| 509 volume.style.display = 'none'; | 551 volume.style.display = 'none'; |
| 510 var volumeslider = document.createElement('input'); | 552 var volumeslider = document.createElement('input'); |
| 511 volumeslider.type = 'range'; | 553 volumeslider.type = 'range'; |
| 512 volumeslider.id = 'volumeslider'; | 554 volumeslider.id = 'volumeslider'; |
| 513 volumeslider.className = 'volumeslider'; | 555 volumeslider.className = 'volumeslider'; |
| 514 volumeslider.onchange = volumeChange; | 556 volumeslider.onchange = volumeChange; |
| 515 volume.appendChild(volumeslider); | 557 volume.appendChild(volumeslider); |
| 516 document.body.appendChild(volume); | 558 document.body.appendChild(volume); |
| 517 | 559 |
| 518 var duration = document.createElement('div'); | 560 var duration = document.createElement('div'); |
| (...skipping 127 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 646 } | 688 } |
| 647 }; | 689 }; |
| 648 | 690 |
| 649 </script> | 691 </script> |
| 650 <body onload='load();' onselectstart='return false'> | 692 <body onload='load();' onselectstart='return false'> |
| 651 <div id='glow' class='glow'></div> | 693 <div id='glow' class='glow'></div> |
| 652 <div id='playercontrols' class='playercontrols'> | 694 <div id='playercontrols' class='playercontrols'> |
| 653 </div> | 695 </div> |
| 654 </body> | 696 </body> |
| 655 </html> | 697 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1745004:
Changing the mediaplayer so it starts over when the clip is finished. (Closed)
Base URL: svn://chrome-svn/chrome/trunk/src/