// DramaScope — feature components: social login, library status, reviews, share, ads, notifications, premium, AI quick picks // v=20260527-ds138 const { useState, useEffect, useRef, useMemo } = React; // ── ICONS (lightweight Lucide-style SVGs) ───────────────────────────────────── const Icon = ({ name, size=16, color='currentColor', stroke=2 }) => { const paths = { sparkles: 'M12 3l1.5 4.5L18 9l-4.5 1.5L12 15l-1.5-4.5L6 9l4.5-1.5L12 3zM19 14l.7 2.1L22 17l-2.3.9L19 20l-.7-2.1L16 17l2.3-.9L19 14zM5 14l.7 2.1L8 17l-2.3.9L5 20l-.7-2.1L2 17l2.3-.9L5 14z', bookmark: 'M6 3h12v18l-6-4-6 4V3z', share: 'M16 6l-4-4-4 4M12 2v14M5 12v8a2 2 0 002 2h10a2 2 0 002-2v-8', bell: 'M6 8a6 6 0 0112 0c0 7 3 9 3 9H3s3-2 3-9M10 21a2 2 0 004 0', crown: 'M2 18h20l-2-10-5 4-5-7-5 7-5-4-2 10z', flame: 'M12 22c5 0 8-3 8-8 0-4-3-7-4-9 0 3-3 5-5 5-1 2-3 4-3 7s2 5 4 5z', eye: 'M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12zM12 9a3 3 0 100 6 3 3 0 000-6z', eyeOff: 'M2 2l20 20M6.7 6.7C4.1 8.4 2 12 2 12s4 7 10 7c2 0 3.8-.6 5.3-1.5M9.5 9.5a3 3 0 004 4', star: 'M12 2l3 7 7 .5-5.5 4.5 2 7L12 17l-6.5 4 2-7L2 9.5 9 9z', heart: 'M12 21s-7-4.5-9.5-9C1 8.5 3 5 6.5 5 9 5 11 7 12 8c1-1 3-3 5.5-3 3.5 0 5.5 3.5 4 7C19 16.5 12 21 12 21z', msg: 'M3 8a3 3 0 013-3h12a3 3 0 013 3v8a3 3 0 01-3 3H9l-4 4v-4H6a3 3 0 01-3-3V8z', users: 'M16 21v-2a4 4 0 00-4-4H6a4 4 0 00-4 4v2M9 11a4 4 0 100-8 4 4 0 000 8zM22 21v-2a4 4 0 00-3-3.9M16 3.1A4 4 0 0116 11', play: 'M5 3l14 9-14 9V3z', check: 'M5 12l5 5 9-11', }; return ( ); }; // ── SOCIAL LOGIN BUTTONS ────────────────────────────────────────────────────── const SOCIAL_PROVIDERS = [ { id:'google', label:'Continue with Google', bg:'#fff', fg:'#111', icon:() }, { id:'telegram', label:'Continue with Telegram', bg:'#229ED9', fg:'#fff', icon:() }, { id:'facebook', label:'Continue with Facebook', bg:'#1877F2', fg:'#fff', icon:() }, ]; function SocialLoginButtons({ onSelect }) { return (
{SOCIAL_PROVIDERS.map(p => ( ))}
); } // ── LIBRARY STATUS ──────────────────────────────────────────────────────────── // Дефолт (fallback) — реальные label/color приходят из taxonomy.json через __dsLibraryStatuses // Палитра: tiffany #0abab5 + небесно-голубой // «favorite» убран — есть отдельная кнопка ♥ FavoriteDramaButton рядом с библиотекой // Цвета статусов библиотеки — единый источник правды для всех мест: // квадратный значок у названия дорамы, бейджи на карточках, ViewersSummary. // iconColor — цвет иконки ВНУТРИ цветного бейджа (контраст с background). const LIBRARY_STATUSES_FALLBACK = [ // Цвета: ярко-голубой watching / зелёный completed (по ТЗ Marina май 2026 — // раньше оба были бирюзово-зелёные и сливались). { id:'watching', label:'Watching', color:'#1e9eff', iconColor:'#ffffff' }, // ярко-голубой фон, белая иконка { id:'plan', label:'Plan to Watch',color:'#7bc3ff', iconColor:'#0a1226' }, // светло-голубой фон, тёмная иконка { id:'completed', label:'Completed', color:'#22c55e', iconColor:'#ffffff' }, // зелёный фон, белая иконка { id:'rewatch', label:'Rewatch', color:'#8a98a8', iconColor:'#0a1226' }, // серый фон, тёмная иконка { id:'dropped', label:'Dropped', color:'#e05858', iconColor:'#ffffff' }, // красный фон, белая иконка ]; // Обычный массив (mutable). При загрузке taxonomy.json index.html заменит содержимое через splice. const LIBRARY_STATUSES = [...LIBRARY_STATUSES_FALLBACK]; if (typeof window !== 'undefined') { window.__dsLibStatusesArr = LIBRARY_STATUSES; // Если taxonomy уже загружена раньше (race) — сразу подставим if (Array.isArray(window.__dsLibraryStatuses) && window.__dsLibraryStatuses.length) { LIBRARY_STATUSES.splice(0, LIBRARY_STATUSES.length, ...window.__dsLibraryStatuses); } } // Иконка "открытая книга + плюс" — для дефолтной кнопки «Добавить в библиотеку». // Две страницы развёрнутой книги с корешком по центру, маленький плюс справа. function BookPlusIcon({ size = 20 }) { return ( {/* Левая страница */} {/* Правая страница */} {/* Плюс справа */} ); } // Тонко-линейные SVG иконки в стиле проекта (currentColor) const LIB_ICONS = { watching: , plan: , completed: , favorite: , rewatch: , dropped: , }; function LibraryStatusButton({ item, fullWidth, square = false }) { const { user, openSignUp } = window.useAuth(); const { t, lang } = window.useI18n(); const [open, setOpen] = useState(false); const ref = useRef(null); const storageKey = `ds_library_${user?.email||'guest'}`; const [library, setLibrary] = useState(()=>{ try { return JSON.parse(localStorage.getItem(storageKey))||[]; } catch { return []; }}); const entry = library.find(x=>x.id===item.id); const status = entry?.status; const curStatus = LIBRARY_STATUSES.find(s=>s.id===status); const isRu = lang === 'ru'; useEffect(()=>{ const h = (e)=>{ if (ref.current && !ref.current.contains(e.target)) setOpen(false); }; document.addEventListener('mousedown', h); return ()=>document.removeEventListener('mousedown', h); },[]); // Реактивно обновляем local library при изменении из других мест (например DramaCard) useEffect(() => { const refresh = () => { try { setLibrary(JSON.parse(localStorage.getItem(storageKey)) || []); } catch {} }; window.addEventListener('ds-library-changed', refresh); window.addEventListener('storage', refresh); return () => { window.removeEventListener('ds-library-changed', refresh); window.removeEventListener('storage', refresh); }; }, [storageKey]); const setStatus = (newStatus) => { if (!user) { openSignUp(); return; } let next; if (newStatus === null) { next = library.filter(x=>x.id!==item.id); } else { const data = { id:item.id, slug:item.slug, 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() }; next = entry ? library.map(x=>x.id===item.id?{...x, ...data}:x) : [...library, data]; } setLibrary(next); localStorage.setItem(storageKey, JSON.stringify(next)); window.dispatchEvent(new CustomEvent('ds-library-changed')); setOpen(false); }; if (!user) { if (square) { return ( ); } return ( ); } // ── Квадратный режим (square): красивый 40×40 с иконкой статуса ── if (square) { return (
{open && (
{LIBRARY_STATUSES.filter(s => s.id !== 'favorite').map(s => ( ))} {status && ( <>
)}
)}
); } return (
{open && (
{LIBRARY_STATUSES.filter(s => s.id !== 'favorite').map(s => ( ))} {status && ( <>
)}
)}
); } // ── RECOMMEND BLOCK ─────────────────────────────────────────────────────────── const RECOMMEND_REASONS = ['Chemistry','Emotional story','Green flag male lead','Amazing OST','Beautiful cinematography','Addictive','Comfort drama','Strong acting','Beautiful romance','Great ending']; function RecommendBlock({ dramaId }) { const { t } = (window.useI18n ? window.useI18n() : { t: (s) => s }); const { user, openSignIn } = window.useAuth(); const storageKey = `ds_recommend_${dramaId}_${user?.email||'guest'}`; const aggregateKey = `ds_recommend_agg_${dramaId}`; const [data, setData] = useState(()=>{ try{ return JSON.parse(localStorage.getItem(storageKey))||{ recommended:false, reasons:[] }; }catch{ return { recommended:false, reasons:[] }; } }); const [showReasons, setShowReasons] = useState(false); const agg = JSON.parse(localStorage.getItem(aggregateKey) || '{"yes":0,"no":0,"total":0}'); const percent = agg.total > 0 ? Math.round((agg.yes / agg.total) * 100) : Math.floor(Math.random()*30+60); const toggleRecommend = () => { if (!user) { openSignIn(); return; } const next = { ...data, recommended: !data.recommended }; setData(next); localStorage.setItem(storageKey, JSON.stringify(next)); // simulate aggregate update const a = JSON.parse(localStorage.getItem(aggregateKey)||'{"yes":0,"no":0,"total":0}'); if (next.recommended) { a.yes += 1; a.total += 1; } else { a.yes = Math.max(0, a.yes - 1); a.total = Math.max(0, a.total - 1); } localStorage.setItem(aggregateKey, JSON.stringify(a)); if (next.recommended) setShowReasons(true); // Sync на сервер: PUT /api/ratings/drama/:id/recommendation { recommended: bool } // — отдельный endpoint, не затирает другие dimensions (overall/ost/etc). // Это даёт рекомендации в публичном профиле /u/:id (Sprint B, июнь 2026). try { const api = window.__dsApi; if (api?.fetch) { api.fetch(`/api/ratings/drama/${dramaId}/recommendation`, { method: 'PUT', body: JSON.stringify({ recommended: next.recommended }), }).catch(() => {}); } } catch {} }; const toggleReason = (r) => { const reasons = data.reasons.includes(r) ? data.reasons.filter(x=>x!==r) : [...data.reasons, r]; const next = { ...data, reasons }; setData(next); localStorage.setItem(storageKey, JSON.stringify(next)); }; return (

{t('Recommend this drama')}

{t('Recommended by')} {percent}% {t('of users')}
{data.recommended && (
{t('Why do you recommend it? (pick all that apply)')}
{RECOMMEND_REASONS.map(r => { const active = data.reasons.includes(r); return ( ); })}
{t('Public summary')}
{t('Most recommended for:')} {t('Chemistry')}, {t('Emotional impact')}, {t('Visuals')}, {t('OST')}, {t('Comfort')}.
)}
); } // ── REVIEWS SECTION ─────────────────────────────────────────────────────────── const REVIEW_REACTIONS = ['❤️','😂','😭','🔥','🛐','👏','🤯','😡']; // Универсальная секция отзывов. Принимает либо dramaId, либо actorId. // storage-ключ: legacy `ds_reviews_` для дорам (обратная совместимость), // `ds_reviews_actor_` для актёров. function ReviewsSection({ dramaId, actorId }) { const { t } = (window.useI18n ? window.useI18n() : { t: (s) => s }); const { user, openSignIn } = window.useAuth(); const storageKey = dramaId ? `ds_reviews_${dramaId}` : `ds_reviews_actor_${actorId}`; const [reviews, setReviews] = useState(()=>{ try { return JSON.parse(localStorage.getItem(storageKey))||[]; } catch { return []; }}); const [showForm, setShowForm] = useState(false); const [text, setText] = useState(''); const [isSpoiler, setIsSpoiler] = useState(false); const save = (next) => { setReviews(next); localStorage.setItem(storageKey, JSON.stringify(next)); }; const post = () => { if (!user || !text.trim()) return; const review = { id:Date.now(), userEmail:user.email, userName:user.name, text:text.trim(), spoiler:isSpoiler, date:'just now', reactions:{}, replies:[] }; save([review, ...reviews]); setText(''); setIsSpoiler(false); setShowForm(false); }; const react = (reviewId, emoji) => { if (!user) { openSignIn(); return; } save(reviews.map(r => { if (r.id!==reviewId) return r; const rxs = { ...(r.reactions||{}) }; const list = rxs[emoji] || []; rxs[emoji] = list.includes(user.email) ? list.filter(e=>e!==user.email) : [...list, user.email]; return { ...r, reactions: rxs }; })); }; const reply = (reviewId, replyText) => { if (!user || !replyText.trim()) return; save(reviews.map(r => r.id===reviewId ? { ...r, replies:[...(r.replies||[]), { id:Date.now(), userEmail:user.email, userName:user.name, text:replyText.trim(), date:'just now', reactions:{} }] } : r)); }; const removeReview = (reviewId) => save(reviews.filter(r=>r.id!==reviewId)); return (

{t('Reviews')} ({reviews.length})

{user ? ( ) : ( )}
{showForm && user && (