@streamscloud/embeddable 5.1.3 → 6.0.0

package/dist/media-center/media-center/cmp.media-center.svelte

@@ -0,0 +1,336 @@
+<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 { Utils } from '../../core/utils';
+import { default as ShortVideosPlayerView } from '../../short-videos/short-videos-player/short-videos-player-view.svelte';
+import { default as StreamPlayer } from '../../streams/stream-player/stream-player.svelte';
+import { Icon } from '../../ui/icon';
+import { Loading } from '../../ui/loading';
+import { MediaCenterLocalization } from './media-center-localization';
+import { default as Overview } from './overview.svelte';
+import { makeShortVideosProvider } from './short-video-resources-generator';
+import { MediaCenterMode } from './types';
+import IconTextColumnThree from '@fluentui/svg-icons/icons/text_column_three_20_regular.svg?raw';
+import { onMount } from 'svelte';
+import { fade } from 'svelte/transition';
+let { dataProvider, playerProps, localization: localizationInit = 'en' } = $props();
+const localization = $derived(new MediaCenterLocalization(localizationInit));
+let mediaDataLoading = $state(!!dataProvider);
+let mediaCenterConfig = $state.raw(null);
+let mediaCenterMode = $state(playerProps.type);
+let selectedCategoryId = $state(null);
+let overviewOpened = $state(false);
+let headerHeight = $state(0);
+let shortVideoProps = $state.raw(playerProps.type === MediaCenterMode.ShortVideos ? playerProps.props : null);
+let streamProps = $state.raw(playerProps.type === MediaCenterMode.Stream ? playerProps.props : null);
+let overviewData = $state.raw(null);
+const categories = $derived.by(() => {
+    if (!mediaCenterConfig) {
+        return [];
+    }
+    switch (mediaCenterMode) {
+        case MediaCenterMode.ShortVideos:
+            return mediaCenterConfig.postCategories;
+        case MediaCenterMode.Stream:
+            return mediaCenterConfig.streamCategories;
+        default:
+            Utils.assertUnreachable(mediaCenterMode);
+    }
+});
+const logo = $derived.by(() => {
+    if (!mediaCenterConfig) {
+        return null;
+    }
+    return mediaCenterConfig.logo;
+});
+onMount(() => __awaiter(void 0, void 0, void 0, function* () {
+    if (dataProvider) {
+        try {
+            mediaCenterConfig = yield dataProvider.getConfig();
+        }
+        finally {
+            mediaDataLoading = false;
+        }
+    }
+}));
+const selectCategory = (categoryId) => {
+    if (!dataProvider) {
+        return;
+    }
+    if (selectedCategoryId === categoryId) {
+        return;
+    }
+    switch (mediaCenterMode) {
+        case MediaCenterMode.ShortVideos:
+            if (!shortVideoProps) {
+                return;
+            }
+            shortVideoProps = Object.assign(Object.assign({}, shortVideoProps), { dataProvider: makeShortVideosProvider({ dataProvider, categoryId }) });
+            break;
+        case MediaCenterMode.Stream:
+            console.error('Stream category filter not implemented yet');
+            break;
+        default:
+            Utils.assertUnreachable(mediaCenterMode);
+    }
+    selectedCategoryId = categoryId;
+};
+const activateSelectedShortVideoFeed = (shortVideo) => {
+    if (!dataProvider || !shortVideoProps) {
+        return;
+    }
+    let initialProps;
+    switch (playerProps.type) {
+        case MediaCenterMode.ShortVideos:
+            initialProps = playerProps.props;
+            break;
+        case MediaCenterMode.Stream:
+            initialProps = {
+                dataProvider: null,
+                socialInteractionsHandler: playerProps.props.postSocialInteractionsHandler,
+                localization: playerProps.props.localization,
+                showStreamsCloudWatermark: playerProps.props.showStreamsCloudWatermark,
+                on: playerProps.props.on
+            };
+            break;
+        default:
+            Utils.assertUnreachable(playerProps);
+    }
+    selectedCategoryId = null;
+    shortVideoProps = Object.assign(Object.assign({}, initialProps), { dataProvider: makeShortVideosProvider({ dataProvider, prefetchedItems: [shortVideo] }) });
+    overviewOpened = false;
+};
+const toggleOverview = () => __awaiter(void 0, void 0, void 0, function* () {
+    if (!dataProvider) {
+        return;
+    }
+    overviewOpened = !overviewOpened;
+    if (overviewOpened && !overviewData) {
+        overviewData = { loading: true };
+        try {
+            const response = yield dataProvider.getShortVideosCursor({ filter: {}, limit: 5 });
+            overviewData = {
+                loading: false,
+                data: {
+                    shortVideos: response.items,
+                    products: uniqueById(response.items.flatMap((i) => i.products)).slice(0, 2)
+                }
+            };
+        }
+        catch (_a) {
+            overviewData = { loading: false, data: { shortVideos: [], products: [] } };
+        }
+    }
+});
+const uniqueById = (arr) => {
+    const seen = new Set();
+    const res = [];
+    for (const item of arr) {
+        if (!seen.has(item.id)) {
+            seen.add(item.id);
+            res.push(item);
+        }
+    }
+    return res;
+};
+let wrapperRef = null;
+let scrollRef = null;
+let scrollHasLeft = $state(false);
+let scrollHasRight = $state(false);
+const mounted = (node, callback) => {
+    wrapperRef = node;
+    requestAnimationFrame(() => {
+        headerHeight = node.clientHeight;
+        callback({ height: headerHeight });
+    });
+    const ro = new ResizeObserver(updateScrollShadows);
+    ro.observe(wrapperRef);
+    return {
+        destroy: () => {
+            ro.disconnect();
+        }
+    };
+};
+const updateScrollShadows = () => {
+    if (!scrollRef) {
+        return;
+    }
+    const { scrollLeft, scrollWidth, clientWidth } = scrollRef;
+    scrollHasLeft = scrollLeft > 0;
+    scrollHasRight = scrollLeft < scrollWidth - clientWidth - 1;
+};
+const onScrollMounted = (node) => {
+    scrollRef = node;
+    requestAnimationFrame(() => {
+        updateScrollShadows();
+    });
+};
+</script>
+
+{#if mediaDataLoading}
+  <Loading positionFixedCenter={true} timeout={600} />
+{:else}
+  {#snippet categoriesSwitcher(data: { maxItemsWidth: Number; onMounted: (data: { height: Number }) => void })}
+    <div class="media-center" use:mounted={data.onMounted}>
+      <div class="media-center__row" style={`max-width: ${data.maxItemsWidth}px;`}>
+        <button type="button" class="media-center__overview-button" onclick={toggleOverview}>
+          <Icon src={IconTextColumnThree} />
+        </button>
+
+        <div
+          class="media-center__scroll"
+          class:media-center__scroll--has-left={scrollHasLeft}
+          class:media-center__scroll--has-right={scrollHasRight}
+          class:media-center__scroll--has-both={scrollHasRight && scrollHasLeft}
+          use:onScrollMounted
+          onscroll={updateScrollShadows}>
+          <div class="media-center__items">
+            {#each categories as category (category.id)}
+              <button
+                type="button"
+                class="media-center__category-button"
+                class:media-center__category-button--active={selectedCategoryId === category.id}
+                title={category.name}
+                onclick={() => selectCategory(category.id)}>{category.name}</button>
+            {/each}
+          </div>
+        </div>
+      </div>
+    </div>
+  {/snippet}
+  {#if shortVideoProps}
+    <ShortVideosPlayerView
+      {...shortVideoProps}
+      categoriesSwitcher={categories.length ? categoriesSwitcher : undefined}
+      playerLogo={logo}
+      fadeContent={overviewOpened} />
+  {:else if streamProps}
+    <StreamPlayer {...streamProps} />
+  {/if}
+  {#if overviewOpened && overviewData?.loading}
+    <Loading positionFixedCenter={true} timeout={600} />
+  {/if}
+
+  {#if overviewOpened && overviewData?.loading === false}
+    <div class="media-center-overview" style={`top:${headerHeight}px`} transition:fade={{ duration: 300 }}>
+      <Overview data={overviewData.data} localization={localization} on={{ shortVideoSelected: (shortVideo) => activateSelectedShortVideoFeed(shortVideo) }} />
+    </div>
+  {/if}
+{/if}
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.media-center {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  padding: 1.25rem 5rem;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1;
+  pointer-events: none;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 576px) {
+  .media-center {
+    padding-left: 1.25rem;
+  }
+}
+.media-center__row {
+  pointer-events: auto;
+  max-width: 100%;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+.media-center__scroll {
+  pointer-events: auto;
+  position: relative;
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
+  display: flex;
+  mask-image: none;
+}
+.media-center__scroll::-webkit-scrollbar {
+  display: none;
+}
+.media-center__scroll--has-left {
+  mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgb(0, 0, 0) 32px, rgb(0, 0, 0) 100%);
+}
+.media-center__scroll--has-right {
+  mask-image: linear-gradient(to right, rgb(0, 0, 0) 0, rgb(0, 0, 0) calc(100% - 32px), rgba(0, 0, 0, 0) 100%);
+}
+.media-center__scroll--has-both {
+  mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgb(0, 0, 0) 32px, rgb(0, 0, 0) calc(100% - 32px), rgba(0, 0, 0, 0) 100%);
+}
+.media-center__items {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.75rem;
+  flex-wrap: nowrap;
+  pointer-events: none;
+  padding-inline: 0.25rem;
+}
+.media-center__overview-button {
+  pointer-events: auto;
+  padding: 0.375rem 0.75rem;
+  line-height: 0;
+  border-radius: 0.875rem;
+  background-color: rgba(0, 0, 0, 0.6);
+  color: #f2f2f2;
+  transition: background 0.3s ease-in-out;
+  white-space: nowrap;
+  flex: 0 0 auto;
+}
+.media-center__overview-button:hover:not(.media-center__overview-button--active) {
+  background-color: rgba(0, 0, 0, 0.9);
+}
+.media-center__category-button {
+  pointer-events: auto;
+  font-size: 0.875rem;
+  padding: 0.5rem 1.5rem;
+  white-space: nowrap;
+  width: auto;
+  max-width: none;
+  min-width: 0;
+  border-radius: 0.875rem;
+  background-color: rgba(0, 0, 0, 0.6);
+  color: #f2f2f2;
+  transition: background 0.3s ease-in-out;
+  scroll-snap-align: start;
+  flex: 0 0 auto;
+}
+.media-center__category-button:hover:not(.media-center__category-button--active) {
+  background-color: rgba(0, 0, 0, 0.9);
+}
+.media-center__category-button--active {
+  background-color: rgba(255, 255, 255, 0.9);
+  color: #000000;
+}
+
+.media-center-overview {
+  position: absolute;
+  inset: 0;
+}</style>

package/dist/media-center/media-center/cmp.media-center.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { Locale } from '../../core/locale';
+import type { IMediaCenterDataProvider } from '../data-provider';
+import type { ShortVideoPlayerProps } from '../../short-videos/short-videos-player/types';
+import type { StreamPlayerProps } from '../../streams/stream-player/types';
+import { type IMediaCenterLocalization } from './media-center-localization';
+import { MediaCenterMode } from './types';
+type Props = {
+    dataProvider: IMediaCenterDataProvider | null;
+    playerProps: {
+        type: MediaCenterMode.ShortVideos;
+        props: ShortVideoPlayerProps;
+    } | {
+        type: MediaCenterMode.Stream;
+        props: StreamPlayerProps;
+    };
+    localization?: IMediaCenterLocalization | Locale;
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/media-center/media-center/index.d.ts

@@ -0,0 +1,3 @@
+export { default as MediaCenter } from './cmp.media-center.svelte';
+export { MediaCenterMode } from './types';
+export type { IMediaCenterLocalization } from './media-center-localization';

package/dist/media-center/media-center/index.js

@@ -0,0 +1,2 @@
+export { default as MediaCenter } from './cmp.media-center.svelte';
+export { MediaCenterMode } from './types';

package/dist/media-center/media-center/media-center-localization.d.ts

@@ -0,0 +1,11 @@
+import { type Locale } from '../../core/locale';
+import type { IProductCardLocalization } from '../../products/product-card/product-card-localization';
+export interface IMediaCenterLocalization {
+    shortVideosSectionTitle?: string;
+    productLocalization?: IProductCardLocalization | Locale;
+}
+export declare class MediaCenterLocalization {
+    shortVideosSectionTitle: string;
+    productLocalization: IProductCardLocalization | Locale;
+    constructor(init: IMediaCenterLocalization | Locale);
+}

package/dist/media-center/media-center/media-center-localization.js

@@ -0,0 +1,15 @@
+import { isLocale } from '../../core/locale';
+export class MediaCenterLocalization {
+    shortVideosSectionTitle;
+    productLocalization;
+    constructor(init) {
+        this.shortVideosSectionTitle = isLocale(init) ? loc.shortVideosSectionTitle[init] : init.shortVideosSectionTitle || loc.shortVideosSectionTitle.en;
+        this.productLocalization = isLocale(init) ? init : init.productLocalization || 'en';
+    }
+}
+const loc = {
+    shortVideosSectionTitle: {
+        en: 'Popular Short Videos',
+        no: 'Populære korte videoer'
+    }
+};

package/dist/media-center/media-center/overview.svelte

@@ -0,0 +1,142 @@
+<script lang="ts">import { ProductCard } from '../../products/product-card';
+import { ShortVideoCard } from '../../short-videos/short-video-card';
+import { MediaCenterLocalization } from './media-center-localization';
+let { data, localization, on } = $props();
+const shortVideoSectionItems = $derived.by(() => {
+    const pattern = ['video', 'product', 'video', 'product', 'video'];
+    const vids = [...data.shortVideos];
+    const prods = [...data.products];
+    const itemsLimit = 5;
+    let result = [];
+    // fill according to pattern, leaving empty positions if not enough items
+    for (let i = 0; i < itemsLimit; i++) {
+        const want = pattern[i];
+        if (want === 'video' && vids.length > 0) {
+            result.push({ kind: 'video', data: vids.shift() });
+        }
+        else if (want === 'product' && prods.length > 0) {
+            result.push({ kind: 'product', data: prods.shift() });
+        }
+        else {
+            // temporary "empty" position - will fill later
+            result.push(null);
+        }
+    }
+    // fill empty positions with remaining items
+    for (let i = 0; i < result.length; i++) {
+        if (!result[i]) {
+            if (vids.length > 0) {
+                result[i] = { kind: 'video', data: vids.shift() };
+            }
+            else if (prods.length > 0) {
+                result[i] = { kind: 'product', data: prods.shift() };
+            }
+        }
+    }
+    return result.filter(Boolean);
+});
+</script>
+
+<div class="media-center-overview">
+  <div class="media-center-overview__content">
+    {#if shortVideoSectionItems.length}
+      <div class="media-center-overview__section">
+        <div class="media-center-overview__section-header media-center-overview__section-header--red">
+          {localization.shortVideosSectionTitle}
+        </div>
+        <div class="media-center-overview__section-content">
+          {#each shortVideoSectionItems as item (item.data)}
+            {#if item.kind === 'video'}
+              <div class="media-center-overview__card-wrapper">
+                <ShortVideoCard
+                  shortVideo={{ id: item.data.id, text: item.data.text, cover: item.data.media.isImage ? item.data.media.url : item.data.media.thumbnailUrl }}
+                  on={{ click: () => on.shortVideoSelected(item.data) }} />
+              </div>
+            {:else if item.kind === 'product'}
+              <div class="media-center-overview__card-wrapper" data-theme="dark">
+                <ProductCard product={item.data} localization={localization.productLocalization} />
+              </div>
+            {/if}
+          {/each}
+        </div>
+      </div>
+    {/if}
+  </div>
+</div>
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.media-center-overview {
+  background: transparent;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  padding: 1.25rem 1.875rem;
+}
+.media-center-overview__content {
+  width: 100%;
+  max-width: 73.75rem;
+  display: flex;
+  flex-direction: column;
+  gap: 2.25rem;
+}
+.media-center-overview__section {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+.media-center-overview__section-header {
+  display: flex;
+  align-items: center;
+  gap: 0.6875rem;
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+  font-weight: 500;
+  color: #ffffff;
+  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 6px rgba(0, 0, 0, 0.05);
+}
+.media-center-overview__section-header::before {
+  content: "";
+  display: inline-block;
+  width: 0.3125rem;
+  height: 1.625rem;
+  border-radius: 0.125rem;
+  background: #5a8dec;
+}
+.media-center-overview__section-header--red::before {
+  background: #f17e8b;
+}
+.media-center-overview__section-content {
+  --product-card--aspect-ratio: 9/16;
+  --product-card--border-radius: 0.375rem;
+  display: grid;
+  gap: 2rem 1.25rem;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+}
+@media (max-width: 768px) {
+  .media-center-overview__section-content {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}
+@media (max-width: 576px) {
+  .media-center-overview__section-content {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+@media (max-width: 480px) {
+  .media-center-overview__section-content {
+    grid-template-columns: 2fr;
+  }
+}
+.media-center-overview__card-wrapper {
+  aspect-ratio: 9/16;
+}</style>

package/dist/media-center/media-center/overview.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { ShortVideoViewerModel } from '../../short-videos/short-video-viewer';
+import { MediaCenterLocalization } from './media-center-localization';
+import type { OverviewData } from './types';
+type Props = {
+    data: OverviewData;
+    localization: MediaCenterLocalization;
+    on: {
+        shortVideoSelected: (shortVideo: ShortVideoViewerModel) => void;
+    };
+};
+declare const Overview: import("svelte").Component<Props, {}, "">;
+type Overview = ReturnType<typeof Overview>;
+export default Overview;

package/dist/media-center/media-center/short-video-resources-generator.d.ts

@@ -0,0 +1,8 @@
+import type { ShortVideoViewerModel } from '../../short-videos/short-video-viewer';
+import type { IPlayerItemsProvider } from '../../ui/player';
+import type { IMediaCenterDataProvider } from '../data-provider';
+export declare const makeShortVideosProvider: (data: {
+    dataProvider: IMediaCenterDataProvider;
+    categoryId?: string;
+    prefetchedItems?: ShortVideoViewerModel[];
+}) => IPlayerItemsProvider<ShortVideoViewerModel>;

package/dist/media-center/media-center/short-video-resources-generator.js

@@ -0,0 +1,26 @@
+import { ContinuationToken } from '../../core/continuation-token';
+import { CursorDataLoader } from '../../core/data-loaders';
+export const makeShortVideosProvider = (data) => {
+    const { dataProvider, categoryId, prefetchedItems = [] } = data;
+    const loader = new CursorDataLoader({
+        loadPage: async (continuationToken) => {
+            const result = await dataProvider.getShortVideosCursor({
+                filter: { categoryId, excludeIds: prefetchedItems.length ? prefetchedItems.map((i) => i.id) : undefined },
+                continuationToken: continuationToken.toRawFormat(),
+                limit: 20
+            });
+            const items = result.items;
+            return {
+                items: items,
+                continuationToken: ContinuationToken.fromPayload(result.continuationToken)
+            };
+        }
+    });
+    return {
+        initialData: {
+            prefetchedItems,
+            startIndex: prefetchedItems.length ? 0 : -1
+        },
+        loadMore: loader.loadMore
+    };
+};

package/dist/media-center/media-center/types.d.ts

@@ -0,0 +1,10 @@
+import type { ProductCardModel } from '../../products/product-card';
+import type { ShortVideoViewerModel } from '../../short-videos/short-video-viewer';
+export declare enum MediaCenterMode {
+    ShortVideos = "short-videos",
+    Stream = "stream"
+}
+export type OverviewData = {
+    shortVideos: ShortVideoViewerModel[];
+    products: ProductCardModel[];
+};

package/dist/media-center/media-center/types.js

@@ -0,0 +1,5 @@
+export var MediaCenterMode;
+(function (MediaCenterMode) {
+    MediaCenterMode["ShortVideos"] = "short-videos";
+    MediaCenterMode["Stream"] = "stream";
+})(MediaCenterMode || (MediaCenterMode = {}));

package/dist/products/product-card/cmp.product-card.svelte

@@ -7,14 +7,14 @@ let { product, includeBeforeNowPrefix, inert = false, localization: localization
 const localization = $derived(new ProductCardLocalization(localizationInit));
 const showDescriptionPresented = $derived(product.shortDescription && product.shortDescription.length > 0);
 const onProductClicked = (event) => {
-    if (!product.link) {
-        return;
-    }
     event.preventDefault();
     event.stopPropagation();
     if (on === null || on === void 0 ? void 0 : on.productClick) {
         on.productClick(product.id);
     }
+    if (!product.link) {
+        return;
+    }
     window.open(product.link, '_blank', 'noopener noreferrer');
 };
 </script>
@@ -49,7 +49,7 @@ const onProductClicked = (event) => {
     </div>
   </div>
 
-  {#if product.link}
+  {#if product.link || on?.productClick}
     <a href={product.link} onclick={onProductClicked} target="_blank" rel="noopener noreferrer" class="product-card__link" aria-label="none">&nbsp;</a>
   {/if}
 </div>
@@ -66,6 +66,8 @@ const onProductClicked = (event) => {
   }
 }
 .product-card {
+  --_product-card--aspect-ratio: var(--product-card--aspect-ratio, 10/16);
+  --_product-card--border-radius: var(--product-card--border-radius, 0.5rem);
   --image--border-radius: 0.25rem;
   --image--object-fit: fit;
   --image--width: auto;
@@ -76,11 +78,11 @@ const onProductClicked = (event) => {
   flex-direction: column;
   position: relative;
   container-type: inline-size;
-  aspect-ratio: 10/16;
+  aspect-ratio: var(--_product-card--aspect-ratio);
   color: #000000;
   background-color: rgba(255, 255, 255, 0.9);
   border: 0.038125rem solid #f2f2f3;
-  border-radius: 0.5rem;
+  border-radius: var(--_product-card--border-radius);
   padding: 0.75rem 0.75rem 1.125rem;
   justify-content: space-between;
   /* Set 'container-type: inline-size;' to reference container*/
@@ -144,6 +146,9 @@ const onProductClicked = (event) => {
   min-height: 1.375rem;
   /* Set 'container-type: inline-size;' to reference container*/
 }
+:global([data-theme="dark"]) .product-card__description {
+  color: #d1d5db;
+}
 @container (width < 230px) {
   .product-card__description {
     font-size: 0.625rem;

package/dist/products/product-card/mapper.js

@@ -1,8 +1,8 @@
 import { getMediaItemImageUrl } from '../../core/media';
 import { shouldUseSalePrice } from '../price-helper';
 export const mapToProductCard = (payload, referenceDate) => {
-    const effectiveSalePrice = payload.priceAndAvailability?.productSalePrices?.find((x) => shouldUseSalePrice({
-        price: payload.priceAndAvailability?.price,
+    const effectiveSalePrice = payload.priceAndAvailability.productSalePrices?.find((x) => shouldUseSalePrice({
+        price: payload.priceAndAvailability.price,
         salePrice: x.salePrice,
         effectiveDateFrom: x.salePriceEffectiveDateFrom,
         effectiveDateTo: x.salePriceEffectiveDateTo,
@@ -14,7 +14,7 @@ export const mapToProductCard = (payload, referenceDate) => {
         shortDescription: payload.shortDescription,
         link: payload.link,
         brandName: payload.brand?.name || null,
-        image: getMediaItemImageUrl(payload.media?.[0]),
+        image: payload.media.length ? getMediaItemImageUrl(payload.media[0]) : null,
         currency: payload.priceAndAvailability.currency,
         price: payload.priceAndAvailability.price,
         salePrice: effectiveSalePrice?.salePrice ?? null