@streamscloud/embeddable 2.7.5 → 2.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/streams/layout/element-views/cmp.price-stream-element.svelte +14 -115
  2. package/dist/streams/layout/element-views/price-element-view.svelte +168 -0
  3. package/dist/streams/layout/element-views/price-element-view.svelte.d.ts +15 -0
  4. package/dist/streams/stream-player/cmp.stream-player.svelte +1 -13
  5. package/dist/streams/stream-player/cmp.stream-player.svelte.d.ts +0 -1
  6. package/dist/streams/stream-player/index.d.ts +0 -1
  7. package/dist/streams/stream-player/index.js +1 -2
  8. package/package.json +1 -1
package/dist/streams/layout/element-views/cmp.price-stream-element.svelte CHANGED
@@ -1,124 +1,23 @@
1
1
  <script lang="ts">var _a;
2
- import { toPriceRepresentation } from '../../../products/price-helper';
3
- import { LineClamp } from '../../../ui/line-clamp';
4
2
  import { PriceStreamElementLocalization } from './price-stream-element-localization';
5
- import { default as StockElementView } from './cmp.stock-stream-element.svelte';
6
- import { mapFlexJustifyContent, mapFontFamily, mapFontWeight, transformColorValue, transformFontSizeValue, transformNumericValue } from '../styles-transformer';
3
+ import { default as PriceElementView } from './price-element-view.svelte';
7
4
  let { model, data, localization: localizationInit } = $props();
8
5
  const localization = $derived(new PriceStreamElementLocalization(localizationInit));
9
- const lineHeight = 1.2;
10
- const elementHeight = $derived(((_a = model.styles) === null || _a === void 0 ? void 0 : _a.height) || 32);
11
- const priceHeight = $derived(model.stock ? elementHeight * 0.68 : elementHeight);
12
- const currentPrice = $derived.by(() => {
13
- if (data.salePrice) {
14
- return toPriceRepresentation(data.salePrice, data.currency, model.includeCurrency || false);
15
- }
16
- return toPriceRepresentation(data.price, data.currency, model.includeCurrency || false);
17
- });
18
- const saveValue = $derived.by(() => {
19
- if (data.salePrice) {
20
- return toPriceRepresentation(data.price - data.salePrice, data.currency, model.includeCurrency || false);
21
- }
22
- return 0;
23
- });
24
- const elementContainerStyles = $derived.by(() => {
25
- var _a, _b;
26
- const values = [
27
- 'display: flex;',
28
- 'flex-direction: column;',
29
- 'justify-content: space-between;',
30
- `align-items: ${mapFlexJustifyContent((_a = model.styles) === null || _a === void 0 ? void 0 : _a.horizontalAlign)};`,
31
- `font-family: ${mapFontFamily((_b = model.styles) === null || _b === void 0 ? void 0 : _b.fontFamily)};`,
32
- `height: ${transformNumericValue(elementHeight)};`
33
- ];
34
- return values.join('');
35
- });
36
- const priceContainerStyles = $derived.by(() => {
37
- const values = ['display: flex;', `height: ${transformNumericValue(priceHeight)};`, `align-items: center;`, 'gap: 3cqi;'];
38
- return values.join('');
39
- });
40
- const priceCustomStyles = $derived.by(() => {
41
- var _a, _b, _c;
42
- const values = [
43
- `font-size: ${transformFontSizeValue(priceHeight / lineHeight)};`,
44
- `line-height: ${lineHeight};`,
45
- `font-weight: ${mapFontWeight((_a = model.styles) === null || _a === void 0 ? void 0 : _a.fontWeight)};`,
46
- `color: ${transformColorValue(data.salePrice ? (_b = model.styles) === null || _b === void 0 ? void 0 : _b.salePriceColor : (_c = model.styles) === null || _c === void 0 ? void 0 : _c.regularPriceColor)};`
47
- ];
48
- return values.join('');
49
- });
50
- const saveValueCustomStyles = $derived.by(() => {
51
- var _a, _b;
52
- const values = [
53
- `margin-top: ${transformNumericValue((priceHeight - priceHeight / lineHeight) / 2)};`,
54
- `font-size: ${transformFontSizeValue(priceHeight / 4)};`,
55
- `font-weight: 500;`,
56
- `padding: ${transformNumericValue(priceHeight / 8)} ${transformNumericValue(priceHeight / 4)};`,
57
- `border-radius: ${transformNumericValue(priceHeight / 8)};`,
58
- `background-color: ${transformColorValue((_a = model.styles) === null || _a === void 0 ? void 0 : _a.saveValueBackgroundColor)};`,
59
- `color: ${transformColorValue((_b = model.styles) === null || _b === void 0 ? void 0 : _b.saveValueColor)};`
60
- ];
61
- return values.join('');
62
- });
63
- const beforeValueCustomStyles = $derived.by(() => {
64
- var _a;
65
- const values = [
66
- `font-size: ${transformFontSizeValue(priceHeight / 5)};`,
67
- `font-weight: 500;`,
68
- `color: ${transformColorValue((_a = model.styles) === null || _a === void 0 ? void 0 : _a.beforeValueColor)};`
69
- ];
70
- return values.join('');
71
- });
72
- const textAfterCustomStyles = $derived.by(() => {
73
- const values = [`font-size: ${transformFontSizeValue(priceHeight / lineHeight / 2)};`, `font-weight: 500;`, 'align-self: flex-end;'];
74
- return values.join('');
75
- });
76
- const stockElementHeight = $derived(elementHeight * 0.23);
6
+ let baseMaxHeight = $derived(((_a = model.styles) === null || _a === void 0 ? void 0 : _a.height) || 32);
7
+ let adjustedHeight = $derived(baseMaxHeight);
77
8
  </script>
78
9
 
79
- <div class="price-stream-element" style={elementContainerStyles}>
80
- <div class="price-stream-element__price-container" style={priceContainerStyles}>
81
- <div class="price-stream-element__price" style={priceCustomStyles}>
82
- {currentPrice}
83
- </div>
84
- {#if data.salePrice && !model.excludeBeforePrice}
85
- <div class="price-stream-element__sale-price">
86
- <div class="price-stream-element__save" style={saveValueCustomStyles}>
87
- {localization.saveValue(saveValue)}
88
- </div>
89
- <div class="price-stream-element__before-price" style={beforeValueCustomStyles}>
90
- {localization.beforeValue(toPriceRepresentation(data.price, data.currency, model.includeCurrency || false))}
91
- </div>
92
- </div>
93
- {/if}
94
- {#if model.textAfter}
95
- <div class="price-stream-element__text-after" style={textAfterCustomStyles}>
96
- <LineClamp value={model.textAfter} maxLines={1} />
97
- </div>
98
- {/if}
99
- </div>
100
- {#if model.stock}
101
- <StockElementView model={model.stock} heightOverrideDdu={stockElementHeight} localization={localization.stockLocalization} />
102
- {/if}
10
+ <div class="price-stream-element">
11
+ <PriceElementView maxElementHeight={adjustedHeight} model={model} data={data} localization={localization} />
12
+ <PriceElementView
13
+ maxElementHeight={baseMaxHeight}
14
+ model={model}
15
+ data={data}
16
+ localization={localization}
17
+ on={{ heightAdjusted: (e) => (adjustedHeight = e) }} />
103
18
  </div>
104
19
 
105
- <style>@keyframes fadeIn {
106
- 0% {
107
- opacity: 1;
108
- }
109
- 50% {
110
- opacity: 0.4;
111
- }
112
- 100% {
113
- opacity: 1;
114
- }
115
- }
116
- .price-stream-element__sale-price {
117
- display: flex;
118
- height: 100%;
119
- flex-direction: column;
120
- justify-content: space-between;
121
- }
122
- .price-stream-element__price, .price-stream-element__save, .price-stream-element__before-price {
123
- white-space: nowrap;
20
+ <style>.price-stream-element {
21
+ position: relative;
22
+ width: 100%;
124
23
  }</style>
package/dist/streams/layout/element-views/price-element-view.svelte ADDED
@@ -0,0 +1,168 @@
1
+ <script lang="ts">var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
2
+ function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
3
+ return new (P || (P = Promise))(function (resolve, reject) {
4
+ function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
5
+ function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
6
+ function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
7
+ step((generator = generator.apply(thisArg, _arguments || [])).next());
8
+ });
9
+ };
10
+ import { Utils } from '../../../core/utils';
11
+ import { toPriceRepresentation } from '../../../products/price-helper';
12
+ import { LineClamp } from '../../../ui/line-clamp';
13
+ import { PriceStreamElementLocalization } from './price-stream-element-localization';
14
+ import { default as StockElementView } from './cmp.stock-stream-element.svelte';
15
+ import { mapFlexJustifyContent, mapFontFamily, mapFontWeight, transformColorValue, transformFontSizeValue, transformNumericValue } from '../styles-transformer';
16
+ let { maxElementHeight, model, data, localization, on } = $props();
17
+ let priceElementRef = $state.raw(null);
18
+ let priceContainerRef = $state.raw(null);
19
+ const minElementHeight = 16;
20
+ let adjustedHeight = $derived(maxElementHeight);
21
+ const lineHeight = 1.2;
22
+ const elementHeight = $derived(adjustedHeight);
23
+ const priceHeight = $derived(model.stock ? elementHeight * 0.68 : elementHeight);
24
+ const adjustableHeight = $derived(!!(on === null || on === void 0 ? void 0 : on.heightAdjusted));
25
+ const currentPrice = $derived.by(() => {
26
+ if (data.salePrice) {
27
+ return toPriceRepresentation(data.salePrice, data.currency, model.includeCurrency || false);
28
+ }
29
+ return toPriceRepresentation(data.price, data.currency, model.includeCurrency || false);
30
+ });
31
+ const saveValue = $derived.by(() => {
32
+ if (data.salePrice) {
33
+ return toPriceRepresentation(data.price - data.salePrice, data.currency, model.includeCurrency || false);
34
+ }
35
+ return 0;
36
+ });
37
+ const beforeValue = $derived.by(() => {
38
+ return toPriceRepresentation(data.price, data.currency, model.includeCurrency || false);
39
+ });
40
+ const elementContainerStyles = $derived.by(() => {
41
+ var _a, _b;
42
+ const values = [
43
+ 'display: flex;',
44
+ 'flex-direction: column;',
45
+ 'justify-content: space-between;',
46
+ `align-items: ${mapFlexJustifyContent((_a = model.styles) === null || _a === void 0 ? void 0 : _a.horizontalAlign)};`,
47
+ `font-family: ${mapFontFamily((_b = model.styles) === null || _b === void 0 ? void 0 : _b.fontFamily)};`,
48
+ `height: ${transformNumericValue(elementHeight)};`
49
+ ];
50
+ return values.join('');
51
+ });
52
+ const priceContainerStyles = $derived.by(() => {
53
+ const values = ['display: flex;', `height: ${transformNumericValue(priceHeight)};`, `align-items: center;`, 'gap: 3cqi;'];
54
+ return values.join('');
55
+ });
56
+ const priceCustomStyles = $derived.by(() => {
57
+ var _a, _b, _c;
58
+ const values = [
59
+ `font-size: ${transformFontSizeValue(priceHeight / lineHeight)};`,
60
+ `line-height: ${lineHeight};`,
61
+ `font-weight: ${mapFontWeight((_a = model.styles) === null || _a === void 0 ? void 0 : _a.fontWeight)};`,
62
+ `color: ${transformColorValue(data.salePrice ? (_b = model.styles) === null || _b === void 0 ? void 0 : _b.salePriceColor : (_c = model.styles) === null || _c === void 0 ? void 0 : _c.regularPriceColor)};`
63
+ ];
64
+ return values.join('');
65
+ });
66
+ const saveValueCustomStyles = $derived.by(() => {
67
+ var _a, _b;
68
+ const values = [
69
+ `margin-top: ${transformNumericValue((priceHeight - priceHeight / lineHeight) / 2)};`,
70
+ `font-size: ${transformFontSizeValue(priceHeight / 4)};`,
71
+ `font-weight: 500;`,
72
+ `padding: ${transformNumericValue(priceHeight / 8)} ${transformNumericValue(priceHeight / 4)};`,
73
+ `border-radius: ${transformNumericValue(priceHeight / 8)};`,
74
+ `background-color: ${transformColorValue((_a = model.styles) === null || _a === void 0 ? void 0 : _a.saveValueBackgroundColor)};`,
75
+ `color: ${transformColorValue((_b = model.styles) === null || _b === void 0 ? void 0 : _b.saveValueColor)};`
76
+ ];
77
+ return values.join('');
78
+ });
79
+ const beforeValueCustomStyles = $derived.by(() => {
80
+ var _a;
81
+ const values = [
82
+ `font-size: ${transformFontSizeValue(priceHeight / 5)};`,
83
+ `font-weight: 500;`,
84
+ `color: ${transformColorValue((_a = model.styles) === null || _a === void 0 ? void 0 : _a.beforeValueColor)};`
85
+ ];
86
+ return values.join('');
87
+ });
88
+ const textAfterCustomStyles = $derived.by(() => {
89
+ const values = [`font-size: ${transformFontSizeValue(priceHeight / lineHeight / 2)};`, `font-weight: 500;`, 'align-self: flex-end;'];
90
+ return values.join('');
91
+ });
92
+ const stockElementHeight = $derived(elementHeight * 0.23);
93
+ const adjustHeightToFit = () => __awaiter(void 0, void 0, void 0, function* () {
94
+ if (!priceContainerRef || !priceElementRef || !adjustableHeight) {
95
+ return;
96
+ }
97
+ yield new Promise((resolve) => requestAnimationFrame(resolve));
98
+ let currentHeight = maxElementHeight;
99
+ while (currentHeight > minElementHeight) {
100
+ adjustedHeight = currentHeight;
101
+ yield new Promise((resolve) => requestAnimationFrame(resolve));
102
+ let hasOverflow = priceElementRef.clientWidth < priceContainerRef.clientWidth;
103
+ if (!hasOverflow) {
104
+ break;
105
+ }
106
+ currentHeight -= 1;
107
+ }
108
+ on === null || on === void 0 ? void 0 : on.heightAdjusted(currentHeight);
109
+ });
110
+ const debouncedAdjustHeightToFit = Utils.debounce(adjustHeightToFit, 400);
111
+ $effect(() => {
112
+ const references = [maxElementHeight, currentPrice, saveValue, beforeValue, model.textAfter, model.includeCurrency, model.excludeBeforePrice];
113
+ void references;
114
+ debouncedAdjustHeightToFit();
115
+ });
116
+ </script>
117
+
118
+ <div class="price-stream-element" class:price-stream-element--adjustable={adjustableHeight} style={elementContainerStyles} bind:this={priceElementRef}>
119
+ <div class="price-stream-element__price-container" style={priceContainerStyles} bind:this={priceContainerRef}>
120
+ <div class="price-stream-element__price" style={priceCustomStyles}>
121
+ {currentPrice}
122
+ </div>
123
+ {#if data.salePrice && !model.excludeBeforePrice}
124
+ <div class="price-stream-element__sale-price">
125
+ <div class="price-stream-element__save" style={saveValueCustomStyles}>
126
+ {localization.saveValue(saveValue)}
127
+ </div>
128
+ <div class="price-stream-element__before-price" style={beforeValueCustomStyles}>
129
+ {localization.beforeValue(beforeValue)}
130
+ </div>
131
+ </div>
132
+ {/if}
133
+ {#if model.textAfter}
134
+ <div class="price-stream-element__text-after" style={textAfterCustomStyles}>
135
+ <LineClamp value={model.textAfter} maxLines={1} />
136
+ </div>
137
+ {/if}
138
+ </div>
139
+ {#if model.stock}
140
+ <StockElementView model={model.stock} heightOverrideDdu={stockElementHeight} localization={localization.stockLocalization} />
141
+ {/if}
142
+ </div>
143
+
144
+ <style>@keyframes fadeIn {
145
+ 0% {
146
+ opacity: 1;
147
+ }
148
+ 50% {
149
+ opacity: 0.4;
150
+ }
151
+ 100% {
152
+ opacity: 1;
153
+ }
154
+ }
155
+ .price-stream-element--adjustable {
156
+ position: absolute;
157
+ visibility: hidden;
158
+ width: 100%;
159
+ }
160
+ .price-stream-element__sale-price {
161
+ display: flex;
162
+ height: 100%;
163
+ flex-direction: column;
164
+ justify-content: space-between;
165
+ }
166
+ .price-stream-element__price, .price-stream-element__save, .price-stream-element__before-price {
167
+ white-space: nowrap;
168
+ }</style>
package/dist/streams/layout/element-views/price-element-view.svelte.d.ts ADDED
@@ -0,0 +1,15 @@
1
+ import { PriceStreamElementLocalization } from './price-stream-element-localization';
2
+ import type { PriceStreamElementModel } from '../elements';
3
+ import type { StreamLayoutProductPriceModel } from '../models';
4
+ type Props = {
5
+ maxElementHeight: number;
6
+ model: PriceStreamElementModel;
7
+ data: StreamLayoutProductPriceModel;
8
+ localization: PriceStreamElementLocalization;
9
+ on?: {
10
+ heightAdjusted: (height: number) => void;
11
+ };
12
+ };
13
+ declare const PriceElementView: import("svelte").Component<Props, {}, "">;
14
+ type PriceElementView = ReturnType<typeof PriceElementView>;
15
+ export default PriceElementView;
package/dist/streams/stream-player/cmp.stream-player.svelte CHANGED
@@ -27,7 +27,7 @@ import { StreamPlayerLocalization } from './stream-player-localization';
27
27
  import { StreamPlayerUiManager } from './ui-manager.svelte';
28
28
  import { AppEventsTracker } from '@streamscloud/streams-analytics-collector';
29
29
  import { onMount } from 'svelte';
30
- let { streamId, graphqlOrigin, localization: localizationInit, showStreamsCloudWatermark, on } = $props();
30
+ let { streamId, graphqlOrigin, localization: localizationInit, on } = $props();
31
31
  const localization = $derived(new StreamPlayerLocalization(localizationInit));
32
32
  let model = $state(null);
33
33
  let buffer = $state.raw(null);
@@ -174,13 +174,6 @@ const onProgress = (pageId, videoId, progress) => {
174
174
  <Loading positionAbsoluteCenter={true} timeout={600} />
175
175
  {/if}
176
176
  <div class="stream-player" style={uiManager.globalCssVariables}>
177
- {#if showStreamsCloudWatermark}
178
- <div class="stream-player__watermark">
179
- <a href="https://streamscloud.com/" tabindex="-1" aria-label="none">
180
- <img src="https://embedabble-assets.streamscloud-cdn.com/watermark.svg" alt="StreamsCloud" />
181
- </a>
182
- </div>
183
- {/if}
184
177
  {#if buffer && model}
185
178
  <SpotlightLayout ratio={9 / 16} on={{ dimensionsChanged: handleDimensionsChanged }}>
186
179
  <div class="stream-player__content" use:contentMounted>
@@ -272,11 +265,6 @@ const onProgress = (pageId, videoId, progress) => {
272
265
  padding: 0;
273
266
  }
274
267
  }
275
- .stream-player__watermark {
276
- position: absolute;
277
- bottom: 5rem;
278
- left: 20rem;
279
- }
280
268
  .stream-player__content {
281
269
  width: 100%;
282
270
  height: 100%;
package/dist/streams/stream-player/cmp.stream-player.svelte.d.ts CHANGED
@@ -4,7 +4,6 @@ type Props = {
4
4
  streamId: string;
5
5
  localization: IStreamPlayerLocalization | Locale;
6
6
  graphqlOrigin?: string;
7
- showStreamsCloudWatermark?: boolean;
8
7
  on?: {
9
8
  closePlayer?: () => void;
10
9
  streamActivated?: (data: {
package/dist/streams/stream-player/index.d.ts CHANGED
@@ -27,7 +27,6 @@ export declare const openStreamPlayer: (init: {
27
27
  streamId: string;
28
28
  graphqlOrigin?: string;
29
29
  localization?: IStreamPlayerLocalization | "en" | "no";
30
- showStreamsCloudWatermark?: boolean;
31
30
  on?: {
32
31
  streamActivated?: (data: {
33
32
  title: string;
package/dist/streams/stream-player/index.js CHANGED
@@ -27,7 +27,7 @@ import { mount, unmount } from 'svelte';
27
27
  * ```
28
28
  */
29
29
  export const openStreamPlayer = (init) => {
30
- const { streamId, graphqlOrigin, localization, showStreamsCloudWatermark } = init;
30
+ const { streamId, graphqlOrigin, localization } = init;
31
31
  const shadowHost = new ShadowHost();
32
32
  const mounted = mount(StreamPlayer, {
33
33
  target: shadowHost.shadowRoot,
@@ -35,7 +35,6 @@ export const openStreamPlayer = (init) => {
35
35
  streamId,
36
36
  graphqlOrigin,
37
37
  localization: getLocale(localization),
38
- showStreamsCloudWatermark,
39
38
  on: {
40
39
  streamActivated: (data) => {
41
40
  AppEventsTracker.setOrganizationId(data.ownerId);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@streamscloud/embeddable",
3
- "version": "2.7.5",
3
+ "version": "2.8.0",
4
4
  "author": "StreamsCloud",
5
5
  "repository": "https://github.com/StreamsCloud/streamscloud-frontend-packages.git",
6
6
  "type": "module",