@xsolla/xui-b2c-video-player 0.217.0

package/web/index.js

@@ -0,0 +1,584 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.tsx
+var index_exports = {};
+__export(index_exports, {
+  VideoPlayer: () => VideoPlayer,
+  formatPlaybackTime: () => formatPlaybackTime
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/VideoPlayer.tsx
+var import_react3 = require("react");
+
+// ../../foundation/primitives-web/src/Box.tsx
+var import_react2 = __toESM(require("react"));
+var import_styled_components = __toESM(require("styled-components"));
+
+// ../../foundation/primitives-web/src/filterDOMProps.ts
+var import_react = __toESM(require("react"));
+
+// ../../../node_modules/@emotion/memoize/dist/memoize.esm.js
+function memoize(fn) {
+  var cache = {};
+  return function(arg) {
+    if (cache[arg] === void 0) cache[arg] = fn(arg);
+    return cache[arg];
+  };
+}
+var memoize_esm_default = memoize;
+
+// ../../../node_modules/@emotion/is-prop-valid/dist/is-prop-valid.esm.js
+var reactPropsRegex = /^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|decoding|default|defer|dir|disabled|disablePictureInPicture|download|draggable|encType|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loading|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|inert|itemProp|itemScope|itemType|itemID|itemRef|on|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/;
+var index = memoize_esm_default(
+  function(prop) {
+    return reactPropsRegex.test(prop) || prop.charCodeAt(0) === 111 && prop.charCodeAt(1) === 110 && prop.charCodeAt(2) < 91;
+  }
+  /* Z+1 */
+);
+var is_prop_valid_esm_default = index;
+
+// ../../foundation/primitives-web/src/filterDOMProps.ts
+var ADDITIONAL_BLOCKED_PROPS = /* @__PURE__ */ new Set([
+  // RN-only event handlers (pass isPropValid's on* pattern)
+  "onPress",
+  "onChangeText",
+  "onLayout",
+  "onMoveShouldSetResponder",
+  "onResponderGrant",
+  "onResponderMove",
+  "onResponderRelease",
+  "onResponderTerminate",
+  // SVG attributes that pass isPropValid
+  "strokeWidth",
+  // CSS properties that pass isPropValid but are used as component props
+  "overflow",
+  "opacity",
+  "cursor",
+  "fontSize",
+  "fontWeight",
+  "fontFamily",
+  "textDecoration",
+  // Cross-platform layout prop that Text consumes as CSS, never as an
+  // attribute. Pinned explicitly because it is now spread into the styled
+  // component rather than destructured away before it can reach the DOM.
+  "numberOfLines"
+]);
+function shouldForwardProp(key) {
+  if (ADDITIONAL_BLOCKED_PROPS.has(key)) return false;
+  return is_prop_valid_esm_default(key);
+}
+function createFilteredElement(defaultTag) {
+  const Component = import_react.default.forwardRef(
+    ({ children, elementType, ...props }, ref) => {
+      const Tag2 = elementType || defaultTag;
+      const htmlProps = {};
+      for (const key of Object.keys(props)) {
+        if (shouldForwardProp(key)) {
+          htmlProps[key] = props[key];
+        }
+      }
+      return import_react.default.createElement(
+        Tag2,
+        { ref, ...htmlProps },
+        children
+      );
+    }
+  );
+  Component.displayName = `Filtered(${defaultTag})`;
+  return Component;
+}
+
+// ../../foundation/primitives-web/src/Box.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var FilteredDiv = createFilteredElement("div");
+var StyledBox = (0, import_styled_components.default)(FilteredDiv)`
+  display: flex;
+  box-sizing: border-box;
+  background-color: ${(props) => props.backgroundColor || "transparent"};
+  border-color: ${(props) => props.borderColor || "transparent"};
+  border-width: ${(props) => typeof props.borderWidth === "number" ? `${props.borderWidth}px` : props.borderWidth || 0};
+
+  ${(props) => props.borderBottomWidth !== void 0 && `
+    border-bottom-width: ${typeof props.borderBottomWidth === "number" ? `${props.borderBottomWidth}px` : props.borderBottomWidth};
+    border-bottom-color: ${props.borderBottomColor || props.borderColor || "transparent"};
+    border-bottom-style: solid;
+  `}
+  ${(props) => props.borderTopWidth !== void 0 && `
+    border-top-width: ${typeof props.borderTopWidth === "number" ? `${props.borderTopWidth}px` : props.borderTopWidth};
+    border-top-color: ${props.borderTopColor || props.borderColor || "transparent"};
+    border-top-style: solid;
+  `}
+  ${(props) => props.borderLeftWidth !== void 0 && `
+    border-left-width: ${typeof props.borderLeftWidth === "number" ? `${props.borderLeftWidth}px` : props.borderLeftWidth};
+    border-left-color: ${props.borderLeftColor || props.borderColor || "transparent"};
+    border-left-style: solid;
+  `}
+  ${(props) => props.borderRightWidth !== void 0 && `
+    border-right-width: ${typeof props.borderRightWidth === "number" ? `${props.borderRightWidth}px` : props.borderRightWidth};
+    border-right-color: ${props.borderRightColor || props.borderColor || "transparent"};
+    border-right-style: solid;
+  `}
+
+  border-style: ${(props) => props.borderStyle || (props.borderWidth || props.borderBottomWidth || props.borderTopWidth || props.borderLeftWidth || props.borderRightWidth ? "solid" : "none")};
+  border-radius: ${(props) => typeof props.borderRadius === "number" ? `${props.borderRadius}px` : props.borderRadius || 0};
+  height: ${(props) => typeof props.height === "number" ? `${props.height}px` : props.height || "auto"};
+  width: ${(props) => typeof props.width === "number" ? `${props.width}px` : props.width || "auto"};
+  min-width: ${(props) => typeof props.minWidth === "number" ? `${props.minWidth}px` : props.minWidth || "auto"};
+  min-height: ${(props) => typeof props.minHeight === "number" ? `${props.minHeight}px` : props.minHeight || "auto"};
+  max-width: ${(props) => typeof props.maxWidth === "number" ? `${props.maxWidth}px` : props.maxWidth || "none"};
+  max-height: ${(props) => typeof props.maxHeight === "number" ? `${props.maxHeight}px` : props.maxHeight || "none"};
+
+  padding: ${(props) => typeof props.padding === "number" ? `${props.padding}px` : props.padding || 0};
+  ${(props) => props.paddingHorizontal && `
+    padding-left: ${typeof props.paddingHorizontal === "number" ? `${props.paddingHorizontal}px` : props.paddingHorizontal};
+    padding-right: ${typeof props.paddingHorizontal === "number" ? `${props.paddingHorizontal}px` : props.paddingHorizontal};
+  `}
+  ${(props) => props.paddingVertical && `
+    padding-top: ${typeof props.paddingVertical === "number" ? `${props.paddingVertical}px` : props.paddingVertical};
+    padding-bottom: ${typeof props.paddingVertical === "number" ? `${props.paddingVertical}px` : props.paddingVertical};
+  `}
+  ${(props) => props.paddingTop !== void 0 && `padding-top: ${typeof props.paddingTop === "number" ? `${props.paddingTop}px` : props.paddingTop};`}
+  ${(props) => props.paddingBottom !== void 0 && `padding-bottom: ${typeof props.paddingBottom === "number" ? `${props.paddingBottom}px` : props.paddingBottom};`}
+  ${(props) => props.paddingLeft !== void 0 && `padding-left: ${typeof props.paddingLeft === "number" ? `${props.paddingLeft}px` : props.paddingLeft};`}
+  ${(props) => props.paddingRight !== void 0 && `padding-right: ${typeof props.paddingRight === "number" ? `${props.paddingRight}px` : props.paddingRight};`}
+
+  margin: ${(props) => typeof props.margin === "number" ? `${props.margin}px` : props.margin || 0};
+  ${(props) => props.marginTop !== void 0 && `margin-top: ${typeof props.marginTop === "number" ? `${props.marginTop}px` : props.marginTop};`}
+  ${(props) => props.marginBottom !== void 0 && `margin-bottom: ${typeof props.marginBottom === "number" ? `${props.marginBottom}px` : props.marginBottom};`}
+  ${(props) => props.marginLeft !== void 0 && `margin-left: ${typeof props.marginLeft === "number" ? `${props.marginLeft}px` : props.marginLeft};`}
+  ${(props) => props.marginRight !== void 0 && `margin-right: ${typeof props.marginRight === "number" ? `${props.marginRight}px` : props.marginRight};`}
+
+  flex-direction: ${(props) => props.flexDirection || "column"};
+  flex-wrap: ${(props) => props.flexWrap || "nowrap"};
+  align-items: ${(props) => props.alignItems || "stretch"};
+  justify-content: ${(props) => props.justifyContent || "flex-start"};
+  cursor: ${(props) => props.cursor ? props.cursor : props.onClick || props.onPress ? "pointer" : "inherit"};
+  position: ${(props) => props.position || "static"};
+  top: ${(props) => typeof props.top === "number" ? `${props.top}px` : props.top};
+  bottom: ${(props) => typeof props.bottom === "number" ? `${props.bottom}px` : props.bottom};
+  left: ${(props) => typeof props.left === "number" ? `${props.left}px` : props.left};
+  right: ${(props) => typeof props.right === "number" ? `${props.right}px` : props.right};
+  flex: ${(props) => props.flex};
+  flex-shrink: ${(props) => props.flexShrink ?? 1};
+  gap: ${(props) => typeof props.gap === "number" ? `${props.gap}px` : props.gap || 0};
+  align-self: ${(props) => props.alignSelf || "auto"};
+  /* Only emit overflow-x/y when explicitly set. Defaulting them to
+     visible after overflow would override the shorthand and break
+     clipping (e.g. OtherCard bottom-right promo image). */
+  overflow: ${(props) => props.overflow || "visible"};
+  ${(props) => props.overflowX != null ? `overflow-x: ${props.overflowX};` : ""}
+  ${(props) => props.overflowY != null ? `overflow-y: ${props.overflowY};` : ""}
+  z-index: ${(props) => props.zIndex};
+  opacity: ${(props) => props.opacity != null ? props.opacity : props.disabled ? 0.5 : 1};
+  pointer-events: ${(props) => props.disabled ? "none" : "auto"};
+
+  /* \`background\` is emitted before \`background-color\` so a caller passing
+     both still gets backgroundColor as the winner. Use the shorthand for a
+     layered fill (e.g. an overlay tint over a resting surface colour), which
+     a single background-color cannot express. */
+  &:hover {
+    ${(props) => props.hoverStyle?.background && `background: ${props.hoverStyle.background};`}
+    ${(props) => props.hoverStyle?.backgroundColor && `background-color: ${props.hoverStyle.backgroundColor};`}
+    ${(props) => props.hoverStyle?.borderColor && `border-color: ${props.hoverStyle.borderColor};`}
+  }
+
+  &:active {
+    ${(props) => props.pressStyle?.background && `background: ${props.pressStyle.background};`}
+    ${(props) => props.pressStyle?.backgroundColor && `background-color: ${props.pressStyle.backgroundColor};`}
+  }
+`;
+var Box = import_react2.default.forwardRef(
+  ({
+    children,
+    onPress,
+    onKeyDown,
+    onKeyUp,
+    role,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-current": ariaCurrent,
+    "aria-disabled": ariaDisabled,
+    "aria-live": ariaLive,
+    "aria-busy": ariaBusy,
+    "aria-describedby": ariaDescribedBy,
+    "aria-expanded": ariaExpanded,
+    "aria-haspopup": ariaHasPopup,
+    "aria-pressed": ariaPressed,
+    "aria-controls": ariaControls,
+    tabIndex,
+    as,
+    src,
+    alt,
+    onError,
+    onLoad,
+    type,
+    disabled,
+    id,
+    testID,
+    "data-testid": dataTestId,
+    ...props
+  }, ref) => {
+    if (as === "img" && src) {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "img",
+        {
+          src,
+          alt: alt || "",
+          onError,
+          onLoad,
+          "data-testid": dataTestId || testID,
+          style: {
+            display: "block",
+            objectFit: "cover",
+            width: typeof props.width === "number" ? `${props.width}px` : props.width,
+            height: typeof props.height === "number" ? `${props.height}px` : props.height,
+            borderRadius: typeof props.borderRadius === "number" ? `${props.borderRadius}px` : props.borderRadius,
+            position: props.position,
+            top: typeof props.top === "number" ? `${props.top}px` : props.top,
+            left: typeof props.left === "number" ? `${props.left}px` : props.left,
+            right: typeof props.right === "number" ? `${props.right}px` : props.right,
+            bottom: typeof props.bottom === "number" ? `${props.bottom}px` : props.bottom,
+            ...props.style
+          }
+        }
+      );
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      StyledBox,
+      {
+        ref,
+        elementType: as,
+        id,
+        type: as === "button" ? type || "button" : void 0,
+        disabled: as === "button" ? disabled : void 0,
+        onClick: onPress,
+        onKeyDown,
+        onKeyUp,
+        role,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        "aria-current": ariaCurrent,
+        "aria-disabled": ariaDisabled,
+        "aria-busy": ariaBusy,
+        "aria-describedby": ariaDescribedBy,
+        "aria-expanded": ariaExpanded,
+        "aria-haspopup": ariaHasPopup,
+        "aria-pressed": ariaPressed,
+        "aria-controls": ariaControls,
+        "aria-live": ariaLive,
+        tabIndex: tabIndex !== void 0 ? tabIndex : void 0,
+        "data-testid": dataTestId || testID,
+        ...props,
+        children
+      }
+    );
+  }
+);
+Box.displayName = "Box";
+
+// src/VideoPlayer.tsx
+var import_xui_core = require("@xsolla/xui-core");
+var import_xui_button = require("@xsolla/xui-button");
+var import_xui_slider = require("@xsolla/xui-slider");
+var import_xui_tag = require("@xsolla/xui-tag");
+var import_xui_b2c_currency_tag = require("@xsolla/xui-b2c-currency-tag");
+var import_xui_typography = require("@xsolla/xui-typography");
+var import_xui_icons_base = require("@xsolla/xui-icons-base");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var CONTROL_BAR_HEIGHT = 64;
+var CONTROL_BAR_PADDING = 12;
+var HEADER_COPY_GAP = 12;
+var SIDE_CONTROL_GAP = 12;
+var SUCCESS_REWARD_VEIL = "linear-gradient(rgba(255, 255, 255, 0.64), rgba(255, 255, 255, 0.64))";
+var LABEL_REWARD_PADDING = 6;
+var isCurrencyReward = (reward) => reward.kind === "currency";
+var formatPlaybackTime = (seconds) => {
+  const safe = Number.isFinite(seconds) && seconds > 0 ? Math.floor(seconds) : 0;
+  const minutes = Math.floor(safe / 60);
+  const remainder = safe % 60;
+  return `${String(minutes).padStart(2, "0")}:${String(remainder).padStart(
+    2,
+    "0"
+  )}`;
+};
+var VideoPlayer = ({
+  view = "full",
+  title,
+  description,
+  rewards,
+  currentTime,
+  duration = 0,
+  playing,
+  muted,
+  expanded,
+  disabled = false,
+  onPlayPause,
+  onMute,
+  onExpand,
+  onSeek,
+  overlayThemeMode = "dark",
+  "aria-label": ariaLabel = "Video player",
+  testID,
+  themeMode,
+  themeProductContext = "b2c"
+}) => {
+  const { theme } = (0, import_xui_core.useResolvedTheme)({ themeMode, themeProductContext });
+  const { theme: overlayTheme } = (0, import_xui_core.useResolvedTheme)({
+    themeMode: overlayThemeMode,
+    themeProductContext
+  });
+  const [internalTime, setInternalTime] = (0, import_react3.useState)(currentTime ?? 0);
+  const [internalPlaying, setInternalPlaying] = (0, import_react3.useState)(playing ?? false);
+  const [internalMuted, setInternalMuted] = (0, import_react3.useState)(muted ?? false);
+  const [internalExpanded, setInternalExpanded] = (0, import_react3.useState)(expanded ?? false);
+  const resolvedTime = currentTime ?? internalTime;
+  const isPlaying = playing ?? internalPlaying;
+  const isMuted = muted ?? internalMuted;
+  const isExpanded = expanded ?? internalExpanded;
+  const isCompact = view === "compact";
+  const isSeekable = duration > 0;
+  const overlayContentColor = overlayTheme.colors.content.static.light;
+  const copyColor = theme.colors.content.static.light;
+  const handleSeek = (next) => {
+    setInternalTime(next);
+    onSeek?.(next);
+  };
+  const handlePlayPause = () => {
+    const next = !isPlaying;
+    setInternalPlaying(next);
+    onPlayPause?.(next);
+  };
+  const handleMute = () => {
+    const next = !isMuted;
+    setInternalMuted(next);
+    onMute?.(next);
+  };
+  const handleExpand = () => {
+    const next = !isExpanded;
+    setInternalExpanded(next);
+    onExpand?.(next);
+  };
+  const hasRewards = Boolean(rewards && rewards.length > 0);
+  const hasCopy = Boolean(title || description);
+  const showHeader = !isCompact && (hasRewards || hasCopy);
+  const controlBar = /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    Box,
+    {
+      flexDirection: "row",
+      alignItems: "center",
+      width: "100%",
+      height: CONTROL_BAR_HEIGHT,
+      gap: theme.spacing.lg,
+      padding: CONTROL_BAR_PADDING,
+      borderRadius: theme.shape.cell.borderRadius,
+      backgroundColor: overlayTheme.colors.layer.scrim,
+      style: { backdropFilter: "blur(8px)", WebkitBackdropFilter: "blur(8px)" },
+      testID: testID ? `${testID}-controls` : "video-player-controls",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+          Box,
+          {
+            flex: 1,
+            minWidth: 0,
+            flexDirection: "row",
+            alignItems: "center",
+            gap: theme.spacing.sm,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                import_xui_button.IconButton,
+                {
+                  variant: "tertiary",
+                  tone: "mono",
+                  size: "xs",
+                  themeMode: overlayThemeMode,
+                  themeProductContext,
+                  disabled,
+                  icon: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_xui_icons_base.Pause, {}) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_xui_icons_base.Play, {}),
+                  "aria-label": isPlaying ? "Pause" : "Play",
+                  "aria-pressed": isPlaying,
+                  onPress: handlePlayPause,
+                  testID: testID ? `${testID}-play-pause` : "video-player-play-pause"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Box, { flex: 1, minWidth: 0, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                import_xui_slider.Slider,
+                {
+                  value: resolvedTime,
+                  min: 0,
+                  max: isSeekable ? duration : 1,
+                  step: 1,
+                  size: "sm",
+                  disabled: disabled || !isSeekable,
+                  onChange: handleSeek,
+                  "aria-label": "Seek",
+                  themeMode: overlayThemeMode,
+                  themeProductContext,
+                  testID: testID ? `${testID}-seek` : "video-player-seek"
+                }
+              ) }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                import_xui_typography.Typography,
+                {
+                  variant: "bodySm",
+                  color: overlayContentColor,
+                  productContext: themeProductContext,
+                  align: "right",
+                  noWrap: true,
+                  testID: testID ? `${testID}-time` : "video-player-time",
+                  children: formatPlaybackTime(resolvedTime)
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Box, { flexDirection: "row", alignItems: "center", gap: SIDE_CONTROL_GAP, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            import_xui_button.IconButton,
+            {
+              variant: "tertiary",
+              tone: "mono",
+              size: "sm",
+              themeMode: overlayThemeMode,
+              themeProductContext,
+              disabled,
+              icon: isMuted ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_xui_icons_base.VolumeMute, {}) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_xui_icons_base.VolumeUp, {}),
+              "aria-label": isMuted ? "Unmute" : "Mute",
+              "aria-pressed": isMuted,
+              onPress: handleMute,
+              testID: testID ? `${testID}-mute` : "video-player-mute"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            import_xui_button.IconButton,
+            {
+              variant: "tertiary",
+              tone: "mono",
+              size: "sm",
+              themeMode: overlayThemeMode,
+              themeProductContext,
+              disabled,
+              icon: isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_xui_icons_base.ExitFullScreen, {}) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_xui_icons_base.FullScreen, {}),
+              "aria-label": isExpanded ? "Collapse" : "Expand",
+              "aria-pressed": isExpanded,
+              onPress: handleExpand,
+              testID: testID ? `${testID}-expand` : "video-player-expand"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    Box,
+    {
+      role: "group",
+      "aria-label": ariaLabel,
+      flexDirection: "column",
+      justifyContent: "space-between",
+      width: "100%",
+      gap: theme.spacing.lg,
+      testID: testID || "video-player",
+      children: [
+        showHeader && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Box, { flexDirection: "column", gap: HEADER_COPY_GAP, children: [
+          hasRewards && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Box, { flexDirection: "row", alignItems: "center", gap: theme.spacing.xs, children: rewards?.map((reward) => {
+            const rewardTestID = testID ? `${testID}-reward-${reward.key}` : `video-player-reward-${reward.key}`;
+            if (isCurrencyReward(reward)) {
+              return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                import_xui_b2c_currency_tag.CurrencyTag,
+                {
+                  currency: reward.currency,
+                  value: reward.value,
+                  sublabel: reward.sublabel,
+                  size: "sm",
+                  themeProductContext,
+                  testID: rewardTestID
+                },
+                reward.key
+              );
+            }
+            const tone = reward.tone ?? "primary";
+            return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              import_xui_tag.Tag,
+              {
+                size: "sm",
+                tone,
+                iconLeft: reward.icon,
+                themeMode: "light",
+                themeProductContext,
+                style: {
+                  ...reward.icon ? {} : {
+                    paddingLeft: LABEL_REWARD_PADDING,
+                    paddingRight: LABEL_REWARD_PADDING
+                  },
+                  ...tone === "success" ? { backgroundImage: SUCCESS_REWARD_VEIL } : {}
+                },
+                testID: rewardTestID,
+                children: reward.label
+              },
+              reward.key
+            );
+          }) }),
+          hasCopy && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Box, { flexDirection: "column", children: [
+            title && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              import_xui_typography.Typography,
+              {
+                variant: "bodyLgAccent",
+                color: copyColor,
+                productContext: themeProductContext,
+                noWrap: true,
+                children: title
+              }
+            ),
+            description && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              import_xui_typography.Typography,
+              {
+                variant: "bodySm",
+                color: copyColor,
+                productContext: themeProductContext,
+                noWrap: true,
+                style: { opacity: 0.5 },
+                children: description
+              }
+            )
+          ] })
+        ] }),
+        controlBar
+      ]
+    }
+  );
+};
+VideoPlayer.displayName = "VideoPlayer";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  VideoPlayer,
+  formatPlaybackTime
+});
+//# sourceMappingURL=index.js.map