@streamscloud/embeddable 15.0.3 → 15.1.0-1770741228287

package/dist/posts/posts-player/posts-player-view.svelte

@@ -140,12 +140,6 @@ const currentItemActions = $derived.by(() => {
 
   <PostAttachments
     model={postModel}
-    colors={{
-      background: contentPlayerConfig.playerColors.cardBackground,
-      price: contentPlayerConfig.playerColors.price,
-      salePrice: contentPlayerConfig.playerColors.salePrice,
-      buttonBackground: contentPlayerConfig.playerColors.cardButton
-    }}
     trackingParams={false}
     locale={contentPlayerConfig.settings.locale}
     on={{
@@ -164,7 +158,6 @@ const currentItemActions = $derived.by(() => {
     {@const handler = postActionsGenerator.getPostActionsHandler(postModel)}
     <PostViewer
       model={postModel}
-      controlsColors={{ active: contentPlayerConfig.playerColors.button, inactive: contentPlayerConfig.playerColors.buttonInactive }}
       controlActions={handler.actions}
       trackingParams={false}
       enableAttachments={contentPlayerConfig.uiManager.showAttachmentsOverlay}

package/dist/posts/posts-player/types.d.ts

@@ -1,11 +1,9 @@
 import type { PostType } from '../../core/enums';
 import type { Locale } from '../../core/locale';
-import type { ThemeValue } from '../../core/theme';
 import type { IPostModel } from '..';
 import type { IPostSharingHandler } from '../sharing';
 import type { IPostSocialInteractionsHandler } from '../social-interactions';
 import type { ICloseOrchestrator } from '../../ui/player/close-orchestrator';
-import type { PlayerColors } from '../../ui/player/colors';
 import type { IPlayerBuffer, IPlayerDataProvider } from '../../ui/player/providers';
 export interface IPostAnalyticsHandler {
     trackPostOpened: (postType: PostType, postId: string) => void;
@@ -38,7 +36,6 @@ export type PostsPlayerProps = {
 export type PostPlayerSettings = {
     locale?: Locale;
     showStreamsCloudWatermark?: boolean;
-    playerColors?: Record<ThemeValue, PlayerColors>;
 };
 export type PostManagementActions = {
     editPost: ((id: string) => void) | null;

package/dist/products/product-card/cmp.product-card.svelte

@@ -4,7 +4,7 @@ import { Image } from '../../ui/image';
 import { LineClamp } from '../../ui/line-clamp';
 import { ProportionalContainer } from '../../ui/proportional-container';
 import { ProductCardLocalization } from './product-card-localization';
-let { product, colors, includeBeforeNowPrefix, trackingParams, inert = false, locale, on } = $props();
+let { product, includeBeforeNowPrefix, trackingParams, inert = false, locale, on } = $props();
 const localization = $derived(new ProductCardLocalization(locale));
 const shortDescriptionPresented = $derived(product.shortDescription && product.shortDescription.length > 0);
 const trackImpression = (node) => {
@@ -36,22 +36,9 @@ const onProductClicked = (event) => {
         window.open(enrichedLink, '_blank', 'noopener noreferrer');
     }
 };
-const styles = $derived.by(() => {
-    const values = [];
-    if (colors?.background) {
-        values.push(`--product-card--background-color: ${colors.background}`);
-    }
-    if (colors?.price) {
-        values.push(`--product-card--price-color: ${colors.price}`);
-    }
-    if (colors?.salePrice) {
-        values.push(`--product-card--sale-price-color: ${colors.salePrice}`);
-    }
-    return values.join(';');
-});
 </script>
 
-<div class="product-card" inert={inert} use:trackImpression style={styles}>
+<div class="product-card" inert={inert} use:trackImpression>
   <ProportionalContainer ratio={1}>
     <Image src={product.image} />
   </ProportionalContainer>
@@ -102,8 +89,8 @@ const styles = $derived.by(() => {
 .product-card {
   --_product-card--aspect-ratio: var(--product-card--aspect-ratio, 10/16);
   --_product-card--border-radius: var(--product-card--border-radius, 0.5rem);
-  --_product-card--background-color: var(--product-card--background-color, rgb(from var(--sc-mc-color--bg-card) r g b/90%));
-  --_product-card--border-color: var(--product-card--background-color, var(--sc-mc-color--border-card));
+  --_product-card--background-color: var(--product-card--background-color, rgb(from light-dark(#ffffff, #000000) r g b / 90%));
+  --_product-card--border-color: var(--product-card--border-color, light-dark(#f2f2f2, #000000));
   --_product-card--price-color: var(--product-card--price-color, inherit);
   --_product-card--sale-price-color: var(--product-card--sale-price-color, inherit);
   --product-price-color: var(--_product-card--price-color);

package/dist/products/product-card/cmp.product-card.svelte.d.ts

@@ -3,11 +3,6 @@ import { type TrackingParams } from '../../marketing-tracking';
 import type { ProductCardModel } from './types';
 type Props = {
     product: ProductCardModel;
-    colors: {
-        background?: string | null;
-        price?: string | null;
-        salePrice?: string | null;
-    };
     locale: Locale;
     includeBeforeNowPrefix?: boolean;
     inert?: boolean;

package/dist/streams/layout/element-views/cmp.short-video-stream-element.svelte

@@ -2,13 +2,12 @@
 import { PostViewer } from '../../../posts/post-viewer';
 import { ShortVideoStreamElementLocalization } from './short-video-stream-element-localization';
 import { mapToPostModel } from '../models';
-let { data, trackingParams, locale, controlsColors = null, on } = $props();
+let { data, trackingParams, locale, on } = $props();
 const localization = $derived(new ShortVideoStreamElementLocalization(locale));
 </script>
 
 <PostViewer
   model={new PostModel(mapToPostModel(data))}
-  controlsColors={controlsColors}
   trackingParams={trackingParams ? { streamId: trackingParams.streamId, campaignId: trackingParams.campaignId } : false}
   autoplay={false}
   enableControls={false}

package/dist/streams/layout/element-views/cmp.short-video-stream-element.svelte.d.ts

@@ -5,10 +5,6 @@ type Props = {
     data: StreamLayoutShortVideoModel;
     trackingParams: StreamTrackingParams;
     locale: Locale;
-    controlsColors?: {
-        active: string | null;
-        inactive: string | null;
-    } | null;
     on?: {
         progress?: (progress: number) => void;
     };

package/dist/streams/stream-page-viewer/cmp.stream-page-viewer.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">import { StreamLayoutSlot, StreamPageLayout, StreamLayoutSlotContent } from '../layout';
-import { ResponsivePlayerButtonsGroup } from '../../ui/player/button';
+import { ResponsivePlayerButtons } from '../../ui/player/button';
 import { StreamPageViewerLocalization } from './stream-page-viewer-localization';
 let { page, trackingParams, overlayControls, locale, on, overlay } = $props();
 const localization = $derived(new StreamPageViewerLocalization(locale));
@@ -15,11 +15,7 @@ const localization = $derived(new StreamPageViewerLocalization(locale));
     {#snippet controls()}
       {#if overlayControls?.enabled && overlayControls.actions.length}
         <div class="controls-panel">
-          <ResponsivePlayerButtonsGroup
-            actions={overlayControls.actions}
-            activeColor={overlayControls.colors?.active ?? null}
-            backgroundColor={overlayControls.colors?.inactive ?? null}
-            scaleEffect={true} />
+          <ResponsivePlayerButtons actions={overlayControls.actions} scaleEffect={true} />
         </div>
       {/if}
     {/snippet}
@@ -38,6 +34,8 @@ const localization = $derived(new StreamPageViewerLocalization(locale));
   }
 }
 .controls-panel {
+  --player-button--color: var(--sc-player--button);
+  --player-button--color--inactive: var(--sc-player--button-inactive);
   position: absolute;
   left: auto;
   right: 0;

package/dist/streams/stream-page-viewer/cmp.stream-page-viewer.svelte.d.ts

@@ -9,10 +9,6 @@ type Props = {
     locale: Locale;
     overlayControls?: {
         enabled: boolean;
-        colors: {
-            active: string | null;
-            inactive: string | null;
-        } | null;
         actions: PlayerButtonDef[];
     };
     on?: {

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

@@ -1,22 +1,14 @@
-<script lang="ts">import { Theme } from '../../core/theme';
-import {} from '../../ui/player/close-orchestrator';
+<script lang="ts">import {} from '../../ui/player/close-orchestrator';
 import { ShadowRoot } from '../../ui/shadow-dom';
 import { default as StreamsPlayerView } from './streams-player-view.svelte';
-import { untrack } from 'svelte';
 let { dataProvider, postSocialInteractionsHandler, sharingHandler, amplificationParameters, closeOrchestrator, playerSettings, analyticsHandler, on } = $props();
 let backgroundImageUrl = $state(null);
 const handleBackgroundImagedLoaded = (url) => {
     backgroundImageUrl = url;
 };
-$effect(() => {
-    void playerSettings?.theme;
-    untrack(() => {
-        Theme.set(playerSettings?.theme ?? 'dark');
-    });
-});
 </script>
 
-<ShadowRoot backgroundDisabled={playerSettings?.disableBackground === true} backgroundImageUrl={backgroundImageUrl}>
+<ShadowRoot theme={playerSettings?.theme ?? 'dark'} backgroundDisabled={playerSettings?.disableBackground === true} backgroundImageUrl={backgroundImageUrl}>
   <StreamsPlayerView
     dataProvider={{ type: 'provider', provider: dataProvider }}
     postSocialInteractionsHandler={postSocialInteractionsHandler}

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

@@ -311,12 +311,6 @@ const stopActivityTracking = () => {
   {#if postModel}
     <PostAttachments
       model={postModel}
-      colors={{
-        background: contentPlayerConfig.playerColors.cardBackground,
-        price: contentPlayerConfig.playerColors.price,
-        salePrice: contentPlayerConfig.playerColors.salePrice,
-        buttonBackground: contentPlayerConfig.playerColors.cardButton
-      }}
       trackingParams={trackingParams}
       locale={contentPlayerConfig.settings.locale}
       on={{
@@ -359,10 +353,6 @@ const stopActivityTracking = () => {
           locale={localization.locale}
           overlayControls={{
             enabled: contentPlayerConfig.uiManager.showControlsOverlay,
-            colors: {
-              active: contentPlayerConfig.playerColors.button,
-              inactive: contentPlayerConfig.playerColors.buttonInactive
-            },
             actions: buffer?.activeChunk
               ? streamActionsGenerator.getGeneralStreamPageActions({ streamId: buffer.activeChunk.model.id, streamPageId: item.id })
               : []
@@ -385,7 +375,6 @@ const stopActivityTracking = () => {
             : null}
           <PostViewer
             model={postModel}
-            controlsColors={{ active: contentPlayerConfig.playerColors.button, inactive: contentPlayerConfig.playerColors.buttonInactive }}
             trackingParams={trackingParams}
             enableAttachments={contentPlayerConfig.uiManager.showAttachmentsOverlay}
             enableControls={contentPlayerConfig.uiManager.showControlsOverlay}

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

@@ -1,10 +1,8 @@
 import type { Locale } from '../../core/locale';
-import type { ThemeValue } from '../../core/theme';
 import type { IPostSocialInteractionsHandler } from '../../posts/social-interactions';
 import type { IStreamSharingHandler } from '../sharing';
 import type { StreamPageViewerModel } from '../stream-page-viewer';
 import type { ICloseOrchestrator } from '../../ui/player/close-orchestrator';
-import type { PlayerColors } from '../../ui/player/colors';
 import type { StreamsPlayerBuffer } from './streams-player-buffer.svelte';
 export type StreamPlayerModel = {
     id: string;
@@ -47,7 +45,6 @@ export type StreamsPlayerProps = {
 export type StreamsPlayerSettings = {
     locale?: Locale;
     showStreamsCloudWatermark?: boolean;
-    playerColors?: Record<ThemeValue, PlayerColors>;
     overlayMinOffsetTop?: number;
 };
 export type StreamAmplificationParameters = {

package/dist/ui/button/resources/button-theme.svelte

@@ -23,33 +23,16 @@ let { style = undefined, size = ButtonSize.Standard, children } = $props();
   {@render children()}
 </div>
 
-<style>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.button-theme {
+<style>.button-theme {
   display: contents;
 }
 .button-theme--standard {
   --button--font--color: var(--sc-mc-color--text-primary);
   --button--background: var(--sc-mc-color--bg-button);
-  --button--background--hover: #f9fafb;
-  --button--background--active: #f2f2f3;
-  --button--background--disabled: #f2f2f3;
-  --button--border: 1px solid #e5e7eb;
-}
-:global([data-theme='dark']) .button-theme--standard {
-  --button--background--hover: #1f2937;
-  --button--background--active: #374151;
-  --button--background--disabled: #374151;
-  --button--border: 1px solid #4b5563;
+  --button--background--hover: light-dark(#f9fafb, #1f2937);
+  --button--background--active: light-dark(#f2f2f3, #374151);
+  --button--background--disabled: light-dark(#f2f2f3, #374151);
+  --button--border: 1px solid light-dark(#e5e7eb, #4b5563);
 }
 .button-theme {
   /*Size*/

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

@@ -72,8 +72,4 @@ let { src, color = null } = $props();
 .icon :global(path) {
   stroke: var(--_icon--stroke-color, var(--_icon--color));
   stroke-width: var(--_icon--stroke-width);
-}
-:global([data-theme='dark']) .icon :global(path) {
-  stroke: var(--_icon--stroke-color, var(--_icon--color));
-  stroke-width: var(--_icon--stroke-width);
 }</style>

package/dist/ui/player/button/{cmp.mobile-player-buttons-group.svelte → cmp.mobile-player-buttons.svelte}

@@ -2,35 +2,24 @@
 let { actions } = $props();
 </script>
 
-<div class="mobile-player-buttons-group">
+<div class="mobile-player-buttons">
   {#each actions as action (action.icon)}
-    <button type="button" class="mobile-player-buttons-group__action" onclick={action.callback}>
-      <span class="mobile-player-buttons-group__action-icon">
+    <button type="button" class="mobile-player-buttons__action" disabled={action.disabled} onclick={action.callback}>
+      <span class="mobile-player-buttons__action-icon">
         <Icon src={action.icon} color={action.iconColor} />
       </span>
     </button>
   {/each}
 </div>
 
-<style>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.mobile-player-buttons-group {
+<style>.mobile-player-buttons {
   cursor: pointer;
   display: flex;
   flex-direction: column;
   justify-content: center;
   pointer-events: auto;
 }
-.mobile-player-buttons-group__action {
+.mobile-player-buttons__action {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -39,6 +28,10 @@ let { actions } = $props();
   --icon--size: 2rem;
   --icon--filter: var(--sc-mc-color--icon-overlay-shadow);
 }
-.mobile-player-buttons-group__action-icon {
+.mobile-player-buttons__action:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+.mobile-player-buttons__action-icon {
   display: block;
 }</style>

package/dist/ui/player/button/cmp.player-buttons.svelte

@@ -0,0 +1,127 @@
+<script lang="ts">import { Icon } from '../../icon';
+let { actions, scaleEffect = false, zoom = 1 } = $props();
+</script>
+
+{#if actions.length === 1}
+  {@const action = actions[0]}
+  <button
+    type="button"
+    class="player-button"
+    style:zoom={zoom}
+    class:player-button--scale-effect={scaleEffect}
+    disabled={action.disabled}
+    onclick={action.callback}>
+    <span class="player-button__icon">
+      <Icon src={action.icon} color={action.iconColor} />
+    </span>
+  </button>
+{:else if actions.length > 1}
+  <div class="player-buttons" style:zoom={zoom}>
+    {#each actions as action (action.icon)}
+      <button
+        type="button"
+        class="player-buttons__action"
+        class:player-buttons__action--scale-effect={scaleEffect}
+        disabled={action.disabled}
+        onclick={action.callback}>
+        <span class="player-buttons__action-icon">
+          <Icon src={action.icon} color={action.iconColor} />
+        </span>
+      </button>
+    {/each}
+  </div>
+{/if}
+
+<style>.player-button {
+  --_player-button--color: var(--player-button--color, rgb(from light-dark(#272727, #000000) r g b / 95%));
+  --_player-button--color--inactive: var(--player-button--color--inactive, rgb(from var(--_player-button--color) r g b / 60%));
+  --_player-button--icon-scale: 1;
+  pointer-events: auto;
+  padding: 0.625rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--_player-button--color--inactive);
+  transition: background-color 0.5s;
+  border-radius: 50%;
+  color: var(--sc-mc-color--text-white);
+  --icon--color: var(--sc-mc-color--icon-overlay);
+  --icon--size: 1.75rem;
+}
+.player-button:hover:not(:disabled) {
+  background-color: var(--_player-button--color);
+}
+.player-button:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+.player-button--scale-effect:hover:not(:disabled) {
+  --_player-button--icon-scale: 1.2;
+}
+.player-button__icon {
+  display: block;
+  transform: scale(var(--_player-button--icon-scale));
+  transition: 0.3s;
+}
+.player-button {
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 576px) {
+  .player-button {
+    padding: 0.5rem;
+    --icon--size: 1.5rem;
+  }
+}
+
+.player-buttons {
+  --_player-button--color: var(--player-button--color, rgb(from light-dark(#272727, #000000) r g b / 95%));
+  --_player-button--color--inactive: var(--player-button--color--inactive, rgb(from var(--_player-button--color) r g b / 60%));
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  border-radius: 1.25rem;
+  background: var(--_player-button--color--inactive);
+  padding: 0.4375rem 0.0625rem;
+  pointer-events: auto;
+}
+.player-buttons__action {
+  --_player-button--icon-scale: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0.5625rem;
+  border-radius: 1.25rem;
+  color: var(--sc-mc-color--text-white);
+  --icon--color: var(--sc-mc-color--icon-overlay);
+  --icon--size: 1.75rem;
+  transition: background-color 0.5s;
+}
+.player-buttons__action:hover:not(:disabled) {
+  background-color: var(--_player-button--color);
+}
+.player-buttons__action:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+.player-buttons__action--scale-effect:hover:not(:disabled) {
+  --_player-button--icon-scale: 1.2;
+  background-color: transparent;
+}
+.player-buttons__action-icon {
+  display: block;
+  transform: scale(var(--_player-button--icon-scale));
+  transition: 0.3s;
+}
+.player-buttons {
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 576px) {
+  .player-buttons {
+    border-radius: 0.9375rem;
+    padding: 0.25rem 0.0625rem;
+  }
+  .player-buttons__action {
+    --icon--size: 1.5rem;
+  }
+}</style>

package/dist/ui/player/button/{cmp.player-buttons-group.svelte.d.ts → cmp.player-buttons.svelte.d.ts}

@@ -1,9 +1,8 @@
 import type { PlayerButtonDef } from './types';
 type Props = {
-    activeColor: string | null;
-    backgroundColor: string | null;
     actions: PlayerButtonDef[];
     scaleEffect?: boolean;
+    zoom?: number;
 };
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

package/dist/ui/player/button/cmp.responsive-player-buttons.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">import { default as MobilePlayerButtons } from './cmp.mobile-player-buttons.svelte';
+import { default as PlayerButtons } from './cmp.player-buttons.svelte';
+let { scaleEffect = false, actions } = $props();
+</script>
+
+<div class="desktop-controls">
+  <PlayerButtons actions={actions} scaleEffect={scaleEffect} />
+</div>
+
+<div class="mobile-controls">
+  <MobilePlayerButtons actions={actions} />
+</div>
+
+<style>.desktop-controls {
+  display: contents;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 576px) {
+  .desktop-controls {
+    display: none;
+  }
+}
+
+.mobile-controls {
+  display: none;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 576px) {
+  .mobile-controls {
+    display: contents;
+  }
+}</style>

package/dist/ui/player/button/{cmp.responsive-player-buttons-group.svelte.d.ts → cmp.responsive-player-buttons.svelte.d.ts}

@@ -1,7 +1,5 @@
-import { type PlayerButtonDef } from './';
+import type { PlayerButtonDef } from './types';
 type Props = {
-    activeColor: string | null;
-    backgroundColor: string | null;
     actions: PlayerButtonDef[];
     scaleEffect?: boolean;
 };

package/dist/ui/player/button/index.d.ts

@@ -1,5 +1,4 @@
-export { default as PlayerButton } from './cmp.player-button.svelte';
-export { default as PlayerButtonsGroup } from './cmp.player-buttons-group.svelte';
-export { default as MobilePlayerButtonsGroup } from './cmp.mobile-player-buttons-group.svelte';
-export { default as ResponsivePlayerButtonsGroup } from './cmp.responsive-player-buttons-group.svelte';
+export { default as PlayerButtons } from './cmp.player-buttons.svelte';
+export { default as MobilePlayerButtons } from './cmp.mobile-player-buttons.svelte';
+export { default as ResponsivePlayerButtons } from './cmp.responsive-player-buttons.svelte';
 export type { PlayerButtonDef } from './types';

package/dist/ui/player/button/index.js

@@ -1,4 +1,3 @@
-export { default as PlayerButton } from './cmp.player-button.svelte';
-export { default as PlayerButtonsGroup } from './cmp.player-buttons-group.svelte';
-export { default as MobilePlayerButtonsGroup } from './cmp.mobile-player-buttons-group.svelte';
-export { default as ResponsivePlayerButtonsGroup } from './cmp.responsive-player-buttons-group.svelte';
+export { default as PlayerButtons } from './cmp.player-buttons.svelte';
+export { default as MobilePlayerButtons } from './cmp.mobile-player-buttons.svelte';
+export { default as ResponsivePlayerButtons } from './cmp.responsive-player-buttons.svelte';

package/dist/ui/player/button/types.d.ts

@@ -3,4 +3,5 @@ export type PlayerButtonDef = {
     icon: string;
     iconColor?: IconColor;
     callback: () => void;
+    disabled?: boolean;
 };

package/dist/ui/player/player/cmp.player.svelte

@@ -121,7 +121,7 @@ const handleSliderMounted = (node) => {
         {/snippet}
       </PlayerSlider>
       {#if overviewPanelContent && config.playerBuffer.loaded.length > 0}
-        <OverviewPanel config={config} position={overviewPosition} uiManager={uiManager}>
+        <OverviewPanel position={overviewPosition} uiManager={uiManager}>
           {@render overviewPanelContent()}
         </OverviewPanel>
       {/if}

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

@@ -1,5 +1,5 @@
 <script lang="ts" generics="T extends { id: string }">import { slideHorizontally } from '../../../core/transitions';
-import { PlayerButton, ResponsivePlayerButtonsGroup } from '../button';
+import { PlayerButtons, ResponsivePlayerButtons } from '../button';
 import { PlayerConfig } from './player-config.svelte.js';
 import IconCalendarWeekNumbers from '@fluentui/svg-icons/icons/calendar_week_numbers_24_regular.svg?raw';
 import IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_28_regular.svg?raw';
@@ -62,30 +62,18 @@ const variables = $derived.by(() => {
   <div class="controls-and-attachments" style={variables}>
     <div class="controls-and-attachments__spacer">&nbsp;</div>
     <div class="controls-and-attachments__left">
-      <ResponsivePlayerButtonsGroup
-        actions={allActions}
-        scaleEffect={true}
-        activeColor={config.playerColors.button}
-        backgroundColor={config.playerColors.buttonInactive} />
+      <ResponsivePlayerButtons actions={allActions} scaleEffect={true} />
 
       {#if config.playerBuffer}
         <div
           class="controls-and-attachments__navigation-buttons"
           class:controls-and-attachments__navigation-buttons--invisible={config.playerBuffer.loaded.length <= 1}>
-          <PlayerButton
-            icon={IconChevronUp}
-            activeColor={config.playerColors.button}
-            inactiveColor={config.playerColors.buttonInactive}
-            disabled={!config.playerBuffer.canLoadPrevious}
-            scaleEffect={true}
-            on={{ click: config.playerBuffer.loadPrevious }} />
-          <PlayerButton
-            icon={IconChevronDown}
-            activeColor={config.playerColors.button}
-            inactiveColor={config.playerColors.buttonInactive}
-            disabled={!config.playerBuffer.canLoadNext}
-            scaleEffect={true}
-            on={{ click: config.playerBuffer.loadNext }} />
+          <PlayerButtons
+            actions={[{ icon: IconChevronUp, callback: config.playerBuffer.loadPrevious, disabled: !config.playerBuffer.canLoadPrevious }]}
+            scaleEffect={true} />
+          <PlayerButtons
+            actions={[{ icon: IconChevronDown, callback: config.playerBuffer.loadNext, disabled: !config.playerBuffer.canLoadNext }]}
+            scaleEffect={true} />
         </div>
       {/if}
     </div>
@@ -104,12 +92,7 @@ const variables = $derived.by(() => {
 
 {#if showCloseButton}
   <div class="close-button" use:handleCloseButtonMounted>
-    <PlayerButton
-      icon={IconDismiss}
-      zoom={0.8}
-      activeColor={config.playerColors.button ?? null}
-      inactiveColor={config.playerColors.buttonInactive ?? null}
-      on={{ click: config.closeOrchestrator.requestClose }} />
+    <PlayerButtons actions={[{ icon: IconDismiss, callback: config.closeOrchestrator.requestClose }]} zoom={0.8} />
   </div>
 {/if}
 
@@ -125,6 +108,8 @@ const variables = $derived.by(() => {
   }
 }
 .controls-and-attachments {
+  --player-button--color: var(--sc-player--button);
+  --player-button--color--inactive: var(--sc-player--button-inactive);
   position: absolute;
   top: 0;
   right: 0;
@@ -175,6 +160,8 @@ const variables = $derived.by(() => {
 }
 
 .close-button {
+  --player-button--color: var(--sc-player--button);
+  --player-button--color--inactive: var(--sc-player--button-inactive);
   position: absolute;
   top: 0;
   right: 0;