Feat / live channels screen with EPG view

.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": {