@streamscloud/embeddable 1.1.2

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

@@ -0,0 +1,145 @@
+<script lang="ts">import { AdView } from '../../advertising/ad-view';
+import { slideHorizontally } from '../../core/transitions';
+import { ProductCard } from '../../products/product-card';
+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 } = $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>
+
+      {#if shortVideo.products.length || shortVideo.ad}
+        <div class="short-video-details__attachments">
+          {#if shortVideo.products.length}
+            <div class="short-video-details__section-header">{localization.productsSection}</div>
+            <div class="short-video-details__products">
+              {#each shortVideo.products as product (product.id)}
+                <ProductCard model={product} />
+              {/each}
+            </div>
+          {/if}
+
+          {#if shortVideo.ad}
+            <div class="short-video-details__section-header">{localization.offersSection}</div>
+            <div class="short-video-details__offer">
+              <AdView ad={shortVideo.ad} />
+            </div>
+          {/if}
+        </div>
+      {/if}
+    </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;
+  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: hidden;
+  --custom-scrollbar-background: transparent;
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 100%;
+  z-index: 1;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+.short-video-details__sliding-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  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-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-details--padding-horizontal) 0;
+}
+.short-video-details__section-splitter {
+  border-bottom: 1px solid #4b5563;
+}
+.short-video-details__attachments {
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+  margin-bottom: 1.25rem;
+}
+.short-video-details__products {
+  padding: 0 var(--_short-video-details--padding-horizontal);
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  grid-column-gap: 1rem;
+  grid-row-gap: 1.25rem;
+  --product-card--text--color: #d1d5db;
+}
+.short-video-details__offer {
+  padding: 0 var(--_short-video-details--padding-horizontal);
+}</style>

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

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

@@ -0,0 +1,86 @@
+<script lang="ts">import { ImageRound } from '../../ui/image';
+import { TimeAgo } from '../../ui/time-ago';
+import { ShortVideoViewerLocalization } from './short-video-viewer-localization.svelte';
+let { model, localization: localizationInit } = $props();
+const localization = $derived(new ShortVideoViewerLocalization(localizationInit));
+</script>
+
+<div class="short-video-heading">
+  <div class="short-video-heading__source-image">
+    <ImageRound src={model.image} alt={`${model.name} profilbilde`} noBorders={true} />
+  </div>
+
+  <div class="short-video-heading__info">
+    <div class="short-video-heading__source-name">{model.name}</div>
+    <p class="short-video-heading__metadata">
+      <TimeAgo date={model.displayDate} localization={localization.timeAgoLocalization} />
+      {#if Number.isInteger(model.viewsCount)}
+        <span>&middot;</span>
+        {localization.viewsCount(model.viewsCount)}
+      {/if}
+    </p>
+  </div>
+</div>
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.short-video-heading {
+  --_short-video-heading--container--font-size: var(--short-video-heading--container--font-size, 1em);
+  --_short-video-heading--text--color: var(--short-video-heading--text--color, #374151);
+  --_short-video-heading--meta--color: var(--short-video-heading--meta--color, #6b7280);
+  --_short-video-heading--padding: var(--short-video-heading--padding, 0);
+  display: flex;
+  align-items: center;
+  padding: var(--_short-video-heading--padding);
+  min-width: 0;
+  font-size: var(--_short-video-heading--container--font-size);
+}
+.short-video-heading__source-image {
+  width: 2em;
+  min-width: 2em;
+  max-width: 2em;
+  height: 2em;
+  min-height: 2em;
+  max-height: 2em;
+  margin-right: 0.625em;
+  --image--rounded--outer--border-radius: 0.5em;
+  --image--rounded--inner--border-width: 0;
+  --rounded-img-background: none;
+}
+.short-video-heading__info {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+.short-video-heading__source-name {
+  font-size: 0.75em;
+  line-height: 1.25em;
+  font-weight: 500;
+  color: var(--_short-video-heading--text--color);
+  text-overflow: ellipsis;
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+}
+:global([data-theme="dark"]) .short-video-heading__source-name {
+  --_short-video-heading--text--color: var(--short-video-heading--text--color, #ffffff);
+}
+.short-video-heading__metadata {
+  margin: 0;
+  font-size: 0.625em;
+  line-height: 1.2em;
+  font-weight: 400;
+  color: var(--_short-video-heading--meta--color);
+}
+:global([data-theme="dark"]) .short-video-heading__metadata {
+  --_short-video-heading--meta--color: var(--short-video-heading--meta--color, #d1d5db);
+}</style>

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

@@ -0,0 +1,9 @@
+import { type IShortVideoViewerLocalization } from './short-video-viewer-localization.svelte';
+import type { ShortVideoViewerHeadingModel } from './types';
+type Props = {
+    model: ShortVideoViewerHeadingModel;
+    localization: IShortVideoViewerLocalization;
+};
+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-viewer.svelte

@@ -0,0 +1,133 @@
+<script lang="ts">import { MediaType } from '../../core/media';
+import { Image } from '../../ui/image';
+import { Video } from '../../ui/video';
+import { default as Attachments } from './cmp.attachments.svelte';
+import { default as ShortVideoDescription } from './description.svelte';
+import { ShortVideoViewerLocalization } from './short-video-viewer-localization.svelte';
+import { ShortVideoViewerUiManager } from './ui-manager.svelte';
+let { model, availableSideSpace = 0, showAttachments = true, autoplay = 'on-appearance', localization: localizationInit } = $props();
+const localization = $derived(new ShortVideoViewerLocalization(localizationInit));
+let actionsPanelRef = $state.raw(null);
+const uiManager = new ShortVideoViewerUiManager();
+$effect(() => {
+    if (actionsPanelRef) {
+        const resizeObserver = new ResizeObserver(() => {
+            if (actionsPanelRef) {
+                uiManager.updateActionsPanelWidth(actionsPanelRef.clientWidth);
+            }
+        });
+        resizeObserver.observe(actionsPanelRef);
+        return () => {
+            resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
+        };
+    }
+});
+$effect(() => {
+    uiManager.updateAvailableSideSpace(availableSideSpace);
+});
+$effect(() => {
+    uiManager.updateCanShowAttachments(showAttachments);
+});
+</script>
+
+<div class="short-video-viewer" style={uiManager.globalCssVariables}>
+  <div class="short-video-viewer__media">
+    {#if model.media.type === MediaType.Video || model.media.type === MediaType.ShortVideo}
+      <Video controls={false} autoplay={autoplay} src={model.media.url} loop={true} poster={model.media.thumbnailUrl} id={model.id} />
+    {:else if model.media.type === MediaType.Image}
+      <Image src={model.media.url} />
+    {/if}
+  </div>
+
+  <div
+    class="short-video-viewer__actions-panel"
+    class:short-video-viewer__actions-panel--inside-frame={uiManager.showActionsInsideFrame}
+    bind:this={actionsPanelRef}>
+    {#if uiManager.showAttachments}
+      <Attachments model={model} />
+    {/if}
+  </div>
+  <div class="short-video-viewer__description">
+    <ShortVideoDescription model={model} localization={localization} />
+  </div>
+</div>
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.short-video-viewer {
+  --_short-video-viewer--actions-panel--top: var(--short-video-viewer--actions-panel--top, 0.9375rem);
+  --_short-video-viewer--actions-panel--bottom: var(--short-video-viewer--actions-panel--bottom, 0.9375rem);
+  --_short-video-viewer--button--background-color: #f3f4f6;
+  --_short-video-viewer--button--font-color: #2e2e2e;
+  --video--media-fit: cover;
+  width: 100%;
+  min-width: 100%;
+  max-width: 100%;
+  height: 100%;
+  min-height: 100%;
+  max-height: 100%;
+  position: relative;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 576px) {
+  .short-video-viewer {
+    --_short-video-viewer--button--background-color: #ffffff;
+  }
+}
+.short-video-viewer__media {
+  height: 100%;
+  min-height: 100%;
+  max-height: 100%;
+  border-radius: 0.375rem;
+  overflow: hidden;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 576px) {
+  .short-video-viewer__media {
+    border-radius: 0;
+    position: relative;
+  }
+}
+.short-video-viewer__actions-panel {
+  position: absolute;
+  left: calc(100% + 0.625rem);
+  top: var(--_short-video-viewer--actions-panel--top);
+  bottom: var(--_short-video-viewer--actions-panel--bottom);
+  gap: 2.5rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 576px) {
+  .short-video-viewer__actions-panel {
+    left: auto;
+    right: 0.625rem;
+    align-items: flex-end;
+  }
+}
+.short-video-viewer__actions-panel--inside-frame {
+  left: auto;
+  right: 0.625rem;
+  align-items: flex-end;
+}
+.short-video-viewer__description {
+  position: absolute;
+  bottom: 0.9375rem;
+  left: 0.625rem;
+  right: calc(1.25rem + var(--_short-video-viewer--button--size));
+  --short-video-viewer--description--font--primary-color: #ffffff;
+  --short-video-viewer--description--font--secondary-color: #ffffff;
+}
+:global([data-theme="dark"]) .short-video-viewer__description {
+  --short-video-viewer--description--font--primary-color: #ffffff;
+}</style>

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

@@ -0,0 +1,12 @@
+import { type IShortVideoViewerLocalization } from './short-video-viewer-localization.svelte';
+import type { ShortVideoViewerModel } from './types';
+type Props = {
+    model: ShortVideoViewerModel;
+    availableSideSpace?: number;
+    showAttachments?: boolean;
+    autoplay?: true | false | 'on-appearance';
+    localization?: IShortVideoViewerLocalization;
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

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

@@ -0,0 +1,46 @@
+<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">
+  <div class="short-video-description__heading">
+    <ShortVideoHeading model={model.heading} localization={localization} />
+  </div>
+  <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--secondary-color: var(--short-video-viewer--description--font--secondary-color);
+  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--meta--color: var(--_short-video-viewer--description--font--secondary-color);
+}
+.short-video-description__text {
+  color: var(--_short-video-viewer--description--font--primary-color);
+  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

@@ -0,0 +1,9 @@
+import type { ShortVideoViewerLocalization } from './short-video-viewer-localization.svelte';
+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/index.d.ts

@@ -0,0 +1,6 @@
+export { default as ShortVideosViewer } from './cmp.short-video-viewer.svelte';
+export { default as ShortVideoViewerAttachments } from './cmp.attachments.svelte';
+export { default as ShortVideoHeading } from './cmp.short-video-heading.svelte';
+export { default as ShortVideoDetails } from './cmp.short-video-details.svelte';
+export type { ShortVideoViewerModel } from './types';
+export type { IShortVideoViewerLocalization } from './short-video-viewer-localization.svelte';

package/dist/short-videos/short-video-viewer/index.js

@@ -0,0 +1,4 @@
+export { default as ShortVideosViewer } from './cmp.short-video-viewer.svelte';
+export { default as ShortVideoViewerAttachments } from './cmp.attachments.svelte';
+export { default as ShortVideoHeading } from './cmp.short-video-heading.svelte';
+export { default as ShortVideoDetails } from './cmp.short-video-details.svelte';

package/dist/short-videos/short-video-viewer/mapper.d.ts

@@ -0,0 +1,3 @@
+import type { ShortVideoViewerPayloadFragment } from './operations.generated';
+import type { ShortVideoViewerModel } from './types';
+export declare const mapShortVideoViewerModel: (payload: ShortVideoViewerPayloadFragment) => ShortVideoViewerModel;

package/dist/short-videos/short-video-viewer/mapper.js

@@ -0,0 +1,28 @@
+import { AdType } from '../../advertising';
+import { mapToAdViewModel } from '../../advertising/ad-view/mapper';
+import { mapToProductCard } from '../../products/product-card/mapper';
+export const mapShortVideoViewerModel = (payload) => {
+    const allowedAdTypes = [AdType.MediaDialogPromotion];
+    const mediaBlob = payload.postData.media[0];
+    return {
+        id: payload.id,
+        media: mediaBlob,
+        text: payload.postData.shortVideoData.text,
+        heading: {
+            image: payload.postHeading.sourceImage,
+            name: payload.postHeading.sourceName,
+            displayDate: payload.postHeading.postDisplayDate,
+            viewsCount: payload.postHeading.postViewsCount
+        },
+        ad: payload.ad && allowedAdTypes.includes(payload.ad.type) ? mapToAdViewModel(payload.ad) : null,
+        products: payload.allProducts.map(mapToProductCard)
+        // uncomment if you want to test many products behavior
+        /*.flatMap((x) => [
+          { ...x, id: x.id + '1' },
+          { ...x, id: x.id + '2' },
+          { ...x, id: x.id + '3' },
+          { ...x, id: x.id + '4' },
+          { ...x, id: x.id + '5' }
+        ])*/
+    };
+};

package/dist/short-videos/short-video-viewer/operations.generated.d.ts

@@ -0,0 +1,56 @@
+import type * as SchemaTypes from '../../../gql/types';
+import type { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+export type ShortVideoViewerPayloadFragment = {
+    id: string;
+    enableSocialInteractions: boolean;
+    postHeading: {
+        sourceImage: string | null;
+        sourceName: string;
+        postDisplayDate: any;
+        postViewsCount: number;
+    };
+    allProducts: Array<{
+        title: string;
+        id: string;
+        link: string | null;
+        media: Array<{
+            url: string;
+            thumbnailUrl: string | null;
+            type: SchemaTypes.MediaType;
+        }>;
+        priceAndAvailability: {
+            currency: SchemaTypes.Currency;
+            price: number;
+            productSalePrices: Array<{
+                salePrice: number;
+                salePriceEffectiveDateFrom: any | null;
+                salePriceEffectiveDateTo: any | null;
+            }> | null;
+        };
+    }>;
+    ad: {
+        id: string;
+        title: string;
+        description: string | null;
+        buttonText: string | null;
+        buttonUrl: string | null;
+        openLinkInNewWindow: boolean | null;
+        type: SchemaTypes.AdType;
+        media: Array<{
+            type: SchemaTypes.MediaType;
+            url: string;
+            thumbnailUrl: string | null;
+        }>;
+    } | null;
+    postData: {
+        media: Array<{
+            url: string;
+            thumbnailUrl: string | null;
+            type: SchemaTypes.MediaType;
+        }>;
+        shortVideoData: {
+            text: string | null;
+        } | null;
+    };
+};
+export declare const ShortVideoViewerPayloadFragmentDoc: DocumentNode<ShortVideoViewerPayloadFragment, unknown>;