@streamscloud/embeddable 15.0.2 → 15.1.0-1770736445096

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

@@ -11,16 +11,15 @@ import { initBufferFromProvider } from '../../ui/player/providers/service';
 import IconDelete from '@fluentui/svg-icons/icons/delete_32_regular.svg?raw';
 import IconEdit from '@fluentui/svg-icons/icons/edit_32_regular.svg?raw';
 import { untrack } from 'svelte';
-import { SvelteMap } from 'svelte/reactivity';
 let { dataProvider, socialInteractionsHandler, sharingHandler, playerSettings, analyticsHandler, managementActions, closeOrchestrator, on } = $props();
 let buffer = $state.raw(null);
-let mappedPostsCache = new SvelteMap();
+let mappedPostsCache = {};
 $effect(() => {
     void dataProvider;
     untrack(() => {
         contentPlayerConfig.playerBuffer = null;
         buffer = null;
-        mappedPostsCache = new SvelteMap();
+        mappedPostsCache = {};
         initBuffer(dataProvider);
     });
 });
@@ -92,11 +91,11 @@ const onAdImpression = (id) => {
     analyticsHandler?.trackAdImpression(id);
 };
 const itemAsPostModel = (item) => {
-    if (mappedPostsCache.has(item.id)) {
-        return mappedPostsCache.get(item.id);
+    if (mappedPostsCache[item.id]) {
+        return mappedPostsCache[item.id];
     }
     const postModel = new PostModel(item);
-    mappedPostsCache.set(item.id, postModel);
+    mappedPostsCache[item.id] = postModel;
     return postModel;
 };
 const currentItemActions = $derived.by(() => {
@@ -141,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={{
@@ -165,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/controls/stream-actions-generator.svelte.js

@@ -1,11 +1,10 @@
 import { PostActionsHandler } from '../../posts/controls';
 import IconShare from '@fluentui/svg-icons/icons/share_48_regular.svg?raw';
-import { SvelteMap } from 'svelte/reactivity';
 export class StreamActionsGenerator {
     postSocialInteractionsHandler;
     sharingHandler;
     callbacks;
-    handlers = new SvelteMap();
+    handlers = {};
     constructor(init) {
         this.postSocialInteractionsHandler = init.postSocialInteractionsHandler ?? null;
         this.sharingHandler = init.sharingHandler ?? null;
@@ -13,7 +12,7 @@ export class StreamActionsGenerator {
     }
     getPostActionsHandler = (data) => {
         const { model, streamId, streamPageId } = data;
-        let handler = this.handlers.get(streamPageId);
+        let handler = this.handlers[streamPageId];
         if (!handler) {
             handler = new PostActionsHandler({
                 post: model,
@@ -23,7 +22,7 @@ export class StreamActionsGenerator {
                     shareClicked: this.sharingHandler ? () => this.sharingHandler?.share(streamId) : undefined
                 }
             });
-            this.handlers.set(streamPageId, handler);
+            this.handlers[streamPageId] = handler;
         }
         return handler;
     };

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

@@ -14,11 +14,10 @@ import { StreamsPlayerBuffer } from './streams-player-buffer.svelte';
 import IconDelete from '@fluentui/svg-icons/icons/delete_32_regular.svg?raw';
 import IconEdit from '@fluentui/svg-icons/icons/edit_32_regular.svg?raw';
 import { untrack } from 'svelte';
-import { SvelteMap } from 'svelte/reactivity';
 let { dataProvider, analyticsHandler, postSocialInteractionsHandler, sharingHandler, amplificationParameters, managementActions, playerSettings, closeOrchestrator, on } = $props();
 const localization = $derived(new StreamPlayerLocalization(playerSettings?.locale ?? 'en'));
 let currentStreamModel = $state(null);
-let mappedPostsCache = new SvelteMap();
+let mappedPostsCache = {};
 let activePageId = $derived.by(() => buffer?.current?.id ?? '');
 let buffer = $state(null);
 let totalEngagementTimeSeconds = 0;
@@ -40,7 +39,7 @@ $effect(() => {
     untrack(() => {
         buffer = null;
         contentPlayerConfig.playerBuffer = null;
-        mappedPostsCache = new SvelteMap();
+        mappedPostsCache = {};
         initPlayerBuffer(dataProvider);
     });
     return () => { };
@@ -112,11 +111,11 @@ const itemAsPostModel = (item) => {
     if (item.type !== 'short-video' || !item.shortVideo) {
         return null;
     }
-    if (mappedPostsCache.has(item.shortVideo.id)) {
-        return mappedPostsCache.get(item.shortVideo.id);
+    if (mappedPostsCache[item.shortVideo.id]) {
+        return mappedPostsCache[item.shortVideo.id];
     }
     const postModel = new PostModel(mapToPostModel(item.shortVideo));
-    mappedPostsCache.set(item.shortVideo.id, postModel);
+    mappedPostsCache[item.shortVideo.id] = postModel;
     return postModel;
 };
 const handleChangePage = (index) => {
@@ -312,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={{
@@ -360,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 })
               : []
@@ -386,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;
 };