├── .github
└── FUNDING.yml
├── .gitignore
├── .npmignore
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── jest.config.js
├── package.json
├── src
├── Epg
│ ├── Epg.tsx
│ ├── __tests__
│ │ └── Epg.test.tsx
│ ├── components
│ │ ├── Channel.tsx
│ │ ├── Channels.tsx
│ │ ├── Layout.tsx
│ │ ├── Line
│ │ │ ├── Line.tsx
│ │ │ └── index.ts
│ │ ├── Loader.tsx
│ │ ├── Program.tsx
│ │ ├── Timeline.tsx
│ │ ├── __tests__
│ │ │ ├── Channel.test.tsx
│ │ │ ├── Layout.test.tsx
│ │ │ └── Program.test.tsx
│ │ └── index.ts
│ ├── helpers
│ │ ├── __tests__
│ │ │ ├── common.test.ts
│ │ │ └── time.test.ts
│ │ ├── common.ts
│ │ ├── enums.ts
│ │ ├── epg.ts
│ │ ├── index.ts
│ │ ├── interfaces.ts
│ │ ├── time.ts
│ │ ├── types.ts
│ │ └── variables.ts
│ ├── hooks
│ │ ├── __tests__
│ │ │ ├── useLayout.test.tsx
│ │ │ ├── useProgram.test.tsx
│ │ │ └── useTimeline.test.tsx
│ │ ├── index.ts
│ │ ├── useEpg.tsx
│ │ ├── useInterval.tsx
│ │ ├── useLayout.tsx
│ │ ├── useLine.tsx
│ │ ├── useProgram.tsx
│ │ └── useTimeline.tsx
│ ├── index.ts
│ ├── styles
│ │ ├── Channel.styles.ts
│ │ ├── Channels.styles.ts
│ │ ├── Epg.styles.ts
│ │ ├── Line.styles.ts
│ │ ├── Loader.styles.ts
│ │ ├── Program.styles.ts
│ │ ├── Timeline.styles.ts
│ │ ├── global.styles.ts
│ │ └── index.ts
│ ├── test
│ │ ├── db
│ │ │ ├── channels.ts
│ │ │ ├── epg.ts
│ │ │ └── index.ts
│ │ ├── helpers.ts
│ │ ├── index.ts
│ │ └── test-utils.tsx
│ └── theme
│ │ ├── emotion.d.ts
│ │ ├── index.ts
│ │ └── theme.ts
└── index.ts
├── tsconfig.json
└── yarn.lock
/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | github: [karolkozer]
2 | open_collective: planby
3 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | *.log
2 | .DS_Store
3 | node_modules
4 | .cache
5 | dist
6 | package-lock.json
7 | yarn.lock
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | /images
2 | /src
3 | jest.config.js
4 | tsconfig.json
5 |
--------------------------------------------------------------------------------
/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
1 | # Code of Conduct - Planby
2 |
3 | ## Our Pledge
4 |
5 | In the interest of fostering an open and welcoming environment, we as
6 | contributors and maintainers pledge to make participation in our project and
7 | our community a harassment-free experience for everyone, regardless of age, body
8 | size, disability, ethnicity, sex characteristics, gender identity and expression,
9 | level of experience, education, socio-economic status, nationality, personal
10 | appearance, race, religion, or sexual identity and orientation.
11 |
12 | ## Our Standards
13 |
14 | Examples of behavior that contributes to a positive environment for our
15 | community include:
16 |
17 | * Demonstrating empathy and kindness toward other people
18 | * Being respectful of differing opinions, viewpoints, and experiences
19 | * Giving and gracefully accepting constructive feedback
20 | * Accepting responsibility and apologizing to those affected by our mistakes,
21 | and learning from the experience
22 | * Focusing on what is best not just for us as individuals, but for the
23 | overall community
24 |
25 | Examples of unacceptable behavior include:
26 |
27 | * The use of sexualized language or imagery, and sexual attention or
28 | advances
29 | * Trolling, insulting or derogatory comments, and personal or political attacks
30 | * Public or private harassment
31 | * Publishing others' private information, such as a physical or email
32 | address, without their explicit permission
33 | * Other conduct which could reasonably be considered inappropriate in a
34 | professional setting
35 |
36 | ## Our Responsibilities
37 |
38 | Project maintainers are responsible for clarifying and enforcing our standards of
39 | acceptable behavior and will take appropriate and fair corrective action in
40 | response to any instances of unacceptable behavior.
41 |
42 | Project maintainers have the right and responsibility to remove, edit, or reject
43 | comments, commits, code, wiki edits, issues, and other contributions that are
44 | not aligned to this Code of Conduct, or to ban
45 | temporarily or permanently any contributor for other behaviors that they deem
46 | inappropriate, threatening, offensive, or harmful.
47 |
48 | ## Scope
49 |
50 | This Code of Conduct applies within all community spaces, and also applies when
51 | an individual is officially representing the community in public spaces.
52 | Examples of representing our community include using an official e-mail address,
53 | posting via an official social media account, or acting as an appointed
54 | representative at an online or offline event.
55 |
56 | ## Enforcement
57 |
58 | Instances of abusive, harassing, or otherwise unacceptable behavior may be
59 | reported to the community leaders responsible for enforcement at .
60 | All complaints will be reviewed and investigated promptly and fairly.
61 |
62 | All community leaders are obligated to respect the privacy and security of the
63 | reporter of any incident.
64 |
65 | ## Attribution
66 |
67 | This Code of Conduct is adapted from the [Contributor Covenant](https://contributor-covenant.org/), version
68 | [1.4](https://www.contributor-covenant.org/version/1/4/code-of-conduct/code_of_conduct.md) and
69 | [2.0](https://www.contributor-covenant.org/version/2/0/code_of_conduct/code_of_conduct.md).
70 |
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | # Contributing to Planby
2 |
3 | First off all, thanks for taking the time to contribute! ❤️
4 |
5 | All types of contributions are encouraged and valued. See the [Table of Contents](#table-of-contents) for different ways to help and details about how this project handles them. Please make sure to read the relevant section before making your contribution. It will make it a lot easier for us maintainers and smooth out the experience for all involved. The community looks forward to your contributions. 🎉
6 |
7 | > And if you like the project, but just don't have time to contribute, that's fine. There are other easy ways to support the project and show your appreciation, which we would also be very happy about:
8 | >
9 | > - Star the project
10 | > - Tweet about it
11 | > - Refer this project in your project's readme
12 | > - Mention the project at local meetups and tell your friends/colleagues
13 |
14 | ## Table of Contents
15 |
16 | - [Code of Conduct](#code-of-conduct)
17 | - [I Have a Question](#i-have-a-question)
18 | - [I Want To Contribute](#i-want-to-contribute)
19 | - [Reporting Bugs](#reporting-bugs)
20 | - [Suggesting Enhancements](#suggesting-enhancements)
21 | - [Your First Code Contribution](#your-first-code-contribution)
22 | - [Improving The Documentation](#improving-the-documentation)
23 | - [Styleguides](#styleguides)
24 | - [Commit Messages](#commit-messages)
25 | - [Join The Project Team](#join-the-project-team)
26 |
27 | ## I Have a Question
28 |
29 | > If you want to ask a question, we assume that you have read the available [Documentation](https://github.com/karolkozer/planby).
30 |
31 | Before you ask a question, it is best to search for existing [Issues](https://github.com/karolkozer/planby/issues) that might help you. In case you have found a suitable issue and still need clarification, you can write your question in this issue. It is also advisable to search the internet for answers first.
32 |
33 | If you then still feel the need to ask a question and need clarification, we recommend the following:
34 |
35 | - Open an [Issue](https://github.com/karolkozer/planby/issues/new).
36 | - Provide as much context as you can about what you're running into.
37 | - Provide project and platform versions (nodejs, npm, etc), depending on what seems relevant.
38 |
39 | We will then take care of the issue as soon as possible.
40 |
41 | ## I Want To Contribute
42 |
43 | ### Reporting Bugs
44 |
45 | #### Before Submitting a Bug Report
46 |
47 | A good bug report shouldn't leave others needing to chase you up for more information. Therefore, we ask you to investigate carefully, collect information and describe the issue in detail in your report. Please complete the following steps in advance to help us fix any potential bug as fast as possible.
48 |
49 | - Make sure that you are using the latest version.
50 | - Determine if your bug is really a bug and not an error on your side e.g. using incompatible environment components/versions (Make sure that you have read the [documentation](https://github.com/karolkozer/planby). If you are looking for support, you might want to check [this section](#i-have-a-question)).
51 | - To see if other users have experienced (and potentially already solved) the same issue you are having, check if there is not already a bug report existing for your bug or error in the [bug tracker](https://github.com/karolkozer/planbyissues?q=label%3Abug).
52 | - Also make sure to search the internet (including Stack Overflow) to see if users outside of the GitHub community have discussed the issue.
53 | - Collect information about the bug:
54 | - Stack trace (Traceback)
55 | - OS, Platform and Version (Windows, Linux, macOS)
56 | - Version of the compiler, runtime environment, package manager, depending on what seems relevant.
57 | - Possibly your input and the output
58 | - Can you reliably reproduce the issue? And can you also reproduce it with older versions?
59 |
60 | We use GitHub issues to track bugs and errors.
61 |
62 | We use GitHub issues to track bugs and errors.
63 |
64 | If you run into an issue with the project:
65 |
66 | - Open an [Issue](https://github.com/karolkozer/planby/issues/new). (Since we can't be sure at this point whether it is a bug or not, we ask you not to talk about a bug yet and not to label the issue.)
67 | - Explain the behavior you would expect and the actual behavior.
68 | - Please provide as much context as possible and describe the _reproduction steps_ that someone else can follow to recreate the issue on their own. This usually includes your code. For good bug reports you should isolate the problem and create a reduced test case.
69 | - Provide the information you collected in the previous section.
70 |
71 | Once it's filed:
72 |
73 | - The project team will label the issue accordingly.
74 | - A team member will try to reproduce the issue with your provided steps. If there are no reproduction steps or no obvious way to reproduce the issue, the team will ask you for those steps and mark the issue as `needs-repro`. Bugs with the `needs-repro` tag will not be addressed until they are reproduced.
75 | - If the team is able to reproduce the issue, it will be marked `needs-fix`, as well as possibly other tags (such as `critical`), and the issue will be left to be [implemented by someone](#your-first-code-contribution).
76 |
77 |
78 |
79 | ### Suggesting Enhancements
80 |
81 | This section guides you through submitting an enhancement suggestion for Planby, **including completely new features and minor improvements to existing functionality**. Following these guidelines will help maintainers and the community to understand your suggestion and find related suggestions.
82 |
83 | #### Before Submitting an Enhancement
84 |
85 | - Make sure that you are using the latest version.
86 | - Read the [documentation](https://github.com/karolkozer/planby) carefully and find out if the functionality is already covered, maybe by an individual configuration.
87 | - Perform a [search](https://github.com/karolkozer/planby/issues) to see if the enhancement has already been suggested. If it has, add a comment to the existing issue instead of opening a new one.
88 | - Find out whether your idea fits with the scope and aims of the project. It's up to you to make a strong case to convince the project's developers of the merits of this feature. Keep in mind that we want features that will be useful to the majority of our users and not just a small subset. If you're just targeting a minority of users, consider writing an add-on/plugin library.
89 |
90 | #### How Do I Submit a Good Enhancement Suggestion?
91 |
92 | Enhancement suggestions are tracked as [GitHub issues](https://github.com/karolkozer/planby/issues).
93 |
94 | - Use a **clear and descriptive title** for the issue to identify the suggestion.
95 | - Provide a **step-by-step description of the suggested enhancement** in as many details as possible.
96 | - **Describe the current behavior** and **explain which behavior you expected to see instead** and why. At this point you can also tell which alternatives do not work for you.
97 | - You may want to **include screenshots and animated GIFs** which help you demonstrate the steps or point out the part which the suggestion is related to. You can use [this tool](https://www.cockos.com/licecap/) to record GIFs on macOS and Windows, and [this tool](https://github.com/colinkeenan/silentcast) or [this tool](https://github.com/GNOME/byzanz) on Linux.
98 | - **Explain why this enhancement would be useful** to most Planby users. You may also want to point out the other projects that solved it better and which could serve as inspiration.
99 |
100 |
101 |
102 | ### Your First Code Contribution
103 |
104 |
108 |
109 | ### Improving The Documentation
110 |
111 |
115 |
116 | ## Styleguides
117 |
118 | ### Commit Messages
119 |
120 |
123 |
124 | ## Join The Project Team
125 |
126 |
127 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | Custom License - All Rights Reserved
2 |
3 | Copyright (c) 2025 Nessprim Karol Kozer
4 |
5 | Operator hereby grants a non-exclusive, free of charge, non-transferable license i.e. without the right to grant sublicense to use the Software.
6 | The license does not authorize the Company or the User to use the Software for purposes other than use the Software with intended purpose.
7 |
8 | The Company and the User has no right to reproduce, sell or otherwise market or distribute the Software in whole or in part, in any form, in particular, transmit or make available in computer systems and networks, or any other communication.
9 |
10 | It’s not allowed:
11 |
12 | 1. repeated and systematic downloading or re-using of information from the Software, contrary to normal use and resulting in an unjustified violation of the Operator’s legitimate interests;
13 | 2. repeated and systematic downloading or re-using contrary to normal use and resulting in an unjustified violation of the legitimate interests of the Operator;
14 | 3. copying parts of the database beyond normal personal use.
15 |
16 | THE PLATFORM IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
21 | OUT OF OR IN CONNECTION WITH THE PLATFORM OR THE USE OR OTHER DEALINGS IN THE
22 | PLATFORM.
23 |
24 | The above note is only a shortened version. Its full version is presented in the Terms & Conditions and should be interpreted and applied in accordance with their content.
25 |
26 | This license does not grant you any rights to trademarks, service marks, or
27 | any other intellectual property of the author. For any specific licensing
28 | needs or questions regarding this license, please contact the author.
29 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
6 |
7 |
19 |
20 | # 🔥 An exclusive new experience — React Native support is on its way to Planby! 🔥
21 |
22 | ## React Native: To request beta access, email us at contact@planby.app with your position and company name.
23 |
24 | ## Description
25 |
26 | Planby is a React based component for a quick implementation of Epg, schedules, live streaming, music events, timelines and many more ideas. It uses a custom virtual view which allows you to operate on a really big number of data. The component has a simple API that you can easily integrate with other third party UI libraries. The component theme is customised to the needs of the application design.
27 |
28 |
33 |
38 |
43 |
48 |
49 | ## Codesandbox example
50 |
51 | [Live example - Codesandbox](https://codesandbox.io/s/5o3tsy)
52 |
53 | [Live example - Typescript Codesandbox](https://codesandbox.io/s/planby-epg-demo-ts-lp66v5)
54 |
55 | [Live example - website with control panel](https://planby.netlify.app/)
56 |
57 | ## Testimonials
58 |
59 |
64 |
69 |
70 | ## 🚀 [Become a Sponsor!](https://opencollective.com/planby) 🚀
71 |
72 | Become a sponsor, support, and help us in continuing our development. -> [Opencollective](https://opencollective.com/planby)
73 |
74 | ## Getting Started
75 |
76 | ### Installation
77 |
78 | - yarn
79 |
80 | ```sh
81 | yarn add planby
82 | ```
83 |
84 | - npm
85 |
86 | ```sh
87 | npm install planby
88 | ```
89 |
90 | ## Usage
91 |
92 | ```tsx
93 | import { useEpg, Epg, Layout } from 'planby';
94 |
95 | const channels = React.useMemo(
96 | () => [
97 | {
98 | logo: 'https://via.placeholder.com',
99 | uuid: '10339a4b-7c48-40ab-abad-f3bcaf95d9fa',
100 | ...
101 | },
102 | ],
103 | []
104 | );
105 |
106 | const epg = React.useMemo(
107 | () => [
108 | {
109 | channelUuid: '30f5ff1c-1346-480a-8047-a999dd908c1e',
110 | description:
111 | 'Ut anim nisi consequat minim deserunt...',
112 | id: 'b67ccaa3-3dd2-4121-8256-33dbddc7f0e6',
113 | image: 'https://via.placeholder.com',
114 | since: "2022-02-02T23:50:00",
115 | till: "2022-02-02T00:55:00",
116 | title: 'Title',
117 | ...
118 | },
119 | ],
120 | []
121 | );
122 |
123 | const {
124 | getEpgProps,
125 | getLayoutProps,
126 | onScrollToNow,
127 | onScrollLeft,
128 | onScrollRight,
129 | } = useEpg({
130 | epg,
131 | channels,
132 | startDate: '2022-02-02T00:00:00'
133 | });
134 |
135 | return (
136 |
137 |
138 |
139 |
142 |
143 |
144 |
167 |
168 |
171 |
172 |
173 |
174 | ```
175 |
176 | or
177 |
178 | #### Time range
179 |
180 | ```tsx
181 | const {
182 | getEpgProps,
183 | getLayoutProps,
184 | ...
185 | } = useEpg({
186 | epg,
187 | channels,
188 | startDate: '2022-02-02T10:00:00',
189 | endDate: '2022-02-02T20:00:00',
190 | width: 1200,
191 | height: 600
192 | });
193 |
194 | return (
195 |
196 |
197 |
200 |
201 |
202 |
203 | ```
204 |
205 | ## API
206 |
207 | ### useEpg
208 |
209 | #### Options
210 |
211 | Available options in useEpg
212 |
213 | | Property | Type | Status | Description | Access |
214 | | ------------------------ | --------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------ |
215 | | `channels` | `array` | required | Array with channels data | |
216 | | `epg` | `array` | required | Array with EPG data | |
217 | | `width` | `number` | optional | EPG width | |
218 | | `height` | `number` | optional | EPG height | |
219 | | `sidebarWidth` | `number` | optional | Width of the sidebar with channels | |
220 | | `timelineHeight` | `number` | optional | Height of the timeline | `PRO` |
221 | | `itemHeight` | `number` | optional | Height of channels and programs in the EPG. Default value is 80 | |
222 | | `dayWidth` | `number` | optional | Width of the day. Default value is 7200. Calculation to set up day width with own hour width value e.g., 24h \* 300px (your custom hour width) = 7200px -> `dayWidth` | |
223 | | `startDate` | `string` | optional | Date format `2022/02/02` or `2022-02-02T00:00:00`. You can set your own start time, e.g., `2022-02-02T10:00:00`, `2022-02-02T14:00:00`, etc. Full clock hours only | |
224 | | `endDate` | `string` | optional | Date format `2022-02-02T00:00:00`, `2022-02-02T20:00:00`, etc. Must be within the same 24-hour period as `startDate`. Full clock hours only. Scroll through `multiple days` and timeline mode is available only in `PRO` plan. | `PRO` |
225 | | `hoursInDays` | `array` | optional | Set start time and end time of each day in `multiple days` feature if your data for each day has some time spaces between items in the day. | `PRO` |
226 | | `initialScrollPositions` | `object` | optional | Set initial scroll position in Layout, e.g., `initialScrollPositions: { top: 500, left: 800 }` | `PRO` |
227 | | `liveRefreshTime` | `number` | optional | Live refresh time of the events. Default value is 120 sec. | `PRO` |
228 | | `isBaseTimeFormat` | `boolean` | optional | Convert to 12-hour format, e.g., `2:00am`, `4:00pm`, etc. Default value is false. | |
229 | | `isCurrentTime` | `boolean` | optional | Show current time in Timeline. Default value is false. | `PRO` |
230 | | `isInitialScrollToNow` | `boolean` | optional | Scroll to the current live element. | `PRO` |
231 | | `isVerticalMode` | `boolean` | optional | Show Timeline in vertical view. Default value is false. | `PRO` |
232 | | `isResize` | `boolean` | optional | Possibility to resize the element. | `PRO` |
233 | | `isSidebar` | `boolean` | optional | Show/hide sidebar | |
234 | | `isTimeline` | `boolean` | optional | Show/hide timeline | |
235 | | `isLine` | `boolean` | optional | Show/hide line | |
236 | | `isRTL` | `boolean` | optional | Change direction to RTL or LTR. Default value is false. | `PRO` |
237 | | `theme` | `object` | optional | Object with theme schema | |
238 | | `timezone` | `object` | optional | Convert and display data from UTC format to your own time zone | `PRO` |
239 | | `areas` | `array` | optional | Area gives possibilities to add field ranges to the Timeline layout. | `PRO` |
240 | | `mode` | `object` | optional | Type values: `day/week/month`. Style values: `default/modern` Define the mode and style of the timeline. Default mode is `day` and style is `default` | `PRO` |
241 | | `overlap` | `object` | optional | Enable the element overlaps in the layout. Mode values: `stack/layer`, layerOverlapLevel: `number` | `PRO` |
242 | | `drag and drop` | `object` | optional | Drag and move the element in the layout. Mode values: `row/multi-rows` | `PRO` |
243 | | `grid layout` | `object` | optional | Background grid on the layout. Mode hoverHighlight values: `true/false`, onGridItemClick: function with all the properties on clicked item grid | `PRO` |
244 | | `channelMapKey` | `string` | optional | The Channel `uuid` attribute can be controlled by prop. Key map gives a possibilities to use specific prop from own data instead of needing to map to uuid in own data | `PRO` |
245 | | `programChannelMapKey` | `string` | optional | The Programs `channelUuid` attributes can be controlled by prop. Key map gives a possibilities to use a specific prop from own data instead of needing to map to channelUuid in your data | `PRO` |
246 | | `globalStyles` | `string` | optional | Inject custom global styles and font. Font weight: 400,500,600. Default font is "Inter" | `PRO` |
247 |
248 | #### Note about width and height props
249 |
250 | Without declaring the `width` and `length` properties, the component takes the dimensions of the parent element.
251 |
252 | #### globalStyles
253 |
254 | Inject own custom font and other global styles.
255 |
256 | ```tsx
257 | const globalStyles = `
258 | @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap");
259 |
260 | /* Available in PRO plan */
261 | .planby {
262 | font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica,
263 | Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
264 |
265 | /* Layout */
266 | .planby-layout {}
267 |
268 | /* Line */
269 | .planby-line {}
270 |
271 | /* Current time */
272 | .planby-current-time {}
273 | .planby-current-content {}
274 |
275 | /* Channels */
276 | .planby-channels {}
277 |
278 | /* Channel */
279 | .planby-channel {}
280 |
281 | /* Program */
282 | .planby-program {}
283 | .planby-program-content {}
284 | .planby-program-flex {}
285 | .planby-program-stack {}
286 | .planby-program-title {}
287 | .planby-program-text {}
288 |
289 | /* Timeline */
290 | .planby-timeline-wrapper {}
291 | .planby-timeline-box {}
292 | .planby-timeline-time {}
293 | .planby-timeline-dividers {}
294 | .planby-timeline-wrapper {}
295 | }
296 |
297 | `;
298 | ```
299 |
300 | #### Instance Properties
301 |
302 | Properties returned from useEpg
303 |
304 | | Property | Type | Description |
305 | | --------------- | ------------------------- | ------------------------------------ |
306 | | `scrollY` | `number` | Current scroll y value |
307 | | `scrollX` | `number` | Current scroll x value |
308 | | `onScrollLeft` | `function(value: number)` | Default value is 300 |
309 | | `onScrollRight` | `function(value: number)` | Default value is 300 |
310 | | `onScrollToNow` | `function()` | Scroll to current time/live programs |
311 | | `onScrollTop` | `function(value: number)` | Default value is 300 |
312 |
313 | ### Channel schema
314 |
315 | | Property | Type | Status |
316 | | -------- | -------- | -------- |
317 | | `logo` | `string` | required |
318 | | `uuid` | `string` | required |
319 |
320 | ### Epg schema
321 |
322 | | Property | Type | Status | Description | Access |
323 | | ----------------- | --------- | -------- | -------------------------------------------------------------------- | -------- |
324 | | `channelUuid` | `string` | required |
325 | | `id` | `string` | required |
326 | | `image` | `string` | required |
327 | | `since` | `string` | required |
328 | | `till` | `string` | required |
329 | | `title` | `string` | required |
330 | | `fixedVisibility` | `boolean` | optional | The element is always visible in the layout during the scroll events | Sponsors |
331 |
332 | ### Epg
333 |
334 | #### Base props
335 |
336 | Available props in Epg
337 |
338 | | Property | Type | Description | Status |
339 | | ----------- | ----------- | ----------------------- | -------- |
340 | | `isLoading` | `boolean` | Loader state | optional |
341 | | `loader` | `Component` | Loader custom component | optional |
342 |
343 | ### Layout
344 |
345 | #### Base props
346 |
347 | Available props in Layout.
348 |
349 | | Property | Type | Description | Status | Access |
350 | | ------------------- | ------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- | -------- | ---------- |
351 | | `renderProgram` | `function({ program: { data: object, position: object})` | `data` object contains all properties related to the program, `position` object includes all position styles | optional |
352 | | `renderChannel` | `function({ channel: { ..., position: object})` | `channel` object contains all properties related to the channel, `position` object includes all position styles | optional |
353 | | `renderTimeline` | `function({sidebarWidth: number})` | `sidebarWidth` value of the channel's sidebar width | optional |
354 | | `renderLine` | `function({styles: object})` | basic `styles` and `position` values for the custom live tracking Line | optional | `Sponsors` |
355 | | `renderCurrentTime` | `function({styles: object, isRTL: boolean, isBaseTimeFormat: boolean, time: string})` | basic `styles` values for the custom current time | optional | `Sponsors` |
356 |
357 | # Render functions
358 |
359 | You can use Plaby's style components to develop main features. Moreover, you can integrate with third party UI library eg. Chakra UI, Material UI etc or make custom styles.
360 |
361 | ## renderProgram
362 |
363 | Below is an example that allows you to render your custom Program component using Plaby's style components.
364 |
365 | ```tsx
366 | import {
367 | useEpg,
368 | Epg,
369 | Layout,
370 | ProgramBox,
371 | ProgramContent,
372 | ProgramFlex,
373 | ProgramStack,
374 | ProgramTitle,
375 | ProgramText,
376 | ProgramImage,
377 | useProgram,
378 | Program,
379 | ProgramItem
380 | } from "planby";
381 |
382 |
383 | const Item = ({ program,...rest }: ProgramItem) => {
384 | const { styles, formatTime, isLive, isMinWidth } = useProgram({ program,...rest });
385 |
386 | const { data } = program;
387 | const { image, title, since, till } = data;
388 |
389 | const sinceTime = formatTime(since);
390 | const tillTime = formatTime(till);
391 |
392 | return (
393 |
394 |
398 |
399 | {isLive && isMinWidth && }
400 |
401 | {title}
402 |
403 | {sinceTime} - {tillTime}
404 |
405 |
406 |
407 |
408 |
409 | );
410 | };
411 |
412 | function App() {
413 |
414 | ...
415 |
416 | const {
417 | getEpgProps,
418 | getLayoutProps,
419 | } = useEpg({
420 | epg,
421 | channels,
422 | startDate: '2022/02/02', // or 2022-02-02T00:00:00
423 | });
424 |
425 | return (
426 |
427 |
428 |
429 | (
432 |
437 |
618 |
619 |
620 | (
623 |
624 | )}
625 | />
626 |
627 |
628 |
712 |
713 |
714 | }
717 | />
718 |
719 |
720 |
43 | {/* @ts-ignore:next-line */}
44 |
45 |
46 |
47 |
48 | );
49 |
50 | const container = screen.getByTestId("container");
51 |
52 | expect(container).toBeInTheDocument();
53 | expect(container).toHaveStyle(`height: 100%; width: 100%`);
54 |
55 | const timeline = screen.getByTestId("timeline");
56 | const inTimeline = within(timeline);
57 | expect(timeline).toBeInTheDocument();
58 | expect(inTimeline.getByText("00:00")).toBeInTheDocument();
59 | expect(inTimeline.getAllByTestId("timeline-item")).toHaveLength(24);
60 |
61 | const sidebar = screen.getByTestId("sidebar");
62 | const inSidebar = within(sidebar);
63 | expect(sidebar).toBeInTheDocument();
64 | expect(inSidebar.getAllByTestId("sidebar-item")).toHaveLength(1);
65 | expect(inSidebar.getByRole("img", { name: /logo/i })).toHaveAttribute(
66 | "src",
67 | layoutProps.channels[0].logo
68 | );
69 |
70 | const content = screen.getByTestId("content");
71 | const inContent = within(content);
72 | expect(content).toBeInTheDocument();
73 | expect(inContent.getAllByTestId("program-item")).toHaveLength(1);
74 |
75 | const firstProgram = inContent.getAllByTestId("program-item")[0];
76 | expect(firstProgram).toHaveTextContent(layoutProps.programs[0].data.title);
77 | expect(firstProgram).toHaveStyle(
78 | `top: ${layoutProps.programs[0].position.top}px`
79 | );
80 | expect(firstProgram).toHaveStyle(
81 | `width: ${layoutProps.programs[0].position.width}px`
82 | );
83 | });
84 |
85 | test("should set initial Epg props", () => {
86 | const epgOptions = getEpgProps({ width: 1000, height: 600 });
87 | const layoutOptions = {
88 | dayWidth: 7200,
89 | startDate: getTestTimeDate("01"),
90 | endDate: getTestTimeDate("23"),
91 | hourWidth: 300,
92 | isBaseTimeFormat: true,
93 | numberOfHoursInDay: 22,
94 | offsetStartHoursRange: 1,
95 | };
96 | renderEpg({
97 | epgOptions,
98 | layoutOptions,
99 | sliceNumber: 10,
100 | });
101 |
102 | const container = screen.getByTestId("container");
103 | expect(container).toBeInTheDocument();
104 | expect(container).toHaveStyle(`height: 600px; width: 1000px`);
105 |
106 | const timeline = screen.getByTestId("timeline");
107 | const inTimeline = within(timeline);
108 | expect(timeline).toBeInTheDocument();
109 | expect(inTimeline.queryByText("00:00")).not.toBeInTheDocument();
110 | expect(inTimeline.getByText("1:00am")).toBeInTheDocument();
111 | expect(inTimeline.getAllByTestId("timeline-item")).toHaveLength(22);
112 | expect(inTimeline.getAllByTestId("timeline-item")[0]).toHaveStyle(
113 | `width: ${layoutOptions.hourWidth}px`
114 | );
115 |
116 | const content = screen.getByTestId("content");
117 | expect(content).toHaveStyle(`width: ${layoutOptions.dayWidth}px`);
118 | });
119 |
120 | test("should show loader in Epg layout", () => {
121 | const epgOptions = getEpgProps({ isLoading: true });
122 | renderEpg({ epgOptions });
123 |
124 | expect(screen.getByLabelText(/loading/i)).toBeInTheDocument();
125 | });
126 |
--------------------------------------------------------------------------------
/src/Epg/components/Channel.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 |
3 | // Import interfaces
4 | import { ChannelWithPosition } from "../helpers/types";
5 |
6 | // Import styles
7 | import { ChannelStyled } from "../styles";
8 |
9 | interface ChannelProps {
10 | channel: T;
11 | onClick?: (v: ChannelWithPosition) => void;
12 | }
13 |
14 | const { ChannelBox, ChannelLogo } = ChannelStyled;
15 |
16 | export function Channel({
17 | channel,
18 | onClick,
19 | ...rest
20 | }: ChannelProps) {
21 | const { position, logo } = channel;
22 | return (
23 | onClick?.(channel)}
26 | {...position}
27 | {...rest}
28 | >
29 |
30 |
31 | );
32 | }
33 |
--------------------------------------------------------------------------------
/src/Epg/components/Channels.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | // Import interfaces
3 | import { ChannelWithPosition } from "../helpers/types";
4 |
5 | // Import styles
6 | import { ChannelsStyled } from "../styles";
7 |
8 | // Import Components
9 | import { Channel } from "../components";
10 |
11 | interface ChannelsProps {
12 | isTimeline: boolean;
13 | isRTL: boolean;
14 | isChannelVisible: (position: any) => boolean;
15 | channels: ChannelWithPosition[];
16 | scrollY: number;
17 | sidebarWidth: number;
18 | renderChannel?: (v: { channel: ChannelWithPosition }) => React.ReactNode;
19 | }
20 |
21 | const { Box } = ChannelsStyled;
22 |
23 | export function Channels(props: ChannelsProps) {
24 | const { channels, scrollY, sidebarWidth, renderChannel } = props;
25 | const { isRTL, isTimeline, isChannelVisible } = props;
26 |
27 | const renderChannels = (channel: ChannelWithPosition) => {
28 | const isVisible = isChannelVisible(channel.position);
29 | if (isVisible) {
30 | if (renderChannel) return renderChannel({ channel });
31 | return ;
32 | }
33 | return null;
34 | };
35 |
36 | return (
37 |
44 | {channels.map(renderChannels)}
45 |
46 | );
47 | }
48 |
--------------------------------------------------------------------------------
/src/Epg/components/Layout.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | // Import types
4 | import {
5 | ProgramItem,
6 | ProgramWithPosition,
7 | ChannelWithPosition,
8 | DateTime,
9 | Position,
10 | BaseTimeFormat,
11 | } from "../helpers/types";
12 |
13 | // Import helpers
14 | import { getProgramOptions, isFutureTime } from "../helpers";
15 |
16 | // Import styles
17 | import { EpgStyled } from "../styles";
18 |
19 | // Import components
20 | import { Timeline, Channels, Program, Line } from "../components";
21 |
22 | interface RenderTimeline {
23 | isBaseTimeFormat: BaseTimeFormat;
24 | isSidebar: boolean;
25 | isRTL: boolean;
26 | sidebarWidth: number;
27 | hourWidth: number;
28 | numberOfHoursInDay: number;
29 | offsetStartHoursRange: number;
30 | dayWidth: number;
31 | }
32 |
33 | interface LayoutProps {
34 | programs: ProgramItem[];
35 | channels: ChannelWithPosition[];
36 | startDate: DateTime;
37 | endDate: DateTime;
38 | scrollY: number;
39 | dayWidth: number;
40 | hourWidth: number;
41 | numberOfHoursInDay: number;
42 | offsetStartHoursRange: number;
43 | sidebarWidth: number;
44 | itemHeight: number;
45 | ref: React.RefObject;
46 | onScroll: (
47 | e: React.UIEvent & { target: Element }
48 | ) => void;
49 | isRTL?: boolean;
50 | isBaseTimeFormat?: BaseTimeFormat;
51 | isSidebar?: boolean;
52 | isTimeline?: boolean;
53 | isLine?: boolean;
54 | isProgramVisible: (position: Position) => boolean;
55 | isChannelVisible: (position: Pick) => boolean;
56 | renderProgram?: (v: {
57 | program: ProgramItem;
58 | isRTL: boolean;
59 | isBaseTimeFormat: BaseTimeFormat;
60 | }) => React.ReactNode;
61 | renderChannel?: (v: { channel: ChannelWithPosition }) => React.ReactNode;
62 | renderTimeline?: (v: RenderTimeline) => React.ReactNode;
63 | }
64 |
65 | const { ScrollBox, Content } = EpgStyled;
66 |
67 | export const Layout =
68 | ({ ref: scrollBoxRef, ...props }: LayoutProps) => {
69 | const { channels, programs, startDate, endDate, scrollY } = props;
70 | const { dayWidth, hourWidth, sidebarWidth, itemHeight } = props;
71 | const { numberOfHoursInDay, offsetStartHoursRange } = props;
72 | const {
73 | isSidebar = true,
74 | isTimeline = true,
75 | isLine = true,
76 | isBaseTimeFormat = false,
77 | isRTL = false,
78 | } = props;
79 |
80 | const {
81 | onScroll,
82 | isProgramVisible,
83 | isChannelVisible,
84 | renderProgram,
85 | renderChannel,
86 | renderTimeline,
87 | } = props;
88 |
89 | const channelsLength = channels.length;
90 | const contentHeight = React.useMemo(() => channelsLength * itemHeight, [
91 | channelsLength,
92 | itemHeight,
93 | ]);
94 | const isFuture = isFutureTime(endDate);
95 |
96 | const renderPrograms = (program: ProgramWithPosition) => {
97 | const { position } = program;
98 | const isVisible = isProgramVisible(position);
99 |
100 | if (isVisible) {
101 | const options = getProgramOptions(program);
102 | if (renderProgram)
103 | return renderProgram({
104 | program: options,
105 | isRTL,
106 | isBaseTimeFormat,
107 | });
108 | return (
109 |
115 | );
116 | }
117 | return null;
118 | };
119 |
120 | const renderTopbar = () => {
121 | const props = {
122 | sidebarWidth,
123 | isSidebar,
124 | isRTL,
125 | dayWidth,
126 | numberOfHoursInDay,
127 | };
128 | const timeProps = {
129 | offsetStartHoursRange,
130 | numberOfHoursInDay,
131 | isBaseTimeFormat,
132 | hourWidth,
133 | };
134 | if (renderTimeline) {
135 | return renderTimeline({ ...timeProps, ...props });
136 | }
137 | return ;
138 | };
139 |
140 | return (
141 |
142 | {isLine && isFuture && (
143 |
151 | )}
152 | {isTimeline && renderTopbar()}
153 | {isSidebar && (
154 |
163 | )}
164 |
171 | {programs.map((program) =>
172 | renderPrograms(program as ProgramWithPosition)
173 | )}
174 |
175 |
176 | );
177 | }
178 |
--------------------------------------------------------------------------------
/src/Epg/components/Line/Line.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { isToday } from "date-fns";
3 |
4 | // Import types
5 | import { DateTime } from "../../helpers/types";
6 |
7 | // Import styles
8 | import { LineStyled } from "../../styles";
9 |
10 | // Import components
11 | import { useLine } from "../../hooks/useLine";
12 |
13 | interface LineProps {
14 | height: number;
15 | startDate: DateTime;
16 | endDate: DateTime;
17 | dayWidth: number;
18 | hourWidth: number;
19 | sidebarWidth: number;
20 | }
21 |
22 | const { Box } = LineStyled;
23 |
24 | export function Line({
25 | height,
26 | startDate,
27 | endDate,
28 | dayWidth,
29 | hourWidth,
30 | sidebarWidth,
31 | }: LineProps) {
32 | const { positionX } = useLine({
33 | startDate,
34 | endDate,
35 | dayWidth,
36 | hourWidth,
37 | sidebarWidth,
38 | });
39 |
40 | const date = new Date(startDate);
41 | if (!isToday(date)) return null;
42 |
43 | return ;
44 | }
45 |
--------------------------------------------------------------------------------
/src/Epg/components/Line/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./Line";
2 |
--------------------------------------------------------------------------------
/src/Epg/components/Loader.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { theme } from "../theme/theme";
3 |
4 | // Import styles
5 | import { LoaderStyled } from "../styles";
6 |
7 | const { Box, Shape } = LoaderStyled;
8 |
9 | const Element = ({
10 | width,
11 | color,
12 | animate,
13 | marginRight,
14 | transition,
15 | }: {
16 | width: number;
17 | color: string;
18 | transition: { duration: number; ease?: string; delay?: number };
19 | animate: { right: string[] };
20 | marginRight?: number;
21 | }) => (
22 |
30 | );
31 |
32 | export function Loader() {
33 | return (
34 |
35 |
36 |
39 |
50 |
61 |
62 |
65 |
76 |
77 |
78 |
90 |
101 |
102 |
4 |
5 | 
31 |
32 | 
36 |
37 | 
41 |
42 | 
46 |
47 | 
62 |
63 | 
67 |
68 | 
10 | 
16 | 