mp 0.1.4 → 0.1.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6b1c5ee524e99fecc018dbcc19184f1ae96c0c6a5c6b41d7f4809e754a8b9d1e
-  data.tar.gz: ba755bb7c1dd73f7cf62ba0b14c07012811dc961750bcace65811df1cd184813
+  metadata.gz: 984c7daa2edf2f2b798e1c94fb8d3c045141898029745420d7cae1375344df35
+  data.tar.gz: cf7efcb639627fb6ba352a792e6fdf1ee4c067143f7176ff80f42abff3867ca6
 SHA512:
-  metadata.gz: ff969b7c6e35a011c35d936cb7b1eafe00c55fcafda636bf7b3ff417b6da0b7483b9421dcbdbe73eb3155099d9a7bc6a3f6d41f632021f28e769f9168bd76964
-  data.tar.gz: 300a94ef4e03844a3b74151815d72f1e1ddc90902e0acd952954cc4b7e4ae3da5c9ea577b886377a9894f7424b0897a5ea9c31874efc9d80049b1cc6050d41e1
+  metadata.gz: 2dee9e1bff8102581fbd35c554f532d1e2130656bb21a135e09d9771a744e8a0287114227007c95aab393cd12e77ffb279e40a613f2f955071746f2a07af8ffb
+  data.tar.gz: dad6a20a43f31f7fd908542422af32902b6a5369c72e020a8ca04d2ca63597dd8096c173eb218d1bef0d202e5b483e3bb1444b798671b8ab1d2ba4cc061db67f

data/README.md

@@ -106,9 +106,10 @@ style: |
 <!-- _backgroundColor: black --> このスライドだけに適用(先頭に _)
 ```
 
-`duration` を指定すると、スライドを表示した時点からタイマーが動き、右下に「ページ番号 / 総枚数」「このページの残り」「全体の残り」を表示します(`paginate` のページ番号はタイマーの中に移ります)。
+`duration` を指定すると、表紙の次のページへ進んだ時点からタイマーが動き(最初のスライドが表紙でなければ表示した時点から)、右下に「ページ番号 / 総枚数」「このページの残り」「全体の残り」を表示します(`paginate` のページ番号はタイマーの中に移ります)。
 
-- 1 ページの持ち時間は、全体の時間を枚数で均等に割った長さです(20 分で 10 枚なら 2 分)
+- 1 ページの持ち時間は、全体の時間を表紙を除いた枚数で均等に割った長さです(20 分で表紙と 10 枚なら 2 分)
+- 表紙にいる間は全体の残りが止まったままで、ページの残りは表示しません
 - ページごとに使った時間を積算するので、戻って再び開くと続きから数えます
 - 全体の残りは残り 2 分(短いトークでは全体の 2 割)、ページの残りは持ち時間の 2 割を切ると色が変わり、超過すると赤で超過時間を表示します
 デッキを保存して再読み込みしてもタイマーは続きます。発表者ビューにも残り時間が出て、`r` で両方をリセットできます。
@@ -157,7 +158,7 @@ bundle exec exe/mp --presenter examples/demo.md
 | `Home` / `End` | 最初 / 最後 |
 | 数字 + `Enter` | そのページへ |
 | `Enter` | 台本のコマンドを実行 |
-| `r` | 経過時間をリセット(`duration` のタイマーも戻す) |
+| `r` | 経過時間をリセット(`duration` のタイマーも戻す。表紙にいれば開始前に戻る) |
 | `+` / `-` | ノートの文字サイズ |
 | `q` | 終了 |
 

data/lib/mp/deck.rb

@@ -70,7 +70,7 @@ module Mp
         size: size,
         duration: duration,
         style: @globals["style"].to_s,
-        slides: @slides.map { _1.slice(:html, :notes) },
+        slides: @slides.map { _1.slice(:html, :notes, :kind) },
         embeds: @embeds.transform_values { _1.except(:cwd) }
       }
     end

data/lib/mp/server.rb

@@ -118,11 +118,17 @@ 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 }
-      @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 start_timer
+      started = @lock.synchronize { @started_at.nil? && (@started_at = Time.now) }
+      broadcast(JSON.generate(type: "timer", startedAt: timer_start)) if started
+    end
+
+    # 未開始なら nil。開始は聴衆画面が表紙の次へ進んだときに知らせてくる
+    def timer_start = @started_at && (@started_at.to_f * 1000).round
 
     def embed_url(src)
       return src if src.empty? || src.match?(%r{\Ahttps?://}i)
@@ -214,9 +220,12 @@ module Mp
       case JSON.parse(message)["type"]
       when "quit" then @on_quit&.call
       when "open-presenter" then @on_open_presenter&.call
+      when "timer-start"
+        start_timer
       when "timer-reset"
-        @started_at = Time.now
-        broadcast(JSON.generate(type: "timer", startedAt: timer_start))
+        # 未開始に戻す。表紙以外にいれば聴衆画面がすぐに開始を送り直す
+        @started_at = nil
+        broadcast(JSON.generate(type: "timer", startedAt: nil))
       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.4"
+  VERSION = "0.1.5"
 end

data/public/app.js

@@ -39,17 +39,35 @@ async function loadDeck() {
   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);
+  return startedAt ? (slideSpent.get(current) ?? 0) + (now - enteredAt) : 0;
+}
+
+// 待っている表紙には持ち時間がない
+function slideTimed() {
+  return !(current === 0 && MpSlides.coverFirst(deck));
+}
+
+function slideBudget() {
+  return MpSlides.slideBudget(deck, MpSlides.timedSlideCount(deck));
+}
+
+// 表紙の次へ進んだら(表紙がなければ最初から)タイマーを始める
+function maybeStartTimer() {
+  if (deck?.duration && !startedAt && slideTimed() && events.readyState === WebSocket.OPEN) {
+    events.send(JSON.stringify({ type: "timer-start" }));
+  }
 }
 
 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 budget = slideBudget();
   const slide = MpSlides.slideRemaining(budget, spentOnCurrent());
   timer.querySelector(".timer-pages").textContent = `${current + 1} / ${slides.length}`;
+  timer.querySelector(".timer-slide").hidden = !slideTimed();
   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);
@@ -61,6 +79,7 @@ function resetTimer(at) {
   slideSpent.clear();
   enteredAt = Date.now();
   renderTimer();
+  maybeStartTimer();
   sendState();
 }
 
@@ -100,7 +119,7 @@ function show(index, { fragments }) {
   slides[current]?.classList.remove("active");
   slides[current]?.querySelectorAll("iframe").forEach((frame) => frame.blur());
   if (index !== current) {
-    slideSpent.set(current, spentOnCurrent());
+    if (startedAt) slideSpent.set(current, spentOnCurrent());
     enteredAt = Date.now();
   }
   current = index;
@@ -111,6 +130,7 @@ function show(index, { fragments }) {
   mountEmbeds(slide);
   renderNotes();
   renderTimer();
+  maybeStartTimer();
   sendState();
 }
 
@@ -121,7 +141,9 @@ 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(), // 発表者ビューはここから経過を数える
+    // 発表者ビューはここから経過を数える
+    slideSpent: spentOnCurrent(), sentAt: Date.now(), running: !!startedAt,
+    slideTimed: slideTimed(), slideBudget: deck?.duration ? slideBudget() : null,
   }));
 }
 
@@ -336,7 +358,10 @@ const commands = {
 };
 
 const events = new WebSocket(`${wsBase}events?role=audience`);
-events.onopen = sendState;
+events.onopen = () => {
+  maybeStartTimer();
+  sendState();
+};
 events.onmessage = (event) => {
   const message = JSON.parse(event.data);
   if (message.type === "reload") loadDeck();

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 = null; // 未開始。サーバから開始時刻が届く
 let noteSize = 26;
 let mirrorRunning = false;
 let mirrorSlide = null;
@@ -111,17 +111,19 @@ function onFrame(data) {
 }
 
 function tick() {
-  $("elapsed").textContent = MpSlides.formatTime(Math.floor((Date.now() - startedAt) / 1000));
+  $("elapsed").textContent = MpSlides.formatTime(MpSlides.elapsed(startedAt));
   $("clock").textContent = new Date().toLocaleTimeString("ja-JP", { hour: "2-digit", minute: "2-digit" });
-  $("remaining").hidden = $("slide-remaining").hidden = !deck?.duration;
+  $("remaining").hidden = !deck?.duration;
+  $("slide-remaining").hidden = !deck?.duration || state.slideTimed === false;
   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())));
+  const budget = state.slideBudget ?? MpSlides.slideBudget(deck, MpSlides.timedSlideCount(deck));
+  const running = state.running ? Date.now() - (state.sentAt ?? Date.now()) : 0;
+  const slide = MpSlides.slideRemaining(budget, (state.slideSpent ?? 0) + running);
   $("slide-remaining").textContent = `このページ ${slide < 0 ? `超過 ${MpSlides.formatTime(-slide)}` : MpSlides.formatTime(slide)}`;
   $("slide-remaining").dataset.state = MpSlides.slideState(budget, slide);
 }

data/public/slides.js

@@ -22,7 +22,22 @@ const MpSlides = {
 
   // 残り時間。超過すると負になる
   remaining(deck, startedAt, now = Date.now()) {
-    return deck.duration - Math.floor((now - startedAt) / 1000);
+    return deck.duration - MpSlides.elapsed(startedAt, now);
+  },
+
+  // 経過秒。未開始(startedAt が null)なら 0
+  elapsed(startedAt, now = Date.now()) {
+    return startedAt ? Math.floor((now - startedAt) / 1000) : 0;
+  },
+
+  // 最初のスライドが表紙なら、表紙の次へ進むまでタイマーを始めない
+  coverFirst(deck) {
+    return deck.slides[0]?.kind === "cover";
+  },
+
+  // 持ち時間を割り当てるページ数(待っている表紙は除く)
+  timedSlideCount(deck) {
+    return Math.max(deck.slides.length - (MpSlides.coverFirst(deck) ? 1 : 0), 1);
   },
 
   formatTime(seconds) {

data/public/style.css

@@ -96,7 +96,7 @@ section.slide > .page-number { bottom: 20px; left: auto; right: 32px; }
   color: #fff;
   font: 600 18px/1.3 Menlo, monospace;
 }
-#timer[hidden] { display: none; }
+#timer[hidden], #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; }

metadata

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