@streamscloud/embeddable 7.0.0 → 7.0.2-1759149696160

package/dist/ads/ad-card/cmp.ad-card.svelte

@@ -2,28 +2,29 @@
 import { Button, ButtonSize } from '../../ui/button';
 import { Image } from '../../ui/image';
 import { LineClamp } from '../../ui/line-clamp';
-import { onMount } from 'svelte';
 let { ad, inert = false, on } = $props();
-let adElement;
-onMount(() => {
-    if (adElement && (on === null || on === void 0 ? void 0 : on.impression)) {
+const trackImpression = (node) => {
+    if (on === null || on === void 0 ? void 0 : on.impression) {
         const observer = new IntersectionObserver((entries) => {
             entries.forEach((entry) => {
+                var _a;
                 if (entry.isIntersecting && entry.intersectionRatio >= 0.5) {
-                    on.impression(ad.id);
+                    (_a = on.impression) === null || _a === void 0 ? void 0 : _a.call(on, ad.id);
                     observer.unobserve(entry.target);
                 }
             });
         }, { threshold: 0.5 });
-        observer.observe(adElement);
-        return () => {
-            observer.disconnect();
+        observer.observe(node);
+        return {
+            destroy() {
+                observer.disconnect();
+            }
         };
     }
-});
+};
 const handleAdClick = () => {
-    if (on === null || on === void 0 ? void 0 : on.adClick) {
-        on.adClick(ad.id);
+    if (on === null || on === void 0 ? void 0 : on.click) {
+        on.click(ad.id);
     }
     if (ad.ctaButton) {
         window.open(ad.ctaButton.url, '_blank');
@@ -31,7 +32,7 @@ const handleAdClick = () => {
 };
 </script>
 
-<div class="ad-card" inert={inert} bind:this={adElement}>
+<div class="ad-card" inert={inert} use:trackImpression>
   <div class="ad-card__image">
     <Image src={ad.image} alt={ad.title} />
   </div>

package/dist/ads/ad-card/cmp.ad-card.svelte.d.ts

@@ -3,8 +3,8 @@ type Props = {
     ad: AdCardModel;
     inert?: boolean;
     on?: {
-        adClick?: (adId: string) => void;
-        impression?: (adId: string) => void;
+        click?: (id: string) => void;
+        impression?: (id: string) => void;
     };
 };
 declare const Cmp: import("svelte").Component<Props, {}, "">;

package/dist/content-player/cmp.content-player.svelte

@@ -0,0 +1,224 @@
+<script lang="ts">var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { handleEsc } from '../core/document.event-handlers';
+import { PostViewer } from '../posts/post-viewer';
+import { Icon } from '../ui/icon';
+import { Loading } from '../ui/loading';
+import { PlayerSlider } from '../ui/player-slider';
+import { SpotlightLayout } from '../ui/spotlight-layout';
+import { SwipeIndicator } from '../ui/swipe-indicator';
+import { default as ControlsAndAttachments } from './controls-and-attachments.svelte';
+import { default as OverviewPanel } from './overview-panel.svelte';
+import IconDismiss from '@fluentui/svg-icons/icons/dismiss_28_regular.svg?raw';
+import { onMount, untrack } from 'svelte';
+let { config, nonPostItemView, overviewPanelContent } = $props();
+let everTouched = $state(false);
+const uiManager = config.uiManager;
+onMount(() => __awaiter(void 0, void 0, void 0, function* () {
+    uiManager.overviewCollapsed = window && window.innerWidth < window.innerHeight;
+}));
+$effect(() => {
+    var _a;
+    void ((_a = config.playerBuffer) === null || _a === void 0 ? void 0 : _a.current);
+    untrack(() => {
+        if (uiManager.viewInitialized && uiManager.isMobileView) {
+            uiManager.overviewCollapsed = true;
+        }
+    });
+});
+const handleDimensionsChanged = (dimensions) => {
+    uiManager.setDialogDimensions({
+        mainViewColumnWidth: dimensions.mainSceneWidth,
+        viewTotalWidth: dimensions.totalWidth
+    });
+};
+const handleMediaCenterHeaderMounted = (data) => {
+    uiManager.setMediaCenterHeaderHeight(data.height);
+};
+const handleContentAreaMounted = (node) => {
+    const markAsTouched = () => {
+        everTouched = true;
+        node.removeEventListener('touchstart', markAsTouched);
+        node.removeEventListener('wheel', markAsTouched);
+        node.removeEventListener('click', markAsTouched);
+        node.removeEventListener('keypress', markAsTouched);
+    };
+    node.addEventListener('touchstart', markAsTouched);
+    node.addEventListener('wheel', markAsTouched);
+    node.addEventListener('click', markAsTouched);
+    node.addEventListener('keypress', markAsTouched);
+};
+</script>
+
+<svelte:document onkeydown={(e) => handleEsc(e, () => config.callbacks?.close?.())} />
+
+<div
+  class="content-player-container"
+  class:content-player-container--background-enabled={!config.disableBackground}
+  class:content-player-container--background-loading={!config.disableBackground && !uiManager.backgroundImageUrl}
+  class:content-player-container--faded={config.fadeContent}
+  style={uiManager.globalCssVariables}>
+  {#if config.mediaCenterControlsPanel}
+    {#snippet closeButton()}
+      <button type="button" class="close-button" onclick={config.callbacks?.close}>
+        <Icon src={IconDismiss} />
+      </button>
+    {/snippet}
+    <div class="content-player-container__media-center">
+      {@render config.mediaCenterControlsPanel({
+        maxItemsWidth: Math.min(uiManager.mainViewColumnWidth * 1.4, uiManager.dialogTotalWidth),
+        onMounted: handleMediaCenterHeaderMounted,
+        closeButton: config.callbacks?.close && closeButton
+      })}
+    </div>
+  {/if}
+  <div class="content-player">
+    {#if config.showStreamsCloudWatermark}
+      <div class="content-player__watermark">
+        <a href="https://streamscloud.com/" tabindex="-1" aria-label="none">
+          <img src="https://embedabble-assets.streamscloud-cdn.com/watermark.svg" alt="StreamsCloud" />
+        </a>
+      </div>
+    {/if}
+    {#if config.playerBuffer}
+      <SpotlightLayout ratio={9 / 16} on={{ dimensionsChanged: handleDimensionsChanged }}>
+        <div class="content-player__content" use:handleContentAreaMounted>
+          <PlayerSlider buffer={config.playerBuffer} on={config.playerSliderCallbacks}>
+            {#snippet children({ item })}
+              {@const postModel = config.itemAsPostViewerModel(item)}
+              {#if postModel}
+                <PostViewer
+                  model={postModel}
+                  socialInteractionsHandler={config.socialInteractionsHandler}
+                  showAttachments={config.uiManager.showPostOverlayAttachments}
+                  showControls={config.uiManager.showPostOverlayControls}
+                  autoplay="on-appearance"
+                  locale={config.locale}
+                  on={{
+                    progress: (progress) => config.callbacks?.videoProgress?.(item.id, postModel.id, progress),
+                    productClick: (productId) => config.callbacks?.productClick?.(productId, postModel.id),
+                    productImpression: (productId) => config.callbacks?.productImpression?.(productId, postModel.id),
+                    adClick: (adId) => config.callbacks?.adClick?.(adId, postModel.id),
+                    adImpression: (adId) => config.callbacks?.adImpression?.(adId, postModel.id)
+                  }} />
+              {:else if nonPostItemView}
+                {@render nonPostItemView({ item })}
+              {/if}
+            {/snippet}
+          </PlayerSlider>
+          {#if uiManager.isMobileView && config.playerBuffer.loaded.length > 1 && !everTouched}
+            <SwipeIndicator locale={config.locale} />
+          {/if}
+        </div>
+      </SpotlightLayout>
+      {#if overviewPanelContent}
+        <OverviewPanel contentFaded={config.fadeContent} uiManager={uiManager}>
+          {@render overviewPanelContent()}
+        </OverviewPanel>
+      {/if}
+      <ControlsAndAttachments config={config} />
+    {:else}
+      <Loading positionFixedCenter={true} timeout={1000} />
+    {/if}
+  </div>
+</div>
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.content-player-container {
+  --content-player--elements-opacity: 1;
+  width: 100%;
+  min-width: 100%;
+  max-width: 100%;
+  height: 100%;
+  min-height: 100%;
+  max-height: 100%;
+  container-type: inline-size;
+  display: flex;
+  position: relative;
+}
+.content-player-container--background-enabled {
+  background-color: #c1c1c1;
+  background-image: var(--content-player--background-image-url);
+  background-size: cover;
+  background-blend-mode: multiply;
+}
+.content-player-container--background-loading {
+  background-color: transparent;
+}
+.content-player-container--faded {
+  --content-player--elements-opacity: 0;
+}
+.content-player-container__media-center {
+  position: absolute;
+  top: 0;
+  left: var(--content-player--overview--width);
+  right: var(--content-player--overview--width);
+  z-index: 1;
+}
+
+.content-player {
+  display: flex;
+  flex: 1;
+  padding: var(--content-player--padding);
+  backdrop-filter: blur(30px);
+  position: relative;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 576px) {
+  .content-player {
+    padding: 0;
+  }
+}
+.content-player__watermark {
+  position: absolute;
+  bottom: 5rem;
+  left: calc(var(--content-player--overview--width) + 5rem);
+  opacity: var(--content-player--elements-opacity);
+  transition: opacity 0.3s ease-in-out;
+}
+.content-player__content {
+  width: 100%;
+  height: 100%;
+  opacity: var(--content-player--elements-opacity);
+  transition: opacity 0.3s ease-in-out;
+}
+
+.close-button {
+  width: 3rem;
+  min-width: 3rem;
+  max-width: 3rem;
+  height: 3rem;
+  min-height: 3rem;
+  max-height: 3rem;
+  background-color: rgba(0, 0, 0, 0.6);
+  border: 1px solid #1c1c1c;
+  border-radius: 50%;
+  text-align: center;
+  --icon--color: #ffffff;
+  --icon--size: 1.75rem;
+}
+.close-button:hover {
+  background-color: rgba(0, 0, 0, 0.9);
+  transition: background-color 0.5s;
+}
+.close-button:disabled {
+  opacity: 0.5;
+  cursor: default;
+}</style>

package/dist/content-player/cmp.content-player.svelte.d.ts

@@ -0,0 +1,33 @@
+import type { ContentPlayerConfig } from './content-player-config.svelte';
+import { type Snippet } from 'svelte';
+declare class __sveltets_Render<T extends {
+    id: string;
+}> {
+    props(): {
+        config: ContentPlayerConfig<T>;
+        nonPostItemView?: Snippet<[{
+            item: T;
+        }]> | undefined;
+        overviewPanelContent?: Snippet;
+    };
+    events(): {};
+    slots(): {};
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends {
+        id: string;
+    }>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends {
+        id: string;
+    }>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Cmp: $$IsomorphicComponent;
+type Cmp<T extends {
+    id: string;
+}> = InstanceType<typeof Cmp<T>>;
+export default Cmp;

package/dist/content-player/content-player-config.svelte.d.ts

@@ -0,0 +1,49 @@
+import type { Locale } from '../core/locale';
+import type { MediaCenterData } from '../media-center/model/types';
+import type { IPostSocialInteractionsHandler } from '../posts';
+import type { PostViewerModel } from '../posts/post-viewer';
+import type { IPlayerBuffer } from '../ui/player-slider';
+import type { PlayerSliderCallbacks } from '../ui/player-slider/types';
+import { ContentPlayerUIManager } from './ui-manager.svelte';
+export declare class ContentPlayerConfig<T extends {
+    id: string;
+}> {
+    playerBuffer: IPlayerBuffer<T> | null;
+    readonly locale: Locale;
+    readonly disableBackground: boolean;
+    readonly showStreamsCloudWatermark: boolean;
+    readonly callbacks: ContentPlayerCallbacks | null;
+    readonly playerSliderCallbacks: PlayerSliderCallbacks<T> | undefined;
+    readonly socialInteractionsHandler: IPostSocialInteractionsHandler | undefined;
+    readonly uiManager: ContentPlayerUIManager;
+    private _mediaCenterData;
+    private _mappers;
+    constructor(init: {
+        playerBuffer: IPlayerBuffer<T> | null;
+        mappers: ContentPlayerMappers<T>;
+        disableBackground?: boolean;
+        locale?: Locale;
+        showStreamsCloudWatermark?: boolean;
+        socialInteractionsHandler?: IPostSocialInteractionsHandler;
+        mediaCenterData?: MediaCenterData;
+        callbacks?: ContentPlayerCallbacks;
+        playerSliderCallbacks?: PlayerSliderCallbacks<T>;
+    });
+    get mediaCenterControlsPanel(): MediaCenterData['controlsPanel'] | null;
+    get playerLogo(): string | null;
+    get fadeContent(): boolean;
+    itemAsPostViewerModel: (item: T) => PostViewerModel | null;
+    setBackgroundImageUrl: (imageUrl: string | null) => void;
+    updateMediaCenterData: (data: MediaCenterData | undefined) => void;
+}
+export type ContentPlayerMappers<T> = {
+    postModelFromCurrentItem: (item: T) => PostViewerModel | null;
+};
+export type ContentPlayerCallbacks = {
+    close?: () => void;
+    videoProgress?: (playerItemId: string, postId: string, progress: number) => void;
+    productClick?: (productId: string, postId: string) => void;
+    productImpression?: (productId: string, postId: string) => void;
+    adClick?: (adId: string, postId: string) => void;
+    adImpression?: (adId: string, postId: string) => void;
+};

package/dist/content-player/content-player-config.svelte.js

@@ -0,0 +1,43 @@
+import { ContentPlayerUIManager } from './ui-manager.svelte';
+export class ContentPlayerConfig {
+    playerBuffer = $state.raw(null);
+    locale;
+    disableBackground;
+    showStreamsCloudWatermark;
+    callbacks;
+    playerSliderCallbacks;
+    socialInteractionsHandler;
+    uiManager = new ContentPlayerUIManager();
+    _mediaCenterData = $state.raw(null);
+    _mappers;
+    constructor(init) {
+        const { disableBackground = false, locale = 'en', showStreamsCloudWatermark = false, playerBuffer, mappers, mediaCenterData, socialInteractionsHandler, callbacks, playerSliderCallbacks } = init;
+        this.playerBuffer = playerBuffer;
+        this.locale = locale;
+        this.disableBackground = disableBackground;
+        this.showStreamsCloudWatermark = showStreamsCloudWatermark;
+        this._mediaCenterData = mediaCenterData || null;
+        this.callbacks = callbacks || null;
+        this.playerSliderCallbacks = playerSliderCallbacks;
+        this.socialInteractionsHandler = socialInteractionsHandler;
+        this._mappers = mappers;
+    }
+    get mediaCenterControlsPanel() {
+        return this._mediaCenterData?.controlsPanel || null;
+    }
+    get playerLogo() {
+        return this._mediaCenterData?.playerLogo || null;
+    }
+    get fadeContent() {
+        return this._mediaCenterData?.overlayIsActive || false;
+    }
+    itemAsPostViewerModel = (item) => {
+        return this._mappers.postModelFromCurrentItem(item);
+    };
+    setBackgroundImageUrl = (imageUrl) => {
+        this.uiManager.setBackgroundImageUrl(imageUrl);
+    };
+    updateMediaCenterData = (data) => {
+        this._mediaCenterData = data ?? null;
+    };
+}

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

@@ -0,0 +1,275 @@
+<script lang="ts">import { slideHorizontally } from '../core/transitions';
+import { PostControls } from '../posts';
+import { PostAttachments } from '../posts/attachments';
+import { Icon } from '../ui/icon';
+import { ContentPlayerConfig } from './content-player-config.svelte';
+import IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_28_regular.svg?raw';
+import IconChevronUp from '@fluentui/svg-icons/icons/chevron_up_28_regular.svg?raw';
+import IconDismiss from '@fluentui/svg-icons/icons/dismiss_28_regular.svg?raw';
+let { config } = $props();
+const uiManager = config.uiManager;
+const currentItemPostContainer = $derived.by(() => {
+    var _a;
+    if (!((_a = config.playerBuffer) === null || _a === void 0 ? void 0 : _a.current)) {
+        return null;
+    }
+    return config.itemAsPostViewerModel(config.playerBuffer.current);
+});
+const changeShowAttachments = () => {
+    uiManager.showAttachments = !uiManager.showAttachments;
+};
+const trackAttachmentsPanelSize = (node) => {
+    const resizeObserver = new ResizeObserver(([entry]) => {
+        const width = entry.contentRect.width;
+        uiManager.setAttachmentsPanelWidth(width);
+    });
+    resizeObserver.observe(node);
+    return {
+        destroy() {
+            resizeObserver.unobserve(node);
+        }
+    };
+};
+const trackNavigationButtonsSize = (node) => {
+    const resizeObserver = new ResizeObserver(([entry]) => {
+        const width = entry.contentRect.width;
+        uiManager.setNavigationButtonsBlockWidth(width);
+    });
+    resizeObserver.observe(node);
+    return {
+        destroy() {
+            resizeObserver.unobserve(node);
+        }
+    };
+};
+</script>
+
+{#if uiManager.viewInitialized && (!uiManager.showPostOverlayAttachments || !uiManager.showPostOverlayControls)}
+  <div class="controls-and-attachments" class:controls-and-attachments--with-logo={!!config.playerLogo}>
+    {#if !uiManager.showPostOverlayControls}
+      <div class="controls-and-attachments__left">
+        {#if currentItemPostContainer}
+          <div class="controls-and-attachments__short-video-controls">
+            <PostControls
+              model={currentItemPostContainer}
+              socialInteractionsHandler={config.socialInteractionsHandler}
+              on={{ attachmentsClicked: changeShowAttachments }} />
+          </div>
+        {/if}
+        {#if config.playerBuffer}
+          <div class="controls-and-attachments__navigation-buttons" use:trackNavigationButtonsSize>
+            <button type="button" class="navigation-button" disabled={!config.playerBuffer.canLoadPrevious} onclick={config.playerBuffer.loadPrevious}>
+              <span class="navigation-button__icon">
+                <Icon src={IconChevronUp} />
+              </span>
+            </button>
+            <button type="button" class="navigation-button" disabled={!config.playerBuffer.canLoadNext} onclick={config.playerBuffer.loadNext}>
+              <span class="navigation-button__icon">
+                <Icon src={IconChevronDown} />
+              </span>
+            </button>
+          </div>
+        {/if}
+      </div>
+    {/if}
+    <div class="controls-and-attachments__right" use:trackAttachmentsPanelSize>
+      {#if !uiManager.showPostOverlayAttachments}
+        {#if config.playerLogo}
+          <div class="controls-and-attachments__player-logo">
+            <img src={config.playerLogo} class="controls-and-attachments__logo-img" alt="Player Logo" />
+          </div>
+        {/if}
+        {#if currentItemPostContainer && uiManager.showAttachments && (currentItemPostContainer.products.length || currentItemPostContainer.ads.length)}
+          <div class="controls-and-attachments__short-video-attachments" transition:slideHorizontally|local>
+            <PostAttachments
+              container={currentItemPostContainer}
+              locale={config.locale}
+              on={{
+                productClick: (id) => config.callbacks?.productClick?.(id, currentItemPostContainer.id),
+                productImpression: (id) => config.callbacks?.productImpression?.(id, currentItemPostContainer.id),
+                adClick: (id) => config.callbacks?.adClick?.(id, currentItemPostContainer.id),
+                adImpression: (id) => config.callbacks?.adImpression?.(id, currentItemPostContainer.id)
+              }} />
+          </div>
+        {/if}
+      {/if}
+    </div>
+  </div>
+{/if}
+
+{#if !config.mediaCenterControlsPanel && config.callbacks?.close}
+  <button type="button" class="close-button" onclick={config.callbacks.close}>
+    <Icon src={IconDismiss} />
+  </button>
+{/if}
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.controls-and-attachments {
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 100%;
+  width: var(--content-player--controls--available-space);
+  display: flex;
+  justify-content: space-between;
+  padding: var(--content-player--controls--padding);
+  container-type: inline-size;
+}
+.controls-and-attachments--with-logo {
+  padding-top: 0;
+}
+.controls-and-attachments__left {
+  display: flex;
+  flex-direction: column;
+  gap: 2.3125rem;
+  justify-content: flex-end;
+  align-items: center;
+  opacity: var(--content-player--elements-opacity);
+  transition: opacity 0.3s ease-in-out;
+}
+.controls-and-attachments__right {
+  flex: 1;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  flex-direction: column;
+  overflow-x: hidden;
+  overflow-y: auto;
+  scrollbar-color: transparent transparent;
+  scrollbar-width: thin;
+  scrollbar-gutter: stable;
+}
+.controls-and-attachments__right::-webkit-scrollbar {
+  width: 3px;
+  height: 3px;
+  background: transparent;
+}
+.controls-and-attachments__right::-webkit-scrollbar-thumb {
+  background: transparent;
+}
+.controls-and-attachments__right:hover {
+  scrollbar-color: var(--custom-scrollbar-color, #7d7d7d) var(--custom-scrollbar-background, transparent);
+  scrollbar-width: thin;
+}
+.controls-and-attachments__right:hover::-webkit-scrollbar {
+  width: 3px;
+  height: 3px;
+  background: var(--custom-scrollbar-background, transparent);
+}
+.controls-and-attachments__right:hover::-webkit-scrollbar-thumb {
+  background: var(--custom-scrollbar-color, #7d7d7d);
+}
+.controls-and-attachments__short-video-controls {
+  gap: 2.5rem;
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-end;
+  --short-video-controls--icon--size: 1.75rem;
+}
+.controls-and-attachments__player-logo {
+  width: var(--content-player--controls--logo--max-width);
+  max-width: var(--content-player--controls--logo--max-width);
+  height: var(--content-player--controls--logo--height);
+  min-height: var(--content-player--controls--logo--height);
+  max-height: var(--content-player--controls--logo--height);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.controls-and-attachments__logo-img {
+  width: 6.25rem;
+  min-width: 6.25rem;
+  max-width: 6.25rem;
+}
+.controls-and-attachments__short-video-attachments {
+  flex: 1;
+  width: var(--content-player--controls--attachments--max-width);
+  max-width: var(--content-player--controls--attachments--max-width);
+  opacity: var(--content-player--elements-opacity);
+  transition: opacity 0.3s ease-in-out;
+}
+.controls-and-attachments__navigation-buttons {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  z-index: 1;
+}
+
+.close-button {
+  width: 3rem;
+  min-width: 3rem;
+  max-width: 3rem;
+  height: 3rem;
+  min-height: 3rem;
+  max-height: 3rem;
+  background-color: rgba(0, 0, 0, 0.6);
+  border: 1px solid #1c1c1c;
+  border-radius: 50%;
+  text-align: center;
+  --icon--color: #ffffff;
+  --icon--size: 1.75rem;
+  position: absolute;
+  top: 0.9375rem;
+  left: calc(var(--content-player--controls--close-button--left) + 0.625rem);
+  z-index: 1;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+.close-button:hover {
+  background-color: rgba(0, 0, 0, 0.9);
+  transition: background-color 0.5s;
+}
+.close-button:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+@container (width < 576px) {
+  .close-button {
+    left: unset;
+    right: 0.625rem;
+  }
+}
+
+.navigation-button {
+  --_icon-scale: 1;
+  width: 3rem;
+  min-width: 3rem;
+  max-width: 3rem;
+  height: 3rem;
+  min-height: 3rem;
+  max-height: 3rem;
+  background-color: rgba(0, 0, 0, 0.6);
+  border: 1px solid #1c1c1c;
+  border-radius: 50%;
+  text-align: center;
+  --icon--color: #ffffff;
+  --icon--size: 1.75rem;
+}
+.navigation-button:hover {
+  background-color: rgba(0, 0, 0, 0.9);
+  transition: background-color 0.5s;
+}
+.navigation-button:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+.navigation-button:hover:not(:disabled) {
+  --_icon-scale: 1.2;
+}
+.navigation-button__icon {
+  display: block;
+  transform: scale(var(--_icon-scale));
+  transition: 0.3s;
+}</style>