trmnl_preview 0.30.1 → 0.30.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 69dba3cf0ef5187c4e4b70ea1e465161ebd2367f8d578ef6c94bc3527e5f437c
-  data.tar.gz: 8a1a53e6a0d6cc711eda1b26dde6a6b574956fecced07c260990fdfbec665159
+  metadata.gz: 685a69fdb40d83171f2f8cb17d89b6954fae9c97f9f551d4210d228acbdb0690
+  data.tar.gz: e666f0a63344dc33447eb70cabf3202bab6c6030f967716e3b50954583e222e7
 SHA512:
-  metadata.gz: 6ce0c7e09a2f6e3164c15eb9e8a6fa779302e5bb45573e498ca5ac64f98de88be9105751c530a9f3044cdae51cfa1edeb4d20a3d2936373bb4886f6404e5d4cc
-  data.tar.gz: d08dd7466a052fb6dfedcde3e90761e6a236d4c784689213fcf5b17cc575c68f11cb96ecab0a7fd0a08e00b4fbf76b67d6ec4b3ad39202045dd4b645363ceec0
+  metadata.gz: a53e8130820062a99d94d25b2a140506baefccb9e2747c30c46d2cc7795a96c423c4c537c520514c3706a9aafacd1cb215957fdd3af6048b5145632ddb24058a
+  data.tar.gz: ebbaa2038fb76c066394dd98218a5305741d2b274763ddc2d41ad4151fc096763ec4593338f364d71807f032687264341e0585f17cf630684276101d757c6f78

data/CHANGELOG.md

@@ -1,6 +1,10 @@
 
 # Changelog
 
+## 0.30.2
+
+- `trmnlp serve`'s HTML preview of a device TRMNL scales runs the page's scripts at the CSS size too, then shows the page at the device's size and stops its timers, as the PNG and the device do. Before, a table showed 8 of 20 rows on a TRMNL X where the device shows 15.
+
 ## 0.30.1
 
 - A screen on a device TRMNL scales, as the TRMNL X or a Kobo, runs its scripts at the CSS size and is scaled only for the picture, as TRMNL does. Before, the scripts measured the scaled page, so a table cut rows the device shows (7 of 14 on a TRMNL X) and clamped text kept lines the device cuts.

data/lib/trmnlp/app.rb

@@ -213,7 +213,7 @@ module TRMNLP
       end
 
       get "/render/#{view}.html" do
-        @renderer.render_full_page(view, params)
+        Screenshot.live_preview(@renderer.render_full_page(view, params))
       end
 
       get "/render/#{view}.png" do

data/lib/trmnlp/screenshot.rb

@@ -49,6 +49,31 @@ module TRMNLP
       Promise.race([window.TRMNLMaps.refresh(), timeout]).then(() => done(true), () => done(false));
     JS
 
+    # The live preview settles in the page as a capture does, then stays still, as the device shows it.
+    SETTLE_LIVE_PREVIEW = <<~JS.freeze
+      (async () => {
+        const wait = window.setTimeout.bind(window);
+        const sleep = (ms) => new Promise((resolve) => wait(resolve, ms));
+        const ready = () => { #{READINESS_CHECK_SCRIPT} };
+        const readyBy = Date.now() + 1000 * %d;
+        while (!ready() && Date.now() < readyBy) await sleep(50);
+        if (document.fonts) await Promise.race([document.fonts.ready, sleep(#{FONTS_TIMEOUT_SECONDS * 1000})]);
+        if (typeof window.TRMNLMaps?.refresh !== 'function') {
+          #{FREEZE_TIMERS}
+          #{APPLY_CAPTURE_SCALE}
+          return;
+        }
+        #{APPLY_CAPTURE_SCALE}
+        await Promise.race([window.TRMNLMaps.refresh(), sleep(8000)]).catch(() => {});
+        #{FREEZE_TIMERS}
+      })();
+    JS
+
+    def self.live_preview(html)
+      timeout = html.match?(MAPS_DOCUMENT_PATTERN) ? READINESS_TIMEOUT_WITH_MAPS_SECONDS : READINESS_TIMEOUT_SECONDS
+      html.sub('</head>', "#{LAYOUT_PASS_STYLE}<script>#{format(SETTLE_LIVE_PREVIEW, timeout)}</script></head>")
+    end
+
     def initialize(pool:, viewport_timeout: 5, fonts_timeout: FONTS_TIMEOUT_SECONDS)
       @pool = pool
       @viewport_timeout = viewport_timeout

data/lib/trmnlp/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module TRMNLP
-  VERSION = '0.30.1'
+  VERSION = '0.30.2'
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: trmnl_preview
 version: !ruby/object:Gem::Version
-  version: 0.30.1
+  version: 0.30.2
 platform: ruby
 authors:
 - Rockwell Schrock