@streamscloud/embeddable 7.0.1 → 7.0.2-1759149696160

package/dist/short-videos/short-videos-player/ui-manager.svelte.js

@@ -1,47 +0,0 @@
-const CONTROLS_PADDING_HORIZONTAL = 28;
-const CONTROLS_PADDING_VERTICAL = 28;
-const CONTROLS_ATTACHMENTS_MAX_WIDTH = 176;
-const PLAYER_PADDING_VERTICAL = 10;
-export class ShortVideosPlayerUiManager {
-    showAttachments = $state(true);
-    globalCssVariables = $derived.by(() => {
-        const values = [
-            `--short-videos-player--controls--attachments--max-width: ${CONTROLS_ATTACHMENTS_MAX_WIDTH}px`,
-            `--short-videos-player--controls--available-space: ${this._controlsAvailableSpace}px`,
-            `--short-videos-player--controls--padding: ${this._mediaCenterHeaderHeight ? 0 : CONTROLS_PADDING_VERTICAL}px ${CONTROLS_PADDING_HORIZONTAL}px ${CONTROLS_PADDING_VERTICAL}px`,
-            `--short-videos-player--media-center-header--height: ${this._mediaCenterHeaderHeight || 72}px`,
-            `--short-videos-player--padding: ${this._mediaCenterHeaderHeight ? this._mediaCenterHeaderHeight : PLAYER_PADDING_VERTICAL}px 0 ${PLAYER_PADDING_VERTICAL}px`
-        ];
-        return values.join(';');
-    });
-    isMobileView = $derived.by(() => this._viewTotalWidth <= 576);
-    viewInitialized = $derived.by(() => !!this._viewTotalWidth && !!this._mainViewColumnWidth);
-    showShortVideoOverlayAttachments = $derived.by(() => this.viewInitialized && this._controlsAttachmentsPanelWidth < CONTROLS_ATTACHMENTS_MAX_WIDTH + 10);
-    showShortVideoOverlayControls = $derived.by(() => this.viewInitialized && this._controlsContentWidth < this._controlsNavigationButtonsWidth);
-    _viewTotalWidth = $state(0);
-    _mainViewColumnWidth = $state(0);
-    _mediaCenterHeaderHeight = $state(0);
-    _controlsAttachmentsPanelWidth = $state(0);
-    _controlsNavigationButtonsWidth = $state(0);
-    _controlsAvailableSpace = $derived.by(() => (this._viewTotalWidth - this._mainViewColumnWidth) / 2);
-    _controlsContentWidth = $derived.by(() => this._controlsAvailableSpace - CONTROLS_PADDING_HORIZONTAL * 2);
-    get viewTotalWidth() {
-        return this._viewTotalWidth;
-    }
-    get mainViewColumnWidth() {
-        return this._mainViewColumnWidth;
-    }
-    updateDimensions = (dimensions) => {
-        this._viewTotalWidth = dimensions.viewTotalWidth;
-        this._mainViewColumnWidth = dimensions.mainViewColumnWidth;
-    };
-    updateMediaCenterHeaderHeight = (height) => {
-        this._mediaCenterHeaderHeight = height;
-    };
-    setAttachmentsPanelWidth = (width) => {
-        this._controlsAttachmentsPanelWidth = width;
-    };
-    setNavigationButtonsBlockWidth = (width) => {
-        this._controlsNavigationButtonsWidth = width;
-    };
-}

package/dist/streams/cmp.stream-product-card.svelte

@@ -1,25 +0,0 @@
-<script lang="ts">import { ProductCard } from '../products/product-card';
-import { onMount } from 'svelte';
-let { product, streamId, locale, includeBeforeNowPrefix, inert = false, on } = $props();
-let productElement;
-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, streamId);
-                    observer.unobserve(entry.target);
-                }
-            });
-        }, { threshold: 0.5 });
-        observer.observe(productElement);
-        return () => {
-            observer.disconnect();
-        };
-    }
-});
-</script>
-
-<div bind:this={productElement}>
-  <ProductCard product={product} locale={locale} includeBeforeNowPrefix={includeBeforeNowPrefix} inert={inert} on={on} />
-</div>

package/dist/streams/cmp.stream-product-card.svelte.d.ts

@@ -1,16 +0,0 @@
-import type { Locale } from '../core/locale';
-import type { ProductCardModel } from '../products/product-card/types';
-type Props = {
-    product: ProductCardModel;
-    streamId: string;
-    locale?: Locale;
-    includeBeforeNowPrefix?: boolean;
-    inert?: boolean;
-    on?: {
-        productClick?: (id: string) => void;
-        impression?: (productId: string, streamId: string) => void;
-    };
-};
-declare const Cmp: import("svelte").Component<Props, {}, "">;
-type Cmp = ReturnType<typeof Cmp>;
-export default Cmp;

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

@@ -1,301 +0,0 @@
-<script lang="ts">var _a, _b;
-import { slideHorizontally } from '../../core/transitions';
-import { ShortVideoViewerAttachments } from '../../short-videos/short-video-viewer';
-import { ShortVideoControls } from '../../short-videos/short-video-viewer/index.js';
-import { StreamElementType } from '../layout/enums';
-import { mapToShortVideoViewerModel } from '../layout/models';
-import { Icon } from '../../ui/icon';
-import { StreamPlayerLocalization } from './stream-player-localization';
-import IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_28_regular.svg?raw';
-import IconChevronUp from '@fluentui/svg-icons/icons/chevron_up_28_regular.svg?raw';
-import IconDismiss from '@fluentui/svg-icons/icons/dismiss_28_regular.svg?raw';
-let { buffer, uiManager, postSocialInteractionsHandler, localization, on, playerLogo, showCloseButton } = $props();
-const shortVideo = $derived(((_a = buffer.current) === null || _a === void 0 ? void 0 : _a.type) === 'short-video' && ((_b = buffer.current) === null || _b === void 0 ? void 0 : _b.shortVideo) ? mapToShortVideoViewerModel(buffer.current.shortVideo) : null);
-const singleWebViewPage = $derived.by(() => {
-    var _a;
-    if (((_a = buffer.current) === null || _a === void 0 ? void 0 : _a.type) !== 'general') {
-        return false;
-    }
-    const layout = buffer.current.layout;
-    const collectRenderableElements = (elements) => {
-        const renderableElements = [];
-        for (const element of elements) {
-            if (element.type === StreamElementType.Container) {
-                if (element.elements) {
-                    renderableElements.push(...collectRenderableElements(element.elements));
-                }
-            }
-            else {
-                renderableElements.push(element);
-            }
-        }
-        return renderableElements;
-    };
-    const allRenderableElements = [];
-    for (const slot of layout.slots) {
-        for (const component of slot.components) {
-            if (component.elements) {
-                allRenderableElements.push(...collectRenderableElements(component.elements));
-            }
-        }
-    }
-    return allRenderableElements.length === 1 && allRenderableElements[0].type === StreamElementType.WebView;
-});
-const changeShowShortVideoAttachments = () => {
-    uiManager.showShortVideoAttachments = !uiManager.showShortVideoAttachments;
-};
-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="stream-player-controls" class:stream-player-controls--with-logo={!!playerLogo}>
-    {#if !uiManager.showShortVideoOverlayControls}
-      <div class="stream-player-controls__left">
-        {#if shortVideo}
-          <div class="stream-player-controls__short-video-controls">
-            <ShortVideoControls
-              model={shortVideo}
-              socialInteractionsHandler={postSocialInteractionsHandler}
-              on={{ attachmentsClicked: changeShowShortVideoAttachments }} />
-          </div>
-        {/if}
-        <div
-          class="stream-player-controls__navigation-buttons"
-          class:stream-player-controls__navigation-buttons--single-web-view-page={singleWebViewPage}
-          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="stream-player-controls__right" use:trackAttachmentsPanelSize>
-      {#if !uiManager.showShortVideoOverlayAttachments}
-        {#if playerLogo}
-          <div class="stream-player-controls__player-logo">
-            <img src={playerLogo} class="stream-player-controls__logo-img" alt="Player Logo" />
-          </div>
-        {/if}
-        {#if shortVideo?.hasAttachments && uiManager.showShortVideoAttachments}
-          <div class="stream-player-controls__short-video-attachments" transition:slideHorizontally|local>
-            <ShortVideoViewerAttachments
-              shortVideo={shortVideo}
-              locale={localization.shortVideoAttachmentsLocale}
-              on={{
-                productClick: on.productClick,
-                productImpression: on.productImpression
-              }} />
-          </div>
-        {/if}
-      {/if}
-    </div>
-  </div>
-{/if}
-
-{#if showCloseButton}
-  <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;
-  }
-}
-.stream-player-controls {
-  position: absolute;
-  top: 0;
-  right: 0;
-  height: 100%;
-  width: var(--stream-player--controls--available-space);
-  display: flex;
-  justify-content: space-between;
-  padding: var(--stream-player--controls--padding);
-  container-type: inline-size;
-}
-.stream-player-controls--with-logo {
-  padding-top: 0;
-}
-.stream-player-controls__left {
-  display: flex;
-  flex-direction: column;
-  gap: 2.3125rem;
-  justify-content: flex-end;
-  align-items: center;
-  padding-top: var(--stream-player--media-center-header--height);
-  opacity: var(--stream-player--elements-opacity);
-  transition: opacity 0.3s ease-in-out;
-}
-.stream-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;
-}
-.stream-player-controls__right::-webkit-scrollbar {
-  width: 3px;
-  height: 3px;
-  background: transparent;
-}
-.stream-player-controls__right::-webkit-scrollbar-thumb {
-  background: transparent;
-}
-.stream-player-controls__right:hover {
-  scrollbar-color: var(--custom-scrollbar-color, #7d7d7d) var(--custom-scrollbar-background, transparent);
-  scrollbar-width: thin;
-}
-.stream-player-controls__right:hover::-webkit-scrollbar {
-  width: 3px;
-  height: 3px;
-  background: var(--custom-scrollbar-background, transparent);
-}
-.stream-player-controls__right:hover::-webkit-scrollbar-thumb {
-  background: var(--custom-scrollbar-color, #7d7d7d);
-}
-.stream-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;
-}
-.stream-player-controls__player-logo {
-  width: var(--stream-player--controls--attachments--max-width);
-  max-width: var(--stream-player--controls--attachments--max-width);
-  height: var(--stream-player--media-center-header--height);
-  min-height: var(--stream-player--media-center-header--height);
-  max-height: var(--stream-player--media-center-header--height);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.stream-player-controls__logo-img {
-  width: 6.25rem;
-  min-width: 6.25rem;
-  max-width: 6.25rem;
-}
-.stream-player-controls__short-video-attachments {
-  flex: 1;
-  width: var(--stream-player--controls--attachments--max-width);
-  max-width: var(--stream-player--controls--attachments--max-width);
-  opacity: var(--stream-player--elements-opacity);
-  transition: opacity 0.3s ease-in-out;
-}
-.stream-player-controls__navigation-buttons {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  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: calc(var(--stream-player--overview--width) + 0.625rem);
-  z-index: 1;
-  /* Set 'container-type: inline-size;' to reference container*/
-}
-.close-button:hover {
-  background-color: rgba(0, 0, 0, 0.9);
-  transition: background-color 0.5s;
-}
-.close-button:disabled {
-  opacity: 0.5;
-  cursor: default;
-}
-@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:hover {
-  background-color: rgba(0, 0, 0, 0.9);
-  transition: background-color 0.5s;
-}
-.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/streams/stream-player/controls.svelte.d.ts

@@ -1,20 +0,0 @@
-import { type IPostSocialInteractionsHandler } from '../../short-videos/short-video-viewer';
-import type { StreamPlayerBuffer } from './stream-player-buffer.svelte';
-import { StreamPlayerLocalization } from './stream-player-localization';
-import type { StreamPlayerUiManager } from './ui-manager.svelte';
-type Props = {
-    buffer: StreamPlayerBuffer;
-    uiManager: StreamPlayerUiManager;
-    postSocialInteractionsHandler?: IPostSocialInteractionsHandler;
-    localization: StreamPlayerLocalization;
-    playerLogo: string | null;
-    showCloseButton: boolean;
-    on: {
-        closePlayer: () => void;
-        productClick?: (productId: string) => void;
-        productImpression?: (productId: string) => void;
-    };
-};
-declare const Controls: import("svelte").Component<Props, {}, "">;
-type Controls = ReturnType<typeof Controls>;
-export default Controls;

package/dist/streams/stream-player/fade-mixins.scss

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