active_storage-async_variants 0.7.0 → 0.8.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 259c11526314988d60e78e9e176dc16105c6aeb578b1774693a666fc1e277a21
-  data.tar.gz: 92fc3546ed708ed709ad4fedc2d7e6258d765719fad75571844671a902f1b485
+  metadata.gz: 34c672d7d6d989bb7c633aa1e57e081d6879a8ea9695ffd65997b9df9cf8f8ab
+  data.tar.gz: aca54bb9b2ae6af16016f1e96e6e3f221bc7029b8eca9c145535eadefeb57d66
 SHA512:
-  metadata.gz: ebfe0839de2603c91a5705f3942b30b3db7685d20ce5d3d2425f98472a191d559ac9103bab5a59972e09f18385b8829283fe0323f2de4810e8619cb57e028ab2
-  data.tar.gz: 165f5796f098a3f40194a9d893ba07b98bd7b3a7ac8601fda744f5dcb1e4a98c0d69e1514e788f612ea8fa1dbf4bca6c44cbb7ee5ef072fcf5fa13fe03ce5b56
+  metadata.gz: e86b3777c71d70d2014fe439fb91f395f1711cce40efefa3c5e5291a22bd2fc6d1933aad3a1c095557726e45547d7112f9e2f2bbd24fece75726adebddd6f686
+  data.tar.gz: 591deb4316c685316084ebb26904e5fe5b2ecbea0328cc832469ae4185388239511e35507b53264e137cf85153bfe1a846e7bd0491ba023bb991333653cfb532

data/CHANGELOG.md

@@ -1,3 +1,8 @@
+## [0.8.0]
+
+- The processing progress bar now advances smoothly between polls: variants expose a `rate` (percent-per-second, derived from the record's `created_at`, last heartbeat, and reported progress) that the `@botandrose/progress-bar` element uses to optimistically creep forward, instead of only stepping on each refresh. Includes a migration adding a `created_at` column to `active_storage_variant_records`; run it before deploying.
+- Fix: the processing/failed placeholder image now points at a tiny gem-served 1x1 GIF whose URL ends in the media's filename, instead of a `data:` URI. Restores filename-based identification of the placeholder (e.g. for media-table diff assertions) without fetching the original through a representation. Video placeholders remain a source-less `<video>`.
+
 ## [0.7.0]
 
 - **Breaking:** A variant now opts into async processing with `async: true` instead of `processing:`. The `processing:` and `failed:` placeholder options are removed entirely — there is nothing to configure. A variant's `.url` serves the original while pending/processing/failed, and the processed variant once ready.

data/app/assets/javascripts/progress-bar.js

@@ -1,5 +1,6 @@
 const CIRCLE_RADIUS = 40; // fallback r attribute; CSS shrinks it to fit the stroke
 const PATH_LENGTH = 100;  // normalize the arc so dash math is independent of the radius
+const RATE_HZ = 30;       // optimistic auto-advance tick frequency
 
 const STYLES = `
   :host {
@@ -178,12 +179,21 @@ function clampPercent(value) {
   return Math.min(100, Math.max(0, number));
 }
 
+function parseRate(value) {
+  const number = Number(value);
+  if (Number.isNaN(number)) {
+    throw new TypeError(`progress-bar: rate must be numeric, got ${JSON.stringify(value)}`);
+  }
+  return number;
+}
+
 class ProgressBar extends HTMLElement {
   constructor() {
     super();
     this.attachShadow({ mode: 'open' });
     this._percent = null;
     this._renderedMode = null;
+    this._rateTimer = null;
   }
 
   connectedCallback() {
@@ -192,6 +202,11 @@ class ProgressBar extends HTMLElement {
     this.setAttribute('aria-valuemin', '0');
     this.setAttribute('aria-valuemax', '100');
     this.updateBar();
+    this._syncTicker();
+  }
+
+  disconnectedCallback() {
+    this._stopTicker();
   }
 
   get percent() {
@@ -214,6 +229,19 @@ class ProgressBar extends HTMLElement {
     this.toggleAttribute('error', Boolean(value));
   }
 
+  get rate() {
+    const value = this.getAttribute('rate');
+    return value === null ? null : Number(value);
+  }
+
+  set rate(value) {
+    if (value === null || value === undefined) {
+      this.removeAttribute('rate');
+    } else {
+      this.setAttribute('rate', parseRate(value));
+    }
+  }
+
   get indeterminate() {
     return !this.hasAttribute('percent');
   }
@@ -227,16 +255,22 @@ class ProgressBar extends HTMLElement {
   }
 
   static get observedAttributes() {
-    return ['percent', 'mode'];
+    return ['percent', 'mode', 'rate'];
   }
 
   attributeChangedCallback(name, oldValue, newValue) {
     if (name === 'percent') {
       this._percent = newValue === null ? null : clampPercent(newValue);
     }
+    if (name === 'rate' && newValue !== null) {
+      parseRate(newValue);
+    }
     if (name === 'mode') {
       this.render();
     }
+    if (name === 'percent' || name === 'rate') {
+      this._syncTicker();
+    }
     this.updateBar();
   }
 
@@ -263,6 +297,38 @@ class ProgressBar extends HTMLElement {
     }
   }
 
+  // Optimistic auto-advance: while a nonzero rate is set on a determinate bar,
+  // creep percent forward on its own. Indeterminate bars ignore rate entirely.
+  _syncTicker() {
+    const rate = Number(this.getAttribute('rate'));
+    const shouldRun = this.isConnected && !this.indeterminate && Number.isFinite(rate) && rate !== 0;
+    if (shouldRun && this._rateTimer === null) {
+      this._rateTimer = setInterval(() => this._tick(), 1000 / RATE_HZ);
+    } else if (!shouldRun) {
+      this._stopTicker();
+    }
+  }
+
+  _stopTicker() {
+    if (this._rateTimer !== null) {
+      clearInterval(this._rateTimer);
+      this._rateTimer = null;
+    }
+  }
+
+  _tick() {
+    const rate = Number(this.getAttribute('rate'));
+    const next = clampPercent(this._percent + rate / RATE_HZ);
+    if (next !== this._percent) {
+      this.percent = next;
+    }
+    // Hitting the bound it's heading toward retires the rate; a later percent
+    // change can re-arm it.
+    if (next === 0 || next === 100) {
+      this.removeAttribute('rate');
+    }
+  }
+
   render() {
     const mode = this.mode;
     if (this._renderedMode === mode) {

data/app/controllers/active_storage/async_variants/states_controller.rb

@@ -11,11 +11,20 @@ module ActiveStorage
 
       layout false
 
-      before_action :set_variant
+      # 1x1 transparent GIF served at a filename-bearing URL, so the
+      # processing/failed <img> identifies its media without fetching anything.
+      TRANSPARENT_GIF = "R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7".unpack1("m").freeze
+
+      before_action :set_variant, only: %i[show retry]
 
       def show
       end
 
+      def placeholder
+        expires_in 1.year, public: true
+        send_data TRANSPARENT_GIF, type: "image/gif", disposition: "inline"
+      end
+
       def retry
         @variant.blob.variant_records.where(
           variation_digest: @variant.variation.digest,

data/app/views/active_storage/async_variants/states/_processing.html.erb

@@ -1,7 +1,7 @@
 <div class="async-variant-state async-variant-processing">
   <%= async_variant_placeholder_tag(variant, html_options, kind: kind) %>
 
-  <%= content_tag "progress-bar", "", mode: "circular", class: "async-variant-progress", percent: variant.progress %>
+  <%= content_tag "progress-bar", "", mode: "circular", class: "async-variant-progress", percent: variant.progress, rate: variant.progress_rate %>
 </div>
 
 <%= ActiveStorage::AsyncVariants.stylesheet_link_tag "progress" %>

data/config/routes.rb

@@ -12,5 +12,13 @@ Rails.application.routes.draw do
     to: "active_storage/async_variants/states#retry",
     as: :async_variant_state_retry
 
+  # Tiny 1x1 GIF whose URL carries the media's filename, so the processing/failed
+  # box reserves layout without fetching the original through a representation.
+  get "/active_storage/async_variants/placeholder/:filename",
+    to: "active_storage/async_variants/states#placeholder",
+    as: :async_variant_placeholder,
+    constraints: { filename: %r{[^/]+} },
+    format: false
+
   ActiveStorage::AsyncVariants::Assets.draw(self, "/active_storage/async_variants/assets")
 end

data/db/migrate/20260608000001_add_created_at_to_variant_records.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+class AddCreatedAtToVariantRecords < ActiveRecord::Migration[7.2]
+  def change
+    add_column :active_storage_variant_records, :created_at, :datetime, if_not_exists: true
+  end
+end

data/lib/active_storage/async_variants/helper.rb

@@ -7,16 +7,18 @@ module ActiveStorage
     # `helper ActiveStorage::AsyncVariants::Helper` (so the state partials can
     # use them).
     module Helper
-      # 1x1 transparent GIF: reserves the variant's box without fetching the
-      # original through the representations path on every poll.
-      PLACEHOLDER_SRC = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
-
+      # Invisible box reserving layout for the progress bar. The image src is a
+      # tiny gem GIF whose URL ends in the media filename (no original fetched);
+      # the video placeholder carries no <source>.
       def async_variant_placeholder_tag(variant, html_options = {}, kind: :image)
         opts = async_variant_box_dimensions(variant)
           .merge(html_options.symbolize_keys.except(:src, :controls, :autoplay, :preload, :poster))
-        # A video placeholder carries no <source>, so it reserves the box
-        # without loading anything -- same zero-network intent as the GIF.
-        kind == :video ? content_tag(:video, "", opts) : image_tag(PLACEHOLDER_SRC, opts)
+        if kind == :video
+          content_tag(:video, "", opts)
+        else
+          src = Rails.application.routes.url_helpers.async_variant_placeholder_path(variant.blob.filename.to_s)
+          image_tag(src, opts)
+        end
       end
 
       def async_variant_box_dimensions(variant)

data/lib/active_storage/async_variants/variant_with_record_extension.rb

@@ -75,6 +75,15 @@ module ActiveStorage
         async_record&.last_heartbeat_at
       end
 
+      # Percent-per-second observed so far (progress over elapsed processing
+      # time); drives the progress-bar's optimistic creep between reloads.
+      def progress_rate
+        record = async_record
+        return nil unless record&.created_at && record.last_heartbeat_at && record.progress&.positive?
+        elapsed = record.last_heartbeat_at - record.created_at
+        elapsed.positive? ? (record.progress / elapsed).round(4) : nil
+      end
+
       private
 
       def async_variant?

data/lib/active_storage/async_variants/version.rb

@@ -2,6 +2,6 @@
 
 module ActiveStorage
   module AsyncVariants
-    VERSION = "0.7.0"
+    VERSION = "0.8.0"
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: active_storage-async_variants
 version: !ruby/object:Gem::Version
-  version: 0.7.0
+  version: 0.8.0
 platform: ruby
 authors:
 - Micah Geisel
@@ -79,6 +79,7 @@ files:
 - app/views/active_storage/async_variants/states/show.html.erb
 - config/routes.rb
 - db/migrate/20260607000001_add_heartbeat_columns_to_variant_records.rb
+- db/migrate/20260608000001_add_created_at_to_variant_records.rb
 - features/retry_flow.feature
 - features/retry_visibility.feature
 - features/state_rendering.feature