SOSH TV — Bali, the reel

); } const TWEAK_DEFAULTS = { cardStyle: "plain", accent: "#c97b5a", crt: 0.55, grain: 0.5, desktop: "pink", }; const DESKTOP_COLORS = { pink: "#f8c8d4", cream: "#e9dcc6" }; function Dialog({ title, lines, onClose, okLabel = "OK" }) { return (

e.target === e.currentTarget && onClose()}>

{lines.map((l, i) => (

{l}

))}

{okLabel}

); } function useViewport() { const [vp, setVp] = useState({ w: window.innerWidth, h: window.innerHeight }); useEffect(() => { const f = () => setVp({ w: window.innerWidth, h: window.innerHeight }); window.addEventListener("resize", f); return () => window.removeEventListener("resize", f); }, []); return vp; } function useOffset() { const [off, setOff] = useState({ x: 0, y: 0 }); const start = useRef(null); const onDown = (e) => { if (e.target.closest("[data-clickable]")) return; const pt = e.touches ? e.touches[0] : e; start.current = { mx: pt.clientX, my: pt.clientY, ox: off.x, oy: off.y }; const move = (ev) => { const p = ev.touches ? ev.touches[0] : ev; setOff({ x: start.current.ox + (p.clientX - start.current.mx), y: start.current.oy + (p.clientY - start.current.my) }); }; const up = () => { window.removeEventListener("mousemove", move); window.removeEventListener("mouseup", up); window.removeEventListener("touchmove", move); window.removeEventListener("touchend", up); }; window.addEventListener("mousemove", move); window.addEventListener("mouseup", up); window.addEventListener("touchmove", move, { passive: true }); window.addEventListener("touchend", up); }; return [off, onDown, setOff]; } function App() { const [t, setTweak] = useTweaks(TWEAK_DEFAULTS); const [booted, setBooted] = useState(false); const [activeTab, setActiveTab] = useState("home"); const [chapter, setChapter] = useState(null); const [light, setLight] = useState(null); const [tv, setTv] = useState({ index: 0, playing: false }); const [musicOn, setMusicOn] = useState(false); const [dialog, setDialog] = useState(null); const vp = useViewport(); const narrow = vp.w < 760; const tvDrag = useOffset(); const storyDrag = useOffset(); const albumsDrag = useOffset(); const chapDrag = useOffset(); useEffect(() => { const r = document.documentElement; r.style.setProperty("--crt", String(t.crt)); r.style.setProperty("--grain", String(t.grain)); r.style.setProperty("--terracotta", t.accent); r.style.setProperty("--desktop", DESKTOP_COLORS[t.desktop] || DESKTOP_COLORS.pink); }, [t.crt, t.grain, t.accent, t.desktop]); const top = narrow ? 30 : 40; const dockSpace = narrow ? 120 : 134; // bigger for tab bar + dock const availH = vp.h - top - dockSpace; const CHROME = 188; const tvW = narrow ? vp.w - 12 : Math.round(Math.max(300, Math.min(760, (availH - CHROME) * (16 / 9), vp.w * 0.5))); const tvH = Math.round(tvW * (9 / 16) + CHROME); const stW = narrow ? vp.w - 12 : Math.min(460, Math.max(330, Math.round(vp.w * 0.3))); let tvBaseX, stBaseX; const pairW = tvW + 28 + stW; if (pairW <= vp.w - 48) { tvBaseX = (vp.w - pairW) / 2; stBaseX = tvBaseX + tvW + 28; } else { tvBaseX = Math.max(20, (vp.w - tvW) / 2); stBaseX = Math.max(20, vp.w - stW - 20); } const clusterY = top + Math.max(0, (availH - tvH) / 2); const albumsW = Math.min(900, vp.w - 120); const chapW = Math.min(960, vp.w - 80); const tvGeom = narrow ? { x: 6, y: top, w: vp.w - 12 } : { x: Math.round(tvBaseX + tvDrag[0].x), y: Math.round(clusterY + tvDrag[0].y), w: tvW }; const storyGeom = narrow ? { x: 6, y: top, w: vp.w - 12, h: availH } : { x: Math.round(stBaseX + storyDrag[0].x), y: Math.round(clusterY + storyDrag[0].y), w: stW, h: tvH }; const albumsGeom = narrow ? { x: 6, y: top, w: vp.w - 12, h: availH } : { x: Math.round((vp.w - albumsW) / 2 + albumsDrag[0].x), y: top + albumsDrag[0].y, w: albumsW, h: availH }; const chapGeom = narrow ? { x: 6, y: top, w: vp.w - 12, h: availH } : { x: Math.round((vp.w - chapW) / 2 + chapDrag[0].x), y: top + chapDrag[0].y, w: chapW, h: availH }; const toggleMusic = () => { if (window.SFX) setMusicOn(SFX.toggleMusic()); }; const openFrame = (idx) => setLight({ chapterId: chapter.id, index: idx }); const navFrame = (dir) => { setLight((l) => { if (!l) return l; const ch = CHAPTERS.find((c) => c.id === l.chapterId); return { ...l, index: (l.index + dir + ch.count) % ch.count }; }); }; const lightChapter = light ? CHAPTERS.find((c) => c.id === light.chapterId) : null; const playClipInTV = (i) => { setTv({ index: i, playing: true }); }; const resetWindows = () => { tvDrag[2]({ x: 0, y: 0 }); storyDrag[2]({ x: 0, y: 0 }); albumsDrag[2]({ x: 0, y: 0 }); chapDrag[2]({ x: 0, y: 0 }); }; const downloadDialog = (n) => setDialog({ title: "Download", lines: ["Placeholder archive", "This roll is running on placeholder frames. Drop the real photographs in and Sosh Insider will zip and hand you all " + n + " of them."] }); const startDownloadAll = (ch) => { if (!window.DL) return; setDialog({ title: "Download all", lines: ["Zipping " + ch.count + " photos", "Your browser is downloading one " + ch.folder + ".zip — the server is streaming it straight from the bucket, so it starts immediately and finishes when the last frame is in."] }); DL.downloadAll(ch.folder); }; const aboutDialog = () => setDialog({ title: "About Sosh Insider", lines: ["Sosh Insider — Bali · v7.0.1", "A private archive of " + TOTAL + " frames and one dive reel, found on a Macintosh in a villa above Uluwatu. No phones were used in the making of this."] }); return (

{!booted && setBooted(true)} />} {booted && ( <> {/* Home: trailer + story side by side */} {activeTab === "home" && ( <> setActiveTab("albums")} onTitleDown={narrow ? undefined : tvDrag[1]} onFocus={() => {}} z={16} narrow={narrow} /> setActiveTab("albums")} onTitleDown={narrow ? undefined : storyDrag[1]} onFocus={() => {}} z={15} /> )} {/* Thanks view */} {activeTab === "thanks" && ( setActiveTab("home")} onTitleDown={narrow ? undefined : albumsDrag[1]} onFocus={() => {}} z={18} /> )} {/* Main content window (switches based on activeTab) */} {activeTab === "albums" && !chapter && ( setDialog({ title: "Sosh Insider", lines: ["Can't close the archive", "This is the whole show — there's nowhere else to go. Pick a roll instead."] })} onTitleDown={narrow ? undefined : albumsDrag[1]} style={{ left: albumsGeom.x, top: albumsGeom.y, width: albumsGeom.w, height: albumsGeom.h, zIndex: 20 }} >

{PHOTO_ROLLS} rolls · {TOTAL} frames

CLICK AN ALBUM TO OPEN

Sosh Insider presents

Bali, on film.

Four days, four rolls, one island. The frames that survived the edit — one day at a time.

{CHAPTERS.map((c, i) => ( { if (ch.locked) { setDialog({ title: "Album locked", lines: ["Not unlocked yet", "\u201c" + ch.title + "\u201d opens " + ch.unlockLabel + ". Come back then."] }); return; } window.SFX && SFX.open(); setChapter(ch); }} /> ))}

)} {/* Chapter window (photo) */} {chapter && chapter.kind !== "video" && ( setChapter(null)} onBack={() => setChapter(null)} onOpenFrame={openFrame} onDownloadAll={() => startDownloadAll(chapter)} /> )} {/* Video chapter window */} {chapter && chapter.kind === "video" && ( setChapter(null)} onBack={() => setChapter(null)} onPlayClip={playClipInTV} onDrive={() => window.open(DRIVE_URL || "about:blank")} /> )} {dialog &&

); } ReactDOM.createRoot(document.getElementById("root")).render();