@streamscloud/embeddable 10.1.2 → 12.0.0

package/dist/ads/ad-card/cmp.ad-card.svelte

@@ -4,7 +4,7 @@ import { toPriceRepresentation } from '../../products/price-helper';
 import { Button, ButtonSize } from '../../ui/button';
 import { Image } from '../../ui/image';
 import { LineClamp } from '../../ui/line-clamp';
-let { ad, trackingParams, inert = false, on } = $props();
+let { ad, colors, locale, trackingParams, inert = false, on } = $props();
 const trackImpression = (node) => {
     if (on === null || on === void 0 ? void 0 : on.impression) {
         const observer = new IntersectionObserver((entries) => {
@@ -33,9 +33,19 @@ const handleAdClick = () => {
         window.open(enrichedLink, '_blank', 'noopener noreferrer');
     }
 };
+const styles = $derived.by(() => {
+    const values = [];
+    if (colors === null || colors === void 0 ? void 0 : colors.background) {
+        values.push(`--ad-card--background-color: ${colors.background}`);
+    }
+    if (colors === null || colors === void 0 ? void 0 : colors.price) {
+        values.push(`--ad-card--price-color: ${colors.price}`);
+    }
+    return values.join(';');
+});
 </script>
 
-<div class="ad-card" inert={inert} use:trackImpression>
+<div class="ad-card" style={styles} inert={inert} use:trackImpression>
   <div class="ad-card__image">
     <Image src={ad.image} alt={ad.title} />
   </div>
@@ -43,12 +53,12 @@ const handleAdClick = () => {
     <div class="ad-card__content">
       {#if ad.title}
         <div class="ad-card__title">
-          <LineClamp value={ad.title} maxLines={2} />
+          <LineClamp maxLines={2} locale={locale}>{ad.title}</LineClamp>
         </div>
       {/if}
       {#if ad.description}
         <div class="ad-card__description">
-          <LineClamp value={ad.description} maxLines={2} />
+          <LineClamp maxLines={2} locale={locale}>{ad.description}</LineClamp>
         </div>
       {/if}
     </div>
@@ -69,8 +79,8 @@ const handleAdClick = () => {
             size={ButtonSize.Standard}
             on={{ click: handleAdClick }}
             --button--font--size="1em"
-            --button--font--color={ad.ctaButton.textColor}
-            --button--background={ad.ctaButton.background}
+            --button--font--color={colors?.buttonBackground ? '#FFFFFF' : ad.ctaButton.textColor}
+            --button--background={colors?.buttonBackground ?? ad.ctaButton.background}
             --button--min-width="100%">
             <span class="ad-card__button-text">{ad.ctaButton.text}</span>
           </Button>
@@ -92,6 +102,9 @@ const handleAdClick = () => {
   }
 }
 .ad-card {
+  --_ad-card--background-color: var(--ad-card--background-color, rgb(from #ffffff r g b/90%));
+  --_ad-card--border-color: var(--ad-card--background-color, #f2f2f3);
+  --_ad-card--price-color: var(--ad-card--price-color, inherit);
   width: 100%;
   height: max-content;
   display: flex;
@@ -100,8 +113,8 @@ const handleAdClick = () => {
   container-type: inline-size;
   aspect-ratio: 9/16;
   color: #000000;
-  background-color: rgba(255, 255, 255, 0.9);
-  border: 1px solid #f2f2f3;
+  background-color: var(--_ad-card--background-color);
+  border: 1px solid var(--_ad-card--border-color);
   border-radius: 0.5rem;
   padding: 0.75rem 0.75rem 1.125rem;
   justify-content: flex-start;
@@ -109,9 +122,9 @@ const handleAdClick = () => {
   /* Set 'container-type: inline-size;' to reference container*/
 }
 :global([data-theme="dark"]) .ad-card {
-  background-color: rgba(18, 18, 18, 0.9);
+  --_ad-card--background-color: var(--ad-card--background-color, rgb(from #121212 r g b/90%));
+  --_ad-card--border-color: var(--ad-card--background-color, #1e1e1e);
   color: #ffffff;
-  border-color: #1e1e1e;
 }
 @container (width < 230px) {
   .ad-card {
@@ -221,6 +234,9 @@ const handleAdClick = () => {
     min-height: 0.875rem;
   }
 }
+:global([data-theme="dark"]) .ad-card__description {
+  color: #d1d5db;
+}
 .ad-card__price {
   font-size: 1.6875rem;
   font-weight: 700;
@@ -230,6 +246,7 @@ const handleAdClick = () => {
   gap: 0.625rem;
   min-width: 0;
   white-space: nowrap;
+  color: var(--_ad-card--price-color);
   /* Set 'container-type: inline-size;' to reference container*/
 }
 @container (width < 230px) {
@@ -259,6 +276,9 @@ const handleAdClick = () => {
     line-height: 0.875rem;
   }
 }
+:global([data-theme="dark"]) .ad-card__price-info-label {
+  color: #d1d5db;
+}
 .ad-card__button {
   width: 100%;
 }

package/dist/ads/ad-card/cmp.ad-card.svelte.d.ts

@@ -1,8 +1,15 @@
+import type { Locale } from '../../core/locale';
 import { type TrackingParams } from '../../marketing-tracking';
 import type { AdCardModel } from './types';
 type Props = {
     ad: AdCardModel;
     trackingParams: TrackingParams;
+    colors: {
+        background?: string | null;
+        price?: string | null;
+        buttonBackground?: string | null;
+    };
+    locale: Locale;
     inert?: boolean;
     on?: {
         click?: (id: string) => void;

package/dist/content-player/cmp.content-player.svelte

@@ -1,38 +1,19 @@
-<script lang="ts">var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-import { ContentPlayerLocalization } from './content-player-localization';
-import { handleEsc } from '../core/document.event-handlers';
+<script lang="ts">import { handleEsc } from '../core/document.event-handlers';
 import { PostViewer } from '../posts/post-viewer';
 import { Loading } from '../ui/loading';
 import { PlayerSlider } from '../ui/player/slider';
 import { SwipeIndicator } from '../ui/swipe-indicator';
 import { default as ControlsAndAttachments } from './controls-and-attachments.svelte';
-import { default as Header } from './header.svelte';
 import { default as OverviewPanel } from './overview-panel.svelte';
-import { onMount, untrack } from 'svelte';
+import {} from 'svelte';
 let { config, nonPostItemView, overviewPanelContent } = $props();
-const localization = new ContentPlayerLocalization(config.settings.locale);
 let everTouched = $state(false);
-const uiManager = config.uiManager;
-onMount(() => __awaiter(void 0, void 0, void 0, function* () {
-    uiManager.overviewCollapsed = window && window.innerWidth < window.innerHeight;
-}));
-$effect(() => {
-    var _a;
-    void ((_a = config.playerBuffer) === null || _a === void 0 ? void 0 : _a.current);
-    untrack(() => {
-        if (uiManager.viewInitialized && uiManager.isMobileView) {
-            uiManager.overviewCollapsed = true;
-        }
-    });
+let overviewPosition = $state({
+    top: 0,
+    bottom: 0,
+    right: 0
 });
+const uiManager = config.uiManager;
 const handleContentPlayerMounted = (node) => {
     const markAsTouched = () => {
         everTouched = true;
@@ -98,6 +79,12 @@ const handleSliderMounted = (node) => {
         node.style.setProperty('--_content-player--content--height', height);
         node.style.setProperty('--_content-player--content--margin', margin);
         uiManager.contentViewWidth = contentWidthNumber;
+        const verticalIndent = uiManager.isMobileView ? 0 : 13;
+        overviewPosition = {
+            top: verticalIndent,
+            bottom: verticalIndent,
+            right: (playerWidth - contentWidthNumber) / 2 + contentWidthNumber
+        };
     });
     resizeObserver.observe(node);
     return {
@@ -106,100 +93,67 @@ const handleSliderMounted = (node) => {
         }
     };
 };
-const PLAYER_PADDING_VERTICAL = 10;
-const variables = $derived.by(() => {
-    const values = [
-        `--_content-player--padding: ${uiManager.mediaCenterHeaderHeight ? uiManager.mediaCenterHeaderHeight : PLAYER_PADDING_VERTICAL}px 0 ${PLAYER_PADDING_VERTICAL}px`,
-        `--_content-player--watermark--left-indent: ${uiManager.overviewWidth + uiManager.safeAreaSize}px`
-    ];
-    if (uiManager.backgroundImageUrl) {
-        values.push(`--_content-player--background-image-url: url(${uiManager.backgroundImageUrl})`);
-    }
-    return values.join(';');
-});
 </script>
 
 <svelte:document
   onkeydown={(e) => {
-    if (config.settings.enableCloseButton) {
-      handleEsc(e, () => config.callbacks?.close?.());
+    if (config.closeOrchestrator.closeTriggerVisible) {
+      handleEsc(e, () => config.closeOrchestrator.requestClose());
     }
   }} />
 
-<svelte:head>
-  <meta name="theme-color" content="#242424" />
-  <meta name="color-scheme" content="dark" />
-  <meta name="mobile-web-app-capable" content="yes" />
-  <meta name="apple-mobile-web-app-capable" content="yes" />
-  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+<div class="content-player" use:handleContentPlayerMounted>
+  {#if config.settings.showStreamsCloudWatermark}
+    <div class="content-player__watermark">
+      <a href="https://streamscloud.com/" tabindex="-1" aria-label="none">
+        <img src="https://embedabble-assets.streamscloud-cdn.com/watermark.svg" alt="StreamsCloud" />
+      </a>
+    </div>
+  {/if}
+  {#if config.playerBuffer}
+    <div class="content-player__slider" use:handleSliderMounted>
+      <PlayerSlider buffer={config.playerBuffer} on={config.playerSliderCallbacks}>
+        {#snippet children({ item })}
+          {@const postModel = config.itemAsPostViewerModel(item)}
+          <div class="content-player__content">
+            {#if postModel}
+              <PostViewer
+                model={postModel}
+                controlsColors={{ active: config.playerColors.button, inactive: config.playerColors.buttonInactive }}
+                trackingParams={config.trackingParams}
+                socialInteractionsHandler={config.socialInteractionsHandler}
+                enableAttachments={config.uiManager.showPostOverlayAttachments}
+                enableControls={config.uiManager.showPostOverlayControls}
+                autoplay="on-appearance"
+                locale={config.settings.locale}
+                on={{
+                  progress: (progress) => config.callbacks?.videoProgress?.(item.id, postModel.id, progress),
+                  productClick: (productId) => config.callbacks?.productClick?.(productId, postModel.id),
+                  productImpression: (productId) => config.callbacks?.productImpression?.(productId, postModel.id),
+                  adClick: (adId) => config.callbacks?.adClick?.(adId, postModel.id),
+                  adImpression: (adId) => config.callbacks?.adImpression?.(adId, postModel.id)
+                }} />
+            {:else if nonPostItemView}
+              {@render nonPostItemView({ item })}
+            {/if}
 
-  <style>
-    html,
-    body {
-      background-color: #242424;
-      color-scheme: dark;
-    }
-  </style>
-</svelte:head>
+            {#if uiManager.isMobileView && config.playerBuffer && config.playerBuffer.loaded.length > 1 && !everTouched}
+              <SwipeIndicator locale={config.settings.locale} />
+            {/if}
+          </div>
+        {/snippet}
+      </PlayerSlider>
+      {#if overviewPanelContent && config.playerBuffer.loaded.length > 0}
+        <OverviewPanel config={config} position={overviewPosition} uiManager={uiManager}>
+          {@render overviewPanelContent()}
+        </OverviewPanel>
+      {/if}
+    </div>
 
-<div
-  class="content-player-container"
-  class:content-player-container--background-enabled={!config.settings.disableBackground}
-  class:content-player-container--background-loading={!config.settings.disableBackground && !uiManager.backgroundImageUrl}
-  class:content-player-container--faded={config.fadeContent}
-  style={variables}>
-  <Header config={config} overviewPanelContent={overviewPanelContent} localization={localization} />
-  {#if overviewPanelContent}
-    <OverviewPanel contentFaded={config.fadeContent} uiManager={uiManager}>
-      {@render overviewPanelContent()}
-    </OverviewPanel>
+    <ControlsAndAttachments config={config} />
+  {:else}
+    <Loading positionFixedCenter={true} timeout={1000} />
   {/if}
-  <div class="content-player" use:handleContentPlayerMounted>
-    {#if config.settings.showStreamsCloudWatermark}
-      <div class="content-player__watermark">
-        <a href="https://streamscloud.com/" tabindex="-1" aria-label="none">
-          <img src="https://embedabble-assets.streamscloud-cdn.com/watermark.svg" alt="StreamsCloud" />
-        </a>
-      </div>
-    {/if}
-    {#if config.playerBuffer}
-      <div class="content-player__slider" use:handleSliderMounted>
-        <PlayerSlider buffer={config.playerBuffer} on={config.playerSliderCallbacks}>
-          {#snippet children({ item })}
-            {@const postModel = config.itemAsPostViewerModel(item)}
-            <div class="content-player__content">
-              {#if postModel}
-                <PostViewer
-                  model={postModel}
-                  trackingParams={config.trackingParams}
-                  socialInteractionsHandler={config.socialInteractionsHandler}
-                  enableAttachments={config.uiManager.showPostOverlayAttachments}
-                  enableControls={config.uiManager.showPostOverlayControls}
-                  autoplay="on-appearance"
-                  locale={config.settings.locale}
-                  on={{
-                    progress: (progress) => config.callbacks?.videoProgress?.(item.id, postModel.id, progress),
-                    productClick: (productId) => config.callbacks?.productClick?.(productId, postModel.id),
-                    productImpression: (productId) => config.callbacks?.productImpression?.(productId, postModel.id),
-                    adClick: (adId) => config.callbacks?.adClick?.(adId, postModel.id),
-                    adImpression: (adId) => config.callbacks?.adImpression?.(adId, postModel.id)
-                  }} />
-              {:else if nonPostItemView}
-                {@render nonPostItemView({ item })}
-              {/if}
-
-              {#if uiManager.isMobileView && config.playerBuffer && config.playerBuffer.loaded.length > 1 && !everTouched}
-                <SwipeIndicator locale={config.settings.locale} />
-              {/if}
-            </div>
-          {/snippet}
-        </PlayerSlider>
-      </div>
-      <ControlsAndAttachments config={config} />
-    {:else}
-      <Loading positionFixedCenter={true} timeout={1000} />
-    {/if}
-  </div>
 </div>
 
 <style>@keyframes fadeIn {
@@ -213,36 +167,11 @@ const variables = $derived.by(() => {
     opacity: 1;
   }
 }
-.content-player-container {
-  --content-player--elements-opacity: 1;
-  width: 100%;
-  min-width: 100%;
-  max-width: 100%;
-  height: 100%;
-  min-height: 100%;
-  max-height: 100%;
-  container-type: inline-size;
-  display: flex;
-  position: relative;
-}
-.content-player-container--background-enabled {
-  background-color: #c1c1c1;
-  background-image: var(--_content-player--background-image-url);
-  background-size: cover;
-  background-blend-mode: multiply;
-}
-.content-player-container--background-loading {
-  background-color: transparent;
-}
-.content-player-container--faded {
-  --content-player--elements-opacity: 0;
-}
-
 .content-player {
   display: flex;
   flex: 1;
-  padding: var(--_content-player--padding);
-  backdrop-filter: blur(30px);
+  min-height: 0;
+  padding: 0.625rem 0;
   position: relative;
   /* Set 'container-type: inline-size;' to reference container*/
 }
@@ -262,17 +191,13 @@ const variables = $derived.by(() => {
 .content-player__watermark {
   position: absolute;
   bottom: 5rem;
-  left: var(--_content-player--watermark--left-indent);
-  opacity: var(--content-player--elements-opacity);
-  transition: opacity 0.3s ease-in-out;
+  left: 4.375rem;
 }
 .content-player__content {
   width: var(--_content-player--content--width, 100%);
   height: var(--_content-player--content--height, 100%);
   margin: var(--_content-player--content--margin, 0);
   position: relative;
-  opacity: var(--content-player--elements-opacity);
-  transition: opacity 0.3s ease-in-out;
   display: flex;
   justify-content: center;
   align-items: center;

package/dist/content-player/content-player-config.svelte.d.ts

@@ -1,6 +1,6 @@
-import type { MediaCenterData } from '../media-center/model/types';
 import { type IPostModel, PostModel } from '../posts/model';
 import type { IPostSocialInteractionsHandler } from '../posts/social-interactions';
+import type { ICloseOrchestrator } from '../ui/player/close-orchestrator';
 import type { IPlayerBuffer } from '../ui/player/providers';
 import type { PlayerSliderCallbacks } from '../ui/player/slider/types';
 import { ContentPlayerSettings } from './content-player-settings';
@@ -13,8 +13,8 @@ export declare class ContentPlayerConfig<T extends {
     readonly callbacks: ContentPlayerCallbacks | null;
     readonly playerSliderCallbacks: PlayerSliderCallbacks | undefined;
     readonly socialInteractionsHandler: IPostSocialInteractionsHandler | undefined;
+    readonly closeOrchestrator: ICloseOrchestrator;
     readonly uiManager: ContentPlayerUIManager;
-    private _mediaCenterData;
     private _trackingParams;
     private _mappers;
     private mappedPostsCache;
@@ -22,29 +22,33 @@ export declare class ContentPlayerConfig<T extends {
         playerBuffer: IPlayerBuffer<T> | null;
         mappers: ContentPlayerMappers<T>;
         socialInteractionsHandler?: IPostSocialInteractionsHandler;
-        mediaCenterData?: MediaCenterData;
         settings?: ContentPlayerSettings;
         callbacks?: ContentPlayerCallbacks;
         playerSliderCallbacks?: PlayerSliderCallbacks;
         trackingParams?: ContentPlayerTrackingParams | null;
+        closeOrchestrator: ICloseOrchestrator;
     });
-    get mediaCenterControlsPanel(): MediaCenterData['controlsPanel'] | null;
-    get mediaCenterCallbacks(): MediaCenterData['callbacks'] | null;
-    get playerLogo(): string | null;
-    get fadeContent(): boolean;
+    get playerColors(): {
+        brand: string | null;
+        button: string | null;
+        buttonInactive: string | null;
+        cardButton: string | null;
+        cardBackground: string | null;
+        playerBackground: string | null;
+        price: string | null;
+        salePrice: string | null;
+        sidebarBackground: string | null;
+    };
     get trackingParams(): ContentPlayerConfig<T>['_trackingParams'];
     itemAsPostViewerModel: (item: T & {
         mediaIndex?: number;
     }) => PostModel | null;
-    setBackgroundImageUrl: (imageUrl: string | null) => void;
-    updateMediaCenterData: (data: MediaCenterData | undefined) => void;
     updateTrackingParams: (data: ContentPlayerTrackingParams | null) => void;
 }
 export type ContentPlayerMappers<T> = {
     postModelFromCurrentItem: (item: T) => IPostModel | null;
 };
 export type ContentPlayerCallbacks = {
-    close?: () => void;
     videoProgress?: (playerItemId: string, postId: string, progress: number) => void;
     productClick?: (productId: string, postId: string) => void;
     productImpression?: (productId: string, postId: string) => void;

package/dist/content-player/content-player-config.svelte.js

@@ -7,33 +7,24 @@ export class ContentPlayerConfig {
     callbacks;
     playerSliderCallbacks;
     socialInteractionsHandler;
+    closeOrchestrator;
     uiManager = new ContentPlayerUIManager();
-    _mediaCenterData = $state.raw(null);
     _trackingParams = $state.raw(null);
     _mappers;
     mappedPostsCache = new Map();
     constructor(init) {
-        const { playerBuffer, trackingParams, mappers, socialInteractionsHandler, mediaCenterData, settings, callbacks, playerSliderCallbacks } = init;
+        const { playerBuffer, trackingParams, mappers, socialInteractionsHandler, settings, callbacks, playerSliderCallbacks, closeOrchestrator } = init;
         this.playerBuffer = playerBuffer;
         this._trackingParams = trackingParams ?? null;
         this.settings = settings || new ContentPlayerSettings();
-        this._mediaCenterData = mediaCenterData || null;
         this.callbacks = callbacks || null;
         this.playerSliderCallbacks = playerSliderCallbacks;
         this.socialInteractionsHandler = socialInteractionsHandler;
+        this.closeOrchestrator = closeOrchestrator;
         this._mappers = mappers;
     }
-    get mediaCenterControlsPanel() {
-        return this._mediaCenterData?.controlsPanel || null;
-    }
-    get mediaCenterCallbacks() {
-        return this._mediaCenterData?.callbacks || null;
-    }
-    get playerLogo() {
-        return this._mediaCenterData?.playerLogo || null;
-    }
-    get fadeContent() {
-        return this._mediaCenterData?.overlayIsActive || false;
+    get playerColors() {
+        return this.settings.playerColors;
     }
     get trackingParams() {
         return this._trackingParams;
@@ -51,12 +42,6 @@ export class ContentPlayerConfig {
         this.mappedPostsCache.set(item.id, postModel);
         return postModel;
     };
-    setBackgroundImageUrl = (imageUrl) => {
-        this.uiManager.backgroundImageUrl = imageUrl;
-    };
-    updateMediaCenterData = (data) => {
-        this._mediaCenterData = data ?? null;
-    };
     updateTrackingParams = (data) => {
         this._trackingParams = data ?? null;
     };

package/dist/content-player/content-player-settings.d.ts

@@ -1,14 +1,12 @@
 import type { Locale } from '../core/locale';
+import type { PlayerColors } from '../ui/player/colors';
 export declare class ContentPlayerSettings {
-    disableBackground: boolean;
-    enableCloseButton: boolean;
     locale: Locale;
     showStreamsCloudWatermark: boolean;
-    constructor(init?: IContentPlayerSettingsInitializer);
-}
-export interface IContentPlayerSettingsInitializer {
-    disableBackground?: boolean;
-    hideCloseButton?: boolean;
-    locale?: Locale;
-    showStreamsCloudWatermark?: boolean;
+    playerColors: NonNullable<PlayerColors>;
+    constructor(init?: {
+        locale?: Locale;
+        showStreamsCloudWatermark?: boolean;
+        playerColors?: PlayerColors;
+    });
 }

package/dist/content-player/content-player-settings.js

@@ -1,14 +1,22 @@
 export class ContentPlayerSettings {
-    disableBackground = false;
-    enableCloseButton = true;
     locale = 'en';
     showStreamsCloudWatermark = false;
+    playerColors = {
+        brand: null,
+        button: null,
+        buttonInactive: null,
+        cardButton: null,
+        cardBackground: null,
+        playerBackground: null,
+        price: null,
+        salePrice: null,
+        sidebarBackground: null
+    };
     constructor(init) {
         if (init) {
-            this.disableBackground = init.disableBackground ?? this.disableBackground;
-            this.enableCloseButton = init.hideCloseButton !== undefined ? !init.hideCloseButton : this.enableCloseButton;
             this.locale = init.locale ?? this.locale;
             this.showStreamsCloudWatermark = init.showStreamsCloudWatermark ?? this.showStreamsCloudWatermark;
+            this.playerColors = init?.playerColors ?? this.playerColors;
         }
     }
 }