@takagaki/cortex-decisions-viewer 0.12.173 → 0.12.175

package/dist/render.js

@@ -4923,6 +4923,10 @@ a:hover { text-decoration: underline; }
 .mface { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; overflow: hidden; background: var(--border, #e5e7eb); color: var(--muted, #6b7280); font-size: 13px; font-weight: 700; line-height: 1; text-decoration: none; box-sizing: border-box; }
 a.mface:hover { box-shadow: 0 0 0 2px var(--accent, #4f46e5); }
 .mface svg { width: 18px; height: 18px; display: block; }
+.mface-loading { animation: mface-pulse 1.4s ease-in-out infinite; }
+.mface-loading img { opacity: 0; }
+@keyframes mface-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
+@media (prefers-reduced-motion: reduce) { .mface-loading { animation: none; } }
 .mface img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
 .detail-namerow .mface { width: 36px; height: 36px; font-size: 16px; }
 .detail-namerow .mface svg { width: 22px; height: 22px; }
@@ -7741,42 +7745,131 @@ ${story_1.splitByNameLinks.toString()}
   var mfAsked = {};
   var mfWaiting = [];
   var mfTimer = null;
+  /** 頼んでいて答え待ちの人 -> その人の丸（待っている間はスケルトン） */
+  var mfInflight = {};
+  var MF_ASK_TIMEOUT_MS = 8000;
+  var MF_IMG_TIMEOUT_MS = 8000;
+  /** 待ちの形から最後の形へ（loading を外す）。state: photo＝写真が読めた／initial＝頭文字 */
+  function mfSettle(box, state) {
+    if (box.getAttribute("data-state") !== "loading") return;
+    box.classList.remove("mface-loading");
+    box.setAttribute("data-state", state);
+    if (state === "initial") {
+      var img = box.querySelector("img");
+      if (img && img.parentNode) img.parentNode.removeChild(img);
+      box.appendChild(el("span", { class: "mface-initial", text: box.getAttribute("data-initial") || "" }));
+    }
+  }
+  /** 取れた写真を読み込む。読めるまではスケルトンのまま・失敗か時間切れで頭文字（止まり続けない） */
   function mfAttach(box, path) {
-    if (!box.isConnected && !box.parentNode) return;
+    if (box.getAttribute("data-state") !== "loading") return;
     var img = document.createElement("img");
+    var timer = setTimeout(function () { mfSettle(box, "initial"); }, MF_IMG_TIMEOUT_MS);
     img.setAttribute("alt", "");
     img.setAttribute("referrerpolicy", "no-referrer");
-    img.setAttribute("loading", "lazy");
-    img.addEventListener("error", function () { if (img.parentNode) img.parentNode.removeChild(img); });
+    img.addEventListener("load", function () { clearTimeout(timer); mfSettle(box, "photo"); });
+    img.addEventListener("error", function () { clearTimeout(timer); mfSettle(box, "initial"); });
     img.setAttribute("src", PORTAL_ORIGIN + path);
     box.appendChild(img);
   }
+  /** もう答えが分かっている人の丸を決める（写真のパスがあれば読みに行き、無ければ頭文字） */
+  function mfResolve(box, id) {
+    if (mfFaces[id]) mfAttach(box, mfFaces[id]);
+    else mfSettle(box, "initial");
+  }
   function mfFlush() {
     mfTimer = null;
     var waiting = mfWaiting;
     mfWaiting = [];
-    if (!waiting.length || !SITE.intake || !actorTicket()) return;
+    if (!waiting.length) return;
+    if (!SITE.intake || !actorTicket()) { waiting.forEach(function (w) { mfSettle(w.box, "initial"); }); return; }
     var ids = [];
     waiting.forEach(function (w) {
-      if (Object.prototype.hasOwnProperty.call(mfFaces, w.id)) { if (mfFaces[w.id]) mfAttach(w.box, mfFaces[w.id]); return; }
-      if (!Object.prototype.hasOwnProperty.call(mfAsked, w.id) && ids.indexOf(w.id) < 0 && ids.length < 200) ids.push(w.id);
+      if (Object.prototype.hasOwnProperty.call(mfFaces, w.id)) { mfResolve(w.box, w.id); return; }
+      var asked = Object.prototype.hasOwnProperty.call(mfAsked, w.id);
+      if (!asked && ids.indexOf(w.id) < 0) {
+        // 1 回に頼むのは 200 人まで。あふれた人は待たせず頭文字（スケルトンのまま止まらない）
+        if (ids.length >= 200) { mfSettle(w.box, "initial"); return; }
+        ids.push(w.id);
+      }
+      (mfInflight[w.id] = mfInflight[w.id] || []).push(w.box);
     });
     if (!ids.length) return;
+    mfRequest(ids, false);
+  }
+  /**
+   * member-faces を 1 回頼む（200 人まで）。頼んだ人は mfAsked に入れ、答え（または諦め）で待っている丸を最後の形へ。
+   * preload＝起動時の先読み。画像もブラウザのキャッシュに載せておく
+   */
+  function mfRequest(ids, preload) {
     ids.forEach(function (id) { mfAsked[id] = 1; });
+    var finished = false;
+    // 答えが出た（または諦めた）人の待ち行列を空にして、全部の丸を最後の形へ
+    var drain = function () {
+      ids.forEach(function (id) {
+        var boxes = mfInflight[id] || [];
+        delete mfInflight[id];
+        boxes.forEach(function (b) { mfResolve(b, id); });
+      });
+    };
     var give = function (j) {
       (j.people || []).forEach(function (one) {
-        if (one && typeof one.userId === "string" && typeof one.avatarUrl === "string" && MF_AVATAR.test(one.avatarUrl)) mfFaces[one.userId] = one.avatarUrl;
+        if (one && typeof one.userId === "string" && typeof one.avatarUrl === "string" && MF_AVATAR.test(one.avatarUrl)) {
+          mfFaces[one.userId] = one.avatarUrl;
+          if (preload) mfWarm(one.avatarUrl);
+        }
       });
       ids.forEach(function (id) { if (!Object.prototype.hasOwnProperty.call(mfFaces, id)) mfFaces[id] = null; });
-      waiting.forEach(function (w) { if (mfFaces[w.id]) mfAttach(w.box, mfFaces[w.id]); });
+      if (!finished) { finished = true; clearTimeout(giveUp); drain(); }
+    };
+    // 失敗・断り・時間切れは覚えない（あとで画面を開き直せば取り直す）。待っていた丸は頭文字に落とす
+    var forget = function () {
+      if (finished) return;
+      finished = true;
+      clearTimeout(giveUp);
+      ids.forEach(function (id) { delete mfAsked[id]; });
+      drain();
     };
-    var forget = function () { ids.forEach(function (id) { delete mfAsked[id]; }); };
+    var giveUp = setTimeout(forget, MF_ASK_TIMEOUT_MS);
     intakeJson(callIntake("member-faces", { op: "member-faces", userIds: ids })).then(function (res) {
       var j = (res && res.j) || {};
       if (res && res.ok && j.ok === true && Array.isArray(j.people)) give(j);
       else forget();
     }, forget);
   }
+  /** 先読みした画像のパス -> 読み込み済み（読み込み済みなら関係者タブでスケルトンを経ずに写真から出す） */
+  var mfReady = {};
+  function mfWarm(path) {
+    if (Object.prototype.hasOwnProperty.call(mfReady, path)) return;
+    mfReady[path] = false;
+    var img = new Image();
+    img.setAttribute("referrerpolicy", "no-referrer");
+    img.addEventListener("load", function () { mfReady[path] = true; });
+    img.addEventListener("error", function () { delete mfReady[path]; });
+    img.src = PORTAL_ORIGIN + path;
+  }
+  /**
+   * 起動時に 1 回だけ、全部の関係者の portal.id を 200 人ずつ頼んで写真を先読みする（loadLiveFleet と同じ作り）。
+   * 🔴 route() の後に置く（popstate は route だけ通るので、戻る／進むで何度も走らない）。券・intake が無ければ何もしない。
+   * 先読みの飛行中に関係者タブを開いた丸は mfInflight に並び、先読みの答えで同じ流れ（スケルトン → 写真）に乗る。
+   * 失敗は覚えない（mfRequest の forget）。タブを開いたときにもう一度頼める
+   */
+  function mfPreload() {
+    if (!SITE.intake || !actorTicket()) return;
+    var ids = [];
+    (SITE.sections || []).forEach(function (sec) {
+      (sec.records || []).forEach(function (r) {
+        if (!isMemberRec(r)) return;
+        var id = mfPortalId(r);
+        if (id && ids.indexOf(id) < 0 && !Object.prototype.hasOwnProperty.call(mfAsked, id) && !Object.prototype.hasOwnProperty.call(mfFaces, id)) ids.push(id);
+      });
+    });
+    for (var i = 0; i < ids.length; i += 200) {
+      var chunk = ids.slice(i, i + 200);
+      chunk.forEach(function (id) { mfAsked[id] = 1; });
+      mfRequest(chunk, true);
+    }
+  }
   function mfWant(id, box) {
     mfWaiting.push({ id: id, box: box });
     if (!mfTimer) mfTimer = setTimeout(mfFlush, 0);
@@ -7805,17 +7898,46 @@ ${story_1.splitByNameLinks.toString()}
       return plain;
     }
     var name = Array.from(humanTitle(rec.title))[0] || "";
+    // 🔴 画像を取りに行っている間は頭文字を出さず、丸の形のスケルトン（確定した表示がすり替わって見えないように）。
+    //    頭文字は「取れなかった・読めなかった・時間切れ」の最後の形にだけ出す。読み上げには「読み込み中」を足さない
     var a = el("a", {
-      class: "mface mface-portal",
+      class: "mface mface-portal mface-loading",
       "data-face": "portal",
+      "data-state": "loading",
+      "data-initial": name,
       href: PORTAL_ORIGIN + "/people/" + encodeURIComponent(id),
       target: "_blank",
       rel: "noopener",
       title: "ポータルでこの人のページを開く",
     });
-    a.appendChild(el("span", { class: "mface-initial", text: name }));
     // 行ごと（カード・詳細）の click に伝えない（カードを押した扱いで詳細へ移らない）
     a.addEventListener("click", function (ev) { ev.stopPropagation(); });
+    // 先読みで答えが分かっている人は、スケルトンを経ずに最後の形から出す（写真は読み込み済みのときだけ）
+    if (Object.prototype.hasOwnProperty.call(mfFaces, id)) {
+      var known = mfFaces[id];
+      if (!known) {
+        a.classList.remove("mface-loading");
+        a.setAttribute("data-state", "initial");
+        a.appendChild(el("span", { class: "mface-initial", text: name }));
+        return a;
+      }
+      if (mfReady[known] === true) {
+        var ready = document.createElement("img");
+        ready.setAttribute("alt", "");
+        ready.setAttribute("referrerpolicy", "no-referrer");
+        ready.addEventListener("error", function () {
+          // 先読みで読めていたはずの画像が壊れたとき（キャッシュ切れ・ポータル不調）も頭文字に落とす
+          if (ready.parentNode) ready.parentNode.removeChild(ready);
+          a.setAttribute("data-state", "initial");
+          a.appendChild(el("span", { class: "mface-initial", text: name }));
+        });
+        ready.setAttribute("src", PORTAL_ORIGIN + known);
+        a.classList.remove("mface-loading");
+        a.setAttribute("data-state", "photo");
+        a.appendChild(ready);
+        return a;
+      }
+    }
     mfWant(id, a);
     return a;
   }
@@ -21723,6 +21845,8 @@ ${story_1.splitByNameLinks.toString()}
   // ビルド時には存在しないので、**焼いた href は起動の時点で既に古いことがある**。
   // 🔴 route() の後に置く——ヘッダー以外の導線は route() が描くまで DOM に無い
   syncAiLinks();
+  /** 関係者の写真の先読み（mfPreload の項）。loadLiveFleet と同じく起動時に 1 回だけ */
+  mfPreload();
   /**
    * 接続状況の先読み（#264）。**開いたタブに関係なく、起動時に1回だけ取りに行く。**
    *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@takagaki/cortex-decisions-viewer",
-  "version": "0.12.173",
+  "version": "0.12.175",
   "description": "Cortexの意思決定記録（Decisions/*.md）を静的サイトにビルドして閲覧する。各レコードに「Edit on GitHub」リンクを付与する。",
   "license": "UNLICENSED",
   "private": false,