tvapps-epg-web

EPG Component for React Js applications.

React Js TV Guide for web

• [x] EPG component
  • Material design similar to the website
  • Supports model (channel, program)
  • Renderer support:
    • [x] Support React Js
    • [x] Support custom UI at component (date, time, channel, program)
    • [x] Support callback function when selecting (program, channel, favorite)
    • [x] Support change icons (next, prev, calendar, recorded, record, loading, catchup, purchase, favorite, favoriteActive, scheduled record, place holder channel)
    • [x] Support change text (today, no program info, loading),
    • [x] Support past and future date display
    • [x] Support slient load more programs by date
    • [x] Hooks for loading additional data when scrolling to the end of the loaded data
    • [x] Shows the current and next programme and it's start time

Data

---

Data is provided in formats defined.

    channel = {
        imageSrc: string,
        id: number,
        externalChannelId: string,
        name: string,
        url: string,
        description: string,
        category: string,
        extrafields: array,
        number: number,
        isNpvrActivated: bool,
        isCatchupActivated: bool,
        isFavouriteActivated: bool,
        isPurchaseActivated: bool,
        flags: number;
    };
//default value
    channel =  {
        imageSrc: null,
        id: -1,
        externalChannelId: '',
        name: '',
        url: '',
        description: '',
        category: '',
        extrafields: [],
        number: -1,
        isNpvrActivated: false,
        isCatchupActivated: false,
        isFavouriteActivated: false,
        isPurchaseActivated: false,
        flags: 0;
    }
};
//example value
    channel =  {
        imageSrc: 'https://votvapps-ng-test.tvaas.com/RTEFacade/images/attachments/TV2.png',
        id: 1895201,
        externalChannelId: 'LuxeTV',
        name: 'Luxe TV',
        url: '',
        description: '',
        category: '',
        extrafields: [
            {
                responseElementType: "Extrafield",
                name: "static-playback",
                value: "false"
            }
        ],
        number: 12,
        isNpvrActivated: false,
        isCatchupActivated: false,
        isFavouriteActivated: false,
        isPurchaseActivated: false,
        flags: 128,
    }
};
const channeList =  [
    {
        ...channel
    },
    {
        ...channel   
    },
    ...
];


//PROGRAM DATA FORMART
    program = {
        id:  number,
        name:  string,
        shortName:  string,
        serisName:  string,
        description:  string,
        prName:  string,
        startDate:  number,//(timestamp)
        endDate:  number,//(timestamp)
        startDateAdjusted:  number,// default equal to startDate (timestamp), adjusted to fix start of day (00:00:00)
        endDateAdjusted:  number,// default equal to endDate (timestamp), adjusted to fix end of day (23:59:59)
        referenceProgramId:  string,
        flags:  number,
        responseElementType:  string,
        price:  number,
        imageSrc: string,
        genres:  array,
        prLevel:  number,
    }
// default value
    program = {
        id:  -1,
        name:  '',
        shortName:  '',
        serisName:  '',
        description:  '',
        prName:  '',
        startDate:  0,//(timestamp)
        endDate:  0,//(timestamp)
        startDateAdjusted:  0,// default equal to startDate (timestamp), adjusted to fix start of day (00:00:00)
        endDateAdjusted:  0,// default equal to endDate (timestamp), adjusted to fix end of day (23:59:59)
        referenceProgramId:  '',
        flags:  0,
        responseElementType:  '',
        price:  0,
        imageSrc: '',
        genres:  [],
        prLevel:  -1,
    }  
//example data
 program = {
        id:  12966715,
        name:  'Los milagros de la rosa',
        shortName:  '',
        serisName:  '',
        description:  '',
        imageSrc: 'https://votvapps-ng-test.tvaas.com/RTEFacade/images/12055411.jpg',
        prName:  'APT',
        startDate:  1641769200000,//(timestamp)
        endDate:  1641776400000,//(timestamp)
        startDateAdjusted:  1641769200000,// default equal to startDate (timestamp), adjusted to fix start of day (00:00:00)
        endDateAdjusted:  1641776400000,// default equal to endDate (timestamp), adjusted to fix end of day (23:59:59)
        referenceProgramId:  '2466657917202201091800120',
        flags:  0,
        responseElementType:  'Program',
        price:  1,
        genres:  [],
        prLevel:  0,
    }



const programList  = [
    {
        channelExternalId:'France24Fr2',
        programs: [program,...]
    },
    {
        channelExternalId:'ArteLoop',
        programs: [program,...]
    },
    {
        channelExternalId:'Arte',
        programs: [program,...]
    },
    ....
];

Data example

Config Defaults

---

You can specify config defaults that will be applied to every request.

Available tokens and their meanings are as follows:

Prop types	meaning	examples of output
catchupEnabled	config catchup	catchupEnabled={false}
npvrEnabled	config npvr	npvrEnabled={false}
favouriteEnabled	config favourite	favouriteEnabled={false}
numberOfFutureDays	the future number is display	1
numberOfPastDays	number of day too was display	1
currentDate	current date value is selected	'Date Fri Jan 21 2022 10:30:00 GMT+0700 (Indochina Time)'
todayText	text showing current date	'Today'
noProgramInfoText	display text no program info	'No Program Info'
loadingText	text showing loading	'Loading'
programDetail	object program detail is currently selected	{}
isLoadingShown	status loading	false
isLoadingMore	status loading more	false
channelList	channel list data	[]
programList	program list data	[]
tvGuideContainer	Take the element tv guide to check the height
onDateChanged	callback to change date	(f) => f
onTimeChanged	callback to change time	(f) => f
onProgramSelected	callback to select program item	(f) => f
onChannelClicked	callback on click channel	(f) => f
onFavoriteClicked	callback on favorite	(f) => f
tvGuideWrapperStyles	put css to change the style of tv guide wrapper	{ marginTop: 364, background: '#000' }
datePickerStyles	put css to change the style of date	{ fontSize: 16 }
timeLineCellStyles	put css to change the style of time	{ fontSize: 24, color: '#fff' }
channelStyles	put css to change the style of channel	{ number: { color: '#03143f' } }
programStyles	put css to change the style of program item	{current: { fontSize: 24 }, future: { color: '#fff' }}
programHoverBorderStyles	put css to change the style when hover at program	{ '--hover-border': '1px solid #EE3325' }
timeBarStyles	put css to change the style of time bar	timeBar: { background: '#EE3325' }
loadingIcon	allow to change the loading icon	''
nextIcon	allow to change the next icon	''
prevIcon	allow to change the prev icon	''
calendarIcon	allow to change the calendar icon	''
purchaseIcon	allow to change the purchase icon	''
recordIcon	allow to change the record icon	''
recordedIcon	allow to change the recorded icon	''
favoriteActiveIcon	allow to change the favorite active icon	''
favoriteIcon	allow to change the favorite icon	''
catchupIcon	allow to change the catchup icon	''
scheduledRecordIcon	allow to change the scheduled record icon	''
placeHolderChannelIcon	allow to change the place holder channel icon	''

Support library function

---

You can call functions from the library to get the required data.

Available tokens and their meanings are as follows:

Function Suport	meaning	examples of output
TvGuide	component TvGuide
getDate	function get date to handle date change when next or prev or calendar	getDate(date)
getTime	function get time to handle time change when next or prev	getDate(time)
formatCurrentDate	format the current time with component	formatCurrentDate(currentDate)
bitToBitCompare	function compare flag	bitToBitCompare(flas, 16)
getImage	function get image from api	attachments.map((img) => getImage(img))
Channel	channel model	new Channel();
ProgramItem	program item model	new ProgramItem();
ProgramLine	program model	new ProgramLine();

Import To Your Web:

---

Import TV Guide Web component with default properties below:

• [x] All properties are the same TV Guide above

import React from 'react';
import { throttle } from 'lodash';
import { isMobile, isTablet } from 'react-device-detect';
import { TvGuide, getDate, getTime, formatCurrentDate, bitToBitCompare, getImage, Channel, ProgramItem, ProgramLine, FilterComponent } from './tvapps-epg-web/src';
import ICON_ARROW_LEFT from './images/arrow-left.png';
import ICON_ARROW_RIGHT from './images/arrow-right.png';
import ICON_CALENDAR from './images/calendar-icon.png';
import ICON_RECORD from './images/icon-record.png';
import ICON_CATCHUP from './images/icon-catchup.png';
import ICON_FAVORITE_ACTIVE from './images/favorite-active.png';
import ICON_FAVORITE from './images/favorite.png';
import ICON_PURCHASE from './images/purchase-icon.png';
import ICON_RECORDED from './images/icon-recorded.png';
import ICON_SCHEDULED_RECORD from './images/icon-scheduled-record.png';
import ICON_LOADING from './images/loading.svg';
import ICON_START_OVER from './images/icon-startOver.png';
import ICON_CATCHUP_IN_PROGRAM from './images/icon-catchup-in-program.png';
import PLACE_HOLDER_CHANNEL from './images/placeHolder/channel.png';
const axios = require('axios');

export class WebEpgDemo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      currentDate: new Date(), // Current date (today)
      programDetail: {}, // obj program detail
      isLoadingShown: true, // status loading when load first page TvGuide
      isLoadingMore: false, // status loading more when scroll to the bottom
      channelList: [], // array channel list
      programList: [], // array program list
      numberChannel: [], // number channel or number line show at the epg
      allChannelList: [], // all channel
      categories: [
        'ALL',
        'Favourite',
        'Nacionales',
        'Novelas',
        'Estilo de Vida',
        'Noticias e Internacionales ',
        'Series y Peliculas',
        'Infantiles',
        'Culturales y Educativos',
        'Deportes',
        'Musica y Realities',
        'Religiosos',
        'Regionales Peru',
        'Adultos',
      ], // categories in the filter
      selectedChannelCategoryText: 'All', // selected channel category text
      width: window.innerWidth, // width screen
    };
    this.currentProgram = true; // flag check set current program the first
  }

  componentDidMount() {
    const { currentDate } = this.state;
    this.setState({ currentDate: formatCurrentDate(currentDate) }); // format current date when load the first and only
    window.scrollTo(0, 0); // set scroll to top when load page
    window.addEventListener('scroll', this.handleScroll); // create event scroll and function handleScroll
    window.addEventListener('resize', this.updateDimensions); // reate event scroll and function updateDimensions
  }

  UNSAFE_componentWillUnmount() {
    window.removeEventListener('scroll', this.handleScroll); // remove event scroll and function handleScroll
    window.removeEventListener('resize', this.updateDimensions); // remove event scroll and function updateDimensions
  }

  updateDimensions = () => {
    this.setState({ width: window.innerWidth });
  };

  handleScroll = () => { // function handle scroll when scroll to the bottom
    if (window.innerHeight + window.pageYOffset >= document.body.offsetHeight - window.innerHeight / 2) { / check height screen and scroll
      this.loadMoreData(); // call load more data
    }
  };

  loadMoreData = throttle(() => { // function load more date
    const { numberChannel, currentDate, allChannelList, isLoadingMore } = this.state;
    let curentList = [...numberChannel];
    if (!isLoadingMore && curentList && curentList.length && allChannelList && allChannelList.length) {
      if (curentList.length < allChannelList.length) {
        let nextList =
          allChannelList && allChannelList.length && allChannelList.slice(curentList.length, curentList.length + 10);
        this.getData(currentDate, nextList, true);
        this.setState((prevState) => {
          return {
            ...prevState,
            numberChannel: [...prevState.numberChannel, ...nextList],
          };
        });
      }
    }
  }, 500);

  getData = (currentDate, channelList, isLoadMore = false) => { // get data and set state loading more
    this.setState({ isLoadingMore: isLoadMore });
    this.getPrograms(currentDate, channelList, isLoadMore);
  };

  getChannel = (cb) => { // get channel list
    const urlApi = 'https://urlApi'; // url api
    const urlGetChannelList = `${urlApi}`;
    const params = {
      ...
    };
    const optionChannel = {
      url: urlGetChannelList,
      method: 'GET',
      params,
      withCredentials: true,
    };
    axios(optionChannel)
      .then((channels) => {
        if (
          channels.status == 200 &&
          channels &&
          channels.data &&
          channels.data.response &&
          channels.data.response.length &&
          channels.data.response
        ) {
          const channelList = [];
          channels.data.response.map((item) => {
            const channelModel = new Channel();
            const images = [];
            const attachments = item.images ? item.images : item.attachments ? item.attachments : [];
            images.push(...attachments.map((img) => getImage(img))); // map and create imageSrc
            if (images && images.length) {
              const findImage = images.find((item) => item.name == 'HorizontalImage');
              if (findImage) {
                item.imageSrc = `${rightv}${findImage.url}`;
              }
            }
            item.isNpvrActivated = bitToBitCompare(item.flags, 16); // check show icon npvr
            item.isCatchupActivated = bitToBitCompare(item.flags, 128); // check show icon catchup
            item.isFavouriteActivated = false; // check show icon favorite
            item.isPurchaseActivated = true; // check show icon purchase
            channelModel.unSerialize(item); // channel model
            channelList.push(channelModel);
          });
          cb(channelList); // callback channel list
        }
      })
      .catch((error) => {
        console.log('clientEvents err', error);
        cb([]); // callback []
      });
  };

  getPrograms = (currentDate, channelList, isLoadMore) => { // get programList
    const self = this;
    const urlApi = 'https://urlApi'; // url api
    const startTime = new Date(currentDate);
    startTime.setHours(0, 0, 0, 0);
    const endTime = new Date(currentDate);
    endTime.setDate(endTime.getDate() + 1);
    endTime.setHours(1, 0, 0, 0);
    if (channelList && channelList.length) {
      const promises = channelList.map((item) => {
        return new Promise((resolve) => {
          const urlGetProgramLists = `${urlApi}/GetProgramLists`;
          const params = {
            channel_external_ids: item.externalChannelId,
            start_date: startTime.getTime(),
            end_date: endTime.getTime(),
            language_code: 'en',
            gaps: true,
            client: 'json',
          };
          const optionProgram = {
            url: urlGetProgramLists,
            method: 'GET',
            params,
            withCredentials: true,
          };
          axios(optionProgram)
            .then((programs) => {
              if (
                programs.status == 200 &&
                programs &&
                programs.data &&
                programs.data.response &&
                programs.data.response.length &&
                programs.data.response[0]
              ) {
                resolve(
                  programs &&
                    programs.data &&
                    programs.data.response &&
                    programs.data.response.length &&
                    programs.data.response[0]
                );
              }
            })
            .catch((error) => {
              console.log('123123 program err', error);
            });
        });
      });
      Promise.all(promises).then((results) => {
        const programList = [];
        const currentProgram = [];
        results.map((program) => {
          const programs = [];
          if (program && program.programs && program.programs.length) {
            program.programs.map((tvProgram) => {
              const images = [];
              const attachments = tvProgram.images
                ? tvProgram.images
                : tvProgram.attachments
                ? tvProgram.attachments
                : [];
              images.push(...attachments.map((img) => getImage(img)));
              if (images && images.length) {
                const findImage = images.find((item) => item.name == 'HorizontalImage');
                if (findImage) {
                  tvProgram.imageSrc = `${urlApi}${findImage.url}`;
                }
              }
              const programItemModel = new ProgramItem();
              programItemModel.unSerialize(tvProgram);
              programs.push(programItemModel);
              if (this.currentProgram) {
                const current = new Date().getTime();
                const proStartTime = tvProgram && tvProgram.startDate ? tvProgram.startDate : null;
                const prpEndTime = tvProgram && tvProgram.endDate ? tvProgram.endDate : null;
                if (proStartTime && prpEndTime && proStartTime <= current && prpEndTime >= current) {
                  currentProgram.push(tvProgram);
                }
              }
            });
          }
          const programModel = new ProgramLine(program.channelExternalId, programs);
          programList.push({ ...programModel });
        });
        if (this.currentProgram && currentProgram && currentProgram.length) {
          self.setState({ programDetail: currentProgram[0] });
          this.currentProgram = false;
        }
        if (isLoadMore) {
          const newProgramList = new Set([...this.state.programList, ...programList]);
          const newChannelList = new Set([...this.state.channelList, ...channelList]);
          const setProgramList = Array.from(newProgramList);
          const setChannelList = Array.from(newChannelList);
          self.setState((prevState) => {
            return {
              ...prevState,
              programList: setProgramList,
              channelList: setChannelList,
              isLoadingMore: false,
            };
          });
        } else {
          self.setState((prevState) => {
            return {
              ...prevState,
              isLoadingShown: false,
              programList,
              channelList,
              isLoadingMore: false,
            };
          });
        }
      });
    }
  };

  handleDateChanged = (value) => { // change date
    // Next or Prev
    this.onDateChanged(getDate(value)); // return date
  };

  handleTimeChanged = (value) => { // change time
    // Next or Prev
    getTime(value, (res) => { // return status isChangeDate or isChangeTime
      if (res && res.isChangeDate) {
        this.onDateChanged(res.date);
      } else if (res && res.isChangeTime) {
        this.onTimeChanged(res.date);
      }
    });
  };

  onDateChanged = (date) => { // update date and get data
    // Update currentDat
    this.setState({
      currentDate: date,
    });
    const { numberChannel } = this.state;
    this.getData(date, numberChannel);
  };

  onTimeChanged = (date) => { // update time
    // Update currentDate
    this.setState({
      currentDate: date,
    });
  };

  handleProgramSelected = (detail) => { // change detail
    this.setState({ programDetail: detail });
  };

  getTvGuideContainer = (element) => { // check height tv guide and set number channel the first load page
    if (element) {
      const heightEpg = element.clientHeight - 364; // 300 height detail
      const heightEpgHeader = 40 + 20; // height 40, margin 20
      const heightEpgLine = 79; // height 79, margin 12
      const numberLine = Math.abs(Math.ceil((heightEpg - heightEpgHeader) / heightEpgLine)); // not margin
      this.getChannel((channels) => {
        const channelList = channels.slice(0, numberLine);
        this.setState({ numberChannel: channelList, allChannelList: channels });
        const { currentDate } = this.state;
        this.getData(currentDate, channelList);
      });
    }
  };

  handleChannelClicked = (data) => {
    console.log('handleChannelClicked', data);
  };

  handleFavoriteClicked = (data) => {
    console.log('handleFavoriteClicked', data);
  };

  handleChannelCateogryChanged = (data) => {
    console.log('handleChannelCateogryChanged', data);
    this.setState({ selectedChannelCategoryText: data });
  };

  render() {
    const { currentDate, programDetail, isLoadingShown, programList, channelList, isLoadingMore, categories, selectedChannelCategoryText, width } =
      this.state;
    {/* format date show preview */}
    let progress_bar = null;
    const progStartDate = programDetail && programDetail.startDate ? programDetail.startDate : null;
    const progEndDate = programDetail && programDetail.endDate ? programDetail.endDate : null;
    const now = new Date().getTime();
    if (progStartDate && progEndDate) {
      if (progStartDate <= now && progEndDate >= now) {
        const percent = Math.floor(((now - progStartDate) * 100) / (progEndDate - progStartDate));
        // Progress for curent program
        progress_bar = (
          <div className='tv-guide-preview-progress'>
            <span>{`${new Date(progStartDate).getHours()}:${('0' + new Date(progStartDate).getMinutes()).slice(
              -2
            )}`}</span>
            <div className='tv-guide-preview-progress-bar'>
              <div className='tv-guide-preview-progress-current' style={{ width: `${percent}%` }} />
            </div>
            <span>{`${new Date(progEndDate).getHours()}:${('0' + new Date(progEndDate).getMinutes()).slice(-2)}`}</span>
          </div>
        );
      }
    }
    { /* End format date show preview */}
    return (
      <>
        { /* check show preview */}
        {(!isMobile && isTablet) ||
          (width > 768 && (
            <div id='tv-guide-preview-wrapper'>
              <div id='tv-guide-preview'>
                <div className='tv-guide-preview-left'>
                  <img src={programDetail && programDetail.imageSrc} className='tv-guide-preview-left-img' />
                </div>
                <div className='tv-guide-preview-right'>
                  <div className='tv-guide-preview-title'>{programDetail && programDetail.name}</div>
                  {progress_bar}
                  <div className='tv-guide-preview-des'>{programDetail && programDetail.description}</div>
                </div>
              </div>
              <div className='tv-guide-filter'>
                <FilterComponent
                  value={selectedChannelCategoryText}
                  items={categories}
                  onChannelCateogryChanged={(data) => this.handleChannelCateogryChanged(data)}
                  mobileFilterLabelText='Filter'
                  desktopFilterLabelText='Channel'
                  favoriteText='Favorite'
                  prevIcon={ICON_ARROW_LEFT}
                  favouriteEnabled
                />
              </div>
            </div>
            { /* end show preview */}
          ))}
        <TvGuide
          catchupEnabled
          npvrEnabled
          favouriteEnabled
          startoverEnabled
          numberOfFutureDays={1}
          numberOfPastDays={3}
          currentDate={currentDate}
          numberOfTimelineCellDisplayed={5}
          todayText='Today'
          noProgramInfoText='No Program Info'
          loadingText='Loading'
          // mobileTitle='Program guide'
          isLoadingShown={isLoadingShown}
          isLoadingMore={isLoadingMore}
          channelList={channelList}
          programList={programList}
          tvGuideContainer={this.getTvGuideContainer}
          onDateChanged={(value) => this.handleDateChanged(value)}
          onTimeChanged={(value) => this.handleTimeChanged(value)}
          onProgramSelected={(detail) => this.handleProgramSelected(detail)}
          onChannelClicked={(data) => this.handleChannelClicked(data)}
          onFavoriteClicked={(data) => this.handleFavoriteClicked(data)}
          onChannelCateogryChanged={(data) => this.handleChannelCateogryChanged(data)}
          tvGuideWrapperStyles={{ marginTop: 364, background: '#000' }}
          // datePickerStyles={{ fontSize: 16 }}
          // timeLineCellStyles={{ fontSize: 24, color: '#fff' }}
          // channelStyles={{ number: { color: '#03143f' } }}
          // programStyles={{
          //   selected: { background: '#EE3325', color: '#fff', boxShadow: '2px 2px 26px 19px rgba(255, 255, 255, 0.5)' },
          //   current: { fontSize: 24 },
          //   pass: { color: '#fff', fontSize: 24 },
          //   future: { color: '#fff' },
          //   noProgram: { color: 'rgba(255, 255, 255, 0.3)' },
          // }}
          // programHoverBorderStyles={{
          //   '--hover-border': '1px solid #EE3325',
          // }}
          // timeBarStyles={{
          //   timeBar: { background: '#EE3325' },
          //   timeBarHead: { background: '#EE3325' },
          //   timeBarIcon: { background: '#fff' },
          // }}
          tvGuideHeaderStyles={{ left: 10, margin: 0, padding: 0 }}
          tvGuideBodyStyles={{ width: 'calc(100% - 20px', left: 10 }}
          loadingIcon={ICON_LOADING}
          nextIcon={ICON_ARROW_RIGHT}
          prevIcon={ICON_ARROW_LEFT}
          calendarIcon={ICON_CALENDAR}
          purchaseIcon={ICON_PURCHASE}
          recordIcon={ICON_RECORD}
          recordedIcon={ICON_RECORDED}
          favoriteActiveIcon={ICON_FAVORITE_ACTIVE}
          favoriteIcon={ICON_FAVORITE}
          catchupIcon={ICON_CATCHUP}
          catchupInProgramIcon={ICON_CATCHUP_IN_PROGRAM}
          scheduledRecordIcon={ICON_SCHEDULED_RECORD}
          placeHolderChannelIcon={PLACE_HOLDER_CHANNEL}
          startOverIcon={ICON_START_OVER}
          categories={categories}
          selectedChannelCategoryText={selectedChannelCategoryText}
          mobileFilterLabelText='Filter'
          desktopFilterLabelText='Channel'
          favoriteText='Favorite'
        />
      </>
    );
  }
}

WebEpgDemo.propTypes = {
};

WebEpgDemo.defaultProps = {};

export default WebEpgDemo;

Custom UI Component For Web:

-- By default, if these props are not present, the website will take the default color

You can re-adjust the color through the following props:

<TvGuide
  ...
  tvGuideWrapperStyles={{ marginTop: 364, background: '#000' }}
  datePickerStyles={{ fontSize: 16 }}
  timeLineCellStyles={{ fontSize: 24, color: '#fff' }}
  channelStyles={{ number: { color: '#03143f' } }}
  programStyles={{
    selected: { background: '#EE3325', color: '#fff', boxShadow: '2px 2px 26px 19px rgba(255, 255, 255, 0.5)' },
    current: { fontSize: 24 },
    pass: { color: '#fff', fontSize: 24 },
    future: { color: '#fff' },
    noProgram: { color: 'rgba(255, 255, 255, 0.3)' },
  }}
  programHoverBorderStyles={{
    '--hover-border': '1px solid #EE3325',
  }}
  timeBarStyles={{
    timeBar: { background: '#EE3325' },
    timeBarHead: { background: '#EE3325' },
    timeBarIcon: { background: '#fff' },
  }}
/>

Change Icon In Component For Web:

-- By default, if these props are not present, the website will get the default icon

You can change the default icons back through the following props:

<TvGuide
  ...
  loadingIcon={'path/image/...'}
  nextIcon={'path/image/...'}
  prevIcon={'path/image/...'}
  calendarIcon={'path/image/...'}
  purchaseIcon={'path/image/...'}
  recordIcon={'path/image/...'}
  recordedIcon={'path/image/...'}
  favoriteActiveIcon={'path/image/...'}
  favoriteIcon={'path/image/...'}
  catchupIcon={'path/image/...'}
  scheduledRecordIcon={'path/image/...'}
  placeHolderChannelIcon={'path/image/...'}
/>