@streamscloud/embeddable 7.0.0-1758321646285 → 7.0.0

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

@@ -146,6 +146,7 @@ const toggleOverview = () => __awaiter(void 0, void 0, void 0, function* () {
         return;
     }
     overviewOpened = !overviewOpened;
+    streamsInCategoryOpened = false;
     if (overviewOpened && !overviewData) {
         overviewData = { loading: true };
         try {
@@ -209,8 +210,13 @@ const onScrollMounted = (node) => {
 {#if mediaDataLoading}
   <Loading positionFixedCenter={true} timeout={600} />
 {:else}
-  {#snippet categoriesSwitcher(data: { maxItemsWidth: Number; onMounted: (data: { height: Number }) => void })}
+  {#snippet categoriesSwitcher(data: { maxItemsWidth: Number; onMounted: (data: { height: Number }) => void; closeButton?: Snippet })}
     <div class="media-center" use:mounted={data.onMounted}>
+      {#if data.closeButton}
+        <div class="media-center__close-button">
+          {@render data.closeButton()}
+        </div>
+      {/if}
       <div class="media-center__row" style={`max-width: ${data.maxItemsWidth}px;`}>
         <div
           class="media-center__scroll"
@@ -313,11 +319,6 @@ const onScrollMounted = (node) => {
   display: flex;
   justify-content: center;
   padding: 1.25rem 5rem;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 1;
   pointer-events: none;
 }
 .media-center__row {
@@ -335,6 +336,20 @@ const onScrollMounted = (node) => {
     display: none;
   }
 }
+.media-center__close-button {
+  pointer-events: auto;
+  position: absolute;
+  top: 0.9375rem;
+  left: 0.625rem;
+  z-index: 1;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 576px) {
+  .media-center__close-button {
+    left: unset;
+    right: 0.625rem;
+  }
+}
 .media-center__scroll {
   pointer-events: auto;
   position: relative;

package/dist/short-videos/short-video-viewer/cmp.short-video-viewer.svelte

@@ -54,7 +54,7 @@ const trackControlsPanelSize = (node) => {
         <LineClamp value={model.text} maxLines={2} enableShowMore={true} />
       {/if}
     </div>
-    {#if uiManager.showAttachments}
+    {#if uiManager.showAttachments && model.hasAttachments}
       <div class="short-video-viewer__attachments">
         <AttachmentsHorizontal
           model={model}

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

@@ -114,10 +114,12 @@ const onShortVideoAdImpression = (adId) => {
   class:short-videos-player-container--faded={fadeContent}
   style={background && !disableBackground ? `--background-image: url(${background})` : null}>
   {#if categoriesSwitcher}
-    {@render categoriesSwitcher({
-      maxItemsWidth: Math.min(uiManager.mainViewColumnWidth * 1.4, uiManager.viewTotalWidth),
-      onMounted: onMediaCenterHeaderMounted
-    })}
+    <div class="short-videos-player-container__media-center">
+      {@render categoriesSwitcher({
+        maxItemsWidth: Math.min(uiManager.mainViewColumnWidth * 1.4, uiManager.viewTotalWidth),
+        onMounted: onMediaCenterHeaderMounted
+      })}
+    </div>
   {/if}
 
   <div class="short-videos-player" style={uiManager.globalCssVariables}>
@@ -211,6 +213,13 @@ const onShortVideoAdImpression = (adId) => {
 .short-videos-player-container--faded {
   --short-videos-player--elements-opacity: 0;
 }
+.short-videos-player-container__media-center {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1;
+}
 
 .short-videos-player {
   display: flex;

package/dist/streams/stream-player/button-mixins.scss

@@ -0,0 +1,24 @@
+@use 'src/styles/functions';
+@use 'src/styles/mixins';
+@use 'src/styles/colors';
+
+@mixin button() {
+  @include mixins.width(functions.rem(48));
+  @include mixins.height(functions.rem(48));
+  background-color: rgba(0, 0, 0, 0.6);
+  border: 1px solid colors.$color-gray-900;
+  border-radius: 50%;
+  text-align: center;
+  --icon--color: #{colors.$color-white};
+  --icon--size: #{functions.rem(28)};
+
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.9);
+    transition: background-color 0.5s;
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: default;
+  }
+}

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

@@ -9,7 +9,7 @@ import { StreamPlayerLocalization } from './stream-player-localization';
 import IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_28_regular.svg?raw';
 import IconChevronUp from '@fluentui/svg-icons/icons/chevron_up_28_regular.svg?raw';
 import IconDismiss from '@fluentui/svg-icons/icons/dismiss_28_regular.svg?raw';
-let { buffer, uiManager, postSocialInteractionsHandler, localization, on, playerLogo } = $props();
+let { buffer, uiManager, postSocialInteractionsHandler, localization, on, playerLogo, showCloseButton } = $props();
 const shortVideo = $derived(((_a = buffer.current) === null || _a === void 0 ? void 0 : _a.type) === 'short-video' && ((_b = buffer.current) === null || _b === void 0 ? void 0 : _b.shortVideo) ? mapToShortVideoViewerModel(buffer.current.shortVideo) : null);
 const singleWebViewPage = $derived.by(() => {
     var _a;
@@ -122,9 +122,11 @@ const trackNavigationButtonsSize = (node) => {
   </div>
 {/if}
 
-<button type="button" class="close-button" onclick={on.closePlayer}>
-  <Icon src={IconDismiss} />
-</button>
+{#if showCloseButton}
+  <button type="button" class="close-button" onclick={on.closePlayer}>
+    <Icon src={IconDismiss} />
+  </button>
+{/if}
 
 <style>@keyframes fadeIn {
   0% {
@@ -240,7 +242,7 @@ const trackNavigationButtonsSize = (node) => {
   min-height: 3rem;
   max-height: 3rem;
   background-color: rgba(0, 0, 0, 0.6);
-  border: 0.0625rem solid #1c1c1c;
+  border: 1px solid #1c1c1c;
   border-radius: 50%;
   text-align: center;
   --icon--color: #ffffff;
@@ -251,14 +253,14 @@ const trackNavigationButtonsSize = (node) => {
   z-index: 1;
   /* Set 'container-type: inline-size;' to reference container*/
 }
-.close-button:disabled {
-  opacity: 0.5;
-  cursor: default;
-}
 .close-button:hover {
   background-color: rgba(0, 0, 0, 0.9);
   transition: background-color 0.5s;
 }
+.close-button:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
 @container (width < 576px) {
   .close-button {
     left: unset;
@@ -275,12 +277,16 @@ const trackNavigationButtonsSize = (node) => {
   min-height: 3rem;
   max-height: 3rem;
   background-color: rgba(0, 0, 0, 0.6);
-  border: 0.0625rem solid #1c1c1c;
+  border: 1px solid #1c1c1c;
   border-radius: 50%;
   text-align: center;
   --icon--color: #ffffff;
   --icon--size: 1.75rem;
 }
+.navigation-button:hover {
+  background-color: rgba(0, 0, 0, 0.9);
+  transition: background-color 0.5s;
+}
 .navigation-button:disabled {
   opacity: 0.5;
   cursor: default;

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

@@ -8,6 +8,7 @@ type Props = {
     postSocialInteractionsHandler?: IPostSocialInteractionsHandler;
     localization: StreamPlayerLocalization;
     playerLogo: string | null;
+    showCloseButton: boolean;
     on: {
         closePlayer: () => void;
         productClick?: (productId: string) => void;

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

@@ -118,9 +118,9 @@ const overviewAttached = (node) => {
 }
 @container (width < 576px) {
   .stream-overview {
-    width: 100%;
-    min-width: 100%;
-    max-width: 100%;
+    width: calc(100% - 80px);
+    min-width: calc(100% - 80px);
+    max-width: calc(100% - 80px);
   }
 }
 
@@ -131,6 +131,8 @@ const overviewAttached = (node) => {
   z-index: 1;
   --icon--color: #ffffff;
   --icon--size: 1.25rem;
+  opacity: var(--stream-player--elements-opacity);
+  transition: opacity 0.3s ease-in-out;
   /* Set 'container-type: inline-size;' to reference container*/
 }
 .toggle-collapsed-button--left {

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

@@ -13,6 +13,7 @@ import { toastrWarning } from '../../core/toastr';
 import { ShortVideoViewer } from '../../short-videos/short-video-viewer';
 import { mapToShortVideoViewerModel } from '../layout/models';
 import { StreamPageViewer } from '../stream-page-viewer';
+import { Icon } from '../../ui/icon';
 import { Loading } from '../../ui/loading';
 import { PlayerSlider } from '../../ui/player';
 import { SpotlightLayout } from '../../ui/spotlight-layout';
@@ -22,6 +23,7 @@ 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 IconDismiss from '@fluentui/svg-icons/icons/dismiss_28_regular.svg?raw';
 import { onMount, untrack } from 'svelte';
 let { streamId, dataProvider, analyticsHandler, locale = 'en', showStreamsCloudWatermark, postSocialInteractionsHandler, on, categoriesSwitcher, playerLogo = null, fadeContent = false } = $props();
 const localization = $derived(new StreamPlayerLocalization(locale));
@@ -36,7 +38,6 @@ let isActive = true;
 let activityTimeout = null;
 let trackingInterval = null;
 let maxPageIndexViewed = 0;
-let background = $state(null);
 const uiManager = new StreamPlayerUiManager();
 const resetInactivityTimer = () => {
     if (!isActive) {
@@ -80,7 +81,7 @@ const initBuffer = (dataProvider) => __awaiter(void 0, void 0, void 0, function*
                     if (coverUrl) {
                         yield preloadImage(coverUrl);
                     }
-                    background = coverUrl;
+                    uiManager.setBackgroundImageUrl(coverUrl);
                 }
                 buffer = instance;
                 bufferIsLoading = false;
@@ -157,7 +158,7 @@ const contentMounted = (node) => {
 };
 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;
+    uiManager.setBackgroundImageUrl((page === null || page === void 0 ? void 0 : page.cover) || null);
     if (page) {
         analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackStreamPageView(id, streamId);
         if (page.type === 'short-video' && page.shortVideo) {
@@ -203,16 +204,24 @@ const onProgress = (pageId, videoId, progress) => {
 
 <div
   class="stream-player-container"
-  class:stream-player-container--background-loading={!background}
+  class:stream-player-container--background-loading={!uiManager.isMobileView}
   class:stream-player-container--faded={fadeContent}
-  style={background ? `--background-image: url(${background})` : null}>
+  style={uiManager.globalCssVariables}>
   {#if categoriesSwitcher}
-    {@render categoriesSwitcher({
-      maxItemsWidth: Math.min(uiManager.mainViewColumnWidth * 1.4, uiManager.viewTotalWidth),
-      onMounted: onMediaCenterHeaderMounted
-    })}
+    {#snippet closeButton()}
+      <button type="button" class="close-button" onclick={onPlayerClose}>
+        <Icon src={IconDismiss} />
+      </button>
+    {/snippet}
+    <div class="stream-player-container__media-center">
+      {@render categoriesSwitcher({
+        maxItemsWidth: Math.min(uiManager.mainViewColumnWidth * 1.4, uiManager.viewTotalWidth),
+        onMounted: onMediaCenterHeaderMounted,
+        closeButton: on?.playerClosed && closeButton
+      })}
+    </div>
   {/if}
-  <div class="stream-player" style={uiManager.globalCssVariables}>
+  <div class="stream-player">
     {#if showStreamsCloudWatermark}
       <div class="stream-player__watermark">
         <a href="https://streamscloud.com/" tabindex="-1" aria-label="none">
@@ -278,6 +287,7 @@ const onProgress = (pageId, videoId, progress) => {
         localization={localization}
         postSocialInteractionsHandler={postSocialInteractionsHandler}
         playerLogo={playerLogo}
+        showCloseButton={!categoriesSwitcher}
         on={{
           closePlayer: () => onPlayerClose(),
           productClick: (productId: String) => onProductCardClick(productId),
@@ -314,7 +324,7 @@ const onProgress = (pageId, videoId, progress) => {
 }
 .stream-player-container {
   background-color: #c1c1c1;
-  background-image: var(--background-image);
+  background-image: var(--stream-player--background-image-url);
   background-size: cover;
   background-blend-mode: multiply;
 }
@@ -324,6 +334,13 @@ const onProgress = (pageId, videoId, progress) => {
 .stream-player-container--faded {
   --stream-player--elements-opacity: 0;
 }
+.stream-player-container__media-center {
+  position: absolute;
+  top: 0;
+  left: var(--stream-player--overview--width);
+  right: var(--stream-player--overview--width);
+  z-index: 1;
+}
 
 .stream-player {
   display: flex;
@@ -350,4 +367,27 @@ const onProgress = (pageId, videoId, progress) => {
   height: 100%;
   opacity: var(--stream-player--elements-opacity);
   transition: opacity 0.3s ease-in-out;
+}
+
+.close-button {
+  width: 3rem;
+  min-width: 3rem;
+  max-width: 3rem;
+  height: 3rem;
+  min-height: 3rem;
+  max-height: 3rem;
+  background-color: rgba(0, 0, 0, 0.6);
+  border: 1px solid #1c1c1c;
+  border-radius: 50%;
+  text-align: center;
+  --icon--color: #ffffff;
+  --icon--size: 1.75rem;
+}
+.close-button:hover {
+  background-color: rgba(0, 0, 0, 0.9);
+  transition: background-color 0.5s;
+}
+.close-button:disabled {
+  opacity: 0.5;
+  cursor: default;
 }</style>

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

@@ -6,6 +6,7 @@ type $$ComponentProps = StreamPlayerProps & {
         onMounted: (data: {
             height: number;
         }) => void;
+        closeButton?: Snippet;
     }]>;
     playerLogo?: string | null;
     fadeContent?: boolean;

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

@@ -6,6 +6,7 @@ export declare class StreamPlayerUiManager {
     viewInitialized: boolean;
     showShortVideoOverlayAttachments: boolean;
     showShortVideoOverlayControls: boolean;
+    private _backgroundImageUrl;
     private _viewTotalWidth;
     private _mainViewColumnWidth;
     private _mediaCenterHeaderHeight;
@@ -16,6 +17,7 @@ export declare class StreamPlayerUiManager {
     private _controlsContentWidth;
     get viewTotalWidth(): number;
     get mainViewColumnWidth(): number;
+    get backgroundImageUrl(): string | null;
     updateDimensions: (dimensions: {
         viewTotalWidth: number;
         mainViewColumnWidth: number;
@@ -24,4 +26,5 @@ export declare class StreamPlayerUiManager {
     updateMediaCenterHeaderHeight: (height: number) => void;
     setAttachmentsPanelWidth: (width: number) => void;
     setNavigationButtonsBlockWidth: (width: number) => void;
+    setBackgroundImageUrl: (url: string | null) => void;
 }

package/dist/streams/stream-player/ui-manager.svelte.js

@@ -14,12 +14,16 @@ export class StreamPlayerUiManager {
             `--stream-player--overview--width: ${this._overviewWidth}px`,
             `--stream-player--padding: ${this._mediaCenterHeaderHeight ? this._mediaCenterHeaderHeight : PLAYER_PADDING_VERTICAL}px 0 ${PLAYER_PADDING_VERTICAL}px`
         ];
+        if (this._backgroundImageUrl) {
+            values.push(`--stream-player--background-image-url: url(${this._backgroundImageUrl})`);
+        }
         return values.join(';');
     });
     isMobileView = $derived.by(() => this._viewTotalWidth <= 576);
     viewInitialized = $derived.by(() => !!this._viewTotalWidth && !!this._mainViewColumnWidth);
     showShortVideoOverlayAttachments = $derived.by(() => this.viewInitialized && this._controlsAttachmentsPanelWidth < CONTROLS_ATTACHMENTS_MAX_WIDTH + 10);
     showShortVideoOverlayControls = $derived.by(() => this.viewInitialized && this._controlsContentWidth < this._controlsNavitagionButtonsWidth);
+    _backgroundImageUrl = $state(null);
     _viewTotalWidth = $state(0);
     _mainViewColumnWidth = $state(0);
     _mediaCenterHeaderHeight = $state(0);
@@ -34,6 +38,9 @@ export class StreamPlayerUiManager {
     get mainViewColumnWidth() {
         return this._mainViewColumnWidth;
     }
+    get backgroundImageUrl() {
+        return this._backgroundImageUrl;
+    }
     updateDimensions = (dimensions) => {
         this._viewTotalWidth = dimensions.viewTotalWidth;
         this._mainViewColumnWidth = dimensions.mainViewColumnWidth;
@@ -50,4 +57,7 @@ export class StreamPlayerUiManager {
     setNavigationButtonsBlockWidth = (width) => {
         this._controlsNavitagionButtonsWidth = width;
     };
+    setBackgroundImageUrl = (url) => {
+        this._backgroundImageUrl = url;
+    };
 }

package/package.json

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