@streamscloud/embeddable 1.1.2

package/dist/short-videos/short-videos-player/controls.svelte

@@ -0,0 +1,215 @@
+<script lang="ts">import { MediaVolumeManager } from '../../ui/media-playback';
+import { ProductCard } from '../../products/product-card';
+import { ShortVideoDetails, ShortVideoViewerAttachments } from '../short-video-viewer';
+import { Icon } from '../../ui/icon';
+import { default as ActionButton } from './action-button.svelte';
+import { ShortVideosPlayerLocalization } from './short-videos-player-localization.svelte.js';
+import IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_20_regular.svg';
+import IconChevronUp from '@fluentui/svg-icons/icons/chevron_up_20_regular.svg';
+import IconDismiss from '@fluentui/svg-icons/icons/dismiss_20_regular.svg';
+import IconPanelRightGallery from '@fluentui/svg-icons/icons/panel_right_gallery_20_regular.svg';
+import IconSpeaker2 from '@fluentui/svg-icons/icons/speaker_2_20_regular.svg';
+import IconSpeakerMute from '@fluentui/svg-icons/icons/speaker_mute_20_regular.svg';
+let { buffer, uiManager, localization, on } = $props();
+const toggleMuted = () => {
+    MediaVolumeManager.isMuted = !MediaVolumeManager.isMuted;
+};
+const shortVideo = $derived(buffer.current);
+</script>
+
+<div class="short-video-player-controls">
+  <div class="short-video-player-controls__left">
+    {#if shortVideo && uiManager.detailsCollapsed && !uiManager.showShortVideoOverlay}
+      <div class="short-video-player-controls__short-video-overlay">
+        <div class="short-video-player-controls__short-video-attachments">
+          <ShortVideoViewerAttachments model={shortVideo} />
+        </div>
+      </div>
+    {/if}
+    <div class="short-video-player-controls__navigation-buttons">
+      <button type="button" class="navigation-button" disabled={!buffer.canLoadPrevious} onclick={buffer.loadPrevious}>
+        <Icon src={IconChevronUp} />
+      </button>
+      <button type="button" class="navigation-button" disabled={!buffer.canLoadNext} onclick={buffer.loadNext}>
+        <Icon src={IconChevronDown} />
+      </button>
+    </div>
+  </div>
+  <div class="short-video-player-controls__right">
+    {#if shortVideo && shortVideo.products}
+      <div class="short-video-player-controls__short-video-products">
+        {#each shortVideo.products as product (product.id)}
+          <ProductCard model={product} />
+        {/each}
+      </div>
+    {/if}
+    <div class="short-video-player-controls__controls">
+      {#if shortVideo}
+        <ActionButton on={{ click: toggleMuted }}>
+          {#if MediaVolumeManager.isMuted}
+            <Icon src={IconSpeakerMute} />
+          {:else}
+            <Icon src={IconSpeaker2} />
+          {/if}
+        </ActionButton>
+      {/if}
+    </div>
+  </div>
+</div>
+
+{#if shortVideo && !uiManager.isMobileView}
+  <ShortVideoDetails
+    shortVideo={shortVideo}
+    collapsed={uiManager.detailsCollapsed}
+    localization={{
+      productsSection: localization.productsSection,
+      offersSection: localization.offersSection,
+      viewsCount: localization.viewsCount,
+      timeAgoLocalization: localization.timeAgoLocalization
+    }} />
+  <div class="toggle-collapsed-button">
+    <ActionButton on={{ click: () => (uiManager.detailsCollapsed = !uiManager.detailsCollapsed) }}>
+      <Icon src={IconPanelRightGallery} />
+    </ActionButton>
+  </div>
+{/if}
+<button type="button" class="close-button navigation-button" onclick={on.closePlayer}>
+  <Icon src={IconDismiss} />
+</button>
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.close-button {
+  position: absolute;
+  top: var(--short-video-player--controls--offset-vertical);
+  right: var(--short-video-player--controls--offset-horizontal);
+  z-index: 1;
+}
+
+.toggle-collapsed-button {
+  position: absolute;
+  bottom: var(--short-video-player--controls--offset-vertical);
+  right: var(--short-video-player--controls--offset-horizontal);
+  z-index: 1;
+}
+
+.short-video-player-controls {
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 100%;
+  width: var(--short-video-player--sidebar--available-space);
+  display: flex;
+  justify-content: space-between;
+  gap: 2.5rem;
+  padding: var(--short-video-player--controls--offset-vertical) var(--short-video-player--controls--offset-horizontal);
+  container-type: inline-size;
+}
+.short-video-player-controls__left {
+  display: flex;
+  flex-direction: column;
+  gap: 2.5rem;
+  justify-content: flex-end;
+}
+.short-video-player-controls__right {
+  flex: 1;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  flex-direction: column;
+  padding-top: 3.75rem;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 9.375rem) {
+  .short-video-player-controls__right {
+    display: none;
+  }
+}
+.short-video-player-controls__short-video-overlay {
+  gap: 2.5rem;
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-end;
+  --short-video-viewer--interactions--icon--size: var(--short-video-player--navigation-button--size);
+  --short-video-viewer--interactions--background--color: #1c1c1c;
+  --short-video-viewer--interactions--counter--color: #f3f4f6;
+  --short-video-viewer--interactions--icon--font-color: #f3f4f6;
+}
+.short-video-player-controls__short-video-attachments {
+  display: none;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 16.25rem) {
+  .short-video-player-controls__short-video-attachments {
+    display: contents;
+  }
+}
+.short-video-player-controls__short-video-products {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  align-items: flex-end;
+  overflow: hidden;
+  width: 12.5rem;
+  max-width: 12.5rem;
+  --product-card--text--color: #d1d5db;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 16.25rem) {
+  .short-video-player-controls__short-video-products {
+    display: none;
+  }
+}
+.short-video-player-controls__navigation-buttons {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  margin-bottom: 0.625rem;
+  z-index: 1;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 6.25rem) {
+  .short-video-player-controls__navigation-buttons {
+    visibility: hidden;
+  }
+}
+.short-video-player-controls__controls {
+  display: flex;
+  margin-top: auto;
+  gap: 1rem;
+  align-self: flex-start;
+}
+
+.navigation-button {
+  width: var(--short-video-player--navigation-button--size);
+  min-width: var(--short-video-player--navigation-button--size);
+  max-width: var(--short-video-player--navigation-button--size);
+  height: var(--short-video-player--navigation-button--size);
+  min-height: var(--short-video-player--navigation-button--size);
+  max-height: var(--short-video-player--navigation-button--size);
+  background-color: #000000;
+  border: 1px solid #1c1c1c;
+  border-radius: 50%;
+  text-align: center;
+  --icon--color: #ffffff;
+  --icon--stroke-width: 0.6;
+}
+.navigation-button:disabled {
+  opacity: 0.5;
+  cursor: default;
+}</style>

package/dist/short-videos/short-videos-player/controls.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { IPlayerBuffer } from '../../ui/player';
+import { type ShortVideoViewerModel } from '../short-video-viewer';
+import { ShortVideosPlayerLocalization } from './short-videos-player-localization.svelte.js';
+import type { ShortVideoPlayerUiManager } from './ui-manager.svelte';
+type Props = {
+    buffer: IPlayerBuffer<ShortVideoViewerModel>;
+    uiManager: ShortVideoPlayerUiManager;
+    localization: ShortVideosPlayerLocalization;
+    on: {
+        closePlayer: () => void;
+    };
+};
+declare const Controls: import("svelte").Component<Props, {}, "">;
+type Controls = ReturnType<typeof Controls>;
+export default Controls;

package/dist/short-videos/short-videos-player/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ShortVideosPlayer } from './cmp.short-videos-player.svelte';
+export type { IShortVideosPlayerLocalization } from './short-videos-player-localization.svelte';

package/dist/short-videos/short-videos-player/index.js

@@ -0,0 +1 @@
+export { default as ShortVideosPlayer } from './cmp.short-videos-player.svelte';

package/dist/short-videos/short-videos-player/short-videos-player-localization.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { ITimeAgoLocalization } from '../../ui/time-ago';
+export interface IShortVideosPlayerLocalization {
+    productsSection?: string;
+    offersSection?: string;
+    viewsCount?: (count: number) => string;
+    timeAgoLocalization?: ITimeAgoLocalization;
+}
+export declare class ShortVideosPlayerLocalization {
+    productsSection: string;
+    offersSection: string;
+    viewsCount: (count: number) => string;
+    timeAgoLocalization: ITimeAgoLocalization | undefined;
+    constructor(init?: IShortVideosPlayerLocalization);
+}

package/dist/short-videos/short-videos-player/short-videos-player-localization.svelte.js

@@ -0,0 +1,21 @@
+export class ShortVideosPlayerLocalization {
+    productsSection = $state('Products');
+    offersSection = $state('Offers');
+    viewsCount = $state((count) => (count === 1 ? '1 view' : `${count} views`));
+    timeAgoLocalization = $state(undefined);
+    constructor(init) {
+        if (!init) {
+            return;
+        }
+        if (init.productsSection !== undefined) {
+            this.productsSection = init.productsSection;
+        }
+        if (init.offersSection !== undefined) {
+            this.offersSection = init.offersSection;
+        }
+        if (init.viewsCount !== undefined) {
+            this.viewsCount = init.viewsCount;
+        }
+        this.timeAgoLocalization = init.timeAgoLocalization;
+    }
+}

package/dist/short-videos/short-videos-player/ui-manager.svelte.d.ts

@@ -0,0 +1,16 @@
+export declare class ShortVideoPlayerUiManager {
+    detailsCollapsed: boolean;
+    globalCssVariables: string;
+    isMobileView: boolean;
+    showShortVideoOverlay: boolean;
+    private readonly actionButtonSize;
+    private readonly navigationButtonSize;
+    private readonly controlsOffsetHorizontal;
+    private readonly controlsOffsetVertical;
+    private viewTotalWidth;
+    private mainViewColumnWidth;
+    updateDimensions: (dimensions: {
+        viewTotalWidth: number;
+        mainViewColumnWidth: number;
+    }) => void;
+}

package/dist/short-videos/short-videos-player/ui-manager.svelte.js

@@ -0,0 +1,25 @@
+export class ShortVideoPlayerUiManager {
+    detailsCollapsed = $state(true);
+    globalCssVariables = $derived.by(() => {
+        const values = [
+            `--short-video-player--action-button--size: ${this.actionButtonSize}px`,
+            `--short-video-player--navigation-button--size: ${this.navigationButtonSize}px`,
+            `--short-video-player--controls--offset-horizontal: ${this.controlsOffsetHorizontal}px`,
+            `--short-video-player--controls--offset-vertical: ${this.controlsOffsetVertical}px`,
+            `--short-video-player--sidebar--available-space: ${(this.viewTotalWidth - this.mainViewColumnWidth) / 2}px`
+        ];
+        return values.join(';');
+    });
+    isMobileView = $derived.by(() => this.viewTotalWidth <= 576);
+    showShortVideoOverlay = $derived.by(() => (this.viewTotalWidth - this.mainViewColumnWidth) / 2 <= 70);
+    actionButtonSize = 30;
+    navigationButtonSize = 40;
+    controlsOffsetHorizontal = 15;
+    controlsOffsetVertical = 10;
+    viewTotalWidth = $state(0);
+    mainViewColumnWidth = $state(0);
+    updateDimensions = (dimensions) => {
+        this.viewTotalWidth = dimensions.viewTotalWidth;
+        this.mainViewColumnWidth = dimensions.mainViewColumnWidth;
+    };
+}