@streamscloud/embeddable 3.4.2 → 5.0.0

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

@@ -1,168 +0,0 @@
-<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';
-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

@@ -1,14 +0,0 @@
-import type { Locale } from '../../core/locale';
-import { type IShortVideoProductLocalization } from './short-video-product-localization';
-import type { ShortVideoViewerProductModel } from './types';
-type Props = {
-    product: ShortVideoViewerProductModel;
-    fitToContainer?: boolean;
-    localization: IShortVideoProductLocalization | Locale;
-    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

@@ -1,125 +0,0 @@
-<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';
-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">
-        {#if shortVideo.heading}
-          <div class="short-video-details__heading">
-            <ShortVideoHeading
-              model={shortVideo.heading}
-              localization={{ viewsCount: localization.viewsCount, timeAgoLocalization: localization.timeAgoLocalization }} />
-          </div>
-        {/if}
-        {#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

@@ -1,14 +0,0 @@
-import type { Locale } from '../../core/locale';
-import { type IShortVideoDetailsLocalization } from './short-video-details-localization';
-import { type ShortVideoViewerModel } from './types';
-type Props = {
-    shortVideo: ShortVideoViewerModel;
-    collapsed: boolean;
-    localization: IShortVideoDetailsLocalization | Locale;
-    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.social-interactions.svelte

@@ -1,69 +0,0 @@
-<script lang="ts">import { Icon } from '../../ui/icon';
-import { MediaVolumeManager } from '../../ui/media-playback';
-import IconShoppingBag from '@fluentui/svg-icons/icons/shopping_bag_28_regular.svg?raw';
-import IconSpeaker2 from '@fluentui/svg-icons/icons/speaker_2_28_regular.svg?raw';
-import IconSpeakerMute from '@fluentui/svg-icons/icons/speaker_mute_28_regular.svg?raw';
-let { model, on } = $props();
-const onAttachmentsClicked = () => {
-    var _a;
-    (_a = on === null || on === void 0 ? void 0 : on.attachmentsClicked) === null || _a === void 0 ? void 0 : _a.call(on);
-};
-const onMuteClicked = () => {
-    MediaVolumeManager.isMuted = !MediaVolumeManager.isMuted;
-};
-</script>
-
-<div class="short-video-social-interactions" class:short-video-social-interactions--single-action={!(model.products.length || model.ad)}>
-  {#if model.products.length || model.ad}
-    <button type="button" class="short-video-social-interactions__action" onclick={onAttachmentsClicked}>
-      <Icon src={IconShoppingBag} />
-    </button>
-  {/if}
-
-  <button type="button" class="short-video-social-interactions__action" onclick={onMuteClicked}>
-    {#if MediaVolumeManager.isMuted}
-      <Icon src={IconSpeakerMute} />
-    {:else}
-      <Icon src={IconSpeaker2} />
-    {/if}
-  </button>
-</div>
-
-<style>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.short-video-social-interactions {
-  cursor: pointer;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  gap: 1.125rem;
-  border-radius: 1.25rem;
-  border: 0.0625rem solid #1c1c1e;
-  background: rgba(0, 0, 0, 0.6);
-  padding: 1rem 0.625rem;
-}
-.short-video-social-interactions--single-action {
-  width: var(--stream-player--button--size);
-  min-width: var(--stream-player--button--size);
-  max-width: var(--stream-player--button--size);
-  height: var(--stream-player--button--size);
-  min-height: var(--stream-player--button--size);
-  max-height: var(--stream-player--button--size);
-  border-radius: 50%;
-}
-.short-video-social-interactions__action {
-  --icon--size: var(--stream-player--icon--size);
-  --icon--color: #ffffff;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}</style>

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

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

package/dist/short-videos/short-video-viewer/description.svelte

@@ -1,53 +0,0 @@
-<script lang="ts">import { LineClamp } from '../../ui/line-clamp';
-import { default as ShortVideoHeading } from './cmp.short-video-heading.svelte';
-let { model, localization } = $props();
-</script>
-
-<div class="short-video-description">
-  {#if model.heading}
-    <div class="short-video-description__heading">
-      <ShortVideoHeading model={model.heading} localization={localization} />
-    </div>
-  {/if}
-  <div class="short-video-description__text">
-    {#if model.text}
-      <LineClamp value={model.text} maxLines={2} />
-    {/if}
-  </div>
-</div>
-
-<style>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.short-video-description {
-  --_short-video-viewer--description--font--primary-color: var(--short-video-viewer--description--font--primary-color);
-  --_short-video-viewer--description--font--primary-shadow: var(--short-video-viewer--description--font--primary-shadow, 1px 1px hsl(0, 0%, 10%));
-  --_short-video-viewer--description--font--secondary-color: var(--short-video-viewer--description--font--secondary-color);
-  --_short-video-viewer--description--font--secondary-shadow: var(--short-video-viewer--description--font--secondary-shadow, 1px 1px hsl(0, 0%, 10%));
-  display: flex;
-  flex-direction: column;
-  padding-top: 0.75rem;
-}
-.short-video-description__heading {
-  --short-video-heading--padding: 0 0 0.875rem 0;
-  --short-video-heading--text--color: var(--_short-video-viewer--description--font--primary-color);
-  --short-video-heading--text--shadow: var(--_short-video-viewer--description--font--primary-shadow);
-  --short-video-heading--meta--color: var(--_short-video-viewer--description--font--secondary-color);
-  --short-video-heading--meta--shadow: var(--_short-video-viewer--description--font--secondary-shadow);
-}
-.short-video-description__text {
-  color: var(--_short-video-viewer--description--font--primary-color);
-  text-shadow: var(--_short-video-viewer--description--font--primary-shadow);
-  font-size: 0.9375rem;
-  line-height: 1.25rem;
-  font-weight: 400;
-  height: 2.5rem;
-}</style>

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

@@ -1,9 +0,0 @@
-import type { ShortVideoViewerLocalization } from './short-video-viewer-localization';
-import type { ShortVideoViewerModel } from './types';
-type Props = {
-    model: ShortVideoViewerModel;
-    localization: ShortVideoViewerLocalization;
-};
-declare const Description: import("svelte").Component<Props, {}, "">;
-type Description = ReturnType<typeof Description>;
-export default Description;

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

@@ -1,14 +0,0 @@
-import { type Locale } from '../../core/locale';
-import type { ITimeAgoLocalization } from '../../ui/time-ago';
-import type { IShortVideoAttachmentsLocalization } from './short-video-attachments-localization';
-export interface IShortVideoDetailsLocalization {
-    viewsCount?: (count: number) => string;
-    timeAgoLocalization?: ITimeAgoLocalization | Locale;
-    attachmentsLocalization?: IShortVideoAttachmentsLocalization | Locale;
-}
-export declare class ShortVideoDetailsLocalization {
-    viewsCount: (count: number) => string;
-    timeAgoLocalization: ITimeAgoLocalization | Locale;
-    attachmentsLocalization: IShortVideoAttachmentsLocalization | Locale;
-    constructor(init: IShortVideoDetailsLocalization | Locale);
-}

package/dist/short-videos/short-video-viewer/short-video-details-localization.js

@@ -1,17 +0,0 @@
-import { isLocale } from '../../core/locale';
-export class ShortVideoDetailsLocalization {
-    viewsCount;
-    timeAgoLocalization;
-    attachmentsLocalization;
-    constructor(init) {
-        this.viewsCount = isLocale(init) ? loc.viewsCount[init] : init.viewsCount || loc.viewsCount.en;
-        this.timeAgoLocalization = isLocale(init) ? init : init.timeAgoLocalization || 'en';
-        this.attachmentsLocalization = isLocale(init) ? init : init.attachmentsLocalization || 'en';
-    }
-}
-const loc = {
-    viewsCount: {
-        en: (count) => (count === 1 ? '1 view' : `${count} views`),
-        no: (count) => (count === 1 ? '1 visning' : `${count} visninger`)
-    }
-};

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

@@ -1,8 +0,0 @@
-import { type Locale } from '../../core/locale';
-export interface IShortVideoProductLocalization {
-    beforeNowPrefix?: string | null;
-}
-export declare class ShortVideoProductLocalization {
-    beforeNowPrefix: string | null;
-    constructor(init: IShortVideoProductLocalization | Locale);
-}

package/dist/short-videos/short-videos-player/action-button.svelte

@@ -1,38 +0,0 @@
-<script lang="ts">let { children, on } = $props();
-export {};
-</script>
-
-<button type="button" class="action-button" onclick={() => on.click()}>
-  {@render children()}
-</button>
-
-<style>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.action-button {
-  --_short-videos-player--action-button--size: var(--short-videos-player--action-button--size);
-  --_short-videos-player--action-button--background: var(--action-button-background, #1c1c1c);
-  width: var(--_short-videos-player--action-button--size);
-  min-width: var(--_short-videos-player--action-button--size);
-  max-width: var(--_short-videos-player--action-button--size);
-  height: var(--_short-videos-player--action-button--size);
-  min-height: var(--_short-videos-player--action-button--size);
-  max-height: var(--_short-videos-player--action-button--size);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  line-height: 0;
-  background: var(--_short-videos-player--action-button--background);
-  border-radius: 50%;
-  --icon--size: 1.25rem;
-  z-index: 1;
-  color: #ffffff;
-}</style>

package/dist/short-videos/short-videos-player/action-button.svelte.d.ts

@@ -1,10 +0,0 @@
-import type { Snippet } from 'svelte';
-type Props = {
-    on: {
-        click: () => void;
-    };
-    children: Snippet;
-};
-declare const ActionButton: import("svelte").Component<Props, {}, "">;
-type ActionButton = ReturnType<typeof ActionButton>;
-export default ActionButton;

package/dist/ui/shadow-dom/shadow-host.js

@@ -1,32 +0,0 @@
-import normalize from './_normalize.scss?raw';
-import reset from './_reset.scss?raw';
-export class ShadowHost {
-    shadowRoot;
-    host;
-    constructor() {
-        const host = document.createElement('div');
-        host.style.all = 'unset';
-        host.style.position = 'fixed';
-        host.style.inset = '0';
-        host.style.zIndex = '9999';
-        host.style.lineHeight = '1.15';
-        host.style.fontFamily = 'system-ui, Avenir, Helvetica, Arial, sans-serif';
-        host.style.fontWeight = '400';
-        host.style.margin = '0';
-        host.style.boxSizing = 'border-box';
-        host.style.textAlign = 'initial';
-        this.host = host;
-        this.shadowRoot = host.attachShadow({ mode: 'open' });
-        const styleElement = document.createElement('style');
-        styleElement.textContent = normalize + reset;
-        this.shadowRoot.appendChild(styleElement);
-    }
-    attachToBody() {
-        document.getElementsByTagName('html')[0].style.overflow = 'hidden';
-        document.body.appendChild(this.host);
-    }
-    remove() {
-        this.host.remove();
-        document.getElementsByTagName('html')[0].style.overflow = '';
-    }
-}