@streamscloud/embeddable 2.1.1 → 2.1.3

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

@@ -0,0 +1,13 @@
+import type { ITimeAgoLocalization } from '../../ui/time-ago';
+import type { IShortVideoAttachmentsLocalization } from './short-video-attachments-localization.svelte';
+export interface IShortVideoDetailsLocalization {
+    viewsCount?: (count: number) => string;
+    timeAgoLocalization?: ITimeAgoLocalization;
+    attachmentsLocalization?: IShortVideoAttachmentsLocalization;
+}
+export declare class ShortVideoDetailsLocalization {
+    viewsCount: (count: number) => string;
+    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.svelte.d.ts

@@ -0,0 +1,7 @@
+export interface IShortVideoProductLocalization {
+    beforeNowPrefix?: string | null;
+}
+export declare class ShortVideoProductLocalization {
+    beforeNowPrefix: string | null;
+    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

@@ -0,0 +1,40 @@
+import type { Currency } from '../../core/enums';
+export type ShortVideoViewerModel = {
+    id: string;
+    media: {
+        isImage: true;
+        url: string;
+    } | {
+        isImage: false;
+        url: string;
+        thumbnailUrl: string;
+    };
+    text?: string | null;
+    heading: ShortVideoViewerHeadingModel;
+    products: ShortVideoViewerProductModel[];
+    ad: ShortVideoViewerAdModel | null;
+};
+export type ShortVideoViewerHeadingModel = {
+    image: string | null;
+    name: string;
+    displayDate: string;
+    viewsCount: number;
+};
+export type ShortVideoViewerAdModel = {
+    id: string;
+    image: string | null;
+    title: string;
+    description: string | null;
+    buttonText: string | null;
+    buttonUrl: string | null;
+    openLinkInNewWindow: boolean | null;
+};
+export type ShortVideoViewerProductModel = {
+    id: string;
+    title: string;
+    image: string | null;
+    link: string | null;
+    price: number;
+    currency: Currency;
+    salePrice: number | null;
+};

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

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

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

@@ -0,0 +1,12 @@
+export declare class ShortVideoViewerUiManager {
+    readonly globalCssVariables: string;
+    readonly showActionsInsideFrame: boolean;
+    readonly showAttachments: boolean;
+    private readonly buttonSize;
+    private actionsPanelWidth;
+    private availableSideSpace;
+    private canShowAttachments;
+    updateActionsPanelWidth: (value: number) => void;
+    updateAvailableSideSpace: (value: number) => void;
+    updateCanShowAttachments: (value: boolean) => void;
+}

package/dist/short-videos/short-video-viewer/ui-manager.svelte.js

@@ -0,0 +1,26 @@
+export class ShortVideoViewerUiManager {
+    globalCssVariables = $derived.by(() => {
+        const values = [`--_short-video-viewer--button--size: ${this.buttonSize}px`];
+        return values.join(';');
+    });
+    showActionsInsideFrame = $derived.by(() => {
+        return this.actionsPanelWidth + 40 > this.availableSideSpace;
+    });
+    showAttachments = $derived.by(() => {
+        return this.canShowAttachments;
+    });
+    buttonSize = 40;
+    actionsPanelWidth = $state(0);
+    availableSideSpace = $state(0);
+    // is provided from the calling side
+    canShowAttachments = $state(true);
+    updateActionsPanelWidth = (value) => {
+        this.actionsPanelWidth = value;
+    };
+    updateAvailableSideSpace = (value) => {
+        this.availableSideSpace = value;
+    };
+    updateCanShowAttachments = (value) => {
+        this.canShowAttachments = value;
+    };
+}

package/dist/short-videos/short-videos-player/action-button.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">let { children, on } = $props();
+export {};
+</script>
+
+<button type="button" class="action-button" onclick={() => on.click()}>
+  {@render children()}
+</button>
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.action-button {
+  --_short-videos-player--action-button--size: var(--short-videos-player--action-button--size);
+  --_short-videos-player--action-button--background: var(--action-button-background, #1c1c1c);
+  width: var(--_short-videos-player--action-button--size);
+  min-width: var(--_short-videos-player--action-button--size);
+  max-width: var(--_short-videos-player--action-button--size);
+  height: var(--_short-videos-player--action-button--size);
+  min-height: var(--_short-videos-player--action-button--size);
+  max-height: var(--_short-videos-player--action-button--size);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  line-height: 0;
+  background: var(--_short-videos-player--action-button--background);
+  border-radius: 50%;
+  --icon--size: 1.25rem;
+  z-index: 1;
+  color: #ffffff;
+}</style>

package/dist/short-videos/short-videos-player/action-button.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    on: {
+        click: () => void;
+    };
+    children: Snippet;
+};
+declare const ActionButton: import("svelte").Component<Props, {}, "">;
+type ActionButton = ReturnType<typeof ActionButton>;
+export default ActionButton;

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

@@ -0,0 +1,91 @@
+<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 { ShortVideoViewer } from '../short-video-viewer';
+import { PlayerBuffer, PlayerSlider } from '../../ui/player';
+import { SpotlightLayout } from '../../ui/spotlight-layout';
+import { default as Controls } from './controls.svelte';
+import { ShortVideosPlayerLocalization } from './short-videos-player-localization.svelte';
+import { ShortVideosPlayerUiManager } from './ui-manager.svelte';
+import { onDestroy, onMount } from 'svelte';
+let { shortVideosProvider, localization: localizationInit, on } = $props();
+const localization = $derived(new ShortVideosPlayerLocalization(localizationInit));
+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;
+}));
+onDestroy(() => {
+    // end tracking the short video
+});
+const handleDimensionsChanged = (dimensions) => {
+    uiManager.updateDimensions({
+        mainViewColumnWidth: dimensions.mainSceneWidth,
+        viewTotalWidth: dimensions.totalWidth
+    });
+};
+</script>
+
+<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">
+          <PlayerSlider buffer={buffer}>
+            {#snippet children({ item })}
+              <ShortVideoViewer model={item} autoplay="on-appearance" showAttachments={uiManager.showShortVideoOverlay} />
+            {/snippet}
+          </PlayerSlider>
+        </div>
+      </SpotlightLayout>
+      <Controls buffer={buffer} uiManager={uiManager} localization={localization} on={{ closePlayer: () => on?.closePlayer?.() }} />
+    {/if}
+  </div>
+</div>
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.short-videos-player-container {
+  width: 100%;
+  min-width: 100%;
+  max-width: 100%;
+  height: 100%;
+  min-height: 100%;
+  max-height: 100%;
+  container-type: inline-size;
+  display: flex;
+  position: relative;
+  background: #000000;
+}
+
+.short-videos-player {
+  display: flex;
+  flex: 1;
+  padding: 0.625rem 0;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 576px) {
+  .short-videos-player {
+    padding: 0;
+  }
+}
+.short-videos-player__content {
+  width: 100%;
+  height: 100%;
+  --short-video-viewer--actions-panel--bottom: 5rem;
+}</style>

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

@@ -0,0 +1,13 @@
+import { type ShortVideoViewerModel } from '../short-video-viewer';
+import { type PlayerItemsProvider } from '../../ui/player';
+import { type IShortVideosPlayerLocalization } from './short-videos-player-localization.svelte';
+type Props = {
+    shortVideosProvider: PlayerItemsProvider<ShortVideoViewerModel>;
+    localization?: IShortVideosPlayerLocalization;
+    on?: {
+        closePlayer?: () => void;
+    };
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

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

@@ -0,0 +1,222 @@
+<script lang="ts">import { ShortVideoDetails, ShortVideoViewerAttachments, ShortVideoViewerAttachmentsInline } from '../short-video-viewer';
+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 IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_20_regular.svg';
+import IconChevronUp from '@fluentui/svg-icons/icons/chevron_up_20_regular.svg';
+import IconDismiss from '@fluentui/svg-icons/icons/dismiss_20_regular.svg';
+import IconPanelRightGallery from '@fluentui/svg-icons/icons/panel_right_gallery_20_regular.svg';
+import IconSpeaker2 from '@fluentui/svg-icons/icons/speaker_2_20_regular.svg';
+import IconSpeakerMute from '@fluentui/svg-icons/icons/speaker_mute_20_regular.svg';
+let { buffer, uiManager, localization, on } = $props();
+const toggleMuted = () => {
+    MediaVolumeManager.isMuted = !MediaVolumeManager.isMuted;
+};
+const shortVideo = $derived(buffer.current);
+</script>
+
+<div class="short-videos-player-controls">
+  <div class="short-videos-player-controls__left">
+    {#if shortVideo && uiManager.detailsCollapsed && !uiManager.showShortVideoOverlay}
+      <div class="short-videos-player-controls__short-video-overlay">
+        <div class="short-videos-player-controls__short-video-attachments-inline">
+          <ShortVideoViewerAttachmentsInline model={shortVideo} />
+        </div>
+      </div>
+    {/if}
+    <div class="short-videos-player-controls__navigation-buttons">
+      <button type="button" class="navigation-button" disabled={!buffer.canLoadPrevious} onclick={buffer.loadPrevious}>
+        <Icon src={IconChevronUp} />
+      </button>
+      <button type="button" class="navigation-button" disabled={!buffer.canLoadNext} onclick={buffer.loadNext}>
+        <Icon src={IconChevronDown} />
+      </button>
+    </div>
+  </div>
+  <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} />
+      </div>
+    {/if}
+    <div class="short-videos-player-controls__controls">
+      {#if shortVideo}
+        <ActionButton on={{ click: toggleMuted }}>
+          {#if MediaVolumeManager.isMuted}
+            <Icon src={IconSpeakerMute} />
+          {:else}
+            <Icon src={IconSpeaker2} />
+          {/if}
+        </ActionButton>
+      {/if}
+    </div>
+  </div>
+</div>
+
+{#if shortVideo && !uiManager.isMobileView}
+  <ShortVideoDetails shortVideo={shortVideo} collapsed={uiManager.detailsCollapsed} localization={localization.shortVideoDetailsLocalization} />
+  <div class="toggle-collapsed-button">
+    <ActionButton on={{ click: () => (uiManager.detailsCollapsed = !uiManager.detailsCollapsed) }}>
+      <Icon src={IconPanelRightGallery} />
+    </ActionButton>
+  </div>
+{/if}
+<button type="button" class="close-button navigation-button" onclick={on.closePlayer}>
+  <Icon src={IconDismiss} />
+</button>
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.close-button {
+  position: absolute;
+  top: var(--short-videos-player--controls--offset-vertical);
+  right: var(--short-videos-player--controls--offset-horizontal);
+  z-index: 1;
+}
+
+.toggle-collapsed-button {
+  position: absolute;
+  bottom: var(--short-videos-player--controls--offset-vertical);
+  right: var(--short-videos-player--controls--offset-horizontal);
+  z-index: 1;
+}
+
+.short-videos-player-controls {
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 100%;
+  width: var(--short-videos-player--sidebar--available-space);
+  display: flex;
+  justify-content: space-between;
+  gap: 2.5rem;
+  padding: var(--short-videos-player--controls--offset-vertical) var(--short-videos-player--controls--offset-horizontal);
+  container-type: inline-size;
+}
+.short-videos-player-controls__left {
+  display: flex;
+  flex-direction: column;
+  gap: 2.5rem;
+  justify-content: flex-end;
+}
+.short-videos-player-controls__right {
+  flex: 1;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  flex-direction: column;
+  padding-top: 3.75rem;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 9.375rem) {
+  .short-videos-player-controls__right {
+    display: none;
+  }
+}
+.short-videos-player-controls__short-video-overlay {
+  gap: 2.5rem;
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-end;
+  --short-video-viewer--interactions--icon--size: var(--short-videos-player--navigation-button--size);
+  --short-video-viewer--interactions--background--color: #1c1c1c;
+  --short-video-viewer--interactions--counter--color: #f3f4f6;
+  --short-video-viewer--interactions--icon--font-color: #f3f4f6;
+}
+.short-videos-player-controls__short-video-attachments-inline {
+  display: none;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < calc(21.875rem + 3.75rem)) {
+  .short-videos-player-controls__short-video-attachments-inline {
+    display: contents;
+  }
+}
+.short-videos-player-controls__short-video-attachments {
+  flex: 1;
+  overflow-x: hidden;
+  overflow-y: auto;
+  scrollbar-color: transparent transparent;
+  scrollbar-width: thin;
+  width: 21.875rem;
+  max-width: 21.875rem;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+.short-videos-player-controls__short-video-attachments::-webkit-scrollbar {
+  width: 3px;
+  height: 3px;
+  background: var(--custom-scrollbar-background, transparent);
+  visibility: hidden;
+}
+.short-videos-player-controls__short-video-attachments::-webkit-scrollbar-thumb {
+  background: transparent;
+}
+.short-videos-player-controls__short-video-attachments:hover {
+  scrollbar-color: var(--custom-scrollbar-color, #7d7d7d) var(--custom-scrollbar-background, transparent);
+  scrollbar-width: thin;
+}
+.short-videos-player-controls__short-video-attachments:hover::-webkit-scrollbar {
+  width: 3px;
+  height: 3px;
+  background: var(--custom-scrollbar-background, transparent);
+  visibility: hidden;
+}
+.short-videos-player-controls__short-video-attachments:hover::-webkit-scrollbar-thumb {
+  background: var(--custom-scrollbar-color, #7d7d7d);
+}
+@container (width < calc(21.875rem + 3.75rem)) {
+  .short-videos-player-controls__short-video-attachments {
+    display: none;
+  }
+}
+.short-videos-player-controls__navigation-buttons {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  margin-bottom: 0.625rem;
+  z-index: 1;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 6.25rem) {
+  .short-videos-player-controls__navigation-buttons {
+    visibility: hidden;
+  }
+}
+.short-videos-player-controls__controls {
+  display: flex;
+  margin-top: auto;
+  gap: 1rem;
+  align-self: flex-start;
+}
+
+.navigation-button {
+  width: var(--short-videos-player--navigation-button--size);
+  min-width: var(--short-videos-player--navigation-button--size);
+  max-width: var(--short-videos-player--navigation-button--size);
+  height: var(--short-videos-player--navigation-button--size);
+  min-height: var(--short-videos-player--navigation-button--size);
+  max-height: var(--short-videos-player--navigation-button--size);
+  background-color: #000000;
+  border: 1px solid #1c1c1c;
+  border-radius: 50%;
+  text-align: center;
+  --icon--color: #ffffff;
+  --icon--stroke-width: 0.6;
+}
+.navigation-button:disabled {
+  opacity: 0.5;
+  cursor: default;
+}</style>

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

@@ -0,0 +1,15 @@
+import { type ShortVideoViewerModel } from '../short-video-viewer';
+import type { IPlayerBuffer } from '../../ui/player';
+import { ShortVideosPlayerLocalization } from './short-videos-player-localization.svelte.js';
+import type { ShortVideosPlayerUiManager } from './ui-manager.svelte';
+type Props = {
+    buffer: IPlayerBuffer<ShortVideoViewerModel>;
+    uiManager: ShortVideosPlayerUiManager;
+    localization: ShortVideosPlayerLocalization;
+    on: {
+        closePlayer: () => void;
+    };
+};
+declare const Controls: import("svelte").Component<Props, {}, "">;
+type Controls = ReturnType<typeof Controls>;
+export default Controls;

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

@@ -0,0 +1,31 @@
+import type { ShortVideoViewerModel } from '../short-video-viewer';
+import type { PlayerItemsProvider } from '../../ui/player';
+import type { IShortVideosPlayerLocalization } from './short-videos-player-localization.svelte';
+export type { IShortVideosPlayerLocalization };
+/**
+ * Opens the short videos player modal with the specified provider and optional localization.
+ *
+ * @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
+ * ```ts
+ * import { openShortVideosPlayer } from '@streamscloud/embeddable/short-videos-player';
+ *
+ * openShortVideosPlayer({
+ *   shortVideosProvider: myShortVideosProvider,
+ *   localization: {
+ *     next: 'Next',
+ *     previous: 'Previous'
+ *   }
+ * });
+ * ```
+ */
+export declare const openShortVideosPlayer: (init: {
+    shortVideosProvider: PlayerItemsProvider<ShortVideoViewerModel>;
+    localization?: IShortVideosPlayerLocalization;
+    on?: {
+        playerClosed?: () => void;
+    };
+}) => void;

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

@@ -0,0 +1,40 @@
+import { ShadowHost } from '../../ui/shadow-dom';
+import { default as ShortVideosPlayer } from './cmp.short-videos-player.svelte';
+import { mount } from 'svelte';
+/**
+ * Opens the short videos player modal with the specified provider and optional localization.
+ *
+ * @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
+ * ```ts
+ * import { openShortVideosPlayer } from '@streamscloud/embeddable/short-videos-player';
+ *
+ * openShortVideosPlayer({
+ *   shortVideosProvider: myShortVideosProvider,
+ *   localization: {
+ *     next: 'Next',
+ *     previous: 'Previous'
+ *   }
+ * });
+ * ```
+ */
+export const openShortVideosPlayer = (init) => {
+    const { shortVideosProvider, localization } = init;
+    const shadowHost = new ShadowHost({ onClosed: () => init.on?.playerClosed?.() });
+    mount(ShortVideosPlayer, {
+        target: shadowHost.shadowRoot,
+        props: {
+            shortVideosProvider,
+            localization,
+            on: {
+                closePlayer: () => {
+                    shadowHost.remove();
+                }
+            }
+        }
+    });
+    shadowHost.attachToBody();
+};

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

@@ -0,0 +1,8 @@
+import type { IShortVideoDetailsLocalization } from '../short-video-viewer';
+export interface IShortVideosPlayerLocalization {
+    shortVideoDetailsLocalization?: IShortVideoDetailsLocalization;
+}
+export declare class ShortVideosPlayerLocalization {
+    shortVideoDetailsLocalization: IShortVideoDetailsLocalization | undefined;
+    constructor(init?: IShortVideosPlayerLocalization);
+}

package/dist/short-videos/short-videos-player/short-videos-player-localization.svelte.js

@@ -0,0 +1,6 @@
+export class ShortVideosPlayerLocalization {
+    shortVideoDetailsLocalization = $state(undefined);
+    constructor(init) {
+        this.shortVideoDetailsLocalization = init?.shortVideoDetailsLocalization || this.shortVideoDetailsLocalization;
+    }
+}

package/dist/short-videos/short-videos-player/ui-manager.svelte.d.ts

@@ -0,0 +1,16 @@
+export declare class ShortVideosPlayerUiManager {
+    detailsCollapsed: boolean;
+    globalCssVariables: string;
+    isMobileView: boolean;
+    showShortVideoOverlay: boolean;
+    private readonly actionButtonSize;
+    private readonly navigationButtonSize;
+    private readonly controlsOffsetHorizontal;
+    private readonly controlsOffsetVertical;
+    private viewTotalWidth;
+    private mainViewColumnWidth;
+    updateDimensions: (dimensions: {
+        viewTotalWidth: number;
+        mainViewColumnWidth: number;
+    }) => void;
+}