Skip to content

Commit

Permalink
Merge branch 'develop' into feat/series-flow-support
Browse files Browse the repository at this point in the history
  • Loading branch information
AntonLantukh committed May 8, 2023
2 parents cbbfde5 + f1e1237 commit 8975649
Show file tree
Hide file tree
Showing 28 changed files with 201 additions and 195 deletions.
52 changes: 27 additions & 25 deletions .depcheckrc.yaml
Original file line number Diff line number Diff line change
@@ -1,26 +1,28 @@
ignores: [
# These are dependencies for vite and vite plugins that depcheck doesn't recognize as being used
'postcss-scss',
'stylelint-order',
'stylelint-config-recommended-scss',
'stylelint-declaration-strict-value',
'stylelint-scss',
'@vitest/coverage-c8',
# This is used by commitlint in .commitlintrc.js
'@commitlint/config-conventional',
# These are vite aliases / tsconfig paths that point to specific local directories
# Note the \ is necessary to escape the # or the ignore doesn't work
'\#src',
'\#test',
'\#types',
'\#components',
'\#utils',
# This is used in src/styles, which recognizes absolute paths from the repo root
'src',
# To support e2e-reports
'allure-commandline',
# To run linting checks
'npm-run-all',
# SW code is injected at build time
'virtual:pwa-register'
]
# These are dependencies for vite and vite plugins that depcheck doesn't recognize as being used
'postcss-scss',
'stylelint-order',
'stylelint-config-recommended-scss',
'stylelint-declaration-strict-value',
'stylelint-scss',
'@vitest/coverage-c8',
# This is used by commitlint in .commitlintrc.js
'@commitlint/config-conventional',
# These are vite aliases / tsconfig paths that point to specific local directories
# Note the \ is necessary to escape the # or the ignore doesn't work
'\#src',
'\#test',
'\#types',
'\#components',
'\#utils',
# This is used in src/styles, which recognizes absolute paths from the repo root
'src',
# To support e2e-reports
'allure-commandline',
'@codeceptjs/allure-legacy',
'faker',
# To run linting checks
'npm-run-all',
# SW code is injected at build time
'virtual:pwa-register',
]
2 changes: 1 addition & 1 deletion .github/workflows/codeceptjs.yml
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ jobs:
- name: Install dependencies
run: |
yarn
npm install wait-on -g
yarn global add wait-on
- name: Start preview server
run: yarn start:test &
- name: Run tests
Expand Down
2 changes: 1 addition & 1 deletion .github/workflows/linting.yml
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ on: [pull_request]

jobs:
lint:
runs-on: macos-latest
runs-on: ubuntu-latest

strategy:
matrix:
Expand Down
2 changes: 1 addition & 1 deletion .github/workflows/main.yml
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ on: [pull_request]

jobs:
build:
runs-on: macos-latest
runs-on: ubuntu-latest

strategy:
matrix:
Expand Down
9 changes: 9 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,12 @@
## [4.6.3](https://github.com/jwplayer/ott-web-app/compare/v4.6.2...v4.6.3) (2023-05-08)


### Bug Fixes

* **e2e:** fix tests ([4fdfa79](https://github.com/jwplayer/ott-web-app/commit/4fdfa796c2e5797a496f4abd714b2786eada47a8))



## [4.6.2](https://github.com/jwplayer/ott-web-app/compare/v4.6.1...v4.6.2) (2023-04-21)


Expand Down
7 changes: 3 additions & 4 deletions docs/backend-services.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,11 @@ The application is built as a single page web app that can run without its own d
hosting it with a very simple, static host, like github pages. The server serves the static web content and the frontend
calls the [JW Player Delivery API](https://developer.jwplayer.com/jwplayer/docs) directly.
However, for additional functionality, the application can also connect to other backends to provide user
accounts / authentication, subscription management, and checkout flows.

accounts / authentication, subscription management, and checkout flows.

## Roles and Functions

The available backend integrations serve 3 main roles, Accounts, Subscription, and Checkout. Below are the methods
The available backend integrations serve 3 main roles: Accounts, Subscription, and Checkout. Below are the methods
that any backend integration needs to support broken down by role:

- [Account](src/services/account.service.ts)
Expand Down Expand Up @@ -48,4 +47,4 @@ The OTT Web App is optimized to work with JWP authentication, subscriptions, and

### Cleeng (https://developers.cleeng.com/docs)

The Web App was also developed with support for Cleeng. Cleeng is a 3rd party platform that also provides support for the 3 functional roles above.
The Web App was also developed with support for Cleeng. Cleeng is a 3rd party platform that also provides support for the 3 functional roles above.
38 changes: 19 additions & 19 deletions docs/build-from-source.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,25 +27,25 @@ $ cd ott-web-app
$ yarn --ignore-optional
```

> **NOTE**: Some of the [easy deployments](easy-deployments.md) instructions require installing these optional dependencies. Use the `yarn` command to install all dependencies. The `yarn` command can be run even if `yarn --ignore-optional` has been previously run.
> **NOTE**: Some of the [easy deployments](easy-deployments.md) instructions require installing these optional dependencies. Use the `yarn` command to install all dependencies. The `yarn` command can be run even if `yarn --ignore-optional` has been previously run.
3. Create or update the .ini files in `/ini` for the modes you will be running in (probably dev and prod.)
You can copy the ini file from `/ini/templates` into `/ini`. The files in `/ini` are git-ignored, so you do not need to worry about account values in source control, but you will need to recreate the ini files each time you make a fresh checkout of the repository.

The .ini files provide startup values to the application such as which app config to load by default. See [initialization-file](initialization-file.md) for more details.
3. Create or update the .ini files in `/ini` for the modes you will be running in (probably dev and prod).
You can copy the ini file from `/ini/templates` into `/ini`. The files in `/ini` are git-ignored, so you do not need to worry about account values in source control, but you will need to recreate the ini files each time you make a fresh checkout of the repository.

The .ini files provide startup values to the application such as which app config to load by default. See [initialization-file](initialization-file.md) for more details.

4. Start the local development server.

```shell
$ yarn start
```

If you encounter any errors, make sure you have correctly set the `defaultConfigSource` in `/ini/.webapp.dev.ini` to point to a valid app config from your JWP account.
> **NOTE:** Only use the development server for development purposes. The development server is not optimized for production usage.
If you encounter any errors, make sure you have correctly set the `defaultConfigSource` in `/ini/.webapp.dev.ini` to point to a valid app config from your JWP account.

> **NOTE:** Only use the development server for development purposes. The development server is not optimized for production usage.
5. Build a deployable version of the JW OTT Webapp source code.<br /><br />This command creates a new folder in the projects root folder named **build**.
The `public` folder from the build directory can be uploaded to any static hosting provider to run the web app from that host.
The `public` folder from the build directory can be uploaded to any static hosting provider to run the web app from that host.

```shell
$ yarn build
Expand All @@ -58,20 +58,20 @@ If you encounter any errors, first check to make sure you've properly updated `/
## Modes

We make use of [Vite's 'mode' concept](https://vitejs.dev/guide/env-and-mode.html#modes) to cleanly separate different deployments.
For most cases, you will want to use `dev`, `test`, or `prod` modes. The supported modes are described below.
For most cases, you will want to use `dev`, `test`, or `prod` modes. The supported modes are described below.

Please keep in mind that there is a nuanced difference between vite `mode` and whether you are running a development or production build as determined by [`NODE_ENV`](https://nodejs.dev/en/learn/nodejs-the-difference-between-development-and-production/).
Mode can be whatever different deployment environments that our application can be run in, while the build type will always be either `development` or `production`.
Typically when you run the development server using `yarn start`, it will be a `development` build and you build the code with `yarn build` and then host it from static hosting, you will be running a production build.

Production builds optimize code and minimize debug information, while development builds are made for developers to dig into.

* **dev** - used for developers to locally develop, test, and debug code. Has the most debug information, including a config selector to help developers quickly switch between app configs. Will allow any app config to be loaded.
* **test** - used when running unit and e2e tests. Should typically be run as a production build. Will only load a select list of test app configs
* **prod** - default used when running `yarn build` to create compiled code for production hosting. You should make sure to update the prod .ini file to only allow app configs from your account.
* **demo** - used for the [JWP preview site](https://app-preview.jwplayer.com/) and includes a dialog to switch between app configs. Will allow any app-config to be loaded and does not have a default config.
* **preview** - used for github PR previews. Behaves like a hybrid between dev and demo.
* **jwdev** - this mode is for running code on JW's internal dev environment. It will only work for JW employees on the internal network.
- **dev** - used for developers to locally develop, test, and debug code. Has the most debug information, including a config selector to help developers quickly switch between app configs. Will allow any app config to be loaded.
- **test** - used when running unit and e2e tests. Should typically be run as a production build. Will only load a select list of test app configs.
- **prod** - default used when running `yarn build` to create compiled code for production hosting. You should make sure to update the prod .ini file to only allow app configs from your account.
- **demo** - used for the [JWP preview site](https://app-preview.jwplayer.com/) and includes a dialog to switch between app configs. Will allow any app-config to be loaded and does not have a default config.
- **preview** - used for github PR previews. Behaves like a hybrid between dev and demo.
- **jwdev** - this mode is for running code on JW's internal dev environment. It will only work for JW employees on the internal network.

## Env Variables

Expand All @@ -81,11 +81,11 @@ These values are then defacto constants, which means code optimizations can remo
For non-sensitive values, you can add them directly to the appropriate .env file for each mode.

For sensitive values, if building with github actions we recommend using [github secrets](https://docs.github.com/en/actions/security-guides/encrypted-secrets) and setting them in the [build action environment](https://docs.github.com/en/actions/learn-github-actions/variables).
You can see an example of how these are used in our [Firebase Live / Preview actions.](https://github.com/jwplayer/ott-web-app/blob/develop/.github/workflows/firebase-live.yml#L14)
You can see an example of how these are used in our [Firebase Live / Preview actions.](https://github.com/jwplayer/ott-web-app/blob/develop/.github/workflows/firebase-live.yml#L14)

If building manually, you can create an .env.[mode].local file and add the values there. These files are git ignored which will prevent leaking your secrets to version control.
If building manually, you can create an .env.[mode].local file and add the values there. These files are git ignored which will prevent leaking your secrets to version control.

> Note: env variables must begin with the 'APP_' prefix or they are ignored by our vite configuration.
> Note: env variables must begin with the 'APP\_' prefix or they are ignored by our vite configuration.
### APP_DEFAULT_CONFIG_SOURCE

Expand Down Expand Up @@ -118,7 +118,7 @@ If you link directly to your JWP cloud player using the [APP_PLAYER_ID](#app_pla
It is recommended that this value be provided via a .env.local file or a github secret to avoid saving it in version control.

If you are using pre-compiled builds instead of building the code yourself, you can also set this value with the [playerLicenseKey ini setting](initialization-file.md#playerLicenseKey).
Keep in mind, if the [playerLicenseKey ini setting](initialization-file.md#playerLicenseKey) is provided, it will be used even if the `APP_PLAYER_LICENSE_KEY` environment variable is set.
Keep in mind, if the [playerLicenseKey ini setting](initialization-file.md#playerLicenseKey) is provided, it will be used even if the `APP_PLAYER_LICENSE_KEY` environment variable is set.

### APP_GITHUB_PUBLIC_BASE_URL

Expand Down
24 changes: 11 additions & 13 deletions docs/configuration.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,20 +9,19 @@ Which app config file the application uses is determined by the [ini file](initi

You can specify the default that the application starts with and also which config, if any, it will allow to be set using the [`app-config=<config source>` query param](#switching-between-app-configs).
The location is usually specified by the 8-character ID (i.e. `gnnuzabk`) of the App Config from your JWP account, in which case the file will be loaded from the JW Player App Config delivery endpoint (i.e. `https://cdn.jwplayer.com/apps/configs/gnnuzabk.json`).
You may also specify a relative or absolute URL.
You may also specify a relative or absolute URL.

### Switching between app configs

As mentioned above, if you have 1 or more additional allowed sources (see additionalAllowedConfigSources in [`initialization-file`](initialization-file.md)), you can switch between them by adding `app-config=<config source>` as a query parameter in the web app URL in your browser (i.e. `https://<your domain>/?app-config=gnnuzabk`.)
As mentioned above, if you have 1 or more additional allowed sources (see additionalAllowedConfigSources in [`initialization-file`](initialization-file.md)), you can switch between them by adding `app-config=<config source>` as a query parameter in the web app URL in your browser (i.e. `https://<your domain>/?app-config=gnnuzabk`).

The parameter is automatically evaluated, loaded, and stored in browser session storage and should remain part of the url as the user navigates around the site.

>*Note: Be aware that this mechanism only sets the config for the local machine, browser, and session that you are accessing the site with and it does not change the default hosted app for other users.*
> _Note: Be aware that this mechanism only sets the config for the local machine, browser, and session that you are accessing the site with and it does not change the default hosted app for other users._
Even sharing URL's should work as long as the query parameter of the desired config is part of the URL. However, once the query parameter is removed and the stored value in the session is released, the application will revert to loading the default config source.

>*Note: to clear the value from session storage and return to the default, you can navigate to the site with a blank query parameter value (i.e. `?app-config=`)*
> _Note: to clear the value from session storage and return to the default, you can navigate to the site with a blank query parameter value (i.e. `?app-config=`)_
## Available Configuration Parameters

Expand Down Expand Up @@ -107,10 +106,10 @@ Use the `content` array to define which and how content playlists should be disp
}, {
"contentId": "WXu7kuaW"
"type": "playlist"
}]
}]
}
```
```

---

Expand All @@ -122,7 +121,7 @@ The eight-character Playlists IDs from the JW Player dashboard. These IDs popula

**content[].type**

It is possible to use 'playlist', 'continue_watching' or 'favorites' as a type. With this, you can change the position of the shelves and turn on/off extra `continue_watching` and `favorites` shelves.
It is possible to use 'playlist', 'continue_watching' or 'favorites' as a type. With this, you can change the position of the shelves and turn on/off extra `continue_watching` and `favorites` shelves.

If you want to include `favorites` / `continue_watching` shelf, you should also add a corresponding playlist with `watchlist` type to features section (`features.favoritesList` and `features.continueWatchingList`). To exclude the shelves, remove a corresponding array item and a playlist in `features`.

Expand Down Expand Up @@ -184,7 +183,7 @@ Specify the color in hexadecimal format. For example, if you want bright yellow,

**styling.headerBackground** (optional)

Use this parameter to change the background color of the header. By default, the header is transparent. Recommended is to use a HEX color (e.g. `#1a1a1a`) so that the contrast color of the buttons and links can be calculated.
Use this parameter to change the background color of the header. By default, the header is transparent. Recommended is to use a HEX color (e.g. `#1a1a1a`) so that the contrast color of the buttons and links can be calculated.

---

Expand All @@ -208,7 +207,6 @@ Use the `features` object to define extra properties for your app.

---


**features.recommendationsPlaylist** (optional)

The eight-character Playlist ID of the Recommendations playlist that you want to use to populate the "Related Videos" shelf in your site. Note that Recommendations requires a JW Player Enterprise license. For more information about Recommendations playlists, see [this JW Player Support article](https://support.jwplayer.com/customer/portal/articles/2191721-jw-recommendations).
Expand All @@ -229,7 +227,7 @@ The eight-character Playlist ID of the Watchlist playlist that you want to use t

**features.continueWatchingList** (optional)

The eight-character Playlist ID of the Watchlist playlist that you want to use to populate the "Continue Watching" shelf in your site.
The eight-character Playlist ID of the Watchlist playlist that you want to use to populate the "Continue Watching" shelf in your site.

---

Expand Down Expand Up @@ -301,14 +299,14 @@ This setting determines which Cleeng mediastore URL is used. If false or not def

**integrations.cleeng.monthlyOffer** (optional)

If Cleeng is enabled, and you want to show the Payments and Subscription functionality, you need to include at least 1 offer ID (either this or the yearly offer property.) The application uses this ID to map to an offer that you've configured in your Cleeng environment under Offers to represent your monthly subscription. Note that the only the data used from the Cleeng offer is the price, the free days, and the free period and the app does not verify if the offer length is actually monthly. If no monthly or yearly offer is configured, the Payments section will not be shown.
If Cleeng is enabled, and you want to show the Payments and Subscription functionality, you need to include at least 1 offer ID (either this or the yearly offer property.) The application uses this ID to map to an offer that you've configured in your Cleeng environment under Offers to represent your monthly subscription. Note that the only the data used from the Cleeng offer is the price, the free days, and the free period and the app does not verify if the offer length is actually monthly. If no monthly or yearly offer is configured, the Payments section will not be shown.

---

**integrations.cleeng.yearlyOffer** (optional)

If Cleeng is enabled, and you want to show the Payments and Subscription functionality, you need to include at least 1
offer ID (either this or the monthly offer property.) The application uses this ID to map to an offer that you've
offer ID (either this or the monthly offer property.) The application uses this ID to map to an offer that you've
configured in your Cleeng environment under Offers to represent your yearly subscription. Note that the only the data
used from the Cleeng offer is the price, the free days, and the free period and the app does not verify if the offer
length is actually yearly. If no monthly or yearly offer is configured, the Payments section will not be shown.
Expand Down
Loading

0 comments on commit 8975649

Please sign in to comment.