@streamscloud/embeddable 8.3.0 → 9.0.0

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

@@ -1,46 +1,93 @@
-import { toastrWarning } from '../../core/toastr';
 import { InternalMediaCenterConfig } from '../../media-center/config/internal-media-center-config';
 import {} from '../../media-center/config/types';
 import { MediaCenter } from '../../media-center/media-center';
+import { InternalPostAnalyticsHandler } from '../../posts/handlers';
+import { InternalShortVideoPlayerItemsProvider } from '../data-providers';
 import { ModalShadowHost } from '../../ui/shadow-dom';
-import { default as ShortVideosPlayer } from './cmp.short-videos-player.svelte';
-import { InternalShortVideoAnalyticsHandler } from './internal-short-video-analytics-handler';
-import { InternalShortVideoPlayerProvider } from './internal-short-video-player-provider';
-import { mapToShortVideoPlayerModel } from './mapper';
 import { mount, unmount } from 'svelte';
-export { ShortVideosPlayer };
-export { mapToShortVideoPlayerModel };
+/**
+ * Opens the short videos player modal.
+ *
+ * @param init Configuration options.
+ *
+ * IDs mode (overload 2)
+ * @param {string[]} init.ids
+ *   List of short-video IDs to display.
+ * @param {string} init.initiator
+ *   Identifier of the initiator (used for tracking/analytics and GraphQL).
+ * @param {string} [init.graphqlOrigin]
+ *   Optional GraphQL origin (base URL). If omitted, the default origin is determined internally.
+ * @param {string} [init.initialId]
+ *   ID of the video to open first (optional).
+ * @param {string} [init.mediaPageId]
+ *   Optional media page ID used to construct an internal media-center config.
+ *
+ * Player settings
+ * @param {IPostSocialInteractionsHandler} [init.socialInteractionsHandler]
+ *   Handler for social interactions (like, share, etc.).
+ * @param [init.playerSettings]
+ *   Player UI and behavior settings.
+ *
+ *   Fields of ContentPlayerSettings:
+ *   - {boolean} [hideCloseButton]
+ *       If true, hides the close button.
+ *   - {Locale} [locale='en']
+ *       Localization for the player UI. Supported values: 'en' | 'no'.
+ *       If omitted, the default locale 'en' is used.
+ *
+ * Events
+ * @param {{ playerClosed?: () => void; videoActivated?: (id: string) => void }} [init.on]
+ *   Optional event handlers.
+ * @param {() => void} [init.on.playerClosed]
+ *   Called after the player is fully closed (after unmount and removal from the DOM).
+ * @param {(id: string) => void} [init.on.videoActivated]
+ *   Called when a video becomes active (receives the video's id).
+ *
+ * @returns {void}
+ *
+ * @example <caption>IDs mode</caption>
+ * ```ts
+ * import { openShortVideosPlayer } from '@streamscloud/embeddable/short-videos-player';
+ *
+ * openShortVideosPlayer({
+ *   ids: ['id1', 'id2', 'id3'],
+ *   initiator: 'campaign-autumn',
+ *   graphqlOrigin: 'https://graphql.example.com',
+ *   initialId: 'id2',
+ *   mediaPageId: 'media-page-123',
+ *   playerSettings: {
+ *     // Default locale is 'en'; set 'no' to switch to Norwegian:
+ *     locale: 'no',
+ *     disableBackground: false,
+ *     hideCloseButton: false,
+ *     showStreamsCloudWatermark: true,
+ *   },
+ *   on: {
+ *     playerClosed: () => console.log('Player closed'),
+ *   }
+ * });
+ * ```
+ */
 export function openShortVideosPlayer(init) {
-    const { shortVideosProvider, ids, graphqlOrigin, initialId, initiator, socialInteractionsHandler, playerSettings, on } = init;
-    let dataProvider = shortVideosProvider;
-    if (!dataProvider && ids) {
-        dataProvider = new InternalShortVideoPlayerProvider({ ids, graphqlOrigin, initialId, initiator });
-    }
-    if (!dataProvider) {
-        toastrWarning('Data provider is not specified.');
-        return;
-    }
-    let mediaCenterConfig = init.mediaCenterConfig;
-    if (!mediaCenterConfig && init.mediaPageId) {
-        mediaCenterConfig = new InternalMediaCenterConfig(init.mediaPageId, graphqlOrigin);
-    }
-    let analyticsHandler = init.analyticsHandler;
-    if (!analyticsHandler && !init.shortVideosProvider) {
-        // Only create internal analytics handler if using internal data provider
-        analyticsHandler = new InternalShortVideoAnalyticsHandler(graphqlOrigin);
-    }
+    const { ids, graphqlOrigin, initialId, initiator, playerSettings, on } = init;
+    const dataProvider = new InternalShortVideoPlayerItemsProvider({ ids, graphqlOrigin, initialId, initiator });
+    const mediaCenterConfig = init.mediaPageId ? new InternalMediaCenterConfig(init.mediaPageId, graphqlOrigin) : undefined;
+    const analyticsHandler = new InternalPostAnalyticsHandler(graphqlOrigin);
     const shadowHost = new ModalShadowHost();
     const mounted = mount(MediaCenter, {
         target: shadowHost.shadowRoot,
         props: {
             config: mediaCenterConfig || null,
             playerProps: {
-                mode: 'short-videos',
+                mode: 'posts',
                 props: {
                     dataProvider,
-                    socialInteractionsHandler,
                     analyticsHandler,
-                    playerSettings,
+                    playerSettings: {
+                        hideCloseButton: playerSettings?.hideCloseButton,
+                        locale: playerSettings?.locale,
+                        showStreamsCloudWatermark: true
+                    },
                     on: {
                         playerClosed: async () => {
                             await unmount(mounted);
@@ -48,8 +95,7 @@ export function openShortVideosPlayer(init) {
                             if (on?.playerClosed) {
                                 on.playerClosed();
                             }
-                        },
-                        videoActivated: on?.videoActivated
+                        }
                     }
                 }
             }

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

@@ -27,5 +27,6 @@ export interface IPlayerItemsProvider<T> {
         startIndex: number;
         startMediaIndex?: number;
     };
+    prefetch?: () => Promise<void>;
     loadMore(): Promise<T[]>;
 }

package/dist/ui/swipe-indicator/cmp.swipe-indicator.svelte

@@ -27,8 +27,7 @@ const indicatorMounted = (_) => {
   </div>
 </div>
 
-<style>@charset "UTF-8";
-@keyframes fadeIn {
+<style>@keyframes fadeIn {
   0% {
     opacity: 1;
   }
@@ -87,37 +86,37 @@ const indicatorMounted = (_) => {
     transform: translateY(0);
   }
   10% {
-    transform: translateY(-24px); /* основной прыжок */
+    transform: translateY(-24px);
   }
   18% {
     transform: translateY(0);
   }
   26% {
-    transform: translateY(-12px); /* первый малый отскок */
+    transform: translateY(-12px);
   }
   34% {
     transform: translateY(0);
   }
   41% {
-    transform: translateY(-8px); /* второй малый отскок */
+    transform: translateY(-8px);
   }
   48% {
     transform: translateY(0);
   }
   54% {
-    transform: translateY(-4px); /* третий малый отскок */
+    transform: translateY(-4px);
   }
   60% {
     transform: translateY(0);
   }
   65% {
-    transform: translateY(-2px); /* почти затух */
+    transform: translateY(-2px);
   }
   70% {
     transform: translateY(0);
   }
   75% {
-    transform: translateY(-1px); /* совсем маленький */
+    transform: translateY(-1px);
   }
   80% {
     transform: translateY(0);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/embeddable",
-  "version": "8.3.0",
+  "version": "9.0.0",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",

package/dist/media-center/media-center/short-video-resources-generator.d.ts

@@ -1,8 +0,0 @@
-import type { ShortVideoPlayerModel } from '../../short-videos/short-videos-player';
-import type { IPlayerItemsProvider } from '../../ui/player-slider';
-import type { IMediaCenterConfig } from '../config/types';
-export declare const makeShortVideosProvider: (data: {
-    config: IMediaCenterConfig;
-    categoryId?: string;
-    prefetchedItems?: ShortVideoPlayerModel[];
-}) => IPlayerItemsProvider<ShortVideoPlayerModel>;

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

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

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

@@ -1,3 +0,0 @@
-import type { GetShortVideosQuery } from './operations.generated';
-import type { ShortVideoPlayerModel } from './types';
-export declare const mapToShortVideoPlayerModel: (payload: GetShortVideosQuery["shortVideos"]["items"][0]) => ShortVideoPlayerModel;

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

@@ -1,82 +0,0 @@
-<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 { ContentPlayer, ContentPlayerConfig } from '../../content-player';
-import { ContentPlayerSettings } from '../../content-player/content-player-settings';
-import { preloadImage } from '../../core/image-preloader';
-import { getPostCoverImage } from '../../posts/model';
-import { PlayerBuffer } from '../../ui/player-slider';
-import { InternalShortVideoPlayerProvider } from './internal-short-video-player-provider';
-import { untrack } from 'svelte';
-let { dataProvider, socialInteractionsHandler, playerSettings, analyticsHandler, on, mediaCenterData } = $props();
-$effect(() => {
-    void dataProvider;
-    untrack(() => {
-        contentPlayerConfig.playerBuffer = null;
-        initBuffer(dataProvider);
-    });
-});
-$effect(() => contentPlayerConfig.updateMediaCenterData(mediaCenterData));
-const initBuffer = (dataProvider) => __awaiter(void 0, void 0, void 0, function* () {
-    if (dataProvider instanceof InternalShortVideoPlayerProvider) {
-        yield dataProvider.prefetch();
-    }
-    new PlayerBuffer(dataProvider, {
-        preloaded: (instance) => __awaiter(void 0, void 0, void 0, function* () {
-            if (instance.loaded.length) {
-                const coverUrl = getPostCoverImage(instance.loaded[0]);
-                yield preloadImage(coverUrl);
-                contentPlayerConfig.setBackgroundImageUrl(coverUrl);
-            }
-            contentPlayerConfig.playerBuffer = instance;
-        })
-    });
-});
-const contentPlayerConfig = new ContentPlayerConfig({
-    playerBuffer: null,
-    mappers: {
-        postModelFromCurrentItem: (item) => item
-    },
-    socialInteractionsHandler,
-    mediaCenterData,
-    settings: new ContentPlayerSettings(playerSettings),
-    callbacks: {
-        close: on === null || on === void 0 ? void 0 : on.playerClosed,
-        productClick: (id, videoId) => {
-            analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackShortVideoProductClick(id, videoId);
-        },
-        productImpression: (id, videoId) => {
-            analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackShortVideoProductImpression(id, videoId);
-        },
-        adClick: (id) => {
-            analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackAdClick(id);
-        },
-        adImpression: (id) => {
-            analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackAdImpression(id);
-        }
-    },
-    playerSliderCallbacks: {
-        itemActivated: (id) => {
-            var _a, _b;
-            const shortVideo = (_a = contentPlayerConfig.playerBuffer) === null || _a === void 0 ? void 0 : _a.loaded.find((x) => x.id === id);
-            if (!shortVideo) {
-                return;
-            }
-            contentPlayerConfig.setBackgroundImageUrl(getPostCoverImage(shortVideo));
-            if (shortVideo.analyticsOrganizationId) {
-                analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.setOrganizationId(shortVideo.analyticsOrganizationId);
-            }
-            analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackShortVideoView(id);
-            (_b = on === null || on === void 0 ? void 0 : on.videoActivated) === null || _b === void 0 ? void 0 : _b.call(on, id);
-        }
-    }
-});
-</script>
-
-<ContentPlayer config={contentPlayerConfig} />

package/dist/short-videos/short-videos-player/short-videos-player-view.svelte.d.ts

@@ -1,8 +0,0 @@
-import type { MediaCenterData } from '../../media-center/model/types';
-import type { ShortVideoPlayerProps } from './types';
-type $$ComponentProps = ShortVideoPlayerProps & {
-    mediaCenterData?: MediaCenterData;
-};
-declare const ShortVideosPlayerView: import("svelte").Component<$$ComponentProps, {}, "">;
-type ShortVideosPlayerView = ReturnType<typeof ShortVideosPlayerView>;
-export default ShortVideosPlayerView;

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

@@ -1,26 +0,0 @@
-import type { IContentPlayerSettingsInitializer } from '../../content-player/content-player-settings';
-import type { IPostModel } from '../../posts';
-import type { IPostSocialInteractionsHandler } from '../../posts/social-interactions';
-import type { IPlayerItemsProvider } from '../../ui/player-slider';
-export interface IShortVideoAnalyticsHandler {
-    setOrganizationId: (organizationId: string) => void;
-    trackShortVideoView: (videoId: string) => void;
-    trackShortVideoProductImpression: (productId: string, videoId: string) => void;
-    trackShortVideoProductClick: (productId: string, videoId: string) => void;
-    trackAdClick: (adId: string) => void;
-    trackAdImpression: (adId: string) => void;
-}
-export type ShortVideoPlayerModel = IPostModel & {
-    analyticsOrganizationId: string | null;
-};
-export type ShortVideoPlayerProps = {
-    dataProvider: IPlayerItemsProvider<ShortVideoPlayerModel>;
-    socialInteractionsHandler?: IPostSocialInteractionsHandler;
-    analyticsHandler?: IShortVideoAnalyticsHandler;
-    playerSettings?: ShortVideoPlayerSettings;
-    on?: {
-        playerClosed?: () => void;
-        videoActivated?: (id: string) => void;
-    };
-};
-export type ShortVideoPlayerSettings = Pick<IContentPlayerSettingsInitializer, 'disableBackground' | 'hideCloseButton' | 'locale' | 'showStreamsCloudWatermark'>;

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

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