@streamscloud/embeddable 15.0.2 → 15.1.0-1770736445096

package/dist/ui/player/button/cmp.player-button.svelte

@@ -1,74 +0,0 @@
-<script lang="ts">import { Icon, IconColor } from '../../icon';
-let { icon, activeColor, inactiveColor, iconColor, scaleEffect = false, disabled = false, zoom = 1, on } = $props();
-const styles = $derived.by(() => {
-    const values = [`zoom: ${zoom}`];
-    if (activeColor) {
-        values.push(`--player-button--color: ${activeColor}`);
-    }
-    if (inactiveColor) {
-        values.push(`--player-button--color--inactive: ${inactiveColor}`);
-    }
-    return values.join(';');
-});
-</script>
-
-<button type="button" class="player-button" style={styles} class:player-button--scale-effect={scaleEffect} disabled={disabled} onclick={on.click}>
-  <span class="player-button__icon">
-    <Icon src={icon} color={iconColor} />
-  </span>
-</button>
-
-<style>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.player-button {
-  --_player-button--color: var(--player-button--color, rgb(from var(--sc-mc-color--button-player) r g b / 95%));
-  --_player-button--color--inactive: var(
-    --player-button--color--inactive,
-    rgb(from var(--_player-button--color, var(--sc-mc-color--button-player)) r g b / 60%)
-  );
-  --_player-button--icon-scale: 1;
-  pointer-events: auto;
-  padding: 0.625rem;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background-color: var(--_player-button--color--inactive);
-  transition: background-color 0.5s;
-  border-radius: 50%;
-  color: var(--sc-mc-color--text-white);
-  --icon--color: var(--sc-mc-color--icon-overlay);
-  --icon--size: 1.75rem;
-}
-.player-button:hover:not(:disabled) {
-  background-color: var(--_player-button--color);
-}
-.player-button:disabled {
-  opacity: 0.5;
-  cursor: default;
-}
-.player-button--scale-effect:hover:not(:disabled) {
-  --_player-button--icon-scale: 1.2;
-}
-.player-button__icon {
-  display: block;
-  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;
-    --icon--size: 1.5rem;
-  }
-}</style>

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

@@ -1,16 +0,0 @@
-import { IconColor } from '../../icon';
-type Props = {
-    icon: string;
-    activeColor: string | null;
-    inactiveColor: string | null;
-    iconColor?: IconColor;
-    disabled?: boolean;
-    scaleEffect?: boolean;
-    zoom?: number;
-    on: {
-        click: () => void;
-    };
-};
-declare const Cmp: import("svelte").Component<Props, {}, "">;
-type Cmp = ReturnType<typeof Cmp>;
-export default Cmp;

package/dist/ui/player/button/cmp.player-buttons-group.svelte

@@ -1,86 +0,0 @@
-<script lang="ts">import { Icon } from '../../icon';
-let { scaleEffect = false, activeColor, backgroundColor, actions } = $props();
-const styles = $derived.by(() => {
-    const values = [];
-    if (activeColor) {
-        values.push(`--player-buttons-group--active-color: ${activeColor}`);
-    }
-    if (backgroundColor) {
-        values.push(`--player-buttons-group--background-color: ${backgroundColor}`);
-    }
-    return values.join(';');
-});
-</script>
-
-<div class="player-buttons-group" style={styles}>
-  {#each actions as action (action.icon)}
-    <button type="button" class="player-buttons-group__action" class:player-buttons-group__action--scale-effect={scaleEffect} onclick={action.callback}>
-      <span class="player-buttons-group__action-icon">
-        <Icon src={action.icon} color={action.iconColor} />
-      </span>
-    </button>
-  {/each}
-</div>
-
-<style>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.player-buttons-group {
-  --_player-buttons-group--active-color: var(--player-buttons-group--active-color, rgb(from var(--sc-mc-color--button-player) r g b / 95%));
-  --_player-buttons-group--background-color: var(
-    --player-buttons-group--background-color,
-    rgb(from var(--_player-buttons-group--active-color, var(--sc-mc-color--button-player)) r g b / 60%)
-  );
-  cursor: pointer;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  border-radius: 1.25rem;
-  background: var(--_player-buttons-group--background-color);
-  padding: 0.4375rem 0.0625rem;
-  pointer-events: auto;
-}
-.player-buttons-group__action {
-  --_player-action--icon-scale: 1;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 0.5625rem;
-  border-radius: 1.25rem;
-  color: var(--sc-mc-color--text-white);
-  --icon--color: var(--sc-mc-color--icon-overlay);
-  --icon--size: 1.75rem;
-  transition: background-color 0.5s;
-}
-.player-buttons-group__action:hover {
-  background-color: var(--_player-buttons-group--active-color);
-}
-.player-buttons-group__action--scale-effect:hover {
-  --_player-action--icon-scale: 1.2;
-  background-color: transparent;
-}
-.player-buttons-group__action-icon {
-  display: block;
-  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;
-    padding: 0.25rem 0.0625rem;
-  }
-  .player-buttons-group__action {
-    --icon--size: 1.5rem;
-  }
-}</style>

package/dist/ui/player/button/cmp.responsive-player-buttons-group.svelte

@@ -1,53 +0,0 @@
-<script lang="ts">import { MobilePlayerButtonsGroup, PlayerButtonsGroup, PlayerButton } from './';
-let { scaleEffect = false, activeColor, backgroundColor, actions } = $props();
-</script>
-
-<div class="desktop-controls">
-  {#if actions.length > 0}
-    {#if actions.length === 1}
-      <PlayerButton
-        scaleEffect={scaleEffect}
-        activeColor={activeColor}
-        inactiveColor={backgroundColor}
-        icon={actions[0].icon}
-        on={{ click: actions[0].callback }} />
-    {:else}
-      <PlayerButtonsGroup scaleEffect={scaleEffect} activeColor={activeColor} backgroundColor={backgroundColor} actions={actions} />
-    {/if}
-  {/if}
-</div>
-
-<div class="mobile-controls">
-  <MobilePlayerButtonsGroup actions={actions} />
-</div>
-
-<style>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.desktop-controls {
-  display: contents;
-  /* Set 'container-type: inline-size;' to reference container*/
-}
-@container (width < 576px) {
-  .desktop-controls {
-    display: none;
-  }
-}
-
-.mobile-controls {
-  display: none;
-  /* Set 'container-type: inline-size;' to reference container*/
-}
-@container (width < 576px) {
-  .mobile-controls {
-    display: contents;
-  }
-}</style>

package/dist/ui/player/colors/index.d.ts

@@ -1 +0,0 @@
-export { PlayerColors, type IPlayerColors } from './player-colors';

package/dist/ui/player/colors/index.js

@@ -1 +0,0 @@
-export { PlayerColors } from './player-colors';

package/dist/ui/player/colors/player-colors.d.ts

@@ -1,25 +0,0 @@
-export type IPlayerColors = {
-    brand: string | null;
-    button: string | null;
-    buttonInactive: string | null;
-    cardButton: string | null;
-    cardBackground: string | null;
-    menuBackground: string | null;
-    playerBackground: string | null;
-    price: string | null;
-    salePrice: string | null;
-    sidebarBackground: string | null;
-} | null;
-export declare class PlayerColors implements NonNullable<IPlayerColors> {
-    brand: string | null;
-    button: string | null;
-    buttonInactive: string | null;
-    cardButton: string | null;
-    cardBackground: string | null;
-    menuBackground: string | null;
-    playerBackground: string | null;
-    price: string | null;
-    salePrice: string | null;
-    sidebarBackground: string | null;
-    constructor(init: IPlayerColors | null | undefined);
-}

package/dist/ui/player/colors/player-colors.js

@@ -1,24 +0,0 @@
-export class PlayerColors {
-    brand;
-    button;
-    buttonInactive;
-    cardButton;
-    cardBackground;
-    menuBackground;
-    playerBackground;
-    price;
-    salePrice;
-    sidebarBackground;
-    constructor(init) {
-        this.brand = init?.brand ?? null;
-        this.button = init?.button ?? null;
-        this.buttonInactive = init?.buttonInactive ?? null;
-        this.cardButton = init?.cardButton ?? null;
-        this.cardBackground = init?.cardBackground ?? null;
-        this.menuBackground = init?.menuBackground ?? null;
-        this.playerBackground = init?.playerBackground ?? null;
-        this.price = init?.price ?? null;
-        this.salePrice = init?.salePrice ?? null;
-        this.sidebarBackground = init?.sidebarBackground ?? null;
-    }
-}