stremiok 2.1.0 → 2.2.0

package/js/view-core.js

@@ -8,6 +8,7 @@ var ViewParts = {};
 
     // ----- from the other parts -----
     function availableTabs() { return V.availableTabs.apply(null, arguments); }   // home
+    function menuItems() { return V.menuItems.apply(null, arguments); }   // home
     function clearCatalogCache() { return V.clearCatalogCache.apply(null, arguments); }   // home
     function refreshAddonRows() { return V.refreshAddonRows.apply(null, arguments); }   // home
     function epCode() { return V.epCode.apply(null, arguments); }   // detail
@@ -271,6 +272,16 @@ var ViewParts = {};
         var rename = U.el('div', 'pill focusable modal-btn', 'Rename');
         var onoff = U.el('div', 'pill focusable modal-btn', playlist.off ? 'Turn on' : 'Turn off');
         var edit = U.el('div', 'pill focusable modal-btn', 'Edit link');
+        var guide = U.el('div', 'pill focusable modal-btn', 'Guide link');
+        var fmt = IPTV.xtreamFormat ? IPTV.xtreamFormat(playlist.id) : '';   // (an Xtream account: MPEG-TS or HLS)
+        var format = U.el('div', 'pill focusable modal-btn', 'Format: ' + (fmt === 'hls' ? 'HLS' : 'MPEG-TS'));
+        format.__onselect = function () {
+            closeModal();
+            Stremio.iptvSetXtreamFormat(playlist.id, fmt === 'hls' ? 'ts' : 'hls');
+            refreshAddonRows('local:iptv');
+            U.toast('Its channels now play as ' + (fmt === 'hls' ? 'MPEG-TS' : 'HLS') + ' (reading the account again…)', 4000);
+            renderSettings();
+        };
         var reload = U.el('div', 'pill focusable modal-btn', 'Reload');
         var remove = U.el('div', 'pill focusable modal-btn danger', 'Remove');
 
@@ -312,6 +323,20 @@ var ViewParts = {};
                 }
             });
         };
+        guide.__onselect = function () {   // its TV guide: yours, or the playlist's own (empty)
+            closeModal();
+            App.openEntry({
+                title: 'TV guide link', phone: 'playlist',
+                hint: 'An XMLTV guide (.xml or .xml.gz), then Confirm. Empty uses the playlist’s own (the one it names, or an Xtream playlist’s). RETURN cancels.',
+                value: playlist.guide || '', placeholder: 'https://example.com/guide.xml.gz',
+                validate: function (v) { return ('' + v).trim() ? (U.urlProblem(v) || null) : null; },
+                onConfirm: function (v) {
+                    Stremio.iptvSetPlaylistGuide(playlist.id, v);
+                    U.toast(('' + v).trim() ? 'Guide link set: reading it…' : 'Back to the playlist’s own guide', 3000);
+                    App.back(); renderSettings();
+                }
+            });
+        };
         reload.__onselect = function () {
             closeModal();
             U.toast('Reloading playlist…', 4000);
@@ -334,6 +359,8 @@ var ViewParts = {};
         row.appendChild(rename);
         row.appendChild(onoff);
         row.appendChild(edit);
+        if (!playlist.off && typeof EPG !== 'undefined' && EPG.available && EPG.available()) { row.appendChild(guide); }
+        if (!playlist.off && fmt) { row.appendChild(format); }
         if (!playlist.off) { row.appendChild(reload); }
         row.appendChild(remove);
         box.appendChild(row);
@@ -373,33 +400,6 @@ var ViewParts = {};
         showModal(overlay, pref);
     }
 
-    // Switches in a popup (Settings › Appearance › Home tabs): OK on one turns it on or off and
-    // the list stays open (BACK closes it). items: [[key, label, on]]; words: { on, off } (the
-    // state shown after each label); onToggle(key, on).
-    function toggleList(title, items, words, onToggle) {
-        var existing = document.querySelector('.modal-overlay');
-        if (existing) { existing.parentNode.removeChild(existing); }
-        var overlay = U.el('div', 'modal-overlay');
-        var box = U.el('div', 'modal-box pick-box');
-        box.appendChild(U.el('div', 'modal-msg', title));
-        var listEl = U.el('div', 'pick-list'), first = null;
-        items.forEach(function (opt) {
-            var on = !!opt[2], it = U.el('div', 'pick-item focusable');
-            function draw() {
-                it.textContent = opt[1] + ':  ' + (on ? words.on : words.off);
-                if (on) { it.classList.add('sel'); } else { it.classList.remove('sel'); }
-            }
-            draw();
-            it.__onselect = function () { on = !on; draw(); onToggle(opt[0], on); };
-            if (!first) { first = it; }
-            listEl.appendChild(it);
-        });
-        box.appendChild(listEl);
-        overlay.appendChild(box);
-        document.body.appendChild(overlay);
-        showModal(overlay, first);
-    }
-
     // Ticks in a popup (what to import): nothing ticked at first; OK on one ticks or unticks it,
     // Select all ticks every one that can be (again: none); the button counts what's ticked.
     // items: [{ key, label, have (already yours: shown as such, can't be ticked), note }];
@@ -482,7 +482,8 @@ var ViewParts = {};
     }
 
     // The shared top menu, used on Home / Search / Settings so they look and navigate
-    // the same: tab pills + Search + Settings on the left, StremioK on the right.
+    // the same: Watching, then the tabs, Discover and Search in your order (menuItems), then
+    // Settings, on the left; StremioK on the right.
     // `active` is the key of the current view: a tab key, 'search' or 'settings'.
     function buildTopMenu(active) {
         var head = U.el('div', 'header home-header');
@@ -495,34 +496,23 @@ var ViewParts = {};
         };
         function down() { return focusBelowTop(head); }
         var tabbar = U.el('div', 'tabbar-inline');
-        availableTabs().forEach(function (t) {
-            var pill = U.el('div', 'tab-pill focusable' + (t.key === active ? ' active' : ''));
-            pill.appendChild(document.createTextNode(t.label));
-            pill.appendChild(U.el('span', 'tab-ic', t.icon));
-            pill.__onselect = function () { App.goHome(t.key); };
-            pill.__navDOWN = down;
-            tabbar.appendChild(pill);
+        // a pill: a Home tab, Discover (browse any catalog in full, its own screen), Search;
+        // Settings a chip like them (name, then icon), after them
+        function item(cls, key, label, icon, open, into) {
+            var p = U.el('div', cls + ' focusable' + (key === active ? ' active' : ''));
+            p.appendChild(document.createTextNode(label));
+            p.appendChild(U.el('span', 'tab-ic', icon));
+            p.__onselect = open;
+            p.__navDOWN = down;
+            into.appendChild(p);
+        }
+        menuItems().forEach(function (m) {
+            if (m.tab) { item('tab-pill', m.key, m.tab.label, m.tab.icon, function () { App.goHome(m.key); }, tabbar); }
+            else if (m.key === 'discover') { item('tab-pill', 'discover', 'Discover', '🔭', function () { App.openDiscover(); }, tabbar); }
+            else if (m.key === 'search') { item('hchip', 'search', 'Search', '🔍', function () { App.openSearch(); }, tabbar); }
         });
-        // Discover: browse any catalog in full, by genre / year (its own screen)
-        var disc = U.el('div', 'tab-pill focusable' + (active === 'discover' ? ' active' : ''));
-        disc.appendChild(document.createTextNode('Discover'));
-        disc.appendChild(U.el('span', 'tab-ic', '🔭'));
-        disc.__onselect = function () { App.openDiscover(); };
-        disc.__navDOWN = down;
-        tabbar.appendChild(disc);
         head.appendChild(tabbar);
-
-        // Search and Settings: pills like the tabs (name, then icon), after them
-        function chip(key, label, icon, open) {
-            var c = U.el('div', 'hchip focusable' + (active === key ? ' active' : ''));
-            c.appendChild(document.createTextNode(label));
-            c.appendChild(U.el('span', 'tab-ic', icon));
-            c.__onselect = open;
-            c.__navDOWN = down;
-            head.appendChild(c);
-        }
-        chip('search', 'Search', '🔍', function () { App.openSearch(); });
-        chip('settings', 'Settings', '⚙', function () { App.openSettings(); });
+        item('hchip', 'settings', 'Settings', '⚙', function () { App.openSettings(); }, head);
 
         head.appendChild(U.el('div', 'spacer'));
         var brand = U.el('div', 'brand');
@@ -579,6 +569,10 @@ var ViewParts = {};
         if (rating > 0 && rating <= 10 && Stremio.getPrefs().posterRatings) { c.appendChild(U.el('div', 'card-rating', '★ ' + rating.toFixed(1))); }   // (a series: marked watched whole, see setTitleWatched / the title page)
         if (kind === 'movie' || kind === 'series') { c.__onlongpress = function () { posterActions(meta, kind, c); }; }
         else if (youTubeList(meta.id)) { c.__onlongpress = function () { addYouTubeCatalog(meta); }; }   // (a channel / playlist: to your YouTube)
+        else if (/^iptv:/.test(meta.id || '') && typeof EPG !== 'undefined') {   // an IPTV channel: what's on, and its schedule
+            guideOnCard(c, meta.id);
+            c.__onlongpress = function () { liveSchedule(meta, c); };
+        }
         c.__onselect = function () {
             var t = titleType(meta.type || fallbackType);
             // Live TV catalogs (anything that isn't movies/series) skip the info page and
@@ -597,6 +591,86 @@ var ViewParts = {};
         return c;
     }
 
+    // ---- TV guide (js/epg.js) on IPTV channel cards ----
+    // What's on now, under the channel's name, with how far along it is; drawn again when the
+    // guide brings more (the cards still on a page; the most recent GUIDE_CARDS).
+    var _guideCards = [], GUIDE_CARDS = 3000;
+    function guideOnCard(card, id) {
+        drawGuide(card, id);
+        _guideCards.push(card);
+        if (_guideCards.length > GUIDE_CARDS) { _guideCards = _guideCards.slice(-GUIDE_CARDS); }
+    }
+    function drawGuide(card, id) {
+        guideLogo(card, id);
+        var g = EPG.now(id), old = card.querySelector('.card-epg');
+        if (!g || !g.now) { if (old) { card.removeChild(old); } return; }
+        var t = Date.now() / 1000, pct = Math.max(0, Math.min(100, Math.round((t - g.now.start) / (g.now.stop - g.now.start) * 100)));
+        var box = old || U.el('div', 'card-epg');
+        U.clear(box);
+        box.appendChild(U.el('div', 'card-epg-t', g.now.title));
+        var bar = U.el('div', 'card-epg-bar'), fill = U.el('i', 'card-epg-fill');
+        fill.setAttribute('style', 'width: ' + pct + '%');
+        bar.appendChild(fill);
+        box.appendChild(bar);
+        if (!old) { card.appendChild(box); }
+    }
+    // A channel card without a picture (no tvg-logo): its guide's logo, once it's known; the
+    // name stays until it has loaded.
+    function guideLogo(card, id) {
+        var src = !card.__guideLogo && !card.querySelector('img.poster') && EPG.logo(id);
+        if (!src) { return; }
+        card.__guideLogo = true;
+        var img = U.el('img', 'poster'), fb = card.querySelector('.fallback');
+        img.style.visibility = 'hidden';
+        img.onload = function () { img.style.visibility = ''; if (fb && fb.parentNode) { fb.parentNode.removeChild(fb); } };
+        img.onerror = function () { if (img.parentNode) { img.parentNode.removeChild(img); } };
+        card.insertBefore(img, card.firstChild);
+        U.deferImage(img, U.cardImage(src, 'landscape'));
+    }
+    function redrawGuideCards() {
+        _guideCards = _guideCards.filter(function (c) { return document.documentElement.contains(c); });
+        _guideCards.forEach(function (c) { drawGuide(c, c.getAttribute('data-id')); });
+    }
+    if (typeof EPG !== 'undefined') {
+        EPG.onChange(redrawGuideCards);
+        // every minute: the cards' progress bars (and what's on, once it changed) along with the time
+        setInterval(function () {
+            if (!_guideCards.length || document.hidden || (typeof Player !== 'undefined' && Player.isActive())) { return; }
+            redrawGuideCards();
+        }, 60000);
+    }
+    // Hold OK on a channel card: ▶ Watch now, ★ Add to / Remove from favorites, and its schedule
+    // from 2 hours ago to tomorrow (what's on now marked, and picked); OK on a program says
+    // what it is. A channel without a guide: the first two.
+    var _schedGen = 0;
+    function liveSchedule(meta, card) {
+        var gen = ++_schedGen;
+        U.spinner(true);
+        EPG.schedule(meta.id).then(null, function () { return []; }).then(function (list) {
+            if (gen !== _schedGen) { return; }   // (held on another card since: its own)
+            U.spinner(false);
+            if (!document.documentElement.contains(card) || (typeof Player !== 'undefined' && Player.isActive())) { return; }   // (left meanwhile)
+            var fav = IPTV.isFavorite(meta.id), t = Date.now() / 1000, at = 'play';
+            var items = [['play', '▶  Watch now'], ['fav', fav ? '★  Remove from favorites' : '★  Add to favorites']];
+            list.forEach(function (p, i) {
+                var on = p.start <= t && t < p.stop;
+                if (on) { at = 'p' + i; }
+                items.push(['p' + i, (on ? '●  ' : '') + EPG.dayTime(p.start) + '   ' + p.title]);
+            });
+            pickList((meta.name || '') + (list.length ? '  ·  TV guide' : ''), items, at, function (v) {
+                if (v === 'play') { card.__onselect(); return; }
+                if (v === 'fav') {
+                    IPTV.setFavorite(meta.id, !fav);
+                    U.toast(fav ? 'Removed from favorites' : 'Added to favorites: ★ Favorites, first on the IPTV tab', 3000);
+                    refreshAddonRows('local:iptv');
+                    return;
+                }
+                var p = list[+v.slice(1)];
+                if (p) { U.toast(EPG.dayTime(p.start) + '–' + EPG.hhmm(p.stop) + '   ' + p.title + (p.desc ? ':  ' + p.desc : ''), 8000); }
+            });
+        });
+    }
+
     // The channels of the row a live card sits in, for CH+/CH− while it plays.
     function rowChannels(card) {
         var sib = card.parentNode ? card.parentNode.children : [card], list = [], idx = 0;
@@ -750,7 +824,6 @@ var ViewParts = {};
     V.inNowPlaying = inNowPlaying;
     V.onModalClose = onModalClose;
     V.pickList = pickList;
-    V.toggleList = toggleList;
     V.pickMany = pickMany;
     V.playlistActions = playlistActions;
     V.posterCard = posterCard;

package/js/view-guide.js

@@ -0,0 +1,332 @@
+/* ViewParts: the Guide tab: the IPTV channels' TV guide as a grid (js/epg.js).
+   A row a channel that has a guide (in the IPTV tab's order, favorites first), across SPAN from
+   the current half hour, a line at the time now. Only ROWS rows are drawn at a time: ↑ / ↓ past
+   them move the window along, through every channel; programs are read for the rows drawn and
+   the AHEAD after them (a row not read yet says so until they come). Each program knows its
+   neighbors (Focus's __go hooks): ← / → the program before / after it (the hours move along past
+   an edge, never back before the current half hour for one still on), ↑ / ↓ the channel above /
+   below, at the same time. Home's details strip describes the focused program; OK on what's on
+   now plays the channel, on another says what it is. A guide-only channel's (tvg-type="guide":
+   watched elsewhere) any program: the film looked up in your addons (findInAddons). */
+(function (V) {
+    'use strict';
+    function scr() { return V.scr.apply(null, arguments); }   // core
+
+    var SPAN = 150 * 60, STEP = 30 * 60, ROWS = 10, AHEAD = 10;
+    var _g = null;   // the grid on screen: { el, start, chans, lists: { id: programs }, asked: { id: 1 }, top, nodes: [row: cells], box }
+    function floorStep(t) { return Math.floor(t / STEP) * STEP; }
+    function pct(x) { return Math.round(x * 10000) / 100; }
+
+    // Drawn again soon after (Home redrawn, the tab picked again): from what the grid before had
+    // read (REUSE_MS), the same channels in the same window and hours, focus where it was;
+    // no "Reading…" between, nothing asked again.
+    var REUSE_MS = 5 * 60 * 1000;
+    function guideGrid(rows) {
+        stopFinding();   // (a lookup from the grid drawn before: stopped)
+        var now = Date.now() / 1000, chans = EPG.guided(), was = _g;
+        var g = _g = { el: rows, start: floorStep(now), live: true, chans: chans, lists: {}, asked: {}, failed: {}, got: {}, top: 0, nodes: [], at: Date.now(), gen: EPG.generation ? EPG.generation() : 0 };   // (live: the hours show the present, and follow the clock: tick)
+        if (!chans.length) { rows.appendChild(U.el('div', 'row-empty', 'No TV guide yet (Settings › Content › IPTV › Guide link).')); return; }
+        if (was && was.at && Date.now() - was.at < REUSE_MS && was.gen === g.gen && sameChans(was, chans)) {
+            var f = Focus.current(), want = (f && was.box && was.box.contains(f) && f.__chan) ? (f.__loading ? { id: f.__chan, t: f.__t } : { id: f.__chan, start: f.__p.start }) : null;
+            g.lists = was.lists; g.asked = was.asked; g.failed = was.failed || {}; g.got = was.got || {}; g.at = was.at; g.top = was.top;
+            g.chans = chans.filter(function (c) { return !(c.id in g.lists) || g.lists[c.id].length; });
+            if (!was.live) { g.start = was.start; g.live = false; }
+            var n = draw(g, want), cur = Focus.current();   // (focus: back on the cell it was on; else as when first drawn)
+            if (n && (want || !cur || !document.documentElement.contains(cur) || /\b(tab-pill|hchip)\b/.test(cur.className || ''))) { Focus.setScope(scr('home'), n); }
+            return;
+        }
+        rows.appendChild(U.el('div', 'row-empty guide-loading', 'Reading the TV guide…'));
+        ensure(g).then(function () {
+            if (_g !== g || !document.documentElement.contains(rows)) { return; }
+            var first = draw(g);
+            var cur = Focus.current();   // (focus still where the tab was picked: onto what's on now)
+            if (first && (!cur || !document.documentElement.contains(cur) || /\b(tab-pill|hchip)\b/.test(cur.className || '') || rows.contains(cur))) { Focus.setScope(scr('home'), first); }
+        });
+    }
+
+    function sameChans(was, chans) {   // (the same channels as the grid before: none added, none gone)
+        var ids = {}, n = 0;
+        was.chans.forEach(function (c) { ids[c.id] = 1; });
+        Object.keys(was.lists).forEach(function (id) { if (!ids[id] && !was.lists[id].length) { ids[id] = 1; } });   // (dropped for having nothing)
+        for (var i = 0; i < chans.length; i++) { if (!ids[chans[i].id]) { return false; } n++; }
+        return n >= was.chans.length;
+    }
+    // The programs of the rows drawn and the AHEAD after them, those not asked for yet (from 2
+    // hours ago to 30 ahead: the hours move without asking again). A channel with nothing at all
+    // in that time is dropped once read. Resolves once they're in.
+    // What's kept: the programs of the channels within KEEP rows of the window, read in the last
+    // KEEP_MS (older, or further off: let go, read again if they're come back to); all of it,
+    // once the guides changed (EPG's generation).
+    var KEEP = 40, KEEP_MS = 2 * 3600 * 1000;
+    function prune(g) {
+        if (EPG.generation && g.gen !== EPG.generation()) { g.gen = EPG.generation(); g.lists = {}; g.asked = {}; g.failed = {}; g.got = {}; return; }
+        var near = {}, now = Date.now();
+        g.chans.slice(Math.max(0, g.top - KEEP), g.top + ROWS + AHEAD + KEEP).forEach(function (c) { near[c.id] = 1; });
+        Object.keys(g.lists).forEach(function (id) {
+            if (!g.lists[id].length) { return; }   // (known to have nothing: kept, it's what keeps it off the grid)
+            if (!near[id] || now - (g.got[id] || 0) > KEEP_MS) { delete g.lists[id]; delete g.asked[id]; delete g.got[id]; }
+        });
+    }
+    function ensure(g) {
+        prune(g);
+        var ids = g.chans.slice(g.top, g.top + ROWS + AHEAD).filter(function (c) { return !g.asked[c.id]; }).map(function (c) { g.asked[c.id] = 1; return c.id; });
+        if (!ids.length) { return Promise.resolve(false); }
+        var now = Date.now() / 1000;
+        return EPG.range(ids, now - 2 * 3600, now + 30 * 3600).then(function (lists) {
+            var unknown = {};
+            ((lists && lists._unknown) || []).forEach(function (id) { unknown[id] = 1; });
+            ids.forEach(function (id) {
+                if (unknown[id]) { delete g.asked[id]; g.failed[id] = 1; return; }   // (not answered: kept, asked again)
+                delete g.failed[id];
+                g.lists[id] = (lists && lists[id]) || [];
+                g.got[id] = Date.now();
+            });
+            g.chans = g.chans.filter(function (c) { return !(c.id in g.lists) || g.lists[c.id].length; });
+            g.top = Math.max(0, Math.min(g.top, g.chans.length - ROWS));
+            if (Object.keys(unknown).length) { retryLater(g); }
+            return true;
+        }, function () { ids.forEach(function (id) { delete g.asked[id]; g.failed[id] = 1; }); retryLater(g); return true; });
+    }
+    // Channels whose programs didn't come (the service didn't answer, or not all of it): asked
+    // again RETRY_MS later, while the grid is still on screen; their rows say so meanwhile.
+    var RETRY_MS = 30000;
+    function retryLater(g) {
+        if (g.retry) { return; }
+        g.retry = setTimeout(function () {
+            g.retry = null;
+            if (_g !== g || !g.box || !document.documentElement.contains(g.box)) { return; }
+            ensure(g).then(function (got) { if (got) { refresh(g); } });
+        }, RETRY_MS);
+    }
+    // Rows read after the grid was drawn: drawn again, focus kept where it was (a "Loading…" row's:
+    // that row, at the same time).
+    function refresh(g) {
+        if (_g !== g || !g.box || !document.documentElement.contains(g.box)) { return; }
+        var cur = Focus.current(), mine = cur && g.box.contains(cur), want = null;
+        if (mine && cur.__p) { want = cur.__loading ? { id: cur.__chan, t: cur.__t } : { id: cur.__chan, start: cur.__p.start }; }
+        var n = draw(g, want);
+        if (mine && n) { Focus.setScope(scr('home'), n); }
+    }
+    // The guides changed (EPG's generation) while the grid is on screen: what it had let go, the
+    // rows on screen read again.
+    if (typeof EPG !== 'undefined' && EPG.onChange) {
+        EPG.onChange(function () {
+            var g = _g;
+            if (!g || !g.box || !document.documentElement.contains(g.box) || !EPG.generation || g.gen === EPG.generation()) { return; }
+            ensure(g).then(function (got) { if (got) { refresh(g); } });
+        });
+    }
+    // The window moved to show row r (↑ / ↓): the rows to read next asked for, and drawn again once in.
+    function showRow(g, r) {
+        if (r < g.top) { g.top = r; } else if (r >= g.top + ROWS) { g.top = r - ROWS + 1; }
+        ensure(g).then(function (got) { if (got) { refresh(g); } });
+    }
+
+    // The grid for g.start, rows g.top to g.top + ROWS: the hours, then a row a channel. Returns
+    // the cell wanted: { id, start } that program, { id, t } that channel's at time t; else
+    // what's on now on the first channel drawn.
+    function draw(g, want) {
+        var old = g.el.querySelector('.guide'), loading = g.el.querySelector('.guide-loading');
+        if (loading) { loading.parentNode.removeChild(loading); }
+        var box = U.el('div', 'guide'), now = Date.now() / 1000, end = g.start + SPAN, found = null, first = null;
+        var head = U.el('div', 'guide-head'), hours = U.el('div', 'guide-hours');
+        head.appendChild(U.el('div', 'guide-corner', EPG.dayTime(g.start).length > 5 ? EPG.dayTime(g.start).split(' ')[0] : 'Today'));
+        for (var t = g.start; t < end; t += STEP) {
+            var mark = U.el('div', 'guide-time', EPG.hhmm(t));
+            mark.setAttribute('style', 'left: ' + pct((t - g.start) / SPAN) + '%');
+            hours.appendChild(mark);
+        }
+        head.appendChild(hours);
+        box.appendChild(head);
+        g.nodes = [];
+        var any = false;
+        g.chans.slice(g.top, g.top + ROWS).forEach(function (c, k) {
+            var r = g.top + k, row = U.el('div', 'guide-row'), track = U.el('div', 'guide-track'), nodes = [], onNode = null;
+            var name = U.el('div', 'guide-ch'), logo = c.logo || EPG.logo(c.id);
+            if (logo && U.cardImage(logo, 'logo')) {
+                var img = U.el('img', 'guide-ch-logo');
+                img.onerror = function () { if (img.parentNode) { img.parentNode.removeChild(img); } };
+                name.appendChild(img);
+                U.deferImage(img, U.cardImage(logo, 'logo'));
+            }
+            name.appendChild(document.createTextNode(c.name));
+            row.appendChild(name);
+            function hooks(n, i) {
+                n.__row = r; n.__chan = c.id;
+                n.__goLEFT = function () { return i < 0 ? false : step(g, r, i, -1); };
+                n.__goRIGHT = function () { return i < 0 ? false : step(g, r, i, 1); };
+                n.__goUP = function () { return vertical(g, r, -1, n); };
+                n.__goDOWN = function () { return vertical(g, r, 1, n); };
+            }
+            if (!(c.id in g.lists)) {   // (not read yet: says so, and can be passed through)
+                var wait = U.el('div', 'guide-prog guide-wait focusable', g.failed[c.id] ? 'Its TV guide didn’t come: asked again shortly' : 'Loading…');
+                wait.setAttribute('style', 'left: 0%; width: 100%');
+                wait.__p = { start: g.start, stop: end, title: '' }; wait.__loading = true;
+                wait.__t = want && want.id === c.id && typeof want.t === 'number' ? want.t : Math.max(now, g.start);
+                wait.__meta = { name: c.name, releaseInfo: 'Reading its TV guide…' };
+                hooks(wait, -1);
+                track.appendChild(wait);
+                nodes.push(wait);
+                if (want && want.id === c.id) { found = wait; }
+            } else {
+                g.lists[c.id].forEach(function (p, i) {
+                    if (p.stop <= g.start || p.start >= end) { return; }
+                    var on = p.start <= now && now < p.stop, a = Math.max(p.start, g.start), b = Math.min(p.stop, end);
+                    var n = U.el('div', 'guide-prog focusable' + (on ? ' now' : ''), p.title);
+                    n.setAttribute('style', 'left: ' + pct((a - g.start) / SPAN) + '%; width: ' + pct((b - a) / SPAN) + '%');
+                    n.__meta = { name: p.title, releaseInfo: c.name + '   ·   ' + EPG.dayTime(p.start) + '–' + EPG.hhmm(p.stop) + (c.guideOnly ? '   ·   OK: find it in your addons' : ''), description: p.desc, picture: p.picture };
+                    n.__p = p; n.__i = i;
+                    n.__onselect = function () { pick(g, r, p); };
+                    hooks(n, i);
+                    track.appendChild(n);
+                    nodes.push(n);
+                    any = true;
+                    if (want && want.id === c.id && want.start === p.start) { found = n; }
+                    if (on) { onNode = n; }
+                });
+                if (want && want.id === c.id && typeof want.t === 'number' && !found) { found = at(nodes, want.t, g.start) || null; }   // (a time, 0 too)
+            }
+            if (k === 0) { first = onNode || nodes[0] || null; }
+            if (now >= g.start && now < end) {
+                var line = U.el('div', 'guide-nowline');
+                line.setAttribute('style', 'left: ' + pct((now - g.start) / SPAN) + '%');
+                track.appendChild(line);
+            }
+            row.appendChild(track);
+            box.appendChild(row);
+            g.nodes[r] = nodes;
+        });
+        if (!any && g.chans.slice(g.top, g.top + ROWS).every(function (c) { return c.id in g.lists; })) {
+            box.appendChild(U.el('div', 'row-empty guide-empty', 'Nothing on any channel in these hours.'));
+        }
+        if (old) { g.el.removeChild(old); }   // (the grid is all the tab has)
+        g.el.appendChild(box);
+        g.box = box;
+        if (!_ticker) { _ticker = setInterval(tick, 60000); }
+        return found || first || (g.nodes[g.top] && g.nodes[g.top][0]) || null;
+    }
+
+    // Every minute, while the grid is on screen: the line at the time now moved along, and what's
+    // on now marked again (nothing drawn again: focus and the cells stay). At a new half hour, a
+    // grid showing the present moves its hours along (follow). Stops once it's gone.
+    var _ticker = null;
+    function tick() {
+        var g = _g;
+        if (!g || !g.box || !document.documentElement.contains(g.box)) { clearInterval(_ticker); _ticker = null; return; }
+        if (/\bhidden\b/.test(scr('home').className) || document.hidden) { return; }
+        var now = Date.now() / 1000, end = g.start + SPAN;
+        if (g.live && g.start < floorStep(now)) { follow(g, now); return; }
+        var lines = g.box.querySelectorAll('.guide-nowline');   // (a loop: a NodeList's forEach is newer than the 2017 TV's browser)
+        for (var i = 0; i < lines.length; i++) {
+            if (now >= g.start && now < end) { lines[i].setAttribute('style', 'left: ' + pct((now - g.start) / SPAN) + '%'); } else { lines[i].setAttribute('style', 'display: none'); }
+        }
+        (g.nodes || []).forEach(function (nodes) {
+            nodes.forEach(function (n) { var on = n.__p.start <= now && now < n.__p.stop; if (on !== /\bnow\b/.test(n.className)) { n.className = on ? n.className + ' now' : n.className.replace(/\s*\bnow\b/, ''); } });
+        });
+    }
+    // The current half hour first again: focus on the program it was on, or (it has ended) what's
+    // on now on that channel.
+    function follow(g, now) {
+        var start = floorStep(now), f = Focus.current(), mine = !!(f && g.box.contains(f)), want = null;
+        if (mine && f.__chan) { want = (f.__p && !f.__loading && f.__p.stop > start) ? { id: f.__chan, start: f.__p.start } : { id: f.__chan, t: now }; }
+        g.start = start;
+        var n = draw(g, want);
+        if (mine && n) { Focus.setScope(scr('home'), n); }
+    }
+    // ← / →: the program before / after this one on its channel; past an edge, the hours move
+    // to it (for one still on, never before the current half hour).
+    function step(g, r, i, dir) {
+        var c = g.chans[r], list = g.lists[c.id] || [], p = list[i + dir];
+        if (!p) { return false; }
+        if (p.stop <= g.start || p.start >= g.start + SPAN) {
+            var now = Date.now() / 1000;
+            g.start = dir > 0 ? Math.max(floorStep(p.start) - 2 * STEP, floorStep(now))
+                : (p.stop <= now ? floorStep(p.start) : Math.max(floorStep(p.start), floorStep(now)));
+            g.live = g.start === floorStep(now);   // (moved away from the present: stays put)
+            return draw(g, { id: c.id, start: p.start });
+        }
+        return find(g, r, p);
+    }
+    // ↑ / ↓: the next channel up / down with something in these hours (one with nothing in them
+    // is passed; one not read yet is stopped at: it says so); from the top row, on up to the menu.
+    // Past the rows drawn, the window moves along to it.
+    function vertical(g, r, dir, from) {
+        var end = g.start + SPAN, t = from.__loading ? from.__t : Math.max(from.__p.start, g.start);
+        for (var k = r + dir; k >= 0 && k < g.chans.length; k += dir) {
+            var c = g.chans[k], list = g.lists[c.id];
+            var has = !list || list.some(function (p) { return p.stop > g.start && p.start < end; });
+            if (!has) { continue; }
+            if (k >= g.top && k < g.top + ROWS) { return at(g.nodes[k] || [], t, g.start) || false; }
+            showRow(g, k);
+            return draw(g, { id: c.id, t: t }) || false;
+        }
+        return dir < 0 ? undefined : false;
+    }
+    // In a row's cells: the program on at time t (or the window's start, for one that began
+    // before it); else the nearest.
+    function at(nodes, t, start) {
+        var best = null, gap = Infinity;
+        for (var i = 0; i < nodes.length; i++) {
+            var p = nodes[i].__p;
+            if (p.start <= t && t < p.stop) { return nodes[i]; }
+            var d = Math.abs(Math.max(p.start, start) - t);
+            if (d < gap) { gap = d; best = nodes[i]; }
+        }
+        return best;
+    }
+    function find(g, r, p) {
+        var nodes = g.nodes[r] || [];
+        for (var i = 0; i < nodes.length; i++) { if (nodes[i].__p === p) { return nodes[i]; } }
+        return false;
+    }
+    // OK: what's on now plays the channel; another program says what it is.
+    // Played, CH+ / CH− go through the Guide's channels; each one's card (where BACK lands, on
+    // the channel you end on) is what's on now on it.
+    function pick(g, r, p) {
+        var c = g.chans[r], now = Date.now() / 1000;
+        if (c.guideOnly) { findInAddons(p); return; }
+        if (p.start <= now && now < p.stop) {
+            var list = [], idx = 0;
+            g.chans.forEach(function (ch, i) {   // (every channel: a cell only for the rows drawn, where BACK lands)
+                if (ch.guideOnly) { return; }   // (nothing to play)
+                var nodes = g.nodes[i] || [], card = nodes[0] || null;
+                for (var j = 0; j < nodes.length; j++) { if (nodes[j].__p.start <= now && now < nodes[j].__p.stop) { card = nodes[j]; break; } }
+                if (i === r) { idx = list.length; }
+                list.push({ meta: { id: ch.id, type: ch.type, name: ch.name, poster: ch.logo || '', logo: ch.logo || '', posterShape: 'landscape' }, card: card });
+            });
+            App.openLive(c.type, c.id, list[idx].meta, { list: list, idx: idx });
+            return;
+        }
+        U.toast(EPG.dayTime(p.start) + '–' + EPG.hhmm(p.stop) + '   ' + c.name + '   ·   ' + p.title + (p.desc ? ':  ' + p.desc : '') +
+            (p.stop <= now ? '   (already shown)' : ''), 8000);
+    }
+
+    // A guide-only channel's program: a film found by the guide's original title and year (else
+    // its title) opens its page with your addons' sources, as Discover does; a show, or a film
+    // without one sure match, opens Search with its name.
+    // Each pick stops the lookup before it (its answer ignored, its spinner gone); an answer that
+    // comes once the Guide was left (another tab, or drawn again) opens nothing.
+    var _finding = 0, _findCancel = null;
+    function stopFinding() {
+        _finding++;
+        if (_findCancel) { _findCancel.cancel(); _findCancel = null; U.spinner(false); }
+    }
+    function onGuide(grid) { return _g === grid && !!grid.box && document.documentElement.contains(grid.box) && !/\bhidden\b/.test(scr('home').className); }
+    function findInAddons(p) {
+        stopFinding();
+        function search() { App.openSearch(); Views.searchFor(p.title); }
+        if (p.kind === 'series') { search(); return; }
+        var gen = _finding, grid = _g, cancel = _findCancel = U.cancelToken();
+        U.spinner(true, 'Looking for “' + p.title + '”…');
+        function done(hit) {
+            if (gen !== _finding) { return; }
+            _findCancel = null;
+            U.spinner(false);
+            if (!onGuide(grid)) { return; }
+            if (hit) { App.openDetail(hit.type, hit.id, { name: hit.name, poster: hit.poster, type: hit.type }); } else { search(); }
+        }
+        Stremio.findFilm({ title: p.title, orig: p.orig, year: p.year }, cancel).then(done, function () { done(null); });
+    }
+
+    V.guideGrid = guideGrid;
+})(ViewParts);