@streamscloud/embeddable 16.0.5 → 16.0.7

package/dist/media-page/cmp.media-page.svelte

@@ -33,4 +33,4 @@ const initHost = (node) => {
 };
 </script>
 
-<div class="streams-player-host" use:initHost></div>
+<div class="media-page-host" use:initHost></div>

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

@@ -1,8 +1,13 @@
 <script lang="ts">import { CloseOrchestrator } from '../../ui/player/close-orchestrator';
 import { createShadowRoot } from '../../ui/shadow-dom';
+import { PostsPlayerHostSettings } from './posts-player-host-settings.svelte';
 import { default as PostsPlayerProxy } from './posts-player-proxy.svelte';
-import { mount, unmount } from 'svelte';
+import { mount, unmount, untrack } from 'svelte';
 let { dataProvider, socialInteractionsHandler, sharingHandler, playerSettings, analyticsHandler, on } = $props();
+const settingsHolder = untrack(() => new PostsPlayerHostSettings(playerSettings));
+$effect(() => {
+    settingsHolder.update(playerSettings);
+});
 const initHost = (node) => {
     const shadowRoot = createShadowRoot(node);
     const mounted = mount(PostsPlayerProxy, {
@@ -11,7 +16,7 @@ const initHost = (node) => {
             dataProvider,
             socialInteractionsHandler,
             sharingHandler,
-            playerSettings,
+            playerSettings: settingsHolder,
             analyticsHandler,
             closeOrchestrator: new CloseOrchestrator({
                 closeFn: async () => {

package/dist/posts/posts-player/posts-player-host-settings.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { ThemeValue } from '../../core/theme';
+import type { AppLocaleValue } from '@streamscloud/kit/core/locale';
+export declare class PostsPlayerHostSettings {
+    locale: AppLocaleValue | undefined;
+    showStreamsCloudWatermark: boolean | undefined;
+    disableBackground: boolean | undefined;
+    theme: ThemeValue | undefined;
+    constructor(init: {
+        locale?: AppLocaleValue;
+        showStreamsCloudWatermark?: boolean;
+        disableBackground?: boolean;
+        theme?: ThemeValue;
+    } | undefined);
+    update: (data: {
+        locale?: AppLocaleValue;
+        showStreamsCloudWatermark?: boolean;
+        disableBackground?: boolean;
+        theme?: ThemeValue;
+    } | undefined) => void;
+}

package/dist/posts/posts-player/posts-player-host-settings.svelte.js

@@ -0,0 +1,15 @@
+export class PostsPlayerHostSettings {
+    locale = $state();
+    showStreamsCloudWatermark = $state();
+    disableBackground = $state();
+    theme = $state();
+    constructor(init) {
+        this.update(init);
+    }
+    update = (data) => {
+        this.locale = data?.locale;
+        this.showStreamsCloudWatermark = data?.showStreamsCloudWatermark;
+        this.disableBackground = data?.disableBackground;
+        this.theme = data?.theme;
+    };
+}

package/dist/streams/layout/cmp.slot-content.svelte

@@ -93,11 +93,7 @@ const productLinkMounted = (node, productModel) => {
       {@render slotContent()}
     </a>
   {:else}
-    <button
-      type="button"
-      class="stream-slot-content-product-link"
-      onclick={handleProductClick}
-      use:productLinkMounted={productModel}>
+    <button type="button" class="stream-slot-content-product-link" onclick={handleProductClick} use:productLinkMounted={productModel}>
       {@render slotContent()}
     </button>
   {/if}

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

@@ -1,8 +1,13 @@
 <script lang="ts">import { CloseOrchestrator } from '../../ui/player/close-orchestrator';
 import { createShadowRoot } from '../../ui/shadow-dom';
+import { StreamsPlayerHostSettings } from './streams-player-host-settings.svelte';
 import { default as StreamsPlayerProxy } from './streams-player-proxy.svelte';
-import { mount, unmount } from 'svelte';
+import { mount, unmount, untrack } from 'svelte';
 let { dataProvider, postSocialInteractionsHandler, sharingHandler, amplificationParameters, playerSettings, analyticsHandler, on } = $props();
+const settingsHolder = untrack(() => new StreamsPlayerHostSettings(playerSettings));
+$effect(() => {
+    settingsHolder.update(playerSettings);
+});
 const initHost = (node) => {
     const shadowRoot = createShadowRoot(node);
     const mounted = mount(StreamsPlayerProxy, {
@@ -13,7 +18,7 @@ const initHost = (node) => {
             sharingHandler,
             analyticsHandler,
             amplificationParameters,
-            playerSettings,
+            playerSettings: settingsHolder,
             closeOrchestrator: new CloseOrchestrator({
                 closeFn: async () => {
                     await unmount(mounted);

package/dist/streams/streams-player/streams-player-host-settings.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { ThemeValue } from '../../core/theme';
+import type { AppLocaleValue } from '@streamscloud/kit/core/locale';
+export declare class StreamsPlayerHostSettings {
+    locale: AppLocaleValue | undefined;
+    showStreamsCloudWatermark: boolean | undefined;
+    disableBackground: boolean | undefined;
+    theme: ThemeValue | undefined;
+    constructor(init: {
+        locale?: AppLocaleValue;
+        showStreamsCloudWatermark?: boolean;
+        disableBackground?: boolean;
+        theme?: ThemeValue;
+    } | undefined);
+    update: (data: {
+        locale?: AppLocaleValue;
+        showStreamsCloudWatermark?: boolean;
+        disableBackground?: boolean;
+        theme?: ThemeValue;
+    } | undefined) => void;
+}

package/dist/streams/streams-player/streams-player-host-settings.svelte.js

@@ -0,0 +1,15 @@
+export class StreamsPlayerHostSettings {
+    locale = $state();
+    showStreamsCloudWatermark = $state();
+    disableBackground = $state();
+    theme = $state();
+    constructor(init) {
+        this.update(init);
+    }
+    update = (data) => {
+        this.locale = data?.locale;
+        this.showStreamsCloudWatermark = data?.showStreamsCloudWatermark;
+        this.disableBackground = data?.disableBackground;
+        this.theme = data?.theme;
+    };
+}

package/dist/ui/shadow-dom/cmp.shadow-root.svelte

@@ -81,6 +81,7 @@ const styles = $derived.by(() => {
   --sc-mc-color--text-secondary: light-dark(#6b7280, #d1d5db);
   --sc-mc-color--text-white: #ffffff;
   --sc-mc-color--text-white-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 6px rgba(0, 0, 0, 0.05);
+  color: var(--sc-mc-color--text-primary);
   /* Player brand colors — overridable via --sc-player--{light|dark}--{name} custom properties */
   --sc-player--background: light-dark(
     var(--sc-player--light--background, rgb(from var(--sc-mc-color--bg-screen) r g b / 90%)),
@@ -128,10 +129,14 @@ const styles = $derived.by(() => {
   height: 100%;
   min-height: 100%;
   max-height: 100%;
+  box-sizing: border-box;
   container-type: inline-size;
   display: flex;
   flex-direction: column;
+  font: 400 16px Inter, sans-serif, arial;
+  line-height: 1.15;
   position: relative;
+  text-align: initial;
 }
 .shadow-root:before {
   content: "";

package/dist/ui/shadow-dom/colors.scss

@@ -38,6 +38,8 @@
   --sc-mc-color--text-white: #{colors.$color-white};
   --sc-mc-color--text-white-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 6px rgba(0, 0, 0, 0.05);
 
+  color: var(--sc-mc-color--text-primary);
+
   /* Player brand colors — overridable via --sc-player--{light|dark}--{name} custom properties */
   --sc-player--background: light-dark(
     var(--sc-player--light--background, rgb(from var(--sc-mc-color--bg-screen) r g b / 90%)),

package/dist/ui/shadow-dom/shadow-root-service.js

@@ -10,11 +10,4 @@ export const createShadowRoot = (host) => {
 };
 const prepareShadowRootHost = (host) => {
     host.style.all = 'unset';
-    host.style.lineHeight = '1.15';
-    host.style.font = '16px Inter, sans-serif, arial';
-    host.style.fontWeight = '400';
-    host.style.margin = '0';
-    host.style.boxSizing = 'border-box';
-    host.style.textAlign = 'initial';
-    host.style.color = 'var(--sc-mc-color--text-primary)';
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/embeddable",
-  "version": "16.0.5",
+  "version": "16.0.7",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",
@@ -16,6 +16,7 @@
     "pack": "npm run build && npm pack",
     "preview": "vite preview",
     "check": "svelte-check --tsconfig ./tsconfig.app.json && tsc -p tsconfig.node.json",
+    "check:strict": "svelte-check --tsconfig ./tsconfig.app.json --fail-on-warnings --output machine && eslint . --format codeframe --max-warnings 0 && prettier --check --plugin prettier-plugin-svelte --cache .",
     "uad": "graphql-codegen --config codegen.yml && prettier --write src/**/*.generated.ts src/gql/*",
     "uad-types-only": "graphql-codegen --config codegen.types-only.yml && prettier --write src/gql/*",
     "lint": "prettier --check --plugin prettier-plugin-svelte . && eslint .",
@@ -133,7 +134,7 @@
     }
   },
   "peerDependencies": {
-    "@streamscloud/kit": "^0.1.8",
+    "@streamscloud/kit": "^0.1.12",
     "@streamscloud/streams-analytics-collector": "^4.0.1",
     "svelte": "^5.51.0"
   },
@@ -149,7 +150,7 @@
     "@graphql-codegen/typescript": "^5.0.7",
     "@graphql-codegen/typescript-operations": "^5.0.7",
     "@graphql-typed-document-node/core": "^3.2.0",
-    "@streamscloud/kit": "^0.1.8",
+    "@streamscloud/kit": "^0.1.12",
     "@streamscloud/streams-analytics-collector": "^4.0.1",
     "@sveltejs/package": "^2.5.7",
     "@sveltejs/vite-plugin-svelte": "^6.2.4",