From 7ffde6225f2b22bde50ec75abac786a435523098 Mon Sep 17 00:00:00 2001
From: Timothy <timothy.look@gmail.com>
Date: Thu, 9 Jul 2026 20:00:38 +0200
Subject: [PATCH] fix(web): read runtime-cased ffmpegProfileId/ffmpegProfile
 keys (#198)

Regenerate v1.d.ts from the aligned spec (fFmpegProfileId->ffmpegProfileId,
fFmpegProfile->ffmpegProfile) and update every SPA reader/writer and test mock
to the runtime casing:

- ChannelEditScreen: read channel.ffmpegProfileId; draft/set/select use
  ffmpegProfileId.
- ChannelBuilder: template reads/writes + ADVANCED_KEYS use ffmpegProfileId.
- App.tsx channel list: read channel.ffmpegProfile (was fFmpegProfile, a latent
  bug that always rendered "Unassigned" since the runtime never sent that key).
- PlaybackTroubleshootingScreen: drop the #198 escape hatch (rawChannel cast +
  dual-read) and read data.channel.ffmpegProfileId directly.
- Test mocks now use runtime casing; pinning comments updated.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 web/src/App.test.tsx                          | 32 +++++++++----------
 web/src/App.tsx                               |  2 +-
 web/src/api/channels.test.ts                  |  2 +-
 web/src/api/generated/v1.d.ts                 | 16 +++++-----
 web/src/builder/ChannelBuilder.tsx            | 16 +++++-----
 web/src/screens/ChannelEditScreen.test.tsx    |  2 +-
 web/src/screens/ChannelEditScreen.tsx         |  6 ++--
 .../PlaybackTroubleshootingScreen.test.tsx    | 12 ++++---
 .../screens/PlaybackTroubleshootingScreen.tsx |  8 +----
 9 files changed, 46 insertions(+), 50 deletions(-)

diff --git a/web/src/App.test.tsx b/web/src/App.test.tsx
index 2c7d36b92..47aa024da 100644
--- a/web/src/App.test.tsx
+++ b/web/src/App.test.tsx
@@ -320,7 +320,7 @@ describe('ChicoryTV SPA scaffold', () => {
     mockDashboardApi({
       channels: [
         {
-          fFmpegProfile: 'HLS Direct',
+          ffmpegProfile: 'HLS Direct',
           id: 1,
           language: 'en',
           name: 'Retro Cartoons',
@@ -328,7 +328,7 @@ describe('ChicoryTV SPA scaffold', () => {
           streamingMode: 'HLS Direct'
         },
         {
-          fFmpegProfile: 'MPEG-TS',
+          ffmpegProfile: 'MPEG-TS',
           id: 2,
           language: 'fr',
           name: 'News 24',
@@ -426,7 +426,7 @@ describe('ChicoryTV SPA scaffold', () => {
     mockDashboardApi({
       channels: [
         {
-          fFmpegProfile: 'HLS Direct',
+          ffmpegProfile: 'HLS Direct',
           group: 'Kids',
           id: 1,
           isEnabled: true,
@@ -438,7 +438,7 @@ describe('ChicoryTV SPA scaffold', () => {
           streamingMode: 'HLS Direct'
         },
         {
-          fFmpegProfile: 'MPEG-TS',
+          ffmpegProfile: 'MPEG-TS',
           group: 'News',
           id: 2,
           isEnabled: false,
@@ -500,7 +500,7 @@ describe('ChicoryTV SPA scaffold', () => {
     mockDashboardApi({
       channels: [
         {
-          fFmpegProfile: 'HLS Direct',
+          ffmpegProfile: 'HLS Direct',
           group: 'Kids',
           id: 1,
           isEnabled: true,
@@ -535,7 +535,7 @@ describe('ChicoryTV SPA scaffold', () => {
     mockDashboardApi({
       channels: [
         {
-          fFmpegProfile: 'HLS Direct',
+          ffmpegProfile: 'HLS Direct',
           group: 'Kids',
           id: 1,
           isEnabled: true,
@@ -562,7 +562,7 @@ describe('ChicoryTV SPA scaffold', () => {
     mockDashboardApi({
       channels: [
         {
-          fFmpegProfile: 'HLS Direct',
+          ffmpegProfile: 'HLS Direct',
           group: 'Kids',
           id: 1,
           isEnabled: true,
@@ -574,7 +574,7 @@ describe('ChicoryTV SPA scaffold', () => {
           streamingMode: 'HLS Direct'
         },
         {
-          fFmpegProfile: 'MPEG-TS',
+          ffmpegProfile: 'MPEG-TS',
           group: 'News',
           id: 2,
           isEnabled: false,
@@ -610,7 +610,7 @@ describe('ChicoryTV SPA scaffold', () => {
     mockDashboardApi({
       channels: [
         {
-          fFmpegProfile: 'HLS Direct',
+          ffmpegProfile: 'HLS Direct',
           group: 'Kids',
           id: 1,
           isEnabled: true,
@@ -641,7 +641,7 @@ describe('ChicoryTV SPA scaffold', () => {
     mockDashboardApi({
       channels: [
         {
-          fFmpegProfile: 'HLS Direct',
+          ffmpegProfile: 'HLS Direct',
           group: 'Kids',
           id: 1,
           isEnabled: true,
@@ -691,7 +691,7 @@ describe('ChicoryTV SPA scaffold', () => {
     mockDashboardApi({
       channels: [
         {
-          fFmpegProfile: 'HLS Direct',
+          ffmpegProfile: 'HLS Direct',
           group: 'Kids',
           id: 1,
           isEnabled: true,
@@ -703,7 +703,7 @@ describe('ChicoryTV SPA scaffold', () => {
           streamingMode: 'HLS Direct'
         },
         {
-          fFmpegProfile: 'MPEG-TS',
+          ffmpegProfile: 'MPEG-TS',
           group: 'News',
           id: 2,
           isEnabled: false,
@@ -746,7 +746,7 @@ describe('ChicoryTV SPA scaffold', () => {
     mockDashboardApi({
       channels: [
         {
-          fFmpegProfile: 'HLS Direct',
+          ffmpegProfile: 'HLS Direct',
           group: 'Kids',
           id: 1,
           isEnabled: true,
@@ -758,7 +758,7 @@ describe('ChicoryTV SPA scaffold', () => {
           streamingMode: 'HLS Direct'
         },
         {
-          fFmpegProfile: 'MPEG-TS',
+          ffmpegProfile: 'MPEG-TS',
           group: 'News',
           id: 2,
           isEnabled: true,
@@ -3239,7 +3239,7 @@ function omitNullKeys(fixture: Record<string, unknown>): Record<string, unknown>
 function channelSummary(overrides: Record<string, unknown> = {}): Record<string, unknown> {
   return {
     categories: '',
-    fFmpegProfile: '1080p H.264',
+    ffmpegProfile: '1080p H.264',
     group: 'ChicoryTV',
     id: 1,
     isEnabled: true,
@@ -3259,7 +3259,7 @@ function channelSummary(overrides: Record<string, unknown> = {}): Record<string,
 function channelTemplate(overrides: Record<string, unknown> = {}): Record<string, unknown> {
   return omitNullKeys({
     description: 'General-purpose 1080p H.264.',
-    fFmpegProfileId: 100,
+    ffmpegProfileId: 100,
     fixedStartTimeBehavior: 'Strict',
     id: 10,
     idleBehavior: 'StopOnDisconnect',
diff --git a/web/src/App.tsx b/web/src/App.tsx
index 092942e5f..d6e75683c 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -1564,7 +1564,7 @@ function ChannelTableRow({
         )}
       </td>
       <td><Badge tone={streamingTone}>{channel.streamingMode}</Badge></td>
-      <td className="ctv-channel-ffmpeg">{channel.fFmpegProfile || 'Unassigned'}</td>
+      <td className="ctv-channel-ffmpeg">{channel.ffmpegProfile || 'Unassigned'}</td>
       <td>
         <div className="ctv-channel-actions">
           <IconButton disabled size="sm" title={`Preview unavailable for ${channel.name}`}>
diff --git a/web/src/api/channels.test.ts b/web/src/api/channels.test.ts
index 0b005762b..81b73e8d6 100644
--- a/web/src/api/channels.test.ts
+++ b/web/src/api/channels.test.ts
@@ -7,7 +7,7 @@ const sampleChannel = {
   name: 'Cartoons',
   group: 'ChicoryTV',
   categories: '',
-  fFmpegProfileId: 1,
+  ffmpegProfileId: 1,
   slugSeconds: null,
   logo: { path: '', contentType: '' },
   streamSelectorMode: 'Default',
diff --git a/web/src/api/generated/v1.d.ts b/web/src/api/generated/v1.d.ts
index 07d8940be..9896c2f9f 100644
--- a/web/src/api/generated/v1.d.ts
+++ b/web/src/api/generated/v1.d.ts
@@ -157,7 +157,7 @@ export interface components {
     "name": string;
     "group": string;
     "categories": string;
-    "fFmpegProfile": string;
+    "ffmpegProfile": string;
     "language": string;
     "streamingMode": string;
     "isEnabled": boolean;
@@ -178,7 +178,7 @@ export interface components {
     "description": string;
     "isSystem": boolean;
     "isDefault": boolean;
-    "fFmpegProfileId": number;
+    "ffmpegProfileId": number;
     "watermarkId": null | number;
     "fallbackFillerId": null | number;
     "preRollFillerId": null | number;
@@ -209,7 +209,7 @@ export interface components {
     "name": null | string;
     "group": null | string;
     "categories": null | string;
-    "fFmpegProfileId": number;
+    "ffmpegProfileId": number;
     "slugSeconds": null | number;
     "logo": components["schemas"]["ArtworkContentTypeModel"];
     "streamSelectorMode": components["schemas"]["ChannelStreamSelectorMode"];
@@ -259,7 +259,7 @@ export interface components {
   };
     "CreateChannelFromLineupAdvancedOptionsRequest": {
     "playbackOrder"?: null | components["schemas"]["PlaybackOrder"];
-    "fFmpegProfileId"?: null | number;
+    "ffmpegProfileId"?: null | number;
     "watermarkId"?: null | number;
     "fallbackFillerId"?: null | number;
     "preRollFillerId"?: null | number;
@@ -316,7 +316,7 @@ export interface components {
     "number": null | string;
     "group": null | string;
     "categories": null | string;
-    "fFmpegProfileId": number;
+    "ffmpegProfileId": number;
     "slugSeconds": null | number;
     "logo": components["schemas"]["ArtworkContentTypeModel"];
     "streamSelectorMode": components["schemas"]["ChannelStreamSelectorMode"];
@@ -343,7 +343,7 @@ export interface components {
     "CreateChannelTemplateRequest": {
     "name": string;
     "description": string;
-    "fFmpegProfileId": number;
+    "ffmpegProfileId": number;
     "watermarkId": null | number;
     "fallbackFillerId": null | number;
     "preRollFillerId": null | number;
@@ -1432,7 +1432,7 @@ export interface components {
     "number": null | string;
     "group": null | string;
     "categories": null | string;
-    "fFmpegProfileId": number;
+    "ffmpegProfileId": number;
     "slugSeconds": null | number;
     "logo": components["schemas"]["ArtworkContentTypeModel"];
     "streamSelectorMode": components["schemas"]["ChannelStreamSelectorMode"];
@@ -1459,7 +1459,7 @@ export interface components {
     "UpdateChannelTemplateRequest": {
     "name": string;
     "description": string;
-    "fFmpegProfileId": number;
+    "ffmpegProfileId": number;
     "watermarkId": null | number;
     "fallbackFillerId": null | number;
     "preRollFillerId": null | number;
diff --git a/web/src/builder/ChannelBuilder.tsx b/web/src/builder/ChannelBuilder.tsx
index aad213d87..85a2b73e1 100644
--- a/web/src/builder/ChannelBuilder.tsx
+++ b/web/src/builder/ChannelBuilder.tsx
@@ -647,7 +647,7 @@ function templatePlaybackOrder(template: ChannelTemplate): PlaybackOrder {
 // Advanced field keys wired into request.advanced (playbackOrder + playoutMode
 // live in dedicated state and are ALWAYS sent, so they are excluded here).
 const ADVANCED_KEYS = [
-  'fFmpegProfileId',
+  'ffmpegProfileId',
   'watermarkId',
   'fallbackFillerId',
   'preRollFillerId',
@@ -1091,7 +1091,7 @@ function ChannelBuilder({
       const requestBody: CreateChannelTemplateRequest = {
         name: saveName.trim(),
         description: saveDesc.trim(),
-        fFmpegProfileId: eff('fFmpegProfileId'),
+        ffmpegProfileId: eff('ffmpegProfileId'),
         watermarkId: eff('watermarkId'),
         fallbackFillerId: eff('fallbackFillerId'),
         preRollFillerId: eff('preRollFillerId'),
@@ -1768,7 +1768,7 @@ function templateChips(
 ): string[] {
   const chips: string[] = [];
   chips.push(STREAMING_MODE_LABELS[template.streamingMode as StreamingMode] ?? template.streamingMode);
-  const profile = ffmpegProfiles.find((candidate) => candidate.id === template.fFmpegProfileId);
+  const profile = ffmpegProfiles.find((candidate) => candidate.id === template.ffmpegProfileId);
   if (profile?.name) {
     chips.push(profile.name);
   }
@@ -1956,15 +1956,15 @@ function AdvancedPanel({
                 <Select
                   size="sm"
                   label="FFmpeg profile"
-                  value={selValue('fFmpegProfileId')}
+                  value={selValue('ffmpegProfileId')}
                   options={[
                     inheritOption(
-                      ffmpegProfiles.find((p) => p.id === template.fFmpegProfileId)?.name ??
-                        `#${template.fFmpegProfileId}`
+                      ffmpegProfiles.find((p) => p.id === template.ffmpegProfileId)?.name ??
+                        `#${template.ffmpegProfileId}`
                     ),
                     ...ffmpegProfiles.map((profile) => ({ value: String(profile.id), label: profile.name ?? `#${profile.id}` }))
                   ]}
-                  onChange={onSelect('fFmpegProfileId', Number)}
+                  onChange={onSelect('ffmpegProfileId', Number)}
                 />
                 <Select
                   size="sm"
@@ -2153,7 +2153,7 @@ function AdvancedPanel({
           ) : (
             <>
               <AdvGroup label="Streaming">
-                <ReadOnlyField label="FFmpeg profile" value={ffmpegProfiles.find((p) => p.id === template.fFmpegProfileId)?.name ?? `#${template.fFmpegProfileId}`} />
+                <ReadOnlyField label="FFmpeg profile" value={ffmpegProfiles.find((p) => p.id === template.ffmpegProfileId)?.name ?? `#${template.ffmpegProfileId}`} />
                 <ReadOnlyField label="Streaming mode" value={STREAMING_MODE_LABELS[template.streamingMode as StreamingMode] ?? template.streamingMode} />
                 <ReadOnlyField label="Transcode mode" value={template.transcodeMode} />
               </AdvGroup>
diff --git a/web/src/screens/ChannelEditScreen.test.tsx b/web/src/screens/ChannelEditScreen.test.tsx
index afa5ea441..e12e0f46c 100644
--- a/web/src/screens/ChannelEditScreen.test.tsx
+++ b/web/src/screens/ChannelEditScreen.test.tsx
@@ -8,7 +8,7 @@ const channel = {
   name: 'Cartoons',
   group: 'ChicoryTV',
   categories: 'Kids',
-  fFmpegProfileId: 1,
+  ffmpegProfileId: 1,
   slugSeconds: null,
   logo: { path: '', contentType: '' },
   streamSelectorMode: 'Default',
diff --git a/web/src/screens/ChannelEditScreen.tsx b/web/src/screens/ChannelEditScreen.tsx
index 44da62e7a..3d1904cb3 100644
--- a/web/src/screens/ChannelEditScreen.tsx
+++ b/web/src/screens/ChannelEditScreen.tsx
@@ -119,7 +119,7 @@ function draftFromChannel(channel: Channel): UpdateChannelRequest {
     number: channel.number,
     group: channel.group,
     categories: channel.categories,
-    fFmpegProfileId: channel.fFmpegProfileId,
+    ffmpegProfileId: channel.ffmpegProfileId,
     slugSeconds: channel.slugSeconds,
     logo: channel.logo,
     streamSelectorMode: channel.streamSelectorMode,
@@ -407,13 +407,13 @@ function StreamingPane({
           <Select
             disabled={hlsDirect}
             fullWidth
-            onChange={(event) => set({ fFmpegProfileId: Number(event.target.value) })}
+            onChange={(event) => set({ ffmpegProfileId: Number(event.target.value) })}
             options={data.ffmpegProfiles.map((profile) => ({
               label: profile.name ?? `Profile ${profile.id}`,
               value: String(profile.id)
             }))}
             size="sm"
-            value={String(draft.fFmpegProfileId)}
+            value={String(draft.ffmpegProfileId)}
           />
         </Row>
         <Row help="Black video / silent audio inserted between every playout item." label="Slug seconds">
diff --git a/web/src/screens/PlaybackTroubleshootingScreen.test.tsx b/web/src/screens/PlaybackTroubleshootingScreen.test.tsx
index 656b0c05c..63f02ed52 100644
--- a/web/src/screens/PlaybackTroubleshootingScreen.test.tsx
+++ b/web/src/screens/PlaybackTroubleshootingScreen.test.tsx
@@ -68,9 +68,10 @@ function installFetch(statusRef: { current: Status }) {
       );
     }
     if (url.startsWith('/api/channels/')) {
-      // Pin the RUNTIME shape, not the OpenAPI-spec shape: the server serializes with Newtonsoft,
-      // so the profile key is "ffmpegProfileId" (the generated types wrongly say "fFmpegProfileId"
-      // — see #198). streamSelectorMode/streamSelector match the spec (no leading acronym).
+      // Pin the runtime shape: the server serializes with Newtonsoft, so the profile key is
+      // "ffmpegProfileId". Since #198 the spec generator mirrors the runtime contract resolver, so
+      // the generated types now agree ("ffmpegProfileId"); this mock stays runtime-shaped to guard
+      // the fix. streamSelectorMode/streamSelector match too (no leading acronym).
       return Promise.resolve(
         json({ id: 7, name: 'Channel Seven', ffmpegProfileId: 2, streamSelectorMode: 'Default', streamSelector: null })
       );
@@ -173,8 +174,9 @@ describe('PlaybackTroubleshootingScreen', () => {
 
     expect(hlsMock.loadSource).toHaveBeenCalledTimes(1);
     const params = new URLSearchParams(String(hlsMock.loadSource.mock.calls[0][0]).split('?')[1]);
-    // The regression this pins: the runtime channel JSON key is ffmpegProfileId (#198); reading the
-    // spec-cased fFmpegProfileId left the profile null and the URL fell back to ffmpegProfile=0.
+    // The regression this pins: the runtime channel JSON key is ffmpegProfileId (#198). Before the
+    // spec was aligned, reading the spec-cased fFmpegProfileId left the profile null and the URL
+    // fell back to ffmpegProfile=0.
     expect(params.get('ffmpegProfile')).toBe('2');
     expect(params.get('channel')).toBe('7');
     expect(params.get('start')).toBe(new Date('2026-07-09T20:00').toISOString());
diff --git a/web/src/screens/PlaybackTroubleshootingScreen.tsx b/web/src/screens/PlaybackTroubleshootingScreen.tsx
index c9782d949..4fd518aee 100644
--- a/web/src/screens/PlaybackTroubleshootingScreen.tsx
+++ b/web/src/screens/PlaybackTroubleshootingScreen.tsx
@@ -302,13 +302,7 @@ export function PlaybackTroubleshootingScreen() {
         // LoadChannel logic).
         let defaultProfileId: null | number = data.profiles[0]?.id ?? null;
         if (mode.kind === 'channel' && data.channel) {
-          // Runtime JSON is Newtonsoft-cased ("ffmpegProfileId"); generated types say
-          // "fFmpegProfileId" — see #198. Read the runtime key first, fall back to the spec key,
-          // then to the first profile; never let this silently become 0.
-          // (streamSelectorMode / streamSelector below have no leading acronym, so their runtime
-          // keys match the generated types — verified against a live GET /api/channels/{id}.)
-          const rawChannel = data.channel as typeof data.channel & { ffmpegProfileId?: null | number };
-          defaultProfileId = rawChannel.ffmpegProfileId ?? data.channel.fFmpegProfileId ?? defaultProfileId;
+          defaultProfileId = data.channel.ffmpegProfileId ?? defaultProfileId;
         }
 
         const isRemoteStream = (data.rawKind ?? '').toLowerCase() === 'remotestream';