@streamscloud/embeddable 7.5.2 → 8.0.1

package/dist/ui/slider/cmp.slider.svelte

@@ -0,0 +1,398 @@
+<script lang="ts">import { runningInBrowser } from '../../core/browser';
+import { Utils } from '../../core/utils';
+import { HtmlHelper } from '../../core/utils/html-helper';
+import { Icon } from '../icon';
+import { SliderLocalization } from './slider-localization';
+import { SliderMode } from './types';
+import IconChevronLeft from '@fluentui/svg-icons/icons/chevron_left_20_regular.svg?raw';
+import IconChevronRight from '@fluentui/svg-icons/icons/chevron_right_20_regular.svg?raw';
+import { onDestroy, onMount } from 'svelte';
+let { items, sliderMode = SliderMode.ArrowsWithCounts, dotsConfig = {
+    activeHtml: '<i class="fa-solid fa-circle" tabindex="0"></i>',
+    inactiveHtml: '<i class="fa-regular fa-circle" tabindex="0"></i>'
+}, locale, initialIndex, autoSlideMs = 0, on, children } = $props();
+const localization = $derived.by(() => new SliderLocalization(locale));
+const itemIndices = $derived(items.map((_, index) => index));
+const animationDuration = 850;
+let previousItems = $state.raw(undefined);
+let selectedIndex = $state(initialIndex);
+let animationIndex = $state(null);
+let interval;
+let slidesRef;
+let sliderWidth = $state(0);
+let resizeObserver;
+onMount(() => {
+    notifyIndexChanged();
+    setTimeout(() => {
+        slidesRef === null || slidesRef === void 0 ? void 0 : slidesRef.classList.toggle('animate', false);
+    });
+    let touchStartX = 0;
+    let touchStartY = 0;
+    let touchStartTime = 0;
+    let isHorizontalSwipe = false;
+    slidesRef.addEventListener('touchstart', (e) => {
+        touchStartX = e.changedTouches[0].screenX;
+        touchStartY = e.changedTouches[0].screenY;
+        touchStartTime = Date.now();
+        isHorizontalSwipe = false;
+    });
+    slidesRef.addEventListener('touchmove', (e) => {
+        if (isHorizontalSwipe) {
+            // Already determined this is a horizontal swipe
+            e.preventDefault();
+            e.stopPropagation();
+            return;
+        }
+        const touchCurrentX = e.changedTouches[0].screenX;
+        const touchCurrentY = e.changedTouches[0].screenY;
+        const diffX = Math.abs(touchCurrentX - touchStartX);
+        const diffY = Math.abs(touchCurrentY - touchStartY);
+        // Determine direction on first significant movement
+        if (diffX > 10 || diffY > 10) {
+            if (diffX > diffY) {
+                // Horizontal swipe - block vertical scroll
+                isHorizontalSwipe = true;
+                e.preventDefault();
+                e.stopPropagation();
+            }
+            else {
+                // Vertical swipe - allow parent to handle
+                isHorizontalSwipe = false;
+            }
+        }
+    });
+    slidesRef.addEventListener('touchend', (e) => {
+        const touchEndX = e.changedTouches[0].screenX;
+        const touchEndY = e.changedTouches[0].screenY;
+        const diffX = Math.abs(touchEndX - touchStartX);
+        const diffY = Math.abs(touchEndY - touchStartY);
+        // Check if this is a horizontal swipe
+        if (diffY > diffX) {
+            return;
+        }
+        // This is a horizontal swipe - block propagation
+        e.stopPropagation();
+        e.preventDefault();
+        const isFastSwipe = Date.now() - touchStartTime < 300;
+        if (!isFastSwipe && diffX < sliderWidth / 6) {
+            return;
+        }
+        if (touchEndX < touchStartX) {
+            loadNext();
+        }
+        if (touchEndX > touchStartX) {
+            loadPrevious();
+        }
+    });
+    slidesRef.addEventListener('transitionend', (e) => {
+        e.stopPropagation();
+        if (animationIndex !== null && animationIndex > items.length - 1) {
+            slidesRef.classList.toggle('animate', false);
+            animationIndex = null;
+        }
+        if (animationIndex !== null && animationIndex === 0) {
+            slidesRef.classList.toggle('animate', false);
+            animationIndex = null;
+        }
+        setTimeout(() => {
+            slidesRef === null || slidesRef === void 0 ? void 0 : slidesRef.classList.toggle('animate', true);
+        });
+    });
+    if (autoSlideMs) {
+        interval = window.setInterval(() => {
+            if ((items === null || items === void 0 ? void 0 : items.length) <= 1) {
+                return;
+            }
+            loadNext();
+        }, autoSlideMs);
+    }
+    sliderWidth = slidesRef.getBoundingClientRect().width;
+    let resizeTimeout = 0;
+    resizeObserver = new ResizeObserver(() => {
+        if (runningInBrowser() && resizeTimeout) {
+            window.clearTimeout(resizeTimeout);
+        }
+        slidesRef.classList.toggle('animate', false);
+        sliderWidth = slidesRef.getBoundingClientRect().width;
+        resizeTimeout = window.setTimeout(() => {
+            slidesRef === null || slidesRef === void 0 ? void 0 : slidesRef.classList.toggle('animate', true);
+        });
+    });
+    resizeObserver.observe(slidesRef);
+    if (runningInBrowser()) {
+        window.addEventListener(`keydown`, onKeyPress);
+    }
+});
+onDestroy(() => {
+    if (resizeObserver) {
+        resizeObserver.disconnect();
+    }
+    if (runningInBrowser()) {
+        window.removeEventListener('keydown', onKeyPress);
+        if (interval) {
+            window.clearInterval(interval);
+        }
+    }
+});
+const onKeyPress = Utils.throttle((e) => {
+    if (e.key === 'ArrowLeft') {
+        loadPrevious();
+    }
+    if (e.key === 'ArrowRight') {
+        loadNext();
+    }
+}, animationDuration);
+const notifyIndexChanged = () => {
+    var _a;
+    (_a = on === null || on === void 0 ? void 0 : on.indexChanged) === null || _a === void 0 ? void 0 : _a.call(on, selectedIndex);
+};
+notifyIndexChanged();
+const setIndex = (index) => {
+    if (index < 0) {
+        animationIndex = 0;
+        selectedIndex = items.length - 1;
+    }
+    else if (index > items.length - 1) {
+        animationIndex = index + 1;
+        selectedIndex = 0;
+    }
+    else {
+        animationIndex = null;
+        selectedIndex = index;
+    }
+    setTimeout(() => {
+        notifyIndexChanged();
+    }, 600);
+};
+const loadPrevious = Utils.throttle(() => {
+    setIndex(--selectedIndex);
+}, 800);
+const loadNext = Utils.throttle(() => {
+    setIndex(++selectedIndex);
+}, 800);
+$effect(() => {
+    if (previousItems && items !== previousItems) {
+        setIndex(0);
+    }
+    previousItems = items;
+});
+const showClassicArrowsAndDots = $derived([SliderMode.ArrowsAndDots, SliderMode.ArrowsOnly, SliderMode.DotsOnly, SliderMode.DotsOnlyBelow].includes(sliderMode));
+</script>
+
+<div
+  class="slider"
+  class:slider--arrows-and-dots={sliderMode === SliderMode.ArrowsAndDots}
+  class:slider--arrows-only={sliderMode === SliderMode.ArrowsOnly}
+  class:slider--dots-only={sliderMode === SliderMode.DotsOnly}
+  class:slider--dots-only-below={sliderMode === SliderMode.DotsOnlyBelow}
+  class:slider--arrows-with-counts={sliderMode === SliderMode.ArrowsWithCounts}>
+  <div
+    class="slider__slides"
+    bind:this={slidesRef}
+    style={`transform: translateX(${items.length > 1 ? -sliderWidth * (animationIndex === null ? selectedIndex + 1 : animationIndex) : 0}px)`}>
+    {#if items.length > 1}
+      <div class="slider__slide" data-before>
+        {#if children}
+          {@render children(items[items.length - 1])}
+        {/if}
+      </div>
+    {/if}
+    {#each items as item (item)}
+      <div class="slider__slide">
+        {#if children}
+          {@render children(item)}
+        {/if}
+      </div>
+    {/each}
+    {#if items.length > 1}
+      <div class="slider__slide" data-after>
+        {#if children}
+          {@render children(items[0])}
+        {/if}
+      </div>
+    {/if}
+  </div>
+
+  {#if items.length > 1}
+    {#if showClassicArrowsAndDots}
+      <button type="button" class="slider__navigation-button slider__navigation-button--prev" onclick={loadPrevious} aria-label="none">
+        <Icon src={IconChevronLeft} />
+      </button>
+      <button type="button" class="slider__navigation-button slider__navigation-button--next" onclick={loadNext} aria-label="none">
+        <Icon src={IconChevronRight} />
+      </button>
+      <div class="slider__dots">
+        {#each itemIndices as index (index)}
+          <div class="slider__dot" onclick={() => setIndex(index)} onkeydown={() => ({})} role="none">
+            {@html HtmlHelper.sanitizeHtml(index === selectedIndex ? dotsConfig.activeHtml : dotsConfig.inactiveHtml)}
+          </div>
+        {/each}
+      </div>
+    {:else if sliderMode === SliderMode.ArrowsWithCounts}
+      <div class="slider__arrows-with-counts">
+        <button type="button" class="slider__counts-navigation-button" onclick={loadPrevious} aria-label="none">
+          <Icon src={IconChevronLeft} />
+        </button>
+        <div class="slider__counts">{localization.nOfM(selectedIndex + 1, items.length)}</div>
+        <button type="button" class="slider__counts-navigation-button" onclick={loadNext} aria-label="none">
+          <Icon src={IconChevronRight} />
+        </button>
+      </div>
+    {/if}
+  {/if}
+</div>
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.slider {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+.slider__slides {
+  display: flex;
+  height: 100%;
+}
+.slider__slides:global(.animate) {
+  transition: 800ms ease-out transform;
+}
+.slider__slide {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  height: 100%;
+  width: 100%;
+  min-width: 100%;
+  max-width: 100%;
+}
+.slider__dots {
+  margin: 0;
+  display: flex;
+  justify-content: center;
+  z-index: 1;
+  gap: 1em;
+  flex-wrap: wrap;
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0.625rem;
+  font-size: var(--slider-dots-size-internal, var(--slider-dots-size, 0.75rem));
+}
+.slider__dot {
+  cursor: pointer;
+  color: var(--slider-dots-color, white);
+}
+.slider__navigation-button {
+  font-size: 0.75rem;
+  width: 1.875rem;
+  height: 1.875rem;
+  background-color: #9ca3af;
+  border-radius: 50%;
+  text-align: center;
+  color: #ffffff;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  visibility: hidden;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 576px) {
+  .slider__navigation-button {
+    visibility: visible;
+  }
+}
+.slider__navigation-button:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+.slider__navigation-button--prev {
+  left: 0.9375rem;
+}
+.slider__navigation-button--next {
+  right: 0.9375rem;
+}
+.slider__arrows-with-counts {
+  position: absolute;
+  bottom: 0.75rem;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 1.625rem;
+  z-index: 1;
+}
+.slider__counts {
+  font-size: 0.9375rem;
+  font-weight: 300;
+  width: 5.625rem;
+  text-align: center;
+  color: #ffffff;
+  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);
+}
+.slider__counts-navigation-button {
+  font-size: 0.75rem;
+  width: 1.625rem;
+  height: 1.625rem;
+  background-color: #9ca3af;
+  border-radius: 50%;
+  text-align: center;
+  color: #ffffff;
+  visibility: hidden;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+.slider__counts-navigation-button:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+@container (width < 576px) {
+  .slider__counts-navigation-button {
+    visibility: visible;
+  }
+}
+.slider:hover .slider__navigation-button {
+  visibility: visible;
+}
+.slider:hover .slider__counts-navigation-button {
+  visibility: visible;
+}
+.slider--arrows-only .slider__dots {
+  display: none;
+}
+.slider--dots-only .slider__navigation-button {
+  display: none;
+}
+.slider--dots-only .slider__dots {
+  --slider-dots-size-internal: var(--slider-dots-size, 1rem);
+}
+.slider--dots-only-below .slider__navigation-button {
+  display: none;
+}
+.slider--dots-only-below .slider__dots {
+  --slider-dots-size-internal: var(--slider-dots-size, 1rem);
+  position: static;
+  margin-top: 1rem;
+}
+@container (width < 576px) {
+  .slider__navigation-button {
+    visibility: visible;
+  }
+  .slider__counts-navigation-button {
+    visibility: visible;
+  }
+}</style>

package/dist/ui/slider/cmp.slider.svelte.d.ts

@@ -0,0 +1,31 @@
+import type { Locale } from '../../core/locale';
+import { type SliderDotsConfig, SliderMode } from './types';
+import { type Snippet } from 'svelte';
+declare class __sveltets_Render<T> {
+    props(): {
+        items: T[];
+        initialIndex: number;
+        sliderMode?: SliderMode;
+        dotsConfig?: SliderDotsConfig;
+        autoSlideMs?: number;
+        locale: Locale;
+        on?: {
+            indexChanged: (index: number) => void;
+        } | undefined;
+        children: Snippet<[T]>;
+    };
+    events(): {};
+    slots(): {};
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Cmp: $$IsomorphicComponent;
+type Cmp<T> = InstanceType<typeof Cmp<T>>;
+export default Cmp;

package/dist/ui/slider/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Slider } from './cmp.slider.svelte';
+export { SliderMode, type SliderDotsConfig } from './types';

package/dist/ui/slider/index.js

@@ -0,0 +1,2 @@
+export { default as Slider } from './cmp.slider.svelte';
+export { SliderMode } from './types';

package/dist/ui/slider/slider-localization.d.ts

@@ -0,0 +1,5 @@
+import { type Locale } from '../../core/locale';
+export declare class SliderLocalization {
+    nOfM: (n: number, m: number) => string;
+    constructor(locale: Locale);
+}

package/dist/ui/slider/slider-localization.js

@@ -0,0 +1,13 @@
+import {} from '../../core/locale';
+export class SliderLocalization {
+    nOfM;
+    constructor(locale) {
+        this.nOfM = loc.nOfM[locale];
+    }
+}
+const loc = {
+    nOfM: {
+        en: (n, m) => `${n} of ${m}`,
+        no: (n, m) => `${n} av ${m}`
+    }
+};

package/dist/ui/slider/types.d.ts

@@ -0,0 +1,11 @@
+export declare enum SliderMode {
+    ArrowsAndDots = 0,
+    ArrowsOnly = 1,
+    DotsOnly = 2,
+    DotsOnlyBelow = 3,
+    ArrowsWithCounts = 4
+}
+export type SliderDotsConfig = {
+    activeHtml: string;
+    inactiveHtml: string;
+};

package/dist/ui/slider/types.js

@@ -0,0 +1,8 @@
+export var SliderMode;
+(function (SliderMode) {
+    SliderMode[SliderMode["ArrowsAndDots"] = 0] = "ArrowsAndDots";
+    SliderMode[SliderMode["ArrowsOnly"] = 1] = "ArrowsOnly";
+    SliderMode[SliderMode["DotsOnly"] = 2] = "DotsOnly";
+    SliderMode[SliderMode["DotsOnlyBelow"] = 3] = "DotsOnlyBelow";
+    SliderMode[SliderMode["ArrowsWithCounts"] = 4] = "ArrowsWithCounts";
+})(SliderMode || (SliderMode = {}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/embeddable",
-  "version": "7.5.2",
+  "version": "8.0.1",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",
@@ -8,7 +8,7 @@
   },
   "type": "module",
   "scripts": {
-    "dev": "vite dev --port 3010",
+    "dev": "vite dev --port 3010 --host",
     "build": "svelte-package --tsconfig ./tsconfig.app.json  && prettier --write --plugin prettier-plugin-svelte . && eslint --fix .",
     "publish:prod": "npm run build && npm publish --access public --tag latest",
     "version:dev": "node -e \"const fs=require('fs');const pkg=require('./package.json');const base=(pkg.version.includes('-')?pkg.version.split('-')[0]:pkg.version);pkg.version=base+'-'+Date.now();fs.writeFileSync('package.json',JSON.stringify(pkg,null,2)+'\\n');\"",

package/dist/posts/post-viewer/media/media-slider.svelte

@@ -1,10 +0,0 @@
-<script lang="ts">import { Slider, SliderMode } from '../../../ui/slider';
-import MediaViewer from './typed-media-viewer.svelte';
-let { post, buffer, isActive, initialMediaIndex, on } = $props();
-</script>
-
-<Slider items={post.media} sliderMode={SliderMode.ArrowsWithCounts} initialIndex={isActive ? initialMediaIndex : 0}>
-  {#snippet children(item)}
-    <MediaViewer postId={post.id} buffer={buffer} item={item} on={{ playerReachedEnd: on.playerReachedEnd }} />
-  {/snippet}
-</Slider>

package/dist/posts/post-viewer/media/media-slider.svelte.d.ts

@@ -1,27 +0,0 @@
-import type { IPlayerBuffer } from '../../../ui/player';
-import type { PostViewerModel } from '../types.svelte';
-declare class __sveltets_Render<T extends PostViewerModel> {
-    props(): {
-        post: PostViewerModel;
-        buffer: IPlayerBuffer<T_1>;
-        isActive: boolean;
-        initialMediaIndex: number;
-        on: {
-            playerReachedEnd: () => void;
-        };
-    };
-    events(): {};
-    slots(): {};
-    bindings(): "";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <T extends PostViewerModel>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
-    } & ReturnType<__sveltets_Render<T>['exports']>;
-    <T extends PostViewerModel>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
-}
-declare const MediaSlider: $$IsomorphicComponent;
-type MediaSlider<T extends PostViewerModel> = InstanceType<typeof MediaSlider<T>>;
-export default MediaSlider;

package/dist/posts/post-viewer/post-media.svelte

@@ -1,26 +0,0 @@
-<script lang="ts">import { Image } from '../../ui/image';
-import { Video } from '../../ui/video';
-let { id, media, autoplay = 'on-appearance', on } = $props();
-$effect(() => {
-    on.mediaChanged({
-        videoSeekBar: media.type === 'video',
-        galleryMode: false
-    });
-});
-</script>
-
-{#if media.type === 'video'}
-  <Video
-    src={media.url}
-    poster={media.thumbnailUrl}
-    controls={false}
-    autoplay={autoplay}
-    loop={true}
-    id={id}
-    hideSpeaker={true}
-    on={{
-      progress: on?.progress
-    }} />
-{:else if media.type === 'image'}
-  <Image src={media.url} />
-{/if}

package/dist/posts/post-viewer/types.d.ts

@@ -1,60 +0,0 @@
-import { AdType, type Currency } from '../../core/enums';
-export type PostViewerModel = {
-    id: string;
-    media: PostViewerMediaModel;
-    text: string | null;
-    heading: PostViewerHeadingModel | null;
-    enableSocialInteractions: boolean;
-    products: PostViewerProductCardModel[];
-    ads: PostViewerAdCardModel[];
-};
-export type PostViewerMediaModel = PostViewerImageMediaModel | PostViewerVideoMediaModel | {
-    type: 'gallery';
-    items: Array<PostViewerImageMediaModel | PostViewerVideoMediaModel>;
-    isMutable: boolean;
-};
-export type PostViewerImageMediaModel = {
-    type: 'image';
-    url: string;
-    isMutable: false;
-};
-export type PostViewerVideoMediaModel = {
-    type: 'video';
-    url: string;
-    thumbnailUrl: string;
-    isMutable: true;
-};
-export type PostViewerHeadingModel = {
-    image: string | null;
-    name: string;
-    displayDate: string;
-    viewsCount: number;
-};
-export type PostViewerProductCardModel = {
-    id: string;
-    title: string;
-    shortDescription: string | null;
-    link: string | null;
-    image: string | null;
-    brandName: string | null;
-    price: number;
-    currency: Currency;
-    salePrice: number | null;
-};
-export type PostViewerAdCardModel = {
-    id: string;
-    type: AdType;
-    image: string | null;
-    title: string;
-    description: string | null;
-    price: number | null;
-    priceInfoLabel: string | null;
-    currency: Currency | null;
-    ctaButton: {
-        background: string;
-        textColor: string;
-        text: string;
-        url: string;
-        border: string;
-    } | null;
-};

package/dist/posts/post-viewer/types.js

@@ -1 +0,0 @@
-import { AdType } from '../../core/enums';

package/dist/posts/post-viewer/utils.d.ts

@@ -1,2 +0,0 @@
-import type { PostViewerModel } from './types';
-export declare const getPostCoverImage: (post: PostViewerModel) => string;

package/dist/posts/post-viewer/utils.js

@@ -1,13 +0,0 @@
-import { Utils } from '../../core/utils';
-export const getPostCoverImage = (post) => {
-    switch (post.media.type) {
-        case 'image':
-            return post.media.url;
-        case 'video':
-            return post.media.thumbnailUrl;
-        case 'gallery':
-            return post.media.items[0].type === 'image' ? post.media.items[0].url : post.media.items[0].thumbnailUrl;
-        default:
-            Utils.assertUnreachable(post.media);
-    }
-};