Afficher les séances de son cinéma sur son site, en HTML et JavaScript

<div class="cinema-showtimes" data-cinema="le-champo-paris-5e-arrondissement" data-days="7"></div>
<script src="showtimes.js" defer></script>

navigateur ──GET showtimes.php?cinema=…──▶ votre serveur ──Bearer clé──▶ API Cinéma
 (sans clé)                                 (la clé, un cache de 2 h)

curl "https://api.api-cinema.com/v1/cinemas?q=champo" -H "Authorization: Bearer ac_live_…"

<?php
// Relais entre la page et API Cinéma : garde la clé, met le programme de chaque cinéma en cache deux heures,
// ne répond qu'à GET showtimes.php?cinema=<slug>&days=<1-14>. À déposer à côté de showtimes.js.
define('API_CINEMA_KEY', 'ac_live_…');
const CACHE_SECONDS = 2 * 3600;

$cinema = $_GET['cinema'] ?? '';
$days = max(1, min(14, (int) ($_GET['days'] ?? 7)));
header('Content-Type: application/json; charset=utf-8');
if (!preg_match('/^[a-z0-9]+(?:-[a-z0-9]+)*$/', $cinema) || strlen($cinema) > 80) {
    http_response_code(400);
    exit('{"error":"invalid cinema"}');
}

$cacheFile = sys_get_temp_dir() . '/api-cinema-' . $cinema . '-' . $days . '.json';
if (is_file($cacheFile) && filemtime($cacheFile) > time() - CACHE_SECONDS) {
    header('X-Cache: hit');
    readfile($cacheFile);
    exit;
}

$url = 'https://api.api-cinema.com/v1/cinemas/' . rawurlencode($cinema) . '/showtimes?' . http_build_query([
    'to' => date('Y-m-d', strtotime('+' . ($days - 1) . ' days')),
    'include' => 'movie',
    'limit' => 1000,
]);
$body = @file_get_contents($url, false, stream_context_create(['http' => [
    'header' => 'Authorization: Bearer ' . API_CINEMA_KEY,
    'timeout' => 10,
    'ignore_errors' => true,
]]));
$status = isset($http_response_header[0]) && preg_match('#HTTP/\S+ (\d{3})#', $http_response_header[0], $m) ? (int) $m[1] : 0;
if ($status === 404) {
    http_response_code(404);
    exit('{"error":"unknown cinema"}');
}
$data = $status === 200 ? json_decode($body, true)['data'] ?? null : null;

if ($data === null) {
    if (is_file($cacheFile)) { // l'API ne répond pas : le dernier programme plutôt que rien
        header('X-Cache: stale');
        readfile($cacheFile);
        exit;
    }
    http_response_code(502);
    exit('{"error":"api unavailable"}');
}

$json = json_encode($data, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES);
file_put_contents($cacheFile, $json, LOCK_EX);
header('X-Cache: miss');
echo $json;

// Remplit chaque <div class="cinema-showtimes" data-cinema="…"> avec le programme du cinéma, jour par jour, film par film.
// La page ne contient jamais la clé API : elle interroge votre relais (showtimes.php ou server.js), qui appelle API Cinéma.
const TEXT = { loading: 'Chargement du programme…', empty: 'Aucune séance dans les jours qui viennent.', error: 'Programme indisponible pour le moment.' }
const LANG = document.documentElement.lang || navigator.language
const dayFormat = new Intl.DateTimeFormat(LANG, { weekday: 'long', day: 'numeric', month: 'long' })

document.querySelectorAll('.cinema-showtimes[data-cinema]').forEach(fill)

async function fill(root) {
  root.textContent = TEXT.loading
  const params = new URLSearchParams({ cinema: root.dataset.cinema, days: root.dataset.days || '7' })
  try {
    const res = await fetch(`${root.dataset.relay || 'showtimes.php'}?${params}`)
    if (!res.ok)
      throw new Error(`relay ${res.status}`)
    const showtimes = await res.json()
    root.replaceChildren(...(showtimes.length ? render(showtimes) : [el('p', TEXT.empty)]))
  }
  catch (err) {
    console.error(err)
    root.textContent = TEXT.error
  }
}

// Une <section> par jour, un <article> par film, un lien par séance (texte simple quand le cinéma n'a pas de réservation en ligne).
function render(showtimes) {
  const days = new Map()
  for (const s of showtimes) {
    const day = s.startsAt.slice(0, 10)
    if (!days.has(day))
      days.set(day, new Map())
    const films = days.get(day)
    if (!films.has(s.movie.id))
      films.set(s.movie.id, { movie: s.movie, times: [] })
    films.get(s.movie.id).times.push(s)
  }

  return [...days].map(([day, films]) => {
    const section = el('section', '', { class: 'cs-day' })
    section.append(el('h2', dayFormat.format(new Date(`${day}T12:00:00`))))
    for (const { movie, times } of films.values()) {
      const article = el('article', '', { class: 'cs-film' })
      if (movie.posterUrl)
        article.append(el('img', '', { src: movie.posterUrl, alt: '', loading: 'lazy', width: 60 }))
      const body = el('div', '', { class: 'cs-body' })
      body.append(el('h3', movie.title))
      const meta = [movie.durationMin && `${movie.durationMin} min`, movie.director].filter(Boolean).join(' · ')
      if (meta)
        body.append(el('p', meta, { class: 'cs-meta' }))
      const list = el('p', '', { class: 'cs-times' })
      for (const s of times) {
        const label = s.startsAt.slice(11, 16) + (s.version !== 'VF' ? ` ${s.version}` : '') + (s.format !== '2D' ? ` ${s.format}` : '')
        list.append(s.bookingUrl ? el('a', label, { href: s.bookingUrl, target: '_blank', rel: 'noopener nofollow' }) : el('span', label))
      }
      body.append(list)
      article.append(body)
      section.append(article)
    }
    return section
  })
}

// Un nœud texte, jamais du HTML : titres et liens viennent des sites des cinémas.
function el(tag, text, attrs = {}) {
  const node = document.createElement(tag)
  if (text)
    node.textContent = text
  for (const [k, v] of Object.entries(attrs)) node.setAttribute(k, v)
  return node
}

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Le Champo : le programme de la semaine</title>
  <link rel="stylesheet" href="showtimes.css">
</head>
<body>
  <h1>Le Champo</h1>
  <p>51 rue des Écoles, Paris 5e</p>

  <div class="cinema-showtimes" data-cinema="le-champo-paris-5e-arrondissement" data-days="7"></div>

  <script src="showtimes.js" defer></script>
</body>
</html>

.cinema-showtimes { max-width: 40rem; font-family: system-ui, sans-serif; }
.cs-day h2 { margin: 1.5em 0 0.5em; font-size: 1.1rem; }
.cs-day h2::first-letter { text-transform: uppercase; }
.cs-film { display: flex; gap: 0.8rem; margin: 0.8em 0; }
.cs-film img { width: 60px; height: 90px; object-fit: cover; border-radius: 4px; }
.cs-film h3 { margin: 0; font-size: 1rem; }
.cs-meta { margin: 0.1em 0; color: #666; font-size: 0.85rem; }
.cs-times { margin: 0.3em 0; }
.cs-times a, .cs-times span {
  display: inline-block; margin: 0.15em 0.3em 0.15em 0; padding: 0.15em 0.5em;
  border: 1px solid currentColor; border-radius: 4px; text-decoration: none; font-variant-numeric: tabular-nums;
}

import { readFile } from 'node:fs/promises'
// Relais Node.js, sans dépendance : sert le dossier public/ et GET /showtimes?cinema=<slug>&days=<1-14>.
// Lancer avec API_CINEMA_KEY=ac_live_… node server.js, puis ouvrir http://localhost:3000.
import { createServer } from 'node:http'
import { extname, join, normalize } from 'node:path'

const KEY = process.env.API_CINEMA_KEY
const PORT = process.env.PORT || 3000
const CACHE_MS = 2 * 3600 * 1000
const cache = new Map() // "slug|days" → { at, body }
const TYPES = { '.html': 'text/html; charset=utf-8', '.js': 'text/javascript', '.css': 'text/css', '.png': 'image/png', '.svg': 'image/svg+xml' }

createServer(async (req, res) => {
  const url = new URL(req.url, 'http://localhost')
  if (url.pathname === '/showtimes')
    return showtimes(url, res)
  const file = url.pathname === '/' ? '/index.html' : normalize(url.pathname)
  try {
    const body = await readFile(join('public', file))
    res.writeHead(200, { 'Content-Type': TYPES[extname(file)] || 'application/octet-stream' }).end(body)
  }
  catch {
    res.writeHead(404).end('Not found')
  }
}).listen(PORT, () => console.log(`http://localhost:${PORT}`))

async function showtimes(url, res) {
  const cinema = url.searchParams.get('cinema') || ''
  const days = Math.max(1, Math.min(14, Number(url.searchParams.get('days')) || 7))
  if (!/^[a-z0-9]+(?:-[a-z0-9]+)*$/.test(cinema) || cinema.length > 80)
    return json(res, 400, '{"error":"invalid cinema"}')

  const key = `${cinema}|${days}`
  const hit = cache.get(key)
  if (hit && Date.now() - hit.at < CACHE_MS)
    return json(res, 200, hit.body, 'hit')

  const to = new Date(Date.now() + (days - 1) * 86_400_000).toISOString().slice(0, 10)
  try {
    const api = await fetch(`https://api.api-cinema.com/v1/cinemas/${cinema}/showtimes?to=${to}&include=movie&limit=1000`, {
      headers: { Authorization: `Bearer ${KEY}` },
      signal: AbortSignal.timeout(10_000),
    })
    if (api.status === 404)
      return json(res, 404, '{"error":"unknown cinema"}')
    if (!api.ok)
      throw new Error(`API Cinéma ${api.status}`)
    const body = JSON.stringify((await api.json()).data)
    cache.set(key, { at: Date.now(), body })
    json(res, 200, body, 'miss')
  }
  catch (err) {
    console.error(err)
    if (hit)
      return json(res, 200, hit.body, 'stale') // l'API ne répond pas : le dernier programme plutôt que rien
    json(res, 502, '{"error":"api unavailable"}')
  }
}

function json(res, status, body, cacheHeader) {
  res.writeHead(status, { 'Content-Type': 'application/json; charset=utf-8', ...(cacheHeader && { 'X-Cache': cacheHeader }) })
  res.end(body)
}

echo '{"type":"module"}' > package.json
API_CINEMA_KEY=ac_live_… node server.js