Player Of The Match

A coverflow-style voting carousel for picking the standout player from a match. Before kickoff it shows a countdown; once lineups are in, a swipeable player deck with search, position filters, and a roster rail for jumping straight to any player in a full squad; once the voting window closes, a results view with the outright winner or tied winners.

Import

import { PlayerOfTheMatch } from "fansunited-frontend-components";
import { PlayerOfTheMatchProps } from "fansunited-frontend-core";

Required props

Prop	Type	Description
`entityId`	`string`	Match ID to render, e.g. `"fb:m:12345"`.
`sdk`	`FansUnitedSDKModel`	SDK instance.
`language`	`LanguageType`	Display language.

Optional props

Prop	Type	Description
`themeOptions`	`CustomThemeOptions`	See Theming.
`votingWindow`	`number`	Whole hours after full time that voting stays open. Defaults to `1`.
`showTeam`	`string`	Restrict the carousel to one team id, or `"all"`. Defaults to `"all"`.
`showPlayers`	`string[]`	Restrict both the voting carousel and the results view to a specific list of player ids.
`authRequirement`	`"REGISTERED" \| null`	Require sign-in before voting. Defaults to `null` (no gate).
`userIsLoggedIn`	`boolean`	Whether the current visitor is signed in. Drives the sign-in gate.
`signInCTA`	`SignInCTADetails`	CTA shown instead of the vote button while the sign-in gate is active. See Sign-in CTA.
`defaultImagePlaceholderUrl`	`string`	Background image applied to both the widget's root container and every player card — not related to a missing player headshot, which has its own fallback image.
`brandedAreaImage`	`string`	Image for an optional sponsor banner above the header. Hidden entirely when unset.
`brandedAreaLink`	`string`	URL the branded banner links to.
`headerBannerStyles`	`PlayerOfTheMatchHeaderBannerStyles`	Overrides for the team-vs-team banner — see Header banner styling.

Header banner styling

By default, the team-vs-team banner's background, border, and text colors are all derived from the theme's primary and textSecondary tokens (via themeOptions). Those are shared across the whole widget — changing them to get a specific banner look also recolors the vote button, active-card border, badges, and everything else.

headerBannerStyles overrides just the banner, independently of the rest of the theme:

interface PlayerOfTheMatchHeaderBannerStyles {
  background?: string;
  borderColor?: string;
  textColor?: string;
}

Any field left unset falls back to the theme default. This is the supported way to give the banner a fully custom, solid-color look (e.g. to match a specific brand) without it affecting any other part of the widget.

<PlayerOfTheMatch
  {...otherProps}
  headerBannerStyles={{
    background: "#161A2E",
    borderColor: "#161A2E",
    textColor: "#FFFFFF",
  }}
/>;

Voting lifecycle

The component picks one of three views based on the match's own state and votingWindow — there's no prop to force a particular view:

State	View
Before kickoff	Countdown to kickoff.
Match in progress, or finished and within `votingWindow` hours	The voting carousel — search, position filters, roster rail, live voting status bar (deadline countdown + total votes), and vote / remove-vote per player.
Finished and outside `votingWindow`	Results — outright winner or tied winners, medal styling, vote percentages.

Players are ranked by vote count (ties broken alphabetically); there's no separate sort control.

Examples

Basic

import { PlayerOfTheMatch } from "fansunited-frontend-components";

<PlayerOfTheMatch entityId="fb:m:12345" sdk={sdk} language="en" />;

Restricted to one team

<PlayerOfTheMatch
  entityId="fb:m:12345"
  sdk={sdk}
  language="en"
  showTeam="fb:t:fcb"
/>;

Restricted to a shortlist of players

<PlayerOfTheMatch
  entityId="fb:m:12345"
  sdk={sdk}
  language="en"
  showPlayers={["fb:p:37172", "fb:p:4213360", "fb:p:9902127"]}
/>;

Sign-in required before voting

<PlayerOfTheMatch
  entityId="fb:m:12345"
  sdk={sdk}
  language="en"
  authRequirement="REGISTERED"
  userIsLoggedIn={false}
  signInCTA={{
    defaultLabel: "Sign in to vote",
    onClick: () => {
      // Handle sign-in logic
    },
  }}
/>;

Custom voting window and branded banner

<PlayerOfTheMatch
  entityId="fb:m:12345"
  sdk={sdk}
  language="en"
  votingWindow={2}
  brandedAreaImage="https://example.com/sponsor-banner.png"
  brandedAreaLink="https://sponsor.example.com"
/>;

Custom header banner colors

<PlayerOfTheMatch
  entityId="fb:m:12345"
  sdk={sdk}
  language="en"
  headerBannerStyles={{
    background: "#161A2E",
    borderColor: "#161A2E",
    textColor: "#FFFFFF",
  }}
/>;