From b5dc8d80fad10b6415e71507f7a7167625ef4dd5 Mon Sep 17 00:00:00 2001
From: Hermes <hermes@local>
Date: Sat, 8 Aug 2026 20:40:52 +0200
Subject: [PATCH] detail screen now uses native Lampa markup (full-start-new +
 full-descr + full-start__button); data stays local

---
 plugin.js | 110 +++++++++++++++++++++++++++++-------------------------
 1 file changed, 60 insertions(+), 50 deletions(-)

diff --git a/plugin.js b/plugin.js
index 15fb465..5093b0d 100644
--- a/plugin.js
+++ b/plugin.js
@@ -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;
         };
     }