detail screen now uses native Lampa markup (full-start-new + full-descr + full-start__button); data stays local

This commit is contained in:
Hermes committed 2026-08-08 20:40:52 +02:00
1 parent 00a68319c0
commit b5dc8d80fa
1 file changed
+60 -50
+60 -50
View File
@@ -52,22 +52,12 @@
window.__mymovies_css_injected = true;
// Inject CSS into <head> so it actually applies.
// Only layout wrappers + detail screen; the movie cards use NATIVE Lampa styles (.card).
// Only layout wrappers; the movie cards and detail screen use NATIVE Lampa
// styles (.card / .full-start-new / .full-descr / .full-start__button).
var css =
'.mymovies{padding:2.2em 3.4em;overflow-y:auto;height:100%;box-sizing:border-box}' +
'.movies-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:1.4em}' +
'.mymovies-detail{padding:3em;max-width:980px;box-sizing:border-box}' +
'.detail-head{display:flex;gap:2.2em;flex-wrap:wrap;align-items:flex-start}' +
'.detail-poster{width:240px;max-width:40vw;border-radius:12px;display:block;background:#1b1b1f}' +
'.detail-info{flex:1;min-width:260px}' +
'.detail-info h1{margin:0 0 .35em;font-size:2em;line-height:1.15}' +
'.detail-orig{opacity:.6;font-size:1.1em;margin-bottom:.6em}' +
'.detail-meta{display:flex;flex-wrap:wrap;gap:.6em;margin:.4em 0 1em}' +
'.detail-meta>span{padding:.25em .7em;border-radius:6px;background:rgba(255,255,255,.08);font-size:.95em}' +
'.detail-desc{opacity:.85;line-height:1.5;font-size:1.05em;margin-top:.6em;max-width:60ch}' +
'.detail-actions{display:flex;gap:1em;margin-top:1.8em;flex-wrap:wrap}' +
'.detail-actions .btn{padding:.7em 1.8em;border-radius:8px;background:rgba(255,255,255,.1);font-size:1.1em;cursor:pointer}' +
'.detail-actions .btn.focus,.detail-actions .btn:hover{background:var(--accent-color,#3a7afe);color:#fff}' +
'.mymovies-detail{padding:2em 3em;box-sizing:border-box}' +
'.mymovies-empty{padding:2em;opacity:.6;font-size:1.2em}';
$('<style id="mymovies-style">').text(css).appendTo('head');
}
@@ -263,49 +253,69 @@
if (!m || !m.title) { Lampa.Activity.back(); return document.createElement('div'); }
injectStyles();
var html = document.createElement('div');
html.className = 'mymovies-detail';
var head = document.createElement('div');
head.className = 'detail-head';
var poster = document.createElement('img');
poster.className = 'detail-poster';
poster.src = resolve(m.poster || m.cover);
poster.alt = m.title || '';
head.appendChild(poster);
var info = document.createElement('div');
info.className = 'detail-info';
var h1 = document.createElement('h1');
h1.textContent = m.title;
info.appendChild(h1);
if (m.original_title) { var d = document.createElement('div'); d.className = 'detail-orig'; d.textContent = m.original_title; info.appendChild(d); }
var meta = document.createElement('div');
meta.className = 'detail-meta';
if (m.year) { var s = document.createElement('span'); s.textContent = m.year; meta.appendChild(s); }
if (m.genre && m.genre.length) { var s = document.createElement('span'); s.textContent = m.genre.join(', '); meta.appendChild(s); }
if (m.rating) { var s = document.createElement('span'); s.textContent = '★ ' + m.rating; meta.appendChild(s); }
if (meta.children.length) info.appendChild(meta);
if (m.description) { var d = document.createElement('div'); d.className = 'detail-desc'; d.textContent = m.description; info.appendChild(d); }
head.appendChild(info);
html.appendChild(head);
var actions = document.createElement('div');
actions.className = 'detail-actions';
var btnWatch = document.createElement('div');
btnWatch.className = 'btn selector';
btnWatch.setAttribute('data-act', 'play');
btnWatch.textContent = 'Watch';
actions.appendChild(btnWatch);
// Native Lampa detail markup (matches the built-in 'full' screen)
var html = document.createElement('div');
html.className = 'mymovies-detail full full--movie';
var start = document.createElement('div');
start.className = 'full-start-new';
start.innerHTML =
'<div class="full-start-new__body">' +
'<div class="full-start-new__left">' +
'<div class="full-start-new__poster">' +
'<img class="full-start-new__img full--poster" src="' + resolve(m.poster || m.cover) + '" alt="' + (m.title || '') + '" />' +
'</div>' +
'</div>' +
'<div class="full-start-new__right">' +
(m.original_title ? '<div class="full-start-new__head">' + esc(m.original_title) + '</div>' : '') +
'<div class="full-start-new__title">' + esc(m.title) + '</div>' +
(m.tagline ? '<div class="full-start-new__tagline full--tagline">' + esc(m.tagline) + '</div>' : '') +
'<div class="full-start-new__rate-line">' +
(m.rating ? '<div class="full-start__rate rate--tmdb"><div>' + esc(String(m.rating)) + '</div><div class="source--name">★</div></div>' : '') +
'</div>' +
'<div class="full-start-new__details"></div>' +
'<div class="full-start-new__reactions"></div>' +
'<div class="full-start-new__buttons"></div>' +
'</div>' +
'</div>';
html.appendChild(start);
// Details line: year ● genre1, genre2
var info = [];
if (m.year) info.push(esc(String(m.year)));
if (m.genre && m.genre.length) info.push(esc(m.genre.join(', ')));
start.querySelector('.full-start-new__details').innerHTML = info.join('<span class="full-start-new__split">●</span>');
// Description block (native full-descr)
if (m.description) {
var descr = document.createElement('div');
descr.className = 'full-descr';
descr.innerHTML =
'<div class="full-descr__left">' +
'<div class="full-descr__text selector">' + esc(m.description) + '</div>' +
'<div class="full-descr__details"></div>' +
'<div class="full-descr__tags"></div>' +
'</div>';
html.appendChild(descr);
}
// Action buttons (native style)
var buttons = start.querySelector('.full-start-new__buttons');
var btnPlay = document.createElement('div');
btnPlay.className = 'full-start__button selector button--play';
btnPlay.innerHTML = '<svg><use xlink:href="#sprite-play"></use></svg><span>Смотреть</span>';
buttons.appendChild(btnPlay);
$(btnPlay).on('hover:enter', function () { play(m); });
if (m.torrent || m.magnet) {
var btnDl = document.createElement('div');
btnDl.className = 'btn selector';
btnDl.setAttribute('data-act', 'download');
btnDl.textContent = 'Download';
actions.appendChild(btnDl);
btnDl.className = 'full-start__button selector button--book';
btnDl.innerHTML = '<span>Скачать</span>';
buttons.appendChild(btnDl);
$(btnDl).on('hover:enter', function () { download(m); });
}
html.appendChild(actions);
$(btnWatch).on('hover:enter', function () { play(m); });
return html;
};
}