@streamscloud/embeddable 3.2.1 → 3.2.3

package/dist/core/enums.d.ts

@@ -1,4 +1,6 @@
 export declare enum PostSourceType {
+    Channel = "CHANNEL",
+    Group = "GROUP",
     MediaPage = "MEDIA_PAGE",
     Organization = "ORGANIZATION",
     UserProfile = "USER_PROFILE"

package/dist/core/enums.js

@@ -1,5 +1,7 @@
 export var PostSourceType;
 (function (PostSourceType) {
+    PostSourceType["Channel"] = "CHANNEL";
+    PostSourceType["Group"] = "GROUP";
     PostSourceType["MediaPage"] = "MEDIA_PAGE";
     PostSourceType["Organization"] = "ORGANIZATION";
     PostSourceType["UserProfile"] = "USER_PROFILE";

package/dist/core/graphql.d.ts

@@ -1,3 +1 @@
-export declare const createLocalGQLClient: (graphqlOrigin?: string, headers?: HeadersInit, customFetch?: typeof fetch) => import("@urql/core").Client;
-export declare const resolveGraphQLOrigin: (origin?: string) => string;
-export declare const constructGraphQLUrl: (graphqlOrigin?: string) => string;
+export declare const createLocalGQLClient: (graphqlUrl: string, customFetch?: typeof fetch) => import("@urql/core").Client;

package/dist/core/graphql.js

@@ -1,19 +1,10 @@
 import { createClient, fetchExchange } from '@urql/core';
-export const createLocalGQLClient = (graphqlOrigin, headers, customFetch) => createClient({
-    url: constructGraphQLUrl(resolveGraphQLOrigin(graphqlOrigin)),
+export const createLocalGQLClient = (graphqlUrl, customFetch) => createClient({
+    url: graphqlUrl,
     requestPolicy: 'network-only',
     fetchOptions: {
-        credentials: 'include',
-        headers: headers
+        credentials: 'include'
     },
     fetch: customFetch || fetch,
     exchanges: [fetchExchange]
 });
-export const resolveGraphQLOrigin = (origin) => {
-    return origin || 'https://api.streamscloud.com';
-};
-export const constructGraphQLUrl = (graphqlOrigin) => {
-    let baseUrl = resolveGraphQLOrigin(graphqlOrigin);
-    baseUrl = baseUrl.endsWith('/') ? baseUrl : `${baseUrl}/`;
-    return `${baseUrl}external/graphql`;
-};

package/dist/core/utils/html-helper.d.ts

@@ -36,6 +36,5 @@ export declare class HtmlHelper {
      * DomHelper.insert(siblingElement, newContentField, false);
      */
     static insert(newElement: Element, siblingElement: Element, insertBefore?: boolean): void;
-    static sanitizeSvg(svg: string): string;
     static pasteIntoInput(value: string, element: HTMLInputElement | HTMLTextAreaElement): void;
 }

package/dist/core/utils/html-helper.js

@@ -1,4 +1,3 @@
-import dp from 'dompurify';
 export class HtmlHelper {
     static clearSelection() {
         if (window.getSelection) {
@@ -71,9 +70,6 @@ export class HtmlHelper {
             HtmlHelper.insertAfter(newElement, siblingElement);
         }
     }
-    static sanitizeSvg(svg) {
-        return dp.sanitize(svg, { USE_PROFILES: { svg: true, svgFilters: true }, ADD_ATTR: ['dominant-baseline'] });
-    }
     static pasteIntoInput(value, element) {
         if (element.selectionStart || element.selectionStart === 0) {
             const startPos = element.selectionStart;

package/dist/products/price-helper.js

@@ -20,7 +20,7 @@ export const toPriceRepresentation = (amount, currency, includeCurrency = true)
         }
         case Currency.Usd: {
             const value = formatNumber(amount);
-            return includeCurrency ? `$ ${value}` : value;
+            return includeCurrency ? `€ ${value}` : value;
         }
         default: {
             Utils.assertUnreachable(currency);

package/dist/short-videos/short-video-viewer/cmp.attachments-inline.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">import { Icon, IconColor } from '../../ui/icon';
 import { ImageRounded } from '../../ui/image';
-import IconTargetArrow from '@fluentui/svg-icons/icons/target_arrow_20_regular.svg?raw';
+import IconTargetArrow from '@fluentui/svg-icons/icons/target_arrow_20_regular.svg';
 let { model } = $props();
 const attachmentsToShow = $derived.by(() => {
     const products = model.products.filter((p) => !!p.image).map((p) => ({ isAd: false, image: p.image, link: p.link }));

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

@@ -1,9 +1,9 @@
 <script lang="ts">import { default as ShortVideoAdViewer } from './cmp.ad.svelte';
 import { default as ShortVideoProductViewer } from './cmp.product.svelte';
-import { ShortVideoAttachmentsLocalization } from './short-video-attachments-localization';
+import { ShortVideoAttachmentsLocalizationSvelte } from './short-video-attachments-localization.svelte';
 import {} from './types';
 let { shortVideo, localization: localizationInit, on } = $props();
-const localization = $derived(new ShortVideoAttachmentsLocalization(localizationInit));
+const localization = $derived(new ShortVideoAttachmentsLocalizationSvelte(localizationInit));
 </script>
 
 {#if shortVideo.products.length || shortVideo.ad}

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

@@ -1,9 +1,8 @@
-import type { Locale } from '../../core/locale';
-import { type IShortVideoAttachmentsLocalization } from './short-video-attachments-localization';
+import { type IShortVideoAttachmentsLocalization } from './short-video-attachments-localization.svelte';
 import { type ShortVideoViewerModel } from './types';
 type Props = {
     shortVideo: ShortVideoViewerModel;
-    localization: IShortVideoAttachmentsLocalization | Locale;
+    localization?: IShortVideoAttachmentsLocalization;
     on?: {
         productClick?: (productId: string) => void;
     };

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

@@ -1,7 +1,7 @@
 <script lang="ts">import { toPriceRepresentation } from '../../products/price-helper';
 import { ImageRounded } from '../../ui/image';
 import { ProportionalContainer } from '../../ui/proportional-container';
-import { ShortVideoProductLocalization } from './short-video-product-localization';
+import { ShortVideoProductLocalization } from './short-video-product-localization.svelte';
 let { product, fitToContainer = false, localization: localizationInit, on } = $props();
 const localization = $derived(new ShortVideoProductLocalization(localizationInit));
 const handleProductClick = (event) => {

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

@@ -1,10 +1,9 @@
-import type { Locale } from '../../core/locale';
-import { type IShortVideoProductLocalization } from './short-video-product-localization';
+import { type IShortVideoProductLocalization } from './short-video-product-localization.svelte';
 import type { ShortVideoViewerProductModel } from './types';
 type Props = {
     product: ShortVideoViewerProductModel;
     fitToContainer?: boolean;
-    localization: IShortVideoProductLocalization | Locale;
+    localization?: IShortVideoProductLocalization;
     on?: {
         productClick?: (productId: string) => void;
     };

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

@@ -1,7 +1,7 @@
 <script lang="ts">import { slideHorizontally } from '../../core/transitions';
 import { default as ShortVideoAttachments } from './cmp.attachments.svelte';
 import { default as ShortVideoHeading } from './cmp.short-video-heading.svelte';
-import { ShortVideoDetailsLocalization } from './short-video-details-localization';
+import { ShortVideoDetailsLocalization } from './short-video-details-localization.svelte';
 import {} from './types';
 let { shortVideo, collapsed, localization: localizationInit, on } = $props();
 const localization = $derived(new ShortVideoDetailsLocalization(localizationInit));

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

@@ -1,10 +1,9 @@
-import type { Locale } from '../../core/locale';
-import { type IShortVideoDetailsLocalization } from './short-video-details-localization';
+import { type IShortVideoDetailsLocalization } from './short-video-details-localization.svelte';
 import { type ShortVideoViewerModel } from './types';
 type Props = {
     shortVideo: ShortVideoViewerModel;
     collapsed: boolean;
-    localization: IShortVideoDetailsLocalization | Locale;
+    localization?: IShortVideoDetailsLocalization;
     on?: {
         productClick?: (productId: string) => void;
     };

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

@@ -1,6 +1,6 @@
 <script lang="ts">import { ImageRound } from '../../ui/image';
 import { TimeAgo } from '../../ui/time-ago';
-import { ShortVideoViewerLocalization } from './short-video-viewer-localization';
+import { ShortVideoViewerLocalization } from './short-video-viewer-localization.svelte';
 let { model, localization: localizationInit } = $props();
 const localization = $derived(new ShortVideoViewerLocalization(localizationInit));
 </script>
@@ -14,7 +14,7 @@ const localization = $derived(new ShortVideoViewerLocalization(localizationInit)
     <div class="short-video-heading__source-name">{model.name}</div>
     <p class="short-video-heading__metadata">
       <TimeAgo date={model.displayDate} localization={localization.timeAgoLocalization} />
-      {#if Number.isInteger(model.viewsCount) && model.viewsCount}
+      {#if Number.isInteger(model.viewsCount)}
         <span>&middot;</span>
         {localization.viewsCount(model.viewsCount)}
       {/if}
@@ -36,9 +36,7 @@ const localization = $derived(new ShortVideoViewerLocalization(localizationInit)
 .short-video-heading {
   --_short-video-heading--container--font-size: var(--short-video-heading--container--font-size, 1em);
   --_short-video-heading--text--color: var(--short-video-heading--text--color, #374151);
-  --_short-video-heading--text--shadow: var(--short-video-heading--text--shadow, 1px 1px hsl(0, 0%, 10%));
   --_short-video-heading--meta--color: var(--short-video-heading--meta--color, #6b7280);
-  --_short-video-heading--meta--shadow: var(--short-video-heading--meta--shadow, 1px 1px hsl(0, 0%, 10%));
   --_short-video-heading--padding: var(--short-video-heading--padding, 0);
   display: flex;
   align-items: center;
@@ -68,7 +66,6 @@ const localization = $derived(new ShortVideoViewerLocalization(localizationInit)
   line-height: 1.25em;
   font-weight: 500;
   color: var(--_short-video-heading--text--color);
-  text-shadow: var(--_short-video-heading--text--shadow);
   text-overflow: ellipsis;
   width: 100%;
   white-space: nowrap;
@@ -83,7 +80,6 @@ const localization = $derived(new ShortVideoViewerLocalization(localizationInit)
   line-height: 1.2em;
   font-weight: 400;
   color: var(--_short-video-heading--meta--color);
-  text-shadow: var(--_short-video-heading--meta--shadow);
 }
 :global([data-theme="dark"]) .short-video-heading__metadata {
   --_short-video-heading--meta--color: var(--short-video-heading--meta--color, #d1d5db);

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

@@ -1,4 +1,4 @@
-import { type IShortVideoViewerLocalization } from './short-video-viewer-localization';
+import { type IShortVideoViewerLocalization } from './short-video-viewer-localization.svelte';
 import type { ShortVideoViewerHeadingModel } from './types';
 type Props = {
     model: ShortVideoViewerHeadingModel;

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

@@ -2,7 +2,7 @@
 import { Video } from '../../ui/video';
 import { default as AttachmentsInline } from './cmp.attachments-inline.svelte';
 import { default as ShortVideoDescription } from './description.svelte';
-import { ShortVideoViewerLocalization } from './short-video-viewer-localization';
+import { ShortVideoViewerLocalization } from './short-video-viewer-localization.svelte';
 import { ShortVideoViewerUiManager } from './ui-manager.svelte';
 let { model, availableSideSpace = 0, showAttachments = true, autoplay = 'on-appearance', localization: localizationInit, on } = $props();
 const localization = $derived(new ShortVideoViewerLocalization(localizationInit));

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

@@ -1,12 +1,11 @@
-import type { Locale } from '../../core/locale';
-import { type IShortVideoViewerLocalization } from './short-video-viewer-localization';
+import { type IShortVideoViewerLocalization } from './short-video-viewer-localization.svelte';
 import type { ShortVideoViewerModel } from './types';
 type Props = {
     model: ShortVideoViewerModel;
     availableSideSpace?: number;
     showAttachments?: boolean;
     autoplay?: true | false | 'on-appearance';
-    localization: IShortVideoViewerLocalization | Locale;
+    localization?: IShortVideoViewerLocalization;
     on?: {
         progress?: (progress: number) => void;
     };

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

@@ -27,9 +27,7 @@ let { model, localization } = $props();
 }
 .short-video-description {
   --_short-video-viewer--description--font--primary-color: var(--short-video-viewer--description--font--primary-color);
-  --_short-video-viewer--description--font--primary-shadow: var(--short-video-viewer--description--font--primary-shadow, 1px 1px hsl(0, 0%, 10%));
   --_short-video-viewer--description--font--secondary-color: var(--short-video-viewer--description--font--secondary-color);
-  --_short-video-viewer--description--font--secondary-shadow: var(--short-video-viewer--description--font--secondary-shadow, 1px 1px hsl(0, 0%, 10%));
   display: flex;
   flex-direction: column;
   padding-top: 0.75rem;
@@ -37,13 +35,10 @@ let { model, localization } = $props();
 .short-video-description__heading {
   --short-video-heading--padding: 0 0 0.875rem 0;
   --short-video-heading--text--color: var(--_short-video-viewer--description--font--primary-color);
-  --short-video-heading--text--shadow: var(--_short-video-viewer--description--font--primary-shadow);
   --short-video-heading--meta--color: var(--_short-video-viewer--description--font--secondary-color);
-  --short-video-heading--meta--shadow: var(--_short-video-viewer--description--font--secondary-shadow);
 }
 .short-video-description__text {
   color: var(--_short-video-viewer--description--font--primary-color);
-  text-shadow: var(--_short-video-viewer--description--font--primary-shadow);
   font-size: 0.9375rem;
   line-height: 1.25rem;
   font-weight: 400;

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

@@ -1,4 +1,4 @@
-import type { ShortVideoViewerLocalization } from './short-video-viewer-localization';
+import type { ShortVideoViewerLocalization } from './short-video-viewer-localization.svelte';
 import type { ShortVideoViewerModel } from './types';
 type Props = {
     model: ShortVideoViewerModel;

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

@@ -5,7 +5,5 @@ export { default as ShortVideoViewerAttachments } from './cmp.attachments.svelte
 export { default as ShortVideoViewerAttachmentsInline } from './cmp.attachments-inline.svelte';
 export { default as ShortVideoDetails } from './cmp.short-video-details.svelte';
 export type { ShortVideoViewerModel, ShortVideoViewerAdModel, ShortVideoViewerProductModel } from './types';
-export type { IShortVideoViewerLocalization } from './short-video-viewer-localization';
-export type { IShortVideoDetailsLocalization } from './short-video-details-localization';
-export type { IShortVideoAttachmentsLocalization } from './short-video-attachments-localization';
-export { mapShortVideoViewerModel } from './mapper';
+export type { IShortVideoViewerLocalization } from './short-video-viewer-localization.svelte';
+export type { IShortVideoDetailsLocalization } from './short-video-details-localization.svelte';

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

@@ -4,4 +4,3 @@ export { default as ShortVideoProductViewer } from './cmp.product.svelte';
 export { default as ShortVideoViewerAttachments } from './cmp.attachments.svelte';
 export { default as ShortVideoViewerAttachmentsInline } from './cmp.attachments-inline.svelte';
 export { default as ShortVideoDetails } from './cmp.short-video-details.svelte';
-export { mapShortVideoViewerModel } from './mapper';

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

@@ -51,10 +51,6 @@ const mapToShortVideoViewerProductModel = (payload) => {
         link: payload.link,
         currency: payload.priceAndAvailability.currency,
         price: payload.priceAndAvailability.price,
-        salePrice: effectiveSalePrice?.salePrice ?? null,
-        brand: {
-            name: payload.brand?.name ?? null
-        },
-        shortDescription: payload.shortDescription ?? null
+        salePrice: effectiveSalePrice?.salePrice ?? null
     };
 };

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

@@ -13,15 +13,11 @@ export type ShortVideoViewerPayloadFragment = {
         title: string;
         id: string;
         link: string | null;
-        shortDescription: string | null;
         media: Array<{
             url: string;
             thumbnailUrl: string | null;
             type: SchemaTypes.MediaType;
         }>;
-        brand: {
-            name: string;
-        } | null;
         priceAndAvailability: {
             currency: SchemaTypes.Currency;
             price: number;

package/dist/short-videos/short-video-viewer/operations.generated.js

@@ -44,12 +44,6 @@ export const ShortVideoViewerPayloadFragmentDoc = {
                                 { kind: 'Field', name: { kind: 'Name', value: 'title' } },
                                 { kind: 'Field', name: { kind: 'Name', value: 'id' } },
                                 { kind: 'Field', name: { kind: 'Name', value: 'link' } },
-                                { kind: 'Field', name: { kind: 'Name', value: 'shortDescription' } },
-                                {
-                                    kind: 'Field',
-                                    name: { kind: 'Name', value: 'brand' },
-                                    selectionSet: { kind: 'SelectionSet', selections: [{ kind: 'Field', name: { kind: 'Name', value: 'name' } }] }
-                                },
                                 {
                                     kind: 'Field',
                                     name: { kind: 'Name', value: 'priceAndAvailability' },

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

@@ -16,10 +16,6 @@ fragment ShortVideoViewerPayloadFragment on Post {
     title
     id
     link
-    shortDescription
-    brand {
-      name
-    }
     priceAndAvailability {
       currency
       price

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

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

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

@@ -0,0 +1,10 @@
+export class ShortVideoAttachmentsLocalizationSvelte {
+    productsSection = $state('Products');
+    offersSection = $state('Offers');
+    productLocalization = $state(undefined);
+    constructor(init) {
+        this.productsSection = init?.productsSection || this.productsSection;
+        this.offersSection = init?.offersSection || this.offersSection;
+        this.productLocalization = init?.productLocalization;
+    }
+}

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

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

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

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

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

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

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

@@ -0,0 +1,11 @@
+export class ShortVideoProductLocalization {
+    beforeNowPrefix = $state('Before');
+    constructor(init) {
+        if (!init) {
+            return;
+        }
+        if (init.beforeNowPrefix !== undefined) {
+            this.beforeNowPrefix = init.beforeNowPrefix;
+        }
+    }
+}

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

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

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

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

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

@@ -37,8 +37,4 @@ export type ShortVideoViewerProductModel = {
     price: number;
     currency: Currency;
     salePrice: number | null;
-    brand?: {
-        name?: string | null;
-    };
-    shortDescription?: string | null;
 };

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

@@ -7,121 +7,44 @@
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-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 { ShortVideoViewer } from '../short-video-viewer';
 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 { ShortVideosPlayerLocalization } from './short-videos-player-localization.svelte';
 import { ShortVideosPlayerUiManager } from './ui-manager.svelte';
-import { onMount, untrack } from 'svelte';
-let { input, localization: localizationInit, on } = $props();
+import { onDestroy, onMount } from 'svelte';
+let { shortVideosProvider, localization: localizationInit, on } = $props();
 const localization = $derived(new ShortVideosPlayerLocalization(localizationInit));
-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 buffer = $derived(new PlayerBuffer(shortVideosProvider));
 const uiManager = new ShortVideosPlayerUiManager();
 onMount(() => __awaiter(void 0, void 0, void 0, function* () {
     uiManager.detailsCollapsed = window && window.innerWidth < window.innerHeight;
 }));
-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);
-};
+onDestroy(() => {
+    // end tracking the short video
+});
 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" use:contentMounted>
+        <div class="short-videos-player__content">
           <PlayerSlider buffer={buffer}>
             {#snippet children({ item })}
-              <ShortVideoViewer
-                model={item}
-                autoplay="on-appearance"
-                showAttachments={uiManager.showShortVideoOverlay}
-                localization={localization.shortVideoViewerLocalization} />
+              <ShortVideoViewer model={item} autoplay="on-appearance" showAttachments={uiManager.showShortVideoOverlay} />
             {/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: () => onPlayerClose() }} />
-    {:else}
-      <Loading positionFixedCenter={true} timeout={1000} />
+      <Controls buffer={buffer} uiManager={uiManager} localization={localization} on={{ closePlayer: () => on?.closePlayer?.() }} />
     {/if}
   </div>
 </div>

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

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