// Resources screen — live library backed by the `resources` Supabase table. // Record that the current user opened a resource (one row per distinct resource). async function logResourceView(resourceId) { const { data: { user } } = await window._supabase.auth.getUser(); if (!user) return; await window._supabase.from('resource_views').upsert( { user_id: user.id, resource_id: String(resourceId) }, { onConflict: 'user_id,resource_id', ignoreDuplicates: true } ); } // Count of distinct resources the current user has opened (powers Resources badges). async function fetchResourceViewCount() { const uid = window.getActiveUserId ? await window.getActiveUserId() : null; if (!uid) return 0; const { count } = await window._supabase.from('resource_views') .select('id', { count: 'exact', head: true }).eq('user_id', uid); return count || 0; } // ---------- Shared resource helpers (used by member + admin views) ---------- const RES_FOLDERS = [ { key: 'foundations', label: 'Foundations' }, { key: 'breakthrough', label: 'Breakthrough' }, { key: 'mega_management', label: 'MEGA Management' }]; const RES_FOLDER_LABEL = { foundations: 'Foundations', breakthrough: 'Breakthrough', mega_management: 'MEGA Management' }; // Access tier display: foundations resources are open to everyone ("Both"). const RES_ACCESS_LABEL = { foundations: 'Both', breakthrough: 'Breakthrough', mega_management: 'Management' }; const RES_ACCESS_CHIP = { foundations: 'teal', breakthrough: 'sapphire', mega_management: 'coral' }; const RES_TYPES = [ { key: 'video', label: 'Video' }, { key: 'pdf', label: 'PDF' }, { key: 'template', label: 'Template' }, { key: 'article', label: 'Article' }]; const RES_TYPE_META = { video: { icon: 'video', label: 'Video' }, pdf: { icon: 'doc', label: 'PDF' }, template: { icon: 'link', label: 'Template' }, article: { icon: 'doc', label: 'Article' } }; // Subject areas suggested in the admin form (brief list); colored via SUBJECTS. const RES_SUBJECTS = Object.keys(SUBJECTS); function resRelTime(iso) { if (!iso) return ''; const s = (Date.now() - new Date(iso).getTime()) / 1000; if (s < 60) return 'just now'; const m = Math.floor(s / 60);if (m < 60) return m + 'm ago'; const h = Math.floor(m / 60);if (h < 24) return h + 'h ago'; const d = Math.floor(h / 24);if (d < 30) return d + 'd ago'; const mo = Math.floor(d / 30);if (mo < 12) return mo + 'mo ago'; return Math.floor(mo / 12) + 'y ago'; } function resYouTubeId(url) { const m = (url || '').match(/(?:youtube\.com\/(?:watch\?v=|embed\/|shorts\/)|youtu\.be\/)([\w-]{11})/); return m ? m[1] : null; } function resLoomId(url) { const m = (url || '').match(/loom\.com\/(?:share|embed)\/([\w-]+)/); return m ? m[1] : null; } function resVideoEmbed(url) { const yt = resYouTubeId(url); if (yt) return 'https://www.youtube.com/embed/' + yt; const lm = resLoomId(url); if (lm) return 'https://www.loom.com/embed/' + lm; return url; } function resPdfEmbed(url) { const gd = (url || '').match(/drive\.google\.com\/file\/d\/([\w-]+)/); if (gd) return 'https://drive.google.com/file/d/' + gd[1] + '/preview'; return url; } function resDomain(url) { try {return new URL(url).hostname.replace(/^www\./, '');} catch (e) {return url || '';} } // Mint a short-lived signed URL for a directly-uploaded file in the private // `resource-files` bucket. Returns null on failure (caller falls back to url). async function resSignedUrl(path) { if (!path) return null; const { data, error } = await window._supabase.storage .from('resource-files').createSignedUrl(path, 60 * 60); if (error) { console.error('resource signed url', error); return null; } return data ? data.signedUrl : null; } // Resolve the effective URL to render/open: signed URL for uploaded files, // otherwise the external link. Returns a shallow copy with `url` filled in. async function resResolve(r) { if (r && r.storage_path) { const signed = await resSignedUrl(r.storage_path); if (signed) return { ...r, url: signed }; } return r; } // ---------- Cover-page thumbnails (render PDF page 1 as the book cover) ---------- // pdf.js is heavy, so it's injected lazily the first time a PDF cover is needed. const PDFJS_VER = '3.11.174'; let _pdfjsPromise = null; function ensurePdfJs() { if (window.pdfjsLib) return Promise.resolve(window.pdfjsLib); if (_pdfjsPromise) return _pdfjsPromise; _pdfjsPromise = new Promise((resolve, reject) => { const s = document.createElement('script'); s.src = `https://cdn.jsdelivr.net/npm/pdfjs-dist@${PDFJS_VER}/build/pdf.min.js`; s.onload = () => { const lib = window.pdfjsLib; if (!lib) { reject(new Error('pdfjsLib missing')); return; } lib.GlobalWorkerOptions.workerSrc = `https://cdn.jsdelivr.net/npm/pdfjs-dist@${PDFJS_VER}/build/pdf.worker.min.js`; resolve(lib); }; s.onerror = () => reject(new Error('pdf.js failed to load')); document.head.appendChild(s); }); return _pdfjsPromise; } // Render the first page of a PDF at `url` to a JPEG data URL (cover thumbnail). async function resRenderFirstPage(url, targetW = 460) { const lib = await ensurePdfJs(); const pdf = await lib.getDocument({ url }).promise; try { const page = await pdf.getPage(1); const base = page.getViewport({ scale: 1 }); const vp = page.getViewport({ scale: targetW / base.width }); const canvas = document.createElement('canvas'); canvas.width = Math.ceil(vp.width); canvas.height = Math.ceil(vp.height); await page.render({ canvasContext: canvas.getContext('2d'), viewport: vp }).promise; return canvas.toDataURL('image/jpeg', 0.82); } finally { pdf.destroy(); } } // Resource id → rendered cover data URL (avoids re-rendering across views/tilts). const _resCoverCache = new Map(); function resIsPdf(r) { return !!(r && (r.storage_path || r.content_type === 'pdf' || /\.pdf($|\?)/i.test(r.url || ''))); } // Hook: resolve a cover image for a resource. Order: explicit thumbnail_url → // rendered PDF first page (uploaded/PDF only) → null (caller draws the book). function useResourceCover(r) { const [src, setSrc] = useState(() => (r && r.thumbnail_url) || (r && _resCoverCache.get(r.id)) || null); useEffect(() => { let alive = true; if (!r) return; if (r.thumbnail_url) { setSrc(r.thumbnail_url); return; } if (_resCoverCache.has(r.id)) { setSrc(_resCoverCache.get(r.id)); return; } if (!resIsPdf(r)) return; (async () => { try { const url = r.storage_path ? await resSignedUrl(r.storage_path) : r.url; if (!url) return; const dataUrl = await resRenderFirstPage(url); _resCoverCache.set(r.id, dataUrl); if (alive) setSrc(dataUrl); } catch (e) { console.warn('resource cover render failed', r.id, e); } })(); return () => { alive = false; }; }, [r && r.id, r && r.thumbnail_url, r && r.storage_path]); return src; } // Member tier → resource user type. function resUserType(member) { const t = member && member.membershipTier || 'foundations'; if (t === 'management') return 'mega_management'; if (t === 'breakthrough') return 'breakthrough'; return 'foundations'; // foundations + free/trial } function resVisibleFolders(userType) { return userType === 'mega_management' ? ['foundations', 'breakthrough', 'mega_management'] : ['foundations', 'breakthrough']; } // 'open' (fully accessible) | 'locked' (visible upsell) | 'hidden' (not shown) function resCardState(resource, userType) { const at = resource.access_tier; if (at === 'foundations') return 'open'; if (at === 'breakthrough') return userType === 'breakthrough' || userType === 'mega_management' ? 'open' : 'locked'; if (at === 'mega_management') return userType === 'mega_management' ? 'open' : 'hidden'; return 'open'; } Object.assign(window, { logResourceView, fetchResourceViewCount, RES_FOLDERS, RES_FOLDER_LABEL, RES_ACCESS_LABEL, RES_ACCESS_CHIP, RES_TYPES, RES_TYPE_META, RES_SUBJECTS, resRelTime, resVideoEmbed, resPdfEmbed, resDomain, resUserType, resVisibleFolders, resCardState, resSignedUrl, resResolve }); // ============================================================ // DEMO FALLBACK — preview-only sample library. // Renders ONLY when the live `resources` table returns 0 rows, // so you can preview the 3D library design before real content // is published. No DB writes. Delete this block (and the // RES_DEMO_FALLBACK usage in ResourcesScreen) to remove. // ============================================================ const RES_DEMO_FALLBACK = false; const _demoDays = (n) => new Date(Date.now() - n * 86400000).toISOString(); const RES_DEMO = [ { id: 'demo-1', title: 'Mastering Professional Email', description: 'A practical walkthrough of structuring emails that get replies — subject lines, openers, asks, and sign-offs that read as confident, not pushy.', content_type: 'video', folder: 'foundations', subject_area: 'Professional Communication', access_tier: 'foundations', url: 'https://www.youtube.com/watch?v=arj7oStGLkU', thumbnail_url: null, duration_minutes: 18, published: true, created_at: _demoDays(1) }, { id: 'demo-2', title: 'The One-Page CV Template', description: 'A recruiter-tested one-page CV layout with annotated guidance on what to include in each section and what to cut.', content_type: 'pdf', folder: 'foundations', subject_area: 'CV Development', access_tier: 'foundations', url: 'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf', thumbnail_url: null, duration_minutes: null, published: true, created_at: _demoDays(3) }, { id: 'demo-3', title: 'Why Small Wins Compound', description: 'On the psychology of momentum: how stacking tiny, visible wins rewires motivation and beats relying on willpower.', content_type: 'article', folder: 'foundations', subject_area: 'Growth Mindset', access_tier: 'foundations', url: 'https://jamesclear.com/small-habits', thumbnail_url: null, duration_minutes: null, published: true, created_at: _demoDays(5) }, { id: 'demo-4', title: 'Weekly Planning Template', description: 'A simple, repeatable weekly planning sheet — priorities, time blocks, and a Friday reflection prompt.', content_type: 'template', folder: 'foundations', subject_area: 'Time Management', access_tier: 'foundations', url: 'https://www.notion.so', thumbnail_url: null, duration_minutes: null, published: true, created_at: _demoDays(8) }, { id: 'demo-5', title: 'Building Your LinkedIn Presence', description: 'Turn a dormant profile into a magnet for opportunities — headline, about section, and a posting cadence you can sustain.', content_type: 'video', folder: 'foundations', subject_area: 'Personal Branding', access_tier: 'foundations', url: 'https://www.youtube.com/watch?v=arj7oStGLkU', thumbnail_url: null, duration_minutes: 24, published: true, created_at: _demoDays(11) }, { id: 'demo-6', title: 'Closing High-Value Deals', description: 'A framework for navigating the final stretch of a deal — handling objections, creating urgency, and asking for the close.', content_type: 'video', folder: 'breakthrough', subject_area: 'Strategic Sales', access_tier: 'breakthrough', url: 'https://www.youtube.com/watch?v=arj7oStGLkU', thumbnail_url: null, duration_minutes: 32, published: true, created_at: _demoDays(13) }, { id: 'demo-7', title: 'Commanding the Room', description: 'Presence techniques for high-stakes presentations — voice, pacing, and the structure of a memorable talk.', content_type: 'article', folder: 'breakthrough', subject_area: 'Public Speaking & Presentation', access_tier: 'breakthrough', url: 'https://hbr.org', thumbnail_url: null, duration_minutes: null, published: true, created_at: _demoDays(16) }, { id: 'demo-8', title: 'The Management Operating Model', description: 'How high-performing teams run their week — rituals, metrics, and decision rights that scale.', content_type: 'pdf', folder: 'mega_management', subject_area: 'Consulting', access_tier: 'mega_management', url: 'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf', thumbnail_url: null, duration_minutes: null, published: true, created_at: _demoDays(20) }, ]; // ---------- Resource viewer modal ---------- function ResourceViewer({ resource: r, onClose }) { const subjColor = SUBJECTS[r.subject_area] || 'var(--text-3)'; let body; if (r.content_type === 'video') { body =