detail screen now uses native Lampa markup (full-start-new + full-descr + full-start__button); data stays local
This commit is contained in:
1 parent
00a68319c0
commit
b5dc8d80fa
1 file changed
+60
-50
@@ -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;
|
||||
};
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user