@xsolla/xui-b2c-video-player 0.217.0

package/web/index.d.mts

@@ -0,0 +1,111 @@
+import React, { ReactNode } from 'react';
+import { ThemeOverrideProps, ThemeMode } from '@xsolla/xui-core';
+import { CurrencyType } from '@xsolla/xui-b2c-currency-tag';
+
+/**
+ * Layout of the player chrome.
+ *
+ * - `full` — reward chips, title/description copy, and the control bar.
+ * - `compact` — the control bar only.
+ */
+type VideoPlayerView = "full" | "compact";
+/** Colour tone accepted by the reward chips (mirrors `Tag`'s `tone`). */
+type VideoPlayerRewardTone = "primary" | "brand" | "brandExtra" | "success" | "warning" | "alert" | "neutral";
+/** A category chip rendered with `Tag` above the copy block in the `full` view. */
+interface VideoPlayerLabelReward {
+    /** Stable key for the chip. */
+    key: string;
+    /** Discriminator. Omit or set `"label"` for a `Tag` chip. */
+    kind?: "label";
+    /** Chip label, e.g. `"Good Loot"`. */
+    label: string;
+    /** Optional leading icon. */
+    icon?: ReactNode;
+    /**
+     * Colour tone of the chip. Defaults to `"primary"`.
+     * `"success"` applies the light-mode wash used by the Figma loot preset.
+     */
+    tone?: VideoPlayerRewardTone;
+}
+/**
+ * A virtual-currency amount rendered with `CurrencyTag`.
+ * Figma: the `CurrencyTag` instance beside the loot preset (node `1912:8418`).
+ */
+interface VideoPlayerCurrencyReward {
+    /** Stable key for the chip. */
+    key: string;
+    kind: "currency";
+    /** Amount shown in the chip, e.g. `"250"` or `"+250"`. */
+    value: ReactNode;
+    /** Currency the chip represents. Defaults to `"xsolla-points"`. */
+    currency?: CurrencyType;
+    /** Previous amount, rendered struck through before `value`. */
+    sublabel?: ReactNode;
+}
+/** A single reward chip rendered above the copy block in the `full` view. */
+type VideoPlayerRewardChip = VideoPlayerLabelReward | VideoPlayerCurrencyReward;
+interface VideoPlayerProps extends ThemeOverrideProps {
+    /** Which layout to render. Defaults to `"full"`. */
+    view?: VideoPlayerView;
+    /** Headline shown above the control bar. Hidden in the `compact` view. */
+    title?: string;
+    /** Supporting copy shown under the title. Hidden in the `compact` view. */
+    description?: string;
+    /** Reward chips shown above the copy. Hidden in the `compact` view. */
+    rewards?: VideoPlayerRewardChip[];
+    /**
+     * Playback position in seconds. When omitted the component tracks the
+     * position internally so the clock still follows the seek slider.
+     */
+    currentTime?: number;
+    /** Total length of the media in seconds. Defaults to `0`. */
+    duration?: number;
+    /** Whether playback is running. Controlled when provided. */
+    playing?: boolean;
+    /** Whether audio is muted. Controlled when provided. */
+    muted?: boolean;
+    /** Whether the player is expanded to full screen. Controlled when provided. */
+    expanded?: boolean;
+    /** Disables every control in the bar. */
+    disabled?: boolean;
+    /** Fired with the next playing state when play/pause is pressed. */
+    onPlayPause?: (playing: boolean) => void;
+    /** Fired with the next muted state when the mute control is pressed. */
+    onMute?: (muted: boolean) => void;
+    /** Fired with the next expanded state when the expand control is pressed. */
+    onExpand?: (expanded: boolean) => void;
+    /** Fired with the new position in seconds while seeking. */
+    onSeek?: (seconds: number) => void;
+    /**
+     * Theme mode used for the control-bar chrome. The bar sits on top of a video
+     * surface, so it is pinned to `"dark"` by default to stay legible regardless
+     * of the ambient `XUIProvider` mode. Title and description use
+     * `content/static-light` for the same reason.
+     */
+    overlayThemeMode?: ThemeMode;
+    /** Accessible label for the player group. Defaults to `"Video player"`. */
+    "aria-label"?: string;
+    testID?: string;
+}
+
+/**
+ * Formats a position in seconds as `mm:ss`. Values past an hour keep counting
+ * in minutes (`72:30`) rather than growing a third segment, matching the
+ * fixed-width clock slot in the design.
+ */
+declare const formatPlaybackTime: (seconds: number) => string;
+/**
+ * B2C video player overlay chrome.
+ *
+ * This is **not** an HTML5 `<video>` wrapper — it renders the chrome that sits
+ * on top of a video surface: optional reward chips (`Tag` and `CurrencyTag`),
+ * title and description copy, and a control bar with play/pause, a seek
+ * slider, the elapsed clock, mute, and expand/collapse.
+ *
+ * Spec: Figma `VideoPlayer` component set —
+ * https://www.figma.com/design/SOOtaT80JAVJf7PKlFnt7Q/B2C-Components%E2%80%A8Xsolla-UI-Toolkit?node-id=1909-5990
+ * (node `1923:9871`).
+ */
+declare const VideoPlayer: React.FC<VideoPlayerProps>;
+
+export { VideoPlayer, type VideoPlayerCurrencyReward, type VideoPlayerLabelReward, type VideoPlayerProps, type VideoPlayerRewardChip, type VideoPlayerRewardTone, type VideoPlayerView, formatPlaybackTime };

package/web/index.d.ts

@@ -0,0 +1,111 @@
+import React, { ReactNode } from 'react';
+import { ThemeOverrideProps, ThemeMode } from '@xsolla/xui-core';
+import { CurrencyType } from '@xsolla/xui-b2c-currency-tag';
+
+/**
+ * Layout of the player chrome.
+ *
+ * - `full` — reward chips, title/description copy, and the control bar.
+ * - `compact` — the control bar only.
+ */
+type VideoPlayerView = "full" | "compact";
+/** Colour tone accepted by the reward chips (mirrors `Tag`'s `tone`). */
+type VideoPlayerRewardTone = "primary" | "brand" | "brandExtra" | "success" | "warning" | "alert" | "neutral";
+/** A category chip rendered with `Tag` above the copy block in the `full` view. */
+interface VideoPlayerLabelReward {
+    /** Stable key for the chip. */
+    key: string;
+    /** Discriminator. Omit or set `"label"` for a `Tag` chip. */
+    kind?: "label";
+    /** Chip label, e.g. `"Good Loot"`. */
+    label: string;
+    /** Optional leading icon. */
+    icon?: ReactNode;
+    /**
+     * Colour tone of the chip. Defaults to `"primary"`.
+     * `"success"` applies the light-mode wash used by the Figma loot preset.
+     */
+    tone?: VideoPlayerRewardTone;
+}
+/**
+ * A virtual-currency amount rendered with `CurrencyTag`.
+ * Figma: the `CurrencyTag` instance beside the loot preset (node `1912:8418`).
+ */
+interface VideoPlayerCurrencyReward {
+    /** Stable key for the chip. */
+    key: string;
+    kind: "currency";
+    /** Amount shown in the chip, e.g. `"250"` or `"+250"`. */
+    value: ReactNode;
+    /** Currency the chip represents. Defaults to `"xsolla-points"`. */
+    currency?: CurrencyType;
+    /** Previous amount, rendered struck through before `value`. */
+    sublabel?: ReactNode;
+}
+/** A single reward chip rendered above the copy block in the `full` view. */
+type VideoPlayerRewardChip = VideoPlayerLabelReward | VideoPlayerCurrencyReward;
+interface VideoPlayerProps extends ThemeOverrideProps {
+    /** Which layout to render. Defaults to `"full"`. */
+    view?: VideoPlayerView;
+    /** Headline shown above the control bar. Hidden in the `compact` view. */
+    title?: string;
+    /** Supporting copy shown under the title. Hidden in the `compact` view. */
+    description?: string;
+    /** Reward chips shown above the copy. Hidden in the `compact` view. */
+    rewards?: VideoPlayerRewardChip[];
+    /**
+     * Playback position in seconds. When omitted the component tracks the
+     * position internally so the clock still follows the seek slider.
+     */
+    currentTime?: number;
+    /** Total length of the media in seconds. Defaults to `0`. */
+    duration?: number;
+    /** Whether playback is running. Controlled when provided. */
+    playing?: boolean;
+    /** Whether audio is muted. Controlled when provided. */
+    muted?: boolean;
+    /** Whether the player is expanded to full screen. Controlled when provided. */
+    expanded?: boolean;
+    /** Disables every control in the bar. */
+    disabled?: boolean;
+    /** Fired with the next playing state when play/pause is pressed. */
+    onPlayPause?: (playing: boolean) => void;
+    /** Fired with the next muted state when the mute control is pressed. */
+    onMute?: (muted: boolean) => void;
+    /** Fired with the next expanded state when the expand control is pressed. */
+    onExpand?: (expanded: boolean) => void;
+    /** Fired with the new position in seconds while seeking. */
+    onSeek?: (seconds: number) => void;
+    /**
+     * Theme mode used for the control-bar chrome. The bar sits on top of a video
+     * surface, so it is pinned to `"dark"` by default to stay legible regardless
+     * of the ambient `XUIProvider` mode. Title and description use
+     * `content/static-light` for the same reason.
+     */
+    overlayThemeMode?: ThemeMode;
+    /** Accessible label for the player group. Defaults to `"Video player"`. */
+    "aria-label"?: string;
+    testID?: string;
+}
+
+/**
+ * Formats a position in seconds as `mm:ss`. Values past an hour keep counting
+ * in minutes (`72:30`) rather than growing a third segment, matching the
+ * fixed-width clock slot in the design.
+ */
+declare const formatPlaybackTime: (seconds: number) => string;
+/**
+ * B2C video player overlay chrome.
+ *
+ * This is **not** an HTML5 `<video>` wrapper — it renders the chrome that sits
+ * on top of a video surface: optional reward chips (`Tag` and `CurrencyTag`),
+ * title and description copy, and a control bar with play/pause, a seek
+ * slider, the elapsed clock, mute, and expand/collapse.
+ *
+ * Spec: Figma `VideoPlayer` component set —
+ * https://www.figma.com/design/SOOtaT80JAVJf7PKlFnt7Q/B2C-Components%E2%80%A8Xsolla-UI-Toolkit?node-id=1909-5990
+ * (node `1923:9871`).
+ */
+declare const VideoPlayer: React.FC<VideoPlayerProps>;
+
+export { VideoPlayer, type VideoPlayerCurrencyReward, type VideoPlayerLabelReward, type VideoPlayerProps, type VideoPlayerRewardChip, type VideoPlayerRewardTone, type VideoPlayerView, formatPlaybackTime };