feat(website): add the phone remote control guide

New guide at /blog/remote-control-guide/: enabling the remote in Settings,
opening it on a phone from the QR code, what each control does and which
list it navigates, a checklist for a page that does not load, and why the
remote must stay on the local network. Eight FAQ entries. The remote-control
feature page now links to it instead of the M3U guide.

Both screenshots are mock-backed. The phone view is the first "browser" shot:
a manifest entry names a loopback URL and a mobile viewport, and the capture
frames it in a separate Chromium page behind the same network and content
guards, with the manifest validator accepting loopback origins only. The
setup saves the remote-control setting so the app's own server answers, then
selects a live channel; the Xtream mock's marketing scenario now serves live
stream URLs from local bytes so that selection never leaves the machine.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

apps/website/README.md

@@ -81,8 +81,8 @@ skip shows up in your output.
 
 Evergreen how-to posts live in the blog collection next to release notes
 (`xtream-codes-setup-guide.mdx`, `stalker-portal-setup-guide.mdx`,
-`m3u-playlist-epg-setup-guide.mdx`, `offline-downloads-guide.mdx` and
-`alternative-sources-guide.mdx` in
+`m3u-playlist-epg-setup-guide.mdx`, `offline-downloads-guide.mdx`,
+`alternative-sources-guide.mdx` and `remote-control-guide.mdx` in
 `apps/website/src/content/blog/`). Three conventions set them apart:
 
 - **`ContentDisclaimer`.** Every guide opens with
@@ -112,6 +112,13 @@ Evergreen how-to posts live in the blog collection next to release notes
   `marketing2` scenario (identical catalog, "Fictional Xtream Backup"), which is
   what makes the Sources chip appear; like the Stalker portal it is added only
   for shots that walk into it, because it adds a card to the dashboard.
+  The remote-control phone view is a `browser` shot: the manifest entry names
+  a loopback URL and a mobile viewport, and the capture frames it in a separate
+  Chromium page instead of the Electron window, behind the same network and
+  content guards (`captureBrowserShot` in
+  `tools/release/capture-release-screenshots.ts`). Its setup selects a live
+  channel and saves the remote-control setting, so the app's own server answers
+  on port 8765 for the duration of the 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

apps/website/public/llms.txt

@@ -20,6 +20,7 @@
 - Guide, M3U playlist and EPG setup: https://4gray.github.io/iptvnator/blog/m3u-playlist-epg-setup-guide/
 - Guide, offline viewing with the download manager (desktop): https://4gray.github.io/iptvnator/blog/offline-downloads-guide/
 - Guide, alternative sources for a movie across your own playlists (desktop): https://4gray.github.io/iptvnator/blog/alternative-sources-guide/
+- Guide, phone remote control setup (desktop): https://4gray.github.io/iptvnator/blog/remote-control-guide/
 - Features overview: https://4gray.github.io/iptvnator/features/
 - Feature, M3U playlist player: https://4gray.github.io/iptvnator/features/m3u-player/
 - Feature, Xtream Codes player: https://4gray.github.io/iptvnator/features/xtream-codes-player/

apps/website/src/content/blog/remote-control-guide.mdx

@@ -0,0 +1,130 @@
+---
+title: How to Control IPTVnator from Your Phone
+description: Turn the desktop app into a TV you can zap from the couch. Enable the remote in the settings, scan the QR code with any phone on the same Wi-Fi, and switch channels, jump to a number and see what is playing, without installing anything.
+pubDate: 2026-09-06
+author: 4gray
+heroImage: /iptvnator/blog/guides/screenshots/guide-remote-settings-dark.png
+tags:
+    - guide
+draft: false
+faq:
+- q: Do I need to install an app on my phone?
+  a: No. The remote is a web page that the IPTVnator desktop app serves on your local network. Open the address from the settings, or scan its QR code, in any phone or tablet browser. Adding the page to the home screen gives it an icon like an app.
+- q: Does the remote work away from home?
+  a: No, and it should not. The page is meant for the Wi-Fi your computer is on and has no login or encryption. Do not forward the port through your router; anyone who could reach it could change channels on your player.
+- q: The page does not load on my phone. What should I check?
+  a: That both devices are on the same network and not on a guest Wi-Fi that isolates clients, that a VPN on either side is off, and that the computer's firewall allows the port, 8765 unless you changed it. When the settings list several addresses, try each; a machine with Docker or a VPN adapter shows addresses that lead nowhere.
+- q: What does a channel number mean on the remote?
+  a: The position in the list the app is showing right now, counted from one, the same number the sidebar shows next to the channel. It is not the number a provider may print in its guide.
+- q: Why are the volume buttons greyed out?
+  a: The remote can change the volume only for the built-in players in the M3U player. Xtream and Stalker views and the favorites and recent collections currently pass channel commands only, and MPV, VLC and Embedded MPV keep their own volume.
+- q: Can several phones use the remote at once?
+  a: Yes. Every page that is open polls the same status and sends the same commands; the last command wins.
+- q: Does it work with the browser version of IPTVnator?
+  a: No. Only the desktop app on Windows, macOS or Linux can host the small web server behind the remote.
+- q: Which sources can I control?
+  a: Live TV from M3U playlists, Xtream Codes and Stalker portals, Stalker radio, and the favorites, recent and global collections. Movies and series are not part of the remote.
+---
+
+import Alert from '../../components/blog/Alert.astro';
+import ContentDisclaimer from '../../components/blog/ContentDisclaimer.astro';
+import PostButton from '../../components/blog/PostButton.astro';
+import StepRail from '../../components/blog/StepRail.astro';
+import LinkCards from '../../components/blog/LinkCards.astro';
+
+A laptop plugged into the TV is a fine IPTV player until you want to change the channel from
+the sofa. The desktop app solves that without a second app: it serves a small web remote to
+any phone or tablet on the same Wi-Fi, with channel up and down, a number pad, volume for the
+built-in player and a card that shows what is on right now.
+
+This guide walks through enabling the remote, opening it on a phone, what each control does,
+and what to check when the page does not load. It applies to the desktop app on Windows, macOS
+and Linux.
+
+<ContentDisclaimer />
+
+## Turn the remote on
+
+<StepRail
+  title="In the desktop app"
+  steps={[
+    'Open Settings and choose Remote control in the sidebar.',
+    'Switch Remote control on. The port field appears with 8765; change it only if another program uses that port.',
+    'Below the port, the app lists the addresses it can be reached at on your network. Click the QR icon next to one to show its code.',
+    'Save. The app starts serving the remote page right away; there is nothing to restart.',
+  ]}
+/>
+
+![Settings with the remote control enabled, the port, the local address and its QR code](/iptvnator/blog/guides/screenshots/guide-remote-settings-dark.png)
+
+The address is your computer's local IP address plus the port, for example
+`http://192.168.1.20:8765`. Computers with several network adapters list several addresses;
+the one on your home Wi-Fi is usually the `192.168.` or `10.` one.
+
+## Open it on the phone
+
+Scan the QR code with the phone camera, or type the address into the browser. The remote
+opens as a plain web page; nothing is installed and no account is created.
+
+<Alert type="success" title="Make it feel like an app">
+  Use "Add to Home Screen" in your phone browser. The remote then opens full screen from its
+  own icon, without the address bar.
+</Alert>
+
+<div class="not-prose mx-auto my-8 max-w-[340px] overflow-hidden rounded-2xl border border-surface-800">
+  <img src="/iptvnator/blog/guides/screenshots/guide-remote-phone-dark.png" alt="The remote on a phone: a now-playing card with the channel and current program, channel up and down, a number pad and volume" loading="lazy" />
+</div>
+
+## What the remote does
+
+- **Now playing** shows the source, the channel name and its number, and the current program
+  from the guide. It refreshes every two seconds, so a channel changed on the computer appears
+  on the phone right after.
+- **CH +** and **CH −** step through the list the app is showing: the whole playlist in the
+  M3U player, the selected category in an Xtream or Stalker source, the filtered list in
+  favorites, recent and the global collections.
+- **Number pad** jumps to a position in that list, the way a set-top box remote does. Type the
+  number and press OK. The number is the one shown next to the channel in the sidebar, not a
+  channel number from a provider's guide.
+- **Volume** works for the built-in players in the M3U player. Everywhere else the buttons are
+  disabled, and the page says so under the meter.
+
+<Alert type="info" title="Keep the list in view">
+  The remote navigates what the app currently shows. Open the source and the category you want
+  to zap through on the computer first; a remote command on a movie page or the dashboard has
+  nothing to act on.
+</Alert>
+
+## When the page does not load
+
+Work down this list; one of these covers almost every case.
+
+1. **Same network.** Phone and computer must share a Wi-Fi, and it must not be a guest network
+   that isolates its clients from each other.
+2. **Firewall.** Windows asks whether to allow the app through the firewall the first time the
+   remote starts; if that prompt was dismissed, allow the port in the firewall settings. macOS
+   users with the firewall on need to allow incoming connections for IPTVnator.
+3. **VPN.** A VPN on the computer or the phone usually routes traffic away from the local
+   network. Pause it while you use the remote.
+4. **Several addresses.** If the settings list more than one, try the others. Docker, VPN and
+   virtual-machine adapters show addresses the phone cannot reach.
+5. **Port taken.** If another program already uses the port, change it in the settings and
+   save; the address and the QR code update with it.
+
+## Keep it local
+
+The remote has no password and no encryption; it trusts the network it runs on. That is fine
+on a home Wi-Fi and not fine anywhere else: do not open the port on your router, and turn the
+remote off in the settings when you use the computer on a network you do not control.
+
+## Related
+
+<LinkCards
+  links={[
+    { label: 'Phone remote control', href: '/iptvnator/features/remote-control/', hint: 'The feature page with the full list of controls and answers.', icon: 'docs' },
+    { label: 'Load an M3U playlist and add an EPG', href: '/iptvnator/blog/m3u-playlist-epg-setup-guide/', hint: 'The source whose built-in player also takes volume from the remote.', icon: 'docs' },
+    { label: 'Download IPTVnator', href: '/iptvnator/download/', hint: 'The desktop app for Windows, macOS and Linux.', icon: 'download' },
+  ]}
+/>
+
+<PostButton href="/iptvnator/download/" label="Get IPTVnator for your platform" external={false} />

apps/website/src/lib/features.ts

@@ -80,7 +80,7 @@ export const FEATURES: readonly FeatureEntry[] = [
       'The desktop app serves a web remote to any phone on your network: channel up and down, direct numbers, volume, and a now-playing panel.',
     href: '/iptvnator/features/remote-control/',
     icon: 'M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z',
-    guide: { href: '/iptvnator/blog/m3u-playlist-epg-setup-guide/', label: 'M3U and EPG setup guide' },
+    guide: { href: '/iptvnator/blog/remote-control-guide/', label: 'Phone remote control guide' },
   },
 ];
 

apps/xtream-mock-server/README.md

@@ -232,7 +232,7 @@ application code.
 - **Dedicated EPG fixture**: `epg:epg` returns stable live channels plus deterministic `get_short_epg` and `get_simple_data_table` payloads for timezone-focused tests
 - **Release screenshot fixture**: `marketing:marketing` returns fictional live, VOD, and series data with local generated artwork under `apps/xtream-mock-server/public/marketing`
 - **Alternative-source fixture**: `marketing2:marketing2` returns the identical marketing catalog under a second credential pair, so a movie added from both looks like the same film in two playlists (the premise of the VOD multi-source chip); guide screenshots seed it as a "backup subscription"
-- **Local download media**: `marketing:marketing` also serves `/movie/...` and `/series/...` stream URLs from generated bytes (`downloadStreamFixture: 'local-media'`; movies finish in under a second, episodes trickle for about 20 s) so release and guide screenshots of the download manager complete without any request leaving the machine. Other scenarios keep redirecting streams to the public HLS stub.
+- **Local download media**: `marketing:marketing` also serves `/movie/...`, `/series/...` and `/live/...` stream URLs from generated bytes (`downloadStreamFixture: 'local-media'`; movies finish in under a second, episodes trickle for about 20 s) so release and guide screenshots of the download manager complete without any request leaving the machine. Other scenarios keep redirecting streams to the public HLS stub.
 - **Performance fixture**: `performance:performance` returns exactly 100,000
   local-only catalog items from index-derived values; it does not use Faker,
   `Date.now()`, `Math.random()`, external artwork, or external media URLs

apps/xtream-mock-server/src/app/server.spec.ts

@@ -186,12 +186,16 @@ describe('Xtream mock server factory', () => {
                 `${running.origin}/series/marketing/marketing/80000.mkv`,
                 { redirect: 'manual' }
             );
+            const live = await fetch(
+                `${running.origin}/live/marketing/marketing/10001.m3u8`,
+                { redirect: 'manual' }
+            );
             const ordinaryMovie = await fetch(
                 `${running.origin}/movie/user1/pass1/62000.mp4`,
                 { redirect: 'manual' }
             );
 
-            for (const local of [movie, episode]) {
+            for (const local of [movie, episode, live]) {
                 expect(local.status).toBe(200);
                 expect(local.headers.get('content-type')).toContain(
                     'video/mp4'

apps/xtream-mock-server/src/app/server.ts

@@ -18,6 +18,7 @@ import { dispatchAction } from './routes/dispatch.js';
 import { getScenario, type ScenarioConfig } from './scenarios.js';
 import {
     LOCAL_MEDIA_EPISODE_DOWNLOAD_OPTIONS,
+    LOCAL_MEDIA_LIVE_STREAM_OPTIONS,
     LOCAL_MEDIA_MOVIE_DOWNLOAD_OPTIONS,
     streamSlowSeriesDownload,
 } from './slow-series-download.js';
@@ -257,6 +258,14 @@ function installStreamRoutes(
             response.status(410).json({ error: 'performance-media-disabled' });
             return;
         }
+        if (downloadStreamFixtureOf(request) === 'local-media') {
+            streamSlowSeriesDownload(
+                request,
+                response,
+                LOCAL_MEDIA_LIVE_STREAM_OPTIONS
+            );
+            return;
+        }
         response.redirect(HLS_STUB);
     };
     const movieResponse = (request: Request, response: Response) => {

apps/xtream-mock-server/src/app/slow-series-download.ts

@@ -23,6 +23,13 @@ export const LOCAL_MEDIA_MOVIE_DOWNLOAD_OPTIONS: SlowSeriesDownloadOptions = {
     totalBytes: 96 * 1024 * 1024,
 };
 
+/** A live channel under `local-media`: a few local bytes so selecting a channel never leaves the machine. */
+export const LOCAL_MEDIA_LIVE_STREAM_OPTIONS: SlowSeriesDownloadOptions = {
+    chunkSize: 512 * 1024,
+    intervalMs: 2,
+    totalBytes: 4 * 1024 * 1024,
+};
+
 export const LOCAL_MEDIA_EPISODE_DOWNLOAD_OPTIONS: SlowSeriesDownloadOptions = {
     chunkSize: 256 * 1024,
     intervalMs: 100,