@streamscloud/embeddable 13.2.0 → 14.0.0-rc.0

package/dist/external-api/data-providers/internal-stream-analytics-handler.js

@@ -1,23 +1,167 @@
-import { getOrCreateProfileId } from '../../core/analytics.profile-id';
+import { getOrCreateInstallationId } from '../../core/analytics.installation-id';
 import { constructGraphQLUrl } from '../../core/graphql';
-import { AppEventsTracker } from '@streamscloud/streams-analytics-collector';
+import { AnalyticsCollector, EntityRelationType, EntityType, EventType, MeasurementType, Schemas } from '@streamscloud/streams-analytics-collector';
 export class InternalStreamAnalyticsHandler {
     constructor(graphqlOrigin) {
-        AppEventsTracker.setEndpoint(constructGraphQLUrl(graphqlOrigin));
-        AppEventsTracker.setProfileId(getOrCreateProfileId());
+        AnalyticsCollector.initialize({
+            gqlDataSenderOptions: {
+                endpoint: constructGraphQLUrl(graphqlOrigin)
+            },
+            schema: Schemas.external,
+            metadata: {
+                installationId: getOrCreateInstallationId()
+            }
+        });
     }
-    setOrganizationId = (organizationId) => AppEventsTracker.setOrganizationId(organizationId);
-    trackStreamView = (streamId) => AppEventsTracker.trackStreamView(streamId);
-    trackStreamPageView = (pageId, streamId) => AppEventsTracker.trackStreamPageView(pageId, streamId);
-    trackStreamEngagementTime = (streamId, engagementTime) => AppEventsTracker.trackStreamEngagementTime(streamId, engagementTime);
-    trackStreamScrollDepth = (streamId, scrollDepth) => AppEventsTracker.trackStreamScrollDepth(streamId, scrollDepth);
-    trackStreamProductImpression = (productId, streamId) => AppEventsTracker.trackStreamProductImpression(productId, streamId);
-    trackStreamProductClicked = (productId, streamId) => AppEventsTracker.trackStreamProductClicked(productId, streamId);
-    reportPageVideoViews = (videoId, streamId) => AppEventsTracker.reportPageVideoViews(videoId, streamId);
-    trackShortVideoView = (videoId) => AppEventsTracker.trackShortVideoView(videoId);
-    trackShortVideoProductImpression = (productId, videoId) => AppEventsTracker.trackShortVideoProductImpression(productId, videoId);
-    trackShortVideoProductClick = (productId, videoId) => AppEventsTracker.trackShortVideoProductClick(productId, videoId);
-    trackShortVideoProgress = (pageId, videoId, progress, streamId) => AppEventsTracker.trackShortVideoProgress(pageId, videoId, progress, streamId);
-    trackAdClick = (adId) => AppEventsTracker.trackAdClick(adId);
-    trackAdImpression = (adId) => AppEventsTracker.trackAdImpression(adId);
+    trackStreamView = (streamId) => AnalyticsCollector.eventsReporter.reportEvent({
+        entity: {
+            type: EntityType.Stream,
+            id: streamId
+        },
+        eventType: EventType.Viewed
+    });
+    trackStreamPageView = (pageId, streamId) => AnalyticsCollector.eventsReporter.reportEvent({
+        entity: {
+            type: EntityType.StreamPage,
+            id: pageId
+        },
+        eventType: EventType.Viewed,
+        relatedEntities: [
+            {
+                relationType: EntityRelationType.PlacedIn,
+                entity: {
+                    type: EntityType.Stream,
+                    id: streamId
+                }
+            }
+        ]
+    });
+    trackStreamEngagementTime = (streamId, engagementTime) => AnalyticsCollector.measurementsReporter.reportMeasurement({
+        entity: {
+            type: EntityType.Stream,
+            id: streamId
+        },
+        measurementType: MeasurementType.EngagementTime,
+        value: engagementTime
+    });
+    trackStreamScrollDepth = (streamId, scrollDepth) => AnalyticsCollector.measurementsReporter.reportMeasurement({
+        entity: {
+            type: EntityType.Stream,
+            id: streamId
+        },
+        measurementType: MeasurementType.ScrollDepth,
+        value: scrollDepth
+    });
+    trackStreamProductImpression = (productId, streamId) => AnalyticsCollector.eventsReporter.reportEvent({
+        entity: {
+            type: EntityType.Product,
+            id: productId
+        },
+        eventType: EventType.Appeared,
+        relatedEntities: [
+            {
+                relationType: EntityRelationType.PlacedIn,
+                entity: {
+                    type: EntityType.Stream,
+                    id: streamId
+                }
+            }
+        ]
+    });
+    trackStreamProductClicked = (productId, streamId) => AnalyticsCollector.eventsReporter.reportEvent({
+        entity: {
+            type: EntityType.Product,
+            id: productId
+        },
+        eventType: EventType.Clicked,
+        relatedEntities: [
+            {
+                relationType: EntityRelationType.PlacedIn,
+                entity: {
+                    type: EntityType.Stream,
+                    id: streamId
+                }
+            }
+        ]
+    });
+    reportPageVideoViews = (pageId, streamId) => AnalyticsCollector.measurementsBatcher.reportBatch([
+        {
+            type: EntityType.StreamPage,
+            id: pageId
+        },
+        {
+            type: EntityType.Stream,
+            id: streamId
+        }
+    ]);
+    trackShortVideoView = (videoId) => AnalyticsCollector.eventsReporter.reportEvent({
+        entity: {
+            type: EntityType.ShortVideo,
+            id: videoId
+        },
+        eventType: EventType.Viewed
+    });
+    trackShortVideoProductImpression = (productId, videoId) => AnalyticsCollector.eventsReporter.reportEvent({
+        entity: {
+            type: EntityType.Product,
+            id: productId
+        },
+        eventType: EventType.Appeared,
+        relatedEntities: [
+            {
+                relationType: EntityRelationType.PlacedIn,
+                entity: {
+                    type: EntityType.ShortVideo,
+                    id: videoId
+                }
+            }
+        ]
+    });
+    trackShortVideoProductClick = (productId, videoId) => AnalyticsCollector.eventsReporter.reportEvent({
+        entity: {
+            type: EntityType.Product,
+            id: productId
+        },
+        eventType: EventType.Clicked,
+        relatedEntities: [
+            {
+                relationType: EntityRelationType.PlacedIn,
+                entity: {
+                    type: EntityType.ShortVideo,
+                    id: videoId
+                }
+            }
+        ]
+    });
+    trackShortVideoProgress = (pageId, videoId, progress, streamId) => AnalyticsCollector.measurementsBatcher.collect([
+        {
+            type: EntityType.StreamPage,
+            id: pageId
+        },
+        {
+            type: EntityType.Stream,
+            id: streamId
+        }
+    ], {
+        entity: {
+            type: EntityType.ShortVideo,
+            id: videoId
+        },
+        measurementType: MeasurementType.Progress,
+        value: progress
+    });
+    trackAdClick = (adId) => AnalyticsCollector.eventsReporter.reportEvent({
+        entity: {
+            type: EntityType.Ad,
+            id: adId
+        },
+        eventType: EventType.Clicked
+    });
+    trackAdImpression = (adId) => AnalyticsCollector.eventsReporter.reportEvent({
+        entity: {
+            type: EntityType.Ad,
+            id: adId
+        },
+        eventType: EventType.Appeared
+    });
 }

package/dist/external-api/data-providers/mapper.d.ts

@@ -0,0 +1,3 @@
+import { PostType } from '../../core/enums';
+import { EntityType } from '@streamscloud/streams-analytics-collector';
+export declare function mapPostTypeToEntityType(postType: PostType): EntityType;

package/dist/external-api/data-providers/mapper.js

@@ -0,0 +1,18 @@
+import { PostType } from '../../core/enums';
+import { EntityType } from '@streamscloud/streams-analytics-collector';
+export function mapPostTypeToEntityType(postType) {
+    switch (postType) {
+        case PostType.Article:
+            return EntityType.Article;
+        case PostType.Media:
+            return EntityType.Media;
+        case PostType.Moment:
+            return EntityType.Moment;
+        case PostType.ShortVideo:
+            return EntityType.ShortVideo;
+        case PostType.Video:
+            return EntityType.Video;
+        default:
+            throw new Error(`Unknown PostType: ${postType}`);
+    }
+}

package/dist/external-api/data-providers/post-data-loaders/mapper.js

@@ -1,9 +1,7 @@
-import { ProfileType } from '../../../core/enums';
 import { mapToPostModel } from '../../../posts/post-viewer';
 export const mapToPostPlayerModel = (payload) => {
     const viewerModel = mapToPostModel(payload);
     return {
-        ...viewerModel,
-        analyticsOrganizationId: payload.ownerProfile.type === ProfileType.Organization ? payload.ownerProfile.id : null
+        ...viewerModel
     };
 };

package/dist/media-center/media-center/discover/community-features.svelte

@@ -111,8 +111,9 @@ const onJoinMembershipClick = () => __awaiter(void 0, void 0, void 0, function*
   display: flex;
   flex-wrap: nowrap;
   margin-top: 0.25rem;
-  gap: 8.125rem;
   align-items: center;
+  max-width: 19.6875rem;
+  justify-content: space-between;
   /* Set 'container-type: inline-size;' to reference container*/
 }
 @container (width < 576px) {

package/dist/media-center/media-center/discover/discover-header.svelte

@@ -139,6 +139,7 @@ let { context } = $props();
   max-width: 4rem;
 }
 .header-mobile__texts {
+  flex: 1;
   display: flex;
   flex-direction: column;
   gap: 0.25rem;

package/dist/media-center/media-center/discover/discover-view.svelte

@@ -77,10 +77,10 @@ const localization = $derived(new DiscoverViewLocalization(context.locale));
   flex: 1;
   scrollbar-gutter: stable both-edges;
   padding-inline: 1.875rem;
+  overflow-x: hidden;
   overflow-y: auto;
   --_cross-browser-scrollbar--thumb-color: transparent;
   --_cross-browser-scrollbar--track-color: transparent;
-  /* Set 'container-type: inline-size;' to reference container*/
 }
 .media-center-discover:hover {
   --_cross-browser-scrollbar--thumb-color: var(--scrollbar--thumb-color, #7d7d7d);
@@ -104,6 +104,9 @@ const localization = $derived(new DiscoverViewLocalization(context.locale));
     scrollbar-width: thin;
   }
 }
+.media-center-discover {
+  /* Set 'container-type: inline-size;' to reference container*/
+}
 @container (width < 576px) {
   .media-center-discover {
     padding-inline: 0.9375rem;
@@ -115,19 +118,23 @@ const localization = $derived(new DiscoverViewLocalization(context.locale));
   margin: 0 auto;
   padding-bottom: 1.25rem;
   /* Set 'container-type: inline-size;' to reference container*/
-  /* Set 'container-type: inline-size;' to reference container*/
-  /* Set 'container-type: inline-size;' to reference container*/
 }
 @container (width < 992px) {
   .media-center-discover__content {
     padding-bottom: 1rem;
   }
 }
+.media-center-discover__content {
+  /* Set 'container-type: inline-size;' to reference container*/
+}
 @container (width < 768px) {
   .media-center-discover__content {
     padding-bottom: 0.8125rem;
   }
 }
+.media-center-discover__content {
+  /* Set 'container-type: inline-size;' to reference container*/
+}
 @container (width < 576px) {
   .media-center-discover__content {
     padding-bottom: 0.625rem;
@@ -138,19 +145,23 @@ const localization = $derived(new DiscoverViewLocalization(context.locale));
   flex-direction: column;
   gap: 3rem;
   /* Set 'container-type: inline-size;' to reference container*/
-  /* Set 'container-type: inline-size;' to reference container*/
-  /* Set 'container-type: inline-size;' to reference container*/
 }
 @container (width < 992px) {
   .media-center-discover__feed {
     gap: 2.5rem;
   }
 }
+.media-center-discover__feed {
+  /* Set 'container-type: inline-size;' to reference container*/
+}
 @container (width < 768px) {
   .media-center-discover__feed {
     gap: 2rem;
   }
 }
+.media-center-discover__feed {
+  /* Set 'container-type: inline-size;' to reference container*/
+}
 @container (width < 576px) {
   .media-center-discover__feed {
     gap: 1.5rem;
@@ -187,13 +198,13 @@ const localization = $derived(new DiscoverViewLocalization(context.locale));
 .media-center-discover__section-content--4 {
   gap: 1.25rem;
   grid-template-columns: repeat(4, minmax(0, 1fr));
-  /* Set 'container-type: inline-size;' to reference container*/
-  /* Set 'container-type: inline-size;' to reference container*/
-  /* Set 'container-type: inline-size;' to reference container*/
 }
 .media-center-discover__section-content--4 :global(> :nth-child(n + 5)) {
   display: var(--_section-content--more-items--display);
 }
+.media-center-discover__section-content--4 {
+  /* Set 'container-type: inline-size;' to reference container*/
+}
 @container (width < 992px) {
   .media-center-discover__section-content--4 {
     gap: 1rem;
@@ -203,6 +214,9 @@ const localization = $derived(new DiscoverViewLocalization(context.locale));
     display: var(--_section-content--more-items--display);
   }
 }
+.media-center-discover__section-content--4 {
+  /* Set 'container-type: inline-size;' to reference container*/
+}
 @container (width < 768px) {
   .media-center-discover__section-content--4 {
     gap: 0.75rem;
@@ -215,6 +229,9 @@ const localization = $derived(new DiscoverViewLocalization(context.locale));
     display: var(--_section-content--more-items--display);
   }
 }
+.media-center-discover__section-content--4 {
+  /* Set 'container-type: inline-size;' to reference container*/
+}
 @container (width < 576px) {
   .media-center-discover__section-content--4 {
     gap: 0.625rem;
@@ -223,13 +240,13 @@ const localization = $derived(new DiscoverViewLocalization(context.locale));
 .media-center-discover__section-content--5 {
   gap: 1.875rem;
   grid-template-columns: repeat(5, minmax(0, 1fr));
-  /* Set 'container-type: inline-size;' to reference container*/
-  /* Set 'container-type: inline-size;' to reference container*/
-  /* Set 'container-type: inline-size;' to reference container*/
 }
 .media-center-discover__section-content--5 :global(> :nth-child(n + 6)) {
   display: var(--_section-content--more-items--display);
 }
+.media-center-discover__section-content--5 {
+  /* Set 'container-type: inline-size;' to reference container*/
+}
 @container (width < 992px) {
   .media-center-discover__section-content--5 {
     gap: 1.5rem;
@@ -239,6 +256,9 @@ const localization = $derived(new DiscoverViewLocalization(context.locale));
     display: var(--_section-content--more-items--display);
   }
 }
+.media-center-discover__section-content--5 {
+  /* Set 'container-type: inline-size;' to reference container*/
+}
 @container (width < 768px) {
   .media-center-discover__section-content--5 {
     gap: 1.125rem;
@@ -248,6 +268,9 @@ const localization = $derived(new DiscoverViewLocalization(context.locale));
     display: var(--_section-content--more-items--display);
   }
 }
+.media-center-discover__section-content--5 {
+  /* Set 'container-type: inline-size;' to reference container*/
+}
 @container (width < 576px) {
   .media-center-discover__section-content--5 {
     gap: 0.9375rem;

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

@@ -239,14 +239,16 @@ const styles = $derived.by(() => {
   display: flex;
   -webkit-user-drag: none;
   user-select: none;
+}
+.menu-item :global([contenteditable]) {
+  user-select: text;
+}
+.menu-item {
   height: 2.25rem;
   padding-left: var(--_media-center-menu--items--padding-inline);
   --_menu-item--text--font-size: 0.9375rem;
   --_menu-item--image--size: 1.5rem;
 }
-.menu-item :global([contenteditable]) {
-  user-select: text;
-}
 .menu-item--active {
   background-color: hsl(from var(--_media-center-menu--background-color) h s calc(l + 5)/alpha);
   border-radius: 0.25rem;

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

@@ -80,19 +80,23 @@ let { handler, on } = $props();
   gap: 2rem 1.25rem;
   grid-template-columns: repeat(5, minmax(0, 1fr));
   /* Set 'container-type: inline-size;' to reference container*/
-  /* Set 'container-type: inline-size;' to reference container*/
-  /* Set 'container-type: inline-size;' to reference container*/
 }
 @container (width < 992px) {
   .streams-in-category__section-content {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
 }
+.streams-in-category__section-content {
+  /* Set 'container-type: inline-size;' to reference container*/
+}
 @container (width < 768px) {
   .streams-in-category__section-content {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 }
+.streams-in-category__section-content {
+  /* Set 'container-type: inline-size;' to reference container*/
+}
 @container (width < 576px) {
   .streams-in-category__section-content {
     grid-template-columns: repeat(2, minmax(0, 1fr));

package/dist/posts/post-viewer/attachments-horizontal.svelte

@@ -168,6 +168,7 @@ const variables = $derived.by(() => {
   overflow-x: auto;
   padding-inline: var(--_post-viewer--attachments-horizontal--padding-inline);
   scrollbar-width: none;
+  overscroll-behavior: none;
 }
 .attachments-horizontal__item {
   position: relative;

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

@@ -1,5 +1,5 @@
 <script lang="ts">import { Image } from '../../../ui/image';
-import { Slider } from '../../../ui/slider';
+import { SliderHorizontal } from '../../../ui/player/slider-horizontal';
 import { Video } from '../../../ui/video';
 let { id, media, locale, autoplay = 'on-appearance', on } = $props();
 </script>
@@ -26,11 +26,11 @@ let { id, media, locale, autoplay = 'on-appearance', on } = $props();
   {#if media.items.length === 1}
     {@render mediaItem(media.items[0])}
   {:else if media.items.length > 1}
-    <Slider items={media.items} initialIndex={media.currentIndex} locale={locale} on={{ indexChanged: (index) => (media.currentIndex = index) }}>
+    <SliderHorizontal items={media.items} initialIndex={media.currentIndex} locale={locale} on={{ indexChanged: (index) => (media.currentIndex = index) }}>
       {#snippet children(item)}
         {@render mediaItem(item)}
       {/snippet}
-    </Slider>
+    </SliderHorizontal>
   {/if}
 </div>
 

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

@@ -83,14 +83,11 @@ const contentPlayerConfig = new ContentPlayerConfig({
             if (on === null || on === void 0 ? void 0 : on.backgroundImageLoaded) {
                 on.backgroundImageLoaded(getPostCoverImage(post));
             }
-            if (post.analyticsOrganizationId) {
-                analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.setOrganizationId(post.analyticsOrganizationId);
-            }
             if (post.postType === PostType.ShortVideo) {
                 analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackShortVideoView(id);
             }
-            else if (post.analyticsOrganizationId) {
-                analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackPostOpened(id, post.analyticsOrganizationId);
+            else if (post.postType) {
+                analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackPostOpened(post.postType, id);
             }
             (_a = on === null || on === void 0 ? void 0 : on.postActivated) === null || _a === void 0 ? void 0 : _a.call(on, id);
         }

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

@@ -1,3 +1,4 @@
+import type { PostType } from '../../core/enums';
 import type { Locale } from '../../core/locale';
 import type { ThemeValue } from '../../core/theme';
 import type { IPostModel } from '..';
@@ -6,17 +7,14 @@ 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 {
-    setOrganizationId: (organizationId: string) => void;
-    trackPostOpened: (postId: string, ownerId: string) => void;
+    trackPostOpened: (postType: PostType, postId: string) => void;
     trackShortVideoView: (videoId: string) => void;
     trackShortVideoProductImpression: (productId: string, videoId: string) => void;
     trackShortVideoProductClick: (productId: string, videoId: string) => void;
     trackAdClick: (adId: string) => void;
     trackAdImpression: (adId: string) => void;
 }
-export type PostPlayerModel = IPostModel & {
-    analyticsOrganizationId: string | null;
-};
+export type PostPlayerModel = IPostModel;
 export type PostsPlayerProps = {
     dataProvider: {
         type: 'buffer';

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

@@ -50,9 +50,6 @@ $effect(() => {
         var _a;
         if (stream) {
             currentStreamModel = stream;
-            if (stream.organizationId) {
-                analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.setOrganizationId(stream.organizationId);
-            }
             (_a = on === null || on === void 0 ? void 0 : on.streamActivated) === null || _a === void 0 ? void 0 : _a.call(on, { id: stream.id, title: stream.title, image: stream.cover });
             analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackStreamView(stream.id);
             startActivityTracking();

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

@@ -63,7 +63,6 @@ export interface IStreamsPlayerDataProvider {
     onEndReached?: () => void;
 }
 export interface IStreamAnalyticsHandler {
-    setOrganizationId: (organizationId: string) => void;
     trackStreamView: (streamId: string) => void;
     trackStreamPageView: (pageId: string, streamId: string) => void;
     trackStreamProductImpression: (productId: string, streamId: string) => void;

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

@@ -36,7 +36,6 @@ let { style = undefined, size = ButtonSize.Standard, children } = $props();
 }
 .button-theme {
   display: contents;
-  /*Size*/
 }
 .button-theme--standard {
   --button--font--color: var(--sc-mc-color--text-primary);
@@ -46,12 +45,15 @@ let { style = undefined, size = ButtonSize.Standard, children } = $props();
   --button--background--disabled: #f2f2f3;
   --button--border: 1px solid #e5e7eb;
 }
-:global([data-theme="dark"]) .button-theme--standard {
+: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-theme {
+  /*Size*/
+}
 .button-theme--size-standard {
   --button--height: 2em;
   --button--text--font-size: 0.75em;

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

@@ -73,7 +73,7 @@ let { src, color = null } = $props();
   stroke: var(--_icon--stroke-color, var(--_icon--color));
   stroke-width: var(--_icon--stroke-width);
 }
-:global([data-theme="dark"]) .icon :global(path) {
+: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.player-button.svelte

@@ -47,7 +47,6 @@ const styles = $derived.by(() => {
   color: var(--sc-mc-color--text-white);
   --icon--color: var(--sc-mc-color--icon-overlay);
   --icon--size: 1.75rem;
-  /* Set 'container-type: inline-size;' to reference container*/
 }
 .player-button:hover:not(:disabled) {
   background-color: var(--_player-button--color);
@@ -64,6 +63,9 @@ const styles = $derived.by(() => {
   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;

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

@@ -47,7 +47,6 @@ const styles = $derived.by(() => {
   background: var(--_player-buttons-group--background-color);
   padding: 0.4375rem 0.0625rem;
   pointer-events: auto;
-  /* Set 'container-type: inline-size;' to reference container*/
 }
 .player-buttons-group__action {
   --_player-action--icon-scale: 1;
@@ -73,6 +72,9 @@ const styles = $derived.by(() => {
   transform: scale(var(--_player-action--icon-scale));
   transition: 0.3s;
 }
+.player-buttons-group {
+  /* Set 'container-type: inline-size;' to reference container*/
+}
 @container (width < 576px) {
   .player-buttons-group {
     border-radius: 0.9375rem;