feat(epg): add epg component and live channel and schedule support

Features:
* Add a page with an EPG viewer, so that users can see which programs and channels are currently live
* Ability to click on a live program on the EPG view to navigate to the live stream, so that users watch the program live
* Ability to click on a past program on the EPG view and navigate to a detail page for this program, so that users can start watching past programs (DVR)
* Ability to start the current program from the beginning, so users watch the full program even while it already started

Known issues:
* The EPG view only shows the current day (00:00 until 00:00 the next day.) This is because the Planby module is developed for single day schedules.
* The EPG view needs a solid background for it to work visually
* The EPG view doesn’t contain custom text for failed or empty schedules
* The EPG view can show programs as “live” too long. This is caused by Planby updating the live state every 2 minutes which is longer than necessary
* The EPG service SHOULD work with the Vualto VIS Chapterpoints API, but due to CORS restrictions, it currently doesn't work. When CORS headers are added to the API, it should work immediately
* The “Watch from start” button doesn't work 100% of the time and plays the stream at the live position instead. This is being investigate with the Player team from JW Player

.commitlintrc.js

@@ -25,6 +25,7 @@ module.exports = {
         'signing',
         'entitlement',
         'config',
+        'epg',
       ],
     ],
   },

.eslintrc.js

@@ -44,6 +44,8 @@ module.exports = {
     // Assignments in function returns is confusing and could lead to unwanted side-effects
     'no-return-assign': ['error', 'always'],
 
+    curly: ['error', 'multi-line'],
+
     // Strict import ordering
     'import/order': [
       'warn',

.github/workflows/firebase-preview.yml

@@ -2,7 +2,7 @@ name: 'Firebase Preview'
 
 on:
   pull_request:
-    branches: ['develop']
+    branches: [ 'develop', 'feat/*', 'feature/*' ]
 
 jobs:
   build_and_preview:

README.md

@@ -42,6 +42,7 @@ To see an example of JW OTT Webapp in action, see [https://jw-ott-webapp.netlify
 - A "Favorites" feature for users to save videos for watching later. A separate list for "Continue Watching" is also kept so users can resume watching videos from where they left off. The lists are per-browser at this time (i.e., lists do not sync across user's browsers or devices). The "Continue Watching" list can be disabled in your JW OTT Webapp's `config.json` file.
 - A grid view for a particular playlist of videos, with the ability to deep-link to the playlist through a static URL.
 - Social sharing options using the device native sharing dialog.
+- 24x7 live channel(s) screen with Electronic Programming Guide (EPG) view.
 
 ## Unsupported Feature(s)
 

docs/features/live-channels-with-epg.md

@@ -0,0 +1,79 @@
+# 24x7 live channels with EPG
+
+If you want to list one or more 24x7 livestream channels, it is possible to enable a custom page with an EPG view. Of
+course, you would need to have EPG data available for this to work.
+
+<img title="" src="img/live-channels-epg.png" alt="Series" width="580">
+
+Below are the steps to enable the live channels page in your OTT Webapp.
+
+## Create a Live Channels playlist
+
+Navigate to the JW Dashboard and create a new MANUAL playlist. You can give any name to this playlist. This is useful if
+you want to add this playlist as a shelf on the homepage.
+
+Note down the playlist ID for future reference.
+
+Add all live channel media items to the playlist. The order you put them in is respected, so order the media items
+accordingly.
+
+Go to the "Custom Parameters" section and add a new parameter with name "contentType" and value "Live".
+
+## Update Live Channel Media Items
+
+This step is needed for all live channel media items you've added to the playlist in the previous step.
+
+Add the following Custom Parameters to the media item:
+
+- **contentType**: LiveChannel
+- **liveChannelsId**: playlist id noted down in previous step
+- **scheduleUrl**: URL to your EPG data
+
+## Add a Live menu item
+
+If you've completed the previous steps, you should be able to add a menu item using the noted down playlist ID.
+
+In your OTT config file, add a new item in the `menu` section:
+
+```json
+{
+  "menu": [
+    {
+      "label": "Live",
+      "contentId": "LIVE_PLAYLIST_ID",
+      "type": "playlist"
+    }
+  ]
+}
+```
+
+> Replace `LIVE_PLAYLIST_ID` with the Live Channels playlist ID created earlier.
+
+Now when you open your OTT Webapp, you should see a new menu item in the header or drawer on mobile devices. After
+clicking on the "Live" menu item, the Live Channels page with EPG view should be visible.
+
+## EPG Data structure
+
+The EPG view expects a certain data structure in order to work. This is based on the VIS Chapterpoints API so that it
+integrates seamlessly.
+
+```json
+[
+  {
+    "id": "00990617-c229-4d1e-b341-7fe100b36b3c",
+    "title": "Peaky Blinders",
+    "startTime": "2022-07-15T00:05:00Z",
+    "endTime": "2022-07-15T00:55:00Z",
+    "chapterPointCustomProperties": [
+      {
+        "key": "description",
+        "value": "A gangster family epic set in 1900s England, centering on a gang who sew razor blades in the peaks of their caps, and their fierce boss Tommy Shelby."
+      },
+      {
+        "key": "image",
+        "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/wiE9doxiLwq3WCGamDIOb2PqBqc.jpg"
+      }
+    ]
+  }
+]
+```

package.json

@@ -17,7 +17,7 @@
     "test-watch": "TZ=UTC vitest",
     "test-coverage": "TZ=UTC vitest run --coverage",
     "test-commit": "TZ=UTC vitest run --changed HEAD~1 --coverage",
-    "i18next": "i18next src/{components,containers,screens}/**/{**/,/}*.tsx && node ./scripts/i18next/generate.js",
+    "i18next": "i18next src/{components,containers,screens,services,stores}/**/{**/,/}*.{ts,tsx} && node ./scripts/i18next/generate.js",
     "format": "run-s -c format:*",
     "format:eslint": "eslint \"{**/*,*}.{js,ts,jsx,tsx}\" --fix",
     "format:prettier": "prettier --write \"{**/*,*}.{js,ts,jsx,tsx}\"",
@@ -40,6 +40,7 @@
   "dependencies": {
     "allure-commandline": "^2.17.2",
     "classnames": "^2.3.1",
+    "date-fns": "^2.28.0",
     "dompurify": "^2.3.8",
     "history": "^4.10.1",
     "i18next": "^20.3.1",
@@ -48,6 +49,7 @@
     "lodash.merge": "^4.6.2",
     "memoize-one": "^5.2.1",
     "npm-run-all": "^4.1.5",
+    "planby": "^0.3.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-helmet": "^6.1.0",
@@ -65,6 +67,7 @@
     "@commitlint/config-conventional": "^12.1.1",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^11.2.6",
+    "@testing-library/react-hooks": "^8.0.1",
     "@types/dompurify": "^2.3.3",
     "@types/jwplayer": "^8.2.7",
     "@types/lodash.merge": "^4.6.6",
@@ -103,15 +106,17 @@
     "stylelint-declaration-strict-value": "^1.7.12",
     "stylelint-order": "^4.1.0",
     "stylelint-scss": "^3.20.0",
+    "timezone-mock": "^1.3.4",
     "ts-node": "^10.7.0",
     "typescript": "^4.3.4",
-    "vite": "^2.9.0",
+    "vi-fetch": "^0.8.0",
+    "vite": "^3.0.4",
     "vite-plugin-eslint": "^1.3.0",
     "vite-plugin-html": "^3.2.0",
     "vite-plugin-pwa": "^0.11.13",
     "vite-plugin-static-copy": "^0.4.4",
     "vite-plugin-stylelint": "^2.1.0",
-    "vitest": "^0.10.0",
+    "vitest": "^0.19.1",
     "workbox-build": "^6.5.2",
     "workbox-window": "^6.5.2"
   },
@@ -127,4 +132,4 @@
     "glob-parent": "^5.1.2",
     "codeceptjs/**/ansi-regex": "^4.1.1"
   }
-}
+}

public/config.json

@@ -26,6 +26,11 @@
       "enableText": true,
       "type": "playlist",
       "contentId": "xQaFzykq"
+    },
+    {
+      "enableText": true,
+      "type": "playlist",
+      "contentId": "fWpLtzVh"
     }
   ],
   "menu": [
@@ -40,6 +45,11 @@
       "contentId": "xQaFzykq",
       "type": "playlist",
       "filterTags": "Beginner,Advanced"
+    },
+    {
+      "label": "Live",
+      "contentId": "fWpLtzVh",
+      "type": "playlist"
     }
   ],
   "features": {