@streamscloud/embeddable 10.1.2 → 12.0.0

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

@@ -5,9 +5,11 @@ import { PlayerButton } from '../ui/player/button';
 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;
 let attachmentsCollapsed = $state(false);
+let closeButtonAreaHeight = $state(0);
 const currentItemPostContainer = $derived.by(() => {
     var _a;
     if (!((_a = config.playerBuffer) === null || _a === void 0 ? void 0 : _a.current)) {
@@ -30,11 +32,26 @@ const trackAttachmentsPanelSize = (node) => {
         }
     };
 };
+const handleCloseButtonMounted = (node) => {
+    const resizeObserver = new ResizeObserver(([entry]) => {
+        const height = entry.target.getBoundingClientRect().height;
+        closeButtonAreaHeight = height;
+    });
+    resizeObserver.observe(node);
+    return {
+        destroy() {
+            resizeObserver.disconnect();
+            closeButtonAreaHeight = 0;
+        }
+    };
+};
+const showCloseButton = $derived.by(() => {
+    return config.closeOrchestrator.closeTriggerVisible && !config.closeOrchestrator.closeTriggerAttached;
+});
 const variables = $derived.by(() => {
     const values = [
         `--_controls-and-attachments--attachments--max-width: ${uiManager.attachmentsMaxWidth}px`,
-        `--_controls-and-attachments--logo--max-width: ${uiManager.attachmentsMaxWidth}px`,
-        `--_controls-and-attachments--logo--height: ${uiManager.mediaCenterHeaderHeight || 72}px`,
+        `--_controls-and-attachments--spacing-top: ${closeButtonAreaHeight}px`,
         `--_controls-and-attachments--width: ${uiManager.sidePanelsMaxWidth}px`
     ];
     return values.join(';');
@@ -42,12 +59,14 @@ const variables = $derived.by(() => {
 </script>
 
 {#if !uiManager.showPostOverlayControls}
-  <div class="controls-and-attachments" class:controls-and-attachments--with-logo={!!config.playerLogo} style={variables}>
+  <div class="controls-and-attachments" style={variables}>
     <div class="controls-and-attachments__spacer">&nbsp;</div>
     <div class="controls-and-attachments__left">
       {#if currentItemPostContainer}
         <PostControls
           model={currentItemPostContainer}
+          activeColor={config.playerColors.button}
+          inactiveColor={config.playerColors.buttonInactive}
           socialInteractionsHandler={config.socialInteractionsHandler}
           on={{ attachmentsClicked: changeShowAttachments }} />
       {/if}
@@ -57,24 +76,33 @@ const variables = $derived.by(() => {
           class:controls-and-attachments__navigation-buttons--invisible={config.playerBuffer.loaded.length <= 1}>
           <PlayerButton
             icon={IconChevronUp}
+            activeColor={config.playerColors.button}
+            inactiveColor={config.playerColors.buttonInactive}
             disabled={!config.playerBuffer.canLoadPrevious}
             scaleEffect={true}
             on={{ click: config.playerBuffer.loadPrevious }} />
-          <PlayerButton icon={IconChevronDown} disabled={!config.playerBuffer.canLoadNext} scaleEffect={true} on={{ click: config.playerBuffer.loadNext }} />
+          <PlayerButton
+            icon={IconChevronDown}
+            activeColor={config.playerColors.button}
+            inactiveColor={config.playerColors.buttonInactive}
+            disabled={!config.playerBuffer.canLoadNext}
+            scaleEffect={true}
+            on={{ click: config.playerBuffer.loadNext }} />
         </div>
       {/if}
     </div>
     <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 && !attachmentsCollapsed && currentItemPostContainer.attachments}
           <div class="controls-and-attachments__post-attachments" transition:slideHorizontally|local>
             <PostAttachments
               model={currentItemPostContainer}
+              colors={{
+                background: config.playerColors.cardBackground,
+                price: config.playerColors.price,
+                salePrice: config.playerColors.salePrice,
+                buttonBackground: config.playerColors.cardButton
+              }}
               trackingParams={config.trackingParams}
               locale={config.settings.locale}
               on={{
@@ -87,7 +115,18 @@ const variables = $derived.by(() => {
         {/if}
       {/if}
     </div>
-    <div class="controls-and-attachments__spacer">&nbsp;</div>
+    <div class="controls-and-attachments__spacer controls-and-attachments__spacer--right">&nbsp;</div>
+  </div>
+{/if}
+
+{#if showCloseButton}
+  <div class="close-button" use:handleCloseButtonMounted>
+    <PlayerButton
+      icon={IconDismiss}
+      zoom={0.8}
+      activeColor={config.playerColors.button ?? null}
+      inactiveColor={config.playerColors.buttonInactive ?? null}
+      on={{ click: config.closeOrchestrator.requestClose }} />
   </div>
 {/if}
 
@@ -110,24 +149,22 @@ const variables = $derived.by(() => {
   width: var(--_controls-and-attachments--width);
   display: flex;
   justify-content: space-between;
-  padding: 1.75rem 0;
+  padding: calc(0.625rem + var(--_controls-and-attachments--spacing-top)) 0 1.875rem 0;
   pointer-events: none;
 }
-.controls-and-attachments--with-logo {
-  padding-top: 0;
-}
 .controls-and-attachments__spacer {
-  flex: 0 1 1.75rem;
+  flex: 0 1 1.875rem;
   min-width: 0;
 }
+.controls-and-attachments__spacer--right {
+  flex-basis: 1.25rem;
+}
 .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;
@@ -135,21 +172,6 @@ const variables = $derived.by(() => {
   align-items: flex-end;
   flex-direction: column;
 }
-.controls-and-attachments__player-logo {
-  width: var(--_controls-and-attachments--logo--max-width);
-  max-width: var(--_controls-and-attachments--logo--max-width);
-  height: var(--_controls-and-attachments--logo--height);
-  min-height: var(--_controls-and-attachments--logo--height);
-  max-height: var(--_controls-and-attachments--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__post-attachments {
   flex: 1 1 auto;
   width: var(--_controls-and-attachments--attachments--max-width);
@@ -157,32 +179,7 @@ const variables = $derived.by(() => {
   pointer-events: auto;
   overflow-x: hidden;
   overflow-y: auto;
-  opacity: var(--content-player--elements-opacity);
-  transition: opacity 0.3s ease-in-out;
-  --_cross-browser-scrollbar--thumb-color: transparent;
-  --_cross-browser-scrollbar--track-color: transparent;
-}
-.controls-and-attachments__post-attachments:hover {
-  --_cross-browser-scrollbar--thumb-color: var(--scrollbar--thumb-color, #7d7d7d);
-  --_cross-browser-scrollbar--track-color: var(--scrollbar--track-color, transparent);
-}
-.controls-and-attachments__post-attachments::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-.controls-and-attachments__post-attachments::-webkit-scrollbar-track {
-  background: var(--_cross-browser-scrollbar--track-color);
-  border-radius: 100vw;
-}
-.controls-and-attachments__post-attachments::-webkit-scrollbar-thumb {
-  background: var(--_cross-browser-scrollbar--thumb-color);
-  border-radius: 100vw;
-}
-@supports (scrollbar-color: transparent transparent) {
-  .controls-and-attachments__post-attachments {
-    scrollbar-color: var(--_cross-browser-scrollbar--thumb-color) var(--_cross-browser-scrollbar--track-color);
-    scrollbar-width: thin;
-  }
+  scrollbar-width: none;
 }
 .controls-and-attachments__navigation-buttons {
   display: flex;
@@ -192,4 +189,12 @@ const variables = $derived.by(() => {
 }
 .controls-and-attachments__navigation-buttons--invisible {
   visibility: hidden;
+}
+
+.close-button {
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding-block: 0.9375rem;
+  padding-right: 1.25rem;
 }</style>

package/dist/content-player/overview-panel.svelte

@@ -1,44 +1,29 @@
 <script lang="ts">import { slideHorizontally } from '../core/transitions';
-import { Icon } from '../ui/icon';
-import IconPanelLeftText from '@fluentui/svg-icons/icons/panel_left_text_20_regular.svg?raw';
-let { children, contentFaded, uiManager } = $props();
-const overviewAttached = (node) => {
-    const resizeObserver = new ResizeObserver(() => {
-        uiManager.overviewWidth = node.clientWidth;
-    });
-    resizeObserver.observe(node);
-    return {
-        destroy() {
-            resizeObserver.disconnect();
-            uiManager.overviewWidth = 0;
-        }
-    };
-};
+let { config, uiManager, position, children } = $props();
 const handlePanelClick = (e) => {
     e.stopPropagation();
-    uiManager.overviewCollapsed = true;
 };
-const panelVariables = $derived.by(() => {
-    const values = [`--_overview-panel--max-width: ${uiManager.overviewMaxWidth}px`, `--_overview-panel--max-width--safe-area: ${uiManager.safeAreaSize}px`];
-    return values.join(';');
-});
-const buttonVariables = $derived.by(() => {
-    const values = [`--_overview-panel--collapse-button--expaneded-left: ${uiManager.overviewWidth}px`];
+const styles = $derived.by(() => {
+    const values = [
+        `--overview-panel--width: ${uiManager.overviewMaxWidth}px`,
+        `--overview-panel--top: ${position.top}px`,
+        `--overview-panel--bottom: ${position.bottom}px`,
+        `--overview-panel--right: ${position.right}px`
+    ];
+    if (config.playerColors.sidebarBackground) {
+        values.push(`--overview-panel--background: ${config.playerColors.sidebarBackground}`);
+    }
+    if (config.playerColors.brand) {
+        values.push(`--overview-panel--brand-color: ${config.playerColors.brand}`);
+    }
     return values.join(';');
 });
 </script>
 
-<!--Double if for correct behavior of slideHorizontally-->
+<!--Double `if` for correct behavior of slideHorizontally-->
 {#if uiManager.viewInitialized}
-  {#if !uiManager.overviewCollapsed && !contentFaded}
-    <div
-      class="overview-panel"
-      transition:slideHorizontally|local
-      use:overviewAttached
-      style={panelVariables}
-      onclick={handlePanelClick}
-      onkeydown={() => {}}
-      role="none">
+  {#if !uiManager.overviewCollapsed}
+    <div class="overview-panel" style={styles} transition:slideHorizontally|local onclick={handlePanelClick} onkeydown={() => {}} role="none">
       <div class="overview-panel__content" onclick={(e) => e.stopPropagation()} onkeydown={() => {}} role="none">
         {@render children()}
       </div>
@@ -46,15 +31,6 @@ const buttonVariables = $derived.by(() => {
   {/if}
 {/if}
 
-<button
-  class="toggle-collapsed-button"
-  class:toggle-collapsed-button--overview-expanded={!!uiManager.overviewWidth}
-  style={buttonVariables}
-  type="button"
-  onclick={() => (uiManager.overviewCollapsed = !uiManager.overviewCollapsed)}>
-  <Icon src={IconPanelLeftText} />
-</button>
-
 <style>@keyframes fadeIn {
   0% {
     opacity: 1;
@@ -67,23 +43,27 @@ const buttonVariables = $derived.by(() => {
   }
 }
 .overview-panel {
-  height: 100%;
-  min-height: 100%;
-  max-height: 100%;
-  width: var(--_overview-panel--max-width);
-  min-width: var(--_overview-panel--max-width);
-  max-width: var(--_overview-panel--max-width);
+  --_overview-panel--background: var(--overview-panel--background, #1c1c1c);
+  --_overview-panel--width: var(--overview-panel--width);
+  --_overview-panel--top: var(--overview-panel--top);
+  --_overview-panel--bottom: var(--overview-panel--bottom);
+  --_overview-panel--right: var(--overview-panel--right);
+  --brand-color: var(--overview-panel--brand-color);
+  width: var(--_overview-panel--width);
+  min-width: var(--_overview-panel--width);
+  max-width: var(--_overview-panel--width);
   position: absolute;
-  top: 0;
-  left: 0;
-  height: 100%;
-  z-index: 1;
+  top: var(--_overview-panel--top);
+  right: var(--_overview-panel--right);
+  bottom: var(--_overview-panel--bottom);
+  z-index: 0;
+  border-radius: 0.5rem 0 0 0.5rem;
+  background: var(--_overview-panel--background);
   /* Set 'container-type: inline-size;' to reference container*/
 }
 .overview-panel__content {
   width: 100%;
   height: 100%;
-  background: #1c1c1c;
   display: flex;
   flex-direction: column;
   min-height: 0;
@@ -102,26 +82,4 @@ const buttonVariables = $derived.by(() => {
     min-width: 80%;
     max-width: 80%;
   }
-}
-
-.toggle-collapsed-button {
-  position: absolute;
-  bottom: 0.625rem;
-  padding: 0.625rem;
-  padding-bottom: 0;
-  z-index: 1;
-  --icon--color: #ffffff;
-  --icon--size: 1.25rem;
-  opacity: var(--content-player--elements-opacity);
-  transition: opacity 0.3s ease-in-out;
-  /* Set 'container-type: inline-size;' to reference container*/
-}
-.toggle-collapsed-button--overview-expanded {
-  left: var(--_overview-panel--collapse-button--expaneded-left);
-  transform: translateX(-100%);
-}
-@container (width < 576px) {
-  .toggle-collapsed-button {
-    display: none;
-  }
 }</style>

package/dist/content-player/overview-panel.svelte.d.ts

@@ -1,10 +1,37 @@
+import type { ContentPlayerConfig } from './content-player-config.svelte';
 import type { ContentPlayerUIManager } from './ui-manager.svelte';
 import type { Snippet } from 'svelte';
-type Props = {
-    uiManager: ContentPlayerUIManager;
-    contentFaded: boolean;
-    children: Snippet;
-};
-declare const OverviewPanel: import("svelte").Component<Props, {}, "">;
-type OverviewPanel = ReturnType<typeof OverviewPanel>;
+declare class __sveltets_Render<T extends {
+    id: string;
+}> {
+    props(): {
+        config: ContentPlayerConfig<T>;
+        uiManager: ContentPlayerUIManager;
+        position: {
+            top: number;
+            bottom: number;
+            right: number;
+        };
+        children: 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 OverviewPanel: $$IsomorphicComponent;
+type OverviewPanel<T extends {
+    id: string;
+}> = InstanceType<typeof OverviewPanel<T>>;
 export default OverviewPanel;

package/dist/content-player/ui-manager.svelte.d.ts

@@ -1,17 +1,13 @@
 export declare class ContentPlayerUIManager {
-    overviewCollapsed: boolean;
-    overviewWidth: number;
-    readonly overviewMaxWidth = 220;
+    readonly overviewCollapsed: boolean;
+    readonly overviewMaxWidth = 150;
     attachmentsWidth: number;
     readonly attachmentsMaxWidth = 176;
     playerTotalWidth: number;
     contentViewWidth: number;
     readonly sidePanelsMaxWidth: number;
-    readonly safeAreaSize = 70;
     readonly isMobileView: boolean;
     readonly viewInitialized: boolean;
-    backgroundImageUrl: string | null;
-    mediaCenterHeaderHeight: number;
     showPostOverlayAttachments: boolean;
     showPostOverlayControls: boolean;
 }

package/dist/content-player/ui-manager.svelte.js

@@ -1,20 +1,16 @@
 const ATTACHMENTS_MAX_WIDTH = 176;
-const OVERVIEW_MAX_WIDTH = 220;
+const OVERLAY_MAX_WIDTH = 150;
 const SAFE_AREA_SIZE = 70;
 export class ContentPlayerUIManager {
-    overviewCollapsed = $state(false);
-    overviewWidth = $state(0);
-    overviewMaxWidth = OVERVIEW_MAX_WIDTH;
+    overviewCollapsed = $derived.by(() => this.overviewMaxWidth > this.sidePanelsMaxWidth);
+    overviewMaxWidth = OVERLAY_MAX_WIDTH;
     attachmentsWidth = $state(0);
     attachmentsMaxWidth = ATTACHMENTS_MAX_WIDTH;
     playerTotalWidth = $state(0);
     contentViewWidth = $state(0);
     sidePanelsMaxWidth = $derived.by(() => (this.playerTotalWidth - this.contentViewWidth) / 2);
-    safeAreaSize = SAFE_AREA_SIZE;
     isMobileView = $derived.by(() => this.playerTotalWidth <= 576);
     viewInitialized = $derived.by(() => !!this.playerTotalWidth && !!this.contentViewWidth);
-    backgroundImageUrl = $state(null);
-    mediaCenterHeaderHeight = $state(0);
     showPostOverlayAttachments = $derived.by(() => this.viewInitialized && this.attachmentsWidth < ATTACHMENTS_MAX_WIDTH + 10);
     showPostOverlayControls = $derived.by(() => this.viewInitialized && this.sidePanelsMaxWidth < SAFE_AREA_SIZE);
 }

package/dist/media-center/config/internal-media-center-config.d.ts

@@ -1,10 +1,14 @@
 import type { IMediaCenterConfig } from './types';
 export declare class InternalMediaCenterConfig implements IMediaCenterConfig {
-    private readonly mediaPageId;
     postsPlayer: IMediaCenterConfig['postsPlayer'];
     streamPlayer: IMediaCenterConfig['streamPlayer'];
     handlers: IMediaCenterConfig['handlers'];
-    private graphql;
-    constructor(mediaPageId: string, graphqlOrigin?: string, testingStuff?: boolean);
     getConfig: IMediaCenterConfig['getConfig'];
+    private graphql;
+    constructor(input: {
+        mediaPageId: string;
+        initiator?: string;
+        graphqlOrigin?: string;
+        testingStuff?: boolean;
+    });
 }

package/dist/media-center/config/internal-media-center-config.js

@@ -7,19 +7,40 @@ import { getStreamPagesCursor, getStreamsCursor } from '../../streams/data-loade
 import { InternalMediaCenterAnalyticsHandler } from './internal-media-center-analytics-handler';
 import { GetMediaPageConfigDocument } from './operations.generated';
 export class InternalMediaCenterConfig {
-    mediaPageId;
     postsPlayer;
     streamPlayer;
     handlers;
+    getConfig;
     graphql;
-    constructor(mediaPageId, graphqlOrigin, testingStuff) {
-        this.mediaPageId = mediaPageId;
-        this.graphql = createLocalGQLClient(graphqlOrigin);
+    constructor(input) {
+        const { mediaPageId, graphqlOrigin, initiator, testingStuff } = input;
+        this.graphql = createLocalGQLClient(graphqlOrigin, initiator ? { 'x-initiator': initiator } : undefined);
+        this.getConfig = async () => {
+            const payload = await this.graphql.query(GetMediaPageConfigDocument, { mediaPageId }).toPromise();
+            if (!payload.data?.embedMediaPagePlayerConfig) {
+                return null;
+            }
+            const config = payload.data.embedMediaPagePlayerConfig;
+            return {
+                targetData: {
+                    id: config.mediaPage.id,
+                    handle: config.mediaPage.handle,
+                    name: config.mediaPage.name,
+                    description: config.mediaPage.description,
+                    image: config.mediaPage.image?.url || null,
+                    logo: config.mediaPage.logo?.url || null,
+                    banner: config.mediaPage.banner?.url || null,
+                    membersCount: config.mediaPage.membersCount
+                },
+                contentCategories: config.playerSettings?.contentCategories || [],
+                playerColors: config.playerSettings?.colors || null
+            };
+        };
         this.postsPlayer = {
             getPostsCursor: async ({ filter, limit, continuationToken }) => {
                 return await getPostsCursor({
                     filter: {
-                        mediaPageId: this.mediaPageId,
+                        mediaPageId,
                         types: filter.types,
                         statuses: [Status.Published],
                         categoryId: filter.categoryId,
@@ -35,7 +56,7 @@ export class InternalMediaCenterConfig {
             getStreamsCursor: async ({ filter, limit, continuationToken }) => {
                 return await getStreamsCursor({
                     filter: {
-                        mediaPageId: this.mediaPageId,
+                        mediaPageId,
                         categoryId: filter.categoryId,
                         excludeIds: filter.excludeIds,
                         statuses: [StreamStatus.Published],
@@ -60,21 +81,4 @@ export class InternalMediaCenterConfig {
             socialInteractionsHandler: testingStuff ? new MockPostSocialInteractionsHandler() : undefined
         };
     }
-    getConfig = async () => {
-        const payload = await this.graphql.query(GetMediaPageConfigDocument, { mediaPageId: this.mediaPageId }).toPromise();
-        if (!payload.data?.embedMediaPagePlayerConfig) {
-            return null;
-        }
-        const config = payload.data.embedMediaPagePlayerConfig;
-        return {
-            targetData: {
-                id: config.mediaPage.id,
-                name: config.mediaPage.name,
-                image: config.mediaPage.image,
-                membersCount: config.mediaPage.membersCount
-            },
-            logo: config.playerSettings?.logo?.url || null,
-            contentCategories: config.playerSettings?.contentCategories || []
-        };
-    };
 }

package/dist/media-center/config/operations.generated.d.ts

@@ -7,19 +7,39 @@ export type GetMediaPageConfigQuery = {
     embedMediaPagePlayerConfig: {
         mediaPage: {
             id: string;
+            handle: string;
             name: string;
-            image: string | null;
+            description: string;
             membersCount: number;
-        };
-        playerSettings: {
+            image: {
+                url: string;
+            } | null;
             logo: {
                 url: string;
             } | null;
+            banner: {
+                url: string;
+            } | null;
+        };
+        playerSettings: {
             contentCategories: Array<{
                 id: string;
                 name: string;
+                image: string | null;
                 parentId: string | null;
             }>;
+            colors: {
+                brand: string | null;
+                button: string | null;
+                buttonInactive: string | null;
+                cardButton: string | null;
+                cardBackground: string | null;
+                menuBackground: string | null;
+                playerBackground: string | null;
+                price: string | null;
+                salePrice: string | null;
+                sidebarBackground: string | null;
+            } | null;
         } | null;
     } | null;
 };

package/dist/media-center/config/operations.generated.js

@@ -44,8 +44,24 @@ export const GetMediaPageConfigDocument = {
                                         kind: 'SelectionSet',
                                         selections: [
                                             { kind: 'Field', name: { kind: 'Name', value: 'id' } },
+                                            { kind: 'Field', name: { kind: 'Name', value: 'handle' } },
                                             { kind: 'Field', name: { kind: 'Name', value: 'name' } },
-                                            { kind: 'Field', name: { kind: 'Name', value: 'image' } },
+                                            { kind: 'Field', name: { kind: 'Name', value: 'description' } },
+                                            {
+                                                kind: 'Field',
+                                                name: { kind: 'Name', value: 'image' },
+                                                selectionSet: { kind: 'SelectionSet', selections: [{ kind: 'Field', name: { kind: 'Name', value: 'url' } }] }
+                                            },
+                                            {
+                                                kind: 'Field',
+                                                name: { kind: 'Name', value: 'logo' },
+                                                selectionSet: { kind: 'SelectionSet', selections: [{ kind: 'Field', name: { kind: 'Name', value: 'url' } }] }
+                                            },
+                                            {
+                                                kind: 'Field',
+                                                name: { kind: 'Name', value: 'banner' },
+                                                selectionSet: { kind: 'SelectionSet', selections: [{ kind: 'Field', name: { kind: 'Name', value: 'url' } }] }
+                                            },
                                             { kind: 'Field', name: { kind: 'Name', value: 'membersCount' } }
                                         ]
                                     }
@@ -56,11 +72,6 @@ export const GetMediaPageConfigDocument = {
                                     selectionSet: {
                                         kind: 'SelectionSet',
                                         selections: [
-                                            {
-                                                kind: 'Field',
-                                                name: { kind: 'Name', value: 'logo' },
-                                                selectionSet: { kind: 'SelectionSet', selections: [{ kind: 'Field', name: { kind: 'Name', value: 'url' } }] }
-                                            },
                                             {
                                                 kind: 'Field',
                                                 name: { kind: 'Name', value: 'contentCategories' },
@@ -69,9 +80,29 @@ export const GetMediaPageConfigDocument = {
                                                     selections: [
                                                         { kind: 'Field', name: { kind: 'Name', value: 'id' } },
                                                         { kind: 'Field', name: { kind: 'Name', value: 'name' } },
+                                                        { kind: 'Field', name: { kind: 'Name', value: 'image' } },
                                                         { kind: 'Field', name: { kind: 'Name', value: 'parentId' } }
                                                     ]
                                                 }
+                                            },
+                                            {
+                                                kind: 'Field',
+                                                name: { kind: 'Name', value: 'colors' },
+                                                selectionSet: {
+                                                    kind: 'SelectionSet',
+                                                    selections: [
+                                                        { kind: 'Field', name: { kind: 'Name', value: 'brand' } },
+                                                        { kind: 'Field', name: { kind: 'Name', value: 'button' } },
+                                                        { kind: 'Field', name: { kind: 'Name', value: 'buttonInactive' } },
+                                                        { kind: 'Field', name: { kind: 'Name', value: 'cardButton' } },
+                                                        { kind: 'Field', name: { kind: 'Name', value: 'cardBackground' } },
+                                                        { kind: 'Field', name: { kind: 'Name', value: 'menuBackground' } },
+                                                        { kind: 'Field', name: { kind: 'Name', value: 'playerBackground' } },
+                                                        { kind: 'Field', name: { kind: 'Name', value: 'price' } },
+                                                        { kind: 'Field', name: { kind: 'Name', value: 'salePrice' } },
+                                                        { kind: 'Field', name: { kind: 'Name', value: 'sidebarBackground' } }
+                                                    ]
+                                                }
                                             }
                                         ]
                                     }