1 ? 'pointer' : 'default',
}}>
{originals.map((orig, i) => {
const cfg = getConfig(i);
const isTop = i === topIdx;
const bgColor = orig.bg || '#111114';
const bgStyle = orig.bgGradient
? `linear-gradient(${orig.bgAngle || 135}deg, ${bgColor}, ${orig.bgGradient})`
: bgColor;
const labelColor = orig.labelColor || 'rgba(245,245,247,0.75)';
return (
{/* Pill-dot indicators — clickable to jump to specific card */}
{count > 1 && (
{orig.url && (
)}
{isTop && (
● PŮVODNÍ · 1:1
)}
);
})}
{/* "klikni · další" hint — disappears after first interaction */}
{count > 1 && !interacted && (
klikni · další
)}
{originals.map((_, i) => (
);
}
// ─── Speaker icon SVGs ────────────────────────────────────────────
function IconMuted() {
return (
);
}
function IconUnmuted() {
return (
);
}
// ─── Single output portrait card ──────────────────────────────────
function OutputCard({ out, activeAudioId, onActivateAudio, hideMeta = false }) {
const isVideo = out.fileType === 'video';
const [hov, setHov] = useShowState(false);
const fit = hov ? 'contain' : 'cover';
const videoRef = useShowRef(null);
const isAudioOn = activeAudioId === out.id;
// Sync muted state imperatively (React doesn't reliably toggle muted via prop)
useShowEffect(() => {
if (videoRef.current) {
videoRef.current.muted = !isAudioOn;
}
}, [isAudioOn]);
const toggleAudio = (e) => {
e.stopPropagation();
onActivateAudio(isAudioOn ? null : out.id);
};
return (
{ setTopIdx(i); setInteracted(true); }} style={{
width: i === topIdx ? '20px' : '6px', height: '6px', borderRadius: '3px',
background: i === topIdx ? 'var(--accent)' : 'rgba(255,255,255,0.18)',
transition: 'width 320ms cubic-bezier(0.65,0,0.35,1), background 320ms',
cursor: 'pointer',
}} />
))}
)}
setHov(true)}
onMouseLeave={() => setHov(false)}
>
{isVideo ? (
) : out.url ? (
) : (
)}
{/* Gradient overlay — hidden on hover so full image is visible */}
{/* Label overlay — desktop only, with subtle transparent background */}
{!hideMeta && out.label && (
{out.label}
)}
{/* Speaker toggle — only for videos marked hasAudio */}
{isVideo && out.hasAudio && (
)}
);
}
// ─── Outputs horizontal scroll row ───────────────────────────────
const CARD_GAP = 14;
const VISIBLE_CARDS_DESKTOP = 4;
const VISIBLE_CARDS_MOBILE = 2;
// Skeleton fallback dimensions (before ResizeObserver fires)
const SKEL_CARD_W = 200;
const SKEL_CARD_H = Math.round(SKEL_CARD_W * 16 / 9);
// Threshold in px: below this the row switches to compact (2-up) layout
const COMPACT_BREAKPOINT = 760;
function OutputsRow({ outputs, activeAudioId, onActivateAudio, onUpdate, onArrowChange }) {
const scrollRef = useShowRef(null);
const wrapperRef = useShowRef(null);
const cardWRef = useShowRef(200);
const initDoneRef = useShowRef(false); // prevent re-init on subsequent containerW updates
const [containerW, setContainerW] = useShowState(0);
const [canLeft, setCanLeft] = useShowState(true);
const [canRight, setCanRight] = useShowState(true);
const isCompact = containerW > 0 && containerW < COMPACT_BREAKPOINT;
const visibleCards = isCompact ? VISIBLE_CARDS_MOBILE : VISIBLE_CARDS_DESKTOP;
const cardW = containerW > 0
? Math.max(100, Math.floor((containerW - (visibleCards - 1) * CARD_GAP) / visibleCards))
: 200;
const cardH = Math.round(cardW * 16 / 9);
cardWRef.current = cardW;
// Infinite loop: triple the outputs so we always have cards on both sides
const canLoop = outputs && outputs.length > 1;
const loopedOutputs = canLoop ? [...outputs, ...outputs, ...outputs] : (outputs || []);
const origCount = outputs ? outputs.length : 0;
// Measure container
useShowEffect(() => {
const el = wrapperRef.current;
if (!el) return;
const measure = () => setContainerW(el.clientWidth);
measure();
const ro = new ResizeObserver(measure);
ro.observe(el);
return () => ro.disconnect();
}, []);
// Initialize scroll to middle set when container first measured
useShowEffect(() => {
if (!canLoop || containerW === 0 || initDoneRef.current) return;
const el = scrollRef.current;
if (!el) return;
const STEP = cardWRef.current + CARD_GAP;
el.scrollLeft = origCount * STEP;
initDoneRef.current = true;
}, [containerW, canLoop]);
// Silent boundary snap — keeps us in the middle set
const snapBoundary = () => {
if (!canLoop) return;
const el = scrollRef.current;
if (!el) return;
const STEP = cardWRef.current + CARD_GAP;
const singleW = origCount * STEP;
if (el.scrollLeft >= singleW * 2) {
el.scrollLeft -= singleW;
} else if (el.scrollLeft < STEP * 0.5 && el.scrollLeft >= 0) {
el.scrollLeft += singleW;
}
};
const fireUpdate = () => {
const el = scrollRef.current;
if (!el || !onUpdate) return;
const STEP = cardWRef.current + CARD_GAP;
const singleW = origCount * STEP;
// Modulo-wrap so SVG always gets scrollLeft within [0, singleW)
// even while smooth-scroll animation is playing through clone zone
let adjustedLeft = el.scrollLeft - (canLoop ? singleW : 0);
if (canLoop && singleW > 0) {
adjustedLeft = ((adjustedLeft % singleW) + singleW) % singleW;
}
onUpdate(adjustedLeft, el.clientWidth, cardWRef.current, CARD_GAP);
};
const updateArrows = () => {
const el = scrollRef.current;
if (!el) return;
snapBoundary();
// In loop mode arrows are always available
setCanLeft(canLoop || el.scrollLeft > 4);
setCanRight(canLoop || el.scrollLeft + el.clientWidth < el.scrollWidth - 4);
fireUpdate();
};
useShowEffect(() => {
const el = scrollRef.current;
if (!el) return;
updateArrows();
el.addEventListener('scroll', updateArrows, { passive: true });
return () => el.removeEventListener('scroll', updateArrows);
}, [outputs, containerW, isCompact]);
useShowEffect(() => { fireUpdate(); }, [containerW]);
// Bubble arrow state up
useShowEffect(() => {
if (!onArrowChange) return;
onArrowChange({ isCompact, canLeft, canRight, scroll });
}, [isCompact, canLeft, canRight]);
// Auto-advance every 8s (infinite — no end check needed)
useShowEffect(() => {
if (!canLoop) return;
const el = scrollRef.current;
if (!el) return;
const timer = setInterval(() => {
el.scrollBy({ left: cardWRef.current + CARD_GAP, behavior: 'smooth' });
}, 8000);
return () => clearInterval(timer);
}, [canLoop]);
const scroll = (dir) => {
const el = scrollRef.current;
if (el) el.scrollBy({ left: dir * (cardWRef.current + CARD_GAP), behavior: 'smooth' });
};
if (!outputs || outputs.length === 0) {
return (
žádné výstupy
);
}
// SVG-only arrow icon
const ArrowIcon = ({ dir }) => (
);
// Desktop: absolute arrows overlapping the scroll row
const desktopArrowBtn = (dir, visible, onClick) => (
);
// Right-edge fade mask when more cards exist beyond viewport
const showRightFade = canRight;
return (
{/* Scroll row */}
);
}
// ─── Single client showcase row ───────────────────────────────────
function ShowcaseRow({ client, idx, total, activeAudioId, onActivateAudio }) {
const outputs = client.outputs || [];
const originals = client.originals || [];
const count = outputs.length;
// Arrow state bubbled up from OutputsRow
const [arrowInfo, setArrowInfo] = useShowState({ isCompact: false, canLeft: false, canRight: false, scroll: null });
// Refs for imperative SVG connector updates (no re-render needed on scroll)
const pathsRef = useShowRef([]);
const svgRef = useShowRef(null);
const SVG_H = 110;
const uid = client.id || idx; // unique per row for gradient/marker IDs
const RowArrowIcon = ({ dir }) => (
);
const handleScrollUpdate = (scrollLeft, containerW, cardW, gap) => {
const cW = cardW || 200;
const g = gap || CARD_GAP;
const originX = containerW / 2;
// How many px of scroll travel the grow/retract animation spans
const fadeZone = cW * 0.5;
pathsRef.current.forEach((pathEl, i) => {
if (!pathEl) return;
const cardCenter = i * (cW + g) + cW / 2 - scrollLeft;
const cardLeft = cardCenter - cW / 2;
const cardRight = cardCenter + cW / 2;
// alpha: 0 = line fully retracted at origin, 1 = line fully extended to card
const leftAlpha = Math.min(1, Math.max(0, (cardLeft + fadeZone) / fadeZone));
const rightAlpha = Math.min(1, Math.max(0, (containerW - cardRight + fadeZone) / fadeZone));
const alpha = Math.min(leftAlpha, rightAlpha);
// Ease-out so the line shoots out quickly then settles
const t = 1 - Math.pow(1 - alpha, 2);
const dx = cardCenter - originX;
const p1x = originX;
const p1y = SVG_H - t * SVG_H * 0.65;
const p2x = originX + t * dx;
const p2y = SVG_H - t * SVG_H * 0.35;
const p3x = originX + t * dx;
const p3y = SVG_H * (1 - t);
pathEl.style.opacity = alpha > 0.01 ? '1' : '0';
if (alpha > 0.01) {
pathEl.setAttribute('d',
`M ${originX} ${SVG_H} C ${p1x} ${p1y} ${p2x} ${p2y} ${p3x} ${p3y}`
);
}
});
};
return (
{!isCompact && desktopArrowBtn(-1, canLeft, () => scroll(-1))}
{loopedOutputs.map((out, loopIdx) => (
{!isCompact && desktopArrowBtn(1, canRight, () => scroll(1))}
{/* Right edge fade — hints that more cards exist */}
{/* Left edge fade — desktop only */}
{!isCompact && (
)}
{/* Desktop: description above card */}
{!isCompact && out.description && (
))}
{out.description}
)}
{/* Compact: fixed-height label slot — always rendered for alignment */}
{isCompact && (
{out.label && (
{out.label}
)}
)}
{out.description && (
{out.description}
)}
)}
{/* Client meta + compact arrows */}
{/* Outputs row */}
);
}
// ─── Skeleton row ─────────────────────────────────────────────────
function ShowcaseSkeleton() {
return (
{client.name}
{arrowInfo.isCompact && (
{[-1, 1].map(dir => (
))}
)}
{client.description}
)}
{/* Header */}
);
}
// ─── Main Showcase section ────────────────────────────────────────
function Showcase() {
const { isMobile } = useBreakpoint();
const [clients, setClients] = useShowState([]);
const [loading, setLoading] = useShowState(true);
const [error, setError] = useShowState('');
// Shared audio state — only one video plays audio at a time across all clients
const [activeAudioId, setActiveAudioId] = useShowState(null);
useShowEffect(() => {
const db = firebase.firestore();
let cancelled = false;
const loadAll = async () => {
try {
const clientSnap = await db.collection('clients').orderBy('order', 'asc').get();
if (cancelled) return;
if (clientSnap.empty) {
setClients([]);
setLoading(false);
return;
}
const loaded = await Promise.all(
clientSnap.docs.map(async (doc) => {
const data = { id: doc.id, ...doc.data() };
const [origSnap, outSnap] = await Promise.all([
db.collection('clients').doc(doc.id).collection('originals').orderBy('order', 'asc').get(),
db.collection('clients').doc(doc.id).collection('outputs').orderBy('order', 'asc').get(),
]);
data.originals = origSnap.docs.map(d => ({ id: d.id, ...d.data() }));
data.outputs = outSnap.docs.map(d => ({ id: d.id, ...d.data() }));
return data;
})
);
if (!cancelled) {
setClients(loaded);
setLoading(false);
}
} catch (err) {
console.error('Showcase: error loading from Firestore', err);
if (!cancelled) {
setError('Nepodařilo se načíst data. Zkuste to znovu.');
setLoading(false);
}
}
};
loadAll();
return () => { cancelled = true; };
}, []);
return (
{[1, 2, 3, 4].map(i => (
{/* Connector */}
{error}
) : clients.length === 0 ? (
Žádní klienti. Přidejte je v admin panelu.
) : (
{clients.map((client, i) => (
)}