@streamscloud/embeddable 2.1.1 → 2.1.2

package/dist/products/price-helper.js

@@ -0,0 +1,47 @@
+import { Currency } from '../core/enums';
+import { Utils } from '../core/utils';
+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: {
+            const value = formatNumber(amount);
+            return includeCurrency ? `€ ${value}` : value;
+        }
+        case Currency.Nok: {
+            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;
+        }
+        default: {
+            Utils.assertUnreachable(currency);
+        }
+    }
+};
+export const shouldUseSalePrice = (price, salePrice, effectiveDateFrom, effectiveDateTo) => {
+    if (!isSalePriceEffective(salePrice, effectiveDateFrom, effectiveDateTo)) {
+        return false;
+    }
+    return price !== salePrice;
+};
+export const isSalePriceEffective = (salePrice, effectiveDateFrom, effectiveDateTo) => {
+    if (!salePrice) {
+        return false;
+    }
+    if (!effectiveDateFrom && !effectiveDateTo) {
+        return true;
+    }
+    const now = Date.now();
+    const fromDate = effectiveDateFrom && new Date(effectiveDateFrom);
+    const toDate = effectiveDateTo && new Date(effectiveDateTo);
+    return (!fromDate || now >= fromDate.getTime()) && (!toDate || now < toDate.getTime());
+};

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/short-videos/short-video-viewer/cmp.ad.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { ShortVideoViewerAdModel } from './types';
+type Props = {
+    ad: ShortVideoViewerAdModel;
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default 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/short-videos/short-video-viewer/cmp.attachments-inline.svelte.d.ts

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

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

@@ -0,0 +1,68 @@
+<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, on } = $props();
+const localization = $derived(new ShortVideoAttachmentsLocalizationSvelte(localizationInit));
+</script>
+
+{#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} on={on} />
+        {/each}
+      </div>
+    {/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>
+{/if}
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.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;
+  gap: var(--_short-video-attachments--spacing-vertical);
+  padding: var(--_short-video-attachments--margin-vertical) 0;
+}
+.short-video-attachments__section-header {
+  color: #d1d5db;
+  font-size: 1rem;
+  font-weight: 700;
+  line-height: 1.2;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 0.5rem;
+  padding: 0.5625rem var(--_short-video-attachments--spacing-horizontal) 0;
+}
+.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);
+}
+.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

@@ -0,0 +1,12 @@
+import { type IShortVideoAttachmentsLocalization } from './short-video-attachments-localization.svelte';
+import { type ShortVideoViewerModel } from './types';
+type Props = {
+    shortVideo: ShortVideoViewerModel;
+    localization?: IShortVideoAttachmentsLocalization;
+    on?: {
+        productClick?: (productId: string) => void;
+    };
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

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

@@ -0,0 +1,168 @@
+<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, on } = $props();
+const localization = $derived(new ShortVideoProductLocalization(localizationInit));
+const handleProductClick = (event) => {
+    if (!product.link) {
+        return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    if (on === null || on === void 0 ? void 0 : on.productClick) {
+        on.productClick(product.id);
+    }
+    window.open(product.link, '_blank', 'noopener noreferrer');
+};
+</script>
+
+<div class="short-video-product-viewer">
+  {#if fitToContainer}
+    <div class="short-video-product-viewer__image">
+      <ImageRounded src={product.image} noBorders={true} />
+    </div>
+  {:else}
+    <ProportionalContainer ratio={4 / 5}>
+      <ImageRounded src={product.image} noBorders={true} />
+    </ProportionalContainer>
+  {/if}
+  <div class="short-video-product-viewer__name">{product.title}</div>
+  <div class="short-video-product-viewer__price">
+    <div class="product-price">
+      {#if !product.salePrice}
+        <div class="product-price__price">{toPriceRepresentation(product.price, product.currency)}</div>
+      {:else}
+        <div class="product-price__before-price">
+          {#if localization.beforeNowPrefix}
+            {localization.beforeNowPrefix}
+          {/if}
+          {toPriceRepresentation(product.price, product.currency)}
+        </div>
+        <div class="product-price__price product-price__price--sale">
+          {toPriceRepresentation(product.salePrice, product.currency)}
+        </div>
+      {/if}
+    </div>
+  </div>
+
+  {#if product.link}
+    <a href={product.link} onclick={handleProductClick} target="_blank" rel="noopener noreferrer" class="short-video-product-viewer__link" aria-label="none"
+      >&nbsp;</a>
+  {/if}
+</div>
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.short-video-product-viewer {
+  width: 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;
+}
+.short-video-product-viewer__image {
+  flex: 1;
+  min-height: 0;
+}
+.short-video-product-viewer__name {
+  width: 100%;
+  font-weight: 500;
+  font-size: 0.9375rem;
+  color: #ffffff;
+  margin-top: 0.5rem;
+  padding: 0 0.3125rem;
+  text-align: center;
+  text-overflow: ellipsis;
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 300px) {
+  .short-video-product-viewer__name {
+    font-size: 0.75rem;
+    margin-top: 0.3125rem;
+    padding: 0 0.25rem;
+  }
+}
+.short-video-product-viewer__price {
+  padding-top: 0.3125rem;
+  margin-top: auto;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 300px) {
+  .short-video-product-viewer__price {
+    padding-top: 0.25rem;
+  }
+}
+.short-video-product-viewer__link {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.product-price {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 0.4375rem;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 300px) {
+  .product-price {
+    gap: 0.3125rem;
+  }
+}
+.product-price__before-price {
+  width: 100%;
+  color: #e5e7eb;
+  text-decoration: line-through;
+  font-size: 0.75rem;
+  font-weight: 500;
+  text-align: center;
+  text-overflow: ellipsis;
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 300px) {
+  .product-price__before-price {
+    font-size: 0.625em;
+  }
+}
+.product-price__price {
+  width: 100%;
+  font-size: 1.0625em;
+  color: #ffffff;
+  font-weight: 800;
+  margin-top: auto;
+  text-align: center;
+  text-overflow: ellipsis;
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 300px) {
+  .product-price__price {
+    font-size: 0.9375em;
+  }
+}</style>

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

@@ -0,0 +1,13 @@
+import { type IShortVideoProductLocalization } from './short-video-product-localization.svelte';
+import type { ShortVideoViewerProductModel } from './types';
+type Props = {
+    product: ShortVideoViewerProductModel;
+    fitToContainer?: boolean;
+    localization?: IShortVideoProductLocalization;
+    on?: {
+        productClick?: (productId: string) => void;
+    };
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

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

@@ -0,0 +1,124 @@
+<script lang="ts">import { slideHorizontally } from '../../core/transitions';
+import { default as ShortVideoAttachments } from './cmp.attachments.svelte';
+import { default as ShortVideoHeading } from './cmp.short-video-heading.svelte';
+import { ShortVideoDetailsLocalization } from './short-video-details-localization.svelte';
+import {} from './types';
+let { shortVideo, collapsed, localization: localizationInit, on } = $props();
+const localization = $derived(new ShortVideoDetailsLocalization(localizationInit));
+</script>
+
+{#if !collapsed}
+  <div class="short-video-details" transition:slideHorizontally|local data-theme="dark">
+    <div class="short-video-details__sliding-container">
+      <div class="short-video-details__content">
+        <div class="short-video-details__heading">
+          <ShortVideoHeading
+            model={shortVideo.heading}
+            localization={{ viewsCount: localization.viewsCount, timeAgoLocalization: localization.timeAgoLocalization }} />
+        </div>
+
+        {#if shortVideo.text}
+          <p class="short-video-details__text">
+            {shortVideo.text}
+          </p>
+        {/if}
+      </div>
+
+      <div class="short-video-details__section-splitter"></div>
+
+      <ShortVideoAttachments shortVideo={shortVideo} localization={localization.attachmentsLocalization} on={on} />
+    </div>
+  </div>
+{/if}
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.short-video-details {
+  --_short-video-details--padding-horizontal: 1rem;
+  --short-video-attachments--margin-vertical: 1.25rem;
+  --short-video-attachments--spacing-horizontal: var(--_short-video-details--padding-horizontal);
+  background: #1c1c1c;
+  height: 100%;
+  min-height: 100%;
+  max-height: 100%;
+  width: 25rem;
+  min-width: 25rem;
+  max-width: 25rem;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  padding-bottom: 0.9375rem;
+  overflow: auto;
+  scrollbar-color: transparent transparent;
+  scrollbar-width: thin;
+  --custom-scrollbar-color: #999999;
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 100%;
+  z-index: 1;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+.short-video-details::-webkit-scrollbar {
+  width: 3px;
+  height: 3px;
+  background: var(--custom-scrollbar-background, transparent);
+  visibility: hidden;
+}
+.short-video-details::-webkit-scrollbar-thumb {
+  background: transparent;
+}
+.short-video-details:hover {
+  scrollbar-color: var(--custom-scrollbar-color, #7d7d7d) var(--custom-scrollbar-background, transparent);
+  scrollbar-width: thin;
+}
+.short-video-details:hover::-webkit-scrollbar {
+  width: 3px;
+  height: 3px;
+  background: var(--custom-scrollbar-background, transparent);
+  visibility: hidden;
+}
+.short-video-details:hover::-webkit-scrollbar-thumb {
+  background: var(--custom-scrollbar-color, #7d7d7d);
+}
+.short-video-details__sliding-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+@container (width < 576px) {
+  .short-video-details {
+    width: 100%;
+    min-width: 100%;
+    max-width: 100%;
+  }
+}
+.short-video-details__content {
+  padding: 1.5rem var(--_short-video-details--padding-horizontal) 0.875rem;
+  margin-bottom: 0.875rem;
+}
+.short-video-details__heading {
+  --short-video-heading--padding: 0 1.875rem 1.25rem 0;
+}
+.short-video-details__text {
+  color: #d1d5db;
+  font-size: 0.9375rem;
+  line-height: 1.125rem;
+  font-weight: 400;
+  white-space: pre-line;
+  word-break: break-word;
+  margin-bottom: 0.4375rem;
+}
+.short-video-details__section-splitter {
+  border-bottom: 1px solid #4b5563;
+}</style>

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

@@ -0,0 +1,13 @@
+import { type IShortVideoDetailsLocalization } from './short-video-details-localization.svelte';
+import { type ShortVideoViewerModel } from './types';
+type Props = {
+    shortVideo: ShortVideoViewerModel;
+    collapsed: boolean;
+    localization?: IShortVideoDetailsLocalization;
+    on?: {
+        productClick?: (productId: string) => void;
+    };
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;