mp 0.1.3 → 0.1.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e0e1a8144762d89c2522e81fbb0b6e979802ea3989730337d45e49c31cbe6c2f
-  data.tar.gz: 86aced39b324abbbc2b7dcdb20d42b7dd8ede154055bfaec651997d93ba08f7b
+  metadata.gz: 6b1c5ee524e99fecc018dbcc19184f1ae96c0c6a5c6b41d7f4809e754a8b9d1e
+  data.tar.gz: ba755bb7c1dd73f7cf62ba0b14c07012811dc961750bcace65811df1cd184813
 SHA512:
-  metadata.gz: c9907e65113fe1743a3f09bee33ad883d3b01dafc792fa6b78971549d5a1323e75062f1e6c0ef59c9b4d767e5ebd63ece2859745c54fdb0a4e4449c86c48554e
-  data.tar.gz: 51943720c9294c0af440068ade78de35a1b95468b6fbcc944dbe3a1fa1d01c9933cec15228a8cd6892900561e0b4c2e7c0c54e3376f62c2a645c57f12d5c56ad
+  metadata.gz: ff969b7c6e35a011c35d936cb7b1eafe00c55fcafda636bf7b3ff417b6da0b7483b9421dcbdbe73eb3155099d9a7bc6a3f6d41f632021f28e769f9168bd76964
+  data.tar.gz: 300a94ef4e03844a3b74151815d72f1e1ddc90902e0acd952954cc4b7e4ae3da5c9ea577b886377a9894f7424b0897a5ea9c31874efc9d80049b1cc6050d41e1

data/README.md

@@ -95,6 +95,7 @@ theme: default        # default / dark / ./my-theme.css
 size: 16:9            # 16:9 / 4:3
 title: タイトル
 paginate: true
+duration: 20          # トークの想定時間(分)。"20:00" "90s" も可
 header: ヘッダー
 footer: フッター
 style: |
@@ -105,6 +106,13 @@ style: |
 <!-- _backgroundColor: black --> このスライドだけに適用(先頭に _)
 ```
 
+`duration` を指定すると、スライドを表示した時点からタイマーが動き、右下に「ページ番号 / 総枚数」「このページの残り」「全体の残り」を表示します(`paginate` のページ番号はタイマーの中に移ります)。
+
+- 1 ページの持ち時間は、全体の時間を枚数で均等に割った長さです(20 分で 10 枚なら 2 分)
+- ページごとに使った時間を積算するので、戻って再び開くと続きから数えます
+- 全体の残りは残り 2 分(短いトークでは全体の 2 割)、ページの残りは持ち時間の 2 割を切ると色が変わり、超過すると赤で超過時間を表示します
+デッキを保存して再読み込みしてもタイマーは続きます。発表者ビューにも残り時間が出て、`r` で両方をリセットできます。
+
 使えるディレクティブは `paginate` `header` `footer` `class` `color` `backgroundColor` `backgroundImage` `backgroundPosition` `backgroundRepeat` `backgroundSize` です。クラスには `lead`(中央寄せ)、`left`(左寄せ)、`right`(本文だけ右寄せ)、`invert`(配色反転)、`columns`(2 列)があります。
 
 **画像**
@@ -149,7 +157,7 @@ bundle exec exe/mp --presenter examples/demo.md
 | `Home` / `End` | 最初 / 最後 |
 | 数字 + `Enter` | そのページへ |
 | `Enter` | 台本のコマンドを実行 |
-| `r` | 経過時間をリセット |
+| `r` | 経過時間をリセット(`duration` のタイマーも戻す) |
 | `+` / `-` | ノートの文字サイズ |
 | `q` | 終了 |
 

data/lib/mp/deck.rb

@@ -15,7 +15,7 @@ module Mp
   # kramdown に渡す前に行単位で走査する。kramdown は info 文字列に属性を持つ
   # フェンスを認識せず、`$x$` も扱えないため、独自記法はここでトークンに置換する。
   class Deck
-    GLOBAL_DIRECTIVES = %w[theme size style title].freeze
+    GLOBAL_DIRECTIVES = %w[theme size style title duration].freeze
     LOCAL_DIRECTIVES = %w[
       paginate header footer class color
       backgroundColor backgroundImage backgroundPosition backgroundRepeat backgroundSize
@@ -48,6 +48,17 @@ module Mp
       SIZES.fetch(@globals["size"].to_s, SIZES["16:9"])
     end
 
+    # トークの想定時間(秒)。数値は分として扱い、"20:00" "90s" "20m" も受け付ける
+    def duration
+      seconds = case (value = @globals["duration"])
+                when Numeric then value * 60
+                when /\A\s*(\d+):([0-5]\d)\s*\z/ then (Regexp.last_match(1).to_i * 60) + Regexp.last_match(2).to_i
+                when /\A\s*(\d+(?:\.\d+)?)\s*(?:m|min|分)?\s*\z/ then Regexp.last_match(1).to_f * 60
+                when /\A\s*(\d+)\s*(?:s|sec|秒)\s*\z/ then Regexp.last_match(1).to_i
+                end
+      seconds.round if seconds&.positive?
+    end
+
     def title
       @globals["title"] || @slides.find { _1[:kind] == :cover }&.fetch(:title) || "mp"
     end
@@ -57,6 +68,7 @@ module Mp
       {
         title: title,
         size: size,
+        duration: duration,
         style: @globals["style"].to_s,
         slides: @slides.map { _1.slice(:html, :notes) },
         embeds: @embeds.transform_values { _1.except(:cwd) }
@@ -73,9 +85,9 @@ module Mp
       [match.post_match, front.is_a?(Hash) ? front : {}]
     end
 
-    # YAML 1.1 では `4:3` が 60 進数の 243 になるので、文字列のまま読ませる
+    # YAML 1.1 では `4:3` や `20:00` が 60 進数の数値になるので、文字列のまま読ませる
     def load_yaml(text)
-      YAML.safe_load(text.gsub(/^(\s*_?size:\s*)(\d+:\d+)\s*$/, '\1"\2"'))
+      YAML.safe_load(text.gsub(/^(\s*_?(?:size|duration):\s*)(\d+:\d+)\s*(#.*)?$/, '\1"\2"'))
     end
 
     def scan(body)

data/lib/mp/server.rb

@@ -118,9 +118,12 @@ module Mp
     def deck_json
       deck = @deck.to_h
       embeds = deck[:embeds].transform_values { |embed| embed[:type] == "web" ? embed.merge(src: embed_url(embed[:src])) : embed }
-      deck.merge(embeds: embeds, themeCss: theme_css)
+      @started_at ||= Time.now # 最初にスライドを表示した時刻からタイマーを始める
+      deck.merge(embeds: embeds, themeCss: theme_css, startedAt: timer_start)
     end
 
+    def timer_start = (@started_at.to_f * 1000).round
+
     def embed_url(src)
       return src if src.empty? || src.match?(%r{\Ahttps?://}i)
 
@@ -211,6 +214,9 @@ module Mp
       case JSON.parse(message)["type"]
       when "quit" then @on_quit&.call
       when "open-presenter" then @on_open_presenter&.call
+      when "timer-reset"
+        @started_at = Time.now
+        broadcast(JSON.generate(type: "timer", startedAt: timer_start))
       when "frame" then @on_frame_request&.call
       else broadcast(message, except: socket)
       end

data/lib/mp/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Mp
-  VERSION = "0.1.3"
+  VERSION = "0.1.4"
 end

data/public/app.js

@@ -10,6 +10,12 @@ let slides = [];
 let current = 0;
 let terminals = new Map(); // embed id -> { term, socket, fit, host, slot, font }
 let scale = 1;
+let startedAt = null;
+const slideSpent = new Map(); // ページ番号 -> そのページで使った時間(ミリ秒)。戻っても続きから数える
+let enteredAt = Date.now();
+const timer = document.createElement("div");
+timer.id = "timer";
+timer.innerHTML = `<span class="timer-pages"></span><span class="timer-slide"><small>ページ</small><b></b></span><span class="timer-total"><small>全体</small><b></b></span>`;
 let activeTerminal = null;
 let digits = "";
 
@@ -25,10 +31,39 @@ async function loadDeck() {
 
   deck = await MpSlides.load(stage);
   slides = [...stage.querySelectorAll(":scope > section.slide")];
+  startedAt = deck.startedAt;
+  stage.append(timer); // スライドと一緒に拡大縮小させる
+  stage.classList.toggle("timed", !!deck.duration);
+  renderTimer();
   layout();
   show(Math.min(Number(location.hash.slice(1) || 1) - 1, slides.length - 1), { fragments: "none" });
 }
 
+function spentOnCurrent(now = Date.now()) {
+  return (slideSpent.get(current) ?? 0) + (now - enteredAt);
+}
+
+function renderTimer() {
+  timer.hidden = !deck?.duration || !slides.length;
+  if (timer.hidden) return;
+  const total = MpSlides.remaining(deck, startedAt);
+  const budget = MpSlides.slideBudget(deck, slides.length);
+  const slide = MpSlides.slideRemaining(budget, spentOnCurrent());
+  timer.querySelector(".timer-pages").textContent = `${current + 1} / ${slides.length}`;
+  timer.querySelector(".timer-slide b").textContent = MpSlides.formatTime(slide);
+  timer.querySelector(".timer-slide").dataset.state = MpSlides.slideState(budget, slide);
+  timer.querySelector(".timer-total b").textContent = MpSlides.formatTime(total);
+  timer.querySelector(".timer-total").dataset.state = MpSlides.timerState(deck, total);
+}
+
+function resetTimer(at) {
+  startedAt = at;
+  slideSpent.clear();
+  enteredAt = Date.now();
+  renderTimer();
+  sendState();
+}
+
 function layout() {
   if (!deck) return;
   scale = Math.min(innerWidth / deck.size[0], innerHeight / deck.size[1]);
@@ -64,6 +99,10 @@ function show(index, { fragments }) {
   releaseFocus();
   slides[current]?.classList.remove("active");
   slides[current]?.querySelectorAll("iframe").forEach((frame) => frame.blur());
+  if (index !== current) {
+    slideSpent.set(current, spentOnCurrent());
+    enteredAt = Date.now();
+  }
   current = index;
   const slide = slides[current];
   slide.classList.add("active");
@@ -71,6 +110,7 @@ function show(index, { fragments }) {
   history.replaceState(null, "", `#${current + 1}`);
   mountEmbeds(slide);
   renderNotes();
+  renderTimer();
   sendState();
 }
 
@@ -81,6 +121,7 @@ function sendState() {
   const terminal = currentTerminal();
   events.send(JSON.stringify({
     type: "state", slide: current, step, script: terminal?.script() ?? null, ready: terminal?.ready() ?? false,
+    slideSpent: spentOnCurrent(), sentAt: Date.now(), // 発表者ビューはここから経過を数える
   }));
 }
 
@@ -300,7 +341,9 @@ events.onmessage = (event) => {
   const message = JSON.parse(event.data);
   if (message.type === "reload") loadDeck();
   else if (message.type === "hello") sendState();
+  else if (message.type === "timer") resetTimer(message.startedAt);
   else if (message.type === "command") commands[message.cmd]?.(message);
 };
 
+setInterval(renderTimer, 250);
 loadDeck();

data/public/presenter.css

@@ -29,5 +29,8 @@ body.presenter {
 #speaker-notes { flex: 1; min-height: 0; overflow: auto; line-height: 1.6; white-space: pre-wrap; }
 
 #elapsed { font: 600 34px Menlo, monospace; }
+#remaining, #slide-remaining { font: 600 24px Menlo, "Hiragino Sans", monospace; color: #9fc4ff; }
+:is(#remaining, #slide-remaining)[data-state="warn"] { color: #ffc861; }
+:is(#remaining, #slide-remaining)[data-state="over"] { color: #ff7a7a; }
 #clock { font: 20px Menlo, monospace; color: #98a1b3; }
 .hints { margin-left: auto; font-size: 13px; color: #6f7889; }

data/public/presenter.html

@@ -31,6 +31,8 @@
   </div>
   <div class="status">
     <span id="elapsed">00:00</span>
+    <span id="slide-remaining" hidden></span>
+    <span id="remaining" hidden></span>
     <span id="clock"></span>
     <span class="hints">→ 次へ ・ ← 前へ ・ Enter コマンド実行 ・ r タイマー ・ +/- ノート文字 ・ q 終了</span>
   </div>

data/public/presenter.js

@@ -6,7 +6,7 @@ const FRAME_INTERVAL = 250;
 let deck = null;
 let state = { slide: 0, step: 0, script: null, ready: false };
 let digits = "";
-let startedAt = Date.now();
+let startedAt = Date.now(); // サーバの開始時刻を受け取るまでの仮の値
 let noteSize = 26;
 let mirrorRunning = false;
 let mirrorSlide = null;
@@ -19,6 +19,7 @@ const command = (cmd, args = {}) => send({ type: "command", cmd, ...args });
 
 async function loadDeck() {
   deck = await MpSlides.load($("current"), [$("current"), $("next")]);
+  startedAt = deck.startedAt;
   document.title = `発表者ビュー - ${deck.title}`;
   for (const stage of [$("current"), $("next")]) {
     stage.querySelectorAll(".embed").forEach(describeEmbed);
@@ -110,10 +111,19 @@ function onFrame(data) {
 }
 
 function tick() {
-  const seconds = Math.floor((Date.now() - startedAt) / 1000);
-  const pad = (n) => String(n).padStart(2, "0");
-  $("elapsed").textContent = `${seconds >= 3600 ? `${Math.floor(seconds / 3600)}:` : ""}${pad(Math.floor(seconds / 60) % 60)}:${pad(seconds % 60)}`;
+  $("elapsed").textContent = MpSlides.formatTime(Math.floor((Date.now() - startedAt) / 1000));
   $("clock").textContent = new Date().toLocaleTimeString("ja-JP", { hour: "2-digit", minute: "2-digit" });
+  $("remaining").hidden = $("slide-remaining").hidden = !deck?.duration;
+  if (!deck?.duration) return;
+  const remaining = MpSlides.remaining(deck, startedAt);
+  $("remaining").textContent = remaining < 0 ? `超過 ${MpSlides.formatTime(-remaining)}` : `残り ${MpSlides.formatTime(remaining)}`;
+  $("remaining").dataset.state = MpSlides.timerState(deck, remaining);
+
+  // 聴衆画面が送った使用時間に、送ってからの経過を足す
+  const budget = MpSlides.slideBudget(deck, deck.slides.length);
+  const slide = MpSlides.slideRemaining(budget, (state.slideSpent ?? 0) + (Date.now() - (state.sentAt ?? Date.now())));
+  $("slide-remaining").textContent = `このページ ${slide < 0 ? `超過 ${MpSlides.formatTime(-slide)}` : MpSlides.formatTime(slide)}`;
+  $("slide-remaining").dataset.state = MpSlides.slideState(budget, slide);
 }
 
 function setNoteSize(size) {
@@ -128,7 +138,7 @@ window.addEventListener("keydown", (event) => {
     ArrowLeft: () => command("prev"), ArrowUp: () => command("prev"), PageUp: () => command("prev"),
     Home: () => command("first"),
     End: () => command("last"),
-    r: () => { startedAt = Date.now(); tick(); },
+    r: () => send({ type: "timer-reset" }), // 聴衆画面のタイマーも一緒に戻す
     "+": () => setNoteSize(noteSize + 2),
     "=": () => setNoteSize(noteSize + 2),
     "-": () => setNoteSize(noteSize - 2),
@@ -154,8 +164,12 @@ socket.onmessage = (event) => {
   if (message.type === "state") {
     state = message;
     render();
+    tick();
   } else if (message.type === "frame") {
     onFrame(message.data);
+  } else if (message.type === "timer") {
+    startedAt = message.startedAt;
+    tick();
   } else if (message.type === "reload") {
     loadDeck();
   }

data/public/slides.js

@@ -20,6 +20,40 @@ const MpSlides = {
     return deck;
   },
 
+  // 残り時間。超過すると負になる
+  remaining(deck, startedAt, now = Date.now()) {
+    return deck.duration - Math.floor((now - startedAt) / 1000);
+  },
+
+  formatTime(seconds) {
+    const sign = seconds < 0 ? "+" : "";
+    const s = Math.abs(seconds);
+    const pad = (n) => String(n).padStart(2, "0");
+    const hours = Math.floor(s / 3600);
+    return `${sign}${hours ? `${hours}:${pad(Math.floor(s / 60) % 60)}` : pad(Math.floor(s / 60))}:${pad(s % 60)}`;
+  },
+
+  // 残り 2 分、短いトークでは全体の 2 割を切ったら注意を促す
+  timerState(deck, remaining) {
+    if (remaining < 0) return "over";
+    return remaining <= Math.min(120, deck.duration * 0.2) ? "warn" : "normal";
+  },
+
+  // 1 ページの持ち時間(秒)。全体の時間を枚数で均等に割る
+  slideBudget(deck, count) {
+    return deck.duration / count;
+  },
+
+  // そのページで使った時間を引いた残り。持ち時間の 2 割を切ったら注意を促す
+  slideRemaining(budget, spentMs) {
+    return Math.floor(budget - Math.floor(spentMs / 1000)); // 全体の残りと同じく経過秒で刻む
+  },
+
+  slideState(budget, remaining) {
+    if (remaining < 0) return "over";
+    return remaining <= budget * 0.2 ? "warn" : "normal";
+  },
+
   // `# <!-- fit --> 見出し` を横幅いっぱいにする
   fitHeadings(stage) {
     stage.querySelectorAll(".fit").forEach((heading) => {

data/public/style.css

@@ -83,6 +83,28 @@ section.slide > header { top: 20px; }
 section.slide > footer { bottom: 20px; }
 section.slide > .page-number { bottom: 20px; left: auto; right: 32px; }
 
+/* duration を指定したときの「ページ番号 / このページの残り / 全体の残り」 */
+#timer {
+  position: absolute;
+  right: 24px;
+  bottom: 14px;
+  z-index: 3;
+  display: flex;
+  overflow: hidden;
+  border-radius: 6px;
+  background: rgba(20, 22, 27, .62);
+  color: #fff;
+  font: 600 18px/1.3 Menlo, monospace;
+}
+#timer[hidden] { display: none; }
+#timer > span { padding: 3px 10px; }
+#timer > span + span { border-left: 1px solid rgba(255, 255, 255, .25); }
+#timer small { margin-right: 6px; font: 11px "Hiragino Sans", system-ui, sans-serif; opacity: .8; }
+#timer [data-state="warn"] { background: rgba(196, 120, 0, .9); }
+#timer [data-state="over"] { background: rgba(200, 40, 40, .92); }
+/* ページ番号はタイマーの中に出す */
+#stage.timed section.slide > .page-number { display: none; }
+
 .embed {
   position: relative;
   flex: 1;

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: mp
 version: !ruby/object:Gem::Version
-  version: 0.1.3
+  version: 0.1.4
 platform: ruby
 authors:
 - takkanm