@streamscloud/embeddable 5.1.2 → 6.0.0

package/dist/streams/stream-player/{cmp.stream-player.svelte → stream-player.svelte}

@@ -7,9 +7,7 @@
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { getOrCreateProfileId } from '../../core/analytics.profile-id';
 import { handleEsc } from '../../core/document.event-handlers';
-import { constructGraphQLUrl, createLocalGQLClient } from '../../core/graphql';
 import { toastrWarning } from '../../core/toastr';
 import { ShortVideoViewer } from '../../short-videos/short-video-viewer';
 import { mapToShortVideoViewerModel } from '../layout/models';
@@ -19,15 +17,12 @@ import { PlayerSlider } from '../../ui/player';
 import { SpotlightLayout } from '../../ui/spotlight-layout';
 import { SwipeIndicator } from '../../ui/swipe-indicator';
 import { default as Controls } from './controls.svelte';
-import { mapToStreamPlayerModel } from './mapper';
-import { GetStreamDocument } from './operations.generated';
 import { default as Overview } from './stream-overview.svelte';
 import { StreamPlayerBuffer } from './stream-player-buffer.svelte';
 import { StreamPlayerLocalization } from './stream-player-localization';
 import { StreamPlayerUiManager } from './ui-manager.svelte';
-import { AppEventsTracker } from '@streamscloud/streams-analytics-collector';
 import { onMount } from 'svelte';
-let { streamId, graphqlOrigin, localization: localizationInit = 'en', showStreamsCloudWatermark, shortVideoSocialInteractionsHandler, initiator, on } = $props();
+let { streamId, dataProvider, analyticsHandler, localization: localizationInit = 'en', showStreamsCloudWatermark, postSocialInteractionsHandler, on } = $props();
 const localization = $derived(new StreamPlayerLocalization(localizationInit));
 let model = $state(null);
 let buffer = $state.raw(null);
@@ -54,27 +49,21 @@ const resetInactivityTimer = () => {
     }, inactiveTimeSeconds * 1000);
 };
 onMount(() => __awaiter(void 0, void 0, void 0, function* () {
-    var _a, _b, _c, _d;
+    var _a, _b;
     uiManager.overviewCollapsed = window && window.innerWidth < window.innerHeight;
     try {
-        const graphql = createLocalGQLClient(graphqlOrigin, { 'x-initiator': initiator !== null && initiator !== void 0 ? initiator : 'player/stream' });
-        const streamPayload = yield graphql.query(GetStreamDocument, { id: streamId }).toPromise();
-        if (!((_a = streamPayload.data) === null || _a === void 0 ? void 0 : _a.stream)) {
+        const stream = yield dataProvider.getStream(streamId);
+        if (!stream) {
             toastrWarning(localization.streamNotFound);
-            (_b = on === null || on === void 0 ? void 0 : on.closePlayer) === null || _b === void 0 ? void 0 : _b.call(on);
+            (_a = on === null || on === void 0 ? void 0 : on.playerClosed) === null || _a === void 0 ? void 0 : _a.call(on);
             return;
         }
-        AppEventsTracker.setEndpoint(constructGraphQLUrl(graphqlOrigin));
-        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,
-            image: ((_d = streamPayload.data.stream.cover) === null || _d === void 0 ? void 0 : _d.url) || null
-        });
+        analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.setOrganizationId(stream.organizationId);
+        (_b = on === null || on === void 0 ? void 0 : on.streamActivated) === null || _b === void 0 ? void 0 : _b.call(on, { title: stream.title, image: stream.cover });
         // start tracking the stream
-        model = mapToStreamPlayerModel(streamPayload.data.stream);
-        buffer = new StreamPlayerBuffer({ graphql, streamId });
-        AppEventsTracker.trackStreamView(streamPayload.data.stream.id);
+        model = stream;
+        buffer = new StreamPlayerBuffer({ streamId, dataProvider: dataProvider });
+        analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackStreamView(stream.id);
         startActivityTracking();
     }
     finally {
@@ -144,7 +133,7 @@ const onPageActivated = (id) => {
     const page = buffer === null || buffer === void 0 ? void 0 : buffer.loaded.find((x) => x.id === id);
     background = (page === null || page === void 0 ? void 0 : page.cover) || null;
     if (page) {
-        AppEventsTracker.trackStreamPageView(id, streamId);
+        analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackStreamPageView(id, streamId);
         const currentIndex = buffer === null || buffer === void 0 ? void 0 : buffer.loaded.findIndex((p) => p.id === id);
         if (currentIndex !== undefined && currentIndex > maxPageIndexViewed) {
             maxPageIndexViewed = currentIndex;
@@ -152,23 +141,23 @@ const onPageActivated = (id) => {
     }
 };
 const onProductCardClick = (productId) => {
-    AppEventsTracker.trackStreamProductClicked(productId, streamId);
+    analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackStreamProductClicked(productId, streamId);
 };
 const onPlayerClose = () => {
     var _a;
     stopActivityTracking();
-    AppEventsTracker.trackStreamEngagementTime(streamId, totalEngagementTimeSeconds);
+    analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackStreamEngagementTime(streamId, totalEngagementTimeSeconds);
     if (buffer && buffer.loaded.length > 0) {
         let scrollDepth = Math.round(((maxPageIndexViewed + 1) / buffer.loaded.length) * 100);
-        AppEventsTracker.trackStreamScrollDepth(streamId, scrollDepth);
+        analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackStreamScrollDepth(streamId, scrollDepth);
     }
-    (_a = on === null || on === void 0 ? void 0 : on.closePlayer) === null || _a === void 0 ? void 0 : _a.call(on);
+    (_a = on === null || on === void 0 ? void 0 : on.playerClosed) === null || _a === void 0 ? void 0 : _a.call(on);
 };
 const onPageDeactivated = (itemId) => {
-    AppEventsTracker.reportPageVideoViews(itemId, streamId);
+    analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.reportPageVideoViews(itemId, streamId);
 };
 const onProgress = (pageId, videoId, progress) => {
-    AppEventsTracker.trackShortVideoProgress(pageId, videoId, progress, streamId);
+    analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackShortVideoProgress(pageId, videoId, progress, streamId);
 };
 </script>
 
@@ -211,7 +200,7 @@ const onProgress = (pageId, videoId, progress) => {
                     progress: (progress) => onProgress(item.id, item.shortVideo.id, progress)
                   }}
                   autoplay="on-appearance"
-                  socialInteractionsHandler={shortVideoSocialInteractionsHandler}
+                  socialInteractionsHandler={postSocialInteractionsHandler}
                   localization={localization.shortVideoViewerLocalization}
                   showAttachments={uiManager.showShortVideoOverlay}
                   showControls={uiManager.showShortVideoOverlay} />
@@ -239,7 +228,7 @@ const onProgress = (pageId, videoId, progress) => {
         buffer={buffer}
         uiManager={uiManager}
         localization={localization}
-        shortVideoSocialInteractionsHandler={shortVideoSocialInteractionsHandler}
+        postSocialInteractionsHandler={postSocialInteractionsHandler}
         on={{
           closePlayer: () => onPlayerClose(),
           productClick: (productId: String) => onProductCardClick(productId)
@@ -296,11 +285,4 @@ const onProgress = (pageId, videoId, progress) => {
 .stream-player__content {
   width: 100%;
   height: 100%;
-  --short-video-viewer--actions-panel--bottom: 5rem;
-  /* Set 'container-type: inline-size;' to reference container*/
-}
-@container (width < 576px) {
-  .stream-player__content {
-    --short-video-viewer--actions-panel--top: 5rem;
-  }
 }</style>

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

@@ -0,0 +1,4 @@
+import type { StreamPlayerProps } from './types';
+declare const StreamPlayer: import("svelte").Component<StreamPlayerProps, {}, "">;
+type StreamPlayer = ReturnType<typeof StreamPlayer>;
+export default StreamPlayer;

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

@@ -1,12 +1,52 @@
+import type { Locale } from '../../core/locale';
+import type { IPostSocialInteractionsHandler } from '../../short-videos/short-video-viewer';
+import type { StreamPageViewerModel } from '../stream-page-viewer';
+import type { IStreamPlayerLocalization } from './stream-player-localization';
 export type StreamPlayerModel = {
     id: string;
     title: string;
+    cover: string | null;
     subTitle: string | null;
     createdAt: string;
     publishedAt: string | null;
+    organizationId: string;
     header: {
         image: string | null;
         name: string;
     };
     pagesCount: number;
 };
+export type StreamPlayerProps = PlayerSettings & {
+    dataProvider: IStreamPlayerDataProvider;
+    analyticsHandler?: IStreamAnalyticsHandler;
+};
+export type PlayerSettings = {
+    streamId: string;
+    localization?: IStreamPlayerLocalization | Locale;
+    showStreamsCloudWatermark?: boolean;
+    postSocialInteractionsHandler?: IPostSocialInteractionsHandler;
+    on?: {
+        streamActivated?: (data: {
+            title: string;
+            image: string | null;
+        }) => void;
+        playerClosed?: () => void;
+    };
+};
+export interface IStreamPlayerDataProvider {
+    getStream: (streamId: string) => Promise<StreamPlayerModel | null>;
+    getStreamPages: (streamId: string, continuationToken: string | null | undefined) => Promise<{
+        items: StreamPageViewerModel[];
+        continuationToken: string | null;
+    }>;
+}
+export interface IStreamAnalyticsHandler {
+    setOrganizationId: (organizationId: string) => void;
+    trackStreamView: (streamId: string) => void;
+    trackStreamPageView: (pageId: string, streamId: string) => void;
+    trackStreamProductClicked: (productId: string, streamId: string) => void;
+    trackStreamEngagementTime: (streamId: string, engagementTime: number) => void;
+    trackStreamScrollDepth: (streamId: string, scrollDepth: number) => void;
+    reportPageVideoViews: (videoId: string, streamId: string) => void;
+    trackShortVideoProgress: (pageId: string, videoId: string, progress: number, streamId: string) => void;
+}

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

@@ -1,4 +1,4 @@
 export type { IPlayerBuffer } from './types';
-export { PlayerBuffer, type PlayerItemsProvider } from './player-buffer.svelte';
+export { PlayerBuffer, type IPlayerItemsProvider } from './player-buffer.svelte';
 export { default as PlayerSlider } from './cmp.player-slider.svelte';
 export { preventSliderScroll } from './prevent-slider-scroll';

package/dist/ui/player/player-buffer.svelte.d.ts

@@ -13,16 +13,16 @@ export declare class PlayerBuffer<T extends {
     private _loaded;
     private loadMoreFn;
     private isLoading;
-    constructor(provider: PlayerItemsProvider<T>);
+    constructor(provider: IPlayerItemsProvider<T>);
     loadNext: () => Promise<void>;
     loadPrevious: () => Promise<void>;
     reset: () => void;
     private warmUpBuffer;
 }
-export type PlayerItemsProvider<T> = {
+export interface IPlayerItemsProvider<T> {
     initialData: {
         prefetchedItems: T[];
         startIndex: number;
     };
     loadMore(): Promise<T[]>;
-};
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/embeddable",
-  "version": "5.1.2",
+  "version": "6.0.0",
   "author": "StreamsCloud",
   "repository": "https://github.com/StreamsCloud/streamscloud-frontend-packages.git",
   "type": "module",
@@ -28,6 +28,10 @@
       "types": "./dist/index.d.ts",
       "svelte": "./dist/index.js"
     },
+    "./media-center": {
+      "types": "./dist/media-center/index.d.ts",
+      "svelte": "./dist/media-center/index.js"
+    },
     "./stream-player": {
       "types": "./dist/streams/stream-player/index.d.ts",
       "svelte": "./dist/streams/stream-player/index.js"

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

@@ -1,22 +0,0 @@
-import type { Locale } from '../../core/locale';
-import { type ShortVideoSocialInteractionsHandler } from '../../short-videos/short-video-viewer';
-import { type IStreamPlayerLocalization } from './stream-player-localization';
-type Props = {
-    streamId: string;
-    localization?: IStreamPlayerLocalization | Locale;
-    graphqlOrigin?: string;
-    showStreamsCloudWatermark?: boolean;
-    shortVideoSocialInteractionsHandler?: ShortVideoSocialInteractionsHandler;
-    initiator?: string;
-    on?: {
-        closePlayer?: () => void;
-        streamActivated?: (data: {
-            ownerId: string;
-            title: string;
-            image: string | null;
-        }) => void;
-    };
-};
-declare const Cmp: import("svelte").Component<Props, {}, "">;
-type Cmp = ReturnType<typeof Cmp>;
-export default Cmp;