@streamscloud/embeddable 3.4.2 → 5.0.0

package/dist/short-videos/short-videos-player/short-videos-player-view.svelte

@@ -0,0 +1,211 @@
+<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 { handleEsc } from '../../core/document.event-handlers';
+import { createLocalGQLClient } from '../../core/graphql';
+import { mapToShortVideoViewerModel, ShortVideoViewer } from '../short-video-viewer';
+import { Loading } from '../../ui/loading';
+import { PlayerBuffer, PlayerSlider } from '../../ui/player';
+import { SpotlightLayout } from '../../ui/spotlight-layout';
+import { SwipeIndicator } from '../../ui/swipe-indicator';
+import { default as Controls } from './controls.svelte';
+import { GetShortVideosDocument } from './operations.generated';
+import { ShortVideosPlayerLocalization } from './short-videos-player-localization';
+import { ShortVideosPlayerUiManager } from './ui-manager.svelte';
+import { onMount } from 'svelte';
+let { input, socialInteractionsHandler, localization: localizationInit = 'en', showStreamsCloudWatermark, disableBackground, on } = $props();
+const localization = $derived(new ShortVideosPlayerLocalization(localizationInit));
+let everTouched = $state(false);
+let background = $state(null);
+let buffer = $state(input.type === 'provider' ? new PlayerBuffer(input.provider) : null);
+const initBuffer = (input) => __awaiter(void 0, void 0, void 0, function* () {
+    var _a, _b;
+    try {
+        const { graphqlOrigin, ids, initialId } = input;
+        const graphql = createLocalGQLClient(graphqlOrigin, { 'x-initiator': input.initiator || 'player/short-videos' });
+        const payload = yield graphql
+            .query(GetShortVideosDocument, {
+            input: {
+                filter: {
+                    ids
+                }
+            }
+        })
+            .toPromise();
+        const posts = ((_b = (_a = payload.data) === null || _a === void 0 ? void 0 : _a.shortVideos) === null || _b === void 0 ? void 0 : _b.items) || [];
+        const idOrder = new Map(ids.map((id, index) => [id, index]));
+        posts.sort((a, b) => {
+            var _a, _b;
+            return ((_a = idOrder.get(a.id)) !== null && _a !== void 0 ? _a : Infinity) - ((_b = idOrder.get(b.id)) !== null && _b !== void 0 ? _b : Infinity);
+        });
+        const index = initialId ? posts.findIndex((p) => p.id === initialId) : 0;
+        const provider = {
+            initialData: {
+                prefetchedItems: posts.map(mapToShortVideoViewerModel),
+                startIndex: index
+            },
+            loadMore: () => __awaiter(void 0, void 0, void 0, function* () {
+                // No more items to load, as all are already prefetched
+                return [];
+            })
+        };
+        buffer = new PlayerBuffer(provider);
+    }
+    catch (_c) {
+        console.error('Failed to load short videos by IDs:', input.ids);
+        buffer = null; // Reset buffer on error
+    }
+});
+const uiManager = new ShortVideosPlayerUiManager();
+onMount(() => {
+    if (input.type === 'ids') {
+        initBuffer(input);
+    }
+});
+const onItemActivated = (id) => {
+    var _a;
+    const shortVideo = buffer === null || buffer === void 0 ? void 0 : buffer.loaded.find((x) => x.id === id);
+    if (!shortVideo) {
+        return;
+    }
+    background = shortVideo.media.isImage ? shortVideo.media.url : shortVideo.media.thumbnailUrl;
+    (_a = on === null || on === void 0 ? void 0 : on.videoActivated) === null || _a === void 0 ? void 0 : _a.call(on, id);
+};
+const contentMounted = (node) => {
+    const markAsTouched = () => {
+        everTouched = true;
+        node.removeEventListener('touchstart', markAsTouched);
+        node.removeEventListener('wheel', markAsTouched);
+        node.removeEventListener('click', markAsTouched);
+        node.removeEventListener('keypress', markAsTouched);
+    };
+    node.addEventListener('touchstart', markAsTouched);
+    node.addEventListener('wheel', markAsTouched);
+    node.addEventListener('click', markAsTouched);
+    node.addEventListener('keypress', markAsTouched);
+};
+const handleDimensionsChanged = (dimensions) => {
+    uiManager.updateDimensions({
+        mainViewColumnWidth: dimensions.mainSceneWidth,
+        viewTotalWidth: dimensions.totalWidth
+    });
+};
+const onPlayerClose = () => {
+    var _a;
+    (_a = on === null || on === void 0 ? void 0 : on.closePlayer) === null || _a === void 0 ? void 0 : _a.call(on);
+};
+</script>
+
+<svelte:document onkeydown={(e) => handleEsc(e, onPlayerClose)} />
+
+<div
+  class="short-videos-player-container"
+  class:short-videos-player-container--background-enabled={!disableBackground}
+  style={background && !disableBackground ? `--background-image: url(${background})` : null}>
+  <div class="short-videos-player" style={uiManager.globalCssVariables}>
+    {#if showStreamsCloudWatermark}
+      <div class="short-videos-player__watermark">
+        <a href="https://streamscloud.com/" tabindex="-1" aria-label="none">
+          <img src="https://embedabble-assets.streamscloud-cdn.com/watermark.svg" alt="StreamsCloud" />
+        </a>
+      </div>
+    {/if}
+    {#if buffer}
+      <SpotlightLayout ratio={9 / 16} on={{ dimensionsChanged: handleDimensionsChanged }}>
+        <div class="short-videos-player__content" use:contentMounted>
+          <PlayerSlider
+            buffer={buffer}
+            on={{
+              itemActivated: onItemActivated
+            }}>
+            {#snippet children({ item })}
+              <ShortVideoViewer
+                model={item}
+                socialInteractionsHandler={socialInteractionsHandler}
+                autoplay="on-appearance"
+                showAttachments={uiManager.showShortVideoOverlay}
+                showControls={uiManager.showShortVideoOverlay}
+                localization={localization.shortVideoViewerLocalization} />
+            {/snippet}
+          </PlayerSlider>
+          {#if uiManager.isMobileView && buffer.loaded.length > 1 && !everTouched}
+            <SwipeIndicator localization={localization.swipeIndicatorLocalization} />
+          {/if}
+        </div>
+      </SpotlightLayout>
+      <Controls
+        buffer={buffer}
+        uiManager={uiManager}
+        localization={localization}
+        socialInteractionsHandler={socialInteractionsHandler}
+        on={{ closePlayer: on?.closePlayer }} />
+    {:else}
+      <Loading positionFixedCenter={true} timeout={1000} />
+    {/if}
+  </div>
+</div>
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.short-videos-player-container {
+  width: 100%;
+  min-width: 100%;
+  max-width: 100%;
+  height: 100%;
+  min-height: 100%;
+  max-height: 100%;
+  container-type: inline-size;
+  display: flex;
+  position: relative;
+}
+.short-videos-player-container--background-enabled {
+  background-color: #c1c1c1;
+  background-image: var(--background-image);
+  background-size: cover;
+  background-blend-mode: multiply;
+}
+
+.short-videos-player {
+  display: flex;
+  flex: 1;
+  padding: 0.625rem 0;
+  backdrop-filter: blur(30px);
+  position: relative;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 576px) {
+  .short-videos-player {
+    padding: 0;
+  }
+}
+.short-videos-player__watermark {
+  position: absolute;
+  bottom: 5rem;
+  left: 5rem;
+}
+.short-videos-player__content {
+  width: 100%;
+  height: 100%;
+  --short-video-viewer--actions-panel--bottom: 5rem;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 576px) {
+  .short-videos-player__content {
+    --short-video-viewer--actions-panel--top: 5rem;
+  }
+}</style>

package/dist/short-videos/short-videos-player/short-videos-player-view.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { Locale } from '../../core/locale';
+import { type ShortVideoSocialInteractionsHanlder } from '../short-video-viewer';
+import { type IShortVideosPlayerLocalization } from './short-videos-player-localization';
+import type { PlayerInput } from './types';
+type Props = {
+    input: PlayerInput;
+    socialInteractionsHandler?: ShortVideoSocialInteractionsHanlder;
+    localization?: IShortVideosPlayerLocalization | Locale;
+    showStreamsCloudWatermark?: boolean;
+    disableBackground?: boolean;
+    on?: {
+        closePlayer?: () => void;
+        videoActivated?: (id: string) => void;
+    };
+};
+declare const ShortVideosPlayerView: import("svelte").Component<Props, {}, "">;
+type ShortVideosPlayerView = ReturnType<typeof ShortVideosPlayerView>;
+export default ShortVideosPlayerView;

package/dist/short-videos/short-videos-player/types.d.ts

@@ -1,4 +1,4 @@
-import type { ShortVideoViewerModel } from '../..';
+import type { ShortVideoViewerModel, ShortVideoSocialInteractionsHanlder } from '../short-video-viewer';
 import type { PlayerItemsProvider } from '../../ui/player';
 import type { IShortVideosPlayerLocalization } from './short-videos-player-localization';
 export type PlayerInput = ProviderPlayerInput | IdsPlayerInput;
@@ -14,21 +14,23 @@ export type IdsPlayerInput = {
     initiator?: string;
 };
 export type OpenShortVideosPlayerInit = ProviderInit | IdsInit;
-type ProviderInit = {
+type ProviderInit = PlayerSettings & {
     shortVideosProvider: PlayerItemsProvider<ShortVideoViewerModel>;
-    localization?: IShortVideosPlayerLocalization | 'en' | 'no';
-    on?: {
-        playerClosed?: () => void;
-    };
 };
-type IdsInit = {
+type IdsInit = PlayerSettings & {
     ids: string[];
     graphqlOrigin?: string;
     initialId?: string;
-    localization?: IShortVideosPlayerLocalization | 'en' | 'no';
     initiator?: string;
+};
+type PlayerSettings = {
+    socialInteractionsHandler?: ShortVideoSocialInteractionsHanlder;
+    disableBackground?: boolean;
+    localization?: IShortVideosPlayerLocalization | 'en' | 'no';
+    showStreamsCloudWatermark?: boolean;
     on?: {
         playerClosed?: () => void;
+        videoActivated?: (id: string) => void;
     };
 };
 export declare const isShortVideosProviderInit: (init: unknown) => init is ProviderInit;

package/dist/short-videos/short-videos-player/ui-manager.svelte.d.ts

@@ -1,10 +1,11 @@
 export declare class ShortVideosPlayerUiManager {
-    detailsCollapsed: boolean;
+    showAttachments: boolean;
     globalCssVariables: string;
     isMobileView: boolean;
+    viewInitialized: boolean;
     showShortVideoOverlay: boolean;
-    private readonly actionButtonSize;
-    private readonly navigationButtonSize;
+    private readonly buttonSize;
+    private readonly iconSize;
     private readonly controlsOffsetHorizontal;
     private readonly controlsOffsetVertical;
     private viewTotalWidth;

package/dist/short-videos/short-videos-player/ui-manager.svelte.js

@@ -1,9 +1,9 @@
 export class ShortVideosPlayerUiManager {
-    detailsCollapsed = $state(true);
+    showAttachments = $state(true);
     globalCssVariables = $derived.by(() => {
         const values = [
-            `--short-videos-player--action-button--size: ${this.actionButtonSize}px`,
-            `--short-videos-player--navigation-button--size: ${this.navigationButtonSize}px`,
+            `--short-videos-player--button--size: ${this.buttonSize}px`,
+            `--short-videos-player--icon--size: ${this.iconSize}px`,
             `--short-videos-player--controls--offset-horizontal: ${this.controlsOffsetHorizontal}px`,
             `--short-videos-player--controls--offset-vertical: ${this.controlsOffsetVertical}px`,
             `--short-videos-player--sidebar--available-space: ${(this.viewTotalWidth - this.mainViewColumnWidth) / 2}px`
@@ -11,11 +11,12 @@ export class ShortVideosPlayerUiManager {
         return values.join(';');
     });
     isMobileView = $derived.by(() => this.viewTotalWidth <= 576);
-    showShortVideoOverlay = $derived.by(() => (this.viewTotalWidth - this.mainViewColumnWidth) / 2 <= 70);
-    actionButtonSize = 30;
-    navigationButtonSize = 40;
-    controlsOffsetHorizontal = 15;
-    controlsOffsetVertical = 10;
+    viewInitialized = $derived.by(() => !!this.viewTotalWidth && !!this.mainViewColumnWidth);
+    showShortVideoOverlay = $derived.by(() => this.viewInitialized && (this.viewTotalWidth - this.mainViewColumnWidth) / 2 <= 85);
+    buttonSize = 48;
+    iconSize = 28;
+    controlsOffsetHorizontal = 28;
+    controlsOffsetVertical = 28;
     viewTotalWidth = $state(0);
     mainViewColumnWidth = $state(0);
     updateDimensions = (dimensions) => {

package/dist/streams/layout/element-views/price-element-view.svelte

@@ -22,20 +22,21 @@ const lineHeight = 1.2;
 const elementHeight = $derived(adjustedHeight);
 const priceHeight = $derived(model.stock ? elementHeight * 0.68 : elementHeight);
 const adjustableHeight = $derived(!!(on === null || on === void 0 ? void 0 : on.heightAdjusted));
+const includeCurrency = $derived(model.includeCurrency || false);
 const currentPrice = $derived.by(() => {
     if (data.salePrice) {
-        return toPriceRepresentation(data.salePrice, data.currency, model.includeCurrency || false);
+        return toPriceRepresentation({ amount: data.salePrice, currency: data.currency, includeCurrency });
     }
-    return toPriceRepresentation(data.price, data.currency, model.includeCurrency || false);
+    return toPriceRepresentation({ amount: data.price, currency: data.currency, includeCurrency });
 });
 const saveValue = $derived.by(() => {
     if (data.salePrice) {
-        return toPriceRepresentation(data.price - data.salePrice, data.currency, model.includeCurrency || false);
+        return toPriceRepresentation({ amount: data.price - data.salePrice, currency: data.currency, includeCurrency });
     }
     return 0;
 });
 const beforeValue = $derived.by(() => {
-    return toPriceRepresentation(data.price, data.currency, model.includeCurrency || false);
+    return toPriceRepresentation({ amount: data.price, currency: data.currency, includeCurrency });
 });
 const elementContainerStyles = $derived.by(() => {
     var _a, _b;

package/dist/streams/layout/models/mapper.js

@@ -16,26 +16,16 @@ export const mapToShortVideoViewerModel = (model) => {
             displayDate: model.header.postDisplayDate,
             viewsCount: model.header.postViewsCount
         },
+        enableSocialInteractions: model.enableSocialInteractions,
         ad: model.ad ? mapToAdViewModel(model.ad) : null,
         products: model.products.map(mapToProductCardModel)
         // 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' },
-          { ...x, id: x.id + '6' },
-          { ...x, id: x.id + '7' },
-          { ...x, id: x.id + '8' },
-          { ...x, id: x.id + '9' },
-          { ...x, id: x.id + '10' },
-          { ...x, id: x.id + '11' },
-          { ...x, id: x.id + '12' },
-          { ...x, id: x.id + '13' },
-          { ...x, id: x.id + '14' },
-          { ...x, id: x.id + '15' }
-        ])*/
+        // .flatMap(x =>
+        //   Array.from({ length: 20 }, (_, i) => ({
+        //     ...x,
+        //     id: x.id + String(i + 1)
+        //   }))
+        // )
     };
 };
 const mapToAdViewModel = (model) => {
@@ -47,7 +37,8 @@ const mapToAdViewModel = (model) => {
         description: model.description,
         price: model.price,
         currency: model.currency,
-        ctaButton: model.ctaButton
+        ctaButton: model.ctaButton,
+        priceInfoLabel: model.priceInfo
     };
 };
 const mapToProductCardModel = (model) => {
@@ -56,6 +47,7 @@ const mapToProductCardModel = (model) => {
         title: model.title,
         image: model.image,
         link: model.link,
+        brandName: null,
         currency: model.currency,
         price: model.price,
         salePrice: model.salePrice,

package/dist/streams/layout/models/stream-layout-short-video-model.d.ts

@@ -18,6 +18,7 @@ export type StreamLayoutShortVideoAdModel = {
     title: string;
     description: string | null;
     price: number | null;
+    priceInfo: string | null;
     currency: Currency | null;
     ctaButton: {
         background: string;

package/dist/streams/stream-player/cmp.stream-player.svelte

@@ -19,7 +19,7 @@ import { PlayerSlider } from '../../ui/player';
 import { SpotlightLayout } from '../../ui/spotlight-layout';
 import { SwipeIndicator } from '../../ui/swipe-indicator';
 import { default as Controls } from './controls.svelte';
-import { mapStreamPlayerModel } from './mapper';
+import { mapToStreamPlayerModel } from './mapper';
 import { GetStreamDocument } from './operations.generated';
 import { default as Overview } from './stream-overview.svelte';
 import { StreamPlayerBuffer } from './stream-player-buffer.svelte';
@@ -27,7 +27,7 @@ import { StreamPlayerLocalization } from './stream-player-localization';
 import { StreamPlayerUiManager } from './ui-manager.svelte';
 import { AppEventsTracker } from '@streamscloud/streams-analytics-collector';
 import { onMount } from 'svelte';
-let { streamId, graphqlOrigin, localization: localizationInit, showStreamsCloudWatermark, initiator, on } = $props();
+let { streamId, graphqlOrigin, localization: localizationInit = 'en', showStreamsCloudWatermark, shortVideoSocialInteractionsHandler, initiator, on } = $props();
 const localization = $derived(new StreamPlayerLocalization(localizationInit));
 let model = $state(null);
 let buffer = $state.raw(null);
@@ -72,7 +72,7 @@ onMount(() => __awaiter(void 0, void 0, void 0, function* () {
             image: ((_d = streamPayload.data.stream.cover) === null || _d === void 0 ? void 0 : _d.url) || null
         });
         // start tracking the stream
-        model = mapStreamPlayerModel(streamPayload.data.stream);
+        model = mapToStreamPlayerModel(streamPayload.data.stream);
         buffer = new StreamPlayerBuffer({ graphql, streamId });
         AppEventsTracker.trackStreamView(streamPayload.data.stream.id);
         startActivityTracking();
@@ -124,6 +124,9 @@ const handleDimensionsChanged = (dimensions) => {
         viewTotalWidth: dimensions.totalWidth
     });
 };
+const handleOverviewWidthChanged = (width) => {
+    uiManager.updateOverviewWidth(width);
+};
 const contentMounted = (node) => {
     const markAsTouched = () => {
         everTouched = true;
@@ -171,7 +174,7 @@ const onProgress = (pageId, videoId, progress) => {
 
 <svelte:document onkeydown={(e) => handleEsc(e, onPlayerClose)} />
 
-<div class="stream-player-container" style="--background-image: url({background})">
+<div class="stream-player-container" style={background ? `--background-image: url(${background})` : null}>
   {#if loading}
     <Loading positionAbsoluteCenter={true} timeout={600} />
   {/if}
@@ -208,8 +211,10 @@ const onProgress = (pageId, videoId, progress) => {
                     progress: (progress) => onProgress(item.id, item.shortVideo.id, progress)
                   }}
                   autoplay="on-appearance"
+                  socialInteractionsHandler={shortVideoSocialInteractionsHandler}
                   localization={localization.shortVideoViewerLocalization}
-                  showAttachments={uiManager.showShortVideoOverlay} />
+                  showAttachments={uiManager.showShortVideoOverlay}
+                  showControls={uiManager.showShortVideoOverlay} />
               {/if}
             {/snippet}
           </PlayerSlider>
@@ -225,12 +230,16 @@ const onProgress = (pageId, videoId, progress) => {
           activePageId={activePageId}
           uiManager={uiManager}
           localization={localization}
-          on={{ setCurrentItem: handleChangePage }} />
+          on={{
+            setCurrentItem: handleChangePage,
+            widthChanged: handleOverviewWidthChanged
+          }} />
       {/if}
       <Controls
         buffer={buffer}
         uiManager={uiManager}
         localization={localization}
+        shortVideoSocialInteractionsHandler={shortVideoSocialInteractionsHandler}
         on={{
           closePlayer: () => onPlayerClose(),
           productClick: (productId: String) => onProductCardClick(productId)
@@ -260,7 +269,7 @@ const onProgress = (pageId, videoId, progress) => {
   container-type: inline-size;
   display: flex;
   position: relative;
-  background-color: rgba(0, 0, 0, 0.75);
+  background-color: #c1c1c1;
   background-image: var(--background-image);
   background-size: cover;
   background-blend-mode: multiply;
@@ -282,10 +291,16 @@ const onProgress = (pageId, videoId, progress) => {
 .stream-player__watermark {
   position: absolute;
   bottom: 5rem;
-  left: 20rem;
+  left: calc(var(--stream-player--overview--width) + 5rem);
 }
 .stream-player__content {
   width: 100%;
   height: 100%;
   --short-video-viewer--actions-panel--bottom: 5rem;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 576px) {
+  .stream-player__content {
+    --short-video-viewer--actions-panel--top: 5rem;
+  }
 }</style>

package/dist/streams/stream-player/cmp.stream-player.svelte.d.ts

@@ -1,10 +1,12 @@
 import type { Locale } from '../../core/locale';
+import { type ShortVideoSocialInteractionsHanlder } from '../../short-videos/short-video-viewer';
 import { type IStreamPlayerLocalization } from './stream-player-localization';
 type Props = {
     streamId: string;
-    localization: IStreamPlayerLocalization | Locale;
+    localization?: IStreamPlayerLocalization | Locale;
     graphqlOrigin?: string;
     showStreamsCloudWatermark?: boolean;
+    shortVideoSocialInteractionsHandler?: ShortVideoSocialInteractionsHanlder;
     initiator?: string;
     on?: {
         closePlayer?: () => void;