@streamscloud/embeddable 10.1.2 → 11.0.0

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

@@ -1,44 +1,24 @@
 <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, contentFaded, uiManager, 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`];
+    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">
+    <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 +26,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 +38,24 @@ 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);
+  --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;
+  right: calc(100% - 0.375rem);
+  bottom: 0;
+  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 +74,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,33 @@
+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;
+        contentFaded: boolean;
+        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,7 +1,6 @@
 export declare class ContentPlayerUIManager {
-    overviewCollapsed: boolean;
-    overviewWidth: number;
-    readonly overviewMaxWidth = 220;
+    readonly overviewCollapsed: boolean;
+    readonly overviewMaxWidth = 150;
     attachmentsWidth: number;
     readonly attachmentsMaxWidth = 176;
     playerTotalWidth: number;
@@ -11,7 +10,6 @@ export declare class ContentPlayerUIManager {
     readonly isMobileView: boolean;
     readonly viewInitialized: boolean;
     backgroundImageUrl: string | null;
-    mediaCenterHeaderHeight: number;
     showPostOverlayAttachments: boolean;
     showPostOverlayControls: boolean;
 }

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

@@ -1,10 +1,9 @@
 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);
@@ -14,7 +13,6 @@ export class ContentPlayerUIManager {
     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.js

@@ -74,7 +74,8 @@ export class InternalMediaCenterConfig {
                 membersCount: config.mediaPage.membersCount
             },
             logo: config.playerSettings?.logo?.url || null,
-            contentCategories: config.playerSettings?.contentCategories || []
+            contentCategories: config.playerSettings?.contentCategories || [],
+            playerColors: config.playerSettings?.colors || null
         };
     };
 }

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

@@ -18,8 +18,21 @@ export type GetMediaPageConfigQuery = {
             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

@@ -69,9 +69,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' } }
+                                                    ]
+                                                }
                                             }
                                         ]
                                     }

package/dist/media-center/config/operations.graphql

@@ -13,8 +13,21 @@ query GetMediaPageConfig($mediaPageId: String!) {
       contentCategories {
         id
         name
+        image
         parentId
       }
+      colors {
+        brand
+        button
+        buttonInactive
+        cardButton
+        cardBackground
+        menuBackground
+        playerBackground
+        price
+        salePrice
+        sidebarBackground
+      }
     }
   }
 }

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

@@ -48,9 +48,22 @@ export type MediaCenterConfigModel = {
     contentCategories: {
         id: string;
         name: string;
+        image: string | null;
         parentId: string | null;
     }[];
     targetData: MediaCenterTargetDataModel;
+    playerColors: {
+        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;
 };
 export type MediaCenterTargetDataModel = {
     id: string;