@streamscloud/embeddable 7.2.0-1759186013783 → 7.3.0

package/dist/content-player/cmp.content-player.svelte

@@ -95,7 +95,12 @@ const handleContentPlayerMounted = (node) => {
 };
 </script>
 
-<svelte:document onkeydown={(e) => handleEsc(e, () => config.callbacks?.close?.())} />
+<svelte:document
+  onkeydown={(e) => {
+    if (config.enableCloseButton) {
+      handleEsc(e, () => config.callbacks?.close?.());
+    }
+  }} />
 
 <div
   class="content-player-container"
@@ -113,7 +118,7 @@ const handleContentPlayerMounted = (node) => {
       {@render config.mediaCenterControlsPanel({
         maxItemsWidth: Math.min(uiManager.contentViewWidth * 1.4, uiManager.playerTotalWidth),
         onMounted: handleMediaCenterHeaderMounted,
-        closeButton: config.callbacks?.close && closeButton
+        closeButton: config.enableCloseButton && config.callbacks?.close ? closeButton : undefined
       })}
     </div>
   {/if}

package/dist/content-player/content-player-config.svelte.d.ts

@@ -11,6 +11,7 @@ export declare class ContentPlayerConfig<T extends {
     playerBuffer: IPlayerBuffer<T> | null;
     readonly locale: Locale;
     readonly disableBackground: boolean;
+    readonly enableCloseButton: boolean;
     readonly showStreamsCloudWatermark: boolean;
     readonly callbacks: ContentPlayerCallbacks | null;
     readonly playerSliderCallbacks: PlayerSliderCallbacks<T> | undefined;
@@ -22,6 +23,7 @@ export declare class ContentPlayerConfig<T extends {
         playerBuffer: IPlayerBuffer<T> | null;
         mappers: ContentPlayerMappers<T>;
         disableBackground?: boolean;
+        enableCloseButton?: boolean;
         locale?: Locale;
         showStreamsCloudWatermark?: boolean;
         socialInteractionsHandler?: IPostSocialInteractionsHandler;

package/dist/content-player/content-player-config.svelte.js

@@ -3,6 +3,7 @@ export class ContentPlayerConfig {
     playerBuffer = $state.raw(null);
     locale;
     disableBackground;
+    enableCloseButton;
     showStreamsCloudWatermark;
     callbacks;
     playerSliderCallbacks;
@@ -11,11 +12,12 @@ export class ContentPlayerConfig {
     _mediaCenterData = $state.raw(null);
     _mappers;
     constructor(init) {
-        const { disableBackground = false, locale = 'en', showStreamsCloudWatermark = false, playerBuffer, mappers, mediaCenterData, socialInteractionsHandler, callbacks, playerSliderCallbacks } = init;
+        const { playerBuffer, mappers, disableBackground = false, enableCloseButton = true, locale = 'en', showStreamsCloudWatermark = false, mediaCenterData, socialInteractionsHandler, callbacks, playerSliderCallbacks } = init;
         this.playerBuffer = playerBuffer;
         this.locale = locale;
         this.disableBackground = disableBackground;
         this.showStreamsCloudWatermark = showStreamsCloudWatermark;
+        this.enableCloseButton = enableCloseButton;
         this._mediaCenterData = mediaCenterData || null;
         this.callbacks = callbacks || null;
         this.playerSliderCallbacks = playerSliderCallbacks;

package/dist/content-player/controls-and-attachments.svelte

@@ -97,7 +97,7 @@ const trackNavigationButtonsSize = (node) => {
   </div>
 {/if}
 
-{#if !config.mediaCenterControlsPanel && config.callbacks?.close}
+{#if !config.mediaCenterControlsPanel && config.enableCloseButton && config.callbacks?.close}
   <button type="button" class="close-button" onclick={config.callbacks.close}>
     <Icon src={IconDismiss} />
   </button>
@@ -145,29 +145,31 @@ const trackNavigationButtonsSize = (node) => {
   flex-direction: column;
   overflow-x: hidden;
   overflow-y: auto;
-  scrollbar-color: transparent transparent;
-  scrollbar-width: thin;
   scrollbar-gutter: stable;
+  --_cross-browser-scrollbar--thumb-color: transparent;
+  --_cross-browser-scrollbar--track-color: transparent;
+}
+.controls-and-attachments__right:hover {
+  --_cross-browser-scrollbar--thumb-color: var(--scrollbar--thumb-color, #7d7d7d);
+  --_cross-browser-scrollbar--track-color: var(--scrollbar--track-color, transparent);
 }
 .controls-and-attachments__right::-webkit-scrollbar {
-  width: 3px;
-  height: 3px;
-  background: transparent;
+  width: 6px;
+  height: 6px;
 }
-.controls-and-attachments__right::-webkit-scrollbar-thumb {
-  background: transparent;
+.controls-and-attachments__right::-webkit-scrollbar-track {
+  background: var(--_cross-browser-scrollbar--track-color);
+  border-radius: 100vw;
 }
-.controls-and-attachments__right:hover {
-  scrollbar-color: var(--custom-scrollbar-color, #7d7d7d) var(--custom-scrollbar-background, transparent);
-  scrollbar-width: thin;
-}
-.controls-and-attachments__right:hover::-webkit-scrollbar {
-  width: 3px;
-  height: 3px;
-  background: var(--custom-scrollbar-background, transparent);
+.controls-and-attachments__right::-webkit-scrollbar-thumb {
+  background: var(--_cross-browser-scrollbar--thumb-color);
+  border-radius: 100vw;
 }
-.controls-and-attachments__right:hover::-webkit-scrollbar-thumb {
-  background: var(--custom-scrollbar-color, #7d7d7d);
+@supports (scrollbar-color: transparent transparent) {
+  .controls-and-attachments__right {
+    scrollbar-color: var(--_cross-browser-scrollbar--thumb-color) var(--_cross-browser-scrollbar--track-color);
+    scrollbar-width: thin;
+  }
 }
 .controls-and-attachments__post-controls {
   gap: 2.5rem;

package/dist/media-center/config/internal-media-center-analytics-handler.d.ts

@@ -0,0 +1,19 @@
+import type { IShortVideoAnalyticsHandler } from '../../short-videos/short-videos-player/types';
+import type { IStreamAnalyticsHandler } from '../../streams/stream-player/types';
+export declare class InternalMediaCenterAnalyticsHandler implements IShortVideoAnalyticsHandler, IStreamAnalyticsHandler {
+    constructor(graphqlOrigin: string | undefined);
+    setOrganizationId: (organizationId: string) => void;
+    trackStreamView: (streamId: string) => void;
+    trackStreamPageView: (pageId: string, streamId: string) => void;
+    trackStreamEngagementTime: (streamId: string, engagementTime: number) => void;
+    trackStreamScrollDepth: (streamId: string, scrollDepth: number) => void;
+    trackStreamProductImpression: (productId: string, streamId: string) => void;
+    trackStreamProductClicked: (productId: string, streamId: string) => void;
+    reportPageVideoViews: (videoId: string, streamId: string) => void;
+    trackShortVideoView: (videoId: string) => void;
+    trackShortVideoProductImpression: (productId: string, videoId: string) => void;
+    trackShortVideoProductClick: (productId: string, videoId: string) => void;
+    trackShortVideoProgress: (pageId: string, videoId: string, progress: number, streamId: string) => void;
+    trackAdClick: (adId: string) => void;
+    trackAdImpression: (adId: string) => void;
+}

package/dist/media-center/config/internal-media-center-analytics-handler.js

@@ -0,0 +1,23 @@
+import { getOrCreateProfileId } from '../../core/analytics.profile-id';
+import { constructGraphQLUrl } from '../../core/graphql';
+import { AppEventsTracker } from '@streamscloud/streams-analytics-collector';
+export class InternalMediaCenterAnalyticsHandler {
+    constructor(graphqlOrigin) {
+        AppEventsTracker.setEndpoint(constructGraphQLUrl(graphqlOrigin));
+        AppEventsTracker.setProfileId(getOrCreateProfileId());
+    }
+    setOrganizationId = (organizationId) => AppEventsTracker.setOrganizationId(organizationId);
+    trackStreamView = (streamId) => AppEventsTracker.trackStreamView(streamId);
+    trackStreamPageView = (pageId, streamId) => AppEventsTracker.trackStreamPageView(pageId, streamId);
+    trackStreamEngagementTime = (streamId, engagementTime) => AppEventsTracker.trackStreamEngagementTime(streamId, engagementTime);
+    trackStreamScrollDepth = (streamId, scrollDepth) => AppEventsTracker.trackStreamScrollDepth(streamId, scrollDepth);
+    trackStreamProductImpression = (productId, streamId) => AppEventsTracker.trackStreamProductImpression(productId, streamId);
+    trackStreamProductClicked = (productId, streamId) => AppEventsTracker.trackStreamProductClicked(productId, streamId);
+    reportPageVideoViews = (videoId, streamId) => AppEventsTracker.reportPageVideoViews(videoId, streamId);
+    trackShortVideoView = (videoId) => AppEventsTracker.trackShortVideoView(videoId);
+    trackShortVideoProductImpression = (productId, videoId) => AppEventsTracker.trackShortVideoProductImpression(productId, videoId);
+    trackShortVideoProductClick = (productId, videoId) => AppEventsTracker.trackShortVideoProductClick(productId, videoId);
+    trackShortVideoProgress = (pageId, videoId, progress, streamId) => AppEventsTracker.trackShortVideoProgress(pageId, videoId, progress, streamId);
+    trackAdClick = (adId) => AppEventsTracker.trackAdClick(adId);
+    trackAdImpression = (adId) => AppEventsTracker.trackAdImpression(adId);
+}

package/dist/media-center/config/internal-media-center-config.d.ts

@@ -3,6 +3,7 @@ export declare class InternalMediaCenterConfig implements IMediaCenterConfig {
     private readonly mediaPageId;
     shortVideosPlayer: IMediaCenterConfig['shortVideosPlayer'];
     streamPlayer: IMediaCenterConfig['streamPlayer'];
+    handlers: IMediaCenterConfig['handlers'];
     private graphql;
     constructor(mediaPageId: string, graphqlOrigin?: string);
     getSettings: IMediaCenterConfig['getSettings'];

package/dist/media-center/config/internal-media-center-config.js

@@ -1,14 +1,14 @@
 import { PostType, Status, StreamStatus } from '../../core/enums';
 import { createLocalGQLClient } from '../../core/graphql';
-import { InternalShortVideoAnalyticsHandler } from '../../short-videos/short-videos-player/internal-short-video-analytics-handler';
 import { mapToShortVideoPlayerModel } from '../../short-videos/short-videos-player/mapper';
-import { InternalStreamAnalyticsHandler } from '../../streams/stream-player/internal-stream-analytics-handler';
 import { InternalStreamPlayerDataProvider } from '../../streams/stream-player/internal-stream-player-data-provider';
+import { InternalMediaCenterAnalyticsHandler } from './internal-media-center-analytics-handler';
 import { GetMediaPageSettingsDocument, GetShortVideosDocument, GetStreamsDocument } from './operations.generated';
 export class InternalMediaCenterConfig {
     mediaPageId;
     shortVideosPlayer;
     streamPlayer;
+    handlers;
     graphql;
     constructor(mediaPageId, graphqlOrigin) {
         this.mediaPageId = mediaPageId;
@@ -35,9 +35,7 @@ export class InternalMediaCenterConfig {
                     items: posts.map(mapToShortVideoPlayerModel),
                     continuationToken: payload.data?.shortVideos?.continuationToken || null
                 };
-            },
-            socialInteractionsHandler: undefined,
-            analyticsHandler: new InternalShortVideoAnalyticsHandler(graphqlOrigin)
+            }
         };
         this.streamPlayer = {
             getStreamsCursor: async ({ filter, limit, continuationToken }) => {
@@ -62,9 +60,10 @@ export class InternalMediaCenterConfig {
                     continuationToken: payload.data?.streams?.continuationToken ?? null
                 };
             },
-            streamPlayerDataProvider: new InternalStreamPlayerDataProvider({ graphql: this.graphql }),
-            socialInteractionsHandler: undefined,
-            analyticsHandler: new InternalStreamAnalyticsHandler(graphqlOrigin)
+            streamPlayerDataProvider: new InternalStreamPlayerDataProvider({ graphql: this.graphql })
+        };
+        this.handlers = {
+            analyticsHandler: new InternalMediaCenterAnalyticsHandler(graphqlOrigin)
         };
     }
     getSettings = async () => {

package/dist/media-center/config/types.d.ts

@@ -3,6 +3,10 @@ import type { IShortVideoAnalyticsHandler, ShortVideoPlayerModel } from '../../s
 import type { IStreamPlayerDataProvider, IStreamAnalyticsHandler } from '../../streams/stream-player/types';
 export interface IMediaCenterConfig {
     getSettings: () => Promise<MediaCenterSettings | null>;
+    handlers?: {
+        analyticsHandler?: IShortVideoAnalyticsHandler & IStreamAnalyticsHandler;
+        socialInteractionsHandler?: IPostSocialInteractionsHandler;
+    };
     shortVideosPlayer: {
         getShortVideosCursor: (input: {
             filter: {
@@ -15,8 +19,6 @@ export interface IMediaCenterConfig {
             items: ShortVideoPlayerModel[];
             continuationToken: string | null;
         }>;
-        socialInteractionsHandler?: IPostSocialInteractionsHandler;
-        analyticsHandler?: IShortVideoAnalyticsHandler;
     };
     streamPlayer: {
         getStreamsCursor: (input: {
@@ -31,8 +33,6 @@ export interface IMediaCenterConfig {
             continuationToken: string | null;
         }>;
         streamPlayerDataProvider: IStreamPlayerDataProvider;
-        socialInteractionsHandler?: IPostSocialInteractionsHandler;
-        analyticsHandler?: IStreamAnalyticsHandler;
     };
 }
 export type MediaCenterSettings = {

package/dist/media-center/media-center/cmp.media-center.svelte

@@ -27,6 +27,7 @@ let { config, playerProps, locale = 'en' } = $props();
 const localization = $derived(new MediaCenterLocalization(locale));
 const commonPlayerSettings = {
     disableBackground: playerProps.props.disableBackground,
+    enableCloseButton: playerProps.props.enableCloseButton,
     locale: playerProps.props.locale,
     showStreamsCloudWatermark: playerProps.props.showStreamsCloudWatermark,
     on: playerProps.props.on
@@ -69,7 +70,7 @@ onDestroy(() => {
     scrollResizeObserver === null || scrollResizeObserver === void 0 ? void 0 : scrollResizeObserver.disconnect();
 });
 const selectCategory = (categoryId) => __awaiter(void 0, void 0, void 0, function* () {
-    var _a;
+    var _a, _b, _c;
     if (!config) {
         return;
     }
@@ -82,7 +83,7 @@ const selectCategory = (categoryId) => __awaiter(void 0, void 0, void 0, functio
             selectedCategoryId = categoryId;
             computedPlayerProps = {
                 mode: MediaCenterMode.ShortVideos,
-                props: Object.assign({ dataProvider: makeShortVideosProvider({ config, categoryId }), socialInteractionsHandler: config.shortVideosPlayer.socialInteractionsHandler, analyticsHandler: config.shortVideosPlayer.analyticsHandler }, commonPlayerSettings)
+                props: Object.assign({ dataProvider: makeShortVideosProvider({ config, categoryId }), socialInteractionsHandler: (_a = config.handlers) === null || _a === void 0 ? void 0 : _a.socialInteractionsHandler, analyticsHandler: (_b = config.handlers) === null || _b === void 0 ? void 0 : _b.analyticsHandler }, commonPlayerSettings)
             };
             overviewOpened = false;
             break;
@@ -102,12 +103,12 @@ const selectCategory = (categoryId) => __awaiter(void 0, void 0, void 0, functio
                 streamsInCategoryData = {
                     loading: false,
                     data: {
-                        categoryName: ((_a = categories.find((c) => c.id === categoryId)) === null || _a === void 0 ? void 0 : _a.name) || '',
+                        categoryName: ((_c = categories.find((c) => c.id === categoryId)) === null || _c === void 0 ? void 0 : _c.name) || '',
                         streams: streamsResponse.items
                     }
                 };
             }
-            catch (_b) {
+            catch (_d) {
                 streamsInCategoryData = { loading: false, data: { categoryName: '', streams: [] } };
             }
             break;
@@ -116,26 +117,28 @@ const selectCategory = (categoryId) => __awaiter(void 0, void 0, void 0, functio
     }
 });
 const activateSelectedShortVideoPlayer = (shortVideo) => {
+    var _a, _b;
     if (!config) {
         return;
     }
     mediaCenterMode = MediaCenterMode.ShortVideos;
     computedPlayerProps = {
         mode: MediaCenterMode.ShortVideos,
-        props: Object.assign({ dataProvider: makeShortVideosProvider({ config, prefetchedItems: [shortVideo] }), socialInteractionsHandler: config.shortVideosPlayer.socialInteractionsHandler, analyticsHandler: config.shortVideosPlayer.analyticsHandler }, commonPlayerSettings)
+        props: Object.assign({ dataProvider: makeShortVideosProvider({ config, prefetchedItems: [shortVideo] }), socialInteractionsHandler: (_a = config.handlers) === null || _a === void 0 ? void 0 : _a.socialInteractionsHandler, analyticsHandler: (_b = config.handlers) === null || _b === void 0 ? void 0 : _b.analyticsHandler }, commonPlayerSettings)
     };
     selectedCategoryId = null;
     overviewOpened = false;
     streamsInCategoryOpened = false;
 };
 const activateSelectedStreamPlayer = (id) => {
+    var _a, _b;
     if (!config) {
         return;
     }
     mediaCenterMode = MediaCenterMode.Stream;
     computedPlayerProps = {
         mode: MediaCenterMode.Stream,
-        props: Object.assign({ streamId: id, dataProvider: config.streamPlayer.streamPlayerDataProvider, analyticsHandler: config.streamPlayer.analyticsHandler, postSocialInteractionsHandler: config.streamPlayer.socialInteractionsHandler }, commonPlayerSettings)
+        props: Object.assign({ streamId: id, dataProvider: config.streamPlayer.streamPlayerDataProvider, analyticsHandler: (_a = config.handlers) === null || _a === void 0 ? void 0 : _a.analyticsHandler, postSocialInteractionsHandler: (_b = config.handlers) === null || _b === void 0 ? void 0 : _b.socialInteractionsHandler }, commonPlayerSettings)
     };
     selectedCategoryId = null;
     overviewOpened = false;
@@ -362,21 +365,31 @@ const onScrollMounted = (node) => {
   min-width: 0;
   overflow-x: auto;
   overflow-y: hidden;
-  scrollbar-color: var(--custom-scrollbar-color, #7d7d7d) var(--custom-scrollbar-background, transparent);
-  scrollbar-width: none;
   display: flex;
   align-items: center;
   gap: 0.75rem;
   flex-wrap: nowrap;
   mask-image: none;
+  --_cross-browser-scrollbar--thumb-color: none;
+  --_cross-browser-scrollbar--track-color: var(--scrollbar--track-color, transparent);
 }
 .media-center__scroll::-webkit-scrollbar {
-  width: 0;
-  height: 0;
-  background: var(--custom-scrollbar-background, transparent);
+  width: 6px;
+  height: 6px;
+}
+.media-center__scroll::-webkit-scrollbar-track {
+  background: var(--_cross-browser-scrollbar--track-color);
+  border-radius: 100vw;
 }
 .media-center__scroll::-webkit-scrollbar-thumb {
-  background: var(--custom-scrollbar-color, #7d7d7d);
+  background: var(--_cross-browser-scrollbar--thumb-color);
+  border-radius: 100vw;
+}
+@supports (scrollbar-color: transparent transparent) {
+  .media-center__scroll {
+    scrollbar-color: var(--_cross-browser-scrollbar--thumb-color) var(--_cross-browser-scrollbar--track-color);
+    scrollbar-width: thin;
+  }
 }
 .media-center__scroll--has-left {
   mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgb(0, 0, 0) 32px, rgb(0, 0, 0) 100%);
@@ -487,28 +500,30 @@ const onScrollMounted = (node) => {
   inset: 0;
   container-type: inline-size;
   overflow-y: auto;
-  scrollbar-color: transparent transparent;
-  scrollbar-width: thin;
+  --_cross-browser-scrollbar--thumb-color: transparent;
+  --_cross-browser-scrollbar--track-color: transparent;
 }
-.media-center-overview::-webkit-scrollbar {
-  width: 3px;
-  height: 3px;
-  background: transparent;
+.media-center-overview:hover {
+  --_cross-browser-scrollbar--thumb-color: var(--scrollbar--thumb-color, #7d7d7d);
+  --_cross-browser-scrollbar--track-color: var(--scrollbar--track-color, transparent);
 }
-.media-center-overview::-webkit-scrollbar-thumb {
-  background: transparent;
+.media-center-overview::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
 }
-.media-center-overview:hover {
-  scrollbar-color: var(--custom-scrollbar-color, #7d7d7d) var(--custom-scrollbar-background, transparent);
-  scrollbar-width: thin;
+.media-center-overview::-webkit-scrollbar-track {
+  background: var(--_cross-browser-scrollbar--track-color);
+  border-radius: 100vw;
 }
-.media-center-overview:hover::-webkit-scrollbar {
-  width: 3px;
-  height: 3px;
-  background: var(--custom-scrollbar-background, transparent);
+.media-center-overview::-webkit-scrollbar-thumb {
+  background: var(--_cross-browser-scrollbar--thumb-color);
+  border-radius: 100vw;
 }
-.media-center-overview:hover::-webkit-scrollbar-thumb {
-  background: var(--custom-scrollbar-color, #7d7d7d);
+@supports (scrollbar-color: transparent transparent) {
+  .media-center-overview {
+    scrollbar-color: var(--_cross-browser-scrollbar--thumb-color) var(--_cross-browser-scrollbar--track-color);
+    scrollbar-width: thin;
+  }
 }
 @media (max-width: 576px) {
   .media-center-overview {

package/dist/posts/post-viewer/attachments-horizontal.svelte

@@ -155,16 +155,26 @@ $effect(() => {
   justify-content: flex-start;
   overflow-x: auto;
   padding: 0 var(--post-viewer--attachments-horizontal--padding-horizontal);
-  scrollbar-color: var(--custom-scrollbar-color, #7d7d7d) var(--custom-scrollbar-background, transparent);
-  scrollbar-width: none;
+  --_cross-browser-scrollbar--thumb-color: none;
+  --_cross-browser-scrollbar--track-color: var(--scrollbar--track-color, transparent);
 }
 .attachments-horizontal::-webkit-scrollbar {
-  width: 0;
-  height: 0;
-  background: var(--custom-scrollbar-background, transparent);
+  width: 6px;
+  height: 6px;
+}
+.attachments-horizontal::-webkit-scrollbar-track {
+  background: var(--_cross-browser-scrollbar--track-color);
+  border-radius: 100vw;
 }
 .attachments-horizontal::-webkit-scrollbar-thumb {
-  background: var(--custom-scrollbar-color, #7d7d7d);
+  background: var(--_cross-browser-scrollbar--thumb-color);
+  border-radius: 100vw;
+}
+@supports (scrollbar-color: transparent transparent) {
+  .attachments-horizontal {
+    scrollbar-color: var(--_cross-browser-scrollbar--thumb-color) var(--_cross-browser-scrollbar--track-color);
+    scrollbar-width: thin;
+  }
 }
 .attachments-horizontal__item {
   position: relative;

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

@@ -95,6 +95,7 @@ export declare function openShortVideosPlayer(init: {
     analyticsHandler?: IShortVideoAnalyticsHandler;
     socialInteractionsHandler?: IPostSocialInteractionsHandler;
     disableBackground?: boolean;
+    hideCloseButton?: boolean;
     locale?: Locale;
     showStreamsCloudWatermark?: boolean;
     on?: {
@@ -109,6 +110,7 @@ export declare function openShortVideosPlayer(init: {
     initialId?: string;
     mediaPageId?: string;
     disableBackground?: boolean;
+    hideCloseButton?: boolean;
     locale?: Locale;
     showStreamsCloudWatermark?: boolean;
     on?: {

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

@@ -12,7 +12,7 @@ import { mount, unmount } from 'svelte';
 export { ShortVideosPlayer };
 export { mapToShortVideoPlayerModel };
 export function openShortVideosPlayer(init) {
-    const { shortVideosProvider, ids, graphqlOrigin, initialId, initiator, socialInteractionsHandler, disableBackground, locale, showStreamsCloudWatermark } = init;
+    const { shortVideosProvider, ids, graphqlOrigin, initialId, initiator, socialInteractionsHandler, disableBackground, hideCloseButton, locale, showStreamsCloudWatermark, on } = init;
     let dataProvider = shortVideosProvider;
     if (!dataProvider && ids) {
         dataProvider = new InternalShortVideoPlayerProvider({ ids, graphqlOrigin, initialId, initiator });
@@ -41,6 +41,7 @@ export function openShortVideosPlayer(init) {
                     dataProvider,
                     socialInteractionsHandler,
                     disableBackground,
+                    enableCloseButton: !hideCloseButton,
                     locale,
                     showStreamsCloudWatermark,
                     analyticsHandler,
@@ -48,15 +49,11 @@ export function openShortVideosPlayer(init) {
                         playerClosed: async () => {
                             await unmount(mounted);
                             shadowHost.remove();
-                            if (init.on?.playerClosed) {
-                                init.on.playerClosed();
+                            if (on?.playerClosed) {
+                                on.playerClosed();
                             }
                         },
-                        videoActivated: (id) => {
-                            if (init.on?.videoActivated) {
-                                init.on.videoActivated(id);
-                            }
-                        }
+                        videoActivated: on?.videoActivated
                     }
                 }
             }

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

@@ -13,7 +13,7 @@ import { getPostCoverImage } from '../../posts/post-viewer';
 import { PlayerBuffer } from '../../ui/player-slider';
 import { InternalShortVideoPlayerProvider } from './internal-short-video-player-provider';
 import { untrack } from 'svelte';
-let { dataProvider, socialInteractionsHandler, locale = 'en', showStreamsCloudWatermark, disableBackground, analyticsHandler, on, mediaCenterData } = $props();
+let { dataProvider, socialInteractionsHandler, disableBackground, enableCloseButton, locale = 'en', showStreamsCloudWatermark, analyticsHandler, on, mediaCenterData } = $props();
 $effect(() => {
     void dataProvider;
     untrack(() => {
@@ -43,6 +43,7 @@ const contentPlayerConfig = new ContentPlayerConfig({
         postModelFromCurrentItem: (item) => item
     },
     disableBackground,
+    enableCloseButton,
     locale,
     showStreamsCloudWatermark,
     socialInteractionsHandler,

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

@@ -18,6 +18,7 @@ export type ShortVideoPlayerProps = {
     socialInteractionsHandler?: IPostSocialInteractionsHandler;
     analyticsHandler?: IShortVideoAnalyticsHandler;
     disableBackground?: boolean;
+    enableCloseButton?: boolean;
     locale?: Locale;
     showStreamsCloudWatermark?: boolean;
     on?: {

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

@@ -96,6 +96,7 @@ export declare function openStreamPlayer(init: {
     postSocialInteractionsHandler?: IPostSocialInteractionsHandler;
     analyticsHandler?: IStreamAnalyticsHandler;
     disableBackground?: boolean;
+    hideCloseButton?: boolean;
     locale?: Locale;
     showStreamsCloudWatermark?: boolean;
     on?: {
@@ -112,6 +113,7 @@ export declare function openStreamPlayer(init: {
     graphqlOrigin?: string;
     mediaPageId?: string;
     disableBackground?: boolean;
+    hideCloseButton?: boolean;
     locale?: Locale;
     showStreamsCloudWatermark?: boolean;
     on?: {

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

@@ -9,7 +9,7 @@ import { mapToStreamPlayerModel } from './mapper';
 import { mount, unmount } from 'svelte';
 export { mapToStreamPlayerModel };
 export function openStreamPlayer(init) {
-    const { streamId, graphqlOrigin, locale, showStreamsCloudWatermark, postSocialInteractionsHandler, initiator } = init;
+    const { streamId, graphqlOrigin, disableBackground, hideCloseButton, locale, showStreamsCloudWatermark, postSocialInteractionsHandler, initiator, on } = init;
     const dataProvider = init.dataProvider ?? new InternalStreamPlayerDataProvider({ graphqlOrigin, initiator });
     if (!dataProvider) {
         toastrWarning('Data provider is not specified.');
@@ -35,6 +35,8 @@ export function openStreamPlayer(init) {
                     streamId,
                     dataProvider,
                     analyticsHandler,
+                    disableBackground,
+                    enableCloseButton: !hideCloseButton,
                     locale,
                     showStreamsCloudWatermark,
                     postSocialInteractionsHandler,
@@ -47,8 +49,8 @@ export function openStreamPlayer(init) {
                         playerClosed: async () => {
                             await unmount(mounted);
                             shadowHost.remove();
-                            if (init.on?.playerClosed) {
-                                init.on.playerClosed();
+                            if (on?.playerClosed) {
+                                on.playerClosed();
                             }
                         }
                     }

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

@@ -97,30 +97,31 @@ let { model, buffer, activePageId, on, localization } = $props();
   justify-content: center;
   overflow-y: auto;
   overscroll-behavior: contain;
-  scrollbar-color: transparent transparent;
-  scrollbar-width: thin;
-  --custom-scrollbar-background: transparent;
   padding: 0.9375rem 0.9375rem 0;
+  --_cross-browser-scrollbar--thumb-color: transparent;
+  --_cross-browser-scrollbar--track-color: transparent;
+}
+.stream-overview-pages:hover {
+  --_cross-browser-scrollbar--thumb-color: var(--scrollbar--thumb-color, #7d7d7d);
+  --_cross-browser-scrollbar--track-color: var(--scrollbar--track-color, transparent);
 }
 .stream-overview-pages::-webkit-scrollbar {
-  width: 3px;
-  height: 3px;
-  background: transparent;
+  width: 6px;
+  height: 6px;
 }
-.stream-overview-pages::-webkit-scrollbar-thumb {
-  background: transparent;
+.stream-overview-pages::-webkit-scrollbar-track {
+  background: var(--_cross-browser-scrollbar--track-color);
+  border-radius: 100vw;
 }
-.stream-overview-pages:hover {
-  scrollbar-color: var(--custom-scrollbar-color, #7d7d7d) var(--custom-scrollbar-background, transparent);
-  scrollbar-width: thin;
-}
-.stream-overview-pages:hover::-webkit-scrollbar {
-  width: 3px;
-  height: 3px;
-  background: var(--custom-scrollbar-background, transparent);
+.stream-overview-pages::-webkit-scrollbar-thumb {
+  background: var(--_cross-browser-scrollbar--thumb-color);
+  border-radius: 100vw;
 }
-.stream-overview-pages:hover::-webkit-scrollbar-thumb {
-  background: var(--custom-scrollbar-color, #7d7d7d);
+@supports (scrollbar-color: transparent transparent) {
+  .stream-overview-pages {
+    scrollbar-color: var(--_cross-browser-scrollbar--thumb-color) var(--_cross-browser-scrollbar--track-color);
+    scrollbar-width: thin;
+  }
 }
 .stream-overview-pages__grid {
   display: flex;

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

@@ -16,7 +16,7 @@ import { default as Overview } from './stream-overview.svelte';
 import { StreamPlayerBuffer } from './stream-player-buffer.svelte';
 import { StreamPlayerLocalization } from './stream-player-localization';
 import { untrack } from 'svelte';
-let { streamId, dataProvider, analyticsHandler, locale = 'en', showStreamsCloudWatermark, postSocialInteractionsHandler, on, mediaCenterData } = $props();
+let { streamId, dataProvider, analyticsHandler, disableBackground, enableCloseButton, locale = 'en', showStreamsCloudWatermark, postSocialInteractionsHandler, on, mediaCenterData } = $props();
 const localization = $derived(new StreamPlayerLocalization(locale));
 let currentStreamModel = $state(null);
 let activePageId = $derived.by(() => { var _a, _b; return (_b = (_a = buffer === null || buffer === void 0 ? void 0 : buffer.current) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : ''; });
@@ -35,7 +35,6 @@ $effect(() => {
         initNewStream(streamId);
     });
     return () => {
-        console.warn('finalize');
         stopActivityTracking();
         if (currentStreamModel) {
             analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackStreamEngagementTime(currentStreamModel.id, totalEngagementTimeSeconds);
@@ -91,7 +90,8 @@ const contentPlayerConfig = new ContentPlayerConfig({
             return null;
         }
     },
-    disableBackground: false,
+    disableBackground,
+    enableCloseButton,
     locale,
     showStreamsCloudWatermark,
     socialInteractionsHandler: postSocialInteractionsHandler,

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

@@ -21,6 +21,7 @@ export type StreamPlayerProps = {
     postSocialInteractionsHandler?: IPostSocialInteractionsHandler;
     analyticsHandler?: IStreamAnalyticsHandler;
     disableBackground?: boolean;
+    enableCloseButton?: boolean;
     locale?: Locale;
     showStreamsCloudWatermark?: boolean;
     on?: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/embeddable",
-  "version": "7.2.0-1759186013783",
+  "version": "7.3.0",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",