Development

Development

The project uses npm workspaces and Enact to share a single React codebase across both platforms while keeping platform-specific code isolated.

Project structure

moonfin/
├── packages/
│   ├── app/                  # Shared application code
│   │   └── src/
│   │       ├── App/          # Main application component
│   │       ├── components/   # Reusable UI components
│   │       ├── context/      # React context providers
│   │       ├── hooks/        # Custom React hooks
│   │       ├── services/     # API and service modules
│   │       ├── views/        # Page components
│   │       ├── utils/        # Helpers and key handling
│   │       └── styles/       # Global styles and variables
│   ├── platform-tizen/       # Samsung AVPlay, Smart Hub, Tizen storage
│   ├── platform-webos/       # Starfish/HTML5 video, Luna storage
│   ├── build-tizen/          # Tizen build scripts -> .wgt
│   └── build-webos/          # webOS build scripts -> .ipk
├── package.json              # npm workspaces root
└── .eslintrc.js              # Shared ESLint config

Platform abstraction

Shared code in packages/app/ never imports directly from @enact/webos, tizen.*, or webapis.*. Platform-specific behavior is reached through runtime detection instead:

import { isTizen, isWebOS, getPlatform } from './platform';

Services such as video, storage, and device profiles call getPlatform() and dynamically import the correct implementation from platform-tizen/ or platform-webos/ at runtime. Anything that touches a native API belongs in one of those two packages, not in packages/app/.

Developer notes

• Enact/Sandstone provides the TV-optimized UI components and Spotlight focus navigation.
• Tizen uses the AVPlay API for video and tizen.tvinputdevice for remote keys.
• webOS uses a shared HTML5 video element with the audioTracks API, and Luna service calls for storage.
• Packaged apps (.wgt and .ipk) bypass CORS restrictions that apply to the browser dev server.
• Cross-origin cookies do not persist in either platform's webview, so API keys are used instead.
• UI changes should be tested on real TV hardware when possible. Focus behavior, performance, and video in particular do not fully reproduce in a desktop browser.

Translations

Moonfin is translated through Weblate. See the Smart-TV translation project rather than editing translation files by hand.