@streamscloud/embeddable 7.0.1 → 7.0.2-1759149696160

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

@@ -1,89 +1,63 @@
-<script lang="ts">import { slideHorizontally } from '../../core/transitions';
-import { Icon } from '../../ui/icon';
-import { Image, ImageRound } from '../../ui/image';
+<script lang="ts">import { Image, ImageRound } from '../../ui/image';
 import { InfiniteScrolling } from '../../ui/infinite-scrolling';
 import { LineClamp } from '../../ui/line-clamp';
 import { ProportionalContainer } from '../../ui/proportional-container';
 import { TimeAgo } from '../../ui/time-ago';
 import { StreamPlayerLocalization } from './stream-player-localization';
-import IconPanelLeftText from '@fluentui/svg-icons/icons/panel_left_text_20_regular.svg?raw';
-let { model, buffer, activePageId, on, uiManager, localization } = $props();
-const overviewAttached = (node) => {
-    const resizeObserver = new ResizeObserver(() => {
-        on.widthChanged(node.clientWidth);
-    });
-    resizeObserver.observe(node);
-    return {
-        destroy() {
-            resizeObserver.disconnect();
-        }
-    };
-};
+let { model, buffer, activePageId, on, localization } = $props();
 </script>
 
-{#if !uiManager.overviewCollapsed}
-  <div class="stream-overview" transition:slideHorizontally|local use:overviewAttached>
-    <div class="stream-overview-info">
-      <div class="stream-overview-owner">
-        <div class="stream-overview-owner__image">
-          <ImageRound src={model.header.image} />
-        </div>
-        <div class="stream-overview-owner__body">
-          <div class="stream-overview-owner__name">
-            <LineClamp maxLines={1}>
-              {model.header.name}
-            </LineClamp>
-          </div>
-          <div class="stream-overview-owner__meta">
-            <LineClamp maxLines={1}>
-              <TimeAgo date={model.publishedAt || model.createdAt} locale={localization.timeAgoLocale} />
-            </LineClamp>
-          </div>
-        </div>
-      </div>
-      <div class="stream-overview-info__title">
-        <LineClamp maxLines={2}>
-          {model.title}
+<div class="stream-overview-info">
+  <div class="stream-overview-owner">
+    <div class="stream-overview-owner__image">
+      <ImageRound src={model.header.image} />
+    </div>
+    <div class="stream-overview-owner__body">
+      <div class="stream-overview-owner__name">
+        <LineClamp maxLines={1}>
+          {model.header.name}
         </LineClamp>
       </div>
-      {#if model.subTitle}
-        <div class="stream-overview-info__subtitle">
-          <LineClamp maxLines={3}>
-            {model.subTitle}
-          </LineClamp>
-        </div>
-      {/if}
-      <div class="stream-overview-info__pages">
-        {localization.pagesCount(model.pagesCount)}
+      <div class="stream-overview-owner__meta">
+        <LineClamp maxLines={1}>
+          <TimeAgo date={model.publishedAt || model.createdAt} locale={localization.locale} />
+        </LineClamp>
       </div>
     </div>
-    <div class="stream-overview-pages">
-      <InfiniteScrolling loadMore={buffer.loadMore}>
-        <div class="stream-overview-pages__grid">
-          {#each buffer.loaded as item, index (item.id)}
-            <button
-              type="button"
-              class="stream-overview-pages__page"
-              class:stream-overview-pages__page--active={activePageId === item.id}
-              onclick={() => on.setCurrentItem(index)}>
-              <ProportionalContainer ratio={9 / 16}>
-                <Image src={item.cover} />
-              </ProportionalContainer>
-            </button>
-          {/each}
-        </div>
-      </InfiniteScrolling>
+  </div>
+  <div class="stream-overview-info__title">
+    <LineClamp maxLines={2}>
+      {model.title}
+    </LineClamp>
+  </div>
+  {#if model.subTitle}
+    <div class="stream-overview-info__subtitle">
+      <LineClamp maxLines={3}>
+        {model.subTitle}
+      </LineClamp>
     </div>
+  {/if}
+  <div class="stream-overview-info__pages">
+    {localization.pagesCount(model.pagesCount)}
   </div>
-{/if}
-
-<button
-  class="toggle-collapsed-button"
-  class:toggle-collapsed-button--left={uiManager.overviewCollapsed}
-  type="button"
-  onclick={() => (uiManager.overviewCollapsed = !uiManager.overviewCollapsed)}>
-  <Icon src={IconPanelLeftText} />
-</button>
+</div>
+<div class="stream-overview-pages">
+  <InfiniteScrolling loadMore={buffer.loadMore}>
+    <div class="stream-overview-pages__grid">
+      {#each buffer.loaded as item, index (item.id)}
+        <button
+          type="button"
+          class="stream-overview-pages__page"
+          class:stream-overview-pages__page--active={activePageId === item.id}
+          onclick={() => on.setCurrentItem(index)}>
+          <ProportionalContainer ratio={9 / 16}>
+            <Image src={item.cover} />
+          </ProportionalContainer>
+        </button>
+      {/each}
+    </div>
+  </InfiniteScrolling>
+</div>
 
 <style>@keyframes fadeIn {
   0% {
@@ -96,55 +70,6 @@ const overviewAttached = (node) => {
     opacity: 1;
   }
 }
-.stream-overview {
-  background: #1c1c1c;
-  height: 100%;
-  min-height: 100%;
-  max-height: 100%;
-  width: 13.75rem;
-  min-width: 13.75rem;
-  max-width: 13.75rem;
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-  padding-bottom: 0.9375rem;
-  overflow: hidden;
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 100%;
-  z-index: 1;
-  /* Set 'container-type: inline-size;' to reference container*/
-}
-@container (width < 576px) {
-  .stream-overview {
-    width: calc(100% - 80px);
-    min-width: calc(100% - 80px);
-    max-width: calc(100% - 80px);
-  }
-}
-
-.toggle-collapsed-button {
-  position: absolute;
-  bottom: 0.625rem;
-  left: 12rem;
-  z-index: 1;
-  --icon--color: #ffffff;
-  --icon--size: 1.25rem;
-  opacity: var(--stream-player--elements-opacity);
-  transition: opacity 0.3s ease-in-out;
-  /* Set 'container-type: inline-size;' to reference container*/
-}
-.toggle-collapsed-button--left {
-  left: 0.625rem;
-}
-@container (width < 576px) {
-  .toggle-collapsed-button {
-    left: unset;
-    right: 0.625rem;
-  }
-}
-
 .stream-overview-info {
   padding: 1rem;
 }

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

@@ -1,16 +1,13 @@
 import type { StreamPlayerBuffer } from './stream-player-buffer.svelte';
 import { StreamPlayerLocalization } from './stream-player-localization';
 import type { StreamPlayerModel } from './types';
-import type { StreamPlayerUiManager } from './ui-manager.svelte';
 type Props = {
     model: StreamPlayerModel;
-    activePageId: string;
     buffer: StreamPlayerBuffer;
-    uiManager: StreamPlayerUiManager;
+    activePageId: string;
     localization: StreamPlayerLocalization;
     on: {
         setCurrentItem: (index: number) => void;
-        widthChanged: (width: number) => void;
     };
 };
 declare const StreamOverview: import("svelte").Component<Props, {}, "">;

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

@@ -1,5 +1,5 @@
 import { type StreamPageViewerModel } from '../stream-page-viewer';
-import type { IPlayerBuffer } from '../../ui/player';
+import type { IPlayerBuffer } from '../../ui/player-slider';
 import type { IStreamPlayerDataProvider } from './types';
 export declare class StreamPlayerBuffer implements IPlayerBuffer<StreamPageViewerModel> {
     readonly loaded: StreamPageViewerModel[];

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

@@ -2,10 +2,6 @@ import { type Locale } from '../../core/locale';
 export declare class StreamPlayerLocalization {
     streamNotFound: string;
     pagesCount: (count: number) => string;
-    timeAgoLocale: Locale;
-    streamPageViewerLocale: Locale;
-    shortVideoAttachmentsLocale: Locale;
-    shortVideoViewerLocale: Locale;
-    swipeIndicatorLocale: Locale;
+    locale: Locale;
     constructor(locale: Locale);
 }

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

@@ -2,19 +2,11 @@ import {} from '../../core/locale';
 export class StreamPlayerLocalization {
     streamNotFound;
     pagesCount;
-    timeAgoLocale;
-    streamPageViewerLocale;
-    shortVideoAttachmentsLocale;
-    shortVideoViewerLocale;
-    swipeIndicatorLocale;
+    locale;
     constructor(locale) {
         this.streamNotFound = loc.streamNotFound[locale];
         this.pagesCount = loc.pagesCount[locale];
-        this.timeAgoLocale = locale;
-        this.streamPageViewerLocale = locale;
-        this.shortVideoAttachmentsLocale = locale;
-        this.shortVideoViewerLocale = locale;
-        this.swipeIndicatorLocale = locale;
+        this.locale = locale;
     }
 }
 const loc = {

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

@@ -0,0 +1,229 @@
+<script lang="ts">var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { ContentPlayer, ContentPlayerConfig } from '../../content-player';
+import { preloadImage } from '../../core/image-preloader';
+import { toastrWarning } from '../../core/toastr';
+import { mapToPostViewerModel } from '../layout/models';
+import { StreamPageViewer } from '../stream-page-viewer';
+import { default as Overview } from './stream-overview.svelte';
+import { StreamPlayerBuffer } from './stream-player-buffer.svelte';
+import { StreamPlayerLocalization } from './stream-player-localization';
+import { untrack } from 'svelte';
+let { streamId, dataProvider, analyticsHandler, locale = 'en', showStreamsCloudWatermark, postSocialInteractionsHandler, on, mediaCenterData } = $props();
+const localization = $derived(new StreamPlayerLocalization(locale));
+let currentStreamModel = $state(null);
+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 buffer = $state(null);
+let totalEngagementTimeSeconds = 0;
+let inactiveTimeSeconds = 10; // // Mark as inactive after 10 seconds of no activity
+let isActive = true;
+let activityTimeout = null;
+let trackingInterval = null;
+let maxPageIndexViewed = 0;
+$effect(() => {
+    void streamId;
+    untrack(() => {
+        if (currentStreamModel) {
+            finalizeStreamTracking(currentStreamModel.id);
+        }
+        buffer = null;
+        contentPlayerConfig.playerBuffer = null;
+        initNewStream(streamId);
+    });
+});
+$effect(() => contentPlayerConfig.updateMediaCenterData(mediaCenterData));
+const initNewStream = (streamId) => __awaiter(void 0, void 0, void 0, function* () {
+    var _a;
+    const stream = yield dataProvider.getStream(streamId);
+    if (!stream) {
+        toastrWarning(localization.streamNotFound);
+        onPlayerClose();
+        return;
+    }
+    if (stream.organizationId) {
+        analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.setOrganizationId(stream.organizationId);
+    }
+    (_a = on === null || on === void 0 ? void 0 : on.streamActivated) === null || _a === void 0 ? void 0 : _a.call(on, { title: stream.title, image: stream.cover });
+    // start tracking the stream
+    currentStreamModel = stream;
+    new StreamPlayerBuffer({
+        streamId,
+        dataProvider: dataProvider,
+        on: {
+            preloaded: (instance) => __awaiter(void 0, void 0, void 0, function* () {
+                if (instance.loaded.length) {
+                    const coverUrl = instance.loaded[0].cover;
+                    if (coverUrl) {
+                        yield preloadImage(coverUrl);
+                    }
+                    contentPlayerConfig.setBackgroundImageUrl(coverUrl);
+                }
+                buffer = instance;
+                contentPlayerConfig.playerBuffer = instance;
+            })
+        }
+    });
+    analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackStreamView(stream.id);
+    startActivityTracking();
+});
+const contentPlayerConfig = new ContentPlayerConfig({
+    playerBuffer: null,
+    mappers: {
+        postModelFromCurrentItem: (item) => {
+            if (item.type === 'short-video' && item.shortVideo) {
+                return mapToPostViewerModel(item.shortVideo);
+            }
+            return null;
+        }
+    },
+    disableBackground: false,
+    locale,
+    showStreamsCloudWatermark,
+    socialInteractionsHandler: postSocialInteractionsHandler,
+    mediaCenterData,
+    callbacks: {
+        close: () => onPlayerClose(),
+        videoProgress: (pageId, videoId, progress) => {
+            onProgress(pageId, videoId, progress);
+        },
+        productClick: (id, videoId) => {
+            analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackShortVideoProductClick(id, videoId);
+            onStreamProductClick(id);
+        },
+        productImpression: (id, videoId) => {
+            analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackShortVideoProductImpression(id, videoId);
+            onStreamProductImpression(id);
+        },
+        adClick: (id) => {
+            analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackAdClick(id);
+        },
+        adImpression: (id) => {
+            analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackAdImpression(id);
+        }
+    },
+    playerSliderCallbacks: {
+        itemActivated: (item) => onPageActivated(item),
+        itemDeactivated: (itemId) => analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.reportPageVideoViews(itemId, streamId)
+    }
+});
+const handleChangePage = (index) => {
+    if (!buffer) {
+        return;
+    }
+    buffer.setIndex(index);
+};
+const onPageActivated = (id) => {
+    const page = buffer === null || buffer === void 0 ? void 0 : buffer.loaded.find((x) => x.id === id);
+    contentPlayerConfig.setBackgroundImageUrl((page === null || page === void 0 ? void 0 : page.cover) || null);
+    if (page) {
+        analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackStreamPageView(id, streamId);
+        if (page.type === 'short-video' && page.shortVideo) {
+            analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackShortVideoView(page.shortVideo.id);
+        }
+        const currentIndex = buffer === null || buffer === void 0 ? void 0 : buffer.loaded.findIndex((p) => p.id === id);
+        if (currentIndex !== undefined && currentIndex > maxPageIndexViewed) {
+            maxPageIndexViewed = currentIndex;
+        }
+    }
+};
+const onStreamProductClick = (productId) => {
+    analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackStreamProductClicked(productId, streamId);
+};
+const onStreamProductImpression = (productId) => {
+    analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackStreamProductImpression(productId, streamId);
+};
+const finalizeStreamTracking = (id) => {
+    stopActivityTracking();
+    analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackStreamEngagementTime(id, totalEngagementTimeSeconds);
+    if (buffer && buffer.loaded.length > 0) {
+        let scrollDepth = Math.round(((maxPageIndexViewed + 1) / buffer.loaded.length) * 100);
+        analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackStreamScrollDepth(id, scrollDepth);
+    }
+};
+const onPlayerClose = () => {
+    var _a;
+    if (currentStreamModel) {
+        finalizeStreamTracking(currentStreamModel.id);
+    }
+    (_a = on === null || on === void 0 ? void 0 : on.playerClosed) === null || _a === void 0 ? void 0 : _a.call(on);
+};
+const onProgress = (pageId, videoId, progress) => {
+    analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackShortVideoProgress(pageId, videoId, progress, streamId);
+};
+//#region Activity Tracking
+const resetInactivityTimer = () => {
+    if (!isActive) {
+        isActive = true;
+    }
+    if (activityTimeout) {
+        clearTimeout(activityTimeout);
+    }
+    activityTimeout = setTimeout(() => {
+        isActive = false;
+    }, inactiveTimeSeconds * 1000);
+};
+const startActivityTracking = () => {
+    totalEngagementTimeSeconds = 0;
+    trackingInterval = setInterval(() => {
+        if (isActive) {
+            totalEngagementTimeSeconds += 1;
+        }
+    }, 1000);
+    window.addEventListener('mousemove', resetInactivityTimer);
+    window.addEventListener('mousedown', resetInactivityTimer);
+    window.addEventListener('keypress', resetInactivityTimer);
+    window.addEventListener('touchstart', resetInactivityTimer);
+    window.addEventListener('scroll', resetInactivityTimer);
+    resetInactivityTimer();
+};
+const stopActivityTracking = () => {
+    window.removeEventListener('mousemove', resetInactivityTimer);
+    window.removeEventListener('mousedown', resetInactivityTimer);
+    window.removeEventListener('keypress', resetInactivityTimer);
+    window.removeEventListener('touchstart', resetInactivityTimer);
+    window.removeEventListener('scroll', resetInactivityTimer);
+    if (activityTimeout) {
+        clearTimeout(activityTimeout);
+        activityTimeout = null;
+    }
+    if (trackingInterval) {
+        clearInterval(trackingInterval);
+        trackingInterval = null;
+    }
+};
+//#edregion Activity Tracking
+</script>
+
+<ContentPlayer config={contentPlayerConfig}>
+  {#snippet nonPostItemView({ item })}
+    {#if item.type === 'general'}
+      <StreamPageViewer
+        page={item}
+        locale={localization.locale}
+        on={{
+          progress: (videoId, progress) => onProgress(item.id, videoId, progress),
+          productClick: (productId) => onStreamProductClick(productId),
+          productImpression: (productId) => onStreamProductImpression(productId)
+        }} />
+    {/if}
+  {/snippet}
+  {#snippet overviewPanelContent()}
+    {#if contentPlayerConfig.playerBuffer && buffer && currentStreamModel}
+      <Overview
+        model={currentStreamModel}
+        buffer={buffer}
+        activePageId={activePageId}
+        localization={localization}
+        on={{
+          setCurrentItem: handleChangePage
+        }} />
+    {/if}
+  {/snippet}
+</ContentPlayer>

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

@@ -0,0 +1,8 @@
+import type { MediaCenterData } from '../../media-center/model/types';
+import type { StreamPlayerProps } from './types';
+type $$ComponentProps = StreamPlayerProps & {
+    mediaCenterData?: MediaCenterData;
+};
+declare const StreamPlayerView: import("svelte").Component<$$ComponentProps, {}, "">;
+type StreamPlayerView = ReturnType<typeof StreamPlayerView>;
+export default StreamPlayerView;

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

@@ -1,5 +1,5 @@
 import type { Locale } from '../../core/locale';
-import type { IPostSocialInteractionsHandler } from '../../short-videos/short-video-viewer';
+import type { IPostSocialInteractionsHandler } from '../../posts';
 import type { StreamPageViewerModel } from '../stream-page-viewer';
 export type StreamPlayerModel = {
     id: string;
@@ -15,13 +15,11 @@ export type StreamPlayerModel = {
     };
     pagesCount: number;
 };
-export type StreamPlayerProps = PlayerSettings & {
+export type StreamPlayerProps = {
     streamId: string;
     dataProvider: IStreamPlayerDataProvider;
     postSocialInteractionsHandler?: IPostSocialInteractionsHandler;
     analyticsHandler?: IStreamAnalyticsHandler;
-};
-export type PlayerSettings = {
     disableBackground?: boolean;
     locale?: Locale;
     showStreamsCloudWatermark?: boolean;
@@ -53,4 +51,6 @@ export interface IStreamAnalyticsHandler {
     trackShortVideoProductImpression: (productId: string, videoId: string) => void;
     trackShortVideoProductClick: (productId: string, videoId: string) => void;
     trackShortVideoProgress: (pageId: string, videoId: string, progress: number, streamId: string) => void;
+    trackAdClick: (adId: string) => void;
+    trackAdImpression: (adId: string) => void;
 }

package/dist/ui/{player → player-slider}/cmp.player-slider.svelte.d.ts

@@ -1,19 +1,11 @@
-import type { IPlayerBuffer } from './types';
+import type { IPlayerBuffer, PlayerSliderCallbacks } from './types';
 import { type Snippet } from 'svelte';
 declare class __sveltets_Render<T extends {
     id: string;
 }> {
     props(): {
         buffer: IPlayerBuffer<T>;
-        on?: {
-            itemPreActivated?: ((e: T) => void) | undefined;
-            itemPreDeactivated?: ((e: {
-                itemId: string;
-                loadingNext: boolean;
-            }) => void) | undefined;
-            itemActivated?: ((e: string) => void) | undefined;
-            itemDeactivated?: ((e: string) => void) | undefined;
-        } | undefined;
+        on?: PlayerSliderCallbacks<T> | undefined;
         children: Snippet<[{
             item: T;
             active?: boolean;

package/dist/ui/{player → player-slider}/types.d.ts

@@ -12,3 +12,12 @@ export interface IPlayerBuffer<T extends {
     loadPrevious: () => void;
     reset: () => void;
 }
+export type PlayerSliderCallbacks<T> = {
+    itemPreActivated?: (e: T) => void;
+    itemPreDeactivated?: (e: {
+        itemId: string;
+        loadingNext: boolean;
+    }) => void;
+    itemActivated?: (e: string) => void;
+    itemDeactivated?: (e: string) => void;
+};

package/dist/ui/player-slider/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/embeddable",
-  "version": "7.0.1",
+  "version": "7.0.2-1759149696160",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",

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

@@ -1,13 +0,0 @@
-import type { ShortVideoViewerModel } from './types';
-type Props = {
-    model: ShortVideoViewerModel;
-    on?: {
-        productClick?: (productId: string) => void;
-        productImpression?: (productId: string, videoId: string) => void;
-        adClick?: (adId: string) => void;
-        adImpression?: (adId: string) => void;
-    };
-};
-declare const Cmp: import("svelte").Component<Props, {}, "">;
-type Cmp = ReturnType<typeof Cmp>;
-export default Cmp;

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

@@ -1,52 +0,0 @@
-<script lang="ts">import { AdCard } from '../../ads/ad-card';
-import { default as ShortVideoProductCard } from './cmp.short-video-product-card.svelte';
-import { ShortVideoAttachmentsLocalization } from './short-video-attachments-localization';
-import {} from './types';
-let { shortVideo, locale = 'en', on } = $props();
-const localization = $derived(new ShortVideoAttachmentsLocalization(locale));
-</script>
-
-{#if shortVideo.hasAttachments}
-  <div class="short-video-attachments">
-    {#if shortVideo.ad}
-      <AdCard
-        ad={shortVideo.ad}
-        on={{
-          adClick: on?.adClick,
-          impression: on?.adImpression
-        }} />
-    {/if}
-
-    {#if shortVideo.products.length}
-      {#each shortVideo.products as product (product.id)}
-        <ShortVideoProductCard
-          product={product}
-          videoId={shortVideo.id}
-          locale={localization.productLocale}
-          on={{
-            productClick: on?.productClick,
-            impression: on?.productImpression
-          }} />
-      {/each}
-    {/if}
-  </div>
-{/if}
-
-<style>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.short-video-attachments {
-  --_short-video-attachments--gap: var(--short-video-attachments--gap, 2.75rem);
-  display: flex;
-  flex-direction: column;
-  gap: var(--_short-video-attachments--gap);
-  padding: 0;
-}</style>

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

@@ -1,19 +0,0 @@
-import type { IPostSocialInteractionsHandler } from './types';
-type Props = {
-    model: {
-        id: string;
-        enableSocialInteractions: boolean;
-        products: unknown[];
-        ad: unknown | null;
-        media: {
-            isImage: boolean;
-        };
-    };
-    socialInteractionsHandler?: IPostSocialInteractionsHandler;
-    on?: {
-        attachmentsClicked?: () => void;
-    };
-};
-declare const Cmp: import("svelte").Component<Props, {}, "">;
-type Cmp = ReturnType<typeof Cmp>;
-export default Cmp;