@streamscloud/embeddable 2.8.0 → 2.8.1

package/dist/streams/layout/styles-transformer.js

@@ -4,74 +4,74 @@ export const generateStreamLayoutStyles = (styles) => {
     if (!styles) {
         return '';
     }
-    const values = [`background-color: ${transformColorValue(styles.backgroundColor)};`, `font-family: ${mapFontFamily(styles.fontFamily)};`];
-    return values.join('');
+    const values = [`background-color: ${transformColorValue(styles.backgroundColor)}`, `font-family: ${mapFontFamily(styles.fontFamily)}`];
+    return values.join(';');
 };
 export const generateContainerStyles = (styles) => {
     styles = styles || {};
     const values = [
-        'display: flex;',
-        'flex-direction: column;',
-        `width: ${transformCssValue(styles.width, 'auto')};`,
-        `height: ${transformCssValue(styles.height, 'fit-content')};`,
-        `aspect-ratio: ${styles.aspectRatio || 'auto'};`,
-        `gap: ${transformNumericValue(styles.gap)};`,
-        `padding-top: ${transformNumericValue(styles.paddingTop)};`,
-        `padding-right: ${transformNumericValue(styles.paddingRight)};`,
-        `padding-bottom: ${transformNumericValue(styles.paddingBottom)};`,
-        `padding-left: ${transformNumericValue(styles.paddingLeft)};`,
-        `background-color: ${transformColorValue(styles.backgroundColor)};`,
-        `border-width: ${styles.borderColor ? '1px' : '0'};`,
-        `border-radius: ${transformNumericValue(styles.borderRadius)};`,
-        `border-color: ${transformColorValue(styles.borderColor)};`,
-        `overflow: ${styles.borderRadius ? 'hidden' : 'visible'};`
+        'display: flex',
+        'flex-direction: column',
+        `width: ${transformCssValue(styles.width, 'auto')}`,
+        `height: ${transformCssValue(styles.height, 'fit-content')}`,
+        `aspect-ratio: ${styles.aspectRatio || 'auto'}`,
+        `gap: ${transformNumericValue(styles.gap)}`,
+        `padding-top: ${transformNumericValue(styles.paddingTop)}`,
+        `padding-right: ${transformNumericValue(styles.paddingRight)}`,
+        `padding-bottom: ${transformNumericValue(styles.paddingBottom)}`,
+        `padding-left: ${transformNumericValue(styles.paddingLeft)}`,
+        `background-color: ${transformColorValue(styles.backgroundColor)}`,
+        `border-width: ${styles.borderColor ? '1px' : '0'}`,
+        `border-radius: ${transformNumericValue(styles.borderRadius)}`,
+        `border-color: ${transformColorValue(styles.borderColor)}`,
+        `overflow: ${styles.borderRadius ? 'hidden' : 'visible'}`
     ];
     if (styles.direction) {
-        values.push(`display: flex;`);
-        values.push(`flex-direction: ${styles.direction === StreamElementStyleDirection.Horizontal ? 'row' : 'column'};`);
+        values.push(`display: flex`);
+        values.push(`flex-direction: ${styles.direction === StreamElementStyleDirection.Horizontal ? 'row' : 'column'}`);
     }
-    return values.join('');
+    return values.join(';');
 };
 export const generateAnnotationStyles = (styles, placement) => {
-    const values = [`height: ${transformNumericValue(styles.size)};`, 'position: absolute;'];
+    const values = [`height: ${transformNumericValue(styles.height)}`, `aspect-ratio: ${styles.aspectRatio}`, 'position: absolute'];
     switch (placement) {
         case AnnotationStreamElementPlacement.TopLeft:
-            values.push(`top: ${transformNumericValue(styles.offsetY)};`);
-            values.push(`left: ${transformNumericValue(styles.offsetX)};`);
+            values.push(`top: ${transformNumericValue(styles.offsetY)}`);
+            values.push(`left: ${transformNumericValue(styles.offsetX)}`);
             break;
         case AnnotationStreamElementPlacement.TopRight:
-            values.push(`top: ${transformNumericValue(styles.offsetY)};`);
+            values.push(`top: ${transformNumericValue(styles.offsetY)}`);
             values.push(`right: ${transformNumericValue(styles.offsetX)}`);
             break;
         case AnnotationStreamElementPlacement.BottomLeft:
-            values.push(`bottom: ${transformNumericValue(styles.offsetY)};`);
-            values.push(`left: ${transformNumericValue(styles.offsetX)};`);
+            values.push(`bottom: ${transformNumericValue(styles.offsetY)}`);
+            values.push(`left: ${transformNumericValue(styles.offsetX)}`);
             break;
         case AnnotationStreamElementPlacement.BottomRight:
-            values.push(`bottom: ${transformNumericValue(styles.offsetY)};`);
-            values.push(`right: ${transformNumericValue(styles.offsetX)};`);
+            values.push(`bottom: ${transformNumericValue(styles.offsetY)}`);
+            values.push(`right: ${transformNumericValue(styles.offsetX)}`);
             break;
         default:
             Utils.assertUnreachable(placement);
     }
-    return values.join('');
+    return values.join(';');
 };
 export const generateTextStyles = (styles) => {
     styles = styles || {};
     const values = [
-        `font-family: ${mapFontFamily(styles.fontFamily)};`,
-        `font-size: ${transformFontSizeValue(styles.fontSize)};`,
-        `font-weight: ${mapFontWeight(styles.fontWeight)};`,
-        `line-height: ${transformNumericValue(styles.lineHeight, '1.2')};`,
-        `text-align: ${mapTextAlign(styles.textAlign)};`,
-        `color: ${transformColorValue(styles.color)};`
+        `font-family: ${mapFontFamily(styles.fontFamily)}`,
+        `font-size: ${transformFontSizeValue(styles.fontSize)}`,
+        `font-weight: ${mapFontWeight(styles.fontWeight)}`,
+        `line-height: ${transformNumericValue(styles.lineHeight, '1.2')}`,
+        `text-align: ${mapTextAlign(styles.textAlign)}`,
+        `color: ${transformColorValue(styles.color)}`
     ];
-    return values.join('');
+    return values.join(';');
 };
 export const generateImageStyles = (styles) => {
     styles = styles || {};
-    const imageStyles = [`object-fit: ${mapMediaFit(styles.mediaFit)};`];
-    return imageStyles.join('');
+    const imageStyles = [`object-fit: ${mapMediaFit(styles.mediaFit)}`];
+    return imageStyles.join(';');
 };
 export const mapFontFamily = (value) => {
     switch (value) {

package/dist/streams/layout/styles.d.ts

@@ -5,7 +5,8 @@ export type StreamLayoutStyles = {
     fontFamily?: StreamElementStyleFontFamily | null;
 };
 export type AnnotationStreamElementStyles = {
-    size: number;
+    height: number;
+    aspectRatio: number;
     offsetX: number;
     offsetY: number;
 };

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

@@ -27,7 +27,7 @@ import { StreamPlayerLocalization } from './stream-player-localization';
 import { StreamPlayerUiManager } from './ui-manager.svelte';
 import { AppEventsTracker } from '@streamscloud/streams-analytics-collector';
 import { onMount } from 'svelte';
-let { streamId, graphqlOrigin, localization: localizationInit, on } = $props();
+let { streamId, graphqlOrigin, localization: localizationInit, showStreamsCloudWatermark, on } = $props();
 const localization = $derived(new StreamPlayerLocalization(localizationInit));
 let model = $state(null);
 let buffer = $state.raw(null);
@@ -174,6 +174,13 @@ const onProgress = (pageId, videoId, progress) => {
     <Loading positionAbsoluteCenter={true} timeout={600} />
   {/if}
   <div class="stream-player" style={uiManager.globalCssVariables}>
+    {#if showStreamsCloudWatermark}
+      <div class="stream-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 buffer && model}
       <SpotlightLayout ratio={9 / 16} on={{ dimensionsChanged: handleDimensionsChanged }}>
         <div class="stream-player__content" use:contentMounted>
@@ -265,6 +272,11 @@ const onProgress = (pageId, videoId, progress) => {
     padding: 0;
   }
 }
+.stream-player__watermark {
+  position: absolute;
+  bottom: 5rem;
+  left: 20rem;
+}
 .stream-player__content {
   width: 100%;
   height: 100%;

package/dist/streams/stream-player/cmp.stream-player.svelte.d.ts

@@ -4,6 +4,7 @@ type Props = {
     streamId: string;
     localization: IStreamPlayerLocalization | Locale;
     graphqlOrigin?: string;
+    showStreamsCloudWatermark?: boolean;
     on?: {
         closePlayer?: () => void;
         streamActivated?: (data: {

package/dist/streams/stream-player/index.d.ts

@@ -27,6 +27,7 @@ export declare const openStreamPlayer: (init: {
     streamId: string;
     graphqlOrigin?: string;
     localization?: IStreamPlayerLocalization | "en" | "no";
+    showStreamsCloudWatermark?: boolean;
     on?: {
         streamActivated?: (data: {
             title: string;

package/dist/streams/stream-player/index.js

@@ -27,7 +27,7 @@ import { mount, unmount } from 'svelte';
  * ```
  */
 export const openStreamPlayer = (init) => {
-    const { streamId, graphqlOrigin, localization } = init;
+    const { streamId, graphqlOrigin, localization, showStreamsCloudWatermark } = init;
     const shadowHost = new ShadowHost();
     const mounted = mount(StreamPlayer, {
         target: shadowHost.shadowRoot,
@@ -35,6 +35,7 @@ export const openStreamPlayer = (init) => {
             streamId,
             graphqlOrigin,
             localization: getLocale(localization),
+            showStreamsCloudWatermark,
             on: {
                 streamActivated: (data) => {
                     AppEventsTracker.setOrganizationId(data.ownerId);

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@streamscloud/embeddable",
-  "version": "2.8.0",
+  "version": "2.8.1",
   "author": "StreamsCloud",
   "repository": "https://github.com/StreamsCloud/streamscloud-frontend-packages.git",
   "type": "module",
   "scripts": {
     "dev": "vite dev --port 3010",
     "build": "svelte-package --tsconfig ./tsconfig.app.json  && prettier --write --plugin prettier-plugin-svelte . && eslint --fix .",
-    "publish": "npm publish --access public",
+    "build-publish": "npm run build && npm publish --access public",
     "pack": "npm run build && npm pack",
     "preview": "vite preview",
     "check": "svelte-check --tsconfig ./tsconfig.app.json && tsc -p tsconfig.node.json",