4grayandClaude Fable 5.1
eb96b4c9f2
* feat(website): turn the screenshot showcase into a channel switcher Second landing redesign PR. "See it in action" was a tab strip in a dashed frame showing one screenshot inside a drawn window chrome that duplicated the chrome already in the shot. It is now a channel list: number, screen name and one line about what the screen is for on the left, a single frame on the right, and a caption linking to the matching feature page. - Channels advance on their own with a progress hairline under the active row; hovering, focusing or scrolling the block out of view pauses it and `prefers-reduced-motion` disables autoplay entirely. - A brief on-screen "CH 03" badge confirms every switch. - Arrow keys, Home and End move between channels; the list is a proper vertical tablist with roving tabindex, panels carry `aria-hidden`. - Six screens: Dashboard, Live TV, Program guide, Movies & series, Downloads, Settings. Same files from `public/screenshots`; the add-playlist shot is replaced by the movie detail and the download manager. - On phones the screen comes first and the list follows. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> * test(website): cover the channel switcher, keep focus pausing after mouseleave Hover and focus now pause autoplay independently: clicking a channel focused it, but moving the pointer away resumed the timer and seven seconds later the selection moved under a still-focused tab. New `website-screenshot-showcase.test.mjs` (in the website test target): a structural half over the built HTML (vertical tablist, roving tabindex, one aria-hidden panel per channel) and a browser half that serves the build and drives it in Chromium — autoplay advances, hover pauses, click + mouseleave keeps the pause while focused, arrow/Home/End keys move selection, focus, panel, caption and badge together, blur resumes, and `prefers-reduced-motion` disables autoplay. The browser half falls back to the system Chrome channel and skips when no Chromium exists, so the structural checks run everywhere. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> * perf(website): lazy-load every showcase screenshot The block sits below the hero and the feature grid, so an eager first frame only competed with above-the-fold assets for visitors who never scroll to it. Native look-ahead loading brings it in well before the switcher is on screen. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> * test(website): share the browser harness, fail in CI without Chromium `website-browser-support.mjs` owns the loopback static server and the Chromium launcher for the website browser tests. The server resolves every request against the build root and answers 404 for anything that escapes it (CodeQL js/path-injection on the previous inline copy). The launcher tries the Playwright download, then the system Chrome and Chromium channels; when none launches it returns null locally so the structural half still runs, and throws under `CI` so the interaction assertions can never turn into a silent skip on the runner. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> * perf(website): defer inactive showcase frames, document the browser tests The six frames are stacked with opacity, so native lazy loading treated all of them as near-viewport and fetched every screenshot at once. Only the first frame now ships with a `src`; the switcher assigns it from `data-src` when a channel is shown and preloads the one after it, so at most two frames are ever in flight. The showcase test asserts the markup and the runtime behaviour. The website README now describes the browser-dependent suites, the shared harness, and the skip-locally / fail-in-CI rule. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> * docs(website): describe only the suite this PR adds Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> * fix(website): resume the switcher from where it paused, keep DOM order on phones The dwell clock now stops while the switcher is hovered or focused and the pause time is added back on resume, so the progress hairline continues from its frozen position instead of snapping to zero and granting a fresh seven seconds. The test asserts the resume. On phones the list stays before the screen in the DOM and on screen (tabs before their panels, focus order equals reading order); it hides the per-channel descriptions and the keyboard hint there so the screen stays close instead of being reordered with `order-first`. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> * fix(website): never crop a showcase frame The screen box stretches to the channel list's row height, and with `object-cover` a wide screenshot lost its right side just above the `lg` breakpoint. Frames are now contained on a dark stage (a letterbox, as on a TV), and the per-channel descriptions are hidden between `lg` and `xl` so the row stays close to the frame's own height. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> * fix(website): pause the switcher dwell while offscreen instead of resetting it Leaving the viewport is now a pause like hover and focus: the frame loop stops, the progress hairline keeps its width, and the clock resumes from the same mark when the block scrolls back in. Only a channel change resets the dwell. The interaction test scrolls away and back to assert it. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> * perf(website): no next-frame prefetch when reduced motion disables autoplay Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> * feat(website): persistent pause control for the channel switcher Hover and focus only pause while they last, which is no use to touch or screen-reader visitors, so the list footer now carries a Pause/Resume toggle (`aria-pressed`, full `aria-label`) that keeps autoplay stopped until pressed again (WCAG 2.2.2). It is removed under reduced motion, where nothing advances. The interaction test now waits for the seven-second rollover and checks that tab, panel, caption, badge and the preloaded frame all move to channel 02, and that the toggle holds through mouseleave and blur. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> * fix(website): keep the tablist to its tabs, no successor prefetch when autoplay is off The channel list's header and the Pause/Resume control sat inside the `role="tablist"` container; the tablist now wraps only the six tabs so assistive technology reads the toggle as an ordinary button beside the list. `show()` preloads the next frame only while autoplay can reach it (neither reduced motion nor the toggle has stopped it). Tests assert both. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> * fix(website): preload the successor when auto-advance resumes A channel picked while the switcher is paused deliberately skips its successor; resuming now fetches that frame so the next automatic switch does not land on a blank screen. The interaction test covers pause → manual selection → resume. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> * fix(website): Resume restarts autoplay at once; same-channel progress in the test The transient hover/focus pauses now watch only the channel list and the screen. The footer with the Pause/Resume control is not one of those regions, so after pressing Resume — with the pointer and the focus still on the button — autoplay visibly restarts instead of waiting for the visitor to leave the whole block. The interaction test compares progress within one channel (a paused Movies before and after Resume) rather than across channels, which could fail on a slow runner, and asserts that autoplay runs while the toggle keeps focus and hover. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> * perf(website): one scheduler for the switcher, no frames while paused Every pause reason (hover, focus, the toggle, leaving the viewport) now goes through a single `sync()`: the animation-frame loop runs only while the block is visible and nothing pauses it, and is cancelled otherwise, so a switcher left paused schedules no frames at all. The dwell clock still resumes from where it froze, and the successor frame is fetched only when the loop actually starts — so scrolling away and back under a persistent pause loads nothing. Tests count scheduled frames while paused and cover pause → manual selection → offscreen → return. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> * fix(website): a channel picked while paused gets its full dwell after Resume `show()` reset the pause mark, so the time a visitor spent paused after picking a channel counted toward that channel's dwell and Resume could advance immediately. When the loop is not running the new channel now starts out paused at that moment. The interaction test asserts the progress is still near zero right after Resume. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> * fix(website): follow reduced-motion changes and hidden tabs in the switcher The reduced-motion preference is read from a live MediaQueryList: when it changes while the page is open the scheduler stops or restarts and the Pause/Resume control is hidden or shown (it is hidden, not removed, for that reason). A hidden document counts as a pause too — background tabs throttle animation frames while the clock keeps running, so without it the first frame back would skip a channel. The interaction test flips both at runtime. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> * fix(website): plain action button for the switcher pause, no manual animations under reduced motion `aria-pressed` on a button whose name changes between "Pause auto-advance" and "Resume auto-advance" announced the wrong thing; the control is now an ordinary action button whose name says what pressing it does next. The OSD slide and the panel fade get `motion-reduce:transition-none`, so a manual selection under reduced motion moves nothing. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> --------- Co-authored-by: Claude Fable 5.1 <noreply@anthropic.com>
7.6 KiB
IPTVnator Website
The website is an Astro static site deployed to GitHub Pages at https://4gray.github.io/iptvnator/.
Blog Comments
Blog posts render Giscus comments from apps/website/src/components/GiscusComments.astro.
Giscus stores comments in GitHub Discussions for 4gray/iptvnator and maps each page to a discussion by pathname, including the GitHub Pages base path such as /iptvnator/blog/why-external-players-help/.
The embed is wired to the dedicated Blog comments discussion category:
- Repository id:
MDEwOlJlcG9zaXRvcnkyMTMxOTQ3Mzg= - Category id:
DIC_kwDODLUX8s4C9eBJ - Mapping:
pathname - Theme:
transparent_dark
If the category is recreated, query the new category id:
gh api graphql \
-f owner=4gray \
-f name=iptvnator \
-f query='query($owner:String!, $name:String!) { repository(owner:$owner, name:$name) { discussionCategories(first:25) { nodes { id name slug isAnswerable } } } }'
Then update data-category-id in GiscusComments.astro.
Moderation happens in GitHub Discussions. Maintainers can hide, delete, lock, or move discussions and comments from the repository Discussions UI.
Download Pages
/download/ plus /download/windows/, /download/macos/, /download/linux/
and /download/docker/ (the self-hosted browser version: quick start, variables,
tags, FAQ, with docker/README.md as the reference behind it) are landing pages (apps/website/src/pages/download/). They exist for
search visibility on "IPTVnator download" style queries and to spare users
the 27-asset GitHub release page; each carries OS-specific install steps,
requirements, an FAQ and SoftwareApplication / FAQPage / BreadcrumbList
structured data. Shared pieces live in src/components/download/ and reuse the
blog components (StepRail, Alert, FaqAccordion, CopyCommand).
Latest-release resolution
Direct asset links need the release version, so src/lib/downloads.ts
resolves it at build time:
GET https://api.github.com/repos/4gray/iptvnator/releases/latest(8 s timeout). The asset list from the published release is authoritative: options whose file is missing are dropped, sizes and the publish date come from the API.deploy-website.ymlpassesGITHUB_TOKENto the build so the call is authenticated.- Fallback: the root
package.jsonversion with the asset naming pattern fromelectron-builder.json. This is deterministic but cannot prove the files exist yet (a version bump lands onmasterbefore the release is published), so a warning is printed. SetWEBSITE_SKIP_RELEASE_FETCH=1to force it for offline or reproducible builds.
Both paths produce the same page structure. Adding an artifact means adding a
DownloadOption (matcher + fallback name) in downloads.ts; the pages and the
hub pick it up. The homepage SoftwareApplication schema reads the same
resolved version.
pnpm nx test website builds the site and runs
tools/testing/website-download-pages.test.mjs, which checks titles,
canonicals, direct asset links, JSON-LD, cross-links and sitemap entries
without depending on a specific version.
tools/testing/website-screenshot-showcase.test.mjs drives the built site in
a real browser: the home page channel switcher (autoplay, hover/focus pausing,
keyboard navigation, deferred frame sources). It relies on
tools/testing/website-browser-support.mjs, which serves dist/apps/website
on a loopback port and launches Chromium from the Playwright download or,
failing that, the system Chrome/Chromium channel. Without any Chromium the
browser half is skipped locally (the structural checks still run) and
fails in CI, so a green local run only proves the interactions when a
browser was found — run pnpm exec playwright install chromium once if the
skip shows up in your output.
Guides
Evergreen how-to posts live in the blog collection next to release notes
(xtream-codes-setup-guide.mdx, stalker-portal-setup-guide.mdx and
m3u-playlist-epg-setup-guide.mdx in apps/website/src/content/blog/).
Two conventions set them apart:
faqfrontmatter. An optional list of{ q, a }entries.BlogPost.astrorenders it as an accordion after the body and emits aFAQPageJSON-LD block next to theBlogPostingone, so the answers can surface as rich results.- Screenshots from the capture script. Guide frames are captured by
pnpm release:screenshots --group guidesintoapps/website/public/blog/guides/screenshots/<slug>-<theme>.png; the shots are declared intools/release/screenshots.manifest.jsonwith"group": "guides"and never appear in a release run.
tools/testing/website-guides.test.mjs (part of pnpm nx test website) checks
each guide for the FAQPage schema, a link to the download hub and the presence
of every referenced screenshot in the build output.
Blog Tags
Blog tags are a closed vocabulary in apps/website/src/lib/blog-tags.ts
(release, guide, troubleshooting, playback, m3u, xtream-codes,
stalker-portal, epg, macos, security). The content collection schema
only accepts those slugs, so a typo in a post's tags: fails the build. Every
tag with at least one published post gets a hub page at /blog/tag/<tag>/
(src/pages/blog/tag/[tag].astro, CollectionPage + BreadcrumbList JSON-LD),
the blog index and the hubs show a "Topics" rail with post counts
(BlogTagRail.astro), and every chip on a card or a post header links to its
hub (BlogTagChip.astro). The cards are <article> elements with the title
link stretched over the whole card, because a card that is one big <a> cannot
hold chip links.
Add a tag only when it will hold more than one post for good: each tag is an
indexable page, and a hub with a single post is a thin page. Add the slug to the
registry with a label and a one-sentence description; nothing else needs to
change. tools/testing/website-blog-tags.test.mjs checks the rail, every hub,
the chip targets, the sitemap and the absence of nested anchors.
Feature Pages
/features/ plus one page per feature (m3u-player, xtream-codes-player,
stalker-portal-player, epg, remote-control) live in
apps/website/src/pages/features/. They target " player" style
searches, reuse the download-page sections, and each carries
SoftwareApplication (with featureList) / FAQPage / BreadcrumbList
structured data. The registry in src/lib/features.ts drives the hub, the
per-page switcher, the homepage feature cards and
tools/testing/website-feature-pages.test.mjs; adding a page means adding one
registry entry and one .astro file. Screenshots come only from the
mock-backed guide and release captures, never from the older homepage
screenshots that show real channel names.
Comparison Pages
/compare/ plus one page per decision the app asks users to make
(m3u-vs-xtream-vs-stalker, playback-engines, desktop-vs-browser) live in
apps/website/src/pages/compare/. They compare IPTVnator's own options against
each other, never other products, so every claim is checkable against this
repository; the registry is src/lib/comparisons.ts.
Each page opens with a one-paragraph verdict (CompareHero), carries at least
one ComparisonTable (cells are true, false or a qualifying string) and
emits WebPage / FAQPage / BreadcrumbList JSON-LD from
src/lib/comparison-schema.ts — deliberately not SoftwareApplication, since
these pages are guidance rather than a product listing, and
tools/testing/website-compare-pages.test.mjs asserts that.
Naming a competitor on these pages is a product decision, not a technical one.
Phase 3 of .plans/2026-09-03-marketing-landing-pages.md covers that and is
still open.