@ticketboothapp/booking 1.2.27 → 1.2.29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ticketboothapp/booking",
-  "version": "1.2.27",
+  "version": "1.2.29",
   "private": false,
   "sideEffects": [
     "**/*.css",

package/src/components/booking/BookingFlowCollage.tsx

@@ -3,7 +3,7 @@
 import { useState, useRef, useEffect, useCallback } from 'react';
 import BackgroundPlayer from 'next-video/background-player';
 import type { VideoSources } from '../../../../../src/constants/products';
-import { useBookingHost } from '../../runtime';
+import { resolvePublicAssetUrl, useBookingHost } from '../../runtime';
 import { useTranslations } from '../../../../../src/lib/booking/i18n';
 import styles from './BookingFlowCollage.module.css';
 
@@ -29,14 +29,19 @@ export function BookingFlowCollage({
   imageIds,
   altPrefix = 'Tour',
 }: BookingFlowCollageProps) {
-  const { catalog, slots } = useBookingHost();
+  const { catalog, slots, env } = useBookingHost();
   const ViaViaImage = slots.Image;
   const ImageModal = slots.ImageModal;
   const videoSrc = video ?? DEFAULT_VIDEO;
   // Use long version in BookingFlow when available; fall back to short
-  const videoForCollage = (videoSrc.longSrc && videoSrc.longWebm)
-    ? { src: videoSrc.longSrc, webm: videoSrc.longWebm }
-    : { src: videoSrc.src, webm: videoSrc.webm };
+  const videoForCollageRaw =
+    videoSrc.longSrc && videoSrc.longWebm
+      ? { src: videoSrc.longSrc, webm: videoSrc.longWebm }
+      : { src: videoSrc.src, webm: videoSrc.webm };
+  const videoForCollage = {
+    src: resolvePublicAssetUrl(env.STATIC_ASSET_ORIGIN, videoForCollageRaw.src),
+    webm: resolvePublicAssetUrl(env.STATIC_ASSET_ORIGIN, videoForCollageRaw.webm),
+  };
   const posterUrl =
     videoPosterImageId && catalog.getImageUrl
       ? String(catalog.getImageUrl(videoPosterImageId))

package/src/components/booking/BookingProductGrid.tsx

@@ -6,7 +6,7 @@ import {
   useBookingDialog,
   type ProductGridRestoreState,
 } from '../../providers/booking-dialog-provider';
-import { useBookingHost } from '../../runtime';
+import { resolvePublicAssetUrl, useBookingHost } from '../../runtime';
 import { useLocale, useTranslations } from '../../../../../src/lib/booking/i18n';
 import type { Product } from '../../../../../src/constants/products';
 import BackgroundPlayer from 'next-video/background-player';
@@ -47,8 +47,20 @@ const FILTER_PRODUCT_IDS: Record<string, string[]> = {
 export const FILTER_IDS = ['all', 'sunrise', 'moraine-lake', 'lake-louise', 'emerald-lake', 'private'] as const;
 export type FilterId = (typeof FILTER_IDS)[number];
 
-function getVideoForProduct(product: Product) {
-  return product.videoUrl ?? DEFAULT_VIDEO;
+/** Only `src` / `webm` — never spread catalog `VideoSources` onto BackgroundPlayer (`longSrc`/`longWebm` are not valid DOM props). */
+function backgroundPlayerSources(
+  product: Product,
+  staticAssetOrigin: string,
+): { src: string; webm: string } {
+  const v = product.videoUrl ?? DEFAULT_VIDEO;
+  const raw =
+    v.longSrc && v.longWebm
+      ? { src: v.longSrc, webm: v.longWebm }
+      : { src: v.src, webm: v.webm };
+  return {
+    src: resolvePublicAssetUrl(staticAssetOrigin, raw.src),
+    webm: resolvePublicAssetUrl(staticAssetOrigin, raw.webm),
+  };
 }
 
 function BookingProductTileCollapsed({
@@ -135,7 +147,7 @@ function BookingProductTileExpanded({
 }) {
   const [isClosing, setIsClosing] = useState(false);
   const { locale } = useLocale();
-  const { slots, catalog, strings } = useBookingHost();
+  const { slots, catalog, strings, env } = useBookingHost();
   const defaultStrings = strings as HostedProductGridStrings;
   const ViaViaImage = slots.Image;
   const ProductTag = slots.ProductTag;
@@ -206,7 +218,7 @@ function BookingProductTileExpanded({
             </motion.svg>
           </button>
           <BackgroundPlayer
-            {...getVideoForProduct(product)}
+            {...backgroundPlayerSources(product, env.STATIC_ASSET_ORIGIN)}
             autoPlay
             muted
             loop

package/src/index.ts

@@ -39,6 +39,7 @@ export {
   BookingHostProvider,
   useBookingHost,
   useBookingHostOptional,
+  resolvePublicAssetUrl,
 } from './runtime';
 
 export {

package/src/runtime/index.ts

@@ -11,3 +11,4 @@ export {
   useBookingHost,
   useBookingHostOptional,
 } from './BookingHostContext';
+export { resolvePublicAssetUrl } from './resolve-public-asset-url';

package/src/runtime/resolve-public-asset-url.ts

@@ -0,0 +1,16 @@
+/**
+ * Prefix root-relative public paths (`/videos/…`) when the booking UI runs off-origin
+ * (e.g. Ticketbooth dashboard). Empty `staticAssetOrigin` keeps paths relative (main Via Via site).
+ */
+export function resolvePublicAssetUrl(
+  staticAssetOrigin: string | undefined,
+  path: string,
+): string {
+  const p = path?.trim() ?? '';
+  if (!p) return p;
+  if (/^https?:\/\//i.test(p)) return p;
+  const normalizedPath = p.startsWith('/') ? p : `/${p}`;
+  const base = (staticAssetOrigin ?? '').trim().replace(/\/+$/, '');
+  if (!base) return normalizedPath;
+  return `${base}${normalizedPath}`;
+}

package/src/runtime/types.ts

@@ -16,6 +16,11 @@ export interface BookingRuntimeEnv {
   readonly BASIC_AUTH: string;
   readonly GA4_MEASUREMENT_ID: string;
   readonly META_PIXEL_ID: string;
+  /**
+   * Origin for root-relative media (`/videos/…`, etc.) when the host is not viavia.com.
+   * Empty string = keep relative URLs (production Via Via site).
+   */
+  readonly STATIC_ASSET_ORIGIN: string;
 }
 
 export interface BookingRuntimeAnalytics {