docs(project): update docs for workspaces

README.md

@@ -34,8 +34,8 @@ The JW OTT Webapp is an open-source, dynamically generated video website built a
 - [Configure JW OTT Webapp](./docs/configuration.md)
 - [Configure Translations](./docs/translations.md)
 - [Contributing Guidelines](CONTRIBUTING.md)
-- [Frameworks, SDKs and Libraries](./docs/frameworks.md)
-- [Backend Services](./docs/backend-services.md)
+- [Frameworks, SDKs and Libraries](./platforms/web/docs/frameworks.md)
+- [Backend Services](./packages/common/docs/backend-services.md)
 - [Developer Guidelines](./docs/developer-guidelines.md)
 - [Workspaces](./docs/workspaces.md)
 
@@ -60,12 +60,6 @@ The JW OTT Webapp is an open-source, dynamically generated video website built a
 
 - Self-hosted JW Players
 
-## Getting started
-
-- Clone this repository
-- Run `yarn` to install dependencies
-- Run `yarn start`
-
 ## Support and Bug Reporting
 
 To report bugs and feature requests, or request help using JW OTT Webapp, use this repository's [Issues](https://github.com/jwplayer/ott-web-app/issues) page.

docs/configuration.md

@@ -1,27 +1,9 @@
 # Configuration
 
-The JW OTT Webapp is designed to consume a json configuration file served by the [JWP Delivery API](https://docs.jwplayer.com/platform/reference/get_apps-configs-config-id-json).
+The JW OTT Webapp is designed to consume a JSON configuration file served by the [JWP Delivery API](https://docs.jwplayer.com/platform/reference/get_apps-configs-config-id-json).
 The easiest way to maintain configuration files is to use the 'Apps' section in your [JWP Dashboard account](https://dashboard.jwplayer.com/).
 
-## Configuration File Source
-
-Which app config file the application uses is determined by the [ini file](initialization-file.md).
-
-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.
-
-### 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`).
-
-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._
-
-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=`)_
+> See the [web configuration documentation](../platforms/web/docs/web-configuration.md) for configuring the OTT Web App. 
 
 ## Available Configuration Parameters
 

docs/content-types.md

@@ -4,7 +4,7 @@ In order to map data coming from the JWP delivery pipeline to the correct screen
 we use the concept of 'content types'.
 Basically, a content type is simply a custom parameter named 'contentType' on a media item with a value defining which type the media is (movie, trailer, series, etc.)
 
-In the app, content types often map to specific screens (see [screenMapping.ts](../platforms/web/src/screenMapping.ts) and [MediaScreenRouter.tsx](src/pages/ScreenRouting/MediaScreenRouter.tsx).)
+In the app, content types often map to specific screens (see [screenMapping.ts](../platforms/web/src/screenMapping.ts) and [MediaScreenRouter.tsx](../packages/ui-react/src/pages/ScreenRouting/MediaScreenRouter.tsx).)
 Each content type screen often expects different metadata attached to the media item's custom parameters.
 
 # Using content types in the JWP dashboard
@@ -21,29 +21,29 @@ In order to quickly upload the content types, you can use the yarn script includ
 
 `yarn load-content-types --site-id=<site id>`
 
-By default, the script will load the content types that the vanilla web app expects found in [content-types.json](scripts/content-types/content-types.json).
-You can modify this file in your fork of the web app code or optionally specify another file to load by adding a `--source-file=<file path>` param to the yarn script call. 
+By default, the script will load the content types that the vanilla web app expects found in [content-types.json](../scripts/content-types/content-types.json).
+You can modify this file in your fork of the web app code or optionally specify another file to load by adding a `--source-file=<file path>` param to the yarn script call.
 
 ### Content type upload file definition
 
 The upload file should be a json property with the schemas defined as an array on the `schemas` property on the root object.
-Please refer to [content-types.json](scripts/content-types/content-types.json) and the JWP documentation for the schema format.
+Please refer to [content-types.json](../scripts/content-types/content-types.json) and the JWP documentation for the schema format.
 
 To avoid unnecessary duplication the file also allows some basic abstraction.
 You can define reused fields and sections as key-value entries on the `fields` and `sections` properties respectively.
 Then you can include these reusable entities by putting their string key into schemas the same way that you would for inline fields or sections.
-There are many examples in the included [content-types.json](scripts/content-types/content-types.json)
+There are many examples in the included [content-types.json](../scripts/content-types/content-types.json)
 
 > Note: Although the upload file allows you to define reused fields and sections, when these are uploaded they become distinct copies for each instance in the schemas where they are used.
 > That means that changing fields and sections via the api after they are uploaded must be done individually for each schema.
-> Alternatively, you can re-upload and overwrite the existing schemas, but use caution because you will lose any other manual changes you have made.  
+> Alternatively, you can re-upload and overwrite the existing schemas, but use caution because you will lose any other manual changes you have made.
 
 # Content Type Data Structure
 
 Content types do not change the underlying structure of data returned from the JWP delivery API. They are purely a convention on top of custom params to make the data entry on the JW dashboard easier and less error-prone. Custom params will still be returned as an array of string key-value pairs.
 
 ## Boolean custom params
 
-Because custom params are always strings and any non-empty string in javascript converts to truthy, we have by convention decided on a few string values to consider strictly true or false. You can find these values in code: https://github.com/jwplayer/ott-web-app/blob/a95c3a3c9d0c5bc7c98b194928261ffc6fc4286f/src/utils/common.ts#L88-L90
+Because custom params are always strings and any non-empty string in javascript converts to truthy, we have by convention decided on a few string values to consider strictly true or false. You can find these values in code: https://github.com/jwplayer/ott-web-app/blob/a95c3a3c9d0c5bc7c98b194928261ffc6fc4286f/src/utils/common.ts#L88
 
 Be careful to use the right version considering the fallback when the value is not matched. For example, if you want the property to only be true when matched and fallback to false, use IsTruthy.

docs/developer-guidelines.md

@@ -1,12 +1,12 @@
 ## When working on this project, keep these in mind:
 
-- Use yarn.
-- Run the server through `yarn start` (in the platforms/web directory)
-- Run the e2e tests through `yarn codecept:mobile` and `yarn codecept:desktop` (in the platforms/web directory)
-- Run the tests through `yarn test`
+- Use `yarn`
+- Run all unit tests through `yarn test`
 - Format the code through `yarn format` (or automatically do it via git hooks)
 - Lint through `yarn lint` (eslint, prettier, stylelint and tsc checks)
 - Run `yarn i18next` to extract all translations keys from source-code
+- Run `yarn depcheck` to validating dependency usages for all packages
+- Run `npx syncpack lint` for validating dependency issues for all workspaces
 - The JW organization requires personal access tokens for all of their repositories. In order to create a branch or pull request you'll need to [Generate a Personal Access Token](https://github.com/settings/tokens) and then [store it in your git config](https://stackoverflow.com/questions/46645843/where-to-store-my-git-personal-access-token/67360592). (For token permissions, `repo` should be sufficient).
 
 ## Versioning and Changelog
@@ -60,7 +60,7 @@ Please use one of the following:
 
 The scope must specify the location of the commit change. For example `home` or `search`.
 
-The allowed scopes can be found in the [commitlint config file](../.commitlintrc.js).
+The allowed scopes can be found in the [../.commitlintrc.js](../.commitlintrc.js) file.
 
 ### Subject
 
@@ -87,7 +87,7 @@ The footer should contain any information about **Breaking Changes** and is also
   /_images        - Images used in the docs and README
   /features       - Docs coverage specific product use cases
 /node_modules*    - Yarn generated dependencies
-/packages         - Re-usable code for platfroms (registered in workspace)
+/packages         - Re-usable code for platforms (registered in workspace)
 /platforms        - Platform entry points (registered in workspace)
 /scripts          - Dev helper scripts for i18n, deployment, etc.
 /CHANGELOG.md     - Auto-generated changelog

docs/features/related-videos.md

@@ -19,7 +19,7 @@ GET playlists/fuD6TWcf?related_media_id=dwEE1oBP
   "description":"",
   "kind":"FEED",
   "feedid":"fuD6TWcf",
-  "playlist":[
+  "playlist": [
     {
       "title":"Elephants Dream",
       "mediaid":"8pN9r7vd",
@@ -33,9 +33,8 @@ GET playlists/fuD6TWcf?related_media_id=dwEE1oBP
       "rating":"CC-BY",
       "genre":"Drama",
       "trailerId":"EorcUZCU"
-    },
-    {}
-   ]
+    }
+  ]
 }
 ```
 

docs/translations.md

@@ -6,7 +6,7 @@ Before changing or adding languages, read the sections below to understand the m
 
 ## Translation status
 
-Here is a list of all supported translations included in the OTT Web App. The status indicates if the translations are 
+Here is a list of all supported translations included in the OTT Web App. The status indicates if the translations are
 generated using Google Translate/ChatGTP or validated by a person.
 
 | Language | Code | Status    | Validated by             |
@@ -17,39 +17,42 @@ generated using Google Translate/ChatGTP or validated by a person.
 
 ## Translation files
 
-The web app uses the [react-i18next](https://react.i18next.com/) library for displaying translated strings. Translation 
-files are defined in JSON format and can be found in the `./public/locales` directory. Translation files are separated 
-by namespace.
+The web app uses the [react-i18next](https://react.i18next.com/) library for displaying translated strings. Translation
+files are defined in JSON format and can be found in the `./platforms/web/public/locales` directory. Translation files
+are separated by namespace.
 
-The structure of all translation files is generated automatically using the `yarn i18next` command. This script 
-extracts all namespaces and translation keys from the source code. Refrain from editing the structure (e.g., adding or 
+> The translation files will be moved to the `./packages/i18n` package in the near future.
+
+The structure of all translation files is generated automatically using the `yarn i18next` command. This script
+extracts all namespaces and translation keys from the source code. Refrain from editing the structure (e.g., adding or
 removing keys) of translation files manually because this is prone to mistakes.
 
-To add a new language, create a new subdirectory in the `./public/locales` directory using the language code or 
-LCID string if the language is region specific. For example, using the `fr` language code will be available for all 
-French-speaking regions (e.g., Belgium, Canada, France, Luxembourg, etc.). But if you have different translations for 
-one or more French-speaking regions, use the LCID string (e.g., `fr-be`, `fr-ca`, `fr-lu`, or `fr-fr`) instead of the 
-language code. The downside of this, when having multiple French-speaking regions, a lot of translations will be 
+To add a new language, create a new subdirectory in the `./platforms/web/public/locales` directory using the language
+code or LCID string if the language is region specific. For example, using the `fr` language code will be available for
+all French-speaking regions (e.g., Belgium, Canada, France, Luxembourg, etc.). But if you have different translations
+for one or more French-speaking regions, use the LCID string (e.g., `fr-be`, `fr-ca`, `fr-lu`, or `fr-fr`) instead of
+the language code. The downside of this, when having multiple French-speaking regions, a lot of translations will be
 duplicate.
 
-After adding the subdirectory, run the `yarn i18next` command to generate all the added 
-language(s) translation files. You can now translate each key for the added language(s). 
+After adding the subdirectory, run the `yarn i18next` command to generate all the added
+language(s) translation files. You can now translate each key for the added language(s).
 
 ## Defined languages
 
-When a language is added to the `./public/locales` folder, the OTT Web App doesn't automatically recognize this. 
-Instead, the language must first be added to the "defined languages" list. This is for two reasons:
+When a language is added to the `./platforms/web/public/locales` folder, the OTT Web App doesn't automatically recognize
+this. Instead, the language must first be added to the "defined languages" list. This is for two reasons:
 
 - As OTT Web App we want to be able to include many languages without enabling them all by default
 - For each language, the display name must be defined, which is shown in the language selection menu
 
-Navigate to the [../platforms/web/src/i18n/config.ts](../platforms/web/src/i18n/config.ts) file and find the `DEFINED_LANGUAGES` constant. Each entry specifies the 
-language code (or LCID string) and display name. 
+Navigate to the `./platforms/web/src/i18n/config.ts` file and find the `DEFINED_LANGUAGES` constant. Each entry 
+specifies the language code (or LCID string) and display name.
 
-> If you have added multiple languages using the LCID string identifier, each much be added to the list of defined 
+> If you have added multiple languages using the LCID string identifier, each much be added to the list of defined
 > languages and ensure to include the region in the `displayName`. For example: `Français Canadien`
 
-The `displayName` is always translated for the language it is written for. This ensures that when the current language is 
+The `displayName` is always translated for the language it is written for. This ensures that when the current language
+is
 wrong for the current user, he/her will still be able to recognize the language.
 
 ```ts
@@ -65,38 +68,38 @@ export const DEFINED_LANGUAGES: LanguageDefinition[] = [
 ];
 ```
 
-> You won't have to delete entries with languages that are not supported for your OTT Web App. Instead, don't enable 
-> the language in the app (see the next step). 
+> You won't have to delete entries with languages that are not supported for your OTT Web App. Instead, don't enable
+> the language in the app (see the next step).
 
 ## Enabled languages
 
-Languages can be enabled or disabled by updating the `APP_ENABLED_LANGUAGES` environment variable. This can be changed 
-in the `.env` file or by adding the environment variable to the start/build commands.
+Languages can be enabled or disabled by updating the `APP_ENABLED_LANGUAGES` environment variable. This can be changed
+in the `/platforms/web/.env` file or by adding the environment variable to the start/build commands.
 
-This disables the multilingual feature by only supporting the English language. The language selection icon will be 
+This disables the multilingual feature by only supporting the English language. The language selection icon will be
 hidden in the header.
 
 ```shell
 $ APP_ENABLED_LANGUAGES=en yarn build 
 ```
 
-This builds an OTT Web App supporting the English and French languages. The language selection icon will be shown in 
-the header. 
+This builds an OTT Web App supporting the English and French languages. The language selection icon will be shown in
+the header.
 
 ```shell
 $ APP_ENABLED_LANGUAGES=en,fr yarn build 
 ```
 
 ## Default language
 
-OTT Web App will try to predict the user language by looking at the Browser language. When the language can't be 
-predicted, or there is no support for the Browser language, the default language will be used. By default, this is set 
+OTT Web App will try to predict the user language by looking at the Browser language. When the language can't be
+predicted, or there is no support for the Browser language, the default language will be used. By default, this is set
 to `en`.
 
-The default language can be changed in the `.env` file as well or by adding the `APP_DEFAULT_LANGUAGE` environment 
-variable to the start/build commands.
+The default language can be changed in the `/platforms/web/.env` file as well or by adding the `APP_DEFAULT_LANGUAGE` 
+environment variable to the start/build commands.
 
-Build an OTT Web App with English and French translations, but default to French when the language couldn't be 
+Build an OTT Web App with English and French translations, but default to French when the language couldn't be
 predicted.
 
 ```shell