@streamscloud/embeddable 6.2.0 → 6.2.2

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

@@ -73,6 +73,9 @@ const selectCategory = (categoryId) => {
         return;
     }
     if (selectedCategoryId === categoryId) {
+        if (overviewOpened) {
+            overviewOpened = false;
+        }
         return;
     }
     switch (mediaCenterMode) {
@@ -192,14 +195,14 @@ const onScrollMounted = (node) => {
           class:media-center__scroll--has-both={scrollHasRight && scrollHasLeft}
           use:onScrollMounted
           onscroll={updateScrollShadows}>
-          <button type="button" class="media-center__overview-button" onclick={toggleOverview}>
+          <button type="button" class="media-center__overview-button" class:media-center__overview-button--active={overviewOpened} onclick={toggleOverview}>
             <Icon src={IconTextColumnThree} />
           </button>
           {#each categories as category (category.id)}
             <button
               type="button"
               class="media-center__category-button"
-              class:media-center__category-button--active={selectedCategoryId === category.id}
+              class:media-center__category-button--active={!overviewOpened && selectedCategoryId === category.id}
               title={category.name}
               onclick={() => selectCategory(category.id)}>{category.name}</button>
           {/each}
@@ -213,14 +216,18 @@ const onScrollMounted = (node) => {
             </div>
           {/snippet}
           <div class="media-center__overview-dropdown-content">
-            <button type="button" class="media-center__category-button media-center__category-button--dropdown" onclick={toggleOverview}>
+            <button
+              type="button"
+              class="media-center__category-button media-center__category-button--dropdown"
+              class:media-center__category-button--active={overviewOpened}
+              onclick={toggleOverview}>
               {localization.overviewLabel}
             </button>
             {#each categories as category (category.id)}
               <button
                 type="button"
                 class="media-center__category-button media-center__category-button--dropdown"
-                class:media-center__category-button--active={selectedCategoryId === category.id}
+                class:media-center__category-button--active={!overviewOpened && selectedCategoryId === category.id}
                 title={category.name}
                 onclick={() => selectCategory(category.id)}>{category.name}</button>
             {/each}
@@ -319,12 +326,21 @@ const onScrollMounted = (node) => {
   pointer-events: auto;
   padding: 0.375rem 0.75rem;
   line-height: 0;
+  white-space: nowrap;
+  flex: 0 0 auto;
   border-radius: 0.875rem;
   background-color: rgba(0, 0, 0, 0.6);
   color: #f2f2f2;
   transition: background 0.3s ease-in-out;
-  white-space: nowrap;
-  flex: 0 0 auto;
+  -webkit-user-drag: none;
+  user-select: none;
+}
+.media-center__overview-button :global([contenteditable]) {
+  user-select: text;
+}
+.media-center__overview-button--active {
+  background-color: rgba(255, 255, 255, 0.9);
+  color: #000000;
 }
 .media-center__overview-button:hover:not(.media-center__overview-button--active) {
   background-color: rgba(0, 0, 0, 0.9);
@@ -338,20 +354,25 @@ const onScrollMounted = (node) => {
   width: auto;
   max-width: none;
   min-width: 0;
+  scroll-snap-align: start;
+  flex: 0 0 auto;
   border-radius: 0.875rem;
   background-color: rgba(0, 0, 0, 0.6);
   color: #f2f2f2;
   transition: background 0.3s ease-in-out;
-  scroll-snap-align: start;
-  flex: 0 0 auto;
+  -webkit-user-drag: none;
+  user-select: none;
 }
-.media-center__category-button:hover:not(.media-center__category-button--active) {
-  background-color: rgba(0, 0, 0, 0.9);
+.media-center__category-button :global([contenteditable]) {
+  user-select: text;
 }
 .media-center__category-button--active {
   background-color: rgba(255, 255, 255, 0.9);
   color: #000000;
 }
+.media-center__category-button:hover:not(.media-center__category-button--active) {
+  background-color: rgba(0, 0, 0, 0.9);
+}
 .media-center__category-button--dropdown {
   width: max-content;
 }

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

@@ -79,6 +79,7 @@ let { shortVideo, aspectRatio = 9 / 16, on } = $props();
   gap: 0.3125em;
   --icon--size: 1.25em;
   --icon--color: #ffffff;
+  --icon--filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.2));
 }
 .short-video-card__text {
   font-weight: 500;

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

@@ -109,6 +109,7 @@ const changeShowAttachments = () => {
   overflow-y: auto;
   scrollbar-color: transparent transparent;
   scrollbar-width: thin;
+  scrollbar-gutter: stable;
 }
 .short-videos-player-controls__right::-webkit-scrollbar {
   width: 3px;
@@ -148,7 +149,6 @@ const changeShowAttachments = () => {
   height: var(--short-videos-player--media-center-header--height);
   min-height: var(--short-videos-player--media-center-header--height);
   max-height: var(--short-videos-player--media-center-header--height);
-  min-height: 4.375rem;
   display: flex;
   justify-content: center;
   align-items: center;

package/dist/short-videos/short-videos-player/ui-manager.svelte.js

@@ -11,7 +11,7 @@ export class ShortVideosPlayerUiManager {
             `--short-videos-player--controls--available-space: ${(this._viewTotalWidth - this._mainViewColumnWidth) / 2}px`,
             `--short-videos-player--controls--padding: ${this._mediaCenterHeaderHeight ? 0 : CONTROLS_PADDING_VERTICAL}px ${CONTROLS_PADDING_HORIZONTAL}px ${CONTROLS_PADDING_VERTICAL}px`,
             `--short-videos-player--icon--size: ${ICON_SIZE}px`,
-            `--short-videos-player--media-center-header--height: ${this._mediaCenterHeaderHeight}px`,
+            `--short-videos-player--media-center-header--height: ${this._mediaCenterHeaderHeight || 72}px`,
             `--short-videos-player--padding: ${this._mediaCenterHeaderHeight ? this._mediaCenterHeaderHeight : PLAYER_PADDING_VERTICAL}px 0 ${PLAYER_PADDING_VERTICAL}px`
         ];
         return values.join(';');

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

@@ -129,6 +129,7 @@ const changeShowShortVideoAttachments = () => {
   justify-content: space-between;
   align-items: flex-end;
   flex-direction: column;
+  scrollbar-gutter: stable;
 }
 .stream-player-controls__short-video-hub {
   gap: 2.5rem;

package/dist/ui/icon/cmp.icon.svelte

@@ -31,6 +31,7 @@ let { src, color = null } = $props();
   --_icon--color: var(--icon--color);
   --_icon--size: var(--icon--size, 1.25em);
   --_icon--stroke-width: var(--icon--stroke-width, 0);
+  --_icon--filter: var(--icon--filter, none);
   display: contents;
 }
 .icon--white {
@@ -79,6 +80,7 @@ let { src, color = null } = $props();
   display: inline-block;
   color: inherit;
   fill: var(--_icon--color, currentColor);
+  filter: var(--_icon--filter);
   height: var(--_icon--size);
   min-height: var(--_icon--size);
   max-height: var(--_icon--size);

package/package.json

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