@audius/harmony 0.2.0 → 0.3.1

package/dist/components/scrubber/Slider.js

@@ -1,9 +1,9 @@
 import { __assign } from '../../_virtual/_tslib.js';
 import { jsxs, jsx } from '@emotion/react/jsx-runtime';
-import { useState, useRef, useCallback, useEffect } from 'react';
+import { useRef, useCallback, useEffect } from 'react';
 import cn from 'classnames';
 import styles from './Slider.module.css.js';
-import { useAnimations } from './hooks.js';
+import { usePlaybackPositionTracking } from './hooks.js';
 
 /** Gets the X-position of a div. */
 var getXPosition = function (element) {
@@ -16,8 +16,7 @@ var getXPosition = function (element) {
  */
 var Slider = function (_a) {
     var _b;
-    var mediaKey = _a.mediaKey, isPlaying = _a.isPlaying, isMobile = _a.isMobile, isDisabled = _a.isDisabled, elapsedSeconds = _a.elapsedSeconds, totalSeconds = _a.totalSeconds, playbackRate = _a.playbackRate, onScrub = _a.onScrub, onScrubRelease = _a.onScrubRelease, _c = _a.includeExpandedTargets, includeExpandedTargets = _c === void 0 ? true : _c, style = _a.style;
-    var _d = useState(''), previousMediaKey = _d[0], setPreviousMediaKey = _d[1];
+    var isPlaying = _a.isPlaying, isMobile = _a.isMobile, isDisabled = _a.isDisabled, totalSeconds = _a.totalSeconds, elapsedSeconds = _a.elapsedSeconds, onScrub = _a.onScrub, onScrubRelease = _a.onScrubRelease, getAudioPosition = _a.getAudioPosition, getTotalTime = _a.getTotalTime, _c = _a.includeExpandedTargets, includeExpandedTargets = _c === void 0 ? true : _c, style = _a.style;
     // Percentage of the complete scrubber being dragged to.
     // e.g. 0.25 means the user has dragged the scrubber 1/4th of the way.
     var dragPercent = useRef(0);
@@ -30,7 +29,7 @@ var Slider = function (_a) {
     var railRef = useRef(null);
     var trackRef = useRef(null);
     var handleRef = useRef(null);
-    var _e = useAnimations(trackRef, handleRef, elapsedSeconds, totalSeconds, playbackRate), play = _e.play, pause = _e.pause, setPercent = _e.setPercent;
+    var _d = usePlaybackPositionTracking(trackRef, handleRef, getAudioPosition, getTotalTime), play = _d.play, pause = _d.pause, refreshPosition = _d.refreshPosition, setPositionOverrideEnabled = _d.setPositionOverrideEnabled, setPosition = _d.setPosition;
     /**
      * Sets the percentage across the scrubber for a given pageX position.
      */
@@ -62,13 +61,13 @@ var Slider = function (_a) {
         e.preventDefault();
         setDragPercentMouse(e);
         if (dragPercent.current !== null) {
-            setPercent(dragPercent.current);
+            setPosition(dragPercent.current);
             var seconds = dragPercent.current * totalSeconds;
             if (onScrub) {
                 onScrub(seconds);
             }
         }
-    }, [dragPercent, setDragPercentMouse, totalSeconds, setPercent, onScrub]);
+    }, [dragPercent, setDragPercentMouse, totalSeconds, onScrub, setPosition]);
     /**
      * Watches user touch movements while the scrubber handle is being dragged.
      */
@@ -77,13 +76,13 @@ var Slider = function (_a) {
         e.preventDefault();
         setDragPercentTouch(e);
         if (dragPercent.current !== null) {
-            setPercent(dragPercent.current);
+            setPosition(dragPercent.current);
             var seconds = dragPercent.current * totalSeconds;
             if (onScrub) {
                 onScrub(seconds);
             }
         }
-    }, [dragPercent, setDragPercentTouch, totalSeconds, setPercent, onScrub]);
+    }, [dragPercent, setDragPercentTouch, totalSeconds, onScrub, setPosition]);
     /**
      * Watches for a mouse-up action (which may not occur on the scrubber itself),
      * calls the release callback, and resets dragging state.
@@ -95,6 +94,7 @@ var Slider = function (_a) {
         if (mouseUpRef.current) {
             document.removeEventListener('mouseup', mouseUpRef.current);
         }
+        setPositionOverrideEnabled(false);
         if (dragPercent.current !== null) {
             var seconds = dragPercent.current * totalSeconds;
             if (onScrubRelease) {
@@ -102,7 +102,14 @@ var Slider = function (_a) {
             }
             dragPercent.current = null;
         }
-    }, [mouseMoveRef, mouseUpRef, dragPercent, totalSeconds, onScrubRelease]);
+    }, [
+        mouseMoveRef,
+        mouseUpRef,
+        dragPercent,
+        totalSeconds,
+        onScrubRelease,
+        setPositionOverrideEnabled
+    ]);
     /**
      * Watches for a touch-end action (which may not occur on the scrubber itself),
      * calls the release callback, and resets dragging state.
@@ -114,6 +121,7 @@ var Slider = function (_a) {
         if (touchEndRef.current) {
             document.removeEventListener('touchend', touchEndRef.current);
         }
+        setPositionOverrideEnabled(false);
         if (dragPercent.current !== null) {
             var seconds = dragPercent.current * totalSeconds;
             if (onScrubRelease) {
@@ -121,7 +129,14 @@ var Slider = function (_a) {
             }
             dragPercent.current = null;
         }
-    }, [touchMoveRef, touchEndRef, dragPercent, totalSeconds, onScrubRelease]);
+    }, [
+        touchMoveRef,
+        touchEndRef,
+        dragPercent,
+        totalSeconds,
+        onScrubRelease,
+        setPositionOverrideEnabled
+    ]);
     /**
      * Attaches mouse-move and mouse-up event listeners and sets dragging state.
      */
@@ -133,10 +148,8 @@ var Slider = function (_a) {
         mouseUpRef.current = onMouseUp;
         document.addEventListener('mousemove', mouseMoveRef.current);
         document.addEventListener('mouseup', mouseUpRef.current);
+        setPositionOverrideEnabled(true);
         setDragPercentMouse(e);
-        if (dragPercent.current !== null) {
-            setPercent(dragPercent.current);
-        }
     };
     /**
      * Attaches touch-move and touch-end event listeners and sets dragging state.
@@ -146,10 +159,8 @@ var Slider = function (_a) {
         touchEndRef.current = onTouchEnd;
         document.addEventListener('touchmove', touchMoveRef.current);
         document.addEventListener('touchend', touchEndRef.current);
+        setPositionOverrideEnabled(true);
         setDragPercentTouch(e);
-        if (dragPercent.current !== null) {
-            setPercent(dragPercent.current);
-        }
     };
     // Watch interactions to the scrubber and call to animate
     useEffect(function () {
@@ -161,28 +172,8 @@ var Slider = function (_a) {
         }
     }, [isPlaying, dragPercent, play, pause]);
     useEffect(function () {
-        setPercent(elapsedSeconds / totalSeconds);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [playbackRate, elapsedSeconds, totalSeconds]);
-    // When the key changes, reset the animation
-    useEffect(function () {
-        if (mediaKey !== previousMediaKey) {
-            if (!totalSeconds) {
-                setPercent(0);
-            }
-            else {
-                setPercent(elapsedSeconds / totalSeconds);
-            }
-            setPreviousMediaKey(mediaKey);
-        }
-    }, [
-        mediaKey,
-        previousMediaKey,
-        setPreviousMediaKey,
-        setPercent,
-        elapsedSeconds,
-        totalSeconds
-    ]);
+        refreshPosition();
+    }, [elapsedSeconds, totalSeconds, refreshPosition]);
     var getShowHandle = function () {
         return !style || style.showHandle === undefined ? true : style.showHandle;
     };

package/dist/components/scrubber/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","sources":["../../../src/components/scrubber/Slider.tsx"],"sourcesContent":["import { useState, useEffect, useCallback, useRef, CSSProperties } from 'react'\nimport * as React from 'react'\n\nimport cn from 'classnames'\n\nimport styles from './Slider.module.css'\nimport { useAnimations } from './hooks'\nimport { ScrubberProps } from './types'\n\n/** Gets the X-position of a div. */\nconst getXPosition = (element: HTMLDivElement) => {\n  const coords = element.getBoundingClientRect()\n  return window.pageXOffset + coords.left\n}\n\n/**\n * A smooth scrubbable slider that relies on CSS animations rather\n * than progress ticks to achieve fluidity.\n */\nexport const Slider = ({\n  mediaKey,\n  isPlaying,\n  isMobile,\n  isDisabled,\n  elapsedSeconds,\n  totalSeconds,\n  playbackRate,\n  onScrub,\n  onScrubRelease,\n  includeExpandedTargets = true,\n  style\n}: ScrubberProps) => {\n  const [previousMediaKey, setPreviousMediaKey] = useState('')\n\n  // Percentage of the complete scrubber being dragged to.\n  // e.g. 0.25 means the user has dragged the scrubber 1/4th of the way.\n  const dragPercent = useRef<number | null>(0)\n\n  // Refs to handle event listeners\n  const mouseMoveRef = useRef<((this: Document, ev: MouseEvent) => any) | null>(\n    null\n  )\n  const mouseUpRef = useRef<((this: Document, ev: MouseEvent) => any) | null>(\n    null\n  )\n  const touchMoveRef = useRef<((e: TouchEvent) => any) | null>(null)\n  const touchEndRef = useRef<((e: TouchEvent) => any) | null>(null)\n\n  // Div refs\n  const railRef = useRef<HTMLDivElement>(null)\n  const trackRef = useRef<HTMLDivElement>(null)\n  const handleRef = useRef<HTMLDivElement>(null)\n\n  const { play, pause, setPercent } = useAnimations(\n    trackRef,\n    handleRef,\n    elapsedSeconds,\n    totalSeconds,\n    playbackRate\n  )\n\n  /**\n   * Sets the percentage across the scrubber for a given pageX position.\n   */\n  const setDragPercent = useCallback(\n    (pageX: number) => {\n      if (railRef.current) {\n        const clickPosition = pageX - getXPosition(railRef.current)\n        const railWidth = railRef.current.offsetWidth\n        const percent =\n          Math.min(Math.max(0, clickPosition), railWidth) / railWidth\n        dragPercent.current = percent\n      }\n    },\n    [dragPercent]\n  )\n\n  /**\n   * Sets the percentage across the scrubber for a given mouse event.\n   */\n  const setDragPercentMouse = useCallback(\n    (e: React.MouseEvent | MouseEvent) => {\n      setDragPercent(e.pageX)\n    },\n    [setDragPercent]\n  )\n\n  /**\n   * Sets the percentage across the scurbber for a given touch event.\n   */\n  const setDragPercentTouch = useCallback(\n    (e: React.TouchEvent | TouchEvent) => {\n      setDragPercent(e.touches[0].pageX)\n    },\n    [setDragPercent]\n  )\n\n  /**\n   * Watches user mouse movements while the scrubber handle is being dragged.\n   */\n  const onMouseMove = useCallback(\n    (e: MouseEvent) => {\n      e.stopPropagation()\n      e.preventDefault()\n\n      setDragPercentMouse(e)\n      if (dragPercent.current !== null) {\n        setPercent(dragPercent.current)\n        const seconds = dragPercent.current * totalSeconds\n        if (onScrub) {\n          onScrub(seconds)\n        }\n      }\n    },\n    [dragPercent, setDragPercentMouse, totalSeconds, setPercent, onScrub]\n  )\n\n  /**\n   * Watches user touch movements while the scrubber handle is being dragged.\n   */\n  const onTouchMove = useCallback(\n    (e: TouchEvent) => {\n      e.stopPropagation()\n      e.preventDefault()\n\n      setDragPercentTouch(e)\n      if (dragPercent.current !== null) {\n        setPercent(dragPercent.current)\n\n        const seconds = dragPercent.current * totalSeconds\n        if (onScrub) {\n          onScrub(seconds)\n        }\n      }\n    },\n    [dragPercent, setDragPercentTouch, totalSeconds, setPercent, onScrub]\n  )\n\n  /**\n   * Watches for a mouse-up action (which may not occur on the scrubber itself),\n   * calls the release callback, and resets dragging state.\n   */\n  const onMouseUp = useCallback(() => {\n    if (mouseMoveRef.current) {\n      document.removeEventListener('mousemove', mouseMoveRef.current)\n    }\n    if (mouseUpRef.current) {\n      document.removeEventListener('mouseup', mouseUpRef.current)\n    }\n\n    if (dragPercent.current !== null) {\n      const seconds = dragPercent.current * totalSeconds\n      if (onScrubRelease) {\n        onScrubRelease(seconds)\n      }\n\n      dragPercent.current = null\n    }\n  }, [mouseMoveRef, mouseUpRef, dragPercent, totalSeconds, onScrubRelease])\n\n  /**\n   * Watches for a touch-end action (which may not occur on the scrubber itself),\n   * calls the release callback, and resets dragging state.\n   */\n  const onTouchEnd = useCallback(() => {\n    if (touchMoveRef.current) {\n      document.removeEventListener('touchmove', touchMoveRef.current)\n    }\n    if (touchEndRef.current) {\n      document.removeEventListener('touchend', touchEndRef.current)\n    }\n\n    if (dragPercent.current !== null) {\n      const seconds = dragPercent.current * totalSeconds\n      if (onScrubRelease) {\n        onScrubRelease(seconds)\n      }\n\n      dragPercent.current = null\n    }\n  }, [touchMoveRef, touchEndRef, dragPercent, totalSeconds, onScrubRelease])\n\n  /**\n   * Attaches mouse-move and mouse-up event listeners and sets dragging state.\n   */\n  const onMouseDown = (e: React.MouseEvent) => {\n    // Cancel mouse down if touch was fired.\n    if (e.button !== 0 || touchMoveRef.current) return\n\n    mouseMoveRef.current = onMouseMove\n    mouseUpRef.current = onMouseUp\n    document.addEventListener('mousemove', mouseMoveRef.current)\n    document.addEventListener('mouseup', mouseUpRef.current)\n\n    setDragPercentMouse(e)\n    if (dragPercent.current !== null) {\n      setPercent(dragPercent.current)\n    }\n  }\n\n  /**\n   * Attaches touch-move and touch-end event listeners and sets dragging state.\n   */\n  const onTouchStart = (e: React.TouchEvent) => {\n    touchMoveRef.current = onTouchMove\n    touchEndRef.current = onTouchEnd\n    document.addEventListener('touchmove', touchMoveRef.current)\n    document.addEventListener('touchend', touchEndRef.current)\n\n    setDragPercentTouch(e)\n    if (dragPercent.current !== null) {\n      setPercent(dragPercent.current)\n    }\n  }\n\n  // Watch interactions to the scrubber and call to animate\n  useEffect(() => {\n    if (!dragPercent.current) {\n      if (isPlaying) play()\n      else pause()\n    }\n  }, [isPlaying, dragPercent, play, pause])\n\n  useEffect(() => {\n    setPercent(elapsedSeconds / totalSeconds)\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [playbackRate, elapsedSeconds, totalSeconds])\n\n  // When the key changes, reset the animation\n  useEffect(() => {\n    if (mediaKey !== previousMediaKey) {\n      if (!totalSeconds) {\n        setPercent(0)\n      } else {\n        setPercent(elapsedSeconds / totalSeconds)\n      }\n      setPreviousMediaKey(mediaKey)\n    }\n  }, [\n    mediaKey,\n    previousMediaKey,\n    setPreviousMediaKey,\n    setPercent,\n    elapsedSeconds,\n    totalSeconds\n  ])\n\n  const getShowHandle = () =>\n    !style || style.showHandle === undefined ? true : style.showHandle\n\n  const getRailStyle = () => {\n    const s: CSSProperties = {}\n    if (style && style.railUnlistenedColor) {\n      s.background = style.railUnlistenedColor\n    }\n    return s\n  }\n\n  const getTrackStyle = () => {\n    const s: CSSProperties = {}\n    if (style && style.railListenedColor) {\n      s.background = style.railListenedColor\n    }\n\n    if (style && style.railListenedColor) {\n      s.borderRadius = 'var(--unit-half)'\n    }\n    return s\n  }\n\n  const getSliderStyle = () => {\n    if (style && style.sliderMargin) return { margin: style.sliderMargin }\n    return {}\n  }\n\n  const getHandleStyle = () => {\n    const s: CSSProperties = {}\n    if (style) {\n      if (style.handleColor) s.background = style.handleColor\n      if (style.handleShadow) s.boxShadow = style.handleShadow\n    }\n    return s\n  }\n\n  return (\n    <div\n      className={cn(styles.slider, {\n        [styles.isMobile]: isMobile,\n        [styles.isDisabled]: isDisabled,\n        [styles.showHandle]: getShowHandle(),\n        [styles.expandedTargets]: includeExpandedTargets\n      })}\n      onMouseDown={isDisabled ? () => {} : onMouseDown}\n      onTouchStart={isDisabled ? () => {} : onTouchStart}\n      style={getSliderStyle()}\n    >\n      <div ref={railRef} className={styles.rail} style={getRailStyle()}>\n        <div ref={trackRef} className={styles.trackWrapper}>\n          <div\n            ref={trackRef}\n            className={styles.track}\n            style={getTrackStyle()}\n          />\n        </div>\n      </div>\n      <div ref={handleRef} className={styles.handleWrapper}>\n        <div\n          ref={handleRef}\n          className={styles.handle}\n          style={getHandleStyle()}\n        />\n      </div>\n    </div>\n  )\n}\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"Slider.js","sources":["../../../src/components/scrubber/Slider.tsx"],"sourcesContent":["import { useEffect, useCallback, useRef, CSSProperties } from 'react'\nimport * as React from 'react'\n\nimport cn from 'classnames'\n\nimport styles from './Slider.module.css'\nimport { usePlaybackPositionTracking } from './hooks'\nimport { ScrubberProps } from './types'\n\n/** Gets the X-position of a div. */\nconst getXPosition = (element: HTMLDivElement) => {\n  const coords = element.getBoundingClientRect()\n  return window.pageXOffset + coords.left\n}\n\n/**\n * A smooth scrubbable slider that relies on CSS animations rather\n * than progress ticks to achieve fluidity.\n */\nexport const Slider = ({\n  isPlaying,\n  isMobile,\n  isDisabled,\n  totalSeconds,\n  elapsedSeconds,\n  onScrub,\n  onScrubRelease,\n  getAudioPosition,\n  getTotalTime,\n  includeExpandedTargets = true,\n  style\n}: ScrubberProps) => {\n  // Percentage of the complete scrubber being dragged to.\n  // e.g. 0.25 means the user has dragged the scrubber 1/4th of the way.\n  const dragPercent = useRef<number | null>(0)\n\n  // Refs to handle event listeners\n  const mouseMoveRef = useRef<((this: Document, ev: MouseEvent) => any) | null>(\n    null\n  )\n  const mouseUpRef = useRef<((this: Document, ev: MouseEvent) => any) | null>(\n    null\n  )\n  const touchMoveRef = useRef<((e: TouchEvent) => any) | null>(null)\n  const touchEndRef = useRef<((e: TouchEvent) => any) | null>(null)\n\n  // Div refs\n  const railRef = useRef<HTMLDivElement>(null)\n  const trackRef = useRef<HTMLDivElement>(null)\n  const handleRef = useRef<HTMLDivElement>(null)\n\n  const {\n    play,\n    pause,\n    refreshPosition,\n    setPositionOverrideEnabled,\n    setPosition\n  } = usePlaybackPositionTracking(\n    trackRef,\n    handleRef,\n    getAudioPosition,\n    getTotalTime\n  )\n\n  /**\n   * Sets the percentage across the scrubber for a given pageX position.\n   */\n  const setDragPercent = useCallback(\n    (pageX: number) => {\n      if (railRef.current) {\n        const clickPosition = pageX - getXPosition(railRef.current)\n        const railWidth = railRef.current.offsetWidth\n        const percent =\n          Math.min(Math.max(0, clickPosition), railWidth) / railWidth\n        dragPercent.current = percent\n      }\n    },\n    [dragPercent]\n  )\n\n  /**\n   * Sets the percentage across the scrubber for a given mouse event.\n   */\n  const setDragPercentMouse = useCallback(\n    (e: React.MouseEvent | MouseEvent) => {\n      setDragPercent(e.pageX)\n    },\n    [setDragPercent]\n  )\n\n  /**\n   * Sets the percentage across the scurbber for a given touch event.\n   */\n  const setDragPercentTouch = useCallback(\n    (e: React.TouchEvent | TouchEvent) => {\n      setDragPercent(e.touches[0].pageX)\n    },\n    [setDragPercent]\n  )\n\n  /**\n   * Watches user mouse movements while the scrubber handle is being dragged.\n   */\n  const onMouseMove = useCallback(\n    (e: MouseEvent) => {\n      e.stopPropagation()\n      e.preventDefault()\n\n      setDragPercentMouse(e)\n      if (dragPercent.current !== null) {\n        setPosition(dragPercent.current)\n        const seconds = dragPercent.current * totalSeconds\n        if (onScrub) {\n          onScrub(seconds)\n        }\n      }\n    },\n    [dragPercent, setDragPercentMouse, totalSeconds, onScrub, setPosition]\n  )\n\n  /**\n   * Watches user touch movements while the scrubber handle is being dragged.\n   */\n  const onTouchMove = useCallback(\n    (e: TouchEvent) => {\n      e.stopPropagation()\n      e.preventDefault()\n\n      setDragPercentTouch(e)\n      if (dragPercent.current !== null) {\n        setPosition(dragPercent.current)\n\n        const seconds = dragPercent.current * totalSeconds\n        if (onScrub) {\n          onScrub(seconds)\n        }\n      }\n    },\n    [dragPercent, setDragPercentTouch, totalSeconds, onScrub, setPosition]\n  )\n\n  /**\n   * Watches for a mouse-up action (which may not occur on the scrubber itself),\n   * calls the release callback, and resets dragging state.\n   */\n  const onMouseUp = useCallback(() => {\n    if (mouseMoveRef.current) {\n      document.removeEventListener('mousemove', mouseMoveRef.current)\n    }\n    if (mouseUpRef.current) {\n      document.removeEventListener('mouseup', mouseUpRef.current)\n    }\n    setPositionOverrideEnabled(false)\n\n    if (dragPercent.current !== null) {\n      const seconds = dragPercent.current * totalSeconds\n      if (onScrubRelease) {\n        onScrubRelease(seconds)\n      }\n\n      dragPercent.current = null\n    }\n  }, [\n    mouseMoveRef,\n    mouseUpRef,\n    dragPercent,\n    totalSeconds,\n    onScrubRelease,\n    setPositionOverrideEnabled\n  ])\n\n  /**\n   * Watches for a touch-end action (which may not occur on the scrubber itself),\n   * calls the release callback, and resets dragging state.\n   */\n  const onTouchEnd = useCallback(() => {\n    if (touchMoveRef.current) {\n      document.removeEventListener('touchmove', touchMoveRef.current)\n    }\n    if (touchEndRef.current) {\n      document.removeEventListener('touchend', touchEndRef.current)\n    }\n    setPositionOverrideEnabled(false)\n\n    if (dragPercent.current !== null) {\n      const seconds = dragPercent.current * totalSeconds\n      if (onScrubRelease) {\n        onScrubRelease(seconds)\n      }\n\n      dragPercent.current = null\n    }\n  }, [\n    touchMoveRef,\n    touchEndRef,\n    dragPercent,\n    totalSeconds,\n    onScrubRelease,\n    setPositionOverrideEnabled\n  ])\n\n  /**\n   * Attaches mouse-move and mouse-up event listeners and sets dragging state.\n   */\n  const onMouseDown = (e: React.MouseEvent) => {\n    // Cancel mouse down if touch was fired.\n    if (e.button !== 0 || touchMoveRef.current) return\n\n    mouseMoveRef.current = onMouseMove\n    mouseUpRef.current = onMouseUp\n    document.addEventListener('mousemove', mouseMoveRef.current)\n    document.addEventListener('mouseup', mouseUpRef.current)\n    setPositionOverrideEnabled(true)\n\n    setDragPercentMouse(e)\n  }\n\n  /**\n   * Attaches touch-move and touch-end event listeners and sets dragging state.\n   */\n  const onTouchStart = (e: React.TouchEvent) => {\n    touchMoveRef.current = onTouchMove\n    touchEndRef.current = onTouchEnd\n    document.addEventListener('touchmove', touchMoveRef.current)\n    document.addEventListener('touchend', touchEndRef.current)\n    setPositionOverrideEnabled(true)\n\n    setDragPercentTouch(e)\n  }\n\n  // Watch interactions to the scrubber and call to animate\n  useEffect(() => {\n    if (!dragPercent.current) {\n      if (isPlaying) play()\n      else pause()\n    }\n  }, [isPlaying, dragPercent, play, pause])\n\n  useEffect(() => {\n    refreshPosition()\n  }, [elapsedSeconds, totalSeconds, refreshPosition])\n\n  const getShowHandle = () =>\n    !style || style.showHandle === undefined ? true : style.showHandle\n\n  const getRailStyle = () => {\n    const s: CSSProperties = {}\n    if (style && style.railUnlistenedColor) {\n      s.background = style.railUnlistenedColor\n    }\n    return s\n  }\n\n  const getTrackStyle = () => {\n    const s: CSSProperties = {}\n    if (style && style.railListenedColor) {\n      s.background = style.railListenedColor\n    }\n\n    if (style && style.railListenedColor) {\n      s.borderRadius = 'var(--unit-half)'\n    }\n    return s\n  }\n\n  const getSliderStyle = () => {\n    if (style && style.sliderMargin) return { margin: style.sliderMargin }\n    return {}\n  }\n\n  const getHandleStyle = () => {\n    const s: CSSProperties = {}\n    if (style) {\n      if (style.handleColor) s.background = style.handleColor\n      if (style.handleShadow) s.boxShadow = style.handleShadow\n    }\n    return s\n  }\n\n  return (\n    <div\n      className={cn(styles.slider, {\n        [styles.isMobile]: isMobile,\n        [styles.isDisabled]: isDisabled,\n        [styles.showHandle]: getShowHandle(),\n        [styles.expandedTargets]: includeExpandedTargets\n      })}\n      onMouseDown={isDisabled ? () => {} : onMouseDown}\n      onTouchStart={isDisabled ? () => {} : onTouchStart}\n      style={getSliderStyle()}\n    >\n      <div ref={railRef} className={styles.rail} style={getRailStyle()}>\n        <div ref={trackRef} className={styles.trackWrapper}>\n          <div\n            ref={trackRef}\n            className={styles.track}\n            style={getTrackStyle()}\n          />\n        </div>\n      </div>\n      <div ref={handleRef} className={styles.handleWrapper}>\n        <div\n          ref={handleRef}\n          className={styles.handle}\n          style={getHandleStyle()}\n        />\n      </div>\n    </div>\n  )\n}\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/components/scrubber/hooks.d.ts

@@ -1,11 +1,13 @@
 import * as React from 'react';
 /**
- * Hook for initializing animations for a scrubber.
- * const animations = useAnimations()
+ * Hook for initializing playback update mechanism. Uses rAF to sync element
+ * positions to the current playback position.
  */
-export declare const useAnimations: (trackRef: React.MutableRefObject<HTMLDivElement | null>, handleRef: React.MutableRefObject<HTMLDivElement | null>, elapsedSeconds: number, totalSeconds: number, playbackRate?: number) => {
+export declare const usePlaybackPositionTracking: (trackRef: React.MutableRefObject<HTMLDivElement | null>, handleRef: React.MutableRefObject<HTMLDivElement | null>, getAudioPosition: () => number, getTotalTime: () => number) => {
     play: () => void;
     pause: () => void;
-    setPercent: (percentComplete: number) => void;
+    refreshPosition: () => void;
+    setPositionOverrideEnabled: (enabled: boolean) => void;
+    setPosition: (position?: number) => void;
 };
 //# sourceMappingURL=hooks.d.ts.map

package/dist/components/scrubber/hooks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../src/components/scrubber/hooks.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAoB9B;;;GAGG;AACH,eAAO,MAAM,aAAa,aACd,MAAM,gBAAgB,CAAC,cAAc,GAAG,IAAI,CAAC,aAC5C,MAAM,gBAAgB,CAAC,cAAc,GAAG,IAAI,CAAC,kBACxC,MAAM,gBACR,MAAM;;;kCAwCA,MAAM;CA8B3B,CAAA"}
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../src/components/scrubber/hooks.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B;;;GAGG;AACH,eAAO,MAAM,2BAA2B,aAC5B,MAAM,gBAAgB,CAAC,cAAc,GAAG,IAAI,CAAC,aAC5C,MAAM,gBAAgB,CAAC,cAAc,GAAG,IAAI,CAAC,oBACtC,MAAM,MAAM,gBAChB,MAAM,MAAM;;;;0CAmD+B,OAAO;;CAWjE,CAAA"}

package/dist/components/scrubber/hooks.js

@@ -1,63 +1,61 @@
-import { useCallback, useRef, useEffect } from 'react';
+import { useRef, useCallback } from 'react';
 
-/** Sets animation properties on the handle and track. */
-var animate = function (trackRef, handleRef, transition, transform) {
-    if (handleRef.current && trackRef.current) {
-        handleRef.current.style.transition = transition;
-        handleRef.current.style.transform = transform;
-        trackRef.current.style.transition = transition;
-        trackRef.current.style.transform = transform;
-    }
-};
 /**
- * Hook for initializing animations for a scrubber.
- * const animations = useAnimations()
+ * Hook for initializing playback update mechanism. Uses rAF to sync element
+ * positions to the current playback position.
  */
-var useAnimations = function (trackRef, handleRef, elapsedSeconds, totalSeconds, playbackRate) {
-    if (playbackRate === void 0) { playbackRate = 1; }
-    /** Animates from the current position to the end over the remaining seconds. */
+var usePlaybackPositionTracking = function (trackRef, handleRef, getAudioPosition, getTotalTime) {
+    var isPlayingRef = useRef(false);
+    var getAudioPositionRef = useRef(getAudioPosition);
+    var overridePositionRef = useRef(0);
+    var overridePositionEnabledRef = useRef(false);
+    var getTotalTimeRef = useRef(getTotalTime);
+    var updatePositionRef = useRef(function () {
+        if (trackRef.current && handleRef.current) {
+            var audioPosition = getAudioPositionRef.current();
+            var totalTime = getTotalTimeRef.current();
+            var percentComplete = overridePositionEnabledRef.current
+                ? overridePositionRef.current
+                : audioPosition / totalTime;
+            var translation = "translate(".concat(percentComplete * 100, "%)");
+            handleRef.current.style.transform = translation;
+            trackRef.current.style.transform = translation;
+        }
+        if (isPlayingRef.current) {
+            window.requestAnimationFrame(updatePositionRef.current);
+        }
+    });
+    /** Starts a rAF loop to grab the current player position and update continuously */
     var play = useCallback(function () {
-        var timeRemaining = (totalSeconds - elapsedSeconds) / playbackRate;
-        animate(trackRef, handleRef, "transform ".concat(timeRemaining, "s linear"), 'translate(100%)');
-    }, [totalSeconds, elapsedSeconds, playbackRate, trackRef, handleRef]);
-    /**
-     * Pauses the animation at the current position.
-     * NOTE: We derive the current position from the actual animation position
-     * rather than the remaining time so that pausing the scrubber does not
-     * cause jumping if elapsed seconds doesn't precisely reflect the animation.
-     */
+        isPlayingRef.current = true;
+        window.requestAnimationFrame(updatePositionRef.current);
+    }, [updatePositionRef, isPlayingRef]);
     var pause = useCallback(function () {
-        if (trackRef.current) {
-            var trackWidth = trackRef.current.offsetWidth;
-            var trackTransform = window
-                .getComputedStyle(trackRef.current)
-                .getPropertyValue('transform');
-            var trackPosition = parseFloat(trackTransform.split(',')[4]);
-            var percentComplete = trackPosition / trackWidth;
-            animate(trackRef, handleRef, 'none', "translate(".concat(percentComplete * 100, "%)"));
+        isPlayingRef.current = false;
+    }, [isPlayingRef]);
+    var refreshPosition = useCallback(function () {
+        // Allow queueing a refresh of position if the animation isn't running
+        if (!isPlayingRef.current) {
+            window.requestAnimationFrame(updatePositionRef.current);
         }
-    }, [trackRef, handleRef]);
-    /** Sets the animation to a given percentage: [0, 1]. */
-    var setPercent = useCallback(function (percentComplete) {
-        animate(trackRef, handleRef, 'none', "translate(".concat(percentComplete * 100, "%)"));
-    }, [trackRef, handleRef]);
-    /**
-     * Handle window focus events so that the scrubber can repair itself
-     * if/when the browser loses focus and kills animations.
-     */
-    var timeData = useRef();
-    timeData.current = { elapsedSeconds: elapsedSeconds, totalSeconds: totalSeconds };
-    useEffect(function () {
-        var onWindowFocus = function () {
-            if (timeData.current) {
-                setPercent(timeData.current.elapsedSeconds / timeData.current.totalSeconds);
-            }
-        };
-        window.addEventListener('focus', onWindowFocus);
-        return function () { return window.removeEventListener('focus', onWindowFocus); };
-    }, [timeData, setPercent]);
-    return { play: play, pause: pause, setPercent: setPercent };
+    }, [updatePositionRef, isPlayingRef]);
+    /** Allows temporary override for things like scrubbing */
+    var setPosition = useCallback(function (position) {
+        if (position === void 0) { position = 0; }
+        overridePositionRef.current = position;
+        refreshPosition();
+    }, [overridePositionRef, refreshPosition]);
+    var setPositionOverrideEnabled = useCallback(function (enabled) {
+        overridePositionEnabledRef.current = enabled;
+    }, []);
+    return {
+        play: play,
+        pause: pause,
+        refreshPosition: refreshPosition,
+        setPositionOverrideEnabled: setPositionOverrideEnabled,
+        setPosition: setPosition
+    };
 };
 
-export { useAnimations };
+export { usePlaybackPositionTracking };
 //# sourceMappingURL=hooks.js.map

package/dist/components/scrubber/hooks.js.map

@@ -1 +1 @@
-{"version":3,"file":"hooks.js","sources":["../../../src/components/scrubber/hooks.ts"],"sourcesContent":["import { useRef, useCallback, useEffect } from 'react'\nimport * as React from 'react'\n\nimport { TimeData } from './types'\n\n/** Sets animation properties on the handle and track. */\nconst animate = (\n  trackRef: React.MutableRefObject<HTMLDivElement | null>,\n  handleRef: React.MutableRefObject<HTMLDivElement | null>,\n  transition: string,\n  transform: string\n) => {\n  if (handleRef.current && trackRef.current) {\n    handleRef.current.style.transition = transition\n    handleRef.current.style.transform = transform\n\n    trackRef.current.style.transition = transition\n    trackRef.current.style.transform = transform\n  }\n}\n\n/**\n * Hook for initializing animations for a scrubber.\n * const animations = useAnimations()\n */\nexport const useAnimations = (\n  trackRef: React.MutableRefObject<HTMLDivElement | null>,\n  handleRef: React.MutableRefObject<HTMLDivElement | null>,\n  elapsedSeconds: number,\n  totalSeconds: number,\n  playbackRate = 1\n) => {\n  /** Animates from the current position to the end over the remaining seconds. */\n  const play = useCallback(() => {\n    const timeRemaining = (totalSeconds - elapsedSeconds) / playbackRate\n    animate(\n      trackRef,\n      handleRef,\n      `transform ${timeRemaining}s linear`,\n      'translate(100%)'\n    )\n  }, [totalSeconds, elapsedSeconds, playbackRate, trackRef, handleRef])\n\n  /**\n   * Pauses the animation at the current position.\n   * NOTE: We derive the current position from the actual animation position\n   * rather than the remaining time so that pausing the scrubber does not\n   * cause jumping if elapsed seconds doesn't precisely reflect the animation.\n   */\n  const pause = useCallback(() => {\n    if (trackRef.current) {\n      const trackWidth = trackRef.current.offsetWidth\n      const trackTransform = window\n        .getComputedStyle(trackRef.current)\n        .getPropertyValue('transform')\n\n      const trackPosition = parseFloat(trackTransform.split(',')[4])\n      const percentComplete = trackPosition / trackWidth\n      animate(\n        trackRef,\n        handleRef,\n        'none',\n        `translate(${percentComplete * 100}%)`\n      )\n    }\n  }, [trackRef, handleRef])\n\n  /** Sets the animation to a given percentage: [0, 1]. */\n  const setPercent = useCallback(\n    (percentComplete: number) => {\n      animate(\n        trackRef,\n        handleRef,\n        'none',\n        `translate(${percentComplete * 100}%)`\n      )\n    },\n    [trackRef, handleRef]\n  )\n\n  /**\n   * Handle window focus events so that the scrubber can repair itself\n   * if/when the browser loses focus and kills animations.\n   */\n  const timeData = useRef<TimeData>()\n  timeData.current = { elapsedSeconds, totalSeconds }\n  useEffect(() => {\n    const onWindowFocus = () => {\n      if (timeData.current) {\n        setPercent(\n          timeData.current.elapsedSeconds / timeData.current.totalSeconds\n        )\n      }\n    }\n    window.addEventListener('focus', onWindowFocus)\n    return () => window.removeEventListener('focus', onWindowFocus)\n  }, [timeData, setPercent])\n\n  return { play, pause, setPercent }\n}\n"],"names":[],"mappings":";;AAKA;AACA,IAAM,OAAO,GAAG,UACd,QAAuD,EACvD,SAAwD,EACxD,UAAkB,EAClB,SAAiB,EAAA;AAEjB,IAAA,IAAI,SAAS,CAAC,OAAO,IAAI,QAAQ,CAAC,OAAO,EAAE;QACzC,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC,UAAU,GAAG,UAAU,CAAA;QAC/C,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC,SAAS,GAAG,SAAS,CAAA;QAE7C,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,UAAU,GAAG,UAAU,CAAA;QAC9C,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,SAAS,GAAG,SAAS,CAAA;AAC7C,KAAA;AACH,CAAC,CAAA;AAED;;;AAGG;AACI,IAAM,aAAa,GAAG,UAC3B,QAAuD,EACvD,SAAwD,EACxD,cAAsB,EACtB,YAAoB,EACpB,YAAgB,EAAA;AAAhB,IAAA,IAAA,YAAA,KAAA,KAAA,CAAA,EAAA,EAAA,YAAgB,GAAA,CAAA,CAAA,EAAA;;IAGhB,IAAM,IAAI,GAAG,WAAW,CAAC,YAAA;QACvB,IAAM,aAAa,GAAG,CAAC,YAAY,GAAG,cAAc,IAAI,YAAY,CAAA;QACpE,OAAO,CACL,QAAQ,EACR,SAAS,EACT,YAAa,CAAA,MAAA,CAAA,aAAa,EAAU,UAAA,CAAA,EACpC,iBAAiB,CAClB,CAAA;AACH,KAAC,EAAE,CAAC,YAAY,EAAE,cAAc,EAAE,YAAY,EAAE,QAAQ,EAAE,SAAS,CAAC,CAAC,CAAA;AAErE;;;;;AAKG;IACH,IAAM,KAAK,GAAG,WAAW,CAAC,YAAA;QACxB,IAAI,QAAQ,CAAC,OAAO,EAAE;AACpB,YAAA,IAAM,UAAU,GAAG,QAAQ,CAAC,OAAO,CAAC,WAAW,CAAA;YAC/C,IAAM,cAAc,GAAG,MAAM;AAC1B,iBAAA,gBAAgB,CAAC,QAAQ,CAAC,OAAO,CAAC;iBAClC,gBAAgB,CAAC,WAAW,CAAC,CAAA;AAEhC,YAAA,IAAM,aAAa,GAAG,UAAU,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;AAC9D,YAAA,IAAM,eAAe,GAAG,aAAa,GAAG,UAAU,CAAA;AAClD,YAAA,OAAO,CACL,QAAQ,EACR,SAAS,EACT,MAAM,EACN,YAAA,CAAA,MAAA,CAAa,eAAe,GAAG,GAAG,EAAA,IAAA,CAAI,CACvC,CAAA;AACF,SAAA;AACH,KAAC,EAAE,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC,CAAA;;AAGzB,IAAA,IAAM,UAAU,GAAG,WAAW,CAC5B,UAAC,eAAuB,EAAA;AACtB,QAAA,OAAO,CACL,QAAQ,EACR,SAAS,EACT,MAAM,EACN,YAAA,CAAA,MAAA,CAAa,eAAe,GAAG,GAAG,EAAA,IAAA,CAAI,CACvC,CAAA;AACH,KAAC,EACD,CAAC,QAAQ,EAAE,SAAS,CAAC,CACtB,CAAA;AAED;;;AAGG;AACH,IAAA,IAAM,QAAQ,GAAG,MAAM,EAAY,CAAA;IACnC,QAAQ,CAAC,OAAO,GAAG,EAAE,cAAc,gBAAA,EAAE,YAAY,EAAA,YAAA,EAAE,CAAA;AACnD,IAAA,SAAS,CAAC,YAAA;AACR,QAAA,IAAM,aAAa,GAAG,YAAA;YACpB,IAAI,QAAQ,CAAC,OAAO,EAAE;AACpB,gBAAA,UAAU,CACR,QAAQ,CAAC,OAAO,CAAC,cAAc,GAAG,QAAQ,CAAC,OAAO,CAAC,YAAY,CAChE,CAAA;AACF,aAAA;AACH,SAAC,CAAA;AACD,QAAA,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,aAAa,CAAC,CAAA;AAC/C,QAAA,OAAO,YAAM,EAAA,OAAA,MAAM,CAAC,mBAAmB,CAAC,OAAO,EAAE,aAAa,CAAC,CAAlD,EAAkD,CAAA;AACjE,KAAC,EAAE,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAA;IAE1B,OAAO,EAAE,IAAI,EAAA,IAAA,EAAE,KAAK,OAAA,EAAE,UAAU,EAAA,UAAA,EAAE,CAAA;AACpC;;;;"}
+{"version":3,"file":"hooks.js","sources":["../../../src/components/scrubber/hooks.ts"],"sourcesContent":["import { useRef, useCallback } from 'react'\nimport * as React from 'react'\n\n/**\n * Hook for initializing playback update mechanism. Uses rAF to sync element\n * positions to the current playback position.\n */\nexport const usePlaybackPositionTracking = (\n  trackRef: React.MutableRefObject<HTMLDivElement | null>,\n  handleRef: React.MutableRefObject<HTMLDivElement | null>,\n  getAudioPosition: () => number,\n  getTotalTime: () => number\n) => {\n  const isPlayingRef = useRef(false)\n  const getAudioPositionRef = useRef(getAudioPosition)\n  const overridePositionRef = useRef(0)\n  const overridePositionEnabledRef = useRef(false)\n  const getTotalTimeRef = useRef(getTotalTime)\n\n  const updatePositionRef = useRef(() => {\n    if (trackRef.current && handleRef.current) {\n      const audioPosition = getAudioPositionRef.current()\n      const totalTime = getTotalTimeRef.current()\n      const percentComplete = overridePositionEnabledRef.current\n        ? overridePositionRef.current\n        : audioPosition / totalTime\n      const translation = `translate(${percentComplete * 100}%)`\n      handleRef.current.style.transform = translation\n      trackRef.current.style.transform = translation\n    }\n\n    if (isPlayingRef.current) {\n      window.requestAnimationFrame(updatePositionRef.current)\n    }\n  })\n\n  /** Starts a rAF loop to grab the current player position and update continuously */\n  const play = useCallback(() => {\n    isPlayingRef.current = true\n    window.requestAnimationFrame(updatePositionRef.current)\n  }, [updatePositionRef, isPlayingRef])\n\n  const pause = useCallback(() => {\n    isPlayingRef.current = false\n  }, [isPlayingRef])\n\n  const refreshPosition = useCallback(() => {\n    // Allow queueing a refresh of position if the animation isn't running\n    if (!isPlayingRef.current) {\n      window.requestAnimationFrame(updatePositionRef.current)\n    }\n  }, [updatePositionRef, isPlayingRef])\n\n  /** Allows temporary override for things like scrubbing */\n  const setPosition = useCallback(\n    (position = 0) => {\n      overridePositionRef.current = position\n      refreshPosition()\n    },\n    [overridePositionRef, refreshPosition]\n  )\n\n  const setPositionOverrideEnabled = useCallback((enabled: boolean) => {\n    overridePositionEnabledRef.current = enabled\n  }, [])\n\n  return {\n    play,\n    pause,\n    refreshPosition,\n    setPositionOverrideEnabled,\n    setPosition\n  }\n}\n"],"names":[],"mappings":";;AAGA;;;AAGG;AACU,IAAA,2BAA2B,GAAG,UACzC,QAAuD,EACvD,SAAwD,EACxD,gBAA8B,EAC9B,YAA0B,EAAA;AAE1B,IAAA,IAAM,YAAY,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;AAClC,IAAA,IAAM,mBAAmB,GAAG,MAAM,CAAC,gBAAgB,CAAC,CAAA;AACpD,IAAA,IAAM,mBAAmB,GAAG,MAAM,CAAC,CAAC,CAAC,CAAA;AACrC,IAAA,IAAM,0BAA0B,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;AAChD,IAAA,IAAM,eAAe,GAAG,MAAM,CAAC,YAAY,CAAC,CAAA;IAE5C,IAAM,iBAAiB,GAAG,MAAM,CAAC,YAAA;AAC/B,QAAA,IAAI,QAAQ,CAAC,OAAO,IAAI,SAAS,CAAC,OAAO,EAAE;AACzC,YAAA,IAAM,aAAa,GAAG,mBAAmB,CAAC,OAAO,EAAE,CAAA;AACnD,YAAA,IAAM,SAAS,GAAG,eAAe,CAAC,OAAO,EAAE,CAAA;AAC3C,YAAA,IAAM,eAAe,GAAG,0BAA0B,CAAC,OAAO;kBACtD,mBAAmB,CAAC,OAAO;AAC7B,kBAAE,aAAa,GAAG,SAAS,CAAA;AAC7B,YAAA,IAAM,WAAW,GAAG,YAAA,CAAA,MAAA,CAAa,eAAe,GAAG,GAAG,OAAI,CAAA;YAC1D,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC,SAAS,GAAG,WAAW,CAAA;YAC/C,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,SAAS,GAAG,WAAW,CAAA;AAC/C,SAAA;QAED,IAAI,YAAY,CAAC,OAAO,EAAE;AACxB,YAAA,MAAM,CAAC,qBAAqB,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAA;AACxD,SAAA;AACH,KAAC,CAAC,CAAA;;IAGF,IAAM,IAAI,GAAG,WAAW,CAAC,YAAA;AACvB,QAAA,YAAY,CAAC,OAAO,GAAG,IAAI,CAAA;AAC3B,QAAA,MAAM,CAAC,qBAAqB,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAA;AACzD,KAAC,EAAE,CAAC,iBAAiB,EAAE,YAAY,CAAC,CAAC,CAAA;IAErC,IAAM,KAAK,GAAG,WAAW,CAAC,YAAA;AACxB,QAAA,YAAY,CAAC,OAAO,GAAG,KAAK,CAAA;AAC9B,KAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAA;IAElB,IAAM,eAAe,GAAG,WAAW,CAAC,YAAA;;AAElC,QAAA,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE;AACzB,YAAA,MAAM,CAAC,qBAAqB,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAA;AACxD,SAAA;AACH,KAAC,EAAE,CAAC,iBAAiB,EAAE,YAAY,CAAC,CAAC,CAAA;;AAGrC,IAAA,IAAM,WAAW,GAAG,WAAW,CAC7B,UAAC,QAAY,EAAA;AAAZ,QAAA,IAAA,QAAA,KAAA,KAAA,CAAA,EAAA,EAAA,QAAY,GAAA,CAAA,CAAA,EAAA;AACX,QAAA,mBAAmB,CAAC,OAAO,GAAG,QAAQ,CAAA;AACtC,QAAA,eAAe,EAAE,CAAA;AACnB,KAAC,EACD,CAAC,mBAAmB,EAAE,eAAe,CAAC,CACvC,CAAA;AAED,IAAA,IAAM,0BAA0B,GAAG,WAAW,CAAC,UAAC,OAAgB,EAAA;AAC9D,QAAA,0BAA0B,CAAC,OAAO,GAAG,OAAO,CAAA;KAC7C,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO;AACL,QAAA,IAAI,EAAA,IAAA;AACJ,QAAA,KAAK,EAAA,KAAA;AACL,QAAA,eAAe,EAAA,eAAA;AACf,QAAA,0BAA0B,EAAA,0BAAA;AAC1B,QAAA,WAAW,EAAA,WAAA;KACZ,CAAA;AACH;;;;"}

package/dist/components/scrubber/types.d.ts

@@ -46,6 +46,14 @@ export type ScrubberProps = {
      * Fired effectively on "mouse up" when the user is done scrubbing.
      */
     onScrubRelease?: (seconds: number) => void;
+    /** Callback to fetch the current playback position in seconds. Typically wired
+     * up to the audio player's `getPosition` method.
+     */
+    getAudioPosition: () => number;
+    /** Callback to get the duration of the current media. Typically wired up to the
+     * audio player's `getDuration` method.
+     */
+    getTotalTime: () => number;
     /**
      * Individually exposed styling options.
      */

package/dist/components/scrubber/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/scrubber/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG;IAC1B;;;;;OAKG;IACH,QAAQ,EAAE,MAAM,CAAA;IAEhB;;OAEG;IACH,SAAS,EAAE,OAAO,CAAA;IAElB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IAEpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAE3B;;;;;OAKG;IACH,cAAc,EAAE,MAAM,CAAA;IAEtB;;OAEG;IACH,YAAY,EAAE,MAAM,CAAA;IAEpB;;OAEG;IACH,YAAY,EAAE,MAAM,CAAA;IAEpB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IAEnC;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IAE1C;;OAEG;IACH,KAAK,CAAC,EAAE;QACN,iBAAiB,CAAC,EAAE,MAAM,CAAA;QAC1B,mBAAmB,CAAC,EAAE,MAAM,CAAA;QAC5B,UAAU,CAAC,EAAE,OAAO,CAAA;QACpB,WAAW,CAAC,EAAE,MAAM,CAAA;QACpB,YAAY,CAAC,EAAE,MAAM,CAAA;QACrB,YAAY,CAAC,EAAE,MAAM,CAAA;KACtB,CAAA;IAED;;;OAGG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAA;IAEhC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED;;;GAGG;AACH,MAAM,MAAM,QAAQ,GAAG;IACrB,cAAc,EAAE,MAAM,CAAA;IACtB,YAAY,EAAE,MAAM,CAAA;CACrB,CAAA;AAED,eAAO,MAAM,oBAAoB;;;;;;;CAOhC,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/scrubber/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG;IAC1B;;;;;OAKG;IACH,QAAQ,EAAE,MAAM,CAAA;IAEhB;;OAEG;IACH,SAAS,EAAE,OAAO,CAAA;IAElB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IAEpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAE3B;;;;;OAKG;IACH,cAAc,EAAE,MAAM,CAAA;IAEtB;;OAEG;IACH,YAAY,EAAE,MAAM,CAAA;IAEpB;;OAEG;IACH,YAAY,EAAE,MAAM,CAAA;IAEpB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IAEnC;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IAE1C;;OAEG;IACH,gBAAgB,EAAE,MAAM,MAAM,CAAA;IAE9B;;OAEG;IACH,YAAY,EAAE,MAAM,MAAM,CAAA;IAE1B;;OAEG;IACH,KAAK,CAAC,EAAE;QACN,iBAAiB,CAAC,EAAE,MAAM,CAAA;QAC1B,mBAAmB,CAAC,EAAE,MAAM,CAAA;QAC5B,UAAU,CAAC,EAAE,OAAO,CAAA;QACpB,WAAW,CAAC,EAAE,MAAM,CAAA;QACpB,YAAY,CAAC,EAAE,MAAM,CAAA;QACrB,YAAY,CAAC,EAAE,MAAM,CAAA;KACtB,CAAA;IAED;;;OAGG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAA;IAEhC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED;;;GAGG;AACH,MAAM,MAAM,QAAQ,GAAG;IACrB,cAAc,EAAE,MAAM,CAAA;IACtB,YAAY,EAAE,MAAM,CAAA;CACrB,CAAA;AAED,eAAO,MAAM,oBAAoB;;;;;;;CAOhC,CAAA"}

package/dist/components/scrubber/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sources":["../../../src/components/scrubber/types.ts"],"sourcesContent":["export type ScrubberProps = {\n  /**\n   * A unique identifier for the media being scrubbed.\n   * Usually a \"track id\" suffices here. This property\n   * is similar to a `key` in React and is used to\n   * reset the scrubber animation for a new media item.\n   */\n  mediaKey: string\n\n  /**\n   * Whether or not the media being scrubbed is playing (or paused).\n   */\n  isPlaying: boolean\n\n  /**\n   * Whether or not the scrubber should be disabled. For example,\n   * this is useful when no content is playing.\n   */\n  isDisabled?: boolean\n\n  /**\n   * Whether or not to display a mobile-friendly variant.\n   */\n  isMobile?: boolean\n\n  /**\n   * Whether or not timestamps are shown on the sides of the scrubber.\n   */\n  includeTimestamps?: boolean\n\n  /**\n   * The current progress of the media being scrubbed.\n   * The scrubber reacts to changes in the elapsed seconds\n   * to re-calibrate. This value should be updated relatively frequently\n   * (0.1s < x < 1s).\n   */\n  elapsedSeconds: number\n\n  /**\n   * Total duration of the media being scrubbed.\n   */\n  totalSeconds: number\n\n  /**\n   * The speed that the media is being played at\n   */\n  playbackRate: number\n\n  /**\n   * Fired incrementally as the user drags the scrubber.\n   */\n  onScrub?: (seconds: number) => void\n\n  /**\n   * Fired effectively on \"mouse up\" when the user is done scrubbing.\n   */\n  onScrubRelease?: (seconds: number) => void\n\n  /**\n   * Individually exposed styling options.\n   */\n  style?: {\n    railListenedColor?: string\n    railUnlistenedColor?: string\n    showHandle?: boolean\n    handleColor?: string\n    handleShadow?: string\n    sliderMargin?: string\n  }\n\n  /**\n   * Include larger click targets to that it's hard to misclick\n   * Defaults to true\n   */\n  includeExpandedTargets?: boolean\n\n  /**\n   * Escape hatch for styles.\n   */\n  className?: string\n}\n\n/**\n * Encapsulates time-data for detecting and animating the position\n * of a scrubber.\n */\nexport type TimeData = {\n  elapsedSeconds: number\n  totalSeconds: number\n}\n\nexport const defaultScrubberProps = {\n  isPlaying: false,\n  isDisabled: false,\n  isMobile: false,\n  includeTimestamps: true,\n  onScrub: () => {},\n  onScrubRelease: () => {}\n}\n"],"names":[],"mappings":"AA2Fa,IAAA,oBAAoB,GAAG;AAClC,IAAA,SAAS,EAAE,KAAK;AAChB,IAAA,UAAU,EAAE,KAAK;AACjB,IAAA,QAAQ,EAAE,KAAK;AACf,IAAA,iBAAiB,EAAE,IAAI;IACvB,OAAO,EAAE,eAAQ;IACjB,cAAc,EAAE,eAAQ;;;;;"}
+{"version":3,"file":"types.js","sources":["../../../src/components/scrubber/types.ts"],"sourcesContent":["export type ScrubberProps = {\n  /**\n   * A unique identifier for the media being scrubbed.\n   * Usually a \"track id\" suffices here. This property\n   * is similar to a `key` in React and is used to\n   * reset the scrubber animation for a new media item.\n   */\n  mediaKey: string\n\n  /**\n   * Whether or not the media being scrubbed is playing (or paused).\n   */\n  isPlaying: boolean\n\n  /**\n   * Whether or not the scrubber should be disabled. For example,\n   * this is useful when no content is playing.\n   */\n  isDisabled?: boolean\n\n  /**\n   * Whether or not to display a mobile-friendly variant.\n   */\n  isMobile?: boolean\n\n  /**\n   * Whether or not timestamps are shown on the sides of the scrubber.\n   */\n  includeTimestamps?: boolean\n\n  /**\n   * The current progress of the media being scrubbed.\n   * The scrubber reacts to changes in the elapsed seconds\n   * to re-calibrate. This value should be updated relatively frequently\n   * (0.1s < x < 1s).\n   */\n  elapsedSeconds: number\n\n  /**\n   * Total duration of the media being scrubbed.\n   */\n  totalSeconds: number\n\n  /**\n   * The speed that the media is being played at\n   */\n  playbackRate: number\n\n  /**\n   * Fired incrementally as the user drags the scrubber.\n   */\n  onScrub?: (seconds: number) => void\n\n  /**\n   * Fired effectively on \"mouse up\" when the user is done scrubbing.\n   */\n  onScrubRelease?: (seconds: number) => void\n\n  /** Callback to fetch the current playback position in seconds. Typically wired\n   * up to the audio player's `getPosition` method.\n   */\n  getAudioPosition: () => number\n\n  /** Callback to get the duration of the current media. Typically wired up to the\n   * audio player's `getDuration` method.\n   */\n  getTotalTime: () => number\n\n  /**\n   * Individually exposed styling options.\n   */\n  style?: {\n    railListenedColor?: string\n    railUnlistenedColor?: string\n    showHandle?: boolean\n    handleColor?: string\n    handleShadow?: string\n    sliderMargin?: string\n  }\n\n  /**\n   * Include larger click targets to that it's hard to misclick\n   * Defaults to true\n   */\n  includeExpandedTargets?: boolean\n\n  /**\n   * Escape hatch for styles.\n   */\n  className?: string\n}\n\n/**\n * Encapsulates time-data for detecting and animating the position\n * of a scrubber.\n */\nexport type TimeData = {\n  elapsedSeconds: number\n  totalSeconds: number\n}\n\nexport const defaultScrubberProps = {\n  isPlaying: false,\n  isDisabled: false,\n  isMobile: false,\n  includeTimestamps: true,\n  onScrub: () => {},\n  onScrubRelease: () => {}\n}\n"],"names":[],"mappings":"AAqGa,IAAA,oBAAoB,GAAG;AAClC,IAAA,SAAS,EAAE,KAAK;AAChB,IAAA,UAAU,EAAE,KAAK;AACjB,IAAA,QAAQ,EAAE,KAAK;AACf,IAAA,iBAAiB,EAAE,IAAI;IACvB,OAAO,EAAE,eAAQ;IACjB,cAAc,EAAE,eAAQ;;;;;"}

package/dist/components/send-icon/SendIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SendIcon.d.ts","sourceRoot":"","sources":["../../../src/components/send-icon/SendIcon.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAEvC,eAAO,MAAM,QAAQ,0BAAmC,aAAa,qDA0BpE,CAAA"}

package/dist/components/{comments/SendIcon → send-icon}/SendIcon.js

@@ -1,16 +1,16 @@
 import { jsx } from '@emotion/react/jsx-runtime';
 import { useTheme } from '@emotion/react';
-import '../../button/Button/Button.js';
-import '../../button/PlainButton/PlainButton.js';
-import '../../../_virtual/_tslib.js';
-import { IconPaperAirplane } from '../../../icons/utilityIcons.js';
+import '../button/Button/Button.js';
+import '../button/PlainButton/PlainButton.js';
+import '../../_virtual/_tslib.js';
+import { IconPaperAirplane } from '../../icons/utilityIcons.js';
 import 'react';
 import '@emotion/css';
-import '../../button/FollowButton/FollowButton.js';
-import { IconButton } from '../../button/IconButton/IconButton.js';
-import '../../button/UnstyledButton.js';
-import '../../button/FilterButton/FilterButton.js';
-import '../../button/FilterButton/FilterButtonOption.js';
+import '../button/FollowButton/FollowButton.js';
+import { IconButton } from '../button/IconButton/IconButton.js';
+import '../button/UnstyledButton.js';
+import '../button/FilterButton/FilterButton.js';
+import '../button/FilterButton/FilterButtonOption.js';
 
 var SendIcon = function (_a) {
     var _b = _a.disabled, disabled = _b === void 0 ? false : _b, onClick = _a.onClick;

package/dist/components/send-icon/SendIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SendIcon.js","sources":["../../../src/components/send-icon/SendIcon.tsx"],"sourcesContent":["import { useTheme } from '@emotion/react'\n\nimport { IconButton } from 'components/button'\nimport { IconPaperAirplane } from 'icons'\n\nimport { SendIconProps } from './types'\n\nexport const SendIcon = ({ disabled = false, onClick }: SendIconProps) => {\n  const { color, motion } = useTheme()\n\n  return (\n    <IconButton\n      aria-label='Send'\n      icon={IconPaperAirplane}\n      size='2xl'\n      onClick={onClick}\n      css={{\n        cursor: 'pointer',\n        pointerEvents: disabled ? 'none' : 'all',\n        opacity: disabled ? 0.5 : 1,\n        path: {\n          fill: color.primary.primary,\n          transition: motion.quick\n        },\n        ':hover path': {\n          fill: color.primary.p100\n        },\n        ':active path': {\n          fill: color.primary.p500\n        }\n      }}\n    />\n  )\n}\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;AAOO,IAAM,QAAQ,GAAG,UAAC,EAA4C,EAAA;AAA1C,IAAA,IAAA,EAAA,GAAA,EAAA,CAAA,QAAgB,EAAhB,QAAQ,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,KAAK,GAAA,EAAA,EAAE,OAAO,GAAA,EAAA,CAAA,OAAA,CAAA;IAC5C,IAAA,EAAA,GAAoB,QAAQ,EAAE,EAA5B,KAAK,GAAA,EAAA,CAAA,KAAA,EAAE,MAAM,GAAA,EAAA,CAAA,MAAe,CAAA;AAEpC,IAAA,QACEA,GAAC,CAAA,UAAU,kBACE,MAAM,EACjB,IAAI,EAAE,iBAAiB,EACvB,IAAI,EAAC,KAAK,EACV,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE;AACH,YAAA,MAAM,EAAE,SAAS;YACjB,aAAa,EAAE,QAAQ,GAAG,MAAM,GAAG,KAAK;YACxC,OAAO,EAAE,QAAQ,GAAG,GAAG,GAAG,CAAC;AAC3B,YAAA,IAAI,EAAE;AACJ,gBAAA,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,OAAO;gBAC3B,UAAU,EAAE,MAAM,CAAC,KAAK;AACzB,aAAA;AACD,YAAA,aAAa,EAAE;AACb,gBAAA,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI;AACzB,aAAA;AACD,YAAA,cAAc,EAAE;AACd,gBAAA,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI;AACzB,aAAA;AACF,SAAA,EAAA,CACD,EACH;AACH;;;;"}

package/dist/components/send-icon/SendIcon.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SendIcon.stories.d.ts","sourceRoot":"","sources":["../../../src/components/send-icon/SendIcon.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAItD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAErC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,QAAQ,CAG/B,CAAA;AAED,eAAe,IAAI,CAAA;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,QAAQ,CAAC,CAAA;AAEtC,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAA"}

package/dist/components/send-icon/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/send-icon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,cAAc,SAAS,CAAA"}

package/dist/components/send-icon/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/send-icon/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB,CAAA"}

package/dist/components/text/Text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../src/components/text/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAwC,MAAM,OAAO,CAAA;AAWzE,eAAO,MAAM,IAAI,4WAsGhB,CAAA"}
+{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../src/components/text/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAwC,MAAM,OAAO,CAAA;AASzE,eAAO,MAAM,IAAI,4WAyGhB,CAAA"}

package/dist/components/text/Text.js

@@ -3,7 +3,6 @@ import { jsx } from '@emotion/react/jsx-runtime';
 import { forwardRef, useContext } from 'react';
 import { useTheme } from '@emotion/react';
 import { Slot } from '@radix-ui/react-slot';
-import { typography } from '../../foundations/typography/typography.js';
 import { bodyLineHeightMap, variantTagMap, variantStylesMap } from './constants.js';
 import { TextContext } from './textContext.js';
 
@@ -17,7 +16,7 @@ var Text = forwardRef(function (props, ref) {
     var strength = strengthProp !== null && strengthProp !== void 0 ? strengthProp : (parentVariant ? undefined : 'default');
     var size = sizeProp !== null && sizeProp !== void 0 ? sizeProp : (parentVariant ? undefined : 'm');
     var variantConfig = variant && variantStylesMap[variant];
-    var css = __assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign({ fontFamily: "'Avenir Next LT Pro', 'Helvetica Neue', Helvetica,\n    Arial, sans-serif", position: 'relative', boxSizing: 'border-box' }, (color &&
+    var css = __assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign({ fontFamily: theme.typography.font, position: 'relative', boxSizing: 'border-box' }, (color &&
         color === 'heading' && {
         // inline is necessary to prevent text clipping
         display: 'inline',
@@ -25,18 +24,21 @@ var Text = forwardRef(function (props, ref) {
         WebkitTextFillColor: 'transparent',
         backgroundClip: 'text',
         backgroundImage: theme.color.text.heading
-    })), (color && color !== 'heading' && { color: theme.color.text[color] })), (variantConfig && __assign({ 
+    })), (color && color !== 'heading' && { color: theme.color.text[color] })), (variantConfig && __assign(__assign({ 
         // @ts-ignore
-        fontSize: typography.size[variantConfig.fontSize[size]], lineHeight: 
+        fontSize: theme.typography.size[variantConfig.fontSize[size]], lineHeight: 
         // @ts-ignore
-        typography.lineHeight[lineHeight && variant === 'body' && size
+        theme.typography.lineHeight[lineHeight && variant === 'body' && size
             ? // @ts-ignore
                 bodyLineHeightMap[size][lineHeight]
             : // @ts-ignore
                 variantConfig.lineHeight[size]], 
         // @ts-ignore
-        fontWeight: typography.weight[variantConfig.fontWeight[strength]] }, ('css' in variantConfig && variantConfig.css)))), (shadow && {
-        textShadow: typography.shadow[shadow]
+        fontWeight: theme.typography.weight[variantConfig.fontWeight[strength]] }, ('css' in variantConfig && variantConfig.css)), (lineHeight === 'multi' && {
+        wordBreak: 'break-word',
+        hyphens: 'auto'
+    })))), (shadow && {
+        textShadow: theme.typography.shadow[shadow]
     })), { textAlign: textAlign }), (textTransform && { textTransform: textTransform })), (ellipses && {
         overflow: 'hidden',
         textOverflow: 'ellipsis',
@@ -45,8 +47,8 @@ var Text = forwardRef(function (props, ref) {
         overflow: 'hidden',
         display: '-webkit-box',
         lineClamp: "".concat(maxLines),
-        '-webkit-line-clamp': "".concat(maxLines),
-        '-webkit-box-orient': 'vertical'
+        WebkitLineClamp: "".concat(maxLines),
+        WebkitBoxOrient: 'vertical'
     }));
     // @ts-ignore
     var variantTag = variant && ((_b = variantTagMap[variant]) === null || _b === void 0 ? void 0 : _b[size]);