@streamscloud/embeddable 2.0.4 → 2.1.1

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

@@ -1,278 +0,0 @@
-<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

@@ -1,13 +0,0 @@
-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

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

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

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

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

@@ -1,12 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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

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

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

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

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

@@ -1,25 +0,0 @@
-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

@@ -1,62 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

@@ -1,161 +0,0 @@
-<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

@@ -1,33 +0,0 @@
-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

@@ -1,4 +0,0 @@
-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

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