Tema
/
Interneto svetainių kliento dalies kūrimas JS

Būsenos galerijoje ir media_type

Kodo stulpelyje — atnaujintas js/views/gallery.js. Dabar jis gauna { isLoading, error, pictures } ir šakoja: kraunama → žinutė; klaida → žinutė; tuščia → žinutė; ir tik tada — kortelės. Keturios būsenos, keturios šakos.

main.js dabar seka dvi naujas laisvas būsenas ir jas paduoda:

let isLoading = false;
let error = null;
let pictures = [];

async function load() {
  isLoading = true; error = null;
  renderGallery({ isLoading, error, pictures });      // parodo „Loading…"
  try {
    pictures = await fetchPictures(14);
  } catch (e) {
    error = toMessage(e);
    if (e.retryable) offerRetry();                    // „Retry" mygtukas
  } finally {
    isLoading = false;
    renderGallery({ isLoading, error, pictures });
  }
}

(Atkreipk dėmesį: laisvų kintamųjų jau trysisLoading, error, pictures. 7 pamokoje prisidės searchQuery, 8-oje jų bus ~dešimt, ir tai taps problema.)

media_type — vaizdo įrašo atvejis. card.js (2–3 pamokos) reikia šakos:

if (pic.media_type === 'image') {
  const img = document.createElement('img');
  img.src = pic.url; img.alt = pic.title; img.loading = 'lazy';
  header.appendChild(img);
} else {
  const ph = document.createElement('div');
  ph.className = 'video-placeholder';
  ph.textContent = '📹 Video';                        // vietoj sulūžusios nuotraukos
  header.appendChild(ph);
}

Patikrink. Įkelk 30 dienų (fetchPictures(30)) — beveik tikrai pateks bent viena vaizdo diena; ji rodys „📹 Video", ne sulūžusią nuotrauką. Perkraudinėk, kol pasieksi kvotą — vietoj tuščio ekrano matysi aiškią žinutę ir „Retry".

Spąstai — vaizdas <img> viduje

Praleisk media_type patikrą ir tiesiog daryk img.src = pic.url. Vaizdo dieną nuoroda veda ne į paveikslą, o į YouTube puslapį — <img> jos neįkels ir parodys sulūžusią nuotrauką (📷❌). Klaida klastinga: 29 dienas iš 30 kodas „veikia", o 30-tą — sugriūna. Tai tiksliai ta klaidų klasė, kurią 16 pamokoje TypeScript padarys neįmanomą parašyti (diskriminuota sąjunga pagal media_type).