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.naturalWidth || !image.naturalHeight) | 367 if (!image || !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(createImage); | 384 imagePromise = frame.imageDataPromise().then(data => UI.loadImage(data ? '
data:image/jpg;base64,' + data : '')); |
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 } | |
407 } | 388 } |
408 | 389 |
409 /** | 390 /** |
410 * @param {number} imageWidth | 391 * @param {number} imageWidth |
411 * @param {number} imageHeight | 392 * @param {number} imageHeight |
412 */ | 393 */ |
413 _drawFrames(imageWidth, imageHeight) { | 394 _drawFrames(imageWidth, imageHeight) { |
414 if (!imageWidth || !this._model) | 395 if (!imageWidth || !this._model) |
415 return; | 396 return; |
416 var filmStripModel = this._model.filmStripModel(); | 397 var filmStripModel = this._model.filmStripModel(); |
(...skipping 14 matching lines...) Expand all Loading... |
431 if (!frame) | 412 if (!frame) |
432 continue; | 413 continue; |
433 context.rect(x - 0.5, 0.5, imageWidth + 1, imageHeight + 1); | 414 context.rect(x - 0.5, 0.5, imageWidth + 1, imageHeight + 1); |
434 this._imageByFrame(frame).then(drawFrameImage.bind(this, x)); | 415 this._imageByFrame(frame).then(drawFrameImage.bind(this, x)); |
435 } | 416 } |
436 context.strokeStyle = '#ddd'; | 417 context.strokeStyle = '#ddd'; |
437 context.stroke(); | 418 context.stroke(); |
438 | 419 |
439 /** | 420 /** |
440 * @param {number} x | 421 * @param {number} x |
441 * @param {!HTMLImageElement} image | 422 * @param {?HTMLImageElement} image |
442 * @this {Timeline.TimelineFilmStripOverview} | 423 * @this {Timeline.TimelineFilmStripOverview} |
443 */ | 424 */ |
444 function drawFrameImage(x, image) { | 425 function drawFrameImage(x, image) { |
445 // Ignore draws deferred from a previous update call. | 426 // Ignore draws deferred from a previous update call. |
446 if (this._drawGeneration !== drawGeneration) | 427 if (this._drawGeneration !== drawGeneration || !image) |
447 return; | 428 return; |
448 context.drawImage(image, x, 1, imageWidth, imageHeight); | 429 context.drawImage(image, x, 1, imageWidth, imageHeight); |
449 } | 430 } |
450 } | 431 } |
451 | 432 |
452 /** | 433 /** |
453 * @override | 434 * @override |
454 * @param {number} x | 435 * @param {number} x |
455 * @return {!Promise<?Element>} | 436 * @return {!Promise<?Element>} |
456 */ | 437 */ |
457 overviewInfoPromise(x) { | 438 overviewInfoPromise(x) { |
458 if (!this._model || !this._model.filmStripModel().frames().length) | 439 if (!this._model || !this._model.filmStripModel().frames().length) |
459 return Promise.resolve(/** @type {?Element} */ (null)); | 440 return Promise.resolve(/** @type {?Element} */ (null)); |
460 | 441 |
461 var time = this.calculator().positionToTime(x); | 442 var time = this.calculator().positionToTime(x); |
462 var frame = this._model.filmStripModel().frameByTimestamp(time); | 443 var frame = this._model.filmStripModel().frameByTimestamp(time); |
463 if (frame === this._lastFrame) | 444 if (frame === this._lastFrame) |
464 return Promise.resolve(this._lastElement); | 445 return Promise.resolve(this._lastElement); |
465 var imagePromise = frame ? this._imageByFrame(frame) : Promise.resolve(this.
_emptyImage); | 446 var imagePromise = frame ? this._imageByFrame(frame) : Promise.resolve(this.
_emptyImage); |
466 return imagePromise.then(createFrameElement.bind(this)); | 447 return imagePromise.then(createFrameElement.bind(this)); |
467 | 448 |
468 /** | 449 /** |
469 * @this {Timeline.TimelineFilmStripOverview} | 450 * @this {Timeline.TimelineFilmStripOverview} |
470 * @param {!HTMLImageElement} image | 451 * @param {?HTMLImageElement} image |
471 * @return {?Element} | 452 * @return {?Element} |
472 */ | 453 */ |
473 function createFrameElement(image) { | 454 function createFrameElement(image) { |
474 var element = createElementWithClass('div', 'frame'); | 455 var element = createElementWithClass('div', 'frame'); |
475 element.createChild('div', 'thumbnail').appendChild(image); | 456 if (image) |
| 457 element.createChild('div', 'thumbnail').appendChild(image); |
476 this._lastFrame = frame; | 458 this._lastFrame = frame; |
477 this._lastElement = element; | 459 this._lastElement = element; |
478 return element; | 460 return element; |
479 } | 461 } |
480 } | 462 } |
481 | 463 |
482 /** | 464 /** |
483 * @override | 465 * @override |
484 */ | 466 */ |
485 reset() { | 467 reset() { |
(...skipping 214 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
700 counters[group] = this._quantDuration; | 682 counters[group] = this._quantDuration; |
701 this._callback(counters); | 683 this._callback(counters); |
702 interval -= this._quantDuration; | 684 interval -= this._quantDuration; |
703 } | 685 } |
704 this._counters = []; | 686 this._counters = []; |
705 this._counters[group] = interval; | 687 this._counters[group] = interval; |
706 this._lastTime = time; | 688 this._lastTime = time; |
707 this._remainder = this._quantDuration - interval; | 689 this._remainder = this._quantDuration - interval; |
708 } | 690 } |
709 }; | 691 }; |
OLD | NEW |