// Prodz — Production discovery: // · AllProductions — vertical overview opened from "Vedi tutte" // · DetailProduction — full-screen, reel-style. Horizontal carousel of the // production's media followed by its related Set Moments (framed in gold to // stand apart). Scroll down anywhere → next production. A persistent bottom // bar (Crew · Gear · Commenti · Set Moment) opens a pull-up sheet; "Set // Moment" scrolls the carousel to where the moments begin. A translucent // search + filters bar floats on top. // ---------- "Vedi tutte" → vertical overview of every production ---------- function AllProductions() { const { L } = useL(); const nav = useNav(); const { Tag } = window.ProdzDesignSystem_d0b87b; return (

{L('Tutte le produzioni', 'All productions')}

{L('Tocca una produzione per aprirla a tutto schermo.', 'Tap a production to open it full-screen.')}

{PRODUCTIONS.concat(PRODUCTIONS).map((p, i) => { const pm = PRODUCTION_MEDIA[p.id] || {}; const crew = (pm.crew || []).length; const moments = (pm.moments || []).length; return ( ); })}
); } // ---------- Full-screen reel-style detail ---------- function DetailProduction({ id }) { const { L } = useL(); const nav = useNav(); const startIdx = Math.max(0, PRODUCTIONS.findIndex((p) => p.id === id)); const list = PRODUCTIONS; const vRef = useRefS(null); const hRefs = useRefS([]); const [active, setActive] = useStateS(startIdx); const [sheet, setSheet] = useStateS(null); useEffectS(() => { const v = vRef.current; if (v) v.scrollTop = startIdx * v.clientHeight; }, []); const onVScroll = () => { const v = vRef.current; if (!v) return; const i = Math.round(v.scrollTop / v.clientHeight); if (i !== active) { setActive(i); setSheet(null); } }; const scrollToMoments = () => { const h = hRefs.current[active]; const p = list[active]; const media = (PRODUCTION_MEDIA[p.id] || {}).media || []; if (h) h.scrollTo({ left: h.clientWidth * media.length, behavior: 'smooth' }); }; return (
{/* translucent top: back · search · filters */}
{L('Cerca produzioni…', 'Search productions…')}
{/* vertical pager — one panel per production */}
{list.map((p, idx) => ( { hRefs.current[idx] = el; }} /> ))}
{/* persistent bottom bar */}
setSheet('crew')} /> setSheet('gear')} /> setSheet('comments')} />
setSheet(null)}> {sheet && }
); } function ProductionPanel({ p, L, nav, registerRef }) { const { Avatar } = window.ProdzDesignSystem_d0b87b; const pm = PRODUCTION_MEDIA[p.id] || { media: [], moments: [] }; const moments = (pm.moments || []).map((mid) => MOMENTS.find((m) => m.id === mid)).filter(Boolean); const director = (pm.crew || []).find((c) => c.id !== 'me') || (pm.crew || [])[0]; const dp = director ? PEOPLE[director.id] : null; return (
{/* horizontal carousel: media frames, then set-moment frames */}
{pm.media.map((m, i) => (
{m.type === 'video' && ( <> {m.dur} )} {i + 1} / {pm.media.length + moments.length}
))} {moments.map((m, i) => (
{/* set moments wear a distinct gold frame */}
Set Moment {tr(L, m.label)}
))}
{/* caption — production identity, bottom-left, above the bar */}
{p.title}
{tr(L, p.meta)}
{/* right rail — quick engage */}
); } function ReelEngage({ icon, n }) { return ( {n} ); } function ReelTab({ icon, label, onClick, tint }) { return ( ); } function ReelSheet({ kind, p, L, nav }) { const { Avatar, Tag, StatusDot } = window.ProdzDesignSystem_d0b87b; const pm = PRODUCTION_MEDIA[p.id] || {}; const title = kind === 'crew' ? L('Crew', 'Crew') : kind === 'gear' ? 'Gear' : L('Commenti', 'Comments'); return (
{p.title}
{title}
{kind === 'crew' && (pm.crew || []).map((c) => { const person = PEOPLE[c.id]; return ( ); })} {kind === 'gear' && (pm.gear || []).map((gid) => { const g = GEAR.find((x) => x.id === gid); if (!g) return null; return (
{!g.img && }
{g.name}
{tr(L, g.kind)} · {tr(L, g.price)}
); })} {kind === 'comments' && (pm.comments || []).map((c, i) => { const person = PEOPLE[c.author]; return (
{person.name} {tr(L, c.time)}

{tr(L, c.text)}

); })}
); } const reelGlassBtn = { width: 38, height: 38, borderRadius: '50%', border: 'none', cursor: 'pointer', flexShrink: 0, background: 'rgba(255,255,255,0.14)', backdropFilter: 'blur(10px)', WebkitBackdropFilter: 'blur(10px)', display: 'flex', alignItems: 'center', justifyContent: 'center' }; const reelSlide = { position: 'relative', width: '100%', height: '100%', flexShrink: 0, scrollSnapAlign: 'start' }; const reelRow = { display: 'flex', alignItems: 'center', gap: 12, width: '100%', padding: 10, background: 'var(--surface-raised)', border: 'none', cursor: 'pointer', borderRadius: 'var(--radius-md)' }; const prodMetaPill = { display: 'inline-flex', alignItems: 'center', gap: 5, fontSize: 11.5, fontWeight: 600, color: '#fff' }; Object.assign(window, { AllProductions, DetailProduction });