Redesign Media Centre as a teletext broadcast information service
Replaces the neutral dark card-based theme with "Page 100": teletext's
locked eight colours at full saturation on pure black, numbered pages
reachable by typing the number (or the r/g/y/c fastext keys), and no
borders, boxes, or radius anywhere — grouping is carried by full-bleed
colour fields and row weight instead.
Chosen via the impeccable skill's replacement-world flow: seven visual
candidates derived from the audience's own world, a mandatory roll
assigned Ceefax/US-cable-guide teletext, six catalog challengers weighed
against it, and the user locked the assigned direction on the decision
page (seed aab4510e).
- New templates for all nine pages (home/watch/library/discover/
requests/system/activity/login/settings) behind a shared _shell.html
carrying the direction contract and _macros.html for the row/bar/tile
vocabulary; deletes the old single-page dashboard.html and its
dedicated stylesheets/script.
- static/css/base.css + teletext.css: the locked palette, a two-height
type scale (Chivo Mono / DotGothic16), and the five disciplines the
system is held to (no in-between tone, no enclosure, one shared bar
ruler, trend only where real history exists, pages weighted by state).
- static/js/service.js: header clock, page-number jump, fastext keys,
two-tap arm/confirm add, guarded live polling — replaces dashboard.js.
- app.py: nav_items now carry page numbers; fastext defaults added to
the page-chrome context processor; version bumped to 2.0.0.
- DESIGN.md + .impeccable/design.json regenerated from the built world
by the documenter pass; PRODUCT.md and CLAUDE.md updated to describe
the new system in place of the retired one.
- Fixed a live bug found along the way: settings.html called
url_for('dashboard'), an endpoint removed earlier in the branch, which
would have 500'd the Settings page.
- Fixed a One-Ruler violation the finish review's recapture request
surfaced: --bar-cells disagreed with the bar() macro's hardcoded cell
count below the 760px breakpoint, so a fill could land mid-cell on a
phone. Removed the mobile override; the ruler is now 20 cells at every
width, matching the macro unconditionally.
Passed two inspection rounds (desktop + true-390px mobile, via an
iframe harness since macOS Chrome clamps --window-size) and a finish
review; QA screenshots and interview logs are gitignored as scratch,
not shipped in the repo.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01NBw1QodG8ZMYHrGeQfqyDS
This commit is contained in:
Barely Removable
parent
9a277b9031
commit
4b19cbdfb2
25 changed files with 3002 additions and 2343 deletions
201
static/js/service.js
Normal file
201
static/js/service.js
Normal file
|
|
@ -0,0 +1,201 @@
|
|||
/* ═══════════════════════════════════════════════════════
|
||||
Page 100 — service behaviour.
|
||||
|
||||
Three things: the header clock, the page-number jump (the
|
||||
signature interaction), and the fastext colour keys. Plus
|
||||
guarded live polling for the two figures that must be
|
||||
current-second accurate.
|
||||
|
||||
Every element lookup is guarded. Nine pages share this file
|
||||
and none of them carry all of its targets.
|
||||
═══════════════════════════════════════════════════════ */
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
var body = document.body;
|
||||
var BASE = body.dataset.urlBase || '';
|
||||
var TZ = body.dataset.timezone || 'UTC';
|
||||
|
||||
/* ── Clock ────────────────────────────────────────────
|
||||
Teletext's header carried the transmission clock to the
|
||||
second. It is the one thing on the page that is always
|
||||
moving, and it is how you know the page is live. */
|
||||
var clockEl = document.getElementById('head-clock');
|
||||
function tick() {
|
||||
if (!clockEl) return;
|
||||
var now = new Date();
|
||||
var d = new Intl.DateTimeFormat('en-GB', {
|
||||
timeZone: TZ, weekday: 'short', day: '2-digit', month: 'short'
|
||||
}).format(now);
|
||||
var t = new Intl.DateTimeFormat('en-GB', {
|
||||
timeZone: TZ, hour: '2-digit', minute: '2-digit',
|
||||
second: '2-digit', hour12: false
|
||||
}).format(now);
|
||||
clockEl.textContent = d.toUpperCase() + ' ' + t;
|
||||
}
|
||||
tick();
|
||||
setInterval(tick, 1000);
|
||||
|
||||
/* ── Page-number jump ─────────────────────────────────
|
||||
Type three digits anywhere and the service goes to that
|
||||
page, exactly as a teletext remote did. The digits fill in
|
||||
the header as you type them, so the interaction shows its
|
||||
own state instead of happening invisibly. */
|
||||
var pages = {};
|
||||
try {
|
||||
(JSON.parse(body.dataset.pages || '[]')).forEach(function (p) {
|
||||
pages[p[1]] = p[3]; // "100" -> "/"
|
||||
});
|
||||
} catch (e) { /* no nav data: the jump simply does nothing */ }
|
||||
|
||||
var entryEl = document.getElementById('page-entry');
|
||||
var buf = '';
|
||||
var clearTimer = null;
|
||||
|
||||
function paintEntry() {
|
||||
if (!entryEl) return;
|
||||
if (!buf) { entryEl.hidden = true; entryEl.textContent = ''; return; }
|
||||
entryEl.hidden = false;
|
||||
entryEl.textContent = 'P' + buf + '_'.repeat(3 - buf.length);
|
||||
}
|
||||
function resetEntry() {
|
||||
buf = '';
|
||||
paintEntry();
|
||||
}
|
||||
function typing(e) {
|
||||
var t = e.target;
|
||||
return t && (t.tagName === 'INPUT' || t.tagName === 'TEXTAREA' ||
|
||||
t.tagName === 'SELECT' || t.isContentEditable);
|
||||
}
|
||||
|
||||
document.addEventListener('keydown', function (e) {
|
||||
if (typing(e) || e.metaKey || e.ctrlKey || e.altKey) return;
|
||||
|
||||
if (e.key === 'Escape') { resetEntry(); return; }
|
||||
|
||||
if (e.key >= '0' && e.key <= '9') {
|
||||
buf += e.key;
|
||||
paintEntry();
|
||||
clearTimeout(clearTimer);
|
||||
if (buf.length === 3) {
|
||||
var dest = pages[buf];
|
||||
if (dest) { window.location.href = BASE + dest; }
|
||||
else {
|
||||
// No such page. Teletext just sat on the number and waited.
|
||||
if (entryEl) entryEl.textContent = 'P' + buf + ' ?';
|
||||
clearTimer = setTimeout(resetEntry, 1200);
|
||||
}
|
||||
buf = '';
|
||||
return;
|
||||
}
|
||||
// A half-typed number times out rather than lingering.
|
||||
clearTimer = setTimeout(resetEntry, 2000);
|
||||
return;
|
||||
}
|
||||
|
||||
/* Fastext keys: r / g / y / c, the coloured buttons. */
|
||||
var k = e.key.toLowerCase();
|
||||
if ('rgyc'.indexOf(k) !== -1) {
|
||||
var link = document.querySelector('.fastext a[data-key="' + k + '"]');
|
||||
if (link) { window.location.href = link.href; }
|
||||
}
|
||||
});
|
||||
|
||||
/* ── Two-tap add ──────────────────────────────────────
|
||||
Adding to the library is destructive enough to want a
|
||||
confirming second press. The button states its own stage
|
||||
rather than opening a dialog. */
|
||||
var armed = null;
|
||||
function disarm() {
|
||||
if (!armed) return;
|
||||
armed.classList.remove('armed');
|
||||
armed.textContent = armed.dataset.label || '+ ADD';
|
||||
armed = null;
|
||||
}
|
||||
window.armAdd = function (btn) {
|
||||
if (btn.disabled) return;
|
||||
if (armed && armed !== btn) disarm();
|
||||
|
||||
if (armed === btn) {
|
||||
var title = btn.dataset.title;
|
||||
var target = btn.dataset.target;
|
||||
btn.disabled = true;
|
||||
btn.classList.remove('armed');
|
||||
btn.textContent = 'SENDING';
|
||||
fetch(BASE + '/add-to-' + target, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ title: title })
|
||||
})
|
||||
.then(function (r) { return r.json(); })
|
||||
.then(function (d) {
|
||||
if (d && d.ok) {
|
||||
btn.classList.add('done');
|
||||
btn.textContent = 'ADDED';
|
||||
} else {
|
||||
btn.classList.add('armed');
|
||||
btn.disabled = false;
|
||||
btn.textContent = 'FAILED';
|
||||
}
|
||||
})
|
||||
.catch(function () {
|
||||
btn.disabled = false;
|
||||
btn.classList.add('armed');
|
||||
btn.textContent = 'FAILED';
|
||||
});
|
||||
armed = null;
|
||||
return;
|
||||
}
|
||||
|
||||
btn.dataset.label = btn.textContent.trim();
|
||||
btn.classList.add('armed');
|
||||
btn.textContent = 'CONFIRM?';
|
||||
armed = btn;
|
||||
};
|
||||
document.addEventListener('click', function (e) {
|
||||
if (armed && !armed.contains(e.target)) disarm();
|
||||
});
|
||||
|
||||
/* ── Live figures ─────────────────────────────────────
|
||||
The queue and the active streams are the only two numbers
|
||||
that must be accurate to the second, so they are the only
|
||||
two that poll. Everything else is cached server-side and
|
||||
arrives with the page. */
|
||||
function setText(id, value) {
|
||||
var el = document.getElementById(id);
|
||||
if (el) el.textContent = value;
|
||||
}
|
||||
|
||||
function pollSab() {
|
||||
if (!document.getElementById('sab-queue')) return;
|
||||
fetch(BASE + '/api/sabnzbd')
|
||||
.then(function (r) { return r.json(); })
|
||||
.then(function (d) {
|
||||
if (!d || d.status !== 'ok') return;
|
||||
setText('sab-queue', d.queue_count);
|
||||
setText('sab-speed', d.speed || '0');
|
||||
setText('sab-remaining', d.sizeleft || '—');
|
||||
})
|
||||
.catch(function () { /* offline is the dev baseline, not an error */ });
|
||||
}
|
||||
|
||||
function pollTautulli() {
|
||||
if (!document.getElementById('tt-streams')) return;
|
||||
fetch(BASE + '/api/tautulli')
|
||||
.then(function (r) { return r.json(); })
|
||||
.then(function (d) {
|
||||
if (!d || d.status !== 'ok') return;
|
||||
setText('tt-streams', d.active_streams);
|
||||
})
|
||||
.catch(function () { /* as above */ });
|
||||
}
|
||||
|
||||
if (document.getElementById('sab-queue')) {
|
||||
pollSab();
|
||||
setInterval(pollSab, 5000);
|
||||
}
|
||||
if (document.getElementById('tt-streams')) {
|
||||
pollTautulli();
|
||||
setInterval(pollTautulli, 15000);
|
||||
}
|
||||
})();
|
||||
Loading…
Add table
Add a link
Reference in a new issue