@streamscloud/embeddable 1.1.11 → 2.0.0

package/dist/core/enums.d.ts

@@ -0,0 +1,33 @@
+export declare enum PostSourceType {
+    Channel = "CHANNEL",
+    Group = "GROUP",
+    MediaPage = "MEDIA_PAGE",
+    Organization = "ORGANIZATION",
+    UserProfile = "USER_PROFILE"
+}
+export declare enum AdType {
+    BannerResponsive = "BANNER_RESPONSIVE",
+    MediaDialogPromotion = "MEDIA_DIALOG_PROMOTION",
+    Story = "STORY"
+}
+export declare enum Currency {
+    Eur = "EUR",
+    Nok = "NOK",
+    Usd = "USD"
+}
+export declare enum MediaType {
+    Audio = "AUDIO",
+    Image = "IMAGE",
+    ShortVideo = "SHORT_VIDEO",
+    Video = "VIDEO"
+}
+export declare enum MediaFormat {
+    W4H3 = "W4H3",
+    W16H9 = "W16H9"
+}
+export declare enum ImageScale {
+    Big = "BIG",
+    Medium = "MEDIUM",
+    OriginalEncoded = "ORIGINAL_ENCODED",
+    Small = "SMALL"
+}

package/dist/core/enums.js

@@ -0,0 +1,39 @@
+export var PostSourceType;
+(function (PostSourceType) {
+    PostSourceType["Channel"] = "CHANNEL";
+    PostSourceType["Group"] = "GROUP";
+    PostSourceType["MediaPage"] = "MEDIA_PAGE";
+    PostSourceType["Organization"] = "ORGANIZATION";
+    PostSourceType["UserProfile"] = "USER_PROFILE";
+})(PostSourceType || (PostSourceType = {}));
+export var AdType;
+(function (AdType) {
+    AdType["BannerResponsive"] = "BANNER_RESPONSIVE";
+    AdType["MediaDialogPromotion"] = "MEDIA_DIALOG_PROMOTION";
+    AdType["Story"] = "STORY";
+})(AdType || (AdType = {}));
+export var Currency;
+(function (Currency) {
+    Currency["Eur"] = "EUR";
+    Currency["Nok"] = "NOK";
+    Currency["Usd"] = "USD";
+})(Currency || (Currency = {}));
+export var MediaType;
+(function (MediaType) {
+    MediaType["Audio"] = "AUDIO";
+    MediaType["Image"] = "IMAGE";
+    MediaType["ShortVideo"] = "SHORT_VIDEO";
+    MediaType["Video"] = "VIDEO";
+})(MediaType || (MediaType = {}));
+export var MediaFormat;
+(function (MediaFormat) {
+    MediaFormat["W4H3"] = "W4H3";
+    MediaFormat["W16H9"] = "W16H9";
+})(MediaFormat || (MediaFormat = {}));
+export var ImageScale;
+(function (ImageScale) {
+    ImageScale["Big"] = "BIG";
+    ImageScale["Medium"] = "MEDIUM";
+    ImageScale["OriginalEncoded"] = "ORIGINAL_ENCODED";
+    ImageScale["Small"] = "SMALL";
+})(ImageScale || (ImageScale = {}));

package/dist/core/graphql.d.ts

@@ -1 +1 @@
-export declare const createLocalGQLClient: (customFetch?: typeof fetch) => import("@urql/core").Client;
+export declare const createLocalGQLClient: (graphqlUrl: string, customFetch?: typeof fetch) => import("@urql/core").Client;

package/dist/core/graphql.js

@@ -1,6 +1,6 @@
 import { createClient, fetchExchange } from '@urql/core';
-export const createLocalGQLClient = (customFetch) => createClient({
-    url: 'https://localhost:5000/graphql',
+export const createLocalGQLClient = (graphqlUrl, customFetch) => createClient({
+    url: graphqlUrl,
     requestPolicy: 'network-only',
     fetchOptions: {
         credentials: 'include'

package/dist/core/media/images-size-detector.service.d.ts

@@ -1,4 +1,4 @@
-import { ImageScale } from './types';
+import { ImageScale } from '../enums';
 export declare class ImageSizeDetectorService {
     userAgent: string | null;
     constructor(userAgent?: string | null);

package/dist/core/media/images-size-detector.service.js

@@ -1,4 +1,4 @@
-import { ImageScale } from './types';
+import { ImageScale } from '../enums';
 import MobileDetect from 'mobile-detect';
 export class ImageSizeDetectorService {
     userAgent;

package/dist/core/media/index.d.ts

@@ -1,4 +1,4 @@
 export { ImageHelper } from './image-helper';
 export { ImageSizeDetectorService } from './images-size-detector.service';
-export { type MediaItemModel, type MediaItemMetadataModel, type MediaItemWithMetadataModel, MediaType, MediaFormat, ImageScale } from './types';
+export { type MediaItemModel, type MediaItemMetadataModel, type MediaItemWithMetadataModel } from './types';
 export { getMediaItemImageUrl } from './media-item-url.service';

package/dist/core/media/index.js

@@ -1,4 +1,4 @@
 export { ImageHelper } from './image-helper';
 export { ImageSizeDetectorService } from './images-size-detector.service';
-export { MediaType, MediaFormat, ImageScale } from './types';
+export {} from './types';
 export { getMediaItemImageUrl } from './media-item-url.service';

package/dist/core/media/media-item-url.service.js

@@ -1,2 +1,3 @@
-import { MediaType } from './types';
+import { MediaType } from '../enums';
+import {} from './types';
 export const getMediaItemImageUrl = (media) => (media.type === MediaType.Image ? media.url : media.thumbnailUrl);

package/dist/core/media/types.d.ts

@@ -1,3 +1,4 @@
+import type { MediaType } from '../enums';
 export type MediaItemModel = {
     type: MediaType;
     url: string;
@@ -10,19 +11,3 @@ export type MediaItemMetadataModel = {
 export type MediaItemWithMetadataModel = MediaItemModel & {
     metadata: MediaItemMetadataModel;
 };
-export declare enum MediaType {
-    Audio = "AUDIO",
-    Image = "IMAGE",
-    ShortVideo = "SHORT_VIDEO",
-    Video = "VIDEO"
-}
-export declare enum MediaFormat {
-    W4H3 = "W4H3",
-    W16H9 = "W16H9"
-}
-export declare enum ImageScale {
-    Big = "BIG",
-    Medium = "MEDIUM",
-    OriginalEncoded = "ORIGINAL_ENCODED",
-    Small = "SMALL"
-}

package/dist/core/media/types.js

@@ -1,19 +1 @@
-export var MediaType;
-(function (MediaType) {
-    MediaType["Audio"] = "AUDIO";
-    MediaType["Image"] = "IMAGE";
-    MediaType["ShortVideo"] = "SHORT_VIDEO";
-    MediaType["Video"] = "VIDEO";
-})(MediaType || (MediaType = {}));
-export var MediaFormat;
-(function (MediaFormat) {
-    MediaFormat["W4H3"] = "W4H3";
-    MediaFormat["W16H9"] = "W16H9";
-})(MediaFormat || (MediaFormat = {}));
-export var ImageScale;
-(function (ImageScale) {
-    ImageScale["Big"] = "BIG";
-    ImageScale["Medium"] = "MEDIUM";
-    ImageScale["OriginalEncoded"] = "ORIGINAL_ENCODED";
-    ImageScale["Small"] = "SMALL";
-})(ImageScale || (ImageScale = {}));
+export {};

package/dist/index.d.ts

@@ -1,4 +1,2 @@
-export { type MediaItemModel, MediaType } from './core/media';
 export { type ShortVideoViewerModel } from './short-videos/short-video-viewer';
-export { AdType } from './advertising';
-export { Currency } from './products';
+export * from './core/enums';

package/dist/index.js

@@ -1,4 +1,2 @@
-export { MediaType } from './core/media';
 export {} from './short-videos/short-video-viewer';
-export { AdType } from './advertising';
-export { Currency } from './products';
+export * from './core/enums';

package/dist/products/price-helper.d.ts

@@ -1,4 +1,4 @@
-import { Currency } from './types';
-export declare const toPriceRepresentation: (amount: number, currency: Currency) => string;
+import { Currency } from '../core/enums';
+export declare const toPriceRepresentation: (amount: number, currency: Currency, includeCurrency?: boolean) => string;
 export declare const shouldUseSalePrice: (price: number, salePrice: number | null, effectiveDateFrom: string | null, effectiveDateTo: string | null) => boolean;
 export declare const isSalePriceEffective: (salePrice: number | null, effectiveDateFrom: string | null, effectiveDateTo: string | null) => boolean;

package/dist/products/price-helper.js

@@ -1,16 +1,27 @@
+import { Currency } from '../core/enums';
 import { Utils } from '../core/utils';
-import { Currency } from './types';
-export const toPriceRepresentation = (amount, currency) => {
-    const hasDecimalPart = amount - Math.floor(amount) !== 0;
-    const decimalSeparator = (1.1).toLocaleString().substring(1, 2);
+export const toPriceRepresentation = (amount, currency, includeCurrency = true) => {
+    const formatNumber = (value) => {
+        const noDecimals = Number.isInteger(value);
+        const options = {
+            minimumFractionDigits: noDecimals ? 0 : 2,
+            maximumFractionDigits: noDecimals ? 0 : 2
+        };
+        return value.toLocaleString('no-NO', options);
+    };
     switch (currency) {
-        case Currency.Eur:
-            return `€ ${amount}`;
+        case Currency.Eur: {
+            const value = formatNumber(amount);
+            return includeCurrency ? `€ ${value}` : value;
+        }
         case Currency.Nok: {
-            return hasDecimalPart ? `kr ${amount}` : `kr ${amount}${decimalSeparator}-`;
+            const formattedValue = Number.isInteger(amount) ? `${amount},-` : formatNumber(amount);
+            return includeCurrency ? `kr ${formatNumber(amount)}` : formattedValue;
+        }
+        case Currency.Usd: {
+            const value = formatNumber(amount);
+            return includeCurrency ? `€ ${value}` : value;
         }
-        case Currency.Usd:
-            return `$ ${amount}`;
         default: {
             Utils.assertUnreachable(currency);
         }

package/dist/short-videos/short-video-viewer/cmp.ad.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">import { Button, ButtonSize } from '../../ui/button';
+import { Image } from '../../ui/image';
+import { LineClamp } from '../../ui/line-clamp';
+import { ProportionalContainer } from '../../ui/proportional-container';
+let { ad } = $props();
+</script>
+
+<div class="short-video-ad-viewer">
+  <ProportionalContainer ratio={16 / 9}>
+    <Image src={ad.image} alt={ad.title} />
+  </ProportionalContainer>
+  <div class="short-video-ad-viewer__body">
+    {#if ad.title}
+      <p class="short-video-ad-viewer__title">{ad.title}</p>
+    {/if}
+    {#if ad.description}
+      <p class="short-video-ad-viewer__description">
+        <LineClamp value={ad.description} maxLines={3} />
+      </p>
+    {/if}
+    {#if ad.buttonUrl}
+      <div class="short-video-ad-viewer__button">
+        <a href={ad.buttonUrl} target="_blank" class="short-video-ad-viewer__link">
+          <Button size={ButtonSize.Standard}>{ad.buttonText || ad.buttonUrl}</Button>
+        </a>
+      </div>
+    {/if}
+  </div>
+</div>
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.short-video-ad-viewer {
+  --_short-video-ad-viewer--background: var(--short-video-ad-viewer--background, #2e2e2e);
+  display: flex;
+  flex-direction: column;
+  border-radius: 0.25em;
+  background: var(--_short-video-ad-viewer--background);
+  min-height: 0;
+  overflow: hidden;
+  width: 100%;
+}
+.short-video-ad-viewer__body {
+  padding: 1em 1em 1.25em;
+}
+.short-video-ad-viewer__title {
+  color: #ffffff;
+  font-size: 0.9375em;
+  font-weight: bold;
+  display: block;
+  margin-bottom: 0.6666666667em;
+}
+.short-video-ad-viewer__description {
+  color: #ffffff;
+  font-size: 0.75em;
+  display: block;
+  margin-bottom: 1.3333333333em;
+  white-space: pre-line;
+  word-break: break-word;
+}
+.short-video-ad-viewer__button {
+  margin-top: 1em;
+  display: flex;
+  justify-content: center;
+}</style>

package/dist/{advertising/ad-view/cmp.ad-view.svelte.d.ts → short-videos/short-video-viewer/cmp.ad.svelte.d.ts}

@@ -1,7 +1,6 @@
-import type { AdViewModel } from './types';
+import type { ShortVideoViewerAdModel } from './types';
 type Props = {
-    ad: AdViewModel;
-    inert?: boolean;
+    ad: ShortVideoViewerAdModel;
 };
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

package/dist/short-videos/short-video-viewer/cmp.attachments-inline.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">import { Icon, IconColor } from '../../ui/icon';
+import { ImageRounded } from '../../ui/image';
+import IconTargetArrow from '@fluentui/svg-icons/icons/target_arrow_20_regular.svg';
+let { model } = $props();
+const attachmentsToShow = $derived.by(() => {
+    const products = model.products.filter((p) => !!p.image).map((p) => ({ isAd: false, image: p.image, link: p.link }));
+    const ads = (model.ad ? [model.ad] : []).filter((a) => !!a.image).map((a) => ({ isAd: true, image: a.image, link: a.buttonUrl }));
+    return [...products, ...ads];
+});
+</script>
+
+<div class="attachments-inline-container">
+  <div class="attachments-inline">
+    {#each attachmentsToShow as attachment (attachment)}
+      <div class="attachments-inline__item" onclick={() => attachment.link && window.open(attachment.link, '_blank')} onkeydown={() => {}} role="none">
+        <ImageRounded src={attachment.image} alt="" />
+        {#if attachment.isAd}
+          <div class="attachments-inline__item-icon">
+            <Icon src={IconTargetArrow} color={IconColor.White} />
+          </div>
+        {/if}
+      </div>
+    {/each}
+  </div>
+</div>
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.attachments-inline-container {
+  flex: 1;
+  overflow: hidden;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+}
+
+.attachments-inline {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+  height: 100%;
+  justify-content: flex-end;
+}
+.attachments-inline__item {
+  --image--rounded--width: 3.125rem;
+  --image--rounded--height: 3.75rem;
+  --image--rounded--inner--border-width: 0;
+  --image--rounded--outer--border-radius: 0.25rem;
+  --image--rounded--outer--border-width: 1px;
+  --image--rounded--outer--border-color: #f3f4f6;
+  position: relative;
+  cursor: pointer;
+}
+.attachments-inline__item-icon {
+  position: absolute;
+  bottom: 2px;
+  right: 2px;
+  --icon--size: 1rem;
+}</style>

package/dist/{streams/components/images/cmp.images-component.svelte.d.ts → short-videos/short-video-viewer/cmp.attachments-inline.svelte.d.ts}

@@ -1,6 +1,6 @@
-import type { ImagesComponentData } from './types';
+import type { ShortVideoViewerModel } from './types';
 type Props = {
-    model: ImagesComponentData;
+    model: ShortVideoViewerModel;
 };
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

package/dist/short-videos/short-video-viewer/cmp.attachments.svelte

@@ -1,29 +1,30 @@
-<script lang="ts">import { getMediaItemImageUrl } from '../../core/media';
-import { Icon, IconColor } from '../../ui/icon';
-import { ImageRounded } from '../../ui/image';
-import IconTargetArrow from '@fluentui/svg-icons/icons/target_arrow_20_regular.svg';
-let { model } = $props();
-const attachmentsToShow = $derived.by(() => {
-    const products = model.products.filter((p) => !!p.image).map((p) => ({ isAd: false, image: p.image, link: p.link }));
-    const ads = (model.ad ? [model.ad] : []).filter((a) => !!a.media).map((a) => ({ isAd: true, image: getMediaItemImageUrl(a.media), link: a.buttonUrl }));
-    return [...products, ...ads];
-});
+<script lang="ts">import { default as ShortVideoAdViewer } from './cmp.ad.svelte';
+import { default as ShortVideoProductViewer } from './cmp.product.svelte';
+import { ShortVideoAttachmentsLocalizationSvelte } from './short-video-attachments-localization.svelte';
+import {} from './types';
+let { shortVideo, localization: localizationInit } = $props();
+const localization = $derived(new ShortVideoAttachmentsLocalizationSvelte(localizationInit));
 </script>
 
-<div class="attachments-inline-container">
-  <div class="attachments-inline">
-    {#each attachmentsToShow as attachment (attachment)}
-      <div class="attachments-inline__item" onclick={() => attachment.link && window.open(attachment.link, '_blank')} onkeydown={() => {}} role="none">
-        <ImageRounded src={attachment.image} alt="" />
-        {#if attachment.isAd}
-          <div class="attachments-inline__item-icon">
-            <Icon src={IconTargetArrow} color={IconColor.White} />
-          </div>
-        {/if}
+{#if shortVideo.products.length || shortVideo.ad}
+  <div class="short-video-attachments">
+    {#if shortVideo.products.length}
+      <div class="short-video-attachments__section-header">{localization.productsSection}</div>
+      <div class="short-video-attachments__products">
+        {#each shortVideo.products as product (product.id)}
+          <ShortVideoProductViewer product={product} localization={localization.productLocalization} />
+        {/each}
       </div>
-    {/each}
+    {/if}
+
+    {#if shortVideo.ad}
+      <div class="short-video-attachments__section-header">{localization.offersSection}</div>
+      <div class="short-video-attachments__offer">
+        <ShortVideoAdViewer ad={shortVideo.ad} />
+      </div>
+    {/if}
   </div>
-</div>
+{/if}
 
 <style>@keyframes fadeIn {
   0% {
@@ -36,36 +37,32 @@ const attachmentsToShow = $derived.by(() => {
     opacity: 1;
   }
 }
-.attachments-inline-container {
-  flex: 1;
-  overflow: hidden;
-  min-height: 0;
+.short-video-attachments {
+  --_short-video-attachments--margin-vertical: var(--short-video-attachments--margin-vertical, 0);
+  --_short-video-attachments--spacing-vertical: var(--short-video-attachments--spacing-vertical, 1.25rem);
+  --_short-video-attachments--spacing-horizontal: var(--short-video-attachments--spacing-horizontal, 1rem);
   display: flex;
   flex-direction: column;
-  justify-content: flex-end;
+  gap: var(--_short-video-attachments--spacing-vertical);
+  padding: var(--_short-video-attachments--margin-vertical) 0;
 }
-
-.attachments-inline {
+.short-video-attachments__section-header {
+  color: #d1d5db;
+  font-size: 1rem;
+  font-weight: 700;
+  line-height: 1.2;
   display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  flex-wrap: wrap;
-  height: 100%;
-  justify-content: flex-end;
+  justify-content: space-between;
+  margin-bottom: 0.5rem;
+  padding: 0.5625rem var(--_short-video-attachments--spacing-horizontal) 0;
 }
-.attachments-inline__item {
-  --image--rounded--width: 3.125rem;
-  --image--rounded--height: 3.75rem;
-  --image--rounded--inner--border-width: 0;
-  --image--rounded--outer--border-radius: 0.25rem;
-  --image--rounded--outer--border-width: 1px;
-  --image--rounded--outer--border-color: #f3f4f6;
-  position: relative;
-  cursor: pointer;
+.short-video-attachments__products {
+  padding: 0 var(--_short-video-attachments--spacing-horizontal);
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  grid-column-gap: var(--_short-video-attachments--spacing-horizontal);
+  grid-row-gap: var(--_short-video-attachments--spacing-vertical);
 }
-.attachments-inline__item-icon {
-  position: absolute;
-  bottom: 2px;
-  right: 2px;
-  --icon--size: 1rem;
+.short-video-attachments__offer {
+  padding: 0 var(--_short-video-attachments--spacing-horizontal);
 }</style>

package/dist/short-videos/short-video-viewer/cmp.attachments.svelte.d.ts

@@ -1,6 +1,8 @@
-import type { ShortVideoViewerModel } from './types';
+import { type IShortVideoAttachmentsLocalization } from './short-video-attachments-localization.svelte';
+import { type ShortVideoViewerModel } from './types';
 type Props = {
-    model: ShortVideoViewerModel;
+    shortVideo: ShortVideoViewerModel;
+    localization?: IShortVideoAttachmentsLocalization;
 };
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

package/dist/{streams/components/product/cmp.product-component.svelte → short-videos/short-video-viewer/cmp.product.svelte}

@@ -1,37 +1,42 @@
-<script lang="ts">import { toPriceRepresentation } from '../../../products/price-helper';
-import { ImageRounded } from '../../../ui/image';
-import { ProportionalContainer } from '../../../ui/proportional-container';
-let { model, fitToContainer = true } = $props();
+<script lang="ts">import { toPriceRepresentation } from '../../products/price-helper';
+import { ImageRounded } from '../../ui/image';
+import { ProportionalContainer } from '../../ui/proportional-container';
+import { ShortVideoProductLocalization } from './short-video-product-localization.svelte';
+let { product, fitToContainer = false, localization: localizationInit } = $props();
+const localization = $derived(new ShortVideoProductLocalization(localizationInit));
 </script>
 
-<div class="product-component">
+<div class="short-video-product-viewer">
   {#if fitToContainer}
-    <div class="product-component__image">
-      <ImageRounded src={model.image} noBorders={true} />
+    <div class="short-video-product-viewer__image">
+      <ImageRounded src={product.image} noBorders={true} />
     </div>
   {:else}
     <ProportionalContainer ratio={4 / 5}>
-      <ImageRounded src={model.image} noBorders={true} />
+      <ImageRounded src={product.image} noBorders={true} />
     </ProportionalContainer>
   {/if}
-  <div class="product-component__name">{model.title}</div>
-  <div class="product-component__price">
+  <div class="short-video-product-viewer__name">{product.title}</div>
+  <div class="short-video-product-viewer__price">
     <div class="product-price">
-      {#if !model.salePrice}
-        <div class="product-price__price">{toPriceRepresentation(model.price, model.currency)}</div>
+      {#if !product.salePrice}
+        <div class="product-price__price">{toPriceRepresentation(product.price, product.currency)}</div>
       {:else}
         <div class="product-price__before-price">
-          {toPriceRepresentation(model.price, model.currency)}
+          {#if localization.beforeNowPrefix}
+            {localization.beforeNowPrefix}
+          {/if}
+          {toPriceRepresentation(product.price, product.currency)}
         </div>
         <div class="product-price__price product-price__price--sale">
-          {toPriceRepresentation(model.salePrice, model.currency)}
+          {toPriceRepresentation(product.salePrice, product.currency)}
         </div>
       {/if}
     </div>
   </div>
 
-  {#if model.link}
-    <a href={model.link} target="_blank" rel="noopener noreferrer" class="product-component__link" aria-label="none">&nbsp;</a>
+  {#if product.link}
+    <a href={product.link} target="_blank" rel="noopener noreferrer" class="short-video-product-viewer__link" aria-label="none">&nbsp;</a>
   {/if}
 </div>
 
@@ -46,24 +51,27 @@ let { model, fitToContainer = true } = $props();
     opacity: 1;
   }
 }
-.product-component {
+.short-video-product-viewer {
   width: 100%;
-  height: 100%;
+  height: auto;
   position: relative;
   display: flex;
   flex-direction: column;
   container-type: inline-size;
+  --image--object-fit: contain;
   --image--rounded--outer--border-radius: 0.25em;
+  --image--rounded--inner--border-color: transparent;
+  --image--rounded--outer--border-color: transparent;
 }
-.product-component__image {
+.short-video-product-viewer__image {
   flex: 1;
   min-height: 0;
 }
-.product-component__name {
+.short-video-product-viewer__name {
   width: 100%;
   font-weight: 500;
   font-size: 0.9375rem;
-  color: #2e2e2e;
+  color: #ffffff;
   margin-top: 0.5rem;
   padding: 0 0.3125rem;
   text-align: center;
@@ -74,23 +82,23 @@ let { model, fitToContainer = true } = $props();
   /* Set 'container-type: inline-size;' to reference container*/
 }
 @container (width < 300px) {
-  .product-component__name {
+  .short-video-product-viewer__name {
     font-size: 0.75rem;
     margin-top: 0.3125rem;
     padding: 0 0.25rem;
   }
 }
-.product-component__price {
+.short-video-product-viewer__price {
   padding-top: 0.3125rem;
   margin-top: auto;
   /* Set 'container-type: inline-size;' to reference container*/
 }
 @container (width < 300px) {
-  .product-component__price {
+  .short-video-product-viewer__price {
     padding-top: 0.25rem;
   }
 }
-.product-component__link {
+.short-video-product-viewer__link {
   position: absolute;
   top: 0;
   left: 0;
@@ -131,7 +139,7 @@ let { model, fitToContainer = true } = $props();
 .product-price__price {
   width: 100%;
   font-size: 1.0625em;
-  color: #2e2e2e;
+  color: #ffffff;
   font-weight: 800;
   margin-top: auto;
   text-align: center;