@streamscloud/embeddable 1.1.2

package/dist/ui/loading/index.js

@@ -0,0 +1 @@
+export { default as Loading } from './cmp.loading.svelte';

package/dist/ui/media-item-view/cmp.media-item-view.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">import { MediaFormat, MediaType, getMediaItemImageUrl } from '../../core/media';
+import { Image } from '../image';
+import { ProportionalContainer } from '../proportional-container';
+import { Video } from '../video';
+let { media, ratio = 0, inert = false, on } = $props();
+const handleClick = (e) => {
+    if (on === null || on === void 0 ? void 0 : on.click) {
+        e.stopPropagation();
+        on.click();
+    }
+};
+const parsedRatio = $derived.by(() => {
+    if (!ratio || ratio === 'fit-parent') {
+        return 0;
+    }
+    else {
+        if (typeof ratio !== 'number') {
+            return ratio === MediaFormat.W16H9 ? 16 / 9 : 4 / 3;
+        }
+        else {
+            return ratio;
+        }
+    }
+});
+</script>
+
+{#if media}
+  {#snippet mediaView()}
+    {#if media.type === MediaType.Image}
+      <div class="media-item-view__image" onclick={handleClick} onkeydown={() => {}} role="none">
+        <Image src={getMediaItemImageUrl(media)} />
+      </div>
+    {:else}
+      <div class="media-item-view__video" onclick={handleClick} onkeydown={() => {}} role="none">
+        <Video src={media.url} poster={media.thumbnailUrl} inert={!!on?.click} />
+      </div>
+    {/if}
+  {/snippet}
+
+  <div class="media-item-view" class:media-item-view--clickable={on?.click} class:media-item-view--fit-parent={ratio === 'fit-parent'} inert={inert}>
+    {#if parsedRatio}
+      <ProportionalContainer ratio={parsedRatio}>
+        {@render mediaView()}
+      </ProportionalContainer>
+    {:else}
+      {@render mediaView()}
+    {/if}
+  </div>
+{/if}
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.media-item-view {
+  width: 100%;
+  min-width: 100%;
+  max-width: 100%;
+  overflow: hidden;
+  position: relative;
+  --video--media-fit: cover;
+}
+.media-item-view--fit-parent {
+  width: 100%;
+  min-width: 100%;
+  max-width: 100%;
+  height: 100%;
+  min-height: 100%;
+  max-height: 100%;
+}
+.media-item-view__image {
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+}
+.media-item-view__video {
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+}
+.media-item-view--clickable {
+  cursor: pointer;
+}</style>

package/dist/ui/media-item-view/cmp.media-item-view.svelte.d.ts

@@ -0,0 +1,12 @@
+import { MediaFormat, type MediaItemModel } from '../../core/media';
+type Props = {
+    media: MediaItemModel | null;
+    ratio?: number | MediaFormat | 'fit-parent';
+    inert?: boolean;
+    on?: {
+        click?: () => void;
+    };
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/media-item-view/index.d.ts

@@ -0,0 +1 @@
+export { default as MediaItemView } from './cmp.media-item-view.svelte';

package/dist/ui/media-item-view/index.js

@@ -0,0 +1 @@
+export { default as MediaItemView } from './cmp.media-item-view.svelte';

package/dist/ui/media-items-gallery/cmp.media-items-gallery.svelte

@@ -0,0 +1,277 @@
+<script lang="ts">var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { MediaFormat } from '../../core/media';
+import { MediaItemView } from '../media-item-view';
+import { GalleryLayout } from './types';
+let { media, singleImageRatio = 0, inert = false, on } = $props();
+let layout = $state(null);
+const initLayout = () => __awaiter(void 0, void 0, void 0, function* () {
+    if (!media.length || media.length === 1 || media.length > 4) {
+        layout = null;
+    }
+    else {
+        layout = yield GalleryLayout.generate(media);
+    }
+});
+$effect(() => {
+    initLayout();
+});
+const upperTwoImages = $derived(media.length > 4 ? media.slice(0, 2) : []);
+const bottomThreeImages = $derived(media.length > 4 ? media.slice(2, 5) : []);
+const handleGalleryItemClick = (index) => {
+    if (on === null || on === void 0 ? void 0 : on.click) {
+        on === null || on === void 0 ? void 0 : on.click(index);
+        return;
+    }
+    /*const toMediaViewerItemType = (type: MediaType) => {
+      switch (type) {
+        case MediaType.Image:
+          return MediaViewerItemType.Image;
+        case MediaType.Video:
+        case MediaType.ShortVideo:
+          return MediaViewerItemType.Video;
+        case MediaType.Audio:
+          return MediaViewerItemType.Audio;
+        default:
+          Utils.assertUnreachable(type);
+      }
+    };
+    openMediaViewer({
+      items: media.map((i) => ({
+        id: randomNanoid(),
+        url: i.url,
+        thumbnailUrl: i.thumbnailUrl,
+        type: toMediaViewerItemType(i.type),
+        width: i.metadata.width,
+        height: i.metadata.height
+      })),
+      index
+    });*/
+};
+</script>
+
+{#if media.length}
+  {#if media.length === 1}
+    <MediaItemView
+      media={media[0]}
+      ratio={singleImageRatio}
+      inert={inert}
+      on={{
+        click: on?.click ? () => on?.click(0) : undefined
+      }} />
+  {:else}
+    <div class="gallery-container" inert={inert}>
+      {#snippet galleryItem(index: NumberType)}
+        <div class="gallery-item">
+          <MediaItemView
+            media={media[index]}
+            ratio="fit-parent"
+            on={{
+              click: () => handleGalleryItemClick(index)
+            }} />
+        </div>
+      {/snippet}
+
+      {#if layout && media.length > 1 && media.length < 5}
+        <!--Max-of-four image layout-->
+        <div class="gallery {layout.layoutClass}">
+          <div class="gallery__main-image">
+            {@render galleryItem(0)}
+          </div>
+
+          <div class="gallery__minor-images">
+            {#each layout.otherImages as image, index (image)}
+              <div class="gallery__minor-image">
+                {@render galleryItem(index + 1)}
+              </div>
+            {/each}
+          </div>
+        </div>
+      {/if}
+
+      {#if media.length > 4}
+        <div class="gallery gallery--5-and-more">
+          <div class="gallery__upper-two">
+            {#each upperTwoImages as image, index (image)}
+              <div class="gallery__image-placer">
+                {@render galleryItem(index)}
+              </div>
+            {/each}
+          </div>
+          <div class="gallery__bottom-three">
+            {#each bottomThreeImages as image, index (image)}
+              <div class="gallery__image-placer">
+                {@render galleryItem(index + 2)}
+
+                {#if index === 2 && media.length > 5}
+                  <div class="gallery__extra-images" onclick={() => handleGalleryItemClick(5)} onkeydown={() => ({})} role="none">
+                    <span class="gallery__extra-images-label">+{media.length - 5}</span>
+                  </div>
+                {/if}
+              </div>
+            {/each}
+          </div>
+        </div>
+      {/if}
+    </div>
+  {/if}
+{/if}
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.gallery-container {
+  display: block;
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+}
+
+.gallery-item {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.gallery {
+  display: flex;
+}
+.gallery__main-image {
+  position: relative;
+}
+.gallery__minor-image {
+  display: inline-block;
+  overflow: hidden;
+  position: relative;
+}
+.gallery__minor-image + .gallery__minor-image {
+  /*border-left: 2px solid white;*/
+  margin-left: 2px;
+}
+.gallery--hor {
+  flex-direction: column;
+}
+.gallery--hor .gallery__main-image {
+  width: 100%;
+  padding-top: 50%;
+}
+.gallery--hor .gallery__minor-images {
+  display: flex;
+  flex-direction: row;
+  margin-top: 2px;
+}
+.gallery--hor-2 .gallery__minor-image {
+  width: 100%;
+  padding-top: 50%;
+}
+.gallery--hor-3 .gallery__minor-image {
+  width: 50%;
+  padding-top: 50%;
+}
+.gallery--hor-4 .gallery__main-image {
+  width: 100%;
+  padding-top: 66.6666666667%;
+}
+.gallery--hor-4 .gallery__minor-image {
+  width: 33.3333333333%;
+  padding-top: 33.3333333333%;
+}
+.gallery--vert {
+  flex-direction: row;
+}
+.gallery--vert .gallery__minor-images {
+  display: flex;
+  flex-direction: column;
+  margin-top: 0;
+}
+.gallery--vert .gallery__minor-image {
+  margin-left: 2px;
+  width: 100%;
+  padding-top: 100%;
+}
+.gallery--vert .gallery__minor-image + .gallery__minor-image {
+  margin-top: 2px;
+}
+.gallery--vert-2 .gallery__main-image {
+  width: 50%;
+  padding-top: 100%;
+}
+.gallery--vert-2 .gallery__minor-images {
+  width: 50%;
+}
+.gallery--vert-2 .gallery__minor-image {
+  padding-top: 200%;
+}
+.gallery--vert-3 .gallery__main-image {
+  width: 50%;
+  padding-top: calc(100% + 2px);
+}
+.gallery--vert-3 .gallery__minor-images {
+  width: 50%;
+}
+.gallery--vert-4 .gallery__main-image {
+  width: 66.6666666667%;
+  padding-top: calc(100% + 4px);
+}
+.gallery--vert-4 .gallery__minor-images {
+  width: 33.3333333333%;
+}
+.gallery--5-and-more {
+  flex-direction: column;
+}
+.gallery--5-and-more .gallery__image-placer + .gallery__image-placer {
+  margin-left: 2px;
+}
+.gallery__image-placer {
+  position: relative;
+}
+.gallery__upper-two {
+  display: flex;
+}
+.gallery__upper-two .gallery__image-placer {
+  width: 50%;
+  padding-top: 50%;
+}
+.gallery__bottom-three {
+  display: flex;
+  margin-top: 2px;
+}
+.gallery__bottom-three .gallery__image-placer {
+  width: 33.3333333333%;
+  padding-top: 33.3333333333%;
+}
+.gallery__extra-images {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.6);
+  font-size: 30px;
+  color: white;
+  text-align: center;
+  cursor: default;
+}
+.gallery__extra-images-label {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}</style>

package/dist/ui/media-items-gallery/cmp.media-items-gallery.svelte.d.ts

@@ -0,0 +1,12 @@
+import { MediaFormat, type MediaItemWithMetadataModel } from '../../core/media';
+type Props = {
+    media: Array<MediaItemWithMetadataModel> | ReadonlyArray<MediaItemWithMetadataModel>;
+    singleImageRatio?: number | MediaFormat;
+    inert?: boolean;
+    on?: {
+        click: (index: number) => void;
+    };
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/media-items-gallery/index.d.ts

@@ -0,0 +1 @@
+export { default as MediaItemsGallery } from './cmp.media-items-gallery.svelte';

package/dist/ui/media-items-gallery/index.js

@@ -0,0 +1 @@
+export { default as MediaItemsGallery } from './cmp.media-items-gallery.svelte';

package/dist/ui/media-items-gallery/types.d.ts

@@ -0,0 +1,12 @@
+import { type MediaItemWithMetadataModel } from '../../core/media';
+export declare class GalleryLayout {
+    layoutClass: string;
+    firstImage: MediaItemWithMetadataModel;
+    otherImages: MediaItemWithMetadataModel[];
+    constructor(init: {
+        layoutClass: string;
+        firstImage: MediaItemWithMetadataModel;
+        otherImages: MediaItemWithMetadataModel[];
+    });
+    static generate: (images: Array<MediaItemWithMetadataModel> | ReadonlyArray<MediaItemWithMetadataModel>) => Promise<GalleryLayout>;
+}

package/dist/ui/media-items-gallery/types.js

@@ -0,0 +1,35 @@
+import { ImageHelper, getMediaItemImageUrl } from '../../core/media';
+export class GalleryLayout {
+    layoutClass;
+    firstImage;
+    otherImages;
+    constructor(init) {
+        const { layoutClass, firstImage, otherImages } = init;
+        this.layoutClass = layoutClass;
+        this.firstImage = firstImage;
+        this.otherImages = otherImages;
+    }
+    static generate = async (images) => {
+        const firstImage = images[0];
+        const firstImageSize = firstImage.metadata;
+        const isVertical = firstImageSize ? firstImageSize.height >= firstImageSize.width : await ImageHelper.checkIsVertical(getMediaItemImageUrl(firstImage));
+        const otherImages = images.slice(1);
+        let layoutClass;
+        switch (otherImages.length) {
+            case 1:
+                layoutClass = isVertical ? 'vert-2' : 'hor-2';
+                break;
+            case 2:
+                layoutClass = isVertical ? 'vert-3' : 'hor-3';
+                break;
+            default:
+                layoutClass = isVertical ? 'vert-4' : 'hor-4';
+                break;
+        }
+        return new GalleryLayout({
+            layoutClass: `gallery--${isVertical ? 'vert' : 'hor'} gallery--${layoutClass}`,
+            firstImage,
+            otherImages: otherImages.slice(0, 3)
+        });
+    };
+}

package/dist/ui/media-playback/index.d.ts

@@ -0,0 +1,2 @@
+export * from './volume-manager.svelte';
+export * from './playback-manager.svelte';

package/dist/ui/media-playback/index.js

@@ -0,0 +1,2 @@
+export * from './volume-manager.svelte';
+export * from './playback-manager.svelte';

package/dist/ui/media-playback/playback-manager.svelte.d.ts

@@ -0,0 +1,25 @@
+declare class PlaybackManagerInstance {
+    private mountedPlayableComponents;
+    private playingComponentId;
+    registerMountedPlayer: (componentId: string, callbacks: MediaCallbacks) => void;
+    unregisterPlayer: (componentId: string) => void;
+    setPlayingComponent: (componentId: string | null) => void;
+    play: (componentId: string | null) => void;
+    pause: (componentId?: string) => void;
+    stop: (componentId: string) => void;
+    toggle: (componentId: string) => void;
+    setVolume: (componentId: string, volume: number) => void;
+    mute: (componentId: string) => void;
+    unmute: (componentId: string) => void;
+}
+export declare const PlaybackManager: PlaybackManagerInstance;
+type MediaCallbacks = {
+    onPlay: () => void;
+    onPause: () => void;
+    onStop: (inRespectToNewlyActivatedVideo: boolean) => void;
+    onToggle?: () => void;
+    onVolumeChange?: (volume: number) => void;
+    onMute?: () => void;
+    onUnmute?: () => void;
+};
+export {};

package/dist/ui/media-playback/playback-manager.svelte.js

@@ -0,0 +1,62 @@
+class PlaybackManagerInstance {
+    mountedPlayableComponents = new Map();
+    playingComponentId = null;
+    registerMountedPlayer = (componentId, callbacks) => {
+        this.mountedPlayableComponents.set(componentId, callbacks);
+    };
+    unregisterPlayer = (componentId) => {
+        this.mountedPlayableComponents.delete(componentId);
+        if (this.playingComponentId === componentId) {
+            this.playingComponentId = null;
+        }
+    };
+    setPlayingComponent = (componentId) => {
+        if (this.playingComponentId === componentId) {
+            return;
+        }
+        if (this.playingComponentId) {
+            const callbacks = this.mountedPlayableComponents.get(this.playingComponentId);
+            callbacks?.onStop(true);
+        }
+        this.playingComponentId = componentId;
+    };
+    play = (componentId) => {
+        this.setPlayingComponent(componentId);
+        if (componentId) {
+            const callbacks = this.mountedPlayableComponents.get(componentId);
+            callbacks?.onPlay();
+        }
+    };
+    pause = (componentId) => {
+        const id = componentId || this.playingComponentId;
+        if (!id) {
+            return;
+        }
+        const callbacks = this.mountedPlayableComponents.get(id);
+        callbacks?.onPause();
+    };
+    stop = (componentId) => {
+        const callbacks = this.mountedPlayableComponents.get(componentId);
+        callbacks?.onStop(false);
+        if (this.playingComponentId === componentId) {
+            this.playingComponentId = null;
+        }
+    };
+    toggle = (componentId) => {
+        const callbacks = this.mountedPlayableComponents.get(componentId);
+        callbacks?.onToggle?.();
+    };
+    setVolume = (componentId, volume) => {
+        const callbacks = this.mountedPlayableComponents.get(componentId);
+        callbacks?.onVolumeChange?.(volume);
+    };
+    mute = (componentId) => {
+        const callbacks = this.mountedPlayableComponents.get(componentId);
+        callbacks?.onMute?.();
+    };
+    unmute = (componentId) => {
+        const callbacks = this.mountedPlayableComponents.get(componentId);
+        callbacks?.onUnmute?.();
+    };
+}
+export const PlaybackManager = new PlaybackManagerInstance();

package/dist/ui/media-playback/volume-manager.svelte.d.ts

@@ -0,0 +1,10 @@
+declare class VolumeManagerInstance {
+    private _volumeLevel;
+    private _isMuted;
+    get volumeLevel(): number;
+    get isMuted(): boolean;
+    set volumeLevel(level: number);
+    set isMuted(state: boolean);
+}
+export declare const MediaVolumeManager: VolumeManagerInstance;
+export {};

package/dist/ui/media-playback/volume-manager.svelte.js

@@ -0,0 +1,27 @@
+class VolumeManagerInstance {
+    _volumeLevel = $state(1);
+    _isMuted = $state(false);
+    get volumeLevel() {
+        return this._volumeLevel;
+    }
+    get isMuted() {
+        return this._isMuted;
+    }
+    set volumeLevel(level) {
+        let parsedLevel;
+        if (level < 0) {
+            parsedLevel = 0;
+        }
+        else if (level > 1) {
+            parsedLevel = 1;
+        }
+        else {
+            parsedLevel = level;
+        }
+        this._volumeLevel = parsedLevel;
+    }
+    set isMuted(state) {
+        this._isMuted = state;
+    }
+}
+export const MediaVolumeManager = new VolumeManagerInstance();