@streamscloud/blocks 0.1.0

package/dist/content/analytics/index.d.ts

@@ -0,0 +1 @@
+export type { IContentAnalyticsHandler } from './types';

package/dist/content/analytics/index.js

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

package/dist/content/analytics/types.d.ts

@@ -0,0 +1,9 @@
+import type { ContentType } from '../../core/enums';
+export interface IContentAnalyticsHandler {
+    trackContentOpened: (contentType: ContentType, contentId: string) => void;
+    trackShortVideoView: (videoId: string) => void;
+    trackProductImpression: (productId: string, contentId: string) => void;
+    trackProductClick: (productId: string, contentId: string) => void;
+    trackCtaClick: (ctaId: string) => void;
+    trackCtaImpression: (ctaId: string) => void;
+}

package/dist/content/analytics/types.js

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

package/dist/content/content-viewer/attachments-horizontal.svelte

@@ -0,0 +1,210 @@
+<script lang="ts">import IconTargetArrow from '@fluentui/svg-icons/icons/target_arrow_20_regular.svg?raw';
+import { horizontalWheelScroll, swallowTouch } from '@streamscloud/kit/core/actions';
+import { toPriceRepresentation } from '@streamscloud/kit/core/utils';
+import { Icon } from '@streamscloud/kit/ui/icon';
+import { ImageRounded } from '@streamscloud/kit/ui/image';
+let { model, uiManager, on } = $props();
+const attachmentsToShow = $derived.by(() => {
+    if (!model.attachments) {
+        return [];
+    }
+    const products = model.attachments.products
+        .filter((p) => !!p.image)
+        .map((p) => ({
+        isCta: false,
+        image: p.image,
+        link: p.link,
+        productId: p.id,
+        ctaId: null,
+        price: {
+            amount: p.salePrice ?? p.price,
+            currency: p.currency
+        },
+        title: p.title,
+        description: p.shortDescription
+    }));
+    const ctas = model.attachments.ctas
+        .filter((c) => !!c.image)
+        .map((c) => ({
+        isCta: true,
+        image: c.image,
+        link: c.ctaButton?.url ?? null,
+        productId: null,
+        ctaId: c.id,
+        price: c.price && c.currency
+            ? {
+                amount: c.price,
+                currency: c.currency,
+                label: c.priceInfoLabel
+            }
+            : null,
+        title: c.title,
+        description: c.description
+    }));
+    return [...ctas, ...products];
+});
+const handleAttachmentClick = (attachment) => {
+    if (attachment.productId && on?.productClick) {
+        on.productClick(attachment.productId);
+    }
+    if (attachment.ctaId && on?.ctaClick) {
+        on.ctaClick(attachment.ctaId);
+    }
+    if (attachment.link) {
+        window.open(attachment.link, '_blank', 'noopener noreferrer');
+    }
+};
+const trackImpression = (node, attachment) => {
+    if (!on?.productImpression && !on?.ctaImpression) {
+        return;
+    }
+    let current = attachment;
+    const observer = new IntersectionObserver((entries) => {
+        entries.forEach((entry) => {
+            if (entry.isIntersecting && entry.intersectionRatio >= 0.1) {
+                if (current.productId && on?.productImpression) {
+                    on.productImpression(current.productId, model.id);
+                }
+                else if (current.ctaId && on?.ctaImpression) {
+                    on.ctaImpression(current.ctaId);
+                }
+                observer.unobserve(entry.target);
+            }
+        });
+    }, { threshold: 0.1 });
+    observer.observe(node);
+    return {
+        update(next) {
+            current = next;
+        },
+        destroy() {
+            observer.disconnect();
+        }
+    };
+};
+const variables = $derived.by(() => {
+    const paddingRight = uiManager.controlsPanelWidth ? 10 : uiManager.infoPaddingInline;
+    return `--_content-viewer--attachments-horizontal--padding-inline: ${uiManager.infoPaddingInline}px ${paddingRight}px`;
+});
+</script>
+
+<div class="attachments-horizontal" style={variables} use:horizontalWheelScroll use:swallowTouch>
+  {#each attachmentsToShow as attachment (attachment.productId ?? attachment.ctaId)}
+    <div
+      class="attachments-horizontal__item"
+      class:attachments-horizontal__item--single={attachmentsToShow.length === 1}
+      onclick={() => handleAttachmentClick(attachment)}
+      onkeydown={() => {}}
+      role="none"
+      use:trackImpression={attachment}>
+      <div class="attachments-card" class:attachments-card--single={attachmentsToShow.length === 1} class:attachments-card--dark={!attachment.isCta}>
+        <div class="attachments-card__thumb">
+          <ImageRounded src={attachment.image} alt="" />
+        </div>
+        <div class="attachments-card__content">
+          <div class="attachments-card__title" title={attachment.title}>
+            {attachment.title}
+          </div>
+          {#if attachment.price}
+            <div class="attachments-card__extra-info">
+              {#if attachment.price.label}
+                {attachment.price.label}<span>&nbsp;</span>
+              {/if}
+              {toPriceRepresentation({ amount: attachment.price.amount, currency: attachment.price.currency, options: { currencyMode: 'code' } })}
+            </div>
+          {:else if attachment.description}
+            <div class="attachments-card__extra-info" title={attachment.description}>
+              {attachment.description}
+            </div>
+          {/if}
+        </div>
+      </div>
+      {#if attachment.isCta}
+        <div class="attachments-horizontal__item-icon">
+          <Icon src={IconTargetArrow} />
+        </div>
+      {/if}
+    </div>
+  {/each}
+</div>
+
+<style>.attachments-horizontal {
+  pointer-events: auto;
+  display: flex;
+  gap: var(--sc-kit--space--2);
+  flex-wrap: nowrap;
+  width: 100%;
+  justify-content: flex-start;
+  overflow-x: auto;
+  padding-inline: var(--_content-viewer--attachments-horizontal--padding-inline);
+  scrollbar-width: none;
+  overscroll-behavior: none;
+}
+.attachments-horizontal__item {
+  position: relative;
+  cursor: pointer;
+  width: min-content;
+}
+.attachments-horizontal__item--single {
+  flex: 1 1 auto;
+  width: 100%;
+}
+.attachments-horizontal__item-icon {
+  position: absolute;
+  bottom: 2px;
+  right: 2px;
+  --sc-kit--icon--size: 1rem;
+  --sc-kit--icon--color: var(--sc-kit--color--text--on-accent);
+}
+
+.attachments-card {
+  --_attachments-card--background-color: #ffffff;
+  --_attachments-card--border-color: #e5e7eb;
+  --_attachments-card--text--color: #000000;
+  --_attachments-card--text--secondary--color: #6b7280;
+  display: grid;
+  grid-template-columns: 2.375rem 1fr;
+  grid-column-gap: var(--sc-kit--space--3);
+  align-items: center;
+  width: 15.625rem;
+  padding: 0.375rem;
+  background-color: rgb(from var(--_attachments-card--background-color) r g b/90%);
+  color: var(--_attachments-card--text--color);
+  border: 0.0625rem solid var(--_attachments-card--border-color);
+  border-radius: var(--sc-kit--radius--sm);
+}
+.attachments-card--dark {
+  --_attachments-card--background-color: #000000;
+  --_attachments-card--border-color: #000000;
+  --_attachments-card--text--color: #ffffff;
+  --_attachments-card--text--secondary--color: #d1d5db;
+}
+.attachments-card--single {
+  width: 100%;
+}
+.attachments-card__thumb {
+  --sc-kit--image--rounded--width: 2.375rem;
+  --sc-kit--image--rounded--height: 2.375rem;
+  overflow: hidden;
+  border-radius: 0.125rem;
+}
+.attachments-card__content {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+.attachments-card__title {
+  font-size: var(--sc-kit--font-size--md);
+  font-weight: var(--sc-kit--font-weight--semibold);
+  line-height: 1.0625rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.attachments-card__extra-info {
+  font-size: 0.625rem;
+  color: var(--_attachments-card--text--secondary--color);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}</style>

package/dist/content/content-viewer/attachments-horizontal.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { ContentModel } from '../model';
+import type { ContentViewerUiManager } from './ui-manager.svelte';
+type Props = {
+    model: ContentModel;
+    uiManager: ContentViewerUiManager;
+    on?: {
+        productClick?: (productId: string) => void;
+        productImpression?: (productId: string, videoId: string) => void;
+        ctaClick?: (ctaId: string) => void;
+        ctaImpression?: (ctaId: string) => void;
+    };
+};
+declare const AttachmentsHorizontal: import("svelte").Component<Props, {}, "">;
+type AttachmentsHorizontal = ReturnType<typeof AttachmentsHorizontal>;
+export default AttachmentsHorizontal;

package/dist/content/content-viewer/cmp.content-viewer.svelte

@@ -0,0 +1,143 @@
+<script lang="ts">import { default as AttachmentsHorizontal } from './attachments-horizontal.svelte';
+import { default as Texts } from './content-texts.svelte';
+import { ContentViewerLocalization } from './content-viewer-localization';
+import { default as Heading } from './heading.svelte';
+import { default as ContentMedia } from './media/content-media.svelte';
+import { ContentViewerUiManager } from './ui-manager.svelte';
+import { ResponsivePlayerButtons } from '@streamscloud/kit/ui/player/buttons';
+let { model, enableAttachments = true, controlActions, enableControls = true, autoplay = 'on-appearance', on, overlay } = $props();
+const localization = new ContentViewerLocalization();
+const uiManager = new ContentViewerUiManager();
+$effect(() => {
+    uiManager.enableAttachments = enableAttachments;
+    uiManager.enableControls = enableControls;
+});
+const viewerMounted = (node) => {
+    const resizeObserver = new ResizeObserver(() => {
+        uiManager.isMobileView = node.clientWidth <= 576;
+    });
+    resizeObserver.observe(node);
+    return {
+        destroy() {
+            resizeObserver.unobserve(node);
+        }
+    };
+};
+const trackControlsPanelSize = (node) => {
+    const resizeObserver = new ResizeObserver(() => {
+        uiManager.controlsPanelWidth = node.clientWidth;
+    });
+    resizeObserver.observe(node);
+    return {
+        destroy() {
+            resizeObserver.unobserve(node);
+            uiManager.controlsPanelWidth = 0;
+        }
+    };
+};
+const handleArticleReadMore = $derived.by(() => {
+    const articleId = model.articleId;
+    const handler = on?.articleReadMore;
+    if (!articleId || !handler) {
+        return undefined;
+    }
+    return () => handler(articleId);
+});
+const variables = $derived(model.media.isGallery ? '--_content-viewer--information--padding-bottom: 45px' : '');
+</script>
+
+<div class="content-viewer" style={variables} use:viewerMounted>
+  <ContentMedia id={model.id} media={model.media} autoplay={autoplay} on={{ videoProgress: on?.progress }} />
+  {#if (uiManager.showAttachments && model.attachments) || model.heading || model.texts.kicker || model.texts.title || model.texts.text || model.texts.readMoreUrl || handleArticleReadMore}
+    <div class="content-viewer__information">
+      {#if model.heading}
+        <Heading model={model.heading} uiManager={uiManager} localization={localization} />
+      {/if}
+      <Texts model={model.texts} uiManager={uiManager} localization={localization} on={{ readMore: handleArticleReadMore }} />
+
+      {#if uiManager.showAttachments && model.attachments}
+        <AttachmentsHorizontal
+          model={model}
+          uiManager={uiManager}
+          on={{
+            productClick: on?.productClick,
+            productImpression: on?.productImpression,
+            ctaClick: on?.ctaClick,
+            ctaImpression: on?.ctaImpression
+          }} />
+      {/if}
+    </div>
+  {/if}
+
+  {#if uiManager.showControls}
+    <div class="content-viewer__controls-panel" use:trackControlsPanelSize>
+      <ResponsivePlayerButtons actions={controlActions} scaleEffect={true} />
+    </div>
+  {/if}
+  {#if overlay}
+    {@render overlay()}
+  {/if}
+</div>
+
+<!--
+  @component
+  Content viewer — renders a piece of channel content (video, image, text) with player controls and an overlay slot.
+-->
+
+<style>.content-viewer {
+  width: 100%;
+  min-width: 100%;
+  max-width: 100%;
+  height: 100%;
+  min-height: 100%;
+  max-height: 100%;
+  border-radius: var(--sc-kit--radius--md);
+  overflow: hidden;
+  position: relative;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 576px) {
+  .content-viewer {
+    border-radius: 0;
+    position: relative;
+  }
+}
+.content-viewer__controls-panel {
+  position: absolute;
+  left: auto;
+  right: 0;
+  bottom: 6.25rem;
+  gap: var(--sc-kit--space--10);
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  align-items: flex-end;
+  padding: 0 0.625rem;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 576px) {
+  .content-viewer__controls-panel {
+    padding-right: 0;
+  }
+}
+.content-viewer__information {
+  pointer-events: none;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 1.875rem 0;
+  padding-bottom: var(--_content-viewer--information--padding-bottom, 1.875rem);
+  display: flex;
+  flex-direction: column;
+  gap: var(--sc-kit--space--5);
+  background: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0) 100%);
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 576px) {
+  .content-viewer__information {
+    padding-block: var(--sc-kit--space--5);
+    padding-bottom: var(--_content-viewer--information--padding-bottom, var(--sc-kit--space--5));
+    gap: 0.625rem;
+  }
+}</style>

package/dist/content/content-viewer/cmp.content-viewer.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { ContentModel } from '../model';
+import { type PlayerButtonDef } from '@streamscloud/kit/ui/player/buttons';
+import type { Snippet } from 'svelte';
+type Props = {
+    model: ContentModel;
+    enableAttachments?: boolean;
+    enableControls?: boolean;
+    controlActions: PlayerButtonDef[];
+    autoplay?: true | false | 'on-appearance';
+    on?: {
+        progress?: (progress: number) => void;
+        productClick?: (productId: string) => void;
+        productImpression?: (productId: string, videoId: string) => void;
+        ctaClick?: (ctaId: string) => void;
+        ctaImpression?: (ctaId: string) => void;
+        articleReadMore?: (articleId: string) => void;
+    };
+    overlay?: Snippet;
+};
+/** Content viewer — renders a piece of channel content (video, image, text) with player controls and an overlay slot. */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/content/content-viewer/content-texts.svelte

@@ -0,0 +1,96 @@
+<script lang="ts">import { LineClamp } from '@streamscloud/kit/ui/line-clamp';
+let { model, uiManager, localization, on } = $props();
+const variables = $derived(`--_content-viewer-texts--padding: 0 ${uiManager.controlsPanelWidth ? uiManager.controlsPanelWidth : uiManager.infoPaddingInline}px 0 ${uiManager.infoPaddingInline}px`);
+</script>
+
+<div class="content-viewer-texts" style={variables}>
+  {#if model.kicker}
+    <div class="content-viewer-texts__kicker">
+      <LineClamp maxLines={1} enableShowMore={false}>{model.kicker}</LineClamp>
+    </div>
+  {/if}
+  {#if model.title}
+    <div class="content-viewer-texts__title">
+      <LineClamp maxLines={2} enableShowMore={false}>{model.title}</LineClamp>
+    </div>
+  {/if}
+  {#if model.text}
+    <div class="content-viewer-texts__text">
+      <LineClamp maxLines={2} enableShowMore={true}>{model.text}</LineClamp>
+    </div>
+  {/if}
+  {#if model.readMoreUrl}
+    <a class="content-viewer-texts__read-more" href={model.readMoreUrl} target="_blank" rel="noopener noreferrer">
+      {localization.readMore}
+    </a>
+  {:else if on?.readMore}
+    <button type="button" class="content-viewer-texts__read-more" onclick={on.readMore}>
+      {localization.readMore}
+    </button>
+  {/if}
+</div>
+
+<style>.content-viewer-texts {
+  --_content-viewer-texts--color: var(--sc-kit--color--text--on-accent);
+  --_content-viewer-texts--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);
+  color: var(--_content-viewer-texts--color);
+  text-shadow: var(--_content-viewer-texts--shadow);
+  padding: var(--_content-viewer-texts--padding);
+  display: flex;
+  flex-direction: column;
+  gap: 0.625rem;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 576px) {
+  .content-viewer-texts {
+    gap: 0.375rem;
+  }
+}
+.content-viewer-texts__kicker {
+  font-size: var(--sc-kit--font-size--lg);
+  font-weight: var(--sc-kit--font-weight--regular);
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 576px) {
+  .content-viewer-texts__kicker {
+    font-size: var(--sc-kit--font-size--md);
+  }
+}
+.content-viewer-texts__title {
+  font-size: var(--sc-kit--font-size--xl);
+  font-weight: var(--sc-kit--font-weight--medium);
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 576px) {
+  .content-viewer-texts__title {
+    font-size: var(--sc-kit--font-size--lg);
+  }
+}
+.content-viewer-texts__text {
+  font-size: 1.125rem;
+  font-weight: var(--sc-kit--font-weight--regular);
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 576px) {
+  .content-viewer-texts__text {
+    font-size: 0.9375rem;
+  }
+}
+.content-viewer-texts__read-more {
+  pointer-events: auto;
+  font-size: var(--sc-kit--font-size--lg);
+  font-weight: var(--sc-kit--font-weight--regular);
+  color: inherit;
+  cursor: pointer;
+  text-shadow: inherit;
+  background: none;
+  border: none;
+  padding: 0;
+  text-align: left;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 576px) {
+  .content-viewer-texts__read-more {
+    font-size: var(--sc-kit--font-size--md);
+  }
+}</style>

package/dist/content/content-viewer/content-texts.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { ContentModel } from '../model';
+import type { ContentViewerLocalization } from './content-viewer-localization';
+import type { ContentViewerUiManager } from './ui-manager.svelte';
+type Props = {
+    model: ContentModel['texts'];
+    uiManager: ContentViewerUiManager;
+    localization: ContentViewerLocalization;
+    on?: {
+        readMore?: () => void;
+    };
+};
+declare const ContentTexts: import("svelte").Component<Props, {}, "">;
+type ContentTexts = ReturnType<typeof ContentTexts>;
+export default ContentTexts;

package/dist/content/content-viewer/content-viewer-localization.d.ts

@@ -0,0 +1,4 @@
+export declare class ContentViewerLocalization {
+    get viewsCount(): (count: number) => string;
+    get readMore(): string;
+}

package/dist/content/content-viewer/content-viewer-localization.js

@@ -0,0 +1,16 @@
+import { AppLocale } from '@streamscloud/kit/core/locale';
+export class ContentViewerLocalization {
+    get viewsCount() {
+        return loc.viewsCount[AppLocale.current];
+    }
+    get readMore() {
+        return loc.readMore[AppLocale.current];
+    }
+}
+const loc = {
+    viewsCount: {
+        en: (count) => (count === 1 ? '1 view' : `${count} views`),
+        no: (count) => (count === 1 ? '1 visning' : `${count} visninger`)
+    },
+    readMore: { en: 'Read more', no: 'Les mer' }
+};

package/dist/content/content-viewer/heading.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">import { ImageRound } from '@streamscloud/kit/ui/image';
+import { TimeAgo } from '@streamscloud/kit/ui/time-ago';
+let { model, uiManager, localization } = $props();
+const variables = $derived(`--_content-viewer--heading--padding: 0 ${uiManager.controlsPanelWidth ? uiManager.controlsPanelWidth : uiManager.infoPaddingInline}px 14px ${uiManager.infoPaddingInline}px`);
+</script>
+
+<div class="content-viewer-heading" style={variables}>
+  <div class="content-viewer-heading__source-image">
+    <ImageRound src={model.image} alt={model.name} />
+  </div>
+
+  <div class="content-viewer-heading__info">
+    <div class="content-viewer-heading__source-name">{model.name}</div>
+    <p class="content-viewer-heading__metadata">
+      <TimeAgo date={model.displayDate} />
+      {#if Number.isInteger(model.viewsCount) && model.viewsCount}
+        <span>&middot;</span>
+        {localization.viewsCount(model.viewsCount)}
+      {/if}
+    </p>
+  </div>
+</div>
+
+<style>.content-viewer-heading {
+  --_content-viewer-heading-texts--color: var(--sc-kit--color--text--on-accent);
+  --_content-viewer-heading--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);
+  display: flex;
+  align-items: center;
+  padding: var(--_content-viewer--heading--padding);
+  min-width: 0;
+}
+.content-viewer-heading__source-image {
+  width: 2rem;
+  min-width: 2rem;
+  max-width: 2rem;
+  height: 2rem;
+  min-height: 2rem;
+  max-height: 2rem;
+  margin-right: 0.625rem;
+  --sc-kit--image--rounded--outer--border-radius: var(--sc-kit--radius--lg);
+  --sc-kit--image--rounded--inner--border-width: 0;
+}
+.content-viewer-heading__info {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+.content-viewer-heading__source-name {
+  font-size: var(--sc-kit--font-size--sm);
+  line-height: 0.9375rem;
+  font-weight: var(--sc-kit--font-weight--medium);
+  color: var(--_content-viewer-heading-texts--color);
+  text-shadow: var(--_content-viewer-heading--text--shadow);
+  text-overflow: ellipsis;
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.content-viewer-heading__metadata {
+  margin: 0;
+  font-size: 0.625rem;
+  line-height: 0.75rem;
+  font-weight: var(--sc-kit--font-weight--regular);
+  color: var(--_content-viewer-heading-texts--color);
+  text-shadow: var(--_content-viewer-heading--text--shadow);
+}</style>

package/dist/content/content-viewer/heading.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { ContentViewerUiManager } from './ui-manager.svelte';
+import type { ContentModel } from '../model';
+import type { ContentViewerLocalization } from './content-viewer-localization';
+type Props = {
+    model: NonNullable<ContentModel['heading']>;
+    uiManager: ContentViewerUiManager;
+    localization: ContentViewerLocalization;
+};
+declare const Heading: import("svelte").Component<Props, {}, "">;
+type Heading = ReturnType<typeof Heading>;
+export default Heading;

package/dist/content/content-viewer/index.d.ts

@@ -0,0 +1 @@
+export { default as ContentViewer } from './cmp.content-viewer.svelte';

package/dist/content/content-viewer/index.js

@@ -0,0 +1 @@
+export { default as ContentViewer } from './cmp.content-viewer.svelte';

package/dist/content/content-viewer/media/content-media.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">import { Image } from '@streamscloud/kit/ui/image';
+import { Carousel } from '@streamscloud/kit/ui/player/carousel';
+import { Video } from '@streamscloud/kit/ui/video';
+let { id, media, autoplay = 'on-appearance', on } = $props();
+</script>
+
+{#snippet mediaItem(item: IContentMediaItemModel)}
+  {#if item.isImage}
+    <Image src={item.url} />
+  {:else}
+    <Video
+      src={item.url}
+      poster={null}
+      autoplay={autoplay}
+      loop={true}
+      id={id}
+      hideSpeaker={true}
+      on={{
+        progress: on?.videoProgress
+      }} />
+  {/if}
+{/snippet}
+
+<div class="content-media" class:content-media--fit={media.mediaFit === 'contain'} class:content-media--fill={media.mediaFit === 'cover'}>
+  {#if media.items.length === 1}
+    {@render mediaItem(media.items[0])}
+  {:else if media.items.length > 1}
+    <Carousel items={media.items} initialIndex={media.currentIndex} on={{ indexChanged: (index) => (media.currentIndex = index) }}>
+      {#snippet children(item)}
+        {@render mediaItem(item)}
+      {/snippet}
+    </Carousel>
+  {/if}
+</div>
+
+<style>.content-media {
+  width: 100%;
+  min-width: 100%;
+  max-width: 100%;
+  height: 100%;
+  min-height: 100%;
+  max-height: 100%;
+}
+.content-media--fit {
+  --sc-kit--video--media-fit: contain;
+  --sc-kit--image--object-fit: contain;
+  background-color: rgb(from light-dark(#000000, #ffffff) r g b/40%);
+}
+.content-media--fill {
+  --sc-kit--video--media-fit: cover;
+  --sc-kit--image--object-fit: cover;
+  --sc-kit--video--background-color: transparent;
+}</style>