@streamscloud/embeddable 16.3.1 → 17.0.0-1775740482426

package/dist/feed-player/feed-player-localization.js

@@ -0,0 +1,70 @@
+import { AppLocale } from '@streamscloud/kit/core/locale';
+export class FeedPlayerLocalization {
+    get tabInformation() {
+        return loc.tabInformation[AppLocale.current];
+    }
+    get tabProduct() {
+        return loc.tabProduct[AppLocale.current];
+    }
+    get tabArticle() {
+        return loc.tabArticle[AppLocale.current];
+    }
+    get tabRecommended() {
+        return loc.tabRecommended[AppLocale.current];
+    }
+    get tabPlaylist() {
+        return loc.tabPlaylist[AppLocale.current];
+    }
+    get show() {
+        return loc.show[AppLocale.current];
+    }
+    get relatedPosts() {
+        return loc.relatedPosts[AppLocale.current];
+    }
+    get suggestedPlaylist() {
+        return loc.suggestedPlaylist[AppLocale.current];
+    }
+    get suggestedProducts() {
+        return loc.suggestedProducts[AppLocale.current];
+    }
+    get showList() {
+        return loc.showList[AppLocale.current];
+    }
+    get updatedLabel() {
+        return loc.updatedLabel[AppLocale.current];
+    }
+    postsCount(count) {
+        return loc.postsCount[AppLocale.current](count);
+    }
+    postOf(current, total) {
+        return loc.postOf[AppLocale.current](current, total);
+    }
+    viewsLabel(count) {
+        return loc.viewsLabel[AppLocale.current](count);
+    }
+}
+const loc = {
+    tabInformation: { en: 'Information', no: 'Informasjon' },
+    tabProduct: { en: 'Product', no: 'Produkt' },
+    tabArticle: { en: 'Article', no: 'Artikkel' },
+    tabRecommended: { en: 'Recommended', no: 'Anbefalt' },
+    tabPlaylist: { en: 'Playlist', no: 'Spilleliste' },
+    show: { en: 'Show', no: 'Vis' },
+    relatedPosts: { en: 'Related Posts', no: 'Relaterte innlegg' },
+    suggestedPlaylist: { en: 'Suggested Playlist', no: 'Foreslått spilleliste' },
+    suggestedProducts: { en: 'Suggested Products', no: 'Foreslåtte produkter' },
+    showList: { en: 'Show list', no: 'Vis liste' },
+    updatedLabel: { en: 'Updated:', no: 'Oppdatert:' },
+    postsCount: {
+        en: (count) => `${count} Post${count !== 1 ? 's' : ''}`,
+        no: (count) => `${count} innlegg`
+    },
+    postOf: {
+        en: (current, total) => `Post ${current} of ${total}`,
+        no: (current, total) => `Innlegg ${current} av ${total}`
+    },
+    viewsLabel: {
+        en: (count) => `${new Intl.NumberFormat('en').format(count)} Views`,
+        no: (count) => `${new Intl.NumberFormat('nb').format(count)} visninger`
+    }
+};

package/dist/feed-player/index.d.ts

@@ -0,0 +1,3 @@
+export { default as CloseButton } from './cmp.close-button.svelte';
+export { default as FeedPlayer } from './cmp.feed-player.svelte';
+export type { FeedPlayerPlaylistData, FeedPlayerPostPreview, FeedPlayerProps, FeedPlayerRecommendedData, FeedPlayerSettings, FeedPlayerSuggestedPlaylist, IFeedPlayerPlaylistHandler, IFeedPlayerRecommendedHandler } from './types';

package/dist/feed-player/index.js

@@ -0,0 +1,2 @@
+export { default as CloseButton } from './cmp.close-button.svelte';
+export { default as FeedPlayer } from './cmp.feed-player.svelte';

package/dist/feed-player/sidebar/article-tab.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">import { FeedPlayerLocalization } from '../feed-player-localization';
+import { Image } from '@streamscloud/kit/ui/image';
+const localization = new FeedPlayerLocalization();
+let { model, on } = $props();
+const heroImage = $derived(model.media.items[0]?.isImage ? model.media.items[0].url : null);
+</script>
+
+<div class="article-tab">
+  {#if heroImage}
+    <div class="article-tab__hero">
+      <Image src={heroImage} />
+    </div>
+  {/if}
+
+  <div class="article-tab__content">
+    {#if model.texts.kicker}
+      <div class="article-tab__category">{model.texts.kicker}</div>
+    {/if}
+
+    {#if model.texts.title}
+      <div class="article-tab__title">{model.texts.title}</div>
+    {/if}
+
+    {#if model.texts.text}
+      <div class="article-tab__text">{model.texts.text}</div>
+    {/if}
+
+    {#if model.articleId && on?.readMore}
+      <button type="button" class="article-tab__show-button" onclick={() => model.articleId && on?.readMore && on.readMore(model.articleId)}
+        >{localization.show}</button>
+    {/if}
+  </div>
+</div>
+
+<!--
+  @component
+  Article tab — preview of the article with hero image, title, text, and "Show" button.
+
+  ### CSS Custom Properties
+  | Property | Description | Default |
+  |---|---|---|
+  | `--article-tab--button-background` | Show button background | `#f9fafb` |
+  | `--article-tab--button-border` | Show button border | `#e5e7eb` |
+-->
+
+<style>.article-tab {
+  --_article-tab--button-background: var(--article-tab--button-background, #f9fafb);
+  --_article-tab--button-border: var(--article-tab--button-border, #e5e7eb);
+  display: flex;
+  flex-direction: column;
+  --sc-kit--image--object-fit: cover;
+  --sc-kit--image--border-radius: 0.375rem 0.375rem 0 0;
+}
+.article-tab__hero {
+  width: 100%;
+  aspect-ratio: 392/245;
+  flex-shrink: 0;
+}
+.article-tab__content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  padding: 1rem;
+}
+.article-tab__category {
+  font-size: 1rem;
+  font-weight: 500;
+  color: #9ca3af;
+}
+.article-tab__title {
+  font-size: 2rem;
+  font-weight: 600;
+  line-height: 1.2;
+}
+.article-tab__text {
+  font-size: 1.0625rem;
+  font-weight: 400;
+  line-height: 1.375rem;
+  display: -webkit-box;
+  -webkit-line-clamp: 10;
+  line-clamp: 10;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.article-tab__show-button {
+  margin-top: 0.5rem;
+  width: 100%;
+  height: 2.375rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.875rem;
+  font-weight: 600;
+  background: var(--_article-tab--button-background);
+  border: 1px solid var(--_article-tab--button-border);
+  border-radius: 0.5rem;
+  cursor: pointer;
+}</style>

package/dist/feed-player/sidebar/article-tab.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { PostModel } from '../../posts/model';
+type Props = {
+    model: PostModel;
+    on?: {
+        readMore?: (articleId: string) => void;
+    };
+};
+/**
+ * Article tab — preview of the article with hero image, title, text, and "Show" button.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--article-tab--button-background` | Show button background | `#f9fafb` |
+ * | `--article-tab--button-border` | Show button border | `#e5e7eb` |
+ */
+declare const ArticleTab: import("svelte").Component<Props, {}, "">;
+type ArticleTab = ReturnType<typeof ArticleTab>;
+export default ArticleTab;

package/dist/feed-player/sidebar/information-tab.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">import { AdCard } from '../../ads/ad-card';
+import { ProductCard } from '../../products/product-card';
+import IconCheckmarkCircle24 from '@fluentui/svg-icons/icons/checkmark_circle_24_regular.svg?raw';
+import { Icon } from '@streamscloud/kit/ui/icon';
+let { model, trackingParams, selectedProductId, on } = $props();
+</script>
+
+{#if model.attachments}
+  <div class="information-tab">
+    {#if model.attachments.ads.length}
+      <div class="information-tab__ads">
+        {#each model.attachments.ads as ad (ad.id)}
+          <div class="information-tab__ad-wrapper">
+            <AdCard
+              ad={ad}
+              {trackingParams}
+              on={{
+                click: on?.adClick,
+                impression: on?.adImpression
+              }} />
+          </div>
+        {/each}
+      </div>
+    {/if}
+
+    {#if model.attachments.products.length}
+      <div class="information-tab__products">
+        {#each model.attachments.products as product (product.id)}
+          <div
+            class="information-tab__product-wrapper"
+            onclick={() => on?.productSelect?.(product.id)}
+            onkeydown={() => {}}
+            role="none">
+            {#if selectedProductId === product.id}
+              <div class="information-tab__checkmark">
+                <Icon src={IconCheckmarkCircle24} />
+              </div>
+            {/if}
+            <ProductCard
+              product={product}
+              inert={true}
+              {trackingParams}
+              on={{
+                impression: on?.productImpression,
+                buy: on?.productBuy
+              }} />
+          </div>
+        {/each}
+      </div>
+    {/if}
+  </div>
+{/if}
+
+<!--
+  @component
+  Information tab — displays product and ad cards for the current post.
+
+  ### CSS Custom Properties
+  | Property | Description | Default |
+  |---|---|---|
+  | `--information-tab--checkmark-color` | Selected product checkmark color | `#0cce6b` |
+  | `--information-tab--gap` | Gap between cards | `16px` |
+-->
+
+<style>.information-tab {
+  --_information-tab--checkmark-color: var(--information-tab--checkmark-color, #ffffff);
+  --_information-tab--gap: var(--information-tab--gap, 1rem);
+  display: flex;
+  flex-direction: column;
+  gap: var(--_information-tab--gap);
+  container-type: inline-size;
+}
+.information-tab__ads {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  gap: var(--_information-tab--gap);
+}
+.information-tab__ad-wrapper {
+  width: calc(50% - var(--_information-tab--gap) / 2);
+}
+.information-tab__products {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  gap: var(--_information-tab--gap);
+}
+.information-tab__product-wrapper {
+  position: relative;
+  border-radius: 0.5rem;
+  cursor: pointer;
+  width: calc(50% - var(--_information-tab--gap) / 2);
+}
+.information-tab__checkmark {
+  --sc-kit--icon--size: 1.5rem;
+  --sc-kit--icon--color: var(--_information-tab--checkmark-color);
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  z-index: 1;
+  filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.5));
+}</style>

package/dist/feed-player/sidebar/information-tab.svelte.d.ts

@@ -0,0 +1,26 @@
+import type { TrackingParams } from '../../marketing-tracking';
+import type { PostModel } from '../../posts/model';
+type Props = {
+    model: PostModel;
+    trackingParams: TrackingParams;
+    selectedProductId: string | null;
+    on?: {
+        productImpression?: (productId: string) => void;
+        productBuy?: (productId: string) => void;
+        productSelect?: (productId: string) => void;
+        adClick?: (adId: string) => void;
+        adImpression?: (adId: string) => void;
+    };
+};
+/**
+ * Information tab — displays product and ad cards for the current post.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--information-tab--checkmark-color` | Selected product checkmark color | `#0cce6b` |
+ * | `--information-tab--gap` | Gap between cards | `16px` |
+ */
+declare const InformationTab: import("svelte").Component<Props, {}, "">;
+type InformationTab = ReturnType<typeof InformationTab>;
+export default InformationTab;

package/dist/feed-player/sidebar/playlist-tab.svelte

@@ -0,0 +1,110 @@
+<script lang="ts">import { FeedPlayerLocalization } from '../feed-player-localization';
+import { default as PostCard } from './post-card.svelte';
+import { untrack } from 'svelte';
+const { handler, activePostId, on } = $props();
+const localization = new FeedPlayerLocalization();
+let data = $state.raw(null);
+$effect(() => {
+    void handler;
+    untrack(() => {
+        handler.getPlaylist().then((result) => {
+            data = result;
+        });
+    });
+});
+const currentPostIndex = $derived.by(() => {
+    if (!data)
+        return -1;
+    return data.posts.findIndex((p) => p.id === activePostId);
+});
+const formatDate = (dateString) => {
+    const date = new Date(dateString);
+    const now = new Date();
+    const diffMs = now.getTime() - date.getTime();
+    const diffDays = Math.floor(diffMs / 86400000);
+    if (diffDays === 0)
+        return 'Today';
+    if (diffDays === 1)
+        return 'Yesterday';
+    if (diffDays < 7)
+        return `${diffDays} days ago`;
+    return date.toLocaleDateString();
+};
+</script>
+
+{#if data}
+  <div class="playlist-tab">
+    <div class="playlist-tab__header">
+      <div class="playlist-tab__header-left">
+        <div class="playlist-tab__name">{data.name}</div>
+        <div class="playlist-tab__updated">{localization.updatedLabel} {formatDate(data.updatedAt)}</div>
+      </div>
+      <div class="playlist-tab__post-indicator">{localization.postOf(currentPostIndex + 1, data.posts.length)}</div>
+    </div>
+
+    <div class="playlist-tab__list">
+      {#each data.posts as post (post.id)}
+        <PostCard
+          {post}
+          thumbnailWidth={146}
+          thumbnailHeight={260}
+          thumbnailRadius={8}
+          active={post.id === activePostId}
+          on={{ click: () => on?.postActivate?.(post.id) }} />
+      {/each}
+    </div>
+  </div>
+{/if}
+
+<!--
+  @component
+  Playlist tab — displays the current playlist's posts with active post highlighted.
+
+  ### CSS Custom Properties
+  | Property | Description | Default |
+  |---|---|---|
+  | `--playlist-tab--meta-color` | Header secondary text color | `#9ca3af` |
+-->
+
+<style>.playlist-tab {
+  --_playlist-tab--background: var(--playlist-tab--background, rgba(255, 255, 255, 0.58));
+  --_playlist-tab--meta-color: var(--playlist-tab--meta-color, #9ca3af);
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  background: var(--_playlist-tab--background);
+  padding: 1rem;
+  min-height: 100%;
+}
+.playlist-tab__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+}
+.playlist-tab__header-left {
+  display: flex;
+  flex-direction: column;
+}
+.playlist-tab__name {
+  font-size: 1rem;
+  font-weight: 500;
+  line-height: 1.5rem;
+}
+.playlist-tab__updated {
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--_playlist-tab--meta-color);
+  line-height: 1rem;
+}
+.playlist-tab__post-indicator {
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--_playlist-tab--meta-color);
+  line-height: 1rem;
+  white-space: nowrap;
+}
+.playlist-tab__list {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}</style>

package/dist/feed-player/sidebar/playlist-tab.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { IFeedPlayerPlaylistHandler } from '../types';
+type Props = {
+    handler: IFeedPlayerPlaylistHandler;
+    activePostId: string;
+    on?: {
+        postActivate?: (postId: string) => void;
+    };
+};
+/**
+ * Playlist tab — displays the current playlist's posts with active post highlighted.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--playlist-tab--meta-color` | Header secondary text color | `#9ca3af` |
+ */
+declare const PlaylistTab: import("svelte").Component<Props, {}, "">;
+type PlaylistTab = ReturnType<typeof PlaylistTab>;
+export default PlaylistTab;

package/dist/feed-player/sidebar/post-card.svelte

@@ -0,0 +1,128 @@
+<script lang="ts">import { FeedPlayerLocalization } from '../feed-player-localization';
+import { Image } from '@streamscloud/kit/ui/image';
+const { post, thumbnailWidth, thumbnailHeight, thumbnailRadius = 6, active = false, on } = $props();
+const localization = new FeedPlayerLocalization();
+const formatDuration = (seconds) => {
+    const m = Math.floor(seconds / 60);
+    const s = seconds % 60;
+    return `${m}:${String(s).padStart(2, '0')}`;
+};
+const formatDate = (dateString) => {
+    const date = new Date(dateString);
+    const now = new Date();
+    const diffMs = now.getTime() - date.getTime();
+    const diffDays = Math.floor(diffMs / 86400000);
+    if (diffDays === 0)
+        return 'Today';
+    if (diffDays === 1)
+        return 'Yesterday';
+    if (diffDays < 7)
+        return `${diffDays} days ago`;
+    return date.toLocaleDateString();
+};
+</script>
+
+<div
+  class="post-card"
+  onclick={on?.click}
+  onkeydown={() => {}}
+  role="none">
+  <div
+    class="post-card__thumbnail"
+    class:post-card__thumbnail--active={active}
+    style:width="{thumbnailWidth}px"
+    style:height="{thumbnailHeight}px"
+    style:--_post-card--thumbnail-radius="{thumbnailRadius}px">
+    <Image src={post.thumbnailUrl} />
+    {#if post.durationSeconds != null}
+      <div class="post-card__duration">{formatDuration(post.durationSeconds)}</div>
+    {/if}
+  </div>
+  <div class="post-card__info">
+    {#if post.title}
+      <div class="post-card__title">{post.title}</div>
+    {/if}
+    {#if post.description}
+      <div class="post-card__description">{post.description}</div>
+    {/if}
+    <div class="post-card__meta">{formatDate(post.displayDate)}  ·  {localization.viewsLabel(post.viewsCount)}</div>
+  </div>
+</div>
+
+<!--
+  @component
+  Horizontal post card with thumbnail, title, description, and meta info.
+
+  ### CSS Custom Properties
+  | Property | Description | Default |
+  |---|---|---|
+  | `--post-card--active-border-color` | Active post border color | `#0cce6b` |
+  | `--post-card--description-color` | Description text color | `#999` |
+  | `--post-card--meta-color` | Meta text color | `#999` |
+-->
+
+<style>.post-card {
+  --_post-card--active-border-color: var(--post-card--active-border-color, #0cce6b);
+  --_post-card--description-color: var(--post-card--description-color, #999);
+  --_post-card--meta-color: var(--post-card--meta-color, #999);
+  display: flex;
+  gap: 1rem;
+  align-items: flex-end;
+  cursor: pointer;
+}
+.post-card__thumbnail {
+  position: relative;
+  flex-shrink: 0;
+  border-radius: var(--_post-card--thumbnail-radius);
+  overflow: hidden;
+  --sc-kit--image--object-fit: cover;
+  --sc-kit--image--border-radius: var(--_post-card--thumbnail-radius);
+}
+.post-card__thumbnail--active {
+  outline: 2px solid var(--_post-card--active-border-color);
+  outline-offset: 0.125rem;
+  border-radius: calc(var(--_post-card--thumbnail-radius) + 3px);
+}
+.post-card__duration {
+  position: absolute;
+  bottom: 0.25rem;
+  right: 0.25rem;
+  background: rgba(0, 0, 0, 0.75);
+  border-radius: 0.25rem;
+  padding: 0.125rem 0.25rem;
+  font-size: 0.625rem;
+  font-weight: 400;
+  color: white;
+  line-height: 1;
+}
+.post-card__info {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  min-width: 0;
+  height: 7.125rem;
+}
+.post-card__title {
+  font-size: 0.875rem;
+  font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.post-card__description {
+  font-size: 0.75rem;
+  font-weight: 400;
+  color: var(--_post-card--description-color);
+  line-height: 0.9375rem;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.post-card__meta {
+  font-size: 0.625rem;
+  font-weight: 400;
+  color: var(--_post-card--meta-color);
+  white-space: nowrap;
+}</style>

package/dist/feed-player/sidebar/post-card.svelte.d.ts

@@ -0,0 +1,24 @@
+import type { FeedPlayerPostPreview } from '../types';
+type Props = {
+    post: FeedPlayerPostPreview;
+    thumbnailWidth: number;
+    thumbnailHeight: number;
+    thumbnailRadius?: number;
+    active?: boolean;
+    on?: {
+        click?: () => void;
+    };
+};
+/**
+ * Horizontal post card with thumbnail, title, description, and meta info.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--post-card--active-border-color` | Active post border color | `#0cce6b` |
+ * | `--post-card--description-color` | Description text color | `#999` |
+ * | `--post-card--meta-color` | Meta text color | `#999` |
+ */
+declare const PostCard: import("svelte").Component<Props, {}, "">;
+type PostCard = ReturnType<typeof PostCard>;
+export default PostCard;