@streamscloud/kit 0.0.1-1770903095775 → 0.0.1-1770982902053

package/dist/core/graphql.d.ts

@@ -1,4 +1,5 @@
 export declare const createGQLClient: (data: {
     url: string;
+    headers?: HeadersInit;
     customFetch?: typeof fetch;
 }) => import("@urql/core").Client;

package/dist/core/graphql.js

@@ -3,7 +3,8 @@ export const createGQLClient = (data) => createClient({
     url: data.url,
     requestPolicy: 'network-only',
     fetchOptions: {
-        credentials: 'include'
+        credentials: 'include',
+        headers: data.headers
     },
     fetch: data.customFetch ?? fetch,
     exchanges: [fetchExchange]

package/dist/core/utils/image-preloader.d.ts

@@ -0,0 +1 @@
+export declare const preloadImage: (src: string, throwOnError?: boolean) => Promise<void>;

package/dist/core/utils/image-preloader.js

@@ -0,0 +1,10 @@
+export const preloadImage = (src, throwOnError = false) => {
+    return new Promise((resolve, reject) => {
+        const img = new Image();
+        img.decoding = 'async';
+        img.loading = 'eager';
+        img.onload = () => resolve();
+        img.onerror = (e) => (throwOnError ? reject(e) : resolve());
+        img.src = src;
+    });
+};

package/dist/core/utils/index.d.ts

@@ -6,6 +6,7 @@ export * from './date-helper';
 export * from './dom-helper';
 export * from './href-validator';
 export * from './html-helper';
+export * from './image-preloader';
 export * from './lazy-init';
 export * from './number-helper';
 export * from './string-generator';

package/dist/core/utils/index.js

@@ -6,6 +6,7 @@ export * from './date-helper';
 export * from './dom-helper';
 export * from './href-validator';
 export * from './html-helper';
+export * from './image-preloader';
 export * from './lazy-init';
 export * from './number-helper';
 export * from './string-generator';

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

@@ -0,0 +1,2 @@
+export { MediaVolumeManager } from './volume-manager.svelte';
+export { PlaybackManager } from './playback-manager.svelte';

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

@@ -0,0 +1,2 @@
+export { MediaVolumeManager } from './volume-manager.svelte';
+export { PlaybackManager } from './playback-manager.svelte';

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

@@ -0,0 +1,25 @@
+type MediaCallbacks = {
+    onPlay: () => void;
+    onPause: () => void;
+    onStop: (inRespectToNewlyActivatedVideo: boolean) => void;
+    onToggle?: () => void;
+    onVolumeChange?: (volume: number) => void;
+    onMute?: () => void;
+    onUnmute?: () => void;
+};
+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;
+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,25 @@
+class VolumeManagerInstance {
+    _volumeLevel = $state(1);
+    _isMuted = $state(false);
+    get volumeLevel() {
+        return this._volumeLevel;
+    }
+    get isMuted() {
+        return this._isMuted;
+    }
+    set volumeLevel(level) {
+        if (level < 0) {
+            this._volumeLevel = 0;
+        }
+        else if (level > 1) {
+            this._volumeLevel = 1;
+        }
+        else {
+            this._volumeLevel = level;
+        }
+    }
+    set isMuted(state) {
+        this._isMuted = state;
+    }
+}
+export const MediaVolumeManager = new VolumeManagerInstance();

package/dist/ui/video/cmp.video.svelte

@@ -0,0 +1,371 @@
+<script lang="ts">import { randomNanoid } from '../../core/utils';
+import { Icon } from '../icon';
+import { MediaVolumeManager, PlaybackManager } from '../media-playback';
+import { SeekBar } from '../seek-bar';
+import IconPause from '@fluentui/svg-icons/icons/pause_20_regular.svg?raw';
+import IconPlay from '@fluentui/svg-icons/icons/play_20_regular.svg?raw';
+import IconSpeaker from '@fluentui/svg-icons/icons/speaker_2_20_regular.svg?raw';
+import IconSpeakerMute from '@fluentui/svg-icons/icons/speaker_mute_20_regular.svg?raw';
+import { untrack } from 'svelte';
+import { fade } from 'svelte/transition';
+let { src, poster, id = randomNanoid(), controls = true, autoplay = false, loop = false, inert = false, allowPreloading = false, hideSpeaker = false, hidePlayButton = false, intersectionContainer, scrubberPosition = 'bottom', on } = $props();
+let video = $state(null);
+let videoContainerRef = $state(null);
+let showControlsOnHover = $state(false);
+let isVideoPaused = $state(true);
+let percentageCompleted = $state(0);
+let everActivated = $state(false);
+let autoplayState = $state(untrack(() => autoplay));
+$effect(() => {
+    void src;
+    untrack(() => {
+        if (video?.src) {
+            video.src = src;
+        }
+    });
+});
+// Register player instance in global playback manager
+$effect(() => untrack(() => {
+    PlaybackManager.registerMountedPlayer(id, {
+        onPlay: () => {
+            void play();
+        },
+        onPause: () => {
+            pause();
+        },
+        onStop: (inRespectToNewlyActivatedVideo) => {
+            if (autoplayState === 'on-appearance' && inRespectToNewlyActivatedVideo) {
+                return;
+            }
+            stop();
+        },
+        onToggle: () => {
+            togglePlay();
+        },
+        onVolumeChange: (volume) => {
+            setVolume(volume);
+        },
+        onMute: () => {
+            setMuted(true);
+        },
+        onUnmute: () => {
+            setMuted(false);
+        }
+    });
+    on?.loaded?.({ id, src });
+    return () => {
+        PlaybackManager.unregisterPlayer(id);
+    };
+}));
+// Intersection observer for lazy loading and autoplay-on-appearance
+$effect(() => {
+    if (!videoContainerRef) {
+        return;
+    }
+    const container = videoContainerRef;
+    return untrack(() => {
+        const observer = new IntersectionObserver((entries) => {
+            if (!video) {
+                return;
+            }
+            const [entry] = entries;
+            if ((entry.isIntersecting || allowPreloading) && !video.src) {
+                video.src = src;
+                video.load();
+                if (autoplayState === true) {
+                    const handleCanPlay = () => {
+                        if (entry.isIntersecting) {
+                            void play();
+                            autoplayState = false;
+                        }
+                    };
+                    video.addEventListener('canplay', handleCanPlay, { once: true });
+                    return;
+                }
+            }
+            if (autoplayState !== 'on-appearance') {
+                return;
+            }
+            if (!entry.isIntersecting) {
+                stop();
+                return;
+            }
+            if (entry.intersectionRatio < 0.4) {
+                pause();
+            }
+            if (entry.intersectionRatio >= 0.6) {
+                const handleCanPlay = () => {
+                    if (entry.intersectionRatio >= 0.6) {
+                        void play();
+                    }
+                };
+                if (video.readyState >= 3) {
+                    void play();
+                }
+                else {
+                    video.addEventListener('canplay', handleCanPlay, { once: true });
+                }
+            }
+        }, {
+            root: intersectionContainer,
+            rootMargin: '0px',
+            threshold: [0.1, 0.4, 0.6]
+        });
+        observer.observe(container);
+        return () => {
+            observer.disconnect();
+        };
+    });
+});
+const play = async () => {
+    if (!video) {
+        return;
+    }
+    try {
+        await video.play();
+    }
+    catch {
+        // can't play video without interaction with document, just ignoring the error
+    }
+    finally {
+        if (video.paused) {
+            video.muted = true;
+            void video.play();
+        }
+        everActivated = true;
+    }
+    on?.started?.({ id, src });
+};
+const pause = () => {
+    video?.pause();
+};
+const stop = () => {
+    if (!video) {
+        return;
+    }
+    video.pause();
+    video.currentTime = 0;
+    video.load();
+    onPause();
+};
+const togglePlay = (e) => {
+    e?.stopPropagation();
+    if (!video) {
+        return;
+    }
+    if (video.paused) {
+        void play();
+    }
+    else {
+        pause();
+    }
+};
+const toggleMute = (e) => {
+    e?.stopPropagation();
+    setMuted(!video?.muted);
+};
+const onVolumeChange = () => {
+    if (!video) {
+        return;
+    }
+    MediaVolumeManager.volumeLevel = video.volume;
+    MediaVolumeManager.isMuted = video.muted;
+};
+const onTimeUpdate = () => {
+    if (!video) {
+        return;
+    }
+    percentageCompleted = video.currentTime / video.duration || 0;
+    notifyProgress();
+};
+const onLoaded = () => {
+    setVolume(MediaVolumeManager.volumeLevel);
+    setMuted(MediaVolumeManager.isMuted);
+};
+const onEnded = () => {
+    percentageCompleted = 1;
+    notifyProgress();
+    on?.ended?.({ id, src });
+    if (!loop) {
+        everActivated = false;
+    }
+};
+const onPlay = () => {
+    isVideoPaused = false;
+    PlaybackManager.setPlayingComponent(id);
+};
+const onPause = () => {
+    isVideoPaused = true;
+};
+const setVolume = (level) => {
+    MediaVolumeManager.volumeLevel = level;
+    if (video) {
+        video.volume = level;
+    }
+};
+const setMuted = (state) => {
+    MediaVolumeManager.isMuted = state;
+};
+$effect(() => {
+    if (video) {
+        video.muted = MediaVolumeManager.isMuted;
+    }
+});
+const notifyProgress = () => {
+    on?.progress?.(percentageCompleted);
+};
+const handleSeek = (percent) => {
+    if (video) {
+        video.currentTime = video.duration * percent;
+        percentageCompleted = percent;
+        notifyProgress();
+    }
+};
+</script>
+
+<div class="video" role="none" inert={inert} bind:this={videoContainerRef}>
+  <video
+    class="video__video"
+    class:video__video--not-activated={!everActivated}
+    width="100%"
+    controls={controls && everActivated}
+    poster={poster}
+    loop={loop}
+    preload="metadata"
+    onvolumechange={onVolumeChange}
+    ontimeupdate={onTimeUpdate}
+    onloadeddata={onLoaded}
+    onended={onEnded}
+    onplay={onPlay}
+    onpause={onPause}
+    playsinline
+    bind:this={video}>
+    <track src="" kind="captions" />
+  </video>
+  {#if !everActivated && poster}
+    <img class="video__poster" src={poster} alt="" />
+  {/if}
+  {#if !controls || !everActivated}
+    <div class="video__overlay" onclick={togglePlay} onkeydown={() => ({})} role="none">
+      {#if isVideoPaused && !hidePlayButton}
+        <button type="button" aria-label="play" class="video__playback-button" onclick={togglePlay} onkeydown={() => ({})}>
+          <Icon src={IconPlay} color="white" />
+        </button>
+      {:else if showControlsOnHover && !hidePlayButton}
+        <button type="button" aria-label="pause" class="video__playback-button video__playback-button--pause" onclick={togglePlay} onkeydown={() => ({})}>
+          <Icon src={IconPause} color="white" />
+        </button>
+      {/if}
+      {#if (showControlsOnHover || MediaVolumeManager.isMuted) && !hideSpeaker}
+        <button type="button" aria-label={MediaVolumeManager.isMuted ? 'mute' : 'unmute'} class="video__mute-button" onclick={toggleMute}>
+          {#if MediaVolumeManager.isMuted}
+            <Icon src={IconSpeakerMute} color="white" />
+          {:else}
+            <Icon src={IconSpeaker} color="white" />
+          {/if}
+        </button>
+      {/if}
+
+      {#if everActivated}
+        <div
+          class="video__progress-container"
+          class:video__progress-container--top={scrubberPosition === 'top'}
+          class:video__progress-container--bottom={scrubberPosition === 'bottom'}
+          onmouseenter={() => (showControlsOnHover = true)}
+          onmouseleave={() => (showControlsOnHover = false)}
+          role="none">
+          {#if showControlsOnHover || (!showControlsOnHover && isVideoPaused)}
+            <div
+              class="video__seek-bar"
+              transition:fade={{ duration: isVideoPaused ? 0 : 300 }}
+              onclick={(e) => e.stopPropagation()}
+              onkeydown={() => ({})}
+              role="none">
+              <SeekBar value={percentageCompleted} on={{ seek: handleSeek }} />
+            </div>
+          {/if}
+        </div>
+      {/if}
+    </div>
+  {/if}
+</div>
+
+<style>.video {
+  --_video--background-color: var(--video--background-color, #000000);
+  --_video--border-radius: var(--video--border-radius, 0);
+  --_video--media-fit: var(--video--media-fit, contain);
+  --_video--poster--media-fit: var(--video--poster--media-fit, cover);
+  height: 100%;
+  min-height: 100%;
+  max-height: 100%;
+  width: 100%;
+  min-width: 100%;
+  max-width: 100%;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  border-radius: var(--_video--border-radius);
+  background: var(--_video--background-color);
+}
+.video__playback-button {
+  --icon--filter: drop-shadow(1px 1px #000000);
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 2em;
+}
+.video__playback-button--pause {
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 576px) {
+  .video__playback-button--pause {
+    display: none;
+  }
+}
+.video__mute-button {
+  position: absolute;
+  top: 0.625em;
+  right: 0.625em;
+  font-size: 1em;
+  z-index: 1;
+}
+.video__poster {
+  object-fit: var(--_video--poster--media-fit);
+  min-width: 100%;
+  min-height: 100%;
+  max-width: 100%;
+  max-height: 100%;
+}
+.video__video {
+  object-fit: var(--_video--media-fit);
+  min-width: 100%;
+  min-height: 100%;
+  max-width: 100%;
+  max-height: 100%;
+}
+.video__video--not-activated {
+  visibility: hidden;
+  height: 0;
+  min-height: 0;
+}
+.video__overlay {
+  position: absolute;
+  inset: 0;
+  background-color: transparent;
+}
+.video__progress-container {
+  position: absolute;
+  left: 0;
+  right: 0;
+  z-index: 1;
+  padding-inline: 0.25rem;
+}
+.video__progress-container--top {
+  top: 0;
+  padding-bottom: 0.9375rem;
+}
+.video__progress-container--bottom {
+  bottom: 0;
+  padding-top: 0.9375rem;
+}</style>

package/dist/ui/video/cmp.video.svelte.d.ts

@@ -0,0 +1,33 @@
+import type { ScrubberPosition } from './types';
+type Props = {
+    src: string;
+    poster: string | null | undefined;
+    id?: string;
+    controls?: boolean;
+    autoplay?: true | false | 'on-appearance';
+    loop?: boolean;
+    intersectionContainer?: HTMLElement;
+    inert?: boolean;
+    allowPreloading?: boolean;
+    hideSpeaker?: boolean;
+    hidePlayButton?: boolean;
+    scrubberPosition?: ScrubberPosition;
+    on?: {
+        started?: (data: {
+            id: string;
+            src: string;
+        }) => void;
+        loaded?: (data: {
+            id: string;
+            src: string;
+        }) => void;
+        progress?: (value: number) => void;
+        ended?: (data: {
+            id: string;
+            src: string;
+        }) => void;
+    };
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

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

@@ -0,0 +1,2 @@
+export { default as Video } from './cmp.video.svelte';
+export type { ScrubberPosition } from './types';

package/dist/ui/video/index.js

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

package/dist/ui/video/types.d.ts

@@ -0,0 +1 @@
+export type ScrubberPosition = 'top' | 'bottom';

package/dist/ui/video/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/kit",
-  "version": "0.0.1-1770903095775",
+  "version": "0.0.1-1770982902053",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",
@@ -124,6 +124,10 @@
       "types": "./dist/ui/loading/index.d.ts",
       "svelte": "./dist/ui/loading/index.js"
     },
+    "./ui/media-playback": {
+      "types": "./dist/ui/media-playback/index.d.ts",
+      "svelte": "./dist/ui/media-playback/index.js"
+    },
     "./ui/progress": {
       "types": "./dist/ui/progress/index.d.ts",
       "svelte": "./dist/ui/progress/index.js"
@@ -144,6 +148,10 @@
       "types": "./dist/ui/time-ago/index.d.ts",
       "svelte": "./dist/ui/time-ago/index.js"
     },
+    "./ui/video": {
+      "types": "./dist/ui/video/index.d.ts",
+      "svelte": "./dist/ui/video/index.js"
+    },
     "./styles/base": {
       "sass": "./dist/styles/_index.scss"
     },