From 38632479c9b66f48b4540a29e806e4fa69a0feaa Mon Sep 17 00:00:00 2001
From: Hermes <hermes@local>
Date: Sat, 8 Aug 2026 12:37:02 +0200
Subject: [PATCH] fix: render component via Lampa.Layer (official iptv
 pattern), create() returns render()

---
 plugin.js | 58 ++++++++++++++++++++++++++++++++++---------------------
 1 file changed, 36 insertions(+), 22 deletions(-)

diff --git a/plugin.js b/plugin.js
index ee14574..f88e017 100644
--- a/plugin.js
+++ b/plugin.js
@@ -21,11 +21,15 @@
     }
 
     // ---------- Компонент: список фильмов ----------
+    // Паттерн из официального iptv-плагина Lampa:
+    // create() возвращает this.render(); render() строит html и выводит через Lampa.Layer.
     Lampa.Component.add(PLUGIN.name, {
         create: function () {
+            return this.render();
+        },
+        render: function () {
             var comp = this;
-            var content = comp.activity.render().find('.main__content');
-            content.html('<div class="mymovies"><div class="movies-grid"></div></div>');
+            var html = $('<div class="mymovies"><div class="movies-grid"></div></div>');
             comp.activity.loader(true);
 
             fetch(base() + 'movies/catalog.json')
@@ -37,14 +41,19 @@
                     comp.activity.loader(false);
                     var movies = (data && data.movies) || [];
                     console.log('[mymovies] loaded', movies.length, 'films');
-                    renderMovies(content.find('.movies-grid'), movies);
+                    renderMovies(html.find('.movies-grid'), movies);
+                    Lampa.Layer.update(html);
+                    Lampa.Layer.visible(html);
                 })
                 .catch(function (err) {
                     comp.activity.loader(false);
                     console.error('[mymovies] catalog error', err);
-                    content.find('.movies-grid').html('<div class="mymovies-empty">Ошибка загрузки каталога</div>');
-                    Lampa.Noty.show('Не удалось загрузить каталог');
+                    html.find('.movies-grid').html('<div class="mymovies-empty">Ошибка загрузки каталога</div>');
+                    Lampa.Layer.update(html);
+                    Lampa.Layer.visible(html);
                 });
+
+            return html;
         }
     });
 
@@ -70,27 +79,32 @@
     var selected = null;
     Lampa.Component.add(PLUGIN.name + '_detail', {
         create: function () {
+            return this.render();
+        },
+        render: function () {
             var comp = this;
             var m = selected;
-            if (!m) { Lampa.Activity.back(); return; }
-            var content = comp.activity.render().find('.main__content');
+            if (!m) { Lampa.Activity.back(); return $('<div></div>'); }
 
-            var html = '<div class="mymovies-detail">';
-            html += '<div class="detail-head">';
-            html += '<img class="detail-poster" src="' + resolve(m.poster || m.cover) + '">';
-            html += '<div class="detail-info"><h1>' + esc(m.title) + '</h1>';
-            if (m.original_title) html += '<div class="detail-orig">' + esc(m.original_title) + '</div>';
-            if (m.year) html += '<div class="detail-year">' + m.year + '</div>';
-            if (m.genre && m.genre.length) html += '<div class="detail-genre">' + m.genre.join(', ') + '</div>';
-            if (m.rating) html += '<div class="detail-rating">★ ' + m.rating + '</div>';
-            if (m.description) html += '<div class="detail-desc">' + esc(m.description) + '</div>';
-            html += '</div></div>';
-            html += '<div class="detail-actions"><div class="btn selector" data-act="play">Смотреть</div></div>';
-            html += '</div>';
+            var html = $('<div class="mymovies-detail">');
+            html.append('<div class="detail-head">');
+            html.append('<img class="detail-poster" src="' + resolve(m.poster || m.cover) + '">');
+            var info = $('<div class="detail-info">').append($('<h1>').text(m.title));
+            if (m.original_title) info.append($('<div class="detail-orig">').text(m.original_title));
+            if (m.year) info.append($('<div class="detail-year">').text(m.year));
+            if (m.genre && m.genre.length) info.append($('<div class="detail-genre">').text(m.genre.join(', ')));
+            if (m.rating) info.append($('<div class="detail-rating">').text('★ ' + m.rating));
+            if (m.description) info.append($('<div class="detail-desc">').text(m.description));
+            html.append(info);
+            html.append('</div>');
+            html.append($('<div class="detail-actions">').append(
+                $('<div class="btn selector" data-act="play">').text('Смотреть')
+            ));
 
-            content.html(html);
-            content.find('[data-act="play"]').on('hover:enter', function () { play(m); });
-            Lampa.Selector.update();
+            html.find('[data-act="play"]').on('hover:enter', function () { play(m); });
+            Lampa.Layer.update(html);
+            Lampa.Layer.visible(html);
+            return html;
         }
     });