@streamscloud/embeddable 10.1.2 → 11.0.0

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

@@ -0,0 +1,345 @@
+<script lang="ts">import { slideHorizontally } from '../../../core/transitions';
+import { compactNumber } from '../../../core/utils/compact-number';
+import { StreamCard } from '../../../streams/stream-card';
+import { Icon } from '../../../ui/icon';
+import { ImageRound } from '../../../ui/image';
+import { LineClamp } from '../../../ui/line-clamp';
+import { default as ButtonWrapper } from './category-following-wrapper.svelte';
+import { MenuLocalization } from './menu-localization';
+import IconChevronDownFilled from '@fluentui/svg-icons/icons/chevron_down_20_filled.svg?raw';
+import IconChevronRightFilled from '@fluentui/svg-icons/icons/chevron_right_20_filled.svg?raw';
+import { slide } from 'svelte/transition';
+let { context, locale, on } = $props();
+const localization = $derived(new MenuLocalization(locale));
+const target = $derived.by(() => context.targetData);
+const generateCategoriesMap = () => {
+    const expanded = {};
+    context.categoriesHandler.categories.forEach((c) => {
+        const isSelfSelected = context.categoriesHandler.selectedCategoryId === c.id;
+        const hasSelectedChild = c.children.some((ch) => ch.id === context.categoriesHandler.selectedCategoryId);
+        expanded[c.id] = isSelfSelected || hasSelectedChild;
+    });
+    return expanded;
+};
+const categoriesExpandedMap = $state(generateCategoriesMap());
+const handleCategoryExpaned = (e, categoryId) => {
+    e.stopPropagation();
+    categoriesExpandedMap[categoryId] = !categoriesExpandedMap[categoryId];
+};
+const styles = $derived.by(() => {
+    var _a, _b;
+    const values = [];
+    if ((_a = context.playerColors) === null || _a === void 0 ? void 0 : _a.menuBackground) {
+        values.push(`--media-center-menu--background-color: ${context.playerColors.menuBackground}`);
+    }
+    if ((_b = context.playerColors) === null || _b === void 0 ? void 0 : _b.brand) {
+        values.push(`--media-center-menu--brand-color: ${context.playerColors.brand}`);
+    }
+    return values.join(';');
+});
+</script>
+
+<div class="media-center-menu" transition:slideHorizontally|local style={styles} onclick={(e) => e.stopPropagation()} onkeydown={() => {}} role="none">
+  {#if target}
+    <div class="media-center-target">
+      <div class="media-center-target__image">
+        <ImageRound src={target.image} />
+      </div>
+      <div class="media-center-target__info">
+        <div class="media-center-target__name">
+          <LineClamp maxLines={1}>
+            {target.name}
+          </LineClamp>
+        </div>
+        {#if target.membersCount}
+          <LineClamp maxLines={1}>
+            <div class="media-center-target__members">
+              <span class="media-center-target__members-count">
+                {compactNumber(target.membersCount, { locale: localization.locale })}
+              </span>
+              <span class="media-center-target__members-label">
+                {localization.membersLabel(target.membersCount)}
+              </span>
+            </div>
+          </LineClamp>
+        {/if}
+      </div>
+    </div>
+  {/if}
+  <div class="media-center-menu__content">
+    <div class="media-center-menu__section-title">
+      {localization.interestsSectionTitle}
+    </div>
+    <div class="media-center-menu__tree">
+      {#each context.categoriesHandler.categories as category (category.id)}
+        <div class="media-center-menu__tree-item">
+          <div class="selector-item">
+            <div class="selector-item__value">
+              <div class="selector-item__image">
+                <ImageRound src={category.image} noBorders={true} />
+              </div>
+              <div
+                class="selector-item__text"
+                class:selector-item__text--active={!context.discoverHandler.activated && context.categoriesHandler.selectedCategoryId === category.id}
+                onclick={() => on.categorySelected(category.id)}
+                onkeydown={() => {}}
+                role="button"
+                tabindex="0">
+                {category.name}
+              </div>
+            </div>
+            <ButtonWrapper categoryId={category.id} followingHandler={context.categoryFollowingHandler} invertedOrientation={true}>
+              <button
+                type="button"
+                class="selector-item__collapser"
+                class:selector-item__collapser--hidden={!category.children.length}
+                onclick={(e) => handleCategoryExpaned(e, category.id)}>
+                {#if categoriesExpandedMap[category.id]}
+                  <Icon src={IconChevronDownFilled} />
+                {:else}
+                  <Icon src={IconChevronRightFilled} />
+                {/if}
+              </button>
+            </ButtonWrapper>
+          </div>
+          {#if categoriesExpandedMap[category.id]}
+            <div class="media-center-menu__tree-item" transition:slide|local>
+              {#each category.children as subcategory (subcategory.id)}
+                <div class="selector-item selector-item--child">
+                  <div class="selector-item__value">
+                    <div class="selector-item__image">
+                      <ImageRound src={subcategory.image} noBorders={true} />
+                    </div>
+                    <div
+                      class="selector-item__text"
+                      class:selector-item__text--active={!context.discoverHandler.activated && context.categoriesHandler.selectedCategoryId === subcategory.id}
+                      onclick={() => on.categorySelected(subcategory.id)}
+                      onkeydown={() => {}}
+                      role="button"
+                      tabindex="0">
+                      {subcategory.name}
+                    </div>
+                  </div>
+                  <ButtonWrapper categoryId={subcategory.id} followingHandler={context.categoryFollowingHandler} invertedOrientation={true}>
+                    <button type="button" class="selector-item__collapser selector-item__collapser--hidden">
+                      <Icon src={IconChevronRightFilled} />
+                    </button>
+                  </ButtonWrapper>
+                </div>
+              {/each}
+            </div>
+          {/if}
+        </div>
+      {/each}
+    </div>
+
+    {#if context.popularStreamsHandler.streamSectionItems.length > 0}
+      <div class="media-center-menu__popular-streams-section">
+        <div class="media-center-menu__section-title">
+          {localization.popularStreamsSectionTitle}
+        </div>
+        <div class="media-center-menu__popular-streams">
+          {#each context.popularStreamsHandler.streamSectionItems as item (item.id)}
+            <StreamCard stream={item} on={{ click: () => on.streamSelected(item) }}></StreamCard>
+          {/each}
+        </div>
+      </div>
+    {/if}
+  </div>
+</div>
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.media-center-menu {
+  --_media-center-menu--background-color: var(--media-center-menu--background-color, rgb(from #000000 r g b / 95%));
+  --_media-center-menu--brand-color: var(--media-center-menu--brand-color, #00b8d8);
+  background: var(--_media-center-menu--background-color);
+  height: 100%;
+  min-height: 100%;
+  max-height: 100%;
+  width: 100%;
+  min-width: 100%;
+  max-width: 100%;
+  display: flex;
+  gap: 1.25rem;
+  flex-direction: column;
+  min-height: 0;
+  padding: 0.9375rem 1.25rem;
+  padding-right: 0.75rem;
+  border-radius: 0 1rem 1rem 0;
+}
+.media-center-menu__content {
+  display: flex;
+  flex: 1;
+  gap: 1rem;
+  flex-direction: column;
+  overflow: hidden;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  --_cross-browser-scrollbar--thumb-color: transparent;
+  --_cross-browser-scrollbar--track-color: transparent;
+}
+.media-center-menu__content:hover {
+  --_cross-browser-scrollbar--thumb-color: var(--scrollbar--thumb-color, #7d7d7d);
+  --_cross-browser-scrollbar--track-color: var(--scrollbar--track-color, transparent);
+}
+.media-center-menu__content::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+.media-center-menu__content::-webkit-scrollbar-track {
+  background: var(--_cross-browser-scrollbar--track-color);
+  border-radius: 100vw;
+}
+.media-center-menu__content::-webkit-scrollbar-thumb {
+  background: var(--_cross-browser-scrollbar--thumb-color);
+  border-radius: 100vw;
+}
+@supports (scrollbar-color: transparent transparent) {
+  .media-center-menu__content {
+    scrollbar-color: var(--_cross-browser-scrollbar--thumb-color) var(--_cross-browser-scrollbar--track-color);
+    scrollbar-width: thin;
+  }
+}
+.media-center-menu__section-title {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+  font-weight: 600;
+  color: #ffffff;
+}
+.media-center-menu__tree {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  gap: 1rem;
+}
+.media-center-menu__tree-item {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.media-center-menu__popular-streams-section {
+  display: flex;
+  margin-top: auto;
+  flex-direction: column;
+  gap: 1rem;
+  padding-top: 1.25rem;
+  padding-right: 0.5rem;
+}
+.media-center-menu__popular-streams {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+}
+
+.selector-item {
+  display: flex;
+  -webkit-user-drag: none;
+  user-select: none;
+  height: 2.25rem;
+  --_selector-item--text--font-size: 0.9375rem;
+  --_selector-item--text--font-weight: 600;
+  --_selector-item--image--size: 1.5rem;
+}
+.selector-item :global([contenteditable]) {
+  user-select: text;
+}
+.selector-item--child {
+  height: 2.125rem;
+  padding-left: 1.25rem;
+  --_selector-item--text--font-size: 0.875rem;
+  --_selector-item--text--font-weight: 500;
+  --_selector-item--image--size: 1.375rem;
+}
+.selector-item__value {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  gap: 0.75rem;
+  min-width: 0;
+  cursor: pointer;
+}
+.selector-item__image {
+  width: var(--_selector-item--image--size);
+  min-width: var(--_selector-item--image--size);
+  max-width: var(--_selector-item--image--size);
+  height: var(--_selector-item--image--size);
+  min-height: var(--_selector-item--image--size);
+  max-height: var(--_selector-item--image--size);
+}
+.selector-item__text {
+  flex: 1;
+  max-width: 100%;
+  color: #ffffff;
+  font-size: var(--_selector-item--text--font-size);
+  font-weight: var(--_selector-item--text--font-weight);
+  text-align: left;
+  text-overflow: ellipsis;
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  transition: text-shadow 120ms ease;
+}
+.selector-item__text:hover, .selector-item__text--active {
+  text-shadow: 0.001em 0 0 currentColor, -0.001em 0 0 currentColor, 0 0.001em 0 currentColor, 0 -0.001em 0 currentColor;
+}
+.selector-item__collapser {
+  --icon--color: #ffffff;
+  --icon--size: 1rem;
+  padding: 0.5rem;
+}
+.selector-item__collapser--hidden {
+  visibility: hidden;
+}
+
+.media-center-target {
+  display: flex;
+  align-items: center;
+  gap: 0.9375rem;
+}
+.media-center-target__image {
+  width: 3.5rem;
+  min-width: 3.5rem;
+  max-width: 3.5rem;
+  height: 3.5rem;
+  min-height: 3.5rem;
+  max-height: 3.5rem;
+  --image--rounded--inner--border-width: 1px;
+  --image--rounded--outer--border-color: var(--_media-center-menu--brand-color);
+  --image--rounded--outer--border-width: 2px;
+}
+.media-center-target__info {
+  display: flex;
+  flex-direction: column;
+  color: #ffffff;
+}
+.media-center-target__name {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+  font-weight: 600;
+}
+.media-center-target__members {
+  display: flex;
+  align-items: flex-end;
+  gap: 0.5rem;
+}
+.media-center-target__members-count {
+  font-size: 0.9375rem;
+  line-height: 1;
+  font-weight: 500;
+}
+.media-center-target__members-label {
+  font-size: 0.75rem;
+  line-height: 1;
+  font-weight: 400;
+  color: #d1d5db;
+}</style>

package/dist/media-center/media-center/menu/menu.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Locale } from '../../../core/locale';
+import type { StreamPlayerModel } from '../../../streams/streams-player';
+import type { MediaCenterContext } from '../media-center-context.svelte';
+type Props = {
+    context: MediaCenterContext;
+    locale: Locale;
+    on: {
+        categorySelected: (categoryId: string) => void;
+        streamSelected: (stream: StreamPlayerModel) => void;
+    };
+};
+declare const Menu: import("svelte").Component<Props, {}, "">;
+type Menu = ReturnType<typeof Menu>;
+export default Menu;

package/dist/media-center/media-center/menu/popular-streams-panel-handler.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { IMediaCenterConfig } from '../..';
+import type { StreamPlayerModel } from '../../../streams/streams-player/types';
+export declare class PopularStreamsPanelHandler {
+    private readonly config;
+    private _state;
+    private _streams;
+    constructor(config: IMediaCenterConfig | null);
+    get streamSectionItems(): StreamPlayerModel[];
+    init: () => Promise<void>;
+}

package/dist/media-center/media-center/menu/popular-streams-panel-handler.svelte.js

@@ -0,0 +1,26 @@
+export class PopularStreamsPanelHandler {
+    config;
+    _state = $state('not-initialized');
+    _streams = $state.raw([]);
+    constructor(config) {
+        this.config = config;
+    }
+    get streamSectionItems() {
+        return this._streams;
+    }
+    init = async () => {
+        if (!this.config) {
+            return;
+        }
+        if (this._state === 'not-initialized') {
+            this._state = 'loading';
+            try {
+                const streamsResponse = await this.config.streamPlayer.getStreamsCursor({ filter: {}, limit: 2 });
+                this._streams = streamsResponse.items;
+            }
+            finally {
+                this._state = 'ready';
+            }
+        }
+    };
+}

package/dist/media-center/media-center/providers/index.d.ts

@@ -0,0 +1,2 @@
+export { makePostPlayerItemsProvider } from './post-player-provider-generator';
+export { makeStreamsPlayerDataProvider } from './streams-player-provider-generator';

package/dist/media-center/media-center/providers/index.js

@@ -0,0 +1,2 @@
+export { makePostPlayerItemsProvider } from './post-player-provider-generator';
+export { makeStreamsPlayerDataProvider } from './streams-player-provider-generator';

package/dist/media-center/media-center/providers/post-player-provider-generator.d.ts

@@ -0,0 +1,8 @@
+import type { IMediaCenterConfig } from '../../config/types';
+import type { PostPlayerModel } from '../../../posts/posts-player/types';
+import type { IFeedPlayerDataProvider } from '../../../ui/player/providers';
+export declare const makePostPlayerItemsProvider: (data: {
+    config: IMediaCenterConfig;
+    categoryId?: string;
+    prefetchedItems?: PostPlayerModel[];
+}) => IFeedPlayerDataProvider<PostPlayerModel>;

package/dist/media-center/media-center/{post-player-provider-generator.js → providers/post-player-provider-generator.js}

@@ -1,6 +1,6 @@
-import { ContinuationToken } from '../../core/continuation-token';
-import { CursorDataLoader } from '../../core/data-loaders';
-import { PostType } from '../../core/enums';
+import { ContinuationToken } from '../../../core/continuation-token';
+import { CursorDataLoader } from '../../../core/data-loaders';
+import { PostType } from '../../../core/enums';
 export const makePostPlayerItemsProvider = (data) => {
     const { config, categoryId, prefetchedItems = [] } = data;
     const loader = new CursorDataLoader({

package/dist/media-center/media-center/{streams-player-provider-generator.d.ts → providers/streams-player-provider-generator.d.ts}

@@ -1,5 +1,5 @@
-import type { IStreamsPlayerDataProvider, StreamPlayerModel } from '../../streams/streams-player/types';
-import type { IMediaCenterConfig } from '../config/types';
+import type { IMediaCenterConfig } from '../../config/types';
+import type { IStreamsPlayerDataProvider, StreamPlayerModel } from '../../../streams/streams-player/types';
 export declare const makeStreamsPlayerDataProvider: (data: {
     config: IMediaCenterConfig;
     initialStreamId?: string;

package/dist/media-center/media-center/{streams-player-provider-generator.js → providers/streams-player-provider-generator.js}

@@ -1,5 +1,5 @@
-import { ContinuationToken } from '../../core/continuation-token';
-import { CursorDataLoader } from '../../core/data-loaders';
+import { ContinuationToken } from '../../../core/continuation-token';
+import { CursorDataLoader } from '../../../core/data-loaders';
 export const makeStreamsPlayerDataProvider = (data) => {
     const { config, categoryId, prefetchedStreams: initialPrefetchedStreams = [], initialStreamId } = data;
     const loader = new CursorDataLoader({

package/dist/media-center/media-center/streams-in-category/index.d.ts

@@ -0,0 +1,2 @@
+export { default as StreamsInCategoryPanel } from './streams-in-category-panel.svelte';
+export { StreamsInCategoryPanelHandler } from './streams-in-category-panel-handler.svelte';

package/dist/media-center/media-center/streams-in-category/index.js

@@ -0,0 +1,2 @@
+export { default as StreamsInCategoryPanel } from './streams-in-category-panel.svelte';
+export { StreamsInCategoryPanelHandler } from './streams-in-category-panel-handler.svelte';

package/dist/media-center/media-center/{streams-in-category-panel-handler.svelte.d.ts → streams-in-category/streams-in-category-panel-handler.svelte.d.ts}

@@ -1,6 +1,6 @@
-import type { IMediaCenterConfig } from '../../short-videos/short-videos-player';
-import type { StreamPlayerModel } from '../../streams/streams-player';
-import type { MediaCenterCategoryData } from './types';
+import type { IMediaCenterConfig } from '../../../short-videos/short-videos-player';
+import type { StreamPlayerModel } from '../../../streams/streams-player';
+import type { MediaCenterCategoryData } from '../types';
 export declare class StreamsInCategoryPanelHandler {
     private readonly config;
     private _activated;
@@ -15,6 +15,6 @@ export declare class StreamsInCategoryPanelHandler {
     get activated(): boolean;
     get active(): boolean;
     get loading(): boolean;
-    activate: (category: MediaCenterCategoryData) => Promise<void>;
+    activate: (categoryData: MediaCenterCategoryData | null) => Promise<void>;
     deactivate: () => void;
 }

package/dist/media-center/media-center/{streams-in-category-panel-handler.svelte.js → streams-in-category/streams-in-category-panel-handler.svelte.js}

@@ -26,16 +26,16 @@ export class StreamsInCategoryPanelHandler {
     get loading() {
         return this._activated && this._state === 'loading';
     }
-    activate = async (category) => {
-        if (!this.config) {
+    activate = async (categoryData) => {
+        if (!this.config || !categoryData) {
             return;
         }
         this._activated = true;
         this._state = 'loading';
         try {
-            const streamsResponse = await this.config.streamPlayer.getStreamsCursor({ filter: { categoryId: category.id }, limit: 5 });
-            this._categoryName = category.parentName ? `${category.parentName} - ${category.name}` : category.name;
-            this._categoryId = category.id;
+            const streamsResponse = await this.config.streamPlayer.getStreamsCursor({ filter: { categoryId: categoryData.id }, limit: 5 });
+            this._categoryName = categoryData.parentName ? `${categoryData.parentName} - ${categoryData.name}` : categoryData.name;
+            this._categoryId = categoryData.id;
             this._streams = streamsResponse.items;
         }
         finally {

package/dist/media-center/media-center/{streams-in-category-panel.svelte → streams-in-category/streams-in-category-panel.svelte}

@@ -1,4 +1,4 @@
-<script lang="ts">import { StreamCard } from '../../streams/stream-card';
+<script lang="ts">import { StreamCard } from '../../../streams/stream-card';
 import { StreamsInCategoryPanelHandler } from './streams-in-category-panel-handler.svelte';
 let { handler, on } = $props();
 </script>

package/dist/media-center/media-center/{streams-in-category-panel.svelte.d.ts → streams-in-category/streams-in-category-panel.svelte.d.ts}

@@ -1,4 +1,4 @@
-import type { StreamPlayerModel } from '../../streams/streams-player';
+import type { StreamPlayerModel } from '../../../streams/streams-player/types';
 import { StreamsInCategoryPanelHandler } from './streams-in-category-panel-handler.svelte';
 type Props = {
     handler: StreamsInCategoryPanelHandler;

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

@@ -1,4 +1,4 @@
-export type MediaCenterMode = 'stream' | 'posts';
+export type MediaCenterMode = 'streams-feed' | 'posts-feed' | 'discover';
 export type MediaCenterCategoryData = {
     id: string;
     name: string;

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

@@ -1,15 +1,16 @@
 import type { Snippet } from 'svelte';
 export type MediaCenterData = {
-    controlsPanel?: Snippet;
-    playerLogo: string | null;
+    header?: Snippet;
+    mobileFooter?: Snippet;
     overlayIsActive: boolean;
     callbacks: {
-        onHeaderHeightChanged: (data: {
-            height: number;
-        }) => void;
-        onExtraActionsForMobileControlsPanelDetermined: (actions: ExtraActionDefinition[]) => void;
+        onPlayerInitialized: (data: MediaCenterPlayerInitializedData) => void;
     };
 };
+export type MediaCenterPlayerInitializedData = {
+    extraActionsForMobilePanel: ExtraActionDefinition[];
+    closePlayerFn: (() => void) | null;
+};
 export type ExtraActionDefinition = {
     name: string;
     callback: () => void;

package/dist/posts/attachments/cmp.attachments.svelte

@@ -2,7 +2,7 @@
 import { AdCard } from '../../ads/ad-card';
 import { PostModel } from '../model';
 import { ProductCard } from '../../products/product-card';
-let { model, trackingParams: externalTrackingParams, locale = 'en', on } = $props();
+let { model, colors, trackingParams: externalTrackingParams, locale = 'en', on } = $props();
 const trackingParams = $derived.by(() => {
     if (externalTrackingParams || externalTrackingParams === false) {
         return externalTrackingParams;
@@ -15,11 +15,12 @@ const trackingParams = $derived.by(() => {
 </script>
 
 {#if model.attachments}
-  <div class="post-attachments">
+  <div class="post-attachments" data-theme="dark">
     {#if model.attachments.ads.length}
       {#each model.attachments.ads as ad (ad.id)}
         <AdCard
           ad={ad}
+          colors={colors}
           trackingParams={trackingParams}
           on={{
             click: on?.adClick,
@@ -32,6 +33,7 @@ const trackingParams = $derived.by(() => {
       {#each model.attachments.products as product (product.id)}
         <ProductCard
           product={product}
+          colors={colors}
           trackingParams={trackingParams}
           locale={locale}
           on={{
@@ -55,7 +57,7 @@ const trackingParams = $derived.by(() => {
   }
 }
 .post-attachments {
-  --_post-attachments--gap: var(--post-attachments--gap, 2.75rem);
+  --_post-attachments--gap: var(--post-attachments--gap, 1.875rem);
   display: flex;
   flex-direction: column;
   gap: var(--_post-attachments--gap);

package/dist/posts/attachments/cmp.attachments.svelte.d.ts

@@ -3,6 +3,12 @@ import type { TrackingParams } from '../../marketing-tracking';
 import { PostModel } from '../model';
 type Props = {
     model: PostModel;
+    colors: {
+        background?: string | null;
+        price?: string | null;
+        salePrice?: string | null;
+        buttonBackground?: string | null;
+    };
     trackingParams: TrackingParams | null;
     locale?: Locale;
     on?: {

package/dist/posts/controls/cmp.controls.svelte

@@ -16,7 +16,7 @@ import IconShare from '@fluentui/svg-icons/icons/share_28_regular.svg?raw';
 import IconShoppingBag from '@fluentui/svg-icons/icons/shopping_bag_28_regular.svg?raw';
 import IconSpeaker2 from '@fluentui/svg-icons/icons/speaker_2_28_regular.svg?raw';
 import IconSpeakerMute from '@fluentui/svg-icons/icons/speaker_mute_28_regular.svg?raw';
-let { model, socialInteractionsHandler, on } = $props();
+let { model, activeColor, inactiveColor, socialInteractionsHandler, on } = $props();
 const showSocialInteractions = $derived(!!socialInteractionsHandler && model.enableSocialInteractions);
 let isLikedStore = $state.raw({
     get isLiked() {
@@ -73,8 +73,8 @@ const refreshIsLiked = () => __awaiter(void 0, void 0, void 0, function* () {
 
 {#if actions.length > 0}
   {#if actions.length === 1}
-    <PlayerButton scaleEffect={true} icon={actions[0].icon} on={{ click: actions[0].callback }} />
+    <PlayerButton scaleEffect={true} activeColor={activeColor} inactiveColor={inactiveColor} icon={actions[0].icon} on={{ click: actions[0].callback }} />
   {:else}
-    <PlayerButtonsGroup scaleEffect={true} actions={actions} />
+    <PlayerButtonsGroup scaleEffect={true} borderColor={activeColor} backgroundColor={inactiveColor} actions={actions} />
   {/if}
 {/if}

package/dist/posts/controls/cmp.controls.svelte.d.ts

@@ -2,6 +2,8 @@ import type { PostModel } from '../model';
 import type { IPostSocialInteractionsHandler } from '../social-interactions';
 type Props = {
     model: PostModel;
+    activeColor: string | null;
+    inactiveColor: string | null;
     socialInteractionsHandler?: IPostSocialInteractionsHandler;
     on?: {
         attachmentsClicked?: () => void;

package/dist/posts/post-viewer/cmp.post-viewer.svelte

@@ -7,7 +7,7 @@ import { default as PostMedia } from './media/post-media.svelte';
 import { default as Texts } from './post-texts.svelte';
 import { PostViewerLocalization } from './post-viewer-localization';
 import { PostViewerUiManager } from './ui-manager.svelte';
-let { model, socialInteractionsHandler, trackingParams: externalTrackingParams, enableAttachments = true, enableControls = true, autoplay = 'on-appearance', locale = 'en', on } = $props();
+let { model, socialInteractionsHandler, trackingParams: externalTrackingParams, controlsColors = null, enableAttachments = true, enableControls = true, autoplay = 'on-appearance', locale = 'en', on } = $props();
 const localization = $derived(new PostViewerLocalization(locale));
 const uiManager = new PostViewerUiManager();
 $effect(() => {
@@ -81,6 +81,8 @@ const variables = $derived.by(() => {
     <div class="post-viewer__controls-panel" use:trackControlsPanelSize>
       <PostControls
         model={model}
+        activeColor={controlsColors?.active ?? null}
+        inactiveColor={controlsColors?.inactive ?? null}
         socialInteractionsHandler={socialInteractionsHandler}
         on={{ attachmentsClicked: () => (uiManager.canShowAttachments = !uiManager.canShowAttachments) }} />
     </div>

package/dist/posts/post-viewer/cmp.post-viewer.svelte.d.ts

@@ -8,6 +8,10 @@ type Props = {
     trackingParams: TrackingParams | null | false;
     enableAttachments?: boolean;
     enableControls?: boolean;
+    controlsColors: {
+        active: string | null;
+        inactive: string | null;
+    } | null;
     autoplay?: true | false | 'on-appearance';
     locale?: Locale;
     on?: {