# frontend-audio-player

## Setup

This project has been upgraded to `node` `v24` and `python` version `3.12`. If you use `nvm` and `pyenv`, you can do the following:

```bash
nvm install 24
nvm use 24
pyenv install 3.12.6
pyenv local 3.12.6
```

## Installing
- `cp .env.shadow .env`: Initialize environment configuration
    - `GRASS_TOKEN` - required, example: `f72848924jsfa4`
    - `DEFAULT_TRACKS` - required, example: `[{id: 1},{id: 2},{id: 3},{id: 4},{id: 5}]`
    - `DEFAULT_PLAY_TRACK_ID` - required, example: `4`
    - `DEFAULT_PRODUCT_ID` - required, example: `123`
    - `ERROR_CORRECTION` - required, example: `false`
- `yarn`: Install dependencies

## Running

- `yarn start`: Run the local development server
- `yarn test`: Run the linter and the tests
- `yarn lint`: Run the linter
- `yarn test:unit`: Run the tests

## Using in other projects

- Include the library in your `package.json`:
`"frontend-audio-player": "git+ssh://git@github.com:theorchard/frontend-audio-player.git"`
- Install your dependencies: `yarn`
- Include styles into styles entry file:
`@import "~frontend-audio-player/build/frontend-audio-player.css";`
- Import the component:
`import { AudioPlayer } from 'frontend-audio-player;`
- Use the component:
`<AudioPlayer tracks={...} playTrackId={...} />`

## Integrations

### Workstation

- The player is added as a dependency in frontend-distribution: https://github.com/theorchard/frontend-distribution/blob/master/package.json#L108
- And is initilized and rendered in the `<HlsAudioPlayerWrapper>` component: https://github.com/theorchard/frontend-distribution/blob/master/src/components/hls-audio-player-wrapper/hls-audio-player-wrapper.js#L15

### OA

- The player is initilized as a React application in the `StreamingController`: https://github.com/theorchard/orchard/blob/master/application/modules/oa/controllers/StreamingController.php#L35
- And is rendered in the associated view: https://github.com/theorchard/orchard/blob/master/application/modules/oa/views/scripts/streaming/product.phtml

## Modes

The `<AudioPlayer>` component supports three different modes:

- `<AudioPlayer mode="simple" ... />`: The default mode. In this mode the player is rendered as a horizontal bar at the bottom of the page. This is the mode used for the Workstation integration. The required props are `tracks` or `productId`.
- `<AudioPlayer mode="playlist" ... />`: This mode also renders the player as a horizontal bar at the bottom of the page and above it renders the product's artwork and tracklist. This is the mode used for the OA integration. The required prop is `productId`.
- `<AudioPlayer mode="promo" ... />`: This mode is different than the other two as it doesn't render the player as a horizontal bar at the bottom of the page but instead renders the player along the artwork and the tracklist in a centered container. In this mode no API calls are made to OWS microservices, instead promo.theorchard.io is used as a backend. The required prop is `promoPlayerData`.