diff --git a/.commitlintrc.js b/.commitlintrc.js index eaa403cff..92c0de92f 100644 --- a/.commitlintrc.js +++ b/.commitlintrc.js @@ -25,6 +25,7 @@ module.exports = { 'signing', 'entitlement', 'config', + 'epg', ], ], }, diff --git a/.eslintrc.js b/.eslintrc.js index a60b4ba7d..7d3a9695e 100644 --- a/.eslintrc.js +++ b/.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', diff --git a/.github/workflows/firebase-preview.yml b/.github/workflows/firebase-preview.yml index 11337c712..49643f526 100644 --- a/.github/workflows/firebase-preview.yml +++ b/.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: diff --git a/README.md b/README.md index 2ecadf921..1f82e9f9c 100644 --- a/README.md +++ b/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) diff --git a/docs/features/img/live-channels-epg.png b/docs/features/img/live-channels-epg.png new file mode 100644 index 000000000..530e87637 Binary files /dev/null and b/docs/features/img/live-channels-epg.png differ diff --git a/docs/features/live-channels-with-epg.md b/docs/features/live-channels-with-epg.md new file mode 100644 index 000000000..c1924781c --- /dev/null +++ b/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. + +Series + +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" + } + ] + } +] +``` diff --git a/package.json b/package.json index 489c18e42..cb10e8eef 100644 --- a/package.json +++ b/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" } -} \ No newline at end of file +} diff --git a/public/config.json b/public/config.json index aade89079..85ef5ea36 100644 --- a/public/config.json +++ b/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": { diff --git a/public/epg/channel1.json b/public/epg/channel1.json new file mode 100644 index 000000000..6abf0f988 --- /dev/null +++ b/public/epg/channel1.json @@ -0,0 +1,530 @@ +[ + { + "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" + } + ] + }, + { + "id": "45a70c27-1681-4da3-ad3b-73fa7855ee6a", + "title": "Friends", + "startTime": "2022-07-15T00:55:00Z", + "endTime": "2022-07-15T02:35:00Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "Follows the personal and professional lives of six twenty to thirty-something-year-old friends living in Manhattan." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/l0qVZIpXtIo7km9u5Yqh0nKPOr5.jpg" + } + ] + }, + { + "id": "d7846aa7-cd76-49eb-be7c-2e183a920d9e", + "title": "Malcolm in the Middle", + "startTime": "2022-07-15T02:35:00Z", + "endTime": "2022-07-15T03:30:00Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "A gifted young teen tries to survive life with his dimwitted, dysfunctional family." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/ysaA0BInz4071p3LKqAQnWKZCsK.jpg" + } + ] + }, + { + "id": "03c2932e-8590-4ab1-bff5-8894558c34d1", + "title": "The Simpsons", + "startTime": "2022-07-15T03:30:00Z", + "endTime": "2022-07-15T04:15:00Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "The satiric adventures of a working-class family in the misfit city of Springfield." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/hpU2cHC9tk90hswCFEpf5AtbqoL.jpg" + } + ] + }, + { + "id": "317cfd01-85db-4a2b-a0c8-af1d5ca52686", + "title": "That '70s Show", + "startTime": "2022-07-15T04:15:00Z", + "endTime": "2022-07-15T04:30:00Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "A comedy revolving around a group of teenage friends, their mishaps, and their coming of age, set in 1970s Wisconsin." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/3zRUiH8erHIgNUBTj05JT00HwsS.jpg" + } + ] + }, + { + "id": "449faed1-be35-4347-ba4a-39dc433bb1d3", + "title": "That '70s Show", + "startTime": "2022-07-15T04:30:00Z", + "endTime": "2022-07-15T05:10:00Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "A comedy revolving around a group of teenage friends, their mishaps, and their coming of age, set in 1970s Wisconsin." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/3zRUiH8erHIgNUBTj05JT00HwsS.jpg" + } + ] + }, + { + "id": "4430e87c-4491-4b93-ae16-5941474a3d1c", + "title": "How I Met Your Mother", + "startTime": "2022-07-15T05:10:00Z", + "endTime": "2022-07-15T05:35:00Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "A father recounts to his children - through a series of flashbacks - the journey he and his four best friends took leading up to him meeting their mother." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/gvEisYtZ0iBMjnO3zqFU2oM26oM.jpg" + } + ] + }, + { + "id": "481cfbd1-9d0b-413c-9379-38608d8f7fd0", + "title": "Malcolm in the Middle", + "startTime": "2022-07-15T05:35:00Z", + "endTime": "2022-07-15T06:00:00Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "A gifted young teen tries to survive life with his dimwitted, dysfunctional family." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/ysaA0BInz4071p3LKqAQnWKZCsK.jpg" + } + ] + }, + { + "id": "f7cae874-cb64-46ac-b1d7-05db47d88b22", + "title": "Euphoria", + "startTime": "2022-07-15T06:00:00Z", + "endTime": "2022-07-15T07:00:00Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "A look at life for a group of high school students as they grapple with issues of drugs, sex, and violence." + }, + { + "key": "image", + "value": "https://images.fanart.tv/fanart/euphoria-2019-5ec8c62aa702d.jpg" + } + ] + }, + { + "id": "a2f80690-86e6-46e7-8a78-b243d5c8237e", + "title": "The Flash", + "startTime": "2022-07-15T07:00:00Z", + "endTime": "2022-07-15T07:40:00Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "After being struck by lightning, Barry Allen wakes up from his coma to discover he's been given the power of super speed, becoming the Flash, fighting crime in Central City." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/akuD37ySZGUkXR7LNb1oOHCboy8.jpg" + } + ] + }, + { + "id": "f99402a4-783d-4298-9ca2-d392db317927", + "title": "The Daily Show with Trevor Noah: Ears Edition", + "startTime": "2022-07-15T07:40:00Z", + "endTime": "2022-07-15T08:05:00Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "Listen to highlights and extended interviews in the \"Ears Edition\" of The Daily Show with Trevor Noah. From Comedy Central's Podcast Network." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/uyilhJ7MBLjiaQXboaEwe44Z0jA.jpg" + } + ] + }, + { + "id": "6ffd595b-3cdb-431b-b444-934a0e4f63dc", + "title": "The Flash", + "startTime": "2022-07-15T08:05:00Z", + "endTime": "2022-07-15T08:20:00Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "After being struck by lightning, Barry Allen wakes up from his coma to discover he's been given the power of super speed, becoming the Flash, fighting crime in Central City." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/akuD37ySZGUkXR7LNb1oOHCboy8.jpg" + } + ] + }, + { + "id": "78c4442f-2df0-4c75-8cf7-42d249f917b6", + "title": "Friends", + "startTime": "2022-07-15T08:20:00Z", + "endTime": "2022-07-15T08:45:00Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "Follows the personal and professional lives of six twenty to thirty-something-year-old friends living in Manhattan." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/l0qVZIpXtIo7km9u5Yqh0nKPOr5.jpg" + } + ] + }, + { + "id": "f54c4ead-8222-4ba3-99db-53d466df5fe3", + "title": "Malcolm in the Middle", + "startTime": "2022-07-15T08:45:00Z", + "endTime": "2022-07-15T09:15:00Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "A gifted young teen tries to survive life with his dimwitted, dysfunctional family." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/ysaA0BInz4071p3LKqAQnWKZCsK.jpg" + } + ] + }, + { + "id": "ab958a02-a41c-4567-ae66-b87b7d6a1a77", + "title": "The Book of Boba Fett", + "startTime": "2022-07-15T09:15:00Z", + "endTime": "2022-07-15T10:20:00Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "Bounty hunter Boba Fett & mercenary Fennec Shand navigate the underworld when they return to Tatooine to claim Jabba the Hutt's old turf." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/sjx6zjQI2dLGtEL0HGWsnq6UyLU.jpg" + } + ] + }, + { + "id": "5f69ebea-a10f-4acf-9529-a9247dcf8bdf", + "title": "Peaky Blinders", + "startTime": "2022-07-15T10:20:00Z", + "endTime": "2022-07-15T11:15: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" + } + ] + }, + { + "id": "742e3a99-4463-46cf-bef2-a6e2765334ab", + "title": "The Daily Show with Trevor Noah: Ears Edition", + "startTime": "2022-07-15T11:15:00Z", + "endTime": "2022-07-15T11:50:00Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "Listen to highlights and extended interviews in the \"Ears Edition\" of The Daily Show with Trevor Noah. From Comedy Central's Podcast Network." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/uyilhJ7MBLjiaQXboaEwe44Z0jA.jpg" + } + ] + }, + { + "id": "df272417-c45d-44e5-b928-4d3fb7ff3a76", + "title": "The Flash", + "startTime": "2022-07-15T11:50:00Z", + "endTime": "2022-07-15T13:45:00Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "After being struck by lightning, Barry Allen wakes up from his coma to discover he's been given the power of super speed, becoming the Flash, fighting crime in Central City." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/akuD37ySZGUkXR7LNb1oOHCboy8.jpg" + } + ] + }, + { + "id": "24cb5ed1-f5eb-4dc1-a64b-4396aa7d5ec9", + "title": "And Just Like That...", + "startTime": "2022-07-15T13:45:00Z", + "endTime": "2022-07-15T13:55:00Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "The series will follow Carrie, Miranda and Charlotte as they navigate the journey from the complicated reality of life and friendship in their 30s to the even more complicated reality of life and friendship in their 50s." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/1CqkiWeuwlaMswG02q3mBmraiDM.jpg" + } + ] + }, + { + "id": "b324b65c-0678-42a8-b216-2f1b06ab7b1b", + "title": "The Silent Sea", + "startTime": "2022-07-15T13:55:00Z", + "endTime": "2022-07-15T14:55:00Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "During a perilous 24-hour mission on the moon, space explorers try to retrieve samples from an abandoned research facility steeped in classified secrets." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/9hNJ3fvIVd4WE3rU1Us2awoTpgM.jpg" + } + ] + }, + { + "id": "ab3f3968-c693-4c2c-a999-a5811680611c", + "title": "The Flash", + "startTime": "2022-07-15T14:55:00Z", + "endTime": "2022-07-15T15:55:00Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "After being struck by lightning, Barry Allen wakes up from his coma to discover he's been given the power of super speed, becoming the Flash, fighting crime in Central City." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/akuD37ySZGUkXR7LNb1oOHCboy8.jpg" + } + ] + }, + { + "id": "4ca8eb5e-e8bd-4157-915e-0c5a43f4b0bf", + "title": "And Just Like That...", + "startTime": "2022-07-15T15:55:00Z", + "endTime": "2022-07-15T17:00:00Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "The series will follow Carrie, Miranda and Charlotte as they navigate the journey from the complicated reality of life and friendship in their 30s to the even more complicated reality of life and friendship in their 50s." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/1CqkiWeuwlaMswG02q3mBmraiDM.jpg" + } + ] + }, + { + "id": "83d29f9f-7787-4644-9a9c-d4925522c68d", + "title": "SpongeBob SquarePants", + "startTime": "2022-07-15T17:00:00Z", + "endTime": "2022-07-15T17:20:00Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "The misadventures of a talking sea sponge who works at a fast food restaurant, attends a boating school, and lives in an underwater pineapple." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/maFEWU41jdUOzDfRVkojq7fluIm.jpg" + } + ] + }, + { + "id": "746cbddb-b5b4-42e6-bb10-3c2d2e8e25c9", + "title": "The Daily Show with Trevor Noah: Ears Edition", + "startTime": "2022-07-15T17:20:00Z", + "endTime": "2022-07-15T17:30:00Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "Listen to highlights and extended interviews in the \"Ears Edition\" of The Daily Show with Trevor Noah. From Comedy Central's Podcast Network." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/uyilhJ7MBLjiaQXboaEwe44Z0jA.jpg" + } + ] + }, + { + "id": "89ad2461-7eb9-4896-a9d5-d4f92eb60130", + "title": "Late Night with Jimmy Fallon", + "startTime": "2022-07-15T17:30:00Z", + "endTime": "2022-07-15T18:30:00Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "Comedian Jimmy Fallon hosts a late-night talk show." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/uu5FuSKleCLh0Kq2pmGzlPH3aeS.jpg" + } + ] + }, + { + "id": "a87ed404-05ac-48e2-b56c-a30f3acb792e", + "title": "House", + "startTime": "2022-07-15T18:30:00Z", + "endTime": "2022-07-15T19:25:00Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "An antisocial maverick doctor who specializes in diagnostic medicine does whatever it takes to solve puzzling cases that come his way using his crack team of doctors and his wits." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/hiK4qc0tZijQ9KNUnBIS1k4tdMJ.jpg" + } + ] + }, + { + "id": "19685580-f104-4cfe-9d63-f3144fb6a0d4", + "title": "Peaky Blinders", + "startTime": "2022-07-15T19:25:00Z", + "endTime": "2022-07-15T19:30: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" + } + ] + }, + { + "id": "d061dd8e-6b9b-4efc-977c-58e7cae91168", + "title": "The Simpsons", + "startTime": "2022-07-15T19:30:00Z", + "endTime": "2022-07-15T20:05:00Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "The satiric adventures of a working-class family in the misfit city of Springfield." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/hpU2cHC9tk90hswCFEpf5AtbqoL.jpg" + } + ] + }, + { + "id": "bf8c53c2-63bd-455c-8f96-0fcc97068573", + "title": "The Silent Sea", + "startTime": "2022-07-15T20:05:00Z", + "endTime": "2022-07-15T20:10:00Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "During a perilous 24-hour mission on the moon, space explorers try to retrieve samples from an abandoned research facility steeped in classified secrets." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/9hNJ3fvIVd4WE3rU1Us2awoTpgM.jpg" + } + ] + }, + { + "id": "7aeb5b08-da25-46ed-a409-a047acf9e941", + "title": "The Fairly OddParents", + "startTime": "2022-07-15T20:10:00Z", + "endTime": "2022-07-15T20:35:00Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "Follow Timmy Turner's cousin, Vivian \"Viv\" Turner, and her new stepbrother, Roy Ragland, as they navigate life in Dimmsdale with the help of their fairy godparents, Wanda and Cosmo." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/jlruzecsif3tkCSoHlUaPR01O7U.jpg" + } + ] + }, + { + "id": "7c146e38-ee9b-4193-8c59-9a2b96ad95b6", + "title": "SpongeBob SquarePants", + "startTime": "2022-07-15T20:35:00Z", + "endTime": "2022-07-15T21:35:00Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "The misadventures of a talking sea sponge who works at a fast food restaurant, attends a boating school, and lives in an underwater pineapple." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/maFEWU41jdUOzDfRVkojq7fluIm.jpg" + } + ] + }, + { + "id": "70850251-2c81-4547-8b3e-88bb33b8ede9", + "title": "Peaky Blinders", + "startTime": "2022-07-15T21:35:00Z", + "endTime": "2022-07-15T23:30: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" + } + ] + }, + { + "id": "981b69ad-1a8d-436e-bf26-fa2bfb4697e5", + "title": "The Fairly OddParents", + "startTime": "2022-07-15T23:30:00Z", + "endTime": "2022-07-16T01:25:00Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "Follow Timmy Turner's cousin, Vivian \"Viv\" Turner, and her new stepbrother, Roy Ragland, as they navigate life in Dimmsdale with the help of their fairy godparents, Wanda and Cosmo." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/jlruzecsif3tkCSoHlUaPR01O7U.jpg" + } + ] + } +] diff --git a/public/epg/channel2.json b/public/epg/channel2.json new file mode 100644 index 000000000..deb7fa44e --- /dev/null +++ b/public/epg/channel2.json @@ -0,0 +1,1474 @@ +[ + { + "id": "40852655-2e9c-4d98-99f8-0778709f5768", + "title": "The Daily Show with Trevor Noah: Ears Edition", + "startTime": "2022-07-12T00:00:00.000Z", + "endTime": "2022-07-12T00:25:00.000Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "Listen to highlights and extended interviews in the \"Ears Edition\" of The Daily Show with Trevor Noah. From Comedy Central's Podcast Network." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/uyilhJ7MBLjiaQXboaEwe44Z0jA.jpg" + } + ] + }, + { + "id": "581e933d-ac03-4e88-8886-928b8a7b1042", + "title": "The Flash", + "startTime": "2022-07-12T00:25:00.000Z", + "endTime": "2022-07-12T00:40:00.000Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "After being struck by lightning, Barry Allen wakes up from his coma to discover he's been given the power of super speed, becoming the Flash, fighting crime in Central City." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/akuD37ySZGUkXR7LNb1oOHCboy8.jpg" + } + ] + }, + { + "id": "5855be9f-ce8b-4755-a141-2e8cdf25943b", + "title": "Friends", + "startTime": "2022-07-12T00:40:00.000Z", + "endTime": "2022-07-12T01:05:00.000Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "Follows the personal and professional lives of six twenty to thirty-something-year-old friends living in Manhattan." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/l0qVZIpXtIo7km9u5Yqh0nKPOr5.jpg" + } + ] + }, + { + "id": "8d573601-daaa-4a6c-ad5a-c311b380e5e0", + "title": "Malcolm in the Middle", + "startTime": "2022-07-12T01:05:00.000Z", + "endTime": "2022-07-12T01:35:00.000Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "A gifted young teen tries to survive life with his dimwitted, dysfunctional family." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/ysaA0BInz4071p3LKqAQnWKZCsK.jpg" + } + ] + }, + { + "id": "dcd63e49-aa8c-4583-8696-8671e7e79869", + "title": "The Book of Boba Fett", + "startTime": "2022-07-12T01:35:00.000Z", + "endTime": "2022-07-12T02:40:00.000Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "Bounty hunter Boba Fett & mercenary Fennec Shand navigate the underworld when they return to Tatooine to claim Jabba the Hutt's old turf." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/sjx6zjQI2dLGtEL0HGWsnq6UyLU.jpg" + } + ] + }, + { + "id": "c38fe168-3862-484f-a8aa-7b4238246c88", + "title": "Peaky Blinders", + "startTime": "2022-07-12T02:40:00.000Z", + "endTime": "2022-07-12T03:35:00.000Z", + "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" + } + ] + }, + { + "id": "a1813572-571e-435b-b4ab-7413f1c81863", + "title": "The Daily Show with Trevor Noah: Ears Edition", + "startTime": "2022-07-12T03:35:00.000Z", + "endTime": "2022-07-12T04:10:00.000Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "Listen to highlights and extended interviews in the \"Ears Edition\" of The Daily Show with Trevor Noah. From Comedy Central's Podcast Network." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/uyilhJ7MBLjiaQXboaEwe44Z0jA.jpg" + } + ] + }, + { + "id": "25d5c7a7-f4d8-491e-8027-c41f7e44e9cf", + "title": "The Flash", + "startTime": "2022-07-12T04:10:00.000Z", + "endTime": "2022-07-12T06:05:00.000Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "After being struck by lightning, Barry Allen wakes up from his coma to discover he's been given the power of super speed, becoming the Flash, fighting crime in Central City." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/akuD37ySZGUkXR7LNb1oOHCboy8.jpg" + } + ] + }, + { + "id": "d519a088-2ffe-48d8-b91f-21d8c0536fec", + "title": "And Just Like That...", + "startTime": "2022-07-12T06:05:00.000Z", + "endTime": "2022-07-12T06:15:00.000Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "The series will follow Carrie, Miranda and Charlotte as they navigate the journey from the complicated reality of life and friendship in their 30s to the even more complicated reality of life and friendship in their 50s." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/1CqkiWeuwlaMswG02q3mBmraiDM.jpg" + } + ] + }, + { + "id": "59bf2d59-2a19-459b-8346-2d923e2a082a", + "title": "The Silent Sea", + "startTime": "2022-07-12T06:15:00.000Z", + "endTime": "2022-07-12T07:15:00.000Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "During a perilous 24-hour mission on the moon, space explorers try to retrieve samples from an abandoned research facility steeped in classified secrets." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/9hNJ3fvIVd4WE3rU1Us2awoTpgM.jpg" + } + ] + }, + { + "id": "b628784b-1061-4a61-98f3-fa48ce3ce81f", + "title": "The Flash", + "startTime": "2022-07-12T07:15:00.000Z", + "endTime": "2022-07-12T08:15:00.000Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "After being struck by lightning, Barry Allen wakes up from his coma to discover he's been given the power of super speed, becoming the Flash, fighting crime in Central City." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/akuD37ySZGUkXR7LNb1oOHCboy8.jpg" + } + ] + }, + { + "id": "4b52a273-3f1b-4488-950a-7e134d694fed", + "title": "And Just Like That...", + "startTime": "2022-07-12T08:15:00.000Z", + "endTime": "2022-07-12T09:20:00.000Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "The series will follow Carrie, Miranda and Charlotte as they navigate the journey from the complicated reality of life and friendship in their 30s to the even more complicated reality of life and friendship in their 50s." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/1CqkiWeuwlaMswG02q3mBmraiDM.jpg" + } + ] + }, + { + "id": "8546cc8a-c1b2-4497-9631-2766945773d5", + "title": "SpongeBob SquarePants", + "startTime": "2022-07-12T09:20:00.000Z", + "endTime": "2022-07-12T09:40:00.000Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "The misadventures of a talking sea sponge who works at a fast food restaurant, attends a boating school, and lives in an underwater pineapple." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/maFEWU41jdUOzDfRVkojq7fluIm.jpg" + } + ] + }, + { + "id": "768bcca2-b5ef-4fc6-b97b-20fbc90bc13e", + "title": "The Daily Show with Trevor Noah: Ears Edition", + "startTime": "2022-07-12T09:40:00.000Z", + "endTime": "2022-07-12T09:50:00.000Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "Listen to highlights and extended interviews in the \"Ears Edition\" of The Daily Show with Trevor Noah. From Comedy Central's Podcast Network." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/uyilhJ7MBLjiaQXboaEwe44Z0jA.jpg" + } + ] + }, + { + "id": "9011659d-f629-410b-8ff7-71dddc969dff", + "title": "Late Night with Jimmy Fallon", + "startTime": "2022-07-12T09:50:00.000Z", + "endTime": "2022-07-12T10:50:00.000Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "Comedian Jimmy Fallon hosts a late-night talk show." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/uu5FuSKleCLh0Kq2pmGzlPH3aeS.jpg" + } + ] + }, + { + "id": "7b54b55e-4100-4819-9f02-1b564c623d3b", + "title": "House", + "startTime": "2022-07-12T10:50:00.000Z", + "endTime": "2022-07-12T11:45:00.000Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "An antisocial maverick doctor who specializes in diagnostic medicine does whatever it takes to solve puzzling cases that come his way using his crack team of doctors and his wits." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/hiK4qc0tZijQ9KNUnBIS1k4tdMJ.jpg" + } + ] + }, + { + "id": "ae7f6911-ca05-4b58-a996-63583f83ac70", + "title": "Peaky Blinders", + "startTime": "2022-07-12T11:45:00.000Z", + "endTime": "2022-07-12T11:50:00.000Z", + "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" + } + ] + }, + { + "id": "a20fe28d-6e61-4c5c-9455-5839a86f5cd7", + "title": "The Simpsons", + "startTime": "2022-07-12T11:50:00.000Z", + "endTime": "2022-07-12T12:25:00.000Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "The satiric adventures of a working-class family in the misfit city of Springfield." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/hpU2cHC9tk90hswCFEpf5AtbqoL.jpg" + } + ] + }, + { + "id": "5ccf8bad-99d9-416f-a412-63fb0fe62ad6", + "title": "The Silent Sea", + "startTime": "2022-07-12T12:25:00.000Z", + "endTime": "2022-07-12T12:30:00.000Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "During a perilous 24-hour mission on the moon, space explorers try to retrieve samples from an abandoned research facility steeped in classified secrets." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/9hNJ3fvIVd4WE3rU1Us2awoTpgM.jpg" + } + ] + }, + { + "id": "6f967acf-41f7-4d2d-8e67-9bb7496902bf", + "title": "The Fairly OddParents", + "startTime": "2022-07-12T12:30:00.000Z", + "endTime": "2022-07-12T12:55:00.000Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "Follow Timmy Turner's cousin, Vivian \"Viv\" Turner, and her new stepbrother, Roy Ragland, as they navigate life in Dimmsdale with the help of their fairy godparents, Wanda and Cosmo." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/jlruzecsif3tkCSoHlUaPR01O7U.jpg" + } + ] + }, + { + "id": "3195c701-1626-4232-899d-808ebbb812ba", + "title": "SpongeBob SquarePants", + "startTime": "2022-07-12T12:55:00.000Z", + "endTime": "2022-07-12T13:55:00.000Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "The misadventures of a talking sea sponge who works at a fast food restaurant, attends a boating school, and lives in an underwater pineapple." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/maFEWU41jdUOzDfRVkojq7fluIm.jpg" + } + ] + }, + { + "id": "ee84a0be-24c8-4d91-8012-62e8484e4350", + "title": "Peaky Blinders", + "startTime": "2022-07-12T13:55:00.000Z", + "endTime": "2022-07-12T15:50:00.000Z", + "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" + } + ] + }, + { + "id": "8bcdf475-7b61-4783-b6c9-65451692afcb", + "title": "The Fairly OddParents", + "startTime": "2022-07-12T15:50:00.000Z", + "endTime": "2022-07-12T17:45:00.000Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "Follow Timmy Turner's cousin, Vivian \"Viv\" Turner, and her new stepbrother, Roy Ragland, as they navigate life in Dimmsdale with the help of their fairy godparents, Wanda and Cosmo." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/jlruzecsif3tkCSoHlUaPR01O7U.jpg" + } + ] + }, + { + "id": "bc1b5d4e-070f-4251-968a-9488a5c8022a", + "title": "Peaky Blinders", + "startTime": "2022-07-12T17:45:00.000Z", + "endTime": "2022-07-12T18:50:00.000Z", + "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" + } + ] + }, + { + "id": "f21573a7-e877-4a05-bdaf-0668fc652294", + "title": "Friends", + "startTime": "2022-07-12T18:50:00.000Z", + "endTime": "2022-07-12T20:30:00.000Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "Follows the personal and professional lives of six twenty to thirty-something-year-old friends living in Manhattan." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/l0qVZIpXtIo7km9u5Yqh0nKPOr5.jpg" + } + ] + }, + { + "id": "6bcdd06f-894b-450b-a709-f343ed215797", + "title": "Malcolm in the Middle", + "startTime": "2022-07-12T20:30:00.000Z", + "endTime": "2022-07-12T21:25:00.000Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "A gifted young teen tries to survive life with his dimwitted, dysfunctional family." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/ysaA0BInz4071p3LKqAQnWKZCsK.jpg" + } + ] + }, + { + "id": "e1c7ec6f-c4aa-459c-91f3-16ff514dd5ab", + "title": "The Simpsons", + "startTime": "2022-07-12T21:25:00.000Z", + "endTime": "2022-07-12T22:10:00.000Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "The satiric adventures of a working-class family in the misfit city of Springfield." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/hpU2cHC9tk90hswCFEpf5AtbqoL.jpg" + } + ] + }, + { + "id": "c8fcf6f4-6469-40fd-953d-2f65f1127334", + "title": "That '70s Show", + "startTime": "2022-07-12T22:10:00.000Z", + "endTime": "2022-07-12T22:25:00.000Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "A comedy revolving around a group of teenage friends, their mishaps, and their coming of age, set in 1970s Wisconsin." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/3zRUiH8erHIgNUBTj05JT00HwsS.jpg" + } + ] + }, + { + "id": "a2342266-8158-4f79-aa25-58582623c013", + "title": "That '70s Show", + "startTime": "2022-07-12T22:25:00.000Z", + "endTime": "2022-07-12T23:05:00.000Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "A comedy revolving around a group of teenage friends, their mishaps, and their coming of age, set in 1970s Wisconsin." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/3zRUiH8erHIgNUBTj05JT00HwsS.jpg" + } + ] + }, + { + "id": "9a0d3b75-1577-47a6-ab3a-b900d6b98c6b", + "title": "How I Met Your Mother", + "startTime": "2022-07-12T23:05:00.000Z", + "endTime": "2022-07-12T23:30:00.000Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "A father recounts to his children - through a series of flashbacks - the journey he and his four best friends took leading up to him meeting their mother." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/gvEisYtZ0iBMjnO3zqFU2oM26oM.jpg" + } + ] + }, + { + "id": "b0f378c3-63f8-4b91-8058-c700e0120292", + "title": "Malcolm in the Middle", + "startTime": "2022-07-12T23:30:00.000Z", + "endTime": "2022-07-12T23:55:00.000Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "A gifted young teen tries to survive life with his dimwitted, dysfunctional family." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/ysaA0BInz4071p3LKqAQnWKZCsK.jpg" + } + ] + }, + { + "id": "c6b25003-5b7c-42eb-b0b4-2ffcec14017a", + "title": "Euphoria", + "startTime": "2022-07-12T23:55:00.000Z", + "endTime": "2022-07-13T00:55:00.000Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "A look at life for a group of high school students as they grapple with issues of drugs, sex, and violence." + }, + { + "key": "image", + "value": "https://images.fanart.tv/fanart/euphoria-2019-5ec8c62aa702d.jpg" + } + ] + }, + { + "id": "4e1f772b-67d8-4c13-a382-62cd0020ffb1", + "title": "The Flash", + "startTime": "2022-07-13T00:55:00.000Z", + "endTime": "2022-07-13T01:35:00.000Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "After being struck by lightning, Barry Allen wakes up from his coma to discover he's been given the power of super speed, becoming the Flash, fighting crime in Central City." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/akuD37ySZGUkXR7LNb1oOHCboy8.jpg" + } + ] + }, + { + "id": "38e37f0d-cb3e-45d5-9f83-7f2d6f58f38a", + "title": "The Daily Show with Trevor Noah: Ears Edition", + "startTime": "2022-07-13T01:35:00.000Z", + "endTime": "2022-07-13T02:00:00.000Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "Listen to highlights and extended interviews in the \"Ears Edition\" of The Daily Show with Trevor Noah. From Comedy Central's Podcast Network." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/uyilhJ7MBLjiaQXboaEwe44Z0jA.jpg" + } + ] + }, + { + "id": "66ed91bd-6cb8-4b1c-b05f-60c7a5b93a22", + "title": "The Flash", + "startTime": "2022-07-13T02:00:00.000Z", + "endTime": "2022-07-13T02:15:00.000Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "After being struck by lightning, Barry Allen wakes up from his coma to discover he's been given the power of super speed, becoming the Flash, fighting crime in Central City." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/akuD37ySZGUkXR7LNb1oOHCboy8.jpg" + } + ] + }, + { + "id": "5e734eb9-9bfa-4a57-9446-56244e5d61b5", + "title": "Friends", + "startTime": "2022-07-13T02:15:00.000Z", + "endTime": "2022-07-13T02:40:00.000Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "Follows the personal and professional lives of six twenty to thirty-something-year-old friends living in Manhattan." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/l0qVZIpXtIo7km9u5Yqh0nKPOr5.jpg" + } + ] + }, + { + "id": "07a17379-338f-4d4a-a5cd-57177cf51187", + "title": "Malcolm in the Middle", + "startTime": "2022-07-13T02:40:00.000Z", + "endTime": "2022-07-13T03:10:00.000Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "A gifted young teen tries to survive life with his dimwitted, dysfunctional family." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/ysaA0BInz4071p3LKqAQnWKZCsK.jpg" + } + ] + }, + { + "id": "2a9d5f5c-c50e-468a-8f22-60f17170940b", + "title": "The Book of Boba Fett", + "startTime": "2022-07-13T03:10:00.000Z", + "endTime": "2022-07-13T04:15:00.000Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "Bounty hunter Boba Fett & mercenary Fennec Shand navigate the underworld when they return to Tatooine to claim Jabba the Hutt's old turf." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/sjx6zjQI2dLGtEL0HGWsnq6UyLU.jpg" + } + ] + }, + { + "id": "0b6a04cd-53e5-4da4-943f-558cd09fc80e", + "title": "Peaky Blinders", + "startTime": "2022-07-13T04:15:00.000Z", + "endTime": "2022-07-13T05:10:00.000Z", + "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" + } + ] + }, + { + "id": "adb73f33-85bf-4b01-a37b-60d1701f50bf", + "title": "The Daily Show with Trevor Noah: Ears Edition", + "startTime": "2022-07-13T05:10:00.000Z", + "endTime": "2022-07-13T05:45:00.000Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "Listen to highlights and extended interviews in the \"Ears Edition\" of The Daily Show with Trevor Noah. From Comedy Central's Podcast Network." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/uyilhJ7MBLjiaQXboaEwe44Z0jA.jpg" + } + ] + }, + { + "id": "96c3f9a0-f6b4-4dc7-b151-5fc9c22c662c", + "title": "The Flash", + "startTime": "2022-07-13T05:45:00.000Z", + "endTime": "2022-07-13T07:40:00.000Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "After being struck by lightning, Barry Allen wakes up from his coma to discover he's been given the power of super speed, becoming the Flash, fighting crime in Central City." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/akuD37ySZGUkXR7LNb1oOHCboy8.jpg" + } + ] + }, + { + "id": "32dcb9ce-e295-4b2f-a3b4-a49178269930", + "title": "And Just Like That...", + "startTime": "2022-07-13T07:40:00.000Z", + "endTime": "2022-07-13T07:50:00.000Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "The series will follow Carrie, Miranda and Charlotte as they navigate the journey from the complicated reality of life and friendship in their 30s to the even more complicated reality of life and friendship in their 50s." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/1CqkiWeuwlaMswG02q3mBmraiDM.jpg" + } + ] + }, + { + "id": "4cd3dc6b-8725-40e5-a5db-2d27e8434df8", + "title": "The Silent Sea", + "startTime": "2022-07-13T07:50:00.000Z", + "endTime": "2022-07-13T08:50:00.000Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "During a perilous 24-hour mission on the moon, space explorers try to retrieve samples from an abandoned research facility steeped in classified secrets." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/9hNJ3fvIVd4WE3rU1Us2awoTpgM.jpg" + } + ] + }, + { + "id": "cc733c87-430e-414a-bdfc-ee1fb7f8076a", + "title": "The Flash", + "startTime": "2022-07-13T08:50:00.000Z", + "endTime": "2022-07-13T09:50:00.000Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "After being struck by lightning, Barry Allen wakes up from his coma to discover he's been given the power of super speed, becoming the Flash, fighting crime in Central City." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/akuD37ySZGUkXR7LNb1oOHCboy8.jpg" + } + ] + }, + { + "id": "dd6391bb-db10-4080-8e42-7b5c4a00a620", + "title": "And Just Like That...", + "startTime": "2022-07-13T09:50:00.000Z", + "endTime": "2022-07-13T10:55:00.000Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "The series will follow Carrie, Miranda and Charlotte as they navigate the journey from the complicated reality of life and friendship in their 30s to the even more complicated reality of life and friendship in their 50s." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/1CqkiWeuwlaMswG02q3mBmraiDM.jpg" + } + ] + }, + { + "id": "e076460e-3778-4302-8bff-5f8ed3b086dc", + "title": "SpongeBob SquarePants", + "startTime": "2022-07-13T10:55:00.000Z", + "endTime": "2022-07-13T11:15:00.000Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "The misadventures of a talking sea sponge who works at a fast food restaurant, attends a boating school, and lives in an underwater pineapple." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/maFEWU41jdUOzDfRVkojq7fluIm.jpg" + } + ] + }, + { + "id": "abcd04fc-e0c9-42f5-8cef-ac47865ed85c", + "title": "The Daily Show with Trevor Noah: Ears Edition", + "startTime": "2022-07-13T11:15:00.000Z", + "endTime": "2022-07-13T11:25:00.000Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "Listen to highlights and extended interviews in the \"Ears Edition\" of The Daily Show with Trevor Noah. From Comedy Central's Podcast Network." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/uyilhJ7MBLjiaQXboaEwe44Z0jA.jpg" + } + ] + }, + { + "id": "0e9aaa9c-e31c-4404-9da0-7606eed51c8c", + "title": "Late Night with Jimmy Fallon", + "startTime": "2022-07-13T11:25:00.000Z", + "endTime": "2022-07-13T12:25:00.000Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "Comedian Jimmy Fallon hosts a late-night talk show." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/uu5FuSKleCLh0Kq2pmGzlPH3aeS.jpg" + } + ] + }, + { + "id": "babd573e-ec1e-495f-8fd0-d36baf12871e", + "title": "House", + "startTime": "2022-07-13T12:25:00.000Z", + "endTime": "2022-07-13T13:20:00.000Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "An antisocial maverick doctor who specializes in diagnostic medicine does whatever it takes to solve puzzling cases that come his way using his crack team of doctors and his wits." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/hiK4qc0tZijQ9KNUnBIS1k4tdMJ.jpg" + } + ] + }, + { + "id": "6edc2bc2-2970-4594-9074-77d4a8fec873", + "title": "Peaky Blinders", + "startTime": "2022-07-13T13:20:00.000Z", + "endTime": "2022-07-13T13:25:00.000Z", + "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" + } + ] + }, + { + "id": "fb7c2d1a-ee62-40ed-8fc8-b6d93d965332", + "title": "The Simpsons", + "startTime": "2022-07-13T13:25:00.000Z", + "endTime": "2022-07-13T14:00:00.000Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "The satiric adventures of a working-class family in the misfit city of Springfield." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/hpU2cHC9tk90hswCFEpf5AtbqoL.jpg" + } + ] + }, + { + "id": "5dc2f3cc-d2a5-42b5-a0a3-7e5addb2ea0f", + "title": "The Silent Sea", + "startTime": "2022-07-13T14:00:00.000Z", + "endTime": "2022-07-13T14:05:00.000Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "During a perilous 24-hour mission on the moon, space explorers try to retrieve samples from an abandoned research facility steeped in classified secrets." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/9hNJ3fvIVd4WE3rU1Us2awoTpgM.jpg" + } + ] + }, + { + "id": "43ca8960-acb6-467c-a197-8d86bbcb0c2b", + "title": "The Fairly OddParents", + "startTime": "2022-07-13T14:05:00.000Z", + "endTime": "2022-07-13T14:30:00.000Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "Follow Timmy Turner's cousin, Vivian \"Viv\" Turner, and her new stepbrother, Roy Ragland, as they navigate life in Dimmsdale with the help of their fairy godparents, Wanda and Cosmo." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/jlruzecsif3tkCSoHlUaPR01O7U.jpg" + } + ] + }, + { + "id": "551a66a8-3db1-40d7-8423-fb16a1fff774", + "title": "SpongeBob SquarePants", + "startTime": "2022-07-13T14:30:00.000Z", + "endTime": "2022-07-13T15:30:00.000Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "The misadventures of a talking sea sponge who works at a fast food restaurant, attends a boating school, and lives in an underwater pineapple." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/maFEWU41jdUOzDfRVkojq7fluIm.jpg" + } + ] + }, + { + "id": "3bc1da51-67a7-42f1-b8d9-3f9987bcc6bc", + "title": "Peaky Blinders", + "startTime": "2022-07-13T15:30:00.000Z", + "endTime": "2022-07-13T17:25:00.000Z", + "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" + } + ] + }, + { + "id": "f44a2f47-be29-47cb-a287-bd65f328a1c7", + "title": "The Fairly OddParents", + "startTime": "2022-07-13T17:25:00.000Z", + "endTime": "2022-07-13T19:20:00.000Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "Follow Timmy Turner's cousin, Vivian \"Viv\" Turner, and her new stepbrother, Roy Ragland, as they navigate life in Dimmsdale with the help of their fairy godparents, Wanda and Cosmo." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/jlruzecsif3tkCSoHlUaPR01O7U.jpg" + } + ] + }, + { + "id": "8b6bf000-1575-449a-89b9-ca6f66421871", + "title": "Peaky Blinders", + "startTime": "2022-07-13T19:20:00.000Z", + "endTime": "2022-07-13T20:25:00.000Z", + "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" + } + ] + }, + { + "id": "0d82da10-b55c-4b91-b6bc-1ceb6a45c2bc", + "title": "Friends", + "startTime": "2022-07-13T20:25:00.000Z", + "endTime": "2022-07-13T22:05:00.000Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "Follows the personal and professional lives of six twenty to thirty-something-year-old friends living in Manhattan." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/l0qVZIpXtIo7km9u5Yqh0nKPOr5.jpg" + } + ] + }, + { + "id": "42187ff0-e968-4a4a-aea4-6fd01ffdf394", + "title": "Malcolm in the Middle", + "startTime": "2022-07-13T22:05:00.000Z", + "endTime": "2022-07-13T23:00:00.000Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "A gifted young teen tries to survive life with his dimwitted, dysfunctional family." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/ysaA0BInz4071p3LKqAQnWKZCsK.jpg" + } + ] + }, + { + "id": "021c237c-92b3-459b-a905-61dfcee23d68", + "title": "The Simpsons", + "startTime": "2022-07-13T23:00:00.000Z", + "endTime": "2022-07-13T23:45:00.000Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "The satiric adventures of a working-class family in the misfit city of Springfield." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/hpU2cHC9tk90hswCFEpf5AtbqoL.jpg" + } + ] + }, + { + "id": "c95ff569-5873-46bc-80df-dfb6423b8fcf", + "title": "That '70s Show", + "startTime": "2022-07-13T23:45:00.000Z", + "endTime": "2022-07-14T00:00:00.000Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "A comedy revolving around a group of teenage friends, their mishaps, and their coming of age, set in 1970s Wisconsin." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/3zRUiH8erHIgNUBTj05JT00HwsS.jpg" + } + ] + }, + { + "id": "4f59342d-46a6-421d-85ca-527dec7b6d5d", + "title": "That '70s Show", + "startTime": "2022-07-14T00:00:00.000Z", + "endTime": "2022-07-14T00:40:00.000Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "A comedy revolving around a group of teenage friends, their mishaps, and their coming of age, set in 1970s Wisconsin." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/3zRUiH8erHIgNUBTj05JT00HwsS.jpg" + } + ] + }, + { + "id": "21a4ce7a-5f7b-4985-aab6-42e7bd806e9d", + "title": "How I Met Your Mother", + "startTime": "2022-07-14T00:40:00.000Z", + "endTime": "2022-07-14T01:05:00.000Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "A father recounts to his children - through a series of flashbacks - the journey he and his four best friends took leading up to him meeting their mother." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/gvEisYtZ0iBMjnO3zqFU2oM26oM.jpg" + } + ] + }, + { + "id": "e66b5ffa-b0b4-4148-a30f-dcd2ed7fbf93", + "title": "Malcolm in the Middle", + "startTime": "2022-07-14T01:05:00.000Z", + "endTime": "2022-07-14T01:30:00.000Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "A gifted young teen tries to survive life with his dimwitted, dysfunctional family." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/ysaA0BInz4071p3LKqAQnWKZCsK.jpg" + } + ] + }, + { + "id": "240c451b-115e-4777-8245-2c675f16c3d7", + "title": "Euphoria", + "startTime": "2022-07-14T01:30:00.000Z", + "endTime": "2022-07-14T02:30:00.000Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "A look at life for a group of high school students as they grapple with issues of drugs, sex, and violence." + }, + { + "key": "image", + "value": "https://images.fanart.tv/fanart/euphoria-2019-5ec8c62aa702d.jpg" + } + ] + }, + { + "id": "e746ab4c-00b5-46f8-b817-747b8281420d", + "title": "The Flash", + "startTime": "2022-07-14T02:30:00.000Z", + "endTime": "2022-07-14T03:10:00.000Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "After being struck by lightning, Barry Allen wakes up from his coma to discover he's been given the power of super speed, becoming the Flash, fighting crime in Central City." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/akuD37ySZGUkXR7LNb1oOHCboy8.jpg" + } + ] + }, + { + "id": "5eddcadc-83b6-4bd4-b73f-bcfed4a7c07e", + "title": "The Daily Show with Trevor Noah: Ears Edition", + "startTime": "2022-07-14T03:10:00.000Z", + "endTime": "2022-07-14T03:35:00.000Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "Listen to highlights and extended interviews in the \"Ears Edition\" of The Daily Show with Trevor Noah. From Comedy Central's Podcast Network." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/uyilhJ7MBLjiaQXboaEwe44Z0jA.jpg" + } + ] + }, + { + "id": "4e0d07a1-8b84-4d94-96c8-86cf3ad9682c", + "title": "The Flash", + "startTime": "2022-07-14T03:35:00.000Z", + "endTime": "2022-07-14T03:50:00.000Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "After being struck by lightning, Barry Allen wakes up from his coma to discover he's been given the power of super speed, becoming the Flash, fighting crime in Central City." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/akuD37ySZGUkXR7LNb1oOHCboy8.jpg" + } + ] + }, + { + "id": "92fc8f75-25a8-43ec-8603-83a4ee347209", + "title": "Friends", + "startTime": "2022-07-14T03:50:00.000Z", + "endTime": "2022-07-14T04:15:00.000Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "Follows the personal and professional lives of six twenty to thirty-something-year-old friends living in Manhattan." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/l0qVZIpXtIo7km9u5Yqh0nKPOr5.jpg" + } + ] + }, + { + "id": "8a807ba7-668d-4778-b927-214c808dc253", + "title": "Malcolm in the Middle", + "startTime": "2022-07-14T04:15:00.000Z", + "endTime": "2022-07-14T04:45:00.000Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "A gifted young teen tries to survive life with his dimwitted, dysfunctional family." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/ysaA0BInz4071p3LKqAQnWKZCsK.jpg" + } + ] + }, + { + "id": "7bd90470-30e7-4aac-81c6-191e81fcb324", + "title": "The Book of Boba Fett", + "startTime": "2022-07-14T04:45:00.000Z", + "endTime": "2022-07-14T05:50:00.000Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "Bounty hunter Boba Fett & mercenary Fennec Shand navigate the underworld when they return to Tatooine to claim Jabba the Hutt's old turf." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/sjx6zjQI2dLGtEL0HGWsnq6UyLU.jpg" + } + ] + }, + { + "id": "3f488f6a-3309-4afd-9433-e49971b5d731", + "title": "Peaky Blinders", + "startTime": "2022-07-14T05:50:00.000Z", + "endTime": "2022-07-14T06:45:00.000Z", + "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" + } + ] + }, + { + "id": "a561899e-0c03-4631-b25c-a6b0352396a2", + "title": "The Daily Show with Trevor Noah: Ears Edition", + "startTime": "2022-07-14T06:45:00.000Z", + "endTime": "2022-07-14T07:20:00.000Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "Listen to highlights and extended interviews in the \"Ears Edition\" of The Daily Show with Trevor Noah. From Comedy Central's Podcast Network." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/uyilhJ7MBLjiaQXboaEwe44Z0jA.jpg" + } + ] + }, + { + "id": "730bd114-42ed-497f-9566-52109fa05d4c", + "title": "The Flash", + "startTime": "2022-07-14T07:20:00.000Z", + "endTime": "2022-07-14T09:15:00.000Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "After being struck by lightning, Barry Allen wakes up from his coma to discover he's been given the power of super speed, becoming the Flash, fighting crime in Central City." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/akuD37ySZGUkXR7LNb1oOHCboy8.jpg" + } + ] + }, + { + "id": "adc0c35e-4ce2-48ba-9ad0-4cc0b9929052", + "title": "And Just Like That...", + "startTime": "2022-07-14T09:15:00.000Z", + "endTime": "2022-07-14T09:25:00.000Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "The series will follow Carrie, Miranda and Charlotte as they navigate the journey from the complicated reality of life and friendship in their 30s to the even more complicated reality of life and friendship in their 50s." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/1CqkiWeuwlaMswG02q3mBmraiDM.jpg" + } + ] + }, + { + "id": "57540443-aa59-4ed2-8a97-fe0c53ea5f59", + "title": "The Silent Sea", + "startTime": "2022-07-14T09:25:00.000Z", + "endTime": "2022-07-14T10:25:00.000Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "During a perilous 24-hour mission on the moon, space explorers try to retrieve samples from an abandoned research facility steeped in classified secrets." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/9hNJ3fvIVd4WE3rU1Us2awoTpgM.jpg" + } + ] + }, + { + "id": "29ddc5c8-bfce-41c4-a832-6bd017529f75", + "title": "The Flash", + "startTime": "2022-07-14T10:25:00.000Z", + "endTime": "2022-07-14T11:25:00.000Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "After being struck by lightning, Barry Allen wakes up from his coma to discover he's been given the power of super speed, becoming the Flash, fighting crime in Central City." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/akuD37ySZGUkXR7LNb1oOHCboy8.jpg" + } + ] + }, + { + "id": "c7643d4f-2190-4178-8543-8a311fd8372e", + "title": "And Just Like That...", + "startTime": "2022-07-14T11:25:00.000Z", + "endTime": "2022-07-14T12:30:00.000Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "The series will follow Carrie, Miranda and Charlotte as they navigate the journey from the complicated reality of life and friendship in their 30s to the even more complicated reality of life and friendship in their 50s." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/1CqkiWeuwlaMswG02q3mBmraiDM.jpg" + } + ] + }, + { + "id": "1ff5f764-7fd1-4a2e-8553-0a25918bcf93", + "title": "SpongeBob SquarePants", + "startTime": "2022-07-14T12:30:00.000Z", + "endTime": "2022-07-14T12:50:00.000Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "The misadventures of a talking sea sponge who works at a fast food restaurant, attends a boating school, and lives in an underwater pineapple." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/maFEWU41jdUOzDfRVkojq7fluIm.jpg" + } + ] + }, + { + "id": "62c5cf9c-ac5c-4c2a-a5da-d2c5f1ed7d08", + "title": "The Daily Show with Trevor Noah: Ears Edition", + "startTime": "2022-07-14T12:50:00.000Z", + "endTime": "2022-07-14T13:00:00.000Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "Listen to highlights and extended interviews in the \"Ears Edition\" of The Daily Show with Trevor Noah. From Comedy Central's Podcast Network." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/uyilhJ7MBLjiaQXboaEwe44Z0jA.jpg" + } + ] + }, + { + "id": "5b88ef5a-394c-4a9d-8bc9-7b7fc7f5830f", + "title": "Late Night with Jimmy Fallon", + "startTime": "2022-07-14T13:00:00.000Z", + "endTime": "2022-07-14T14:00:00.000Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "Comedian Jimmy Fallon hosts a late-night talk show." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/uu5FuSKleCLh0Kq2pmGzlPH3aeS.jpg" + } + ] + }, + { + "id": "c6b117cc-0658-4788-a0b7-acb8beb5fde3", + "title": "House", + "startTime": "2022-07-14T14:00:00.000Z", + "endTime": "2022-07-14T14:55:00.000Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "An antisocial maverick doctor who specializes in diagnostic medicine does whatever it takes to solve puzzling cases that come his way using his crack team of doctors and his wits." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/hiK4qc0tZijQ9KNUnBIS1k4tdMJ.jpg" + } + ] + }, + { + "id": "73067c1a-ea9d-40c4-8510-2b6bab73baed", + "title": "Peaky Blinders", + "startTime": "2022-07-14T14:55:00.000Z", + "endTime": "2022-07-14T15:00:00.000Z", + "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" + } + ] + }, + { + "id": "712e0aa9-c81f-41fb-8fb0-bfb2c4868575", + "title": "The Simpsons", + "startTime": "2022-07-14T15:00:00.000Z", + "endTime": "2022-07-14T15:35:00.000Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "The satiric adventures of a working-class family in the misfit city of Springfield." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/hpU2cHC9tk90hswCFEpf5AtbqoL.jpg" + } + ] + }, + { + "id": "bb948aa8-dd48-496b-8881-72739c5cbdf9", + "title": "The Silent Sea", + "startTime": "2022-07-14T15:35:00.000Z", + "endTime": "2022-07-14T15:40:00.000Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "During a perilous 24-hour mission on the moon, space explorers try to retrieve samples from an abandoned research facility steeped in classified secrets." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/9hNJ3fvIVd4WE3rU1Us2awoTpgM.jpg" + } + ] + }, + { + "id": "5486daff-4130-4cd6-a742-69d3b123b301", + "title": "The Fairly OddParents", + "startTime": "2022-07-14T15:40:00.000Z", + "endTime": "2022-07-14T16:05:00.000Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "Follow Timmy Turner's cousin, Vivian \"Viv\" Turner, and her new stepbrother, Roy Ragland, as they navigate life in Dimmsdale with the help of their fairy godparents, Wanda and Cosmo." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/jlruzecsif3tkCSoHlUaPR01O7U.jpg" + } + ] + }, + { + "id": "dc209bc0-5de8-4d99-b1e4-91f49401e8f2", + "title": "SpongeBob SquarePants", + "startTime": "2022-07-14T16:05:00.000Z", + "endTime": "2022-07-14T17:05:00.000Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "The misadventures of a talking sea sponge who works at a fast food restaurant, attends a boating school, and lives in an underwater pineapple." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/maFEWU41jdUOzDfRVkojq7fluIm.jpg" + } + ] + }, + { + "id": "d03e7b47-2014-440e-b28a-087fa72841d6", + "title": "Peaky Blinders", + "startTime": "2022-07-14T17:05:00.000Z", + "endTime": "2022-07-14T19:00:00.000Z", + "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" + } + ] + }, + { + "id": "cdfdf1a6-5ace-4a09-9272-5b43751a3afc", + "title": "The Fairly OddParents", + "startTime": "2022-07-14T19:00:00.000Z", + "endTime": "2022-07-14T20:55:00.000Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "Follow Timmy Turner's cousin, Vivian \"Viv\" Turner, and her new stepbrother, Roy Ragland, as they navigate life in Dimmsdale with the help of their fairy godparents, Wanda and Cosmo." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/jlruzecsif3tkCSoHlUaPR01O7U.jpg" + } + ] + }, + { + "id": "f144f44f-7c30-4bd2-9144-2b0648566b85", + "title": "Peaky Blinders", + "startTime": "2022-07-14T20:55:00.000Z", + "endTime": "2022-07-14T22:00:00.000Z", + "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" + } + ] + }, + { + "id": "f6b997d7-497f-4176-afa7-58f1d4bf761c", + "title": "Friends", + "startTime": "2022-07-14T22:00:00.000Z", + "endTime": "2022-07-14T23:40:00.000Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "Follows the personal and professional lives of six twenty to thirty-something-year-old friends living in Manhattan." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/l0qVZIpXtIo7km9u5Yqh0nKPOr5.jpg" + } + ] + }, + { + "id": "e10e6236-b476-42c3-8dbb-666f67938f6c", + "title": "Malcolm in the Middle", + "startTime": "2022-07-14T23:40:00.000Z", + "endTime": "2022-07-15T00:35:00.000Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "A gifted young teen tries to survive life with his dimwitted, dysfunctional family." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/ysaA0BInz4071p3LKqAQnWKZCsK.jpg" + } + ] + } +] \ No newline at end of file diff --git a/public/epg/channel4.json b/public/epg/channel4.json new file mode 100644 index 000000000..45c08a5d7 --- /dev/null +++ b/public/epg/channel4.json @@ -0,0 +1,18 @@ +[ + { + "id": "f6b997d7-497f-4176-afa7-58f1d4bf761c", + "title": "Friends", + "startTime": "2022-07-14T20:00:00.000Z", + "endTime": "2022-07-14T20:30:00.000Z", + "chapterPointCustomProperties": [ + { + "key": "description", + "value": "Follows the personal and professional lives of six twenty to thirty-something-year-old friends living in Manhattan." + }, + { + "key": "image", + "value": "https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/l0qVZIpXtIo7km9u5Yqh0nKPOr5.jpg" + } + ] + } +] diff --git a/src/App.tsx b/src/App.tsx index 8bd8a69c5..4fbc59a30 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -60,8 +60,8 @@ class App extends Component { }; configValidationCompletedHandler = async (config: Config) => { - this.setState({ isLoading: false }); await this.initializeServices(config); + this.setState({ isLoading: false }); }; componentDidMount() { diff --git a/src/components/Button/Button.module.scss b/src/components/Button/Button.module.scss index b6d79c234..5f273279e 100644 --- a/src/components/Button/Button.module.scss +++ b/src/components/Button/Button.module.scss @@ -2,6 +2,7 @@ @use '../../styles/theme'; @use '../../styles/mixins/responsive'; +$small-button-height: 28px; $medium-button-height: 36px; $large-button-height: 40px; @@ -47,6 +48,10 @@ $large-button-height: 40px; opacity: 0.5; } + &.small { + height: $small-button-height; + } + &.large { height: $large-button-height; } diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx index 44a6bad21..28ac2f9ac 100644 --- a/src/components/Button/Button.tsx +++ b/src/components/Button/Button.tsx @@ -18,7 +18,7 @@ type Props = { variant?: Variant; onClick?: () => void; tabIndex?: number; - size?: 'medium' | 'large'; + size?: 'small' | 'medium' | 'large'; to?: string; role?: string; className?: string; @@ -43,10 +43,11 @@ const Button: React.FC = ({ className, ...rest }: Props) => { - const buttonClassName = classNames(styles.button, className, [styles[color]], [styles[variant]], { + const buttonClassName = classNames(styles.button, className, styles[color], styles[variant], { [styles.active]: active, [styles.fullWidth]: fullWidth, [styles.large]: size === 'large', + [styles.small]: size === 'small', [styles.disabled]: disabled, }); diff --git a/src/components/Epg/Epg.module.scss b/src/components/Epg/Epg.module.scss new file mode 100644 index 000000000..770277948 --- /dev/null +++ b/src/components/Epg/Epg.module.scss @@ -0,0 +1,114 @@ +@use '../../styles/variables'; +@use '../../styles/theme'; +@use '../../styles/mixins/responsive'; + +$base-z-index: variables.$epg-z-index; +$cover-z-index: $base-z-index + 1; +$control-z-index: $base-z-index + 2; + +.epg { + position: relative; + width: 100%; + height: 100%; + padding: variables.$base-spacing; + background-color: var(--body-background-color); + border-radius: 4px; + + // EpgContainer + > div:nth-child(2) { + padding: 0 !important; + + // Planby Wrapper + > div { + // Planby Spacer + > div:first-child { + z-index: variables.$epg-z-index; + } + + // Planby ScrollContainer + > div:nth-child(2) { + overflow-y: hidden !important; + scrollbar-width: none !important; + + &::-webkit-scrollbar { + display: none !important; + } + + // Planby Timeline indicator + > div:first-child { + z-index: $cover-z-index; + box-shadow: 0 8px 10px rgb(0 0 0 / 14%), 0 3px 14px rgb(0 0 0 / 12%), 0 4px 5px rgb(0 0 0 / 20%); + } + + // Planby Sidebar with Channels + > div[data-testid='sidebar'] { + z-index: $cover-z-index; + } + } + } + } + + @include responsive.mobile-only() { + border-radius: 0; + } +} + +.epgSpinner { + position: absolute; + top: 50%; + left: 50%; + z-index: 1; + transform: translate(-50%, -50%); +} + +.timelineControl { + display: flex; + align-items: center; + width: 100%; + + @include responsive.mobile-only() { + position: absolute; + z-index: $control-z-index; + width: 60px; + height: 60px; + } +} + +.timelineNowButton { + justify-content: center; + width: 160px; + margin-right: auto; + + @include responsive.mobile-only() { + width: 60px; + } +} + +.leftControl, +.rightControl { + display: flex; + justify-content: center; + align-items: center; + width: 45px; + height: 45px; + cursor: pointer; + transition: transform 0.3s ease-out; + + > svg { + width: 35px; + height: 35px; + } + + &:hover { + transform: scale(1.2); + } + + // hide on mobile, swiping is much more convenient + @include responsive.mobile-only() { + display: none; + } +} + +.leftControl { + margin-right: variables.$base-spacing; +} diff --git a/src/components/Epg/Epg.tsx b/src/components/Epg/Epg.tsx new file mode 100644 index 000000000..ba1d8962e --- /dev/null +++ b/src/components/Epg/Epg.tsx @@ -0,0 +1,99 @@ +import { Epg as EpgContainer, Layout } from 'planby'; +import React, { useMemo } from 'react'; +import { useTranslation } from 'react-i18next'; +import { isBefore, subHours } from 'date-fns'; + +import styles from './Epg.module.scss'; + +import type { Config } from '#types/Config'; +import IconButton from '#src/components/IconButton/IconButton'; +import Button from '#src/components/Button/Button'; +import EpgChannelItem from '#src/components/EpgChannel/EpgChannelItem'; +import EpgProgramItem from '#src/components/EpgProgramItem/EpgProgramItem'; +import EpgTimeline from '#src/components/EpgTimeline/EpgTimeline'; +import Spinner from '#src/components/Spinner/Spinner'; +import type { EpgChannel, EpgProgram } from '#src/services/epg.service'; +import ChevronRight from '#src/icons/ChevronRight'; +import ChevronLeft from '#src/icons/ChevronLeft'; +import usePlanByEpg from '#src/hooks/usePlanByEpg'; +import useBreakpoint, { Breakpoint } from '#src/hooks/useBreakpoint'; + +type Props = { + channels: EpgChannel[]; + onChannelClick: (channelId: string) => void; + onProgramClick: (programId: string, channelId: string) => void; + channel: EpgChannel | undefined; + program: EpgProgram | undefined; + config: Config; +}; + +export default function Epg({ channels, onChannelClick, onProgramClick, channel, program, config }: Props) { + const breakpoint = useBreakpoint(); + const { t } = useTranslation('common'); + + const isMobile = breakpoint < Breakpoint.sm; + const sidebarWidth = isMobile ? 70 : 184; + // the subtracted value is used for spacing in the sidebar + const channelItemWidth = isMobile ? sidebarWidth - 10 : sidebarWidth - 24; + const itemHeight = isMobile ? 80 : 106; + + // Epg + const { highlightColor, backgroundColor } = config.styling; + const { getEpgProps, getLayoutProps, onScrollToNow, onScrollLeft, onScrollRight } = usePlanByEpg( + channels, + sidebarWidth, + itemHeight, + highlightColor, + backgroundColor, + ); + const catchupHoursDict = useMemo(() => Object.fromEntries(channels.map((channel) => [channel.id, channel.catchupHours])), [channels]); + + return ( +
+
+
+ }> + } + renderChannel={({ channel: epgChannel }) => ( + { + onChannelClick(toChannel.uuid); + onScrollToNow(); + }} + isActive={channel?.id === epgChannel.uuid} + /> + )} + renderProgram={({ program: programItem, isBaseTimeFormat }) => { + const catchupHours = catchupHoursDict[programItem.data.channelUuid]; + const disabled = isBefore(new Date(programItem.data.since), subHours(new Date(), catchupHours)); + + return ( + !disabled && onProgramClick(program.data.id, program.data.channelUuid)} + isActive={program?.id === programItem.data.id} + compact={isMobile} + isBaseTimeFormat={isBaseTimeFormat} + /> + ); + }} + /> + +
+ ); +} diff --git a/src/components/EpgChannel/EpgChannelItem.module.scss b/src/components/EpgChannel/EpgChannelItem.module.scss new file mode 100644 index 000000000..c61244523 --- /dev/null +++ b/src/components/EpgChannel/EpgChannelItem.module.scss @@ -0,0 +1,39 @@ +@use '../../styles/variables'; +@use '../../styles/theme'; +@use '../../styles/mixins/responsive'; + +.epgChannelBox { + position: absolute; + padding: 8px 0; + background-color: var(--body-background-color); +} + +.epgChannel { + position: relative; + display: flex; + justify-content: center; + align-items: center; + height: 100%; + background-color: theme.$epg-box-bg; + border-radius: 4px; + cursor: pointer; + transition: background-color 0.4s ease-in-out, border 0.1s ease; + + &:hover { + border: 2px solid var(--primary-color); + } + + @include responsive.mobile-only() { + background-color: transparent; + } +} + +.epgChannelLogo { + max-width: 75px; + max-height: 75px; + border-radius: 4px; + + @include responsive.mobile-only() { + max-width: 50px; + } +} diff --git a/src/components/EpgChannel/EpgChannelItem.tsx b/src/components/EpgChannel/EpgChannelItem.tsx new file mode 100644 index 000000000..bba927526 --- /dev/null +++ b/src/components/EpgChannel/EpgChannelItem.tsx @@ -0,0 +1,33 @@ +import React from 'react'; +import type { Channel } from 'planby'; +import classNames from 'classnames'; + +import styles from './EpgChannelItem.module.scss'; + +type Props = { + channel: Channel; + channelItemWidth: number; + sidebarWidth: number; + onClick?: (channel: Channel) => void; + isActive: boolean; +}; + +const EpgChannelItem: React.VFC = ({ channel, channelItemWidth, sidebarWidth, onClick, isActive }) => { + const { position, logo, uuid } = channel; + const style = { top: position.top, height: position.height, width: sidebarWidth }; + + return ( +
+
onClick && onClick(channel)} + data-testid={uuid} + > + Logo +
+
+ ); +}; + +export default EpgChannelItem; diff --git a/src/components/EpgProgramItem/EpgProgramItem.module.scss b/src/components/EpgProgramItem/EpgProgramItem.module.scss new file mode 100644 index 000000000..522a6cc4a --- /dev/null +++ b/src/components/EpgProgramItem/EpgProgramItem.module.scss @@ -0,0 +1,131 @@ +@use '../../styles/variables'; +@use '../../styles/theme'; +@use '../../styles/mixins/responsive'; + +.epgProgramBox { + position: absolute; + padding: 8px 4px; + overflow: hidden; +} + +.epgProgram { + position: relative; + display: flex; + justify-content: flex-start; + align-items: center; + width: 100%; + height: 100%; + padding: variables.$base-spacing; + overflow: hidden; + text-shadow: none; + background-color: theme.$epg-box-bg; + border: 2px solid transparent; + border-radius: 4px; + cursor: pointer; + transition: background-color 0.4s ease-in-out, transform 0.1s ease, border 0.1s ease; + will-change: transform; + + &.disabled { + cursor: default; + opacity: 0.4; + } + + &.live { + border: 2px solid theme.$primary-color; + } + + &.selected { + background-color: var(--highlight-color, theme.$primary-color); + + .epgProgramTitle { + color: theme.$epg-title-selected-color; + } + + .epgProgramText { + color: theme.$epg-text-selected-color; + } + } + + &:not(.disabled):hover { + border: 2px solid theme.$primary-color; + transform: scale(1.01); + } + + @include responsive.mobile-only { + padding: calc(variables.$base-spacing / 2); + } +} + +.epgLiveTag { + position: absolute; + bottom: 20px; + left: 68px; + display: flex; + align-items: center; + padding: 2px 6px; + color: var(--card-color); + font-family: var(--body-font-family); + font-weight: 600; + font-size: 14px; + white-space: nowrap; + background-color: variables.$red; + border-radius: 4px; + + @include responsive.mobile-only { + position: relative; + bottom: initial; + left: initial; + justify-content: center; + width: 35px; + padding: initial; + font-size: 10px; + } +} + +.epgProgramContent { + display: flex; + flex-direction: column; + justify-content: center; + width: 100%; + height: 100%; + overflow: hidden; +} + +.epgProgramTitle { + overflow: hidden; + color: theme.$epg-title-color; + font-family: var(--body-font-family); + font-weight: theme.$body-font-weight-bold; + font-size: 16px; + line-height: 20px; + white-space: nowrap; + text-overflow: ellipsis; + + @include responsive.mobile-only { + margin: auto 0; + font-size: 14px; + line-height: 16px; + } +} + +.epgProgramText { + overflow: hidden; + color: theme.$epg-text-color; + font-family: var(--body-font-family); + font-size: 14px; + line-height: 16px; + white-space: nowrap; + text-overflow: ellipsis; + + @include responsive.mobile-only { + margin-top: auto; + font-size: 12px; + line-height: 14px; + } +} + +.epgProgramImage { + width: 100px; + margin-right: variables.$base-spacing; + border-radius: 4px; +} diff --git a/src/components/EpgProgramItem/EpgProgramItem.tsx b/src/components/EpgProgramItem/EpgProgramItem.tsx new file mode 100644 index 000000000..9566bc321 --- /dev/null +++ b/src/components/EpgProgramItem/EpgProgramItem.tsx @@ -0,0 +1,64 @@ +import React from 'react'; +import { Program, useProgram } from 'planby'; +import classNames from 'classnames'; +import { useTranslation } from 'react-i18next'; + +import styles from './EpgProgramItem.module.scss'; + +type Props = { + program: Program; + onClick?: (program: Program) => void; + isActive: boolean; + compact: boolean; + disabled: boolean; + isBaseTimeFormat: boolean; +}; + +const ProgramItem: React.VFC = ({ program, onClick, isActive, compact, disabled, isBaseTimeFormat }) => { + const { + styles: { position }, + formatTime, + set12HoursTimeFormat, + isLive, + isMinWidth, + } = useProgram({ + program, + isBaseTimeFormat, + }); + + const { t } = useTranslation('common'); + const { data } = program; + const { image, title, since, till } = data; + + const sinceTime = formatTime(since, set12HoursTimeFormat()).toLowerCase(); + const tillTime = formatTime(till, set12HoursTimeFormat()).toLowerCase(); + + const showImage = !compact && isMinWidth; + const showLiveTagInImage = !compact && isMinWidth && isLive; + + return ( +
onClick && onClick(program)}> +
+ {showImage && Preview} + {showLiveTagInImage &&
{t('live')}
} +
+ {compact && isLive &&
{t('live')}
} +

{title}

+ + {sinceTime} - {tillTime} + +
+
+
+ ); +}; + +export default ProgramItem; diff --git a/src/components/EpgTimeline/EpgTimeline.module.scss b/src/components/EpgTimeline/EpgTimeline.module.scss new file mode 100644 index 000000000..512eab7b4 --- /dev/null +++ b/src/components/EpgTimeline/EpgTimeline.module.scss @@ -0,0 +1,49 @@ +@use '../../styles/variables'; +@use '../../styles/theme'; + +.timelineBox { + position: relative; + font-size: 14px; + + &:first-child { + > .timelineTime { + left: -2px; + } + } +} + +.timelineTime { + position: absolute; + top: 12px; + left: -18px; + color: variables.$white; +} + +.timelineContainer { + position: sticky; + top: 0; + display: flex; + height: 60px; +} + +.timelineDividers { + display: grid; + align-items: end; + width: 100%; + height: 100%; + padding-bottom: 8px; + grid-template-columns: repeat(4, 1fr); +} + +.timelineDivider { + width: 1px; + height: 6px; + margin-right: 10px; + background: variables.$white; + + &:first-child { + width: 2px; + height: 12px; + margin-top: 50%; + } +} diff --git a/src/components/EpgTimeline/EpgTimeline.tsx b/src/components/EpgTimeline/EpgTimeline.tsx new file mode 100644 index 000000000..e4004fa53 --- /dev/null +++ b/src/components/EpgTimeline/EpgTimeline.tsx @@ -0,0 +1,35 @@ +import React from 'react'; +import { useTimeline } from 'planby'; + +import styles from './EpgTimeline.module.scss'; + +type Props = { + isBaseTimeFormat: boolean; + isSidebar: boolean; + dayWidth: number; + hourWidth: number; + numberOfHoursInDay: number; + offsetStartHoursRange: number; + sidebarWidth: number; +}; + +const EpgTimeline: React.VFC = ({ isBaseTimeFormat, dayWidth, hourWidth, numberOfHoursInDay, offsetStartHoursRange, isSidebar, sidebarWidth }) => { + const { time, dividers, formatTime } = useTimeline(numberOfHoursInDay, isBaseTimeFormat); + + const renderDividers = () => dividers.map((_, index) =>
); + + const renderTime = (index: number) => ( +
+ +
{renderDividers()}
+
+ ); + + return ( +
+ {time.map((_, index) => renderTime(index))} +
+ ); +}; + +export default EpgTimeline; diff --git a/src/components/Favorites/Favorites.test.tsx b/src/components/Favorites/Favorites.test.tsx index 12f2f9567..766879442 100644 --- a/src/components/Favorites/Favorites.test.tsx +++ b/src/components/Favorites/Favorites.test.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { PersonalShelf } from '../../enum/PersonalShelf'; -import PlaylistContainer from '../../containers/Playlist/PlaylistContainer'; +import PlaylistContainer from '../../containers/PlaylistContainer/PlaylistContainer'; import Favorites from './Favorites'; diff --git a/src/components/Modal/Modal.module.scss b/src/components/Modal/Modal.module.scss index fc5a6a79a..a03976f13 100644 --- a/src/components/Modal/Modal.module.scss +++ b/src/components/Modal/Modal.module.scss @@ -6,6 +6,7 @@ position: fixed; top: 0; left: 0; + z-index: variables.$modals-z-index; width: 100vw; height: calc(100vh - calc(100vh - 100%)); } diff --git a/src/components/Player/Player.module.scss b/src/components/Player/Player.module.scss new file mode 100644 index 000000000..cbe226cbc --- /dev/null +++ b/src/components/Player/Player.module.scss @@ -0,0 +1,4 @@ +.container { + width: 100%; + height: 100%; +} diff --git a/src/components/Video/Video.test.tsx b/src/components/Player/Player.test.tsx similarity index 53% rename from src/components/Video/Video.test.tsx rename to src/components/Player/Player.test.tsx index 79c561886..5a98cbc25 100644 --- a/src/components/Video/Video.test.tsx +++ b/src/components/Player/Player.test.tsx @@ -1,11 +1,11 @@ import React from 'react'; import { render } from '@testing-library/react'; -import Video from './Video'; +import Player from './Player'; import type { PlaylistItem } from '#types/playlist'; -describe('