@streamscloud/embeddable 3.2.2 → 3.2.4

package/dist/streams/layout/styles.d.ts

@@ -4,26 +4,6 @@ export type StreamLayoutStyles = {
     backgroundColor?: string | null;
     fontFamily?: StreamElementStyleFontFamily | null;
 };
-export type AnnotationStreamElementStyles = {
-    height: number;
-    aspectRatio: number;
-    offsetX: number;
-    offsetY: number;
-};
-export type ContainerStreamElementStyles = {
-    width?: StreamCssValue | null;
-    height?: StreamCssValue | null;
-    aspectRatio?: number | null;
-    direction?: StreamElementStyleDirection | null;
-    gap?: number | null;
-    paddingTop?: number | null;
-    paddingRight?: number | null;
-    paddingBottom?: number | null;
-    paddingLeft?: number | null;
-    backgroundColor?: string | null;
-    borderRadius?: number | null;
-    borderColor?: string | null;
-};
 export type ImageStreamElementStyles = {
     mediaFit?: StreamElementStyleMediaFit | null;
 };
@@ -38,10 +18,6 @@ export type PriceStreamElementStyles = {
     beforeValueColor?: string | null;
     horizontalAlign?: StreamElementStyleHorizontalAlign | null;
 };
-export type StockStreamElementStyles = {
-    height?: number | null;
-    horizontalAlign?: StreamElementStyleHorizontalAlign | null;
-};
 export type TextStreamElementStyles = {
     fontSize?: number | null;
     fontWeight?: StreamElementStyleFontWeight | null;
@@ -51,3 +27,17 @@ export type TextStreamElementStyles = {
     color?: string | null;
     maxLines?: number | null;
 };
+export type ContainerStreamElementStyles = {
+    width?: StreamCssValue | null;
+    height?: StreamCssValue | null;
+    aspectRatio?: number | null;
+    direction?: StreamElementStyleDirection | null;
+    gap?: number | null;
+    paddingTop?: number | null;
+    paddingRight?: number | null;
+    paddingBottom?: number | null;
+    paddingLeft?: number | null;
+    backgroundColor?: string | null;
+    borderRadius?: number | null;
+    borderColor?: string | null;
+};

package/dist/streams/layout/type-guards.d.ts

@@ -1,39 +1,8 @@
-import type { AnnotationStreamElementModel, ContainerStreamElementModel, ImageRefStreamElementModel, ImagesStreamElementModel, PriceStreamElementModel, ShortVideoStreamElementModel, SpacerStreamElementModel, StockStreamElementModel, TextRefStreamElementModel, TextStreamElementModel, WebViewStreamElementModel } from './elements';
-import { StreamElementType } from './enums';
 import type { ImagesStreamSlotData, ProductStreamSlotData, ShortVideoStreamSlotData, StreamSlotData } from './slot-data';
 import type { ImagesStreamSlotDataInput, ProductStreamSlotDataInput, ShortVideoStreamSlotDataInput, StreamSlotDataInput } from './slot-data-input';
-import type { AnnotationStreamElementStyles, ContainerStreamElementStyles, ImageStreamElementStyles, PriceStreamElementStyles, StockStreamElementStyles, TextStreamElementStyles } from './styles';
 export declare function isImagesSlotDataInput(data: StreamSlotDataInput | null): data is ImagesStreamSlotDataInput;
 export declare function isProductSlotDataInput(data: StreamSlotDataInput | null): data is ProductStreamSlotDataInput;
 export declare function isShortVideoSlotDataInput(data: StreamSlotDataInput | null): data is ShortVideoStreamSlotDataInput;
 export declare function isImagesSlotData(data: StreamSlotData | null): data is ImagesStreamSlotData;
 export declare function isProductSlotData(data: StreamSlotData | null): data is ProductStreamSlotData;
 export declare function isShortVideoSlotData(data: StreamSlotData | null): data is ShortVideoStreamSlotData;
-export type ElementTypeToStylesMap = {
-    [StreamElementType.Annotation]: AnnotationStreamElementStyles;
-    [StreamElementType.Container]: ContainerStreamElementStyles;
-    [StreamElementType.Price]: PriceStreamElementStyles;
-    [StreamElementType.ImageRef]: ImageStreamElementStyles;
-    [StreamElementType.Stock]: StockStreamElementStyles;
-    [StreamElementType.Text]: TextStreamElementStyles;
-    [StreamElementType.TextRef]: TextStreamElementStyles;
-};
-export type ElementTypeToModelMap = {
-    [StreamElementType.Annotation]: AnnotationStreamElementModel;
-    [StreamElementType.Container]: ContainerStreamElementModel;
-    [StreamElementType.ImageRef]: ImageRefStreamElementModel;
-    [StreamElementType.Images]: ImagesStreamElementModel;
-    [StreamElementType.Price]: PriceStreamElementModel;
-    [StreamElementType.ShortVideo]: ShortVideoStreamElementModel;
-    [StreamElementType.Spacer]: SpacerStreamElementModel;
-    [StreamElementType.Stock]: StockStreamElementModel;
-    [StreamElementType.Text]: TextStreamElementModel;
-    [StreamElementType.TextRef]: TextRefStreamElementModel;
-    [StreamElementType.WebView]: WebViewStreamElementModel;
-};
-export declare const NotAllowedElementTypesForComponent: {
-    IMAGES: StreamElementType[];
-    PRODUCT: StreamElementType[];
-    SHORT_VIDEO: StreamElementType[];
-    NO_DATA: StreamElementType[];
-};

package/dist/streams/layout/type-guards.js

@@ -1,4 +1,4 @@
-import { StreamComponentDataType, StreamElementType } from './enums';
+import { StreamComponentDataType } from './enums';
 // SlotDataInput guards
 export function isImagesSlotDataInput(data) {
     return data?.type === StreamComponentDataType.Images;
@@ -19,15 +19,3 @@ export function isProductSlotData(data) {
 export function isShortVideoSlotData(data) {
     return data?.type === StreamComponentDataType.ShortVideo;
 }
-export const NotAllowedElementTypesForComponent = {
-    [StreamComponentDataType.Images]: [StreamElementType.ImageRef, StreamElementType.Price, StreamElementType.ShortVideo, StreamElementType.TextRef],
-    [StreamComponentDataType.Product]: [StreamElementType.Images, StreamElementType.ShortVideo],
-    [StreamComponentDataType.ShortVideo]: [StreamElementType.ImageRef, StreamElementType.Price, StreamElementType.TextRef],
-    [StreamComponentDataType.NoData]: [
-        StreamElementType.ImageRef,
-        StreamElementType.Images,
-        StreamElementType.Price,
-        StreamElementType.ShortVideo,
-        StreamElementType.TextRef
-    ]
-};

package/dist/streams/stream-page-viewer/cmp.stream-page-viewer.svelte

@@ -1,14 +1,12 @@
 <script lang="ts">import { StreamLayoutSlot, StreamPageLayout, StreamLayoutSlotContent } from '../layout';
-import { StreamPageViewerLocalization } from './stream-page-viewer-localization';
-let { page, localization: localizationInit, on } = $props();
-const localization = $derived(new StreamPageViewerLocalization(localizationInit));
+let { page, on } = $props();
 </script>
 
 {#if page.type === 'general'}
   <StreamPageLayout model={page.layout}>
     {#each page.layout.slots as slot (slot)}
       <StreamLayoutSlot model={slot}>
-        <StreamLayoutSlotContent model={slot} on={on} localization={localization.elementsLocalization} />
+        <StreamLayoutSlotContent model={slot} on={on} />
       </StreamLayoutSlot>
     {/each}
   </StreamPageLayout>

package/dist/streams/stream-page-viewer/cmp.stream-page-viewer.svelte.d.ts

@@ -1,9 +1,6 @@
-import type { Locale } from '../../core/locale';
-import { type IStreamPageViewerLocalization } from './stream-page-viewer-localization';
 import type { StreamPageViewerModel } from './types';
 type Props = {
     page: StreamPageViewerModel;
-    localization: IStreamPageViewerLocalization | Locale;
     on?: {
         productClick: (productId: string) => void;
         progress?: (videoId: string, progress: number) => void;

package/dist/streams/stream-page-viewer/index.d.ts

@@ -1,3 +1,2 @@
 export { default as StreamPageViewer } from './cmp.stream-page-viewer.svelte';
 export type { StreamPageViewerModel } from './types';
-export type { IStreamPageViewerLocalization } from './stream-page-viewer-localization';

package/dist/streams/stream-page-viewer/stream-page-viewer-localization.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { IStreamElementLocalization } from '../layout/element-views';
+import type { ITimeAgoLocalization } from '../../ui/time-ago';
+export interface IStreamPageViewerLocalization {
+    viewsCount?: (count: number) => string;
+    timeAgoLocalization?: ITimeAgoLocalization;
+    elementsLocalization?: IStreamElementLocalization;
+}
+export declare class StreamPageViewerLocalization {
+    viewsCount: (count: number) => string;
+    timeAgoLocalization: ITimeAgoLocalization | undefined;
+    elementsLocalization: IStreamElementLocalization | undefined;
+    constructor(init?: IStreamPageViewerLocalization);
+}

package/dist/streams/stream-page-viewer/stream-page-viewer-localization.svelte.js

@@ -0,0 +1,10 @@
+export class StreamPageViewerLocalization {
+    viewsCount = $state((count) => (count === 1 ? '1 view' : `${count} views`));
+    timeAgoLocalization = $state(undefined);
+    elementsLocalization = $state(undefined);
+    constructor(init) {
+        this.viewsCount = init?.viewsCount ?? this.viewsCount;
+        this.timeAgoLocalization = init?.timeAgoLocalization ?? this.timeAgoLocalization;
+        this.elementsLocalization = init?.elementsLocalization ?? this.elementsLocalization;
+    }
+}

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

@@ -7,9 +7,6 @@
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { getOrCreateProfileId } from '../../core/analytics.profile-id';
-import { handleEsc } from '../../core/document.event-handlers';
-import { constructGraphQLUrl, createLocalGQLClient } from '../../core/graphql';
 import { toastrWarning } from '../../core/toastr';
 import { ShortVideoViewer } from '../../short-videos/short-video-viewer';
 import { mapToShortVideoViewerModel } from '../layout/models';
@@ -17,23 +14,21 @@ import { StreamPageViewer } from '../stream-page-viewer';
 import { Loading } from '../../ui/loading';
 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 { GetStreamDocument } from './operations.generated';
 import { default as Overview } from './stream-overview.svelte';
 import { StreamPlayerBuffer } from './stream-player-buffer.svelte';
-import { StreamPlayerLocalization } from './stream-player-localization';
+import { StreamPlayerLocalization } from './stream-player-localization.svelte';
 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();
+import { AppEventsTracker } from '@streamscloud/streams-analytics-collector';
+let { streamId, graphql, localization: localizationInit, on } = $props();
 const localization = $derived(new StreamPlayerLocalization(localizationInit));
 let model = $state(null);
 let buffer = $state.raw(null);
 let loading = $state(true);
 let activePageId = $derived.by(() => { var _a, _b; return (_b = (_a = buffer === null || buffer === void 0 ? void 0 : buffer.current) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : ''; });
-let everTouched = $state(false);
 let totalEngagementTimeSeconds = 0;
 let inactiveTimeSeconds = 10; // // Mark as inactive after 10 seconds of no activity
 let isActive = true;
@@ -56,15 +51,12 @@ onMount(() => __awaiter(void 0, void 0, void 0, function* () {
     var _a, _b, _c, _d;
     uiManager.overviewCollapsed = window && window.innerWidth < window.innerHeight;
     try {
-        const graphql = createLocalGQLClient(graphqlOrigin, { 'x-initiator': initiator !== null && initiator !== void 0 ? initiator : 'player/stream' });
         const streamPayload = yield graphql.query(GetStreamDocument, { id: streamId }).toPromise();
         if (!((_a = streamPayload.data) === null || _a === void 0 ? void 0 : _a.stream)) {
             toastrWarning(localization.streamNotFound);
             (_b = on === null || on === void 0 ? void 0 : on.closePlayer) === null || _b === void 0 ? void 0 : _b.call(on);
             return;
         }
-        AppEventsTracker.setEndpoint(constructGraphQLUrl(graphqlOrigin));
-        AppEventsTracker.setProfileId(getOrCreateProfileId());
         (_c = on === null || on === void 0 ? void 0 : on.streamActivated) === null || _c === void 0 ? void 0 : _c.call(on, {
             ownerId: streamPayload.data.stream.ownerProfile.id,
             title: streamPayload.data.stream.title,
@@ -123,19 +115,6 @@ const handleDimensionsChanged = (dimensions) => {
         viewTotalWidth: dimensions.totalWidth
     });
 };
-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 onPageActivated = (id) => {
     const page = buffer === null || buffer === void 0 ? void 0 : buffer.loaded.find((x) => x.id === id);
     if (page) {
@@ -167,23 +146,14 @@ const onProgress = (pageId, videoId, progress) => {
 };
 </script>
 
-<svelte:document onkeydown={(e) => handleEsc(e, onPlayerClose)} />
-
 <div class="stream-player-container">
   {#if loading}
     <Loading positionAbsoluteCenter={true} timeout={600} />
   {/if}
   <div class="stream-player" style={uiManager.globalCssVariables}>
-    {#if showStreamsCloudWatermark}
-      <div class="stream-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 && model}
       <SpotlightLayout ratio={9 / 16} on={{ dimensionsChanged: handleDimensionsChanged }}>
-        <div class="stream-player__content" use:contentMounted>
+        <div class="stream-player__content">
           <PlayerSlider
             buffer={buffer}
             on={{
@@ -194,10 +164,9 @@ const onProgress = (pageId, videoId, progress) => {
               {#if item.type === 'general'}
                 <StreamPageViewer
                   page={item}
-                  localization={localization.streamPageViewerLocalization}
                   on={{
-                    progress: (videoId: String, progress: Number) => onProgress(item.id, videoId, progress),
-                    productClick: (productId: String) => onProductCardClick(productId)
+                    progress: (videoId: string, progress: number) => onProgress(item.id, videoId, progress),
+                    productClick: (productId: string) => onProductCardClick(productId)
                   }} />
               {:else if item.type === 'short-video'}
                 <ShortVideoViewer
@@ -206,14 +175,10 @@ const onProgress = (pageId, videoId, progress) => {
                     progress: (progress) => onProgress(item.id, item.shortVideo.id, progress)
                   }}
                   autoplay="on-appearance"
-                  localization={localization.shortVideoViewerLocalization}
                   showAttachments={uiManager.showShortVideoOverlay} />
               {/if}
             {/snippet}
           </PlayerSlider>
-          {#if uiManager.isMobileView && buffer.loaded.length > 1 && !everTouched}
-            <SwipeIndicator localization={localization.swipeIndicatorLocalization} />
-          {/if}
         </div>
       </SpotlightLayout>
       {#if model}
@@ -231,7 +196,7 @@ const onProgress = (pageId, videoId, progress) => {
         localization={localization}
         on={{
           closePlayer: () => onPlayerClose(),
-          productClick: (productId: String) => onProductCardClick(productId)
+          productClick: (productId: string) => onProductCardClick(productId)
         }} />
     {/if}
   </div>
@@ -272,11 +237,6 @@ const onProgress = (pageId, videoId, progress) => {
     padding: 0;
   }
 }
-.stream-player__watermark {
-  position: absolute;
-  bottom: 5rem;
-  left: 20rem;
-}
 .stream-player__content {
   width: 100%;
   height: 100%;

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

@@ -1,11 +1,9 @@
-import type { Locale } from '../../core/locale';
-import { type IStreamPlayerLocalization } from './stream-player-localization';
+import { type IStreamPlayerLocalization } from './stream-player-localization.svelte';
+import type { Client } from '@urql/core';
 type Props = {
     streamId: string;
-    localization: IStreamPlayerLocalization | Locale;
-    graphqlOrigin?: string;
-    showStreamsCloudWatermark?: boolean;
-    initiator?: string;
+    localization?: IStreamPlayerLocalization;
+    graphql: Client;
     on?: {
         closePlayer?: () => void;
         streamActivated?: (data: {

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

@@ -1,11 +1,10 @@
 <script lang="ts">var _a, _b;
 import { ShortVideoDetails, ShortVideoViewerAttachmentsInline, ShortVideoViewerAttachments } from '../../short-videos/short-video-viewer';
-import { StreamElementType } from '../layout/enums';
 import { mapToShortVideoViewerModel } from '../layout/models';
 import { Icon } from '../../ui/icon';
 import { MediaVolumeManager } from '../../ui/media-playback';
 import { default as ActionButton } from './action-button.svelte';
-import { StreamPlayerLocalization } from './stream-player-localization';
+import { StreamPlayerLocalization } from './stream-player-localization.svelte';
 import IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_20_regular.svg?raw';
 import IconChevronUp from '@fluentui/svg-icons/icons/chevron_up_20_regular.svg?raw';
 import IconDismiss from '@fluentui/svg-icons/icons/dismiss_20_regular.svg?raw';
@@ -18,36 +17,6 @@ const toggleMuted = () => {
     MediaVolumeManager.isMuted = !MediaVolumeManager.isMuted;
 };
 const shortVideo = $derived(((_a = buffer.current) === null || _a === void 0 ? void 0 : _a.type) === 'short-video' && ((_b = buffer.current) === null || _b === void 0 ? void 0 : _b.shortVideo) ? mapToShortVideoViewerModel(buffer.current.shortVideo) : null);
-const singleWebViewPage = $derived.by(() => {
-    var _a;
-    if (((_a = buffer.current) === null || _a === void 0 ? void 0 : _a.type) !== 'general') {
-        return false;
-    }
-    const layout = buffer.current.layout;
-    const collectRenderableElements = (elements) => {
-        const renderableElements = [];
-        for (const element of elements) {
-            if (element.type === StreamElementType.Container) {
-                if (element.elements) {
-                    renderableElements.push(...collectRenderableElements(element.elements));
-                }
-            }
-            else {
-                renderableElements.push(element);
-            }
-        }
-        return renderableElements;
-    };
-    const allRenderableElements = [];
-    for (const slot of layout.slots) {
-        for (const component of slot.components) {
-            if (component.elements) {
-                allRenderableElements.push(...collectRenderableElements(component.elements));
-            }
-        }
-    }
-    return allRenderableElements.length === 1 && allRenderableElements[0].type === StreamElementType.WebView;
-});
 </script>
 
 <div class="stream-player-controls">
@@ -59,7 +28,7 @@ const singleWebViewPage = $derived.by(() => {
         </div>
       </div>
     {/if}
-    <div class="stream-player-controls__navigation-buttons" class:stream-player-controls__navigation-buttons--single-web-view-page={singleWebViewPage}>
+    <div class="stream-player-controls__navigation-buttons">
       <button type="button" class="navigation-button" disabled={!buffer.canLoadPrevious} onclick={buffer.loadPrevious}>
         <Icon src={IconChevronUp} />
       </button>
@@ -73,7 +42,7 @@ const singleWebViewPage = $derived.by(() => {
       <div class="stream-player-controls__short-video-attachments">
         <ShortVideoViewerAttachments
           shortVideo={shortVideo}
-          localization={localization.shortVideoAttachmentsLocalization}
+          localization={localization.shortVideoDetailsLocalization?.attachmentsLocalization}
           on={{
             productClick: on.productClick
           }} />
@@ -245,18 +214,6 @@ const singleWebViewPage = $derived.by(() => {
     visibility: hidden;
   }
 }
-.stream-player-controls__navigation-buttons--single-web-view-page {
-  /* Set 'container-type: inline-size;' to reference container*/
-}
-@container (width < 6.25rem) {
-  .stream-player-controls__navigation-buttons--single-web-view-page {
-    visibility: visible;
-    position: absolute;
-    bottom: var(--stream-player--controls--offset-vertical);
-    right: var(--stream-player--controls--offset-horizontal);
-    z-index: 1;
-  }
-}
 .stream-player-controls__controls {
   display: flex;
   margin-top: auto;

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

@@ -1,5 +1,5 @@
 import type { StreamPlayerBuffer } from './stream-player-buffer.svelte';
-import { StreamPlayerLocalization } from './stream-player-localization';
+import { StreamPlayerLocalization } from './stream-player-localization.svelte';
 import type { StreamPlayerUiManager } from './ui-manager.svelte';
 type Props = {
     buffer: StreamPlayerBuffer;

package/dist/streams/stream-player/index.d.ts

@@ -1,4 +1,4 @@
-import type { IStreamPlayerLocalization } from './stream-player-localization';
+import type { IStreamPlayerLocalization } from './stream-player-localization.svelte';
 export type { IStreamPlayerLocalization };
 /**
  * Opens the stream player modal with the specified stream details.
@@ -15,7 +15,7 @@ export type { IStreamPlayerLocalization };
  *
  * openStreamPlayer({
  *   streamId: '...',
- *   graphqlOrigin: 'https://api.example.com',
+ *   graphqlUrl: 'https://api.example.com/graphql',
  *   localization: {
  *     play: 'Play',
  *     pause: 'Pause'
@@ -25,10 +25,8 @@ export type { IStreamPlayerLocalization };
  */
 export declare const openStreamPlayer: (init: {
     streamId: string;
-    graphqlOrigin?: string;
-    localization?: IStreamPlayerLocalization | "en" | "no";
-    showStreamsCloudWatermark?: boolean;
-    initiator?: string;
+    graphqlUrl: string;
+    localization?: IStreamPlayerLocalization;
     on?: {
         streamActivated?: (data: {
             title: string;

package/dist/streams/stream-player/index.js

@@ -1,8 +1,25 @@
-import { getLocale } from '../../core/locale';
+import { createLocalGQLClient } from '../../core/graphql';
 import { ShadowHost } from '../../ui/shadow-dom';
 import { default as StreamPlayer } from './cmp.stream-player.svelte';
 import { AppEventsTracker } from '@streamscloud/streams-analytics-collector';
-import { mount, unmount } from 'svelte';
+import { mount } from 'svelte';
+/**
+ * Key used for storing the profile ID in local storage
+ */
+const PROFILE_ID_STORAGE_KEY = 'streamscloud_profile_id';
+/**
+ * Retrieves the profile ID from localStorage or generates a new one if it doesn't exist
+ * @returns The profile ID to use for analytics tracking
+ */
+function getOrCreateProfileId() {
+    const storedProfileId = localStorage.getItem(PROFILE_ID_STORAGE_KEY);
+    if (!storedProfileId) {
+        const newProfileId = crypto.randomUUID();
+        localStorage.setItem(PROFILE_ID_STORAGE_KEY, newProfileId);
+        return newProfileId;
+    }
+    return storedProfileId;
+}
 /**
  * Opens the stream player modal with the specified stream details.
  *
@@ -18,7 +35,7 @@ import { mount, unmount } from 'svelte';
  *
  * openStreamPlayer({
  *   streamId: '...',
- *   graphqlOrigin: 'https://api.example.com',
+ *   graphqlUrl: 'https://api.example.com/graphql',
  *   localization: {
  *     play: 'Play',
  *     pause: 'Pause'
@@ -27,16 +44,16 @@ import { mount, unmount } from 'svelte';
  * ```
  */
 export const openStreamPlayer = (init) => {
-    const { streamId, graphqlOrigin, localization, showStreamsCloudWatermark, initiator } = init;
-    const shadowHost = new ShadowHost();
-    const mounted = mount(StreamPlayer, {
+    const { streamId, graphqlUrl, localization } = init;
+    const shadowHost = new ShadowHost({ onClosed: () => init.on?.playerClosed?.() });
+    AppEventsTracker.setEndpoint(graphqlUrl);
+    AppEventsTracker.setProfileId(getOrCreateProfileId());
+    mount(StreamPlayer, {
         target: shadowHost.shadowRoot,
         props: {
             streamId,
-            graphqlOrigin,
-            localization: getLocale(localization),
-            showStreamsCloudWatermark,
-            initiator,
+            graphql: createLocalGQLClient(graphqlUrl),
+            localization,
             on: {
                 streamActivated: (data) => {
                     AppEventsTracker.setOrganizationId(data.ownerId);
@@ -44,11 +61,7 @@ export const openStreamPlayer = (init) => {
                         init.on.streamActivated({ title: data.title, image: data.image });
                     }
                 },
-                closePlayer: async () => {
-                    if (init.on?.playerClosed) {
-                        init.on.playerClosed();
-                    }
-                    await unmount(mounted);
+                closePlayer: () => {
                     shadowHost.remove();
                 }
             }

package/dist/streams/stream-player/operations.generated.d.ts

@@ -27,7 +27,7 @@ export type GetStreamQuery = {
     } | null;
 };
 export type GetStreamPagesQueryVariables = SchemaTypes.Exact<{
-    input: SchemaTypes.EmbedStreamPagesInput;
+    input: SchemaTypes.StreamPagesInput;
     image_scale: SchemaTypes.ImageScale;
 }>;
 export type GetStreamPagesQuery = {

package/dist/streams/stream-player/operations.generated.js

@@ -67,8 +67,7 @@ export const GetStreamDocument = {
                 selections: [
                     {
                         kind: 'Field',
-                        alias: { kind: 'Name', value: 'stream' },
-                        name: { kind: 'Name', value: 'embedStream' },
+                        name: { kind: 'Name', value: 'stream' },
                         arguments: [
                             {
                                 kind: 'Argument',
@@ -142,7 +141,7 @@ export const GetStreamPagesDocument = {
                 {
                     kind: 'VariableDefinition',
                     variable: { kind: 'Variable', name: { kind: 'Name', value: 'input' } },
-                    type: { kind: 'NonNullType', type: { kind: 'NamedType', name: { kind: 'Name', value: 'EmbedStreamPagesInput' } } }
+                    type: { kind: 'NonNullType', type: { kind: 'NamedType', name: { kind: 'Name', value: 'StreamPagesInput' } } }
                 },
                 {
                     kind: 'VariableDefinition',
@@ -155,8 +154,7 @@ export const GetStreamPagesDocument = {
                 selections: [
                     {
                         kind: 'Field',
-                        alias: { kind: 'Name', value: 'streamPages' },
-                        name: { kind: 'Name', value: 'embedStreamPages' },
+                        name: { kind: 'Name', value: 'streamPages' },
                         arguments: [{ kind: 'Argument', name: { kind: 'Name', value: 'input' }, value: { kind: 'Variable', name: { kind: 'Name', value: 'input' } } }],
                         selectionSet: {
                             kind: 'SelectionSet',

package/dist/streams/stream-player/operations.graphql

@@ -1,12 +1,12 @@
 query GetStream($id: String!) {
-  stream: embedStream(input: { id: $id }) {
+  stream(input: { id: $id }) {
     ...StreamPlayerPayloadFragment
   }
 }
 
 # noinspection GraphQLSchemaValidation
-query GetStreamPages($input: EmbedStreamPagesInput!, $image_scale: ImageScale!) {
-  streamPages: embedStreamPages(input: $input) {
+query GetStreamPages($input: StreamPagesInput!, $image_scale: ImageScale!) {
+  streamPages(input: $input) {
     items {
       ...StreamPageViewerPayloadFragment
     }

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

@@ -6,7 +6,7 @@ import { LineClamp } from '../../ui/line-clamp';
 import { ProportionalContainer } from '../../ui/proportional-container';
 import { TimeAgo } from '../../ui/time-ago';
 import { default as ActionButton } from './action-button.svelte';
-import { StreamPlayerLocalization } from './stream-player-localization';
+import { StreamPlayerLocalization } from './stream-player-localization.svelte';
 import IconPanelLeftText from '@fluentui/svg-icons/icons/panel_left_text_20_regular.svg?raw';
 let { model, buffer, activePageId, on, uiManager, localization } = $props();
 </script>
@@ -26,7 +26,7 @@ let { model, buffer, activePageId, on, uiManager, localization } = $props();
           </div>
           <div class="stream-overview-owner__meta">
             <LineClamp maxLines={1}>
-              <TimeAgo date={model.publishedAt || model.createdAt} localization={localization.timeAgoLocalization} />
+              <TimeAgo date={model.publishedAt || model.createdAt} />
             </LineClamp>
           </div>
         </div>

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

@@ -1,5 +1,5 @@
 import type { StreamPlayerBuffer } from './stream-player-buffer.svelte';
-import { StreamPlayerLocalization } from './stream-player-localization';
+import { StreamPlayerLocalization } from './stream-player-localization.svelte';
 import type { StreamPlayerModel } from './types';
 import type { StreamPlayerUiManager } from './ui-manager.svelte';
 type Props = {

package/dist/streams/stream-player/stream-player-buffer.svelte.js

@@ -23,7 +23,7 @@ export class StreamPlayerBuffer {
                 const payload = await graphql
                     .query(GetStreamPagesDocument, {
                     input: {
-                        limit: 2,
+                        limit: 10,
                         continuationToken,
                         filter: {
                             streamId
@@ -70,7 +70,7 @@ export class StreamPlayerBuffer {
         this._pagesLoader.reset();
     };
     warmUpBuffer = async () => {
-        const bufferSize = 2;
+        const bufferSize = 5;
         if (this.loaded.length >= this.currentIndex + bufferSize) {
             return;
         }

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

@@ -0,0 +1,12 @@
+import type { IShortVideoDetailsLocalization } from '../../short-videos/short-video-viewer';
+export interface IStreamPlayerLocalization {
+    streamNotFound?: string;
+    pagesCount?: (count: number) => string;
+    shortVideoDetailsLocalization?: IShortVideoDetailsLocalization;
+}
+export declare class StreamPlayerLocalization {
+    streamNotFound: string;
+    pagesCount: (count: number) => string;
+    shortVideoDetailsLocalization: IShortVideoDetailsLocalization | undefined;
+    constructor(init?: IStreamPlayerLocalization);
+}