@streamscloud/embeddable 2.1.1 → 2.1.3

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

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

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

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

package/dist/ui/video/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/embeddable",
-  "version": "2.1.1",
+  "version": "2.1.3",
   "author": "StreamsCloud",
   "repository": "https://github.com/StreamsCloud/streamscloud-frontend-packages.git",
   "type": "module",