@streamscloud/embeddable 3.2.2 → 3.2.4

package/dist/streams/stream-player/stream-player-localization.svelte.js

@@ -0,0 +1,10 @@
+export class StreamPlayerLocalization {
+    streamNotFound = $state('Stream not found');
+    pagesCount = $state((count) => (count === 1 ? '1 page' : `${count} pages`));
+    shortVideoDetailsLocalization = $state(undefined);
+    constructor(init) {
+        this.streamNotFound = init?.streamNotFound || this.streamNotFound;
+        this.pagesCount = init?.pagesCount || this.pagesCount;
+        this.shortVideoDetailsLocalization = init?.shortVideoDetailsLocalization || this.shortVideoDetailsLocalization;
+    }
+}

package/dist/ui/icon/cmp.icon.svelte

@@ -1,20 +1,34 @@
 <script lang="ts">import { IconColor } from './types';
+import { inlineSvg } from '@svelte-put/inline-svg';
 let { src, color = null } = $props();
+let svgRef;
+$effect(() => {
+    if (svgRef && src) {
+        inlineSvg(svgRef, src);
+    }
+});
+const fillSvg = (node) => {
+    svgRef = node;
+    return inlineSvg(node, src);
+};
 </script>
 
-{#if src?.startsWith('<svg')}
-  <div
-    class="icon"
-    class:icon--white={color === IconColor.White}
-    class:icon--text={color === IconColor.Text}
-    class:icon--gray={color === IconColor.Gray}
-    class:icon--green={color === IconColor.Green}
-    class:icon--red={color === IconColor.Red}
-    class:icon--orange={color === IconColor.Orange}
-    class:icon--blue={color === IconColor.Blue}>
+<div
+  class="icon"
+  style="display: contents"
+  class:icon--white={color === IconColor.White}
+  class:icon--text={color === IconColor.Text}
+  class:icon--gray={color === IconColor.Gray}
+  class:icon--green={color === IconColor.Green}
+  class:icon--red={color === IconColor.Red}
+  class:icon--orange={color === IconColor.Orange}
+  class:icon--blue={color === IconColor.Blue}>
+  {#if src.startsWith('<svg')}
     {@html src}
-  </div>
-{/if}
+  {:else}
+    <svg use:fillSvg></svg>
+  {/if}
+</div>
 
 <style>@keyframes fadeIn {
   0% {
@@ -31,7 +45,6 @@ let { src, color = null } = $props();
   --_icon--color: var(--icon--color);
   --_icon--size: var(--icon--size, 1.25em);
   --_icon--stroke-width: var(--icon--stroke-width, 0);
-  display: contents;
 }
 .icon--white {
   --_icon--color: #ffffff;

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

@@ -1,8 +1,8 @@
-<script lang="ts">import { LineClampLocalization } from './line-clamp-localization';
+<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 !== null && localizationInit !== void 0 ? localizationInit : 'en'));
+const localization = $derived(new LineClampLocalization(localizationInit));
 let parent;
 let element;
 let clampWrapperRef;

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

@@ -1,11 +1,10 @@
-import type { Locale } from '../../core/locale';
-import { type ILineClampLocalization } from './line-clamp-localization';
+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 | Locale;
+    localization?: ILineClampLocalization;
     children?: Snippet;
 };
 declare const Cmp: import("svelte").Component<Props, {}, "">;

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

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

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

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

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

@@ -1,4 +1,3 @@
-import { type Locale } from '../../core/locale';
 export interface ILineClampLocalization {
     showLess?: string;
     showMore?: string;
@@ -6,5 +5,5 @@ export interface ILineClampLocalization {
 export declare class LineClampLocalization {
     showLess: string;
     showMore: string;
-    constructor(init: ILineClampLocalization | Locale);
+    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/shadow-dom/shadow-host.d.ts

@@ -1,7 +1,11 @@
 export declare class ShadowHost {
     shadowRoot: ShadowRoot;
     private host;
-    constructor();
+    private callbacks;
+    constructor(init: {
+        onClosed: () => void;
+    });
     attachToBody(): void;
     remove(): void;
+    private handleEsc;
 }

package/dist/ui/shadow-dom/shadow-host.js

@@ -3,7 +3,11 @@ import reset from './_reset.scss?raw';
 export class ShadowHost {
     shadowRoot;
     host;
-    constructor() {
+    callbacks;
+    constructor(init) {
+        this.callbacks = {
+            onClosed: init.onClosed
+        };
         const host = document.createElement('div');
         host.style.all = 'unset';
         host.style.position = 'fixed';
@@ -15,6 +19,7 @@ export class ShadowHost {
         host.style.margin = '0';
         host.style.boxSizing = 'border-box';
         host.style.textAlign = 'initial';
+        document.addEventListener('keydown', this.handleEsc);
         this.host = host;
         this.shadowRoot = host.attachShadow({ mode: 'open' });
         const styleElement = document.createElement('style');
@@ -28,5 +33,13 @@ export class ShadowHost {
     remove() {
         this.host.remove();
         document.getElementsByTagName('html')[0].style.overflow = '';
+        document.removeEventListener('keydown', this.handleEsc);
+        this.callbacks.onClosed();
     }
+    handleEsc = (event) => {
+        if (event.key === 'Escape' || event.key === 'Esc') {
+            // Remove the modal from the DOM, for example:
+            this.remove();
+        }
+    };
 }

package/dist/ui/time-ago/cmp.time-ago.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">import { DateFormatOptions, DateHelper } from '../../core/utils/date-helper';
-import { TimeAgoLocalization } from './time-ago-localization';
+import { TimeAgoLocalization } from './time-ago-localization.svelte';
 import { onDestroy } from 'svelte';
 let { date = null, thresholdMinutes = 60 * 24 * 2 /* 2 days */, localization: localizationInit } = $props();
 const localization = $derived(new TimeAgoLocalization(localizationInit));

package/dist/ui/time-ago/cmp.time-ago.svelte.d.ts

@@ -1,9 +1,8 @@
-import type { Locale } from '../../core/locale';
-import { type ITimeAgoLocalization } from './time-ago-localization';
+import { type ITimeAgoLocalization } from './time-ago-localization.svelte';
 type Props = {
     date: Date | string | null;
     thresholdMinutes?: number;
-    localization: ITimeAgoLocalization | Locale;
+    localization?: ITimeAgoLocalization;
 };
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

package/dist/ui/time-ago/index.d.ts

@@ -1,2 +1,2 @@
 export { default as TimeAgo } from './cmp.time-ago.svelte';
-export type { ITimeAgoLocalization } from './time-ago-localization';
+export type { ITimeAgoLocalization } from './time-ago-localization.svelte';

package/dist/ui/time-ago/{time-ago-localization.d.ts → time-ago-localization.svelte.d.ts}

@@ -1,4 +1,3 @@
-import { type Locale } from '../../core/locale';
 export interface ITimeAgoLocalization {
     locale?: string;
     aMinuteAgo?: string;
@@ -18,5 +17,5 @@ export declare class TimeAgoLocalization {
     hoursAgo: (hours: number) => string;
     minutesAgo: (minutes: number) => string;
     yesterday: (time: string) => string;
-    constructor(init: ITimeAgoLocalization | Locale);
+    constructor(init?: ITimeAgoLocalization);
 }

package/dist/ui/time-ago/time-ago-localization.svelte.js

@@ -0,0 +1,39 @@
+export class TimeAgoLocalization {
+    locale = $state('en-US');
+    aMinuteAgo = $state('a minute ago');
+    anHourAgo = $state('an hour ago');
+    justNow = $state('just now');
+    at = $state((date, time) => `${date} at ${time}`);
+    hoursAgo = $state((hours) => `${hours} hours ago`);
+    minutesAgo = $state((minutes) => `${minutes} minutes ago`);
+    yesterday = $state((time) => `esterday at ${time}`);
+    constructor(init) {
+        if (!init) {
+            return;
+        }
+        if (init.locale !== undefined) {
+            this.locale = init.locale;
+        }
+        if (init.aMinuteAgo !== undefined) {
+            this.aMinuteAgo = init.aMinuteAgo;
+        }
+        if (init.anHourAgo !== undefined) {
+            this.anHourAgo = init.anHourAgo;
+        }
+        if (init.justNow !== undefined) {
+            this.justNow = init.justNow;
+        }
+        if (init.at !== undefined) {
+            this.at = init.at;
+        }
+        if (init.hoursAgo !== undefined) {
+            this.hoursAgo = init.hoursAgo;
+        }
+        if (init.minutesAgo !== undefined) {
+            this.minutesAgo = init.minutesAgo;
+        }
+        if (init.yesterday !== undefined) {
+            this.yesterday = init.yesterday;
+        }
+    }
+}

package/dist/ui/video/cmp.video.svelte

@@ -55,13 +55,8 @@ onMount(() => {
     }
 });
 onDestroy(() => {
-    try {
-        PlaybackManager.unregisterPlayer(id);
-        intersectionObserver.disconnect();
-    }
-    catch (_a) {
-        // ignore
-    }
+    PlaybackManager.unregisterPlayer(id);
+    intersectionObserver.disconnect();
 });
 let video = $state.raw(undefined);
 let showControlsOnHover = $state(false);
@@ -159,7 +154,6 @@ const stop = () => {
     video.pause();
     video.currentTime = 0;
     video.load();
-    onPause();
 };
 const togglePlay = (e) => {
     e === null || e === void 0 ? void 0 : e.stopPropagation();
@@ -240,7 +234,7 @@ const handleSeek = (percent) => {
 <div class="video" onmouseenter={() => setShowControlsOnHover(true)} onmouseleave={() => setShowControlsOnHover(false)} role="none" inert={inert}>
   <video
     class="video__video"
-    class:video__video--not-activated={!everActivated}
+    style={everActivated ? `--_video--media-fit: contain;` : ''}
     width="100%"
     controls={controls && everActivated}
     poster={poster}
@@ -256,11 +250,8 @@ const handleSeek = (percent) => {
     bind:this={video}>
     <track src="" kind="captions" />
   </video>
-  {#if !everActivated}
-    <img class="video__poster" src={poster} alt="" />
-  {/if}
   {#if !controls || !everActivated}
-    <div class="video__overlay" onclick={togglePlay} onkeydown={() => ({})} role="none">
+    <div class="video__cover" onclick={togglePlay} onkeydown={() => ({})} role="none">
       {#if isVideoPaused}
         <button type="button" aria-label="play" class="video__playback-button" onclick={togglePlay} onkeydown={() => ({})}>
           <Icon src={IconPlay} color={IconColor.White} />
@@ -280,22 +271,20 @@ const handleSeek = (percent) => {
         </button>
       {/if}
 
-      {#if everActivated}
-        <div class="video__progress-container">
-          {#if needShowProgress}
-            {#if showControlsOnHover}
-              <div class="video__seek-bar" onclick={(e) => e.stopPropagation()} onkeydown={() => ({})} role="none" transition:slide>
-                <SeekBar value={percentageCompleted} on={{ seek: handleSeek }} />
-              </div>
-            {/if}
-            {#if !showControlsOnHover}
-              <div class="video__progress" in:slide>
-                <Progress value={percentageCompleted} />
-              </div>
-            {/if}
+      <div class="video__progress-container">
+        {#if needShowProgress}
+          {#if showControlsOnHover}
+            <div class="video__seek-bar" onclick={(e) => e.stopPropagation()} onkeydown={() => ({})} role="none" transition:slide>
+              <SeekBar value={percentageCompleted} on={{ seek: handleSeek }} />
+            </div>
           {/if}
-        </div>
-      {/if}
+          {#if !showControlsOnHover}
+            <div class="video__progress" in:slide>
+              <Progress value={percentageCompleted} />
+            </div>
+          {/if}
+        {/if}
+      </div>
     </div>
   {/if}
 </div>
@@ -315,7 +304,6 @@ const handleSeek = (percent) => {
   --_video--background-color: var(--video--background-color, #000000);
   --_video--border-radius: var(--video--border-radius, 0);
   --_video--media-fit: var(--video--media-fit, contain);
-  --_video--poster--media-fit: var(--video--poster--media-fit, cover);
   --_video--progress--background-color: var(--video--progress--background-color, hsla(0, 0%, 0%, 0.5));
   --_video--progress--back-color: var(--video--progress--back-color);
   --_video--progress--front-color: var(--video--progress--front-color);
@@ -353,13 +341,6 @@ const handleSeek = (percent) => {
   font-size: 1em;
   z-index: 1;
 }
-.video__poster {
-  object-fit: var(--_video--poster--media-fit);
-  min-width: 100%;
-  min-height: 100%;
-  max-width: 100%;
-  max-height: 100%;
-}
 .video__video {
   object-fit: var(--_video--media-fit);
   min-width: 100%;
@@ -367,12 +348,7 @@ const handleSeek = (percent) => {
   max-width: 100%;
   max-height: 100%;
 }
-.video__video--not-activated {
-  visibility: hidden;
-  height: 0;
-  min-height: 0;
-}
-.video__overlay {
+.video__cover {
   position: absolute;
   left: 0;
   top: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/embeddable",
-  "version": "3.2.2",
+  "version": "3.2.4",
   "author": "StreamsCloud",
   "repository": "https://github.com/StreamsCloud/streamscloud-frontend-packages.git",
   "type": "module",

package/dist/core/analytics.profile-id.d.ts

@@ -1,5 +0,0 @@
-/**
- * Retrieves the profile ID from localStorage or generates a new one if it doesn't exist
- * @returns The profile ID to use for analytics tracking
- */
-export declare const getOrCreateProfileId: () => string;

package/dist/core/analytics.profile-id.js

@@ -1,17 +0,0 @@
-/**
- * Key used for storing the profile ID in local storage
- */
-const PROFILE_ID_STORAGE_KEY = 'streamscloud_profile_id';
-/**
- * Retrieves the profile ID from localStorage or generates a new one if it doesn't exist
- * @returns The profile ID to use for analytics tracking
- */
-export const getOrCreateProfileId = () => {
-    const storedProfileId = localStorage.getItem(PROFILE_ID_STORAGE_KEY);
-    if (!storedProfileId) {
-        const newProfileId = crypto.randomUUID();
-        localStorage.setItem(PROFILE_ID_STORAGE_KEY, newProfileId);
-        return newProfileId;
-    }
-    return storedProfileId;
-};

package/dist/core/document.event-handlers.d.ts

@@ -1 +0,0 @@
-export declare const handleEsc: (event: KeyboardEvent, callback: () => void) => void;

package/dist/core/document.event-handlers.js

@@ -1,5 +0,0 @@
-export const handleEsc = (event, callback) => {
-    if (event.key === 'Escape' || event.key === 'Esc') {
-        callback();
-    }
-};

package/dist/core/locale.d.ts

@@ -1,6 +0,0 @@
-export type Locale = 'en' | 'no';
-export declare const getLocale: <T>(input?: Locale | T) => Locale | T;
-export declare const isEn: <T>(input: Locale | T) => input is "en";
-export declare const isNo: <T>(input: Locale | T) => input is "no";
-export declare const isLocale: <T>(input: Locale | T) => input is Locale;
-export declare const isLocalizationInterface: <T>(input: Locale | T) => input is T;

package/dist/core/locale.js

@@ -1,24 +0,0 @@
-export const getLocale = (input) => {
-    if (input === undefined || input === null) {
-        return 'en';
-    }
-    switch (input) {
-        case 'en':
-        case 'no':
-            return input;
-        default:
-            return input;
-    }
-};
-export const isEn = (input) => {
-    return input === 'en';
-};
-export const isNo = (input) => {
-    return input === 'no';
-};
-export const isLocale = (input) => {
-    return input === 'en' || input === 'no';
-};
-export const isLocalizationInterface = (input) => {
-    return typeof input === 'object' && input !== null;
-};

package/dist/short-videos/short-video-viewer/short-video-attachments-localization.js

@@ -1,21 +0,0 @@
-import { isLocale } from '../../core/locale';
-export class ShortVideoAttachmentsLocalization {
-    productsSection;
-    offersSection;
-    productLocalization;
-    constructor(init) {
-        this.productsSection = isLocale(init) ? loc.productsSection[init] : init.productsSection || loc.productsSection.en;
-        this.offersSection = isLocale(init) ? loc.offersSection[init] : init.offersSection || loc.offersSection.en;
-        this.productLocalization = isLocale(init) ? init : init.productLocalization || 'en';
-    }
-}
-const loc = {
-    productsSection: {
-        en: 'Products',
-        no: 'Produkter'
-    },
-    offersSection: {
-        en: 'Offers',
-        no: 'Tilbud'
-    }
-};

package/dist/short-videos/short-video-viewer/short-video-details-localization.js

@@ -1,17 +0,0 @@
-import { isLocale } from '../../core/locale';
-export class ShortVideoDetailsLocalization {
-    viewsCount;
-    timeAgoLocalization;
-    attachmentsLocalization;
-    constructor(init) {
-        this.viewsCount = isLocale(init) ? loc.viewsCount[init] : init.viewsCount || loc.viewsCount.en;
-        this.timeAgoLocalization = isLocale(init) ? init : init.timeAgoLocalization || 'en';
-        this.attachmentsLocalization = isLocale(init) ? init : init.attachmentsLocalization || 'en';
-    }
-}
-const loc = {
-    viewsCount: {
-        en: (count) => (count === 1 ? '1 view' : `${count} views`),
-        no: (count) => (count === 1 ? '1 visning' : `${count} visninger`)
-    }
-};

package/dist/short-videos/short-video-viewer/short-video-product-localization.js

@@ -1,13 +0,0 @@
-import { isLocale } from '../../core/locale';
-export class ShortVideoProductLocalization {
-    beforeNowPrefix;
-    constructor(init) {
-        this.beforeNowPrefix = isLocale(init) ? loc.beforeNowPrefix[init] : init?.beforeNowPrefix || loc.beforeNowPrefix.en;
-    }
-}
-const loc = {
-    beforeNowPrefix: {
-        en: 'Before',
-        no: 'Før'
-    }
-};

package/dist/short-videos/short-video-viewer/short-video-viewer-localization.d.ts

@@ -1,14 +0,0 @@
-import { type Locale } from '../../core/locale';
-import type { ITimeAgoLocalization } from '../../ui/time-ago';
-import type { IShortVideoProductLocalization } from './short-video-product-localization';
-export interface IShortVideoViewerLocalization {
-    viewsCount?: (count: number) => string;
-    timeAgoLocalization?: ITimeAgoLocalization | Locale;
-    productLocalization?: IShortVideoProductLocalization | Locale;
-}
-export declare class ShortVideoViewerLocalization {
-    viewsCount: (count: number) => string;
-    timeAgoLocalization: ITimeAgoLocalization | Locale;
-    productLocalization: IShortVideoProductLocalization | Locale;
-    constructor(init: IShortVideoViewerLocalization | Locale);
-}

package/dist/short-videos/short-video-viewer/short-video-viewer-localization.js

@@ -1,17 +0,0 @@
-import { isLocale } from '../../core/locale';
-export class ShortVideoViewerLocalization {
-    viewsCount;
-    timeAgoLocalization;
-    productLocalization;
-    constructor(init) {
-        this.viewsCount = isLocale(init) ? loc.viewsCount[init] : init.viewsCount || loc.viewsCount.en;
-        this.timeAgoLocalization = isLocale(init) ? init : init.timeAgoLocalization || 'en';
-        this.productLocalization = isLocale(init) ? init : init.productLocalization || 'en';
-    }
-}
-const loc = {
-    viewsCount: {
-        en: (count) => (count === 1 ? '1 view' : `${count} views`),
-        no: (count) => (count === 1 ? '1 visning' : `${count} visninger`)
-    }
-};

package/dist/short-videos/short-videos-player/operations.generated.d.ts

@@ -1,65 +0,0 @@
-import type * as SchemaTypes from '../../../gql/types';
-import type { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
-export type GetShortVideosQueryVariables = SchemaTypes.Exact<{
-    input: SchemaTypes.EmbedPostsInput;
-    image_scale?: SchemaTypes.InputMaybe<SchemaTypes.ImageScale>;
-}>;
-export type GetShortVideosQuery = {
-    shortVideos: {
-        items: Array<{
-            id: string;
-            enableSocialInteractions: boolean;
-            postHeading: {
-                sourceImage: string | null;
-                sourceName: string;
-                postDisplayDate: any;
-                postViewsCount: number;
-            };
-            allProducts: Array<{
-                title: string;
-                id: string;
-                link: string | null;
-                shortDescription: string | null;
-                media: Array<{
-                    url: string;
-                    thumbnailUrl: string | null;
-                    type: SchemaTypes.MediaType;
-                }>;
-                priceAndAvailability: {
-                    currency: SchemaTypes.Currency;
-                    price: number;
-                    productSalePrices: Array<{
-                        salePrice: number;
-                        salePriceEffectiveDateFrom: any | null;
-                        salePriceEffectiveDateTo: any | null;
-                    }> | null;
-                };
-            }>;
-            ad: {
-                id: string;
-                title: string;
-                description: string | null;
-                buttonText: string | null;
-                buttonUrl: string | null;
-                openLinkInNewWindow: boolean | null;
-                type: SchemaTypes.AdType;
-                media: Array<{
-                    url: string;
-                    thumbnailUrl: string | null;
-                    type: SchemaTypes.MediaType;
-                }>;
-            } | null;
-            postData: {
-                media: Array<{
-                    url: string;
-                    thumbnailUrl: string | null;
-                    type: SchemaTypes.MediaType;
-                }>;
-                shortVideoData: {
-                    text: string | null;
-                } | null;
-            };
-        }>;
-    };
-};
-export declare const GetShortVideosDocument: DocumentNode<GetShortVideosQuery, GetShortVideosQueryVariables>;