@mycujoo/mcls-event-components
v1.0.0-rc.0
Published
> ⚠️ **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.
Downloads
5
Maintainers
Keywords
Readme
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 isfalse
.videoTime?
: number - An optional number representing the current time of the video in seconds. Used whensyncWithVideo
istrue
.
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 thedata
prop is not provided or is empty.data
: LineupData[] - An array ofLineupData
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 videoTimevideoTime
: 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"}
/>