@streamscloud/embeddable 6.4.2 → 6.5.0-1758183492920

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

@@ -1,133 +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
-    }));
-    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
-        });
-    });
-    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.link) {
-        window.open(attachment.link, '_blank');
-    }
-};
-let attachmentElements = $state({});
-let observer = null;
-$effect(() => {
-    if ((on === null || on === void 0 ? void 0 : on.productImpression) && 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');
-                    if (productId) {
-                        on.productImpression(productId, 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 && key.startsWith('product-')) {
-                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-${index}`]}
-        data-product-id={attachment.productId || 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>