@streamscloud/embeddable 4.0.0 → 5.1.0

package/dist/streams/stream-player/cmp.stream-player.svelte

@@ -19,7 +19,7 @@ import { PlayerSlider } from '../../ui/player';
 import { SpotlightLayout } from '../../ui/spotlight-layout';
 import { SwipeIndicator } from '../../ui/swipe-indicator';
 import { default as Controls } from './controls.svelte';
-import { mapStreamPlayerModel } from './mapper';
+import { mapToStreamPlayerModel } from './mapper';
 import { GetStreamDocument } from './operations.generated';
 import { default as Overview } from './stream-overview.svelte';
 import { StreamPlayerBuffer } from './stream-player-buffer.svelte';
@@ -27,7 +27,7 @@ import { StreamPlayerLocalization } from './stream-player-localization';
 import { StreamPlayerUiManager } from './ui-manager.svelte';
 import { AppEventsTracker } from '@streamscloud/streams-analytics-collector';
 import { onMount } from 'svelte';
-let { streamId, graphqlOrigin, localization: localizationInit = 'en', showStreamsCloudWatermark, initiator, on } = $props();
+let { streamId, graphqlOrigin, localization: localizationInit = 'en', showStreamsCloudWatermark, shortVideoSocialInteractionsHandler, initiator, on } = $props();
 const localization = $derived(new StreamPlayerLocalization(localizationInit));
 let model = $state(null);
 let buffer = $state.raw(null);
@@ -72,7 +72,7 @@ onMount(() => __awaiter(void 0, void 0, void 0, function* () {
             image: ((_d = streamPayload.data.stream.cover) === null || _d === void 0 ? void 0 : _d.url) || null
         });
         // start tracking the stream
-        model = mapStreamPlayerModel(streamPayload.data.stream);
+        model = mapToStreamPlayerModel(streamPayload.data.stream);
         buffer = new StreamPlayerBuffer({ graphql, streamId });
         AppEventsTracker.trackStreamView(streamPayload.data.stream.id);
         startActivityTracking();
@@ -211,6 +211,7 @@ const onProgress = (pageId, videoId, progress) => {
                     progress: (progress) => onProgress(item.id, item.shortVideo.id, progress)
                   }}
                   autoplay="on-appearance"
+                  socialInteractionsHandler={shortVideoSocialInteractionsHandler}
                   localization={localization.shortVideoViewerLocalization}
                   showAttachments={uiManager.showShortVideoOverlay}
                   showControls={uiManager.showShortVideoOverlay} />
@@ -238,6 +239,7 @@ const onProgress = (pageId, videoId, progress) => {
         buffer={buffer}
         uiManager={uiManager}
         localization={localization}
+        shortVideoSocialInteractionsHandler={shortVideoSocialInteractionsHandler}
         on={{
           closePlayer: () => onPlayerClose(),
           productClick: (productId: String) => onProductCardClick(productId)
@@ -267,7 +269,7 @@ const onProgress = (pageId, videoId, progress) => {
   container-type: inline-size;
   display: flex;
   position: relative;
-  background-color: rgba(0, 0, 0, 0.75);
+  background-color: #c1c1c1;
   background-image: var(--background-image);
   background-size: cover;
   background-blend-mode: multiply;

package/dist/streams/stream-player/cmp.stream-player.svelte.d.ts

@@ -1,10 +1,12 @@
 import type { Locale } from '../../core/locale';
+import { type ShortVideoSocialInteractionsHandler } from '../../short-videos/short-video-viewer';
 import { type IStreamPlayerLocalization } from './stream-player-localization';
 type Props = {
     streamId: string;
     localization?: IStreamPlayerLocalization | Locale;
     graphqlOrigin?: string;
     showStreamsCloudWatermark?: boolean;
+    shortVideoSocialInteractionsHandler?: ShortVideoSocialInteractionsHandler;
     initiator?: string;
     on?: {
         closePlayer?: () => void;

package/dist/streams/stream-player/controls.svelte

@@ -9,7 +9,7 @@ import { StreamPlayerLocalization } from './stream-player-localization';
 import IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_28_regular.svg?raw';
 import IconChevronUp from '@fluentui/svg-icons/icons/chevron_up_28_regular.svg?raw';
 import IconDismiss from '@fluentui/svg-icons/icons/dismiss_28_regular.svg?raw';
-let { buffer, uiManager, localization, on } = $props();
+let { buffer, uiManager, shortVideoSocialInteractionsHandler, localization, on } = $props();
 const shortVideo = $derived(((_a = buffer.current) === null || _a === void 0 ? void 0 : _a.type) === 'short-video' && ((_b = buffer.current) === null || _b === void 0 ? void 0 : _b.shortVideo) ? mapToShortVideoViewerModel(buffer.current.shortVideo) : null);
 const singleWebViewPage = $derived.by(() => {
     var _a;
@@ -46,7 +46,7 @@ const changeShowShortVideoAttachments = () => {
 };
 </script>
 
-{#if !uiManager.showShortVideoOverlay}
+{#if uiManager.viewInitialized && !uiManager.showShortVideoOverlay}
   <div class="stream-player-controls">
     <div class="stream-player-controls__left">
       {#if shortVideo}
@@ -56,15 +56,22 @@ const changeShowShortVideoAttachments = () => {
               <ShortVideoViewerAttachmentsInline model={shortVideo} />
             </div>
           {/if}
-          <ShortVideoControls model={shortVideo} on={{ attachmentsClicked: changeShowShortVideoAttachments }} />
+          <ShortVideoControls
+            model={shortVideo}
+            socialInteractionsHandler={shortVideoSocialInteractionsHandler}
+            on={{ attachmentsClicked: changeShowShortVideoAttachments }} />
         </div>
       {/if}
       <div class="stream-player-controls__navigation-buttons" class:stream-player-controls__navigation-buttons--single-web-view-page={singleWebViewPage}>
         <button type="button" class="navigation-button" disabled={!buffer.canLoadPrevious} onclick={buffer.loadPrevious}>
-          <Icon src={IconChevronUp} />
+          <span class="navigation-button__icon">
+            <Icon src={IconChevronUp} />
+          </span>
         </button>
         <button type="button" class="navigation-button" disabled={!buffer.canLoadNext} onclick={buffer.loadNext}>
-          <Icon src={IconChevronDown} />
+          <span class="navigation-button__icon">
+            <Icon src={IconChevronDown} />
+          </span>
         </button>
       </div>
     </div>
@@ -209,6 +216,10 @@ const changeShowShortVideoAttachments = () => {
   opacity: 0.5;
   cursor: default;
 }
+.close-button:hover {
+  background-color: rgba(0, 0, 0, 0.9);
+  transition: background-color 0.5s;
+}
 @container (width < 576px) {
   .close-button {
     left: unset;
@@ -217,6 +228,7 @@ const changeShowShortVideoAttachments = () => {
 }
 
 .navigation-button {
+  --_icon-scale: 1;
   width: var(--stream-player--button--size);
   min-width: var(--stream-player--button--size);
   max-width: var(--stream-player--button--size);
@@ -233,4 +245,12 @@ const changeShowShortVideoAttachments = () => {
 .navigation-button:disabled {
   opacity: 0.5;
   cursor: default;
+}
+.navigation-button:hover:not(:disabled) {
+  --_icon-scale: 1.2;
+}
+.navigation-button__icon {
+  display: block;
+  transform: scale(var(--_icon-scale));
+  transition: 0.3s;
 }</style>

package/dist/streams/stream-player/controls.svelte.d.ts

@@ -1,9 +1,11 @@
+import { type ShortVideoSocialInteractionsHandler } from '../../short-videos/short-video-viewer';
 import type { StreamPlayerBuffer } from './stream-player-buffer.svelte';
 import { StreamPlayerLocalization } from './stream-player-localization';
 import type { StreamPlayerUiManager } from './ui-manager.svelte';
 type Props = {
     buffer: StreamPlayerBuffer;
     uiManager: StreamPlayerUiManager;
+    shortVideoSocialInteractionsHandler?: ShortVideoSocialInteractionsHandler;
     localization: StreamPlayerLocalization;
     on: {
         closePlayer: () => void;

package/dist/streams/stream-player/index.d.ts

@@ -1,3 +1,4 @@
+import type { ShortVideoSocialInteractionsHandler } from '../../short-videos/short-video-viewer';
 import type { IStreamPlayerLocalization } from './stream-player-localization';
 export type { IStreamPlayerLocalization };
 /**
@@ -28,6 +29,7 @@ export declare const openStreamPlayer: (init: {
     graphqlOrigin?: string;
     localization?: IStreamPlayerLocalization | "en" | "no";
     showStreamsCloudWatermark?: boolean;
+    shortVideoSocialInteractionsHandler?: ShortVideoSocialInteractionsHandler;
     initiator?: string;
     on?: {
         streamActivated?: (data: {

package/dist/streams/stream-player/index.js

@@ -27,7 +27,7 @@ import { mount, unmount } from 'svelte';
  * ```
  */
 export const openStreamPlayer = (init) => {
-    const { streamId, graphqlOrigin, localization, showStreamsCloudWatermark, initiator } = init;
+    const { streamId, graphqlOrigin, localization, showStreamsCloudWatermark, shortVideoSocialInteractionsHandler, initiator } = init;
     const shadowHost = new ModalShadowHost();
     const mounted = mount(StreamPlayer, {
         target: shadowHost.shadowRoot,
@@ -36,6 +36,7 @@ export const openStreamPlayer = (init) => {
             graphqlOrigin,
             localization: getLocale(localization),
             showStreamsCloudWatermark,
+            shortVideoSocialInteractionsHandler,
             initiator,
             on: {
                 streamActivated: (data) => {

package/dist/streams/stream-player/mapper.d.ts

@@ -1,3 +1,3 @@
 import type { StreamPlayerPayloadFragment } from './operations.generated';
 import type { StreamPlayerModel } from './types';
-export declare const mapStreamPlayerModel: (payload: StreamPlayerPayloadFragment) => StreamPlayerModel;
+export declare const mapToStreamPlayerModel: (payload: StreamPlayerPayloadFragment) => StreamPlayerModel;

package/dist/streams/stream-player/mapper.js

@@ -1,4 +1,4 @@
-export const mapStreamPlayerModel = (payload) => {
+export const mapToStreamPlayerModel = (payload) => {
     const headerDataProvider = payload.availableFrom ?? payload.ownerProfile;
     return {
         id: payload.id,

package/dist/streams/stream-player/ui-manager.svelte.d.ts

@@ -3,6 +3,7 @@ export declare class StreamPlayerUiManager {
     showShortVideoAttachments: boolean;
     globalCssVariables: string;
     isMobileView: boolean;
+    viewInitialized: boolean;
     showShortVideoOverlay: boolean;
     private readonly buttonSize;
     private readonly iconSize;

package/dist/streams/stream-player/ui-manager.svelte.js

@@ -13,7 +13,8 @@ export class StreamPlayerUiManager {
         return values.join(';');
     });
     isMobileView = $derived.by(() => this.viewTotalWidth <= 576);
-    showShortVideoOverlay = $derived.by(() => (this.viewTotalWidth - this.mainViewColumnWidth) / 2 <= 85);
+    viewInitialized = $derived.by(() => !!this.viewTotalWidth && !!this.mainViewColumnWidth);
+    showShortVideoOverlay = $derived.by(() => this.viewInitialized && (this.viewTotalWidth - this.mainViewColumnWidth) / 2 <= 85);
     buttonSize = 48;
     iconSize = 28;
     controlsOffsetHorizontal = 28;

package/dist/ui/line-clamp/cmp.line-clamp.svelte

@@ -51,20 +51,25 @@ const toggleShowMore = () => {
 </script>
 
 <div class="line-clamp" bind:this={element}>
-  <div class="line-clamp__wrapper" bind:this={clampWrapperRef}>
-    {#if children}
-      {@render children()}
-    {:else if value}
-      {@html value}
+  <div class="line-clamp__wrapper-container">
+    <div class="line-clamp__wrapper" bind:this={clampWrapperRef}>
+      {#if children}
+        {@render children()}
+      {:else if value}
+        {@html value}
+      {/if}
+    </div>
+
+    {#if enableShowMore && isTruncated && !showingAllText}
+      <button type="button" class="line-clamp__show-more-button line-clamp__show-more-button--inline" onclick={toggleShowMore}>
+        {localization.showMore}
+      </button>
     {/if}
   </div>
-  {#if enableShowMore && (isTruncated || showingAllText)}
+
+  {#if enableShowMore && showingAllText}
     <button type="button" class="line-clamp__show-more-button" onclick={toggleShowMore}>
-      {#if showingAllText}
-        {localization.showLess}
-      {:else}
-        {localization.showMore}
-      {/if}
+      {localization.showLess}
     </button>
   {/if}
 </div>
@@ -75,6 +80,9 @@ const toggleShowMore = () => {
   display: flex;
   flex-direction: column;
 }
+.line-clamp__wrapper-container {
+  position: relative;
+}
 .line-clamp__wrapper {
   display: -webkit-box;
   overflow: hidden;
@@ -83,7 +91,21 @@ const toggleShowMore = () => {
   -webkit-box-orient: vertical;
 }
 .line-clamp__show-more-button {
-  margin-top: 0.5em;
   font-size: 0.9em;
-  opacity: 0.8;
+  font-style: italic;
+}
+.line-clamp__show-more-button--inline {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  padding-left: 1em;
+  backdrop-filter: blur(2px);
+}
+.line-clamp__show-more-button--inline::after {
+  content: "...";
+  position: absolute;
+  left: 0;
+}
+.line-clamp__show-more-button:not(.line-clamp__show-more-button--inline) {
+  margin-top: 0.5em;
 }</style>

package/dist/ui/player/cmp.player-slider.svelte

@@ -1,6 +1,6 @@
-<script lang="ts">import { Utils } from '../../core/utils';
-import { isScrollingPrevented } from './prevent-slider-scroll';
+<script lang="ts">import { isScrollingPrevented } from './prevent-slider-scroll';
 import { onDestroy, onMount, untrack } from 'svelte';
+const MOUSE_DETECTION_THRESHOLD_MS = 100;
 let { buffer, on, children } = $props();
 let slidesRef;
 let sliderHeight = $state(0);
@@ -90,7 +90,28 @@ onMount(() => {
         }
         reset();
     });
-    slidesRef.addEventListener('wheel', Utils.throttle((e) => {
+    let waveDetector = {
+        events: [],
+        direction: 0,
+        peakReached: false,
+        lastPeak: 0,
+        waveStartTime: 0
+    };
+    let isAnimatingWheel = false;
+    const triggerAnimation = (direction) => {
+        isAnimatingWheel = true;
+        if (direction > 0 && buffer.canLoadNext) {
+            buffer.loadNext();
+        }
+        else if (direction < 0 && buffer.canLoadPrevious) {
+            buffer.loadPrevious();
+        }
+        setTimeout(() => {
+            isAnimatingWheel = false;
+        }, buffer.animationDuration + 100);
+    };
+    slidesRef.addEventListener('wheel', (e) => {
+        e.preventDefault();
         const checkCanHandleWheel = (node) => {
             while (node && node !== slidesRef) {
                 if (isScrollingPrevented(node)) {
@@ -103,13 +124,55 @@ onMount(() => {
         if (!checkCanHandleWheel(e.target)) {
             return;
         }
-        if (e.deltaY > 0 && buffer.canLoadNext) {
-            buffer.loadNext();
+        const now = Date.now();
+        const absDelta = Math.abs(e.deltaY);
+        const direction = Math.sign(e.deltaY);
+        // Mouse - large stable values, trigger immediately
+        if (absDelta >= 10 && !isAnimatingWheel) {
+            const lastEvent = waveDetector.events[waveDetector.events.length - 1];
+            const timeSinceLastEvent = lastEvent ? now - lastEvent.time : 1000;
+            // If enough time has passed since the last event - it's a mouse
+            if (timeSinceLastEvent > MOUSE_DETECTION_THRESHOLD_MS) {
+                triggerAnimation(direction);
+                waveDetector = { events: [], direction: 0, peakReached: false, lastPeak: 0, waveStartTime: 0 };
+                return;
+            }
         }
-        if (e.deltaY < 0 && buffer.canLoadPrevious) {
-            buffer.loadPrevious();
+        // Touchpad - small, variable values, need to analyze the wave
+        // New wave if: direction changed or a lot of time has passed
+        if (direction !== waveDetector.direction || (waveDetector.waveStartTime && now - waveDetector.waveStartTime > 1500)) {
+            // Finalize the previous wave if it existed
+            if (waveDetector.peakReached && !isAnimatingWheel) {
+                triggerAnimation(waveDetector.direction);
+            }
+            // Start a new wave
+            waveDetector = {
+                events: [{ delta: absDelta, time: now }],
+                direction: direction,
+                peakReached: false,
+                lastPeak: absDelta,
+                waveStartTime: now
+            };
+            return;
+        }
+        // Continue the current wave
+        waveDetector.events.push({ delta: absDelta, time: now });
+        // Determine the phase of the wave
+        if (absDelta > waveDetector.lastPeak) {
+            // The wave is growing
+            waveDetector.lastPeak = absDelta;
+            waveDetector.peakReached = absDelta >= 5; // The minimum peak to consider a valid wave
         }
-    }, buffer.animationDuration + 250));
+        else if (absDelta < waveDetector.lastPeak * 0.5) {
+            // The wave has dropped significantly - consider the gesture complete
+            if (waveDetector.peakReached && !isAnimatingWheel) {
+                triggerAnimation(waveDetector.direction);
+                waveDetector = { events: [], direction: 0, peakReached: false, lastPeak: 0, waveStartTime: 0 };
+            }
+        }
+        // Cleanup old events
+        waveDetector.events = waveDetector.events.filter((evt) => now - evt.time < 2000);
+    });
     slidesRef.addEventListener('transitionend', (e) => {
         if (e.target !== slidesRef) {
             return;
@@ -142,7 +205,10 @@ const styles = $derived.by(() => {
   <div class="player-slider__slides" bind:this={slidesRef} style={styles}>
     {#each buffer.loaded as item, index (item)}
       <div class="player-slider__slide">
-        {@render children({ item, active: index === activeIndex })}
+        {#if index >= activeIndex - 1 && index <= activeIndex + 1}
+          <!-- Only render the active slide and its immediate neighbors for performance -->
+          {@render children({ item, active: index === activeIndex })}
+        {/if}
       </div>
     {/each}
   </div>

package/dist/ui/progress/cmp.progress.svelte

@@ -22,10 +22,13 @@
   --_progress--height: var(--progress--height, 0.25em);
   --_progress--back-color: var(--progress--back-color, #b0b0b0);
   --_progress--front-color: var(--progress--front-color, #ffffff);
+  --_progress--box-shadow: var(--progress--box-shadow, 0 2px 3px rgba(0, 0, 0, 0.25) inset);
+  --_progress--border-radius: var(--progress--border-radius, 0);
   width: 100%;
   background: var(--_progress--back-color);
   height: var(--_progress--height);
-  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25) inset;
+  box-shadow: var(--_progress--box-shadow);
+  border-radius: var(--_progress--border-radius);
 }
 .progress__value {
   background: var(--_progress--front-color);

package/dist/ui/seek-bar/cmp.seek-bar.svelte

@@ -1,30 +1,112 @@
-<script lang="ts">let { value, on } = $props();
+<script lang="ts">let { value, listenParentClicks = false, on } = $props();
+let seekBarRef;
+let scrubberRef;
 let progressRef;
-let valueRef;
+let isDragging = $state(false);
+const cssValue = $derived(`${100 * (value <= 1 ? value : 1)}%`);
 const handleSeek = (e) => {
+    if (!progressRef) {
+        return;
+    }
     e.stopPropagation();
     const { left, width } = progressRef.getBoundingClientRect();
     const x = e.clientX - left;
-    const percent = x / width;
-    value = percent;
-    valueRef.style.transition = 'none';
-    valueRef.style.width = `${100 * percent}%`;
-    setTimeout(() => {
-        valueRef.style.transition = '';
-    }, 0);
+    const percent = Math.max(0, Math.min(1, x / width));
     on === null || on === void 0 ? void 0 : on.seek(percent);
 };
+const handleParentClick = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (!progressRef || !seekBarRef || isDragging) {
+        return;
+    }
+    const seekBarRect = progressRef.getBoundingClientRect();
+    if (e.clientX >= seekBarRect.left && e.clientX <= seekBarRect.right) {
+        const x = e.clientX - seekBarRect.left;
+        const percent = Math.max(0, Math.min(1, x / seekBarRect.width));
+        on === null || on === void 0 ? void 0 : on.seek(percent);
+    }
+};
+const onMouseMove = (e) => {
+    if (isDragging) {
+        handleSeek(e);
+    }
+};
+const onMouseUp = () => {
+    var _a;
+    isDragging = false;
+    window.removeEventListener('mousemove', onMouseMove);
+    window.removeEventListener('mouseup', onMouseUp);
+    scrubberRef === null || scrubberRef === void 0 ? void 0 : scrubberRef.blur();
+    (_a = on === null || on === void 0 ? void 0 : on.dragEnd) === null || _a === void 0 ? void 0 : _a.call(on);
+};
+const onMouseDown = (e) => {
+    var _a;
+    isDragging = true;
+    (_a = on === null || on === void 0 ? void 0 : on.dragStart) === null || _a === void 0 ? void 0 : _a.call(on);
+    handleSeek(e);
+    window.addEventListener('mousemove', onMouseMove);
+    window.addEventListener('mouseup', onMouseUp);
+    scrubberRef === null || scrubberRef === void 0 ? void 0 : scrubberRef.blur();
+};
+const handleScrubberKeyDown = (event) => {
+    const step = 0.05;
+    let newValue;
+    if (event.key === 'ArrowLeft') {
+        newValue = Math.max(0, value - step);
+    }
+    else if (event.key === 'ArrowRight') {
+        newValue = Math.min(1, value + step);
+    }
+    else if (event.key === 'Home') {
+        newValue = 0;
+    }
+    else if (event.key === 'End') {
+        newValue = 1;
+    }
+    if (newValue !== undefined) {
+        event.preventDefault();
+        on === null || on === void 0 ? void 0 : on.seek(newValue);
+    }
+};
+$effect(() => {
+    let parent = null;
+    if (listenParentClicks && seekBarRef) {
+        parent = seekBarRef.parentElement;
+        if (parent) {
+            parent.addEventListener('click', handleParentClick);
+        }
+    }
+    return () => {
+        if (parent) {
+            parent.removeEventListener('click', handleParentClick);
+        }
+    };
+});
+$effect(() => {
+    return () => {
+        window.removeEventListener('mousemove', onMouseMove);
+        window.removeEventListener('mouseup', onMouseUp);
+    };
+});
 </script>
 
-<div class="seek-bar" onclick={handleSeek} onkeydown={() => ({})} role="none">
+<div class="seek-bar" onmousedown={onMouseDown} onkeydown={() => ({})} role="none" bind:this={seekBarRef}>
   <div class="seek-bar__container" bind:this={progressRef}>
-    <span
-      class="seek-bar__value"
-      class:seek-bar__value--animate={value > 0.001 && value < 0.96}
-      style="width: {`${100 * (value <= 1 ? value : 1)}%`}"
-      bind:this={valueRef}>
-      &nbsp;
-    </span>
+    <span class="seek-bar__value" style="width: {cssValue}"> &nbsp; </span>
+    <div
+      class="seek-bar__scrubber"
+      bind:this={scrubberRef}
+      class:is-dragging={isDragging}
+      style="left: {cssValue}"
+      role="slider"
+      tabindex="0"
+      aria-valuemin="0"
+      aria-valuemax="1"
+      aria-valuenow={value}
+      aria-label="Media position slider"
+      onkeydown={handleScrubberKeyDown}>
+    </div>
   </div>
 </div>
 
@@ -40,24 +122,48 @@ const handleSeek = (e) => {
   }
 }
 .seek-bar {
-  --_seek-bar--height: var(--seek-bar--height, 0.25em);
-  --_seek-bar--back-color: var(--seek-bar--back-color, #b0b0b0);
-  --_seek-bar--front-color: var(--seek-bar--front-color, #ffffff);
   cursor: pointer;
+  position: relative;
+  padding: 0.3125rem 0;
+  --_seek-bar--container-color: var(--seek-bar--container-color, #b0b0b0);
+  --_seek-bar--value-color: var(--seek-bar--value-color, #ffffff);
+  --_seek-bar--scrubber-color: var(--seek-bar--scrubber-color, #ffffff);
+  --_seek-bar--scrubber-border-color: var(--seek-bar--scrubber-border-color, #b0b0b0);
+  --_seek-bar--scrubber-opacity: 0;
+}
+.seek-bar:hover {
+  --_seek-bar--scrubber-opacity: 1;
 }
 .seek-bar__container {
   width: 100%;
-  background: var(--_seek-bar--back-color);
-  height: var(--_seek-bar--height);
-  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25) inset;
-  border-radius: calc(var(--_seek-bar--height) / 2);
-  overflow: hidden;
+  background: var(--_seek-bar--container-color);
+  height: 0.3125rem;
+  position: relative;
 }
 .seek-bar__value {
-  background: var(--_seek-bar--front-color);
+  background: var(--_seek-bar--value-color);
+  border-color: var(--_seek-bar--container-color);
+  border-width: 0.0625rem;
   display: inline-block;
   height: 100%;
 }
-.seek-bar__value--animate {
-  transition: width 500ms;
+.seek-bar__scrubber {
+  position: absolute;
+  top: 50%;
+  width: 0.75rem;
+  height: 0.75rem;
+  background: var(--_seek-bar--scrubber-color);
+  border-color: var(--_seek-bar--scrubber-border-color);
+  border-width: 0.0625rem;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 1;
+  opacity: var(--_seek-bar--scrubber-opacity);
+  transition: opacity 0.2s ease-in-out;
+}
+.seek-bar__scrubber.is-dragging, .seek-bar__scrubber:focus {
+  --_seek-bar--scrubber-opacity: 1;
+}
+.seek-bar__scrubber:focus-visible {
+  outline: none;
 }</style>

package/dist/ui/seek-bar/cmp.seek-bar.svelte.d.ts

@@ -3,8 +3,11 @@ type Props = {
      * 0-1
      * */
     value: number;
+    listenParentClicks?: boolean;
     on: {
         seek: (e: number) => void;
+        dragStart?: () => void;
+        dragEnd?: () => void;
     };
 };
 declare const Cmp: import("svelte").Component<Props, {}, "">;