@streamscloud/kit 0.1.11 → 0.1.12-1772041668184

package/dist/ui/player/{feed-slider → utils}/wheel-gestures-adapter.js

@@ -2,12 +2,13 @@
 import { WheelGestures } from 'wheel-gestures';
 /**
  * Minimal, robust wheel adapter:
- * - EMA over axisVelocity[1] to smooth noisy streams (esp. on Windows)
+ * - Configurable axis: 'y' reads Y only; 'x' prefers X but remaps Y when X is negligible
+ * - EMA over velocity to smooth noisy streams (esp. on Windows)
  * - Cooldown blocks triggers while animation runs
  * - Mouse fallback: if velocity is near zero but delta is large, treat as a discrete "kick"
  */
 export const createWheelAdapter = (target, params) => {
-    const { cbs } = params;
+    const { axis = 'y', cbs } = params;
     // Tunables
     const PEAK_THRESHOLD = 0.4; // EMA magnitude threshold to consider as a "peak"
     const ACCEL_THRESHOLD = 0.02; // minimal directional EMA rise to count as real acceleration
@@ -30,41 +31,49 @@ export const createWheelAdapter = (target, params) => {
         }, cbs.getAnimationDurationMs() + 100);
     };
     const fire = (direction) => {
-        // Respect external guards (e.g., paging boundaries)
-        if ((direction > 0 && !cbs.canLoadNext()) || (direction < 0 && !cbs.canLoadPrevious())) {
+        if ((direction === 'next' && !cbs.canLoadNext()) || (direction === 'previous' && !cbs.canLoadPrevious())) {
             return;
         }
         isAnimating = true;
         cbs.onTrigger(direction);
         startCooldown();
     };
-    wheelGestures.on('wheel', ({ axisDelta: [, axisDeltaY], axisVelocity: [, axisVelocityY] }) => {
-        const velocityY = axisVelocityY || 0;
-        const deltaY = axisDeltaY || 0;
+    const getAxisValues = (axisDelta, axisVelocity) => {
+        if (axis === 'y') {
+            return [axisDelta[1], axisVelocity[1]];
+        }
+        // axis === 'x': prefer X, fall back to Y (remap vertical scroll to horizontal)
+        if (Math.abs(axisDelta[0]) >= Math.abs(axisDelta[1])) {
+            return [axisDelta[0], axisVelocity[0]];
+        }
+        return [axisDelta[1], axisVelocity[1]];
+    };
+    wheelGestures.on('wheel', ({ axisDelta, axisVelocity }) => {
+        const [delta, velocity] = getAxisValues(axisDelta, axisVelocity);
         // Tracking only: always update EMA and compute signs/acceleration
         previousEmaVelocity = emaVelocity;
-        emaVelocity += (velocityY - emaVelocity) * EMA_ALPHA;
+        emaVelocity += (velocity - emaVelocity) * EMA_ALPHA;
         const emaMagnitude = Math.abs(emaVelocity);
-        const velocitySign = Math.sign(emaVelocity) || Math.sign(velocityY);
+        const velocitySign = Math.sign(emaVelocity) || Math.sign(velocity);
         const emaAcceleration = emaVelocity - previousEmaVelocity;
         // During animation we only track; no arming, no triggering
         if (isAnimating) {
             return;
         }
         // Path 1: mouse-like discrete kick (platform-agnostic via delta/velocity ratio)
-        const absDelta = Math.abs(deltaY);
-        const absVel = Math.abs(velocityY);
+        const absDelta = Math.abs(delta);
+        const absVel = Math.abs(velocity);
         const stepRatio = absDelta / Math.max(1e-6, absVel);
         const isMouseLikeKick = absDelta >= MOUSE_DELTA_KICK && stepRatio >= MOUSE_STEP_RATIO_KICK;
         if (isMouseLikeKick) {
-            const direction = deltaY > 0 ? 1 : -1; // 1 = next/down, -1 = previous/up
+            const direction = delta > 0 ? 'next' : 'previous';
             fire(direction);
             return;
         }
         // Path 2: trackpad/inertia via EMA acceleration and peak gating
         const isAcceleratingInDirection = velocitySign !== 0 && emaAcceleration * velocitySign > ACCEL_THRESHOLD;
         if (isAcceleratingInDirection && emaMagnitude > PEAK_THRESHOLD) {
-            const direction = velocitySign > 0 ? 1 : -1; // 1 = next/down, -1 = previous/up
+            const direction = velocitySign > 0 ? 'next' : 'previous';
             fire(direction);
         }
     });

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

@@ -8,10 +8,11 @@ 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 = true, autoplay = false, loop = false, inert = false, allowPreloading = false, hideSpeaker = false, hidePlayButton = false, intersectionContainer, scrubberPosition = 'bottom', on } = $props();
+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 video = $state(null);
 let videoContainerRef = $state(null);
 let showControlsOnHover = $state(false);
+let showProgressOnHover = $state(false);
 let isVideoPaused = $state(true);
 let percentageCompleted = $state(0);
 let everActivated = $state(false);
@@ -246,7 +247,13 @@ const handleSeek = (percent) => {
     <img class="video__poster" src={poster} alt="" />
   {/if}
   {#if !controls || !everActivated}
-    <div class="video__overlay" onclick={togglePlay} onkeydown={() => ({})} role="none">
+    <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" />
@@ -256,6 +263,7 @@ const handleSeek = (percent) => {
           <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}
@@ -271,10 +279,10 @@ const handleSeek = (percent) => {
           class="video__progress-container"
           class:video__progress-container--top={scrubberPosition === 'top'}
           class:video__progress-container--bottom={scrubberPosition === 'bottom'}
-          onmouseenter={() => (showControlsOnHover = true)}
-          onmouseleave={() => (showControlsOnHover = false)}
+          onmouseenter={() => (showProgressOnHover = true)}
+          onmouseleave={() => (showProgressOnHover = false)}
           role="none">
-          {#if showControlsOnHover || (!showControlsOnHover && isVideoPaused)}
+          {#if showProgressOnHover || (!showProgressOnHover && isVideoPaused)}
             <div
               class="video__seek-bar"
               transition:fade={{ duration: isVideoPaused ? 0 : 300 }}
@@ -321,12 +329,12 @@ A full-featured video player with custom overlay controls, play/pause, mute, see
   background: var(--_video--background-color);
 }
 .video__playback-button {
+  --sc-kit--icon--size: 2.5rem;
   --sc-kit--icon--filter: drop-shadow(1px 1px #000000);
   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*/
@@ -337,10 +345,11 @@ A full-featured video player with custom overlay controls, play/pause, mute, see
   }
 }
 .video__mute-button {
+  --sc-kit--icon--size: 1.25rem;
+  --sc-kit--icon--filter: drop-shadow(1px 1px #000000);
   position: absolute;
   top: 0.625em;
   right: 0.625em;
-  font-size: 1em;
   z-index: 1;
 }
 .video__poster {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/kit",
-  "version": "0.1.11",
+  "version": "0.1.12-1772041668184",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",
@@ -17,6 +17,7 @@
     "pack": "npm run build && npm pack",
     "preview": "vite preview",
     "check": "svelte-check --tsconfig ./tsconfig.app.json && tsc -p tsconfig.node.json",
+    "check:strict": "svelte-check --tsconfig ./tsconfig.app.json --fail-on-warnings --output machine && eslint . --format codeframe --max-warnings 0 && prettier --check --plugin prettier-plugin-svelte --cache .",
     "lint": "prettier --check --plugin prettier-plugin-svelte . && eslint .",
     "lint-format": "prettier --write --plugin prettier-plugin-svelte . && eslint --fix .",
     "format": "prettier --write --plugin prettier-plugin-svelte ."
@@ -104,6 +105,10 @@
       "types": "./dist/ui/dialog/index.d.ts",
       "svelte": "./dist/ui/dialog/index.js"
     },
+    "./ui/form-group": {
+      "types": "./dist/ui/form-group/index.d.ts",
+      "svelte": "./dist/ui/form-group/index.js"
+    },
     "./ui/dropdown": {
       "types": "./dist/ui/dropdown/index.d.ts",
       "svelte": "./dist/ui/dropdown/index.js"
@@ -112,6 +117,10 @@
       "types": "./dist/ui/dynamic-component/index.d.ts",
       "svelte": "./dist/ui/dynamic-component/index.js"
     },
+    "./ui/html-block": {
+      "types": "./dist/ui/html-block/index.d.ts",
+      "svelte": "./dist/ui/html-block/index.js"
+    },
     "./ui/icon": {
       "types": "./dist/ui/icon/index.d.ts",
       "svelte": "./dist/ui/icon/index.js"
@@ -144,6 +153,10 @@
       "types": "./dist/ui/media-playback/index.d.ts",
       "svelte": "./dist/ui/media-playback/index.js"
     },
+    "./ui/media-viewer-dialog": {
+      "types": "./dist/ui/media-viewer-dialog/index.d.ts",
+      "svelte": "./dist/ui/media-viewer-dialog/index.js"
+    },
     "./ui/player/buttons": {
       "types": "./dist/ui/player/buttons/index.d.ts",
       "svelte": "./dist/ui/player/buttons/index.js"