@streamscloud/embeddable 6.4.3 → 6.5.0

package/dist/streams/stream-player/ui-manager.svelte.js

@@ -1,32 +1,53 @@
+const CONTROLS_PADDING_HORIZONTAL = 28;
+const CONTROLS_PADDING_VERTICAL = 28;
+const CONTROLS_ATTACHMENTS_MAX_WIDTH = 176;
+const PLAYER_PADDING_VERTICAL = 10;
 export class StreamPlayerUiManager {
     overviewCollapsed = $state(false);
     showShortVideoAttachments = $state(true);
     globalCssVariables = $derived.by(() => {
         const values = [
-            `--stream-player--button--size: ${this.buttonSize}px`,
-            `--stream-player--icon--size: ${this.iconSize}px`,
-            `--stream-player--controls--offset-horizontal: ${this.controlsOffsetHorizontal}px`,
-            `--stream-player--controls--offset-vertical: ${this.controlsOffsetVertical}px`,
-            `--stream-player--overview--width: ${this.overviewWidth}px`,
-            `--stream-player--sidebar--available-space: ${(this.viewTotalWidth - this.mainViewColumnWidth) / 2}px`
+            `--stream-player--controls--attachments--max-width: ${CONTROLS_ATTACHMENTS_MAX_WIDTH}px`,
+            `--stream-player--controls--available-space: ${this._controlsAvailableSpace}px`,
+            `--stream-player--controls--padding: ${this._mediaCenterHeaderHeight ? 0 : CONTROLS_PADDING_VERTICAL}px ${CONTROLS_PADDING_HORIZONTAL}px ${CONTROLS_PADDING_VERTICAL}px`,
+            `--stream-player--media-center-header--height: ${this._mediaCenterHeaderHeight || 72}px`,
+            `--stream-player--overview--width: ${this._overviewWidth}px`,
+            `--stream-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);
-    showShortVideoOverlay = $derived.by(() => this.viewInitialized && (this.viewTotalWidth - this.mainViewColumnWidth) / 2 <= 85);
-    buttonSize = 48;
-    iconSize = 28;
-    controlsOffsetHorizontal = 28;
-    controlsOffsetVertical = 28;
-    viewTotalWidth = $state(0);
-    mainViewColumnWidth = $state(0);
-    overviewWidth = $state(0);
+    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._controlsNavitagionButtonsWidth);
+    _viewTotalWidth = $state(0);
+    _mainViewColumnWidth = $state(0);
+    _mediaCenterHeaderHeight = $state(0);
+    _overviewWidth = $state(0);
+    _controlsAttachmentsPanelWidth = $state(0);
+    _controlsNavitagionButtonsWidth = $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;
+        this._viewTotalWidth = dimensions.viewTotalWidth;
+        this._mainViewColumnWidth = dimensions.mainViewColumnWidth;
     };
     updateOverviewWidth = (width) => {
-        this.overviewWidth = width;
+        this._overviewWidth = width;
+    };
+    updateMediaCenterHeaderHeight = (height) => {
+        this._mediaCenterHeaderHeight = height;
+    };
+    setAttachmentsPanelWidth = (width) => {
+        this._controlsAttachmentsPanelWidth = width;
+    };
+    setNavigationButtonsBlockWidth = (width) => {
+        this._controlsNavitagionButtonsWidth = width;
     };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/embeddable",
-  "version": "6.4.3",
+  "version": "6.5.0",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",

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

@@ -1,144 +0,0 @@
-<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';
-let { model, on } = $props();
-const attachmentsToShow = $derived.by(() => {
-    const products = model.products
-        .filter((p) => !!p.image)
-        .map((p) => ({
-        isAd: false,
-        image: p.image,
-        link: p.link,
-        productId: p.id,
-        adId: null
-    }));
-    const ads = (model.ad ? [model.ad] : [])
-        .filter((a) => !!a.image)
-        .map((a) => {
-        var _a;
-        return ({
-            isAd: true,
-            image: a.image,
-            link: ((_a = a.ctaButton) === null || _a === void 0 ? void 0 : _a.url) || null,
-            productId: null,
-            adId: a.id
-        });
-    });
-    const result = [...products, ...ads];
-    return result;
-});
-const handleAttachmentClick = (attachment) => {
-    if (attachment.productId && (on === null || on === void 0 ? void 0 : on.productClick)) {
-        on.productClick(attachment.productId);
-    }
-    if (attachment.adId && (on === null || on === void 0 ? void 0 : on.adClick)) {
-        on.adClick(attachment.adId);
-    }
-    if (attachment.link) {
-        window.open(attachment.link, '_blank');
-    }
-};
-let attachmentElements = $state({});
-let observer = null;
-$effect(() => {
-    if (((on === null || on === void 0 ? void 0 : on.productImpression) || (on === null || on === void 0 ? void 0 : on.adImpression)) && Object.keys(attachmentElements).length > 0) {
-        if (observer) {
-            observer.disconnect();
-        }
-        observer = new IntersectionObserver((entries) => {
-            entries.forEach((entry) => {
-                if (entry.isIntersecting && entry.intersectionRatio >= 0.1) {
-                    const productId = entry.target.getAttribute('data-product-id');
-                    const adId = entry.target.getAttribute('data-ad-id');
-                    if (productId && (on === null || on === void 0 ? void 0 : on.productImpression)) {
-                        on.productImpression(productId, model.id);
-                        observer === null || observer === void 0 ? void 0 : observer.unobserve(entry.target); // Only track once per session
-                    }
-                    else if (adId && (on === null || on === void 0 ? void 0 : on.adImpression)) {
-                        on.adImpression(adId, model.id);
-                        observer === null || observer === void 0 ? void 0 : observer.unobserve(entry.target); // Only track once per session
-                    }
-                }
-            });
-        }, { threshold: 0.1 });
-        Object.entries(attachmentElements).forEach(([key, element]) => {
-            if (element) {
-                observer === null || observer === void 0 ? void 0 : observer.observe(element);
-            }
-        });
-    }
-    return () => {
-        if (observer) {
-            observer.disconnect();
-            observer = null;
-        }
-    };
-});
-</script>
-
-<div class="attachments-inline-container">
-  <div class="attachments-inline">
-    {#each attachmentsToShow as attachment, index (attachment)}
-      <div
-        class="attachments-inline__item"
-        onclick={() => handleAttachmentClick(attachment)}
-        onkeydown={() => {}}
-        role="none"
-        bind:this={attachmentElements[attachment.productId ? `product-${attachment.productId}` : `ad-${attachment.adId}`]}
-        data-product-id={attachment.productId || undefined}
-        data-ad-id={attachment.adId || undefined}>
-        <ImageRounded src={attachment.image} alt="" />
-        {#if attachment.isAd}
-          <div class="attachments-inline__item-icon">
-            <Icon src={IconTargetArrow} color={IconColor.White} />
-          </div>
-        {/if}
-      </div>
-    {/each}
-  </div>
-</div>
-
-<style>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.attachments-inline-container {
-  flex: 1;
-  overflow: hidden;
-  min-height: 0;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-end;
-}
-
-.attachments-inline {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  flex-wrap: wrap;
-  height: 100%;
-  justify-content: flex-end;
-}
-.attachments-inline__item {
-  --image--rounded--width: 3.125rem;
-  --image--rounded--height: 3.75rem;
-  --image--rounded--inner--border-width: 0;
-  --image--rounded--outer--border-radius: 0.25rem;
-  --image--rounded--outer--border-width: 1px;
-  --image--rounded--outer--border-color: #f3f4f6;
-  position: relative;
-  cursor: pointer;
-}
-.attachments-inline__item-icon {
-  position: absolute;
-  bottom: 2px;
-  right: 2px;
-  --icon--size: 1rem;
-}</style>

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

@@ -1,26 +0,0 @@
-<script lang="ts">import { AdCard } from '../../ads/ad-card';
-import { onMount } from 'svelte';
-let { ad, videoId, inert = false, on } = $props();
-let adElement;
-const adData = ad;
-onMount(() => {
-    if (adElement && (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(ad.id, videoId);
-                    observer.unobserve(entry.target);
-                }
-            });
-        }, { threshold: 0.5 });
-        observer.observe(adElement);
-        return () => {
-            observer.disconnect();
-        };
-    }
-});
-</script>
-
-<div bind:this={adElement}>
-  <AdCard ad={adData} inert={inert} on={{ adClick: on?.adClick }} />
-</div>

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

@@ -1,13 +0,0 @@
-import type { ShortVideoAdCardModel } from './types';
-type Props = {
-    ad: ShortVideoAdCardModel;
-    videoId: string;
-    inert?: boolean;
-    on?: {
-        adClick?: (id: string) => void;
-        impression?: (adId: string, videoId: string) => void;
-    };
-};
-declare const Cmp: import("svelte").Component<Props, {}, "">;
-type Cmp = ReturnType<typeof Cmp>;
-export default Cmp;