@streamscloud/embeddable 15.0.3 → 15.1.0-1770741228287

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 (67) hide show
  1. package/dist/ads/ad-card/cmp.ad-card.svelte +15 -21
  2. package/dist/ads/ad-card/cmp.ad-card.svelte.d.ts +0 -5
  3. package/dist/core/theme/brand-colors.svelte.d.ts +33 -0
  4. package/dist/core/theme/brand-colors.svelte.js +26 -0
  5. package/dist/core/theme/index.d.ts +3 -2
  6. package/dist/core/theme/index.js +1 -1
  7. package/dist/external-api/data-providers/internal-media-center-data-provider.svelte.js +1 -5
  8. package/dist/media-center/config/types.d.ts +16 -3
  9. package/dist/media-center/media-center/cmp.media-center-proxy.svelte +2 -9
  10. package/dist/media-center/media-center/footer/media-center-footer.svelte +1 -1
  11. package/dist/media-center/media-center/handlers/media-center-settings-handler.svelte.d.ts +1 -11
  12. package/dist/media-center/media-center/handlers/media-center-settings-handler.svelte.js +3 -14
  13. package/dist/media-center/media-center/header/media-center-header.svelte +8 -27
  14. package/dist/media-center/media-center/media-center-context.svelte.d.ts +0 -2
  15. package/dist/media-center/media-center/media-center-context.svelte.js +2 -3
  16. package/dist/media-center/media-center/menu/menu.svelte +2 -9
  17. package/dist/media-center/media-center/moments/cmp.moments-circle.svelte +1 -9
  18. package/dist/posts/attachments/cmp.attachments.svelte +6 -3
  19. package/dist/posts/attachments/cmp.attachments.svelte.d.ts +0 -6
  20. package/dist/posts/post-viewer/cmp.post-viewer.svelte +5 -7
  21. package/dist/posts/post-viewer/cmp.post-viewer.svelte.d.ts +0 -4
  22. package/dist/posts/post-viewer/media/post-media.svelte +1 -6
  23. package/dist/posts/posts-player/posts-player-proxy.svelte +2 -10
  24. package/dist/posts/posts-player/posts-player-view.svelte +0 -7
  25. package/dist/posts/posts-player/types.d.ts +0 -3
  26. package/dist/products/product-card/cmp.product-card.svelte +4 -17
  27. package/dist/products/product-card/cmp.product-card.svelte.d.ts +0 -5
  28. package/dist/streams/layout/element-views/cmp.short-video-stream-element.svelte +1 -2
  29. package/dist/streams/layout/element-views/cmp.short-video-stream-element.svelte.d.ts +0 -4
  30. package/dist/streams/stream-page-viewer/cmp.stream-page-viewer.svelte +4 -6
  31. package/dist/streams/stream-page-viewer/cmp.stream-page-viewer.svelte.d.ts +0 -4
  32. package/dist/streams/streams-player/streams-player-proxy.svelte +2 -10
  33. package/dist/streams/streams-player/streams-player-view.svelte +0 -11
  34. package/dist/streams/streams-player/types.d.ts +0 -3
  35. package/dist/ui/button/resources/button-theme.svelte +5 -22
  36. package/dist/ui/icon/cmp.icon.svelte +0 -4
  37. package/dist/ui/player/button/{cmp.mobile-player-buttons-group.svelte → cmp.mobile-player-buttons.svelte} +10 -17
  38. package/dist/ui/player/button/cmp.player-buttons.svelte +127 -0
  39. package/dist/ui/player/button/{cmp.player-buttons-group.svelte.d.ts → cmp.player-buttons.svelte.d.ts} +1 -2
  40. package/dist/ui/player/button/cmp.responsive-player-buttons.svelte +32 -0
  41. package/dist/ui/player/button/{cmp.responsive-player-buttons-group.svelte.d.ts → cmp.responsive-player-buttons.svelte.d.ts} +1 -3
  42. package/dist/ui/player/button/index.d.ts +3 -4
  43. package/dist/ui/player/button/index.js +3 -4
  44. package/dist/ui/player/button/types.d.ts +1 -0
  45. package/dist/ui/player/player/cmp.player.svelte +1 -1
  46. package/dist/ui/player/player/controls-and-attachments.svelte +13 -26
  47. package/dist/ui/player/player/overview-panel.svelte +3 -9
  48. package/dist/ui/player/player/overview-panel.svelte.d.ts +10 -33
  49. package/dist/ui/player/player/player-config.svelte.d.ts +0 -1
  50. package/dist/ui/player/player/player-config.svelte.js +0 -3
  51. package/dist/ui/player/player/player-settings.svelte.d.ts +0 -5
  52. package/dist/ui/player/player/player-settings.svelte.js +0 -12
  53. package/dist/ui/shadow-dom/cmp.shadow-root.svelte +79 -62
  54. package/dist/ui/shadow-dom/cmp.shadow-root.svelte.d.ts +2 -1
  55. package/dist/ui/shadow-dom/colors.scss +53 -55
  56. package/package.json +1 -1
  57. package/dist/core/theme/theme-store.svelte.d.ts +0 -6
  58. package/dist/core/theme/theme-store.svelte.js +0 -10
  59. package/dist/ui/player/button/cmp.player-button.svelte +0 -74
  60. package/dist/ui/player/button/cmp.player-button.svelte.d.ts +0 -16
  61. package/dist/ui/player/button/cmp.player-buttons-group.svelte +0 -86
  62. package/dist/ui/player/button/cmp.responsive-player-buttons-group.svelte +0 -53
  63. package/dist/ui/player/colors/index.d.ts +0 -1
  64. package/dist/ui/player/colors/index.js +0 -1
  65. package/dist/ui/player/colors/player-colors.d.ts +0 -25
  66. package/dist/ui/player/colors/player-colors.js +0 -24
  67. /package/dist/ui/player/button/{cmp.mobile-player-buttons-group.svelte.d.ts → cmp.mobile-player-buttons.svelte.d.ts} +0 -0
@@ -1,86 +0,0 @@
1
- <script lang="ts">import { Icon } from '../../icon';
2
- let { scaleEffect = false, activeColor, backgroundColor, actions } = $props();
3
- const styles = $derived.by(() => {
4
- const values = [];
5
- if (activeColor) {
6
- values.push(`--player-buttons-group--active-color: ${activeColor}`);
7
- }
8
- if (backgroundColor) {
9
- values.push(`--player-buttons-group--background-color: ${backgroundColor}`);
10
- }
11
- return values.join(';');
12
- });
13
- </script>
14
-
15
- <div class="player-buttons-group" style={styles}>
16
- {#each actions as action (action.icon)}
17
- <button type="button" class="player-buttons-group__action" class:player-buttons-group__action--scale-effect={scaleEffect} onclick={action.callback}>
18
- <span class="player-buttons-group__action-icon">
19
- <Icon src={action.icon} color={action.iconColor} />
20
- </span>
21
- </button>
22
- {/each}
23
- </div>
24
-
25
- <style>@keyframes fadeIn {
26
- 0% {
27
- opacity: 1;
28
- }
29
- 50% {
30
- opacity: 0.4;
31
- }
32
- 100% {
33
- opacity: 1;
34
- }
35
- }
36
- .player-buttons-group {
37
- --_player-buttons-group--active-color: var(--player-buttons-group--active-color, rgb(from var(--sc-mc-color--button-player) r g b / 95%));
38
- --_player-buttons-group--background-color: var(
39
- --player-buttons-group--background-color,
40
- rgb(from var(--_player-buttons-group--active-color, var(--sc-mc-color--button-player)) r g b / 60%)
41
- );
42
- cursor: pointer;
43
- display: flex;
44
- flex-direction: column;
45
- justify-content: center;
46
- border-radius: 1.25rem;
47
- background: var(--_player-buttons-group--background-color);
48
- padding: 0.4375rem 0.0625rem;
49
- pointer-events: auto;
50
- }
51
- .player-buttons-group__action {
52
- --_player-action--icon-scale: 1;
53
- display: flex;
54
- justify-content: center;
55
- align-items: center;
56
- padding: 0.5625rem;
57
- border-radius: 1.25rem;
58
- color: var(--sc-mc-color--text-white);
59
- --icon--color: var(--sc-mc-color--icon-overlay);
60
- --icon--size: 1.75rem;
61
- transition: background-color 0.5s;
62
- }
63
- .player-buttons-group__action:hover {
64
- background-color: var(--_player-buttons-group--active-color);
65
- }
66
- .player-buttons-group__action--scale-effect:hover {
67
- --_player-action--icon-scale: 1.2;
68
- background-color: transparent;
69
- }
70
- .player-buttons-group__action-icon {
71
- display: block;
72
- transform: scale(var(--_player-action--icon-scale));
73
- transition: 0.3s;
74
- }
75
- .player-buttons-group {
76
- /* Set 'container-type: inline-size;' to reference container*/
77
- }
78
- @container (width < 576px) {
79
- .player-buttons-group {
80
- border-radius: 0.9375rem;
81
- padding: 0.25rem 0.0625rem;
82
- }
83
- .player-buttons-group__action {
84
- --icon--size: 1.5rem;
85
- }
86
- }</style>
@@ -1,53 +0,0 @@
1
- <script lang="ts">import { MobilePlayerButtonsGroup, PlayerButtonsGroup, PlayerButton } from './';
2
- let { scaleEffect = false, activeColor, backgroundColor, actions } = $props();
3
- </script>
4
-
5
- <div class="desktop-controls">
6
- {#if actions.length > 0}
7
- {#if actions.length === 1}
8
- <PlayerButton
9
- scaleEffect={scaleEffect}
10
- activeColor={activeColor}
11
- inactiveColor={backgroundColor}
12
- icon={actions[0].icon}
13
- on={{ click: actions[0].callback }} />
14
- {:else}
15
- <PlayerButtonsGroup scaleEffect={scaleEffect} activeColor={activeColor} backgroundColor={backgroundColor} actions={actions} />
16
- {/if}
17
- {/if}
18
- </div>
19
-
20
- <div class="mobile-controls">
21
- <MobilePlayerButtonsGroup actions={actions} />
22
- </div>
23
-
24
- <style>@keyframes fadeIn {
25
- 0% {
26
- opacity: 1;
27
- }
28
- 50% {
29
- opacity: 0.4;
30
- }
31
- 100% {
32
- opacity: 1;
33
- }
34
- }
35
- .desktop-controls {
36
- display: contents;
37
- /* Set 'container-type: inline-size;' to reference container*/
38
- }
39
- @container (width < 576px) {
40
- .desktop-controls {
41
- display: none;
42
- }
43
- }
44
-
45
- .mobile-controls {
46
- display: none;
47
- /* Set 'container-type: inline-size;' to reference container*/
48
- }
49
- @container (width < 576px) {
50
- .mobile-controls {
51
- display: contents;
52
- }
53
- }</style>
@@ -1 +0,0 @@
1
- export { PlayerColors, type IPlayerColors } from './player-colors';
@@ -1 +0,0 @@
1
- export { PlayerColors } from './player-colors';
@@ -1,25 +0,0 @@
1
- export type IPlayerColors = {
2
- brand: string | null;
3
- button: string | null;
4
- buttonInactive: string | null;
5
- cardButton: string | null;
6
- cardBackground: string | null;
7
- menuBackground: string | null;
8
- playerBackground: string | null;
9
- price: string | null;
10
- salePrice: string | null;
11
- sidebarBackground: string | null;
12
- } | null;
13
- export declare class PlayerColors implements NonNullable<IPlayerColors> {
14
- brand: string | null;
15
- button: string | null;
16
- buttonInactive: string | null;
17
- cardButton: string | null;
18
- cardBackground: string | null;
19
- menuBackground: string | null;
20
- playerBackground: string | null;
21
- price: string | null;
22
- salePrice: string | null;
23
- sidebarBackground: string | null;
24
- constructor(init: IPlayerColors | null | undefined);
25
- }
@@ -1,24 +0,0 @@
1
- export class PlayerColors {
2
- brand;
3
- button;
4
- buttonInactive;
5
- cardButton;
6
- cardBackground;
7
- menuBackground;
8
- playerBackground;
9
- price;
10
- salePrice;
11
- sidebarBackground;
12
- constructor(init) {
13
- this.brand = init?.brand ?? null;
14
- this.button = init?.button ?? null;
15
- this.buttonInactive = init?.buttonInactive ?? null;
16
- this.cardButton = init?.cardButton ?? null;
17
- this.cardBackground = init?.cardBackground ?? null;
18
- this.menuBackground = init?.menuBackground ?? null;
19
- this.playerBackground = init?.playerBackground ?? null;
20
- this.price = init?.price ?? null;
21
- this.salePrice = init?.salePrice ?? null;
22
- this.sidebarBackground = init?.sidebarBackground ?? null;
23
- }
24
- }