remote/keyboard nav via Lampa.Controller.collectionSet + enter/back handlers

plugin.js

@@ -73,20 +73,52 @@
     function MyMovies() {
         var comp = this;
         var body;
+        var grid;
 
         this.create = function (b) {
             body = b;
         };
 
+        // Wire up keyboard/remote navigation using native Lampa Controller.
         this.start = function () {
-            if (Lampa.Selector) Lampa.Selector.update();
+            if (!grid) return;
+            var cards = grid.find('.card.selector');
+            if (!cards.length) return;
+
+            // Native collection navigation: Lampa handles up/down/left/right
+            // over .selector elements automatically once the collection is set.
+            Lampa.Controller.collectionSet(grid);
+            Lampa.Controller.collectionFocus(cards[0], grid);
+
+            // Custom controller only for enter/back while this screen is active.
+            Lampa.Controller.add('mymovies', {
+                toggle: function () {
+                    var focused = grid.find('.card.selector.focus')[0] || cards[0];
+                    Lampa.Controller.collectionFocus(focused, grid);
+                },
+                enter: function () {
+                    var el = grid.find('.card.selector.focus')[0] || cards[0];
+                    if (el) {
+                        var id = $(el).attr('data-id');
+                        var m = comp._movies ? comp._movies.find(function (x) { return x.id === id; }) : null;
+                        if (m) openMovie(m);
+                    }
+                },
+                back: function () {
+                    Lampa.Activity.back();
+                },
+                gone: function () {
+                    Lampa.Controller.clear('mymovies');
+                }
+            });
+            Lampa.Controller.toggle('mymovies');
         };
 
         this.render = function () {
             injectStyles();
             var html = document.createElement('div');
             html.className = 'mymovies';
-            var grid = document.createElement('div');
+            grid = document.createElement('div');
             grid.className = 'movies-grid';
             html.appendChild(grid);
 
@@ -97,13 +129,15 @@
                 if (err) {
                     console.error('[mymovies] catalog error', err);
                     grid.innerHTML = '<div class="mymovies-empty">Catalog load error</div>';
-                    if (Lampa.Selector) Lampa.Selector.update();
                     return;
                 }
                 var movies = (data && data.movies) || [];
                 movies = sortMovies(movies);
+                comp._movies = movies;
                 console.log('[mymovies] loaded', movies.length, 'films');
                 renderMovies($(grid), movies);
+                // re-apply navigation if activity already started
+                if (comp.activity && comp.activity.ready) comp.start();
             });
 
             return html;
@@ -127,7 +161,6 @@
         grid.empty();
         if (!movies.length) {
             grid.append('<div class="mymovies-empty">Catalog is empty</div>');
-            if (Lampa.Selector) Lampa.Selector.update();
             return;
         }
         movies.forEach(function (m) {
@@ -145,7 +178,6 @@
             card.on('hover:enter', function () { openMovie(m); });
             grid.append(card);
         });
-        if (Lampa.Selector) Lampa.Selector.update();
     }
 
     // ---------- Component: movie detail ----------
@@ -159,7 +191,16 @@
         };
 
         this.start = function () {
-            if (Lampa.Selector) Lampa.Selector.update();
+            // Remote: only "back" is needed on the detail screen.
+            Lampa.Controller.add('mymovies_detail', {
+                back: function () {
+                    Lampa.Activity.back();
+                },
+                gone: function () {
+                    Lampa.Controller.clear('mymovies_detail');
+                }
+            });
+            Lampa.Controller.toggle('mymovies_detail');
         };
 
         this.render = function () {