testimonials 0.5.2 → 0.7.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a660a9eadbc3bfa58f9fe6bfc2d9f4feebe867fe536fe0755a156c9b931aca49
-  data.tar.gz: 73c439422ee9c88ee56836338dc8be3b9e41063cec3009bad76025673ca675d6
+  metadata.gz: 691265663845bee9822f3ec8cb013ca50b36f5e17a763775aab8b6e3c9e74517
+  data.tar.gz: 983d03927120255fd34eb9d37221ab7c3476c4afc58a31de151f9a44c423c3c7
 SHA512:
-  metadata.gz: 1198770a514947ebc0a23a78a19f29a690c906c03c12e2135b8aa7a4538d4a6f3b406ae0822123ff4b3763e8502111298f1d9b37791dba9254305fc3634fb426
-  data.tar.gz: 6b5585808618f90d8826fdd4f49a142442ac230417e1a2d0272b755b8b497c4fb31f05fef262c02650715b68af94c6f1b36b1ee7d07830a51a82e4f114a65b58
+  metadata.gz: 0e8d6cc2b5f8cad129912bdb4b0fb73a5348c63e7e7879649bdfc43d07e443abc440d2863ec2aa03e960c6a2f18aba96b66bc2664f2fe52858a68dba0106a966
+  data.tar.gz: a4a1f73006da86ff677bf341e64d2f847fa95386bafb893b20680463ea431953650566a8eeced1812808b0328212fbde5873f78d3ce9a4911081fd948cf34a1a

data/CHANGELOG.md

@@ -1,5 +1,32 @@
 # Changelog
 
+## 0.7.0
+
+- New `config.storage_service`: store uploads (video, its poster frame, guest
+  avatars) on a named Active Storage service from the host's
+  `config/storage.yml` instead of the environment default. Point it at a
+  dedicated bucket or folder — or a service entry carrying provider options
+  like Cloudinary's `folder:`/`tags:` — to keep testimonial media separate
+  from the rest of the media library. `nil` (the default) keeps today's
+  behavior.
+
+## 0.6.0
+
+- **The full-screen mobile dialog now survives the on-screen keyboard.** On
+  phones the dialog is a fixed, full-height (`100dvh`) element, but iOS Safari
+  raises the keyboard without resizing it — so the composer and Submit/Cancel
+  row slid behind the keyboard. While the dialog is open the widget now tracks
+  `window.visualViewport` and pins the overlay (and the dialog filling it) to
+  the visible viewport, so the action row sits just above the keyboard. Gated on
+  the `max-width:480px` mobile media query, so desktop is untouched; browsers
+  without `visualViewport` no-op and keep the previous behavior. Shared change
+  across the gem family.
+- The "🎥 Video attached | Remove" row under a video preview is replaced with a
+  discreet round ✕ button in the top-right corner of the preview (the standard
+  "remove attachment" affordance) — clearly a delete control, but no longer a
+  full-width, easy-to-mis-tap target. Applies to both a just-recorded/uploaded
+  clip and an existing video being edited; remove behavior is unchanged.
+
 ## 0.5.2
 
 - A just-recorded or just-uploaded video now shows a playable preview on the

data/README.md

@@ -132,6 +132,7 @@ Everything is optional — a fresh install works with zero config. In
 | `max_video_size` | `50.megabytes` | Enforced server-side |
 | `avatars` | `true` | Headshot upload for guests on the public page |
 | `max_avatar_size` | `5.megabytes` | Enforced server-side |
+| `storage_service` | app default | Active Storage service for uploads (a `storage.yml` key) |
 | `reprompt_after` | `90.days` | Cooldown after a dismissal |
 | `max_prompts` | `3` | Lifetime auto-prompt cap per user |
 | `public_collection` | `true` | The shareable `/testimonials/new` page |

data/app/models/testimonials/testimonial.rb

@@ -10,9 +10,13 @@ module Testimonials
     SOURCES = %w[widget page nps].freeze
 
     if defined?(::ActiveStorage)
-      has_one_attached :video_file
-      has_one_attached :poster # a still frame for the video, captured at record time
-      has_one_attached :avatar
+      # Read at class load, which happens after the host's initializers, so
+      # a storage_service set in config/initializers/testimonials.rb is
+      # visible here. nil falls through to the environment's default service.
+      storage = Testimonials.config.storage_service
+      has_one_attached :video_file, service: storage
+      has_one_attached :poster, service: storage # a still frame for the video, captured at record time
+      has_one_attached :avatar, service: storage
     end
 
     validates :kind, inclusion: { in: KINDS }

data/lib/generators/testimonials/install/templates/initializer.rb

@@ -55,6 +55,12 @@ Testimonials.configure do |config|
   # config.avatars = true
   # config.max_avatar_size = 5.megabytes
 
+  # Store uploads (video, poster frame, avatars) on a specific Active Storage
+  # service from config/storage.yml — e.g. a dedicated bucket or folder that
+  # keeps testimonial media apart from the rest of your library. Default:
+  # your environment's default service.
+  # config.storage_service = :testimonials
+
   # Auto-prompt throttling. Explicit opens (user clicked your link) bypass it.
   # config.reprompt_after = 90.days
   # config.max_prompts = 3

data/lib/testimonials/configuration.rb

@@ -52,6 +52,12 @@ module Testimonials
     attr_accessor :avatars
     attr_accessor :max_avatar_size
 
+    # The Active Storage service that stores uploads — video, its poster
+    # frame, guest avatars — as a service name from the host's
+    # config/storage.yml (e.g. a dedicated bucket or folder). nil, the
+    # default, uses the environment's default service.
+    attr_accessor :storage_service
+
     # Auto-prompt throttling. A user who dismissed the widget is not
     # auto-prompted again within `reprompt_after`; a user auto-prompted
     # `max_prompts` times without submitting is never auto-prompted again;
@@ -109,6 +115,7 @@ module Testimonials
       @max_video_size = 50 * 1024 * 1024
       @avatars = true
       @max_avatar_size = 5 * 1024 * 1024
+      @storage_service = nil
       @reprompt_after = 90 * 24 * 60 * 60
       @max_prompts = 3
       @consent_text = nil

data/lib/testimonials/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Testimonials
-  VERSION = '0.5.2'
+  VERSION = '0.7.0'
 end

data/lib/testimonials/widget.js

@@ -32,6 +32,7 @@
   var savedOverflow = null; // documentElement overflow to restore when the modal closes
   var state = null; // one open session: { kind, auto, stage, rating, videoBlob, ... }
   var media = { stream: null, recorder: null, chunks: [], timer: null };
+  var viewportHandler = null; // visualViewport listener while the dialog is open
 
   function ready(fn) {
     if (document.readyState === "loading") {
@@ -154,13 +155,69 @@
     document.body.appendChild(overlay);
     lockScroll();
     overlay.addEventListener("keydown", trapFocus);
+    startViewportTracking();
 
     if (auto) postEvent(kind, "shown");
     return true;
   }
 
+  // --- mobile keyboard --------------------------------------------------------
+  // On phones the dialog is full-screen at height:100dvh, but iOS Safari shows
+  // the on-screen keyboard WITHOUT resizing that fixed element — so the action
+  // row gets hidden behind the keyboard. While the dialog is open we track
+  // window.visualViewport and pin the full-screen overlay (and the dialog that
+  // fills it) to the currently-visible area, so Submit/Cancel sit just above the
+  // keyboard. The dialog itself is a static-positioned flex child, so `top` on
+  // it does nothing — we move the fixed overlay for position and size the dialog
+  // to match. Desktop is untouched: everything is gated on the mobile media
+  // query, and browsers without visualViewport no-op (today's behavior).
+
+  function applyViewport() {
+    if (!overlay) return;
+    var dialog = overlay.querySelector("#tml-dialog");
+    var vv = window.visualViewport;
+    if (vv && window.matchMedia("(max-width:480px)").matches) {
+      overlay.style.top = vv.offsetTop + "px";
+      overlay.style.height = vv.height + "px";
+      overlay.style.bottom = "auto"; // height + top win; drop the inset:0 bottom
+      if (dialog) dialog.style.height = vv.height + "px";
+    } else {
+      // Not the mobile full-screen layout: clear every override so the
+      // stylesheet's centered desktop rules apply cleanly.
+      overlay.style.top = "";
+      overlay.style.height = "";
+      overlay.style.bottom = "";
+      if (dialog) dialog.style.height = "";
+    }
+  }
+
+  function startViewportTracking() {
+    if (!window.visualViewport) return;
+    viewportHandler = function () { applyViewport(); };
+    window.visualViewport.addEventListener("resize", viewportHandler);
+    window.visualViewport.addEventListener("scroll", viewportHandler);
+    applyViewport(); // pin once on open
+  }
+
+  function stopViewportTracking() {
+    if (viewportHandler && window.visualViewport) {
+      window.visualViewport.removeEventListener("resize", viewportHandler);
+      window.visualViewport.removeEventListener("scroll", viewportHandler);
+    }
+    viewportHandler = null;
+    // Clear inline styles so a later desktop open starts from the stylesheet.
+    if (overlay) {
+      overlay.style.top = "";
+      overlay.style.height = "";
+      overlay.style.bottom = "";
+      var dialog = overlay.querySelector("#tml-dialog");
+      if (dialog) dialog.style.height = "";
+    }
+  }
+
   function close() {
     if (!overlay) return;
+    stopViewportTracking();
     stopMedia();
     if (state && state.playbackUrl) URL.revokeObjectURL(state.playbackUrl);
     if (state && state.posterUrl) URL.revokeObjectURL(state.posterUrl);
@@ -194,7 +251,12 @@
     dialog.textContent = "";
     dialog.appendChild(node);
     var focusable = dialog.querySelector("textarea, input, button");
-    if (focusable && overlay) focusable.focus();
+    if (focusable && overlay) {
+      focusable.focus();
+      // With the viewport pinned above the keyboard the shrink handles most of
+      // it; nudge the focused field fully into view for the rest.
+      if (focusable.scrollIntoView) focusable.scrollIntoView({ block: "nearest" });
+    }
   }
 
   function trapFocus(event) {
@@ -429,8 +491,7 @@
         state.posterUrl = URL.createObjectURL(state.posterBlob);
         recorded.poster = state.posterUrl;
       }
-      wrap.appendChild(recorded);
-      wrap.appendChild(attachedVideoChip(form, wrap, recorded, function () {
+      wrap.appendChild(videoPreview(form, wrap, recorded, function () {
         state.videoBlob = null;
       }));
       return wrap;
@@ -448,8 +509,7 @@
       // fix for Safari, which won't paint a fragmented-MP4 frame on its own.
       if (state.existingPosterUrl) playback.poster = state.existingPosterUrl;
       playback.src = state.existingVideoUrl;
-      wrap.appendChild(playback);
-      wrap.appendChild(attachedVideoChip(form, wrap, playback, function () {
+      wrap.appendChild(videoPreview(form, wrap, playback, function () {
         state.removeExistingVideo = true;
       }));
       return wrap;
@@ -475,18 +535,21 @@
     return wrap;
   }
 
-  function attachedVideoChip(form, wrap, playback, onRemove) {
-    var chip = el("div", "tml-chip");
-    chip.appendChild(el("span", "tml-chip-label", "🎥 " + config.labels.videoAttached));
-    var remove = el("button", "tml-chip-remove", config.labels.remove);
+  // A discreet "remove attachment" affordance: the video preview wrapped so a
+  // small round ✕ can sit in its top-right corner (overlaid on the clip, clear
+  // of the centered play button), instead of a full-width, easy-to-mis-tap row.
+  function videoPreview(form, wrap, playback, onRemove) {
+    var box = el("div", "tml-video-wrap");
+    box.appendChild(playback);
+    var remove = el("button", "tml-video-remove", "✕");
     remove.type = "button";
+    remove.setAttribute("aria-label", config.labels.remove);
     remove.addEventListener("click", function () {
       onRemove();
-      if (playback) playback.remove();
       wrap.replaceWith(videoControl(form));
     });
-    chip.appendChild(remove);
-    return chip;
+    box.appendChild(remove);
+    return box;
   }
 
   // Recording lives in its own stage: camera check -> 3-2-1 -> recording ->
@@ -1117,11 +1180,14 @@
       ".tml-record:hover{background:rgba(37,99,235,.12)}",
       ".tml-record-label{color:#2563eb;font-weight:600}",
       ".tml-record-hint{font-size:12px;color:#6b7280}",
-      ".tml-chip{display:flex;align-items:center;justify-content:space-between;gap:8px;",
-      "padding:10px 12px;border-radius:10px;background:rgba(37,99,235,.07)}",
-      ".tml-chip-label{font-weight:600}",
-      ".tml-chip-remove{border:0;background:none;color:#2563eb;cursor:pointer;font:inherit;padding:2px 6px}",
       ".tml-video{display:block;width:100%;border-radius:10px;background:#000;aspect-ratio:4/3;margin:0 0 12px}",
+      // A recorded/uploaded/existing clip with a discreet corner remove control.
+      ".tml-video-wrap{position:relative;margin:0 0 12px}",
+      ".tml-video-wrap .tml-video{margin:0}",
+      ".tml-video-remove{position:absolute;top:8px;inset-inline-end:8px;width:28px;height:28px;padding:0;",
+      "display:flex;align-items:center;justify-content:center;border:0;border-radius:50%;",
+      "background:rgba(0,0,0,.6);color:#fff;font-size:15px;line-height:1;cursor:pointer}",
+      ".tml-video-remove:hover{background:rgba(0,0,0,.8)}",
       ".tml-preview{position:relative;margin-bottom:4px}",
       ".tml-preview .tml-video{margin-bottom:0}",
       ".tml-timer{position:absolute;top:8px;inset-inline-end:8px;background:rgba(0,0,0,.55);color:#fff;",
@@ -1151,8 +1217,7 @@
       ".tml-nps-score{border-color:#2a313a}",
       ".tml-record{border-color:#3b82f6;background:rgba(59,130,246,.1)}",
       ".tml-record:hover{background:rgba(59,130,246,.18)}",
-      ".tml-record-label,.tml-chip-remove{color:#3b82f6}",
-      ".tml-chip{background:rgba(59,130,246,.12)}",
+      ".tml-record-label{color:#3b82f6}",
       ".tml-hint,.tml-nps-legend,.tml-record-hint{color:#9aa2ab}",
       "}",
       // The dialog is the scrollable region; keep its scroll from chaining

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: testimonials
 version: !ruby/object:Gem::Version
-  version: 0.5.2
+  version: 0.7.0
 platform: ruby
 authors:
 - Yaroslav Shmarov