@streamscloud/kit 0.10.7-1781475571897 → 0.10.7-1781507721211

package/dist/ui/grid-card/cmp.grid-card-media.svelte

@@ -4,14 +4,13 @@ import { PlaybackManager } from '../media-playback';
 import { Carousel } from '../player/carousel';
 import { ProportionalContainer } from '../proportional-container';
 import { SeekBar } from '../seek-bar';
-import { default as VideoPlayer } from './cmp.video-player.svelte';
+import VideoPlayer from './video-player.svelte';
 import IconImageOff from '@fluentui/svg-icons/icons/image_off_20_regular.svg?raw';
 const { items, aspectRatio = 'vertical', objectFit = 'contain', showSeekBar = true, duration } = $props();
 let currentIndex = $state(0);
 let currentTime = $state(0);
 let mediaDuration = $state(NaN);
 let activePlayerId = $state.raw(null);
-const hasPlayable = $derived(items.some((item) => item.playable));
 const isCurrentPlayable = $derived(items[currentIndex]?.playable === true);
 const progress = $derived(mediaDuration ? currentTime / mediaDuration : 0);
 const onPlayerTimeUpdate = (t) => (currentTime = t);
@@ -52,6 +51,7 @@ const onCarouselIndexChanged = (index) => {
       {#if items[0].playable}
         <VideoPlayer
           src={items[0].url}
+          poster={items[0].cover}
           active={true}
           on={{ timeUpdate: onPlayerTimeUpdate, durationChange: onPlayerDurationChange, activate: onPlayerActivate }} />
       {:else}
@@ -65,6 +65,7 @@ const onCarouselIndexChanged = (index) => {
               {#if item.playable}
                 <VideoPlayer
                   src={item.url}
+                  poster={item.cover}
                   active={item === items[currentIndex]}
                   on={{ timeUpdate: onPlayerTimeUpdate, durationChange: onPlayerDurationChange, activate: onPlayerActivate }} />
               {:else}
@@ -82,7 +83,7 @@ const onCarouselIndexChanged = (index) => {
   </ProportionalContainer>
 </div>
 
-{#if showSeekBar && hasPlayable}
+{#if showSeekBar}
   <div class="seek-bar-section">
     <div class="seek-bar-section__content">
       <div class="seek-bar-section__bar" class:seek-bar-section__bar--hidden={!isCurrentPlayable}>
@@ -95,9 +96,9 @@ const onCarouselIndexChanged = (index) => {
 <!--
 @component
 Media slot for `GridCard`. Renders an empty placeholder, a single `Image` / `VideoPlayer`, or
-a `Carousel` of mixed image / video items. Seek-bar appears below the media when any item is
-playable; in a carousel it's hidden via `visibility: hidden` when the current slide is an
-image (preserves card height). Optional `duration` overlay renders bottom-right.
+a `Carousel` of mixed image / video items. Seek-bar renders below the media whenever `showSeekBar`
+(default true); the bar itself is hidden via `visibility: hidden` when the current item isn't
+playable (preserves card height). Optional `duration` overlay renders bottom-right.
 
 ### CSS Custom Properties
 | Property | Description | Default |

package/dist/ui/grid-card/cmp.grid-card-media.svelte.d.ts

@@ -2,6 +2,8 @@ import type { AspectRatio, ObjectFit } from './types';
 export type MediaItem = {
     url: string;
     playable?: boolean;
+    /** Poster shown for a playable item before playback; falls back to the video's first frame. */
+    cover?: string;
 };
 type Props = {
     items: MediaItem[];
@@ -16,9 +18,9 @@ type Props = {
 };
 /**
  * Media slot for `GridCard`. Renders an empty placeholder, a single `Image` / `VideoPlayer`, or
- * a `Carousel` of mixed image / video items. Seek-bar appears below the media when any item is
- * playable; in a carousel it's hidden via `visibility: hidden` when the current slide is an
- * image (preserves card height). Optional `duration` overlay renders bottom-right.
+ * a `Carousel` of mixed image / video items. Seek-bar renders below the media whenever `showSeekBar`
+ * (default true); the bar itself is hidden via `visibility: hidden` when the current item isn't
+ * playable (preserves card height). Optional `duration` overlay renders bottom-right.
  *
  * ### CSS Custom Properties
  * | Property | Description | Default |

package/dist/ui/grid-card/fields/cmp.grid-card-field.svelte

@@ -3,8 +3,8 @@ export {};
 </script>
 
 <div class="grid-card-field" class:grid-card-field--multiline={multiline} class:grid-card-field--vertical={vertical}>
-  <span class="grid-card-field__label">{label}</span>
-  <div class="grid-card-field__content">
+  <span class="grid-card-field__label" class:grid-card-field__label--vertical={vertical}>{label}</span>
+  <div class="grid-card-field__content" class:grid-card-field__content--multiline={multiline} class:grid-card-field__content--vertical={vertical}>
     {@render children()}
   </div>
 </div>
@@ -43,9 +43,6 @@ content; set `vertical` to stack the label above the content (escapes the subgri
   grid-row-gap: 0.25rem;
   padding: var(--_gcf--padding-block) var(--_gcf--padding-inline);
 }
-.grid-card-field--vertical .grid-card-field__label, .grid-card-field--vertical .grid-card-field__content {
-  padding: 0;
-}
 .grid-card-field__label {
   font-size: 0.625rem;
   color: var(--sc-kit--color--text--secondary);
@@ -54,8 +51,19 @@ content; set `vertical` to stack the label above the content (escapes the subgri
   white-space: nowrap;
   line-height: var(--sc-kit--leading--tight);
 }
+.grid-card-field__label--vertical {
+  padding: 0;
+}
 .grid-card-field__content {
+  display: flex;
+  align-items: center;
   padding-block: var(--_gcf--padding-block);
   padding-inline-end: var(--_gcf--padding-inline);
   min-width: 0;
+}
+.grid-card-field__content--multiline {
+  align-items: flex-start;
+}
+.grid-card-field__content--vertical {
+  padding: 0;
 }</style>

package/dist/ui/grid-card/{cmp.video-player.svelte → video-player.svelte}

@@ -4,7 +4,7 @@ import { PlaybackManager } from '../media-playback';
 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 { untrack } from 'svelte';
-const { src, active, on } = $props();
+const { src, poster, active, on } = $props();
 const id = randomNanoid();
 let videoEl = $state(null);
 let currentTime = $state(0);
@@ -115,6 +115,7 @@ export const seekTo = (time) => {
   <video
     bind:this={videoEl}
     src={src}
+    poster={poster}
     controls={false}
     preload="auto"
     ontimeupdate={onTimeUpdate}

package/dist/ui/grid-card/{cmp.video-player.svelte.d.ts → video-player.svelte.d.ts}

@@ -1,5 +1,7 @@
 type Props = {
     src: string;
+    /** Poster image shown before playback; falls back to the video's first frame when omitted. */
+    poster?: string;
     /**
      * When `true`, the player re-publishes its current `currentTime` / `duration` upward via
      * `on.timeUpdate` / `on.durationChange` so the parent can read this slide's state on
@@ -19,8 +21,8 @@ type Props = {
  * with the global `PlaybackManager` so only one player can play at a time. Exposes `seekTo(t)`
  * via `bind:this` for parent seek-bar sync. Not exported standalone — use `GridCardMedia`.
  */
-declare const Cmp: import("svelte").Component<Props, {
+declare const VideoPlayer: import("svelte").Component<Props, {
     seekTo: (time: number) => void;
 }, "">;
-type Cmp = ReturnType<typeof Cmp>;
-export default Cmp;
+type VideoPlayer = ReturnType<typeof VideoPlayer>;
+export default VideoPlayer;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/kit",
-  "version": "0.10.7-1781475571897",
+  "version": "0.10.7-1781507721211",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",