# stserver-frontend-comp

Latest version **2.0.0** (published 2026-09-29) · 0 weekly downloads

## Install

```sh
npm install stserver-frontend-comp
pnpm add stserver-frontend-comp
yarn add stserver-frontend-comp
bun add stserver-frontend-comp
```

## Health

**Score 55/100 (C)** — status: active.

Positive: no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads; no types; no esm support.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2026-09-29 |
| First published | 2021-02-25 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | impleotv |

## Links

- npm: https://www.npmjs.com/package/stserver-frontend-comp
- npm.io page: https://npm.io/package/stserver-frontend-comp

## Recent versions

- 2.0.0 (latest) — 2026-09-29
- 1.12.10 — 2026-05-08
- 1.12.9 — 2026-02-04
- 1.12.7 — 2025-12-11
- 1.12.6 — 2025-11-28
- 1.12.5 — 2025-11-28
- 1.12.3 — 2025-11-27
- 1.12.2 — 2025-11-27
- 1.12.1 — 2025-11-27
- 1.12.0 — 2025-11-27
- 1.11.11 — 2025-09-24
- 1.11.10 — 2025-08-24
- 1.11.9 — 2025-08-24
- 1.11.8 — 2025-08-24
- 1.11.7 — 2025-08-23
- … 176 more at https://npm.io/package/stserver-frontend-comp/versions

## README

<div align="center">
  <a >
    <img src="images/impleo_logo.png" alt="Logo" >
  </a>
</div>

# stserver-frontend-comp


**stserver-frontend-comp** is a js frontend React component library that helps you build a user interface for [StanagOnDemand Server](https://impleotv.com/products/stanagondemand-server/).  
It contains standalone reusable components that serve as a building blocks for FMV web application.  
The modular components do not contain much application specific dependencies - they provide a basic functionality, so you can easily reuse them, adding your own application specific "look & feel" and logic.

## Excluded dependencies

Library excludes the following from the package, so they must be present in the hosting application

 - react
 - react-dom
 ## Peer Dependencies

 - react
 - react-dom
 - @material-ui/core
 - @material-ui/icons
 - @material-ui/lab
 - socket.io-client


[Live Demo](http://stserver-storybook.impleotv.com)
## Components

### Players

Player components implement a video playback and KLV metadata extraction functionality.


#### SensorPlayer

**SensorPlayer** is a high level component that implements a video playback and KLV metadata extraction functionality for all supported (by StanagOnDemand server) operational modes and protocols. It supports both **Live** and **VOD** playback. In most cases user should use this component when building a front end.

##### Usage

###### VOD scenario

````javascript
import './App.css';
import { SensorPlayer } from 'stserver-frontend-comp';

function App() {
  return (
    <div className="App" >     
      <SensorPlayer serverUrl='https://stserver.impleotv.com'
        missionIdOrName='Truck' sensorIdOrName='EO-IR' videoDir='videos'
        username='guest' password='guest'
        clientId='storybookDemo'
        width={640} height={360}/>
    </div>
  );
}

export default App;
````

###### Live and Live low latency scenarios

````javascript
import './App.css';
import { SensorPlayer } from 'stserver-frontend-comp';

function App() {
  return (
    <div className="App" >     
      <SensorPlayer serverUrl='https://stserver.impleotv.com'
        mode='lowLatency'
        platformName='Legion'
        missionIdOrName='Truck' sensorIdOrName='EO-IR' 
        username='guest' password='guest'
        wsVideoStreamPort={9010}
        useReverseProxy={true}   
        width={640} height={360}/>
    </div>
  );
}

export default App;
````


#### HlsPlayer

**HlsPlayer** is a low level component that implements a video playback and KLV metadata extraction functionality for **HLS** protocol. It supports both **Live** and **VOD** playback. **SensorPlayer** wraps this component, so it should not be used directly.

##### Usage

````javascript
import './App.css';
import { HlsPlayer } from 'stserver-frontend-comp';

function App() {
  return (
    <div className="App" >     
      <HlsPlayer serverUrl='https://stserver.impleotv.com'
        missionIdOrName='Truck' sensorIdOrName='EO-IR' videoDir='videos'
        username='guest' password='guest'
        width={640} height={360}/>
    </div>
  );
}

export default App;
````
#### LiveLowLatencyPlayer

**LiveLowLatencyPlayer** is a low level component that implements a video playback and KLV metadata extraction functionality in **Live Low Latency** mode. **SensorPlayer** wraps this component, so it should not be used directly.

### Klv metadata

#### KlvView

**KlvView** implements a JSON based MISB metadata hierarchical presentation.

##### Usage

````javascript
import './App.css';
import { KlvView } from 'stserver-frontend-comp';

const Pckt601 = {
    "1": -10117, 
    "2": 1355755344617000,
    "3": "test",
    "4": "AF-101",
    "5": 159.974,
    "6": -0.4315,
    "7": 3.4059,
    "8": 147,
    "9": 159,
    "10": "MQ1-B",
    "11": "EO",
    "12": "WGS-84",
    "13": 40.847380520333815,
    "14": -104.97439262217624,
    "15": 14190.7
};

function App() {
  return (
    <div className="App" >     
      <KlvView theme='light' data={Pckt601}/>
    </div>
  );
}

export default App;
````



#### MissionTimeline  

**MissionTimeline** is a generic timeline for mission presentation and (optional) current playback position. It requires an external sensor data source. **MissionTimeline** shows all sensor that belong to the mission. If recording contains non-continues clips, they are placed on a timeline accordingly. Additionally, **MissionTimeline** provides events on clicked bookmarks and position.
#### SensorTimeline  

**SensorTimeline** is a generic timeline for mission presentation and (optional) current playback position. It requires an external sensor data source. Additionally, it provides events on clicked bookmark and position.

#### StMissionTimeline  

**StMissionTimeline** is a StServer helper wrapper for the MissionTtimeline control. It contains MissionTtimeline control and a code that pulls data from the server. **StMissionTimeline** shows all sensor that belong to the mission. If recording contains non-continues clips, they are placed on a timeline accordingly. Additionally, **StMissionTimeline** provides events on clicked bookmarks and position.
#### CanvasGrid

**CanvasGrid** is a low level component that renders a grid. It is a helper component that is used by higher level components for showing background.

### Tools

#### CutControl

**CutControl** implements a timeline for cutting and exporting clips out of the video files.

##### Usage

````javascript
import './App.css';
import { CutControl } from 'stserver-frontend-comp';

function App() {
  return (
    <div className="App" >     
      <CutControl theme='light'
        markIn={0} markOut={2800} duration={3600} curPos={1000}
        crosshairColor={'red'} gridColor={'grey'} gridOpacity={0.2} 
      />
    </div>
  );
}

export default App;
````

---
_Source: https://npm.io/package/stserver-frontend-comp · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._