@streamscloud/embeddable 7.0.1 → 7.0.2

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

@@ -48,7 +48,8 @@ export class InternalMediaCenterConfig {
                             mediaPageId: this.mediaPageId,
                             categoryId: filter.categoryId,
                             excludeIds: filter.excludeIds,
-                            statuses: [StreamStatus.Published]
+                            statuses: [StreamStatus.Published],
+                            showInFeed: true
                         },
                         limit,
                         continuationToken

package/dist/short-videos/short-videos-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/short-videos/short-videos-player/controls.svelte

@@ -5,7 +5,7 @@ import { ShortVideosPlayerLocalization } from './short-videos-player-localizatio
 import IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_20_regular.svg?raw';
 import IconChevronUp from '@fluentui/svg-icons/icons/chevron_up_20_regular.svg?raw';
 import IconDismiss from '@fluentui/svg-icons/icons/dismiss_20_regular.svg?raw';
-let { buffer, uiManager, localization, socialInteractionsHandler, playerLogo, on } = $props();
+let { buffer, uiManager, localization, socialInteractionsHandler, playerLogo, showCloseButton, on } = $props();
 const shortVideo = $derived(buffer.current);
 const changeShowAttachments = () => {
     uiManager.showAttachments = !uiManager.showAttachments;
@@ -85,7 +85,7 @@ const trackNavigationButtonsSize = (node) => {
   </div>
 {/if}
 
-{#if on.closePlayer}
+{#if on.closePlayer && showCloseButton}
   <button type="button" class="close-button" onclick={on.closePlayer}>
     <Icon src={IconDismiss} />
   </button>
@@ -217,6 +217,10 @@ const trackNavigationButtonsSize = (node) => {
   z-index: 1;
   /* Set 'container-type: inline-size;' to reference container*/
 }
+.close-button:hover {
+  background-color: rgba(0, 0, 0, 0.9);
+  transition: background-color 0.5s;
+}
 .close-button:disabled {
   opacity: 0.5;
   cursor: default;
@@ -247,6 +251,10 @@ const trackNavigationButtonsSize = (node) => {
   --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/short-videos/short-videos-player/controls.svelte.d.ts

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

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

@@ -10,6 +10,7 @@
 import { handleEsc } from '../../core/document.event-handlers';
 import { preloadImage } from '../../core/image-preloader';
 import { ShortVideoViewer } from '../short-video-viewer';
+import { Icon } from '../../ui/icon';
 import { Loading } from '../../ui/loading';
 import { PlayerBuffer, PlayerSlider } from '../../ui/player';
 import { SpotlightLayout } from '../../ui/spotlight-layout';
@@ -18,6 +19,7 @@ import { default as Controls } from './controls.svelte';
 import { InternalShortVideoPlayerProvider } from './internal-short-video-player-provider';
 import { ShortVideosPlayerLocalization } from './short-videos-player-localization';
 import { ShortVideosPlayerUiManager } from './ui-manager.svelte';
+import IconDismiss from '@fluentui/svg-icons/icons/dismiss_28_regular.svg?raw';
 import { untrack } from 'svelte';
 let { dataProvider, socialInteractionsHandler, locale = 'en', showStreamsCloudWatermark, disableBackground, analyticsHandler, on, categoriesSwitcher, playerLogo = null, fadeContent = false } = $props();
 const localization = $derived(new ShortVideosPlayerLocalization(locale));
@@ -114,10 +116,16 @@ const onShortVideoAdImpression = (adId) => {
   class:short-videos-player-container--faded={fadeContent}
   style={background && !disableBackground ? `--background-image: url(${background})` : null}>
   {#if categoriesSwitcher}
+    {#snippet closeButton()}
+      <button type="button" class="close-button" onclick={onPlayerClose}>
+        <Icon src={IconDismiss} />
+      </button>
+    {/snippet}
     <div class="short-videos-player-container__media-center">
       {@render categoriesSwitcher({
         maxItemsWidth: Math.min(uiManager.mainViewColumnWidth * 1.4, uiManager.viewTotalWidth),
-        onMounted: onMediaCenterHeaderMounted
+        onMounted: onMediaCenterHeaderMounted,
+        closeButton: on?.playerClosed && closeButton
       })}
     </div>
   {/if}
@@ -165,6 +173,7 @@ const onShortVideoAdImpression = (adId) => {
         localization={localization}
         socialInteractionsHandler={socialInteractionsHandler}
         playerLogo={playerLogo}
+        showCloseButton={!categoriesSwitcher}
         on={{
           closePlayer: on?.playerClosed,
           productClick: (productId) => onShortVideoProductClick(productId, buffer?.current?.id || ''),
@@ -246,4 +255,27 @@ const onShortVideoAdImpression = (adId) => {
   height: 100%;
   opacity: var(--short-videos-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/short-videos/short-videos-player/short-videos-player-view.svelte.d.ts

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

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

@@ -7,7 +7,7 @@ import { ProportionalContainer } from '../../ui/proportional-container';
 import { TimeAgo } from '../../ui/time-ago';
 import { StreamPlayerLocalization } from './stream-player-localization';
 import IconPanelLeftText from '@fluentui/svg-icons/icons/panel_left_text_20_regular.svg?raw';
-let { model, buffer, activePageId, on, uiManager, localization } = $props();
+let { model, buffer, activePageId, contentFaded, on, uiManager, localization } = $props();
 const overviewAttached = (node) => {
     const resizeObserver = new ResizeObserver(() => {
         on.widthChanged(node.clientWidth);
@@ -16,12 +16,13 @@ const overviewAttached = (node) => {
     return {
         destroy() {
             resizeObserver.disconnect();
+            on.widthChanged(0);
         }
     };
 };
 </script>
 
-{#if !uiManager.overviewCollapsed}
+{#if !uiManager.overviewCollapsed && !contentFaded}
   <div class="stream-overview" transition:slideHorizontally|local use:overviewAttached>
     <div class="stream-overview-info">
       <div class="stream-overview-owner">

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

@@ -8,6 +8,7 @@ type Props = {
     buffer: StreamPlayerBuffer;
     uiManager: StreamPlayerUiManager;
     localization: StreamPlayerLocalization;
+    contentFaded: boolean;
     on: {
         setCurrentItem: (index: number) => void;
         widthChanged: (width: number) => void;

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

@@ -52,6 +52,7 @@ const resetInactivityTimer = () => {
 };
 $effect(() => {
     void dataProvider;
+    void streamId;
     untrack(() => {
         initBuffer(dataProvider);
     });
@@ -273,6 +274,7 @@ const onProgress = (pageId, videoId, progress) => {
         <Overview
           model={model}
           buffer={buffer}
+          contentFaded={fadeContent}
           activePageId={activePageId}
           uiManager={uiManager}
           localization={localization}

package/package.json

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