What Are the Main Dependencies for the Stremio-Web Repository?

The Stremio-Web frontend is built on a React-based JavaScript stack that integrates the @stremio/stremio-core-web engine, internationalization utilities, and browser compatibility polyfills, all declared in the root package.json file.

The Stremio-Web repository contains the browser-based single-page application for the Stremio media streaming platform. Understanding the main dependencies for the Stremio-Web repository reveals how the application renders its interface, handles video playback, manages state, and supports multiple languages, with every runtime package strictly defined in the project's package.json manifest.

React UI and Rendering Layer

The user interface relies on the standard React ecosystem. The react and react-dom packages provide the component model and DOM manipulation layer.

Several satellite React libraries enhance accessibility and functionality:

• react-focus-lock manages focus trapping for modal dialogs, ensuring keyboard navigation remains within active overlays.
• react-i18next connects the React component tree to the translation engine.
• prop-types enables runtime type checking for component props during development.

These packages work together in src/index.js, the application entry point that mounts the React root and initializes the core services.

Stremio Core Ecosystem

The application logic depends on proprietary Stremio libraries published under the @stremio scope. @stremio/stremio-core-web is the most critical dependency, supplying the central data model, playback engine, and API adapters that communicate with Stremio servers.

Additional scoped packages include:

• @stremio/stremio-icons: Standardized iconography used across UI components.
• @stremio/stremio-video: Video player abstractions and streaming protocol handlers.
• @stremio/stremio-colors: Centralized color palette definitions for theming.

In src/core/useCore.ts, the application wraps @stremio/stremio-core-web into a React hook, making the core instance available throughout the component tree via context or props.

State Management and Event Utilities

Rather than using a heavy state management framework like Redux, Stremio-Web leverages lightweight utilities:

• eventemitter3: A high-performance event emitter serving as the primary pub/sub bus between UI components and the core library.
• classnames: A utility for conditionally joining CSS class strings based on component state.
• fast-equals: Provides deep equality checks for complex objects and arrays, optimizing React re-render cycles.
• Lodash utilities (lodash.debounce, lodash.intersection, lodash.throttle): Granular lodash functions for input debouncing, array comparisons, and scroll throttling without importing the entire library.

Internationalization (i18n)

Multi-language support depends on i18next as the core internationalization framework, paired with react-i18next for React-specific bindings. The actual translation strings reside in the stremio-translations package, which the application imports to provide localized strings for all supported languages. This setup allows dynamic language switching without reloading the application bundle.

Browser Compatibility and Media Handling

To ensure consistent behavior across diverse browsers and TV platforms, the repository includes several polyfills and detection libraries:

• bowser: Detects browser capabilities and versions at runtime, enabling feature flags for specific platforms.
• spatial-navigation-polyfill: Implements spatial navigation APIs for TV-style remote control navigation (arrow key focus management).
• buffer and url: Node.js-compatible implementations of the Buffer and URL modules, necessary for parsing binary data and URLs in browser environments.

For media-specific functionality:

• magnet-uri: Parses magnet links to extract torrent infoHashes, trackers, and metadata for torrent-based streaming.
• a-color-picker: Provides a color selection component used in settings and customization features.
• use-long-press: A React hook detecting long-press gestures for touch interfaces.

Error Monitoring and Telemetry

Production error tracking relies on @sentry/browser, which captures runtime exceptions and performance metrics. This integration sends crash reports to Sentry, allowing the development team to monitor application health and identify client-side errors in real time.

Implementation Examples

Initializing the Stremio Core

The following pattern from src/core/useCore.ts demonstrates how the application instantiates the core library:

import { useCore } from './core/useCore';
import { createRoot } from 'react-dom/client';
import App from './App';

function Root() {
  // Initialise the core – this pulls in @stremio/stremio-core-web under the hood
  const core = useCore();

  // The core instance can now be passed via React Context or props
  return <App core={core} />;
}

createRoot(document.getElementById('root')).render(<Root />);

Configuring Internationalization

Components access translations through the i18next React bindings:

import { useTranslation } from 'react-i18next';

function LanguageSwitcher() {
  const { i18n } = useTranslation();          // from i18next
  const changeLang = (lng) => i18n.changeLanguage(lng);
  return (
    <select onChange={e => changeLang(e.target.value)}>
      <option value="en">English</option>
      <option value="de">Deutsch</option>
    </select>
  );
}

Handling Magnet Links for Torrents

The video playback module in src/common/usePlayUrl.js uses the magnet-uri package to process torrent links:

import magnet from 'magnet-uri';
import { usePlayUrl } from './common/usePlayUrl';

function PlayFromMagnet({ magnetLink }) {
  const playUrl = usePlayUrl();
  const parsed = magnet(magnetLink);          // parses infoHash, trackers, etc.
  // Pass the infoHash to the core’s torrent engine
  playUrl(`magnet:${parsed.infoHash}`);
}

Key Configuration Files

Several files orchestrate how these dependencies are consumed:

• package.json: The authoritative manifest listing all runtime and development dependencies, version constraints, and npm scripts.
• webpack.config.js: Defines the bundling strategy, tree-shaking rules, and module resolution for production builds.
• src/core/useCore.ts: The abstraction layer connecting React components to @stremio/stremio-core-web.
• src/common/usePlayUrl.js: Utility hook integrating media parsing libraries like magnet-uri with the playback engine.
• src/index.js: The application bootstrap file importing React and the core initialization logic.

Summary

• Stremio-Web depends on React for UI rendering, augmented by accessibility and internationalization libraries.
• The proprietary @stremio/stremio-core-web package provides the essential data models, API clients, and streaming engine.
• eventemitter3 and lightweight Lodash utilities handle cross-component communication and state equality checks.
• i18next and stremio-translations deliver multi-language support without page reloads.
• Browser polyfills like bowser and spatial-navigation-polyfill ensure compatibility across desktop and TV environments.
• @sentry/browser monitors production errors, while magnet-uri enables torrent streaming support.

Frequently Asked Questions

What is the role of @stremio/stremio-core-web?

@stremio/stremio-core-web is the central dependency that supplies the application's data layer, including the playback engine, content metadata models, and adapters for communicating with Stremio's backend APIs. It is initialized in src/core/useCore.ts and injected into the React component tree to provide global state and actions.

How does Stremio-Web handle torrent magnet links?

The repository uses the magnet-uri package to parse magnet links, extracting the infoHash and tracker URLs. The src/common/usePlayUrl.js utility then constructs playback URLs compatible with the core's torrent engine, enabling streaming directly within the browser without external applications.

Is Stremio-Web built with TypeScript or JavaScript?

The codebase primarily uses JavaScript with significant portions written in TypeScript (notably src/core/useCore.ts). Development dependencies include TypeScript compilers and type definitions, allowing for gradual type safety adoption, while the build pipeline in webpack.config.js handles both languages.

What build tool bundles the Stremio-Web dependencies?

Webpack serves as the primary bundler, configured in webpack.config.js. It processes JavaScript/TypeScript source files, resolves Stremio's scoped packages, and applies optimizations like tree-shaking for production deployments. Development tooling includes Babel for transpilation and ESLint for code quality.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}