@24i/bigscreen-sdk 0.9.9-alpha.2147

package/packages/epg/src/v2/interface.ts

@@ -0,0 +1,1489 @@
+import { Reference, Component, Children } from '@24i/bigscreen-sdk/jsx';
+import { IFocusable } from '@24i/bigscreen-sdk/focus';
+import { ModalService } from '@24i/bigscreen-sdk/modal-service';
+import { IEvents, EventMapType } from '@24i/bigscreen-sdk/events-manager';
+import { Asset } from '@24i/smartapps-datalayer/models';
+import { ICheckbox, PickerMode } from '@24i/bigscreen-sdk/picker';
+
+// MARK: Shared Props (alphabetical order)
+
+type AdditionalRowsProp = {
+    /**
+     * The number of rows that are rendered at the bottom below navigatable rows
+     * These can get covered sometimes by ProgramInfo for example
+     */
+    additionalRows: number,
+};
+
+type ChannelDataProp = {
+    /**
+     * An array with channel data
+     */
+    channelData: Asset[],
+};
+
+type ChannelHeaderWidthPxProp = {
+    /**
+     * The width of the channel header column in pixels
+     */
+    channelHeaderWidthPx: number,
+};
+
+type ChannelLessOnFocusChangeProp<T extends Program> = {
+    /**
+     * Called every time focus moves to different cell (even after mouse focuses the cell)
+     */
+    onFocusChange: ChannelLessFocusChangeCallback<T>,
+};
+
+type ChannelLessOnItemPressProp<T extends Program> = {
+    /**
+     * Called after pressing any item with data (not loading ones)
+     */
+    onItemPress: ChannelLessItemPressCallback<T>,
+};
+
+type DataGetterProp = {
+    dataGetter: (range: DataRange) => Asset[],
+};
+
+type DataProp = {
+    /**
+     * A Data Manager
+     */
+    data: DataManager,
+};
+
+type DataManagersProp = {
+    /**
+     * An array of Data Managers
+     */
+    dataManagers: DataManager[],
+};
+
+type DatePickerProp = {
+    /**
+     * Props for the DatePicker component
+     * If omitted the Day component will be rendered instead
+     */
+    datePickerProps: OutsideDatePickerProps,
+};
+
+type FetchProgramsProp = {
+    /**
+     * Function called by EPG to fetch more data for a channel
+     */
+    fetchPrograms: ProgramsFetcher,
+};
+
+type InitialChannelIndexProp = {
+    /**
+     * The initial index in the channels list that should be scrolled to and focus after
+     * rendering the EPG
+     */
+    initialChannelIndex: number,
+};
+
+type InitialTimestampProp = {
+    /**
+     * The initial timestamp that should be used to render in the center of the EPG
+     */
+    initialTimestamp: number,
+};
+
+type IsLoadingProp = {
+    /**
+     * Flag to distinguish a cell that is intended to be used only for loading placeholder purposes
+     */
+    isLoading: boolean,
+};
+
+type ItemProp = {
+    /**
+     * Data for the program
+     */
+    item: Asset,
+};
+
+type LimitFromMsProp = {
+    /**
+     * The lowest timestamp in ms that can be navigated by EPG
+     * Render, as well as fetch, can go slightly more into history
+     */
+    limitFromMs: number,
+};
+
+type LimitToMsProp = {
+    /**
+     * The highest timestamp in ms that can be navigated by EPG
+     * Render, as well as fetch, can go slightly more into future
+     */
+    limitToMs: number,
+};
+
+type NavigatableRowsProp = {
+    /**
+     * The number of rows that can be navigated with focus up/down
+     */
+    navigatableRows: number,
+};
+
+type OnFocusChangeProp<T extends Program> = {
+    /**
+     * Called every time focus moves to different cell (even after mouse focuses the cell)
+     */
+    onFocusChange: FocusChangeCallback<T>,
+};
+
+type OnItemPressProp<T extends Program> = {
+    /**
+     * Called after pressing any item with data (not loading ones)
+     */
+    onItemPress: ItemPressCallback<T>,
+};
+
+type OnMouseEnterProp = {
+    /**
+     * onMouseEnter listener used only on the inside to synchronize keyboard and mouse navigation
+     */
+    onMouseEnter: (data: Asset | undefined) => void,
+};
+
+type OnScrolledToTimestampProp = {
+    /**
+     * Callback for scrolling left/right
+     * @param timestamp Current timestamp of the center of the EPG in milliseconds
+     */
+    onScrolledToTimestamp: (timestamp: number) => void,
+};
+
+type PixelInMsProp = {
+    /**
+     * The ratio between pixels and milliseconds used in the EPG
+     */
+    pixelInMs: number,
+};
+
+type PluginsProp<T extends Program> = {
+    /**
+     * Prop for extending the EPG functionality
+     */
+    plugins: (PluginComponent<T> | PluginFC)[],
+};
+
+type ProgramTextModeResolverProp = {
+    /**
+     * Prop for resolving the text mode of the component based on the cell width
+     * @param widthPx the width of the cell in pixels
+     * @returns ProgramTextMode to use
+     */
+    programTextModeResolver: (widthPx: number) => ProgramTextMode,
+};
+
+type RenderChannelHeaderProp<T extends Header> = {
+    /**
+     * Function to render custom channel header item
+     */
+    renderChannelHeader: ChannelHeaderRenderer<T>,
+};
+
+type RenderDayProp<X extends Day> = {
+    /**
+     * Function to render custom day displaying component
+     */
+    renderDay?: DayRenderer<X>,
+};
+
+type RenderNowLineHeaderProp = {
+    /**
+     * Function to render custom now line header (e.g. LIVE arrow pointer at the top of the line)
+     */
+    renderNowLineHeader: (timestamp: number, ref: Reference<NowLineHeader>) => JSX.Element,
+};
+
+type RenderProgramProp<T extends Program> = {
+    renderProgram: ProgramRenderer<T>,
+};
+
+type RenderTimeProp<T extends TimelineSection> = {
+    /**
+     * Custom function to render time inside the timeline section
+     */
+    renderTime: TimeRenderer<T>,
+};
+
+type RowHeightPxProp = {
+    /**
+     * The height of the EPG row in pixels
+     */
+    rowHeightPx: number,
+};
+
+type SectionWidthMsProp = {
+    /**
+     * The width of the section in upper timeline header
+     */
+    sectionWidthMs: number,
+};
+
+type ScrollStepMsProp = {
+    /**
+     * The number of milliseconds that should be scrolled when moving left and right
+     */
+    scrollStepMs: number,
+};
+
+type TimeProp = {
+    /**
+     * The time interface that provides current time and time change events
+     */
+    time: Time,
+};
+
+type TimeProviderProp = {
+    /**
+     * Function for providing current time
+     */
+    timeProvider: TimeProvider,
+};
+
+type TimelineSectionWidthMsProp = {
+    /**
+     * The width of the timeline section (time distance between markers)
+     */
+    timelineSectionWidthMs: number,
+};
+
+type TimelineWidthMsProp = {
+    /**
+     * The width of the visible epg section with data in milliseconds
+     */
+    timelineWidthMs: number,
+};
+
+type TimelineWidthPxProp = {
+    /**
+     * The width of the visible epg section with data in pixels
+     */
+    timelineWidthPx: number,
+};
+
+type TimestampProp = {
+    /**
+     * The current timestamp of the center of the EPG
+     */
+    timestamp: number,
+};
+
+type XOffsetPxProp = {
+    /**
+     * The initial x-axis offset in pixels to set during the render
+     */
+    xOffsetPx: number,
+};
+
+type WidthPxProp = {
+    /**
+     * The initial width in pixels to set during the render
+     */
+    widthPx: number,
+};
+
+// MARK: shared types and interfaces
+
+/**
+ * This function should return rendered ChannelHeader.
+ * ChannelHeader usually consists of channel number and channel icon or name.
+ * @typeparam T Channel header component - defaults to Header component
+ * @param data Channel data
+ * @param ref Reference to the component
+ * @returns JSX.Element
+ */
+export type ChannelHeaderRenderer<T extends Header> = (
+    (data: Asset, ref: Reference<T>) => JSX.Element
+);
+
+/**
+ * This function should fetch and asynchronously return more programs for given channel
+ * and timeframe.
+ * @param channel Channel data
+ * @param from Timestamp for the start of the timeframe
+ * @param to Timestamp for the end of the timeframe
+ * @returns Promise<Asset[]>
+ */
+export type ProgramsFetcher<
+> = (channel: Asset, from: number, to: number) => Promise<Asset[]>;
+
+export type FetchCallback = () => void;
+
+/**
+ * This function should return custom visual for Program.
+ * @typeparam T Program component - defaults to EpgProgram component
+ * @param isLoading Flag to mark whether it is just a loading placeholder
+ * @param data Program data or undefined for loading placeholder
+ * @param ref Reference to the component
+ * @param widthPx The initial width of the Program component to render with
+ * @param xOffsetPx The initial offset of the Program component to render with
+ * @param textMode The initial program text mode during the render
+ * @returns JSX.Element
+ */
+export type ProgramRenderer<T extends Program> = (
+    isLoading: boolean,
+    data: Asset | undefined,
+    ref: Reference<T>,
+    widthPx: number,
+    xOffsetPx: number,
+    textMode: ProgramTextMode,
+) => JSX.Element;
+
+/**
+ * This function should return custom visual of the time in Timeline.
+ * This component must implement TimelineSection interface.
+ * @param timestamp Timestamp of the time for formatting
+ * @param offset Initial offset to render with in pixels
+ * @param width width of the section to render in pixels
+ * @param ref Reference to TimelineSection component
+ * @returns JSX.Element
+ */
+export type TimeRenderer<
+    T extends TimelineSection = TimelineSection,
+> = (
+    timestamp: number, offset: number, width: number, ref: Reference<T>,
+) => JSX.Element;
+
+/**
+ * This function will be called when an Item with Program Data is pressed.
+ * @typeparam T extension of a Program component
+ * @param data Current Program data
+ * @param channel The program's channel
+ * @param component Pressed Program component
+ */
+export type ItemPressCallback<T extends Program> = (
+    (data: Asset, channel: Asset, component: T) => void
+);
+
+/**
+ * This function will be called when an Item with Program Data is pressed.
+ * @typeparam T extension of a Program component
+ * @param data Current EpgProgram data
+ * @param component Pressed Program component
+ */
+export type ChannelLessItemPressCallback<T extends Program> = (
+    (data: Asset, component: T) => void
+);
+
+/**
+ * This function will be called when any item is focused
+ * @typeparam T extension of a Program component
+ * @param data Current EpgProgram data or undefined if the focus is on loading cell
+ * @param channel The program's channel
+ * @param component Program component of the focused Cell
+ */
+export type FocusChangeCallback<T extends Program> = (
+    (data: Asset | undefined, channel: Asset, component: T) => void
+);
+
+/**
+ * This function will be called when any item is focused
+ * @typeparam T extension of a Program component
+ * @param data Current EpgProgram data or undefined if the focus is on loading cell
+ * @param component Program component of the focused Cell
+ */
+export type ChannelLessFocusChangeCallback<T extends Program> = (
+    (data: Asset | undefined, component: T) => void
+);
+
+export type DayRenderer<
+    T extends Day = Day,
+> = (timestamp: number, ref: Reference<T>) => JSX.Element;
+
+/**
+ * Simple functions that returns current unix time in milliseconds
+ */
+export type TimeProvider = () => number;
+
+// MARK: DataManager
+
+export type DataRange = [number, number];
+
+export type DataUpdateCallback = () => void;
+
+export interface DataManager {
+    getChannel: () => Asset,
+    getData: () => Asset[],
+    getDataFromRange: (range: DataRange) => Asset[],
+    getNextProgramStart: (timestamp: number) => number | null,
+    getPreviousProgramEnd: (timestamp: number, scrollStepMs: number) => number | null,
+    setOnDataUpdated: (callback: DataUpdateCallback) => void,
+    removeOnDataUpdated: () => void,
+    fetchAroundTimestampIfNeeded: (timestamp: number) => void,
+}
+
+// MARK: Time Events
+
+export interface TimeEvents extends EventMapType {
+    'onminute': (timestamp: number) => void,
+    'onsecond': (timestamp: number) => void,
+}
+
+/**
+ * Interface for managing time updates inside EPG
+ */
+export interface Time extends IEvents<TimeEvents> {
+    /**
+     * This function starts the timer that fires the events every time interval
+     */
+    initialize: () => void,
+    /**
+     * This function stops the timer
+     */
+    destroy: () => void,
+    /**
+     * Returns current timestamp in ms
+     */
+    getCurrentTime: () => number,
+}
+
+// MARK: EPG Program Component
+
+export type ProgramTextMode = 'full' | 'ellipsis_only' | 'empty';
+
+/**
+ * Props passed to custom rendered Program Component.
+ */
+export type ProgramProps = {
+    /**
+     * Program data
+     */
+    data?: Asset,
+    /**
+     * Flag that it is a loading placeholder
+     */
+    isLoading?: boolean,
+    /**
+     * Initial width of the Component
+     */
+    widthPx: number,
+    /**
+     * Initial x offset of the Component
+     */
+    xOffsetPx: number,
+    /**
+     * The text mode for the initial Program render
+     */
+    textMode: ProgramTextMode,
+};
+
+/**
+ * Custom visual component for a program.
+ * This component should render a pure div and shouldn't handle any events
+ * like onPress or onMouseEnter. This is done by Cell component in EPG core.
+ * This component can be reused for multiple programs during its lifetime.
+ */
+export interface Program
+    extends Component<any> {
+    /**
+     * Function to offset the Program component inside the cell.
+     * This is so the cells at the start of the viewport show text from the beginning
+     * even though the Cell itself goes more to the past.
+     * @param offset offset in x axis in px
+     */
+    setOffset?(offset: number): void,
+    /**
+     * Function to change width of the Program component inside the cell.
+     * This is so the cells at the start of the viewport show text from the beginning
+     * even though the Cell itself goes more to the past.
+     * @param width width in px
+     */
+    setWidth?(width: number): void,
+    /**
+     * Function to change data and the visuals.
+     * (E.g. Use setText to change the name)
+     * @param data New Program data
+     * @param textMode the text mode to use to display the program
+     * @param widthPx the full width of the cell in pixels that can be used to alter styling
+     * @param xOffsetPx the offset of the cell in pixels that can be used to alter styling
+     */
+    updateData(data: Asset, textMode: ProgramTextMode, widthPx: number, xOffsetPx: number): void,
+}
+
+export interface ProgramComponent {
+    new (props: any): Program,
+}
+
+// MARK: EPG Header Component
+
+/**
+ * Props for the Channel Header Component
+ */
+export type HeaderProps = {
+    /**
+     * Channel Data
+     */
+    data: Asset,
+};
+
+/**
+ * Channel Header component.
+ * This component represents the channel header aka channel number and name/icon.
+ * It can be reused by multiple headers.
+ */
+export interface Header
+    extends Component<any> {
+    /**
+     * Function to show the header element
+     */
+    show(): void,
+    /**
+     * Function to hide the header element
+     */
+    hide(): void,
+    /**
+     * Function to update the visuals
+     */
+    updateData(data: Asset): void,
+}
+
+export interface HeaderComponent {
+    new (props: any): Header,
+}
+
+// MARK: EPG NowLineHeader Component
+
+export interface NowLineHeader extends Component<any> {
+    /**
+     * Function to display the displayed time in the timeline header
+     * @param timestamp current time in ms
+     */
+    updateData: (timestamp: number) => void,
+}
+
+export interface NowLineHeaderComponent {
+    new (props: any): NowLineHeader,
+}
+
+// MARK: EPG Day Component
+
+/**
+ * Props for the Day Component
+ */
+export type DayProps = (
+    TimestampProp
+);
+
+export interface Day extends Component<any> {
+    /**
+     * Function to update the displayed date when the visible day changes in EPG
+     * @param timestamp New timestamp for the date
+     */
+    updateData: (timestamp: number) => void,
+}
+
+export interface DayComponent {
+    new (props: DayProps): Day,
+}
+
+// MARK: EPG DatePicker Component
+
+/**
+ * Props for the EPG DatePicker Component
+ */
+export type DatePickerProps = {
+    /**
+     * Number of days into the past to show (today excluded)
+     */
+    daysInPast: number,
+    /**
+     * Number of days to future to show (today excluded)
+     */
+    daysToFuture: number,
+    /**
+     * Number of milliseconds since the day start to scroll to
+     * @example (8 * 60 + 30) * 1000 will scroll directly to 8:30 on date picker day selected
+     */
+    dayStartOffsetMs?: number,
+    /**
+     * Current selected value
+     */
+    timestamp: number,
+    /**
+     * Number of visible items
+     */
+    visibleItems: number,
+    /**
+     * Number of pixels to scroll
+     */
+    scrollStep: number,
+    /**
+     * Reference to the modal service
+     */
+    modalService: Reference<ModalService>,
+    /**
+     * Function to call when the picker value changes
+     * @param timestamp currently selected value as timestamp in ms
+     */
+    onValueChange: (timestamp: number) => void,
+    /**
+     * Function to format the date string in DatePicker
+     * @param date Date object of the value to format
+     * @returns string to display
+     */
+    format?: (date: Date) => string,
+    /**
+     * Custom overrides for the DatePicker
+     */
+    overrides?: Record<number, string>,
+    /**
+     * Optional setting for Picker Mode (defaults to MODAL)
+     */
+    mode?: PickerMode,
+    /**
+     * Optional className to pass to DatePicker
+     */
+    className?: string,
+    /**
+     * Optional className to pass to PickerModal dialog
+     */
+    modalClassName?: string,
+    /**
+     * Optional override for checkbox
+     */
+    Checkbox?: ICheckbox<any>,
+    /**
+     * Optional override for checkmark
+     */
+    checkmark?: Children,
+    /**
+     * Custom render method for picker button
+     */
+    render?: (
+        buttonRef: Reference<HTMLElement>,
+        textRef: Reference<HTMLElement>,
+        openCallback: () => void,
+        text?: string,
+    ) => JSX.Element,
+};
+
+export type OutsideDatePickerProps = Omit<
+DatePickerProps, 'timestamp' | 'onValueChange'
+>;
+
+export type DatePickerDateProps = 'daysInPast' | 'daysToFuture' | 'dayStartOffsetMs' | 'timestamp';
+
+/**
+ * EPG DatePicker Component
+ */
+export interface DatePicker extends Component<DatePickerProps>, IFocusable {
+    /**
+     * Function to update current DatePicker value when the day changes
+     */
+    updateData: (timestamp: number) => void,
+}
+
+export interface DatePickerComponent {
+    new (props: DatePickerProps): DatePicker,
+}
+
+// MARK: EPG NowLine Component
+
+/**
+ * Props for NowLine Component (Vertical line marking current time across the rows).
+ */
+export type NowLineProps = (
+    & TimelineWidthPxProp
+    & TimestampProp
+    & TimeProp
+    & PixelInMsProp
+    & ChannelHeaderWidthPxProp
+    & Partial<RenderNowLineHeaderProp>
+);
+
+/**
+ * NowLine component renders vertical line marking current time.
+ */
+export interface NowLine extends Component<NowLineProps> {
+    /**
+     * Function to update NowLine position when EPG scrolls left/right
+     * @param timestamp Current timestamp of the EPG
+     */
+    scrollToTimestamp: (timestamp: number) => void,
+}
+
+export interface NowLineComponent {
+    new (props: NowLineProps): NowLine,
+}
+
+// MARK: EPG Timeline Component
+
+/**
+ * Props for the Timeline Component
+ * @typeparam T TimelineSection component
+ */
+export type TimelineProps<
+    T extends TimelineSection,
+> = (
+    & PixelInMsProp
+    & TimelineWidthPxProp
+    & ChannelHeaderWidthPxProp
+    & TimestampProp
+    & RenderTimeProp<T>
+    & SectionWidthMsProp
+);
+
+/**
+ * Timeline Component
+ * This component renders the timeline at the top of the EPG
+ * @typeparam T TimelineSection component
+ */
+export interface Timeline<
+    T extends TimelineSection,
+> extends Component<TimelineProps<T>> {
+    /**
+     * Function to set the current timestamp and scroll to it.
+     */
+    scrollToTimestamp: (timestamp: number) => void,
+}
+
+export interface TimelineComponent<
+    T extends TimelineSection,
+> {
+    new (props: TimelineProps<T>): Timeline<T>,
+}
+
+// MARK: TimelineSection Component
+
+/**
+ * Props for the TimelineSection Component
+ */
+export type TimelineSectionProps = (
+    & TimestampProp
+    & XOffsetPxProp
+    & WidthPxProp
+);
+
+/**
+ * TimelineSection Component
+ * This component displays the time on the Timeline
+ * It can be reused to display multiple times.
+ */
+export interface TimelineSection extends Component<any> {
+    /**
+     * Function to set offset in x direction.
+     * @param x x direction offset in pixels
+     */
+    setOffset: (x: number) => void,
+    /**
+     * Function to update displayed time
+     * @param timestamp New timestamp to format and render
+     */
+    updateData: (timestamp: number) => void,
+}
+
+export interface TimelineSectionComponent {
+    new (props: TimelineSectionProps): TimelineSection,
+}
+
+// MARK: EPG RowsManager Component
+
+export type RowsManagerProps<
+    T extends Header,
+    U extends Program,
+> = (
+    & DataManagersProp
+    & InitialChannelIndexProp
+    & NavigatableRowsProp
+    & AdditionalRowsProp
+    & PixelInMsProp
+    & TimelineWidthPxProp
+    & TimelineWidthMsProp
+    & TimestampProp
+    & TimeProp
+    & ScrollStepMsProp
+    & RowHeightPxProp
+    & ProgramTextModeResolverProp
+    & OnItemPressProp<U>
+    & OnMouseEnterProp
+    & OnFocusChangeProp<U>
+    & RenderChannelHeaderProp<T>
+    & RenderProgramProp<U>
+);
+
+/**
+ * RowsManager Component
+ * It does heavy lifting for maintaining and managing rows
+ * so it could be better split from the main EPG Component
+ */
+export interface RowsManager<
+    T extends Header,
+    U extends Program,
+> extends Component<RowsManagerProps<T, U>> {
+    /**
+     * Function called on pressing UP. Used to navigate up in the channels list.
+     */
+    onUp: () => boolean,
+    /**
+     * Function called on pressing DOWN. Used to navigate down in the channels list.
+     */
+    onDown: () => boolean,
+    /**
+     * Function called on pressing CHANNEL_UP. Used to navigate page up in the channels list.
+     */
+    onChannelUp: () => boolean,
+    /**
+     * Function called on pressing CHANNEL_DOWN. Used to navigate page down in the channels list.
+     */
+    onChannelDown: () => boolean,
+    /**
+     * Function to call when fast scrolling starts
+     * - to optimize cell rendering during the fast scroll
+     */
+    onFastScrollingStart: () => void,
+    /**
+     * Function to call when fast vertical scrolling ends
+     * - to render cell data after being optimized for fast scroll
+     * - to call fetch in data managers connected to rows
+     */
+    onFastScrollingEnd: () => void,
+    /**
+     * Function to find the start of the next program on the active row.
+     * @param timestamp timestamp to search from
+     * @returns timestamp of the start of the next program or end loading cell
+     */
+    getNextProgramStart: (timestamp: number) => number | null,
+    /**
+     * Function to find the end of the previous program on the active row.
+     * @param timestamp timestamp to search from
+     * @param customScrollStepMs optional custom offset from previous program end
+     * @returns timestamp of the end of the previous program or start loading cell
+     */
+    getPreviousProgramEnd: (timestamp: number, customScrollStepMs?: number) => number | null,
+    /**
+     * Sets the channel index to scroll to.
+     */
+    setCurrentChannelIndex: (index: number) => void,
+    /**
+     * Sets the focus timestamp
+     */
+    setFocusTimestamp: (timestamp: number) => void,
+    /**
+     * Function that returns whether there are rows higher that could be navigated.
+     */
+    canGoUp: () => boolean,
+    /**
+     * Function that returns whether there are rows lower that could be navigated.
+     */
+    canGoDown: () => boolean,
+    /**
+     * Focuses the active row at a given timestamp.
+     */
+    focus: (timestamp: number, options?: FocusOptions) => void,
+    /**
+     * Scrolls the rows to the given timestamp.
+     */
+    scrollRowsToTimestamp: (timestamp: number) => void,
+    /**
+     * Function to scroll up
+     * @returns true if it was scrolled, false otherwise
+     */
+    scrollUp: () => boolean,
+    /**
+     * Function to scroll down
+     * @returns true if it was scrolled, false otherwise
+     */
+    scrollDown: () => boolean,
+}
+
+export interface RowsManagerComponent<
+    T extends Header,
+    U extends Program,
+> {
+    new (props: RowsManagerProps<T, U>): RowsManager<T, U>,
+}
+
+// MARK: EPG Row Component
+
+/**
+ * Props for EPG Row component
+ * @typeparam T Program component - defaults to EpgProgram
+ */
+export type RowProps<
+    T extends Program,
+> = (
+    & DataProp
+    & PixelInMsProp
+    & TimelineWidthPxProp
+    & TimelineWidthMsProp
+    & TimestampProp
+    & TimeProp
+    & ScrollStepMsProp
+    & ProgramTextModeResolverProp
+    & OnItemPressProp<T>
+    & OnMouseEnterProp
+    & OnFocusChangeProp<T>
+    & RenderProgramProp<T>
+);
+
+/**
+ * EPG Row component
+ * It can be reused by multiple rows
+ * @typeparam T Program component - defaults to EpgProgram
+ */
+export interface Row<
+    T extends Program,
+> extends Component<RowProps<T>> {
+    /**
+     * Timestamp for the center of the row
+     */
+    timestamp: number;
+    /**
+     * Function to call when fast scrolling starts
+     * - to optimize cell rendering during the fast scroll
+     */
+    onFastScrollingStart: () => void,
+    /**
+     * Function to call when fast vertical scrolling ends
+     * - to render cell data after being optimized for fast scroll
+     * - to call fetch in data managers connected to rows
+     */
+    onFastScrollingEnd: () => void,
+    /**
+     * Function to find the start of the next program on the active row.
+     * @param timestamp timestamp to search from
+     * @returns timestamp of the start of the next program or end loading cell
+     */
+    getNextProgramStart: (timestamp: number) => number | null,
+    /**
+     * Function to find the end of the previous program on the active row.
+     * @param timestamp timestamp to search from
+     * @param customScrollStepMs optional custom offset from previous program end
+     * @returns timestamp of the end of the previous program or end loading cell
+     */
+    getPreviousProgramEnd: (timestamp: number, customScrollStepMs?: number) => number | null,
+    /**
+     * Function to set the row as active (the one with focus)
+     */
+    setActive: () => void,
+    /**
+     * Function to set the row as inactive (the one without focus)
+     */
+    setInactive: () => void,
+    /**
+     * Function to offset the row for vertucal scrolling
+     * @param yOffsetPx number of pixels to set as y axis offset
+     */
+    setOffset: (yOffsetPx: number) => void,
+    /**
+     * Function to return true if row already has this data manager
+     * @param dataManager DataManager that gets compared to the current dataManager
+     * @returns true if they are the same reference, false otherwise
+     */
+    hasDataManager: (dataManager: DataManager) => boolean,
+    /**
+     * Function to focus the EPG Row
+     * @param timestamp timestamp where the focus should happen
+     * @param options FocusOptions to pass down
+     */
+    focus: (timestamp: number, options?: FocusOptions) => void,
+    /**
+     * Function to set the current timestamp and scroll to it.
+     * @param timestamp timestamp to scroll to
+     */
+    scrollToTimestamp: (timestamp: number) => void,
+    /**
+     * Function to show the row
+     */
+    show: () => void,
+    /**
+     * Function to hide the row
+     */
+    hide: () => void,
+    /**
+     * Updates the row with new channel and data for cells
+     * @param data new data to update the row with
+     */
+    updateData: (data: DataManager) => void,
+}
+
+export interface RowComponent<
+    T extends Program,
+> {
+    new (props: RowProps<T>): Row<T>,
+}
+
+// MARK: EPG CellsManager Component
+
+/**
+ * Props for CellsManager Component
+ */
+export type CellsManagerProps<
+    T extends Program,
+> = (
+    & DataGetterProp
+    & TimelineWidthMsProp
+    & TimelineWidthPxProp
+    & TimestampProp
+    & TimeProp
+    & PixelInMsProp
+    & ChannelLessOnItemPressProp<T>
+    & ChannelLessOnFocusChangeProp<T>
+    & ProgramTextModeResolverProp
+    & OnMouseEnterProp
+    & RenderProgramProp<T>
+);
+
+/**
+ * CellsManager Component is a part of Row that is responsible for rendering and handling the cells.
+ * @typeparam T EpgProgram component rendered by cells
+ */
+export interface CellsManager<
+    T extends Program,
+> extends Component<CellsManagerProps<T>> {
+    /**
+     * Current timestamp of the manager
+     */
+    timestamp: number,
+    /**
+     * Function to call when fast scrolling starts
+     * - to optimize cell rendering during the fast scroll
+     */
+    onFastScrollingStart: () => void,
+    /**
+     * Function to call when fast vertical scrolling ends
+     * - to render cell data after being optimized for fast scroll
+     */
+    onFastScrollingEnd: () => void,
+    /**
+     * Function to make the row active (the one with focus)
+     */
+    setActive: () => void,
+    /**
+     * Function to make the row inactive (the one without focus)
+     */
+    setInactive: () => void,
+    /**
+     * Function to offset wrapping div in y axis
+     * @param yOffsetPx number of pixels to set as offset
+     */
+    setOffset: (yOffsetPx: number) => void,
+    /**
+     * Function to focus the cell at given timestamp with given options
+     */
+    focus: (timestamp: number, options?: FocusOptions) => void,
+    /**
+     * Function to scroll to the given timestamp
+     */
+    scrollToTimestamp: (timestamp: number) => void,
+    /**
+     * Function to show the whole row
+     */
+    show: () => void,
+    /**
+     * Function to hide the whole row
+     */
+    hide: () => void,
+    /**
+     * Function to return whether the cells are visible or hidden
+     */
+    isVisible: () => boolean,
+    /**
+     * Function to initialize cells update (e.g. after new data fetch)
+     */
+    updateCellsData: () => void,
+}
+
+export interface CellsManagerComponent<
+    T extends Program,
+> {
+    new (props: CellsManagerProps<T>): CellsManager<T>,
+}
+
+// MARK: EPG Cell Component
+
+/**
+ * Props for any EPG Cell component
+ * @typeparam T Program component - defaults to EpgProgram
+ */
+export type CellProps<
+    T extends Program,
+> = (
+    & WidthPxProp
+    & XOffsetPxProp
+    & TimeProp
+    & Partial<ItemProp>
+    & Partial<IsLoadingProp>
+    & ChannelLessOnItemPressProp<T>
+    & ChannelLessOnFocusChangeProp<T>
+    & ProgramTextModeResolverProp
+    & OnMouseEnterProp
+    & RenderProgramProp<T>
+);
+
+/**
+ * EPG Cell component
+ * @typeparam T Program component - defaults to EpgProgram
+ */
+export interface Cell<
+    T extends Program,
+> extends Component<CellProps<T>>, IFocusable {
+    /**
+     * DOM wrapper element
+     */
+    div: Reference<HTMLDivElement>,
+    /**
+     * Current Program data
+     */
+    item?: Asset,
+    /**
+     * Reference to custom visuals component
+     */
+    programComponent: Reference<T>,
+    /**
+     * Function to get width of the cell in pixels
+     * @returns width of the cell in pixels
+     */
+    getWidth: () => number,
+    /**
+     * Function to get x offset position of the cell in pixels
+     * @returns x direction offset in pixels
+     */
+    getOffset: () => number,
+    /**
+     * Function to set width of the cell in pixels
+     * @param width width of the cell to set
+     */
+    setWidth: (width: number) => void,
+    /**
+     * Function to offset x position of the cell in pixels
+     * @param x x direction offset in pixels
+     */
+    setOffset: (x: number) => void,
+    /**
+     * Function to show the cell
+     */
+    show: () => void,
+    /**
+     * Function to hide the cell
+     */
+    hide: () => void,
+    /**
+     * Function to return whether the cell is visible (does not have .display-none class)
+     */
+    isVisible: () => boolean,
+    /**
+     * Function to return whether the element belongs to the cell's Interactable component.
+     * @param element HTMLElement to compare with Interactable
+     * @returns true if element matches Interactable, false otherwise
+     */
+    hasDom: (element: HTMLElement) => boolean,
+    /**
+     * Function to update data and visuals
+     * @param data New Program data
+     */
+    updateData: (data: Asset) => void,
+}
+
+export interface CellComponent<
+    T extends Program,
+> {
+    new (props: CellProps<T>): Cell<T>,
+}
+
+// MARK: EPG Mouse Navigation
+
+export type EpgMouseNavigationProps = {
+    /**
+     * Function to call on the press of up arrow
+     */
+    onUp: () => void,
+    /**
+     * Function to call on the press of down arrow
+     */
+    onDown: () => void,
+    /**
+     * Function to call on the press of left arrow
+     */
+    onLeft: () => void,
+    /**
+     * Function to call on the press of right arrow
+     */
+    onRight: () => void,
+};
+
+export interface EpgMouseNavigation extends Component<EpgMouseNavigationProps> {
+    /**
+     * Function to enable showing an arrow in given direction
+     */
+    enableDirection: (direction: MouseArrowDirection) => void,
+    /**
+     * Function to disable showing an arrow in given direction
+     */
+    disableDirection: (direction: MouseArrowDirection) => void,
+}
+
+export interface EpgMouseNavigationComponent {
+    new (props: EpgMouseNavigationProps): EpgMouseNavigation,
+}
+
+export type MouseArrowDirection = 'up' | 'down' | 'left' | 'right';
+
+// MARK: EPG Component
+
+/**
+ * Props for the main EPG component
+ * @typeparam T Channel header component - defaults to Header
+ * @typeparam U Program component - defaults to Program
+ * @typeparam V Day component - default to Day
+ * @typeparam W Timeline section component - default to TimelineSection
+ */
+export type Props<
+    T extends Header,
+    U extends Program,
+    V extends Day,
+    W extends TimelineSection,
+> = (
+    & TimelineWidthPxProp
+    & RowHeightPxProp
+    & NavigatableRowsProp
+    & AdditionalRowsProp
+    & ChannelHeaderWidthPxProp
+    & ChannelDataProp
+    & FetchProgramsProp
+    & Partial<TimelineWidthMsProp>
+    & Partial<ScrollStepMsProp>
+    & Partial<TimelineSectionWidthMsProp>
+    & Partial<LimitFromMsProp>
+    & Partial<LimitToMsProp>
+    & Partial<TimeProviderProp>
+    & Partial<InitialTimestampProp>
+    & Partial<InitialChannelIndexProp>
+    & Partial<ProgramTextModeResolverProp>
+    & OnItemPressProp<U>
+    & Partial<OnFocusChangeProp<U>>
+    & Partial<OnScrolledToTimestampProp>
+    & Partial<RenderNowLineHeaderProp>
+    & Partial<RenderChannelHeaderProp<T>>
+    & Partial<RenderProgramProp<U>>
+    & Partial<RenderDayProp<V>>
+    & Partial<RenderTimeProp<W>>
+    & Partial<DatePickerProp>
+    & Partial<PluginsProp<U>>
+
+);
+
+/**
+ * Main EPG component
+ * @typeparam T Channel header component - defaults to Header
+ * @typeparam U Program component - defaults to Program
+ * @typeparam V Day component - default to Day
+ * @typeparam W Timeline section component - default to TimelineSection
+ */
+export interface Epg<
+    T extends Header,
+    U extends Program,
+    V extends Day,
+    W extends TimelineSection,
+> extends Component<Props<T, U, V, W>>, IFocusable {
+    /**
+     * Function to return whether EPG is fast scrolling
+     * @returns true if is fast scrolling in any axis, false otherwise
+     */
+    isFastScrolling: () => boolean,
+    /**
+     * Function to return whether EPG is fast scrolling horizontally
+     * @returns true if is fast scrolling horizontally, false otherwise
+     */
+    isHorizontallyFastScrolling: () => boolean,
+    /**
+     * Function to return whether EPG is fast scrolling
+     * @returns true if is fast scrolling vertically, false otherwise
+     */
+    isVerticallyFastScrolling: () => boolean,
+    /**
+     * Scrolls to given timestamp if possible
+     * @param timestamp Timestamp to scroll to
+     * @throws when the timestamp is outside of limitFromMs and limitToMs range
+     */
+    scrollToTimestamp: (timestamp: number) => void,
+    /**
+     * Scrolls to given channel index if possible
+     * @param index Index of the channel to scroll to
+     * @throws when the index is outside of 0 and channels.length - 1 range
+     */
+    scrollToChannelIndex: (index: number) => void,
+}
+
+/**
+ * Internal interface of the Main EPG Component for internal components
+ * but should not be used from the outside.
+ * @typeparam T Channel header component - defaults to Header
+ * @typeparam U Program component - defaults to Program
+ * @typeparam V Day component - default to Day
+ * @typeparam W Timeline section component - default to TimelineSection
+ */
+export interface InternalEpg<
+    T extends Header,
+    U extends Program,
+    V extends Day,
+    W extends TimelineSection,
+> extends Epg<T, U, V, W> {
+    /**
+     * Current focused part of EPG
+     */
+    focused: EpgFocus,
+    /**
+     * Reference to the RowsManager
+     */
+    rows: Reference<RowsManager<T, U>>,
+    /**
+     * Current timestamp of the EPG
+     */
+    timestamp: number,
+    /**
+     * Current timestamp of the EPG focus
+     */
+    focusTimestamp: number,
+    /**
+     * TimeManager instance
+     */
+    time: Time,
+    /**
+     * Function to set the current EPG timestamp
+     * @param timestamp timestamp to set
+     */
+    setCurrentTime: (timestamp: number) => void,
+    /**
+     * Function to set current focus time
+     * @param timestamp the timestamp to set as focus time
+     */
+    setFocusTimestamp: (timestamp: number) => void,
+    /**
+     * Function to set focus to DatePicker
+     */
+    setFocusToDatePicker: () => void,
+    /**
+     * Function to set focus to Epg rows
+     */
+    setFocusToEpg: () => void,
+    /**
+     * Function to set state of the up/down mouse arrows
+     */
+    setVerticalMouseArrows: () => void,
+    /**
+     * Function to set state of the left/right mouse arrows
+     */
+    setHorizontalMouseArrows: () => void,
+    /**
+     * Function to let EPG and its components know that the EPG
+     * switched to fast vertical scrolling (up/down between channels)
+     */
+    startFastVerticalScrolling: () => void,
+    /**
+     * Function to let EPG and its components know that the EPG
+     * switched to fast horizontal scrolling (left/right in time)
+     */
+    startFastHorizontalScrolling: () => void,
+    /**
+     * Function to let EPG and its components know that the EPG
+     * switched to normal vertical scrolling (up/down between channels)
+     */
+    stopFastVerticalScrolling: () => void,
+    /**
+     * Function to let EPG and its components know that the EPG
+     * switched to normal horizontal scrolling (left/right in time)
+     */
+    stopFastHorizontalScrolling: () => void,
+    /**
+     * Function that returns true if DatePicker is rendered
+     * @returns true if DatePicker is rendered, false otherwise
+     */
+    isDatePickerRendered: () => boolean,
+}
+
+export interface EpgComponent<
+    T extends Header,
+    U extends Program,
+    V extends Day,
+    W extends TimelineSection,
+> {
+    new (props: Props<T, U, V, W>): Epg<T, U, V, W>,
+}
+
+/**
+ * Enumerator for current focus positions for EPG or DatePicker
+ */
+export type EpgFocus = 'datepicker' | 'epg';
+
+// MARK: EPG Plugin
+
+export type PluginProps<
+    T extends Program = Program,
+> = {
+    /**
+     * Reference to the EPG component so it could be controlled from the plugin
+     */
+    epg?: Epg<any, T, any, any>
+};
+
+/**
+ * EPG stores references to all plugins and on certain events it calls these
+ * methods if they are implemented by the plugin
+ */
+export interface Plugin<
+    T extends Program = Program,
+> extends Component<any> {
+    /**
+     * Called each time a focus changes. Due to implementation this can result
+     * in focus to different element with same data as before as same element
+     * but different data. And also same element and same data
+     */
+    onFocusChange?: FocusChangeCallback<T>,
+    /**
+     * Called each time EPG scrolls left/right in time
+     * @param timestamp current time of EPG in ms
+     */
+    onScrolledToTimestamp?: (timestamp: number) => void,
+    /**
+     * Called each time the Item is pressed. This is called before the outside
+     * callback from props. However, it cannot stop the event. Intended more for
+     * logging purposes than actual overrides.
+     */
+    onItemPress?: ItemPressCallback<T>,
+    /**
+     * Called each time EPG switches to fast scrolling in either direction.
+     * Called after onFast[Vertical/Horizontal]ScrollingStart.
+     * If both are implemented, then both (directional and general) methods are called.
+     */
+    onFastScrollingStart?: () => void,
+    /**
+     * Called each time EPG switches to fast scrolling in vertical (channels) direction.
+     */
+    onFastVerticalScrollingStart?: () => void,
+    /**
+     * Called each time EPG switches to fast scrolling in horizontal (time) direction.
+     */
+    onFastHorizontalScrollingStart?: () => void,
+    /**
+     * Called each time EPG switches back to normal scrolling in either direction.
+     * Called after onFast[Vertical/Horizontal]ScrollingEnd.
+     * If both are implemented, then both (directional and general) methods are called.
+     */
+    onFastScrollingEnd?: () => void,
+    /**
+     * Called each time EPG switches back to normal scrolling in vertical (channels) direction.
+     */
+    onFastVerticalScrollingEnd?: () => void,
+    /**
+     * Called each time EPG switches back to normal scrolling in horizontal (time) direction.
+     */
+    onFastHorizontalScrollingEnd?: () => void,
+}
+
+export interface PluginComponent<
+    T extends Program,
+> {
+    new (props: any): Plugin<T>,
+}
+
+export interface PluginFC {
+    (props: any): JSX.Element,
+}