@streamscloud/embeddable 2.2.0 → 2.2.2

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

@@ -0,0 +1,5 @@
+/**
+ * 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

@@ -0,0 +1,17 @@
+/**
+ * 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

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

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

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

package/dist/core/graphql.d.ts

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

package/dist/core/graphql.js

@@ -1,6 +1,6 @@
 import { createClient, fetchExchange } from '@urql/core';
 export const createLocalGQLClient = (graphqlUrl, customFetch) => createClient({
-    url: graphqlUrl,
+    url: resolveGraphQLUrl(graphqlUrl),
     requestPolicy: 'network-only',
     fetchOptions: {
         credentials: 'include'
@@ -8,3 +8,6 @@ export const createLocalGQLClient = (graphqlUrl, customFetch) => createClient({
     fetch: customFetch || fetch,
     exchanges: [fetchExchange]
 });
+export const resolveGraphQLUrl = (url) => {
+    return url || 'https://api.streamscloud.com/graphql';
+};

package/dist/short-videos/short-videos-player/cmp.short-videos-player.svelte

@@ -7,6 +7,7 @@
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
+import { handleEsc } from '../../core/document.event-handlers';
 import { createLocalGQLClient } from '../../core/graphql';
 import { mapShortVideoViewerModel, ShortVideoViewer } from '../short-video-viewer';
 import { GetShortVideosDocument } from './operations.generated';
@@ -16,7 +17,7 @@ import { SpotlightLayout } from '../../ui/spotlight-layout';
 import { default as Controls } from './controls.svelte';
 import { ShortVideosPlayerLocalization } from './short-videos-player-localization.svelte';
 import { ShortVideosPlayerUiManager } from './ui-manager.svelte';
-import { onDestroy, onMount, untrack } from 'svelte';
+import { onMount, untrack } from 'svelte';
 let { input, localization: localizationInit, on } = $props();
 const localization = $derived(new ShortVideosPlayerLocalization(localizationInit));
 let buffer = $state(input.type === 'provider' ? new PlayerBuffer(input.provider) : null);
@@ -69,17 +70,20 @@ const uiManager = new ShortVideosPlayerUiManager();
 onMount(() => __awaiter(void 0, void 0, void 0, function* () {
     uiManager.detailsCollapsed = window && window.innerWidth < window.innerHeight;
 }));
-onDestroy(() => {
-    // end tracking the short video
-});
 const handleDimensionsChanged = (dimensions) => {
     uiManager.updateDimensions({
         mainViewColumnWidth: dimensions.mainSceneWidth,
         viewTotalWidth: dimensions.totalWidth
     });
 };
+const onPlayerClose = () => {
+    var _a;
+    (_a = on === null || on === void 0 ? void 0 : on.closePlayer) === null || _a === void 0 ? void 0 : _a.call(on);
+};
 </script>
 
+<svelte:document onkeydown={(e) => handleEsc(e, onPlayerClose)} />
+
 <div class="short-videos-player-container">
   <div class="short-videos-player" style={uiManager.globalCssVariables}>
     {#if buffer}
@@ -92,7 +96,7 @@ const handleDimensionsChanged = (dimensions) => {
           </PlayerSlider>
         </div>
       </SpotlightLayout>
-      <Controls buffer={buffer} uiManager={uiManager} localization={localization} on={{ closePlayer: () => on?.closePlayer?.() }} />
+      <Controls buffer={buffer} uiManager={uiManager} localization={localization} on={{ closePlayer: () => onPlayerClose() }} />
     {:else}
       <Loading positionFixedCenter={true} timeout={1000} />
     {/if}

package/dist/short-videos/short-videos-player/index.js

@@ -1,6 +1,6 @@
 import { isIdsInit, isShortVideosProviderInit } from './types';
 import { ShadowHost } from '../../ui/shadow-dom';
-import { mount } from 'svelte';
+import { mount, unmount } from 'svelte';
 import { default as ShortVideosPlayer } from './cmp.short-videos-player.svelte';
 /**
  * Opens the short videos player modal with the specified provider or by fetching videos by IDs.
@@ -88,14 +88,18 @@ export const openShortVideosPlayer = async (init) => {
     if (!input) {
         return;
     }
-    const shadowHost = new ShadowHost({ onClosed: () => init.on?.playerClosed?.() });
-    mount(ShortVideosPlayer, {
+    const shadowHost = new ShadowHost();
+    const mounted = mount(ShortVideosPlayer, {
         target: shadowHost.shadowRoot,
         props: {
             input,
             localization: init.localization,
             on: {
-                closePlayer: () => {
+                closePlayer: async () => {
+                    if (init.on?.playerClosed) {
+                        init.on.playerClosed();
+                    }
+                    await unmount(mounted);
                     shadowHost.remove();
                 }
             }

package/dist/short-videos/short-videos-player/types.d.ts

@@ -10,7 +10,7 @@ export type IdsPlayerInput = {
     type: 'ids';
     ids: string[];
     initialId?: string;
-    graphqlUrl: string;
+    graphqlUrl?: string;
 };
 export type OpenShortVideosPlayerInit = ProviderInit | IdsInit;
 type ProviderInit = {
@@ -22,7 +22,7 @@ type ProviderInit = {
 };
 type IdsInit = {
     ids: string[];
-    graphqlUrl: string;
+    graphqlUrl?: string;
     initialId?: string;
     localization?: IShortVideosPlayerLocalization;
     on?: {

package/dist/streams/stream-player/cmp.stream-player.svelte

@@ -7,6 +7,9 @@
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
+import { getOrCreateProfileId } from '../../core/analytics.profile-id';
+import { handleEsc } from '../../core/document.event-handlers';
+import { createLocalGQLClient, resolveGraphQLUrl } from '../../core/graphql';
 import { toastrWarning } from '../../core/toastr';
 import { ShortVideoViewer } from '../../short-videos/short-video-viewer';
 import { mapToShortVideoViewerModel } from '../layout/models';
@@ -23,7 +26,7 @@ import { StreamPlayerLocalization } from './stream-player-localization.svelte';
 import { StreamPlayerUiManager } from './ui-manager.svelte';
 import { onMount } from 'svelte';
 import { AppEventsTracker } from '@streamscloud/streams-analytics-collector';
-let { streamId, graphql, localization: localizationInit, on } = $props();
+let { streamId, graphqlUrl, localization: localizationInit, on } = $props();
 const localization = $derived(new StreamPlayerLocalization(localizationInit));
 let model = $state(null);
 let buffer = $state.raw(null);
@@ -51,12 +54,15 @@ onMount(() => __awaiter(void 0, void 0, void 0, function* () {
     var _a, _b, _c, _d;
     uiManager.overviewCollapsed = window && window.innerWidth < window.innerHeight;
     try {
+        const graphql = createLocalGQLClient(graphqlUrl);
         const streamPayload = yield graphql.query(GetStreamDocument, { id: streamId }).toPromise();
         if (!((_a = streamPayload.data) === null || _a === void 0 ? void 0 : _a.stream)) {
             toastrWarning(localization.streamNotFound);
             (_b = on === null || on === void 0 ? void 0 : on.closePlayer) === null || _b === void 0 ? void 0 : _b.call(on);
             return;
         }
+        AppEventsTracker.setEndpoint(resolveGraphQLUrl(graphqlUrl));
+        AppEventsTracker.setProfileId(getOrCreateProfileId());
         (_c = on === null || on === void 0 ? void 0 : on.streamActivated) === null || _c === void 0 ? void 0 : _c.call(on, {
             ownerId: streamPayload.data.stream.ownerProfile.id,
             title: streamPayload.data.stream.title,
@@ -146,6 +152,8 @@ const onProgress = (pageId, videoId, progress) => {
 };
 </script>
 
+<svelte:document onkeydown={(e) => handleEsc(e, onPlayerClose)} />
+
 <div class="stream-player-container">
   {#if loading}
     <Loading positionAbsoluteCenter={true} timeout={600} />
@@ -165,8 +173,8 @@ const onProgress = (pageId, videoId, progress) => {
                 <StreamPageViewer
                   page={item}
                   on={{
-                    progress: (videoId: string, progress: number) => onProgress(item.id, videoId, progress),
-                    productClick: (productId: string) => onProductCardClick(productId)
+                    progress: (videoId: String, progress: Number) => onProgress(item.id, videoId, progress),
+                    productClick: (productId: String) => onProductCardClick(productId)
                   }} />
               {:else if item.type === 'short-video'}
                 <ShortVideoViewer
@@ -196,7 +204,7 @@ const onProgress = (pageId, videoId, progress) => {
         localization={localization}
         on={{
           closePlayer: () => onPlayerClose(),
-          productClick: (productId: string) => onProductCardClick(productId)
+          productClick: (productId: String) => onProductCardClick(productId)
         }} />
     {/if}
   </div>

package/dist/streams/stream-player/cmp.stream-player.svelte.d.ts

@@ -1,9 +1,8 @@
 import { type IStreamPlayerLocalization } from './stream-player-localization.svelte';
-import type { Client } from '@urql/core';
 type Props = {
     streamId: string;
     localization?: IStreamPlayerLocalization;
-    graphql: Client;
+    graphqlUrl?: string;
     on?: {
         closePlayer?: () => void;
         streamActivated?: (data: {

package/dist/streams/stream-player/index.d.ts

@@ -25,7 +25,7 @@ export type { IStreamPlayerLocalization };
  */
 export declare const openStreamPlayer: (init: {
     streamId: string;
-    graphqlUrl: string;
+    graphqlUrl?: string;
     localization?: IStreamPlayerLocalization;
     on?: {
         streamActivated?: (data: {

package/dist/streams/stream-player/index.js

@@ -1,25 +1,7 @@
-import { createLocalGQLClient } from '../../core/graphql';
 import { ShadowHost } from '../../ui/shadow-dom';
 import { default as StreamPlayer } from './cmp.stream-player.svelte';
 import { AppEventsTracker } from '@streamscloud/streams-analytics-collector';
-import { mount } from 'svelte';
-/**
- * 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
- */
-function 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;
-}
+import { mount, unmount } from 'svelte';
 /**
  * Opens the stream player modal with the specified stream details.
  *
@@ -45,14 +27,12 @@ function getOrCreateProfileId() {
  */
 export const openStreamPlayer = (init) => {
     const { streamId, graphqlUrl, localization } = init;
-    const shadowHost = new ShadowHost({ onClosed: () => init.on?.playerClosed?.() });
-    AppEventsTracker.setEndpoint(graphqlUrl);
-    AppEventsTracker.setProfileId(getOrCreateProfileId());
-    mount(StreamPlayer, {
+    const shadowHost = new ShadowHost();
+    const mounted = mount(StreamPlayer, {
         target: shadowHost.shadowRoot,
         props: {
             streamId,
-            graphql: createLocalGQLClient(graphqlUrl),
+            graphqlUrl,
             localization,
             on: {
                 streamActivated: (data) => {
@@ -61,7 +41,11 @@ export const openStreamPlayer = (init) => {
                         init.on.streamActivated({ title: data.title, image: data.image });
                     }
                 },
-                closePlayer: () => {
+                closePlayer: async () => {
+                    if (init.on?.playerClosed) {
+                        init.on.playerClosed();
+                    }
+                    await unmount(mounted);
                     shadowHost.remove();
                 }
             }

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

@@ -1,34 +1,20 @@
 <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>
 
-<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')}
+{#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}>
     {@html src}
-  {:else}
-    <svg use:fillSvg></svg>
-  {/if}
-</div>
+  </div>
+{/if}
 
 <style>@keyframes fadeIn {
   0% {
@@ -45,6 +31,7 @@ const fillSvg = (node) => {
   --_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/shadow-dom/shadow-host.d.ts

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

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

@@ -3,11 +3,7 @@ import reset from './_reset.scss?raw';
 export class ShadowHost {
     shadowRoot;
     host;
-    callbacks;
-    constructor(init) {
-        this.callbacks = {
-            onClosed: init.onClosed
-        };
+    constructor() {
         const host = document.createElement('div');
         host.style.all = 'unset';
         host.style.position = 'fixed';
@@ -19,7 +15,6 @@ 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');
@@ -33,13 +28,5 @@ 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/embeddable",
-  "version": "2.2.0",
+  "version": "2.2.2",
   "author": "StreamsCloud",
   "repository": "https://github.com/StreamsCloud/streamscloud-frontend-packages.git",
   "type": "module",
@@ -92,11 +92,10 @@
   },
   "peerDependencies": {
     "@fluentui/svg-icons": "^1.1.292",
-    "@svelte-put/inline-svg": "^4.0.1",
+    "@streamscloud/streams-analytics-collector": "latest",
     "@urql/core": "^5.1.1",
     "mobile-detect": "^1.4.5",
-    "svelte": "^5.25.3",
-    "@streamscloud/streams-analytics-collector": "latest"
+    "svelte": "^5.25.3"
   },
   "devDependencies": {
     "@eslint/compat": "^1.2.9",
@@ -111,7 +110,6 @@
     "@graphql-codegen/typescript": "^4.1.6",
     "@graphql-codegen/typescript-operations": "^4.6.1",
     "@graphql-typed-document-node/core": "^3.2.0",
-    "@svelte-put/inline-svg": "^4.0.1",
     "@sveltejs/package": "^2.3.11",
     "@sveltejs/vite-plugin-svelte": "^5.0.3",
     "@tsconfig/svelte": "^5.0.4",