@streamscloud/embeddable 2.1.1 → 2.1.2

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

@@ -0,0 +1,278 @@
+<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/enums';
+import {} 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,13 @@
+import { MediaFormat } from '../../core/enums';
+import { 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();

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

@@ -0,0 +1,161 @@
+<script lang="ts">import { Utils } from '../../core/utils';
+import { isScrollingPrevented } from './prevent-slider-scroll';
+import { onDestroy, onMount } from 'svelte';
+let { buffer, children } = $props();
+let slidesRef;
+let sliderHeight = $state(0);
+let swipeTransition = $state(0);
+let cssAnimationDuration = $state(buffer.animationDuration * 0.75);
+let resizeObserver;
+let activeIndex = $state.raw(buffer.currentIndex);
+const actualTransition = $derived(-sliderHeight * activeIndex);
+const onKeyPress = (e) => {
+    if (e.key === 'ArrowUp' || e.key === 'PageUp') {
+        buffer.loadPrevious();
+    }
+    if (e.key === 'ArrowDown' || e.key === 'PageDown') {
+        buffer.loadNext();
+    }
+};
+$effect(() => {
+    if (buffer.currentIndex >= 0 && activeIndex >= 0 && Math.abs(activeIndex - buffer.currentIndex) === 1) {
+        slidesRef.classList.toggle('animate', true);
+    }
+    activeIndex = buffer.currentIndex;
+});
+onMount(() => {
+    let touchStartY = 0;
+    let touchMoveY = 0;
+    let touchStartTime = 0;
+    window.addEventListener(`keydown`, onKeyPress);
+    slidesRef.addEventListener('touchstart', (e) => {
+        // The movement gets all janky if there's a transition on the elements.
+        slidesRef.classList.toggle('animate', false);
+        touchStartY = e.changedTouches[0].screenY;
+        touchStartTime = Date.now();
+    });
+    slidesRef.addEventListener('touchmove', (e) => {
+        const newPosition = e.changedTouches[0].screenY;
+        const diff = newPosition - touchStartY;
+        if ((diff > 0 && buffer.canLoadPrevious) || (diff < 0 && buffer.canLoadNext)) {
+            touchMoveY = diff;
+            swipeTransition = diff + actualTransition;
+        }
+    });
+    slidesRef.addEventListener('touchend', () => {
+        slidesRef.classList.toggle('animate', true);
+        const reset = () => {
+            swipeTransition = 0;
+            touchMoveY = 0;
+        };
+        const isFastSwipe = Date.now() - touchStartTime < 300;
+        if (!touchMoveY || (!isFastSwipe && Math.abs(touchMoveY) < sliderHeight / 6)) {
+            return reset();
+        }
+        if (touchMoveY > 0) {
+            buffer.loadPrevious();
+        }
+        else {
+            buffer.loadNext();
+        }
+        reset();
+    });
+    slidesRef.addEventListener('wheel', Utils.throttle((e) => {
+        const checkCanHandleWheel = (node) => {
+            while (node && node !== slidesRef) {
+                if (isScrollingPrevented(node)) {
+                    return false;
+                }
+                node = node.parentElement;
+            }
+            return true;
+        };
+        if (!checkCanHandleWheel(e.target)) {
+            return;
+        }
+        if (e.deltaY > 0 && buffer.canLoadNext) {
+            buffer.loadNext();
+        }
+        if (e.deltaY < 0 && buffer.canLoadPrevious) {
+            buffer.loadPrevious();
+        }
+    }, buffer.animationDuration + 250));
+    slidesRef.addEventListener('transitionend', (e) => {
+        if (e.target !== slidesRef) {
+            return;
+        }
+        slidesRef.classList.toggle('animate', false);
+    });
+    sliderHeight = slidesRef.clientHeight;
+    resizeObserver = new ResizeObserver(() => {
+        sliderHeight = slidesRef.clientHeight;
+    });
+    resizeObserver.observe(slidesRef);
+});
+onDestroy(() => {
+    if (resizeObserver) {
+        resizeObserver.disconnect();
+    }
+    window.removeEventListener('keydown', onKeyPress);
+});
+const styles = $derived.by(() => {
+    const values = [
+        `transform: translateY(${swipeTransition || actualTransition}px)`,
+        `--_player-slider--animation: ${cssAnimationDuration}ms ease-out transform`
+    ];
+    return values.join(';');
+});
+</script>
+
+<div class="player-slider">
+  <div class="player-slider__slides" bind:this={slidesRef} style={styles}>
+    {#each buffer.loaded as item, index (item)}
+      <div class="player-slider__slide">
+        {@render children({ item, active: index === activeIndex })}
+      </div>
+    {/each}
+  </div>
+</div>
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.player-slider {
+  position: relative;
+  overflow: clip;
+  height: 100%;
+  width: 100%;
+  min-width: 100%;
+  max-width: 100%;
+}
+.player-slider__slides {
+  height: 100%;
+  min-height: 100%;
+  max-height: 100%;
+  width: 100%;
+  min-width: 100%;
+  max-width: 100%;
+}
+.player-slider__slides:global(.animate) {
+  transition: var(--_player-slider--animation);
+}
+.player-slider__slide {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  height: 100%;
+  min-height: 100%;
+  max-height: 100%;
+  width: 100%;
+  min-width: 100%;
+  max-width: 100%;
+}</style>

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

@@ -0,0 +1,33 @@
+import type { IPlayerBuffer } from './types';
+import { type Snippet } from 'svelte';
+declare class __sveltets_Render<T extends {
+    id: string;
+}> {
+    props(): {
+        buffer: IPlayerBuffer<T>;
+        children: Snippet<[{
+            item: T;
+            active?: boolean;
+        }]>;
+    };
+    events(): {};
+    slots(): {};
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends {
+        id: string;
+    }>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends {
+        id: string;
+    }>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Cmp: $$IsomorphicComponent;
+type Cmp<T extends {
+    id: string;
+}> = InstanceType<typeof Cmp<T>>;
+export default Cmp;

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

@@ -0,0 +1,4 @@
+export type { IPlayerBuffer } from './types';
+export { PlayerBuffer, type PlayerItemsProvider } from './player-buffer.svelte';
+export { default as PlayerSlider } from './cmp.player-slider.svelte';
+export { preventSliderScroll } from './prevent-slider-scroll';

package/dist/ui/player/index.js

@@ -0,0 +1,3 @@
+export { PlayerBuffer } from './player-buffer.svelte';
+export { default as PlayerSlider } from './cmp.player-slider.svelte';
+export { preventSliderScroll } from './prevent-slider-scroll';