ShadowStream Player

React + TypeScript + Vite

Get Started

To install the local video player and get setup for dev:

npm install

Install nvm:https://github.com/nvm-sh/nvm if you don't already have it or are not running newest node version

nvm install v20.17.0

nvm use v20.17.0

and then run the install

Running a local video player

Storybook for development and testing

npm run storybook

This will start Storybook at http://localhost:6006 where you can interact with and test the HLS player component in various configurations.

build for development

npm run build-stage

NEW* watch script

npm run watch:full

Linting

The project uses ESLint for code quality checks. Here are the available commands:

Check for linting issues

npm run lint

Automatically fix linting issues where possible

npm run lint:fix

Generate a lint report

npm run lint:report This will create an eslint-report.json file with detailed linting information.

VS Code Integration

For the best development experience, install the ESLint extension for VS Code to get real-time linting feedback as you code.

Building for deployment

Update the version

npm version patch

npm run build

This will build files to the dist/ folder: dist/assets/index-v<version>.js dist/assets/index-v<version>.css

Then these files will need to be uploaded to s3 for deployment (this can be done with CI/CD pipelines on gitlab)

Additional info about this project

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:

• Configure the top-level parserOptions property like this:

export default tseslint.config({
  languageOptions: {
    // other options...
    parserOptions: {
      project: ['./tsconfig.node.json', './tsconfig.app.json'],
      tsconfigRootDir: import.meta.dirname,
    },
  },
})

• Replace tseslint.configs.recommended to tseslint.configs.recommendedTypeChecked or tseslint.configs.strictTypeChecked
• Optionally add ...tseslint.configs.stylisticTypeChecked
• Install eslint-plugin-react and update the config:

// eslint.config.js
import react from 'eslint-plugin-react'

export default tseslint.config({
  // Set the react version
  settings: { react: { version: '18.3' } },
  plugins: {
    // Add the react plugin
    react,
  },
  rules: {
    // other rules...
    // Enable its recommended rules
    ...react.configs.recommended.rules,
    ...react.configs['jsx-runtime'].rules,
  },
})