@sensiblestats/widget-react 0.47.2 → 0.48.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @sensiblestats/widget-react
 
+## 0.48.1
+
+### Patch Changes
+
+- A live match no longer loses its minute and drop out of the live section just because its score has not changed recently. The per-match staleness check read a last-changed timestamp as if it were a last-polled one.
+
+## 0.48.0
+
+### Minor Changes
+
+- Today-tab fixture rows now read like a scoreboard: the score sits between the two teams instead of after them, a finished match shows FT (MS in Turkish) in place of its kickoff time, and a finished match no longer offers a pin unless it is already pinned.
+
 ## 0.47.2
 
 ### Patch Changes

package/dist/index.cjs

@@ -129,6 +129,7 @@ var STRINGS = {
     tabToday: "Today",
     sectionLive: "Live",
     halfTime: "HT",
+    fullTime: "FT",
     staleStates: "Live scores can't be updated \u2014 showing the last known state."
   },
   tr: {
@@ -207,6 +208,7 @@ var STRINGS = {
     tabToday: "Bug\xFCn",
     sectionLive: "Canl\u0131",
     halfTime: "\u0130Y",
+    fullTime: "MS",
     staleStates: "Canl\u0131 skorlar g\xFCncellenemiyor \u2014 son bilinen durum g\xF6steriliyor."
   }
 };
@@ -286,6 +288,7 @@ function normalizeUi(cfg) {
     tabToday: strings.tabToday,
     sectionLive: strings.sectionLive,
     halfTime: strings.halfTime,
+    fullTime: strings.fullTime,
     staleStates: strings.staleStates,
     pinLabel: strings.pinLabel,
     unpinLabel: strings.unpinLabel,
@@ -1545,43 +1548,8 @@ 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}'`;
-}
-function isTreatedLive(state, pollStale, nowMs) {
-  return state?.phase === "live" && !pollStale && !isReadingStale(state, nowMs);
-}
-
 // src/useMatchDiscovery.ts
 var POLL_MS = 6e4;
-var CLOCK_MS = 1e4;
 var ROLLOVER_CHECK_MS = 6e4;
 var STALE_AFTER_FAILURES = 2;
 function localDateOf(now) {
@@ -1594,7 +1562,6 @@ 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);
@@ -1672,21 +1639,16 @@ 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" && !isReadingStale(s, nowMs)).length,
-    [states, stale, nowMs]
+    () => stale ? 0 : Object.values(states).filter((s) => s.phase === "live").length,
+    [states, stale]
   );
   const toggleGroup = (0, import_react4.useCallback)((competitionId) => {
     setTouched((prev) => ({ ...prev, [competitionId]: true }));
     setExpanded((prev) => ({ ...prev, [competitionId]: !prev[competitionId] }));
   }, []);
-  return { groups, states, nowMs, liveCount, stale, expanded, toggleGroup, _tick: tick };
+  return { groups, states, liveCount, stale, expanded, toggleGroup, _tick: tick };
 }
 
 // src/eventLogContext.ts
@@ -3044,7 +3006,7 @@ function computeDisplayMinute(minute, clockRunning, receivedAtMs) {
   return minute + Math.min(Math.max(0, elapsedMinutes), MAX_LIVE_TICK_MINUTES);
 }
 function useLiveClock(minute, clockRunning, receivedAtMs) {
-  const [displayMinute2, setDisplayMinute] = (0, import_react19.useState)(
+  const [displayMinute, setDisplayMinute] = (0, import_react19.useState)(
     () => computeDisplayMinute(minute, clockRunning, receivedAtMs)
   );
   (0, import_react19.useEffect)(() => {
@@ -3055,7 +3017,7 @@ function useLiveClock(minute, clockRunning, receivedAtMs) {
     }, TICK_MS);
     return () => window.clearInterval(id);
   }, [minute, clockRunning, receivedAtMs]);
-  return displayMinute2;
+  return displayMinute;
 }
 
 // src/components/dashboard/LiveScoreCard.tsx
@@ -3087,7 +3049,7 @@ function LiveScoreCard({
   if (!seedRef.current || seedRef.current.key !== seedKey) {
     seedRef.current = { key: seedKey, receivedAtMs: Date.now() };
   }
-  const displayMinute2 = useLiveClock(data.minute, data.clockRunning, seedRef.current.receivedAtMs);
+  const displayMinute = 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: [
@@ -3097,7 +3059,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: `${displayMinute2}${minuteSuffix}` }),
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "ss-w-fandash-live-minute", children: `${displayMinute}${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: [
@@ -3779,28 +3741,34 @@ function Side({ name, crest }) {
     /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "ss-w-drow-nm", children: name })
   ] });
 }
-function FixtureRow({ match, state, stale, nowMs, ui, monitor }) {
-  const readingStale = isReadingStale(state, nowMs);
-  const isLive = state?.phase === "live" && !stale && !readingStale;
+function FixtureRow({ match, state, stale, ui, monitor }) {
+  const isLive = state?.phase === "live" && !stale;
   const hasScore = (state?.phase === "live" || state?.phase === "fullTime") && typeof state.homeScore === "number" && typeof state.awayScore === "number";
-  const ticked = displayMinute(state, nowMs);
-  const when = state?.isHalfTime && !stale ? ui.halfTime : isLive ? ticked ?? "\u2014" : state?.phase === "live" ? "\u2014" : kickoffLabel(match.kickoffUnix);
+  const ticked = state?.phase === "live" ? state.minuteLabel ?? null : null;
+  const isFinished = state?.phase === "fullTime";
+  const when = state?.isHalfTime && !stale ? ui.halfTime : isLive ? ticked ?? "\u2014" : state?.phase === "live" ? "\u2014" : isFinished ? ui.fullTime : kickoffLabel(match.kickoffUnix);
+  const pin = { kind: "match", matchId: match.matchId };
+  const showPin = !isFinished || monitor.isPinned(pinKey(pin));
   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" }),
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: hasScore ? "ss-w-drow-sc" : "ss-w-drow-sc ss-w-drow-sc--idle", children: hasScore ? `${state.homeScore}\u2013${state.awayScore}` : "\u2013" }),
       /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Side, { name: match.awayTeamName, crest: match.awayTeamImagePath })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: hasScore ? "ss-w-drow-sc" : "ss-w-drow-sc ss-w-drow-sc--idle", children: hasScore ? `${state.homeScore}\u2013${state.awayScore}` : "\u2013" }),
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(PinToggle, { ui, monitor, pin: { kind: "match", matchId: match.matchId } })
+    showPin ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(PinToggle, { ui, monitor, pin }) : null
   ] });
 }
 
+// src/liveClock.ts
+function isTreatedLive(state, pollStale) {
+  return state?.phase === "live" && !pollStale;
+}
+
 // src/components/CompetitionGroup.tsx
 var import_jsx_runtime50 = require("react/jsx-runtime");
-function CompetitionGroup({ group, open, onToggle, states, stale, nowMs, ui, monitor, disambiguate = false }) {
-  const own = group.matches.filter((m) => !isTreatedLive(states[m.matchId], stale, nowMs));
+function CompetitionGroup({ group, open, onToggle, states, stale, ui, monitor, disambiguate = false }) {
+  const own = group.matches.filter((m) => !isTreatedLive(states[m.matchId], stale));
   const hasLive = own.length !== group.matches.length;
   if (own.length === 0) {
     return null;
@@ -3819,15 +3787,15 @@ function CompetitionGroup({ group, open, onToggle, states, stale, nowMs, ui, mon
       ] }),
       /* @__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, nowMs, 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, ui, monitor }, m.matchId)) })
   ] });
 }
 
 // src/components/TodayPanel.tsx
 var import_jsx_runtime51 = require("react/jsx-runtime");
 function TodayPanel({ discovery, ui, monitor }) {
-  const { groups, states, nowMs, stale, expanded, toggleGroup } = discovery;
-  const liveRows = stale ? [] : groups.flatMap((group) => group.matches.filter((m) => isTreatedLive(states[m.matchId], stale, nowMs)).map((match) => ({ match, rank: group.rank }))).sort((a, b) => a.rank - b.rank);
+  const { groups, states, stale, expanded, toggleGroup } = discovery;
+  const liveRows = stale ? [] : groups.flatMap((group) => group.matches.filter((m) => isTreatedLive(states[m.matchId], stale)).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;
@@ -3845,7 +3813,6 @@ function TodayPanel({ discovery, ui, monitor }) {
           match,
           state: states[match.matchId],
           stale,
-          nowMs,
           ui,
           monitor
         },
@@ -3861,7 +3828,6 @@ function TodayPanel({ discovery, ui, monitor }) {
         disambiguate: (nameCounts[group.competitionName] ?? 0) > 1,
         states,
         stale,
-        nowMs,
         ui,
         monitor
       },
@@ -4786,7 +4752,7 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 .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; }
 
-.ss-w-drow { display: grid; grid-template-columns: 42px minmax(0,1fr) auto 22px; align-items: center; gap: 9px; padding: 7px 0; border-bottom: 1px solid var(--ss-w-line); }
+.ss-w-drow { display: grid; grid-template-columns: 42px minmax(0,1fr) 22px; align-items: center; gap: 9px; padding: 7px 0; border-bottom: 1px solid var(--ss-w-line); }
 .ss-w-drow:last-child { border-bottom: none; }
 .ss-w-drow-when { font-size: 11px; font-weight: 700; color: var(--ss-w-faint); font-variant-numeric: tabular-nums; }
 .ss-w-drow-when--live { color: var(--ss-w-neg); }
@@ -4795,8 +4761,11 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 .ss-w-drow-fx { display: flex; align-items: center; gap: 6px; min-width: 0; }
 .ss-w-drow-side { display: flex; align-items: center; gap: 5px; min-width: 0; flex: 1 1 0; }
 .ss-w-drow-nm { font-size: 12.5px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.ss-w-drow-dash { flex: none; color: var(--ss-w-faint); font-size: 11px; }
-.ss-w-drow-sc { font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ss-w-ink); }
+/* Centre slot of .ss-w-drow-fx, between the two sides: flex:none so a widening score never
+   steals width the team names need to avoid ellipsis. min-width holds the slot at the width of a
+   one-digit scoreline so an unscored row's bare dash does not pull the column out of line -- the
+   scores read as a column down the list, not a jitter. */
+.ss-w-drow-sc { flex: none; min-width: 26px; text-align: center; font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ss-w-ink); }
 .ss-w-drow-sc--idle { color: var(--ss-w-faint); font-weight: 600; }
 .ss-w-drow--live { background: color-mix(in srgb, var(--ss-w-neg) 5%, transparent); border-radius: 8px; padding: 7px 6px; margin: 0 -6px; border-bottom: none; }
 .ss-w-drow-crest { width: 16px; height: 16px; flex: none; border-radius: 50%; object-fit: contain; background: var(--ss-w-bubble); }