MCLS event components

⚠️ WARNING: This package is no longer maintained or updated. It may have vulnerabilities or bugs that will not be addressed. Please use at your own risk or consider implementing the components yourself.

Collection of mcls components for an event.

InfoColumns

This react component is useful for rendering a list of textual stats. Can be used to display various event information.

Example of usage:

import { InfoColumns, InfoColumnProps } from '@mycujoo/mcls-event-components'

const { eventInfo, isLoading } = useEvent()
const props: InfoColumnProps = {
    data: [
      {
        label: 'Competition',
        value: eventInfo,
      },
      {
        label: 'Match date',
        value: eventInfo.startTime,
      },
      {
        label: 'Location',
        value: eventInfo?.physical?.venue || eventInfo?.physical?.city,
      },
      {
        label: 'Status',
        value: eventInfo.status.replace("EVENT_STATUS_", ""),
      },
      {
        label: 'Attendance',
        value: eventInfo.metadata?.attendance,
      },
      {
        label: 'Weather',
        value: getWeather(eventInfo?.physical?.city),
      },
    ],
    config: {
      numColumns: 3,
      label: {
        fontSize: '10px',
        fontFamily: 'CustomFont',
        color: '#F0F',
        align: 'left',
        underline: true,
        margin: '8px'
      }
    }
}

<Info {...props} />

MatchScore

This React component is used to display the score of a match between two teams. It allows customization of various visual aspects such as text color, font size, icon size, team name display options, score padding, and multi-line display.

Props The MatchScore component accepts the following props:

• metadata?: TeamsMetadata: An optional object containing metadata about the teams participating in the match. It includes the abbreviations, logos, and names of the home and away teams.
• score?: Score: An optional object representing the score of the match. It includes the scores of the home and away teams.
• config?: MatchScoreConfig: An optional configuration object that allows customization of the component's appearance. It includes properties such as text color, font size, icon size, full team name display, hiding team names, score padding, and multi-line display.

import { MatchScore } from '@mycujoo/mcls-event-components'

const metadata = {
  team_home: {
    abbr: 'HOM',
    logo: 'http://image.com/home_logo.png',
    name: 'Home Team',
  },
  team_away: {
    abbr: 'AWY',
    logo: 'http://image.com/home_logo.png',
    name: 'Away Team',
  },
}

const score = {
  home: '2',
  away: '1',
}

const config = {
  textColor: '#fff',
  fontSize: '16px',
  iconSize: '40px',
  fullTeamNames: true,
  hideTeamNames: false,
  scorePadding: '5px',
  multiLine: false,
}

<MatchScore metadata={metadata} score={score} config={config} />

Match stats

TwoTeamsMatchStats

The TwoTeamsMatchStats component is used to display match statistics for two teams. It allows customization of various visual aspects such as text color, font size, team colors, and hiding statistics when they are zero.

The TwoTeamsMatchStats component accepts the following props:

• statTypes: StatType[]: An array of objects defining the statistics to be displayed. Each StatType object includes a label, the variable names for the home team and away team statistics.
• matchStats: Stats: An object representing the actual statistics of the match. The keys of the object correspond to the variable names defined in the statTypes prop, and the values represent the statistics for each variable.
• config?: MatchStatsConfig: An optional configuration object that allows customization of the component's appearance. It includes properties such as text color, font size, team colors, and hiding statistics when they are zero.
• lang?: SupportedLanguages: An optional language parameter

Example of usage

import { TwoTeamsMatchStats } from '@mycujoo/mcls-event-components'

const statTypes = [
  {
    label: 'Shots on Goal',
    homeVariableName: 'homeShotsOnGoal',
    awayVariableName: 'awayShotsOnGoal',
  },
  {
    label: 'Fouls',
    homeVariableName: 'homeFouls',
    awayVariableName: 'awayFouls',
  },
  // Add more stat types as needed
]

const matchStats = {
  homeShotsOnGoal: 8,
  awayShotsOnGoal: 6,
  homeFouls: 12,
  awayFouls: 8,
  // Add more statistics as needed
}

const config = {
  textColor: '#FFF',
  awayTeamColor: '#FFF200',
  homeTeamColor: '#EF0107',
  hideWhenZeroStats: true,
}

const lang = 'en' // Specify the language code or use dynamic language detection

<TwoTeamsMatchStats
  statTypes={statTypes}
  matchStats={matchStats}
  config={config}
  lang={lang}
/>

TwoTeamsEventStats

The TwoTeamsEventStats component is used to display event statistics for two teams. It takes in event annotation actions, stat types, and configuration options, and calculates the statistics based on the provided data. It then renders the TwoTeamsMatchStats component to display the calculated statistics.

The TwoTeamsEventStats component accepts the following props:

Props:

• eventAnnotationActions: ActionCall[] - An array of event annotation actions representing the actions taken during the event. These actions can include setting or incrementing variables related to the statistics.
• statTypes: StatType[] - An array of objects defining the statistics to be displayed.
• config?: MatchStatsConfig - An optional configuration object that allows customization of the component's appearance.
• lang?: SupportedLanguages - An optional language parameter to handle right-to-left (RTL) display for languages such as Arabic.
• syncWithVideo?: boolean - An optional boolean indicating whether the statistics should be synchronized with a video. Default is false.
• videoTime?: number - An optional number representing the current time of the video in seconds. Used when syncWithVideo is true.

TwoTeamsEventStatsInContext

The TwoTeamsEventStatsInContext can be used inside an event context and will automatically pass the event annotation actions from the event context to TwoTeamsEventStats

Lineup

Lineup

The Lineup is a React component used to display lineup data. It allows for customization of various aspects such as grouping, navigation, entry photos, entry stats, and more.

Props:

• fallbackData: Record<string, unknown> - An optional fallback data object to be used when the data prop is not provided or is empty.

• data: LineupData[] - An array of LineupData objects representing the lineup data to be displayed.

• variables: Map<string, string> - A map of variables used in rendering the entry stats.

• config: LineupConfig - An optional configuration object that allows customization of the component's behavior and appearance.

• className: string - An optional CSS class name to be applied to the component.

Example of usage:

import { Lineup } from '@mycujoo/mcls-event-components';

const lineupData = [
  {
    entries: [
      {
        id: 'player1',
        name: 'John Doe',
        photo: '/path/to/player1.jpg',
        number: '10',
      },
      {
        id: 'player2',
        name: 'Jane Smith',
        photo: '/path/to/player2.jpg',
        number: '7',
      },
      // Add more entries as needed
    ],
    id: 'team1',
    number: '1',
    name: 'Team 1',
    photo: '/path/to/team1.jpg',
  },
  {
    entries: [
      {
        id: 'player3',
        name: 'Alice Johnson',
        photo: '/path/to/player3.jpg',
        number: '5',
      },
      {
        id: 'player4',
        name: 'Bob Wilson',
        photo: '/path/to/player4.jpg',
        number: '9',
      },
      // Add more entries as needed
    ],
    id: 'team2',
    number: '2',
    name: 'Team 2',
    photo: '/path/to/team2.jpg',
  },
  // Add more lineup data groups as needed
];

const config = {
  collapseGroups: true,
  showNavigation: true,
  showEntryPhotos: true,
  renderEntryStats: (entryId, variables) => {
    // Custom rendering of entry stats
    return <div>{/* Entry stats component */}</div>;
  },
  fallbackEntryPhoto: '/path/to/fallbackPhoto.jpg',
};

<Lineup data={lineupData} config={config} />;

EventLineupInContext

The EventLineupInContext can be used inside an event context and will automatically pass the event annotation actions from the event context to Lineup.

Example of usage

const config = {
  fallbackEntryPhoto:'https://fallback.photo'
  collapseGroups: false,
  entriesSubgroupLabels: {
    squad: 'Starting lineup',
    bench: 'Bench players',
  },
  renderEntryStats: (entryId, variables) => {
    const goals = variables?.get('$goals');
    const redCards = variables?.get('$redCards');
    const yellowCards = variables?.get('$yellowCards');

    return (
      <div classNames="entry styles">
        {redCards?.includes(entryId) && (
          <img
            src="https//red-card.svg"
          />
        )}
        {yellowCards?.includes(entryId) && (
          <img
              src="https//yellow-card.svg/icon-yellow-card.svg"
          />
        )}
        {goals?.includes(entryId) && (
            <Fragment>
                <img
                    src="https://icon-goal.svg"
                />
            </Fragment>
        )}
      </div>
    );
  }
}

<EventLineupInContext
  dataPaths={{
    groups: ['home_team', 'away_team'],
    groupLabel: '$groups.abbreviation',
    groupId: '$groups.team_id',
    groupLogo: '$groups.logo',
    entries: ['$groups.squad', '$groups.bench'],
    entryId: '$groups.$entries.person_id',
    entryName: '$groups.$entries.person_name',
    entryLogo: '$groups.$entries.person_picture',
    entryNumber: '$groups.$entries.jersey_number',
  }}
  eventAnnotationActions={externalAnnotations} // optional
  currentTime={videoTime}
  rawData={metadata}
  syncWithVideo
  config={config}
/>

Timeline

Timeline

The Timeline component is used to display a timeline of events or actions. It provides a visual representation of the progression of events along with the current time.

Props:

• timelineData?: TimelineItem[] - An array of objects representing the timeline items. Each object should have the following properties:
  • icon: string - The icon to be displayed for the timeline item.
  • label: string - The label or description of the timeline item.
  • side: string - The side of the timeline item. It can be either 'left' or 'right'.
  • time: string - The time at which the event occurred or the item is relevant.
• currentTime: string - The current time in the format 'mm:ss'.
• config?: TimelineConfig - An optional configuration object that allows customization of the timeline component's appearance and behavior. It can have the following properties:
  • timelineWindowHeight?: string - The height of the timeline window.
  • showExpandButton?: boolean - Determines whether to show the expand button for the timeline.
  • textColor?: string - The color of the text in the timeline.
  • timelineColor?: string - The color of the timeline.
  • timerColor?: string - The color of the timer.
  • timerTextColor?: string - The color of the timer text.
  • fontSize?: string - The font size of the timeline.
  • showMore?: TextStyles - Custom styles for the "Show More" button.
  • matchScore?: MatchScoreConfig - Configuration for the match score component.
  • iconSize?: 'small' | 'medium' | 'large' - The size of the timeline item icons.
• lang?: SupportedLanguages - The language code to determine the language used in the component. It supports the SupportedLanguages enum.
• status?: EventStatus - The status of the event. It can be one of the values defined in the EventStatus enum.
• score?: Score - An object containing the scores of the event. It should have home and away properties representing the scores of the home and away teams, respectively.
• eventMetadata?: TeamsMetadata - An object containing the metadata of the event, including the teams' information.
• className?: string - An optional CSS class name to be applied to the component.
• onViewMore?: (toggle: 'more' | 'less') => void - An optional callback function that is called when the "Show More" button is clicked. It receives a toggle parameter that indicates whether the timeline is being expanded or collapsed.

EventTimelineInContext

The EventTimelineInContext can be used inside an event context and will automatically pass the event annotation actions from the event context to Timeline component.

Props:

• syncWithVideo: boolean - when true will only display timeline items up to the current videoTime
• videoTime: number - timeline time up to which to display timeline items.

The rest of the props are the same as for Timeline component

Example of usage:

import { EventTimelineInContext } from '@mycujoo/mcls-event-components'

<EventTimelineInContext
  currentTime={"50:40"}
  eventAnnotationActions={annotationActionCalls}
  score={{
    away: 5,
    home: 4,
  }}
  status={"EVENT_STATUS_STARTED"}
  eventMetadata={eventMetadata}
  syncWithVideo
  videoTime={3040}
  lang={"en"}
/>