@streamscloud/kit 0.2.27 → 0.2.28

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

@@ -8,7 +8,7 @@ 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 = false, autoplay = false, loop = false, inert = false, allowPreloading = false, hideSpeaker = false, hidePlayButton = false, intersectionContainer, scrubberPosition = 'bottom', on } = $props();
+let { src, poster, id = randomNanoid(), 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);
@@ -72,19 +72,24 @@ $effect(() => {
             }
             const [entry] = entries;
             latestEntry = entry;
-            if ((entry.isIntersecting || allowPreloading) && !video.src) {
+            if ((entry.isIntersecting || allowPreloading || !poster) && !video.src) {
                 video.src = src;
                 video.load();
-                if (autoplayState === true) {
-                    const handleCanPlay = () => {
-                        if (latestEntry?.isIntersecting) {
-                            void play();
-                            autoplayState = false;
-                        }
-                    };
-                    video.addEventListener('canplay', handleCanPlay, { once: true });
-                    return;
+            }
+            if (autoplayState === true && entry.isIntersecting) {
+                const attemptPlay = () => {
+                    if (autoplayState === true && latestEntry?.isIntersecting) {
+                        void play();
+                        autoplayState = false;
+                    }
+                };
+                if (video.readyState >= 3) {
+                    attemptPlay();
+                }
+                else {
+                    video.addEventListener('canplay', attemptPlay, { once: true });
                 }
+                return;
             }
             if (autoplayState !== 'on-appearance') {
                 return;
@@ -229,12 +234,11 @@ const handleSeek = (percent) => {
 <div class="video" role="none" inert={inert} bind:this={videoContainerRef}>
   <video
     class="video__video"
-    class:video__video--not-activated={!everActivated}
+    class:video__video--not-activated={!everActivated && !!poster}
     width="100%"
-    controls={controls && everActivated}
     poster={poster}
     loop={loop}
-    preload="metadata"
+    preload={poster ? 'metadata' : 'auto'}
     onvolumechange={onVolumeChange}
     ontimeupdate={onTimeUpdate}
     onloadeddata={onLoaded}
@@ -248,56 +252,54 @@ const handleSeek = (percent) => {
   {#if !everActivated && poster}
     <img class="video__poster" src={poster} alt="" />
   {/if}
-  {#if !controls || !everActivated}
-    <div
-      class="video__overlay"
-      onclick={togglePlay}
-      onkeydown={() => ({})}
-      onmouseenter={() => (showControlsOnHover = true)}
-      onmouseleave={() => (showControlsOnHover = false)}
-      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}
+  <div
+    class="video__overlay"
+    onclick={togglePlay}
+    onkeydown={() => ({})}
+    onmouseenter={() => (showControlsOnHover = true)}
+    onmouseleave={() => (showControlsOnHover = false)}
+    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 (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={() => (showProgressOnHover = true)}
-          onmouseleave={() => (showProgressOnHover = false)}
-          role="none">
-          {#if showProgressOnHover || (!showProgressOnHover && 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}
+    {#if everActivated}
+      <div
+        class="video__progress-container"
+        class:video__progress-container--top={scrubberPosition === 'top'}
+        class:video__progress-container--bottom={scrubberPosition === 'bottom'}
+        onmouseenter={() => (showProgressOnHover = true)}
+        onmouseleave={() => (showProgressOnHover = false)}
+        role="none">
+        {#if showProgressOnHover || (!showProgressOnHover && 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>
 </div>
 
 <!--

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

@@ -6,8 +6,6 @@ type Props = {
     poster: string | null | undefined;
     /** Unique player ID for the global PlaybackManager @default nanoid() */
     id?: string;
-    /** Show native browser controls once playback starts */
-    controls?: boolean;
     /** Autoplay strategy: `true` plays immediately, `'on-appearance'` plays when scrolled into view */
     autoplay?: true | false | 'on-appearance';
     loop?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/kit",
-  "version": "0.2.27",
+  "version": "0.2.28",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",