@streamscloud/embeddable 2.1.1 → 2.1.3

package/dist/ui/image/cmp.image.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">import { Icon } from '../icon';
+import { calculateImageState, ImageState } from './image-state';
+import IconImageOff from '@fluentui/svg-icons/icons/image_off_20_regular.svg';
+let { src, alt = '', showStubOnError = false, on, stub } = $props();
+let hasError = $state(false);
+const imageState = $derived(calculateImageState(src, hasError, showStubOnError));
+const onLoad = () => {
+    hasError = false;
+    on === null || on === void 0 ? void 0 : on.load(true);
+};
+const onLoadError = () => {
+    hasError = true;
+    on === null || on === void 0 ? void 0 : on.load(false);
+};
+</script>
+
+<div class="image">
+  {#if !!src}
+    <img class="image__img" class:image__img--hidden={imageState !== ImageState.showImage} src={src} alt={alt || ''} onload={onLoad} onerror={onLoadError} />
+  {/if}
+
+  {#if imageState === ImageState.showError}
+    <div class="image__load-error">
+      <Icon src={IconImageOff} />
+    </div>
+  {/if}
+
+  {#if imageState === ImageState.showStub}
+    {#if stub}
+      {@render stub()}
+    {:else}
+      <div class="image__img image__img--stub"></div>
+    {/if}
+  {/if}
+</div>
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.image {
+  --_image--background: var(--image--background, transparent);
+  --_image--border-radius: var(--image--border-radius, 0);
+  --_image--object-fit: var(--image--object-fit, cover);
+  --_image--stub--background: var(--image--stub--background, #e5e7eb);
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  border-radius: var(--_image--border-radius);
+  background: var(--_image--background);
+}
+:global([data-theme="dark"]) .image {
+  --_image--stub--background: var(--image--stub--background, #374151);
+}
+.image__img {
+  width: 100%;
+  height: 100%;
+  z-index: 2;
+  object-fit: var(--_image--object-fit);
+}
+.image__img--hidden {
+  display: none;
+}
+.image__img--stub {
+  background: var(--_image--stub--background);
+}
+.image__load-error {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 1.2em;
+  text-align: center;
+}</style>

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

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    src: string | null | undefined;
+    alt?: string;
+    showStubOnError?: boolean;
+    on?: {
+        load: (loadedSuccessfully: boolean) => void;
+    };
+    stub?: Snippet;
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/image/image-state.d.ts

@@ -0,0 +1,6 @@
+export declare enum ImageState {
+    showImage = 0,
+    showError = 1,
+    showStub = 2
+}
+export declare const calculateImageState: (src: string | null | undefined, isError: boolean, showStubOnError: boolean) => ImageState;

package/dist/ui/image/image-state.js

@@ -0,0 +1,17 @@
+export var ImageState;
+(function (ImageState) {
+    ImageState[ImageState["showImage"] = 0] = "showImage";
+    ImageState[ImageState["showError"] = 1] = "showError";
+    ImageState[ImageState["showStub"] = 2] = "showStub";
+})(ImageState || (ImageState = {}));
+export const calculateImageState = (src, isError, showStubOnError) => {
+    if (isError && !showStubOnError) {
+        return ImageState.showError;
+    }
+    else if (!src || (isError && showStubOnError)) {
+        return ImageState.showStub;
+    }
+    else {
+        return ImageState.showImage;
+    }
+};

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

@@ -0,0 +1,4 @@
+export { default as Image } from './cmp.image.svelte';
+export { default as ImageRound } from './cmp.image-round.svelte';
+export { default as ImageRounded } from './cmp.image-rounded.svelte';
+export { default as ImageStub } from './cmp.image-stub.svelte';

package/dist/ui/image/index.js

@@ -0,0 +1,4 @@
+export { default as Image } from './cmp.image.svelte';
+export { default as ImageRound } from './cmp.image-round.svelte';
+export { default as ImageRounded } from './cmp.image-rounded.svelte';
+export { default as ImageStub } from './cmp.image-stub.svelte';

package/dist/ui/infinite-scrolling/cmp.infinite-scrolling.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { Loading } from '../loading';
+import { onDestroy, onMount } from 'svelte';
+let { loadMore, container = null, actuationOffset = '', children, loading } = $props();
+let isLoading = $state(false);
+let paginationTrigger;
+let itemsContainer;
+let intersectionObserver;
+let resizeObserver;
+onMount(() => {
+    intersectionObserver = new IntersectionObserver((e) => {
+        const [entries] = e;
+        if (entries.isIntersecting) {
+            onLoadMore();
+        }
+    }, {
+        root: container,
+        rootMargin: actuationOffset
+    });
+    resizeObserver = new ResizeObserver(() => {
+        intersectionObserver.unobserve(paginationTrigger);
+        intersectionObserver.observe(paginationTrigger);
+    });
+    resizeObserver.observe(itemsContainer);
+});
+onDestroy(() => {
+    resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
+    intersectionObserver === null || intersectionObserver === void 0 ? void 0 : intersectionObserver.disconnect();
+});
+const onLoadMore = () => __awaiter(void 0, void 0, void 0, function* () {
+    if (isLoading) {
+        return;
+    }
+    isLoading = true;
+    try {
+        yield loadMore();
+    }
+    finally {
+        isLoading = false;
+    }
+});
+</script>
+
+<div class="infinite-scrolling">
+  <div bind:this={itemsContainer}>
+    {@render children()}
+  </div>
+
+  <div class="infinite-scrolling__pagination-trigger" bind:this={paginationTrigger}></div>
+  {#if isLoading}
+    {#if loading}
+      {@render loading()}
+    {:else}
+      <div class="infinite-scrolling__loading-container">
+        <Loading timeout={500} />
+      </div>
+    {/if}
+  {/if}
+</div>
+
+<style>.infinite-scrolling {
+  --infinite-scrolling--overflow-y_: var(--infinite-scrolling--overflow-y, initial);
+  overflow-y: var(--infinite-scrolling--overflow-y_);
+  min-height: calc(2em + 0.3125em * 2);
+  position: relative;
+  width: 100%;
+}
+.infinite-scrolling__pagination-trigger {
+  border: 1px solid transparent;
+}
+.infinite-scrolling__loading-container {
+  position: absolute;
+  bottom: 0.3125em;
+  left: 50%;
+  transform: translateX(-50%);
+}</style>

package/dist/ui/infinite-scrolling/cmp.infinite-scrolling.svelte.d.ts

@@ -0,0 +1,11 @@
+import { type Snippet } from 'svelte';
+type Props = {
+    loadMore: () => Promise<unknown>;
+    container?: HTMLElement | null;
+    actuationOffset?: string;
+    children: Snippet;
+    loading?: Snippet;
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/infinite-scrolling/index.d.ts

@@ -0,0 +1 @@
+export { default as InfiniteScrolling } from './cmp.infinite-scrolling.svelte';

package/dist/ui/infinite-scrolling/index.js

@@ -0,0 +1 @@
+export { default as InfiniteScrolling } from './cmp.infinite-scrolling.svelte';

package/dist/ui/line-clamp/cmp.line-clamp.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">import { LineClampLocalization } from './line-clamp-localization.svelte';
+import { LineClampUtils } from './line-clamp-utils';
+import { onDestroy, onMount } from 'svelte';
+let { value = undefined, maxLines = 3, localization: localizationInit, enableShowMore = false, children } = $props();
+const localization = $derived(new LineClampLocalization(localizationInit));
+let parent;
+let element;
+let clampWrapperRef;
+let isTruncated = $state(false);
+let showingAllText = $state(false);
+let resizeObserver = null;
+onMount(() => {
+    let parentElement = element.parentElement;
+    if (!parentElement || !('clientHeight' in parentElement)) {
+        console.error('Unsupported parent for multiline clamper');
+    }
+    else {
+        parent = parentElement;
+        clamp();
+        resizeObserver = new ResizeObserver(clamp);
+        resizeObserver.observe(parent);
+    }
+});
+onDestroy(() => {
+    resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
+    resizeObserver = null;
+});
+const clamp = () => {
+    isTruncated = clampWrapperRef.scrollHeight > clampWrapperRef.offsetHeight;
+    if (showingAllText) {
+        setClampValue('unset');
+    }
+    else {
+        let clampValue;
+        if (maxLines === 'auto') {
+            clampValue = LineClampUtils.calculateClampValue(parent);
+        }
+        else {
+            clampValue = maxLines;
+        }
+        setClampValue(clampValue.toString());
+    }
+};
+const setClampValue = (value) => {
+    clampWrapperRef.style.setProperty('-webkit-line-clamp', value);
+};
+const toggleShowMore = () => {
+    showingAllText = !showingAllText;
+    clamp();
+};
+</script>
+
+<div class="line-clamp" bind:this={element}>
+  <div class="line-clamp__wrapper" bind:this={clampWrapperRef}>
+    {#if children}
+      {@render children()}
+    {:else if value}
+      {@html value}
+    {/if}
+  </div>
+  {#if enableShowMore && (isTruncated || showingAllText)}
+    <button type="button" class="line-clamp__show-more-button" onclick={toggleShowMore}>
+      {#if showingAllText}
+        {localization.showLess}
+      {:else}
+        {localization.showMore}
+      {/if}
+    </button>
+  {/if}
+</div>
+
+<style>.line-clamp {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.line-clamp__wrapper {
+  display: -webkit-box;
+  overflow: hidden;
+  word-break: break-word;
+  white-space: var(--line-clamp-white-space, pre-line);
+  -webkit-box-orient: vertical;
+}
+.line-clamp__show-more-button {
+  margin-top: 0.5em;
+  font-size: 0.9em;
+  opacity: 0.8;
+}</style>

package/dist/ui/line-clamp/cmp.line-clamp.svelte.d.ts

@@ -0,0 +1,12 @@
+import { type ILineClampLocalization } from './line-clamp-localization.svelte';
+import { type Snippet } from 'svelte';
+type Props = {
+    value?: string | null;
+    maxLines?: number | 'auto';
+    enableShowMore?: boolean;
+    localization?: ILineClampLocalization;
+    children?: Snippet;
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/line-clamp/index.d.ts

@@ -0,0 +1,2 @@
+export { default as LineClamp } from './cmp.line-clamp.svelte';
+export { type ILineClampLocalization } from './line-clamp-localization.svelte';

package/dist/ui/line-clamp/index.js

@@ -0,0 +1,2 @@
+export { default as LineClamp } from './cmp.line-clamp.svelte';
+export {} from './line-clamp-localization.svelte';

package/dist/ui/line-clamp/line-clamp-localization.svelte.d.ts

@@ -0,0 +1,9 @@
+export interface ILineClampLocalization {
+    showLess?: string;
+    showMore?: string;
+}
+export declare class LineClampLocalization {
+    showLess: string;
+    showMore: string;
+    constructor(init?: ILineClampLocalization);
+}

package/dist/ui/line-clamp/line-clamp-localization.svelte.js

@@ -0,0 +1,15 @@
+export class LineClampLocalization {
+    showLess = $state('Show less');
+    showMore = $state('Show more');
+    constructor(init) {
+        if (!init) {
+            return;
+        }
+        if (init.showLess !== undefined) {
+            this.showLess = init.showLess;
+        }
+        if (init.showMore !== undefined) {
+            this.showMore = init.showMore;
+        }
+    }
+}

package/dist/ui/line-clamp/line-clamp-types.d.ts

@@ -0,0 +1,3 @@
+export type SupportedHtmlElement = HTMLElement & {
+    clientHeight: number;
+};

package/dist/ui/line-clamp/line-clamp-types.js

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

package/dist/ui/line-clamp/line-clamp-utils.d.ts

@@ -0,0 +1,8 @@
+import type { SupportedHtmlElement } from './line-clamp-types';
+export declare class LineClampUtils {
+    static calculateClampValue(elm: SupportedHtmlElement): number;
+    static getContentMaxHeight(elm: SupportedHtmlElement): number;
+    private static num;
+    private static getNumberStyleValue;
+    private static getContentLineHeight;
+}

package/dist/ui/line-clamp/line-clamp-utils.js

@@ -0,0 +1,33 @@
+export class LineClampUtils {
+    static calculateClampValue(elm) {
+        const maxHeight = LineClampUtils.getContentMaxHeight(elm);
+        const lineHeight = LineClampUtils.getContentLineHeight(elm);
+        return Math.floor(maxHeight / lineHeight);
+    }
+    static getContentMaxHeight(elm) {
+        const propsToExtractHeightOf = ['padding-top', 'padding-bottom', 'border-top-width', 'border-bottom-width'];
+        const valueToExclude = propsToExtractHeightOf.map((p) => LineClampUtils.getNumberStyleValue(elm, p)).reduce((prev, curr) => prev + curr);
+        const maxHeightStyle = LineClampUtils.getNumberStyleValue(elm, 'max-height');
+        const heightStyle = LineClampUtils.getNumberStyleValue(elm, 'height');
+        const elementHeight = maxHeightStyle || heightStyle || elm.clientHeight;
+        return elementHeight - valueToExclude;
+    }
+    static num(str) {
+        return parseFloat((str + '').replace(/[^\d.]/g, ''));
+    }
+    static getNumberStyleValue(elm, style) {
+        const styleValue = window.getComputedStyle(elm, null).getPropertyValue(style);
+        if (styleValue.indexOf('px') < 0) {
+            return 0;
+        }
+        return LineClampUtils.num(styleValue);
+    }
+    static getContentLineHeight(elm) {
+        const lineHeight = LineClampUtils.getNumberStyleValue(elm, 'line-height');
+        if (lineHeight) {
+            return lineHeight;
+        }
+        console.warn('line-clamp: line-height is not set, using font-size * 1.2', elm);
+        return LineClampUtils.getNumberStyleValue(elm, 'font-size') * 1.2;
+    }
+}

package/dist/ui/loading/cmp.loading.svelte

@@ -0,0 +1,97 @@
+<script lang="ts">import { onMount } from 'svelte';
+let { positionFixedCenter = false, positionAbsoluteCenter = false, blocking = false, timeout = 0 } = $props();
+let visible = $state(false);
+onMount(() => {
+    setTimeout(() => (visible = true), timeout);
+});
+</script>
+
+{#if visible && blocking}
+  <div class="loading-ring-overlay" class:loading-ring-overlay--fixed={positionFixedCenter}></div>
+{/if}
+
+<div
+  class="la-ball-clip-rotate"
+  class:la-ball-clip-rotate--absolute-center={positionAbsoluteCenter}
+  class:la-ball-clip-rotate--fixed-center={positionFixedCenter}
+  class:la-ball-clip-rotate--visible={visible}>
+  <div class="la-ball-clip-rotate__spin"></div>
+</div>
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.loading-ring-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.3);
+  z-index: 999;
+}
+.loading-ring-overlay--fixed {
+  position: fixed;
+}
+
+.la-ball-clip-rotate {
+  --loading--spinner-color_: var(--loading--spinner-color, #144ab0);
+  color: var(--loading--spinner-color_);
+  display: block;
+  opacity: 0;
+  width: 2em;
+  height: 2em;
+  z-index: 10;
+}
+:global([data-theme="dark"]) .la-ball-clip-rotate {
+  --loading--spinner-color_: var(--loading--spinner-color, #5a8dec);
+}
+.la-ball-clip-rotate--visible {
+  opacity: 1;
+}
+.la-ball-clip-rotate--absolute-center {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.la-ball-clip-rotate--fixed-center {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 1;
+}
+.la-ball-clip-rotate__spin {
+  position: relative;
+  box-sizing: border-box;
+  display: inline-block;
+  float: none;
+  border: 0.125em solid currentColor;
+  width: 2em;
+  height: 2em;
+  background: transparent;
+  border-bottom-color: transparent;
+  border-radius: 100%;
+  animation: ball-clip-rotate 0.75s linear infinite;
+}
+
+@keyframes ball-clip-rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  50% {
+    transform: rotate(180deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}</style>

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

@@ -0,0 +1,9 @@
+type Props = {
+    positionFixedCenter?: boolean;
+    positionAbsoluteCenter?: boolean;
+    blocking?: boolean;
+    timeout?: number;
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

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

@@ -0,0 +1 @@
+export { default as Loading } from './cmp.loading.svelte';

package/dist/ui/loading/index.js

@@ -0,0 +1 @@
+export { default as Loading } from './cmp.loading.svelte';

package/dist/ui/media-item-view/cmp.media-item-view.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">import { MediaFormat, MediaType } from '../../core/enums';
+import { getMediaItemImageUrl } from '../../core/media';
+import { Image } from '../image';
+import { ProportionalContainer } from '../proportional-container';
+import { Video } from '../video';
+let { media, ratio = 0, inert = false, on } = $props();
+const handleClick = (e) => {
+    if (on === null || on === void 0 ? void 0 : on.click) {
+        e.stopPropagation();
+        on.click();
+    }
+};
+const parsedRatio = $derived.by(() => {
+    if (!ratio || ratio === 'fit-parent') {
+        return 0;
+    }
+    else {
+        if (typeof ratio !== 'number') {
+            return ratio === MediaFormat.W16H9 ? 16 / 9 : 4 / 3;
+        }
+        else {
+            return ratio;
+        }
+    }
+});
+</script>
+
+{#if media}
+  {#snippet mediaView()}
+    {#if media.type === MediaType.Image}
+      <div class="media-item-view__image" onclick={handleClick} onkeydown={() => {}} role="none">
+        <Image src={getMediaItemImageUrl(media)} />
+      </div>
+    {:else}
+      <div class="media-item-view__video" onclick={handleClick} onkeydown={() => {}} role="none">
+        <Video src={media.url} poster={media.thumbnailUrl} inert={!!on?.click} />
+      </div>
+    {/if}
+  {/snippet}
+
+  <div class="media-item-view" class:media-item-view--clickable={on?.click} class:media-item-view--fit-parent={ratio === 'fit-parent'} inert={inert}>
+    {#if parsedRatio}
+      <ProportionalContainer ratio={parsedRatio}>
+        {@render mediaView()}
+      </ProportionalContainer>
+    {:else}
+      {@render mediaView()}
+    {/if}
+  </div>
+{/if}
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.media-item-view {
+  width: 100%;
+  min-width: 100%;
+  max-width: 100%;
+  overflow: hidden;
+  position: relative;
+  --video--media-fit: cover;
+}
+.media-item-view--fit-parent {
+  width: 100%;
+  min-width: 100%;
+  max-width: 100%;
+  height: 100%;
+  min-height: 100%;
+  max-height: 100%;
+}
+.media-item-view__image {
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+}
+.media-item-view__video {
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+}
+.media-item-view--clickable {
+  cursor: pointer;
+}</style>

package/dist/ui/media-item-view/cmp.media-item-view.svelte.d.ts

@@ -0,0 +1,13 @@
+import { MediaFormat } from '../../core/enums';
+import { type MediaItemModel } from '../../core/media';
+type Props = {
+    media: MediaItemModel | null;
+    ratio?: number | MediaFormat | 'fit-parent';
+    inert?: boolean;
+    on?: {
+        click?: () => void;
+    };
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/media-item-view/index.d.ts

@@ -0,0 +1 @@
+export { default as MediaItemView } from './cmp.media-item-view.svelte';

package/dist/ui/media-item-view/index.js

@@ -0,0 +1 @@
+export { default as MediaItemView } from './cmp.media-item-view.svelte';