diff --git a/plugin.js b/plugin.js index da0139c..dac58d0 100644 --- a/plugin.js +++ b/plugin.js @@ -59,6 +59,8 @@ if (comp.activity) comp.activity.loader(true); + injectStyles(); + loadCatalog(function (err, data) { if (comp.activity) comp.activity.loader(false); if (err) { @@ -88,8 +90,8 @@ return; } movies.forEach(function (m) { - var card = $('
'); - card.append($('').attr('src', resolve(m.poster || m.cover)).attr('loading', 'lazy')); + var card = $('
'); + card.append($('').attr('src', resolve(m.poster || m.cover)).attr('loading', 'lazy')); card.append($('
').text(m.title || m.id)); if (m.year) card.append($('
').text(m.year)); card.on('hover:enter', function () { openMovie(m); }); @@ -98,6 +100,28 @@ if (Lampa.Selector) Lampa.Selector.update(); } + // Inject plugin styles so the grid looks like native Lampa movie cards + function injectStyles() { + if (window.__mymovies_css_injected) return; + window.__mymovies_css_injected = true; + 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}' + + '.movie-card{background:#1c1f26;border-radius:10px;overflow:hidden;cursor:pointer;transition:transform .15s}' + + '.movie-card .card__poster{width:100%;aspect-ratio:2/3;object-fit:cover;display:block;background:#2a2e38}' + + '.movie-card .card__title{padding:.6em .7em .2em;font-size:1em;line-height:1.2;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}' + + '.movie-card .card__subtitle{padding:0 .7em .6em;font-size:.85em;opacity:.6}' + + '.movie-card.focus,.movie-card.hover{transform:scale(1.05)}' + + '.mymovies-detail{padding:3em;max-width:900px}' + + '.detail-head{display:flex;gap:2em}' + + '.detail-poster{width:220px;border-radius:10px}' + + '.detail-info h1{margin:0 0 .4em;font-size:1.8em}' + + '.detail-info>div{margin:.3em 0;opacity:.85}' + + '.detail-actions{margin-top:1.5em}' + + '.mymovies-empty{padding:2em;opacity:.6;font-size:1.2em}'; + $('