Function StatsPage

frontend/src/pages/Stats.jsx:99–429

()

};

const StatsPage = () => {
  const channelStats = useChannelsStore((s) => s.stats);
  const setChannelStats = useChannelsStore((s) => s.setChannelStats);
  const vodConnections = useChannelsStore((s) => s.activeVodConnections);
  const setVodStats = useChannelsStore((s) => s.setVodStats);
  const streamProfiles = useStreamProfilesStore((s) => s.profiles);

  const [clients, setClients] = useState([]);
  const [channelHistory, setChannelHistory] = useState({});
  const [isPollingActive, setIsPollingActive] = useState(false);
  const [currentPrograms, setCurrentPrograms] = useState({});
  const [channels, setChannels] = useState({}); // id -> channel
  const [channelsByUUID, setChannelsByUUID] = useState({}); // uuid -> id

  // Compute needed channel UUIDs from the current active channels.
  // Stream previews use a non-UUID hash as channel_id — filter those out.
  const UUID_REGEX =
    /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
  const neededUUIDs = useMemo(
    () => Object.keys(channelHistory || {}).filter((id) => UUID_REGEX.test(id)),
    [channelHistory]
  );

  // Keep a ref so the programs poller always has the latest valid UUIDs
  const neededUUIDsRef = useRef(neededUUIDs);
  useEffect(() => {
    neededUUIDsRef.current = neededUUIDs;
  }, [neededUUIDs]);

  // Fetch any missing channels by UUID when the needed set changes (for card name/logo)
  useEffect(() => {
    if (!neededUUIDs || neededUUIDs.length === 0) return;
    const missing = neededUUIDs.filter((u) => channelsByUUID[u] === undefined);
    if (missing.length === 0) return;

    let cancelled = false;
    (async () => {
      try {
        const res = await API.getChannelsByUUIDs(missing);
        if (cancelled) return;
        if (Array.isArray(res)) {
          setChannels((prev) => {
            const next = { ...prev };
            for (const ch of res) next[ch.id] = ch;
            return next;
          });
          setChannelsByUUID((prev) => {
            const next = { ...prev };
            for (const ch of res) next[ch.uuid] = ch.id;
            return next;
          });
        }
      } catch (e) {
        console.error('Failed to fetch channels by UUIDs', e);
      }
    })();
    return () => {
      cancelled = true;