@streamscloud/embeddable 3.2.3 → 3.2.5

package/dist/short-videos/short-video-viewer/operations.graphql

@@ -16,6 +16,7 @@ fragment ShortVideoViewerPayloadFragment on Post {
     title
     id
     link
+    shortDescription
     priceAndAvailability {
       currency
       price
@@ -30,9 +31,15 @@ fragment ShortVideoViewerPayloadFragment on Post {
     id
     title
     description
-    buttonText
-    buttonUrl
-    openLinkInNewWindow
+    price
+    currency
+    ctaButton {
+      background
+      textColor
+      text
+      url
+      border
+    }
     type
     media {
       url

package/dist/short-videos/short-video-viewer/{short-video-attachments-localization.svelte.d.ts → short-video-attachments-localization.d.ts}

@@ -1,12 +1,13 @@
-import type { IShortVideoProductLocalization } from './short-video-product-localization.svelte';
+import { type Locale } from '../../core/locale';
+import type { IShortVideoProductLocalization } from './short-video-product-localization';
 export interface IShortVideoAttachmentsLocalization {
     productsSection?: string;
     offersSection?: string;
     productLocalization?: IShortVideoProductLocalization;
 }
-export declare class ShortVideoAttachmentsLocalizationSvelte {
+export declare class ShortVideoAttachmentsLocalization {
     productsSection: string;
     offersSection: string;
-    productLocalization: IShortVideoProductLocalization | undefined;
-    constructor(init?: IShortVideoAttachmentsLocalization);
+    productLocalization: IShortVideoProductLocalization | Locale;
+    constructor(init: IShortVideoAttachmentsLocalization | Locale);
 }

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

@@ -0,0 +1,21 @@
+import { isLocale } from '../../core/locale';
+export class ShortVideoAttachmentsLocalization {
+    productsSection;
+    offersSection;
+    productLocalization;
+    constructor(init) {
+        this.productsSection = isLocale(init) ? loc.productsSection[init] : init.productsSection || loc.productsSection.en;
+        this.offersSection = isLocale(init) ? loc.offersSection[init] : init.offersSection || loc.offersSection.en;
+        this.productLocalization = isLocale(init) ? init : init.productLocalization || 'en';
+    }
+}
+const loc = {
+    productsSection: {
+        en: 'Products',
+        no: 'Produkter'
+    },
+    offersSection: {
+        en: 'Offers',
+        no: 'Tilbud'
+    }
+};

package/dist/short-videos/short-video-viewer/{short-video-details-localization.svelte.d.ts → short-video-details-localization.d.ts}

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

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

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

package/dist/short-videos/short-video-viewer/{short-video-product-localization.svelte.d.ts → short-video-product-localization.d.ts}

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

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

@@ -0,0 +1,13 @@
+import { isLocale } from '../../core/locale';
+export class ShortVideoProductLocalization {
+    beforeNowPrefix;
+    constructor(init) {
+        this.beforeNowPrefix = isLocale(init) ? loc.beforeNowPrefix[init] : init?.beforeNowPrefix || loc.beforeNowPrefix.en;
+    }
+}
+const loc = {
+    beforeNowPrefix: {
+        en: 'Before',
+        no: 'Før'
+    }
+};

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

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

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

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

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

@@ -25,9 +25,15 @@ export type ShortVideoViewerAdModel = {
     image: string | null;
     title: string;
     description: string | null;
-    buttonText: string | null;
-    buttonUrl: string | null;
-    openLinkInNewWindow: boolean | null;
+    price: number | null;
+    currency: Currency | null;
+    ctaButton: {
+        background: string;
+        textColor: string;
+        text: string;
+        url: string;
+        border: string;
+    } | null;
 };
 export type ShortVideoViewerProductModel = {
     id: string;
@@ -37,4 +43,5 @@ export type ShortVideoViewerProductModel = {
     price: number;
     currency: Currency;
     salePrice: number | null;
+    shortDescription?: string | null;
 };

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

@@ -7,44 +7,121 @@
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { ShortVideoViewer } from '../short-video-viewer';
+import { handleEsc } from '../../core/document.event-handlers';
+import { createLocalGQLClient } from '../../core/graphql';
+import { mapShortVideoViewerModel, 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 { ShortVideosPlayerLocalization } from './short-videos-player-localization.svelte';
+import { GetShortVideosDocument } from './operations.generated';
+import { ShortVideosPlayerLocalization } from './short-videos-player-localization';
 import { ShortVideosPlayerUiManager } from './ui-manager.svelte';
-import { onDestroy, onMount } from 'svelte';
-let { shortVideosProvider, localization: localizationInit, on } = $props();
+import { onMount, untrack } from 'svelte';
+let { input, localization: localizationInit, on } = $props();
 const localization = $derived(new ShortVideosPlayerLocalization(localizationInit));
-const buffer = $derived(new PlayerBuffer(shortVideosProvider));
+let everTouched = $state(false);
+let buffer = $state(input.type === 'provider' ? new PlayerBuffer(input.provider) : null);
+$effect(() => {
+    if (input.type !== 'ids') {
+        return;
+    }
+    untrack(() => {
+        initBuffer(input);
+    });
+});
+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(mapShortVideoViewerModel),
+                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(() => __awaiter(void 0, void 0, void 0, function* () {
     uiManager.detailsCollapsed = window && window.innerWidth < window.innerHeight;
 }));
-onDestroy(() => {
-    // end tracking the short video
-});
+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">
   <div class="short-videos-player" style={uiManager.globalCssVariables}>
     {#if buffer}
       <SpotlightLayout ratio={9 / 16} on={{ dimensionsChanged: handleDimensionsChanged }}>
-        <div class="short-videos-player__content">
+        <div class="short-videos-player__content" use:contentMounted>
           <PlayerSlider buffer={buffer}>
             {#snippet children({ item })}
-              <ShortVideoViewer model={item} autoplay="on-appearance" showAttachments={uiManager.showShortVideoOverlay} />
+              <ShortVideoViewer
+                model={item}
+                autoplay="on-appearance"
+                showAttachments={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} on={{ closePlayer: () => on?.closePlayer?.() }} />
+      <Controls buffer={buffer} uiManager={uiManager} localization={localization} on={{ closePlayer: () => onPlayerClose() }} />
+    {:else}
+      <Loading positionFixedCenter={true} timeout={1000} />
     {/if}
   </div>
 </div>

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

@@ -1,9 +1,9 @@
-import { type ShortVideoViewerModel } from '../short-video-viewer';
-import { type PlayerItemsProvider } from '../../ui/player';
-import { type IShortVideosPlayerLocalization } from './short-videos-player-localization.svelte';
+import type { Locale } from '../../core/locale';
+import { type IShortVideosPlayerLocalization } from './short-videos-player-localization';
+import type { PlayerInput } from './types';
 type Props = {
-    shortVideosProvider: PlayerItemsProvider<ShortVideoViewerModel>;
-    localization?: IShortVideosPlayerLocalization;
+    input: PlayerInput;
+    localization: IShortVideosPlayerLocalization | Locale;
     on?: {
         closePlayer?: () => void;
     };

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

@@ -2,7 +2,7 @@
 import { Icon } from '../../ui/icon';
 import { MediaVolumeManager } from '../../ui/media-playback';
 import { default as ActionButton } from './action-button.svelte';
-import { ShortVideosPlayerLocalization } from './short-videos-player-localization.svelte.js';
+import { ShortVideosPlayerLocalization } from './short-videos-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';
@@ -37,7 +37,7 @@ const shortVideo = $derived(buffer.current);
   <div class="short-videos-player-controls__right">
     {#if shortVideo}
       <div class="short-videos-player-controls__short-video-attachments">
-        <ShortVideoViewerAttachments shortVideo={shortVideo} localization={localization.shortVideoDetailsLocalization?.attachmentsLocalization} />
+        <ShortVideoViewerAttachments shortVideo={shortVideo} localization={localization.shortVideoAttachmentsLocalization} />
       </div>
     {/if}
     <div class="short-videos-player-controls__controls">

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

@@ -1,6 +1,6 @@
 import { type ShortVideoViewerModel } from '../short-video-viewer';
 import type { IPlayerBuffer } from '../../ui/player';
-import { ShortVideosPlayerLocalization } from './short-videos-player-localization.svelte.js';
+import { ShortVideosPlayerLocalization } from './short-videos-player-localization';
 import type { ShortVideosPlayerUiManager } from './ui-manager.svelte';
 type Props = {
     buffer: IPlayerBuffer<ShortVideoViewerModel>;

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

@@ -1,15 +1,38 @@
-import type { ShortVideoViewerModel } from '../short-video-viewer';
-import type { PlayerItemsProvider } from '../../ui/player';
-import type { IShortVideosPlayerLocalization } from './short-videos-player-localization.svelte';
+import type { IShortVideosPlayerLocalization } from './short-videos-player-localization';
+import { type OpenShortVideosPlayerInit } from './types';
 export type { IShortVideosPlayerLocalization };
 /**
- * Opens the short videos player modal with the specified provider and optional localization.
+ * Opens the short videos player modal with the specified provider or by fetching videos by IDs.
+ *
+ * You can use either a ready-made provider, or simply pass a list of video IDs and a GraphQL endpoint to fetch them.
  *
  * @param init - Configuration options.
- * @param {PlayerItemsProvider<ShortVideoViewerModel>} init.shortVideosProvider - The provider instance supplying short video items to the player.
- * @param {IShortVideosPlayerLocalization} [init.localization] - Optional localization settings for the player UI.
  *
- * @example
+ * @param {PlayerItemsProvider<ShortVideoViewerModel>} [init.shortVideosProvider]
+ *   The provider instance supplying short video items to the player.
+ *   **Use this if you already have your own provider implementation.**
+ *
+ * @param {string[]} [init.ids]
+ *   List of short video IDs to display in the player.
+ *   **Use this if you want the player to fetch and show specific videos.**
+ *
+ * @param {string} [init.graphqlUrl]
+ *   The GraphQL endpoint to use when fetching videos by IDs.
+ *   **Required if you use `ids`.**
+ *
+ * @param {string} [init.initialId]
+ *   The ID of the video that should be shown first.
+ *   **Optional. Only used when using `ids`.**
+ *
+ * @param {IShortVideosPlayerLocalization} [init.localization]
+ *   Optional localization settings for the player UI.
+ *
+ * @param {object} [init.on]
+ *   Optional event handlers.
+ * @param {() => void} [init.on.playerClosed]
+ *   Called when the player is closed.
+ *
+ * @example <caption>Using a custom provider</caption>
  * ```ts
  * import { openShortVideosPlayer } from '@streamscloud/embeddable/short-videos-player';
  *
@@ -21,11 +44,25 @@ export type { IShortVideosPlayerLocalization };
  *   }
  * });
  * ```
+ *
+ * @example <caption>Using a list of IDs</caption>
+ * ```ts
+ * import { openShortVideosPlayer } from '@streamscloud/embeddable/short-videos-player';
+ *
+ * openShortVideosPlayer({
+ *   ids: ['id1', 'id2', 'id3'],
+ *   graphqlOrigin: 'https://api.example.com',
+ *   initialId: 'id2',
+ *   localization: {
+ *     next: 'Next',
+ *     previous: 'Previous'
+ *   },
+ *   on: {
+ *     playerClosed: () => {
+ *       console.log('Player was closed');
+ *     }
+ *   }
+ * });
+ * ```
  */
-export declare const openShortVideosPlayer: (init: {
-    shortVideosProvider: PlayerItemsProvider<ShortVideoViewerModel>;
-    localization?: IShortVideosPlayerLocalization;
-    on?: {
-        playerClosed?: () => void;
-    };
-}) => void;
+export declare const openShortVideosPlayer: (init: OpenShortVideosPlayerInit) => Promise<void>;

package/dist/short-videos/short-videos-player/index.js

@@ -1,14 +1,40 @@
+import { getLocale } from '../../core/locale';
 import { ShadowHost } from '../../ui/shadow-dom';
 import { default as ShortVideosPlayer } from './cmp.short-videos-player.svelte';
-import { mount } from 'svelte';
+import { isIdsInit, isShortVideosProviderInit } from './types';
+import { mount, unmount } from 'svelte';
 /**
- * Opens the short videos player modal with the specified provider and optional localization.
+ * Opens the short videos player modal with the specified provider or by fetching videos by IDs.
+ *
+ * You can use either a ready-made provider, or simply pass a list of video IDs and a GraphQL endpoint to fetch them.
  *
  * @param init - Configuration options.
- * @param {PlayerItemsProvider<ShortVideoViewerModel>} init.shortVideosProvider - The provider instance supplying short video items to the player.
- * @param {IShortVideosPlayerLocalization} [init.localization] - Optional localization settings for the player UI.
  *
- * @example
+ * @param {PlayerItemsProvider<ShortVideoViewerModel>} [init.shortVideosProvider]
+ *   The provider instance supplying short video items to the player.
+ *   **Use this if you already have your own provider implementation.**
+ *
+ * @param {string[]} [init.ids]
+ *   List of short video IDs to display in the player.
+ *   **Use this if you want the player to fetch and show specific videos.**
+ *
+ * @param {string} [init.graphqlUrl]
+ *   The GraphQL endpoint to use when fetching videos by IDs.
+ *   **Required if you use `ids`.**
+ *
+ * @param {string} [init.initialId]
+ *   The ID of the video that should be shown first.
+ *   **Optional. Only used when using `ids`.**
+ *
+ * @param {IShortVideosPlayerLocalization} [init.localization]
+ *   Optional localization settings for the player UI.
+ *
+ * @param {object} [init.on]
+ *   Optional event handlers.
+ * @param {() => void} [init.on.playerClosed]
+ *   Called when the player is closed.
+ *
+ * @example <caption>Using a custom provider</caption>
  * ```ts
  * import { openShortVideosPlayer } from '@streamscloud/embeddable/short-videos-player';
  *
@@ -20,17 +46,62 @@ import { mount } from 'svelte';
  *   }
  * });
  * ```
+ *
+ * @example <caption>Using a list of IDs</caption>
+ * ```ts
+ * import { openShortVideosPlayer } from '@streamscloud/embeddable/short-videos-player';
+ *
+ * openShortVideosPlayer({
+ *   ids: ['id1', 'id2', 'id3'],
+ *   graphqlOrigin: 'https://api.example.com',
+ *   initialId: 'id2',
+ *   localization: {
+ *     next: 'Next',
+ *     previous: 'Previous'
+ *   },
+ *   on: {
+ *     playerClosed: () => {
+ *       console.log('Player was closed');
+ *     }
+ *   }
+ * });
+ * ```
  */
-export const openShortVideosPlayer = (init) => {
-    const { shortVideosProvider, localization } = init;
-    const shadowHost = new ShadowHost({ onClosed: () => init.on?.playerClosed?.() });
-    mount(ShortVideosPlayer, {
+export const openShortVideosPlayer = async (init) => {
+    let input = null;
+    if (isShortVideosProviderInit(init)) {
+        input = {
+            type: 'provider',
+            provider: init.shortVideosProvider
+        };
+    }
+    else if (isIdsInit(init)) {
+        input = {
+            type: 'ids',
+            ids: init.ids,
+            initialId: init.initialId,
+            graphqlOrigin: init.graphqlOrigin,
+            initiator: init.initiator
+        };
+    }
+    else {
+        input = null;
+    }
+    if (!input) {
+        return;
+    }
+    const shadowHost = new ShadowHost();
+    const mounted = mount(ShortVideosPlayer, {
         target: shadowHost.shadowRoot,
         props: {
-            shortVideosProvider,
-            localization,
+            input,
+            localization: getLocale(init.localization),
             on: {
-                closePlayer: () => {
+                closePlayer: async () => {
+                    if (init.on?.playerClosed) {
+                        init.on.playerClosed();
+                    }
+                    await unmount(mounted);
                     shadowHost.remove();
                 }
             }

package/dist/short-videos/short-videos-player/operations.generated.d.ts

@@ -0,0 +1,71 @@
+import type * as SchemaTypes from '../../../gql/types';
+import type { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+export type GetShortVideosQueryVariables = SchemaTypes.Exact<{
+    input: SchemaTypes.EmbedPostsInput;
+    image_scale?: SchemaTypes.InputMaybe<SchemaTypes.ImageScale>;
+}>;
+export type GetShortVideosQuery = {
+    shortVideos: {
+        items: Array<{
+            id: string;
+            enableSocialInteractions: boolean;
+            postHeading: {
+                sourceImage: string | null;
+                sourceName: string;
+                postDisplayDate: any;
+                postViewsCount: number;
+            };
+            allProducts: Array<{
+                title: string;
+                id: string;
+                link: string | null;
+                shortDescription: 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;
+                price: number | null;
+                currency: SchemaTypes.Currency | null;
+                type: SchemaTypes.AdType;
+                ctaButton: {
+                    background: string;
+                    textColor: string;
+                    text: string;
+                    url: string;
+                    border: string;
+                } | null;
+                media: Array<{
+                    url: string;
+                    thumbnailUrl: string | null;
+                    type: SchemaTypes.MediaType;
+                }>;
+            } | null;
+            postData: {
+                media: Array<{
+                    url: string;
+                    thumbnailUrl: string | null;
+                    type: SchemaTypes.MediaType;
+                }>;
+                shortVideoData: {
+                    text: string | null;
+                } | null;
+            };
+        }>;
+    };
+};
+export declare const GetShortVideosDocument: DocumentNode<GetShortVideosQuery, GetShortVideosQueryVariables>;