testimonials 0.4.0 → 0.4.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: de1f909878b18970be1bef107ddcc34e863b1e4118ba404b80bb894a36c39eb2
-  data.tar.gz: ea00c89fee76e431d36cd7034ca19987851aee12a9c326e50cdd851fd8c60861
+  metadata.gz: f32069743e1abbbe0f5ce913e32e0c37f1e23230c0f5d59bb903dd9189761153
+  data.tar.gz: fbae328897d5aea39f1896e55324df8182f08bae09e7907a30510dfd3026c82d
 SHA512:
-  metadata.gz: 322db6f66cc308f1aa827fa2d56fa171fd8bd14471208f20d2a4a8f6c548ff66cc3d59df5bb3e1b2fa167229bd23dec608deb21b2040ebf6daea984c8d8b45c5
-  data.tar.gz: 1ad3ecfa42433b655b074c99b1fe3d65b7e7047f1dab4e023eb6439d685e82b0dceef875919e6a5857c8e0b3f0839623701bf4ba11f4c810952108843656a1fe
+  metadata.gz: c9345c6257864c1531782f4a7cdd1fd136118aab23898e57ae28723b13a27107f657d865b77947c0ac26de7ed06b143ce8cb2ffd0463a6cfc57c08f28cf90085
+  data.tar.gz: 27d79110f0b6e043373e0e2989f7f1947810d2c52a1c6e21b5f71e759739c9762f668e6e05f0bbb8a9e9879e38dcb4b61de8d3d276d626a89b1440e4c3af6e35

data/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## 0.4.2
+
+- Uploaded videos now get a poster frame too (grabbed from the file
+  client-side), so Safari shows a preview instead of a black frame before
+  play — previously only recorded videos captured a poster. Best-effort;
+  legacy videos with no stored poster are unaffected (re-upload to add one).
+
+## 0.4.1
+
+- Video poster frames: a still is captured from the camera at record time and
+  shown via `<video poster>`, so recorded videos display a real thumbnail
+  instead of a black box in every browser (Safari won't paint a
+  fragmented-MP4 frame from the file itself). Served at `/:id/poster`,
+  exposed as `poster_url` in the API.
+
 ## 0.4.0
 
 - Consent is now an explicit public/private choice instead of a single

data/app/controllers/testimonials/api/testimonials_controller.rb

@@ -33,7 +33,8 @@ module Testimonials
           featured: testimonial.featured?,
           created_at: testimonial.created_at.iso8601,
           avatar_url: (testimonial_avatar_url(testimonial) if testimonial.avatar_attached?),
-          video_url: (testimonial_video_url(testimonial) if testimonial.video_attached?)
+          video_url: (testimonial_video_url(testimonial) if testimonial.video_attached?),
+          poster_url: (testimonial_poster_url(testimonial) if testimonial.poster_attached?)
         }
       end
     end

data/app/controllers/testimonials/media_controller.rb

@@ -17,6 +17,12 @@ module Testimonials
       redirect_to main_app.rails_blob_path(@testimonial.video_file, disposition: disposition)
     end
 
+    def poster
+      head :not_found and return unless @testimonial.poster_attached?
+
+      redirect_to main_app.rails_blob_path(@testimonial.poster, disposition: disposition)
+    end
+
     def avatar
       head :not_found and return unless @testimonial.avatar_attached?
 

data/app/controllers/testimonials/testimonials_controller.rb

@@ -55,7 +55,10 @@ module Testimonials
       if testimonial.save
         # Purge only after a valid save, so a failed update can't strand a
         # review with its video already gone.
-        testimonial.video_file.purge if remove_video? && testimonial.video_attached?
+        if remove_video? && testimonial.video_attached?
+          testimonial.video_file.purge
+          testimonial.poster.purge if testimonial.poster_attached?
+        end
         record_submission
         notify_host(testimonial)
         head :created
@@ -154,9 +157,27 @@ module Testimonials
       return error_label(:error_save) unless file.content_type.to_s.start_with?('video/', 'audio/')
 
       testimonial.video_file.attach(file)
+      attach_poster(testimonial)
       nil
     end
 
+    # The poster rides with a new video upload. It's best-effort — a missing
+    # or malformed poster never blocks the testimonial. Attaching replaces any
+    # previous poster; a new video with no usable poster (e.g. an uploaded
+    # file, which we can't frame-grab) drops the stale one so it can't show a
+    # thumbnail from the wrong video.
+    def attach_poster(testimonial)
+      file = params.dig(:testimonial, :poster)
+      usable = file.present? && file.content_type.to_s.start_with?('image/') &&
+               file.size <= Testimonials.config.max_avatar_size
+
+      if usable
+        testimonial.poster.attach(file)
+      elsif testimonial.poster_attached?
+        testimonial.poster.purge
+      end
+    end
+
     def attach_avatar(testimonial)
       file = params.dig(:testimonial, :avatar)
       return nil if file.blank?

data/app/models/testimonials/testimonial.rb

@@ -11,6 +11,7 @@ module Testimonials
 
     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
     end
 
@@ -37,6 +38,10 @@ module Testimonials
       respond_to?(:video_file) && video_file.attached?
     end
 
+    def poster_attached?
+      respond_to?(:poster) && poster.attached?
+    end
+
     def avatar_attached?
       respond_to?(:avatar) && avatar.attached?
     end

data/app/views/testimonials/testimonials/show.html.erb

@@ -17,10 +17,11 @@
 
 <div class="card pad" style="margin-bottom: 16px;">
   <% if @testimonial.video_attached? %>
-    <%# No #t=0.1 fragment: MediaRecorder webm has no seek index, and
-        Firefox honors media fragments literally — the pending seek stalls
-        playback right after play. preload="metadata" paints the frame. %>
+    <%# The stored poster shows a real frame with no decoding — Safari won't
+        paint a fragmented-MP4 frame on its own, so preload/fragment tricks
+        leave it black. %>
     <video class="playback" controls preload="metadata"
+           poster="<%= testimonial_poster_path(@testimonial) if @testimonial.poster_attached? %>"
            src="<%= testimonial_video_path(@testimonial) %>"></video>
     <p class="muted">
       <%= link_to "⬇ #{t('testimonials.dashboard.download_video', default: 'Download video')}",

data/config/routes.rb

@@ -21,6 +21,7 @@ Testimonials::Engine.routes.draw do
 
   # Media by testimonial id, gated (admin, author, or public_api + publishable).
   get ':id/video', to: 'media#video', as: :testimonial_video, constraints: { id: /\d+/ }
+  get ':id/poster', to: 'media#poster', as: :testimonial_poster, constraints: { id: /\d+/ }
   get ':id/avatar', to: 'media#avatar', as: :testimonial_avatar, constraints: { id: /\d+/ }
 
   # Flat, human URLs: the mount path IS the resource. /testimonials is the

data/lib/testimonials/version.rb

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

data/lib/testimonials/widget.js

@@ -163,6 +163,7 @@
     if (!overlay) return;
     stopMedia();
     if (state && state.playbackUrl) URL.revokeObjectURL(state.playbackUrl);
+    if (state && state.posterUrl) URL.revokeObjectURL(state.posterUrl);
     if (state && state.auto && !state.submitted) postEvent(state.kind, "dismissed");
     overlay.remove();
     overlay = null;
@@ -276,6 +277,7 @@
     state.body = config.existing.body || "";
     state.consent = !!config.existing.consent;
     state.existingVideoUrl = config.existing.videoUrl || null;
+    state.existingPosterUrl = config.existing.posterUrl || null;
   }
 
   // --- stage 2: the testimonial form ------------------------------------------
@@ -423,12 +425,9 @@
       playback.controls = true;
       playback.playsInline = true;
       playback.preload = "metadata";
-      // No #t=0.1 fragment here either (see the review-stage comment):
-      // MediaRecorder webm has no seek index, and Firefox honors the
-      // fragment literally — the pending seek stalls playback a moment
-      // after play. preload="metadata" already paints the first frame in
-      // Chrome and Firefox; iOS shows the controls on a blank frame, which
-      // beats a player that pauses itself.
+      // The stored poster shows a real frame with no decoding — the reliable
+      // 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 () {
@@ -551,7 +550,7 @@
       runCountdown(countdown, 3, function () {
         start.hidden = true;
         stop.hidden = false;
-        beginRecording(timer, stop);
+        beginRecording(preview, timer, stop);
       });
     });
 
@@ -582,7 +581,7 @@
     }, 800);
   }
 
-  function beginRecording(timer, stop) {
+  function beginRecording(preview, timer, stop) {
     media.chunks = [];
     var recorder;
     try {
@@ -598,6 +597,12 @@
       // A teardown (Cancel, close) also stops the recorder — only a real
       // Finish, where this recorder is still the active one, goes to review.
       if (media.recorder !== recorder) return;
+      // Grab a poster frame from the still-live preview stream *before*
+      // showStage tears the camera down. Captured from the camera, never
+      // from the recorded blob — seeking Safari's own fragmented MP4 to
+      // paint a frame is exactly what fails (black or stall), so we store a
+      // real image and hand it to <video poster>, which needs no decoding.
+      capturePoster(preview);
       var type = recorder.mimeType || "video/webm";
       var blob = new Blob(media.chunks, { type: type.split(";")[0] });
       showStage(reviewStage(blob));
@@ -668,9 +673,13 @@
     state.playbackUrl = URL.createObjectURL(blob);
     // No #t=0.1 here, on purpose: seeking a blob of Safari's own fragmented
     // MP4 recording can stall the video track while audio keeps playing.
-    // The fragment-thumbnail trick is only for server-served files; a
-    // just-recorded clip gets played immediately anyway.
+    // The captured poster (below) shows a frame without any decoding.
     playback.src = state.playbackUrl;
+    if (state.posterBlob) {
+      if (state.posterUrl) URL.revokeObjectURL(state.posterUrl);
+      state.posterUrl = URL.createObjectURL(state.posterBlob);
+      playback.poster = state.posterUrl;
+    }
     stage.appendChild(playback);
 
     var error = el("p", "tml-error");
@@ -706,11 +715,35 @@
       var file = input.files && input.files[0];
       if (!file) return;
       state.videoBlob = file;
+      // Recorded videos grab their poster from the live preview; uploaded
+      // files have no live stream, so grab one from the file itself — else
+      // Safari shows a black frame (it won't paint a posterless video).
+      capturePosterFromFile(file);
       showStage(formStage(state.formTitle || config.labels.shareTitle));
     });
     input.click();
   }
 
+  // Load an uploaded video offscreen, seek a hair past the start (frame 0 is
+  // often black), and reuse capturePoster's canvas grab. Best-effort and
+  // async — if the customer sends before it resolves, no poster, no harm.
+  function capturePosterFromFile(file) {
+    try {
+      var url = URL.createObjectURL(file);
+      var probe = document.createElement("video");
+      probe.preload = "metadata";
+      probe.muted = true;
+      probe.playsInline = true;
+      var cleanup = function () { try { URL.revokeObjectURL(url); } catch (e) { /* noop */ } };
+      probe.addEventListener("loadeddata", function () {
+        try { probe.currentTime = Math.min(0.1, (probe.duration || 1) / 2); } catch (e) { cleanup(); }
+      });
+      probe.addEventListener("seeked", function () { capturePoster(probe); cleanup(); });
+      probe.addEventListener("error", cleanup);
+      probe.src = url;
+    } catch (e) { /* poster is best-effort */ }
+  }
+
   function stopMedia() {
     if (media.timer) clearInterval(media.timer);
     if (media.recorder && media.recorder.state !== "inactive") {
@@ -722,6 +755,24 @@
     media = { stream: null, recorder: null, chunks: [], timer: null };
   }
 
+  // Draw the current preview frame to a canvas *now* (synchronous, while the
+  // stream is live) and encode it as a JPEG poster. The canvas keeps the
+  // pixels, so the async toBlob is safe even after the camera stops.
+  function capturePoster(preview) {
+    try {
+      var w = preview.videoWidth;
+      var h = preview.videoHeight;
+      if (!w || !h) return;
+      var canvas = document.createElement("canvas");
+      canvas.width = w;
+      canvas.height = h;
+      canvas.getContext("2d").drawImage(preview, 0, 0, w, h);
+      canvas.toBlob(function (blob) {
+        if (state && blob) state.posterBlob = blob;
+      }, "image/jpeg", 0.8);
+    } catch (e) { /* poster is best-effort; a black frame is not fatal */ }
+  }
+
   // --- NPS ----------------------------------------------------------------------
 
   function npsStage() {
@@ -858,6 +909,9 @@
     if (state.videoBlob) {
       var extension = (state.videoBlob.type || "video/webm").indexOf("mp4") > -1 ? "mp4" : "webm";
       data.append("testimonial[video_file]", state.videoBlob, "testimonial." + extension);
+      // The poster frame captured at record time, so the stored video shows
+      // a real thumbnail instead of a black box in every browser.
+      if (state.posterBlob) data.append("testimonial[poster]", state.posterBlob, "poster.jpg");
     } else if (state.removeExistingVideo) {
       data.append("testimonial[remove_video]", "1");
     }

data/lib/testimonials/widget.rb

@@ -86,7 +86,8 @@ module Testimonials
             rating: existing.rating,
             body: existing.body,
             consent: existing.consent_given ? true : false,
-            videoUrl: existing_video_url(existing)
+            videoUrl: existing_video_url(existing),
+            posterUrl: existing_poster_url(existing)
           },
           video: {
             enabled: config.video_enabled?,
@@ -112,6 +113,12 @@ module Testimonials
         "#{Testimonials.config.mount_path.chomp('/')}/#{existing.id}/video"
       end
 
+      def existing_poster_url(existing)
+        return unless existing.poster_attached?
+
+        "#{Testimonials.config.mount_path.chomp('/')}/#{existing.id}/poster"
+      end
+
       # Every user-facing string in the widget, resolved through Rails I18n so
       # the form follows the app's current locale. Each lookup carries an
       # English default, so the widget stays fully worded even when a key is

metadata

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