# Preply Video

## Development
### Local development(Standalone, recommended)
- `npm start` - to have stage40 API endpoing (recommended)
    - `npm run start:local` - to have monolith API endpoint
    - `npm run start:prod` - to have prod API endpoint (use it only if you know what to do)
- `open http://localhost:9002/classroom/{COLLOCUTOR_ID} for the new classroom experience or `http://localhost:9002/oldPs/{COLLOCUTOR_ID} for the old one`
- `by default we use API endpoint from the stage40 so make sure you are logined as a tutor or a student.`
- `To choose video provider for local development, change videoProvider prop here(client/@preply/video/src/devMode.js#L65)`
- You will have to login `http://localhost:9002/en/login` (see notes below about API Proxy below)

### API Proxy
To prevent CORS errors, we proxy all calls to `/graphql`, `/api` and a few other endpoints via `localhost` using `webpack-dev-server:proxy`.

We also proxy the monolith's authentication routes (e.g.: `/**/login`) so that you can login locally (with credentials or social network) and acquire your session cookies @localhost.
### Local development inside inside Another App e.g. Preply Space
In `@preply/video`
```
npm link # installs a global symlink to make "npm link @preply/video" possible
npm i
npm start
```
In preply-space
```
npm i
npm link @preply/video # pick up that symlink
npm start
```
Tip: this shows all your globally-linked npm packages:
```npm ls -g --depth=0 --link=true```

### Monitoring / Alerting

Errors from this service are reported to Sentry under [client-pkgs](https://sentry.preply.org/organizations/preply/projects/client-pkgs/?project=30) project.

To filter errors that are only related to this service use `source` tag.

## Before release
1. Make sure you have incremented video version(https://docs.npmjs.com/about-semantic-versioning)
2. Run `npm version x.y.z` to incremented version and update package.json, package-lock.json

### Date localization
All datetime that goes from BE is in UTC time, we have to format this to user timezone format. Please, use only useTimeZone, toZonedDate, and FormattedDate for date localization.
Example:
```
const { timeZone } = useTimeZone();
const localDatetime = toZonedDate(new Date(datetime), timeZone);
return <FormattedDate value={localDatetime} />
```

### Codestyle


1. Refer to the [ESLint in Preply: How to](https://preply.atlassian.net/wiki/spaces/FPS/pages/3109814300/ESLint+in+Preply+How+to) for a detailed guide on how we pursue the same codestyle within different projects at Preply.
    :bulb: You’ll need to install dependencies in the repo root by running `yarn` there to enable linting via CLI.

2. Please, use tokens from `@preply/ds-web-core` for styles such as font-size, padding, margins, etc
    [theme file](../@preply/ui/src/styles/theme.ts);
    Example:
    **Bad:**
    ```
        font-size: 16px;
        color: #3bb3bd;
        padding: 16px;
    ```
    **Good:**
    ```
        font-size: t(text.small.regular.body.fontSize);
        color: t(color.background.positiveLight);
        padding: ${t(spacing[16])};
    ```
3. Name custom hooks with name starting with `use` [details](https://reactjs.org/docs/hooks-custom.html#extracting-a-custom-hook) so as to avoid breaking app in case of incorrect hook usage [details](https://reactjs.org/docs/hooks-rules.html)

## Release
Follow [this readme](../../../README.md#publishing-npm-packages)
### Common flow
1. Merge your PR  with video feature
2. CI autopublishes new video in NPM
3. Wait for Jenkins [PR](https://github.com/preply/apollo/pulls?q=is%3Aopen+is%3Apr+renovate+)(It looks like `Update dependency @preply/chat to `)
     - If Jenkins bot didn't create PR (usually it takes up to 10 mins after a package was deployed) check [Jenkins jobs](https://jenkins.preply.org/view/CD/job/Create_Renovate_PRs/). You can also trigger it manually by calling:
```
docker run renovate/renovate --token=$GITHUB_TOKEN --dry-run=true preply/apollo
```

5. Start `/dynamic` in this PR and check video on each service

### Manual(only if CI autopublish doesn't work):
### 1. Via CI
1. Create [GH release](https://github.com/preply/apollo/releases/new):
1.1. Tag version: client-video-${VERSION FROM PACKAGE.JSON} e.g. client-video-1.2.3
1.2. Target: `master` or your branch of PR with video changes
1.3. Release title: the same as tag version
2. Go to Prod_Flow in jenkins CI
3. Choose `client-video` servise
4. Choose tag
### 2. Locally (Only if CI doesn't work)
```
npm run build
npm publish
```
### 3. Publish alfa/beta version
1. Create PR with your branch
2. Create new tag from your branch  e.g: `git tag client-video-6.4.0-alfa.0`
3. Push new tag e.g: `git push origin client-video-6.4.0-alfa.0`
4. Go to CI(jenkins), chose your service and tag then press button `Build`

### Projects which use video (better do a lookup in `package.json` files throughout the repo 'cause this might update):
1. EDU
### Recommendations for use
- do not use heavy packages as it increases bundle size(such as moment js)

### Testing

We have limited e2e tests coverage, so we have to test video package manually also according to the [QA framework](https://docs.google.com/spreadsheets/d/1xTwoZjDzSa6By-vzDp7YP6qDitQ0apV1GC0T53Treno/edit#gid=615624599)

1. Create PR and build dynamic using `/dynamic npm`
2. Wait for e2e tests to pass
3. Test chat manually according to the [QA framework](https://docs.google.com/spreadsheets/d/1xTwoZjDzSa6By-vzDp7YP6qDitQ0apV1GC0T53Treno/edit#gid=615624599) (at least 1 device with 1 resolution)