active_storage-async_variants 0.8.0 → 0.9.0

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

@@ -1,347 +0,0 @@
-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 {
-    --progress-color: #2E7D32;
-    --error-color: #7a242f;
-    --indeterminate-color: #999;
-    --track-color: #333333;
-    --progress-duration: 120ms;
-    --indeterminate-duration: 1.5s;
-    --bar-height: 32px;
-    --bar-padding: 8px;
-    --circular-size: 64px;
-    --circular-thickness: 16;
-    display: block;
-    overflow: hidden;
-    background: var(--track-color);
-    border: 1px solid #999;
-    border-radius: 4px;
-    min-height: var(--bar-height);
-    padding: var(--bar-padding);
-    font-size: 13px;
-    align-content: center;
-    box-sizing: border-box;
-    position: relative;
-  }
-  .bar {
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 100%;
-    width: 0%;
-    background: var(--progress-color);
-    transition: width var(--progress-duration) ease;
-    z-index: 1;
-  }
-  .text{position: relative; z-index: 2;}
-  :host([error]) .bar {
-    background: var(--error-color);
-  }
-
-  /* Indeterminate (linear): no percent set — a fixed-width segment sweeping across the track. */
-  :host(:not([percent])) .bar {
-    background: var(--indeterminate-color);
-    width: 40%;
-    animation: indeterminate-linear var(--indeterminate-duration) infinite linear;
-  }
-
-  @keyframes indeterminate-linear {
-    0%   { transform: translateX(-100%); }
-    100% { transform: translateX(250%); }
-  }
-
-  /* Circular mode: the host box styling is for the linear track, so drop it. */
-  :host([mode="circular"]) {
-    background: transparent;
-    border: none;
-    overflow: visible;
-    padding: 0;
-    min-height: 0;
-  }
-
-  .circular {
-    position: relative;
-    display: inline-flex;
-    width: var(--circular-size);
-    height: var(--circular-size);
-  }
-
-  .ring {
-    width: 100%;
-    height: 100%;
-    transform: rotate(-90deg);
-  }
-
-  .ring circle {
-    fill: none;
-    stroke-width: var(--circular-thickness);
-    /* Shrink the radius so the stroke's outer edge always lands inside the
-       100x100 viewBox, no matter how thick --circular-thickness is. */
-    r: calc(49px - var(--circular-thickness) * 0.5px);
-  }
-
-  .track {
-    stroke: var(--track-color);
-  }
-
-  .progress-ring {
-    stroke: var(--progress-color);
-    stroke-linecap: round;
-    stroke-dasharray: ${PATH_LENGTH};
-    stroke-dashoffset: ${PATH_LENGTH};
-    transition: stroke-dashoffset var(--progress-duration) ease;
-  }
-
-  :host(:not([percent])) .progress-ring {
-    stroke: var(--indeterminate-color);
-  }
-
-  /* The X of the error glyph; revealed by [error]. */
-  .error-mark {
-    display: none;
-    fill: none;
-    stroke: var(--error-color);
-    stroke-width: var(--circular-thickness);
-    stroke-linecap: round;
-  }
-
-  .label {
-    position: absolute;
-    inset: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: #fff;
-    mix-blend-mode: difference;
-  }
-
-  /* When the host carries its own inline styling (e.g. a color override), opt
-     out of the blend trick and just inherit, so the override wins predictably. */
-  :host([style]) .label {
-    mix-blend-mode: initial;
-    color: inherit;
-  }
-
-  /* Indeterminate (circular): no percent set — spin a fixed arc around the ring. */
-  :host(:not([percent])) .ring {
-    animation: indeterminate-rotate var(--indeterminate-duration) infinite linear;
-  }
-
-  :host(:not([percent])) .progress-ring {
-    stroke-dashoffset: ${PATH_LENGTH * 0.75};
-  }
-
-  @keyframes indeterminate-rotate {
-    0%   { transform: rotate(-90deg); }
-    100% { transform: rotate(270deg); }
-  }
-
-  /* Error (circular): static full ring + X. Last so it beats the indeterminate rules. */
-  :host([error]) .track { stroke: var(--error-color); }
-  :host([error]) .progress-ring { display: none; }
-  :host([error]) .ring { animation: none; }
-  :host([error]) .error-mark { display: block; }
-`;
-
-const LINEAR_HTML = `
-  <div class="bar"></div>
-  <div class="text"><slot></slot></div>
-`;
-
-const CIRCULAR_HTML = `
-  <div class="circular">
-    <svg class="ring" viewBox="0 0 100 100">
-      <circle class="track" cx="50" cy="50" r="${CIRCLE_RADIUS}"></circle>
-      <circle class="progress-ring" cx="50" cy="50" r="${CIRCLE_RADIUS}" pathLength="${PATH_LENGTH}"></circle>
-      <path class="error-mark" d="M37 37 L63 63 M63 37 L37 63"></path>
-    </svg>
-    <span class="label"><slot></slot></span>
-  </div>
-`;
-
-let styleSheet = null;
-function getStyleSheet() {
-  if (!styleSheet) {
-    styleSheet = new CSSStyleSheet();
-    styleSheet.replaceSync(STYLES);
-  }
-  return styleSheet;
-}
-
-function clampPercent(value) {
-  const number = Number(value);
-  if (Number.isNaN(number)) {
-    throw new TypeError(`progress-bar: percent must be numeric, got ${JSON.stringify(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() {
-    this.render();
-    this.setAttribute('role', 'progressbar');
-    this.setAttribute('aria-valuemin', '0');
-    this.setAttribute('aria-valuemax', '100');
-    this.updateBar();
-    this._syncTicker();
-  }
-
-  disconnectedCallback() {
-    this._stopTicker();
-  }
-
-  get percent() {
-    return this._percent;
-  }
-
-  set percent(value) {
-    if (value === null || value === undefined) {
-      this.removeAttribute('percent');
-    } else {
-      this.setAttribute('percent', clampPercent(value));
-    }
-  }
-
-  get error() {
-    return this.hasAttribute('error');
-  }
-
-  set error(value) {
-    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');
-  }
-
-  get mode() {
-    return this.getAttribute('mode') === 'circular' ? 'circular' : 'linear';
-  }
-
-  set mode(value) {
-    this.setAttribute('mode', value);
-  }
-
-  static get observedAttributes() {
-    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();
-  }
-
-  updateBar() {
-    if (this.mode === 'circular') {
-      const ring = this.shadowRoot?.querySelector('.progress-ring');
-      if (ring) {
-        ring.style.strokeDashoffset = this.indeterminate
-          ? ''
-          : String(PATH_LENGTH * (1 - this._percent / 100));
-      }
-    } else {
-      const bar = this.shadowRoot?.querySelector('.bar');
-      if (bar) {
-        // Leave width to the indeterminate CSS animation when unknown.
-        bar.style.width = this.indeterminate ? '' : `${this._percent}%`;
-      }
-    }
-
-    if (this.indeterminate) {
-      this.removeAttribute('aria-valuenow');
-    } else {
-      this.setAttribute('aria-valuenow', String(this._percent));
-    }
-  }
-
-  // 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) {
-      return;
-    }
-    this._renderedMode = mode;
-    this.shadowRoot.adoptedStyleSheets = [getStyleSheet()];
-    this.shadowRoot.innerHTML = mode === 'circular' ? CIRCULAR_HTML : LINEAR_HTML;
-  }
-}
-
-if (!customElements.get('progress-bar')) {
-  customElements.define('progress-bar', ProgressBar);
-}
-
-export default ProgressBar;

data/app/assets/javascripts/retry.js

@@ -1,11 +0,0 @@
-// Declarative shadow roots are only attached by the initial HTML parser, not by
-// fragment insertion (innerHTML / Turbo frame swaps), so promote them on connect.
-customElements.define("async-variant-retry", class extends HTMLElement {
-  connectedCallback() {
-    if (this.shadowRoot) return
-    const template = this.querySelector(":scope > template[shadowrootmode]")
-    if (!template) return
-    this.attachShadow({ mode: template.getAttribute("shadowrootmode") }).append(template.content)
-    template.remove()
-  }
-})

data/app/assets/stylesheets/progress.css

@@ -1,35 +0,0 @@
-/* turbo-frame is inline by default; make it and the wrapper block-level so the
-   media box (and the progress bar centered on it) coincides with the parent
-   figure box, instead of sitting in a taller line box from the baseline gap --
-   otherwise an overlay centered on the figure lands off-center from the ring. */
-turbo-frame:has(> .async-variant-processing),
-turbo-frame:has(> .async-variant-failed) {
-  display: block;
-}
-.async-variant-processing,
-.async-variant-failed {
-  position: relative;
-  display: block;
-}
-/* Present to reserve the variant's box, but rendered invisible via opacity
-   rather than visibility/display -- so it still has layout and stays queryable
-   by Capybara. The progress bar floats over it. block drops the baseline
-   descender so the ring centers on the box, not a few px below it. */
-.async-variant-processing img,
-.async-variant-processing video,
-.async-variant-failed img,
-.async-variant-failed video {
-  opacity: 0.001;
-  display: block;
-}
-.async-variant-progress {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  --circular-size: 80px;
-  --progress-color: #2E7D32;
-  --indeterminate-color: #2E7D32;
-  --track-color: rgba(0, 0, 0, 0.25);
-  --error-color: #ff7c81;
-}

data/app/assets/stylesheets/retry.css

@@ -1,98 +0,0 @@
-/* Scoped to the retry dialog's shadow root (linked inside its <template>). */
-:host { display: contents; }
-
-button { font: inherit; cursor: pointer; }
-
-.opener {
-  position: absolute;
-  top: 6px; right: 6px;
-  width: 22px; height: 22px;
-  background: #2b7cd6;
-  color: #fff;
-  border: 2px solid #fff;
-  border-radius: 50%;
-  font-size: 13px;
-  font-weight: bold;
-  line-height: 1;
-  padding: 0;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
-  display: var(--retry-opener-display, none);
-  align-items: center;
-  justify-content: center;
-}
-.opener:hover { background: #1a5fb0; }
-
-dialog {
-  width: 720px;
-  max-width: 90vw;
-  max-height: 80vh;
-  padding: 0;
-  border: 1px solid #999;
-  border-radius: 6px;
-  background: #fff;
-  color: #222;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
-  font: 13px/1.4 system-ui, -apple-system, sans-serif;
-}
-dialog[open] { display: flex; flex-direction: column; }
-dialog::backdrop { background: rgba(0, 0, 0, 0.5); }
-
-dialog > button {
-  position: absolute;
-  top: 10px;
-  right: 12px;
-  width: 32px; height: 32px;
-  background: transparent;
-  border: none;
-  color: #888;
-  font-size: 24px;
-  line-height: 1;
-  padding: 0;
-  border-radius: 4px;
-  z-index: 1;
-}
-dialog > button:hover { color: #000; background: rgba(0, 0, 0, 0.08); }
-
-header { padding: 20px 24px 0 24px; }
-header h3 {
-  margin: 0;
-  font-size: 16px;
-  font-weight: bold;
-  color: #111;
-  padding-right: 32px;
-}
-
-section {
-  flex: 1 1 auto;
-  overflow: auto;
-  padding: 12px 24px 20px 24px;
-  min-height: 0;
-}
-section pre {
-  background: #f5f5f5;
-  color: #222;
-  border: 1px solid #ddd;
-  padding: 8px;
-  font: 11px/1.4 ui-monospace, Menlo, monospace;
-  white-space: pre-wrap;
-  word-break: break-all;
-  margin: 0;
-}
-
-footer {
-  flex: 0 0 auto;
-  border-top: 1px solid #ddd;
-  padding: 12px 20px;
-  display: flex;
-  justify-content: flex-end;
-  background: #fafafa;
-}
-footer button {
-  padding: 8px 16px;
-  background: #2a7;
-  color: #fff;
-  border: none;
-  border-radius: 4px;
-  font-weight: bold;
-}
-footer button:disabled { opacity: 0.5; cursor: wait; }

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

@@ -1,71 +0,0 @@
-# frozen_string_literal: true
-
-module ActiveStorage
-  module AsyncVariants
-    class StatesController < ActiveStorage::AsyncVariants.parent_controller.constantize
-      # signed_blob_id + variation_key in URL act as CSRF: both require app's secret.
-      skip_forgery_protection
-
-      helper "turbo/frames"
-      helper ActiveStorage::AsyncVariants::Helper
-
-      layout false
-
-      # 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,
-          state: "failed",
-        ).destroy_all
-        @variant.enqueue!
-
-        redirect_to Rails.application.routes.url_helpers.async_variant_state_path(
-          signed_blob_id: params[:signed_blob_id],
-          variation_key: params[:variation_key],
-          kind: params[:kind],
-          direct: params[:direct],
-          opts: async_variant_html_options.presence,
-        ), status: :see_other
-      end
-
-      helper_method :async_variant_kind, :async_variant_direct?, :async_variant_html_options
-
-      private
-
-      def set_variant
-        blob = ActiveStorage::Blob.find_signed!(params[:signed_blob_id])
-        variation = ActiveStorage::Variation.decode(params[:variation_key])
-        @variant = blob.variant(variation)
-      rescue ActiveSupport::MessageVerifier::InvalidSignature
-        head :not_found
-      end
-
-      def async_variant_kind
-        params[:kind].to_s == "video" ? :video : :image
-      end
-
-      def async_variant_direct?
-        ActiveModel::Type::Boolean.new.cast(params[:direct])
-      end
-
-      def async_variant_html_options
-        params[:opts]
-          &.permit(*ActiveStorage::AsyncVariants::PASS_THROUGH_HTML_OPTIONS)
-          .to_h
-      end
-    end
-  end
-end

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

@@ -1,44 +0,0 @@
-<div class="async-variant-state async-variant-failed">
-  <%= async_variant_placeholder_tag(variant, html_options, kind: kind) %>
-
-  <%= content_tag "progress-bar", "", mode: "circular", error: "", class: "async-variant-progress" %>
-
-  <%= ActiveStorage::AsyncVariants.stylesheet_link_tag "progress" %>
-  <%= ActiveStorage::AsyncVariants.javascript_include_tag "progress-bar", type: "module" %>
-
-  <% if ActiveStorage::AsyncVariants.retry_visible?(self) %>
-    <% dialog_id = "#{async_variant_frame_id(variant)}-error" %>
-    <% form_id = "#{dialog_id}-form" %>
-    <%# Light DOM, so the custom property inherits into the shadow root. %>
-    <style>
-      .async-variant-failed { --retry-opener-display: none; }
-      .async-variant-failed:hover { --retry-opener-display: inline-flex; }
-    </style>
-    <%# In the light DOM so its submit reaches Turbo, and so preventDefault on the
-        buttons doesn't also cancel the submit. %>
-    <form action="<%= Rails.application.routes.url_helpers.async_variant_state_retry_path(signed_blob_id:, variation_key:, kind:, direct:, opts: html_options) %>"
-          method="post"
-          id="<%= form_id %>"
-          data-turbo-frame="<%= async_variant_frame_id(variant) %>"
-          hidden></form>
-    <async-variant-retry>
-      <template shadowrootmode="open">
-        <%= ActiveStorage::AsyncVariants.stylesheet_link_tag "retry" %>
-        <button class="opener" type="button"
-                onclick="event.preventDefault(); event.stopPropagation(); this.getRootNode().getElementById('<%= dialog_id %>').showModal()"
-                title="Variant processing failed — click for details">?</button>
-        <dialog id="<%= dialog_id %>">
-          <button type="button"
-                  onclick="event.preventDefault(); event.stopPropagation(); this.closest('dialog').close()">&times;</button>
-          <header><h3>Variant processing failed</h3></header>
-          <section><pre><%= variant.error %></pre></section>
-          <footer>
-            <button type="button"
-                    onclick="event.preventDefault(); event.stopPropagation(); this.disabled = true; this.textContent = 'Retrying…'; document.getElementById('<%= form_id %>').requestSubmit()">Retry processing</button>
-          </footer>
-        </dialog>
-      </template>
-    </async-variant-retry>
-    <%= ActiveStorage::AsyncVariants.javascript_include_tag "retry", type: "module" %>
-  <% end %>
-</div>

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

@@ -1 +0,0 @@
-<%= render "active_storage/async_variants/states/processing", local_assigns %>

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

@@ -1,5 +0,0 @@
-<%
-  method = kind == :video ? :video_tag : :image_tag
-  src = direct ? async_variant_direct_url(variant) : async_variant_representation_path(variant)
-%>
-<%= send method, src, **html_options.symbolize_keys %>

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

@@ -1,15 +0,0 @@
-<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, rate: variant.progress_rate %>
-</div>
-
-<%= ActiveStorage::AsyncVariants.stylesheet_link_tag "progress" %>
-<%= ActiveStorage::AsyncVariants.javascript_include_tag "progress-bar", type: "module" %>
-<% interval_ms = ActiveStorage::AsyncVariants.heartbeat_interval.in_seconds * 1000 %>
-<script>
-  (() => {
-    const frame = document.currentScript?.closest("turbo-frame")
-    setTimeout(() => frame?.reload(), <%= interval_ms %>)
-  })()
-</script>

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

@@ -1,10 +0,0 @@
-<%= turbo_frame_tag async_variant_frame_id(@variant) do %>
-  <%= render "active_storage/async_variants/states/#{@variant.async_state}", {
-    variant: @variant,
-    html_options: async_variant_html_options,
-    kind: async_variant_kind,
-    direct: async_variant_direct?,
-    signed_blob_id: params[:signed_blob_id],
-    variation_key: params[:variation_key],
-  } %>
-<% end %>

data/features/retry_flow.feature

@@ -1,20 +0,0 @@
-Feature: Clicking the retry affordance opens a dialog and resubmits the variant
-
-  Background:
-    Given a user with an attached avatar
-    And the retry affordance is visible to everyone
-
-  Scenario: Clicking the opener reveals the error inside the shadow-DOM dialog
-    Given the avatar's :thumb_proc variant is in failed state with error "boom from upstream"
-    When I visit the avatar page for the :thumb_proc variant
-    And I click the retry opener
-    Then the failure dialog should be open
-    And the failure dialog should contain "boom from upstream"
-
-  Scenario: Submitting Retry destroys the failed record and re-enqueues
-    Given the avatar's :thumb_proc variant is in failed state with error "boom"
-    When I visit the avatar page for the :thumb_proc variant
-    And I click the retry opener
-    And I click "Retry processing"
-    Then the frame should render the processing state
-    And the page should not have navigated away

data/features/retry_visibility.feature

@@ -1,23 +0,0 @@
-Feature: The retry affordance is gated by ActiveStorage::AsyncVariants.retry_visible_if
-
-  Scenario: When retry_visible_if returns true, the retry chrome renders
-    Given a user with an attached avatar
-    And the retry affordance is visible to everyone
-    And the avatar's :thumb_proc variant is in failed state with error "boom"
-    When I visit the avatar page for the :thumb_proc variant
-    Then the retry affordance should be visible
-
-  Scenario: When retry_visible_if returns false, the retry chrome is omitted
-    Given a user with an attached avatar
-    And the retry affordance is hidden
-    And the avatar's :thumb_proc variant is in failed state with error "boom"
-    When I visit the avatar page for the :thumb_proc variant
-    Then the retry affordance should NOT be visible
-
-  Scenario: A proc that consults current_user gates the affordance per-viewer
-    Given a user with an attached avatar
-    And the retry affordance requires a signed-in user
-    And the avatar's :thumb_proc variant is in failed state with error "boom"
-    When I sign in as the user
-    And I visit the avatar page for the :thumb_proc variant
-    Then the retry affordance should be visible