@xsolla/xui-b2c-media-card 0.217.0

package/README.md

@@ -0,0 +1,7 @@
+# @xsolla/xui-b2c-media-card
+
+B2C watchable-media thumbnail with a centred Watch call to action, in landscape
+and portrait orientations, with an optional rewarded variant.
+
+Not the B2B `MediaCard` (`@xsolla/xui-b2b-media-card`), which is an
+upload-management tile.

package/native/index.d.mts

@@ -0,0 +1,64 @@
+import React, { ReactNode } from 'react';
+import { ThemeOverrideProps } from '@xsolla/xui-core';
+
+/**
+ * Figma `Orientation`. `horizontal` is the 319×179 landscape plate used in a
+ * video row; `vertical` is the 95×169 portrait plate used in a shorts rail.
+ */
+type MediaCardOrientation = "horizontal" | "vertical";
+interface MediaCardProps extends ThemeOverrideProps {
+    /** Thumbnail image URL. Fills the whole plate, cropped to cover. */
+    src: string;
+    /**
+     * Human-readable name of the media this card represents, e.g.
+     * `"Chapter 3: The Ascent"`.
+     *
+     * This is what makes a grid of cards usable with a screen reader: the Watch
+     * control is named `"Watch {mediaName}"` rather than a bare `"Watch"`, so ten
+     * cards in a row do not all announce as the same button. Required for that
+     * reason — pass the title even when it is not drawn on the card.
+     */
+    mediaName: string;
+    /**
+     * Alt text for the thumbnail. Defaults to `""` (decorative): the thumbnail is
+     * a picture *of* the media that `mediaName` already names, so describing it
+     * again duplicates the announcement. Pass a value only when the image carries
+     * information the name does not.
+     */
+    alt?: string;
+    /** Figma `Orientation`. Defaults to `horizontal`. */
+    orientation?: MediaCardOrientation;
+    /**
+     * Figma `Rewarded`. Marks the media as granting a reward for watching, which
+     * appends the `rewardIcon` to the Watch control and to its accessible name.
+     */
+    rewarded?: boolean;
+    /**
+     * The reward glyph shown inside the Watch control when `rewarded` is set.
+     * Unopinionated slot — pass the product's own coin/currency icon. Omit it and
+     * the card draws a neutral 16 px placeholder mark instead.
+     */
+    rewardIcon?: ReactNode;
+    /** Figma `Watch Button`. Set `false` to render the bare thumbnail. Defaults to `true`. */
+    showWatchButton?: boolean;
+    /** Visible label on the Watch control. Defaults to `"Watch"`. */
+    watchLabel?: string;
+    /** Called when the Watch control is activated. */
+    onWatchPress?: () => void;
+    /**
+     * Called when the plate itself is pressed. Optional — a card can be a pure
+     * thumbnail whose only action is the Watch control.
+     */
+    onPress?: () => void;
+    /** Removes interactivity from both the plate and the Watch control, and dims the card. */
+    disabled?: boolean;
+    /** Plate width. Defaults to the Figma frame width for the orientation. */
+    width?: number | string;
+    /** Plate height. Overrides the orientation's aspect ratio when supplied. */
+    height?: number | string;
+    testID?: string;
+}
+
+declare const MediaCard: React.FC<MediaCardProps>;
+
+export { MediaCard, type MediaCardOrientation, type MediaCardProps };

package/native/index.d.ts

@@ -0,0 +1,64 @@
+import React, { ReactNode } from 'react';
+import { ThemeOverrideProps } from '@xsolla/xui-core';
+
+/**
+ * Figma `Orientation`. `horizontal` is the 319×179 landscape plate used in a
+ * video row; `vertical` is the 95×169 portrait plate used in a shorts rail.
+ */
+type MediaCardOrientation = "horizontal" | "vertical";
+interface MediaCardProps extends ThemeOverrideProps {
+    /** Thumbnail image URL. Fills the whole plate, cropped to cover. */
+    src: string;
+    /**
+     * Human-readable name of the media this card represents, e.g.
+     * `"Chapter 3: The Ascent"`.
+     *
+     * This is what makes a grid of cards usable with a screen reader: the Watch
+     * control is named `"Watch {mediaName}"` rather than a bare `"Watch"`, so ten
+     * cards in a row do not all announce as the same button. Required for that
+     * reason — pass the title even when it is not drawn on the card.
+     */
+    mediaName: string;
+    /**
+     * Alt text for the thumbnail. Defaults to `""` (decorative): the thumbnail is
+     * a picture *of* the media that `mediaName` already names, so describing it
+     * again duplicates the announcement. Pass a value only when the image carries
+     * information the name does not.
+     */
+    alt?: string;
+    /** Figma `Orientation`. Defaults to `horizontal`. */
+    orientation?: MediaCardOrientation;
+    /**
+     * Figma `Rewarded`. Marks the media as granting a reward for watching, which
+     * appends the `rewardIcon` to the Watch control and to its accessible name.
+     */
+    rewarded?: boolean;
+    /**
+     * The reward glyph shown inside the Watch control when `rewarded` is set.
+     * Unopinionated slot — pass the product's own coin/currency icon. Omit it and
+     * the card draws a neutral 16 px placeholder mark instead.
+     */
+    rewardIcon?: ReactNode;
+    /** Figma `Watch Button`. Set `false` to render the bare thumbnail. Defaults to `true`. */
+    showWatchButton?: boolean;
+    /** Visible label on the Watch control. Defaults to `"Watch"`. */
+    watchLabel?: string;
+    /** Called when the Watch control is activated. */
+    onWatchPress?: () => void;
+    /**
+     * Called when the plate itself is pressed. Optional — a card can be a pure
+     * thumbnail whose only action is the Watch control.
+     */
+    onPress?: () => void;
+    /** Removes interactivity from both the plate and the Watch control, and dims the card. */
+    disabled?: boolean;
+    /** Plate width. Defaults to the Figma frame width for the orientation. */
+    width?: number | string;
+    /** Plate height. Overrides the orientation's aspect ratio when supplied. */
+    height?: number | string;
+    testID?: string;
+}
+
+declare const MediaCard: React.FC<MediaCardProps>;
+
+export { MediaCard, type MediaCardOrientation, type MediaCardProps };

package/native/index.js

@@ -0,0 +1,542 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.tsx
+var index_exports = {};
+__export(index_exports, {
+  MediaCard: () => MediaCard
+});
+module.exports = __toCommonJS(index_exports);
+
+// ../../foundation/primitives-native/src/Box.tsx
+var import_react_native = require("react-native");
+var import_jsx_runtime = require("react/jsx-runtime");
+var roleToAccessibilityRole = {
+  button: "button",
+  link: "link",
+  img: "image",
+  image: "image",
+  summary: "summary",
+  switch: "switch",
+  checkbox: "checkbox",
+  radio: "radio",
+  heading: "header",
+  text: "text",
+  search: "search",
+  alert: "alert",
+  none: "none",
+  presentation: "none",
+  progressbar: "progressbar",
+  scrollbar: "scrollbar",
+  adjustable: "adjustable",
+  tab: "tab",
+  menu: "menu",
+  menuitem: "menuitem",
+  list: "list",
+  timer: "timer"
+};
+var toGapValue = (gap) => {
+  if (gap === void 0) return void 0;
+  if (typeof gap === "number") return gap;
+  const pxMatch = /^(\d+(?:\.\d+)?)px$/.exec(gap);
+  if (pxMatch) return Number(pxMatch[1]);
+  const asNumber = Number(gap);
+  return Number.isFinite(asNumber) ? asNumber : void 0;
+};
+var Box = ({
+  children,
+  onPress,
+  onLayout,
+  onMoveShouldSetResponder,
+  onResponderGrant,
+  onResponderMove,
+  onResponderRelease,
+  onResponderTerminate,
+  backgroundColor,
+  borderColor,
+  borderWidth,
+  borderBottomWidth,
+  borderBottomColor,
+  borderTopWidth,
+  borderTopColor,
+  borderLeftWidth,
+  borderLeftColor,
+  borderRightWidth,
+  borderRightColor,
+  borderRadius,
+  borderStyle,
+  height,
+  padding,
+  paddingHorizontal,
+  paddingVertical,
+  margin,
+  marginTop,
+  marginBottom,
+  marginLeft,
+  marginRight,
+  flexDirection,
+  flexWrap,
+  alignItems,
+  justifyContent,
+  alignSelf,
+  position,
+  top,
+  bottom,
+  left,
+  right,
+  width,
+  minWidth,
+  minHeight,
+  maxWidth,
+  maxHeight,
+  flex,
+  flexShrink,
+  gap,
+  overflow,
+  opacity,
+  zIndex,
+  hoverStyle,
+  pressStyle,
+  style,
+  disabled,
+  "data-testid": dataTestId,
+  testID,
+  as,
+  src,
+  alt,
+  ...rest
+}) => {
+  const getContainerStyle = (pressed) => ({
+    backgroundColor: pressed && pressStyle?.backgroundColor ? pressStyle.backgroundColor : backgroundColor,
+    borderColor,
+    borderWidth,
+    borderBottomWidth,
+    borderBottomColor,
+    borderTopWidth,
+    borderTopColor,
+    borderLeftWidth,
+    borderLeftColor,
+    borderRightWidth,
+    borderRightColor,
+    borderRadius,
+    borderStyle,
+    overflow,
+    opacity: opacity ?? (disabled ? 0.5 : void 0),
+    zIndex,
+    height,
+    width,
+    minWidth,
+    minHeight,
+    maxWidth,
+    maxHeight,
+    padding,
+    paddingHorizontal,
+    paddingVertical,
+    margin,
+    marginTop,
+    marginBottom,
+    marginLeft,
+    marginRight,
+    flexDirection,
+    flexWrap,
+    alignItems,
+    justifyContent,
+    alignSelf,
+    position,
+    top,
+    bottom,
+    left,
+    right,
+    flex,
+    flexShrink,
+    gap: toGapValue(gap),
+    ...style
+  });
+  const finalTestID = dataTestId || testID;
+  const {
+    role,
+    tabIndex,
+    onKeyDown,
+    onKeyUp,
+    "aria-label": ariaLabel,
+    "aria-labelledby": _ariaLabelledBy,
+    "aria-current": _ariaCurrent,
+    "aria-disabled": ariaDisabled,
+    "aria-live": ariaLive,
+    "aria-busy": ariaBusy,
+    className,
+    "data-testid": _dataTestId,
+    cursor: _cursor,
+    type: _type,
+    ...nativeRest
+  } = rest;
+  const accessibilityRole = typeof role === "string" && roleToAccessibilityRole[role] || (as === "button" ? "button" : void 0);
+  const isDisabled = Boolean(disabled || ariaDisabled);
+  const accessibilityState = {
+    disabled: isDisabled || void 0,
+    busy: Boolean(ariaBusy) || void 0
+  };
+  const accessibilityLiveRegion = ariaLive === "polite" || ariaLive === "assertive" ? ariaLive : void 0;
+  if (as === "img" && src) {
+    const imageStyle = {
+      width,
+      height,
+      borderRadius,
+      position,
+      top,
+      bottom,
+      left,
+      right,
+      ...style
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_react_native.Image,
+      {
+        source: { uri: src },
+        style: imageStyle,
+        testID: finalTestID,
+        accessibilityLabel: typeof ariaLabel === "string" ? ariaLabel : alt,
+        resizeMode: "cover",
+        ...nativeRest
+      }
+    );
+  }
+  if (onPress || as === "button") {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_react_native.Pressable,
+      {
+        onPress: !isDisabled && onPress ? onPress : void 0,
+        disabled: isDisabled,
+        onLayout,
+        onMoveShouldSetResponder,
+        onResponderGrant,
+        onResponderMove,
+        onResponderRelease,
+        onResponderTerminate,
+        style: ({ pressed }) => getContainerStyle(pressed),
+        testID: finalTestID,
+        accessibilityRole,
+        accessibilityLabel: typeof ariaLabel === "string" ? ariaLabel : void 0,
+        accessibilityState,
+        accessibilityLiveRegion,
+        ...nativeRest,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_react_native.View,
+    {
+      style: getContainerStyle(),
+      testID: finalTestID,
+      onLayout,
+      onMoveShouldSetResponder,
+      onResponderGrant,
+      onResponderMove,
+      onResponderRelease,
+      onResponderTerminate,
+      accessibilityRole,
+      accessibilityLabel: typeof ariaLabel === "string" ? ariaLabel : void 0,
+      accessibilityState,
+      accessibilityLiveRegion,
+      ...nativeRest,
+      children
+    }
+  );
+};
+
+// ../../foundation/primitives-native/src/Text.tsx
+var import_react_native2 = require("react-native");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var roleMap = {
+  alert: "alert",
+  heading: "header",
+  button: "button",
+  link: "link",
+  text: "text"
+};
+var parseNumericValue = (value) => {
+  if (value === void 0) return void 0;
+  if (typeof value === "number") return value;
+  const parsed = parseFloat(value);
+  return isNaN(parsed) ? void 0 : parsed;
+};
+var Text = ({
+  children,
+  color,
+  fontSize,
+  fontWeight,
+  fontFamily,
+  textAlign,
+  lineHeight,
+  numberOfLines,
+  id,
+  role,
+  testID,
+  "data-testid": dataTestId,
+  style: styleProp,
+  ...props
+}) => {
+  let resolvedFontFamily = fontFamily ? fontFamily.split(",")[0].replace(/['"]/g, "").trim() : void 0;
+  if (resolvedFontFamily === "Pilat Wide" || resolvedFontFamily === "Pilat Wide Bold" || resolvedFontFamily === "Aktiv Grotesk") {
+    resolvedFontFamily = void 0;
+  }
+  const incomingStyle = import_react_native2.StyleSheet.flatten(styleProp);
+  const baseStyle = {
+    color: color ?? incomingStyle?.color,
+    fontSize: typeof fontSize === "number" ? fontSize : void 0,
+    fontWeight,
+    fontFamily: resolvedFontFamily,
+    textDecorationLine: props.textDecoration,
+    textAlign: textAlign ?? incomingStyle?.textAlign,
+    lineHeight: parseNumericValue(lineHeight ?? incomingStyle?.lineHeight),
+    marginTop: parseNumericValue(
+      incomingStyle?.marginTop
+    ),
+    marginBottom: parseNumericValue(
+      incomingStyle?.marginBottom
+    )
+  };
+  const accessibilityRole = role ? roleMap[role] : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_react_native2.Text,
+    {
+      style: baseStyle,
+      numberOfLines,
+      testID: dataTestId || testID || id,
+      accessibilityRole,
+      children
+    }
+  );
+};
+
+// ../../foundation/primitives-native/src/index.tsx
+var isWeb = false;
+
+// src/MediaCard.tsx
+var import_xui_core = require("@xsolla/xui-core");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var FRAME = {
+  horizontal: { width: 319, height: 179 },
+  vertical: { width: 95, height: 169 }
+};
+var CARD_RADIUS = 8;
+var WATCH_RADIUS = 4;
+var WATCH_PADDING_X = 16;
+var WATCH_PADDING_Y = 8;
+var WATCH_GAP = 8;
+var WATCH_FONT_SIZE = 14;
+var WATCH_LINE_HEIGHT = 20;
+var WATCH_FONT_WEIGHT = "500";
+var REWARD_GLYPH_SIZE = 16;
+var WatchControl = ({
+  label,
+  accessibleName,
+  disabled,
+  onPress,
+  background,
+  foreground,
+  fontFamily,
+  children
+}) => {
+  if (isWeb) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      "button",
+      {
+        type: "button",
+        "aria-label": accessibleName,
+        disabled,
+        "data-testid": "media-card-watch",
+        onClick: (event) => {
+          event.stopPropagation();
+          onPress?.();
+        },
+        style: {
+          alignItems: "center",
+          background,
+          border: 0,
+          borderRadius: WATCH_RADIUS,
+          color: foreground,
+          cursor: onPress && !disabled ? "pointer" : "default",
+          display: "inline-flex",
+          fontFamily,
+          fontSize: WATCH_FONT_SIZE,
+          fontWeight: WATCH_FONT_WEIGHT,
+          gap: WATCH_GAP,
+          lineHeight: `${WATCH_LINE_HEIGHT}px`,
+          margin: 0,
+          padding: `${WATCH_PADDING_Y}px ${WATCH_PADDING_X}px`,
+          whiteSpace: "nowrap",
+          zIndex: 10
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { "data-testid": "media-card-watch-label", children: label }),
+          children
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    Box,
+    {
+      flexDirection: "row",
+      alignItems: "center",
+      gap: WATCH_GAP,
+      paddingHorizontal: WATCH_PADDING_X,
+      paddingVertical: WATCH_PADDING_Y,
+      borderRadius: WATCH_RADIUS,
+      backgroundColor: background,
+      zIndex: 10,
+      onPress: disabled ? void 0 : onPress,
+      accessibilityRole: "button",
+      accessibilityLabel: accessibleName,
+      testID: "media-card-watch",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          Text,
+          {
+            color: foreground,
+            fontFamily,
+            fontSize: WATCH_FONT_SIZE,
+            lineHeight: WATCH_LINE_HEIGHT,
+            fontWeight: WATCH_FONT_WEIGHT,
+            numberOfLines: 1,
+            testID: "media-card-watch-label",
+            children: label
+          }
+        ),
+        children
+      ]
+    }
+  );
+};
+var MediaCard = ({
+  src,
+  mediaName,
+  alt = "",
+  orientation = "horizontal",
+  rewarded = false,
+  rewardIcon,
+  showWatchButton = true,
+  watchLabel = "Watch",
+  onWatchPress,
+  onPress,
+  disabled = false,
+  width,
+  height,
+  testID,
+  themeMode,
+  themeProductContext = "b2c"
+}) => {
+  const { theme } = (0, import_xui_core.useResolvedTheme)({ themeMode, themeProductContext });
+  const frame = FRAME[orientation];
+  const isPlateInteractive = Boolean(onPress) && !disabled;
+  const aspectRatio = frame.width / frame.height;
+  const watchAccessibleName = rewarded ? `${watchLabel} ${mediaName}, rewarded` : `${watchLabel} ${mediaName}`;
+  const plateInteractiveProps = isWeb && isPlateInteractive ? {
+    role: "button",
+    tabIndex: 0,
+    onKeyDown: (event) => {
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        onPress?.();
+      }
+    }
+  } : {};
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    Box,
+    {
+      width: width ?? frame.width,
+      height,
+      position: "relative",
+      overflow: "hidden",
+      borderRadius: CARD_RADIUS,
+      borderWidth: 1,
+      borderStyle: "solid",
+      borderColor: theme.colors.border.secondary,
+      backgroundColor: theme.colors.background.secondary,
+      alignItems: "center",
+      justifyContent: "center",
+      opacity: disabled ? 0.48 : 1,
+      onPress: isPlateInteractive ? onPress : void 0,
+      "aria-label": mediaName,
+      "aria-disabled": disabled || void 0,
+      ...!isWeb ? { accessibilityLabel: mediaName } : {},
+      style: {
+        aspectRatio: height ? void 0 : aspectRatio,
+        ...isWeb && isPlateInteractive ? { cursor: "pointer" } : {}
+      },
+      "data-testid": testID || "media-card",
+      testID: testID || "media-card",
+      ...plateInteractiveProps,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          Box,
+          {
+            as: "img",
+            src,
+            alt,
+            position: "absolute",
+            top: 0,
+            left: 0,
+            width: "100%",
+            height: "100%",
+            style: isWeb ? { objectFit: "cover" } : void 0,
+            "data-testid": "media-card-thumbnail",
+            testID: "media-card-thumbnail"
+          }
+        ),
+        showWatchButton && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          WatchControl,
+          {
+            label: watchLabel,
+            accessibleName: watchAccessibleName,
+            disabled,
+            onPress: onWatchPress,
+            background: theme.colors.control.brandExtra.primary.bg,
+            foreground: theme.colors.content.on.brandExtra,
+            fontFamily: theme.fonts.body,
+            children: rewarded && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              Box,
+              {
+                width: REWARD_GLYPH_SIZE,
+                height: REWARD_GLYPH_SIZE,
+                flexShrink: 0,
+                alignItems: "center",
+                justifyContent: "center",
+                borderRadius: REWARD_GLYPH_SIZE / 2,
+                backgroundColor: rewardIcon ? void 0 : theme.colors.content.on.brandExtra,
+                "aria-hidden": true,
+                "data-testid": "media-card-reward",
+                testID: "media-card-reward",
+                children: rewardIcon
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+MediaCard.displayName = "MediaCard";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MediaCard
+});
+//# sourceMappingURL=index.js.map