@streamscloud/embeddable 15.0.0-rc.0 → 15.0.0-rc.1

package/dist/external-api/media-page/index.js

@@ -74,7 +74,7 @@ export function openMediaPageModal(init) {
         viewerSettings: {
             hideCloseButton: viewerSettings?.hideCloseButton,
             locale: viewerSettings?.locale,
-            showStreamsCloudWatermark: true,
+            showStreamsCloudWatermark: viewerSettings?.showStreamsCloudWatermark,
             theme: viewerSettings?.theme
         },
         on

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

@@ -146,6 +146,7 @@ const genereateStreamActions = (id) => {
   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);
@@ -169,9 +170,6 @@ const genereateStreamActions = (id) => {
     scrollbar-width: thin;
   }
 }
-.media-center-discover {
-  /* Set 'container-type: inline-size;' to reference container*/
-}
 @container (width < 576px) {
   .media-center-discover {
     padding-inline: 0.9375rem;
@@ -183,23 +181,19 @@ const genereateStreamActions = (id) => {
   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;
@@ -210,23 +204,19 @@ const genereateStreamActions = (id) => {
   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;
@@ -263,13 +253,13 @@ const genereateStreamActions = (id) => {
 .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;
@@ -279,9 +269,6 @@ const genereateStreamActions = (id) => {
     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;
@@ -294,9 +281,6 @@ const genereateStreamActions = (id) => {
     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;
@@ -305,13 +289,13 @@ const genereateStreamActions = (id) => {
 .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;
@@ -321,9 +305,6 @@ const genereateStreamActions = (id) => {
     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;
@@ -333,9 +314,6 @@ const genereateStreamActions = (id) => {
     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/media-center-settings.svelte.js

@@ -1,6 +1,6 @@
 export class MediaCenterSettings {
     locale = $state('en');
-    showStreamsCloudWatermark = $state(true);
+    showStreamsCloudWatermark = $state(false);
     disableBackground = $state(false);
     theme = $state('dark');
     state = $state.raw(null);
@@ -9,7 +9,7 @@ export class MediaCenterSettings {
     }
     update = (data) => {
         this.locale = data?.locale ?? 'en';
-        this.showStreamsCloudWatermark = data?.showStreamsCloudWatermark ?? true;
+        this.showStreamsCloudWatermark = data?.showStreamsCloudWatermark ?? false;
         this.disableBackground = data?.disableBackground ?? false;
         this.theme = data?.theme ?? 'dark';
         this.state = data?.state ?? null;

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

@@ -241,16 +241,14 @@ 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,23 +80,19 @@ 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/ui/button/resources/button-theme.svelte

@@ -36,6 +36,7 @@ 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);
@@ -45,15 +46,12 @@ 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,6 +47,7 @@ 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);
@@ -63,9 +64,6 @@ 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,6 +47,7 @@ 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;
@@ -72,9 +73,6 @@ 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;

package/dist/ui/player/player/cmp.player.svelte.d.ts

@@ -1,10 +1,10 @@
 import type { PlayerButtonDef } from '../button';
 import type { PlayerConfig } from './player-config.svelte';
 import { type Snippet } from 'svelte';
-declare function $$render<T extends {
+declare class __sveltets_Render<T extends {
     id: string;
-}>(): {
-    props: {
+}> {
+    props(): {
         config: PlayerConfig<T>;
         itemActions: PlayerButtonDef[];
         itemView: Snippet<[{
@@ -12,20 +12,11 @@ declare function $$render<T extends {
         }]>;
         attachmentsView?: Snippet<[{
             item: T;
-        }]>;
+        }]> | undefined;
         overviewPanelContent?: Snippet;
     };
-    exports: {};
-    bindings: "";
-    slots: {};
-    events: {};
-};
-declare class __sveltets_Render<T extends {
-    id: string;
-}> {
-    props(): ReturnType<typeof $$render<T>>['props'];
-    events(): ReturnType<typeof $$render<T>>['events'];
-    slots(): ReturnType<typeof $$render<T>>['slots'];
+    events(): {};
+    slots(): {};
     bindings(): "";
     exports(): {};
 }

package/dist/ui/player/player/controls-and-attachments.svelte.d.ts

@@ -1,28 +1,19 @@
 import { type PlayerButtonDef } from '../button';
 import { PlayerConfig } from './player-config.svelte.js';
 import type { Snippet } from 'svelte';
-declare function $$render<T extends {
+declare class __sveltets_Render<T extends {
     id: string;
-}>(): {
-    props: {
+}> {
+    props(): {
         config: PlayerConfig<T>;
         hasOverview: boolean;
         itemActions: PlayerButtonDef[];
         attachmentsView?: Snippet<[{
             item: T;
-        }]>;
+        }]> | undefined;
     };
-    exports: {};
-    bindings: "";
-    slots: {};
-    events: {};
-};
-declare class __sveltets_Render<T extends {
-    id: string;
-}> {
-    props(): ReturnType<typeof $$render<T>>['props'];
-    events(): ReturnType<typeof $$render<T>>['events'];
-    slots(): ReturnType<typeof $$render<T>>['slots'];
+    events(): {};
+    slots(): {};
     bindings(): "";
     exports(): {};
 }

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

@@ -59,6 +59,7 @@ const styles = $derived.by(() => {
   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%;
@@ -70,9 +71,6 @@ const styles = $derived.by(() => {
   overflow: hidden;
   container-type: inline-size;
 }
-.overview-panel {
-  /* Set 'container-type: inline-size;' to reference container*/
-}
 @container (width < 576px) {
   .overview-panel {
     width: 100%;

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

@@ -1,10 +1,10 @@
 import type { PlayerConfig } from './player-config.svelte.js';
 import type { PlayerUIManager } from './ui-manager.svelte';
 import type { Snippet } from 'svelte';
-declare function $$render<T extends {
+declare class __sveltets_Render<T extends {
     id: string;
-}>(): {
-    props: {
+}> {
+    props(): {
         config: PlayerConfig<T>;
         uiManager: PlayerUIManager;
         position: {
@@ -14,17 +14,8 @@ declare function $$render<T extends {
         };
         children: Snippet;
     };
-    exports: {};
-    bindings: "";
-    slots: {};
-    events: {};
-};
-declare class __sveltets_Render<T extends {
-    id: string;
-}> {
-    props(): ReturnType<typeof $$render<T>>['props'];
-    events(): ReturnType<typeof $$render<T>>['events'];
-    slots(): ReturnType<typeof $$render<T>>['slots'];
+    events(): {};
+    slots(): {};
     bindings(): "";
     exports(): {};
 }

package/dist/ui/player/slider/cmp.player-slider.svelte.d.ts

@@ -1,9 +1,9 @@
 import type { PlayerSliderBuffer, PlayerSliderCallbacks } from './types';
 import { type Snippet } from 'svelte';
-declare function $$render<T extends {
+declare class __sveltets_Render<T extends {
     id: string;
-}>(): {
-    props: {
+}> {
+    props(): {
         buffer: PlayerSliderBuffer<T>;
         on?: PlayerSliderCallbacks;
         children: Snippet<[{
@@ -11,17 +11,8 @@ declare function $$render<T extends {
             active?: boolean;
         }]>;
     };
-    exports: {};
-    bindings: "";
-    slots: {};
-    events: {};
-};
-declare class __sveltets_Render<T extends {
-    id: string;
-}> {
-    props(): ReturnType<typeof $$render<T>>['props'];
-    events(): ReturnType<typeof $$render<T>>['events'];
-    slots(): ReturnType<typeof $$render<T>>['slots'];
+    events(): {};
+    slots(): {};
     bindings(): "";
     exports(): {};
 }

package/dist/ui/player/slider-horizontal/cmp.slider.svelte

@@ -284,6 +284,7 @@ const showClassicArrowsAndDots = $derived([SliderMode.ArrowsAndDots, SliderMode.
   width: 100%;
   height: 100%;
   overflow: hidden;
+  /* Set 'container-type: inline-size;' to reference container*/
 }
 .slider__slides {
   display: flex;
@@ -376,14 +377,12 @@ const showClassicArrowsAndDots = $derived([SliderMode.ArrowsAndDots, SliderMode.
   text-align: center;
   color: var(--sc-mc-color--text-white);
   visibility: hidden;
+  /* Set 'container-type: inline-size;' to reference container*/
 }
 .slider__counts-navigation-button:disabled {
   opacity: 0.5;
   cursor: default;
 }
-.slider__counts-navigation-button {
-  /* Set 'container-type: inline-size;' to reference container*/
-}
 @container (width < 576px) {
   .slider__counts-navigation-button {
     visibility: visible;
@@ -412,9 +411,6 @@ const showClassicArrowsAndDots = $derived([SliderMode.ArrowsAndDots, SliderMode.
   position: static;
   margin-top: 1rem;
 }
-.slider {
-  /* Set 'container-type: inline-size;' to reference container*/
-}
 @container (width < 576px) {
   .slider__navigation-button {
     visibility: visible;

package/dist/ui/player/slider-horizontal/cmp.slider.svelte.d.ts

@@ -1,8 +1,8 @@
 import type { Locale } from '../../../core/locale';
 import { type SliderDotsConfig, SliderMode } from './types';
 import { type Snippet } from 'svelte';
-declare function $$render<T>(): {
-    props: {
+declare class __sveltets_Render<T> {
+    props(): {
         items: T[];
         initialIndex: number;
         sliderMode?: SliderMode;
@@ -11,18 +11,11 @@ declare function $$render<T>(): {
         locale: Locale;
         on?: {
             indexChanged: (index: number) => void;
-        };
+        } | undefined;
         children: Snippet<[T]>;
     };
-    exports: {};
-    bindings: "";
-    slots: {};
-    events: {};
-};
-declare class __sveltets_Render<T> {
-    props(): ReturnType<typeof $$render<T>>['props'];
-    events(): ReturnType<typeof $$render<T>>['events'];
-    slots(): ReturnType<typeof $$render<T>>['slots'];
+    events(): {};
+    slots(): {};
     bindings(): "";
     exports(): {};
 }

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

@@ -51,7 +51,7 @@ const styles = $derived.by(() => {
   }
 }
 :host,
-:global([data-theme='default']) {
+:global([data-theme="default"]) {
   /* Backgrounds */
   --sc-mc-color--bg-button: #ffffff;
   --sc-mc-color--bg-card: #ffffff;
@@ -85,7 +85,7 @@ const styles = $derived.by(() => {
   --sc-mc-color--text-inactive: #e5e7eb;
 }
 
-:global([data-theme='dark']) {
+:global([data-theme="dark"]) {
   /* Backgrounds */
   --sc-mc-color--bg-button: #111827;
   --sc-mc-color--bg-card: #000000;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/embeddable",
-  "version": "15.0.0-rc.0",
+  "version": "15.0.0-rc.1",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",