@streamscloud/kit 0.2.26 → 0.2.27-1775564173889

package/dist/ui/color-picker/cmp.color-picker.svelte

@@ -46,7 +46,7 @@ const onColorPickerInput = ({ hex }) => {
 </script>
 
 <div class="color-picker">
-  <Dropdown position="bottom-start" keepDropdownOpen>
+  <Dropdown position="bottom-start" keepDropdownOpen panel={false}>
     {#snippet trigger()}
       <div class="color-picker__trigger">
         {#if children}

package/dist/ui/cropper/img-cropper/cmp.img-cropper-toolbar.svelte

@@ -50,7 +50,7 @@ const selectedRatioLabel = $derived.by(() => {
   {#if cropper.ratioOptions}
     <div class="img-cropper-toolbar__ratio">
       <span class="img-cropper-toolbar__label">{loc.ratio}</span>
-      <Dropdown position="top">
+      <Dropdown position="top" panel={false}>
         {#snippet trigger()}
           <div class="img-cropper-toolbar__ratio-trigger">{selectedRatioLabel}</div>
         {/snippet}

package/dist/ui/emoji-picker/cmp.emoji-picker.svelte

@@ -5,7 +5,7 @@ import IconEmoji from '@fluentui/svg-icons/icons/emoji_20_regular.svg?raw';
 let { dropdownPosition = 'bottom-end', on, children } = $props();
 </script>
 
-<Dropdown position={dropdownPosition} keepDropdownOpen={true}>
+<Dropdown position={dropdownPosition} keepDropdownOpen={true} panel={false}>
   {#snippet trigger()}
     <div class="emoji-picker__trigger">
       {#if children}

package/dist/ui/inputs/input-emoji-picker/cmp.input-emoji-picker.svelte

@@ -11,7 +11,7 @@ let { on } = $props();
 </button>
 
 <div class="input-emoji-picker">
-  <Dropdown position="bottom-end" matchTriggerWidth on={{ mounted: (e) => (toggleDropdown = e.toggleOpen) }} keepDropdownOpen={true}>
+  <Dropdown position="bottom-end" matchTriggerWidth panel={false} on={{ mounted: (e) => (toggleDropdown = e.toggleOpen) }} keepDropdownOpen={true}>
     {#snippet trigger()}
       <div class="input-emoji-picker__trigger-stub"></div>
     {/snippet}

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);
@@ -25,6 +25,15 @@ $effect(() => {
         }
     });
 });
+// Eagerly load video on mount when no poster — show first frame immediately
+$effect(() => {
+    if (!poster && video && !video.src) {
+        untrack(() => {
+            video.src = src;
+            video.load();
+        });
+    }
+});
 // Register player instance in global playback manager
 $effect(() => untrack(() => {
     PlaybackManager.registerMountedPlayer(id, {
@@ -111,7 +120,7 @@ $effect(() => {
             }
         }, {
             root: intersectionContainer,
-            rootMargin: '0px',
+            rootMargin: poster ? '0px' : '200px',
             threshold: [0.1, 0.4, 0.6]
         });
         observer.observe(container);
@@ -229,12 +238,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 +256,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.26",
+  "version": "0.2.27-1775564173889",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",