wani 0.1.10 → 0.1.12

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f85a23004f1df4d2bbbbc63f5f0b1390fc23476719bdf53af05d493a2c2cbc2d
-  data.tar.gz: dc2c7fbeed8adceb6c10ce6efb0f8c3bc418625e82878845426c203a20a8bfd6
+  metadata.gz: eb4630588cc6addc11f3c475f87077fa22f3cb40dae0346d7c549f48cc039ab7
+  data.tar.gz: 46a52d864d36039806fe31b6b8a118b994b8d2752c966a748364ae1a1b8b7d44
 SHA512:
-  metadata.gz: b75c77c939e09c3e195a63b119f4e6e5c8557bcb5f120edf5496a00a2ee20da64b70cae8b18d8a87a98dd0e70299fe1e9881ebbfbdbdf6f94e2995725b531a56
-  data.tar.gz: e207c8c3ae8ceb6906702ce73a2dbca34005b09c7a2a80b178cf1f9c832f4abeb75fcb48844e31e46738cb128bc03eaa5431c3ebc0ac41683bacda36a9075f01
+  metadata.gz: 976a114f82b6f43a13bda767ad0b6f2cde0632e646671a03c8fed6c1baaca8a1216a137a339fe29120bd255fa92c2bc203442a344c90c2fbcb7449a39dee1b38
+  data.tar.gz: c0dd0f5f1e4ef80c4a008ad452cce5cb195aee8931c017314b6c2d77a892c71fdbd455a28c9d49d9a876a4b9c682fe81be5c3ddb84f85173ea3833d86fddc43c

data/README.md

@@ -25,7 +25,7 @@ npm ci
 bundle exec rake build:wasm
 
 gem build wani.gemspec
-gem install ./wani-0.1.10.gem
+gem install ./wani-0.1.12.gem
 
 wani new my-talk
 cd my-talk
@@ -130,7 +130,10 @@ Ctrl+P でも印刷できます。
 
 ## 発表タイマー
 
-スライドの読み込み完了から計測し、既定では5分で時間切れ画面を表示します。
+hashなしのURLで開くと、最初のスライドに半透明の黒いベールと「スタート」ボタンを表示します。
+待機中はページ移動と計測を止め、ボタンを押すとベールが消えてタイマーが始まります。Fキーで全画面にして待機できます。
+`#slide=1` などのhash付きURLでは、読み込み完了から計測します。
+既定では5分で時間切れ画面を表示します。
 Front Matter の `time_limit` に分数を指定して変更できます（小数も可）。
 `time_limit: 0` でタイマーを無効にします。
 
@@ -138,12 +141,13 @@ Front Matter の `time_limit` に分数を指定して変更できます（小
 残り5秒は中央に数字を表示し、画面の短辺に対して20％・40％・60％・80％・100％と強調サイズを増やします。
 各数字は0.8秒で通常サイズに戻ります。動きを減らす設定では拡大アニメーションを省略します。
 時間切れになると、兎柄フードをくわえたワニ（さめ）の画像を表示します。
+画像は軽量なWebP形式で配布し、発表開始前に読み込みとデコードを済ませて、時間切れの文字と同時に表示します。
 左右キーまたは「スライドに戻る」ボタンで、時間切れ直前のスライドに戻れます。
 戻った後は通常通りページを移動でき、時間切れ画面は再表示しません。
 最終スライドの表示中はタイマーを一時停止し、カウントダウンも時間切れ画面も表示しません。
 前のスライドに戻ると、停止前の残り時間から再開します。1ページだけの場合も停止します。
 ページを再読み込みするとタイマーも最初から始まります。
-タイマーと時間切れ画面はPDFには含めません。
+開始待ち画面、タイマー、時間切れ画面はPDFには含めません。
 
 ## 同梱フォント
 

data/assets/build.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.1.10",
-  "source_sha256": "b66ef1d534e169a73a33bf97aacbb95049b982a006fc6487baf5969a897b6dc9",
+  "version": "0.1.12",
+  "source_sha256": "de684716a467e77a389554e50aad08062f9b9a270b67d7fd53929b49806e0447",
   "loader_commit": "dc6b0ffd5800ed9bfc49268ed8021d456f10ddf8",
-  "wasm_sha256": "0b632b9dc039dfa2e6a76f5ab54938788a334ffe24aaeb07570f0e23f0ac2215"
+  "wasm_sha256": "8911ce2363c89117cd7318c3b7712c9cf1571d68c62986bdead646418943e613"
 }

data/assets/index.html

@@ -24,10 +24,13 @@
 <p id="status" role="status">Ruby を読み込んでいます…</p>
 <aside id="warnings" role="status" hidden></aside>
 <div id="viewport"><main id="stage" aria-label="スライド"></main></div>
+<section id="start-overlay" role="dialog" aria-modal="true" aria-label="発表の開始" hidden>
+  <button id="start-presentation">スタート</button>
+</section>
 <output id="countdown" aria-live="off" aria-label="発表の残り時間" hidden></output>
 <section id="time-expired" role="dialog" aria-modal="true" aria-labelledby="time-expired-title" hidden>
   <h1 id="time-expired-title">時間切れです！</h1>
-  <div class="time-expired-image" role="img" aria-label="兎柄フードをくわえるワニ（さめ）"></div>
+  <img id="time-expired-image" class="time-expired-image" src="/assets/time-expired.webp" width="1086" height="724" alt="兎柄フードをくわえるワニ（さめ）">
   <p>← または → キーで元のスライドに戻れます</p>
   <button id="resume-slides">スライドに戻る</button>
 </section>

data/assets/style.css

@@ -34,6 +34,10 @@ button:focus-visible, a:focus-visible { outline: 2px solid #557e64; outline-offs
 .title { margin: 0 0 36px; white-space: nowrap; flex: 0 0 160px; font-weight: 700; line-height: 1.12; overflow: hidden; letter-spacing: -.025em; }
 .body { flex: 1 1 0; min-height: 0; overflow: hidden; line-height: 1.3; }
 .body p { margin: 0 0 .35em; }
+.titleless .body { display: flex; flex-direction: column; justify-content: safe center; text-align: center; }
+.titleless .body > * { flex-shrink: 0; }
+.titleless .body > :last-child { margin-bottom: 0; }
+.titleless .body img { margin-inline: auto; }
 .body ul, .body ol { margin: .2em 0 .4em; padding-left: 1.35em; }
 .body pre { margin: .3em 0; padding: .4em .55em; background: #f3f6f2; white-space: pre-wrap; tab-size: 2; }
 .body code { font-family: ui-monospace, "IBM Plex Sans JP", monospace; font-size: .8em; }
@@ -89,7 +93,7 @@ button:focus-visible, a:focus-visible { outline: 2px solid #557e64; outline-offs
 #time-expired { position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: center; background: white; color: #20352e; padding: 16px; overflow: auto; }
 #time-expired[hidden], #countdown[hidden] { display: none; }
 #time-expired h1 { margin: 0; font-size: clamp(24px, 4vw, 56px); }
-.time-expired-image { width: min(90vw, calc(65vh * 1024 / 683)); aspect-ratio: 1024 / 683; flex-shrink: 0; background: url('/assets/time-expired.png') right center / 200% 100% no-repeat; }
+.time-expired-image { width: min(90vw, calc(65vh * 1086 / 724)); aspect-ratio: 1086 / 724; height: auto; flex-shrink: 0; }
 #time-expired p { margin: 8px 0; text-align: center; }
 @media print { #countdown, #time-expired { display: none !important; } }
 
@@ -102,3 +106,8 @@ button:focus-visible, a:focus-visible { outline: 2px solid #557e64; outline-offs
 .island-left { left: 0; }
 .island-right { right: 0; }
 .rabbit-position { z-index: 2; }
+
+#start-overlay { position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; background: rgb(0 0 0 / 60%); }
+#start-overlay[hidden] { display: none; }
+#start-presentation { padding: 18px 48px; font-size: clamp(24px, 4vw, 40px); font-weight: 700; border-radius: 12px; }
+@media print { #start-overlay { display: none !important; } }

data/lib/wani/browser/application.rb

@@ -26,11 +26,19 @@ module Wani
         @layout.wait_assets(element("stage"))
         @sections.each_with_index { |section, index| @layout.fit_slide(section, index + 1) }
         prepare_pages(false)
+        prepare_timer_image
         bind_events
+        @waiting_to_start = JS.global[:location][:hash].to_s.empty?
         go(hash_index)
         %w[previous next fullscreen speaker print print-notes].each { |id| element(id)[:disabled] = false }
         update_buttons
-        start_timer
+        if @waiting_to_start
+          element("start-overlay")[:hidden] = false
+          element("viewport")[:inert] = true
+          element("start-presentation").focus
+        else
+          start_timer
+        end
         element("status")[:textContent] = "準備できました"
       end
 
@@ -55,6 +63,15 @@ module Wani
       end
 
       def bind_events
+        element("start-presentation").addEventListener("click") do
+          next unless @waiting_to_start
+          @waiting_to_start = false
+          element("start-overlay")[:hidden] = true
+          element("viewport")[:inert] = false
+          element("start-presentation").blur
+          go(0)
+          start_timer
+        end
         element("previous").addEventListener("click") { go(@index - 1) }
         element("next").addEventListener("click") { go(@index + 1) }
         element("fullscreen").addEventListener("click") { fullscreen }
@@ -65,6 +82,7 @@ module Wani
           target = event[:target]
           next if event[:ctrlKey] == JS::True || event[:altKey] == JS::True || event[:metaKey] == JS::True
           next if %w[INPUT TEXTAREA SELECT].include?(target[:tagName].to_s) || target[:isContentEditable] == JS::True
+          next if @waiting_to_start && !%w[f F Escape n N].include?(event[:key].to_s)
           handled = true
           case event[:key].to_s
           when "ArrowRight", " ", "PageDown" then go(@index + 1)
@@ -89,6 +107,8 @@ module Wani
       end
 
       def go(index)
+        return if @waiting_to_start && @active_number
+
         if @time_expired
           @time_expired = false
           element("time-expired")[:hidden] = true
@@ -102,7 +122,7 @@ module Wani
         @active_number = @index + 1
         element("position")[:textContent] = "#{@index + 1} / #{@sections.length}"
         desired = "#slide=#{@index + 1}"
-        JS.global[:history].replaceState(JS::Null, "", desired) unless JS.global[:location][:hash].to_s == desired
+        JS.global[:history].replaceState(JS::Null, "", desired) unless @waiting_to_start || JS.global[:location][:hash].to_s == desired
         update_buttons
         @layout.scale
         sync_speaker

data/lib/wani/browser/presentation_timer.rb

@@ -3,6 +3,15 @@ module Wani
     class Application
       private
 
+      # Decode the actual displayed image before enabling presentation controls.
+      def prepare_timer_image
+        return if @presentation.time_limit.zero?
+
+        element("time-expired-image").decode.await
+      rescue JS::Error
+        warn("時間切れの画像を読み込めませんでした")
+      end
+
       def start_timer
         return if @presentation.time_limit.zero?
 

data/lib/wani/browser/renderer.rb

@@ -13,7 +13,10 @@ module Wani
         section.setAttribute("aria-label", "スライド #{slide.number}")
         title = child(section, "h1", "title")
         title[:textContent] = notes ? "ノート #{slide.number}" : slide.title
-        title[:style][:display] = "none" if title[:textContent].to_s.empty?
+        if title[:textContent].to_s.empty?
+          title[:style][:display] = "none"
+          section[:className] = "slide titleless"
+        end
         body = child(section, "div", "body")
         body[:innerHTML] = notes ? slide.notes_html : slide.html
         resolve_links(body)

data/lib/wani/server/application.rb

@@ -7,7 +7,7 @@ module Wani
   module Server
     # Only the selected Markdown, images below its directory and fixed gem assets are public.
     class Application
-      ASSETS = %w[index.html style.css highlight.css rouge.LICENSE bootstrap.rb speaker.html rabbit.svg shark.svg time-expired.png runtime.pr672.js wani.wasm runtime.LICENSE runtime.NOTICE build.json
+      ASSETS = %w[index.html style.css highlight.css rouge.LICENSE bootstrap.rb speaker.html rabbit.svg shark.svg time-expired.webp runtime.pr672.js wani.wasm runtime.LICENSE runtime.NOTICE build.json
                   fonts/IBMPlexSansJP-Regular.woff2 fonts/IBMPlexSansJP-Bold.woff2].freeze
       TYPES = { ".html" => "text/html; charset=utf-8", ".css" => "text/css; charset=utf-8", ".rb" => "text/plain; charset=utf-8", ".js" => "text/javascript", ".wasm" => "application/wasm", ".md" => "text/plain; charset=utf-8", ".svg" => "image/svg+xml", ".png" => "image/png", ".jpg" => "image/jpeg", ".jpeg" => "image/jpeg", ".webp" => "image/webp", ".json" => "application/json", ".woff2" => "font/woff2" }.freeze
       IMAGES = %w[.png .jpg .jpeg .webp .svg].freeze

data/lib/wani/version.rb

@@ -1,3 +1,3 @@
 module Wani
-  VERSION = "0.1.10"
+  VERSION = "0.1.12"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: wani
 version: !ruby/object:Gem::Version
-  version: 0.1.10
+  version: 0.1.12
 platform: ruby
 authors:
 - ledsun
@@ -100,7 +100,7 @@ files:
 - assets/shark.svg
 - assets/speaker.html
 - assets/style.css
-- assets/time-expired.png
+- assets/time-expired.webp
 - assets/wani.wasm
 - exe/wani
 - lib/wani.rb