{rows.map((row, i) => (

{row.tiles.map(([slug, span]) => )}

))}

setHover(p)} onFocus={() => setHover(p)}> {p.title}

Got a project?
Get in touch.

Based in

cardiff, wales · {time}

Name Email Message

</label>
          <div className="rl-form__foot">
            <p className="rl-msg" role="status">
              {status === 'success' ? 'Thanks, i’ll reply soon.' : status === 'error' ? 'Something went wrong. Please email me directly instead.' : ''}
            </p>
            <button className="rl-send" type="submit" disabled={status === 'submitting'}>{status === 'submitting' ? 'Sending…' : 'Send'}</button>
          </div>
        </form>
      </div>
    </section>
  );
}

function About() {
  const time = useFClock(false);
  return (
    <main className="rl-about">
      <section className="rl-contact" aria-label="About">
        <h1>Director, editor<br />and colourist.</h1>
        <div className="rl-contact__grid">
          <div className="rl-direct">
            <div><span className="rl-caps">Based in</span><p>cardiff, wales · {time}</p></div>
            <div><span className="rl-caps">Since</span><p>2013</p></div>
            <div><span className="rl-caps">Training</span><p>self taught</p></div>
            <div><span className="rl-caps">Into</span><p>music, food, fashion and film</p></div>
          </div>
          <div className="rl-ab__body">
            <div className="rl-ab__bio">
              <p>I’m Sam. I focus my time on creating short films and music videos - but open to most things. I’m an entirely self taught videographer / cinematographer, colourist, director, editor, and all the other bits and bobs. I’m basically a one man army, and I love it.</p>
              <p>I’ve been editing videos for over 10 years, and shooting them for about 2, and after spending countless hours freelancing for other business promoting apps, energy efficiency schemes, restaurants, events and more I decided I wasn’t in it for the money - I was in it for the love of the game. That’s why I’ve recently decided to prioritise working on projects that I find exciting!</p>
              <p>If you’re looking to shoot, edit or need help directing a creative project, shoot me a message.</p>
            </div>
            <div className="rl-skills">
              <span className="rl-caps">What I do</span>
              <ul>{F_SKILLS.map((s) => <li key={s.name}>{s.name}</li>)}</ul>
            </div>
          </div>
        </div>
      </section>
      <Footer cta={false} />
    </main>
  );
}

function Contact() {
  return (
    <main>
      <ContactForm />
      <Footer cta={false} />
    </main>
  );
}

const FPlayIcon = {
  play: <svg viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="1.6" strokeLinejoin="round"><path d="M7 4.5v15l12-7.5z" /></svg>,
  pause: <svg viewBox="0 0 24 24" fill="#fff"><rect x="6.5" y="5" width="3.5" height="14" /><rect x="14" y="5" width="3.5" height="14" /></svg>,
  sound: <svg viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="1.6" strokeLinejoin="round" strokeLinecap="round"><path d="M4 9.5h3.5L12 6v12l-4.5-3.5H4z" /><path d="M15.5 9.5a3.5 3.5 0 0 1 0 5M18 7a7 7 0 0 1 0 10" /></svg>,
  muted: <svg viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="1.6" strokeLinejoin="round" strokeLinecap="round"><path d="M4 9.5h3.5L12 6v12l-4.5-3.5H4z" /><path d="M16 10l4 4M20 10l-4 4" /></svg>,
  full: <svg viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="1.6" strokeLinecap="round"><path d="M14 4h6v6M10 20H4v-6M20 4l-6.5 6.5M4 20l6.5-6.5" /></svg>,
  back: <svg viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M15 4l-8 8 8 8" /></svg>,
};

function Project({ slug, from }) {
  const p = fBySlug(slug);
  const isMobile = useFMedia(F_MOBILE_MQ);
  const box = React.useRef(null);
  const stage = React.useRef(null);
  const v = React.useRef(null);
  const [playing, setPlaying] = React.useState(false);
  const [muted, setMuted] = React.useState(false);
  const [blocked, setBlocked] = React.useState(false);
  const [buffering, setBuffering] = React.useState(true);
  const [t, setT] = React.useState(0);
  const [d, setD] = React.useState(0);
  const [idle, setIdle] = React.useState(false);
  const idleT = React.useRef(null);

// Step through the projects this device shows.
  const list = isMobile ? F_PROJECTS.filter((q) => !q.desktopOnly || q === p) : F_PROJECTS;
  const i = list.indexOf(p);
  const prev = list[(i - 1 + list.length) % list.length];
  const next = list[(i + 1) % list.length];
  const close = React.useCallback(() => fGo(from === 'latest' ? '' : from), [from]);

// Lock the page behind, Escape closes, arrows step through projects, space toggles.
  React.useEffect(() => {
    const prevOverflow = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    const k = (e) => {
      if (/^(INPUT|TEXTAREA)$/.test(e.target.tagName)) return;
      if (e.key === 'Escape') close();
      else if (e.key === 'ArrowRight' && e.shiftKey) fGo('project/' + next.slug);
      else if (e.key === 'ArrowLeft' && e.shiftKey) fGo('project/' + prev.slug);
      else if (e.key === ' ' && e.target === document.body) { e.preventDefault(); toggle(); }
    };
    document.addEventListener('keydown', k);
    return () => { document.body.style.overflow = prevOverflow; document.removeEventListener('keydown', k); };
  }, [close, next, prev]);

// Try to start with sound; browsers that refuse get a muted start and a hint.
  React.useEffect(() => {
    const el = v.current;
    if (!el) return;
    box.current && box.current.scrollTo(0, 0);
    setBlocked(false); setBuffering(true); setT(0); setD(0);
    el.muted = false; setMuted(false);
    el.play().catch(() => {
      el.muted = true; setMuted(true); setBlocked(true);
      el.play().catch(() => {});
    });
  }, [slug]);

const poke = () => {
    setIdle(false);
    clearTimeout(idleT.current);
    idleT.current = setTimeout(() => setIdle(true), 2600);
  };
  React.useEffect(() => () => clearTimeout(idleT.current), []);

return (
    <div className="rl-proj" ref={box} role="dialog" aria-modal="true" aria-label={p.title}>
      <div ref={stage} className={`rl-stage ${idle && playing ? 'is-idle' : ''}`} onMouseMove={poke} onTouchStart={poke}>
        <video
          ref={v}
          src={fVideoSrc(p)}
          onError={(e) => {
            const local = fLocalVideoSrc(p);
            if (!e.target.src.endsWith(local)) { e.target.src = local; e.target.play().catch(() => {}); }
          }}
          poster={isMobile ? fThumb(p) : fUrl(p.photo)}
          playsInline
          preload="metadata"
          controlsList="nodownload"
          onClick={toggle}
          onPlay={() => { setPlaying(true); poke(); }}
          onWaiting={() => setBuffering(true)}
          onCanPlay={() => setBuffering(false)}
          onPlaying={() => setBuffering(false)}
          onPause={() => { setPlaying(false); setIdle(false); }}
          onTimeUpdate={(e) => setT(e.target.currentTime)}
          onLoadedMetadata={(e) => setD(e.target.duration)}
          onEnded={() => fGo('project/' + next.slug)}
        />
        <div className="rl-stage__top">
          <a className="rl-back" href={from === 'latest' ? '#/' : '#/' + from} aria-label="Back">
            {FPlayIcon.back}
            <span>{p.title} · {p.kind} <em>{p.y}</em></span>
          </a>
        </div>
        {buffering && <div className="rl-stage__load" role="progressbar" aria-label="Loading video"><span className="rl-logo-fill rl-logo-fill--loop"><i /></span></div>}
        {blocked && <button className="rl-hint" onClick={toggleMute}>Tap for sound</button>}
        <div className="rl-ctrls">
          <button className="rl-ic" onClick={toggle} aria-label={playing ? 'Pause' : 'Play'}>{playing ? FPlayIcon.pause : FPlayIcon.play}</button>
          <button className="rl-ic" onClick={toggleMute} aria-label={muted ? 'Unmute' : 'Mute'}>{muted ? FPlayIcon.muted : FPlayIcon.sound}</button>
          <input
            className="rl-scrub" type="range" min="0" max={d || 0} step="0.01" value={t} aria-label="Seek"
            style={{ '--p': pct + '%' }}
            onChange={(e) => { const s = +e.target.value; v.current.currentTime = s; setT(s); }}
          />
          <span className="rl-tc">{fTime(t)} / {fTime(d)}</span>
          <button className="rl-ic" onClick={full} aria-label="Full screen">{FPlayIcon.full}</button>
        </div>
      </div>

<section className="rl-notes">
        <div>
          <h2>{p.title}</h2>
          <div className="rl-notes__meta rl-caps">{p.kind}</div>
        </div>
      </section>
      <div className="rl-next">
        <Tile p={prev} span={1} />
        <Tile p={next} span={1} />
      </div>
    </div>
  );
}

// On Latest the logo sits big in the middle of the trailer, then shrinks up
// into the top of the bar over the first ~two wheel notches of scrolling. The
// bar starts as just the nav row and grows to make room for it, then turns
// see-through once the trailer has scrolled away. Everywhere else, and on
// on phones, the logo is already parked in a full, solid bar.
const F_MARK_END = 44;
const F_MARK_SCROLL = 220;

function Bar({ view }) {
  const cur = (v) => (view === v ? 'page' : undefined);
  return (
    <header className="rl-bar">
      <nav className="rl-nav" aria-label="Main">
        <a href="#/" aria-current={cur('latest')}>Latest</a>
        <a href="#/index" aria-current={cur('index')}>Index</a>
        <a href="#/about" aria-current={cur('about')}>About</a>
        <a href="#/contact" aria-current={cur('contact')}>Contact</a>
      </nav>
    </header>
  );
}

// Always open at the top so Latest starts on the letterboxed trailer, not a
// restored scroll position with it already zoomed in.
if ('scrollRestoration' in history) history.scrollRestoration = 'manual';

// Drives the #boot logo loader from index.html: fills the logo as the images
// and the trailer on the first screen load, then fades it out. Gives up after
// F_BOOT_MAX so a slow file never holds the page.
const F_BOOT_MIN = 700;
const F_BOOT_MAX = 6000;

function useBootLoader() {
  React.useEffect(() => {
    const boot = document.getElementById('boot');
    if (!boot) return;
    const fill = boot.querySelector('i');
    const start = performance.now();
    let finished = false;
    let gone = false;

// On desktop Latest, sit the loader logo exactly over the big logo it hands
    // over to (the trailer's centre isn't the screen's centre). The page keeps
    // settling while it loads, so follow it every frame until the loader is gone.
    const logo = boot.querySelector('.rl-logo-fill');
    let follow = 0;
    const align = () => {
      if (gone) return;
      follow = requestAnimationFrame(align);
      // Target where Mark rests at the top of the page: centred on the trailer,
      // at the img's own height.
      const hero = document.querySelector('.rl-hero');
      const m = document.querySelector('.rl-mark img');
      if (!hero || !m || !m.offsetHeight || window.matchMedia(F_MOBILE_MQ).matches) { logo.style.cssText = ''; return; }
      // The loader logo stays centred in #boot; nudge it onto the trailer's centre.
      const r = hero.getBoundingClientRect(), o = boot.getBoundingClientRect();
      const h = m.offsetHeight, w = h * 1518 / 1728;
      const dx = r.left + r.width / 2 - (o.left + o.width / 2);
      const dy = r.top + r.height / 2 - (o.top + o.height / 2);
      Object.assign(logo.style, { width: w + 'px', height: h + 'px', transform: `translate(${dx}px, ${dy}px)` });
    };

// Wait a frame so the first page has rendered, then collect what's on screen.
    const raf = requestAnimationFrame(() => {
      align();
      const onScreen = (el) => el.getBoundingClientRect().top < window.innerHeight;
      const imgs = [...document.querySelectorAll('.rl img')].filter(onScreen);
      const vids = [...document.querySelectorAll('.rl-hero video')];
      const total = imgs.length + vids.length;
      if (!total) return finish();
      let done = 0;
      const tick = () => { done++; setP(0.3 + 0.7 * (done / total)); if (done >= total) finish(); };
      imgs.forEach((img) => {
        if (img.complete) tick();
        else { img.addEventListener('load', tick, { once: true }); img.addEventListener('error', tick, { once: true }); }
      });
      vids.forEach((v) => {
        if (v.readyState >= 3) tick();
        else { v.addEventListener('canplay', tick, { once: true }); v.addEventListener('error', tick, { once: true }); }
      });
    });
    const cap = setTimeout(finish, F_BOOT_MAX);
    return () => { cancelAnimationFrame(raf); cancelAnimationFrame(follow); clearTimeout(cap); };
  }, []);
}

const project = route.view === 'project' && fBySlug(route.slug) ? route.slug : null;

return (
    <div className={`rl ${base === 'latest' ? 'rl--latest' : ''}`}>
      <style>{F_CSS}</style>
      <Bar view={project ? base : route.view} />
      {base === 'index' ? <IndexView /> : base === 'about' ? <About /> : base === 'contact' ? <Contact /> : <Latest />}
      <Mark view={base} />
      {project && <Project key="proj" slug={project} from={base} />}
    </div>
  );
}

window.DirectionF = DirectionF;