@streamscloud/embeddable 11.0.0 → 12.1.0

package/dist/streams/streams-player/index.js

@@ -2,9 +2,11 @@ import { toastrWarning } from '../../core/toastr';
 import { InternalMediaCenterConfig } from '../../media-center/config/internal-media-center-config';
 import {} from '../../media-center/config/types';
 import { MediaCenter } from '../../media-center/media-center';
+import { CloseOrchestrator } from '../../ui/player/close-orchestrator';
 import { ModalShadowHost } from '../../ui/shadow-dom';
 import { InternalStreamAnalyticsHandler } from './internal-stream-analytics-handler';
 import { InternalStreamsPlayerDataProvider } from './internal-streams-player-data-provider';
+import { default as StreamsPlayerView } from './streams-player-view.svelte';
 import { mount, unmount } from 'svelte';
 export {};
 export { mapToStreamPlayerModel } from '../data-loaders/mapper';
@@ -20,7 +22,7 @@ export function openStreamsPlayer(init) {
     }
     let mediaCenterConfig = init.mediaCenterConfig;
     if (!mediaCenterConfig && init.mediaPageId) {
-        mediaCenterConfig = new InternalMediaCenterConfig(init.mediaPageId, graphqlOrigin);
+        mediaCenterConfig = new InternalMediaCenterConfig({ mediaPageId: init.mediaPageId, graphqlOrigin, initiator });
     }
     let analyticsHandler = init.analyticsHandler;
     if (!analyticsHandler && !init.dataProvider) {
@@ -28,35 +30,58 @@ export function openStreamsPlayer(init) {
         analyticsHandler = new InternalStreamAnalyticsHandler(graphqlOrigin);
     }
     const shadowHost = new ModalShadowHost();
-    const mounted = mount(MediaCenter, {
-        target: shadowHost.shadowRoot,
-        props: {
-            config: mediaCenterConfig || null,
-            playerProps: {
-                mode: 'streams',
-                props: {
-                    dataProvider,
-                    analyticsHandler,
-                    amplificationParameters,
-                    playerSettings,
-                    postSocialInteractionsHandler,
-                    on: {
-                        streamActivated: (data) => {
+    let mounted;
+    const makeCloseOrchestrator = () => new CloseOrchestrator({
+        closeFn: async () => {
+            await unmount(mounted);
+            shadowHost.remove();
+            if (on?.playerClosed) {
+                on.playerClosed();
+            }
+        },
+        canClose: !playerSettings?.hideCloseButton
+    });
+    if (mediaCenterConfig) {
+        mounted = mount(MediaCenter, {
+            target: shadowHost.shadowRoot,
+            props: {
+                config: mediaCenterConfig,
+                settings: playerSettings,
+                modeProps: {
+                    mode: 'streams',
+                    props: {
+                        dataProvider,
+                        amplificationParameters,
+                        onStreamActivated: (data) => {
                             if (init.on?.streamActivated) {
                                 init.on.streamActivated({ title: data.title, image: data.image });
                             }
-                        },
-                        playerClosed: async () => {
-                            await unmount(mounted);
-                            shadowHost.remove();
-                            if (on?.playerClosed) {
-                                on.playerClosed();
-                            }
+                        }
+                    }
+                },
+                closeOrchestrator: makeCloseOrchestrator()
+            }
+        });
+    }
+    else {
+        mounted = mount(StreamsPlayerView, {
+            target: shadowHost.shadowRoot,
+            props: {
+                dataProvider: { type: 'provider', provider: dataProvider },
+                analyticsHandler,
+                amplificationParameters,
+                playerSettings,
+                postSocialInteractionsHandler,
+                closeOrchestrator: makeCloseOrchestrator(),
+                on: {
+                    streamActivated: (data) => {
+                        if (init.on?.streamActivated) {
+                            init.on.streamActivated({ title: data.title, image: data.image });
                         }
                     }
                 }
             }
-        }
-    });
+        });
+    }
     shadowHost.attachToBody();
 }

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

@@ -42,7 +42,7 @@ let { buffer, activePageId, on } = $props();
   overflow-y: auto;
   overscroll-behavior: contain;
   padding-block: 0.9375rem 0;
-  padding-inline: 0.9375rem 1.3125rem;
+  padding-inline: 0.9375rem;
   --_cross-browser-scrollbar--thumb-color: transparent;
   --_cross-browser-scrollbar--track-color: transparent;
 }

package/dist/streams/streams-player/streams-player-buffer.svelte.d.ts

@@ -2,7 +2,5 @@ import type { StreamPageViewerModel } from '../stream-page-viewer';
 import { DefaultChunksPlayerBuffer } from '../../ui/player/providers';
 import type { IStreamsPlayerDataProvider, StreamPlayerModel } from './types';
 export declare class StreamsPlayerBuffer extends DefaultChunksPlayerBuffer<StreamPageViewerModel, StreamPlayerModel> {
-    constructor(provider: IStreamsPlayerDataProvider, on?: {
-        preloaded?: (self: StreamsPlayerBuffer) => void;
-    });
+    constructor(provider: IStreamsPlayerDataProvider);
 }

package/dist/streams/streams-player/streams-player-buffer.svelte.js

@@ -1,6 +1,6 @@
 import { DefaultChunksPlayerBuffer } from '../../ui/player/providers';
 export class StreamsPlayerBuffer extends DefaultChunksPlayerBuffer {
-    constructor(provider, on) {
+    constructor(provider) {
         super({
             kind: 'chunks',
             initialData: {
@@ -10,6 +10,6 @@ export class StreamsPlayerBuffer extends DefaultChunksPlayerBuffer {
                 return await provider.loadMoreStreams();
             },
             loadChunkItems: provider.getStreamPages
-        }, on);
+        });
     }
 }

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

@@ -17,7 +17,7 @@ import { default as Overview } from './stream-overview.svelte';
 import { StreamPlayerLocalization } from './stream-player-localization';
 import { StreamsPlayerBuffer } from './streams-player-buffer.svelte';
 import { untrack } from 'svelte';
-let { dataProvider, analyticsHandler, postSocialInteractionsHandler, amplificationParameters, playerSettings, on, mediaCenterData } = $props();
+let { dataProvider, analyticsHandler, postSocialInteractionsHandler, amplificationParameters, playerSettings, closeOrchestrator, on } = $props();
 const localization = $derived(new StreamPlayerLocalization((_a = playerSettings === null || playerSettings === void 0 ? void 0 : playerSettings.locale) !== null && _a !== void 0 ? _a : 'en'));
 let currentStreamModel = $state(null);
 let activePageId = $derived.by(() => { var _a, _b; return (_b = (_a = buffer === null || buffer === void 0 ? void 0 : buffer.current) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : ''; });
@@ -33,11 +33,10 @@ $effect(() => {
     untrack(() => {
         buffer = null;
         contentPlayerConfig.playerBuffer = null;
-        initPlayerBuffer();
+        initPlayerBuffer(dataProvider);
     });
     return () => { };
 });
-$effect(() => contentPlayerConfig.updateMediaCenterData(mediaCenterData));
 $effect(() => contentPlayerConfig.updateTrackingParams(currentStreamModel
     ? {
         streamId: currentStreamModel.id,
@@ -45,7 +44,8 @@ $effect(() => contentPlayerConfig.updateTrackingParams(currentStreamModel
     }
     : null));
 $effect(() => {
-    const stream = buffer === null || buffer === void 0 ? void 0 : buffer.activeChunk.model;
+    var _a;
+    const stream = (_a = buffer === null || buffer === void 0 ? void 0 : buffer.activeChunk) === null || _a === void 0 ? void 0 : _a.model;
     untrack(() => {
         var _a;
         if (stream) {
@@ -77,20 +77,23 @@ const streamTrackingParams = $derived.by(() => {
         }
         : false;
 });
-const initPlayerBuffer = () => __awaiter(void 0, void 0, void 0, function* () {
-    new StreamsPlayerBuffer(dataProvider, {
-        preloaded: (instance) => __awaiter(void 0, void 0, void 0, function* () {
-            if (instance.loaded.length) {
-                const coverUrl = instance.loaded[0].cover;
-                if (coverUrl) {
-                    yield preloadImage(coverUrl);
-                }
-                contentPlayerConfig.setBackgroundImageUrl(coverUrl);
-            }
-            buffer = instance;
-            contentPlayerConfig.playerBuffer = instance;
-        })
-    });
+const initPlayerBuffer = (dataProvider) => __awaiter(void 0, void 0, void 0, function* () {
+    let newBuffer;
+    if (dataProvider.type === 'buffer') {
+        newBuffer = dataProvider.buffer;
+    }
+    else {
+        newBuffer = new StreamsPlayerBuffer(dataProvider.provider);
+    }
+    if (newBuffer.loaded.length && (on === null || on === void 0 ? void 0 : on.backgroundImageLoaded)) {
+        const coverUrl = newBuffer.loaded[0].cover;
+        if (coverUrl) {
+            yield preloadImage(coverUrl);
+        }
+        on.backgroundImageLoaded(coverUrl);
+    }
+    buffer = newBuffer;
+    contentPlayerConfig.playerBuffer = newBuffer;
 });
 const contentPlayerConfig = new ContentPlayerConfig({
     playerBuffer: null,
@@ -103,10 +106,9 @@ const contentPlayerConfig = new ContentPlayerConfig({
         }
     },
     socialInteractionsHandler: postSocialInteractionsHandler,
-    mediaCenterData,
     settings: new ContentPlayerSettings(playerSettings),
+    closeOrchestrator,
     callbacks: {
-        close: on === null || on === void 0 ? void 0 : on.playerClosed,
         videoProgress: (pageId, videoId, progress) => {
             onProgress(pageId, videoId, progress);
         },
@@ -144,7 +146,9 @@ const onPageActivated = (id) => {
         return;
     }
     const page = activeChunk.items.find((x) => x.id === id);
-    contentPlayerConfig.setBackgroundImageUrl((page === null || page === void 0 ? void 0 : page.cover) || null);
+    if (on === null || on === void 0 ? void 0 : on.backgroundImageLoaded) {
+        on.backgroundImageLoaded((page === null || page === void 0 ? void 0 : page.cover) || null);
+    }
     if (page) {
         analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackStreamPageView(id, activeChunk.model.id);
         if (page.type === 'short-video' && page.shortVideo) {

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

@@ -1,8 +1,4 @@
-import type { MediaCenterData } from '../../media-center/model/types';
 import type { StreamsPlayerProps } from './types';
-type $$ComponentProps = StreamsPlayerProps & {
-    mediaCenterData?: MediaCenterData;
-};
-declare const StreamsPlayerView: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const StreamsPlayerView: import("svelte").Component<StreamsPlayerProps, {}, "">;
 type StreamsPlayerView = ReturnType<typeof StreamsPlayerView>;
 export default StreamsPlayerView;

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

@@ -1,6 +1,9 @@
-import type { IContentPlayerSettingsInitializer } from '../../content-player/content-player-settings';
+import type { Locale } from '../../core/locale';
 import type { IPostSocialInteractionsHandler } from '../../posts/social-interactions';
 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;
     title: string;
@@ -12,20 +15,31 @@ export type StreamPlayerModel = {
     pagesCount: number;
 };
 export type StreamsPlayerProps = {
-    dataProvider: IStreamsPlayerDataProvider;
+    dataProvider: {
+        type: 'buffer';
+        buffer: StreamsPlayerBuffer;
+    } | {
+        type: 'provider';
+        provider: IStreamsPlayerDataProvider;
+    };
     postSocialInteractionsHandler?: IPostSocialInteractionsHandler;
     analyticsHandler?: IStreamAnalyticsHandler;
     amplificationParameters?: StreamAmplificationParameters;
     playerSettings?: StreamsPlayerSettings;
+    closeOrchestrator: ICloseOrchestrator;
     on?: {
         streamActivated?: (data: {
             title: string;
             image: string | null;
         }) => void;
-        playerClosed?: () => void;
+        backgroundImageLoaded?: (imageUrl: string | null) => void;
     };
 };
-export type StreamsPlayerSettings = Pick<IContentPlayerSettingsInitializer, 'disableBackground' | 'hideCloseButton' | 'locale' | 'showStreamsCloudWatermark'>;
+export type StreamsPlayerSettings = {
+    locale?: Locale;
+    showStreamsCloudWatermark?: boolean;
+    playerColors?: PlayerColors;
+};
 export type StreamAmplificationParameters = {
     campaignId: string;
     campaignName: string;

package/dist/ui/line-clamp/cmp.line-clamp-auto.svelte

@@ -0,0 +1,119 @@
+<script lang="ts">import { LineClampLocalization } from './line-clamp-localization';
+import { LineClampUtils } from './line-clamp-utils';
+import { onDestroy, onMount } from 'svelte';
+let { locale, enableShowMore = false, children } = $props();
+const localization = $derived(new LineClampLocalization(locale !== null && locale !== void 0 ? locale : 'en'));
+let parent;
+let element;
+let clampWrapperRef;
+let isTruncated = $state(false);
+let showingAllText = $state(false);
+let resizeObserver = null;
+const canShowMore = $derived(enableShowMore && isTruncated && !showingAllText);
+onMount(() => {
+    let parentElement = element.parentElement;
+    if (!parentElement || !('clientHeight' in parentElement)) {
+        console.error('Unsupported parent for multiline clamper');
+    }
+    else {
+        parent = parentElement;
+        clamp();
+        resizeObserver = new ResizeObserver(clamp);
+        resizeObserver.observe(parent);
+    }
+});
+onDestroy(() => {
+    resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
+    resizeObserver = null;
+});
+const clamp = () => {
+    isTruncated = clampWrapperRef.scrollHeight > clampWrapperRef.offsetHeight;
+    if (showingAllText) {
+        setClampValue('unset');
+    }
+    else {
+        const clampValue = LineClampUtils.calculateClampValue(parent);
+        setClampValue(clampValue.toString());
+    }
+};
+const setClampValue = (value) => {
+    clampWrapperRef.style.setProperty('-webkit-line-clamp', value);
+};
+const toggleShowMore = () => {
+    showingAllText = !showingAllText;
+    clamp();
+};
+</script>
+
+<div
+  class="line-clamp"
+  class:line-clamp--clickable={canShowMore}
+  bind:this={element}
+  onclick={() => canShowMore && toggleShowMore()}
+  onmousedown={() => {}}
+  role="none">
+  <div class="line-clamp__wrapper-container">
+    <div class="line-clamp__wrapper" bind:this={clampWrapperRef}>
+      {@render children()}
+    </div>
+    <!--Testing new concept-->
+    <!--{#if enableShowMore && isTruncated && !showingAllText}
+      <button type="button" class="line-clamp__show-more-button line-clamp__show-more-button&#45;&#45;inline" onclick={toggleShowMore}>
+        {localization.showMore}
+      </button>
+    {/if}-->
+  </div>
+
+  {#if enableShowMore && showingAllText}
+    <button type="button" class="line-clamp__show-more-button" onclick={toggleShowMore}>
+      {localization.showLess}
+    </button>
+  {/if}
+</div>
+
+<style>.line-clamp {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.line-clamp--clickable {
+  cursor: pointer;
+  pointer-events: auto;
+}
+.line-clamp__wrapper-container {
+  position: relative;
+}
+.line-clamp__wrapper {
+  display: -webkit-box;
+  overflow: hidden;
+  word-break: break-word;
+  white-space: var(--line-clamp-white-space, pre-line);
+  -webkit-box-orient: vertical;
+}
+.line-clamp__show-more-button {
+  font-size: 0.9em;
+  font-style: italic;
+  pointer-events: auto;
+  /*Testing new concept*/
+  /*&--inline {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    padding-left: 1em;
+
+    backdrop-filter:
+      brightness(2)
+      contrast(0.3)
+      saturate(0);
+
+    &::after {
+      content: '...';
+      position: absolute;
+      left: 0;
+    }
+  }*/
+}
+.line-clamp__show-more-button:not(.line-clamp__show-more-button--inline) {
+  margin-top: 0.5em;
+}</style>

package/dist/ui/line-clamp/cmp.line-clamp-auto.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Locale } from '../../core/locale';
+import { type Snippet } from 'svelte';
+type Props = {
+    enableShowMore?: boolean;
+    locale?: Locale;
+    children: Snippet;
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/line-clamp/cmp.line-clamp.svelte

@@ -1,70 +1,44 @@
 <script lang="ts">import { LineClampLocalization } from './line-clamp-localization';
-import { LineClampUtils } from './line-clamp-utils';
-import { onDestroy, onMount } from 'svelte';
-let { value = undefined, maxLines = 3, locale, enableShowMore = false, children } = $props();
-const localization = $derived(new LineClampLocalization(locale !== null && locale !== void 0 ? locale : 'en'));
-let parent;
-let element;
-let clampWrapperRef;
+import {} from 'svelte';
+let { maxLines, locale, enableShowMore = false, children } = $props();
+const localization = $derived(new LineClampLocalization(locale));
 let isTruncated = $state(false);
 let showingAllText = $state(false);
-let resizeObserver = null;
-onMount(() => {
-    let parentElement = element.parentElement;
-    if (!parentElement || !('clientHeight' in parentElement)) {
-        console.error('Unsupported parent for multiline clamper');
-    }
-    else {
-        parent = parentElement;
-        clamp();
-        resizeObserver = new ResizeObserver(clamp);
-        resizeObserver.observe(parent);
-    }
-});
-onDestroy(() => {
-    resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
-    resizeObserver = null;
-});
-const clamp = () => {
-    isTruncated = clampWrapperRef.scrollHeight > clampWrapperRef.offsetHeight;
-    if (showingAllText) {
-        setClampValue('unset');
-    }
-    else {
-        let clampValue;
-        if (maxLines === 'auto') {
-            clampValue = LineClampUtils.calculateClampValue(parent);
-        }
-        else {
-            clampValue = maxLines;
-        }
-        setClampValue(clampValue.toString());
-    }
-};
-const setClampValue = (value) => {
-    clampWrapperRef.style.setProperty('-webkit-line-clamp', value);
-};
+const canShowMore = $derived(enableShowMore && isTruncated && !showingAllText);
 const toggleShowMore = () => {
     showingAllText = !showingAllText;
-    clamp();
 };
+const trackTruncatatedState = (node) => {
+    const resizeObserver = new ResizeObserver(() => {
+        isTruncated = node.scrollHeight > node.offsetHeight;
+    });
+    resizeObserver.observe(node);
+    return {
+        destroy() {
+            resizeObserver.disconnect();
+        }
+    };
+};
+const styles = $derived.by(() => {
+    const values = [];
+    if (maxLines) {
+        values.push(`--line-clamp--line-clamp: ${maxLines}`);
+    }
+    return values.join(';');
+});
 </script>
 
-<div class="line-clamp" bind:this={element}>
+<div
+  class="line-clamp"
+  class:line-clamp--clickable={canShowMore}
+  style={styles}
+  onclick={() => canShowMore && toggleShowMore()}
+  onmousedown={() => {}}
+  role="none">
   <div class="line-clamp__wrapper-container">
-    <div class="line-clamp__wrapper" bind:this={clampWrapperRef}>
-      {#if children}
-        {@render children()}
-      {:else if value}
-        {@html value}
-      {/if}
+    <div class="line-clamp__wrapper" class:line-clamp__wrapper--showing-all={showingAllText} use:trackTruncatatedState>
+      {@render children()}
     </div>
-
-    {#if enableShowMore && isTruncated && !showingAllText}
-      <button type="button" class="line-clamp__show-more-button line-clamp__show-more-button--inline" onclick={toggleShowMore}>
-        {localization.showMore}
-      </button>
-    {/if}
   </div>
 
   {#if enableShowMore && showingAllText}
@@ -75,11 +49,17 @@ const toggleShowMore = () => {
 </div>
 
 <style>.line-clamp {
+  --_line-clamp--white-space: var(--line-clamp--white-space, pre-line);
+  --_line-clamp--line-clamp: var(--line-clamp--line-clamp, 0);
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
 }
+.line-clamp--clickable {
+  cursor: pointer;
+  pointer-events: auto;
+}
 .line-clamp__wrapper-container {
   position: relative;
 }
@@ -87,26 +67,18 @@ const toggleShowMore = () => {
   display: -webkit-box;
   overflow: hidden;
   word-break: break-word;
-  white-space: var(--line-clamp-white-space, pre-line);
+  white-space: var(--_line-clamp--white-space);
   -webkit-box-orient: vertical;
+  line-clamp: var(--_line-clamp--line-clamp);
+  -webkit-line-clamp: var(--_line-clamp--line-clamp);
+  text-overflow: ellipsis;
+}
+.line-clamp__wrapper--showing-all {
+  --_line-clamp--line-clamp: none;
 }
 .line-clamp__show-more-button {
   font-size: 0.9em;
   font-style: italic;
   pointer-events: auto;
-}
-.line-clamp__show-more-button--inline {
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  padding-left: 1em;
-  backdrop-filter: blur(2px);
-}
-.line-clamp__show-more-button--inline::after {
-  content: "...";
-  position: absolute;
-  left: 0;
-}
-.line-clamp__show-more-button:not(.line-clamp__show-more-button--inline) {
   margin-top: 0.5em;
 }</style>

package/dist/ui/line-clamp/cmp.line-clamp.svelte.d.ts

@@ -1,11 +1,10 @@
 import type { Locale } from '../../core/locale';
 import { type Snippet } from 'svelte';
 type Props = {
-    value?: string | null;
-    maxLines?: number | 'auto';
+    maxLines?: number;
     enableShowMore?: boolean;
-    locale?: Locale;
-    children?: Snippet;
+    locale: Locale;
+    children: Snippet;
 };
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

package/dist/ui/line-clamp/index.d.ts

@@ -1 +1,2 @@
 export { default as LineClamp } from './cmp.line-clamp.svelte';
+export { default as LineClampAuto } from './cmp.line-clamp-auto.svelte';

package/dist/ui/line-clamp/index.js

@@ -1 +1,2 @@
 export { default as LineClamp } from './cmp.line-clamp.svelte';
+export { default as LineClampAuto } from './cmp.line-clamp-auto.svelte';

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

@@ -0,0 +1,44 @@
+<script lang="ts">import { Icon } from '../../icon';
+let { actions } = $props();
+</script>
+
+<div class="mobile-player-buttons-group">
+  {#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">
+        <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 {
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  pointer-events: auto;
+}
+.mobile-player-buttons-group__action {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 1rem;
+  --icon--color: #ffffff;
+  --icon--size: 2rem;
+  --icon--filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.2));
+}
+.mobile-player-buttons-group__action-icon {
+  display: block;
+}</style>

package/dist/ui/player/button/cmp.mobile-player-buttons-group.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { PlayerButtonsGroupAction } from './types';
+type Props = {
+    actions: PlayerButtonsGroupAction[];
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

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

@@ -40,7 +40,6 @@ const styles = $derived.by(() => {
   align-items: center;
   background-color: var(--_player-button--color--inactive);
   transition: background-color 0.5s;
-  border: 1px solid var(--_player-button--color);
   border-radius: 50%;
   --icon--color: #ffffff;
   --icon--size: 1.75rem;