@audius/harmony 0.5.0 → 0.5.2

package/dist/components/scrubber/Scrubber.js

@@ -0,0 +1,52 @@
+import { __assign } from '../../_virtual/_tslib.js';
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import cn from 'classnames';
+import { formatTrackTimestamp } from '../../utils/formatTrackTimestamp.js';
+import 'lodash';
+import 'numeral';
+import '@emotion/react';
+import '../../contexts/MediaContext.js';
+import styles from './Scrubber.module.css.js';
+import { Slider } from './Slider.js';
+
+/** Timeout applied when releasing the drag-handle before timestamps reset. */
+var SCRUB_RELEASE_TIMEOUT_MS = 200;
+/**
+ * @beta - This component was directly ported from stems and subject to change
+ * Wraps the `<Slider />` component and provides timestamp indicators.
+ */
+var Scrubber = function (_a) {
+    var _b;
+    var mediaKey = _a.mediaKey, isPlaying = _a.isPlaying, isDisabled = _a.isDisabled, isMobile = _a.isMobile, _c = _a.includeTimestamps, includeTimestamps = _c === void 0 ? true : _c, elapsedSeconds = _a.elapsedSeconds, totalSeconds = _a.totalSeconds, _d = _a.playbackRate, playbackRate = _d === void 0 ? 1 : _d, getAudioPosition = _a.getAudioPosition, getTotalTime = _a.getTotalTime, onScrub = _a.onScrub, onScrubRelease = _a.onScrubRelease, includeExpandedTargets = _a.includeExpandedTargets, style = _a.style, className = _a.className;
+    var _e = useState(null), dragSeconds = _e[0], setDragSeconds = _e[1];
+    var resetDragSeconds = function (isPlaying) {
+        if (isPlaying) {
+            setTimeout(function () { return setDragSeconds(null); }, SCRUB_RELEASE_TIMEOUT_MS);
+        }
+    };
+    var onHandleScrub = function (seconds) {
+        setDragSeconds(seconds);
+        if (onScrub) {
+            onScrub(seconds);
+        }
+    };
+    var onHandleScrubRelease = function (seconds) {
+        if (onScrubRelease) {
+            onScrubRelease(seconds);
+        }
+        resetDragSeconds(isPlaying);
+    };
+    useEffect(function () {
+        resetDragSeconds(isPlaying);
+    }, [isPlaying]);
+    var timestampStart = dragSeconds !== null ? dragSeconds : elapsedSeconds;
+    return (jsxs("div", __assign({ className: cn(styles.scrubber, (_b = {},
+            _b[styles.isDisabled] = isDisabled,
+            _b[styles.isMobile] = isMobile,
+            _b.className = className,
+            _b)) }, { children: [includeTimestamps && (jsx("div", __assign({ className: styles.timestampStart }, { children: formatTrackTimestamp(timestampStart) }))), jsx(Slider, { mediaKey: mediaKey, isPlaying: isPlaying, isDisabled: isDisabled, isMobile: isMobile, elapsedSeconds: elapsedSeconds, totalSeconds: totalSeconds, playbackRate: playbackRate, onScrub: onHandleScrub, getAudioPosition: getAudioPosition, getTotalTime: getTotalTime, onScrubRelease: onHandleScrubRelease, includeExpandedTargets: includeExpandedTargets, style: style }), includeTimestamps && (jsx("div", __assign({ className: styles.timestampEnd }, { children: formatTrackTimestamp(totalSeconds) })))] })));
+};
+
+export { Scrubber };
+//# sourceMappingURL=Scrubber.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Scrubber.js","sources":["../../../src/components/scrubber/Scrubber.tsx"],"sourcesContent":["import { useState, useEffect } from 'react'\n\nimport cn from 'classnames'\n\nimport { formatTrackTimestamp } from '~harmony/utils'\n\nimport styles from './Scrubber.module.css'\nimport { Slider } from './Slider'\nimport { ScrubberProps } from './types'\n\n/** Timeout applied when releasing the drag-handle before timestamps reset. */\nconst SCRUB_RELEASE_TIMEOUT_MS = 200\n\n/**\n * @beta - This component was directly ported from stems and subject to change\n * Wraps the `<Slider />` component and provides timestamp indicators.\n */\nexport const Scrubber = ({\n  mediaKey,\n  isPlaying,\n  isDisabled,\n  isMobile,\n  includeTimestamps = true,\n  elapsedSeconds,\n  totalSeconds,\n  playbackRate = 1,\n  getAudioPosition,\n  getTotalTime,\n  onScrub,\n  onScrubRelease,\n  includeExpandedTargets,\n  style,\n  className\n}: ScrubberProps) => {\n  const [dragSeconds, setDragSeconds] = useState<number | null>(null)\n\n  const resetDragSeconds = (isPlaying: boolean) => {\n    if (isPlaying) {\n      setTimeout(() => setDragSeconds(null), SCRUB_RELEASE_TIMEOUT_MS)\n    }\n  }\n\n  const onHandleScrub = (seconds: number) => {\n    setDragSeconds(seconds)\n    if (onScrub) {\n      onScrub(seconds)\n    }\n  }\n\n  const onHandleScrubRelease = (seconds: number) => {\n    if (onScrubRelease) {\n      onScrubRelease(seconds)\n    }\n    resetDragSeconds(isPlaying)\n  }\n\n  useEffect(() => {\n    resetDragSeconds(isPlaying)\n  }, [isPlaying])\n\n  const timestampStart = dragSeconds !== null ? dragSeconds : elapsedSeconds\n\n  return (\n    <div\n      className={cn(styles.scrubber, {\n        [styles.isDisabled]: isDisabled,\n        [styles.isMobile]: isMobile,\n        className\n      })}\n    >\n      {includeTimestamps && (\n        <div className={styles.timestampStart}>\n          {formatTrackTimestamp(timestampStart)}\n        </div>\n      )}\n      <Slider\n        mediaKey={mediaKey}\n        isPlaying={isPlaying}\n        isDisabled={isDisabled}\n        isMobile={isMobile}\n        elapsedSeconds={elapsedSeconds}\n        totalSeconds={totalSeconds}\n        playbackRate={playbackRate}\n        onScrub={onHandleScrub}\n        getAudioPosition={getAudioPosition}\n        getTotalTime={getTotalTime}\n        onScrubRelease={onHandleScrubRelease}\n        includeExpandedTargets={includeExpandedTargets}\n        style={style}\n      />\n      {includeTimestamps && (\n        <div className={styles.timestampEnd}>\n          {formatTrackTimestamp(totalSeconds)}\n        </div>\n      )}\n    </div>\n  )\n}\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/components/scrubber/Scrubber.module.css.js

@@ -0,0 +1,4 @@
+var styles = {"scrubber":"Scrubber-module_scrubber__m-H2N","timestampStart":"Scrubber-module_timestampStart__o5CsT","timestampEnd":"Scrubber-module_timestampEnd__0LjFK","isMobile":"Scrubber-module_isMobile__klxqA"};
+
+export { styles as default };
+//# sourceMappingURL=Scrubber.module.css.js.map

package/dist/components/scrubber/Scrubber.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Scrubber.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

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

@@ -0,0 +1,7 @@
+import { ScrubberProps } from './types';
+/**
+ * A smooth scrubbable slider that relies on CSS animations rather
+ * than progress ticks to achieve fluidity.
+ */
+export declare const Slider: ({ isPlaying, isMobile, isDisabled, totalSeconds, elapsedSeconds, onScrub, onScrubRelease, getAudioPosition, getTotalTime, includeExpandedTargets, style }: ScrubberProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Slider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../src/components/scrubber/Slider.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAQvC;;;GAGG;AACH,eAAO,MAAM,MAAM,8JAYhB,aAAa,qDAsRf,CAAA"}

package/dist/components/scrubber/Slider.js

@@ -0,0 +1,221 @@
+import { __assign } from '../../_virtual/_tslib.js';
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import { useRef, useCallback, useEffect } from 'react';
+import cn from 'classnames';
+import styles from './Slider.module.css.js';
+import { usePlaybackPositionTracking } from './hooks.js';
+
+/** Gets the X-position of a div. */
+var getXPosition = function (element) {
+    var coords = element.getBoundingClientRect();
+    return window.pageXOffset + coords.left;
+};
+/**
+ * A smooth scrubbable slider that relies on CSS animations rather
+ * than progress ticks to achieve fluidity.
+ */
+var Slider = function (_a) {
+    var _b;
+    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);
+    // Refs to handle event listeners
+    var mouseMoveRef = useRef(null);
+    var mouseUpRef = useRef(null);
+    var touchMoveRef = useRef(null);
+    var touchEndRef = useRef(null);
+    // Div refs
+    var railRef = useRef(null);
+    var trackRef = useRef(null);
+    var handleRef = useRef(null);
+    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.
+     */
+    var setDragPercent = useCallback(function (pageX) {
+        if (railRef.current) {
+            var clickPosition = pageX - getXPosition(railRef.current);
+            var railWidth = railRef.current.offsetWidth;
+            var percent = Math.min(Math.max(0, clickPosition), railWidth) / railWidth;
+            dragPercent.current = percent;
+        }
+    }, [dragPercent]);
+    /**
+     * Sets the percentage across the scrubber for a given mouse event.
+     */
+    var setDragPercentMouse = useCallback(function (e) {
+        setDragPercent(e.pageX);
+    }, [setDragPercent]);
+    /**
+     * Sets the percentage across the scurbber for a given touch event.
+     */
+    var setDragPercentTouch = useCallback(function (e) {
+        setDragPercent(e.touches[0].pageX);
+    }, [setDragPercent]);
+    /**
+     * Watches user mouse movements while the scrubber handle is being dragged.
+     */
+    var onMouseMove = useCallback(function (e) {
+        e.stopPropagation();
+        e.preventDefault();
+        setDragPercentMouse(e);
+        if (dragPercent.current !== null) {
+            setPosition(dragPercent.current);
+            var seconds = dragPercent.current * totalSeconds;
+            if (onScrub) {
+                onScrub(seconds);
+            }
+        }
+    }, [dragPercent, setDragPercentMouse, totalSeconds, onScrub, setPosition]);
+    /**
+     * Watches user touch movements while the scrubber handle is being dragged.
+     */
+    var onTouchMove = useCallback(function (e) {
+        e.stopPropagation();
+        e.preventDefault();
+        setDragPercentTouch(e);
+        if (dragPercent.current !== null) {
+            setPosition(dragPercent.current);
+            var seconds = dragPercent.current * totalSeconds;
+            if (onScrub) {
+                onScrub(seconds);
+            }
+        }
+    }, [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.
+     */
+    var onMouseUp = useCallback(function () {
+        if (mouseMoveRef.current) {
+            document.removeEventListener('mousemove', mouseMoveRef.current);
+        }
+        if (mouseUpRef.current) {
+            document.removeEventListener('mouseup', mouseUpRef.current);
+        }
+        setPositionOverrideEnabled(false);
+        if (dragPercent.current !== null) {
+            var seconds = dragPercent.current * totalSeconds;
+            if (onScrubRelease) {
+                onScrubRelease(seconds);
+            }
+            dragPercent.current = null;
+        }
+    }, [
+        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.
+     */
+    var onTouchEnd = useCallback(function () {
+        if (touchMoveRef.current) {
+            document.removeEventListener('touchmove', touchMoveRef.current);
+        }
+        if (touchEndRef.current) {
+            document.removeEventListener('touchend', touchEndRef.current);
+        }
+        setPositionOverrideEnabled(false);
+        if (dragPercent.current !== null) {
+            var seconds = dragPercent.current * totalSeconds;
+            if (onScrubRelease) {
+                onScrubRelease(seconds);
+            }
+            dragPercent.current = null;
+        }
+    }, [
+        touchMoveRef,
+        touchEndRef,
+        dragPercent,
+        totalSeconds,
+        onScrubRelease,
+        setPositionOverrideEnabled
+    ]);
+    /**
+     * Attaches mouse-move and mouse-up event listeners and sets dragging state.
+     */
+    var onMouseDown = function (e) {
+        // Cancel mouse down if touch was fired.
+        if (e.button !== 0 || touchMoveRef.current)
+            return;
+        mouseMoveRef.current = onMouseMove;
+        mouseUpRef.current = onMouseUp;
+        document.addEventListener('mousemove', mouseMoveRef.current);
+        document.addEventListener('mouseup', mouseUpRef.current);
+        setPositionOverrideEnabled(true);
+        setDragPercentMouse(e);
+    };
+    /**
+     * Attaches touch-move and touch-end event listeners and sets dragging state.
+     */
+    var onTouchStart = function (e) {
+        touchMoveRef.current = onTouchMove;
+        touchEndRef.current = onTouchEnd;
+        document.addEventListener('touchmove', touchMoveRef.current);
+        document.addEventListener('touchend', touchEndRef.current);
+        setPositionOverrideEnabled(true);
+        setDragPercentTouch(e);
+    };
+    // Watch interactions to the scrubber and call to animate
+    useEffect(function () {
+        if (!dragPercent.current) {
+            if (isPlaying)
+                play();
+            else
+                pause();
+        }
+    }, [isPlaying, dragPercent, play, pause]);
+    useEffect(function () {
+        refreshPosition();
+    }, [elapsedSeconds, totalSeconds, refreshPosition]);
+    var getShowHandle = function () {
+        return !style || style.showHandle === undefined ? true : style.showHandle;
+    };
+    var getRailStyle = function () {
+        var s = {};
+        if (style && style.railUnlistenedColor) {
+            s.background = style.railUnlistenedColor;
+        }
+        return s;
+    };
+    var getTrackStyle = function () {
+        var s = {};
+        if (style && style.railListenedColor) {
+            s.background = style.railListenedColor;
+        }
+        if (style && style.railListenedColor) {
+            s.borderRadius = 'var(--unit-half)';
+        }
+        return s;
+    };
+    var getSliderStyle = function () {
+        if (style && style.sliderMargin)
+            return { margin: style.sliderMargin };
+        return {};
+    };
+    var getHandleStyle = function () {
+        var s = {};
+        if (style) {
+            if (style.handleColor)
+                s.background = style.handleColor;
+            if (style.handleShadow)
+                s.boxShadow = style.handleShadow;
+        }
+        return s;
+    };
+    return (jsxs("div", __assign({ className: cn(styles.slider, (_b = {},
+            _b[styles.isMobile] = isMobile,
+            _b[styles.isDisabled] = isDisabled,
+            _b[styles.showHandle] = getShowHandle(),
+            _b[styles.expandedTargets] = includeExpandedTargets,
+            _b)), onMouseDown: isDisabled ? function () { } : onMouseDown, onTouchStart: isDisabled ? function () { } : onTouchStart, style: getSliderStyle() }, { children: [jsx("div", __assign({ ref: railRef, className: styles.rail, style: getRailStyle() }, { children: jsx("div", __assign({ ref: trackRef, className: styles.trackWrapper }, { children: jsx("div", { ref: trackRef, className: styles.track, style: getTrackStyle() }) })) })), jsx("div", __assign({ ref: handleRef, className: styles.handleWrapper }, { children: jsx("div", { ref: handleRef, className: styles.handle, style: getHandleStyle() }) }))] })));
+};
+
+export { Slider };
+//# sourceMappingURL=Slider.js.map

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

@@ -0,0 +1 @@
+{"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/Slider.module.css.js

@@ -0,0 +1,4 @@
+var styles = {"slider":"Slider-module_slider__o61n-","isMobile":"Slider-module_isMobile__1VIZX","isDisabled":"Slider-module_isDisabled__o0j3C","expandedTargets":"Slider-module_expandedTargets__c3Kfk","rail":"Slider-module_rail__sCKx8","trackWrapper":"Slider-module_trackWrapper__eH1F9","track":"Slider-module_track__owNQp","handleWrapper":"Slider-module_handleWrapper__mFanB","handleContainer":"Slider-module_handleContainer__YUtKx","handle":"Slider-module_handle__CP-aM","showHandle":"Slider-module_showHandle__nxgIi"};
+
+export { styles as default };
+//# sourceMappingURL=Slider.module.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

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

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

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,61 @@
+import { useRef, useCallback } from 'react';
+
+/**
+ * Hook for initializing playback update mechanism. Uses rAF to sync element
+ * positions to the current playback position.
+ */
+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 () {
+        isPlayingRef.current = true;
+        window.requestAnimationFrame(updatePositionRef.current);
+    }, [updatePositionRef, isPlayingRef]);
+    var pause = useCallback(function () {
+        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);
+        }
+    }, [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 { usePlaybackPositionTracking };
+//# sourceMappingURL=hooks.js.map

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

@@ -0,0 +1 @@
+{"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/index.d.ts

@@ -0,0 +1,2 @@
+export { Scrubber } from './Scrubber';
+//# sourceMappingURL=index.d.ts.map

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

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

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

@@ -0,0 +1,86 @@
+export type ScrubberProps = {
+    /**
+     * A unique identifier for the media being scrubbed.
+     * Usually a "track id" suffices here. This property
+     * is similar to a `key` in React and is used to
+     * reset the scrubber animation for a new media item.
+     */
+    mediaKey: string;
+    /**
+     * Whether or not the media being scrubbed is playing (or paused).
+     */
+    isPlaying: boolean;
+    /**
+     * Whether or not the scrubber should be disabled. For example,
+     * this is useful when no content is playing.
+     */
+    isDisabled?: boolean;
+    /**
+     * Whether or not to display a mobile-friendly variant.
+     */
+    isMobile?: boolean;
+    /**
+     * Whether or not timestamps are shown on the sides of the scrubber.
+     */
+    includeTimestamps?: boolean;
+    /**
+     * The current progress of the media being scrubbed.
+     * The scrubber reacts to changes in the elapsed seconds
+     * to re-calibrate. This value should be updated relatively frequently
+     * (0.1s < x < 1s).
+     */
+    elapsedSeconds: number;
+    /**
+     * Total duration of the media being scrubbed.
+     */
+    totalSeconds: number;
+    /**
+     * The speed that the media is being played at
+     */
+    playbackRate?: number;
+    /**
+     * Fired incrementally as the user drags the scrubber.
+     */
+    onScrub?: (seconds: number) => void;
+    /**
+     * 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.
+     */
+    style?: {
+        railListenedColor?: string;
+        railUnlistenedColor?: string;
+        showHandle?: boolean;
+        handleColor?: string;
+        handleShadow?: string;
+        sliderMargin?: string;
+    };
+    /**
+     * Include larger click targets to that it's hard to misclick
+     * Defaults to true
+     */
+    includeExpandedTargets?: boolean;
+    /**
+     * Escape hatch for styles.
+     */
+    className?: string;
+};
+/**
+ * Encapsulates time-data for detecting and animating the position
+ * of a scrubber.
+ */
+export type TimeData = {
+    elapsedSeconds: number;
+    totalSeconds: number;
+};
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +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,CAAC,EAAE,MAAM,CAAA;IAErB;;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"}

package/dist/components/segmented-control/SegmentedControl.d.ts

@@ -0,0 +1,7 @@
+import { SegmentedControlProps } from './types';
+/**
+ * A hybrid somewhere between a button group, radio buttons, and tabs;
+ * segmented controls are used to switch between different options or views.
+ */
+export declare const SegmentedControl: <T extends string>(props: SegmentedControlProps<T>) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SegmentedControl.d.ts.map

package/dist/components/segmented-control/SegmentedControl.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../../src/components/segmented-control/SegmentedControl.tsx"],"names":[],"mappings":"AAkBA,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAA;AAE/C;;;GAGG;AACH,eAAO,MAAM,gBAAgB,yGAsN5B,CAAA"}