| @@ -518,9 +518,9 @@ | ||
| 518 | 518 | /* |
| 519 | 519 | * Init. |
| 520 | 520 | */ |
| 521 | 521 | init: function () { |
| 522 | - var processed, progress; | |
| 522 | + var progress; | |
| 523 | 523 | this.$missingWebpElement = $('.generate-missing-webp'); |
| 524 | 524 | this.$missingWebpMessage = $('.generate-missing-webp p'); |
| 525 | 525 | |
| 526 | 526 | this.$button = $( '#imagify-generate-webp-versions' ); |
| @@ -558,12 +558,11 @@ | ||
| 558 | 558 | w.imagify.beat.disableSuspend(); |
| 559 | 559 | |
| 560 | 560 | this.$missingWebpMessage.hide().attr('aria-hidden', 'true'); |
| 561 | 561 | |
| 562 | - processed = imagifyOptions.bulk.progress_next_gen.total - imagifyOptions.bulk.progress_next_gen.remaining; | |
| 563 | - progress = Math.floor( processed / imagifyOptions.bulk.progress_next_gen.total * 100 ); | |
| 564 | - this.$progressBar.css( 'width', progress + '%' ); | |
| 565 | - this.$progressText.text( processed + '/' + imagifyOptions.bulk.progress_next_gen.total ); | |
| 562 | + progress = this.getProgress( imagifyOptions.bulk.progress_next_gen.total, imagifyOptions.bulk.progress_next_gen.remaining ); | |
| 563 | + this.$progressBar.css( 'width', progress.percent + '%' ); | |
| 564 | + this.$progressText.text( progress.processed + '/' + progress.total ); | |
| 566 | 565 | |
| 567 | 566 | this.$progressWrap.slideDown().attr( 'aria-hidden', 'false' ).removeClass( 'hidden' ); |
| 568 | 567 | } |
| 569 | 568 | }, |
| @@ -625,8 +624,28 @@ | ||
| 625 | 624 | data[ imagifyOptions.bulk.imagifybeatIDs.progress ] = imagifyOptions.bulk.contexts; |
| 626 | 625 | }, |
| 627 | 626 | |
| 628 | 627 | /** |
| 628 | + * Compute a display-safe progress state. | |
| 629 | + * | |
| 630 | + * `total` is a snapshot taken when the run started, while `remaining` is recounted on | |
| 631 | + * every Imagifybeat tick. Anything that grows the workload mid-run pushes `remaining` | |
| 632 | + * above `total`: uploading new media while the run is in progress, or switching the | |
| 633 | + * Next-Gen format so that every media is suddenly missing one. `total - remaining` then | |
| 634 | + * rendered as a negative count, and a snapshot of 0 divided by zero on top of that. | |
| 635 | + * | |
| 636 | + * Track the largest workload seen instead, so the count never goes negative and the | |
| 637 | + * denominator reflects what is actually left to do. | |
| 638 | + * | |
| 639 | + * @param {number} total Number of media to process when the run started. | |
| 640 | + * @param {number} remaining Number of media still waiting to be processed. | |
| 641 | + * @return {object} Object with `processed`, `total` and `percent` keys. | |
| 642 | + */ | |
| 643 | + getProgress: function ( total, remaining ) { | |
| 644 | + return w.imagify.getProgress( total, remaining ); | |
| 645 | + }, | |
| 646 | + | |
| 647 | + /** | |
| 629 | 648 | * Listen for the custom event "imagifybeat-tick" on $(document). |
| 630 | 649 | * It allows to update various data periodically. |
| 631 | 650 | * |
| 632 | 651 | * @param {object} e Event object. |
| @@ -632,9 +651,9 @@ | ||
| 632 | 651 | * @param {object} e Event object. |
| 633 | 652 | * @param {object} data Object containing all Imagifybeat IDs. |
| 634 | 653 | */ |
| 635 | 654 | processQueueImagifybeat: function ( e, data ) { |
| 636 | - var images_status, processed, progress; | |
| 655 | + var images_status, progress; | |
| 637 | 656 | |
| 638 | 657 | if ( e.data.imagifyOptionsBulk && typeof data[ imagifyOptions.bulk.imagifybeatIDs.progress ] === 'undefined' ) { |
| 639 | 658 | return; |
| 640 | 659 | } |
| @@ -650,12 +669,11 @@ | ||
| 650 | 669 | e.data.imagifyOptionsBulk.processFinished(); |
| 651 | 670 | return; |
| 652 | 671 | } |
| 653 | 672 | |
| 654 | - processed = images_status.total - images_status.remaining; | |
| 655 | - progress = Math.floor( processed / images_status.total * 100 ); | |
| 656 | - e.data.imagifyOptionsBulk.$progressBar.css( 'width', progress + '%' ); | |
| 657 | - e.data.imagifyOptionsBulk.$progressText.text( processed + '/' + images_status.total ); | |
| 673 | + progress = e.data.imagifyOptionsBulk.getProgress( images_status.total, images_status.remaining ); | |
| 674 | + e.data.imagifyOptionsBulk.$progressBar.css( 'width', progress.percent + '%' ); | |
| 675 | + e.data.imagifyOptionsBulk.$progressText.text( progress.processed + '/' + progress.total ); | |
| 658 | 676 | }, |
| 659 | 677 | |
| 660 | 678 | /** |
| 661 | 679 | * Add a Imagifybeat ID for requirements on "imagifybeat-send" event. |
