@sensiblestats/widget-react 0.45.0 → 0.47.0

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @sensiblestats/widget-react
 
+## 0.47.0
+
+### Minor Changes
+
+- Shows a half-time label instead of a frozen 45', ages the live minute against when the reading was
+  actually taken so it no longer sits up to two minutes behind, and stops asserting a clock for a
+  single match whose sync window has stalled.
+
+### Patch Changes
+
+- Updated dependencies
+  - @sensiblestats/widget-sdk@0.35.0
+
+## 0.46.0
+
+### Minor Changes
+
+- Fixes the Today tab collapsing to blank bars: children of the monitor scroller no longer shrink,
+  so the list scrolls instead of compressing 27 competition groups to fit. Also disambiguates
+  same-named competitions with their country, which the schedule response now carries.
+
+### Patch Changes
+
+- Updated dependencies
+  - @sensiblestats/widget-sdk@0.34.0
+
 ## 0.45.0
 
 ### Minor Changes

package/dist/index.cjs

@@ -128,6 +128,7 @@ var STRINGS = {
     accordionSuspended: "Suspended",
     tabToday: "Today",
     sectionLive: "Live",
+    halfTime: "HT",
     staleStates: "Live scores can't be updated \u2014 showing the last known state."
   },
   tr: {
@@ -205,6 +206,7 @@ var STRINGS = {
     accordionSuspended: "Ask\u0131da",
     tabToday: "Bug\xFCn",
     sectionLive: "Canl\u0131",
+    halfTime: "\u0130Y",
     staleStates: "Canl\u0131 skorlar g\xFCncellenemiyor \u2014 son bilinen durum g\xF6steriliyor."
   }
 };
@@ -283,6 +285,7 @@ function normalizeUi(cfg) {
     tabOdds: strings.tabOdds,
     tabToday: strings.tabToday,
     sectionLive: strings.sectionLive,
+    halfTime: strings.halfTime,
     staleStates: strings.staleStates,
     pinLabel: strings.pinLabel,
     unpinLabel: strings.unpinLabel,
@@ -1542,8 +1545,40 @@ function dueMatchIds(groups, states, nowMs) {
   return [...due];
 }
 
+// src/liveClock.ts
+var STALE_READING_MS = 5 * 6e4;
+function parseMinute(label) {
+  if (!label) return null;
+  const plus = /^(\d+)\+(\d+)'$/.exec(label);
+  if (plus) return Number(plus[1]) + Number(plus[2]);
+  const plain = /^(\d+)'$/.exec(label);
+  return plain ? Number(plain[1]) : null;
+}
+function readingAgeMs(state, nowMs) {
+  if (!state?.stateAsOfUtc) return null;
+  const t = Date.parse(state.stateAsOfUtc);
+  return Number.isNaN(t) ? null : Math.max(0, nowMs - t);
+}
+function isReadingStale(state, nowMs) {
+  if (state?.isHalfTime) return false;
+  const age = readingAgeMs(state, nowMs);
+  return age !== null && age > STALE_READING_MS;
+}
+function displayMinute(state, nowMs) {
+  if (!state || state.phase !== "live") return null;
+  if (state.isHalfTime) return null;
+  if (isReadingStale(state, nowMs)) return null;
+  const base = parseMinute(state.minuteLabel);
+  if (base === null) return null;
+  const age = readingAgeMs(state, nowMs);
+  if (age === null) return state.minuteLabel ?? null;
+  const advanced = base + Math.floor(age / 6e4);
+  return `${advanced}'`;
+}
+
 // src/useMatchDiscovery.ts
 var POLL_MS = 6e4;
+var CLOCK_MS = 1e4;
 var ROLLOVER_CHECK_MS = 6e4;
 var STALE_AFTER_FAILURES = 2;
 function localDateOf(now) {
@@ -1556,6 +1591,7 @@ function useMatchDiscovery(opts) {
   const [groups, setGroups] = (0, import_react4.useState)([]);
   const [states, setStates] = (0, import_react4.useState)({});
   const [failures, setFailures] = (0, import_react4.useState)(0);
+  const [nowMs, setNowMs] = (0, import_react4.useState)(() => Date.now());
   const [expanded, setExpanded] = (0, import_react4.useState)({});
   const [touched, setTouched] = (0, import_react4.useState)({});
   const groupsRef = (0, import_react4.useRef)(groups);
@@ -1633,16 +1669,21 @@ function useMatchDiscovery(opts) {
     }, POLL_MS);
     return () => clearInterval(id);
   }, [opts.isOpen, tick, groups]);
+  (0, import_react4.useEffect)(() => {
+    if (!opts.isOpen) return;
+    const id = setInterval(() => setNowMs(Date.now()), CLOCK_MS);
+    return () => clearInterval(id);
+  }, [opts.isOpen]);
   const stale = failures >= STALE_AFTER_FAILURES;
   const liveCount = (0, import_react4.useMemo)(
-    () => stale ? 0 : Object.values(states).filter((s) => s.phase === "live").length,
-    [states, stale]
+    () => stale ? 0 : Object.values(states).filter((s) => s.phase === "live" && !isReadingStale(s, nowMs)).length,
+    [states, stale, nowMs]
   );
   const toggleGroup = (0, import_react4.useCallback)((competitionId) => {
     setTouched((prev) => ({ ...prev, [competitionId]: true }));
     setExpanded((prev) => ({ ...prev, [competitionId]: !prev[competitionId] }));
   }, []);
-  return { groups, states, liveCount, stale, expanded, toggleGroup, _tick: tick };
+  return { groups, states, nowMs, liveCount, stale, expanded, toggleGroup, _tick: tick };
 }
 
 // src/eventLogContext.ts
@@ -3000,7 +3041,7 @@ function computeDisplayMinute(minute, clockRunning, receivedAtMs) {
   return minute + Math.min(Math.max(0, elapsedMinutes), MAX_LIVE_TICK_MINUTES);
 }
 function useLiveClock(minute, clockRunning, receivedAtMs) {
-  const [displayMinute, setDisplayMinute] = (0, import_react19.useState)(
+  const [displayMinute2, setDisplayMinute] = (0, import_react19.useState)(
     () => computeDisplayMinute(minute, clockRunning, receivedAtMs)
   );
   (0, import_react19.useEffect)(() => {
@@ -3011,7 +3052,7 @@ function useLiveClock(minute, clockRunning, receivedAtMs) {
     }, TICK_MS);
     return () => window.clearInterval(id);
   }, [minute, clockRunning, receivedAtMs]);
-  return displayMinute;
+  return displayMinute2;
 }
 
 // src/components/dashboard/LiveScoreCard.tsx
@@ -3043,7 +3084,7 @@ function LiveScoreCard({
   if (!seedRef.current || seedRef.current.key !== seedKey) {
     seedRef.current = { key: seedKey, receivedAtMs: Date.now() };
   }
-  const displayMinute = useLiveClock(data.minute, data.clockRunning, seedRef.current.receivedAtMs);
+  const displayMinute2 = useLiveClock(data.minute, data.clockRunning, seedRef.current.receivedAtMs);
   const minuteSuffix = data.minuteLabel.replace(/^\d+/, "");
   const scorers = scorersLine(goalEvents);
   return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "ss-w-fandash-card ss-w-fandash-live-score", children: [
@@ -3053,7 +3094,7 @@ function LiveScoreCard({
         /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "ss-w-fandash-live-dot", "aria-hidden": "true" }),
         data.statusLabel
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "ss-w-fandash-live-minute", children: `${displayMinute}${minuteSuffix}` }),
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "ss-w-fandash-live-minute", children: `${displayMinute2}${minuteSuffix}` }),
       data.competition ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "ss-w-fandash-live-competition", children: data.competition }) : null
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "ss-w-fandash-live-main", children: [
@@ -3735,12 +3776,14 @@ function Side({ name, crest }) {
     /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "ss-w-drow-nm", children: name })
   ] });
 }
-function FixtureRow({ match, state, stale, ui, monitor }) {
-  const isLive = state?.phase === "live" && !stale;
+function FixtureRow({ match, state, stale, nowMs, ui, monitor }) {
+  const readingStale = isReadingStale(state, nowMs);
+  const isLive = state?.phase === "live" && !stale && !readingStale;
   const hasScore = (state?.phase === "live" || state?.phase === "fullTime") && typeof state.homeScore === "number" && typeof state.awayScore === "number";
-  const when = stale && state?.phase === "live" ? "\u2014" : isLive ? state?.minuteLabel ?? "\u2014" : kickoffLabel(match.kickoffUnix);
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: isLive ? "ss-w-drow ss-w-drow--live" : "ss-w-drow", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: isLive ? "ss-w-drow-when ss-w-drow-when--live" : "ss-w-drow-when", children: when }),
+  const ticked = displayMinute(state, nowMs);
+  const when = state?.isHalfTime && !stale ? ui.halfTime : isLive ? ticked ?? "\u2014" : state?.phase === "live" ? "\u2014" : kickoffLabel(match.kickoffUnix);
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: isLive || state?.isHalfTime ? "ss-w-drow ss-w-drow--live" : "ss-w-drow", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: isLive || state?.isHalfTime ? "ss-w-drow-when ss-w-drow-when--live" : "ss-w-drow-when", children: when }),
     /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("span", { className: "ss-w-drow-fx", children: [
       /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Side, { name: match.homeTeamName, crest: match.homeTeamImagePath }),
       /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "ss-w-drow-dash", children: "\u2013" }),
@@ -3753,25 +3796,36 @@ function FixtureRow({ match, state, stale, ui, monitor }) {
 
 // src/components/CompetitionGroup.tsx
 var import_jsx_runtime50 = require("react/jsx-runtime");
-function CompetitionGroup({ group, open, onToggle, states, stale, ui, monitor }) {
+function CompetitionGroup({ group, open, onToggle, states, stale, nowMs, ui, monitor, disambiguate = false }) {
   const own = group.matches.filter((m) => states[m.matchId]?.phase !== "live" || stale);
   const hasLive = own.length !== group.matches.length;
   return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "ss-w-grp", children: [
     /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("button", { type: "button", className: "ss-w-grp-head", "aria-expanded": open, onClick: onToggle, children: [
       /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "ss-w-grp-chev", children: open ? "\u25BE" : "\u25B8" }),
       hasLive && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "ss-w-sec-dot", "aria-hidden": "true" }),
-      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "ss-w-grp-name", children: group.competitionName }),
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("span", { className: "ss-w-grp-name", children: [
+        group.competitionName,
+        disambiguate && group.competitionCountry ? /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("span", { className: "ss-w-grp-country", children: [
+          " (",
+          group.competitionCountry,
+          ")"
+        ] }) : null
+      ] }),
       /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "ss-w-grp-count", children: own.length })
     ] }),
-    open && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "ss-w-grp-body", children: own.map((m) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(FixtureRow, { match: m, state: states[m.matchId], stale, ui, monitor }, m.matchId)) })
+    open && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "ss-w-grp-body", children: own.map((m) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(FixtureRow, { match: m, state: states[m.matchId], stale, nowMs, ui, monitor }, m.matchId)) })
   ] });
 }
 
 // src/components/TodayPanel.tsx
 var import_jsx_runtime51 = require("react/jsx-runtime");
 function TodayPanel({ discovery, ui, monitor }) {
-  const { groups, states, stale, expanded, toggleGroup } = discovery;
+  const { groups, states, nowMs, stale, expanded, toggleGroup } = discovery;
   const liveRows = stale ? [] : groups.flatMap((group) => group.matches.filter((m) => states[m.matchId]?.phase === "live").map((match) => ({ match, rank: group.rank }))).sort((a, b) => a.rank - b.rank);
+  const nameCounts = groups.reduce((acc, g) => {
+    acc[g.competitionName] = (acc[g.competitionName] ?? 0) + 1;
+    return acc;
+  }, {});
   return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "ss-w-mon-list", children: [
     stale && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "ss-w-stale", children: ui.staleStates }),
     liveRows.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_jsx_runtime51.Fragment, { children: [
@@ -3785,6 +3839,7 @@ function TodayPanel({ discovery, ui, monitor }) {
           match,
           state: states[match.matchId],
           stale,
+          nowMs,
           ui,
           monitor
         },
@@ -3797,8 +3852,10 @@ function TodayPanel({ discovery, ui, monitor }) {
         group,
         open: expanded[group.competitionId] ?? group.expandedByDefault,
         onToggle: () => toggleGroup(group.competitionId),
+        disambiguate: (nameCounts[group.competitionName] ?? 0) > 1,
         states,
         stale,
+        nowMs,
         ui,
         monitor
       },
@@ -3983,6 +4040,11 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 /* .ss-w-mon-list (Matches/Odds tab scrollers) shares .ss-w-list's box/scroll rules by design --
    same visual rhythm as the chat message list -- but gets its own class so it isn't the same DOM
    landmark as the chat list when both exist in the panel at once (Task 16 fix round, M4). */
+/* Children of this scrolling column flex container must NOT shrink. The default flex-shrink:1
+   compresses every child to fit the panel instead of letting the container scroll, and
+   .ss-w-grp's own overflow:hidden then clips the compressed content away entirely \u2014 27
+   competition groups rendered as blank bars on a phone. Applies to the pinned cards too. */
+.ss-w-mon-list > * { flex: none; }
 .ss-w-list, .ss-w-mon-list { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 14px; display: flex; flex-direction: column; gap: 12px; scroll-padding-top: 14px; }
 /* Transient bottom spacer: reserves a viewport of room below a new turn so its
    top can be scrolled into view while the reply is still streaming in. Height is
@@ -4714,6 +4776,7 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 .ss-w-grp-head:focus-visible { outline: 2px solid var(--ss-w-accent); outline-offset: -2px; }
 .ss-w-grp-chev { color: var(--ss-w-faint); font-size: 10px; flex: none; }
 .ss-w-grp-name { font-size: 12px; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ss-w-grp-country { font-weight: 600; color: var(--ss-w-faint); }
 .ss-w-grp-count { margin-left: auto; flex: none; font-size: 10.5px; font-weight: 700; color: var(--ss-w-faint); background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 999px; padding: 1px 7px; font-variant-numeric: tabular-nums; }
 .ss-w-grp-body { display: flex; flex-direction: column; padding: 2px 11px 6px; }