// Nick Connelly — "Soul Winning" gospel presentation feed.
// Unlisted page (#nickconnelly). Same TikTok feed design as the main feed,
// with an EN/ES toggle that swaps the "Watch the full message" target.
// 20 short 9:16 clips; full message in EN/ES, 16:9 + 9:16.
const NICK_BASE = "https://pub-28a96ef5d275416ea27ae14f6e84c132.r2.dev/official/Personalshare/nickconnelly";
const NICK_CLIPS = [
["01 intro-question-believe-100-trust", "Intro · Believe 100%, Trust", "Intro · Cree 100%, Confía"],
["02 trust-alone-99-vs-1-percent", "Trust Alone · 99 vs 1 Percent", "Solo Confianza · 99 vs 1 Por Ciento"],
["03 dead-in-vain-god-loves-you-not-works", "Dead In Vain · God Loves You, Not Works", "Muerto en Vano · Dios Te Ama, No las Obras"],
["04 all-sinned-wages-death-there-is-a-hell", "All Sinned · The Wages of Death", "Todos Pecaron · La Paga de la Muerte"],
["05 lake-of-fire-one-lie-christ-died", "Lake of Fire · Christ Died", "Lago de Fuego · Cristo Murió"],
["06 all-sins-forgiven-jesus-is-god", "All Sins Forgiven · Jesus Is God", "Pecados Perdonados · Jesús es Dios"],
["07 trinity-the-word-was-god", "Trinity · The Word Was God", "Trinidad · El Verbo Era Dios"],
["08 sinless-life-the-crucifixion", "Sinless Life · The Crucifixion", "Vida Sin Pecado · La Crucifixión"],
["09 resurrection-handle-me", "Resurrection · Handle Me", "Resurrección · Tócame"],
["10 100-percent-trust-john-3-16", "100% Trust · John 3:16", "100% Confianza · Juan 3:16"],
["11 free-gift-grace-not-works", "Free Gift · Grace, Not Works", "Regalo Gratuito · Gracia, No Obras"],
["12 god-cannot-lie-water-of-life", "God Cannot Lie · Water of Life", "Dios No Puede Mentir · Agua de Vida"],
["13 eternal-life-forever-cant-lose-it", "Eternal Life · Can't Lose It", "Vida Eterna · No Se Puede Perder"],
["14 blood-cleanses-once-a-son", "Blood Cleanses · Once a Son", "La Sangre Limpia · Una Vez Hijo"],
["15 always-a-son-nothing-separates", "Always a Son · Nothing Separates", "Siempre un Hijo · Nada Separa"],
["16 psalm-89-rod-never-break-covenant", "Psalm 89 · Never Break Covenant", "Salmo 89 · Nunca Romper el Pacto"],
["17 recap-one-thing-100-percent-trust", "Recap · 100% Trust", "Resumen · 100% Confianza"],
["18 never-perish-none-pluck-them-out", "Never Perish · None Pluck Them Out", "Nunca Perecerán · Nadie los Arrebata"],
["19 the-decision-romans-10-9", "The Decision · Romans 10:9", "La Decisión · Romanos 10:9"],
["20 the-prayer-and-assurance", "The Prayer and Assurance", "La Oración y la Seguridad"],
];
// UI strings per language.
const NICK_T = {
EN: { title: "Soul Winning", shortClip: "Short Clip", watchFull: "Watch full message", subtitle: "Gospel Presentation · Nick Connelly",
fullHeading: "Watch the full message", fullNote: "The complete talk — plays right here. Rotate to widescreen, or pick a format.",
widescreen: "Widescreen 16:9", vertical: "Vertical 9:16", fullscreen: "Fullscreen",
dlHeading: "Download — clean versions", dlNote: "Unwatermarked masters (no end-card). HD masters are large — use Web for quick sharing.",
english: "English", spanish: "Spanish", hdMaster: "HD master", web: "Web", preparing: "Preparing" },
ES: { title: "Ganando Almas", shortClip: "Clip Corto", watchFull: "Ver el mensaje completo", subtitle: "Presentación del Evangelio · Nick Connelly",
fullHeading: "Ver el mensaje completo", fullNote: "La charla completa — se reproduce aquí. Gira a horizontal o elige un formato.",
widescreen: "Panorámico 16:9", vertical: "Vertical 9:16", fullscreen: "Pantalla completa",
dlHeading: "Descargar — versiones limpias", dlNote: "Originales sin marca de agua (sin tarjeta final). Los originales HD son grandes — usa Web para compartir rápido.",
english: "Inglés", spanish: "Español", hdMaster: "Original HD", web: "Web", preparing: "Preparando" },
};
function nickFull(lang, orient) {
// e.g. full/Soul Winning EN 9x16 (compressed).mp4
return encodeURI(`${NICK_BASE}/full/Soul Winning ${lang} ${orient} (compressed).mp4`);
}
function nickMaster(lang, orient) {
return encodeURI(`${NICK_BASE}/full/Soul Winning ${lang} ${orient} (master H264 CRF16).mp4`);
}
// Full-message + downloads sheet
function NickFilesSheet({ onClose, landscape }) {
const [lang, setLang] = useState("EN");
const [watch, setWatch] = useState(null); // {orient}
const [dl, setDl] = useState(null); // { href, pct }
const tt = NICK_T[lang] || NICK_T.EN;
const fullVidRef = useRef(null);
// Cross-origin force-download. The bucket has CORS, so we can stream the file
// into a blob and save it with the right filename (the `download` attribute
// alone is ignored cross-origin, which is why links were opening inline).
async function downloadFile(href) {
const filename = decodeURIComponent(href.split("/").pop());
if (dl) return; // one at a time
try {
setDl({ href, pct: 0 });
const res = await fetch(href);
if (!res.ok) throw new Error("HTTP " + res.status);
const total = +(res.headers.get("content-length") || 0);
const reader = res.body.getReader();
const chunks = [];
let received = 0;
for (;;) {
const { done, value } = await reader.read();
if (done) break;
chunks.push(value);
received += value.length;
if (total) setDl({ href, pct: Math.round((received / total) * 100) });
}
const url = URL.createObjectURL(new Blob(chunks, { type: "video/mp4" }));
const a = document.createElement("a");
a.href = url; a.download = filename;
document.body.appendChild(a); a.click(); a.remove();
setTimeout(() => URL.revokeObjectURL(url), 15000);
setDl(null);
} catch (e) {
setDl(null);
window.open(href, "_blank", "noopener"); // fallback: open so user can save manually
}
}
// Opened in landscape → auto-load + play the widescreen (16:9) full message.
useEffect(() => {
if (!landscape) return;
setWatch("16x9");
const v = fullVidRef.current;
if (!v) return;
document.querySelectorAll("video").forEach((other) => {
if (other !== v) { try { other.pause(); other.muted = true; } catch {} }
});
v.src = nickFull(lang, "16x9");
v.muted = false;
const pr = v.play();
if (pr && pr.catch) pr.catch(() => {});
}, []);
// When language changes while a format is open, reload that format in the new language.
useEffect(() => {
const v = fullVidRef.current;
if (!v || !watch) return;
const t = v.currentTime;
v.src = nickFull(lang, watch);
v.muted = false;
const pr = v.play();
if (pr && pr.catch) pr.catch(() => {});
}, [lang]);
const goFs = () => {
const v = fullVidRef.current; if (!v) return;
const el = v.closest('[data-fsroot]') || v;
if (v.webkitEnterFullscreen) { try { v.webkitEnterFullscreen(); return; } catch {} }
if (el.requestFullscreen) { el.requestFullscreen().catch(() => {}); }
else if (v.requestFullscreen) { v.requestFullscreen().catch(() => {}); }
};
// Set src + play + fullscreen ALL synchronously inside the click gesture —
// browsers block requestFullscreen if it's deferred outside the gesture.
const pickFormat = (orient) => {
setWatch(orient);
const v = fullVidRef.current;
if (!v) return;
// Stop every other video (the feed clips) so only the full message plays.
document.querySelectorAll("video").forEach((other) => {
if (other !== v) { try { other.pause(); other.muted = true; } catch {} }
});
v.src = nickFull(lang, orient);
v.muted = false;
// iOS: webkitEnterFullscreen only works once metadata is loaded. Try now,
// and if the video isn't ready yet, retry on loadedmetadata.
const tryFs = () => {
if (v.webkitEnterFullscreen) {
if (v.readyState >= 1) { try { v.webkitEnterFullscreen(); return true; } catch {} }
return false;
}
const el = v.closest('[data-fsroot]') || v;
if (el.requestFullscreen) { el.requestFullscreen().catch(() => {}); return true; }
if (v.requestFullscreen) { v.requestFullscreen().catch(() => {}); return true; }
return false;
};
const pr = v.play();
if (pr && pr.catch) pr.catch(() => {});
if (!tryFs()) {
const onMeta = () => { v.removeEventListener("loadedmetadata", onMeta); try { v.webkitEnterFullscreen && v.webkitEnterFullscreen(); } catch {} };
v.addEventListener("loadedmetadata", onMeta);
}
};
return (
);
}
function btnGold(active) {
return { padding: "12px 18px", background: active ? T.gold : "transparent", color: active ? T.ink : T.gold, border: `1px solid ${T.gold}66`, cursor: "pointer", fontFamily: "'Cinzel', serif", fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", fontWeight: active ? 700 : 500 };
}
function NickConnellyFeed({ nav, params }) {
const [lang, setLang] = useState("EN");
const [muted, setMuted] = useState(true);
const [activeIdx, setActiveIdx] = useState(0);
const [filesOpen, setFilesOpen] = useState(false);
const [landscape, setLandscape] = useState(false);
const [autoplay, setAutoplay] = useState(() => {
try { return localStorage.getItem("nickAutoplay") !== "off"; } catch { return true; }
});
useEffect(() => { try { localStorage.setItem("nickAutoplay", autoplay ? "on" : "off"); } catch {} }, [autoplay]);
const containerRef = useRef(null);
const p = usePlayer();
// Track phone/tablet landscape so we can give the 16:9 video a clean takeover.
useEffect(() => {
const forced = new URLSearchParams(location.search).get("land") === "1";
const isTouch = (navigator.maxTouchPoints > 0) || ("ontouchstart" in window);
const mq = window.matchMedia("(orientation: landscape)");
const on = () => setLandscape(forced || (mq.matches && isTouch));
on();
if (mq.addEventListener) mq.addEventListener("change", on); else mq.addListener(on);
window.addEventListener("resize", on);
window.addEventListener("orientationchange", on);
return () => {
if (mq.removeEventListener) mq.removeEventListener("change", on); else mq.removeListener(on);
window.removeEventListener("resize", on);
window.removeEventListener("orientationchange", on);
};
}, []);
// Pause sticky audio on mount
useEffect(() => { if (p.playing) p.toggle(); }, []);
const list = useMemo(() => NICK_CLIPS.map(([slug, titleEN, titleES], i) => ({
id: "nick-" + (i + 1),
n: i + 1,
shortsEN: encodeURI(`${NICK_BASE}/clips/SoulWinning 9x16 ${slug}.mp4`),
shortsES: encodeURI(`${NICK_BASE}/clips/SoulWinning ES 9x16 ${slug}.mp4`),
shorts: encodeURI(`${NICK_BASE}/clips/SoulWinning ${lang === "ES" ? "ES " : ""}9x16 ${slug}.mp4`),
wide: encodeURI(`${NICK_BASE}/clips/SoulWinning ${lang === "ES" ? "ES " : ""}16x9 ${slug}.mp4`),
full: nickFull(lang, "9x16"),
fullWide: nickFull(lang, "16x9"),
title: lang === "ES" ? titleES : titleEN,
collectionTitle: "Soul Winning · Nick Connelly",
})), [lang]);
const tt = NICK_T[lang] || NICK_T.EN;
// Detect visible slide
useEffect(() => {
const c = containerRef.current;
if (!c) return;
const io = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting && entry.intersectionRatio > 0.6) {
setActiveIdx(Number(entry.target.dataset.idx));
}
});
}, { root: c, threshold: [0.6] });
Array.from(c.children).forEach((child) => io.observe(child));
return () => io.disconnect();
}, [list.length]);
// Keyboard nav
useEffect(() => {
const onKey = (e) => {
if (e.key === "ArrowDown" || e.key === "j") { e.preventDefault(); jump(1); }
else if (e.key === "ArrowUp" || e.key === "k") { e.preventDefault(); jump(-1); }
else if (e.key === "m") setMuted(m => !m);
else if (e.key === "Escape") window.history.back();
};
window.addEventListener("keydown", onKey);
return () => window.removeEventListener("keydown", onKey);
}, [activeIdx, list.length]);
function jump(delta) {
const c = containerRef.current;
if (!c) return;
const ni = Math.max(0, Math.min(list.length - 1, activeIdx + delta));
if (ni === activeIdx) return;
// Set the active index directly (the IntersectionObserver is unreliable while
// the active video is position:fixed in landscape) and scroll to match.
setActiveIdx(ni);
c.scrollTo({ top: ni * c.clientHeight, behavior: "smooth" });
}
// Autoplay advance — wraps to the first clip after the last for a continuous cycle.
function advanceAuto() {
const c = containerRef.current;
const ni = activeIdx + 1 >= list.length ? 0 : activeIdx + 1;
setActiveIdx(ni);
if (c) c.scrollTo({ top: ni * c.clientHeight, behavior: "smooth" });
}
return (
{list.map((v, i) => (
))}
{/* Top bar */}
{/* In landscape the EN/ES toggle + counter live up here so the captions stay clear at the bottom. */}
{landscape && (
<>
{activeIdx + 1}/{list.length}
{["EN", "ES"].map(l => (
))}
)}
{/* Footer — portrait only (brand + EN/ES toggle + counter). Hidden in landscape so it never covers the burned-in captions. */}
{!landscape && (
{["EN", "ES"].map(l => (
))}
{activeIdx + 1}/{list.length}
)}
{/* Landscape prev/next — the fullscreen fixed video swallows swipes, so
give explicit chevrons (vertically centered on each edge). */}
{landscape && (
<>
)}
{filesOpen && setFilesOpen(false)} landscape={landscape} />}
);
}
function NickSlide({ video, idx, active, near, muted, tt, landscape, onFlip, autoplay, onAdvance }) {
const videoRef = useRef(null);
const seekRef = useRef(0); // timestamp to restore after a src swap
// Rotate to landscape (phone/tablet) → swap to the 16:9 clip at the same
// timestamp; rotate back → resume the 9:16 clip where it left off.
const [wide, setWide] = useState(false);
useEffect(() => {
const forced = new URLSearchParams(location.search).get("land") === "1";
const isTouch = (navigator.maxTouchPoints > 0) || ("ontouchstart" in window);
const mq = window.matchMedia("(orientation: landscape)");
const onChange = () => {
const v = videoRef.current;
seekRef.current = v ? v.currentTime : 0; // restored on loadedmetadata
setWide(forced || (mq.matches && isTouch));
};
onChange();
if (mq.addEventListener) mq.addEventListener("change", onChange); else mq.addListener(onChange);
window.addEventListener("orientationchange", onChange);
return () => {
if (mq.removeEventListener) mq.removeEventListener("change", onChange); else mq.removeListener(onChange);
window.removeEventListener("orientationchange", onChange);
};
}, [active]);
const src = wide ? video.wide : video.shorts;
// Apply the pending seek once the (possibly newly-swapped) source is ready.
const onMeta = () => {
const v = videoRef.current;
if (!v) return;
const t = seekRef.current;
if (t > 0 && t < (v.duration || Infinity)) { try { v.currentTime = t; } catch {} }
if (active) v.play().catch(() => {});
};
useEffect(() => {
const v = videoRef.current;
if (!v) return;
v.muted = muted;
if (active) { v.play().catch(() => {}); }
else v.pause();
}, [active, muted, near, src]);
const onTap = () => {
const v = videoRef.current;
if (!v) return;
if (v.paused) v.play().catch(() => {}); else v.pause();
};
// Swipe to flip clips in landscape (the fixed fullscreen video eats scroll).
const touch = useRef(null);
const onTouchStart = (e) => { const t = e.touches[0]; touch.current = { x: t.clientX, y: t.clientY, moved: false }; };
const onTouchMove = (e) => { if (touch.current) touch.current.moved = true; };
const onTouchEnd = (e) => {
if (!landscape || !touch.current) { touch.current = null; return; }
const t = e.changedTouches[0];
const dx = t.clientX - touch.current.x, dy = t.clientY - touch.current.y;
touch.current = null;
// Horizontal OR vertical swipe past threshold flips; otherwise it's a tap.
if (Math.max(Math.abs(dx), Math.abs(dy)) < 45) return;
const primary = Math.abs(dx) >= Math.abs(dy) ? -Math.sign(dx) : -Math.sign(dy); // swipe left/up → next
if (onFlip) onFlip(primary);
};
return (