@streamscloud/embeddable 7.0.1 → 7.0.2-1759149696160

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

@@ -1,89 +0,0 @@
-<script lang="ts">import { ImageRound } from '../../ui/image';
-import { TimeAgo } from '../../ui/time-ago';
-import { ShortVideoViewerLocalization } from './short-video-viewer-localization';
-let { model, localization } = $props();
-</script>
-
-<div class="short-video-heading">
-  <div class="short-video-heading__source-image">
-    <ImageRound src={model.image} alt={`${model.name} profilbilde`} noBorders={true} />
-  </div>
-
-  <div class="short-video-heading__info">
-    <div class="short-video-heading__source-name">{model.name}</div>
-    <p class="short-video-heading__metadata">
-      <TimeAgo date={model.displayDate} locale={localization.timeAgoLocale} />
-      {#if Number.isInteger(model.viewsCount) && model.viewsCount}
-        <span>&middot;</span>
-        {localization.viewsCount(model.viewsCount)}
-      {/if}
-    </p>
-  </div>
-</div>
-
-<style>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.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;
-  padding: var(--_short-video-heading--padding);
-  min-width: 0;
-  font-size: var(--_short-video-heading--container--font-size);
-}
-.short-video-heading__source-image {
-  width: 2em;
-  min-width: 2em;
-  max-width: 2em;
-  height: 2em;
-  min-height: 2em;
-  max-height: 2em;
-  margin-right: 0.625em;
-  --image--rounded--outer--border-radius: 0.5em;
-  --image--rounded--inner--border-width: 0;
-  --rounded-img-background: none;
-}
-.short-video-heading__info {
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-}
-.short-video-heading__source-name {
-  font-size: 0.75em;
-  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;
-  overflow: hidden;
-}
-:global([data-theme="dark"]) .short-video-heading__source-name {
-  --_short-video-heading--text--color: var(--short-video-heading--text--color, #ffffff);
-}
-.short-video-heading__metadata {
-  margin: 0;
-  font-size: 0.625em;
-  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);
-}</style>

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

@@ -1,9 +0,0 @@
-import { ShortVideoViewerLocalization } from './short-video-viewer-localization';
-import type { ShortVideoViewerHeadingModel } from './types';
-type Props = {
-    model: ShortVideoViewerHeadingModel;
-    localization: ShortVideoViewerLocalization;
-};
-declare const Cmp: import("svelte").Component<Props, {}, "">;
-type Cmp = ReturnType<typeof Cmp>;
-export default Cmp;

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

@@ -1,26 +0,0 @@
-<script lang="ts">import { ProductCard } from '../../products/product-card';
-import { onMount } from 'svelte';
-let { product, videoId, locale, includeBeforeNowPrefix, inert = false, on } = $props();
-let productElement;
-const productData = product;
-onMount(() => {
-    if (productElement && (on === null || on === void 0 ? void 0 : on.impression)) {
-        const observer = new IntersectionObserver((entries) => {
-            entries.forEach((entry) => {
-                if (entry.isIntersecting && entry.intersectionRatio >= 0.5) {
-                    on.impression(product.id, videoId);
-                    observer.unobserve(entry.target);
-                }
-            });
-        }, { threshold: 0.5 });
-        observer.observe(productElement);
-        return () => {
-            observer.disconnect();
-        };
-    }
-});
-</script>
-
-<div bind:this={productElement}>
-  <ProductCard product={productData} locale={locale} includeBeforeNowPrefix={includeBeforeNowPrefix} inert={inert} on={on} />
-</div>

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

@@ -1,16 +0,0 @@
-import type { Locale } from '../../core/locale';
-import type { ShortVideoProductCardModel } from './types';
-type Props = {
-    product: ShortVideoProductCardModel;
-    videoId: string;
-    locale?: Locale;
-    includeBeforeNowPrefix?: boolean;
-    inert?: boolean;
-    on?: {
-        productClick?: (id: string) => void;
-        impression?: (productId: string, videoId: 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.short-video-viewer.svelte

@@ -1,146 +0,0 @@
-<script lang="ts">import { Image } from '../../ui/image';
-import { LineClamp } from '../../ui/line-clamp';
-import { Video } from '../../ui/video';
-import { default as AttachmentsHorizontal } from './cmp.attachments-horizontal.svelte';
-import { default as ShortVideoControls } from './cmp.short-video-controls.svelte';
-import { default as ShortVideoHeading } from './cmp.short-video-heading.svelte';
-import { ShortVideoViewerLocalization } from './short-video-viewer-localization';
-import { ShortVideoViewerUiManager } from './ui-manager.svelte';
-let { model, socialInteractionsHandler, showAttachments = true, showControls = true, autoplay = 'on-appearance', locale = 'en', on } = $props();
-const localization = $derived(new ShortVideoViewerLocalization(locale));
-const uiManager = new ShortVideoViewerUiManager();
-$effect(() => {
-    uiManager.updateCanShowAttachments(showAttachments);
-    uiManager.updateCanShowControls(showControls);
-});
-const trackControlsPanelSize = (node) => {
-    const resizeObserver = new ResizeObserver(([entry]) => {
-        const width = entry.contentRect.width;
-        uiManager.setControlsPanelWidth(width);
-    });
-    resizeObserver.observe(node);
-    return {
-        destroy() {
-            resizeObserver.unobserve(node);
-        }
-    };
-};
-</script>
-
-<div class="short-video-viewer" style={uiManager.globalCssVariables}>
-  {#if !model.media.isImage}
-    <Video
-      src={model.media.url}
-      poster={model.media.thumbnailUrl}
-      controls={false}
-      autoplay={autoplay}
-      loop={true}
-      id={model.id}
-      hideSpeaker={true}
-      on={{
-        progress: on?.progress
-      }} />
-  {:else}
-    <Image src={model.media.url} />
-  {/if}
-  <div class="short-video-viewer__information">
-    {#if model.heading}
-      <div class="short-video-viewer__heading">
-        <ShortVideoHeading model={model.heading} localization={localization} />
-      </div>
-    {/if}
-    <div class="short-video-viewer__text">
-      {#if model.text}
-        <LineClamp value={model.text} maxLines={2} enableShowMore={true} />
-      {/if}
-    </div>
-    {#if uiManager.showAttachments && model.hasAttachments}
-      <div class="short-video-viewer__attachments">
-        <AttachmentsHorizontal
-          model={model}
-          on={{
-            productClick: on?.productClick,
-            productImpression: on?.productImpression,
-            adClick: on?.adClick,
-            adImpression: on?.adImpression
-          }} />
-      </div>
-    {/if}
-  </div>
-
-  <div class="short-video-viewer__controls-panel" use:trackControlsPanelSize>
-    {#if uiManager.showControls}
-      <ShortVideoControls model={model} socialInteractionsHandler={socialInteractionsHandler} on={{ attachmentsClicked: uiManager.toggleEnableAttachments }} />
-    {/if}
-  </div>
-</div>
-
-<style>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.short-video-viewer {
-  --video--media-fit: cover;
-  width: 100%;
-  min-width: 100%;
-  max-width: 100%;
-  height: 100%;
-  min-height: 100%;
-  max-height: 100%;
-  border-radius: 0.375rem;
-  overflow: hidden;
-  position: relative;
-  /* Set 'container-type: inline-size;' to reference container*/
-}
-@container (width < 576px) {
-  .short-video-viewer {
-    border-radius: 0;
-    position: relative;
-  }
-}
-.short-video-viewer__controls-panel {
-  position: absolute;
-  left: auto;
-  right: 0.625rem;
-  top: 5rem;
-  bottom: 6.25rem;
-  gap: 2.5rem;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-end;
-  align-items: flex-end;
-}
-.short-video-viewer__information {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  padding: 1.875rem 0;
-  background: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0) 100%);
-  --_short-video-viewer--information--padding-horizontal: 1.25rem;
-  --_short-video-viewer--information--padding-right: calc(1.875rem + var(--_short-video-viewer--controls-panel--width));
-}
-.short-video-viewer__heading {
-  --short-video-heading--padding: 0 var(--_short-video-viewer--information--padding-right) 0.875rem
-    var(--_short-video-viewer--information--padding-horizontal);
-  --short-video-heading--text--color: #ffffff;
-  --short-video-heading--meta--color: #ffffff;
-}
-.short-video-viewer__text {
-  color: #ffffff;
-  font-size: 1.125rem;
-  font-weight: 400;
-  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 6px rgba(0, 0, 0, 0.05);
-  padding: 0 var(--_short-video-viewer--information--padding-right) 0 var(--_short-video-viewer--information--padding-horizontal);
-}
-.short-video-viewer__attachments {
-  margin-top: 1.25rem;
-  --short-video-attachments-horizontal--padding-horizontal: var(--_short-video-viewer--information--padding-horizontal);
-}</style>

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

@@ -1,5 +0,0 @@
-export { default as ShortVideoViewer } from './cmp.short-video-viewer.svelte';
-export { default as ShortVideoControls } from './cmp.short-video-controls.svelte';
-export { default as ShortVideoViewerAttachments } from './cmp.attachments.svelte';
-export type { ShortVideoViewerModel, IPostSocialInteractionsHandler, ShortVideoAdCardModel, ShortVideoProductCardModel } from './types';
-export { mapToShortVideoViewerModel } from './mapper';

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

@@ -1,4 +0,0 @@
-export { default as ShortVideoViewer } from './cmp.short-video-viewer.svelte';
-export { default as ShortVideoControls } from './cmp.short-video-controls.svelte';
-export { default as ShortVideoViewerAttachments } from './cmp.attachments.svelte';
-export { mapToShortVideoViewerModel } from './mapper';

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

@@ -1,3 +0,0 @@
-import type { ShortVideoViewerPayloadFragment } from './operations.generated';
-import type { ShortVideoViewerModel } from './types';
-export declare const mapToShortVideoViewerModel: (payload: ShortVideoViewerPayloadFragment) => ShortVideoViewerModel;

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

@@ -1,5 +0,0 @@
-import { type Locale } from '../../core/locale';
-export declare class ShortVideoAttachmentsLocalization {
-    productLocale: Locale;
-    constructor(locale: Locale);
-}

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

@@ -1,7 +0,0 @@
-import {} from '../../core/locale';
-export class ShortVideoAttachmentsLocalization {
-    productLocale;
-    constructor(locale) {
-        this.productLocale = locale;
-    }
-}

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

@@ -1,261 +0,0 @@
-<script lang="ts">import { slideHorizontally } from '../../core/transitions';
-import { ShortVideoControls, ShortVideoViewerAttachments } from '../short-video-viewer';
-import { Icon } from '../../ui/icon';
-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';
-let { buffer, uiManager, localization, socialInteractionsHandler, playerLogo, on } = $props();
-const shortVideo = $derived(buffer.current);
-const changeShowAttachments = () => {
-    uiManager.showAttachments = !uiManager.showAttachments;
-};
-const trackAttachmentsPanelSize = (node) => {
-    const resizeObserver = new ResizeObserver(([entry]) => {
-        const width = entry.contentRect.width;
-        uiManager.setAttachmentsPanelWidth(width);
-    });
-    resizeObserver.observe(node);
-    return {
-        destroy() {
-            resizeObserver.unobserve(node);
-        }
-    };
-};
-const trackNavigationButtonsSize = (node) => {
-    const resizeObserver = new ResizeObserver(([entry]) => {
-        const width = entry.contentRect.width;
-        uiManager.setNavigationButtonsBlockWidth(width);
-    });
-    resizeObserver.observe(node);
-    return {
-        destroy() {
-            resizeObserver.unobserve(node);
-        }
-    };
-};
-</script>
-
-{#if uiManager.viewInitialized && (!uiManager.showShortVideoOverlayAttachments || !uiManager.showShortVideoOverlayControls)}
-  <div class="short-videos-player-controls" class:short-videos-player-controls--with-logo={!!playerLogo}>
-    {#if !uiManager.showShortVideoOverlayControls}
-      <div class="short-videos-player-controls__left">
-        {#if shortVideo}
-          <div class="short-videos-player-controls__short-video-controls">
-            <ShortVideoControls model={shortVideo} socialInteractionsHandler={socialInteractionsHandler} on={{ attachmentsClicked: changeShowAttachments }} />
-          </div>
-        {/if}
-        <div class="short-videos-player-controls__navigation-buttons" use:trackNavigationButtonsSize>
-          <button type="button" class="navigation-button" disabled={!buffer.canLoadPrevious} onclick={buffer.loadPrevious}>
-            <span class="navigation-button__icon">
-              <Icon src={IconChevronUp} />
-            </span>
-          </button>
-          <button type="button" class="navigation-button" disabled={!buffer.canLoadNext} onclick={buffer.loadNext}>
-            <span class="navigation-button__icon">
-              <Icon src={IconChevronDown} />
-            </span>
-          </button>
-        </div>
-      </div>
-    {/if}
-
-    <div class="short-videos-player-controls__right" use:trackAttachmentsPanelSize>
-      {#if !uiManager.showShortVideoOverlayAttachments}
-        {#if playerLogo}
-          <div class="short-videos-player-controls__player-logo">
-            <img src={playerLogo} class="short-videos-player-controls__logo-img" alt="Player Logo" />
-          </div>
-        {/if}
-        {#if shortVideo?.hasAttachments && uiManager.showAttachments}
-          <div class="short-videos-player-controls__short-video-attachments" transition:slideHorizontally|local>
-            <ShortVideoViewerAttachments
-              shortVideo={shortVideo}
-              locale={localization.shortVideoAttachmentsLocale}
-              on={{
-                productClick: on.productClick,
-                productImpression: on.productImpression,
-                adClick: on.adClick,
-                adImpression: on.adImpression
-              }} />
-          </div>
-        {/if}
-      {/if}
-    </div>
-  </div>
-{/if}
-
-{#if on.closePlayer}
-  <button type="button" class="close-button" onclick={on.closePlayer}>
-    <Icon src={IconDismiss} />
-  </button>
-{/if}
-
-<style>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.short-videos-player-controls {
-  position: absolute;
-  top: 0;
-  right: 0;
-  height: 100%;
-  width: var(--short-videos-player--controls--available-space);
-  display: flex;
-  justify-content: space-between;
-  padding: var(--short-videos-player--controls--padding);
-  container-type: inline-size;
-}
-.short-videos-player-controls--with-logo {
-  padding-top: 0;
-}
-.short-videos-player-controls__left {
-  display: flex;
-  flex-direction: column;
-  gap: 2.3125rem;
-  justify-content: flex-end;
-  align-items: center;
-  padding-top: var(--short-videos-player--media-center-header--height);
-  opacity: var(--short-videos-player--elements-opacity);
-  transition: opacity 0.3s ease-in-out;
-}
-.short-videos-player-controls__right {
-  flex: 1;
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-end;
-  flex-direction: column;
-  overflow-x: hidden;
-  overflow-y: auto;
-  scrollbar-color: transparent transparent;
-  scrollbar-width: thin;
-  scrollbar-gutter: stable;
-}
-.short-videos-player-controls__right::-webkit-scrollbar {
-  width: 3px;
-  height: 3px;
-  background: transparent;
-}
-.short-videos-player-controls__right::-webkit-scrollbar-thumb {
-  background: transparent;
-}
-.short-videos-player-controls__right:hover {
-  scrollbar-color: var(--custom-scrollbar-color, #7d7d7d) var(--custom-scrollbar-background, transparent);
-  scrollbar-width: thin;
-}
-.short-videos-player-controls__right:hover::-webkit-scrollbar {
-  width: 3px;
-  height: 3px;
-  background: var(--custom-scrollbar-background, transparent);
-}
-.short-videos-player-controls__right:hover::-webkit-scrollbar-thumb {
-  background: var(--custom-scrollbar-color, #7d7d7d);
-}
-.short-videos-player-controls__short-video-controls {
-  gap: 2.5rem;
-  display: flex;
-  flex: 1;
-  min-height: 0;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: flex-end;
-  --short-video-controls--icon--size: 1.75rem;
-}
-.short-videos-player-controls__player-logo {
-  width: var(--short-videos-player--controls--attachments--max-width);
-  max-width: var(--short-videos-player--controls--attachments--max-width);
-  height: var(--short-videos-player--media-center-header--height);
-  min-height: var(--short-videos-player--media-center-header--height);
-  max-height: var(--short-videos-player--media-center-header--height);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.short-videos-player-controls__logo-img {
-  width: 6.25rem;
-  min-width: 6.25rem;
-  max-width: 6.25rem;
-}
-.short-videos-player-controls__short-video-attachments {
-  flex: 1;
-  width: var(--short-videos-player--controls--attachments--max-width);
-  max-width: var(--short-videos-player--controls--attachments--max-width);
-  opacity: var(--short-videos-player--elements-opacity);
-  transition: opacity 0.3s ease-in-out;
-}
-.short-videos-player-controls__navigation-buttons {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  margin-bottom: 0.625rem;
-  z-index: 1;
-}
-
-.close-button {
-  width: 3rem;
-  min-width: 3rem;
-  max-width: 3rem;
-  height: 3rem;
-  min-height: 3rem;
-  max-height: 3rem;
-  background-color: rgba(0, 0, 0, 0.6);
-  border: 1px solid #1c1c1c;
-  border-radius: 50%;
-  text-align: center;
-  --icon--color: #ffffff;
-  --icon--size: 1.75rem;
-  position: absolute;
-  top: 0.9375rem;
-  left: 0.625rem;
-  z-index: 1;
-  /* Set 'container-type: inline-size;' to reference container*/
-}
-.close-button:disabled {
-  opacity: 0.5;
-  cursor: default;
-}
-.close-button:hover {
-  background-color: rgba(0, 0, 0, 0.9);
-  transition: background-color 0.5s;
-}
-@container (width < 576px) {
-  .close-button {
-    left: unset;
-    right: 0.625rem;
-  }
-}
-
-.navigation-button {
-  --_icon-scale: 1;
-  width: 3rem;
-  min-width: 3rem;
-  max-width: 3rem;
-  height: 3rem;
-  min-height: 3rem;
-  max-height: 3rem;
-  background-color: rgba(0, 0, 0, 0.6);
-  border: 1px solid #1c1c1c;
-  border-radius: 50%;
-  text-align: center;
-  --icon--color: #ffffff;
-  --icon--size: 1.75rem;
-}
-.navigation-button:disabled {
-  opacity: 0.5;
-  cursor: default;
-}
-.navigation-button:hover:not(:disabled) {
-  --_icon-scale: 1.2;
-}
-.navigation-button__icon {
-  display: block;
-  transform: scale(var(--_icon-scale));
-  transition: 0.3s;
-}</style>

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

@@ -1,22 +0,0 @@
-import { type IPostSocialInteractionsHandler } from '../short-video-viewer';
-import type { IPlayerBuffer } from '../../ui/player';
-import { ShortVideosPlayerLocalization } from './short-videos-player-localization';
-import type { ShortVideoPlayerModel } from './types';
-import type { ShortVideosPlayerUiManager } from './ui-manager.svelte';
-type Props = {
-    buffer: IPlayerBuffer<ShortVideoPlayerModel>;
-    uiManager: ShortVideosPlayerUiManager;
-    localization: ShortVideosPlayerLocalization;
-    socialInteractionsHandler?: IPostSocialInteractionsHandler;
-    playerLogo: string | null;
-    on: {
-        closePlayer?: () => void;
-        productClick?: (productId: string) => void;
-        productImpression?: (productId: string, videoId: string) => void;
-        adClick?: (adId: string) => void;
-        adImpression?: (adId: string) => void;
-    };
-};
-declare const Controls: import("svelte").Component<Props, {}, "">;
-type Controls = ReturnType<typeof Controls>;
-export default Controls;

package/dist/short-videos/short-videos-player/fade-mixins.scss

@@ -1,12 +0,0 @@
-@mixin default-opacity {
-  --short-videos-player--elements-opacity: 1;
-}
-
-@mixin fade-opacity {
-  --short-videos-player--elements-opacity: 0;
-}
-
-@mixin handle-fade {
-  opacity: var(--short-videos-player--elements-opacity);
-  transition: opacity 0.3s ease-in-out;
-}

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

@@ -1,7 +0,0 @@
-import { type Locale } from '../../core/locale';
-export declare class ShortVideosPlayerLocalization {
-    shortVideoAttachmentsLocale: Locale;
-    shortVideoViewerLocale: Locale;
-    swipeIndicatorLocale: Locale;
-    constructor(locale: Locale);
-}

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

@@ -1,11 +0,0 @@
-import {} from '../../core/locale';
-export class ShortVideosPlayerLocalization {
-    shortVideoAttachmentsLocale;
-    shortVideoViewerLocale;
-    swipeIndicatorLocale;
-    constructor(locale) {
-        this.shortVideoAttachmentsLocale = locale;
-        this.shortVideoViewerLocale = locale;
-        this.swipeIndicatorLocale = locale;
-    }
-}

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

@@ -1,24 +0,0 @@
-export declare class ShortVideosPlayerUiManager {
-    showAttachments: boolean;
-    globalCssVariables: string;
-    isMobileView: boolean;
-    viewInitialized: boolean;
-    showShortVideoOverlayAttachments: boolean;
-    showShortVideoOverlayControls: boolean;
-    private _viewTotalWidth;
-    private _mainViewColumnWidth;
-    private _mediaCenterHeaderHeight;
-    private _controlsAttachmentsPanelWidth;
-    private _controlsNavigationButtonsWidth;
-    private _controlsAvailableSpace;
-    private _controlsContentWidth;
-    get viewTotalWidth(): number;
-    get mainViewColumnWidth(): number;
-    updateDimensions: (dimensions: {
-        viewTotalWidth: number;
-        mainViewColumnWidth: number;
-    }) => void;
-    updateMediaCenterHeaderHeight: (height: number) => void;
-    setAttachmentsPanelWidth: (width: number) => void;
-    setNavigationButtonsBlockWidth: (width: number) => void;
-}