testimonials 0.1.1 → 0.1.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8c80625525a966ca2c3b5000a484ce06e6cb7068a957aa4ae715dbe8dda2670f
-  data.tar.gz: 79f65cc1e5bee6db4f3ab5269aa41eed082fd244fcf8d84404322118020aa502
+  metadata.gz: ca7fa3a534c13036edc28e6206c06b5e4ef82949cafaeee614a2d196509c2176
+  data.tar.gz: 140a7b0783d3284076def56a598a0c70bb72f1208b2a6158b62c09d634eeaeb2
 SHA512:
-  metadata.gz: 67cf4cad0a6123f44dbb91fd08b77cf29648777d8312e895758ba3891fb5476f9ed2c82a84956c23261f17f0ee3fc22f0373276664e7ecf769a724581d9d6ff5
-  data.tar.gz: 2407c9a00e87e009d0cd3447259e75987396e4663bbd19fee8e87a6ba8d9c02ee7e883a59a144a76ce362355c091c7020a081b0f703c6989009dc01cbd46b3e1
+  metadata.gz: 6eebe2d3c06afff74b999f4a8a29120a97d3a2e78eeb0ff1429df26bf14a9303c66861665489fdb10104c9f7557bca3ad140f466ddb4a4b2a2116d465c3bc302
+  data.tar.gz: 343195af39cd476f4a74728ab5e11997efa834806c7213aa3ab3b61bba933a6f2d89ccb6d255a9463b9089f9a4ebba5af078ff968db4b2adfff1fe1c6ad97cb3

data/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## 0.1.3
+
+- Video playback no longer pauses itself moments after play in Firefox: the
+  `#t=0.1` poster-frame fragment made Firefox seek a MediaRecorder webm that
+  has no seek index, stalling the stream. The fragment is gone (widget and
+  dashboard); `preload="metadata"` still paints the first frame in Chrome
+  and Firefox.
+
+## 0.1.2
+
+- The widget dialog goes full-screen on mobile (no bottom sheet, no animations):
+  inputs render at 16px to prevent iOS focus-zoom, the action row gains
+  safe-area padding, and the dialog's scroll is contained (no page rubber-banding).
+
 ## 0.1.1
 
 - Repository renamed to [yshmarov/testimonials](https://github.com/yshmarov/testimonials);

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

@@ -17,9 +17,11 @@
 
 <div class="card pad" style="margin-bottom: 16px;">
   <% if @testimonial.video_attached? %>
-    <%# #t=0.1 makes the browser paint that frame as the thumbnail. %>
+    <%# 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. %>
     <video class="playback" controls preload="metadata"
-           src="<%= testimonial_video_path(@testimonial) %>#t=0.1"></video>
+           src="<%= testimonial_video_path(@testimonial) %>"></video>
     <p class="muted">
       <%= link_to "⬇ #{t('testimonials.dashboard.download_video', default: 'Download video')}",
                   testimonial_video_path(@testimonial, download: 1) %>

data/lib/testimonials/version.rb

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

data/lib/testimonials/widget.js

@@ -390,7 +390,13 @@
       playback.controls = true;
       playback.playsInline = true;
       playback.preload = "metadata";
-      playback.src = state.existingVideoUrl + "#t=0.1";
+      // 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.
+      playback.src = state.existingVideoUrl;
       wrap.appendChild(playback);
       wrap.appendChild(attachedVideoChip(form, wrap, playback, function () {
         state.removeExistingVideo = true;
@@ -1035,6 +1041,22 @@
       ".tml-record-label,.tml-chip-remove{color:#3b82f6}",
       ".tml-chip{background:rgba(59,130,246,.12)}",
       ".tml-hint,.tml-nps-legend,.tml-record-hint{color:#9aa2ab}",
+      "}",
+      // The dialog is the scrollable region; keep its scroll from chaining
+      // into the host page (rubber-banding through the backdrop on touch).
+      "#tml-dialog{overscroll-behavior:contain}",
+      // Full-screen on mobile — no bottom sheet, no animation. Placed last,
+      // with selectors at least as specific as the desktop rules above, so
+      // these declarations win the cascade at equal specificity.
+      "@media (max-width:480px){",
+      "#tml-overlay{padding:0;align-items:stretch;justify-content:stretch}",
+      "#tml-dialog{left:0;right:0;top:0;bottom:0;width:100%;max-width:none;",
+      "height:100vh;height:100dvh;max-height:100dvh;border-radius:0;margin:0}",
+      // 16px stops iOS Safari's auto-zoom when a field gets focus.
+      "#tml-dialog textarea,#tml-dialog input[type=text],#tml-dialog input[type=email],#tml-dialog select{font-size:16px}",
+      // The action row has no padding of its own; give it the home-indicator
+      // safe area so Submit/Cancel never sit under the bar.
+      "#tml-dialog .tml-actions{padding-bottom:calc(0px + env(safe-area-inset-bottom))}",
       "}"
     ].join("");
     var style = document.createElement("style");

metadata

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