@streamscloud/embeddable 3.2.4 → 3.2.6

package/dist/streams/layout/styles-transformer.js

@@ -1,53 +1,77 @@
 import { Utils } from '../../core/utils';
-import { StreamCssValueType, StreamElementStyleDirection, StreamElementStyleFontFamily, StreamElementStyleFontWeight, StreamElementStyleMediaFit, StreamElementStyleHorizontalAlign } from './enums';
+import { StreamCssValueType, StreamElementStyleDirection, StreamElementStyleFontFamily, StreamElementStyleFontWeight, StreamElementStyleMediaFit, StreamElementStyleHorizontalAlign, AnnotationStreamElementPlacement } from './enums';
 export const generateStreamLayoutStyles = (styles) => {
     if (!styles) {
         return '';
     }
-    const values = [`background-color: ${transformColorValue(styles.backgroundColor)};`, `font-family: ${mapFontFamily(styles.fontFamily)};`];
-    return values.join('');
+    const values = [`background-color: ${transformColorValue(styles.backgroundColor)}`, `font-family: ${mapFontFamily(styles.fontFamily)}`];
+    return values.join(';');
 };
 export const generateContainerStyles = (styles) => {
     styles = styles || {};
     const values = [
-        'display: flex;',
-        'flex-direction: column;',
-        `width: ${transformCssValue(styles.width, 'auto')};`,
-        `height: ${transformCssValue(styles.height, 'fit-content')};`,
-        `aspect-ratio: ${styles.aspectRatio || 'auto'};`,
-        `gap: ${transformNumericValue(styles.gap)};`,
-        `padding-top: ${transformNumericValue(styles.paddingTop)};`,
-        `padding-right: ${transformNumericValue(styles.paddingRight)};`,
-        `padding-bottom: ${transformNumericValue(styles.paddingBottom)};`,
-        `padding-left: ${transformNumericValue(styles.paddingLeft)};`,
-        `background-color: ${transformColorValue(styles.backgroundColor)};`,
-        `border-width: ${styles.borderColor ? '1px' : '0'};`,
-        `border-radius: ${transformNumericValue(styles.borderRadius)};`,
-        `border-color: ${transformColorValue(styles.borderColor)};`,
-        `overflow: ${styles.borderRadius ? 'hidden' : 'visible'};`
+        'display: flex',
+        'flex-direction: column',
+        `width: ${transformCssValue(styles.width, 'auto')}`,
+        `height: ${transformCssValue(styles.height, 'fit-content')}`,
+        `aspect-ratio: ${styles.aspectRatio || 'auto'}`,
+        `gap: ${transformNumericValue(styles.gap)}`,
+        `padding-top: ${transformNumericValue(styles.paddingTop)}`,
+        `padding-right: ${transformNumericValue(styles.paddingRight)}`,
+        `padding-bottom: ${transformNumericValue(styles.paddingBottom)}`,
+        `padding-left: ${transformNumericValue(styles.paddingLeft)}`,
+        `background-color: ${transformColorValue(styles.backgroundColor)}`,
+        `border-width: ${styles.borderColor ? '1px' : '0'}`,
+        `border-radius: ${transformNumericValue(styles.borderRadius)}`,
+        `border-color: ${transformColorValue(styles.borderColor)}`,
+        `overflow: ${styles.borderRadius ? 'hidden' : 'visible'}`
     ];
     if (styles.direction) {
-        values.push(`display: flex;`);
-        values.push(`flex-direction: ${styles.direction === StreamElementStyleDirection.Horizontal ? 'row' : 'column'};`);
+        values.push(`display: flex`);
+        values.push(`flex-direction: ${styles.direction === StreamElementStyleDirection.Horizontal ? 'row' : 'column'}`);
     }
-    return values.join('');
+    return values.join(';');
+};
+export const generateAnnotationStyles = (styles, placement) => {
+    const values = [`height: ${transformNumericValue(styles.height)}`, `aspect-ratio: ${styles.aspectRatio}`, 'position: absolute'];
+    switch (placement) {
+        case AnnotationStreamElementPlacement.TopLeft:
+            values.push(`top: ${transformNumericValue(styles.offsetY)}`);
+            values.push(`left: ${transformNumericValue(styles.offsetX)}`);
+            break;
+        case AnnotationStreamElementPlacement.TopRight:
+            values.push(`top: ${transformNumericValue(styles.offsetY)}`);
+            values.push(`right: ${transformNumericValue(styles.offsetX)}`);
+            break;
+        case AnnotationStreamElementPlacement.BottomLeft:
+            values.push(`bottom: ${transformNumericValue(styles.offsetY)}`);
+            values.push(`left: ${transformNumericValue(styles.offsetX)}`);
+            break;
+        case AnnotationStreamElementPlacement.BottomRight:
+            values.push(`bottom: ${transformNumericValue(styles.offsetY)}`);
+            values.push(`right: ${transformNumericValue(styles.offsetX)}`);
+            break;
+        default:
+            Utils.assertUnreachable(placement);
+    }
+    return values.join(';');
 };
 export const generateTextStyles = (styles) => {
     styles = styles || {};
     const values = [
-        `font-family: ${mapFontFamily(styles.fontFamily)};`,
-        `font-size: ${transformFontSizeValue(styles.fontSize)};`,
-        `font-weight: ${mapFontWeight(styles.fontWeight)};`,
-        `line-height: ${transformNumericValue(styles.lineHeight, '1.2')};`,
-        `text-align: ${mapTextAlign(styles.textAlign)};`,
-        `color: ${transformColorValue(styles.color)};`
+        `font-family: ${mapFontFamily(styles.fontFamily)}`,
+        `font-size: ${transformFontSizeValue(styles.fontSize)}`,
+        `font-weight: ${mapFontWeight(styles.fontWeight)}`,
+        `line-height: ${transformNumericValue(styles.lineHeight, '1.2')}`,
+        `text-align: ${mapTextAlign(styles.textAlign)}`,
+        `color: ${transformColorValue(styles.color)}`
     ];
-    return values.join('');
+    return values.join(';');
 };
 export const generateImageStyles = (styles) => {
     styles = styles || {};
-    const imageStyles = [`object-fit: ${mapMediaFit(styles.mediaFit)};`];
-    return imageStyles.join('');
+    const imageStyles = [`object-fit: ${mapMediaFit(styles.mediaFit)}`];
+    return imageStyles.join(';');
 };
 export const mapFontFamily = (value) => {
     switch (value) {

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

@@ -4,6 +4,26 @@ 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;
 };
@@ -18,6 +38,10 @@ 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;
@@ -27,17 +51,3 @@ 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/svg-attributes.d.ts

@@ -0,0 +1,7 @@
+export declare enum SvgAttributes {
+    customizableElement = "data-streams--customizable",
+    textElementValueType = "data-streams--text--value-type",
+    textElementCustomValue = "data-streams--text--custom-value",
+    textElementValueBefore = "data-streams--text--value-before",
+    textElementValueAfter = "data-streams--text--value-after"
+}

package/dist/streams/layout/svg-attributes.js

@@ -0,0 +1,8 @@
+export var SvgAttributes;
+(function (SvgAttributes) {
+    SvgAttributes["customizableElement"] = "data-streams--customizable";
+    SvgAttributes["textElementValueType"] = "data-streams--text--value-type";
+    SvgAttributes["textElementCustomValue"] = "data-streams--text--custom-value";
+    SvgAttributes["textElementValueBefore"] = "data-streams--text--value-before";
+    SvgAttributes["textElementValueAfter"] = "data-streams--text--value-after";
+})(SvgAttributes || (SvgAttributes = {}));

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

@@ -1,8 +1,39 @@
+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 } from './enums';
+import { StreamComponentDataType, StreamElementType } from './enums';
 // SlotDataInput guards
 export function isImagesSlotDataInput(data) {
     return data?.type === StreamComponentDataType.Images;
@@ -19,3 +19,15 @@ 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,12 +1,14 @@
 <script lang="ts">import { StreamLayoutSlot, StreamPageLayout, StreamLayoutSlotContent } from '../layout';
-let { page, on } = $props();
+import { StreamPageViewerLocalization } from './stream-page-viewer-localization';
+let { page, localization: localizationInit, on } = $props();
+const localization = $derived(new StreamPageViewerLocalization(localizationInit));
 </script>
 
 {#if page.type === 'general'}
   <StreamPageLayout model={page.layout}>
     {#each page.layout.slots as slot (slot)}
       <StreamLayoutSlot model={slot}>
-        <StreamLayoutSlotContent model={slot} on={on} />
+        <StreamLayoutSlotContent model={slot} on={on} localization={localization.elementsLocalization} />
       </StreamLayoutSlot>
     {/each}
   </StreamPageLayout>

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

@@ -1,6 +1,9 @@
+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,2 +1,3 @@
 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.d.ts

@@ -0,0 +1,9 @@
+import { type Locale } from '../../core/locale';
+import type { IStreamElementLocalization } from '../layout/element-views';
+export interface IStreamPageViewerLocalization {
+    elementsLocalization?: IStreamElementLocalization | Locale;
+}
+export declare class StreamPageViewerLocalization {
+    elementsLocalization: IStreamElementLocalization | Locale;
+    constructor(init: IStreamPageViewerLocalization | Locale);
+}

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

@@ -0,0 +1,7 @@
+import { isLocale } from '../../core/locale';
+export class StreamPageViewerLocalization {
+    elementsLocalization;
+    constructor(init) {
+        this.elementsLocalization = isLocale(init) ? init : init?.elementsLocalization || 'en';
+    }
+}

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

@@ -7,6 +7,9 @@
         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';
@@ -14,21 +17,23 @@ 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.svelte';
+import { StreamPlayerLocalization } from './stream-player-localization';
 import { StreamPlayerUiManager } from './ui-manager.svelte';
-import { onMount } from 'svelte';
 import { AppEventsTracker } from '@streamscloud/streams-analytics-collector';
-let { streamId, graphql, localization: localizationInit, on } = $props();
+import { onMount } from 'svelte';
+let { streamId, graphqlOrigin, localization: localizationInit, showStreamsCloudWatermark, initiator, 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;
@@ -51,12 +56,15 @@ 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,
@@ -115,6 +123,19 @@ 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) {
@@ -146,14 +167,23 @@ 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">
+        <div class="stream-player__content" use:contentMounted>
           <PlayerSlider
             buffer={buffer}
             on={{
@@ -164,9 +194,10 @@ 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
@@ -175,10 +206,14 @@ 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}
@@ -196,7 +231,7 @@ const onProgress = (pageId, videoId, progress) => {
         localization={localization}
         on={{
           closePlayer: () => onPlayerClose(),
-          productClick: (productId: string) => onProductCardClick(productId)
+          productClick: (productId: String) => onProductCardClick(productId)
         }} />
     {/if}
   </div>
@@ -237,6 +272,11 @@ 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,9 +1,11 @@
-import { type IStreamPlayerLocalization } from './stream-player-localization.svelte';
-import type { Client } from '@urql/core';
+import type { Locale } from '../../core/locale';
+import { type IStreamPlayerLocalization } from './stream-player-localization';
 type Props = {
     streamId: string;
-    localization?: IStreamPlayerLocalization;
-    graphql: Client;
+    localization: IStreamPlayerLocalization | Locale;
+    graphqlOrigin?: string;
+    showStreamsCloudWatermark?: boolean;
+    initiator?: string;
     on?: {
         closePlayer?: () => void;
         streamActivated?: (data: {

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

@@ -1,10 +1,11 @@
 <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.svelte';
+import { StreamPlayerLocalization } from './stream-player-localization';
 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';
@@ -17,6 +18,36 @@ 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">
@@ -28,7 +59,7 @@ const shortVideo = $derived(((_a = buffer.current) === null || _a === void 0 ? v
         </div>
       </div>
     {/if}
-    <div class="stream-player-controls__navigation-buttons">
+    <div class="stream-player-controls__navigation-buttons" class:stream-player-controls__navigation-buttons--single-web-view-page={singleWebViewPage}>
       <button type="button" class="navigation-button" disabled={!buffer.canLoadPrevious} onclick={buffer.loadPrevious}>
         <Icon src={IconChevronUp} />
       </button>
@@ -42,7 +73,7 @@ const shortVideo = $derived(((_a = buffer.current) === null || _a === void 0 ? v
       <div class="stream-player-controls__short-video-attachments">
         <ShortVideoViewerAttachments
           shortVideo={shortVideo}
-          localization={localization.shortVideoDetailsLocalization?.attachmentsLocalization}
+          localization={localization.shortVideoAttachmentsLocalization}
           on={{
             productClick: on.productClick
           }} />
@@ -214,6 +245,18 @@ const shortVideo = $derived(((_a = buffer.current) === null || _a === void 0 ? v
     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.svelte';
+import { StreamPlayerLocalization } from './stream-player-localization';
 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.svelte';
+import type { IStreamPlayerLocalization } from './stream-player-localization';
 export type { IStreamPlayerLocalization };
 /**
  * Opens the stream player modal with the specified stream details.
@@ -15,7 +15,7 @@ export type { IStreamPlayerLocalization };
  *
  * openStreamPlayer({
  *   streamId: '...',
- *   graphqlUrl: 'https://api.example.com/graphql',
+ *   graphqlOrigin: 'https://api.example.com',
  *   localization: {
  *     play: 'Play',
  *     pause: 'Pause'
@@ -25,8 +25,10 @@ export type { IStreamPlayerLocalization };
  */
 export declare const openStreamPlayer: (init: {
     streamId: string;
-    graphqlUrl: string;
-    localization?: IStreamPlayerLocalization;
+    graphqlOrigin?: string;
+    localization?: IStreamPlayerLocalization | "en" | "no";
+    showStreamsCloudWatermark?: boolean;
+    initiator?: string;
     on?: {
         streamActivated?: (data: {
             title: string;