@streamscloud/embeddable 1.1.2

package/README.md

@@ -0,0 +1 @@
+Shared embeddable Streams components

package/dist/advertising/ad-view/cmp.ad-view.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">import { getMediaItemImageUrl } from '../../core/media';
+import { Button, ButtonSize } from '../../ui/button';
+import { Image } from '../../ui/image';
+import { LineClamp } from '../../ui/line-clamp';
+import { ProportionalContainer } from '../../ui/proportional-container';
+let { ad, inert = false } = $props();
+</script>
+
+<div class="ad" inert={inert}>
+  <ProportionalContainer ratio={16 / 9}>
+    <Image src={getMediaItemImageUrl(ad.media)} alt={ad.title} />
+  </ProportionalContainer>
+  <div class="ad__body">
+    {#if ad.title}
+      <p class="ad__title">{ad.title}</p>
+    {/if}
+    {#if ad.description}
+      <p class="ad__description">
+        <LineClamp value={ad.description} maxLines={3} />
+      </p>
+    {/if}
+    {#if ad.buttonUrl}
+      <div class="ad__button">
+        <a href={ad.buttonUrl} target="_blank" class="ad__link">
+          <Button size={ButtonSize.Standard}>{ad.buttonText || ad.buttonUrl}</Button>
+        </a>
+      </div>
+    {/if}
+  </div>
+</div>
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.ad {
+  --_ad--global--font-size: var(--ad--global--font-size, 1rem);
+  --_ad--body--horizontal-indent: var(--ad--body--horizontal-indent, 1em);
+  --_ad--body--padding-top: var(--ad--body--padding-top, 1em);
+  --_ad--body--padding-bottom: var(--ad--body--padding-bottom, 1.25em);
+  --_ad--min-height: var(--ad--min-height, 0em);
+  --_ad--background: var(--ad--background, #fafafa);
+  font-size: var(--_ad--global--font-size);
+  display: flex;
+  flex-direction: column;
+  border-radius: 0.25em;
+  background: var(--_ad--background);
+  min-height: var(--_ad--min-height);
+  overflow: hidden;
+  width: 100%;
+}
+:global([data-theme="dark"]) .ad {
+  --_ad--background: var(--ad--background, #1c1c1c);
+}
+.ad__body {
+  padding: var(--_ad--body--padding-top) var(--_ad--body--horizontal-indent) var(--_ad--body--padding-top);
+}
+.ad__title {
+  font-size: 0.9375em;
+  font-weight: bold;
+  display: block;
+  margin-bottom: 0.8333333333em;
+}
+.ad__description {
+  font-size: 0.75em;
+  display: block;
+  margin-bottom: 1.3333333333em;
+  white-space: pre-line;
+  word-break: break-word;
+}
+.ad__button {
+  margin-top: 1em;
+  display: flex;
+  justify-content: center;
+}</style>

package/dist/advertising/ad-view/cmp.ad-view.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { AdViewModel } from './types';
+type Props = {
+    ad: AdViewModel;
+    inert?: boolean;
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/advertising/ad-view/index.d.ts

@@ -0,0 +1,2 @@
+export { default as AdView } from './cmp.ad-view.svelte';
+export type { AdViewModel } from './types';

package/dist/advertising/ad-view/index.js

@@ -0,0 +1 @@
+export { default as AdView } from './cmp.ad-view.svelte';

package/dist/advertising/ad-view/mapper.d.ts

@@ -0,0 +1,3 @@
+import type { AdViewPayloadFragment } from './operations.generated';
+import type { AdViewModel } from './types';
+export declare const mapToAdViewModel: (payload: AdViewPayloadFragment) => AdViewModel;

package/dist/advertising/ad-view/mapper.js

@@ -0,0 +1,16 @@
+export const mapToAdViewModel = (payload) => {
+    const media = payload.media[0];
+    return {
+        id: payload.id,
+        title: payload.title,
+        description: payload.description,
+        buttonText: payload.buttonText,
+        buttonUrl: payload.buttonUrl,
+        openLinkInNewWindow: payload.openLinkInNewWindow,
+        media: {
+            url: media.url,
+            thumbnailUrl: media.thumbnailUrl,
+            type: media.type
+        }
+    };
+};

package/dist/advertising/ad-view/operations.generated.d.ts

@@ -0,0 +1,17 @@
+import type * as SchemaTypes from '../../../gql/types';
+import type { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+export type AdViewPayloadFragment = {
+    id: string;
+    title: string;
+    description: string | null;
+    buttonText: string | null;
+    buttonUrl: string | null;
+    openLinkInNewWindow: boolean | null;
+    type: SchemaTypes.AdType;
+    media: Array<{
+        type: SchemaTypes.MediaType;
+        url: string;
+        thumbnailUrl: string | null;
+    }>;
+};
+export declare const AdViewPayloadFragmentDoc: DocumentNode<AdViewPayloadFragment, unknown>;

package/dist/advertising/ad-view/operations.generated.js

@@ -0,0 +1,46 @@
+export const AdViewPayloadFragmentDoc = {
+    kind: 'Document',
+    definitions: [
+        {
+            kind: 'FragmentDefinition',
+            name: { kind: 'Name', value: 'AdViewPayloadFragment' },
+            typeCondition: { kind: 'NamedType', name: { kind: 'Name', value: 'Ad' } },
+            selectionSet: {
+                kind: 'SelectionSet',
+                selections: [
+                    { kind: 'Field', name: { kind: 'Name', value: 'id' } },
+                    { kind: 'Field', name: { kind: 'Name', value: 'title' } },
+                    { kind: 'Field', name: { kind: 'Name', value: 'description' } },
+                    { kind: 'Field', name: { kind: 'Name', value: 'buttonText' } },
+                    { kind: 'Field', name: { kind: 'Name', value: 'buttonUrl' } },
+                    { kind: 'Field', name: { kind: 'Name', value: 'openLinkInNewWindow' } },
+                    { kind: 'Field', name: { kind: 'Name', value: 'type' } },
+                    {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: 'media' },
+                        selectionSet: {
+                            kind: 'SelectionSet',
+                            selections: [
+                                { kind: 'Field', name: { kind: 'Name', value: 'type' } },
+                                {
+                                    kind: 'Field',
+                                    name: { kind: 'Name', value: 'url' },
+                                    arguments: [
+                                        { kind: 'Argument', name: { kind: 'Name', value: 'scale' }, value: { kind: 'Variable', name: { kind: 'Name', value: 'image_scale' } } }
+                                    ]
+                                },
+                                {
+                                    kind: 'Field',
+                                    name: { kind: 'Name', value: 'thumbnailUrl' },
+                                    arguments: [
+                                        { kind: 'Argument', name: { kind: 'Name', value: 'scale' }, value: { kind: 'Variable', name: { kind: 'Name', value: 'image_scale' } } }
+                                    ]
+                                }
+                            ]
+                        }
+                    }
+                ]
+            }
+        }
+    ]
+};

package/dist/advertising/ad-view/operations.graphql

@@ -0,0 +1,14 @@
+fragment AdViewPayloadFragment on Ad {
+  id
+  title
+  description
+  buttonText
+  buttonUrl
+  openLinkInNewWindow
+  type
+  media {
+    type
+    url(scale: $image_scale)
+    thumbnailUrl(scale: $image_scale)
+  }
+}

package/dist/advertising/ad-view/types.d.ts

@@ -0,0 +1,10 @@
+import type { MediaItemModel } from '../../core/media';
+export type AdViewModel = {
+    id: string;
+    title: string;
+    description: string | null;
+    buttonText: string | null;
+    buttonUrl: string | null;
+    openLinkInNewWindow: boolean | null;
+    media: MediaItemModel;
+};

package/dist/advertising/ad-view/types.js

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

package/dist/advertising/index.d.ts

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

package/dist/advertising/index.js

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

package/dist/advertising/types.d.ts

@@ -0,0 +1,5 @@
+export declare enum AdType {
+    BannerResponsive = "BANNER_RESPONSIVE",
+    MediaDialogPromotion = "MEDIA_DIALOG_PROMOTION",
+    Story = "STORY"
+}

package/dist/advertising/types.js

@@ -0,0 +1,6 @@
+export var AdType;
+(function (AdType) {
+    AdType["BannerResponsive"] = "BANNER_RESPONSIVE";
+    AdType["MediaDialogPromotion"] = "MEDIA_DIALOG_PROMOTION";
+    AdType["Story"] = "STORY";
+})(AdType || (AdType = {}));

package/dist/core/continuation-token.d.ts

@@ -0,0 +1,10 @@
+export declare class ContinuationToken {
+    canLoadMore: boolean;
+    value: string | null;
+    private constructor();
+    static init(): ContinuationToken;
+    static fromPayload(value: string | null): ContinuationToken;
+    static preventLoading(): ContinuationToken;
+    toString(): string | null;
+    toJSON(): string | null;
+}

package/dist/core/continuation-token.js

@@ -0,0 +1,32 @@
+export class ContinuationToken {
+    canLoadMore;
+    value;
+    constructor(canLoadMore, value) {
+        this.canLoadMore = canLoadMore;
+        this.value = value;
+    }
+    static init() {
+        // initial state, no data is loaded so far
+        return new ContinuationToken(true, null);
+    }
+    static fromPayload(value) {
+        if (value?.length && value.length > 1 && value.length < 5000) {
+            // initialized with server response that there is more data, and value is valid
+            return new ContinuationToken(true, value);
+        }
+        else {
+            // initialized with server response that there is no more data or value is invalid
+            return new ContinuationToken(false, null);
+        }
+    }
+    static preventLoading() {
+        // additional initilizer, to block further loading
+        return new ContinuationToken(false, null);
+    }
+    toString() {
+        return this.value;
+    }
+    toJSON() {
+        return this.value;
+    }
+}

package/dist/core/cursor-result.d.ts

@@ -0,0 +1,9 @@
+import type { ContinuationToken } from './continuation-token';
+export type CursorResult<T> = {
+    items: T[];
+    continuationToken: ContinuationToken;
+};
+export type CursorPayload<T> = {
+    items: T[];
+    continuationToken: string | null;
+};

package/dist/core/cursor-result.js

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

package/dist/core/data-loaders/cursor-data-loader.svelte.d.ts

@@ -0,0 +1,14 @@
+import { type CursorResult } from '../cursor-result';
+import { ContinuationToken } from '../continuation-token';
+import type { IDataLoader } from './data-loader';
+export declare class CursorDataLoader<T> implements IDataLoader<T> {
+    items: T[];
+    continuationToken: ContinuationToken;
+    private loadPage;
+    private deferred;
+    constructor(init: {
+        loadPage: (continuationToken: ContinuationToken) => Promise<CursorResult<T> | null>;
+    });
+    loadMore: () => Promise<T[]>;
+    reset(): Promise<void>;
+}

package/dist/core/data-loaders/cursor-data-loader.svelte.js

@@ -0,0 +1,35 @@
+import {} from '../cursor-result';
+import { Deferred } from '../deferred';
+import { ContinuationToken } from '../continuation-token';
+export class CursorDataLoader {
+    items = $state([]);
+    continuationToken = $state.raw(ContinuationToken.init());
+    loadPage;
+    deferred = null;
+    constructor(init) {
+        this.loadPage = init.loadPage;
+    }
+    loadMore = async () => {
+        if (this.deferred) {
+            return this.deferred.promise;
+        }
+        if (!this.continuationToken.canLoadMore) {
+            return [];
+        }
+        this.deferred = new Deferred();
+        let result = await this.loadPage(this.continuationToken);
+        if (!result) {
+            result = { items: [], continuationToken: ContinuationToken.preventLoading() };
+        }
+        this.continuationToken = result.continuationToken;
+        this.items = [...this.items, ...result.items];
+        this.deferred.resolve(result.items);
+        this.deferred = null;
+        return result.items;
+    };
+    async reset() {
+        this.items = [];
+        this.continuationToken = ContinuationToken.init();
+        await this.loadMore();
+    }
+}

package/dist/core/data-loaders/data-loader.d.ts

@@ -0,0 +1,4 @@
+export interface IDataLoader<T> {
+    items: T[];
+    loadMore: () => Promise<T[]>;
+}

package/dist/core/data-loaders/data-loader.js

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

package/dist/core/data-loaders/index.d.ts

@@ -0,0 +1,2 @@
+export { CursorDataLoader } from './cursor-data-loader.svelte';
+export type { IDataLoader } from './data-loader';

package/dist/core/data-loaders/index.js

@@ -0,0 +1 @@
+export { CursorDataLoader } from './cursor-data-loader.svelte';

package/dist/core/deferred.d.ts

@@ -0,0 +1,6 @@
+export declare class Deferred<T = void> {
+    promise: Promise<T>;
+    reject: (reason?: unknown) => void;
+    resolve: (value: T) => void;
+    constructor();
+}

package/dist/core/deferred.js

@@ -0,0 +1,13 @@
+export class Deferred {
+    promise;
+    reject;
+    resolve;
+    constructor() {
+        this.resolve = () => ({});
+        this.reject = () => ({});
+        this.promise = new Promise((resolve, reject) => {
+            this.reject = reject;
+            this.resolve = resolve;
+        });
+    }
+}

package/dist/core/graphql.d.ts

@@ -0,0 +1 @@
+export declare const createLocalGQLClient: (customFetch?: typeof fetch) => import("@urql/core").Client;

package/dist/core/graphql.js

@@ -0,0 +1,10 @@
+import { createClient, fetchExchange } from '@urql/core';
+export const createLocalGQLClient = (customFetch) => createClient({
+    url: 'https://localhost:5000/graphql',
+    requestPolicy: 'network-only',
+    fetchOptions: {
+        credentials: 'include'
+    },
+    fetch: customFetch || fetch,
+    exchanges: [fetchExchange]
+});

package/dist/core/media/image-helper.d.ts

@@ -0,0 +1,10 @@
+export declare class ImageHelper {
+    static checkIsVertical: (url: string) => Promise<boolean>;
+    static computeRatio: (src: string) => Promise<ImageSize | null>;
+    static getRatio: (metadata: ImageSize) => number;
+}
+type ImageSize = {
+    width: number;
+    height: number;
+};
+export {};

package/dist/core/media/image-helper.js

@@ -0,0 +1,30 @@
+export class ImageHelper {
+    static checkIsVertical = async (url) => {
+        const ratio = await ImageHelper.computeRatio(url);
+        if (!ratio) {
+            return false;
+        }
+        return ratio.height >= ratio.width;
+    };
+    static computeRatio = async (src) => {
+        const setRatio = (imageElement, resolveFn) => {
+            if (!imageElement || !imageElement.width) {
+                resolveFn(null);
+            }
+            else {
+                resolveFn({ width: imageElement.width, height: imageElement.height });
+            }
+        };
+        return new Promise((resolve) => {
+            const imageElement = new Image();
+            imageElement.onload = () => {
+                setRatio(imageElement, resolve);
+            };
+            imageElement.onerror = () => {
+                setRatio(null, resolve);
+            };
+            imageElement.src = src;
+        });
+    };
+    static getRatio = (metadata) => metadata.width / metadata.height;
+}

package/dist/core/media/images-size-detector.service.d.ts

@@ -0,0 +1,6 @@
+import { ImageScale } from './types';
+export declare class ImageSizeDetectorService {
+    userAgent: string | null;
+    constructor(userAgent?: string | null);
+    getImageSize(): ImageScale;
+}

package/dist/core/media/images-size-detector.service.js

@@ -0,0 +1,15 @@
+import { ImageScale } from './types';
+import MobileDetect from 'mobile-detect';
+export class ImageSizeDetectorService {
+    userAgent;
+    constructor(userAgent = null) {
+        this.userAgent = userAgent;
+    }
+    getImageSize() {
+        if (!this.userAgent) {
+            return ImageScale.OriginalEncoded;
+        }
+        const result = new MobileDetect(this.userAgent);
+        return result.mobile() ? ImageScale.Medium : ImageScale.OriginalEncoded;
+    }
+}

package/dist/core/media/index.d.ts

@@ -0,0 +1,4 @@
+export { ImageHelper } from './image-helper';
+export { ImageSizeDetectorService } from './images-size-detector.service';
+export { type MediaItemModel, type MediaItemMetadataModel, type MediaItemWithMetadataModel, MediaType, MediaFormat, ImageScale } from './types';
+export { getMediaItemImageUrl } from './media-item-url.service';

package/dist/core/media/index.js

@@ -0,0 +1,4 @@
+export { ImageHelper } from './image-helper';
+export { ImageSizeDetectorService } from './images-size-detector.service';
+export { MediaType, MediaFormat, ImageScale } from './types';
+export { getMediaItemImageUrl } from './media-item-url.service';

package/dist/core/media/media-item-url.service.d.ts

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

package/dist/core/media/media-item-url.service.js

@@ -0,0 +1,2 @@
+import { MediaType } from './types';
+export const getMediaItemImageUrl = (media) => (media.type === MediaType.Image ? media.url : media.thumbnailUrl);

package/dist/core/media/types.d.ts

@@ -0,0 +1,28 @@
+export type MediaItemModel = {
+    type: MediaType;
+    url: string;
+    thumbnailUrl: string | null;
+};
+export type MediaItemMetadataModel = {
+    width: number;
+    height: number;
+};
+export type MediaItemWithMetadataModel = MediaItemModel & {
+    metadata: MediaItemMetadataModel;
+};
+export declare enum MediaType {
+    Audio = "AUDIO",
+    Image = "IMAGE",
+    ShortVideo = "SHORT_VIDEO",
+    Video = "VIDEO"
+}
+export declare enum MediaFormat {
+    W4H3 = "W4H3",
+    W16H9 = "W16H9"
+}
+export declare enum ImageScale {
+    Big = "BIG",
+    Medium = "MEDIUM",
+    OriginalEncoded = "ORIGINAL_ENCODED",
+    Small = "SMALL"
+}

package/dist/core/media/types.js

@@ -0,0 +1,19 @@
+export var MediaType;
+(function (MediaType) {
+    MediaType["Audio"] = "AUDIO";
+    MediaType["Image"] = "IMAGE";
+    MediaType["ShortVideo"] = "SHORT_VIDEO";
+    MediaType["Video"] = "VIDEO";
+})(MediaType || (MediaType = {}));
+export var MediaFormat;
+(function (MediaFormat) {
+    MediaFormat["W4H3"] = "W4H3";
+    MediaFormat["W16H9"] = "W16H9";
+})(MediaFormat || (MediaFormat = {}));
+export var ImageScale;
+(function (ImageScale) {
+    ImageScale["Big"] = "BIG";
+    ImageScale["Medium"] = "MEDIUM";
+    ImageScale["OriginalEncoded"] = "ORIGINAL_ENCODED";
+    ImageScale["Small"] = "SMALL";
+})(ImageScale || (ImageScale = {}));

package/dist/core/toastr.d.ts

@@ -0,0 +1 @@
+export declare const toastrWarning: (message: string) => void;

package/dist/core/toastr.js

@@ -0,0 +1,26 @@
+export const toastrWarning = (message) => {
+    const toast = document.createElement('div');
+    toast.innerHTML = `
+        <span>${message}</span>
+        <span style="margin-left: auto; cursor: pointer; color: #666;" onclick="this.parentElement.remove()">x</span>
+    `;
+    Object.assign(toast.style, {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '8px',
+        background: 'white',
+        color: 'black',
+        borderRadius: '5px',
+        padding: '12px 16px',
+        boxShadow: '0 2px 10px rgba(0, 0, 0, 0.1)',
+        position: 'fixed',
+        bottom: '10px',
+        right: '10px',
+        width: '300px',
+        borderLeft: '4px solid #e0a800',
+        borderBottom: '4px solid #e0a800',
+        zIndex: 1000
+    });
+    document.body.appendChild(toast);
+    setTimeout(() => toast.remove(), 5000);
+};

package/dist/core/transitions/index.d.ts

@@ -0,0 +1 @@
+export { slideHorizontally } from './slide-horizontally';

package/dist/core/transitions/index.js

@@ -0,0 +1 @@
+export { slideHorizontally } from './slide-horizontally';

package/dist/core/transitions/slide-horizontally.d.ts

@@ -0,0 +1,7 @@
+import { sineInOut } from 'svelte/easing';
+import type { TransitionConfig } from 'svelte/transition';
+export declare const slideHorizontally: (node: HTMLElement, { delay, duration, easing }?: {
+    delay?: number | undefined;
+    duration?: number | undefined;
+    easing?: typeof sineInOut | undefined;
+}) => TransitionConfig;

package/dist/core/transitions/slide-horizontally.js

@@ -0,0 +1,55 @@
+import { sineInOut } from 'svelte/easing';
+export const slideHorizontally = (node, { delay = 0, duration = 400, easing = sineInOut } = {}) => {
+    const style = getComputedStyle(node);
+    const isHtmlElement = (node) => node.nodeType === Node.ELEMENT_NODE;
+    const children = Array.from(node.children).filter(isHtmlElement);
+    children.forEach((child) => {
+        const style = getComputedStyle(child);
+        child.style.width = style.width;
+        child.style.minWidth = style.width;
+        child.style.maxWidth = style.maxWidth;
+    });
+    const opacity = +style.opacity;
+    const width = parseFloat(style.width);
+    const padding_left = parseFloat(style.paddingLeft);
+    const padding_right = parseFloat(style.paddingRight);
+    const margin_left = parseFloat(style.marginLeft);
+    const margin_right = parseFloat(style.marginRight);
+    const border_left_width = parseFloat(style.borderLeftWidth);
+    const border_right_width = parseFloat(style.borderRightWidth);
+    let initialT = undefined;
+    let initialU = undefined;
+    return {
+        delay,
+        duration,
+        easing,
+        css: (t, u) => {
+            if (initialT === undefined) {
+                initialT = t;
+            }
+            if (initialU === undefined) {
+                initialU = u;
+            }
+            return ('overflow: hidden;' +
+                `opacity: ${Math.min(t, 1) * opacity};` +
+                `width: ${t * width}px;` +
+                `min-width: ${t * width}px;` +
+                `padding-left: ${t * padding_left}px;` +
+                `padding-right: ${t * padding_right}px;` +
+                `margin-left: ${t * margin_left}px;` +
+                `margin-right: ${t * margin_right}px;` +
+                `border-left-width: ${t * border_left_width}px;` +
+                `border-right-width: ${t * border_right_width}px;`);
+        },
+        // Clean up function to remove the wrapper when the transition is done
+        tick: (t, u) => {
+            if ((initialT === 0 && t === 1) || (initialU === 0 && u === 1)) {
+                children.forEach((child) => {
+                    child.style.width = '';
+                    child.style.minWidth = '';
+                    child.style.maxWidth = '';
+                });
+            }
+        }
+    };
+};