mado-ui 0.5.0 → 0.5.2

package/dist/components.esm.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import { extendTailwindMerge, twJoin } from 'tailwind-merge';
 import * as React from 'react';
-import { Children, isValidElement, Fragment, createContext, useContext, useSyncExternalStore, useRef, useCallback, useEffect, Suspense, useId, useLayoutEffect, cloneElement, useState } from 'react';
+import { Children, isValidElement, Fragment, createContext, useContext, useSyncExternalStore, useRef, useCallback, useEffect, Suspense, useState, useId, useLayoutEffect, cloneElement } from 'react';
 import { Button as Button$1, DisclosureButton, DisclosurePanel, Disclosure, MenuButton, MenuItem, MenuItems, MenuSection, MenuHeading, MenuSeparator, Menu, Fieldset as Fieldset$1, Legend, Field, Label, Input as Input$1, Description, Textarea as Textarea$1, DialogTitle, Dialog, DialogBackdrop, DialogPanel } from '@headlessui/react';
 import * as ReactDOM from 'react-dom';
 import { createPortal } from 'react-dom';
@@ -1087,10 +1087,6 @@ function SpeakerPlusFill(props) {
     return (jsxs("svg", { ...props, viewBox: '0 0 64 47', children: [jsx("path", { d: 'M28.32,46.325C30.027,46.325 31.276,45.08 31.276,43.362L31.276,3.102C31.276,1.411 30.027,0 28.264,0C27.037,0 26.183,0.536 24.85,1.807L13.652,12.313C13.496,12.47 13.272,12.571 13.02,12.571L5.497,12.571C1.938,12.571 0,14.509 0,18.319L0,28.091C0,31.867 1.938,33.833 5.497,33.833L13.02,33.833C13.272,33.833 13.496,33.911 13.652,34.068L24.85,44.679C26.071,45.817 27.092,46.325 28.32,46.325Z' }), jsx("path", { d: 'M39.659,23.135C39.659,24.411 40.579,25.303 41.916,25.303L49.617,25.303L49.617,33.059C49.617,34.368 50.509,35.283 51.785,35.283C53.1,35.283 54.02,34.374 54.02,33.059L54.02,25.303L61.777,25.303C63.086,25.303 64,24.411 64,23.135C64,21.819 63.092,20.899 61.777,20.899L54.02,20.899L54.02,13.171C54.02,11.828 53.1,10.919 51.785,10.919C50.509,10.919 49.617,11.834 49.617,13.171L49.617,20.899L41.916,20.899C40.545,20.899 39.659,21.819 39.659,23.135Z' })] }));
 }
 
-function SpeakerWave3Fill(props) {
-    return (jsxs("svg", { viewBox: '0 0 64 47', ...props, children: [jsx("path", { d: 'M25.707,44.076C27.257,44.076 28.39,42.947 28.39,41.387L28.39,4.841C28.39,3.307 27.257,2.025 25.656,2.025C24.542,2.025 23.767,2.512 22.558,3.666L12.393,13.203C12.251,13.345 12.047,13.436 11.818,13.436L4.99,13.436C1.759,13.436 0,15.195 0,18.654L0,27.525C0,30.953 1.759,32.737 4.99,32.737L11.818,32.737C12.047,32.737 12.251,32.808 12.393,32.95L22.558,42.583C23.666,43.615 24.593,44.076 25.707,44.076Z' }), jsx("path", { "data-wave": '1', d: 'M36.874,33.192C37.684,33.728 38.797,33.566 39.439,32.64C41.265,30.222 42.371,26.683 42.371,23.026C42.371,19.368 41.265,15.855 39.439,13.411C38.797,12.485 37.684,12.323 36.874,12.885C35.923,13.553 35.761,14.721 36.505,15.713C37.901,17.607 38.662,20.249 38.662,23.026C38.662,25.802 37.876,28.419 36.505,30.338C35.786,31.355 35.923,32.498 36.874,33.192Z' }), jsx("path", { "data-wave": '2', d: 'M45.738,39.394C46.624,39.981 47.712,39.799 48.354,38.868C51.402,34.69 53.208,28.904 53.208,23.026C53.208,17.148 51.427,11.31 48.354,7.183C47.712,6.252 46.624,6.07 45.738,6.657C44.858,7.249 44.701,8.362 45.399,9.354C48.023,13.032 49.499,17.952 49.499,23.026C49.499,28.099 47.972,32.994 45.399,36.697C44.726,37.689 44.858,38.802 45.738,39.394Z' }), jsx("path", { "data-wave": '3', d: 'M54.679,45.708C55.514,46.32 56.683,46.082 57.315,45.121C61.498,39.091 64,31.447 64,23.026C64,14.604 61.422,6.986 57.315,0.93C56.683,-0.056 55.514,-0.269 54.679,0.343C53.804,0.956 53.668,2.079 54.33,3.071C58.012,8.514 60.342,15.379 60.342,23.026C60.342,30.647 58.012,37.562 54.33,42.98C53.668,43.972 53.804,45.095 54.679,45.708Z' })] }));
-}
-
 function TenArrowTriangleheadClockwise(props) {
     return (jsxs("svg", { viewBox: "0 0 59 64", ...props, children: [jsx("path", { d: "M29.213,64C45.355,64 58.456,50.929 58.456,34.787C58.456,24.967 53.645,16.446 46.273,11.115C45.02,10.166 43.366,10.489 42.667,11.662C41.944,12.848 42.327,14.192 43.476,15.079C49.571,19.462 53.573,26.628 53.573,34.787C53.573,48.254 42.679,59.148 29.213,59.148C15.746,59.148 4.877,48.254 4.877,34.787C4.877,23.179 12.932,13.576 23.706,11.072L23.706,15.18C23.706,17.212 25.087,17.76 26.657,16.652L35.809,10.242C37.117,9.311 37.147,7.954 35.809,7.023L26.687,0.583C25.087,-0.555 23.706,-0.007 23.706,2.055L23.706,6.098C10.28,8.639 -0,20.497 -0,34.787C-0,50.929 13.101,64 29.213,64Z" }), jsx("path", { d: "M21.596,46.561C22.831,46.561 23.585,45.673 23.585,44.438L23.585,26.365C23.585,24.935 22.709,24.096 21.286,24.096C20.118,24.096 19.316,24.613 18.416,25.288L15.162,27.705C14.602,28.131 14.267,28.587 14.267,29.287C14.267,30.108 14.864,30.765 15.685,30.765C16.081,30.765 16.361,30.638 16.689,30.376L19.522,28.258L19.577,28.258L19.577,44.438C19.577,45.679 20.355,46.561 21.596,46.561Z" }), jsx("path", { d: "M36.048,46.731C30.406,46.731 28.426,41.001 28.426,35.298C28.426,29.686 30.375,23.919 36.048,23.919C41.685,23.919 43.659,29.649 43.659,35.298C43.659,40.97 41.679,46.731 36.048,46.731ZM36.048,43.513C38.45,43.513 39.626,39.978 39.626,35.298C39.626,30.673 38.444,27.174 36.048,27.174C33.647,27.174 32.458,30.661 32.458,35.298C32.458,39.984 33.647,43.513 36.048,43.513Z" })] }));
 }
@@ -1316,6 +1312,108 @@ function useFormStatus() {
     return useStore(store => store);
 }
 
+function usePointerMovement(props) {
+    const pointerTypeRef = useRef('pointer'), [isTracking, setIsTracking] = useState(false), [delta, setDelta] = useState({ x: 0, y: 0 }), startCoordsRef = useRef({ x: 0, y: 0 });
+    const styleID = useId();
+    const changeCursor = (cursor) => {
+        if (cursor === false) {
+            document.querySelector(`#${styleID}`)?.remove();
+            return;
+        }
+        const css = `*, *:active { cursor: ${cursor}; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; }`;
+        const style = document.createElement('style');
+        style.id = styleID;
+        style.innerHTML = css;
+        document.body.prepend(style);
+    };
+    const trackPointerMovement = (e) => {
+        changeCursor(props?.activeCursor || 'grabbing');
+        const { type } = e;
+        switch (type) {
+            case 'mousemove':
+            case 'mouseup':
+            case 'pointermove':
+            case 'pointerup':
+            case 'touchmove':
+            case 'touchend':
+                throw new Error('To initiate the tracking of pointer movement, you must use a `mousedown`, `pointerdown`, or `touchstart`.');
+            case 'mousedown':
+                pointerTypeRef.current = 'mouse';
+                break;
+            case 'pointerdown':
+                pointerTypeRef.current = 'pointer';
+                break;
+            case 'touchstart':
+                pointerTypeRef.current = 'touch';
+                break;
+        }
+        let x = 0, y = 0;
+        if ('touches' in e) {
+            const { touches } = e;
+            if (touches.length > 1)
+                return;
+            x = touches[0].clientX;
+            y = touches[0].clientY;
+        }
+        else {
+            x = e.clientX;
+            y = e.clientY;
+        }
+        startCoordsRef.current = { x, y };
+        setIsTracking(true);
+    };
+    const updateDelta = useCallback((e) => {
+        let clientX = 0, clientY = 0;
+        if ('touches' in e) {
+            const { touches } = e;
+            if (touches.length > 1)
+                return;
+            clientX = touches[0].clientX;
+            clientY = touches[0].clientY;
+        }
+        else {
+            clientX = e.clientX;
+            clientY = e.clientY;
+        }
+        const { x, y } = startCoordsRef.current, newDelta = { x: clientX - x, y: clientY - y };
+        setDelta(newDelta);
+        props?.onChange?.(newDelta);
+    }, []);
+    const stopTracking = useCallback(() => {
+        changeCursor(false);
+        setIsTracking(false);
+        props?.onEnd?.(delta);
+    }, [delta]);
+    useEffect(() => {
+        if (typeof window === 'undefined')
+            return;
+        const controller = new AbortController(), signal = controller.signal;
+        if (isTracking) {
+            switch (pointerTypeRef.current) {
+                case 'mouse':
+                    document.body.addEventListener('mousemove', updateDelta, { signal });
+                    document.body.addEventListener('mouseup', stopTracking, { signal });
+                    break;
+                case 'pointer':
+                    document.body.addEventListener('pointermove', updateDelta, { signal });
+                    document.body.addEventListener('pointerup', stopTracking, { signal });
+                    break;
+                case 'touch':
+                    document.body.addEventListener('touchmove', updateDelta, { signal });
+                    document.body.addEventListener('touchend', stopTracking, { signal });
+                    break;
+            }
+        }
+        else {
+            controller.abort();
+        }
+        return () => {
+            controller.abort();
+        };
+    }, [isTracking, updateDelta, stopTracking]);
+    return { delta, stopTracking, trackPointerMovement };
+}
+
 function Fieldset({ children, className, decorative = false, join, legend, legendProps, name, ...props }) {
     const uniqueID = useId();
     const fieldsetId = toLowerCase(legend || name, [' ', '_']) + '§' + uniqueID;
@@ -4236,37 +4334,30 @@ function Time({ children, dateObject, dateTime, day, hours, milliseconds, minute
 
 const MAX_PROGRESS = 100;
 function Video({ autoPlay, className, controls = true, poster, ref, srcSet, title, ...props }) {
-    const uniqueID = useId(), figureRef = useRef(null), videoPlayerRef = useRef(null), [isPlaying, setIsPlaying] = useState(autoPlay), isFullscreenRef = useRef(false), [isFullscreen, setIsFullscreen] = useState(false), [progress, setProgress] = useState(0), [showControls, setShowControls] = useState(true), pressedKeyListRef = useRef([]), [pressedKeyList, setPressedKeyList] = useState([]), [volume, setVolume] = useState(1);
-    const [seekIndicator, setSeekIndicator] = useState({ isInPlayedArea: false, position: 0 });
-    const sortedSrcSet = srcSet.sort((a, b) => a.width - b.width);
+    // * General/Core
+    const uniqueID = useId(), figureRef = useRef(null), videoPlayerRef = useRef(null), sortedSrcSet = srcSet.sort((a, b) => a.width - b.width);
     const primaryPoster = poster ? poster.find(({ primary }) => primary)?.src || poster[0].src : '';
+    const preventDefaultEvent = e => e.preventDefault();
+    // * Play/Pause Controls
+    const [isPlaying, setIsPlaying] = useState(autoPlay);
+    const togglePlay = useCallback(() => {
+        setIsPlaying(previous => {
+            if (!previous)
+                videoPlayerRef.current?.play();
+            if (previous)
+                videoPlayerRef.current?.pause();
+            return !previous;
+        });
+        handleMouseMoveControls();
+    }, []);
+    // * Fullscreen Controls
+    const isFullscreenRef = useRef(false), [isFullscreen, setIsFullscreen] = useState(false);
     const updateFullscreenState = useCallback(() => {
         if (Boolean(document.fullscreenElement) !== isFullscreenRef.current) {
             setIsFullscreen(Boolean(document.fullscreenElement));
             isFullscreenRef.current = Boolean(document.fullscreenElement);
         }
     }, []);
-    useEffect(() => {
-        if (typeof window === 'undefined')
-            return;
-        document.addEventListener('fullscreenchange', updateFullscreenState);
-        return () => {
-            document.removeEventListener('fullscreenchange', updateFullscreenState);
-        };
-    }, []);
-    const handleTimeUpdate = () => {
-        if (videoPlayerRef.current) {
-            const newProgress = (videoPlayerRef.current.currentTime / videoPlayerRef.current.duration) * 100;
-            setProgress(prev => (Math.abs(prev - newProgress) > 0.1 ? newProgress : prev));
-        }
-    };
-    const togglePlay = useCallback(() => setIsPlaying(previous => {
-        if (!previous)
-            videoPlayerRef.current?.play();
-        if (previous)
-            videoPlayerRef.current?.pause();
-        return !previous;
-    }), []);
     const toggleFullscreen = () => {
         if (document.fullscreenElement) {
             document.exitFullscreen();
@@ -4280,6 +4371,60 @@ function Video({ autoPlay, className, controls = true, poster, ref, srcSet, titl
         figureRef.current?.requestFullscreen();
     }, []);
     const enterPictureInPicture = () => videoPlayerRef.current?.requestPictureInPicture();
+    useEffect(() => {
+        if (typeof window === 'undefined')
+            return;
+        document.addEventListener('fullscreenchange', updateFullscreenState);
+        return () => {
+            document.removeEventListener('fullscreenchange', updateFullscreenState);
+        };
+    }, []);
+    // * Progress/Seeking Controls
+    const [progress, setProgress] = useState(0), trackProgressStartTimeRef = useRef(0), [seekIndicator, setSeekIndicator] = useState({ isInPlayedArea: false, position: 0 }), seekIndicatorMouseDownPositionRef = useRef(0), scrubberRef = useRef(null), [timeRemaining, setTimeRemaining] = useState(0);
+    const handleTimeUpdate = () => {
+        const videoPlayer = videoPlayerRef.current;
+        if (!videoPlayer)
+            return;
+        const { currentTime, duration } = videoPlayer;
+        const newProgress = (currentTime / duration) * 100;
+        setProgress(prev => (Math.abs(prev - newProgress) > 0.1 ? newProgress : prev));
+        setTimeRemaining(duration - currentTime);
+    };
+    const handleProgressSlider = ({ x }) => {
+        const videoPlayer = videoPlayerRef.current, scrubber = scrubberRef.current;
+        if (!videoPlayer || !scrubber)
+            return;
+        const { duration } = videoPlayer, { width } = scrubber.getBoundingClientRect();
+        videoPlayer.fastSeek(Math.max(Math.min(trackProgressStartTimeRef.current + x / (width / duration), duration - 1), 0));
+    };
+    const { trackPointerMovement: trackProgress } = usePointerMovement({ onChange: handleProgressSlider });
+    const initiateTrackProgress = (e) => {
+        const videoPlayer = videoPlayerRef.current;
+        if (!videoPlayer)
+            return;
+        trackProgress(e);
+        trackProgressStartTimeRef.current = videoPlayer.currentTime;
+    };
+    const handleSeekIndicatorMovement = e => {
+        const videoPlayer = videoPlayerRef.current;
+        if (!videoPlayer)
+            return;
+        const { currentTime, duration } = videoPlayer;
+        const { clientX, currentTarget } = e, { width, x } = currentTarget.getBoundingClientRect();
+        const position = clientX - x;
+        const isInPlayedArea = position <= width / (duration / currentTime);
+        setSeekIndicator({ isInPlayedArea, position });
+    };
+    const initializeSeeking = () => (seekIndicatorMouseDownPositionRef.current = seekIndicator.position);
+    const handleSeekRelease = e => {
+        const videoPlayer = videoPlayerRef.current;
+        if (!videoPlayer)
+            return;
+        const { duration } = videoPlayer, { currentTarget } = e, { width } = currentTarget.getBoundingClientRect();
+        if (seekIndicatorMouseDownPositionRef.current === seekIndicator.position)
+            videoPlayer.fastSeek(Math.min(duration / (width / seekIndicatorMouseDownPositionRef.current), duration - 1));
+    };
+    // * Skip Controls
     const [skipDuration, setSkipDuration] = useState(10);
     const getSkipAmount = () => {
         const modifierKeyList = pressedKeyListRef.current;
@@ -4301,19 +4446,71 @@ function Video({ autoPlay, className, controls = true, poster, ref, srcSet, titl
         return skipAmount;
     };
     const skipBack = useCallback(() => {
-        if (!videoPlayerRef.current)
+        const videoPlayer = videoPlayerRef.current;
+        if (!videoPlayer)
             return;
-        const { currentTime } = videoPlayerRef.current;
+        const { currentTime } = videoPlayer;
         const skipAmount = getSkipAmount();
-        videoPlayerRef.current.fastSeek(Math.max(currentTime - skipAmount, 0));
+        videoPlayer.fastSeek(Math.max(currentTime - skipAmount, 0));
     }, []);
     const skipForward = useCallback(() => {
-        if (!videoPlayerRef.current)
+        const videoPlayer = videoPlayerRef.current;
+        if (!videoPlayer)
             return;
-        const { currentTime, duration } = videoPlayerRef.current;
+        const { currentTime, duration } = videoPlayer;
         const skipAmount = getSkipAmount();
-        videoPlayerRef.current.fastSeek(Math.min(currentTime + skipAmount, duration - 1));
+        videoPlayer.fastSeek(Math.min(currentTime + skipAmount, duration - 1));
     }, []);
+    // * Volume Controls
+    const [volume, setVolume] = useState(1), trackVolumeStartRef = useRef(0);
+    const handleVolumeChange = e => {
+        const { currentTarget } = e, { volume } = currentTarget;
+        setVolume(volume);
+    };
+    const handleVolumeSlider = ({ y }) => {
+        const videoPlayer = videoPlayerRef.current;
+        if (!videoPlayer)
+            return;
+        videoPlayer.volume = Math.max(Math.min(trackVolumeStartRef.current + (y / 96) * -1, 1), 0);
+    };
+    const { trackPointerMovement: trackVolume } = usePointerMovement({ onChange: handleVolumeSlider });
+    const initiateTrackVolume = (e) => {
+        const videoPlayer = videoPlayerRef.current;
+        if (!videoPlayer)
+            return;
+        trackVolume(e);
+        trackVolumeStartRef.current = videoPlayer.volume;
+    };
+    const increaseVolume = () => {
+        const videoPlayer = videoPlayerRef.current;
+        if (!videoPlayer)
+            return;
+        videoPlayer.volume += 0.1;
+    };
+    const decreaseVolume = () => {
+        const videoPlayer = videoPlayerRef.current;
+        if (!videoPlayer)
+            return;
+        videoPlayer.volume -= 0.1;
+    };
+    // * Controls Visibility
+    const [showControls, setShowControls] = useState(true), mouseMoveTimeoutRef = useRef(undefined);
+    const displayControls = () => {
+        if (!showControls)
+            setShowControls(true);
+    };
+    const hideControls = () => {
+        if (!videoPlayerRef.current?.paused)
+            setShowControls(false);
+    };
+    const handleMouseMoveControls = () => {
+        clearTimeout(mouseMoveTimeoutRef.current);
+        displayControls();
+        mouseMoveTimeoutRef.current = setTimeout(() => hideControls(), 1500);
+    };
+    const clearMouseMoveControlsTimeout = () => clearTimeout(mouseMoveTimeoutRef.current);
+    // * Keyboard Controls
+    const pressedKeyListRef = useRef([]), [pressedKeyList, setPressedKeyList] = useState([]);
     const updateModifierKeys = useCallback(({ metaKey, altKey, shiftKey, ctrlKey, }) => {
         if ((metaKey && !pressedKeyListRef.current.includes('meta')) ||
             (altKey && !pressedKeyListRef.current.includes('alt')) ||
@@ -4337,7 +4534,6 @@ function Video({ autoPlay, className, controls = true, poster, ref, srcSet, titl
             getSkipAmount();
         }
     }, []);
-    const preventContextMenu = e => e.preventDefault();
     const handleKeydown = useCallback((e) => {
         const { key, metaKey, altKey, shiftKey, ctrlKey } = e;
         updateModifierKeys({ metaKey, altKey, shiftKey, ctrlKey });
@@ -4356,10 +4552,10 @@ function Video({ autoPlay, className, controls = true, poster, ref, srcSet, titl
                 skipBack();
                 break;
             case 'ArrowUp':
-                // Volume up
+                increaseVolume();
                 break;
             case 'ArrowDown':
-                // Volume down
+                decreaseVolume();
                 break;
             case 'f':
                 requestFullscreen();
@@ -4373,85 +4569,54 @@ function Video({ autoPlay, className, controls = true, poster, ref, srcSet, titl
     useEffect(() => {
         if (typeof window === 'undefined')
             return;
-        document.addEventListener('keydown', handleKeydown);
-        document.addEventListener('keyup', handleKeyup);
+        const controller = new AbortController(), signal = controller.signal;
+        document.addEventListener('keydown', handleKeydown, { signal });
+        document.addEventListener('keyup', handleKeyup, { signal });
         return () => {
-            document.removeEventListener('keydown', handleKeydown);
-            document.removeEventListener('keyup', handleKeyup);
+            controller.abort();
         };
     }, [handleKeydown, handleKeyup]);
+    // * Remote Playback Controls
     const handleRemotePlayback = () => videoPlayerRef.current?.remote.prompt();
-    const handleSeekIndicatorMovement = e => {
-        if (!videoPlayerRef.current)
-            return;
-        const { currentTime, duration } = videoPlayerRef.current;
-        const { clientX, currentTarget } = e, { width, x } = currentTarget.getBoundingClientRect();
-        const position = clientX - x;
-        const isInPlayedArea = position <= width / (duration / currentTime);
-        setSeekIndicator({ isInPlayedArea, position });
-    };
-    const seekIndicatorMouseDownPositionRef = useRef(0);
-    const initializeSeeking = () => (seekIndicatorMouseDownPositionRef.current = seekIndicator.position);
-    const handleSeekRelease = e => {
-        if (!videoPlayerRef.current)
-            return;
-        const { duration } = videoPlayerRef.current, { currentTarget } = e, { width } = currentTarget.getBoundingClientRect();
-        if (seekIndicatorMouseDownPositionRef.current === seekIndicator.position)
-            videoPlayerRef.current.fastSeek(Math.min(duration / (width / seekIndicatorMouseDownPositionRef.current), duration - 1));
-    };
-    const mouseMoveTimeoutRef = useRef(undefined);
-    const displayControls = () => {
-        if (!showControls)
-            setShowControls(true);
-    };
-    const hideControls = () => {
-        if (!videoPlayerRef.current?.paused)
-            setShowControls(false);
-    };
-    const handleMouseMoveControls = () => {
-        clearTimeout(mouseMoveTimeoutRef.current);
-        displayControls();
-        mouseMoveTimeoutRef.current = setTimeout(() => hideControls(), 1500);
-    };
-    const clearMouseMoveControlsTimeout = () => clearTimeout(mouseMoveTimeoutRef.current);
+    // * Progressive Enhancement
     const progressiveEnhancementSourceLengthRef = useRef(1);
     const [progressiveEnhancementList, setProgressiveEnhancementList] = useState(sortedSrcSet.filter((_, index) => index < progressiveEnhancementSourceLengthRef.current));
     const handleProEnhance = e => {
         const { currentTarget } = e, { currentSrc, currentTime } = currentTarget;
-        console.log('current:', currentSrc);
         const proEnhanceSrcLength = progressiveEnhancementSourceLengthRef.current + 1, updatedProEnhanceList = sortedSrcSet.filter((_, index) => index < proEnhanceSrcLength);
         console.log(updatedProEnhanceList);
         setProgressiveEnhancementList(updatedProEnhanceList);
         progressiveEnhancementSourceLengthRef.current = proEnhanceSrcLength;
-        const srcToCompare = typeof updatedProEnhanceList[-1].src === 'string'
-            ? updatedProEnhanceList[-1].src
-            : updatedProEnhanceList[-1].srcGroup;
+        const srcToCompare = typeof updatedProEnhanceList.at(-1)?.src === 'string'
+            ? updatedProEnhanceList.at(-1)?.src
+            : updatedProEnhanceList.at(-1)?.srcGroup;
         if (!srcToCompare)
             return;
         if ((Array.isArray(srcToCompare) && srcToCompare.every(({ src }) => src !== currentSrc)) ||
             (!Array.isArray(srcToCompare) && srcToCompare !== currentSrc)) {
-            const srcType = currentSrc.split('.')[-1];
+            const srcType = currentSrc.split('.').at(-1);
             const src = Array.isArray(srcToCompare)
-                ? srcToCompare.find(({ src }) => src.split('.')[-1] === srcType)?.src || srcToCompare[0].src
+                ? srcToCompare.find(({ src }) => src.split('.').at(-1) === srcType)?.src || srcToCompare[0].src
                 : srcToCompare;
             if (!src)
                 return;
-            console.log('updated:', src);
             currentTarget.src = src;
             currentTarget.currentTime = currentTime || 0;
             currentTarget.load();
         }
     };
+    // * Download Controls
     const captureCurrentFrame = () => {
-        if (!videoPlayerRef.current)
+        const videoPlayer = videoPlayerRef.current;
+        if (!videoPlayer)
             return;
-        const { videoHeight, videoWidth } = videoPlayerRef.current;
+        const { videoHeight, videoWidth } = videoPlayer;
         const canvas = document.createElement('canvas'), canvasContext = canvas.getContext('2d');
         if (!canvasContext)
             return;
         canvas.width = videoWidth;
         canvas.height = videoHeight;
-        canvasContext.drawImage(videoPlayerRef.current, 0, 0, canvas.width, canvas.height);
+        canvasContext.drawImage(videoPlayer, 0, 0, canvas.width, canvas.height);
         canvas.toBlob(blob => {
             if (!blob)
                 return;
@@ -4464,30 +4629,27 @@ function Video({ autoPlay, className, controls = true, poster, ref, srcSet, titl
             URL.revokeObjectURL(url);
         }, 'image/jpeg', 0.9);
     };
-    const increaseVolume = () => {
-        if (!videoPlayerRef.current)
-            return;
-        videoPlayerRef.current.volume += 0.1;
-        setVolume(videoPlayerRef.current.volume);
-    };
-    const decreaseVolume = () => {
-        if (!videoPlayerRef.current)
-            return;
-        videoPlayerRef.current.volume -= 0.1;
-        setVolume(videoPlayerRef.current.volume);
-    };
-    return (jsxs("figure", { ...(showControls ? { 'data-controls': true } : {}), ...(isFullscreen ? { 'data-fullscreen': true } : {}), ...(isPlaying ? { 'data-playing': true } : {}), ...Object.fromEntries(pressedKeyList.map(key => [`data-${key}`, true])), className: twMerge('group/video isolate aspect-video w-full overflow-clip', className), onMouseEnter: displayControls, onMouseLeave: hideControls, ref: figureRef, children: [jsx("video", { ...props, className: 'size-full object-cover', onLoad: handleProEnhance, onLoadedMetadata: handleProEnhance, onTimeUpdate: handleTimeUpdate, poster: primaryPoster, ref: videoPlayerRef || ref, title: title, children: progressiveEnhancementList.map(({ width, ...source }) => {
+    return (jsxs("figure", { ...(showControls ? { 'data-controls': true } : {}), ...(isFullscreen ? { 'data-fullscreen': true } : {}), ...(isPlaying ? { 'data-playing': true } : {}), ...Object.fromEntries(pressedKeyList.map(key => [`data-${key}`, true])), className: twMerge('group/video isolate aspect-video w-full overflow-clip', className), onMouseEnter: displayControls, onMouseLeave: hideControls, ref: figureRef, children: [jsx("video", { ...props, className: 'size-full object-cover', onLoad: handleProEnhance, onTimeUpdate: handleTimeUpdate, onVolumeChange: handleVolumeChange, poster: primaryPoster, ref: videoPlayerRef || ref, title: title, children: progressiveEnhancementList.map(({ width, ...source }) => {
                     if (source.srcGroup) {
                         const { srcGroup } = source;
                         return srcGroup.map(({ src, type }) => (jsx("source", { src: src, type: type }, `${title}${type}${width}${uniqueID}`)));
                     }
                     const { src, type } = source;
                     return jsx("source", { src: src, type: type }, `${title}${type}${width}${uniqueID}`);
-                }) }), controls && (jsxs("div", { className: 'absolute inset-0 isolate text-neutral-50 opacity-0 transition-opacity duration-1000 ease-exponential group-data-controls/video:opacity-100', children: [jsxs("div", { className: 'grid-flow-cols absolute top-1/2 left-1/2 grid -translate-x-1/2 -translate-y-1/2 place-items-center gap-2', children: [jsxs("button", { className: 'col-start-1 col-end-2 row-start-0 row-end-1 grid size-16 rounded-full backdrop-blur-[1px] backdrop-brightness-101 transition-[scale,-webkit-backdrop-filter,backdrop-filter] duration-300 ease-exponential active:scale-95 active:backdrop-blur-[2px] active:backdrop-brightness-125 pointer-fine:hover:scale-105 pointer-fine:hover:backdrop-blur-xs pointer-fine:hover:backdrop-brightness-110 pointer-fine:active:scale-95 pointer-fine:active:backdrop-blur-[2px] pointer-fine:active:backdrop-brightness-125', onClick: togglePlay, onContextMenu: preventContextMenu, title: isPlaying ? 'Pause' : 'Play', children: [jsx(PauseFill, { className: 'col-start-0 col-end-1 row-start-0 row-end-1 size-full scale-0 opacity-0 drop-shadow-[0_.25rem_2rem] drop-shadow-neutral-950/75 transition-[scale,opacity] duration-500 ease-exponential group-data-playing/video:scale-60 group-data-playing/video:opacity-100' }), jsx(PlayFill, { className: '-right-0.5 col-start-0 col-end-1 row-start-0 row-end-1 size-full scale-60 drop-shadow-[0_.25rem_2rem] drop-shadow-neutral-950/75 transition-[scale,opacity] duration-500 ease-exponential group-data-playing/video:scale-0 group-data-playing/video:opacity-0' })] }), jsxs("button", { className: 'col-start-0 col-end-1 row-start-0 row-end-1 grid size-12 rounded-full backdrop-blur-[1px] backdrop-brightness-101 transition-[scale,-webkit-backdrop-filter,backdrop-filter] duration-300 ease-exponential active:scale-95 active:backdrop-blur-[2px] active:backdrop-brightness-125 pointer-fine:hover:scale-105 pointer-fine:hover:backdrop-blur-xs pointer-fine:hover:backdrop-brightness-110 pointer-fine:active:scale-95 pointer-fine:active:backdrop-blur-[2px] pointer-fine:active:backdrop-brightness-125', onClick: skipBack, onContextMenu: preventContextMenu, title: `Skip Back ${skipDuration} Seconds`, children: [jsx(FiveArrowTriangleheadCounterclockwise, { className: 'col-start-0 col-end-1 row-start-0 row-end-1 size-full scale-60 opacity-0 drop-shadow-[0_.25rem_2rem] drop-shadow-neutral-950/75 group-data-alt/video:group-data-meta/video:opacity-100 group-data-alt/video:group-data-meta/video:group-data-ctrl/video:opacity-0 group-data-alt/video:group-data-meta/video:group-data-shift/video:opacity-0' }), jsx(TenArrowTriangleheadCounterclockwise, { className: 'col-start-0 col-end-1 row-start-0 row-end-1 size-full scale-60 drop-shadow-[0_.25rem_2rem] drop-shadow-neutral-950/75 group-data-alt/video:opacity-0 group-data-alt/video:group-data-ctrl/video:opacity-100 group-data-alt/video:group-data-shift/video:group-data-meta/video:group-data-ctrl/video:opacity-0' }), jsx(FifteenArrowTriangleheadCounterclockwise, { className: 'col-start-0 col-end-1 row-start-0 row-end-1 size-full scale-60 opacity-0 drop-shadow-[0_.25rem_2rem] drop-shadow-neutral-950/75 group-data-alt/video:opacity-100 group-data-ctrl/video:opacity-0 group-data-meta/video:opacity-0 group-data-shift/video:opacity-0' }), jsx(ThirtyArrowTriangleheadCounterclockwise, { className: 'col-start-0 col-end-1 row-start-0 row-end-1 size-full scale-60 opacity-0 drop-shadow-[0_.25rem_2rem] drop-shadow-neutral-950/75 group-data-alt/video:group-data-shift/video:opacity-100 group-data-alt/video:group-data-ctrl/video:group-data-shift/video:opacity-0 group-data-alt/video:group-data-meta/video:group-data-shift/video:opacity-0' }), jsx(SixtyArrowTriangleheadCounterclockwise, { className: 'col-start-0 col-end-1 row-start-0 row-end-1 size-full scale-60 opacity-0 drop-shadow-[0_.25rem_2rem] drop-shadow-neutral-950/75 group-data-alt/video:group-data-shift/video:group-data-meta/video:opacity-100 group-data-alt/video:group-data-shift/video:group-data-meta/video:group-data-ctrl/video:opacity-0' }), jsx(NinetyArrowTriangleheadCounterclockwise, { className: 'col-start-0 col-end-1 row-start-0 row-end-1 size-full scale-60 opacity-0 drop-shadow-[0_.25rem_2rem] drop-shadow-neutral-950/75 group-data-alt/video:group-data-shift/video:group-data-meta/video:group-data-ctrl/video:opacity-100' })] }), jsxs("button", { className: 'col-start-2 col-end-3 row-start-0 row-end-1 grid size-12 rounded-full backdrop-blur-[1px] backdrop-brightness-101 transition-[scale,-webkit-backdrop-filter,backdrop-filter] duration-300 ease-exponential active:scale-95 active:backdrop-blur-[2px] active:backdrop-brightness-125 pointer-fine:hover:scale-105 pointer-fine:hover:backdrop-blur-xs pointer-fine:hover:backdrop-brightness-110 pointer-fine:active:scale-95 pointer-fine:active:backdrop-blur-[2px] pointer-fine:active:backdrop-brightness-125', onClick: skipForward, onContextMenu: preventContextMenu, title: `Skip Forward ${skipDuration} Seconds`, children: [jsx(FiveArrowTriangleheadClockwise, { className: 'col-start-0 col-end-1 row-start-0 row-end-1 size-full scale-60 opacity-0 drop-shadow-[0_.25rem_2rem] drop-shadow-neutral-950/75 group-data-alt/video:group-data-meta/video:opacity-100 group-data-alt/video:group-data-meta/video:group-data-ctrl/video:opacity-0 group-data-alt/video:group-data-meta/video:group-data-shift/video:opacity-0' }), jsx(TenArrowTriangleheadClockwise, { className: 'col-start-0 col-end-1 row-start-0 row-end-1 size-full scale-60 drop-shadow-[0_.25rem_2rem] drop-shadow-neutral-950/75 group-data-alt/video:opacity-0 group-data-alt/video:group-data-ctrl/video:opacity-100 group-data-alt/video:group-data-shift/video:group-data-meta/video:group-data-ctrl/video:opacity-0' }), jsx(FifteenArrowTriangleheadClockwise, { className: 'col-start-0 col-end-1 row-start-0 row-end-1 size-full scale-60 opacity-0 drop-shadow-[0_.25rem_2rem] drop-shadow-neutral-950/75 group-data-alt/video:opacity-100 group-data-ctrl/video:opacity-0 group-data-meta/video:opacity-0 group-data-shift/video:opacity-0' }), jsx(ThirtyArrowTriangleheadClockwise, { className: 'col-start-0 col-end-1 row-start-0 row-end-1 size-full scale-60 opacity-0 drop-shadow-[0_.25rem_2rem] drop-shadow-neutral-950/75 group-data-alt/video:group-data-shift/video:opacity-100 group-data-alt/video:group-data-ctrl/video:group-data-shift/video:opacity-0 group-data-alt/video:group-data-meta/video:group-data-shift/video:opacity-0' }), jsx(SixtyArrowTriangleheadClockwise, { className: 'col-start-0 col-end-1 row-start-0 row-end-1 size-full scale-60 opacity-0 drop-shadow-[0_.25rem_2rem] drop-shadow-neutral-950/75 group-data-alt/video:group-data-shift/video:group-data-meta/video:opacity-100 group-data-alt/video:group-data-shift/video:group-data-meta/video:group-data-ctrl/video:opacity-0' }), jsx(NinetyArrowTriangleheadClockwise, { className: 'col-start-0 col-end-1 row-start-0 row-end-1 size-full scale-60 opacity-0 drop-shadow-[0_.25rem_2rem] drop-shadow-neutral-950/75 group-data-alt/video:group-data-shift/video:group-data-meta/video:group-data-ctrl/video:opacity-100' })] })] }), jsxs("div", { className: 'absolute inset-x-2 bottom-2 flex items-center gap-2 rounded-xl bg-neutral-900/50 px-2 py-1 shadow-2xl backdrop-blur-xs backdrop-brightness-110', children: [jsxs("div", { className: 'group/scrubber h-2 w-max flex-grow cursor-grab overflow-clip rounded-md bg-neutral-50/50 backdrop-blur-xs backdrop-brightness-110 transition-[height] duration-300 ease-exponential active:h-4 pointer-fine:hover:h-4 pointer-fine:active:h-4', onMouseDown: initializeSeeking, onMouseMove: handleSeekIndicatorMovement, onMouseUp: handleSeekRelease, children: [jsx("div", { "aria-hidden": 'true', className: 'absolute inset-0 grid transition-cols duration-100 ease-linear', style: { gridTemplateColumns: `${progress / MAX_PROGRESS}fr` }, children: jsx("div", { className: 'overflow-hidden', children: jsxs("div", { className: 'h-full bg-neutral-50/70 text-[1px] text-transparent backdrop-blur-xs backdrop-brightness-125', children: [progress, "/", MAX_PROGRESS] }) }) }), jsx("div", { ...(seekIndicator.isInPlayedArea ? { 'data-in-played-area': true } : {}), "aria-hidden": 'true', className: 'absolute inset-y-0 w-1 cursor-grab bg-neutral-50 opacity-0 transition-opacity duration-300 ease-exponential group-hover/scrubber:opacity-100 data-in-played-area:bg-neutral-500 pointer-coarse:hidden', style: { transform: `translateX(${seekIndicator.position}px)` }, children: "\u00A0" }), jsx("progress", { className: 'sr-only', max: MAX_PROGRESS, value: progress })] }), jsxs(DropDown, { children: [jsx(DropDownButton, { arrow: false, className: 'flex size-6 items-center justify-center rounded-xs transition-transform duration-300 ease-exponential active:scale-95 pointer-fine:hover:scale-105 pointer-fine:active:scale-95', title: 'Volume', children: jsx(SpeakerWave3Fill, { className: 'size-full scale-80 drop-shadow-[0_.125rem_1rem] drop-shadow-neutral-950/75' }) }), jsxs(DropDownItems, { anchor: {
+                }) }), controls && (jsxs("div", { className: 'absolute inset-0 isolate text-neutral-50 opacity-0 transition-opacity duration-1000 ease-exponential select-none group-data-controls/video:opacity-100', children: [jsxs("div", { className: 'grid-flow-cols absolute top-1/2 left-1/2 grid -translate-x-1/2 -translate-y-1/2 place-items-center gap-2', children: [jsxs("button", { className: 'col-start-1 col-end-2 row-start-0 row-end-1 grid size-16 rounded-full backdrop-blur-[1px] backdrop-brightness-101 transition-[scale,-webkit-backdrop-filter,backdrop-filter] duration-300 ease-exponential active:scale-95 active:backdrop-blur-[2px] active:backdrop-brightness-125 pointer-fine:hover:scale-105 pointer-fine:hover:backdrop-blur-xs pointer-fine:hover:backdrop-brightness-110 pointer-fine:active:scale-95 pointer-fine:active:backdrop-blur-[2px] pointer-fine:active:backdrop-brightness-125', onClick: togglePlay, onContextMenu: preventDefaultEvent, title: isPlaying ? 'Pause' : 'Play', children: [jsx(PauseFill, { className: 'col-start-0 col-end-1 row-start-0 row-end-1 size-full scale-0 opacity-0 drop-shadow-[0_.25rem_2rem] drop-shadow-neutral-950/75 transition-[scale,opacity] duration-500 ease-exponential group-data-playing/video:scale-60 group-data-playing/video:opacity-100' }), jsx(PlayFill, { className: '-right-0.5 col-start-0 col-end-1 row-start-0 row-end-1 size-full scale-60 drop-shadow-[0_.25rem_2rem] drop-shadow-neutral-950/75 transition-[scale,opacity] duration-500 ease-exponential group-data-playing/video:scale-0 group-data-playing/video:opacity-0' })] }), jsxs("button", { className: 'col-start-0 col-end-1 row-start-0 row-end-1 grid size-12 rounded-full backdrop-blur-[1px] backdrop-brightness-101 transition-[scale,-webkit-backdrop-filter,backdrop-filter] duration-300 ease-exponential active:scale-95 active:backdrop-blur-[2px] active:backdrop-brightness-125 pointer-fine:hover:scale-105 pointer-fine:hover:backdrop-blur-xs pointer-fine:hover:backdrop-brightness-110 pointer-fine:active:scale-95 pointer-fine:active:backdrop-blur-[2px] pointer-fine:active:backdrop-brightness-125', onClick: skipBack, onContextMenu: preventDefaultEvent, title: `Skip Back ${skipDuration} Seconds`, children: [jsx(FiveArrowTriangleheadCounterclockwise, { className: 'col-start-0 col-end-1 row-start-0 row-end-1 size-full scale-60 opacity-0 drop-shadow-[0_.25rem_2rem] drop-shadow-neutral-950/75 group-data-alt/video:group-data-meta/video:opacity-100 group-data-alt/video:group-data-meta/video:group-data-ctrl/video:opacity-0 group-data-alt/video:group-data-meta/video:group-data-shift/video:opacity-0' }), jsx(TenArrowTriangleheadCounterclockwise, { className: 'col-start-0 col-end-1 row-start-0 row-end-1 size-full scale-60 drop-shadow-[0_.25rem_2rem] drop-shadow-neutral-950/75 group-data-alt/video:opacity-0 group-data-alt/video:group-data-ctrl/video:opacity-100 group-data-alt/video:group-data-shift/video:group-data-meta/video:group-data-ctrl/video:opacity-0' }), jsx(FifteenArrowTriangleheadCounterclockwise, { className: 'col-start-0 col-end-1 row-start-0 row-end-1 size-full scale-60 opacity-0 drop-shadow-[0_.25rem_2rem] drop-shadow-neutral-950/75 group-data-alt/video:opacity-100 group-data-ctrl/video:opacity-0 group-data-meta/video:opacity-0 group-data-shift/video:opacity-0' }), jsx(ThirtyArrowTriangleheadCounterclockwise, { className: 'col-start-0 col-end-1 row-start-0 row-end-1 size-full scale-60 opacity-0 drop-shadow-[0_.25rem_2rem] drop-shadow-neutral-950/75 group-data-alt/video:group-data-shift/video:opacity-100 group-data-alt/video:group-data-ctrl/video:group-data-shift/video:opacity-0 group-data-alt/video:group-data-meta/video:group-data-shift/video:opacity-0' }), jsx(SixtyArrowTriangleheadCounterclockwise, { className: 'col-start-0 col-end-1 row-start-0 row-end-1 size-full scale-60 opacity-0 drop-shadow-[0_.25rem_2rem] drop-shadow-neutral-950/75 group-data-alt/video:group-data-shift/video:group-data-meta/video:opacity-100 group-data-alt/video:group-data-shift/video:group-data-meta/video:group-data-ctrl/video:opacity-0' }), jsx(NinetyArrowTriangleheadCounterclockwise, { className: 'col-start-0 col-end-1 row-start-0 row-end-1 size-full scale-60 opacity-0 drop-shadow-[0_.25rem_2rem] drop-shadow-neutral-950/75 group-data-alt/video:group-data-shift/video:group-data-meta/video:group-data-ctrl/video:opacity-100' })] }), jsxs("button", { className: 'col-start-2 col-end-3 row-start-0 row-end-1 grid size-12 rounded-full backdrop-blur-[1px] backdrop-brightness-101 transition-[scale,-webkit-backdrop-filter,backdrop-filter] duration-300 ease-exponential active:scale-95 active:backdrop-blur-[2px] active:backdrop-brightness-125 pointer-fine:hover:scale-105 pointer-fine:hover:backdrop-blur-xs pointer-fine:hover:backdrop-brightness-110 pointer-fine:active:scale-95 pointer-fine:active:backdrop-blur-[2px] pointer-fine:active:backdrop-brightness-125', onClick: skipForward, onContextMenu: preventDefaultEvent, title: `Skip Forward ${skipDuration} Seconds`, children: [jsx(FiveArrowTriangleheadClockwise, { className: 'col-start-0 col-end-1 row-start-0 row-end-1 size-full scale-60 opacity-0 drop-shadow-[0_.25rem_2rem] drop-shadow-neutral-950/75 group-data-alt/video:group-data-meta/video:opacity-100 group-data-alt/video:group-data-meta/video:group-data-ctrl/video:opacity-0 group-data-alt/video:group-data-meta/video:group-data-shift/video:opacity-0' }), jsx(TenArrowTriangleheadClockwise, { className: 'col-start-0 col-end-1 row-start-0 row-end-1 size-full scale-60 drop-shadow-[0_.25rem_2rem] drop-shadow-neutral-950/75 group-data-alt/video:opacity-0 group-data-alt/video:group-data-ctrl/video:opacity-100 group-data-alt/video:group-data-shift/video:group-data-meta/video:group-data-ctrl/video:opacity-0' }), jsx(FifteenArrowTriangleheadClockwise, { className: 'col-start-0 col-end-1 row-start-0 row-end-1 size-full scale-60 opacity-0 drop-shadow-[0_.25rem_2rem] drop-shadow-neutral-950/75 group-data-alt/video:opacity-100 group-data-ctrl/video:opacity-0 group-data-meta/video:opacity-0 group-data-shift/video:opacity-0' }), jsx(ThirtyArrowTriangleheadClockwise, { className: 'col-start-0 col-end-1 row-start-0 row-end-1 size-full scale-60 opacity-0 drop-shadow-[0_.25rem_2rem] drop-shadow-neutral-950/75 group-data-alt/video:group-data-shift/video:opacity-100 group-data-alt/video:group-data-ctrl/video:group-data-shift/video:opacity-0 group-data-alt/video:group-data-meta/video:group-data-shift/video:opacity-0' }), jsx(SixtyArrowTriangleheadClockwise, { className: 'col-start-0 col-end-1 row-start-0 row-end-1 size-full scale-60 opacity-0 drop-shadow-[0_.25rem_2rem] drop-shadow-neutral-950/75 group-data-alt/video:group-data-shift/video:group-data-meta/video:opacity-100 group-data-alt/video:group-data-shift/video:group-data-meta/video:group-data-ctrl/video:opacity-0' }), jsx(NinetyArrowTriangleheadClockwise, { className: 'col-start-0 col-end-1 row-start-0 row-end-1 size-full scale-60 opacity-0 drop-shadow-[0_.25rem_2rem] drop-shadow-neutral-950/75 group-data-alt/video:group-data-shift/video:group-data-meta/video:group-data-ctrl/video:opacity-100' })] })] }), jsxs("div", { className: 'absolute inset-x-2 bottom-2 flex items-center gap-2 rounded-xl bg-neutral-900/50 px-2 py-1 shadow-2xl backdrop-blur-xs backdrop-brightness-110', children: [jsxs("div", { className: 'group/scrubber h-2 w-max flex-grow cursor-grab overflow-clip rounded-md bg-neutral-50/50 backdrop-blur-xs backdrop-brightness-110 transition-[height] duration-300 ease-exponential active:h-4 pointer-fine:hover:h-4 pointer-fine:active:h-4', onMouseDown: e => {
+                                    initiateTrackProgress(e);
+                                    initializeSeeking();
+                                }, onMouseMove: handleSeekIndicatorMovement, onMouseUp: handleSeekRelease, onTouchStart: initiateTrackProgress, ref: scrubberRef, children: [jsx("div", { "aria-hidden": 'true', className: 'absolute inset-0 grid transition-cols duration-100 ease-linear', style: { gridTemplateColumns: `${progress / MAX_PROGRESS}fr` }, children: jsx("div", { className: 'overflow-hidden', children: jsxs("div", { className: 'h-full bg-neutral-50/70 text-[1px] text-transparent backdrop-blur-xs backdrop-brightness-125', children: [progress, "/", MAX_PROGRESS] }) }) }), jsx("div", { ...(seekIndicator.isInPlayedArea ? { 'data-in-played-area': true } : {}), "aria-hidden": 'true', className: 'absolute inset-y-0 w-1 cursor-grab bg-neutral-50 opacity-0 transition-opacity duration-300 ease-exponential group-hover/scrubber:opacity-100 data-in-played-area:bg-neutral-500 pointer-coarse:hidden', style: { transform: `translateX(${seekIndicator.position}px)` }, children: "\u00A0" }), jsx("progress", { className: 'sr-only', max: MAX_PROGRESS, value: progress })] }), jsx("span", { className: 'block text-xs', children: timeRemaining / 60 >= 1
+                                    ? `${Math.round(timeRemaining / 60)}:${Math.round((timeRemaining / 60 - Math.round(timeRemaining / 60)) * 60)
+                                        .toString()
+                                        .padStart(2, '0')}`
+                                    : Math.round(timeRemaining) === 60
+                                        ? `1:00`
+                                        : `0:${Math.round(timeRemaining).toString().padStart(2, '0')}` }), jsxs(DropDown, { children: [jsx(DropDownButton, { arrow: false, className: 'group/button flex size-6 items-center justify-center rounded-xs transition-transform duration-300 ease-exponential active:scale-95 pointer-fine:hover:scale-105 pointer-fine:active:scale-95', title: 'Volume', children: jsxs("svg", { viewBox: '0 0 64 47', className: 'size-full scale-80 drop-shadow-[0_.125rem_1rem] drop-shadow-neutral-950/75 transition-transform duration-300 ease-exponential', style: { translate: `${volume > 0.66 ? '0' : volume > 0.33 ? '2px' : volume > 0 ? '4px' : '6px'} 0` }, children: [jsx("path", { d: 'M25.707,44.076C27.257,44.076 28.39,42.947 28.39,41.387L28.39,4.841C28.39,3.307 27.257,2.025 25.656,2.025C24.542,2.025 23.767,2.512 22.558,3.666L12.393,13.203C12.251,13.345 12.047,13.436 11.818,13.436L4.99,13.436C1.759,13.436 0,15.195 0,18.654L0,27.525C0,30.953 1.759,32.737 4.99,32.737L11.818,32.737C12.047,32.737 12.251,32.808 12.393,32.95L22.558,42.583C23.666,43.615 24.593,44.076 25.707,44.076Z' }), jsx("path", { className: 'transition-opacity duration-300 ease-exponential', d: 'M36.874,33.192C37.684,33.728 38.797,33.566 39.439,32.64C41.265,30.222 42.371,26.683 42.371,23.026C42.371,19.368 41.265,15.855 39.439,13.411C38.797,12.485 37.684,12.323 36.874,12.885C35.923,13.553 35.761,14.721 36.505,15.713C37.901,17.607 38.662,20.249 38.662,23.026C38.662,25.802 37.876,28.419 36.505,30.338C35.786,31.355 35.923,32.498 36.874,33.192Z', style: { opacity: volume > 0 ? 1 : 0 } }), jsx("path", { className: 'transition-opacity duration-300 ease-exponential', d: 'M45.738,39.394C46.624,39.981 47.712,39.799 48.354,38.868C51.402,34.69 53.208,28.904 53.208,23.026C53.208,17.148 51.427,11.31 48.354,7.183C47.712,6.252 46.624,6.07 45.738,6.657C44.858,7.249 44.701,8.362 45.399,9.354C48.023,13.032 49.499,17.952 49.499,23.026C49.499,28.099 47.972,32.994 45.399,36.697C44.726,37.689 44.858,38.802 45.738,39.394Z', style: { opacity: volume > 0.33 ? 1 : 0 } }), jsx("path", { className: 'transition-opacity duration-300 ease-exponential', d: 'M54.679,45.708C55.514,46.32 56.683,46.082 57.315,45.121C61.498,39.091 64,31.447 64,23.026C64,14.604 61.422,6.986 57.315,0.93C56.683,-0.056 55.514,-0.269 54.679,0.343C53.804,0.956 53.668,2.079 54.33,3.071C58.012,8.514 60.342,15.379 60.342,23.026C60.342,30.647 58.012,37.562 54.33,42.98C53.668,43.972 53.804,45.095 54.679,45.708Z', style: { opacity: volume > 0.66 ? 1 : 0 } })] }) }), jsxs(DropDownItems, { anchor: {
                                             gap: '.5rem',
                                             padding: '.375rem',
                                             to: 'top',
-                                        }, className: 'bg-neutral-900/50 px-1.5 py-1.5 text-neutral-50 backdrop-blur-xs backdrop-brightness-110', static: true, children: [jsx(DropDownItem, { as: 'button', className: 'flex size-6 items-center justify-center rounded-xs transition-transform duration-300 ease-exponential active:scale-95 pointer-fine:hover:scale-105 pointer-fine:active:scale-95', onClick: increaseVolume, title: 'Increase volume', children: jsx(SpeakerPlusFill, { className: 'size-full scale-80 drop-shadow-[0_.125rem_1rem] drop-shadow-neutral-950/75' }) }), jsx(DropDownSeparator, { className: 'mx-auto my-2 h-24 w-2 cursor-grab overflow-clip rounded-md bg-neutral-50/50 backdrop-blur-xs backdrop-brightness-110 transition-[width] duration-300 ease-exponential active:w-4 pointer-fine:hover:w-4 pointer-fine:active:w-4', children: jsx("div", { className: 'grid size-full rotate-180 transition-rows duration-300 ease-exponential', style: { gridTemplateRows: `${volume}fr` }, children: jsx("div", { className: 'overflow-y-hidden', children: jsxs("div", { className: 'size-full bg-neutral-50/70 text-[1px] text-transparent backdrop-blur-xs backdrop-brightness-125', children: [volume * 100, "%"] }) }) }) }), jsx(DropDownItem, { as: 'button', className: 'flex size-6 items-center justify-center rounded-xs transition-transform duration-300 ease-exponential active:scale-95 pointer-fine:hover:scale-105 pointer-fine:active:scale-95', onClick: decreaseVolume, title: 'Decrease volume', children: jsx(SpeakerMinusFill, { className: 'size-full scale-80 drop-shadow-[0_.125rem_1rem] drop-shadow-neutral-950/75' }) })] })] }), jsx("button", { className: 'flex size-6 items-center justify-center rounded-xs transition-transform duration-300 ease-exponential active:scale-95 pointer-fine:hover:scale-105 pointer-fine:active:scale-95', onClick: enterPictureInPicture, title: 'Enter Picture-in-Picture', children: jsx(RectangleFillOnArrowDownForwardTopleadingRectangle, { className: 'size-full scale-80 drop-shadow-[0_.125rem_1rem] drop-shadow-neutral-950/75' }) }), jsx("button", { className: 'flex size-6 items-center justify-center rounded-xs transition-transform duration-300 ease-exponential active:scale-95 pointer-fine:hover:scale-105 pointer-fine:active:scale-95', onClick: handleRemotePlayback, title: 'Remote Playback', children: jsx(RectangleTriangleUp, { className: 'size-full scale-80 drop-shadow-[0_.125rem_1rem] drop-shadow-neutral-950/75' }) }), jsxs(DropDown, { children: [jsx(DropDownButton, { arrow: false, className: 'flex size-6 items-center justify-center rounded-xs transition-transform duration-300 ease-exponential active:scale-95 pointer-fine:hover:scale-105 pointer-fine:active:scale-95', title: 'Other Settings', children: jsx(GearshapeFill, { className: 'size-full scale-80 drop-shadow-[0_.125rem_1rem] drop-shadow-neutral-950/75' }) }), jsx(DropDownItems, { anchor: {
+                                        }, className: 'bg-neutral-900/50 px-1.5 py-1.5 text-neutral-50 backdrop-blur-xs backdrop-brightness-110', children: [jsx(DropDownItem, { as: 'button', className: 'flex size-6 items-center justify-center rounded-xs transition-transform duration-300 ease-exponential active:scale-95 pointer-fine:hover:scale-105 pointer-fine:active:scale-95', onClick: increaseVolume, title: 'Increase volume', children: jsx(SpeakerPlusFill, { className: 'size-full scale-80 drop-shadow-[0_.125rem_1rem] drop-shadow-neutral-950/75' }) }), jsx(DropDownSeparator, { "aria-label": 'Volume slider', "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": volume * 100, className: 'mx-auto my-2 h-24 w-2 cursor-grab overflow-clip rounded-md bg-neutral-50/50 backdrop-blur-xs backdrop-brightness-110 transition-[width] duration-300 ease-exponential active:w-4 pointer-fine:hover:w-4 pointer-fine:active:w-4', onMouseDown: initiateTrackVolume, onTouchStart: initiateTrackVolume, role: 'slider', children: jsx("div", { "aria-hidden": 'true', className: 'grid size-full rotate-180 transition-rows duration-300 ease-exponential', style: { gridTemplateRows: `${volume}fr` }, children: jsx("div", { className: 'overflow-y-hidden', children: jsxs("div", { className: 'size-full bg-neutral-50/70 text-[1px] text-transparent backdrop-blur-xs backdrop-brightness-125', children: [volume * 100, "%"] }) }) }) }), jsx(DropDownItem, { as: 'button', className: 'flex size-6 items-center justify-center rounded-xs transition-transform duration-300 ease-exponential active:scale-95 pointer-fine:hover:scale-105 pointer-fine:active:scale-95', onClick: decreaseVolume, title: 'Decrease volume', children: jsx(SpeakerMinusFill, { className: 'size-full scale-80 drop-shadow-[0_.125rem_1rem] drop-shadow-neutral-950/75' }) })] })] }), jsx("button", { className: 'flex size-6 items-center justify-center rounded-xs transition-transform duration-300 ease-exponential active:scale-95 pointer-fine:hover:scale-105 pointer-fine:active:scale-95', onClick: enterPictureInPicture, title: 'Enter Picture-in-Picture', children: jsx(RectangleFillOnArrowDownForwardTopleadingRectangle, { className: 'size-full scale-80 drop-shadow-[0_.125rem_1rem] drop-shadow-neutral-950/75' }) }), jsx("button", { className: 'flex size-6 items-center justify-center rounded-xs transition-transform duration-300 ease-exponential active:scale-95 pointer-fine:hover:scale-105 pointer-fine:active:scale-95', onClick: handleRemotePlayback, title: 'Remote Playback', children: jsx(RectangleTriangleUp, { className: 'size-full scale-80 drop-shadow-[0_.125rem_1rem] drop-shadow-neutral-950/75' }) }), jsxs(DropDown, { children: [jsx(DropDownButton, { arrow: false, className: 'flex size-6 items-center justify-center rounded-xs transition-transform duration-300 ease-exponential active:scale-95 pointer-fine:hover:scale-105 pointer-fine:active:scale-95', title: 'Other Settings', children: jsx(GearshapeFill, { className: 'size-full scale-80 drop-shadow-[0_.125rem_1rem] drop-shadow-neutral-950/75' }) }), jsx(DropDownItems, { anchor: {
                                             gap: '.5rem',
                                             padding: '.375rem',
                                             to: 'top end',