// Shared utilities and small visual components
const { useState, useEffect, useRef, useMemo, useCallback } = React;
// --- format helpers ---
function timeAgo(ts, now) {
const diff = now - ts;
const m = Math.floor(diff / 60000);
const h = Math.floor(diff / 3600000);
const d = Math.floor(diff / 86400000);
if (m < 1) return 'just now';
if (m < 60) return m + 'm ago';
if (h < 24) return h + 'h ago';
if (d < 7) return d + 'd ago';
if (d < 60) return Math.floor(d/7) + 'w ago';
return Math.floor(d/30) + 'mo ago';
}
function pad2(n) { return n < 10 ? '0' + n : '' + n; }
// "42:11" → 2531 ; "1:02:33" → 3753
function parseDur(s) {
const parts = String(s || '0:00').split(':').map(n => parseInt(n, 10) || 0);
let sec = 0; for (const p of parts) sec = sec * 60 + p;
return sec;
}
// 2531 → "42:11"
function formatDur(sec) {
sec = Math.max(0, Math.floor(sec));
const h = Math.floor(sec / 3600);
const m = Math.floor((sec % 3600) / 60);
const s = sec % 60;
if (h > 0) return h + ':' + pad2(m) + ':' + pad2(s);
return pad2(m) + ':' + pad2(s);
}
// Local-date key for the attention-budget watch log, e.g. "2026-06-11"
function dayKey(d = new Date()) {
return d.getFullYear() + '-' + pad2(d.getMonth() + 1) + '-' + pad2(d.getDate());
}
// Minimal CSV parser (handles quoted fields with commas/escaped quotes).
// Returns an array of rows, each an array of cell strings.
function parseCsv(text) {
const rows = [];
let row = [], cell = '', inQ = false;
for (let i = 0; i < text.length; i++) {
const ch = text[i];
if (inQ) {
if (ch === '"') {
if (text[i + 1] === '"') { cell += '"'; i++; }
else inQ = false;
} else cell += ch;
} else if (ch === '"') inQ = true;
else if (ch === ',') { row.push(cell); cell = ''; }
else if (ch === '\n' || ch === '\r') {
if (ch === '\r' && text[i + 1] === '\n') i++;
row.push(cell); cell = '';
if (row.length > 1 || row[0] !== '') rows.push(row);
row = [];
} else cell += ch;
}
row.push(cell);
if (row.length > 1 || row[0] !== '') rows.push(row);
return rows;
}
// Parse a Google Takeout "subscriptions.csv" into [{ id, url, title }].
// Takeout columns: Channel Id, Channel Url, Channel Title (header row first).
function parseTakeoutSubscriptions(text) {
const rows = parseCsv(String(text || ''));
if (!rows.length) return [];
const head = rows[0].map(h => h.trim().toLowerCase());
let idIdx = head.findIndex(h => h.includes('channel id'));
let urlIdx = head.findIndex(h => h.includes('channel url'));
let titleIdx = head.findIndex(h => h.includes('channel title'));
let start = 1;
if (idIdx === -1) { idIdx = 0; urlIdx = 1; titleIdx = 2; start = /^UC[\w-]{20,}/.test(rows[0][0] || '') ? 0 : 1; }
const out = [];
for (let i = start; i < rows.length; i++) {
const r = rows[i];
const id = (r[idIdx] || '').trim();
if (!/^UC[\w-]{20,}$/.test(id)) continue;
out.push({
id,
url: (r[urlIdx] || '').trim() || `https://www.youtube.com/channel/${id}`,
title: (r[titleIdx] || '').trim() || id,
});
}
return out;
}
window.SoloUtils = { timeAgo, pad2, parseDur, formatDur, dayKey, parseCsv, parseTakeoutSubscriptions };
// --- thumbnail ---
// Real YouTube videos carry `thumbUrl` — render the real image.
// Seed channels with no thumbUrl fall back to the procedural SVG below.
function Thumbnail({ video, channel, large=false, generated=false }) {
const imgSrc = !generated && (video.thumbUrl || (video.youtubeId ? `https://img.youtube.com/vi/${video.youtubeId}/mqdefault.jpg` : null));
if (imgSrc) {
return (
);
}
const seed = (video.thumbSeed * 9301 + 49297) % 233280;
const r = (n) => (seed * (n+1) % 1000) / 1000;
const accent = channel.accent;
const titleSnip = (video.title || '').slice(0, 32);
// pattern variants
const variant = video.thumbSeed % 5;
return (
);
}
window.Thumbnail = Thumbnail;