doc: change demo screenshot

change website
chore: bump version to 0.0.9
2025-06-07 21:09:05 +02:00 · 2025-06-07 21:06:03 +02:00 · 2025-06-07 21:04:25 +02:00 · 2025-06-07 10:34:31 +02:00 · 2025-05-25 02:52:27 +02:00 · 2025-05-25 02:50:59 +02:00
7 changed files with 294 additions and 114 deletions
--- a/CloudronManifest.json
+++ b/CloudronManifest.json
@ -12,7 +12,7 @@
    "localstorage": {}
  },
  "manifestVersion": 2,
-  "website": "https://zoemp.be/cine-kids",
+  "website": "https://cinekids.info",
  "contactEmail": "morgan@zoemp.be",
  "icon": "file://logo.png",
  "tags": [
--- a/2
+++ b/2
@ -1 +1 @@
-0.0.5
+0.0.9
--- a/bump_version.sh
+++ b/bump_version.sh
@ -36,3 +36,4 @@ echo "Version bumped to $NEW_VERSION"
 git add VERSION
 git tag "v$MAJOR.$MINOR.$PATCH"
 git push origin "v$MAJOR.$MINOR.$PATCH"
 git push origin --tags
--- a/doc/demo.webp
+++ b/doc/demo.webp
--- a/merge.js
+++ b/merge.js
@ -24,6 +24,10 @@ function getMatchScore(film, query) {
  return 10;
 }
 function stripSeason(title) {
  return normalizeTitle(title).replace(/(saison|season)\s*\d+/g, '').trim();
 }
 function mergeResults(arrays, query = '', limit = 5) {
  const merged = [];
  arrays.flat().forEach(entry => {
@ -31,7 +35,19 @@ function mergeResults(arrays, query = '', limit = 5) {
    let foundIdx = -1;
    for (let i = 0; i < merged.length; i++) {
      const m = merged[i];
-      // Match same year AND at least one significant word in common
+
      // Regroup series/seasons from same source if base title matches (strip "season X"/"saison X")
      const isSeason = /saison|season/i.test(entry.title) && /saison|season/i.test(m.title);
      if (
        m.results[0] && m.results[0].source === entry.source &&
        isSeason &&
        stripSeason(m.title) === stripSeason(entry.title)
      ) {
        foundIdx = i;
        break;
      }
      // Default merge: Match same year AND at least one significant word in common
      if (
        (m.year ? m.year.toString() : '') === entryYear &&
        hasSignificantWordOverlap(entry.title, m.title)
@ -41,7 +57,6 @@ function mergeResults(arrays, query = '', limit = 5) {
      }
    }
    if (foundIdx >= 0) {
      console.log(`[MERGE] ${entry.title} (${entryYear}) merged with ${merged[foundIdx].title} (${entryYear})`);
      merged[foundIdx].results.push({ source: entry.source, ...entry });
    } else {
      merged.push({
@ -57,6 +72,17 @@ function mergeResults(arrays, query = '', limit = 5) {
  if (query) {
    out.forEach(f => f.__score = getMatchScore(f, query));
    out = out.sort((a, b) => b.__score - a.__score);
    // PATCH: filter only films with ALL significant query words in title
    const normQuery = query.trim().toLowerCase();
    const skip = new Set(['the','le','la','les','de','du','des','and','et','a','an','un','une','dans','en','on']);
    const queryWords = normQuery.split(/\s+/).filter(w => w.length > 3 && !skip.has(w));
    if (queryWords.length) {
      out = out.filter(film => {
        const title = (film.title || '').toLowerCase();
        return queryWords.every(qw => title.includes(qw));
      });
    }
  }
  // Remove internals, trim to limit
  return out.slice(0, limit).map(f => {
--- a/package-lock.json
+++ b/package-lock.json
@ -13,8 +13,7 @@
        "cheerio": "^1.0.0",
        "cors": "^2.8.5",
        "express": "^5.1.0"
-      },
+      }
      "devDependencies": {}
    },
    "node_modules/accepts": {
      "version": "2.0.0",
--- a/public/index.html
+++ b/public/index.html
@ -2,12 +2,13 @@
 <html lang="fr">
 <head>
  <meta charset="UTF-8">
-  <title>Agrégateur Multi-Source</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>CineKids: Recommandations d'âge requis pour films et séries tv :-)</title>
  <style>
    body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: #1a1a1a; color: #e0e0e0; margin: 0; padding: 20px; font-size: 14px; }
    .container { max-width: 1200px; margin: auto; }
    h1 { color: #fff; text-align: center; }
-    .searchbox { margin: 20px 0 30px; display: flex; justify-content: center; }
+    .searchbox { margin: 20px 0 30px; display: flex; justify-content: center; align-items:center; }
    input[type="text"] { font-size: 1.1em; width: clamp(200px, 60%, 500px); background: #2c2c2c; color: #fff; border: 1px solid #444; border-radius: 4px; padding: 10px 12px; }
    button { font-size: 1.1em; padding: 10px 18px; background: #007aff; color: #fff; border-radius: 4px; border: none; margin-left: 10px; cursor: pointer; transition: background-color 0.2s; }
    button:hover { background: #005bb5; }
@ -28,20 +29,81 @@
    .year { color: #aaa; }
    .loader { text-align: center; font-size: 1.2em; color: #888; }
    .no-results { text-align: center; font-size: 1.1em; color: #999; margin-top:30px;}
    .maxagebox { display:flex;align-items:center;margin-left:25px;}
    .slider-age-badge {
      font-size:1.25em;font-weight:bold;
      color:#fff;border-radius:0.5em;padding:2px 10px;
      min-width:2.5em;display:inline-block;letter-spacing:0.05em;
      margin-left:10px;transition:background 0.2s;
    }
    @media (max-width: 800px) {
      .searchbox {
        flex-direction: column;
        align-items: stretch;
      }
      .searchbox input[type="text"] {
        width: 100%;
        margin-bottom: 10px;
      }
      .searchbox button {
        margin-left: 0;
        margin-bottom: 10px;
      }
      .maxagebox {
        margin-left: 0;
        margin-top: 10px;
        justify-content: center;
      }
      .results-table,
      .results-table tbody,
      .results-table tr,
      .results-table td {
        display: block;
        width: 100% !important;
      }
      .results-table thead {
        display: none;
      }
      .results-table tr {
        margin-bottom: 20px;
        border-bottom: 1px solid #333;
      }
      .results-table td {
        border: none;
        padding: 10px 0;
        text-align: left;
      }
      .results-table td:first-child div {
        font-size: 1.2em;
        margin-bottom: 10px;
      }
      .results-table img,
      .source-block img {
        width: 100% !important;
        height: auto !important;
        display: block;
        margin: 10px 0 !important;
        float: none !important;
      }
    }
  </style>
 </head>
 <body>
  <div class="container">
    <img src="/logo.png" alt="Logo CineKids" style="display:block;margin:30px auto 10px;max-width:130px;height:auto;">
-    <h1>Ciné-agrégateur Multi-Source</h1>
+    <h1>CinéKids - Recommandations d'âge requis pour films et séries tv</h1>
    <div class="searchbox">
      <input type="text" id="q" placeholder="Ex: Dune, Spider-Man, Oppenheimer..." />
      <button onclick="search()">Rechercher</button>
      <div class="maxagebox">
        <label for="maxAge" style="margin-right:9px;">Âge max :</label>
        <input type="range" id="maxAge" min="3" max="21" value="21" step="1" style="vertical-align:middle;width:140px;" oninput="updateMaxAgeDisplay()">
        <span id="maxAgeDisplay" class="slider-age-badge">21+</span>
      </div>
    </div>
    <div id="films"></div>
  </div>
 <script>
  // Age color logic
  function getAgeColor(age) {
    age = parseInt(age, 10);
    if (isNaN(age)) return '#999';
@ -52,7 +114,6 @@
    if (age <= 18) return '#ff6384';
    return '#e2525c';
  }
  // Show a big colored badge for age, else fallback
  function ageBadge(age) {
    if (!age) return '';
    const c = getAgeColor(age);
@ -71,21 +132,65 @@
      letter-spacing:0.03em;
    ">${age}+</span>`;
  }
  // Truncate summary at N chars, add ellipsis
  function shortSummary(str, n = 200) {
    if (!str) return '-';
    if (str.length <= n) return str;
    return str.slice(0, n).replace(/\s+\S*$/, '') + '…';
  }
  function getAllAges(results) {
    const ages = [];
    results.forEach(r => {
      if (r.source === 'commonsense' && r.age && !isNaN(parseInt(r.age))) {
        ages.push(parseInt(r.age));
      }
      else if (r.source === 'cinecheck') {
        if (Array.isArray(r.normalizedMarks) && r.normalizedMarks.length) {
          r.normalizedMarks.forEach(a => { if (!isNaN(parseInt(a))) ages.push(parseInt(a)); });
        } else if (r.marks && r.marks.length) {
          r.marks.forEach(a => {
            const n = parseInt(a);
            if (!isNaN(n)) ages.push(n);
          });
        }
      }
      else if (r.source === 'filmages') {
        if (r.details && r.details.ageLegal && !isNaN(parseInt(r.details.ageLegal))) {
          ages.push(parseInt(r.details.ageLegal));
        }
        if (r.details && r.details.ageSuggested && !isNaN(parseInt(r.details.ageSuggested))) {
          ages.push(parseInt(r.details.ageSuggested));
        }
      }
      else if (r.age && !isNaN(parseInt(r.age))) {
        ages.push(parseInt(r.age));
      }
    });
    return ages;
  }
  function updateMaxAgeDisplay() {
    var el = document.getElementById('maxAge');
    var badge = document.getElementById('maxAgeDisplay');
    var val = el.value || 21;
    badge.textContent = val + '+';
    badge.style.background = getAgeColor(val);
  }
  let lastQuery = '';
  let lastResults = [];
-  async function search() {
+  async function search(force = false) {
    const query = document.getElementById('q').value.trim();
    if (!query) return;
-    window.history.replaceState({}, '', '?q=' + encodeURIComponent(query));
+    const maxAge = parseInt(document.getElementById('maxAge').value, 10);
    window.history.replaceState({}, '', '?q=' + encodeURIComponent(query) + (maxAge < 21 ? `&maxAge=${maxAge}` : ''));
    const filmsDiv = document.getElementById('films');
    filmsDiv.innerHTML = '<p class="loader">Searching...</p>';
    // Si on a déjà cherché ce terme, et pas force, on ne refait pas le fetch
    if (!force && lastQuery === query && lastResults.length) {
      renderFilms(filterFilmsByMaxAge(lastResults, maxAge));
      return;
    }
    try {
      const base = window.location.origin;
      const response = await fetch(`${base}/search?q=${encodeURIComponent(query)}`);
@ -93,13 +198,52 @@
        filmsDiv.innerHTML = `<p class="no-results">Error: ${response.status} ${response.statusText || 'Backend unreachable.'}</p>`;
        return;
      }
-      const films = await response.json();
+      let films = await response.json();
      films = films.map(film => {
        film.results = film.results.filter(r => {
          let hasDescription =
            (r.summary && r.summary.length >= 8) ||
            (r.parentsNeedToKnow && r.parentsNeedToKnow.length >= 8) ||
            (r.details && r.details.summary && r.details.summary.length >= 8);
          let ages = getAllAges([r]);
          let hasAge = ages && ages.length > 0;
          return hasDescription && hasAge;
        });
        return film;
      }).filter(film => film.results.length > 0);
-      if (!Array.isArray(films) || !films.length) {
+      lastQuery = query;
-        filmsDiv.innerHTML = '<p class="no-results">No results. Try another query.</p>';
+      lastResults = films;
-        return;
+      renderFilms(filterFilmsByMaxAge(films, maxAge));
    } catch (error) {
      console.error('Search function error:', error);
      filmsDiv.innerHTML = `<p class="no-results">Search failed. Check the console.</p>`;
    }
  }
  function filterFilmsByMaxAge(films, maxAge) {
    if (!isFinite(maxAge)) return films;
    return films.filter(film => {
      const uniqueResults = [];
      const seenSources = new Set();
      film.results.forEach(r => {
        if (!seenSources.has(r.source)) {
          uniqueResults.push(r);
          seenSources.add(r.source);
        }
      });
      const ages = getAllAges(uniqueResults);
      if (ages.length === 0) return true;
      return Math.max(...ages) <= maxAge;
    });
  }
  function renderFilms(films) {
    const filmsDiv = document.getElementById('films');
    if (!films.length) {
      filmsDiv.innerHTML = '<p class="no-results">No results for this max age.</p>';
      return;
    }
    let html = `<table class="results-table">
      <thead>
        <tr>
@ -109,30 +253,32 @@
        </tr>
      </thead>
      <tbody>`;
    films.forEach(film => {
        // Get first non-empty image from sources
      const allImgs = film.results.map(r => r.img).filter(Boolean);
      const mainImg = allImgs.length ? allImgs[0] : null;
      html += `<tr>
        <td style="vertical-align:top;">
          <div style="text-align:center;">
            <div style="font-weight:bold;margin-bottom:0.7em;">${film.title || 'Unknown title'}</div>
-              ${mainImg ? `<img src="${mainImg}" alt="Poster for ${film.title}" style="display:block;margin:auto;max-width:100px;max-height:150px;border-radius:5px;box-shadow:0 2px 8px #0003;margin-bottom:10px;">` : ''}
+            ${mainImg ? `<img src="${mainImg}" alt="Poster for ${film.title}" style="display:block;margin:auto;max-width:200px;max-height:250px;border-radius:5px;box-shadow:0 2px 8px #0003;margin-bottom:10px;">` : ''}
          </div>
        </td>
        <td class="year" style="vertical-align:top;">${film.year || 'N/A'}</td>
        <td>`;
-
+      const uniqueResults = [];
      const seenSources = new Set();
      film.results.forEach(r => {
        if (!seenSources.has(r.source)) {
          uniqueResults.push(r);
          seenSources.add(r.source);
        }
      });
      uniqueResults.forEach(r => {
        html += `<div class="source-block">`;
        html += `<p class="source-name">${r.source.charAt(0).toUpperCase() + r.source.slice(1)}</p>`;
          // (No image here anymore)
        if (r.link) {
          html += `<p><a href="${r.link}" target="_blank">View details</a></p>`;
        }
          // CommonSense Media
        if (r.source === 'commonsense') {
          html += `<p><b>Recommended age:</b> ${ageBadge(r.age)}</p>`;
          html += `<p><b>Summary (CSM):</b> ${shortSummary(r.summary || r.parentsNeedToKnow)}</p>`;
@ -144,7 +290,6 @@
            html += `</ul>`;
          }
        }
          // Cinecheck
        else if (r.source === 'cinecheck') {
          let numericAges = Array.isArray(r.normalizedMarks) && r.normalizedMarks.length
            ? r.normalizedMarks
@ -159,7 +304,6 @@
            html += `<p><b>Pictograms (Cinecheck):</b> ${r.details.map(d => d.type).join(', ') || '-'}</p>`;
          }
        }
          // Filmages
        else if (r.source === 'filmages') {
          html += `<p><b>Original title (Filmages):</b> ${r.details.titleOriginalPage || r.details.titleOriginal || '-'}</p>`;
          html += `<p><b>Legal age (Filmages):</b> ${ageBadge(r.details.ageLegal)}</p>`;
@ -167,13 +311,12 @@
          html += `<p><b>Summary (Filmages):</b> ${shortSummary(r.details.summary)}</p>`;
          html += `<p><b>Synthesis (Filmages):</b> ${shortSummary(r.details.synthesis, 100)}</p>`;
          if (r.details.indications && r.details.indications.length) {
-              html += `<p><b>Indications:</b> ${r.details.indications.join(', ')}</p>`;
+            html += `<p><b>Indications:</b> ${shortSummary(r.details.indications.join(', '), 100)}</p>`;
          }
          if (r.details.counterIndications && r.details.counterIndications.length) {
-              html += `<p><b>Contra-indications:</b> ${r.details.counterIndications.join(', ')}</p>`;
+            html += `<p><b>Contra-indications:</b> ${shortSummary(r.details.counterIndications.join(', '), 100)}</p>`;
          }
        }
          // Fallback
        else {
          html += `<p><b>Summary:</b> ${shortSummary(r.summary)}</p>`;
          html += `<p><b>Age:</b> ${ageBadge(r.age)}</p>`;
@ -182,23 +325,34 @@
      });
      html += `</td></tr>`;
    });
    html += '</tbody></table>';
    filmsDiv.innerHTML = html;
    } catch (error) {
      console.error('Search function error:', error);
      filmsDiv.innerHTML = `<p class="no-results">Search failed. Check the console.</p>`;
    }
  }
  document.getElementById('maxAge').addEventListener('input', function() {
    updateMaxAgeDisplay();
    // Pas de fetch, juste filtre en front
    const query = document.getElementById('q').value.trim();
    if (!query || !lastResults.length) return;
    const maxAge = parseInt(document.getElementById('maxAge').value, 10);
    renderFilms(filterFilmsByMaxAge(lastResults, maxAge));
  });
  window.addEventListener('DOMContentLoaded', () => {
    const params = new URLSearchParams(window.location.search);
    const q = params.get('q');
    const maxAge = params.get('maxAge');
    if (maxAge) {
      document.getElementById('maxAge').value = maxAge;
      updateMaxAgeDisplay();
    }
    if (q) {
      document.getElementById('q').value = q;
-	search();
+      search(true); // force fetch initiale
    }
  });
-  document.getElementById('q').addEventListener('keydown', e => { if (e.key === 'Enter') search(); });
+  document.getElementById('q').addEventListener('keydown', e => { if (e.key === 'Enter') search(true); });
 </script>
 </body>
 </html>
Author	SHA1	Message	Date
Morgan Wattiez	f374cd0437	doc: change demo screenshot	2025-06-07 21:09:05 +02:00
Morgan Wattiez	764f0111f8	change website	2025-06-07 21:06:03 +02:00
Morgan Wattiez	f36adbba6c	chore: bump version to 0.0.9	2025-06-07 21:04:25 +02:00
Morgan Wattiez	75a78526d2	style: improve responsive design and update title	2025-06-07 10:34:31 +02:00
Morgan Wattiez	8e1419b186	ci: push tags on deployment/bumping version	2025-05-25 02:52:27 +02:00
Morgan Wattiez	febac2954a	chore: bump version to 0.0.8	2025-05-25 02:50:59 +02:00
Morgan Wattiez	916fd6a3f6	filter by age without researching again	2025-05-25 02:47:58 +02:00
Morgan Wattiez	635d21524d	filter only movies matching query	2025-05-25 02:42:29 +02:00
Morgan Wattiez	7d234903d1	filter films without description	2025-05-25 02:32:08 +02:00
Morgan Wattiez	aafd1731ce	add max-age slider for search	2025-05-25 01:59:39 +02:00
Morgan Wattiez	79aa8f619a	ensure deduplication of results	2025-05-25 01:45:28 +02:00
Morgan Wattiez	513b1de86e	shorten summary for filmages	2025-05-25 01:40:24 +02:00