319 lines
13 KiB
JavaScript
319 lines
13 KiB
JavaScript
(function () {
|
|
'use strict';
|
|
|
|
var PLUGIN = { name: 'mymovies', title: 'My Movies', menu_action: 'mymovies' };
|
|
var DEFAULT_BASE = 'https://movies-lmp-18.dynv6.net/';
|
|
|
|
function base() {
|
|
var b = Lampa.Storage.get(PLUGIN.name + '_base', DEFAULT_BASE);
|
|
return b.replace(/\/+$/, '') + '/';
|
|
}
|
|
|
|
function resolve(p) {
|
|
if (!p) return '';
|
|
if (/^https?:\/\//.test(p)) return p;
|
|
if (/^magnet:/.test(p)) return p;
|
|
return base() + p.replace(/^\/+/, '');
|
|
}
|
|
|
|
function esc(s) {
|
|
return String(s == null ? '' : s)
|
|
.replace(/&/g, '&').replace(/</g, '<')
|
|
.replace(/>/g, '>').replace(/"/g, '"');
|
|
}
|
|
|
|
// Load catalog via Lampa native network layer (TV-safe, fetch fails on some devices)
|
|
function loadCatalog(cb) {
|
|
var url = base() + 'movies/catalog.json';
|
|
if (Lampa.Reguest && Lampa.Reguest.get) {
|
|
Lampa.Reguest.get(url, function (html) {
|
|
try {
|
|
cb(null, JSON.parse(html));
|
|
} catch (e) {
|
|
cb(e, null);
|
|
}
|
|
}, function (err) {
|
|
cb(err || new Error('request failed'), null);
|
|
});
|
|
} else {
|
|
fetch(url).then(function (r) { return r.json(); })
|
|
.then(function (d) { cb(null, d); })
|
|
.catch(function (e) { cb(e, null); });
|
|
}
|
|
}
|
|
|
|
// Plugin styles.
|
|
// NOTE: Lampa.Template.add() only stores the string in memory — it does NOT
|
|
// inject <style> into the page. So we inject CSS manually into <head>.
|
|
// Movie cards use NATIVE Lampa markup/styles (.card / .card__img / .card__title),
|
|
// so they look identical to every other Lampa section.
|
|
function injectStyles() {
|
|
if (window.__mymovies_css_injected) return;
|
|
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).
|
|
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:900px}' +
|
|
'.detail-head{display:flex;gap:2em;flex-wrap:wrap}' +
|
|
'.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}';
|
|
$('<style id="mymovies-style">').text(css).appendTo('head');
|
|
}
|
|
|
|
// ---------- Component: movie list ----------
|
|
// Framework contract (ActivitySlide.create):
|
|
// component.create(body) -> store the activity body
|
|
// body.append(component.render(true)) -> render() returns a DOM node
|
|
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 (!grid) return;
|
|
var cards = grid.find('.card.selector');
|
|
if (!cards.length) return;
|
|
|
|
// Native collection navigation: Lampa handles up/down/left/right and
|
|
// fires "hover:enter" on the focused .selector when OK/Enter is pressed.
|
|
Lampa.Controller.collectionSet(grid);
|
|
Lampa.Controller.collectionFocus(cards[0], grid);
|
|
|
|
// Enter (OK button) and Back handlers for this screen.
|
|
Lampa.Controller.add('mymovies', {
|
|
enter: function () {
|
|
var el = grid.find('.card.selector.focus')[0] || cards[0];
|
|
if (!el) return;
|
|
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';
|
|
grid = document.createElement('div');
|
|
grid.className = 'movies-grid';
|
|
html.appendChild(grid);
|
|
|
|
if (comp.activity) comp.activity.loader(true);
|
|
|
|
loadCatalog(function (err, data) {
|
|
if (comp.activity) comp.activity.loader(false);
|
|
if (err) {
|
|
console.error('[mymovies] catalog error', err);
|
|
grid.innerHTML = '<div class="mymovies-empty">Catalog load error</div>';
|
|
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 once cards exist (activity.start may have run before load)
|
|
comp.start();
|
|
});
|
|
|
|
return html;
|
|
};
|
|
}
|
|
Lampa.Component.add(PLUGIN.name, MyMovies);
|
|
|
|
// Keep user-defined display order (Supergirl, Interstellar, Inception, Matrix)
|
|
var DESIRED_ORDER = ['supergirl-2026', 'interstellar', 'inception', 'matrix'];
|
|
function sortMovies(movies) {
|
|
return movies.slice().sort(function (a, b) {
|
|
var ia = DESIRED_ORDER.indexOf(a.id);
|
|
var ib = DESIRED_ORDER.indexOf(b.id);
|
|
if (ia === -1) ia = 999;
|
|
if (ib === -1) ib = 999;
|
|
return ia - ib;
|
|
});
|
|
}
|
|
|
|
function renderMovies(grid, movies) {
|
|
grid.empty();
|
|
if (!movies.length) {
|
|
grid.append('<div class="mymovies-empty">Catalog is empty</div>');
|
|
return;
|
|
}
|
|
movies.forEach(function (m) {
|
|
// Native Lampa card markup so it looks exactly like every other section.
|
|
// card--loaded makes Lampa show the poster (native .card__img is hidden until then).
|
|
var card = $(
|
|
'<div class="card selector card--loaded" data-id="' + esc(m.id) + '">' +
|
|
'<div class="card__view">' +
|
|
'<img src="' + resolve(m.poster || m.cover) + '" class="card__img" />' +
|
|
'<div class="card__icons"><div class="card__icons-inner"></div></div>' +
|
|
'</div>' +
|
|
'<div class="card__title">' + esc(m.title || m.id) + '</div>' +
|
|
(m.year ? '<div class="card__age">' + esc(String(m.year)) + '</div>' : '') +
|
|
'</div>');
|
|
card.on('hover:enter', function () { openMovie(m); });
|
|
grid.append(card);
|
|
});
|
|
}
|
|
|
|
// ---------- Component: movie detail ----------
|
|
var selected = null;
|
|
function MyMoviesDetail() {
|
|
var comp = this;
|
|
var body;
|
|
|
|
this.create = function (b) {
|
|
body = b;
|
|
};
|
|
|
|
this.start = function () {
|
|
// 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 () {
|
|
var m = (comp.activity && comp.activity.object) || selected;
|
|
if (!m) { 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);
|
|
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); }
|
|
if (m.year) { var d = document.createElement('div'); d.className = 'detail-year'; d.textContent = m.year; info.appendChild(d); }
|
|
if (m.genre && m.genre.length) { var d = document.createElement('div'); d.className = 'detail-genre'; d.textContent = m.genre.join(', '); info.appendChild(d); }
|
|
if (m.rating) { var d = document.createElement('div'); d.className = 'detail-rating'; d.textContent = '★ ' + m.rating; info.appendChild(d); }
|
|
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 btn = document.createElement('div');
|
|
btn.className = 'btn selector';
|
|
btn.setAttribute('data-act', 'play');
|
|
btn.textContent = 'Watch';
|
|
actions.appendChild(btn);
|
|
html.appendChild(actions);
|
|
|
|
$(btn).on('hover:enter', function () { play(m); });
|
|
return html;
|
|
};
|
|
}
|
|
Lampa.Component.add(PLUGIN.name + '_detail', MyMoviesDetail);
|
|
|
|
function openMovie(m) {
|
|
selected = m;
|
|
Lampa.Activity.push({
|
|
url: '',
|
|
component: PLUGIN.name + '_detail',
|
|
title: m.title,
|
|
page: m.title,
|
|
object: m
|
|
});
|
|
}
|
|
|
|
function play(m) {
|
|
var url = m.magnet ? m.magnet : resolve(m.torrent);
|
|
Lampa.Player.play({
|
|
url: url,
|
|
title: m.title,
|
|
img: resolve(m.poster || m.cover),
|
|
season: 0,
|
|
episode: 0
|
|
});
|
|
}
|
|
|
|
// ---------- Menu item ----------
|
|
// Lampa builds the main menu on the 'menu:start' event, e.body is the jQuery menu root.
|
|
// Remove ALL old copies from the DOM first, then add exactly one button.
|
|
function makeButton() {
|
|
var button = $(
|
|
'<li class="menu__item selector" data-action="' + PLUGIN.menu_action + '">' +
|
|
'<div class="menu__ico">' +
|
|
'<svg class="sprite-folder"><use xlink:href="#sprite-folder"></use></svg>' +
|
|
'</div>' +
|
|
'<div class="menu__text">' + PLUGIN.title + '</div>' +
|
|
'</li>'
|
|
);
|
|
button.on('hover:enter', function () {
|
|
Lampa.Activity.push({
|
|
url: '',
|
|
component: PLUGIN.name,
|
|
title: PLUGIN.title,
|
|
page: PLUGIN.title
|
|
});
|
|
});
|
|
return button;
|
|
}
|
|
|
|
var menuSubscribed = false;
|
|
function addMenuButton() {
|
|
// remove ALL copies everywhere in DOM, then add exactly one
|
|
$('[data-action="' + PLUGIN.menu_action + '"]').remove();
|
|
$('.menu .menu__list').eq(0).append(makeButton());
|
|
if (Lampa.Selector) Lampa.Selector.update();
|
|
}
|
|
function start() {
|
|
if (menuSubscribed) return;
|
|
menuSubscribed = true;
|
|
Lampa.Listener.follow('menu', function (e) {
|
|
if (e.type === 'start' && e.body) {
|
|
var list = e.body.find('.menu__list');
|
|
if (!list.length) return;
|
|
// guard against duplicate copies in this menu body
|
|
if (list.find('[data-action="' + PLUGIN.menu_action + '"]').length) return;
|
|
addMenuButton();
|
|
}
|
|
});
|
|
// fallback: re-check shortly after load (covers late menu builds)
|
|
setTimeout(function () {
|
|
if ($('.menu .menu__list').length && !$('[data-action="' + PLUGIN.menu_action + '"]').length) {
|
|
addMenuButton();
|
|
}
|
|
}, 3000);
|
|
}
|
|
|
|
if (window.Lampa && Lampa.Listener && Lampa.Activity) {
|
|
start();
|
|
} else {
|
|
document.addEventListener('lampa', start);
|
|
}
|
|
})();
|