// DramaScope — Chinese drama portal library const { useState, useEffect, useRef, useCallback } = React; // ── INTERNAL DATA MODEL (JSDoc) ─────────────────────────────────────────────── // Internal domain types used by DramaSourceAdapter implementations. // Not consumed at runtime; serve as a contract for build-script output (data/*.json) // and as documentation for adapter authors. Field names are stable across adapters. /** * @typedef {Object} Drama * @property {number} id Internal stable ID (currently equals TMDB id; abstraction leak we accept until WikidataAdapter lands). * @property {string} slug URL-safe идентификатор. Источник генерации в порядке приоритета: title_en → title_pinyin → translit title_ru. Из title_original (китайские иероглифы) НЕ генерируется. * @property {string} title_original Оригинал (中文 / 한글 / 日本語). * @property {string|null} title_pinyin Романизация (для CN/JP/KR). * @property {string|null} title_en Англоязычное прокатное. * @property {string|null} title_ru Русскоязычное прокатное / перевод. * @property {string[]} alt_titles Альтернативные написания/варианты (включая фан-переводы, региональные релизы). * @property {string|null} overview_en Из TMDB или Wikipedia EN. * @property {string|null} overview_ru Авторский русский текст. По умолчанию null; заполняется вручную или build-скриптом из Wikipedia RU когда она есть. * @property {string|null} posterPath Relative path; resolved via imageUrl(slug, size). * @property {string} firstAirDate YYYY-MM-DD. * @property {number} voteAverage 0–10. * @property {number} voteCount * @property {string[]} originCountry ISO codes: CN, HK, TW. * @property {Array<{id:number,name:string}>} genres * @property {string} status 'Returning Series' | 'Ended' | 'In Production' | 'Pilot' | 'Cancelled' | … * @property {number} episodeCount * @property {Array<{id:number,name:string}>} networks * @property {number} popularity * @property {number[]} keywordIds References into data/keywords.json. * @property {Array<{personId:number,characterName:string,order:number}>} cast * @property {{tmdb:number,wikidata:string|null,douban:string|null,imdb:string|null}} externalIds tmdb обязателен; остальные null если неизвестно. * @property {'tmdb'|'wikidata'|'manual'} _source Каким адаптером запись была собрана. * @property {string} _syncedAt ISO timestamp последней синхронизации. */ /** * @typedef {Object} Person * @property {number} id * @property {string} slug * @property {string} name * @property {string} originalName * @property {string} biography * @property {string|null} profilePath * @property {string|null} birthday * @property {string|null} placeOfBirth * @property {number} popularity * @property {string[]} alsoKnownAs * @property {Array<{id:number,name:string,title?:string}>} knownFor * @property {{tmdb:number,wikidata:string|null}} externalIds * @property {'tmdb'|'wikidata'|'manual'} _source * @property {string} _syncedAt */ /** * @typedef {Object} Keyword * @property {number} id * @property {string} slug * @property {string} name * @property {number} dramaCount Сколько дорам в текущем snapshot'е используют этот keyword. */ /** * @typedef {Object} SearchResult * @property {Array} results * @property {number} page * @property {number} totalPages * @property {number} totalResults */ /** * @typedef {Object} HomeFeeds * @property {Drama[]} trending * @property {Drama[]} popular * @property {Drama[]} topRated * @property {Drama[]} airing */ /** * @typedef {Object} DiscoverFilters * @property {number[]} [genres] * @property {string[]} [originCountry] ISO codes: CN, HK, TW * @property {number[]} [networks] * @property {string} [status] * @property {number} [yearFrom] * @property {number} [yearTo] * @property {number} [minRating] 0–10 * @property {number} [voteCountGte] Minimum vote_count threshold (TMDB vote_count.gte). Перекрывает неявные 20 от minRating. * @property {string} [sort] e.g. 'popularity.desc', 'vote_average.desc' * @property {number[]} [castIds] * @property {number[]} [keywordIds] * @property {number} [page] */ /** * DramaSourceAdapter — abstract data-source contract. * * Реализации: * - TMDBAdapter (tools/adapters/tmdb-adapter.js, Node-only, build-time) * - JSONAdapter (этот файл, браузер, шаг 4 миграции) * - WikidataAdapter (будущее) * * JS не предписывает наследование от @typedef — это контракт, который * реализации обязаны соблюдать по форме методов и возвращаемых типов. * * @typedef {Object} DramaSourceAdapter * @property {() => Promise} fetchHomeFeeds * @property {(id:number) => Promise} fetchDrama * @property {(query:string, page?:number) => Promise} searchDramas * @property {(filters:DiscoverFilters) => Promise} discover * @property {(id:number) => Promise} fetchPerson * @property {(id:number) => Promise} fetchPersonCredits * @property {() => Promise} fetchPopularActors * @property {(query:string) => Promise} searchPerson * @property {(query:string) => Promise} searchKeyword * @property {(posterPath:string|null, size:'w185'|'w500') => string|null} imageUrl */ // ── JSON ADAPTER ────────────────────────────────────────────────────────────── // Browser-time реализация DramaSourceAdapter. Читает /data/*.json, // держит каталог в памяти. Eager-loading с кэшированным Promise при первом // async-вызове. После загрузки данных все обращения мгновенны (Map по id). // // Используется в production. TMDBAdapter в браузер не попадает (он Node-only // в tools/, для build-script). // // JSONAdapter-specific helpers (НЕ в контракте DramaSourceAdapter): // - getAllDramas() — для AI Picks (нужен весь список заголовков) // - getPerson(id) / getKeyword(id) — sync-getter'ы после _ensureLoaded // - profileImageUrl(path) — отдельная URL-схема для фото актёров class JSONAdapter { constructor({ // Абсолютные пути (с /) — иначе на deep-link /dramas/X резолвится как /dramas/data/... // и Pages-роутер возвращает index.html → JSON.parse падает на dataBaseUrl = '/data/', posterBaseUrl = '/assets/posters/', profileBaseUrl = '/assets/profiles/' } = {}) { this.dataBaseUrl = dataBaseUrl; this.posterBaseUrl = posterBaseUrl; this.profileBaseUrl = profileBaseUrl; this._loadPromise = null; this._dramas = []; this._dramasById = new Map(); this._people = []; this._peopleById = new Map(); this._keywords = []; this._keywordsById = new Map(); this._index = null; } // ─── private ───────────────────────────────────────────────────── async _ensureLoaded() { if (this._loadPromise) return this._loadPromise; this._loadPromise = (async () => { try { const fetchJson = async (name) => { // cache-bust обязательно: иначе после edit-сейва из попапа браузер // показывает кэш и кажется что «не сохранилось» (хотя файл уже обновлён). const r = await fetch(this.dataBaseUrl + name + '?t=' + Date.now(), { cache: 'no-store' }); if (!r.ok) throw new Error(`${name}: HTTP ${r.status}`); return r.json(); }; // Dramas + Actors — теперь из D1 через API. CF edge-cache на 5 мин. // NO cache-bust — пусть кэш работает. const apiBase = (window.__dsApi && window.__dsApi.base) || ''; const fetchFromApi = async (path, jsonFallback) => { if (!apiBase) return fetchJson(jsonFallback); try { const r = await fetch(apiBase + path); if (!r.ok) throw new Error(`${path}: HTTP ${r.status}`); return await r.json(); } catch (e) { console.warn(`[adapter] ${path} failed, fallback to ${jsonFallback}`, e); return fetchJson(jsonFallback); } }; // ── ПРОГРЕССИВНАЯ ЗАГРУЗКА ── // Сначала грузим только TOP-80 дорам + TOP-100 актёров по popularity — // этого достаточно для всей главной (Trending/Popular/TopRated/Airing // карусели берут по 20 элементов из топа). Это ~150КБ вместо ~7МБ. // Главная рендерится за 1-2 сек вместо 5-10. // // Полный каталог догружается в фоне через 200мс — к моменту когда юзер // нажмёт «Поиск» или «Каталог», данные уже есть. Если ещё нет — компонент // сам подождёт через слушатель 'ds-full-data-loaded'. const [dramas, people, keywords, index] = await Promise.all([ fetchFromApi('/api/dramas?limit=80', 'dramas.json'), fetchFromApi('/api/actors?limit=100', 'people.json'), fetchJson('keywords.json'), fetchJson('index.json') ]); // ── фоновая догрузка ПОЛНОГО каталога ── const self = this; const loadFullInBackground = () => { // Параллельно тащим полные списки, обновляем мапы, шлём событие Promise.all([ fetchFromApi('/api/dramas', 'dramas.json').catch(() => null), fetchFromApi('/api/actors', 'people.json').catch(() => null), ]).then(([fullDramas, fullPeople]) => { if (Array.isArray(fullDramas) && fullDramas.length > self._dramas.length) { // Перепишем posterPath так же как для первой загрузки for (const d of fullDramas) { if (d.slug && d.posterPath && !d.posterPath.startsWith('http')) { d.posterPath = d.slug + '.webp'; } } // Сохраняем _full флаг для тех, что уже были догружены отдельно через fetchDrama const oldById = self._dramasById; self._dramas = fullDramas; self._dramasById = new Map(); for (const d of fullDramas) { const prev = oldById.get(d.id); if (prev && prev._full) self._dramasById.set(d.id, prev); else self._dramasById.set(d.id, d); } } if (Array.isArray(fullPeople) && fullPeople.length > self._people.length) { for (const p of fullPeople) { if (p.slug && p.profilePath && !p.profilePath.startsWith('http')) { p.profilePath = p.slug + '.webp'; } } self._people = fullPeople; self._peopleById = new Map(); for (const p of fullPeople) self._peopleById.set(p.id, p); } // Уведомляем что полные данные доступны. Флаг — для компонентов, // которым нужно отличить «фильмография пуста» от «ещё грузится» // (например, страница актёра). self._fullDataLoaded = true; try { window.dispatchEvent(new CustomEvent('ds-full-data-loaded')); } catch {} }).catch(() => { /* silent fail — топ-80 уже есть, страница работает */ }); }; setTimeout(loadFullInBackground, 200); // Перепишем posterPath/profilePath в локальный идентификатор {slug}.webp. // ИСКЛЮЧЕНИЕ: если posterPath уже полный URL (http*) — оставляем как есть // (это значит постер загружен через админку в R2). for (const d of dramas) { if (d.slug && d.posterPath && !d.posterPath.startsWith('http')) { d.posterPath = d.slug + '.webp'; } } for (const p of people) { if (p.slug && p.profilePath && !p.profilePath.startsWith('http')) { p.profilePath = p.slug + '.webp'; } } this._dramas = dramas; this._people = people; this._keywords = keywords; this._index = index; for (const d of dramas) this._dramasById.set(d.id, d); for (const p of people) this._peopleById.set(p.id, p); for (const k of keywords) this._keywordsById.set(k.id, k); } catch (e) { // Сбросим promise, чтобы следующий вызов мог попытаться снова. this._loadPromise = null; throw new Error(`Couldn't load site data. Please reload the page. (${e.message})`); } })(); return this._loadPromise; } // Нормализация для substring-поиска: NFD + strip combining diacriticals + lowercase. // Для CJK-символов нормализация — no-op (точное совпадение). _normalize(s) { return (s || '').normalize('NFD').replace(/[̀-ͯ]/g, '').toLowerCase(); } _paginate(arr, page = 1) { const PAGE_SIZE = 30; const totalResults = arr.length; const totalPages = Math.max(1, Math.ceil(totalResults / PAGE_SIZE)); const p = Math.max(1, Math.min(page, totalPages)); return { results: arr.slice((p - 1) * PAGE_SIZE, p * PAGE_SIZE), page: p, totalPages, totalResults }; } // ─── sync helpers (вызывать только после _ensureLoaded) ────────── // Глобальный фильтр по privacy-настройкам юзера (скрыть Boys/Girls). // Применяется ко всем спискам что отдаёт адаптер. window.__dsUserPrivacy // выставляется ProfilePage после GET /api/me/profile. _applyUserPrefs(list) { if (typeof window === 'undefined' || !window.__dsUserPrivacy) return list; const pp = window.__dsUserPrivacy; if (!pp.hide_boys_genre && !pp.hide_girls_genre) return list; return list.filter(d => { const names = new Set((d.genres || []).map(g => g && g.name && String(g.name).toLowerCase())); if (pp.hide_boys_genre && names.has('boys')) return false; if (pp.hide_girls_genre && names.has('girls')) return false; return true; }); } getAllDramas() { return this._applyUserPrefs(this._dramas); } getPerson(id) { return this._peopleById.get(id) || null; } getKeyword(id) { return this._keywordsById.get(id) || null; } // Обновить запись в кеше (вызывается из AdminDramaEditor после save, // чтобы public-поиск/каталог сразу находил по новому title без перезагрузки). updateDramaInCache(patch) { if (!patch || patch.id == null) return; const idx = this._dramas.findIndex(d => d.id === patch.id); if (idx >= 0) { this._dramas[idx] = { ...this._dramas[idx], ...patch }; this._dramasById.set(patch.id, this._dramas[idx]); } // Обновляем и __dsSearchPool — это отдельный кеш для typeahead navbar-поиска // (грузится из data/dramas.json напрямую, в адаптере его не было). if (typeof window !== 'undefined' && window.__dsSearchPool && Array.isArray(window.__dsSearchPool.dramas)) { const arr = window.__dsSearchPool.dramas; const i = arr.findIndex(d => d && d.id === patch.id); if (i >= 0) arr[i] = { ...arr[i], ...patch }; } if (typeof window !== 'undefined') { window.dispatchEvent(new CustomEvent('ds-drama-updated', { detail: { id: patch.id } })); } } // ─── SIMILAR DRAMAS — правила Marina (май 2026) ───────────────────── // 1. Если у текущей дорамы есть один из EXCLUSIVE-жанров/тегов // (Boys, Girls, Bromance, History, Crime/Detective, Costume, Comedy, Romance) — // у похожих ОБЯЗАТЕЛЬНО должен быть такой же. Иначе её не показываем. // 2. Дополнительная защита для Boys и Girls: эти метки нигде не должны // «утекать» в другие подборки. Если у текущей нет Boys — все candidate // с Boys отсеиваются. То же для Girls. // 3. Сортировка: больше пересечений по genres → выше; tiebreak — popularity. async getSimilar(dramaId, limit = 20) { await this._ensureLoaded(); // Coercion: id может прилететь как строка (из URL hash) или число (из D1). // Сравниваем по Number(), иначе `131037 === '131037'` → false и getSimilar // вернёт пусто. Аналогично задаче #412 (fetchDrama coercion). const numId = Number(dramaId); const cur = this._dramas.find(d => Number(d.id) === numId); if (!cur) return { results: [] }; // Каждый "labels" набор содержит id жанра и lowercase name (EN или RU) — // чтобы матчинг работал независимо от того, как сохранён genre у конкретной дорамы. const labelsOf = (d) => { const set = new Set(); for (const g of (d.genres || [])) { if (!g) continue; if (g.id != null) set.add('id:' + g.id); if (g.name) set.add('n:' + String(g.name).toLowerCase().trim()); } return set; }; // Эксклюзивные группы — каждая представлена набором эквивалентных меток // (id + EN-name + RU-name). Если у текущей есть ХОТЯ БЫ ОДНА метка из группы, // у похожей должна быть хотя бы одна из той же группы. // // ВАЖНО: убрали bromance и costume — у нас 0 дорам с этими тегами, // и любая дорама с ними получала пустой результат (Marina, июнь 2026). // Когда массово протегируем — вернём обратно. До тех пор bromance/costume // влияют на overlap-score (есть совпадение → выше в выдаче), но не REQUIRE. const EXCLUSIVE_GROUPS = { boys: ['id:9008', 'n:boys', 'n:парни', 'n:bl'], girls: ['id:9007', 'n:girls', 'n:девушки', 'n:gl'], history: ['id:36', 'n:history', 'n:история', 'n:исторический', 'n:исторические', 'n:историческое'], crime: ['id:80', 'n:crime', 'n:криминал', 'n:детектив'], comedy: ['id:35', 'n:comedy', 'n:комедия'], romance: ['id:10749', 'n:romance', 'n:романтика', 'n:мелодрама', 'n:любовь'], }; const BANNED_IF_NOT_OWN_KEYS = ['boys', 'girls']; const groupHas = (set, group) => group.some(k => set.has(k)); const curLabels = labelsOf(cur); const curHas = {}; for (const key of Object.keys(EXCLUSIVE_GROUPS)) { curHas[key] = groupHas(curLabels, EXCLUSIVE_GROUPS[key]); } const pool = this._applyUserPrefs(this._dramas); // Один проход: собираем кандидатов И с эксклюзивным фильтром, И без. // Если строгая выборка пустая (редкий эксклюзивный жанр без пары в базе) — // fallback на мягкую, чтобы блок «Похожие» никогда не был пустым. const strict = []; // banned + exclusive + overlap≥1 const soft = []; // banned + overlap≥1 (без exclusive-проверки) for (const d of pool) { if (d.id === cur.id) continue; if (!d.posterPath) continue; const dl = labelsOf(d); // (2) Banned: Boys/Girls не утекают в подборки где у current их нет let banned = false; for (const b of BANNED_IF_NOT_OWN_KEYS) { if (!curHas[b] && groupHas(dl, EXCLUSIVE_GROUPS[b])) { banned = true; break; } } if (banned) continue; // Overlap по жанрам — общий для обеих веток let overlap = 0; for (const g of dl) if (curLabels.has(g)) overlap++; if (overlap === 0) continue; soft.push({ d, overlap }); // (1) Exclusive: каждая эксклюзивная группа current'а должна быть у кандидата let exclMiss = false; for (const key of Object.keys(EXCLUSIVE_GROUPS)) { if (curHas[key] && !groupHas(dl, EXCLUSIVE_GROUPS[key])) { exclMiss = true; break; } } if (!exclMiss) strict.push({ d, overlap }); } // Fallback: если строгий фильтр дал слишком мало (< 5) — берём мягкую выборку. // Это покрывает случай когда у current редкий жанр без массы парных дорам. const candidates = strict.length >= 5 ? strict : soft; candidates.sort((a, b) => (b.overlap - a.overlap) || ((b.d.popularity || 0) - (a.d.popularity || 0)) ); return { results: candidates.slice(0, limit).map(c => c.d) }; } // ─── DramaSourceAdapter contract ───────────────────────────────── async fetchHomeFeeds() { await this._ensureLoaded(); const all = this._applyUserPrefs(this._dramas); const byPop = [...all].sort((a, b) => (b.popularity || 0) - (a.popularity || 0)); const byRating = [...all] .filter((d) => (d.voteCount || 0) >= 50) .sort((a, b) => (b.voteAverage || 0) - (a.voteAverage || 0)); const currentYear = new Date().getUTCFullYear(); const recent = byPop.filter((d) => { const y = parseInt((d.firstAirDate || '').slice(0, 4), 10); return y >= currentYear - 2; }); const airing = byPop.filter((d) => d.status === 'Returning Series' || d.status === 'In Production' ); // Дорамы со статусом "Ожидается" (или upcoming) — для блока "Ожидается релиз" const upcoming = byPop.filter((d) => { const st = (d.status || '').toLowerCase(); return st === 'ожидается' || st === 'upcoming' || st === 'expected' || st === 'planned'; }); // Дорамы со статусом "Приостановлено" — для блока "Релиз приостановлен" const suspended = byPop.filter((d) => { const st = (d.status || '').toLowerCase(); return st === 'приостановлено' || st === 'on hold' || st === 'paused' || st === 'suspended'; }); return { trending: recent.slice(0, 20), popular: byPop.slice(0, 20), topRated: byRating.slice(0, 20), airing: airing.slice(0, 20), upcoming: upcoming.slice(0, 20), suspended: suspended.slice(0, 20) }; } /** * Топ-N дорам по стране, отсортированный по voteAverage (server-side). * В отличие от fetchHomeFeeds().topRated (глобальный топ-20 — Корея забивает * все слоты), этот метод возвращает топ ВНУТРИ выбранной страны и включает * overview_ru/_en (которых нет в /api/dramas). * Используется на /rankings (3 вкладки CN/KR/TH). * @param {string} country ISO-2 код страны: 'CN' | 'KR' | 'TH' | 'JP' * @param {number} limit Максимум дорам в ответе (default 20, capped 50) * @param {number} minVotes Фильтр шума: исключить дорамы с { const c = d.originCountry || d.country || []; const arr = Array.isArray(c) ? c : [c]; return arr.some(x => String(x || '').toUpperCase() === code) && (d.voteCount || 0) >= minVotes && typeof d.voteAverage === 'number'; }) .sort((a, b) => (b.voteAverage || 0) - (a.voteAverage || 0) || (b.voteCount || 0) - (a.voteCount || 0)) .slice(0, limit); } try { const url = `${apiBase}/api/dramas/top-by-country?country=${code}&limit=${limit}&min_votes=${minVotes}`; const r = await fetch(url); if (!r.ok) return []; const json = await r.json(); return Array.isArray(json?.items) ? json.items : []; } catch { return []; } } async fetchDrama(id) { await this._ensureLoaded(); // Type coercion — id может прийти как string из library, а в _dramasById // ключи — number. Без приведения Map.get не найдёт даже валидную дораму // → DSDetailPage будет пустая или LibraryBlock пометит как orphan. const idNum = Number(id); let cached = this._dramasById.get(idNum) || this._dramasById.get(String(id)); // Если id не в кэше — возможно полный каталог ещё догружается в фоне // (см. loadFullInBackground в _ensureLoaded). Это критично для // deep-link'ов: пользователь открыл прямо /#/drama/279388, top-80 уже // загружен но 279388 не в нём → fetchDrama возвращает null → DSDetailPage // рендерит пустоту. // Решение: ждём событие ds-full-data-loaded (до 10 сек) и повторяем поиск. if (!cached && typeof window !== 'undefined' && this._dramas.length < 1000) { await new Promise((resolve) => { let done = false; const finish = () => { if (done) return; done = true; window.removeEventListener('ds-full-data-loaded', finish); resolve(); }; window.addEventListener('ds-full-data-loaded', finish); setTimeout(finish, 10000); }); cached = this._dramasById.get(idNum) || this._dramasById.get(String(id)); } if (!cached) return null; // Privacy: если юзер включил hide_boys_genre/hide_girls_genre — дораму с // соответствующим жанром не показываем даже по deep-link (Marina, май 2026). if (this._applyUserPrefs([cached]).length === 0) return null; // Helper: догружает свежие данные с сервера, обновляет cache, dispatch'ит // событие ds-drama-updated чтобы React перерисовался. Используется и для // первой загрузки (когда _full=false), и для SWR-обновления стейлого кеша. const refetchFull = async () => { if (!cached.slug) return null; try { const apiBase = (typeof window !== 'undefined' && window.__dsApi?.base) || ''; const r = await fetch(apiBase + '/api/dramas/' + encodeURIComponent(cached.slug)); if (!r.ok) return null; const j = await r.json(); const full = j.item || j; if (!full || !full.id) return null; if (full.slug && full.posterPath && !full.posterPath.startsWith('http')) { full.posterPath = full.slug + '.webp'; } full._full = true; full._fullAt = Date.now(); if (!full.posterPath && cached.posterPath) full.posterPath = cached.posterPath; this._dramasById.set(full.id, full); const idx = this._dramas.findIndex(d => d.id === full.id); if (idx >= 0) this._dramas[idx] = full; // Bump для React'а — DSDetailPage уже подписан на ds-drama-updated. if (typeof window !== 'undefined') { window.dispatchEvent(new CustomEvent('ds-drama-updated', { detail: { id: full.id } })); } return full; } catch { return null; } }; // Если в listing уже есть heavy-поля (overview_ru/cast/trailers) — отдаём как есть. // Иначе догружаем полные данные через /api/dramas/:slug и кэшируем в _dramasById. if (cached._full) { // SWR: если кешу больше 60 сек — фоном обновляем, юзер получит свежие // данные через ds-drama-updated. Lex'ы / правки админки доезжают до // юзеров без необходимости перезагружать вкладку. const STALE_MS = 60 * 1000; if (!cached._fullAt || Date.now() - cached._fullAt > STALE_MS) { refetchFull(); // fire-and-forget, не блокирует возврат cached } return cached; } if (!cached.slug) return cached; // нет slug — не сможем догрузить const fresh = await refetchFull(); return fresh || cached; } async searchDramas(query, page = 1) { await this._ensureLoaded(); const q = this._normalize(query); if (!q) return { results: [], page: 1, totalPages: 1, totalResults: 0 }; const qRaw = (query || '').toLowerCase(); // для title_original (CJK без нормализации) const pool = this._applyUserPrefs(this._dramas); const matches = pool.filter((d) => { if (d.title_en && this._normalize(d.title_en).includes(q)) return true; if (d.title_ru && this._normalize(d.title_ru).includes(q)) return true; if (d.title_pinyin && this._normalize(d.title_pinyin).includes(q)) return true; if (d.title_original && d.title_original.toLowerCase().includes(qRaw)) return true; if (d.alt_titles && d.alt_titles.some((t) => this._normalize(t).includes(q))) return true; return false; }); matches.sort((a, b) => (b.popularity || 0) - (a.popularity || 0)); return this._paginate(matches, page); } async discover(filters = {}) { await this._ensureLoaded(); // Advanced Search ищет по полному каталогу. Если в _dramas только top-80 // (прогрессивная загрузка ещё не догрузила фон) — ждём событие // ds-full-data-loaded до 10 сек. Иначе фильтры дают неправильное «2 китайских» // вместо реальных сотен. if (typeof window !== 'undefined' && this._dramas.length < 1000) { await new Promise((resolve) => { let done = false; const finish = () => { if (done) return; done = true; window.removeEventListener('ds-full-data-loaded', finish); resolve(); }; window.addEventListener('ds-full-data-loaded', finish); setTimeout(finish, 10000); }); } let arr = this._applyUserPrefs([...this._dramas]); if (filters.genres && filters.genres.length) { // Сматчиваем по id ИЛИ по name. У некоторых дорам (тайские/корейские из // doramy-пайплайна) genres могут быть только в формате [{name:"..."}] // без id — иначе они никогда не попадут в результат. const wantIds = new Set(filters.genres); const wantNames = new Set(); const dict = (typeof window !== 'undefined' && Array.isArray(window.__dsGenresList)) ? window.__dsGenresList : []; for (const id of filters.genres) { const found = dict.find(g => g.id === id); if (found?.name) wantNames.add(found.name.toLowerCase()); } arr = arr.filter((d) => (d.genres || []).some((g) => { if (g && wantIds.has(g.id)) return true; if (g && g.name && wantNames.has(String(g.name).toLowerCase())) return true; return false; })); } if (filters.originCountry && filters.originCountry.length) { const want = new Set(filters.originCountry); arr = arr.filter((d) => (d.originCountry || []).some((c) => want.has(c))); } if (filters.networks && filters.networks.length) { const want = new Set(filters.networks); arr = arr.filter((d) => (d.networks || []).some((n) => want.has(n.id))); } if (filters.status !== undefined && filters.status !== '' && filters.status !== null) { // Группы статусов (варианты написания/языка), а не одна строка — иначе // «Отменено» не ловило ни «Canceled» (амер.), ни «Приостановлено». // 0 → Выходит, 2 → Ожидается, 3 → Завершено, 4 → Отменено (+приостановлено). const STATUS_GROUPS = { '0': ['returning series', 'ongoing', 'airing', 'выходит', 'returning'], '2': ['in production', 'planned', 'ожидается', 'upcoming', 'анонс', 'pilot'], '3': ['ended', 'завершено', 'completed', 'released'], '4': ['cancelled', 'canceled', 'приостановлено', 'on hold', 'paused', 'suspended', 'отменено', 'релиз приостановлен'], }; const grp = STATUS_GROUPS[String(filters.status)]; if (grp) { arr = arr.filter((d) => d.status && grp.includes(String(d.status).trim().toLowerCase())); } else { const STATUS_MAP = { '0': 'Returning Series', '1': 'Planned', '2': 'In Production', '3': 'Ended', '4': 'Cancelled', '5': 'Pilot' }; const target = STATUS_MAP[filters.status] || filters.status; arr = arr.filter((d) => d.status === target); } } if (filters.yearFrom) { arr = arr.filter((d) => { const y = parseInt((d.firstAirDate || '').slice(0, 4), 10); return y && y >= filters.yearFrom; }); } if (filters.yearTo) { arr = arr.filter((d) => { const y = parseInt((d.firstAirDate || '').slice(0, 4), 10); return y && y <= filters.yearTo; }); } if (filters.minRating && filters.minRating > 0) { arr = arr.filter((d) => (d.voteAverage || 0) >= filters.minRating); } if (filters.voteCountGte) { arr = arr.filter((d) => (d.voteCount || 0) >= filters.voteCountGte); } if (filters.castIds && filters.castIds.length) { const want = new Set(filters.castIds); arr = arr.filter((d) => (d.cast || []).some((c) => want.has(c.personId))); } if (filters.keywordIds && filters.keywordIds.length) { const want = new Set(filters.keywordIds); arr = arr.filter((d) => (d.keywordIds || []).some((k) => want.has(k))); } if (filters.sort) { const [rawField, dir] = filters.sort.split('.'); const FIELD_MAP = { popularity: 'popularity', vote_average: 'voteAverage', vote_count: 'voteCount', first_air_date: 'firstAirDate' }; const field = FIELD_MAP[rawField] || rawField; const mult = dir === 'asc' ? 1 : -1; arr.sort((a, b) => { const va = a[field], vb = b[field]; if (typeof va === 'string' || typeof vb === 'string') { return mult * String(va || '').localeCompare(String(vb || '')); } return mult * ((va || 0) - (vb || 0)); }); } return this._paginate(arr, filters.page || 1); } async fetchPerson(idOrSlug) { await this._ensureLoaded(); if (idOrSlug == null) return null; let direct = this._peopleById.get(idOrSlug); if (direct) return direct; let bySlug = (typeof idOrSlug === 'string') ? this._people.find(p => p.slug === idOrSlug) : null; if (bySlug) return bySlug; // Не нашли — возможно полный каталог ещё догружается. См. fetchDrama. // Это ключевой фикс для deep-link'ов: прямая загрузка /#/actor/XXXX где // актёр не в top-100 — компонент рендерил пустоту. if (typeof window !== 'undefined' && this._people.length < 1000) { await new Promise((resolve) => { let done = false; const finish = () => { if (done) return; done = true; window.removeEventListener('ds-full-data-loaded', finish); resolve(); }; window.addEventListener('ds-full-data-loaded', finish); setTimeout(finish, 10000); }); direct = this._peopleById.get(idOrSlug); if (direct) return direct; if (typeof idOrSlug === 'string') { bySlug = this._people.find(p => p.slug === idOrSlug); if (bySlug) return bySlug; } } return null; } async fetchPersonCredits(id) { await this._ensureLoaded(); // Применяем privacy-фильтр и к фильмографии актёра: если юзер скрыл Boys/Girls, // в фильмографии тоже не должно быть дорам с этими жанрами. return this._applyUserPrefs(this._dramas).filter((d) => (d.cast || []).some((c) => c.personId === id) ); } async fetchPopularActors() { await this._ensureLoaded(); // Исключаем режиссёров: тех, у кого occupation содержит "режисс"/"director", // ИЛИ кто упомянут в какой-то дораме в crew с должностью режиссёра. // Логика синхронизирована с tools/upload-directors.html. const DIRECTOR_RE = /режисс|director/i; const directorIds = new Set(); for (const d of this._dramas) { for (const c of (d.crew || [])) { if (c && c.personId && DIRECTOR_RE.test(c.job || '')) { directorIds.add(c.personId); } } } const isDirector = (p) => { if (directorIds.has(p.id)) return true; const occ = (p.occupation || []).join(' '); return DIRECTOR_RE.test(occ); }; return [...this._people] .filter(p => !isDirector(p)) .sort((a, b) => (b.popularity || 0) - (a.popularity || 0)); } async searchPerson(query) { await this._ensureLoaded(); const q = this._normalize(query); if (!q) return []; // Поиск по началу имени: вводишь «х» — все на «х», «хэ» — на «хэ» и т.д. // Без популярности. Совпадение, если имя (рус/лат) ИЛИ любое его слово // начинается с запроса. Сортировка: сначала те, что с самого начала, потом // те, где с начала слова; внутри — по алфавиту. const rank = (s) => { if (!s) return 0; const n = this._normalize(s); if (n.startsWith(q)) return 2; if (n.split(/\s+/).some((w) => w.startsWith(q))) return 1; return 0; }; const scored = []; for (const p of this._people) { let sc = Math.max(rank(p.name), rank(p.name_ru)); if (sc < 2 && p.alsoKnownAs && p.alsoKnownAs.length) sc = Math.max(sc, ...p.alsoKnownAs.map(rank)); if (sc > 0) scored.push({ p, sc, key: this._normalize(p.name_ru || p.name) }); } scored.sort((a, b) => (b.sc - a.sc) || a.key.localeCompare(b.key, 'ru')); return scored.map((x) => x.p); } async searchKeyword(query) { await this._ensureLoaded(); const q = this._normalize(query); if (!q) return []; return this._keywords.filter((k) => k.name && this._normalize(k.name).includes(q) ); } imageUrl(path, size) { if (!path) return null; // Если path уже полный URL (http* — например R2-аплоад из админки) — // возвращаем как есть, игнорируя size (R2 хранит один размер). if (path.startsWith('http')) return path; // Используем только w185 везде — w500 не льётся в R2, не закоммичен в git. // Разница для пользователя минимальна (постер 300px на retina — еле заметно // мыльно). Экономия: 183 MB на диске + вдвое меньше R2-операций. // Если когда-то понадобится HQ для детальной — добавим srcset. return `${this.posterBaseUrl}w185/${path}`; } // JSONAdapter-specific: профили лежат плоско в assets/profiles/{slug}.webp, // без size-папок. Используется компонентами для фото актёров. profileImageUrl(path) { if (!path) return null; if (path.startsWith('http')) return path; // R2-аплоад return `${this.profileBaseUrl}${path}`; } } // ── ADAPTER HOOK ────────────────────────────────────────────────────────────── // React-хук поверх DramaSourceAdapter. fetcher принимает window.adapter. // Возвращает {data, loading, error}. Гонка с unmount защищена флагом cancelled. function useAdapter(fetcher, deps = []) { const [data, setData] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { setLoading(true); setError(null); let cancelled = false; fetcher(window.adapter) .then((d) => { if (!cancelled) { setData(d); setLoading(false); } }) .catch((e) => { if (!cancelled) { setError(e); setLoading(false); } }); return () => { cancelled = true; }; }, deps); return { data, loading, error }; } // ── SMALL UI ────────────────────────────────────────────────────────────────── function DSBadge({ label, variant = 'blue' }) { const map = { blue: { bg: 'rgba(20,135,203,0.18)', color: '#1487cb', border: 'rgba(20,135,203,0.45)' }, // Тёмно-голубой для CTA на тёмном hero (например "Подробнее" на постере). // Заливка плотная sky-blue из палитры, текст белый. darkblue: { bg: 'rgba(15,60,130,0.65)', color: '#ffffff', border: 'rgba(15,60,130,0.85)' }, green: { bg: 'rgba(61,214,140,0.12)', color: '#3dd68c', border: 'rgba(61,214,140,0.25)' }, red: { bg: 'rgba(255,107,107,0.12)', color: '#ff6b6b', border: 'rgba(255,107,107,0.25)' }, gold: { bg: 'rgba(245,197,24,0.12)', color: '#f5c518', border: 'rgba(245,197,24,0.25)' }, gray: { bg: 'rgba(255,255,255,0.07)', color: '#8ba8d4', border: 'rgba(255,255,255,0.1)' }, purple: { bg: 'rgba(192,132,252,0.12)', color: '#c084fc', border: 'rgba(192,132,252,0.25)' } }; const s = map[variant] || map.blue; return ( {label}); } function DSStars({ vote }) { return ( ★ {Math.round(vote * 10) / 10} ); } function DSSpinner() { return (
); } const POSTER_GRADIENTS = [ ['#1a0a1a', '#3a1040'], ['#2a1010', '#4a1820'], ['#0e1f44', '#1a3a6e'], ['#1a1040', '#3a205c'], ['#14102a', '#2a2050'], ['#0a2030', '#1a4060'], ['#0a2010', '#1a4030'], ['#1a1a10', '#3a3020'], ['#0e2a1a', '#1a5030']]; function DSPlaceholderPoster({ seed = 1, width = '100%', height = '100%', style = {} }) { // Единая заглушка-постер (картинка Marina). Используется везде, где у дорамы нет постера. return ( ); } function DSPlaceholderBackdrop({ seed = 1, style = {} }) { const clrs = [['#12082a', '#221044'], ['#060e28', '#0d1e44'], ['#041822', '#0a2c3a']]; const [c1, c2] = clrs[(seed - 1) % clrs.length]; const uid = `bd${seed}`; return ( {Array.from({ length: 18 }).map((_, i) => )} ); } // ── DRAMA CARD ──────────────────────────────────────────────────────────────── const FLAG = { CN: '🇨🇳', HK: '🇭🇰', TW: '🇹🇼', KR: '🇰🇷', JP: '🇯🇵', TH: '🇹🇭', MO: '🇲🇴', SG: '🇸🇬', MY: '🇲🇾', VN: '🇻🇳', PH: '🇵🇭', ID: '🇮🇩' }; // Названия стран (ISO-код → {en, ru}) — для отображения в плитке «СТРАНА» const COUNTRY_NAME = { CN: { en: 'China', ru: 'Китай' }, HK: { en: 'Hong Kong', ru: 'Гонконг' }, TW: { en: 'Taiwan', ru: 'Тайвань' }, MO: { en: 'Macau', ru: 'Макао' }, KR: { en: 'South Korea', ru: 'Южная Корея' }, JP: { en: 'Japan', ru: 'Япония' }, TH: { en: 'Thailand', ru: 'Таиланд' }, SG: { en: 'Singapore', ru: 'Сингапур' }, MY: { en: 'Malaysia', ru: 'Малайзия' }, VN: { en: 'Vietnam', ru: 'Вьетнам' }, PH: { en: 'Philippines', ru: 'Филиппины' }, ID: { en: 'Indonesia', ru: 'Индонезия' } }; function DramaCard({ item, onClick, size = 'md', onToggleWatch, inWatchlist }) { // Fallback: если локальный постер не подгрузился — используем wd_image (Wikimedia Commons) const [hov, setHov] = useState(false); const [imgErr, setImgErr] = useState(false); const localPoster = item.posterPath ? window.adapter.imageUrl(item.posterPath, size === 'lg' ? 'w500' : 'w185') : null; const posterUrl = imgErr ? (item.wd_image || null) : (localPoster || item.wd_image || null); const widths = { sm: 128, md: 165, lg: 195 }; const w = widths[size] || 165; const h = Math.round(w * 1.5); const year = (item.firstAirDate || '').slice(0, 4); const flag = (item.originCountry || []).map((c) => FLAG[c]).find(Boolean) || '🇨🇳'; const { lang, t } = (window.useI18n ? window.useI18n() : { lang: 'en', t: (s) => s }); const displayTitle = (lang === 'ru' && item.title_ru) ? item.title_ru : (item.title_en || item.title_pinyin || item.title_original || ''); // ── Статус из библиотеки пользователя — бейдж слева от названия ── // Читаем localStorage `ds_library_` и слушаем 'ds-library-changed', // который диспатчит LibraryStatusButton после сохранения. Так бейдж обновляется // на ВСЕХ видимых карточках на сайте сразу после смены статуса. const _libAuth = window.useAuth ? window.useAuth() : { user: null }; const _libKey = `ds_library_${_libAuth?.user?.email || 'guest'}`; const readLibStatus = () => { if (!item?.id) return null; try { const arr = JSON.parse(localStorage.getItem(_libKey) || '[]'); return arr.find(x => x.id === item.id)?.status || null; } catch { return null; } }; const [libStatus, setLibStatus] = useState(readLibStatus); useEffect(() => { const refresh = () => setLibStatus(readLibStatus()); refresh(); // на случай смены пользователя (email→guest или наоборот) window.addEventListener('ds-library-changed', refresh); window.addEventListener('storage', refresh); return () => { window.removeEventListener('ds-library-changed', refresh); window.removeEventListener('storage', refresh); }; }, [item?.id, _libKey]); const libStatuses = (window.__dsLibStatusesArr || window.LIBRARY_STATUSES || []); const libInfo = libStatus ? libStatuses.find(s => s.id === libStatus) : null; // ── Inline-выбор статуса библиотеки при hover на постер ── const [statusPickerOpen, setStatusPickerOpen] = useState(false); const pickerRef = useRef(null); const effectiveHov = hov || statusPickerOpen; useEffect(() => { if (!statusPickerOpen) return; const close = (e) => { if (pickerRef.current && !pickerRef.current.contains(e.target)) setStatusPickerOpen(false); }; document.addEventListener('mousedown', close); return () => document.removeEventListener('mousedown', close); }, [statusPickerOpen]); const setLibraryStatus = (newStatus) => { if (!_libAuth?.user) { window.dispatchEvent(new CustomEvent('ds-open-signup')); setStatusPickerOpen(false); return; } try { const arr = JSON.parse(localStorage.getItem(_libKey) || '[]'); let next; if (newStatus === null) { next = arr.filter(x => x.id !== item.id); } else { const data = { id: item.id, title_en: item.title_en, title_ru: item.title_ru, title_original: item.title_original, posterPath: item.posterPath, firstAirDate: item.firstAirDate, voteAverage: item.voteAverage, originCountry: item.originCountry, status: newStatus, addedAt: new Date().toISOString() }; const existing = arr.find(x => x.id === item.id); next = existing ? arr.map(x => x.id === item.id ? { ...x, ...data } : x) : [...arr, data]; } localStorage.setItem(_libKey, JSON.stringify(next)); window.dispatchEvent(new CustomEvent('ds-library-changed')); } catch (e) {} setStatusPickerOpen(false); }; return (
setHov(true)} onMouseLeave={() => setHov(false)} style={{ flex: `0 0 ${w}px`, width: w, cursor: 'pointer', position: 'relative', transform: effectiveHov ? 'translateY(-4px)' : 'none', transition: 'transform 0.22s', zIndex: effectiveHov ? 10 : 1 }}>
{posterUrl ? {displayTitle} setImgErr(true)} className="ds-poster" style={{ width: '100%', height: '100%', display: 'block' }} /> : } {(() => { const itemYear = (item.firstAirDate || '').slice(0, 4); const isTop = (item.popularity || 0) >= 70; const isNew = itemYear === '2026'; const badges = []; // ── PREMIERE: status='Выходит с...' с известной датой релиза ── // (Marina, июнь 2026) Для дорам, у которых анонсирована конкретная дата // премьеры: вместо «Ожидается» показываем NEW + голубую плашку // «Выходит с 9 июня» (форматируем дату на языке UI). const _stForPremiere = (item.status || '').toLowerCase().replace(/\s+/g, ' ').trim(); const _isPremiere = _stForPremiere === 'выходит с...' || _stForPremiere === 'выходит с' || _stForPremiere.startsWith('выходит с '); const _formatReleaseDate = (dateStr) => { if (!dateStr) return ''; const m = String(dateStr).match(/^(\d{4})-(\d{2})-(\d{2})/); if (!m) return ''; const day = parseInt(m[3], 10); const month = parseInt(m[2], 10) - 1; const langCur = (window.useI18n ? window.useI18n().lang : 'en'); const months = langCur === 'ru' ? ['января','февраля','марта','апреля','мая','июня','июля','августа','сентября','октября','ноября','декабря'] : ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']; return `${day} ${months[month]}`; }; const _premiereDate = _isPremiere ? _formatReleaseDate(item.firstAirDate) : ''; // ═══════════════════════════════════════════════════════════════ // 🔒 CARD-BADGES — ЗАФИКСИРОВАНО Marina'й 2026-05-27 ~12:16. // НЕ менять без явного запроса. Бэкап: // outputs/DramaScope_backup_2026-05-27_1216_card-badges-locked/ // // Стили: // fontSize 9px, fontWeight 500, letterSpacing 0.2px (noUpper:true) // padding '2px 7px', borderRadius 4, БЕЗ text-shadow // // Статусы (только 3, остальные скрыты): // синий — Выходит / Ongoing / Returning Series / In Production // гол. — Ожидается / Upcoming / Planned / Pilot (НЕЖНО-голубой #4d7ba8→#6a99c4) // красный — Приостановлено / On hold / Suspended / Cancelled // (Завершено / Ended — НЕ показываем) // // TOP / NEW: тот же размер 9px, NEW с noUpper:true для одинаковых // пропорций со статусом. // ═══════════════════════════════════════════════════════════════ // Primary (TOP или NEW). NEW — те же визуальные пропорции что у статусов. // Для premiere (Выходит с...): принудительно NEW, даже если год ≠ 2026. if (isTop && !_isPremiere) badges.push({ label: 'TOP', bg: 'linear-gradient(135deg, #ff6b35, #ff3d3d)', glow: 'rgba(255,61,61,0.45)' }); else if (isNew || _isPremiere) badges.push({ label: 'NEW', bg: 'linear-gradient(135deg, #0abab5, #1ed4ce)', glow: 'rgba(10,186,181,0.35)', noUpper: true }); // Статус — отдельный бейдж ПОД основным. Только для 3 статусов: // синий=Выходит, жёлтый=Ожидается, красный=Приостановлено. // «Завершено» и все остальные — НЕ показываем (по запросу Marina). const st = (item.status || '').toLowerCase(); const _t = (window.useI18n ? window.useI18n().t : (s) => s); if (_isPremiere && _premiereDate) { // Premiere — голубая плашка «Выходит с DD месяц». Использует ту же // палитру что и «Ожидается» (нежно-голубой). Под NEW бейджем сверху. const lng = (window.useI18n ? window.useI18n().lang : 'en'); const lbl = lng === 'ru' ? `Выходит с ${_premiereDate}` : `Airing from ${_premiereDate}`; badges.push({ label: lbl, bg: 'linear-gradient(135deg, #4d7ba8, #6a99c4)', glow: 'rgba(106,153,196,0.5)', noUpper: true }); } else if (st === 'returning series' || st === 'in production' || st === 'выходит' || st === 'ongoing') { badges.push({ label: _t('Ongoing'), bg: 'linear-gradient(135deg, #1e3a5f, #2b5d8e)', glow: 'rgba(43,93,142,0.5)', noUpper: true }); } else if (st === 'ожидается' || st === 'upcoming' || st === 'expected' || st === 'planned' || st === 'pilot') { badges.push({ label: _t('Upcoming'), bg: 'linear-gradient(135deg, #4d7ba8, #6a99c4)', glow: 'rgba(106,153,196,0.5)', noUpper: true }); } else if (st === 'приостановлено' || st === 'отменено' || st === 'on hold' || st === 'paused' || st === 'suspended' || st === 'canceled' || st === 'cancelled') { badges.push({ label: _t('On hold'), bg: 'linear-gradient(135deg, #5c1d2e, #7d2944)', glow: 'rgba(125,41,68,0.5)', noUpper: true }); } // st === 'ended' / 'завершено' / 'finished' — никакого бейджа. if (badges.length === 0) return null; return (
{badges.map((b, i) => (
{b.label}
))}
); })()} {/* Флаг страны убран по запросу — на его место (правый нижний угол) переехала heart-кнопка. */} {/* DramaScope rating-плашка (PosterRatingBadge) — показывается только если есть пользовательские оценки. */} {window.PosterRatingBadge && ( )} {/* Compact heart в правом верхнем углу постера, над рейтингом. Рейтинг сдвинут ниже через CSS-override .ds-drama-card__poster .ds-poster-rating-badge. */} {window.FavoriteDramaButton && (
)}
{effectiveHov && !statusPickerOpen &&
{/* Заголовок дорамы убран — он и так читается под постером, дублировать на ховере не нужно (Marina, #149). Остаётся только круглая кнопка. */} {/* Круглая иконка-кнопка библиотеки — в стиле action-buttons со страницы дорамы. Без текста, только иконка статуса (если выбран) или плюс. Клик → раскрывает picker. */}
} {effectiveHov && statusPickerOpen &&
e.stopPropagation()} onMouseDown={(e) => e.stopPropagation()} style={{ position: 'absolute', bottom: 8, left: 8, right: 8, zIndex: 10, background: 'rgba(8,12,26,0.95)', border: '1px solid rgba(140,180,235,0.22)', borderRadius: 8, padding: 4, boxShadow: '0 8px 24px rgba(0,0,0,0.6)' }}>
{lang === 'ru' ? 'Статус' : 'Status'}
{libStatuses.filter(s => s.id !== 'favorite').map(s => ( ))} {libStatus && ( <>
)}
}
{(() => { const st = (item.status || '').toLowerCase(); const eligibleNotify = ['ожидается', 'upcoming', 'expected', 'planned', 'приостановлено', 'on hold', 'paused', 'suspended'].includes(st) && !!window.ReleaseNotifyButton; // Когда есть кнопка «Сообщить» — фиксируем мин. высоту инфо-блока, чтобы у // карточек в ряду кнопки выровнялись по нижнему краю (margin-top:auto). // Высота: title (до 3 строк ~46px) + year (~14px) + paddings + кнопка (~24px). return (
{libInfo && ( {window.LIB_ICONS && window.LIB_ICONS[libInfo.id] ? {window.LIB_ICONS[libInfo.id]} : {(libInfo.id || '?').charAt(0).toUpperCase()}} )} {displayTitle} {/* Иконка Мао — показывается если у дорамы есть саммари в БД */} {window._MaoIcon && }
{year &&
{year}
} {eligibleNotify && (
e.stopPropagation()}>
)}
); })()}
); } // ── CAROUSEL ────────────────────────────────────────────────────────────────── function DSCarousel({ title, items, onSelect, icon = '', badge, viewAll, onToggleWatch, watchlist }) { const scrollRef = useRef(null); const [canLeft, setCanLeft] = useState(false); const [canRight, setCanRight] = useState(true); const check = () => { const el = scrollRef.current;if (!el) return; setCanLeft(el.scrollLeft > 8); setCanRight(el.scrollLeft < el.scrollWidth - el.clientWidth - 8); }; const scroll = (dir) => { scrollRef.current?.scrollBy({ left: dir * 560, behavior: 'smooth' }); setTimeout(check, 350); }; if (!items || !items.length) return null; const { t } = (window.useI18n ? window.useI18n() : { t: (s) => s }); return (

{t(title)}

{badge && }
{viewAll && ( )}
{canLeft && } {canRight && }
{items.map((item) => onSelect(item)} onToggleWatch={onToggleWatch} inWatchlist={watchlist?.some((w) => w.id === item.id)} /> )}
); } // ── TIME AGO ────────────────────────────────────────────────────────────────── function timeAgo(dateStr) { const d = new Date(dateStr); if (isNaN(d)) return dateStr; const h = Math.floor((Date.now() - d.getTime()) / 3600000); if (h < 1) return 'just now'; if (h < 24) return `${h} hours ago`; const days = Math.floor(h / 24); if (days === 1) return 'yesterday'; if (days < 7) return `${days} days ago`; return dateStr; } // Аккуратная дата публикации новости (локализованная). Принимает date ИЛИ // published_at (API отдаёт published_at). Возвращает '' если даты нет. function fmtNewsDate(dateStr) { if (!dateStr) return ''; const d = new Date(String(dateStr).replace(' ', 'T')); if (isNaN(d)) return ''; const loc = (typeof window !== 'undefined' && window.__dsLang === 'ru') ? 'ru-RU' : 'en-US'; try { return d.toLocaleDateString(loc, { day: 'numeric', month: 'short', year: 'numeric' }); } catch { return ''; } } // ── NEWS CARD ───────────────────────────────────────────────────────────────── function NewsCard({ news, variant = 'hero', onClick }) { const { lang } = useI18n(); if (!news) return null; // EN-сайт показывает английскую версию новости с фолбэком на русскую. const isEn = lang === 'en'; const title = isEn ? (news.title_en || news.title) : news.title; const excerpt = isEn ? (news.excerpt_en || news.excerpt) : news.excerpt; // cover_image может быть полным URL (R2) или относительным путём (legacy news.json) const coverUrl = news.cover_image ? (/^https?:\/\//i.test(news.cover_image) ? news.cover_image : `/assets/${news.cover_image}`) : news.image; const HotBadge = () => news.hot && ( 🔥 HOT ); // Закладка — сохраняет новость в Сохранённые новости (drawer-блок). // Авторизация: для гостей открываем sign-up. Уже залогиненные — toggle. const SaveBookmark = ({ size = 16 }) => { const auth = (window.useAuth ? window.useAuth() : { user: null }); const user = auth.user; const email = user?.email; const [saved, setSaved] = useState(() => !!(email && window.__dsIsNewsSaved && window.__dsIsNewsSaved(email, news.id))); useEffect(() => { setSaved(!!(email && window.__dsIsNewsSaved && window.__dsIsNewsSaved(email, news.id))); const h = () => setSaved(!!(email && window.__dsIsNewsSaved && window.__dsIsNewsSaved(email, news.id))); window.addEventListener('ds-saved-news-changed', h); return () => window.removeEventListener('ds-saved-news-changed', h); }, [email, news.id]); const onClickSave = (e) => { e.preventDefault(); e.stopPropagation(); if (!user) { auth.openSignUp && auth.openSignUp(); return; } // Сохраняем минимальный набор полей чтобы блок показал обложку и название const payload = { id: news.id, title: title, excerpt: excerpt, coverImage: coverUrl, date: news.date || news.published_at, category: news.category }; window.__dsToggleSavedNews && window.__dsToggleSavedNews(email, payload); }; return ( ); }; if (variant === 'hero') { return (
NEWS
{title}
{excerpt && (
{excerpt}
)}
{fmtNewsDate(news.date || news.published_at)} {/* Лайки и комменты — показываем ТОЛЬКО если есть реальные числа из API (> 0). Заглушки 31/23 убраны — пока счётчики на backend не реализованы, метаданные просто не отображаются. */} {news.likes > 0 && ( ♥{news.likes} )} {news.comments > 0 && ( 💬 {news.comments} )}
); } return (
{news.category}
{title}
{fmtNewsDate(news.date || news.published_at)}
); } // ── FEATURED HERO ───────────────────────────────────────────────────────────── function DSFeatured({ item, onSelect, onExplore, onActors, onAI }) { const [imgErr, setImgErr] = useState(false); // Подтягиваем свежие новости из D1 через /api/news. Fallback на static // data/news.json если API не отвечает. Это чтобы новость, добавленная через // админку, сразу появлялась в hero (раньше шёл хардкод-чтение JSON). const [latestNews, setLatestNews] = useState(window.__dsNews || null); useEffect(() => { const apiBase = (typeof window !== 'undefined' && window.__dsApi?.base) || ''; const url = apiBase ? `${apiBase}/api/news?limit=20` : '/data/news.json?t=' + Date.now(); fetch(url) .then(r => r.ok ? r.json() : null) .then(data => { // Worker может вернуть {items: [...]} или просто [...] const arr = Array.isArray(data) ? data : (data && Array.isArray(data.items) ? data.items : null); if (arr && arr.length) { const sorted = [...arr].sort((a, b) => (b.date || b.published_at || '').localeCompare(a.date || a.published_at || '')); window.__dsNews = sorted; setLatestNews(sorted); } }) .catch(() => { // Fallback на статический JSON если API упал fetch('/data/news.json?t=' + Date.now()) .then(r => r.ok ? r.json() : null) .then(arr => { if (Array.isArray(arr) && arr.length) { const sorted = [...arr].sort((a, b) => (b.date || '').localeCompare(a.date || '')); window.__dsNews = sorted; setLatestNews(sorted); } }) .catch(() => {}); }); }, []); // ── HERO CAROUSEL ──────────────────────────────────────────────────────── // Читаем data/hero-slides.json: [{image, dramaId}]. // Меняются только фон и плашка справа (top-drama). Всё остальное статично. // Картинки одни и те же для day/night — оригинальные фоны хорошо смотрятся в обеих темах. const [slides, setSlides] = useState(null); const [slideIdx, setSlideIdx] = useState(0); const slideTimerRef = useRef(null); const [slideDramas, setSlideDramas] = useState({}); // {dramaId: drama} useEffect(() => { fetch('/data/hero-slides.json?t=' + Date.now()) .then(r => r.ok ? r.json() : null) .then(arr => { if (Array.isArray(arr) && arr.length) setSlides(arr); }) .catch(() => {}); }, []); // Подгружаем дораму для каждого slide.dramaId, чтобы плашка справа знала title/poster/rating. // Триггеримся не только на изменение slides, но и на 'ds-full-data-loaded' — иначе при первой // загрузке (до того как фронт получил полный каталог) fetchDrama возвращает null и активный // слайд фолбэчится на случайную дораму ("Король пустыни" эффект). useEffect(() => { const load = () => { if (!slides || !slides.length) return; const need = slides.filter(s => s.dramaId && !slideDramas[s.dramaId]); if (!need.length) return; Promise.all(need.map(s => window.adapter.fetchDrama(s.dramaId).catch(() => null))).then(results => { const next = { ...slideDramas }; results.forEach((d, i) => { if (d) next[need[i].dramaId] = d; }); setSlideDramas(next); }); }; load(); window.addEventListener('ds-full-data-loaded', load); return () => window.removeEventListener('ds-full-data-loaded', load); }, [slides, slideDramas]); // Авто-ротация — каждые 7с. Стоп если только 1 слайд. useEffect(() => { if (!slides || slides.length < 2) return; if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return; slideTimerRef.current = setInterval(() => { setSlideIdx(i => (i + 1) % slides.length); }, 7000); return () => clearInterval(slideTimerRef.current); }, [slides]); const goSlide = (n) => { if (!slides || !slides.length) return; clearInterval(slideTimerRef.current); setSlideIdx(((n % slides.length) + slides.length) % slides.length); // Перезапустить таймер if (slides.length > 1) { slideTimerRef.current = setInterval(() => { setSlideIdx(i => (i + 1) % slides.length); }, 7000); } }; // Определяем активный фон и активную дораму для плашки. // НЕ фолбэчимся на item (родительская дорама) — иначе пока slideDramas не загружены // плашка показывает чужую дораму. Лучше пустой объект и условный рендер ниже. const activeSlide = (slides && slides[slideIdx]) || null; const activeDrama = activeSlide ? (slideDramas[activeSlide.dramaId] || {}) : item; const backdropUrl = activeSlide ? '/' + activeSlide.image.replace(/^\.?\/?/, '') : "/assets/cherry-blossom-banner.png"; const year = (activeDrama.firstAirDate || '').slice(0, 4); const { lang, t } = (window.useI18n ? window.useI18n() : { lang: 'en', t: (s) => s }); const synopsis = ((lang === 'ru' && activeDrama.overview_ru) ? activeDrama.overview_ru : activeDrama.overview_en) || ''; const short = synopsis.length > 180 ? synopsis.slice(0, 180) + '…' : synopsis; const displayTitle = (lang === 'ru' && activeDrama.title_ru) ? activeDrama.title_ru : (activeDrama.title_en || activeDrama.title_pinyin || activeDrama.title_original || ''); const miniPoster = window.adapter.imageUrl(activeDrama.posterPath, 'w185'); return (
{/* Слои фонов карусели — все рендерим, активный с opacity:1 (плавный fade) */} {slides && slides.length > 0 ? (
{slides.map((s, i) => ( ))}
) : backdropUrl ? ( setImgErr(true)} className="ds-backdrop" style={{ width: '100%', height: '100%', display: 'block' }} /> ) : ( )} {/* Карусель: точки-индикаторы + стрелки prev/next (только если слайдов > 1) */} {slides && slides.length > 1 && ( <>
{slides.map((_, i) => (
)} {/* Upgrade to Premium — top-right corner of hero. Скрыт до запуска монетизации. Чтобы вернуть: window.__dsPremiumEnabled = true (в index.html). */} {window.__dsPremiumEnabled && ( )}
window.__dsGoPage && window.__dsGoPage('news')} /> {/* CTA-кнопки (Все дорамы / Все актёры / Спросить Мао) скрыты по просьбе Marina — display: none перебивает все CSS-правила. Чтобы вернуть: убрать display:'none'. */}
{/* Top Drama mini card — right-bottom corner of hero. Меняется вместе с фоном карусели. */}
onSelect(activeDrama)}>
{miniPoster ? : }
Top Drama {year || '—'}
{displayTitle}
→
); } // ── DETAIL PAGE ─────────────────────────────────────────────────────────────── // Кнопка-закладка для всего саундтрека дорамы. По аналогии с FactBookmarkButton: // localStorage + server sync. Активная — закрашена тиффани #0abab5. function _OstBookmarkButton({ dramaId, lang }) { const useAuth = window.useAuth || (() => ({ user: null, openSignUp: () => {} })); const { user, openSignUp } = useAuth(); const isRu = lang === 'ru'; const key = `ds_fav_drama_osts_${user?.email || 'guest'}`; const [ids, setIds] = useState(() => { try { return JSON.parse(localStorage.getItem(key)) || []; } catch { return []; } }); useEffect(() => { const refresh = () => { try { setIds(JSON.parse(localStorage.getItem(key)) || []); } catch {} }; refresh(); window.addEventListener('ds-fav-drama-osts-changed', refresh); window.addEventListener('storage', refresh); return () => { window.removeEventListener('ds-fav-drama-osts-changed', refresh); window.removeEventListener('storage', refresh); }; }, [key]); const isFav = ids.includes(Number(dramaId)); const toggle = async () => { if (!user) { openSignUp(); return; } const next = isFav ? ids.filter(x => x !== Number(dramaId)) : [...ids, Number(dramaId)]; try { localStorage.setItem(key, JSON.stringify(next)); } catch {} window.dispatchEvent(new CustomEvent('ds-fav-drama-osts-changed')); try { const apiBase = (window.__dsApi?.base || window.DS_API_BASE || ''); if (!apiBase) return; const csrf = window.__dsCsrf || ''; await fetch(`${apiBase}/api/favorites/drama-osts/${dramaId}`, { method: isFav ? 'DELETE' : 'POST', credentials: 'include', headers: csrf ? { 'X-CSRF-Token': csrf } : {}, }); } catch (e) { console.warn('[fav drama-osts sync]', e); } }; const tip = !user ? (isRu ? 'Войди, чтобы сохранить' : 'Sign in to save') : isFav ? (isRu ? 'Убрать из библиотеки' : 'Remove from library') : (isRu ? 'Сохранить саундтрек' : 'Save soundtrack'); return ( ); } // ── DramaSoundtrackSection ─────────────────────────────────────────────── // Таб «Саундтрек» на странице дорамы. Переключатель плееров YouTube/Spotify/ // Apple Music (только те что есть в БД). YouTube — дефолт, у всех работает. // Если активный embed не загрузился (РФ + Spotify, например) — автопереключение // на YouTube + тихое сообщение «недоступно в твоём регионе». function DramaSoundtrackSection({ items, lang, dramaId }) { if (!items || items.length === 0) { return (
{lang === 'ru' ? 'Саундтрек не добавлен' : 'No soundtrack yet'}
); } const PLATFORM_LABELS = { youtube: 'YouTube', soundcloud: 'SoundCloud', spotify: 'Spotify', apple_music: 'Apple Music', yandex: 'Яндекс.Музыка', }; const PLATFORM_ORDER = ['youtube', 'soundcloud', 'yandex', 'spotify', 'apple_music']; const grouped = {}; for (const it of items) grouped[it.platform] = it; const available = PLATFORM_ORDER.filter(p => grouped[p]); // По умолчанию активен YouTube (работает у всех), либо первый доступный. const [active, setActive] = useState(grouped.youtube ? 'youtube' : available[0]); const [iframeFailed, setIframeFailed] = useState(false); const current = grouped[active]; if (!current) return null; // URL embed по платформе const buildEmbedUrl = (item) => { if (item.platform === 'spotify') { // open.spotify.com/embed/(playlist|album|track)/{id} const kind = item.embed_kind || 'playlist'; return `https://open.spotify.com/embed/${kind}/${item.embed_id}?utm_source=generator`; } if (item.platform === 'apple_music') { // embed.music.apple.com/{country}/(album|playlist|song)/{any}/{id} const kind = item.embed_kind === 'track' ? 'song' : (item.embed_kind || 'album'); const country = item.embed_country || 'us'; return `https://embed.music.apple.com/${country}/${kind}/_/${item.embed_id}`; } if (item.platform === 'yandex') { // music.yandex.ru/iframe/#album/{id} // music.yandex.ru/iframe/#playlist/{login}/{kind} (embed_id хранится как "login/kind") // music.yandex.ru/iframe/#track/{trackId}/{albumId} (embed_id хранится как "trackId/albumId") const kind = item.embed_kind || 'album'; return `https://music.yandex.ru/iframe/#${kind}/${item.embed_id}`; } if (item.platform === 'soundcloud') { // w.soundcloud.com/player/?url=encoded(https://soundcloud.com/{path}) const fullUrl = `https://soundcloud.com/${item.embed_id}`; const enc = encodeURIComponent(fullUrl); return `https://w.soundcloud.com/player/?url=${enc}&color=%23007aff&auto_play=false&hide_related=true&show_comments=false&show_user=true&show_reposts=false&show_teaser=false&visual=false`; } // YouTube — playlist или single video if (item.embed_kind === 'playlist') { return `https://www.youtube-nocookie.com/embed/videoseries?list=${item.embed_id}&rel=0`; } return `https://www.youtube-nocookie.com/embed/${item.embed_id}?rel=0`; }; // Высота плеера зависит от платформы const playerHeight = current.platform === 'spotify' ? 380 : current.platform === 'apple_music' ? 450 : current.platform === 'yandex' ? 450 : current.platform === 'soundcloud' ? (current.embed_kind === 'playlist' ? 450 : 166) : 0; // YouTube — aspect ratio 16:9 (paddingBottom: 56.25%) const switchTab = (p) => { setActive(p); setIframeFailed(false); }; return (

{lang === 'ru' ? 'Саундтрек' : 'Soundtrack'}

{current.title_ru || current.title_en ? ( · {lang === 'ru' ? (current.title_ru || current.title_en) : (current.title_en || current.title_ru)} {current.artist ? ` — ${current.artist}` : ''} ) : null} {/* Кнопка-закладка для всего саундтрека дорамы */} {dramaId && <_OstBookmarkButton dramaId={dramaId} lang={lang} />}
{/* Platform switcher — pill tabs, видна только если >1 платформы */} {available.length > 1 && (
{available.map(p => ( ))}
)} {/* Embed */}
{current.platform === 'youtube' ? (