@apple-pie/slice 0.1.52 → 0.1.54

package/dist/esm/chunks/{Video-D3FSIySJ.mjs → Video-DKjVachU.mjs}

@@ -1,17 +1,19 @@
 'use client';
-import { a as __rest, _ as __awaiter } from "./tslib.es6-DGRmn-gx.mjs";
+import { a as __rest, _ as __awaiter } from "./tslib.es6-BTg9ZFwR.mjs";
 
 import { jsxs, jsx } from "react/jsx-runtime";
 
 import React, { useRef, useState, useCallback, useMemo, useEffect } from "react";
 
-import { s as setStyle } from "./misc-GB29X0YR.mjs";
+import { s as setStyle } from "./misc-NDOWTiFf.mjs";
 
-import { I as IconButton } from "./IconButton-Wffb0Rhg.mjs";
+import { I as IconButton } from "./IconButton-DmhOQNtq.mjs";
 
-import { S as Slider } from "./Slider-D6nWSQ-A.mjs";
+import { P as ProgressIndicator } from "./ProgressIndicator-dkR6UF1M.mjs";
 
-import { T as ToggleButton } from "./ToggleButton-DpR2FO_I.mjs";
+import { S as Slider } from "./Slider-B8A9FdgY.mjs";
+
+import { T as ToggleButton } from "./ToggleButton-nusOpkrZ.mjs";
 
 var PlayState, css_wrapper = "Video-module_wrapper__a9iH8", css_video = "Video-module_video__hxKME", css_controls = "Video-module_controls__X4yt6", css_controlsHeader = "Video-module_controlsHeader__dD64-", css_controlsFooter = "Video-module_controlsFooter__qJNTa", css_controlsBody = "Video-module_controlsBody__2GbQz", css_right = "Video-module_right__UMhfW", css_left = "Video-module_left__XC33m", css_progress = "Video-module_progress__UTWtq";
 
@@ -26,7 +28,7 @@ const BaseVideo = React.forwardRef((props, ref) => {
         progress: !0,
         volume: !0,
         fullscreen: !0
-    }, onPlay: onPlay, onPause: onPause, onEnd: onEnd, onProgress: onProgress, onLoadProgress: onLoadProgress, onPlaybackRateChange: onPlaybackRateChange, onCanPlayThrough: onCanPlayThrough, onPlayStateChange: onPlayStateChange, onLoadMetaData: onLoadMetaData, onFullScreenChange: onFullScreenChange, onVolumeChange: onVolumeChange, onLoadedFrameData: onLoadedFrameData, onQuit: onQuit} = props, divAttributes = __rest(props, [ "children", "src", "playing", "loop", "muted", "playsInline", "controls", "volume", "poster", "captionsSrc", "playRate", "width", "height", "borderRadius", "borderSize", "borderColor", "backgroundColor", "objectFit", "customControls", "onPlay", "onPause", "onEnd", "onProgress", "onLoadProgress", "onPlaybackRateChange", "onCanPlayThrough", "onPlayStateChange", "onLoadMetaData", "onFullScreenChange", "onVolumeChange", "onLoadedFrameData", "onQuit" ]), {id: divId, className: className, style: style} = divAttributes, rest = __rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", videoRef = useRef(null), containerRef = useRef(null), progress = useRef(null), wasPlaying = useRef(null != playing && playing), playState = useRef(PlayState.Stopped), [isPlaying, setIsPlaying] = useState(null != playing && playing), [isMuted, setIsMuted] = useState(null != muted && muted), [currentVolume, setCurrentVolume] = useState(null != volume ? volume : 1), [currentProgress, setCurrentProgress] = useState(0), [hovered, setHovered] = useState(!1), timer = useRef(null), handleLoadProgress = useCallback(event => {
+    }, showProgressIndicator: showProgressIndicator = !0, onPlay: onPlay, onPause: onPause, onEnd: onEnd, onProgress: onProgress, onLoadProgress: onLoadProgress, onPlaybackRateChange: onPlaybackRateChange, onCanPlayThrough: onCanPlayThrough, onCanPlay: onCanPlay, onPlayStateChange: onPlayStateChange, onLoadMetaData: onLoadMetaData, onFullScreenChange: onFullScreenChange, onVolumeChange: onVolumeChange, onLoadedFrameData: onLoadedFrameData, onQuit: onQuit} = props, divAttributes = __rest(props, [ "children", "src", "playing", "loop", "muted", "playsInline", "controls", "volume", "poster", "captionsSrc", "playRate", "width", "height", "borderRadius", "borderSize", "borderColor", "backgroundColor", "objectFit", "customControls", "showProgressIndicator", "onPlay", "onPause", "onEnd", "onProgress", "onLoadProgress", "onPlaybackRateChange", "onCanPlayThrough", "onCanPlay", "onPlayStateChange", "onLoadMetaData", "onFullScreenChange", "onVolumeChange", "onLoadedFrameData", "onQuit" ]), {id: divId, className: className, style: style} = divAttributes, rest = __rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", videoRef = useRef(null), containerRef = useRef(null), progress = useRef(null), wasPlaying = useRef(null != playing && playing), playState = useRef(PlayState.Stopped), [isPlaying, setIsPlaying] = useState(null != playing && playing), [isMuted, setIsMuted] = useState(null != muted && muted), [currentVolume, setCurrentVolume] = useState(null != volume ? volume : 1), [currentProgress, setCurrentProgress] = useState(0), [hovered, setHovered] = useState(!1), [canPlay, setCanPlay] = useState(!1), timer = useRef(null), handleLoadProgress = useCallback(event => {
         const target = event.target;
         if (target.buffered.length > 0) {
             const bufferedEnd = target.buffered.end(target.buffered.length - 1), duration = target.duration;
@@ -48,11 +50,12 @@ const BaseVideo = React.forwardRef((props, ref) => {
         }
     }, [ onProgress, onPlayStateChange ]), handleCanPlayThrough = useCallback(() => {
         null == onCanPlayThrough || onCanPlayThrough();
-    }, [ onCanPlayThrough ]), handlePlay = useCallback(() => {
-        var _a, _b, _c;
-        (null === (_a = videoRef.current) || void 0 === _a ? void 0 : _a.paused) && videoRef.current.play().then(() => null), 
+    }, [ onCanPlayThrough ]), handleCanPlay = useCallback(() => {
+        setCanPlay(!0), null == onCanPlay || onCanPlay();
+    }, [ onCanPlay ]), handlePlay = useCallback(() => {
+        var _a, _b;
         null == onPlay || onPlay(), setIsPlaying(!0);
-        (null === (_b = videoRef.current) || void 0 === _b ? void 0 : _b.currentTime) === (null === (_c = videoRef.current) || void 0 === _c ? void 0 : _c.duration) ? (playState.current !== PlayState.Ended && (null == onPlayStateChange || onPlayStateChange(PlayState.Ended)), 
+        (null === (_a = videoRef.current) || void 0 === _a ? void 0 : _a.currentTime) === (null === (_b = videoRef.current) || void 0 === _b ? void 0 : _b.duration) ? (playState.current !== PlayState.Ended && (null == onPlayStateChange || onPlayStateChange(PlayState.Ended)), 
         playState.current = PlayState.Ended) : playState.current !== PlayState.Playing && (null == onPlayStateChange || onPlayStateChange(PlayState.Playing), 
         playState.current = PlayState.Playing);
     }, [ onPlay, onPlayStateChange ]), handlePause = useCallback(() => {
@@ -93,8 +96,8 @@ const BaseVideo = React.forwardRef((props, ref) => {
         rate < .5 && (nextRate = .5), rate > 3 && (nextRate = 3), videoRef.current.playbackRate = nextRate;
     }, []), handleRestart = useCallback(() => {
         videoRef.current && (videoRef.current.pause(), videoRef.current.currentTime = 0, 
-        videoRef.current.play().then(() => null));
-    }, []), handleVolumeChange = useCallback((volume = 1) => {
+        handlePlayClick(!0));
+    }, [ handlePlayClick ]), handleVolumeChange = useCallback((volume = 1) => {
         if (!videoRef.current) return;
         let nextVolume = volume;
         volume < 0 && (nextVolume = 0), volume > 1 && (nextVolume = 1), videoRef.current.volume = nextVolume, 
@@ -187,8 +190,8 @@ const BaseVideo = React.forwardRef((props, ref) => {
                             iconFill: !0,
                             buttonSize: "m",
                             iconSize: 18,
-                            bgColor: "rgba(255,255,255,0.05)",
-                            bgColorHover: "rgba(0,0,0,0.7)",
+                            backgroundColor: "rgba(255,255,255,0.05)",
+                            backgroundColorHover: "rgba(0,0,0,0.7)",
                             iconColor: "var(--core-text-light)",
                             iconColorHover: "var(--core-text-light)",
                             onClick: () => handleFullScreen(!0)
@@ -200,9 +203,9 @@ const BaseVideo = React.forwardRef((props, ref) => {
                             iconFill: !0,
                             buttonSize: "m",
                             iconSize: 20,
-                            bgColor: "rgba(255,255,255,0.05)",
-                            bgColorHover: "rgba(0,0,0,0.7)",
-                            bgColorOn: "rgba(0,0,0,0.5)",
+                            backgroundColor: "rgba(255,255,255,0.05)",
+                            backgroundColorHover: "rgba(0,0,0,0.7)",
+                            backgroundColorOn: "rgba(0,0,0,0.5)",
                             iconColor: "var(--core-text-light)",
                             iconColorHover: "var(--core-text-light)",
                             onClick: () => handleMute()
@@ -225,9 +228,9 @@ const BaseVideo = React.forwardRef((props, ref) => {
                         iconOn: "pause",
                         iconSize: 48,
                         buttonSize: "xl",
-                        bgColor: "rgba(0,0,0,0.5)",
-                        bgColorHover: "rgba(0,0,0,0.7)",
-                        bgColorOn: "rgba(0,0,0,0.5)",
+                        backgroundColor: "rgba(0,0,0,0.5)",
+                        backgroundColorHover: "rgba(0,0,0,0.7)",
+                        backgroundColorOn: "rgba(0,0,0,0.5)",
                         iconColor: "var(--core-text-light)",
                         iconColorOn: "var(--core-text-light)",
                         iconColorHover: "var(--core-text-light)",
@@ -243,9 +246,9 @@ const BaseVideo = React.forwardRef((props, ref) => {
                             iconOn: "pause",
                             buttonSize: "m",
                             iconSize: 28,
-                            bgColor: "rgba(255,255,255,0.05)",
-                            bgColorHover: "rgba(0,0,0,0.7)",
-                            bgColorOn: "rgba(255,255,255,0.05)",
+                            backgroundColor: "rgba(255,255,255,0.05)",
+                            backgroundColorHover: "rgba(0,0,0,0.7)",
+                            backgroundColorOn: "rgba(255,255,255,0.05)",
                             iconColor: "var(--core-text-light)",
                             iconColorHover: "var(--core-text-light)",
                             iconColorOn: "var(--core-text-light)",
@@ -264,9 +267,9 @@ const BaseVideo = React.forwardRef((props, ref) => {
                             toggle: !1,
                             icon: "x",
                             buttonSize: "m",
-                            bgColor: "rgba(255,255,255,0.05)",
-                            bgColorHover: "rgba(0,0,0,0.7)",
-                            bgColorOn: "rgba(255,255,255,0.05)",
+                            backgroundColor: "rgba(255,255,255,0.05)",
+                            backgroundColorHover: "rgba(0,0,0,0.7)",
+                            backgroundColorOn: "rgba(255,255,255,0.05)",
                             iconColor: "var(--core-text-light)",
                             iconColorHover: "var(--core-text-light)",
                             iconColorOn: "var(--core-text-light)",
@@ -285,6 +288,7 @@ const BaseVideo = React.forwardRef((props, ref) => {
             controls: "default" === controls,
             poster: poster,
             onCanPlayThrough: handleCanPlayThrough,
+            onCanPlay: handleCanPlay,
             onPlay: handlePlay,
             onPause: handlePause,
             onEnded: handleEnd,
@@ -297,6 +301,8 @@ const BaseVideo = React.forwardRef((props, ref) => {
                 kind: "captions",
                 src: captionsSrc
             })
+        }), !canPlay && showProgressIndicator && jsx(ProgressIndicator, {
+            show: !0
         }) ]
     }));
 });

package/dist/esm/chunks/{VideoController-CS6eZwuf.mjs → VideoController-kH0JkJf-.mjs}

@@ -1,5 +1,5 @@
 'use client';
-import { a as __rest } from "./tslib.es6-DGRmn-gx.mjs";
+import { a as __rest } from "./tslib.es6-BTg9ZFwR.mjs";
 
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 
@@ -7,17 +7,21 @@ import { useDragControls, AnimatePresence, motion } from "motion/react";
 
 import { useRef, useState, useEffect, useMemo } from "react";
 
-import "./microphoneStore-CHjTUEL_.mjs";
+import "./microphoneStore-CtpUG1DB.mjs";
 
-import "./volumeStore-DBjptppw.mjs";
+import "./volumeStore-IY7T-8fH.mjs";
 
-import { s as setStyle } from "./misc-GB29X0YR.mjs";
+import "./webRTCStore-DmyQS-SN.mjs";
 
-import { I as IconButton } from "./IconButton-Wffb0Rhg.mjs";
+import { corners } from "../theme/corners.mjs";
 
-import { O as Overlay } from "./Overlay-DXAULyRd.mjs";
+import { s as setStyle } from "./misc-NDOWTiFf.mjs";
 
-import { u as useVideo, a as useVideoActions } from "./videoStore-BxCTQ_tE.mjs";
+import { I as IconButton } from "./IconButton-DmhOQNtq.mjs";
+
+import { O as Overlay } from "./Overlay-BhrCyPRX.mjs";
+
+import { u as useVideo, a as useVideoActions } from "./videoStore-B_fdicUy.mjs";
 
 var css_container = "VideoController-module_container__wNiGy", css_box = "VideoController-module_box__a0PRD", css_wrapper = "VideoController-module_wrapper__RhpUo", css_video = "VideoController-module_video__9bS2L";
 
@@ -39,7 +43,7 @@ const defaultTransition = {
 
 function VideoController(props) {
     var _a;
-    const {dragConstraintsRef: dragConstraintsRef, transition: transition = defaultTransition, variants: variants = defaultVariants, initial: initial = "initial", animate: animate = "animate", exit: exit = "exit", draggable: draggable = !0, overlayOpacity: overlayOpacity = .7, overlayColor: overlayColor = "rgb(0,0,0)", padding: padding = 64, borderRadius: borderRadius = 8, quit: quit = "inline", onQuit: onQuit} = props, controls = useDragControls(), video = useVideo(), hide = useVideoActions().clear, VideoComponent = null == video ? void 0 : video.component, _b = null !== (_a = null == video ? void 0 : video.props) && void 0 !== _a ? _a : {}, {onLoadedFrameData: onLoadedFrameData, borderRadius: videoBorderRadius} = _b, videoProps = __rest(_b, [ "onLoadedFrameData", "borderRadius" ]), ref = useRef(null), constraints = null != dragConstraintsRef ? dragConstraintsRef : ref, [ready, setReady] = useState(!1);
+    const {dragConstraintsRef: dragConstraintsRef, transition: transition = defaultTransition, variants: variants = defaultVariants, initial: initial = "initial", animate: animate = "animate", exit: exit = "exit", draggable: draggable = !0, overlayOpacity: overlayOpacity = .7, overlayColor: overlayColor = "rgb(0,0,0)", padding: padding = 64, borderRadius: borderRadius = corners["corner-m"], quit: quit = "inline", showProgressIndicator: showProgressIndicator = !0, onQuit: onQuit} = props, controls = useDragControls(), video = useVideo(), hide = useVideoActions().clear, VideoComponent = null == video ? void 0 : video.component, _b = null !== (_a = null == video ? void 0 : video.props) && void 0 !== _a ? _a : {}, {onLoadedFrameData: onLoadedFrameData, borderRadius: videoBorderRadius} = _b, videoProps = __rest(_b, [ "onLoadedFrameData", "borderRadius" ]), ref = useRef(null), constraints = null != dragConstraintsRef ? dragConstraintsRef : ref, [ready, setReady] = useState(!1);
     useEffect(() => {
         (null == video ? void 0 : video.id) && setReady(!1);
     }, [ null == video ? void 0 : video.id ]);
@@ -48,7 +52,7 @@ function VideoController(props) {
     }, cssVars = useMemo(() => ({
         "--overlay-padding": setStyle(padding, 64),
         "--video-visibility": ready ? "visible" : "hidden",
-        "--video-border-radius": setStyle(borderRadius, 8)
+        "--video-border-radius": setStyle(borderRadius, corners["corner-m"])
     }), [ padding, ready, borderRadius ]);
     return jsxs(Fragment, {
         children: [ jsx(Overlay, {
@@ -81,6 +85,7 @@ function VideoController(props) {
                         children: [ jsx("div", {
                             className: css_video,
                             children: jsx(VideoComponent, Object.assign({}, videoProps, {
+                                showProgressIndicator: showProgressIndicator,
                                 borderRadius: null != borderRadius ? borderRadius : videoBorderRadius,
                                 onLoadedFrameData: () => {
                                     setReady(!0), null == onLoadedFrameData || onLoadedFrameData();
@@ -94,8 +99,8 @@ function VideoController(props) {
                             icon: "x",
                             buttonSize: "l",
                             onClick: handleHide,
-                            bgColor: "rgba(255,255,255,0.05)",
-                            bgColorHover: "rgba(255,255,255,0.25)",
+                            backgroundColor: "rgba(255,255,255,0.05)",
+                            backgroundColorHover: "rgba(255,255,255,0.25)",
                             iconColor: "var(--core-text-light)",
                             iconColorHover: "var(--core-text-light)"
                         }) ]

package/dist/esm/chunks/{WSConnection-DX-v8PDB.mjs → WSConnection-NpYplU2v.mjs}

@@ -1,4 +1,4 @@
-import { _ as __awaiter } from "./tslib.es6-DGRmn-gx.mjs";
+import { _ as __awaiter } from "./tslib.es6-BTg9ZFwR.mjs";
 
 /**
  * Manage a WebSocket connection with optional unified events, retries, and keep-alive pings.

package/dist/esm/chunks/{WebRTCConnection-KLpY6CZG.mjs → WebRTCConnection-CCD9soqe.mjs}

@@ -1,4 +1,4 @@
-import { _ as __awaiter } from "./tslib.es6-DGRmn-gx.mjs";
+import { _ as __awaiter } from "./tslib.es6-BTg9ZFwR.mjs";
 
 class WebRTCConnection {
     /**

package/dist/esm/chunks/{browserChannelsStore-BlUi1EOi.mjs → browserChannelsStore-srC8Ojsl.mjs}

@@ -1,8 +1,8 @@
 import { create } from "zustand";
 
-import "./tslib.es6-DGRmn-gx.mjs";
+import "./tslib.es6-BTg9ZFwR.mjs";
 
-import { B as BrowserChannel } from "./broadcastChannel-qkn7bL4S.mjs";
+import { B as BrowserChannel } from "./broadcastChannel-jqOpePyV.mjs";
 
 const useBrowserChannelsStore = create((set, get) => ({
     channels: null,

package/dist/esm/chunks/{localDBStore-Cqmkk2oq.mjs → localDBStore-BpKbAtAQ.mjs}

@@ -1,4 +1,4 @@
-import { _ as __awaiter, a as __rest } from "./tslib.es6-DGRmn-gx.mjs";
+import { _ as __awaiter, a as __rest } from "./tslib.es6-BTg9ZFwR.mjs";
 
 import { useMemo } from "react";
 
@@ -6,9 +6,9 @@ import { create } from "zustand";
 
 import { useShallow } from "zustand/react/shallow";
 
-import { I as IndexedDB } from "./IndexedDB-Cwb-PZNm.mjs";
+import { I as IndexedDB } from "./IndexedDB-CTcPvxFz.mjs";
 
-import "./broadcastChannel-qkn7bL4S.mjs";
+import "./broadcastChannel-jqOpePyV.mjs";
 
 function isValidIDBKey(key) {
     return "string" == typeof key || "number" == typeof key || key instanceof Date || key instanceof ArrayBuffer || (Array.isArray(key) ? key.every(entry => isValidIDBKey(entry)) : ArrayBuffer.isView(key));