@streamscloud/embeddable 3.4.2 → 4.0.0

package/dist/short-videos/short-video-viewer/cmp.social-interactions.svelte

@@ -1,69 +0,0 @@
-<script lang="ts">import { Icon } from '../../ui/icon';
-import { MediaVolumeManager } from '../../ui/media-playback';
-import IconShoppingBag from '@fluentui/svg-icons/icons/shopping_bag_28_regular.svg?raw';
-import IconSpeaker2 from '@fluentui/svg-icons/icons/speaker_2_28_regular.svg?raw';
-import IconSpeakerMute from '@fluentui/svg-icons/icons/speaker_mute_28_regular.svg?raw';
-let { model, on } = $props();
-const onAttachmentsClicked = () => {
-    var _a;
-    (_a = on === null || on === void 0 ? void 0 : on.attachmentsClicked) === null || _a === void 0 ? void 0 : _a.call(on);
-};
-const onMuteClicked = () => {
-    MediaVolumeManager.isMuted = !MediaVolumeManager.isMuted;
-};
-</script>
-
-<div class="short-video-social-interactions" class:short-video-social-interactions--single-action={!(model.products.length || model.ad)}>
-  {#if model.products.length || model.ad}
-    <button type="button" class="short-video-social-interactions__action" onclick={onAttachmentsClicked}>
-      <Icon src={IconShoppingBag} />
-    </button>
-  {/if}
-
-  <button type="button" class="short-video-social-interactions__action" onclick={onMuteClicked}>
-    {#if MediaVolumeManager.isMuted}
-      <Icon src={IconSpeakerMute} />
-    {:else}
-      <Icon src={IconSpeaker2} />
-    {/if}
-  </button>
-</div>
-
-<style>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.short-video-social-interactions {
-  cursor: pointer;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  gap: 1.125rem;
-  border-radius: 1.25rem;
-  border: 0.0625rem solid #1c1c1e;
-  background: rgba(0, 0, 0, 0.6);
-  padding: 1rem 0.625rem;
-}
-.short-video-social-interactions--single-action {
-  width: var(--stream-player--button--size);
-  min-width: var(--stream-player--button--size);
-  max-width: var(--stream-player--button--size);
-  height: var(--stream-player--button--size);
-  min-height: var(--stream-player--button--size);
-  max-height: var(--stream-player--button--size);
-  border-radius: 50%;
-}
-.short-video-social-interactions__action {
-  --icon--size: var(--stream-player--icon--size);
-  --icon--color: #ffffff;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}</style>

package/dist/short-videos/short-video-viewer/cmp.social-interactions.svelte.d.ts

@@ -1,10 +0,0 @@
-import type { ShortVideoViewerModel } from '../..';
-type Props = {
-    model: ShortVideoViewerModel;
-    on?: {
-        attachmentsClicked?: () => void;
-    };
-};
-declare const Cmp: import("svelte").Component<Props, {}, "">;
-type Cmp = ReturnType<typeof Cmp>;
-export default Cmp;

package/dist/short-videos/short-video-viewer/description.svelte

@@ -1,53 +0,0 @@
-<script lang="ts">import { LineClamp } from '../../ui/line-clamp';
-import { default as ShortVideoHeading } from './cmp.short-video-heading.svelte';
-let { model, localization } = $props();
-</script>
-
-<div class="short-video-description">
-  {#if model.heading}
-    <div class="short-video-description__heading">
-      <ShortVideoHeading model={model.heading} localization={localization} />
-    </div>
-  {/if}
-  <div class="short-video-description__text">
-    {#if model.text}
-      <LineClamp value={model.text} maxLines={2} />
-    {/if}
-  </div>
-</div>
-
-<style>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.short-video-description {
-  --_short-video-viewer--description--font--primary-color: var(--short-video-viewer--description--font--primary-color);
-  --_short-video-viewer--description--font--primary-shadow: var(--short-video-viewer--description--font--primary-shadow, 1px 1px hsl(0, 0%, 10%));
-  --_short-video-viewer--description--font--secondary-color: var(--short-video-viewer--description--font--secondary-color);
-  --_short-video-viewer--description--font--secondary-shadow: var(--short-video-viewer--description--font--secondary-shadow, 1px 1px hsl(0, 0%, 10%));
-  display: flex;
-  flex-direction: column;
-  padding-top: 0.75rem;
-}
-.short-video-description__heading {
-  --short-video-heading--padding: 0 0 0.875rem 0;
-  --short-video-heading--text--color: var(--_short-video-viewer--description--font--primary-color);
-  --short-video-heading--text--shadow: var(--_short-video-viewer--description--font--primary-shadow);
-  --short-video-heading--meta--color: var(--_short-video-viewer--description--font--secondary-color);
-  --short-video-heading--meta--shadow: var(--_short-video-viewer--description--font--secondary-shadow);
-}
-.short-video-description__text {
-  color: var(--_short-video-viewer--description--font--primary-color);
-  text-shadow: var(--_short-video-viewer--description--font--primary-shadow);
-  font-size: 0.9375rem;
-  line-height: 1.25rem;
-  font-weight: 400;
-  height: 2.5rem;
-}</style>

package/dist/short-videos/short-video-viewer/description.svelte.d.ts

@@ -1,9 +0,0 @@
-import type { ShortVideoViewerLocalization } from './short-video-viewer-localization';
-import type { ShortVideoViewerModel } from './types';
-type Props = {
-    model: ShortVideoViewerModel;
-    localization: ShortVideoViewerLocalization;
-};
-declare const Description: import("svelte").Component<Props, {}, "">;
-type Description = ReturnType<typeof Description>;
-export default Description;

package/dist/short-videos/short-video-viewer/short-video-details-localization.d.ts

@@ -1,14 +0,0 @@
-import { type Locale } from '../../core/locale';
-import type { ITimeAgoLocalization } from '../../ui/time-ago';
-import type { IShortVideoAttachmentsLocalization } from './short-video-attachments-localization';
-export interface IShortVideoDetailsLocalization {
-    viewsCount?: (count: number) => string;
-    timeAgoLocalization?: ITimeAgoLocalization | Locale;
-    attachmentsLocalization?: IShortVideoAttachmentsLocalization | Locale;
-}
-export declare class ShortVideoDetailsLocalization {
-    viewsCount: (count: number) => string;
-    timeAgoLocalization: ITimeAgoLocalization | Locale;
-    attachmentsLocalization: IShortVideoAttachmentsLocalization | Locale;
-    constructor(init: IShortVideoDetailsLocalization | Locale);
-}

package/dist/short-videos/short-video-viewer/short-video-details-localization.js

@@ -1,17 +0,0 @@
-import { isLocale } from '../../core/locale';
-export class ShortVideoDetailsLocalization {
-    viewsCount;
-    timeAgoLocalization;
-    attachmentsLocalization;
-    constructor(init) {
-        this.viewsCount = isLocale(init) ? loc.viewsCount[init] : init.viewsCount || loc.viewsCount.en;
-        this.timeAgoLocalization = isLocale(init) ? init : init.timeAgoLocalization || 'en';
-        this.attachmentsLocalization = isLocale(init) ? init : init.attachmentsLocalization || 'en';
-    }
-}
-const loc = {
-    viewsCount: {
-        en: (count) => (count === 1 ? '1 view' : `${count} views`),
-        no: (count) => (count === 1 ? '1 visning' : `${count} visninger`)
-    }
-};

package/dist/short-videos/short-video-viewer/short-video-product-localization.d.ts

@@ -1,8 +0,0 @@
-import { type Locale } from '../../core/locale';
-export interface IShortVideoProductLocalization {
-    beforeNowPrefix?: string | null;
-}
-export declare class ShortVideoProductLocalization {
-    beforeNowPrefix: string | null;
-    constructor(init: IShortVideoProductLocalization | Locale);
-}

package/dist/short-videos/short-videos-player/action-button.svelte

@@ -1,38 +0,0 @@
-<script lang="ts">let { children, on } = $props();
-export {};
-</script>
-
-<button type="button" class="action-button" onclick={() => on.click()}>
-  {@render children()}
-</button>
-
-<style>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.action-button {
-  --_short-videos-player--action-button--size: var(--short-videos-player--action-button--size);
-  --_short-videos-player--action-button--background: var(--action-button-background, #1c1c1c);
-  width: var(--_short-videos-player--action-button--size);
-  min-width: var(--_short-videos-player--action-button--size);
-  max-width: var(--_short-videos-player--action-button--size);
-  height: var(--_short-videos-player--action-button--size);
-  min-height: var(--_short-videos-player--action-button--size);
-  max-height: var(--_short-videos-player--action-button--size);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  line-height: 0;
-  background: var(--_short-videos-player--action-button--background);
-  border-radius: 50%;
-  --icon--size: 1.25rem;
-  z-index: 1;
-  color: #ffffff;
-}</style>

package/dist/short-videos/short-videos-player/action-button.svelte.d.ts

@@ -1,10 +0,0 @@
-import type { Snippet } from 'svelte';
-type Props = {
-    on: {
-        click: () => void;
-    };
-    children: Snippet;
-};
-declare const ActionButton: import("svelte").Component<Props, {}, "">;
-type ActionButton = ReturnType<typeof ActionButton>;
-export default ActionButton;

package/dist/ui/shadow-dom/shadow-host.js

@@ -1,32 +0,0 @@
-import normalize from './_normalize.scss?raw';
-import reset from './_reset.scss?raw';
-export class ShadowHost {
-    shadowRoot;
-    host;
-    constructor() {
-        const host = document.createElement('div');
-        host.style.all = 'unset';
-        host.style.position = 'fixed';
-        host.style.inset = '0';
-        host.style.zIndex = '9999';
-        host.style.lineHeight = '1.15';
-        host.style.fontFamily = 'system-ui, Avenir, Helvetica, Arial, sans-serif';
-        host.style.fontWeight = '400';
-        host.style.margin = '0';
-        host.style.boxSizing = 'border-box';
-        host.style.textAlign = 'initial';
-        this.host = host;
-        this.shadowRoot = host.attachShadow({ mode: 'open' });
-        const styleElement = document.createElement('style');
-        styleElement.textContent = normalize + reset;
-        this.shadowRoot.appendChild(styleElement);
-    }
-    attachToBody() {
-        document.getElementsByTagName('html')[0].style.overflow = 'hidden';
-        document.body.appendChild(this.host);
-    }
-    remove() {
-        this.host.remove();
-        document.getElementsByTagName('html')[0].style.overflow = '';
-    }
-}