testimonials 0.4.0 → 0.4.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: de1f909878b18970be1bef107ddcc34e863b1e4118ba404b80bb894a36c39eb2
-  data.tar.gz: ea00c89fee76e431d36cd7034ca19987851aee12a9c326e50cdd851fd8c60861
+  metadata.gz: eec2476402ec7e3a4d2c414cad340aae35a0456db87d65c950d527e983ab7053
+  data.tar.gz: a910019755bf56f04cdfc180c6706be9a1b6fe2246c481822a647610a63a53f5
 SHA512:
-  metadata.gz: 322db6f66cc308f1aa827fa2d56fa171fd8bd14471208f20d2a4a8f6c548ff66cc3d59df5bb3e1b2fa167229bd23dec608deb21b2040ebf6daea984c8d8b45c5
-  data.tar.gz: 1ad3ecfa42433b655b074c99b1fe3d65b7e7047f1dab4e023eb6439d685e82b0dceef875919e6a5857c8e0b3f0839623701bf4ba11f4c810952108843656a1fe
+  metadata.gz: 84e12d4988eddabcba1ba473b7ddb92158674f34051fdf7005aae11171962b686621c81aade5121c33a700363422f1843183d6bb4d81c32123e2a84c757c51ee
+  data.tar.gz: 97731aaeffebf8bad9e02e44005a69d1507c99b46badda66735d3c4d5b756dbcb06eda88e10a3716d36ef13a82d9c3f962ac9993f0c2968e8d2bd39f8443b576

data/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 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.1'
 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");
@@ -722,6 +731,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 +885,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.1
 platform: ruby
 authors:
 - Yaroslav Shmarov