@streamscloud/embeddable 2.1.0 → 2.1.1

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

@@ -1,377 +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 { randomNanoid } from '../../core/utils/string-generator';
-import { Icon, IconColor } from '../icon';
-import { MediaVolumeManager, PlaybackManager } from '../media-playback';
-import { Progress } from '../progress';
-import { SeekBar } from '../seek-bar';
-import IconPause from '@fluentui/svg-icons/icons/pause_20_regular.svg';
-import IconPlay from '@fluentui/svg-icons/icons/play_20_regular.svg';
-import IconSpeaker from '@fluentui/svg-icons/icons/speaker_2_20_regular.svg';
-import IconSpeakerMute from '@fluentui/svg-icons/icons/speaker_mute_20_regular.svg';
-import { onDestroy, onMount, untrack } from 'svelte';
-import { slide } from 'svelte/transition';
-let { src, poster, id = randomNanoid(), controls = true, autoplay = false, loop = false, inert = false, intersectionContainer, on } = $props();
-onMount(() => {
-    var _a;
-    PlaybackManager.registerMountedPlayer(id, {
-        onPlay: () => {
-            play();
-        },
-        onPause: () => {
-            pause();
-        },
-        onStop: (inRespectToNewlyActivatedVideo) => {
-            if (inRespectToNewlyActivatedVideo && autoplay === 'on-appearance') {
-                pause();
-            }
-            else {
-                stop();
-            }
-        },
-        onToggle: () => {
-            togglePlay();
-        },
-        onVolumeChange: (volume) => {
-            setVolume(volume);
-        },
-        onMute: () => {
-            setMuted(true);
-        },
-        onUnmute: () => {
-            setMuted(false);
-        }
-    });
-    (_a = on === null || on === void 0 ? void 0 : on.loaded) === null || _a === void 0 ? void 0 : _a.call(on, { id, src });
-    if (video) {
-        intersectionObserver.observe(video);
-    }
-});
-onDestroy(() => {
-    PlaybackManager.unregisterPlayer(id);
-    intersectionObserver.disconnect();
-});
-let video = $state.raw(undefined);
-let showControlsOnHover = $state(false);
-let needShowProgress = $state(false);
-let isVideoPaused = $state(true);
-let percentageCompleted = $state(0);
-let everActivated = $state(false);
-$effect(() => {
-    void src;
-    untrack(() => {
-        if (video === null || video === void 0 ? void 0 : video.src) {
-            video.src = src;
-        }
-    });
-});
-const intersectionObserver = new IntersectionObserver((entries) => {
-    if (!video) {
-        return;
-    }
-    const [entry] = entries;
-    // handle lazy loading, if the video is not in the viewport, don't load it
-    if (entry.isIntersecting && !video.src) {
-        video.src = src;
-        video.load();
-        // Handle one-time autoplay
-        if (autoplay === true) {
-            const handleCanPlay = () => {
-                if (entry.isIntersecting) {
-                    play();
-                    autoplay = false;
-                }
-            };
-            video.addEventListener('canplay', handleCanPlay, { once: true });
-            return;
-        }
-    }
-    // the following steps only for video with autoplay on-appearance
-    if (autoplay !== '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) {
-                play();
-            }
-        };
-        if (video.readyState >= 3) {
-            play();
-        }
-        else {
-            video.addEventListener('canplay', handleCanPlay, { once: true });
-        }
-    }
-}, {
-    root: intersectionContainer,
-    rootMargin: '0px',
-    threshold: [0.1, 0.4, 0.6]
-});
-const play = () => __awaiter(void 0, void 0, void 0, function* () {
-    if (!video) {
-        return;
-    }
-    try {
-        yield video.play();
-    }
-    catch (_a) {
-        // can't play video without interaction with document, just ignoring the error
-    }
-    finally {
-        // paused - default state for any video element (not started, not playing, ended)
-        // If the video is still paused after attempting to play (likely due to autoplay restrictions),
-        // we assume it couldn't start due to lack of user interaction.
-        // To comply with autoplay policies, we mute the video and attempt to play it again.
-        if (video.paused) {
-            video.muted = true;
-            video.play();
-        }
-        everActivated = true;
-    }
-});
-const pause = () => {
-    video === null || video === void 0 ? void 0 : video.pause();
-};
-const stop = () => {
-    if (!video) {
-        return;
-    }
-    video.pause();
-    video.currentTime = 0;
-    video.load();
-};
-const togglePlay = (e) => {
-    e === null || e === void 0 ? void 0 : e.stopPropagation();
-    if (!video) {
-        return;
-    }
-    if (video.paused) {
-        play();
-    }
-    else {
-        pause();
-    }
-};
-const toggleMute = (e) => {
-    e === null || e === void 0 ? void 0 : e.stopPropagation();
-    setMuted(!(video === null || video === void 0 ? void 0 : video.muted));
-};
-const onVolumeChange = (e) => {
-    const video = e.target;
-    MediaVolumeManager.volumeLevel = video.volume;
-    MediaVolumeManager.isMuted = video.muted;
-};
-const onTimeUpdate = (e) => {
-    const video = e.target;
-    percentageCompleted = video.currentTime / video.duration || 0;
-    notifyProgress();
-};
-const onLoaded = (e) => __awaiter(void 0, void 0, void 0, function* () {
-    const video = e.target;
-    needShowProgress = video.duration >= 8;
-    setVolume(MediaVolumeManager.volumeLevel);
-    setMuted(MediaVolumeManager.isMuted);
-});
-const onEnded = () => {
-    var _a;
-    percentageCompleted = 1;
-    notifyProgress();
-    (_a = on === null || on === void 0 ? void 0 : on.ended) === null || _a === void 0 ? void 0 : _a.call(on, { 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 setShowControlsOnHover = (state) => {
-    showControlsOnHover = state;
-};
-const notifyProgress = () => {
-    var _a;
-    (_a = on === null || on === void 0 ? void 0 : on.progress) === null || _a === void 0 ? void 0 : _a.call(on, percentageCompleted);
-};
-const handleSeek = (percent) => {
-    if (video) {
-        video.currentTime = video.duration * percent;
-    }
-};
-</script>
-
-<div class="video" onmouseenter={() => setShowControlsOnHover(true)} onmouseleave={() => setShowControlsOnHover(false)} role="none" inert={inert}>
-  <video
-    class="video__video"
-    style={everActivated ? `--_video--media-fit: contain;` : ''}
-    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 !controls || !everActivated}
-    <div class="video__cover" onclick={togglePlay} onkeydown={() => ({})} role="none">
-      {#if isVideoPaused}
-        <button type="button" aria-label="play" class="video__playback-button" onclick={togglePlay} onkeydown={() => ({})}>
-          <Icon src={IconPlay} color={IconColor.White} />
-        </button>
-      {:else if showControlsOnHover}
-        <button type="button" aria-label="pause" class="video__playback-button video__playback-button--pause" onclick={togglePlay} onkeydown={() => ({})}>
-          <Icon src={IconPause} color={IconColor.White} />
-        </button>
-      {/if}
-      {#if showControlsOnHover || MediaVolumeManager.isMuted}
-        <button type="button" aria-label={MediaVolumeManager.isMuted ? 'mute' : 'unmute'} class="video__mute-button" onclick={toggleMute}>
-          {#if MediaVolumeManager.isMuted}
-            <Icon src={IconSpeakerMute} color={IconColor.White} />
-          {:else}
-            <Icon src={IconSpeaker} color={IconColor.White} />
-          {/if}
-        </button>
-      {/if}
-
-      <div class="video__progress-container">
-        {#if needShowProgress}
-          {#if showControlsOnHover}
-            <div class="video__seek-bar" onclick={(e) => e.stopPropagation()} onkeydown={() => ({})} role="none" transition:slide>
-              <SeekBar value={percentageCompleted} on={{ seek: handleSeek }} />
-            </div>
-          {/if}
-          {#if !showControlsOnHover}
-            <div class="video__progress" in:slide>
-              <Progress value={percentageCompleted} />
-            </div>
-          {/if}
-        {/if}
-      </div>
-    </div>
-  {/if}
-</div>
-
-<style>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.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--progress--background-color: var(--video--progress--background-color, hsla(0, 0%, 0%, 0.5));
-  --_video--progress--back-color: var(--video--progress--back-color);
-  --_video--progress--front-color: var(--video--progress--front-color);
-  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 {
-  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__video {
-  object-fit: var(--_video--media-fit);
-  min-width: 100%;
-  min-height: 100%;
-  max-width: 100%;
-  max-height: 100%;
-}
-.video__cover {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  background-color: transparent;
-}
-.video__progress-container {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-}
-.video__progress {
-  margin-bottom: 1px;
-  --progress--height: 0.125em;
-  --progress--back-color: var(--_video--progress--back-color);
-  --progress--front-color: var(--_video--progress--front-color);
-}
-.video__seek-bar {
-  padding: 0.625em 0.5em;
-  background: var(--_video--progress--background-color);
-  cursor: default;
-  --seek-bar--back-color: var(--_video--progress--back-color);
-  --seek-bar--front-color: var(--_video--progress--front-color);
-}</style>

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

@@ -1,24 +0,0 @@
-type Props = {
-    src: string;
-    poster: string | null;
-    id?: string;
-    controls?: boolean;
-    autoplay?: true | false | 'on-appearance';
-    loop?: boolean;
-    intersectionContainer?: HTMLElement;
-    inert?: boolean;
-    on?: {
-        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

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

package/dist/ui/video/index.js

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