// ExerciseMedia — SVG muscle illustrations + thumbnail component // Supports future mediaUrl (image / GIF / video) per exercise // ── Group style tokens (shared with builder) ────────────────────────────────── const EXERCISE_GROUP_STYLE = { pecho: { from: '#0f2744', to: '#1d5bbf' }, espalda: { from: '#140d28', to: '#5a28c4' }, pierna: { from: '#091a09', to: '#177a2e' }, hombro: { from: '#271010', to: '#a83030' }, biceps: { from: '#071a28', to: '#0a8caa' }, triceps: { from: '#241a08', to: '#b56a00' }, core: { from: '#111111', to: '#444c5e' }, }; // ── SVG muscle-group illustrations ──────────────────────────────────────────── // viewBox 160×90, white fills at varying opacity on transparent bg const SVG_PECHO = () => ( {/* Shoulder caps — muted */} {/* Clavicles */} {/* Left pec — highlighted */} {/* Right pec — highlighted */} {/* Sternum */} {/* Upper arms — very muted */} {/* Core hint */} {/* Bottom fade */} ); const SVG_ESPALDA = () => ( {/* Trapezius */} {/* Left lat — highlighted */} {/* Right lat — highlighted */} {/* Spine dashes */} {/* Rear delts */} {/* Lower back */} ); const SVG_PIERNA = () => ( {/* Hip / glute */} {/* Left quad — highlighted */} {/* Right quad — highlighted */} {/* Left hamstring */} {/* Right hamstring */} {/* Left calf */} ); const SVG_HOMBRO = () => ( {/* Torso — muted */} {/* Clavicles */} {/* Left deltoid — highlighted */} {/* Right deltoid — highlighted */} {/* Front deltoid cap peak */} {/* Upper arms — muted */} ); const SVG_BICEPS = () => ( {/* Torso */} {/* Shoulder caps */} {/* Left upper arm base */} {/* Right upper arm base */} {/* Left bicep peak — highlighted */} {/* Right bicep peak — highlighted */} {/* Forearms */} {/* Curl arc */} ); const SVG_TRICEPS = () => ( {/* Torso */} {/* Shoulder caps */} {/* Left upper arm */} {/* Right upper arm */} {/* Left tricep horseshoe — highlighted */} {/* Right tricep horseshoe — highlighted */} {/* Extension lines */} ); const SVG_CORE = () => ( {/* Obliques */} {/* 6-pack grid — highlighted */} {/* Lower abs / transverse */} {/* Hip */} ); // ── Thumbnail component ──────────────────────────────────────────────────────── // Renders gradient + SVG illustration or real media if available const MUSCLE_SVG_MAP = { pecho: SVG_PECHO, espalda: SVG_ESPALDA, pierna: SVG_PIERNA, hombro: SVG_HOMBRO, biceps: SVG_BICEPS, triceps: SVG_TRICEPS, core: SVG_CORE, }; // ── Animated free-exercise-db image ────────────────────────────────────────── // free-exercise-db ships two frames per exercise (0.jpg = start, 1.jpg = end). // This crossfades them to suggest the movement — using ONLY images that are // already loaded/cached, no new assets. Performance safeguards: // • both frames preload; the crossfade only starts once BOTH have loaded (no // flicker), and never if the 2nd frame is missing (404) → static start frame // • pure opacity transitions on two stacked (compositor-only, no layout, // no per-frame React renders beyond one cheap state flip every ~1.2s) // • paused via IntersectionObserver whenever the card isn't on screen // • respects the "Animar ejercicios" pref (default on) and prefers-reduced-motion // Falls back to a single static frame whenever animation is off or unavailable. function AnimatedExerciseImage({ exercise, height, style, objectPosition = 'center', onFail }) { const { state } = useStore(); const id = exercise && exercise.id; const url0 = (typeof ExerciseImages !== 'undefined' && id) ? ExerciseImages.urlFor(id) : null; const url1 = (typeof ExerciseImages !== 'undefined' && id) ? ExerciseImages.url2For(id) : null; const prefOn = !state || state.prefs?.animateExercises !== false; // default ON const reduce = typeof window !== 'undefined' && window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)').matches : false; const wantAnimate = prefOn && !reduce && !!url1; const [err0, setErr0] = React.useState(false); const [loaded0, setLoaded0] = React.useState(false); const [loaded1, setLoaded1] = React.useState(false); const [err1, setErr1] = React.useState(false); const [phase, setPhase] = React.useState(0); const [visible, setVisible] = React.useState(true); const ref = React.useRef(null); const canAnimate = wantAnimate && loaded0 && loaded1 && !err1; React.useEffect(() => { const el = ref.current; if (!el || typeof IntersectionObserver === 'undefined') return; const io = new IntersectionObserver(([e]) => setVisible(e.isIntersecting), { threshold: 0.15 }); io.observe(el); return () => io.disconnect(); }, []); React.useEffect(() => { if (!canAnimate || !visible) return; const iv = setInterval(() => setPhase(p => (p === 0 ? 1 : 0)), 1200); return () => clearInterval(iv); }, [canAnimate, visible]); React.useEffect(() => { if (err0 && onFail) onFail(); }, [err0]); if (!url0 || err0) return null; const imgBase = { position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition, display: 'block', transition: 'opacity .6s ease', willChange: canAnimate ? 'opacity' : 'auto', }; return (
{(exercise setLoaded0(true)} onError={() => setErr0(true)} style={{ ...imgBase, opacity: canAnimate ? (phase === 0 ? 1 : 0) : 1 }} /> {url1 && !err1 && ( setLoaded1(true)} onError={() => setErr1(true)} style={{ ...imgBase, opacity: canAnimate && phase === 1 ? 1 : 0 }} /> )}
); } function ExerciseThumbnailMedia({ exercise, group, isAdded, height = 92, animate = false }) { const [dbImgOk, setDbImgOk] = React.useState(true); const gs = EXERCISE_GROUP_STYLE[group] || EXERCISE_GROUP_STYLE.core; const SvgComp = MUSCLE_SVG_MAP[group] || SVG_CORE; // 1. Exercise-specific media (video / gif / image) takes priority if (exercise.mediaUrl) { const s = { width: '100%', height, objectFit: 'cover', display: 'block' }; if (exercise.mediaType === 'video') { return (
); } return (
{exercise.name} {isAdded && }
); } // 1b. free-exercise-db photo mapped by exercise id — lazy-loaded, cached by // the service worker for offline. Falls through to the placeholder on error. const dbImg = (typeof ExerciseImages !== 'undefined' && exercise.id) ? ExerciseImages.urlFor(exercise.id) : null; if (dbImg && dbImgOk) { return (
{animate ? ( setDbImgOk(false)} /> ) : ( {exercise.name} setDbImgOk(false)} style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center', display: 'block' }} /> )} {/* subtle navy edge so the light photo sits in the design system */}
{exercise.compound && (
CPT
)} {/* Pie para imágenes aproximadas: "Imagen de referencia: variante…" */} {(() => { const note = (typeof ExerciseImages !== 'undefined' && ExerciseImages.approxNote) ? ExerciseImages.approxNote(exercise.id) : null; if (!note) return null; return (
Imagen de referencia: {note.replace(/\s*\(dudosa\)$/, '')}
); })()} {isAdded && }
); } // 2. No hay foto para este ejercicio → mapa muscular con el grupo trabajado // resaltado en azul, sobre el fondo de la tarjeta. Silueta SVG inline // (ligera) para que las listas largas sigan fluidas; sin peticiones de red. return (
{/* Mapa muscular (grupo trabajado) */}
{/* Recolorea la silueta blanca a azul de marca (multiply): azul×blanco=azul, azul×navy=navy, así solo el músculo queda resaltado en azul. */}
{/* Barra de acento azul */}
{exercise.compound && (
CPT
)} {isAdded && }
); } function AddedOverlay() { return (
✓
); } const ExerciseMedia = { Thumbnail: ExerciseThumbnailMedia, Animated: AnimatedExerciseImage, GROUP_STYLE: EXERCISE_GROUP_STYLE, SVGS: MUSCLE_SVG_MAP, }; Object.assign(window, { ExerciseMedia });