Feat: Update config to support new schema (#71)

* feat(project): update config to support new schema - New config schema changes - Existing configs modifications (main config + configs we use for e2e) - Validations rules change - Continue Watching is now shown if we add it to content array property with a special type - Showcases notions changes to app / app-config - Add new 'type' property to PlaylistContainer to deal with 'continue_watching' and 'favorites' - Cleeng getter added to config store - Add custom shelf title This commit breaks backward compatibility. Old config versions are not supported anymore Co-authored-by: “Anton <“alantukh@“jwplayer.com>
jwplayer · Jun 3, 2022 · f8cf652 · f8cf652
1 parent 24900dc
commit f8cf652
Show file tree

Hide file tree

Showing 38 changed files with 556 additions and 400 deletions.
diff --git a/docs/configuration.md b/docs/configuration.md
@@ -6,7 +6,7 @@ JW OTT Webapp uses a JSON configuration file to store all configuration paramete
 
 In the `public/index.html` file, a small script is added to allow switching configurations based on a URL search parameter.
 
-You can append `?c=showcase-id` to the URL and use a different configuration. However, this may not be desirable for production builds since there will only be a single configuration.
+You can append `?c=config-id` to the URL and use a different configuration. However, this may not be desirable for production builds since there will only be a single configuration.
 
 To disable the dynamic configuration mechanism, remove the following part from the `public/index.html` file.
 
@@ -15,10 +15,10 @@ To disable the dynamic configuration mechanism, remove the following part from t
   var urlSearchParams = new URLSearchParams(window.location.search);
   var configId =
         urlSearchParams.get('c') ||
-        window.localStorage.getItem('jwshowcase.config');
+        window.localStorage.getItem('jwapp.config');
 
   if (configId) {
-    window.localStorage.setItem('jwshowcase.config', configId);
+    window.localStorage.setItem('jwapp.config', configId);
 
     window.configLocation =
       'https://' + configId + '.jwpapp.com/config.json';
@@ -53,7 +53,7 @@ Player key of your custom created player in the [JW Player dashboard](https://da
 
 **siteName**
 
-Title of your website. JW OTT Webapp will automatically update the `<title>` tag of your site to this value when the site loads.
+Title of your website. JW OTT Webapp will automatically update the `<title>` tag of your site to this value when the site loads. If **siteName** is not set, the default name `My OTT Application` will be used.
 
 ---
 
@@ -63,12 +63,6 @@ Short description of your website. JW OTT Webapp will automatically update the `
 
 ---
 
-**footerText** (optional)
-
-Text that will be placed in the footer of the site. Markdown links are supported.
-
----
-
 **analyticsToken** (optional)
 
 Analytics token for the JW Player's OTT Analytics feature.
@@ -81,18 +75,6 @@ Location of a JPG, PNG or GIF image to be used as the logo in the header (e.g. *
 
 ---
 
-**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).
-
----
-
-**searchPlaylist** (optional)
-
-The eight-character Playlist ID of the Search playlist that you want to use to enable search on your site. Note that Search requires a JW Player Enterprise license. For more information about Search playlists, see [this JW Player Support article](https://support.jwplayer.com/customer/portal/articles/2383600-building-managing-data-driven-feeds).
-
----
-
 **menu**
 
 Use the `menu` array to define the links that are visible in the header and menu on mobile devices.
@@ -101,11 +83,13 @@ Use the `menu` array to define the links that are visible in the header and menu
 {
   "menu": [{
     "label": "Movies",
-    "playlistId": "lrYLc95e",
+    "contentId": "lrYLc95e",
     "filterTags": "Action,Comedy,Drama"
+    "type": "playlist"
   }, {
     "label": "Series",
-    "playlistId": "lrYLc95e"
+    "contentId": "lrYLc95e"
+    "type": "playlist"
   }]
 }
 ```
@@ -118,7 +102,7 @@ The label is what the user sees in the header and sidebar.
 
 ---
 
-**menu[].playlistId**
+**menu[].contentId**
 
 The eight-character Playlists IDs from the JW Player dashboard. These IDs populate the grid when the user navigates to the given screen.
 
@@ -137,29 +121,36 @@ Use the `content` array to define which and how content playlists should be disp
 ```
 {
   content: [{
-    "playlistId": "lrYLc95e",
+    "contentId": "lrYLc95e",
     "featured": true
+    "type": "playlist"
   }, {
-    "playlistId": "continue-watching",
+    "type": "favorites",
+    "title": "Best videos",
     "enableText": false
   }, {
-    "playlistId": "WXu7kuaW"
+    "contentId": "WXu7kuaW"
+    "type": "playlist"
   }]  
 }
 
 ```    
 
 ---
 
-**content[].playlistId**
+**content[].contentId**
+
+The eight-character Playlists IDs from the JW Player dashboard. These IDs populate the video "shelves" in your site. **contentId** is not required if you use `continue_watching` or `favorites` **type**.
+
+---
 
-The eight-character Playlists IDs from the JW Player dashboard. These IDs populate the video "shelves" in your site.
+**content[].type**
 
-It is also possible to use 'continue-watching' or 'saved-videos' as playlistId. With this, you can change the position and look of these shelves. Example:
+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` shelf (just include / exclude it in / from the array). Example:
 
 ```
 {
-  "playlistId": "continue-watching",
+  "type": "continue_watching",
   "enableText": false
 }
 ```
@@ -172,80 +163,158 @@ Controls whether or not title and description text overlays appear on the poster
 
 ---
 
+**content[].title** (optional)
+
+You can change the playlist title and choose a custom one. It is also possible to do for `continue_watching` and `favorites` types.
+
+---
+
 **content[].featured** (optional)
 
 Controls if the playlist should be used as a large "Featured" shelf on your JW OTT Webapp home page.
 
 ---
 
-**options.backgroundColor** (optional)
+**content[].backgroundColor** (optional)
 
-Override the theme's background color without needing to change CSS (e.g. #ff0000).
+You can change the background color of the shelf with the help of this property (e.g. #ff0000).
+
+---
+
+**styling**
+
+Use the `styling` object to define extra styles for your application.
+
+```
+{
+  "styling": {
+    "backgroundColor": null,
+    "highlightColor": null,
+    "headerBackground": null,
+    "dynamicBlur": true,
+    "posterFading": true,
+    "shelfTitles": true,
+    "footerText": "Blender Foundation"
+}
+```
 
 ---
 
-**options.enableContinueWatching** (optional)
+**styling.backgroundColor** (optional)
 
-Controls whether or not users see the "Continue Watching" shelf in the app and top-level menu. To display Continue Watching, set to "true." To hide it, set to "false."
+Override the theme's background color without needing to change CSS (e.g. #ff0000).
 
 ---
 
-**options.highlightColor** (optional)
+**styling.highlightColor** (optional)
 
 Controls the color used for certain UI elements such as progress spinner, buttons, etc. The default is light red.
 
-Specify the color in hexadecimal format. For example, if you want bright yellow, set it to **"highlightColor": "#ffff00"**.
+Specify the color in hexadecimal format. For example, if you want bright yellow, set it to #ffff00
 
 ---
 
-**options.enableSharing** (optional)
+**styling.headerBackground** (optional)
 
-Set this parameter to `false` if you want to disable the "Share" button on the video and series detail screen.
+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. 
 
 ---
 
-**options.headerBackground** (optional)
+**styling.footerText** (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. 
+Text that will be placed in the footer of the site. Markdown links are supported.
 
 ---
 
-**options.dynamicBlur** (optional)
+**styling.dynamicBlur** (optional)
 
 Set this parameter to `true` if you want to enable the Dynamic Blur feature. The Dynamic Blur feature is a blurred image of the current item on the background of the screen. When a user hovers a card, the blurred image changes to the selected item.  
 
 ---
 
-**options.posterFading** (optional)
+**styling.posterFading** (optional)
 
 Set this parameter to `true` if you want to enable the Poster Fading feature. By default, a boxed preview is shown on the video and series detail page. With posterFading set to `true`, this image is placed on the background instead and fills a larger portion of the screen.
 
 
 ---
 
-**options.shelfTitles** (optional)
+**styling.shelfTitles** (optional)
 
 Set this parameter to `false` if you want to disable titles below the cards on the home, playlist and search screen.  
 
 ---
 
-**cleengId** (optional)
+**features**
+
+Use the `features` object to define extra properties for your app.
+
+```
+{
+  "features": {
+    "enableSharing": true,
+    "recommendationsPlaylist": "IHBjjkSN",
+    "searchPlaylist": "D4soEviP"
+}
+```
+
+---
+
+**features.enableSharing** (optional)
+
+Set this parameter to `false` if you want to disable the "Share" button on the video and series detail screen.
+
+---
+
+**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).
+
+---
+
+**features.searchPlaylist** (optional)
+
+The eight-character Playlist ID of the Search playlist that you want to use to enable search on your site. Note that Search requires a JW Player Enterprise license. For more information about Search playlists, see [this JW Player Support article](https://support.jwplayer.com/customer/portal/articles/2383600-building-managing-data-driven-feeds).
+
+---
+
+**integrations.cleeng**
+
+Use the `integrations.cleeng` object to to integrate with Cleeng.
+
+```
+{
+  "integrations": {
+    "cleeng": {
+      "id": "440058292",
+      "useSandbox": true,
+      "monthlyOffer": "S970187168_NL",
+      "yearlyOffer": "S467691538_NL"
+    }
+}
+```
+
+---
+
+**integrations.cleeng.id** (optional)
 
 The ID of your Cleeng ID environment if you would like to integrate with Cleeng as a backend for account, subscription, and checkout functionality. Omit this key in your config to disable Cleeng and the related functionality. See [docs/backend-services](backend-services.md) for more details.
 
 ---
 
-**cleengSandbox** (optional)
+**integrations.cleeng.useSandbox** (optional)
 
 This setting determines which Cleeng mediastore URL is used. If false or not defined, the Cleeng production URL is used (https://mediastore.cleeng.com). If true, the Cleeng sandbox URL is used (https://mediastore-sandbox.cleeng.com). Note, this setting is ignored if Cleeng is not enabled (i.e. there is not Cleeng ID defined)
 
 ---
 
-**json.cleengMonthlyOffer** (optional)
+**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.
 
-**json.cleengYearlyOffer** (optional)
+---
+
+**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

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "jw-ott-webapp",
-  "version": "1.1.1",
+  "version": "2.0.0",
   "main": "index.js",
   "repository": "https://github.com/jwplayer/ott-web-app.git",
   "author": "Robin van Zanten",