OLD | NEW |
1 /* | 1 /* |
2 * Copyright (C) 2013 Google Inc. All rights reserved. | 2 * Copyright (C) 2013 Google Inc. All rights reserved. |
3 * | 3 * |
4 * Redistribution and use in source and binary forms, with or without | 4 * Redistribution and use in source and binary forms, with or without |
5 * modification, are permitted provided that the following conditions are | 5 * modification, are permitted provided that the following conditions are |
6 * met: | 6 * met: |
7 * | 7 * |
8 * * Redistributions of source code must retain the above copyright | 8 * * Redistributions of source code must retain the above copyright |
9 * notice, this list of conditions and the following disclaimer. | 9 * notice, this list of conditions and the following disclaimer. |
10 * * Redistributions in binary form must reproduce the above | 10 * * Redistributions in binary form must reproduce the above |
(...skipping 346 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
357 super.update(); | 357 super.update(); |
358 var frames = this._model ? this._model.filmStripModel().frames() : []; | 358 var frames = this._model ? this._model.filmStripModel().frames() : []; |
359 if (!frames.length) | 359 if (!frames.length) |
360 return; | 360 return; |
361 | 361 |
362 var drawGeneration = Symbol('drawGeneration'); | 362 var drawGeneration = Symbol('drawGeneration'); |
363 this._drawGeneration = drawGeneration; | 363 this._drawGeneration = drawGeneration; |
364 this._imageByFrame(frames[0]).then(image => { | 364 this._imageByFrame(frames[0]).then(image => { |
365 if (this._drawGeneration !== drawGeneration) | 365 if (this._drawGeneration !== drawGeneration) |
366 return; | 366 return; |
367 if (!image || !image.naturalWidth || !image.naturalHeight) | 367 if (!image.naturalWidth || !image.naturalHeight) |
368 return; | 368 return; |
369 var imageHeight = this.height() - 2 * Timeline.TimelineFilmStripOverview.P
adding; | 369 var imageHeight = this.height() - 2 * Timeline.TimelineFilmStripOverview.P
adding; |
370 var imageWidth = Math.ceil(imageHeight * image.naturalWidth / image.natura
lHeight); | 370 var imageWidth = Math.ceil(imageHeight * image.naturalWidth / image.natura
lHeight); |
371 var popoverScale = Math.min(200 / image.naturalWidth, 1); | 371 var popoverScale = Math.min(200 / image.naturalWidth, 1); |
372 this._emptyImage = new Image(image.naturalWidth * popoverScale, image.natu
ralHeight * popoverScale); | 372 this._emptyImage = new Image(image.naturalWidth * popoverScale, image.natu
ralHeight * popoverScale); |
373 this._drawFrames(imageWidth, imageHeight); | 373 this._drawFrames(imageWidth, imageHeight); |
374 }); | 374 }); |
375 } | 375 } |
376 | 376 |
377 /** | 377 /** |
378 * @param {!SDK.FilmStripModel.Frame} frame | 378 * @param {!SDK.FilmStripModel.Frame} frame |
379 * @return {!Promise<?HTMLImageElement>} | 379 * @return {!Promise<!HTMLImageElement>} |
380 */ | 380 */ |
381 _imageByFrame(frame) { | 381 _imageByFrame(frame) { |
382 var imagePromise = this._frameToImagePromise.get(frame); | 382 var imagePromise = this._frameToImagePromise.get(frame); |
383 if (!imagePromise) { | 383 if (!imagePromise) { |
384 imagePromise = frame.imageDataPromise().then(data => UI.loadImage(data ? '
data:image/jpg;base64,' + data : '')); | 384 imagePromise = frame.imageDataPromise().then(createImage); |
385 this._frameToImagePromise.set(frame, imagePromise); | 385 this._frameToImagePromise.set(frame, imagePromise); |
386 } | 386 } |
387 return imagePromise; | 387 return imagePromise; |
| 388 |
| 389 /** |
| 390 * @param {?string} data |
| 391 * @return {!Promise<!HTMLImageElement>} |
| 392 */ |
| 393 function createImage(data) { |
| 394 var fulfill; |
| 395 var promise = new Promise(f => fulfill = f); |
| 396 |
| 397 var image = /** @type {!HTMLImageElement} */ (createElement('img')); |
| 398 if (data) { |
| 399 image.src = 'data:image/jpg;base64,' + data; |
| 400 image.addEventListener('load', () => fulfill(image)); |
| 401 image.addEventListener('error', () => fulfill(image)); |
| 402 } else { |
| 403 fulfill(image); |
| 404 } |
| 405 return promise; |
| 406 } |
388 } | 407 } |
389 | 408 |
390 /** | 409 /** |
391 * @param {number} imageWidth | 410 * @param {number} imageWidth |
392 * @param {number} imageHeight | 411 * @param {number} imageHeight |
393 */ | 412 */ |
394 _drawFrames(imageWidth, imageHeight) { | 413 _drawFrames(imageWidth, imageHeight) { |
395 if (!imageWidth || !this._model) | 414 if (!imageWidth || !this._model) |
396 return; | 415 return; |
397 var filmStripModel = this._model.filmStripModel(); | 416 var filmStripModel = this._model.filmStripModel(); |
(...skipping 14 matching lines...) Expand all Loading... |
412 if (!frame) | 431 if (!frame) |
413 continue; | 432 continue; |
414 context.rect(x - 0.5, 0.5, imageWidth + 1, imageHeight + 1); | 433 context.rect(x - 0.5, 0.5, imageWidth + 1, imageHeight + 1); |
415 this._imageByFrame(frame).then(drawFrameImage.bind(this, x)); | 434 this._imageByFrame(frame).then(drawFrameImage.bind(this, x)); |
416 } | 435 } |
417 context.strokeStyle = '#ddd'; | 436 context.strokeStyle = '#ddd'; |
418 context.stroke(); | 437 context.stroke(); |
419 | 438 |
420 /** | 439 /** |
421 * @param {number} x | 440 * @param {number} x |
422 * @param {?HTMLImageElement} image | 441 * @param {!HTMLImageElement} image |
423 * @this {Timeline.TimelineFilmStripOverview} | 442 * @this {Timeline.TimelineFilmStripOverview} |
424 */ | 443 */ |
425 function drawFrameImage(x, image) { | 444 function drawFrameImage(x, image) { |
426 // Ignore draws deferred from a previous update call. | 445 // Ignore draws deferred from a previous update call. |
427 if (this._drawGeneration !== drawGeneration || !image) | 446 if (this._drawGeneration !== drawGeneration) |
428 return; | 447 return; |
429 context.drawImage(image, x, 1, imageWidth, imageHeight); | 448 context.drawImage(image, x, 1, imageWidth, imageHeight); |
430 } | 449 } |
431 } | 450 } |
432 | 451 |
433 /** | 452 /** |
434 * @override | 453 * @override |
435 * @param {number} x | 454 * @param {number} x |
436 * @return {!Promise<?Element>} | 455 * @return {!Promise<?Element>} |
437 */ | 456 */ |
438 overviewInfoPromise(x) { | 457 overviewInfoPromise(x) { |
439 if (!this._model || !this._model.filmStripModel().frames().length) | 458 if (!this._model || !this._model.filmStripModel().frames().length) |
440 return Promise.resolve(/** @type {?Element} */ (null)); | 459 return Promise.resolve(/** @type {?Element} */ (null)); |
441 | 460 |
442 var time = this.calculator().positionToTime(x); | 461 var time = this.calculator().positionToTime(x); |
443 var frame = this._model.filmStripModel().frameByTimestamp(time); | 462 var frame = this._model.filmStripModel().frameByTimestamp(time); |
444 if (frame === this._lastFrame) | 463 if (frame === this._lastFrame) |
445 return Promise.resolve(this._lastElement); | 464 return Promise.resolve(this._lastElement); |
446 var imagePromise = frame ? this._imageByFrame(frame) : Promise.resolve(this.
_emptyImage); | 465 var imagePromise = frame ? this._imageByFrame(frame) : Promise.resolve(this.
_emptyImage); |
447 return imagePromise.then(createFrameElement.bind(this)); | 466 return imagePromise.then(createFrameElement.bind(this)); |
448 | 467 |
449 /** | 468 /** |
450 * @this {Timeline.TimelineFilmStripOverview} | 469 * @this {Timeline.TimelineFilmStripOverview} |
451 * @param {?HTMLImageElement} image | 470 * @param {!HTMLImageElement} image |
452 * @return {?Element} | 471 * @return {?Element} |
453 */ | 472 */ |
454 function createFrameElement(image) { | 473 function createFrameElement(image) { |
455 var element = createElementWithClass('div', 'frame'); | 474 var element = createElementWithClass('div', 'frame'); |
456 if (image) | 475 element.createChild('div', 'thumbnail').appendChild(image); |
457 element.createChild('div', 'thumbnail').appendChild(image); | |
458 this._lastFrame = frame; | 476 this._lastFrame = frame; |
459 this._lastElement = element; | 477 this._lastElement = element; |
460 return element; | 478 return element; |
461 } | 479 } |
462 } | 480 } |
463 | 481 |
464 /** | 482 /** |
465 * @override | 483 * @override |
466 */ | 484 */ |
467 reset() { | 485 reset() { |
(...skipping 214 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
682 counters[group] = this._quantDuration; | 700 counters[group] = this._quantDuration; |
683 this._callback(counters); | 701 this._callback(counters); |
684 interval -= this._quantDuration; | 702 interval -= this._quantDuration; |
685 } | 703 } |
686 this._counters = []; | 704 this._counters = []; |
687 this._counters[group] = interval; | 705 this._counters[group] = interval; |
688 this._lastTime = time; | 706 this._lastTime = time; |
689 this._remainder = this._quantDuration - interval; | 707 this._remainder = this._quantDuration - interval; |
690 } | 708 } |
691 }; | 709 }; |
OLD | NEW |