TV is hard.We make it easy.

// home.ts
@view('Home')
export class HomeView
  extends BaseView<HomeState> {
  @state private dataSource =
    new CollectionViewDataSource([{
      id: 'language-stories',
      settingsKey: 'rows.languageStories',
      data: {},
      items: storyIds.map(id => ({
        id,
        imageUrl: storyImages[id],
        ...this.appConfig.get(
          `locale.languageStories.stories.${id}`
        ),
      })),
    }]);

  protected override getViews() {
    return [
      CollectionView({
        id: 'languageStories',
        dataSource: this.dataSource,
        readingDirection:
          this.appConfig.getReadingDirection(),
      })
        .onItemSelected(({ itemIndex }) => {
          const story = storyIds[itemIndex ?? -1];
          if (!story) return;

          (this.parent as NavControllerView)
            .push(Details({
              id: `details-${story}`,
              storyId: story,
            }));
        })
        .isInitialFocus()
    ];
  }
}

// details.ts
@view('Details')
export class DetailsView
  extends BaseView<DetailsState> {
  @state storyId: StoryId = 'bakery';

  protected override getViews() {
    const story = this.appConfig.get<StoryCopy>(
      `locale.languageStories.stories.${this.storyId}`
    );

    return [Group([
      Image({
        id: 'detailsImage',
        imageUri: storyImages[this.storyId],
      }),
      Label({
        id: 'title',
        text: story.title,
        horizontalAlignment: 'start',
      }),
      Label({
        id: 'description',
        text: story.description,
        horizontalAlignment: 'start',
      }),
      Button({
        text: this.translate(
          '{{locale.languageStories.back}}'
        ),
      })
        .onClick(() => this.popDetails())
        .isInitialFocus(),
    ])];
  }
}

// app.config.json · relevant sections
{
  "locales": {
    "ar": { "readingDirection": "rtl" }
  },
  "rows": {
    "languageStories": {
      "rowType": "HorizontalRow",
      "cellSize": [400, 300],
      "height": 386,
      "spacing": 28,
      "contentOffset": [92, 8],
      "cellSettingsKey": "cells.languageStory",
      "focusSettings": {
        "hideFocusIndicator": true,
        "focusedScale": 1.035
      }
    }
  },
  "cells": {
    "languageStory": {
      "$supportsDataMap": true,
      "cacheFragmentConstraintLayout": true,
      "views": {
        "base": [
          {
            "id": "poster",
            "subType": "Poster",
            "uri": "${data.imageUrl}",
            "width":
              "{{constraint.fillX(start, cell.end, 6, 6)}}",
            "height":
              "{{constraint.aspectRatio(1.865)}}",
            "translation": [
              "{{constraint.pin(start, cell.start, 6)}}",
              6
            ]
          },
          {
            "id": "title",
            "subType": "Label",
            "text": "${data.title}",
            "horizAlign": "start",
            "width":
              "{{constraint.fillX(start, cell.end, 26, 26)}}",
            "translation": [
              "{{constraint.pin(start, cell.start, 26)}}",
              "{{constraint.pin(top, poster.bottom, 18)}}"
            ]
          }
        ],
        "normal": { "poster": { "opacity": 0.9 } },
        "focused": { "poster": { "opacity": 1 } }
      }
    }
  },
  "translations": {
    "en": {
      "languageStories": {
        "sectionTitle": "Choose an adventure",
        "back": "Back to stories"
      }
    },
    "ar": {
      "languageStories": {
        "sectionTitle": "اختر مغامرة",
        "back": "العودة إلى الحكايات",
        "stories": {
          "bakery": {
            "title": "المخبز المشمس",
            "description": "ثلاثة مآزر ورغيف واحد مستحيل."
          }
        }
      }
    }
  }
}

// app.config.mobile.json · relevant overrides
{
  "$extendFile": "./app.config.json",
  "appSettings": {
    "configVariant": "mobile"
  },
  "rows": {
    "languageStories": {
      "height": 220,
      "cellSize": [336, 214],
      "contentOffset": [20, 0],
      "spacing": 16,
      "viewportWidth": 393,
      "floatingFocusAreaWidth": 353,
      "focusSettings": {
        "focusedScale": 1.025
      }
    }
  },
  "controls": {
    "NavController": {
      "transition": {
        "default": {
          "transitionType": "Slide",
          "transitionOptions": {
            "duration": 300,
            "parallax": 0.3
          }
        }
      }
    }
  }
}